Introduction à HTML5

Introduction à HTML5

Introduction HTML5 David Rousset Architecte dveloppeur Microsoft France http://blogs.msdn.com/iefrance Stanislas Quastana, CISSP Architecte Infrastructure bonjour

au programme de cette session du Web de lHTML des exemples de codes

des fruits du mtal des pandas de lopra des standards

des technos des organisations des navigateurs de la mauvaise foi des balises

des organisations de lACID des tests des vrits des contre vrits

des barbus Et 2 beaux gosses !! ou pas ;-) HTML5 aussi hype que le Cloud ?

The World is moving to HTML5 Steve Jobs Apple CEO Were betting big on HTML5 Vic Gundotra

Google Vice President, Engineering The future of the Web is HTML5 Dean Hachamovitch Microsoft Corporate Vice President of Internet Explorer Cest quoi

lHTML5 ? HTML5 en rsum trs simplifi HTML5 : Le markup de la future gnration dapplications Web CSS3 (Cascade Style Sheet) : permet dappliquer des styles au document SVG 1.1 (Scalable Vector Graphics) : moteur de dessin vectoriel + plein dautres technologies

HTML5 Etat actuel ? Les diffrentes phases des spcifications au W3C First Public Working Draft

Working Draft HTML5 Candidate Recommendation Recommendation Proposed

Recommendatio Recommendatio n n Recommendatio Recommendatio n n

2022 ? Cartographie des technos HTML5 Geolocation Geolocation SVG SVG

Web Web Apps Apps CSS CSS ECMA W3C

ECMA ECMA Script Script 262 262 HTML HTML Recomm

endation Recomm endation Last Call Candidate Candidate Working

Draft First Public Working Draft ECMAScript ECMAScript262 262

Geolocation GeolocationAPI API Filters Filters Fonts Fonts SMIL SMIL Gradients

Gradientsand andPatterns Patterns Styling Styling Scripting Scripting Painting, Painting,Filling, Filling,Color

Color Transforms Transforms Text Text Paths Paths Basic BasicShapes Shapes

Document DocumentStructure Structure DOM DOML3L3Abstract AbstractSchemas Schemas DOM DOML3L3Views Viewsand

andFormatting Formatting DOM DOML3L3XPath XPath DOM DOML3L3Validation Validation DOM DOML3L3Load

Loadand andSave Save DOM DOML3L3Events Events DOM DOML3L3Core Core DOM

DOML2L2HTML HTML DOM DOML2L2Traversal Traversaland andRange Range DOM DOML2L2Style Style

DOM DOML2L2Events Events DOM DOML2L2Views Views DOM DOML2L2Core Core DOM

DOML1L1 XmlHttpRequest XmlHttpRequestL2L2 XmlHttpRequest XmlHttpRequest Web WebWorkers Workers Web WebStorage

Storage Web WebSockets SocketsAPI API Web WebIDL IDL Web WebSQL

SQLDatabase Database Web WebDOM DOMCore Core Uniform UniformMessaging MessagingPolicy Policy

Server-Sent Server-SentEvents Events Selectors SelectorsAPI APIL2L2 Selectors SelectorsAPI API Progress

ProgressEvents Events Programmable Programmable HTTP HTTP Caching Caching and and

Serving Serving CSS CSS Generated Generated Content Content forfor

Paged Paged Media Media Index IndexDB DB File FileAPI

API Element ElementTraversal Traversal CORS CORS CSS CSSAnimations Animations CSS

CSSTransitions Transitions CSS CSS3D 3DTransformations Transformations CSS CSS2D 2DTransformations Transformations

CSS CSSImage ImageValues Values CSS CSSFlexible FlexibleBox BoxLayout Layout CSS

CSSGrid GridPositioning Positioning CSS CSSScoping Scoping CSS CSSBasic BasicUser UserInterface

Interface CSS CSSColor Color CSS CSSSpeech Speech CSS CSSMedia MediaQueries

Queries CSS CSSTemplate TemplateLayout Layout CSS CSSMulti-column Multi-columnLayout Layout CSS

CSSBasic BasicBox BoxModel Model CSS CSSFonts Fonts CSS CSSBackgrounds Backgroundsand

