HTML5 maintenant partie 1 : la sémantique
Upcoming SlideShare
Loading in...5
×
 

HTML5 maintenant partie 1 : la sémantique

on

  • 3,745 views

1ère partie de la présentation HTML5 maintenant : les nouvelles balises, microdata, les nouveaux formulaires, bref tout ce qui fait l'évolution de la sémantique de HTML4

1ère partie de la présentation HTML5 maintenant : les nouvelles balises, microdata, les nouveaux formulaires, bref tout ce qui fait l'évolution de la sémantique de HTML4

Statistics

Views

Total Views
3,745
Views on SlideShare
3,546
Embed Views
199

Actions

Likes
5
Downloads
66
Comments
0

3 Embeds 199

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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