Découverte HTML5/CSS3

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

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 of Découverte HTML5/CSS3

Page 1: Découverte HTML5/CSS3

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

<intro>

Page 3: Découverte HTML5/CSS3

CSS3 ? HTML5 ?

Page 4: Découverte HTML5/CSS3

</intro>

Page 5: Découverte HTML5/CSS3

<rappel>

Page 6: Découverte HTML5/CSS3

W3C

Page 7: Découverte HTML5/CSS3

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

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

<html>

Page 10: Découverte HTML5/CSS3

HTML«HyperText Markup Language»

Page 11: Découverte HTML5/CSS3

XHTML«eXtensible HyperText Markup Language»

Page 12: Découverte HTML5/CSS3

HTML vs XHTML

Page 13: Découverte HTML5/CSS3

HTML vs XHTML

Xml (exigeant)Sgml (permissif)

Page 14: Découverte HTML5/CSS3

HTML vs XHTML

Xml (exigeant)Sgml (permissif)Sale

Page 15: Découverte HTML5/CSS3

HTML vs XHTML

Xml (exigeant)Sgml (permissif)SalePropre !

Page 16: Découverte HTML5/CSS3

<HtMl>✔ HTML 4.01

✗ XHTML 1.1

Page 17: Découverte HTML5/CSS3

<HtMl>✔ HTML 4.01

✗ XHTML 1.1

Page 18: Découverte HTML5/CSS3

<HtMl> <html>

TOUT en minuscule

✔ HTML 4.01

✗ XHTML 1.1

✔ HTML 4.01

✔ XHTML 1.1

Page 19: Découverte HTML5/CSS3

<html id="monId">

Page 20: Découverte HTML5/CSS3

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

✔ HTML 4.01

Page 21: Découverte HTML5/CSS3

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

Page 22: Découverte HTML5/CSS3

✔ 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

<img src="WEI_2009.jpg" alt="sacré fête !"><br>

✔ HTML 4.01

Eléments vide?

Page 24: Découverte HTML5/CSS3

<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

Eléments vide?

Page 26: Découverte HTML5/CSS3

✔ XHTML 1.1<img src="WEI_2009.jpg" alt="sacré fête !" /><br/>

Fermé aussi!Eléments vide?

Page 27: Découverte HTML5/CSS3

✔ 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

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

✔ HTML 4.01

Page 29: Découverte HTML5/CSS3

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

Page 30: Découverte HTML5/CSS3

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

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

Un dernier point...

Page 33: Découverte HTML5/CSS3

Un dernier point...

[mode

barbant]

Page 34: Découverte HTML5/CSS3

Le Doctype

Page 35: Découverte HTML5/CSS3

Le Doctype=

DTD

Page 36: Découverte HTML5/CSS3

Le Doctype=

DTD=

DocumentTypeDefinition

Page 37: Découverte HTML5/CSS3

Doctype

Page 38: Découverte HTML5/CSS3

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

<!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

<!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

<!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

Et une page sans doctype ?

Page 44: Découverte HTML5/CSS3

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

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

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

Doctype HTML5

<!DOCTYPE html>

Page 48: Découverte HTML5/CSS3

Doctype HTML5

<!DOCTYPE html>

Page 49: Découverte HTML5/CSS3

...dernier point.

Page 50: Découverte HTML5/CSS3

...dernier point.

[/mode

barbant]

Page 51: Découverte HTML5/CSS3

Le (x)HTML permet de structurer le document

Page 52: Découverte HTML5/CSS3

</html>

Page 53: Découverte HTML5/CSS3

<css>

Page 54: Découverte HTML5/CSS3

CSS«Cascading Style Sheets»

Page 55: Découverte HTML5/CSS3

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

Page 56: Découverte HTML5/CSS3

monCss.css

Page 57: Découverte HTML5/CSS3

monCss.css

Element

Propriété

Valeur

Page 58: Découverte HTML5/CSS3

CSS«Cascading Style Sheets»

Page 59: Découverte HTML5/CSS3

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
Page 61: Découverte HTML5/CSS3
Page 62: Découverte HTML5/CSS3

</css>

Page 63: Découverte HTML5/CSS3

<check>

Page 64: Découverte HTML5/CSS3

Contenu Présentation

CSSHTML

Page 65: Découverte HTML5/CSS3

