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.
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
   autofocu...
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}"
  />

        ...
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....
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...
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...
Geolocation
window.navigator.geolocation
Geolocation
window.navigator.geolocation
     .getCurrentPosition(      )
Geolocation
window.navigator.geolocation
     .getCurrentPosition(fSuccess)
Geolocation
window.navigator.geolocation
     .getCurrentPosition(fSuccess)
Geolocation
window.navigator.geolocation
     .getCurrentPosition(fSuccess)


fSuccess = function(oPosition) {
     oPosit...
Geolocation alternatives
●   Achat de bases IP/ville (gros site)
     • Démo IE6 : bit.ly/geoloc_demo

●   YQL-Geo-Library...
Geolocation


✓ Utilisable en production
Web Storage
Web Storage
●   Comme un cookie :
     • Clé / valeur
     • Persistant ou non

●   Mieux qu'un cookie :
     • > 4k
     ...
Web Storage
window.localStorage {
  .setItem( key, value )
  .getItem( key )
  .removeItem( key )
}


       bit.ly/spec_s...
Web Storage
 Stocker quoi ?
● Longues listes

   • Pays, régions, ville
   • Marque / modèles
● Données de page en page

●...
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 (globalStora...
Web Storage
Support
  IE 6-7 (userData, 64k ) : bit.ly/userData
  IE 8 (10Mo, asynchrone, string)

  FF2, FF3 (globalStora...
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

●   w...
Web Storage
Développeur           Librairie
Web Storage
IE UserData :
  • jQuery jStorage     (jstorage.info)
  • YUI3 Storage lite   (bit.ly/lib_store1)

Flash share...
Web Storage
IE UserData :
  • jQuery jStorage     (jstorage.info)
  • YUI3 Storage lite   (bit.ly/lib_store1)

Flash share...
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
Upcoming SlideShare
Loading in …5
×

HTML5 maintenant partie 2 : APIs

2,463 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
  • 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

×