andBorders Borders CSS CSSRuby Ruby CSS CSSLine LineGrid Grid CSS

CSSWriting WritingModes Modes CSS CSSText Text CSS CSSCascading Cascadingand andInheritance

Inheritance CSS CSSValues Valuesand andUnits Units CSS CSSPrint PrintProfile Profile

CSS CSSPaged PagedMedia Media CSS CSSNamespaces Namespaces CSS CSSSnapshot Snapshot2007

2007 Text Textalternatives alternatives Polyglot PolyglotMarkup Markup HTML5 HTML5Diff Difffrom

fromHTML4 HTML4 HTML5 HTML5Markup Markup HTML+RDFa HTML+RDFa Microdata Microdata Canvas

Canvas2D 2DContext Context HTML5 HTML5 HTML5 un peu dhistoire au dbut il y avait les dinosaures

Un peu dhistoire de la balise HTML 1998 Les membre du W3C prennent la dcision de ne plus faire voluer HTML (stabilis en version 4.01) et de se concentrer sur lutilisation de lXML 2000

Naissance dune nouvelle spcification : lXHTML 1.0 (eXtensible Hyper Text Markup Language). Compatibilit ascendante avec HTML 4.01 2002 XHTML 1.0 subit une rvision Premier brouillon dXHTML 2.0 (pas de compatibilit descendante

Un peu dhistoire de la balise HTML 2004 Cration du WHATWG (Web HyperText Application Technology Working Group) Un peu dhistoire de la balise HTML 2004 2006 2007

Cration du WHATWG Annonce du W3C que lXHTML 2.0 ne deviendra jamais un standard Renaissance du groupe de travail HTML au sein du W3C. Les membres votent pour utiliser les spcifications du WHATWG comme base de la nouvelle version dHTML5

2 organisations pour crer lHTML5 Groupe de travail HTML 1 Editeur 8 membres du Comit Mailing lists Groupe de travail HTML 442 membres : 184 venant de 51 organisations 258 experts invits

Paul Cotton Microsoft 17 16 Sam Ruby IBM

Maciej Stachowiak Apple 19 14 Ian Hickson Google

11 2 2 1 2

2 documents rfrence pour HTML5 Il est pass o le 5 ? Living Standard ? WHATTF ? Back To the Future ?

Demo retour vers le futur Que nous dit Bruce sur son blog ? Source : http ://www.brucelawson.co.uk/2010/in-praise-of-ie 6 / A lpoque on disait :

IE6 is the highest form of browser. If people arent using it thats their problem the silly fools Que nous dit Bruce sur son blog ? Source : http ://www.brucelawson.co.uk/2010/in-praise-of-ie 6 / Constat :

IE6 didnt become a zombie despite designers and developers; it became a zombie because of the active support for a monoculture by application developers Que nous dit Bruce sur son blog ? Source : http ://www.brucelawson.co.uk/2010/in-praise-of-ie 6

/ Aujourdhui ? Allons voir ensemble sa rponse sur son blog Qui sera le nouveau IE6 ? Un navigateur qui volue trs (trop ?) rapidement en implmentant des technologies non standardises (W3C) Un navigateur choisi comme rfrence unique par les dveloppeurs (dveloppement

spcifique voire propritaire) Un navigateur ayant une part de march significative permettant dimposer SA version dHTML5 Les mchantes dmos propritaires HTML5 les balises utilisables dbut 2011

Commenons par le Doctype Avant Aprs Vous avez les bases pour plonger dans HTML5 ;-) La balise

Permet de lire un fichier audio sans ncessiter un plug-in (Flash, Quicktime, Silverlight) Le lecteur est fourni par dfaut par le navigateur mais peut-tre refait Spcifications du W3C : http:// www.w3.org/TR/html5/video.html#attr-media-preload

Codecs pour la balise

X Mozilla Firefox 3.6 Google Chrome Advanced Audio Coding si extension .m4a ou .aac X

X X si extension .m4a La balise

h264 Internet Explorer 9 WebM X Theora X* Mozilla Firefox 4

X X Google Chrome X X

X X Safari 5 Opera 11 X

La balise Permet de dessiner dans une Bitmap APIs en JavaScript et primitives simples Mode immdiat Fire and Forget Lintrieur est non visible dans le DOM 69

