Advertisement
Check these out next
Html5 now light
Oct. 14, 2010•0 likes•1,263 views
1 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Technology
Business
Jean-Pierre VincentFollow
Web app expert at braincracking.orgAdvertisement
Advertisement
Advertisement
Recommended
HTML5 maintenant partie 2 : APIsJean-Pierre Vincent
HTML5 maintenant partie 3 : multimediaJean-Pierre Vincent
HTML5 maintenant partie 1 : la sémantiqueJean-Pierre Vincent
Html5 bonnes-pratiquesJean-Pierre Vincent
10 conseils pour booster les performances de votre site sous WordPressAurélien Denis
64 conneries que font les référenceurs avec WordPressAurélien Denis
Html5 now light
- HTML5 en production Maintenant solutions pratiques de IE6 à nos jours Jean-pierre VINCENT
- Qui ça ? Jean-pierre VINCENT braincracking.org @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
- Le poids des mots HTML5 : 2022 (Ian Hickson, éditeur HMTL5)
- Le poids des mots HTML5 : 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 ...
- Production !== Recommandation W3C
- Production === Accès facile + stabilité + besoin
- Web Storage
- Stockage 7 implémentations !
- Stockage Depuis ● IE 6-7 !
- Web Storage ● UserData
- Web Storage ● UserData ● GlobalStorage
- Web Storage ● UserData ● GlobalStorage ● Flash shared object
- Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name
- Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name Et enfin Web Storage
- Web Storage ● UserData ● GlobalStorage ● Flash shared object ● Hack window.name Et enfin Web Storage (3 implémentations)
- Web Storage Développeur Librairie
- Librairies IE UserData : • jQuery jStorage (jstorage.info) • YUI3 Storage lite (bit.ly/lib_store1)
- Librairies IE UserData : • jQuery jStorage (jstorage.info) • YUI3 Storage lite (bit.ly/lib_store1) Flash shared object : ✓ YUI2 Storage (yhoo.it/lib_store2)
- Librairies IE UserData : • jQuery jStorage (jstorage.info) • YUI3 Storage lite (bit.ly/lib_store1) Flash shared object : ✓ YUI2 Storage (yhoo.it/lib_store2) window.name : • sessionstorage (bit.ly/lib_store3)
- Web Storage Conclusion ✓ OK pour la prod (je l'ai fait) IE fiable < 64k ou 100k
- HTML5 Conclusion ✓ OK pour la prod (je l'ai fait) IE fiable < 64k ou 100k
- quel HTML5 ? Officiel : Associé : • Balises ● Geolocation • Microdata ● SVG • Forms ● Upload • Multimédia • Canvas • Web Storage • Drag & Drop Buzz : • WebSockets ● CSS3 ...
- HTML5 Découper, enrober, servir chaud
- découpons HTML5 ● Sémantique ● APIs
- Balises
- Balises <!doctype html> bit.ly/HTML5_fr bit.ly/XHTML5_fr
- Balises ✓ Migration HTML5 OK Merci :)
- Balises (avant) <div> <div>...</div> </div> <div> <div>...<span> ... <p> <div>...</div> </div> <div>...</div>
- Balises (avant) <div> <div>...</div> </div> <div> <div>...<span> ... <p> <div>...</div> </div> <div>...</div>
- Balises (après)
- Balises
- Balises <meter value=25 max=100>
- Balises <meter value=25 max=100> <progress value=25 max=100>
- Balises <meter value=25 max=100> <progress value=25 max=100> <figure> <figcaption>
- Balises <meter value=25 max=100> <progress value=25 max=100> <figure> <figcaption>
- Balises - Bilan ● Standard ● Facile à comprendre === ● Bénéfices référencement (bientôt) ● Maintenable ● Accessible
- Balises ✓ Production Dépendance JS pour IE6-8 bit.ly/HTML5_shiv
- Microdata
- Microdata Balisage sémantique avec vocabulaire personnalisé Concurrent de : ● Microformats ● RDFa
- Microdata Intérêt immédiat : Google bit.ly/data-google
- Microdata ● Sémantique standardisée === ● Référencement ● Accessibilité ● Exploitation par le navigateur
- Microdata ✓ Utilisable en production
- Formulaires
- 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 ?
- Formulaires - types Non reconnu ? = type=text
- Formulaires - types Non reconnu ? = type=text = ✓ fonctionnalité OK
- Formulaires - types ✓ Production Accepter styles et Widgets natifs
- </semantique> <script src=HTML5/API >
- découpons HTML5 Officiel : Associé : ✓ Balises ● Geolocation ✓ Microdata ● SVG ✓ Forms ● Upload • Multimédia • Canvas ✓ Web Storage Buzz : • Drag & Drop ● CSS3 ... • WebSockets
- Spécifications !== innovation
- Standardiser Standardiser l'existant
- Comment on faisait ?
- Comment on faisait ? ● Geolocation ? Adresse IP
- Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java
- Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript
- Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash
- Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash ● Drag & Drop ? IE
- Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash ● Drag & Drop ? IE ● Online ? IE
- Comment on faisait ? ● Geolocation ? Adresse IP ● Drop de fichiers ? Applet java ● Forms 2 ? Javascript ● <video> ? Flash ● Drag & Drop ? IE ● Online ? IE ● 2D ? VML, flash
- Développeur Librairie
- Formulaires
- Forms - comportement bit.ly/form2_demo
- Forms - comportement Emulation : ● H5F bit.ly/lib_H5F ● Webforms2 bit.ly/lib_WF2 bit.ly/form2_demo
- Forms - comportement Déclaratif et standardisé
- Forms - comportement Déclaratif et standardisé <input type=number />
- Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" />
- Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required />
- Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required autofocus />
- Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required autofocus max=10 />
- Forms - comportement Gain ? Standard === Accessibilité Facilité de codage
- Forms - bilan ✓ OK pour création
- Forms - bilan ✓ OK pour création ✓ OK pour enrichissement
- Forms - bilan ✓ OK pour création ✓ OK pour enrichissement Modification : au cas par cas
- Geolocation Vous êtes ici
- Geolocation bit.ly/geoloc_demo
- Geolocation Natif Détection IP 4km bit.ly/geoloc_demo
- Geolocation Alternative : ● Achat de bases d'IP Librairie : ● YQL-Geo-Library • bit.ly/lib_geo
- Geolocation ✓ Utilisable en production
- découpons HTML5 Officiel : Associé : ✓ Balises ✓ Geolocation ✓ Microdata ● SVG ✓ Forms ● Upload • Multimédia • Canvas ✓ Web Storage • Drag & Drop • WebSockets
- Plus de démos ?
- Je vais conclure
- Utilisez les standards ● Gains immédiats ● Accessibilité ● Référencement ● Utilisabilité ● Maintenance
- Utilisez les librairies ● Accès facile ● Maintenance ● Suivi des Specs ● Contribuez
- Maintenant ● Testez 2022 ● Jouez ● Déployez ● Partagez
- Questions ? braincracking.org Remerciez timeOfMyLife.com
Advertisement