Vous êtes sur la page 1sur 105

Introduction à HTML5

David Rousset Stanislas Quastana, CISSP


Architecte développeur Architecte Infrastructure
Microsoft France
http://blogs.msdn.com/iefrance
bonjour
au programme
de cette session
du Web
de l’HTML
des exemples de codes
des fruits
du métal
des pandas
de l’opéra
des standards
des technos
des organisations
des navigateurs
de la mauvaise foi
des balises
des organisations
de l’ACID
des tests
des vérités
des contre vérités
des barbus
Et 2 beaux gosses !!
ou pas ;-)
HTML5
aussi « hype » que le Cloud ?
« The World
is moving to
HTML5 »
Steve Jobs
Apple CEO
“We’re
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
C’est quoi
l’HTML5 ?
HTML5 en résumé très simplifié
HTML5 : Le markup de la future génération
d’applications Web

CSS3 (Cascade Style Sheet) : permet d’appliquer


des styles au document

SVG 1.1 (Scalable Vector Graphics) : moteur de


dessin vectoriel

+ plein d’autres technologies


HTML5
Etat actuel ?
Les différentes phases des
spécifications au W3C

First Public Candidate Proposed Recommendatio


Working Draft Recommendatio Recommendatio
Working Draft Recommendation Recommendatio n
n
Recommendation n
n

HTML5 2022 ?
Cartographie des technos “HTML5”

ECMA

ECMA
ECMA
Script
Script
262
262

ECMAScript
ECMAScript262
262
endation
Recomm

Geolocation
Geolocation Geolocation
GeolocationAPI API
Filters
Filters
Fonts
Fonts
SMIL
SMIL
Gradients
Gradientsand andPatterns
Patterns
Styling
Styling
SVG
SVG

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
endation
Candidate
Candidate
Recomm

DOM
DOML3L3XPathXPath
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
DOML2L2ViewsViews
Web Apps
Apps

DOM
DOML2L2Core Core
DOM
DOML1L1
XmlHttpRequest
XmlHttpRequestL2L2
XmlHttpRequest
XmlHttpRequest
Web

Web
WebWorkers
Workers
Web
WebStorage
Storage
Web
WebSockets
SocketsAPI API
Web
WebIDL IDL
Last Call

Web
WebSQLSQLDatabase
Database
Web
WebDOM DOMCore Core
W3C

Uniform
UniformMessaging
MessagingPolicyPolicy
Server-Sent
Server-SentEventsEvents
Selectors
SelectorsAPI APIL2L2
Selectors
SelectorsAPI API
Progress
ProgressEvents
Events
Programmable
Programmable
HTTP
HTTP
Caching
Caching
and
and
Serving
Serving
Index
IndexDB DB
File
FileAPI
API
Element
ElementTraversal
Traversal
CORS
CORS
CSS
CSSAnimations
Animations
CSS
CSSTransitions
Transitions
CSS
CSS3D3DTransformations
Transformations
CSS
CSS2D2DTransformations
Transformations
CSS
CSSImage
ImageValues
Values
CSS
CSSFlexible
FlexibleBoxBoxLayout
Layout
Working

CSS
CSSGrid
GridPositioning
Positioning
Draft

CSS
CSSScoping
Scoping
CSS
CSSBasic
BasicUser
UserInterface
Interface
CSS
CSSColor
Color
CSS
CSSSpeech
Speech
CSS
CSSMedia
MediaQueries
Queries
CSS
CSSTemplate
TemplateLayout
Layout

CSS
CSS
CSS
CSSMulti-column
Multi-columnLayoutLayout
CSS
CSSBasic
BasicBox BoxModel
Model
CSS
CSSFonts
Fonts
CSS
CSSBackgrounds
Backgroundsand andBorders
Borders
CSS
CSS
Generated
Generated
Content
Content
forfor
Paged
Paged
Media
Media
CSS
CSSRuby
Ruby
CSS
CSSLine
LineGrid
Grid
CSS
CSSWriting
WritingModes
Modes
CSS
CSSText
Text
CSS
CSSCascading
Cascadingand andInheritance
Inheritance
Working CSS
CSSValues
Valuesand andUnits
Units
CSS
CSSPrint
PrintProfile
Profile
Public CSS
CSSPaged
PagedMedia
Media

