SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 30 day free trial to unlock unlimited reading.
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
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)
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
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
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)
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