html5 maintenant partie 1 : la sémantique

HTML5 en productionMaintenant

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

HTML5 en productionMaintenant

solutions pratiques de IE6 à nos jours

Jean-pierre VINCENT

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

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 :•

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 :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop• WebSockets

Associé :●


Associé :● Geolocation●


Associé :● Geolocation● SVG●


Associé :● Geolocation● SVG● Upload


Associé :● Geolocation● SVG● Upload

Buzz :● CSS3 ...

Balises

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 HTML5Merci :)

Balises

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>

BalisesBalises inconnues :

● display:inline par défaut

article, nav ...{ display: block

}

BalisesBalises inconnues :

● non stylable sur IE6-8hack JS :

document.createElement('article');

</head>bit.ly/HTML5_shiv

Balises

✓ Production

Si :● Visiteurs IE sans javascript sacrifiables

Formulaires

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 - typesFaut il styler les formulaires ?


Vieux débat


Peut être :)

Formulaires - types

✓ Production

Si :● Widgets natifs acceptés

Forms - bilanNouveaux types :

Forms - bilanNouveaux types :✓ OK pour la production


Validation :


Validation : ✓ OK pour création


Validation : ✓ OK pour création ✓ OK pour enrichissement


Validation : ✓ OK pour création ✓ OK pour enrichissement⚠Modification : au cas par cas

Microdata

MicrodataBalisage sémantique avec

vocabulaire personnalisé

Concurrent de :● Microformats● RDFa

MicrodataIntérêt immédiat : Google

data-vocabulary.org/Review-aggregate/

MicrodataGoogle 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>Avis rédigé par GameSpot le 3 Novembre.

Note: 5 sur 5</div>

Microdata

<div itemscope itemtype="http://data-vocabulary.org/Review">

<h1>Dragon Age</h1>Avis rédigé par GameSpot le 3 Novembre.

Note: 5 sur 5</div>

Microdata


<h1 itemprop="itemreviewed">Dragon Age</h1>

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

Microdata



Avis rédigé par <span itemprop="reviewer">GameSpot</span> le 3 Novembre.

Note: 5 sur 5</div>

Microdata



Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time>3 Novembre</time>.

Note: 5 sur 5</div>

Microdata



Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03">

3 Novembre</time>. Note: 5 sur 5</div>

Microdata



Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03"

itemprop="dtreviewed">3 Novembre</time>.

Note: 5 sur 5</div>

Microdata





Note:<span itemprop="rating">5</span> sur 5</div>

Microdata





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

Technology