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