Draft
First
CSS
CSSNamespaces
Namespaces
CSS
CSSSnapshot
Snapshot2007 2007
Text
Textalternatives
alternatives
Polyglot
PolyglotMarkup
Markup

HTML
HTML
HTML5
HTML5DiffDifffrom
fromHTML4
HTML4
HTML5
HTML5Markup
Markup
HTML+RDFa
HTML+RDFa
Microdata
Microdata
Canvas
Canvas2D 2DContext
Context
HTML5
HTML5
HTML5
un peu d’histoire
au début il y avait les dinosaures
Un peu d’histoire de la balise HTML
• Les membre du W3C prennent la décision de ne plus faire
évoluer HTML (stabilisé en version 4.01) et de se
1998 concentrer sur l’utilisation de l’XML

• Naissance d’une nouvelle spécification : l’XHTML 1.0


(eXtensible Hyper Text Markup Language).
2000 • Compatibilité ascendante avec HTML 4.01

• XHTML 1.0 subit une révision


• Premier brouillon d’XHTML 2.0 (pas de compatibilité
2002 descendante
Un peu d’histoire de la balise HTML
• Création du WHATWG (Web HyperText Application
2004 Technology Working Group)
Un peu d’histoire de la balise HTML

• Création du WHATWG
2004

• Annonce du W3C que l’XHTML 2.0 ne deviendra jamais


un standard
2006
• Renaissance du groupe de travail HTML au sein du W3C.
Les membres votent pour utiliser les spécifications du
2007 WHATWG comme base de la nouvelle version d’HTML5
2 organisations pour créer l’HTML5
Groupe de travail HTML Groupe de travail HTML
442 membres : • 1 Editeur
• 184 venant de 51 organisations • 8 membres du Comité
• 258 experts invités • Mailing lists

Paul Cotton Sam Ruby Maciej Stachowiak Ian Hickson


Microsoft IBM Apple Google

17 16 19 14 11 2 2 1 2
2 documents « référence » 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 l’époque on disait :

“IE6 is the highest form of browser. If people


aren’t using it that’s 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 didn’t 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
/

Aujourd’hui ?

Allons voir ensemble sa réponse sur son blog


Qui sera le nouveau IE6 ?
Un navigateur qui évolue très (trop ?)
rapidement en implémentant des technologies
non standardisées (W3C)

Un navigateur choisi comme référence unique


par les développeurs (développement
spécifique voire propriétaire)

Un navigateur ayant une part de marché


significative permettant d’imposer SA version
d’HTML5
Les méchantes démos
propriétaires
HTML5
les balises utilisables début 2011
Commençons par le Doctype
Avant

Après
Vous avez les bases pour plonger
dans HTML5 ;-)
La balise <audio>
Permet de lire un fichier audio sans nécessiter
un plug-in (Flash, Quicktime, Silverlight…)

Le lecteur est fourni par défaut par le


navigateur mais peut-être refait

Spécifications du W3C : http://


www.w3.org/TR/html5/video.html#attr-media-preload
<Audio>

P’tite démo
Codecs pour la balise <Audio>
3 CODEC :
MP3 : codec propriétaire soumis à royalties
Vorbis : codec libre
Advanced Audio Coding (AAC) : codec libre
MP3 Vorbis Advanced Audio
Coding
Internet Explorer 9 X si extension .m4a ou
.aac
Mozilla Firefox 3.6 X

Google Chrome X X si extension .m4a


La balise <video>
Le lecteur est fourni par défaut par le
navigateur mais peut-être refait
h264 WebM Theora

Internet Explorer 9 X X*

Mozilla Firefox 4 X X

Google Chrome X X

Safari 5 X

Opera 11 X X
<VIDEO>

Regardons ce que cela donne en démo


Les lacunes de la balise <video>
Pas de support de DRM

Pas de streaming adaptatif

Pas de codec spécifié par le W3C


Peut donc nécessiter un triple encodage
La balise <Canvas>
Permet de dessiner dans une Bitmap

APIs en JavaScript et primitives simples

Mode immédiat « Fire and Forget »

L’intérieur est non visible dans le DOM

69
<CANVAS>

Regardons ce que cela donne en démo


