HTML5 maintenant partie 2 : APIs

2,213 views

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,213
On SlideShare
0
From Embeds
0
Number of Embeds
105
Actions
Shares
0
Downloads
48
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 maintenant partie 2 : APIs

  1. 1. Forms - comportement Déclaratif et standardisé
  2. 2. Forms - comportement Déclaratif et standardisé <input type=number />
  3. 3. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" />
  4. 4. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required />
  5. 5. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required autofocus />
  6. 6. Forms - comportement Déclaratif et standardisé <input type=number placeholder="Combien ?" required autofocus max=10 />
  7. 7. Forms - comportement Déclaratif et standardisé <input type= />
  8. 8. Forms - comportement Déclaratif et standardisé <input type=text />
  9. 9. Forms - comportement Déclaratif et standardisé <input type=text required />
  10. 10. Forms - comportement Déclaratif et standardisé <input type=text required pattern="[a-zA-Z]{5,10}" />
  11. 11. Forms - comportement Déclaratif et standardisé <input type=text required pattern="[a-zA-Z]{5,10}" /> bit.ly/form2_demo
  12. 12. Forms - comportement Gain ? Standard = Accessibilité Facilité de codage
  13. 13. Forms - comportement Emulation : ● ●
  14. 14. Forms - comportement Emulation : ● H5F bit.ly/lib_H5F ●
  15. 15. Forms - comportement Emulation : ● H5F bit.ly/lib_H5F ● Webforms2 bit.ly/lib_WF2
  16. 16. Forms - comportement Emulation : ● H5F bit.ly/lib_H5F ● Webforms2 bit.ly/lib_WF2 bit.ly/form2_demo
  17. 17. Forms - bilan Validation : ✓ OK pour création ✓ OK pour enrichissement Modification : au cas par cas
  18. 18. Geolocation Vous êtes ici
  19. 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. 20. Géolocation bit.ly/geoloc_demo
  21. 21. Géolocation Natif bit.ly/geoloc_demo
  22. 22. Géolocation Natif Détection IP bit.ly/geoloc_demo
  23. 23. Géolocation Natif Détection IP 4km bit.ly/geoloc_demo
  24. 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. 25. Geolocation window.navigator.geolocation
  26. 26. Geolocation window.navigator.geolocation .getCurrentPosition( )
  27. 27. Geolocation window.navigator.geolocation .getCurrentPosition(fSuccess)
  28. 28. Geolocation window.navigator.geolocation .getCurrentPosition(fSuccess)
  29. 29. Geolocation window.navigator.geolocation .getCurrentPosition(fSuccess) fSuccess = function(oPosition) { oPosition.coords.longitude; oPosition.coords.latitude; };
  30. 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. 31. Geolocation ✓ Utilisable en production
  32. 32. Web Storage
  33. 33. Web Storage ● Comme un cookie : • Clé / valeur • Persistant ou non ● Mieux qu'un cookie : • > 4k • Performances OK
  34. 34. Web Storage window.localStorage { .setItem( key, value ) .getItem( key ) .removeItem( key ) } bit.ly/spec_storage
  35. 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. 36. Web Storage Support ●
  37. 37. Web Storage Support ● IE 6-7 !
  38. 38. Web Storage Support IE 6-7 (userData, 64k ) : bit.ly/userData
  39. 39. Web Storage Support IE 6-7 (userData, 64k ) : bit.ly/userData IE 8 (10Mo, asynchrone, string)
  40. 40. Web Storage Support IE 6-7 (userData, 64k ) : bit.ly/userData IE 8 (10Mo, asynchrone, string) FF2, FF3 (globalStorage, string)
  41. 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. 42. Web Storage Alternatives : ● ●
  43. 43. Web Storage Alternatives : ● Flash shared object ✓ 100K, extensible à l'infini permission utilisateur ●
  44. 44. Web Storage Alternatives : ● Flash shared object ✓ 100K, extensible à l'infini permission utilisateur ● window.name (hack) ✓ in(dé)fini Performances ?
  45. 45. Web Storage Développeur Librairie
  46. 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. 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. 48. Web Storage Démo IE6, avec YUI3 storage lite bit.ly/demo_storage
  49. 49. Web Storage Conclusion ✓ OK pour la prod (je l'ai fait) IE fiable < 64k ou 100k

×