<body style="background-color:#000000;">

http://bit.ly/5eSFuS

Page 66: Découverte HTML5/CSS3

<body style="background-color:#000000;">

http://bit.ly/5eSFuS

Page 67: Découverte HTML5/CSS3

Plus JAMAIS ça !

<body style="background-color:#000000;">

http://bit.ly/5eSFuS

Page 68: Découverte HTML5/CSS3
Page 69: Découverte HTML5/CSS3

#1 Pas de CSS/JS inline

Page 70: Découverte HTML5/CSS3

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

Page 71: Découverte HTML5/CSS3

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

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

Page 72: Découverte HTML5/CSS3

<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
Page 74: Découverte HTML5/CSS3
Page 75: Découverte HTML5/CSS3
Page 76: Découverte HTML5/CSS3

IE8

IE6

IE5.5

Page 77: Découverte HTML5/CSS3
Page 78: Découverte HTML5/CSS3

Pourquoi ?

Page 79: Découverte HTML5/CSS3

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

Page 80: Découverte HTML5/CSS3

Solution ?? :’(

Page 81: Découverte HTML5/CSS3

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

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
Page 84: Découverte HTML5/CSS3

#2Utilisez un CSS Reset

«Css Reset» sur Google

Page 85: Découverte HTML5/CSS3

Contenu Présentation

CSS(X)HTML

Page 86: Découverte HTML5/CSS3

Contenu

Présentation

CSSInteraction

Javascript

(X)HTML

Page 87: Découverte HTML5/CSS3
Page 88: Découverte HTML5/CSS3
Page 89: Découverte HTML5/CSS3

</check>

Page 90: Découverte HTML5/CSS3

</rappel>

Page 91: Découverte HTML5/CSS3

<pourquoi>CSS 2.1 -> CSS3 ?

HTML4 -> HTML5 ?

Page 92: Découverte HTML5/CSS3

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

Page 93: Découverte HTML5/CSS3

Année de la dernière spécification (x)HTML ?

Page 94: Découverte HTML5/CSS3

Année de la dernière spécification (x)HTML ?

Question du jour !

Page 95: Découverte HTML5/CSS3

31 Mai 2001XHTML 1.1

Page 96: Découverte HTML5/CSS3

31 Mai 2001XHTML 1.1

8 ans sans

évolution !

Page 97: Découverte HTML5/CSS3

Le Webdesigner conçoit le site sous Photoshop

Page 98: Découverte HTML5/CSS3
Page 99: Découverte HTML5/CSS3
Page 100: Découverte HTML5/CSS3
Page 101: Découverte HTML5/CSS3
Page 102: Découverte HTML5/CSS3
Page 103: Découverte HTML5/CSS3

Puis intégration du design

Page 104: Découverte HTML5/CSS3
Page 105: Découverte HTML5/CSS3

«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
Page 107: Découverte HTML5/CSS3
Page 108: Découverte HTML5/CSS3

L’intégrateur CSS/HTML...

Page 109: Découverte HTML5/CSS3

(quasi)Impossible en pur CSS 2.1

Page 110: Découverte HTML5/CSS3

CSS3 le permet ...#FTW

Page 111: Découverte HTML5/CSS3

...oui mais pourquoi HTML5 ?

Page 112: Découverte HTML5/CSS3

Limites de HTML4 atteintes

Page 113: Découverte HTML5/CSS3

Limites de HTML4 atteintes

Flash pour afficher du contenu multimédia

Page 114: Découverte HTML5/CSS3

Limites de HTML4 atteintes

Flash pour utiliser de nouvelles polices

Flash pour afficher du contenu multimédia

Page 115: Découverte HTML5/CSS3

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

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

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

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

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

Petit point culture G !

Page 121: Découverte HTML5/CSS3

Petit point culture G

Page 122: Découverte HTML5/CSS3

Petit point culture Geek !

Page 123: Découverte HTML5/CSS3

Petit point culture Geek

Page 124: Découverte HTML5/CSS3

Il était une fois en 2004...

Page 125: Découverte HTML5/CSS3

Il était une fois en 2004...

Mozilla Foundation Apple Opera software

Firefox(Gecko)

Safari(Webkit)

Opera(Presto)

Page 126: Découverte HTML5/CSS3

Il était une fois en 2004...

Mozilla Foundation Apple Opera softwarePAS

CONTENT !Firefox(Gecko)

Safari(Webkit)

Opera(Presto)

Page 127: Découverte HTML5/CSS3

WHATWGWeb Hypertext Application Technology Working Group

Page 128: Découverte HTML5/CSS3

WHATWGWeb Hypertext Application Technology Working Group

Page 129: Découverte HTML5/CSS3

WHATWGWeb Hypertext Application Technology Working GroupW

3C #inside

Page 130: Découverte HTML5/CSS3

C’était le petit point culture G !

Page 131: Découverte HTML5/CSS3

C’était le petit point culture G

Page 132: Découverte HTML5/CSS3

C’était le petit point culture G !

Page 133: Découverte HTML5/CSS3

C’était le petit point culture G Geek

Page 134: Découverte HTML5/CSS3
Page 135: Découverte HTML5/CSS3
Page 136: Découverte HTML5/CSS3
Page 137: Découverte HTML5/CSS3

</pourquoi>

Page 138: Découverte HTML5/CSS3

<HTML5><CSS3>

Page 139: Découverte HTML5/CSS3

<HTML5><CSS3>

Page 140: Découverte HTML5/CSS3

//Disclaimer

Page 141: Découverte HTML5/CSS3

//Disclaimer

Vous êtes ici

Page 142: Découverte HTML5/CSS3
Page 143: Découverte HTML5/CSS3

<applet>

<basefont>

<dir>

<frameset>

<isindex>

<noframes>

<noscript>

<strike>

<tt><big>

<acronym>

Page 144: Découverte HTML5/CSS3
Page 145: Découverte HTML5/CSS3

<center>

<font>

<applet>

<basefont>

<dir><frame>

<frameset>

<isindex>

<noframes>

<noscript>

<strike>

<u>

<s>

<tt><big>

<acronym>

Page 146: Découverte HTML5/CSS3

<applet>

<basefont>

<dir>

<frameset>

<isindex>

<noframes>

<noscript>

<strike>

<tt><big>

<acronym>

DEPREC

IER

Page 147: Découverte HTML5/CSS3

Nouvelles balises

Page 148: Découverte HTML5/CSS3

Avec HTML4/CSS2.1

Page 149: Découverte HTML5/CSS3

Avec HTML4/CSS2.1Beaux designs (effets) = énormément* de balise

* dans la majorité des cas

Page 150: Découverte HTML5/CSS3

HTML5 = plus de sens

Page 151: Découverte HTML5/CSS3

SémantiqueMéta-données

Page 152: Découverte HTML5/CSS3

<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

HTML5

<header></header>

<nav></nav>

<article>

<section></section>

<footer></footer>

<aside></aside>

Page 154: Découverte HTML5/CSS3

Code avec HTML5

<header></header>

<nav></nav>

<article>

<section></section>

<footer></footer>

<aside></aside>

Page 155: Découverte HTML5/CSS3

Code avec HTML5

<header></header>

<nav></nav>

<article>

<section></section>

<footer></footer>

<aside></aside>

#FAIL

Page 156: Découverte HTML5/CSS3

Multimédia

Page 157: Découverte HTML5/CSS3

La vidéo avant HTML5

Page 158: Découverte HTML5/CSS3

La vidéo avant HTML5

FlashFormat

audio/vidéo propriétaire

(H.264)

Page 159: Découverte HTML5/CSS3

La vidéo avec HTML5

Page 160: Découverte HTML5/CSS3

La vidéo avec HTML5

<video>Format

audio/vidéo ouvert

(Theora & Ogg Vorbis)

Page 161: Découverte HTML5/CSS3

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

L’audio avec HTML5

Safari 3.1+ Opera 9+

Page 163: Découverte HTML5/CSS3

Stockage Hors-ligne

Page 164: Découverte HTML5/CSS3

Objectif ?

Stocker les données directement sur le poste client

Page 165: Découverte HTML5/CSS3

Objectif ?

Stocker les données directement sur le poste client

Page 166: Découverte HTML5/CSS3

Objectif ?

Stocker les données directement sur le poste client

Page 168: Découverte HTML5/CSS3

sessionStorage enregistre (clé/valeur) le temps de la session

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

Page 169: Découverte HTML5/CSS3

sessionStorage enregistre (clé/valeur) le temps de la session

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

IE 8+Safari 4+ Firefox 2+

Page 171: Découverte HTML5/CSS3

localStorage enregistrement (clé/valeur) permanent

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

Page 172: Découverte HTML5/CSS3

localStorage enregistrement (clé/valeur) permanent

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

IE 8+Safari 4+ Firefox 2+

Page 173: Découverte HTML5/CSS3
Page 174: Découverte HTML5/CSS3

Besoin de tables ?

D’une base de données relationnelle ?

Page 175: Découverte HTML5/CSS3

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

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

Canvas/SVG

Page 178: Découverte HTML5/CSS3

Canvas/SVG

Page 179: Découverte HTML5/CSS3
Page 180: Découverte HTML5/CSS3

WebForms 2.0

Page 181: Découverte HTML5/CSS3

WebForms 2.0

Page 182: Découverte HTML5/CSS3

WebForms 2.0

Page 183: Découverte HTML5/CSS3

WebForms 2.0

datetimenumberrangeurl

color

Page 184: Découverte HTML5/CSS3
Page 185: Découverte HTML5/CSS3

Web Sockets

Web Workers

Local File API

Geolocation API

FF 3.6 ->

Page 186: Découverte HTML5/CSS3
Page 187: Découverte HTML5/CSS3

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

Page 188: Découverte HTML5/CSS3

Awesome (génial) !

Page 189: Découverte HTML5/CSS3

Les préfixes CSS3

[prefix][propriété CSS]

Page 190: Découverte HTML5/CSS3

Les préfixes CSS3

-webkit- -moz- -o- -ms-

[prefix][propriété CSS]

Page 191: Découverte HTML5/CSS3

Les préfixes CSS3

-webkit- -moz- -o- -ms-

[prefix][propriété CSS]

Page 192: Découverte HTML5/CSS3

Bordure arrondie avant CSS3

Contenu du block

* d’autres formes sont possibles

Page 193: Découverte HTML5/CSS3

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

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

Bordure arrondie avec CSS3

Contenu du block

CSS3:

<div>Contenu du block</div>HTML:

Page 196: Découverte HTML5/CSS3

Bordure arrondie avec CSS3

Contenu du block

div {border-radius:20px;}CSS3:

<div>Contenu du block</div>HTML:

Page 197: Découverte HTML5/CSS3

Bordure arrondie avec CSS3

Contenu du block

div {border-radius:20px;}CSS3:

<div>Contenu du block</div>HTML:

Page 198: Découverte HTML5/CSS3

Les ombres avant CSS3

Contenu du block

* d’autres formes sont possibles

Texte avec Ombre

Page 199: Découverte HTML5/CSS3

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

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

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

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

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

CSS3 Transform

Page 205: Découverte HTML5/CSS3

CSS3 Transform

2D

Page 206: Découverte HTML5/CSS3

CSS3 Transform

2D 3D

Page 207: Découverte HTML5/CSS3

CSS3 Transition

Page 208: Découverte HTML5/CSS3

Un intégrateur utilisant CSS3

Page 209: Découverte HTML5/CSS3

Un intégrateur utilisant CSS3

Page 210: Découverte HTML5/CSS3

Un intégrateur utilisant CSS3

Heureux !

Page 211: Découverte HTML5/CSS3

</HTML5></CSS3>

Page 212: Découverte HTML5/CSS3

</HTML5></CSS3>

Page 213: Découverte HTML5/CSS3

HTML5, pas officialisé avant 2012

La majorité des modules CSS3 sont encore à l’état de «brouillons»

Page 214: Découverte HTML5/CSS3

Quand commencer à utiliser CSS3/HTML5 ?

Page 215: Découverte HTML5/CSS3

Quand utiliser CSS3/HTML5 ?

Page 216: Découverte HTML5/CSS3

Quand utiliser CSS3/HTML5 ?

Je suis...LIBRE ! (plus de flash...youpi !!)

NOW!!

Page 217: Découverte HTML5/CSS3
Page 218: Découverte HTML5/CSS3

Progressive EnhancementAmélioration progressive

Page 219: Découverte HTML5/CSS3

Questions, remarques ?

Page 220: Découverte HTML5/CSS3

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

Illustrations provenant de :Flickr / DeviantArt