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é

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
«HyperText Markup Language»

XHTML
«eXtensible HyperText Markup Language»

HTML vs XHTML

Sgml (permissif) Xml (exigeant)

HTML vs XHTML

S a le

HTML vs XHTML

S a le

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

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

Vériﬁez l’imbrication


<b><i>Texte en gras italique</i></b>
✔ XHTML 1.1

Vériﬁez l’imbrication


<b><i>Texte en gras italique</i></b>
✔ XHTML 1.1

Mais...mais...
Il y a une autre erreur...

Le Doctype
=
DTD
=
Document
Type
Deﬁnition

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>

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>

Le (x)HTML permet de structurer le document

CSS
«Cascading Style Sheets»

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

Propriété

Valeur

monCss.css

Element

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

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 !

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

<a

<a
href="portfolio.html"

title="Portfolio">Portfolio</a>

<a

<a

title="Portfolio">Portfolio</a>

<a

title="Quelques
dessins
de

l'artiste">Portfolio</a>

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

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

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

sa ns
an s
8 31 Mai 2001
n !
io
XHTML 1.1

lu t
é vo

Le Webdesigner conçoit le site sous Photoshop

«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é ! »

« ... »

(quasi)Impossible en pur CSS 2.1

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

contenu multimédia
Flash pour utiliser de
nouvelles polices

contenu multimédia
nouvelles polices
Flash pour les animations
3D/complexes

Flash pour afﬁcher du Vériﬁcation des formulaires
contenu multimédia en javascript
nouvelles polices
3D/complexes

Flash pour utiliser de Librairies javascript lourdes
nouvelles polices pour gérer le drag&drop
3D/complexes

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

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 !

culture G

culture GGeek

Vous
êtes ici

//Disclaimer

R
<strike>

E
<basefont>

<acronym>

E C I <frameset>

R
<noscript>

P
<big> <isindex>

E
<tt>

D
<applet>

<dir>
<noframes>

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

* dans la majorité des cas

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

La vidéo avant HTML5

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

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+

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


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

Safari 4+ Firefox 2+ IE 8+


localStorage


localStorage enregistrement (clé/valeur) permanent


localStorage enregistrement (clé/valeur) permanent

Safari 4+ Firefox 2+ IE 8+


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

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 !

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


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>



Images
Equivalent HTML*:
<div class="block">
<div>
<div></div>
Contenu du block

</div>
<div></div>

<div></div>
<div></div>
<div>

De 4 à 8 éléments
<div></div>
<div></div>
</div>

pour réaliser la bordure </div>

Trop de CSS [...]


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




Equivalent HTML*:
<div class="block">
<div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>



Fla
sh

Equivalent HTML*:
<div class="block">
<div>
</div>
<div>
<div></div>
<div></div>
</div>
</div>


Les ombres avec CSS3


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

CSS3:




CSS3: p {box-shadow:3px 3px 8px
#000000;}



p {text-shadow:3px 3px
CSS3: p {box-shadow:3px 3px 8px
3px #000000;}
#000000;}

✔ W3C

Un intégrateur
utilisant CSS3

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

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 ?

NOW!!

Je suis...LIBRE !
(plus de ﬂash...youpi !!)

Progressive Enhancement
Amélioration progressive

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

Découverte HTML5/CSS3

Contenu connexe

Tendances

Similaire à Découverte HTML5/CSS3

Plus de François-Guillaume Ribreau

Découverte HTML5/CSS3