Découverte HTML5/CSS3

François-Guillaume Ribreau twitter.com/fgribreau fgribreau.com blog.geekfg.net Veille technologique Javascript (jQuery) / HTML5 / CSS3 / R&D Web / Sécurité

<intro>

CSS3 ? HTML5 ?

</intro>

W3C World Wide Web Consortium «La W3C est un organisme de standardisation [...] chargé de promouvoir la compatibilité des technologies du WEB telles que HTML, XHTML, [...], CSS, [...].»

W3C World Wide Web Consortium «La W3C est un organisme de standardisation [...] chargé de promouvoir la compatibilité des technologies du WEB telles que HTML, XHTML, [...], CSS, [...].» «Le W3C émet [...] des recommandations à valeur de standards industriels.»

<html>

HTML «HyperText Markup Language»

XHTML «eXtensible HyperText Markup Language»

HTML vs XHTML

HTML vs XHTML Sgml (permissif) Xml (exigeant)

HTML vs XHTML S a le Sgml (permissif) Xml (exigeant)

HTML vs XHTML S a le Sgml (permissif) Xml (exigeant) Propre !

<HtMl> ✔ HTML 4.01 ✗ XHTML 1.1

TOUT en minuscule <HtMl> <html> ✔ HTML 4.01 ✔ HTML 4.01 ✗ XHTML 1.1 ✔ XHTML 1.1

<body><p>Mon Texte</body> ✔ HTML 4.01

<body><p>Mon Texte</body>

Balise ouverte = Balise fermée <body><p>Mon Texte</body> <body><p>Texte en gras italique</p></body> ✔ XHTML 1.1

Eléments vide? <img src="WEI_2009.jpg" alt="sacré fête !"><br> ✔ HTML 4.01

Eléments vide? <img ="WEI_2009.jpg" alt="sacré fête !"></img> <img src="WEI_2009.jpg" alt="sacré fête !"><br> ✔ HTML 4.01

Eléments vide?

Eléments vide? Fermé aussi! <img src="WEI_2009.jpg" alt="sacré fête !" /><br/> ✔ XHTML 1.1

Eléments vide? Fermé aussi! <img src="WEI_2009.jpg" alt="sacré fête !" /><br/> ✔ XHTML 1.1 Mais...mais... Il y a une autre erreur...

<b><i>Texte en gras italique</b></i> ✔ HTML 4.01

<b><i>Texte en gras italique</b></i>

Vériﬁez l’imbrication <b><i>Texte en gras italique</b></i> <b><i>Texte en gras italique</i></b> ✔ XHTML 1.1

Vériﬁez l’imbrication <b><i>Texte en gras italique</b></i> <b><i>Texte en gras italique</i></b> ✔ XHTML 1.1 Mais...mais... Il y a une autre erreur...

Un dernier point...

Le Doctype

Le Doctype = DTD

Le Doctype = DTD = Document Type Deﬁnition

Doctype

Doctype Déﬁnir ce qui est valide (et donc ce qui ne l’est pas) les éléments... ...leurs propriétés

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>Titre de la page</title> </head> <body> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>Titre de la page</title> </head> Doctype XHTML1.1 <body> </body> </html>

Et une page sans doctype ?

Quirks http://www.quirksmode.org/css/quirksmode.html http://en.wikipedia.org/wiki/Quirks_mode Mode

HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 2//EN"> HTML 3.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd"> XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

En résumé... le Doctype <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd">

En résumé... le Doctype long complexe difficile à reteni r <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐transitional.dtd">

Doctype HTML5 <!DOCTYPE html>

...dernier point.

Le (x)HTML permet de structurer le document

</html>

CSS «Cascading Style Sheets»

Le CSS permet de décrire la présentation d’un document

monCss.css

Propriété Valeur monCss.css Element

CSS «Cascading Style Sheets»

Formatage de la police Alignement et contrôle de paragraph Positionnement et afﬁchage d'éléments Marges et espace Pseudo-formats CSS Espaces intérieurs Formatage de tableaux «Cascading Style Sheets» Bordures Formatage de listes Couleurs et images d'arrière plan

</css>

<check>

HTML CSS Contenu Présentation

http://bit.ly/5eSFuS <body style="background-color:#000000;">

http://bit.ly/5eSFuS Plus JAMAIS <body style="background-color:#000000;"> ça !

#1 Pas de CSS/JS inline

<a href="portfolio.html">Portfolio</a>

<a href="portfolio.html">Portfolio</a> <a href="portfolio.html" title="Portfolio">Portfolio</a>

<a href="portfolio.html">Portfolio</a> <a href="portfolio.html" title="Portfolio">Portfolio</a> <a href="portfolio.html" title="Quelques dessins de l'artiste">Portfolio</a>

IE8 IE6 IE5.5

Pourquoi ?

Chaque navigateur possède son propre CSS par défaut

