html5 maintenant partie 2 : apis
DESCRIPTION
2ème volet de la présentation HTML5 maintenant : géolocalisation, nouveau formulaires, et Web storage au menu, afin de voir ce qu'il est possible d'utiliser dès aujourd'hui, et à quelles conditionsTRANSCRIPT
Forms - comportementDéclaratif et standardisé
Forms - comportementDéclaratif et standardisé
<input type=number
/>
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"
/>
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"required
/>
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"requiredautofocus
/>
Forms - comportementDéclaratif et standardisé
<input type=numberplaceholder="Combien ?"requiredautofocusmax=10
/>
Forms - comportementDéclaratif et standardisé
<input type=
/>
Forms - comportementDéclaratif et standardisé
<input type=text
/>
Forms - comportementDéclaratif et standardisé
<input type=textrequired
/>
Forms - comportementDéclaratif et standardisé
<input type=textrequiredpattern="[a-zA-Z]{5,10}"/>
Forms - comportementDéclaratif et standardisé
<input type=textrequiredpattern="[a-zA-Z]{5,10}"/>
bit.ly/form2_demo
Forms - comportementGain ?
Standard=
AccessibilitéFacilité de codage
Forms - comportementEmulation :
●
●
Forms - comportementEmulation :
● H5Fbit.ly/lib_H5F
●
Forms - comportementEmulation :
● H5Fbit.ly/lib_H5F
● Webforms2bit.ly/lib_WF2
Forms - comportementEmulation :
● H5Fbit.ly/lib_H5F
● Webforms2bit.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
bit.ly/geoloc_demo
Natif
Géolocation
bit.ly/geoloc_demo
Natif Détection IP
Géolocation
bit.ly/geoloc_demo
Natif Détection IP
4km
Geolocation
✓ Firefox 3.5+✓ Chrome 5+✓ Safari 5+✓ Opéra✓ Webkit mobile avec GPS
Implémentations concordantes !Basés sur Google Location Service
Geolocationwindow.navigator.geolocation
Geolocationwindow.navigator.geolocation .getCurrentPosition( )
Geolocationwindow.navigator.geolocation .getCurrentPosition(fSuccess)
Geolocationwindow.navigator.geolocation .getCurrentPosition(fSuccess)
Geolocationwindow.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 StorageStocker 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 StorageSupport
●
Web StorageSupport
● IE 6-7 !
Web StorageSupport
⚠ IE 6-7 (userData, 64k ) : bit.ly/userData
Web StorageSupport
⚠ IE 6-7 (userData, 64k ) : bit.ly/userData
⚠ IE 8 (10Mo, asynchrone, string)
Web StorageSupport
⚠ IE 6-7 (userData, 64k ) : bit.ly/userData
⚠ IE 8 (10Mo, asynchrone, string)
⚠ FF2, FF3 (globalStorage, string)
Web StorageSupport
⚠ 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 StorageAlternatives :
●
●
Web StorageAlternatives :
● Flash shared object ✓ 100K, extensible à l'infini
⚠ permission utilisateur
●
Web StorageAlternatives :
● Flash shared object ✓ 100K, extensible à l'infini
⚠ permission utilisateur
● window.name (hack) ✓ in(dé)fini
⚠ Performances ?
Web StorageDéveloppeur Librairie
Web StorageIE 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 StorageIE 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 StorageConclusion
✓ OK pour la prod (je l'ai fait)
⚠ IE fiable < 64k ou 100k