Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 maintenant partie 2 : APIs

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

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

×