HTML5 maintenant partie 2 : APIs

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 Déclaratif et standardisé <input type= />

Forms - comportement Déclaratif et standardisé <input type=text />

Forms - comportement Déclaratif et standardisé <input type=text required />

Forms - comportement Déclaratif et standardisé <input type=text required pattern="[a-zA-Z]{5,10}" />

Forms - comportement Déclaratif et standardisé <input type=text required pattern="[a-zA-Z]{5,10}" /> bit.ly/form2_demo

Forms - comportement Gain ? Standard = Accessibilité Facilité de codage

Forms - comportement Emulation : ● ●

Forms - comportement Emulation : ● H5F bit.ly/lib_H5F ●

Forms - comportement Emulation : ● H5F bit.ly/lib_H5F ● Webforms2 bit.ly/lib_WF2

Forms - comportement Emulation : ● H5F bit.ly/lib_H5F ● Webforms2 bit.ly/lib_WF2 bit.ly/form2_demo

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

Geolocation Vous êtes ici

Geolocation ● Sorti d'HTML5 ● Candidate Recommendation ● A la mode : • Twitter • Facebook • Foursquare ● Mobile et bureau ● Remplace la détection par IP ● Accès au matériel (GPS, wifi)

Géolocation bit.ly/geoloc_demo

Géolocation Natif bit.ly/geoloc_demo

Géolocation Natif Détection IP bit.ly/geoloc_demo

Géolocation Natif Détection IP 4km bit.ly/geoloc_demo

Geolocation ✓ Firefox 3.5+ ✓ Chrome 5+ ✓ Safari 5+ ✓ Opéra ✓ Webkit mobile avec GPS Implémentations concordantes ! Basés sur Google Location Service

Geolocation window.navigator.geolocation

Geolocation window.navigator.geolocation .getCurrentPosition( )

Geolocation window.navigator.geolocation .getCurrentPosition(fSuccess)

Geolocation window.navigator.geolocation .getCurrentPosition(fSuccess) fSuccess = function(oPosition) { oPosition.coords.longitude; oPosition.coords.latitude; };

Geolocation alternatives ● Achat de bases IP/ville (gros site) • Démo IE6 : bit.ly/geoloc_demo ● YQL-Geo-Library (bit.ly/lib_geo) • Pur JS • Services google apps + YQL • 4ko

Geolocation ✓ Utilisable en production

Web Storage

Web Storage ● Comme un cookie : • Clé / valeur • Persistant ou non ● Mieux qu'un cookie : • > 4k • Performances OK

Web Storage window.localStorage { .setItem( key, value ) .getItem( key ) .removeItem( key ) } bit.ly/spec_storage

Web Storage Stocker quoi ? ● Longues listes • Pays, régions, ville • Marque / modèles ● Données de page en page ● Cache pour texte utilisateur ● Etat d'une application pour l'offline bit.ly/demo_storage

Web Storage Support ●

Web Storage Support ● IE 6-7 !

Web Storage Support IE 6-7 (userData, 64k ) : bit.ly/userData

Web Storage Support IE 6-7 (userData, 64k ) : bit.ly/userData IE 8 (10Mo, asynchrone, string)

Web Storage Support IE 6-7 (userData, 64k ) : bit.ly/userData IE 8 (10Mo, asynchrone, string) FF2, FF3 (globalStorage, string)

Web Storage Support IE 6-7 (userData, 64k ) : bit.ly/userData IE 8 (10Mo, asynchrone, string) FF2, FF3 (globalStorage, string) ✓ FF3.5, Safari, Chrome,Opéra (5Mo)

Web Storage Alternatives : ● ●

Web Storage Alternatives : ● Flash shared object ✓ 100K, extensible à l'infini permission utilisateur ●

Web Storage Alternatives : ● Flash shared object ✓ 100K, extensible à l'infini permission utilisateur ● window.name (hack) ✓ in(dé)fini Performances ?

Web Storage Développeur Librairie

Web Storage 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 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 Démo IE6, avec YUI3 storage lite bit.ly/demo_storage

Web Storage Conclusion ✓ OK pour la prod (je l'ai fait) IE fiable < 64k ou 100k

http://braincracking.org	99
http://feeds.feedburner.com	1
http://www.webpagetest.org	1

HTML5 maintenant partie 2 : APIs

by Jean-Pierre Vincent

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 101

Statistics

HTML5 maintenant partie 2 : APIs Presentation Transcript