Forms - comportementDéclaratif et standardisé

Forms - comportementDéclaratif et standardisé

<input type=number

/>

Forms - comportementDéclaratif et standardisé

<input type=numberplaceholder="Combien ?"

/>

Forms - comportementDéclaratif et standardisé

<input type=numberplaceholder="Combien ?"required

/>

Forms - comportementDéclaratif et standardisé

<input type=numberplaceholder="Combien ?"requiredautofocus

/>

Forms - comportementDéclaratif et standardisé

<input type=numberplaceholder="Combien ?"requiredautofocusmax=10

/>

Forms - comportementDéclaratif et standardisé

<input type=

/>

Forms - comportementDéclaratif et standardisé

<input type=text

/>

Forms - comportementDéclaratif et standardisé

<input type=textrequired

/>

Forms - comportementDéclaratif et standardisé

<input type=textrequiredpattern="[a-zA-Z]{5,10}"/>

Forms - comportementDéclaratif et standardisé

<input type=textrequiredpattern="[a-zA-Z]{5,10}"/>

bit.ly/form2_demo

Forms - comportementGain ?

Standard=

AccessibilitéFacilité de codage

Forms - comportementEmulation :

●

●

Forms - comportementEmulation :

● H5Fbit.ly/lib_H5F

●

Forms - comportementEmulation :

● H5Fbit.ly/lib_H5F

● Webforms2bit.ly/lib_WF2

Forms - comportementEmulation :

● H5Fbit.ly/lib_H5F

● Webforms2bit.ly/lib_WF2

bit.ly/form2_demo

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 et bureau● Remplace la détection par IP● Accès au matériel (GPS, wifi)

Géolocation

bit.ly/geoloc_demo

Géolocation

bit.ly/geoloc_demo

Natif

Géolocation

bit.ly/geoloc_demo

Natif Détection IP

Géolocation

bit.ly/geoloc_demo

Natif Détection IP

4km

Geolocation

✓ Firefox 3.5+✓ Chrome 5+✓ Safari 5+✓ Opéra✓ Webkit mobile avec GPS

Implémentations concordantes !Basés sur Google Location Service

Geolocationwindow.navigator.geolocation

Geolocationwindow.navigator.geolocation .getCurrentPosition( )

Geolocationwindow.navigator.geolocation .getCurrentPosition(fSuccess)

Geolocationwindow.navigator.geolocation .getCurrentPosition(fSuccess)

Geolocationwindow.navigator.geolocation .getCurrentPosition(fSuccess)

fSuccess = function(oPosition) { oPosition.coords.longitude;

oPosition.coords.latitude;};

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

Geolocation

✓ Utilisable en production

Web Storage

Web Storage● Comme un cookie :

• Clé / valeur• Persistant ou non

● Mieux qu'un cookie :• > 4k• Performances OK

Web Storage

window.localStorage {.setItem( key, value ).getItem( key ).removeItem( key )

}

bit.ly/spec_storage

Web StorageStocker 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

Web StorageSupport

●

Web StorageSupport

● IE 6-7 !

Web StorageSupport

⚠ IE 6-7 (userData, 64k ) : bit.ly/userData

Web StorageSupport

⚠ IE 6-7 (userData, 64k ) : bit.ly/userData

⚠ IE 8 (10Mo, asynchrone, string)

Web StorageSupport

⚠ IE 6-7 (userData, 64k ) : bit.ly/userData

⚠ IE 8 (10Mo, asynchrone, string)

⚠ FF2, FF3 (globalStorage, string)

Web StorageSupport

⚠ IE 6-7 (userData, 64k ) : bit.ly/userData

⚠ IE 8 (10Mo, asynchrone, string)

⚠ FF2, FF3 (globalStorage, string)

✓ FF3.5, Safari, Chrome,Opéra (5Mo)

Web StorageAlternatives :

●

●

Web StorageAlternatives :

● Flash shared object ✓ 100K, extensible à l'infini

⚠ permission utilisateur

●

Web StorageAlternatives :

● Flash shared object ✓ 100K, extensible à l'infini

⚠ permission utilisateur

● window.name (hack) ✓ in(dé)fini

⚠ Performances ?

Web StorageDéveloppeur Librairie

Web StorageIE 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)

Web StorageIE 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)

Web Storage

Démo IE6, avec YUI3 storage lite

bit.ly/demo_storage

Web StorageConclusion

✓ OK pour la prod (je l'ai fait)

⚠ IE fiable < 64k ou 100k