Regardons ce que cela donne en dmo Agenda Cest quoi lHTML5 ? Etat actuel des technologies autour dHTML5 Un peu dhistoire de la balise HTML5 Les balises HTML5 utilisables Et les autres technos ? Lavis des dveloppeurs Web Synthse

Les autres technologies autour dHTML5 CSS3 SVG 1.1 WOFF Golocalisation WebForms Etc

CSS3 Media Queries Permet de sadapter aux diffrentes rsolutions/priphriques par style : Rsolution limite pour les Smartphones Rsolution normale pour les netbooks Large et haute rsolution sur PC/Mac Permet aussi de sadapter lorientation, au ratio, etc. 74

Exemple de code : CSS3 Media Queries

media="screen and (min-width:1025px)" type="text/css" /> 75 CSS3 Backgrounds & Borders Coins arrondis avec la proprit border-radius Plusieurs fonds possibles en arrire-plan par lment On peut y mettre du SVG

Ombre porte avec la proprit box-shadow 76 Exemple de code : CSS3 Backgrounds & Borders div { border-radius: 152px 304px 228px 152px;

border-style: double; border-width: 42px; padding: 12px; } 77 CSS Regardons ce que cela donne en dmo

Fonts WOFF Web Open Font Format Wrapper sur TTF et OTF Format compress Permet dviter dtre dpendant des Fonts disponibles sur la machine Tlchargement depuis le serveur

79 Scalable Vector Graphics (SVG) Permet de crer et dessiner des lments graphiques vectoriels en 2D avec du XML retained mode : larbre est gard en mmoire et peut tre manipul aprs coup Accs complet via le DOM aux lments SVG Peuvent tre styls via CSS 80

Exemple de code SVG

81 SVG Regardons ce que cela donne en dmo Web Forms Illustration de stratgies dimplmentations diffrentes

Les technos exprimentales Doivent tre prfixes : -o, -ms, -webkit, -moz Quelques exemples WebSockets WebGL WebWorkers Le danger par lexemple : WebSockets

https://bugzilla.mozilla.org/show_bug.cgi?id=602028 WebSockets won't exit demoware status for a few years. Ah bon? Prefixing alors ? Les dveloppeurs Web doivent tre au courant ! Le danger par lexemple : WebSockets Oui mais si on fait a : We most certainly should not Prefixing in Gecko doesn't gain anybody

anything It only hurts us, because Firefox doesn't implement HTML5 We [Mozilla] are constantly eating WebKit's dust Ah oui, cest sr, en terme de perception, cest moins cool Le danger par lexemple : WebSockets Pourtant, quelquun de raisonnable le dit: The reason that we want to prefix it is because

we know, 100%, that it's going to change. We also know that other browsers will update it as well. We don't want it confused with anything other than experimental and the best way to do that is prefix it as such. The new version will not be compatible with existing implementations. Donc faites trs attention ! Soyez conscients de ce qui exprimental ou non Si vous partez sur ces nouveauts, soyez prts

revoir frquemment votre code Attention la dpendance sur limplmentation dun navigateur Le buzz marketing autour du support de HTML5 nest pas prt de sarrter Demo ms CSS3 2D Transform HTML5 Les suites de tests ?

ACID3 ? 100 tests unitaires sur 6 catgories Maintenu par Ian Hickson (Google) Source : http://limi.net/articles/firefox-acid3 Dis Stan, cest quoi un test unitaire?

Sans eux, difficile davoir un seul Markup 99 HTML5test.com ? Se contente de faire du feature detection Et on sait comment si cest bien implment ? Teste la prsence de technos exprimentales Cest possible de supporter un truc avant quil se

soit fini ? Donne des Bonus Points !?! Sur quelle base sont ventils les points ? HTML5 lavis des dveloppeurs Web Etude Forester Consulting "The Evolution Of Web Development An Inflection Point In Web Design And Evolving Standards Sets The Stage For HTML 5 Adoption Septembre 2010