Solution ?? :’(

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-‐size: 100%; vertical-‐align: baseline; background: transparent; } body { line-‐height: 1; } ol, ul { list-‐style: none; } blockquote, q { quotes: none; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, Go a, abbr, acronym, address, big, cite, code, og del, dfn, em, font, img, ins, kbd, q, s, samp, it ! le small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-‐size: 100%; vertical-‐align: baseline; background: transparent; } body { line-‐height: 1; } ol, ul { list-‐style: none; } blockquote, q { quotes: none; }

#2 Utilisez un CSS Reset «Css Reset» sur Google

(X)HTML CSS Contenu Présentation

(X)HTML Contenu Javascript CSS Interaction Présentation

</check>

</rappel>

<pourquoi> CSS 2.1 -> CSS3 ? HTML4 -> HTML5 ?

Pourquoi créer une nouvelle version du langage CSS & (x)HTML ?

Année de la dernière spéciﬁcation (x)HTML ?

Question du jour ! Année de la dernière spéciﬁcation (x)HTML ?

31 Mai 2001 XHTML 1.1

sa ns an s 8 31 Mai 2001 n ! io XHTML 1.1 lu t é vo

Le Webdesigner conçoit le site sous Photoshop

Puis intégration du design

«Le client souhaite des bordures arrondies» « Il veut cette police là ! » « Un texte sur plusieurs colonnes ! » « Cette photo doit subir une rotation de 50° » « Ce titre doit être ombré ! » « ... »

L’intégrateur CSS/HTML...

(quasi)Impossible en pur CSS 2.1

CSS3 le permet ...#FTW

...oui mais pourquoi HTML5 ?

Limites de HTML4 atteintes

Limites de HTML4 atteintes Flash pour afﬁcher du contenu multimédia

Limites de HTML4 atteintes Flash pour afﬁcher du contenu multimédia Flash pour utiliser de nouvelles polices

Limites de HTML4 atteintes Flash pour afﬁcher du contenu multimédia Flash pour utiliser de nouvelles polices Flash pour les animations 3D/complexes

Limites de HTML4 atteintes Flash pour afﬁcher du Vériﬁcation des formulaires contenu multimédia en javascript Flash pour utiliser de nouvelles polices Flash pour les animations 3D/complexes

Limites de HTML4 atteintes Flash pour afﬁcher du Vériﬁcation des formulaires contenu multimédia en javascript Flash pour utiliser de Librairies javascript lourdes nouvelles polices pour gérer le drag&drop Flash pour les animations 3D/complexes

Limites de HTML4 atteintes Flash pour afﬁcher du Vériﬁcation des formulaires contenu multimédia en javascript Flash pour utiliser de Librairies javascript lourdes nouvelles polices pour gérer le drag&drop Flash pour les animations Librairies javascript lourdes 3D/complexes pour animer le contenu

Petit point culture G !

Petit point culture G

Petit point culture Geek !

Petit point culture Geek

Il était une fois en 2004...

Il était une fois en 2004... Mozilla Foundation Apple Opera software Firefox Safari Opera (Gecko) (Webkit) (Presto)

PAS Il était une fois en 2004... Mozilla Foundation Apple Opera software CONTENT ! Firefox (Gecko) Safari (Webkit) Opera (Presto)

WHATWG Web Hypertext Application Technology Working Group

WHATWG Web Hypertext Application Technology Working Group W 3C #in sid e

C’était le petit point culture G !

C’était le petit point culture G

C’était le petit point culture G !

C’était le petit point culture GGeek

</pourquoi>

//Disclaimer

Vous êtes ici //Disclaimer

R <strike> E <basefont> EC <acronym> I <frameset> R <noscript> P <big> <isindex> E <tt> D <applet> <dir> <noframes>

Nouvelles balises

Avec HTML4/CSS2.1

Avec HTML4/CSS2.1 Beaux designs (effets) = énormément* de balise * dans la majorité des cas

HTML5 = plus de sens

Sémantique Méta-données

HTML4 <div id="header"></div> <div id="navigation"></div> <div id="article"> <div id="sidebar"> </div> <div id="section"></div> <div id="footer"></div>

HTML5 <header></header> <nav></nav> <article> <aside></aside> <section></section> <footer></footer>

Code avec HTML5 <header></header> <nav></nav> <article> <aside></aside> <section></section> <footer></footer>

Code avec HTML5 <header></header> <nav></nav> <article> <aside></aside> <section></section> <footer></footer> #FAIL

Multimédia

La vidéo avant HTML5

La vidéo avant HTML5 Format audio/vidéo propriétaire Flash (H.264)

La vidéo avec HTML5

La vidéo avec HTML5 Format audio/vidéo ouvert <video> (Theora & Ogg Vorbis)

La vidéo avec HTML5 Format audio/vidéo ouvert <video> (Theora & Ogg Vorbis) Safari 3.1+ FF 3.1+ Opera 10+

