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

HTML5 en production Maintenant solutions pratiques de IE6 à nos jours Jean-pierre VINCENT

contraintes et préjugés

contraintes et préjugés 50% de visiteurs avec IE 6-8

contraintes et préjugés 50% de visiteurs avec IE 6-8 HTML5 annoncé pour 2022 (Ian Hickson, éditeur HMTL5)

contraintes et préjugés 50% de visiteurs avec IE 6-8 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 Utilisation en production === Facilité d'accès

2022 ? pas peur Utilisation en production === 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 : Associé : • Balises ● • Microdata • Forms • Multimédia • Canvas • Web Storage • Drag & Drop • WebSockets

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

quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● • Multimédia • Canvas • Web Storage • Drag & Drop • WebSockets

quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● Upload • Multimédia • Canvas • Web Storage • Drag & Drop • WebSockets

quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● Upload • Multimédia • Canvas • Web Storage Buzz : • Drag & Drop ● CSS3 ... • WebSockets

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 HTML5 Merci :)

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>

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

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 Faut il styler les formulaires ? Vieux débat

Formulaires - types Faut il styler les formulaires ? 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 : ✓ OK pour la production Validation :

Forms - bilan Nouveaux types : ✓ OK pour la production Validation : ✓ OK pour création

Forms - bilan Nouveaux types : ✓ OK pour la production Validation : ✓ OK pour création ✓ OK pour enrichissement

Forms - bilan Nouveaux types : ✓ OK pour la production Validation : ✓ OK pour création ✓ OK pour enrichissement Modification : au cas par cas

Microdata

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> 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 <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> 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 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le 3 Novembre. Note: 5 sur 5 </div>

Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time>3 Novembre</time>. Note: 5 sur 5 </div>

Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03"> 3 Novembre</time>. Note: 5 sur 5 </div>

Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> 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 <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03" itemprop="dtreviewed"> 3 Novembre</time>. Note:<span itemprop="rating">5</span> sur 5 </div>

Microdata <div itemscope itemtype="http://data-vocabulary.org/Review"> <h1 itemprop="itemreviewed"> Dragon Age</h1> Avis rédigé par <span itemprop="reviewer">GameSpot</span> le <time datetime="2009-11-03" itemprop="dtreviewed"> 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

by Jean-Pierre Vincent on Oct 14, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 198

Statistics

HTML5 maintenant partie 1 : la sémantique — Presentation Transcript

http://braincracking.org	197
http://feeds.feedburner.com	1