Base : 210 dveloppeurs Web (USA & Royaume Uni) Source : Etude Forester Consulting "The Evolution Of Web Development An Inflection Point In Web Design And Evolving Standards Sets The Stage For HTML 5 Adoption Septembre 2010 Base : 210 dveloppeurs Web (USA & Royaume Uni) Source : Etude Forester Consulting "The Evolution Of Web Development An Inflection Point In Web Design And Evolving Standards Sets The Stage For HTML 5 Adoption Septembre 2010 Base : 210 dveloppeurs Web (USA & Royaume Uni)

HTML5 un point rapide sur loutillage Outillage Majoritairement du Notepad (voir Notepad++ ! ) Les outils modernes ne proposent pour linstant que de laide via auto-completion Helper HTML5 pour Visual Studio 2008 & 2010 Adobe CS5 : va un peu plus loin avec de la preview multiscreen (bas sur WebKit)

Certains commencent le proposer dans les templates WebMatrix Outillage Les frameworks sont une bonne approche : ASP.NET MVC Autres approches intressantes Adobe Illustrator avec plug-in MS pour gnrer du

Exemple de rsultat : http://www.awkbird.com/labs/backyard/ HTML5 quelques dmos bling-bling HTML5 petite synthse

Synthse Les technologies autour dHTML5 sont le futur du Web mais rien nest pas encore finalis lheure actuelle Certaines balises sont utilisables Dautres sont plus exprimentales Dautres sont carrment propritaires (cest moche) Loutillage autour dHTML5 nest en qu ses dbuts et cest normal car les spcifications ne

devraient tre finalises que courant 2011 (croisons les doigts) Ressource utiles Blog franais sur Internet Explorer http://blogs.msdn.com/iefrance Votre potentiel, notre passion TM

2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows 7 and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Recently Viewed Presentations

  • Coflore Scaling up flow chemistry

    Coflore Scaling up flow chemistry

    Coflore design principle. CSTRs in series. Increased flexibility. Residence time. multi phase (G/L, S/L) Low pressure drop. cheaper pump. Easy scale up. Dynamic mixing
  • PENGAYUN # menukarkan isyarat AT kepada AU tanpa

    PENGAYUN # menukarkan isyarat AT kepada AU tanpa

    Oleh sebab kapasitor dalam litar tangki di sambung secara siri, maka : ... Wingdings Engravers MT Times New Roman Arial Black Bookman Old Style 1_Ocean Microsoft Word Document Microsoft Equation 3.0 Slide 1 Slide 2 Slide 3 Slide 4 Slide...
  • Reflection

    Reflection

    Word Up!* ESL + Linguistics = Learning Community with an "Interlanguage" Focus *exclamation - I understand you; I agree with you. A colloquial phrase originating from within the African-American community… often shortened to simply "Word!"
  • Testing These slides are derived from various sources,

    Testing These slides are derived from various sources,

    Functional testing started with the proposal that we treat a program as a function. To test it, we would feed it inputs and check its outputs. In functional testing, knowledge of the inner workings of the "function" is less important...
  • All about ancient Maya civilization!!!!

    All about ancient Maya civilization!!!!

    All about ancient Maya civilization!!!! By Destiny Turner geography!!!!!<3 The Mayan civilization lived in Central America which now consist in Yucatan, Guatemala, Belize, and Southern Mexico. This whole area lies south of the tropic of Cancer, and north of the...
  • Partnerships with LMIC Isla Kuhn Medical Librarian, University

    Partnerships with LMIC Isla Kuhn Medical Librarian, University

    Nigerian nurse, also happened to be a lay preacher, was involved in a wedding in London. Everyone from Nigeria was able to have 30kg luggage allowance. Nigerian nurse effectively told them they're replace the weight of the present with books...
  • God &amp; Caesar: The ancient modern clash

    God & Caesar: The ancient modern clash

    If don't have it, then email me and I will send it to you. ... and philosophical teachings of the Roman Catholic Church. Cicero, St. Augustine of Hippo, St. Thomas Aquinas. Principles as those found in Deuteronomy 20:10-20. Overriding principle...
  • Arduino MIDI Processing

    Arduino MIDI Processing

    Arduino for Audio . The more powerful the base processor the better and it will make processing easier. For example: Shortcomings in terms of peripherals can be accommodated for by adding addional input/output pins using external chips.