Agenda
C’est quoi l’HTML5 ?
Etat actuel des technologies autour d’HTML5
Un peu d’histoire de la balise HTML5
Les balises HTML5 utilisables
Et les autres technos ?
L’avis des développeurs Web
Synthèse
Les autres technologies autour
d’HTML5
CSS3
SVG 1.1
WOFF
Géolocalisation
WebForms
Etc…
CSS3 Media Queries
Permet de s’adapter aux différentes
résolutions/périphériques par style :
Résolution limitée pour les Smartphones
Résolution normale pour les netbooks
Large et haute résolution sur PC/Mac

Permet aussi de s’adapter à l’orientation,


au ratio, etc.

74
Exemple de code : CSS3 Media
Queries
<link href=“mobile.css" rel="stylesheet"
media="screen and (max-width:480px)" type=“
text/css" />

<link href=“netbook.css" rel="stylesheet"


media="screen and (min-width:481px) and (max-
width: 1024px)"
type="text/css" />

<link href=“laptop.css" rel="stylesheet"


media="screen and (min-width:1025px)" type="text/css" />

75
CSS3 Backgrounds & Borders
Coins arrondis avec la propriété border-radius

Plusieurs fonds possibles en arrière-plan par


élément
On peut y mettre du SVG

Ombre portée avec la propriété 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 démo


Fonts WOFF
Web Open Font Format
Wrapper sur TTF et OTF
Format compressé

Permet d’éviter d’être dépendant des Fonts


disponibles sur la machine

Téléchargement depuis le serveur

79
Scalable Vector Graphics (SVG)
Permet de créer et dessiner des éléments
graphiques vectoriels en 2D avec du XML

« retained mode » : l’arbre est gardé en


mémoire et peut être manipulé après coup

Accès complet via le DOM aux éléments SVG

Peuvent être stylés via CSS


80
Exemple de code SVG

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">


<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>

81
SVG

Regardons ce que cela donne en démo


Web Forms

Illustration de stratégies d’implémentations


différentes
Les technos expérimentales
Doivent être préfixées :
-o, -ms, -webkit, -moz

Quelques exemples
WebSockets
WebGL
WebWorkers
Le danger par l’exemple : 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 développeurs Web


doivent être au courant !
Le danger par l’exemple : 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, c’est sûr, en terme de perception, c’est


moins cool…
Le danger par l’exemple : WebSockets
Pourtant, quelqu’un 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 très attention !
Soyez conscients de ce qui expérimental ou non

Si vous partez sur ces nouveautés, soyez prêts à


revoir fréquemment votre code

Attention à la dépendance sur l’implémentation


d’un navigateur

Le buzz marketing autour du “support de


HTML5” n’est pas prêt de s’arrêter…
Demo –ms CSS3 2D Transform
HTML5
Les suites de tests ?
ACID3 ?
100 tests unitaires sur 6 catégories

Maintenu par Ian Hickson (Google)


Source : http://limi.net/articles/firefox-acid3
Dis Stan, c’est quoi un test unitaire?
Sans eux, difficile d’avoir un seul Markup…

99
HTML5test.com ?
Se contente de faire du feature detection
Et on sait comment si c’est bien implémenté ?

Teste la présence de technos expérimentales


C’est possible de supporter un truc avant qu’il se
soit fini ?

Donne des « Bonus Points » !?!

Sur quelle base sont ventilés les points ?


HTML5
l’avis des développeurs 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 développeurs 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 développeurs 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 développeurs Web (USA & Royaume Uni)
HTML5
un point rapide sur l’outillage
Outillage
Majoritairement du Notepad (voir Notepad++ ! )

Les outils modernes ne proposent pour l’instant


que de l’aide 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 intéressantes


Adobe Illustrator avec plug-in MS pour générer du
<canvas>
Exemple de résultat :
http://www.awkbird.com/labs/backyard/
HTML5
quelques démos « bling-bling »
HTML5
petite synthèse
Synthèse
Les technologies autour d’HTML5 sont le futur
du Web mais rien n’est pas encore finalisé à
l’heure actuelle
Certaines balises sont utilisables
D’autres sont plus « expérimentales »
D’autres sont carrément propriétaires (c’est moche)

L’outillage autour d’HTML5 n’est en qu’à ses


débuts et c’est normal car les spécifications ne
devraient être finalisées que courant 2011
(croisons les doigts)
Ressource utiles
Blog français 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.