L’audio avec HTML5 Safari 3.1+ Opera 9+

Stockage Hors-ligne

Objectif ? Stocker les données directement sur le poste client

sessionStorage http://www.w3.org/TR/webstorage/

enregistre (clé/valeur) le temps sessionStorage de la session http://www.w3.org/TR/webstorage/

enregistre (clé/valeur) le temps sessionStorage de la session Safari 4+ Firefox 2+ IE 8+ http://www.w3.org/TR/webstorage/

localStorage http://www.w3.org/TR/webstorage/

localStorage enregistrement (clé/valeur) permanent http://www.w3.org/TR/webstorage/

localStorage enregistrement (clé/valeur) permanent Safari 4+ Firefox 2+ IE 8+ http://www.w3.org/TR/webstorage/

Besoin de tables ? D’une base de données relationnelle ?

Database storage Base de données SQL locale http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sql.html#sql

Database storage Base de données SQL locale Safari 3.1+ http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sql.html#sql

Canvas/SVG

WebForms 2.0

datetime number range url color WebForms 2.0

Web Sockets Web Workers Geolocation API FF 3.6 -> Local File API

CSS3 is... awe... [wait for it...] some !

Awesome (génial) !

Les préﬁxes CSS3 [prefix][propriété CSS]

Les préﬁxes CSS3 [prefix][propriété CSS] -webkit- -moz- -o- -ms-

Bordure arrondie avant CSS3 Contenu du block * d’autres formes sont possibles

Bordure arrondie avant CSS3 Equivalent HTML*: <div class="block"> <div> <div></div> Contenu du block </div> <div></div> <div></div> <p>Contenu du block</p> <div></div> <div> De 4 à 8 éléments <div></div> <div></div> </div> pour réaliser la bordure </div> * d’autres formes sont possibles

Bordure arrondie avant CSS3 Images Equivalent HTML*: <div class="block"> <div> <div></div> Contenu du block </div> <div></div> <div></div> <p>Contenu du block</p> <div></div> <div> De 4 à 8 éléments <div></div> <div></div> </div> pour réaliser la bordure </div> Trop de CSS [...] * d’autres formes sont possibles

Bordure arrondie avec CSS3 Contenu du block HTML: <div>Contenu du block</div> CSS3:

Bordure arrondie avec CSS3 Contenu du block HTML: <div>Contenu du block</div> CSS3: div {border-radius:20px;}

Les ombres avant CSS3 Contenu du block Texte avec Ombre * d’autres formes sont possibles

Les ombres avant CSS3 Contenu du block Texte avec Ombre Equivalent HTML*: <div class="block"> <div> <p>Contenu du block</p> </div> <div> <div></div> <div></div> </div> </div> * d’autres formes sont possibles

Les ombres avant CSS3 Fla sh Contenu du block Texte avec Ombre Equivalent HTML*: <div class="block"> <div> <p>Contenu du block</p> </div> <div> <div></div> <div></div> </div> </div> * d’autres formes sont possibles

Les ombres avec CSS3 Contenu du block Texte avec Ombre HTML: <p>Contenu du block</p> <p>Texte avec Ombre</p> CSS3:

Les ombres avec CSS3 Contenu du block Texte avec Ombre HTML: <p>Contenu du block</p> <p>Texte avec Ombre</p> CSS3: p {box-shadow:3px 3px 8px #000000;}

Les ombres avec CSS3 Contenu du block Texte avec Ombre HTML: <p>Contenu du block</p> <p>Texte avec Ombre</p> p {text-shadow:3px 3px CSS3: p {box-shadow:3px 3px 8px 3px #000000;} #000000;} ✔ W3C

CSS3 Transform

CSS3 Transform 2D

CSS3 Transform 2D 3D

CSS3 Transition

Un intégrateur utilisant CSS3

! u x Un intégrateur r e utilisant CSS3 e u H

</CSS3> </HTML5>

HTML5, pas ofﬁcialisé avant 2012 La majorité des modules CSS3 sont encore à l’état de «brouillons»

Quand commencer à utiliser CSS3/HTML5 ?

Quand utiliser CSS3/HTML5 ?

Quand utiliser CSS3/HTML5 ? NOW!! Je suis...LIBRE ! (plus de ﬂash...youpi !!)

Progressive Enhancement Amélioration progressive

Questions, remarques ?

Ne vous arrêtez pas à cette conférence ! (please!) http://dev.w3.org/html5/markup/spec.html http://www.css3.info http://fgribreau.com

Illustrations provenant de : Flickr / DeviantArt

http://blog.fgribreau.com	248
http://www.slideshare.net	131
http://blog.geekfg.net	110
http://static.slidesharecdn.com	1
http://localhost:8888	1
http://webcache.googleusercontent.com	1

Découverte HTML5/CSS3

by Francois-G Ribreau on Jan 07, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 492

Statistics

Découverte HTML5/CSS3 — Presentation Transcript