HTML5 maintenant partie 1 : la sémantique

HTML5 en production
Maintenant

solutions pratiques
de IE6 à nos jours

Jean-pierre VINCENT

Qui ça ?
Jean-pierre VINCENT

braincracking.org (veille techno)
@theystolemynick

Je sers le Web et c'est ma joie :
houra.fr, Yahoo!, Kelkoo
Time of my Life.com

contraintes et préjugés

50% de visiteurs avec IE 6-8



HTML5 annoncé pour 2022
(Ian Hickson, éditeur HMTL5)



HTML5 annoncé pour 2022
(Ian Hickson, éditeur HMTL5)

“I don't think it's ready for production yet“
(Philippe Le Hégaret, chef HTML5)

2022 ? pas peur
•CSS 2.1 : candidate recommandation

2022 ? pas peur
•CSS 2.1 : candidate recommandation

•Selector API 2 : Draft, mais utilisé
par 90% des développeurs grâce à
jQuery

2022 ? pas peur
● CSS 2.1 : candidate recommandation

●Selector API 2 : Draft, mais utilisé
par 90% des développeurs grâce à
jQuery

●HTML4 : 1999, CSS: 1996
implémentations variées ...

2022 ? pas peur

Utilisation en production

!==

Recommandation W3

2022 ? pas peur


===

Facilité d'accès

2022 ? pas peur


===

Facilité d'accès
+ stabilité

quel HTML5 ?
Officiel :
• Balises
•

quel HTML5 ?
Officiel :
• Balises
• Microdata
•

quel HTML5 ?
Officiel :
• Balises
• Microdata
• Forms
•

quel HTML5 ?
Officiel :
• Balises
• Microdata
• Forms
• Multimédia
•

quel HTML5 ?
Officiel :
• Balises
• Microdata
• Forms
• Multimédia
• Canvas
•

quel HTML5 ?
Officiel :
• Balises
• Microdata
• Forms
• Multimédia
• Canvas
• Web Storage
•

quel HTML5 ?
Officiel :
• Balises
• Microdata
• Forms
• Multimédia
• Canvas
• Web Storage
• Drag & Drop
•

quel HTML5 ?
Officiel : Associé :
• Balises ●

• Microdata
• Forms
• Multimédia
• Canvas
• Web Storage
• Drag & Drop
• WebSockets

quel HTML5 ?
• Balises ● Geolocation

• Microdata ●

• Forms
• Multimédia
• Canvas
• Web Storage
• Drag & Drop
• WebSockets

quel HTML5 ?

• Microdata ● SVG

• Forms ●

• Multimédia
• Canvas
• Web Storage
• Drag & Drop
• WebSockets

quel HTML5 ?


• Forms ● Upload

• Multimédia
• Canvas
• Web Storage
• Drag & Drop
• WebSockets

quel HTML5 ?


• Forms ● Upload

• Multimédia
• Canvas
• Web Storage Buzz :
• Drag & Drop ● CSS3 ...

• WebSockets

Balises
● Changer le doctype

<!doctype html>

● Testé en remplacement de
✓ XHTML strict
✓ HTML4.01 transitional

bit.ly/HTML5_fr bit.ly/XHTML5_fr

Balises

✓ Site migré en HTML5
Merci :)

Balises
<div>
<div>...</div>
</div>
<div>
<div>...<span> ...
<p>
<div>...</div>
</div>
<div>...</div>

Balises
<header>
<nav>...</nav>
</header>
<article>
<header>...<time> ...
<p>
<footer>...</footer>
</article>
<footer>...</footer>

Balises
● Standard
● Facile à comprendre

=

● Bénéfices référencement (bientôt)
● Maintenable

● Accessibilité

Balises
<meter value=25 max=100>

<progress value=25 max=100>

<figure>
<figcaption>

<datalist>

Balises
Balises inconnues :

● display:inline par défaut

article, nav ...{
display: block
}

Balises
Balises inconnues :

●non stylable sur IE6-8
hack JS :

document.
createElement('article');
</head>
bit.ly/HTML5_shiv

