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 conditions

1. Forms - comportement
Déclaratif et standardisé

2. Forms - comportement
Déclaratif et standardisé
<input type=number
/>

3. Forms - comportement
Déclaratif et standardisé
<input type=number
placeholder="Combien ?"
/>

4. Forms - comportement
Déclaratif et standardisé
<input type=number
placeholder="Combien ?"
required
/>

5. Forms - comportement
Déclaratif et standardisé
<input type=number
placeholder="Combien ?"
required
autofocus
/>

6. Forms - comportement
Déclaratif et standardisé
<input type=number
placeholder="Combien ?"
required
autofocus
max=10
/>

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

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

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

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

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

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

13. Forms - comportement
Emulation :
●
●

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

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

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

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

18. Geolocation
Vous êtes ici

19. 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)

20. Géolocation
bit.ly/geoloc_demo

21. Géolocation
Natif
bit.ly/geoloc_demo

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

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

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

25. Geolocation
window.navigator.geolocation

26. Geolocation
window.navigator.geolocation
.getCurrentPosition( )

27. Geolocation
window.navigator.geolocation
.getCurrentPosition(fSuccess)

28. Geolocation
window.navigator.geolocation
.getCurrentPosition(fSuccess)

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

30. 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

31. Geolocation
✓ Utilisable en production

32. Web Storage

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

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

35. 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

36. Web Storage
Support
●

37. Web Storage
Support
● IE 6-7 !

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

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

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

41. 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)

42. Web Storage
Alternatives :
●
●

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

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

45. Web Storage
Développeur Librairie

46. 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)

47. 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)

48. Web Storage
Démo IE6, avec YUI3 storage lite
bit.ly/demo_storage

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