découverte html5/css3
DESCRIPTION
Veille HTML5/CSS3 sur Twitter: @fgribreau Ceci est le support de ma conférence @EPSI_Nantes sur HTML5/CSS3. Si vous remarquez une information incorrecte n'hésitez pas à me le faire savoir ;)TRANSCRIPT
![Page 1: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/1.jpg)
François-Guillaume Ribreau
twitter.com/fgribreau
fgribreau.com
blog.geekfg.net
Veille technologiqueJavascript (jQuery) / HTML5 / CSS3 /
R&D Web / Sécurité
![Page 2: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/2.jpg)
<intro>
![Page 3: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/3.jpg)
CSS3 ? HTML5 ?
![Page 4: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/4.jpg)
</intro>
![Page 5: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/5.jpg)
<rappel>
![Page 6: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/6.jpg)
W3C
![Page 7: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/7.jpg)
W3CWorld Wide Web Consortium
«La W3C est un organisme de standardisation [...] chargé de promouvoir la compatibilité des technologies du WEB telles que HTML, XHTML, [...], CSS, [...].»
![Page 8: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/8.jpg)
W3CWorld 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.»
![Page 9: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/9.jpg)
<html>
![Page 10: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/10.jpg)
HTML«HyperText Markup Language»
![Page 11: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/11.jpg)
XHTML«eXtensible HyperText Markup Language»
![Page 12: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/12.jpg)
HTML vs XHTML
![Page 13: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/13.jpg)
HTML vs XHTML
Xml (exigeant)Sgml (permissif)
![Page 14: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/14.jpg)
HTML vs XHTML
Xml (exigeant)Sgml (permissif)Sale
![Page 15: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/15.jpg)
HTML vs XHTML
Xml (exigeant)Sgml (permissif)SalePropre !
![Page 16: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/16.jpg)
<HtMl>✔ HTML 4.01
✗ XHTML 1.1
![Page 17: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/17.jpg)
<HtMl>✔ HTML 4.01
✗ XHTML 1.1
![Page 18: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/18.jpg)
<HtMl> <html>
TOUT en minuscule
✔ HTML 4.01
✗ XHTML 1.1
✔ HTML 4.01
✔ XHTML 1.1
![Page 19: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/19.jpg)
<html id="monId">
![Page 20: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/20.jpg)
<body><p>Mon Texte</body>
✔ HTML 4.01
![Page 21: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/21.jpg)
<body><p>Mon Texte</body>
![Page 22: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/22.jpg)
✔ XHTML 1.1
<body><p>Texte en gras italique</p></body>
<body><p>Mon Texte</body>
Balise ouverte = Balise fermée
![Page 23: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/23.jpg)
<img src="WEI_2009.jpg" alt="sacré fête !"><br>
✔ HTML 4.01
Eléments vide?
![Page 24: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/24.jpg)
<img src="WEI_2009.jpg" alt="sacré fête !"><br>
✔ HTML 4.01
<img ="WEI_2009.jpg" alt="sacré fête !"></img>
Eléments vide?
![Page 25: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/25.jpg)
Eléments vide?
![Page 26: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/26.jpg)
✔ XHTML 1.1<img src="WEI_2009.jpg" alt="sacré fête !" /><br/>
Fermé aussi!Eléments vide?
![Page 27: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/27.jpg)
✔ XHTML 1.1<img src="WEI_2009.jpg" alt="sacré fête !" /><br/>
Fermé aussi!
Mais...mais... Il y a une autre erreur...
Eléments vide?
![Page 28: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/28.jpg)
<b><i>Texte en gras italique</b></i>
✔ HTML 4.01
![Page 29: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/29.jpg)
<b><i>Texte en gras italique</b></i>
![Page 30: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/30.jpg)
Vérifiez l’imbrication
✔ XHTML 1.1
<b><i>Texte en gras italique</i></b>
<b><i>Texte en gras italique</b></i>
![Page 31: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/31.jpg)
Vérifiez l’imbrication
✔ XHTML 1.1
<b><i>Texte en gras italique</i></b>
<b><i>Texte en gras italique</b></i>
Mais...mais... Il y a une autre erreur...
![Page 32: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/32.jpg)
Un dernier point...
![Page 33: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/33.jpg)
Un dernier point...
[mode
barbant]
![Page 34: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/34.jpg)
Le Doctype
![Page 35: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/35.jpg)
Le Doctype=
DTD
![Page 36: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/36.jpg)
Le Doctype=
DTD=
DocumentTypeDefinition
![Page 37: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/37.jpg)
Doctype
![Page 38: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/38.jpg)
Doctype
Définir ce qui est valide
(et donc ce qui ne l’est pas)
les éléments...
...leurs propriétés
![Page 39: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/39.jpg)
<!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>
![Page 40: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/40.jpg)
<!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>
![Page 41: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/41.jpg)
<!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 XHTML1.1
![Page 42: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/42.jpg)
Et une page sans doctype ?
![Page 43: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/43.jpg)
Quirks Mode
http://en.wikipedia.org/wiki/Quirks_mode
http://www.quirksmode.org/css/quirksmode.html
![Page 44: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/44.jpg)
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">
![Page 45: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/45.jpg)
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">
![Page 46: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/46.jpg)
En résumé... le Doctype
l ongcomplexe
di f f i c i l e à reten ir
<!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">
![Page 47: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/47.jpg)
Doctype HTML5
<!DOCTYPE html>
![Page 48: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/48.jpg)
Doctype HTML5
<!DOCTYPE html>
![Page 49: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/49.jpg)
...dernier point.
![Page 50: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/50.jpg)
...dernier point.
[/mode
barbant]
![Page 51: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/51.jpg)
Le (x)HTML permet de structurer le document
![Page 52: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/52.jpg)
</html>
![Page 53: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/53.jpg)
<css>
![Page 54: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/54.jpg)
CSS«Cascading Style Sheets»
![Page 55: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/55.jpg)
Le CSS permet de décrire la présentation d’un document
![Page 56: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/56.jpg)
monCss.css
![Page 57: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/57.jpg)
monCss.css
Element
Propriété
Valeur
![Page 58: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/58.jpg)
CSS«Cascading Style Sheets»
![Page 59: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/59.jpg)
CSS«Cascading Style Sheets»
Formatage de la police
Alignement et contrôle de paragraphe
Marges et espace
Espaces intérieurs
Bordures
Couleurs et images d'arrière plan
Formatage de listes
Positionnement et affichage d'éléments
Formatage de tableaux
Pseudo-formats
![Page 60: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/60.jpg)
![Page 61: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/61.jpg)
![Page 62: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/62.jpg)
</css>
![Page 63: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/63.jpg)
<check>
![Page 64: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/64.jpg)
Contenu Présentation
CSSHTML
![Page 65: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/65.jpg)
<body style="background-color:#000000;">
http://bit.ly/5eSFuS
![Page 66: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/66.jpg)
<body style="background-color:#000000;">
http://bit.ly/5eSFuS
![Page 67: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/67.jpg)
Plus JAMAIS ça !
<body style="background-color:#000000;">
http://bit.ly/5eSFuS
![Page 68: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/68.jpg)
![Page 69: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/69.jpg)
#1 Pas de CSS/JS inline
![Page 70: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/70.jpg)
<a href="portfolio.html">Portfolio</a>
![Page 71: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/71.jpg)
<a href="portfolio.html" title="Portfolio">Portfolio</a>
<a href="portfolio.html">Portfolio</a>
![Page 72: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/72.jpg)
<a href="portfolio.html" title="Portfolio">Portfolio</a>
<a href="portfolio.html">Portfolio</a>
<a href="portfolio.html" title="Quelques dessins de l'artiste">Portfolio</a>
![Page 73: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/73.jpg)
![Page 74: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/74.jpg)
![Page 75: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/75.jpg)
![Page 76: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/76.jpg)
IE8
IE6
IE5.5
![Page 77: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/77.jpg)
![Page 78: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/78.jpg)
Pourquoi ?
![Page 79: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/79.jpg)
Chaque navigateur possède son propre CSS par défaut
![Page 80: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/80.jpg)
Solution ?? :’(
![Page 81: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/81.jpg)
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;}
![Page 82: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/82.jpg)
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;}
Google it !
![Page 83: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/83.jpg)
![Page 84: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/84.jpg)
#2Utilisez un CSS Reset
«Css Reset» sur Google
![Page 85: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/85.jpg)
Contenu Présentation
CSS(X)HTML
![Page 86: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/86.jpg)
Contenu
Présentation
CSSInteraction
Javascript
(X)HTML
![Page 87: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/87.jpg)
![Page 88: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/88.jpg)
![Page 89: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/89.jpg)
</check>
![Page 90: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/90.jpg)
</rappel>
![Page 91: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/91.jpg)
<pourquoi>CSS 2.1 -> CSS3 ?
HTML4 -> HTML5 ?
![Page 92: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/92.jpg)
Pourquoi créer une nouvelle version du langage CSS & (x)HTML ?
![Page 93: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/93.jpg)
Année de la dernière spécification (x)HTML ?
![Page 94: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/94.jpg)
Année de la dernière spécification (x)HTML ?
Question du jour !
![Page 95: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/95.jpg)
31 Mai 2001XHTML 1.1
![Page 96: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/96.jpg)
31 Mai 2001XHTML 1.1
8 ans sans
évolution !
![Page 97: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/97.jpg)
Le Webdesigner conçoit le site sous Photoshop
![Page 98: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/98.jpg)
![Page 99: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/99.jpg)
![Page 100: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/100.jpg)
![Page 101: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/101.jpg)
![Page 102: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/102.jpg)
![Page 103: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/103.jpg)
Puis intégration du design
![Page 104: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/104.jpg)
![Page 105: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/105.jpg)
«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é ! »
« ... »
![Page 106: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/106.jpg)
![Page 107: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/107.jpg)
![Page 108: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/108.jpg)
L’intégrateur CSS/HTML...
![Page 109: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/109.jpg)
(quasi)Impossible en pur CSS 2.1
![Page 110: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/110.jpg)
CSS3 le permet ...#FTW
![Page 111: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/111.jpg)
...oui mais pourquoi HTML5 ?
![Page 112: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/112.jpg)
Limites de HTML4 atteintes
![Page 113: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/113.jpg)
Limites de HTML4 atteintes
Flash pour afficher du contenu multimédia
![Page 114: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/114.jpg)
Limites de HTML4 atteintes
Flash pour utiliser de nouvelles polices
Flash pour afficher du contenu multimédia
![Page 115: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/115.jpg)
Limites de HTML4 atteintes
Flash pour utiliser de nouvelles polices
Flash pour afficher du contenu multimédia
Flash pour les animations 3D/complexes
![Page 116: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/116.jpg)
Limites de HTML4 atteintes
Flash pour utiliser de nouvelles polices
Flash pour afficher du contenu multimédia
Vérification des formulaires en javascript
Flash pour les animations 3D/complexes
![Page 117: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/117.jpg)
Limites de HTML4 atteintes
Flash pour utiliser de nouvelles polices
Flash pour afficher du contenu multimédia
Vérification des formulaires en javascript
Flash pour les animations 3D/complexes
Librairies javascript lourdes pour gérer le drag&drop
![Page 118: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/118.jpg)
Limites de HTML4 atteintes
Flash pour utiliser de nouvelles polices
Flash pour afficher du contenu multimédia
Vérification des formulaires en javascript
Flash pour les animations 3D/complexes
Librairies javascript lourdes pour gérer le drag&drop
Librairies javascript lourdes pour animer le contenu
![Page 119: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/119.jpg)
Limites de HTML4 atteintes
Flash pour utiliser de nouvelles polices
Flash pour afficher du contenu multimédia
Vérification des formulaires en javascript
Flash pour les animations 3D/complexes
Librairies javascript lourdes pour gérer le drag&drop
Librairies javascript lourdes pour animer le contenu
![Page 120: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/120.jpg)
Petit point culture G !
![Page 121: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/121.jpg)
Petit point culture G
![Page 122: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/122.jpg)
Petit point culture Geek !
![Page 123: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/123.jpg)
Petit point culture Geek
![Page 124: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/124.jpg)
Il était une fois en 2004...
![Page 125: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/125.jpg)
Il était une fois en 2004...
Mozilla Foundation Apple Opera software
Firefox(Gecko)
Safari(Webkit)
Opera(Presto)
![Page 126: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/126.jpg)
Il était une fois en 2004...
Mozilla Foundation Apple Opera softwarePAS
CONTENT !Firefox(Gecko)
Safari(Webkit)
Opera(Presto)
![Page 127: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/127.jpg)
WHATWGWeb Hypertext Application Technology Working Group
![Page 128: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/128.jpg)
WHATWGWeb Hypertext Application Technology Working Group
![Page 129: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/129.jpg)
WHATWGWeb Hypertext Application Technology Working GroupW
3C #inside
![Page 130: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/130.jpg)
C’était le petit point culture G !
![Page 131: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/131.jpg)
C’était le petit point culture G
![Page 132: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/132.jpg)
C’était le petit point culture G !
![Page 133: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/133.jpg)
C’était le petit point culture G Geek
![Page 134: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/134.jpg)
![Page 135: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/135.jpg)
![Page 136: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/136.jpg)
![Page 137: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/137.jpg)
</pourquoi>
![Page 138: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/138.jpg)
<HTML5><CSS3>
![Page 139: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/139.jpg)
<HTML5><CSS3>
![Page 140: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/140.jpg)
//Disclaimer
![Page 141: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/141.jpg)
//Disclaimer
Vous êtes ici
![Page 142: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/142.jpg)
![Page 143: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/143.jpg)
<applet>
<basefont>
<dir>
<frameset>
<isindex>
<noframes>
<noscript>
<strike>
<tt><big>
<acronym>
![Page 144: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/144.jpg)
![Page 145: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/145.jpg)
<center>
<font>
<applet>
<basefont>
<dir><frame>
<frameset>
<isindex>
<noframes>
<noscript>
<strike>
<u>
<s>
<tt><big>
<acronym>
![Page 146: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/146.jpg)
<applet>
<basefont>
<dir>
<frameset>
<isindex>
<noframes>
<noscript>
<strike>
<tt><big>
<acronym>
DEPREC
IER
![Page 147: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/147.jpg)
Nouvelles balises
![Page 148: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/148.jpg)
Avec HTML4/CSS2.1
![Page 149: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/149.jpg)
Avec HTML4/CSS2.1Beaux designs (effets) = énormément* de balise
* dans la majorité des cas
![Page 150: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/150.jpg)
HTML5 = plus de sens
![Page 151: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/151.jpg)
SémantiqueMéta-données
![Page 152: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/152.jpg)
<div id="header"></div>
<div id="navigation"></div>
<div id="article">
<div id="section"></div>
<div id="footer"></div>
<div id="sidebar"></div>
HTML4
![Page 153: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/153.jpg)
HTML5
<header></header>
<nav></nav>
<article>
<section></section>
<footer></footer>
<aside></aside>
![Page 154: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/154.jpg)
Code avec HTML5
<header></header>
<nav></nav>
<article>
<section></section>
<footer></footer>
<aside></aside>
![Page 155: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/155.jpg)
Code avec HTML5
<header></header>
<nav></nav>
<article>
<section></section>
<footer></footer>
<aside></aside>
#FAIL
![Page 156: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/156.jpg)
Multimédia
![Page 157: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/157.jpg)
La vidéo avant HTML5
![Page 158: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/158.jpg)
La vidéo avant HTML5
FlashFormat
audio/vidéo propriétaire
(H.264)
![Page 159: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/159.jpg)
La vidéo avec HTML5
![Page 160: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/160.jpg)
La vidéo avec HTML5
<video>Format
audio/vidéo ouvert
(Theora & Ogg Vorbis)
![Page 161: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/161.jpg)
La vidéo avec HTML5
<video>Format
audio/vidéo ouvert
(Theora & Ogg Vorbis)
Safari 3.1+ FF 3.1+ Opera 10+
![Page 162: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/162.jpg)
L’audio avec HTML5
Safari 3.1+ Opera 9+
![Page 163: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/163.jpg)
Stockage Hors-ligne
![Page 164: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/164.jpg)
Objectif ?
Stocker les données directement sur le poste client
![Page 165: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/165.jpg)
Objectif ?
Stocker les données directement sur le poste client
![Page 166: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/166.jpg)
Objectif ?
Stocker les données directement sur le poste client
![Page 167: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/167.jpg)
sessionStorage
http://www.w3.org/TR/webstorage/
![Page 168: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/168.jpg)
sessionStorage enregistre (clé/valeur) le temps de la session
http://www.w3.org/TR/webstorage/
![Page 169: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/169.jpg)
sessionStorage enregistre (clé/valeur) le temps de la session
http://www.w3.org/TR/webstorage/
IE 8+Safari 4+ Firefox 2+
![Page 170: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/170.jpg)
localStorage
http://www.w3.org/TR/webstorage/
![Page 171: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/171.jpg)
localStorage enregistrement (clé/valeur) permanent
http://www.w3.org/TR/webstorage/
![Page 172: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/172.jpg)
localStorage enregistrement (clé/valeur) permanent
http://www.w3.org/TR/webstorage/
IE 8+Safari 4+ Firefox 2+
![Page 173: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/173.jpg)
![Page 174: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/174.jpg)
Besoin de tables ?
D’une base de données relationnelle ?
![Page 175: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/175.jpg)
Database storage
http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sql.html#sql
Base de données SQL locale
![Page 176: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/176.jpg)
Database storage
http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sql.html#sql
Base de données SQL locale
Safari 3.1+
![Page 177: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/177.jpg)
Canvas/SVG
![Page 178: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/178.jpg)
Canvas/SVG
![Page 179: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/179.jpg)
![Page 180: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/180.jpg)
WebForms 2.0
![Page 181: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/181.jpg)
WebForms 2.0
![Page 182: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/182.jpg)
WebForms 2.0
![Page 183: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/183.jpg)
WebForms 2.0
datetimenumberrangeurl
color
![Page 184: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/184.jpg)
![Page 185: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/185.jpg)
Web Sockets
Web Workers
Local File API
Geolocation API
FF 3.6 ->
![Page 186: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/186.jpg)
![Page 187: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/187.jpg)
CSS3 is...awe... [wait for it...] some !
![Page 188: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/188.jpg)
Awesome (génial) !
![Page 189: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/189.jpg)
Les préfixes CSS3
[prefix][propriété CSS]
![Page 190: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/190.jpg)
Les préfixes CSS3
-webkit- -moz- -o- -ms-
[prefix][propriété CSS]
![Page 191: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/191.jpg)
Les préfixes CSS3
-webkit- -moz- -o- -ms-
[prefix][propriété CSS]
![Page 192: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/192.jpg)
Bordure arrondie avant CSS3
Contenu du block
* d’autres formes sont possibles
![Page 193: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/193.jpg)
Bordure arrondie avant CSS3
Contenu du block
De 4 à 8 éléments pour réaliser la bordure
<div class="block"> <div> <div></div> <div></div> </div> <div></div> <p>Contenu du block</p> <div></div> <div> <div></div> <div></div> </div></div>
Equivalent HTML*:
* d’autres formes sont possibles
![Page 194: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/194.jpg)
Bordure arrondie avant CSS3
Contenu du block
De 4 à 8 éléments pour réaliser la bordure
<div class="block"> <div> <div></div> <div></div> </div> <div></div> <p>Contenu du block</p> <div></div> <div> <div></div> <div></div> </div></div>
Equivalent HTML*:
* d’autres formes sont possibles
Images
Trop de CSS [...]
![Page 195: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/195.jpg)
Bordure arrondie avec CSS3
Contenu du block
CSS3:
<div>Contenu du block</div>HTML:
![Page 196: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/196.jpg)
Bordure arrondie avec CSS3
Contenu du block
div {border-radius:20px;}CSS3:
<div>Contenu du block</div>HTML:
![Page 197: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/197.jpg)
Bordure arrondie avec CSS3
Contenu du block
div {border-radius:20px;}CSS3:
<div>Contenu du block</div>HTML:
![Page 198: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/198.jpg)
Les ombres avant CSS3
Contenu du block
* d’autres formes sont possibles
Texte avec Ombre
![Page 199: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/199.jpg)
Les ombres avant CSS3
Contenu du block
* d’autres formes sont possibles
<div class="block"> <div> <p>Contenu du block</p> </div> <div> <div></div> <div></div> </div></div>
Equivalent HTML*:
Texte avec Ombre
![Page 200: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/200.jpg)
Les ombres avant CSS3
Contenu du block
* d’autres formes sont possibles
<div class="block"> <div> <p>Contenu du block</p> </div> <div> <div></div> <div></div> </div></div>
Equivalent HTML*:
Texte avec Ombre
Flash
![Page 201: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/201.jpg)
Les ombres avec CSS3
CSS3:
<p>Contenu du block</p>HTML:
Contenu du block Texte avec Ombre
<p>Texte avec Ombre</p>
![Page 202: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/202.jpg)
Les ombres avec CSS3
p {box-shadow:3px 3px 8px #000000;}
CSS3:
<p>Contenu du block</p>HTML:
Contenu du block Texte avec Ombre
<p>Texte avec Ombre</p>
![Page 203: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/203.jpg)
Les ombres avec CSS3
p {box-shadow:3px 3px 8px #000000;}
CSS3:
<p>Contenu du block</p>HTML:
Contenu du block Texte avec Ombre
p {text-shadow:3px 3px 3px #000000;}
<p>Texte avec Ombre</p>
✔ W3C
![Page 204: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/204.jpg)
CSS3 Transform
![Page 205: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/205.jpg)
CSS3 Transform
2D
![Page 206: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/206.jpg)
CSS3 Transform
2D 3D
![Page 207: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/207.jpg)
CSS3 Transition
![Page 208: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/208.jpg)
Un intégrateur utilisant CSS3
![Page 209: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/209.jpg)
Un intégrateur utilisant CSS3
![Page 210: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/210.jpg)
Un intégrateur utilisant CSS3
Heureux !
![Page 211: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/211.jpg)
</HTML5></CSS3>
![Page 212: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/212.jpg)
</HTML5></CSS3>
![Page 213: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/213.jpg)
HTML5, pas officialisé avant 2012
La majorité des modules CSS3 sont encore à l’état de «brouillons»
![Page 214: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/214.jpg)
Quand commencer à utiliser CSS3/HTML5 ?
![Page 215: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/215.jpg)
Quand utiliser CSS3/HTML5 ?
![Page 216: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/216.jpg)
Quand utiliser CSS3/HTML5 ?
Je suis...LIBRE ! (plus de flash...youpi !!)
NOW!!
![Page 217: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/217.jpg)
![Page 218: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/218.jpg)
Progressive EnhancementAmélioration progressive
![Page 219: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/219.jpg)
Questions, remarques ?
![Page 220: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/220.jpg)
http://dev.w3.org/html5/markup/spec.htmlhttp://www.css3.info
Ne vous arrêtez pas à cette conférence ! (please!)
http://fgribreau.com
![Page 221: Découverte HTML5/CSS3](https://reader030.vdocuments.mx/reader030/viewer/2022012905/554f7643b4c9052a518b474d/html5/thumbnails/221.jpg)
Illustrations provenant de :Flickr / DeviantArt