Balises

✓ Production

Si :
● Visiteurs IE sans javascript sacrifiables

Formulaires - types
● Datetime, month, time, week ...
● Number

● Search

● Range

● Color

● Tel

Formulaires - types
● Code compréhensible

● Utilisabilité, accessibilité

● Navigateurs aident l'utilisateur

Formulaires - types
<input
type=email />

● Clavier approprié

● Pré-remplissage

● Interface

Formulaires - types
<input
type=url />

● Clavier approprié

● Pré-remplissage

Formulaires - types
<input
type=date />

● Interface appropriée

Formulaires - types
<input
type=color />
● Interface appropriée

Formulaires - types

Non reconnu
=
type=text
=
✓ fonctionnalité

Formulaires - types
Faut il styler les formulaires ?

Formulaires - types
Vieux débat

Formulaires - types

Peut être :)

Formulaires - types

✓ Production

Si :
● Widgets natifs acceptés

Forms - bilan
Nouveaux types :

Forms - bilan
Nouveaux types :
✓ OK pour la production

Forms - bilan
Nouveaux types :

Validation :

Forms - bilan
Nouveaux types :

Validation :
✓ OK pour création

Forms - bilan
Nouveaux types :

Validation :
✓ OK pour enrichissement

Forms - bilan
Nouveaux types :

Validation :
✓ OK pour enrichissement
Modification : au cas par cas

Microdata
Balisage sémantique avec
vocabulaire personnalisé

Concurrent de :
● Microformats

● RDFa

Microdata
Intérêt immédiat : Google

data-vocabulary.org/Review-aggregate/

Microdata
Google a défini plusieurs vocabulaires :

● Avis et notes
● Fil d'Ariane (breadcrumb)

● Evènements

● Personnes / Entreprises

● Produits

● Recettes de cuisine (!)

Microdata
<div>
<h1>Dragon Age</h1>
Avis rédigé par GameSpot le 3 Novembre.
Note: 5 sur 5
</div>

Microdata
<div itemscope>
<h1>Dragon Age</h1>
Note: 5 sur 5
</div>

Microdata
<div itemscope
itemtype="http://data-vocabulary.org/Review">
<h1>Dragon Age</h1>
Note: 5 sur 5
</div>

Microdata
<div itemscope
<h1 itemprop="itemreviewed">
Dragon Age</h1>
Note: 5 sur 5
</div>

Microdata
<div itemscope
Dragon Age</h1>
Avis rédigé par
<span itemprop="reviewer">GameSpot</span>
le 3 Novembre.
Note: 5 sur 5
</div>

Microdata
<div itemscope
Dragon Age</h1>
Avis rédigé par
le <time>3 Novembre</time>.
Note: 5 sur 5
</div>

Microdata
<div itemscope
Dragon Age</h1>
Avis rédigé par
le <time datetime="2009-11-03">
3 Novembre</time>.
Note: 5 sur 5
</div>

Microdata
<div itemscope
Dragon Age</h1>
Avis rédigé par
le <time datetime="2009-11-03"
itemprop="dtreviewed">
3 Novembre</time>.
Note: 5 sur 5
</div>

Microdata
<div itemscope
Dragon Age</h1>
Avis rédigé par
3 Novembre</time>.
Note:<span itemprop="rating">5</span> sur 5
</div>

Microdata
<div itemscope
Dragon Age</h1>
Avis rédigé par
3 Novembre</time>.
Note:<span itemprop="rating">5</span> sur 5
</div>
bit.ly/data-google

Microdata

✓ Utilisable en production

</semantique>

<script src=HTML5/API >

HTML5 maintenant partie 1 : la sémantique

HTML5 maintenant partie 1 : la sémantique

Recommended

More Related Content

What's hot

What's hot(20)

Similar to HTML5 maintenant partie 1 : la sémantique

Similar to HTML5 maintenant partie 1 : la sémantique(20)

More from Jean-Pierre Vincent

More from Jean-Pierre Vincent(15)

HTML5 maintenant partie 1 : la sémantique