Html5 now light

HTML5 en productionMaintenant

solutions pratiques de IE6 à nos jours

Jean-pierre VINCENT

Qui ça ?Jean-pierre VINCENT

braincracking.org@theystolemynick

Je sers le Web et c'est ma joie :houra.fr, Yahoo!, Kelkoo

Time of my Life.com

HTML5 en productionMaintenant

solutions pratiques de IE6 à nos jours

Jean-pierre VINCENT

Le poids des mots

HTML5 : 2022 (Ian Hickson, éditeur HMTL5)

Le poids des mots

HTML5 : 2022 (Ian Hickson, éditeur HMTL5)

“I don't think it's ready for production yet“(Philippe Le Hégaret, chef HTML5)

2022 ? pas peur●

2022 ? pas peur● CSS 2.1 : candidate recommandation

●


● Selector API 2 : Draft, mais utilisé par 90% des développeurs grâce à jQuery

●


● Selector API 2 : Draft, mais utilisé par 90% des développeurs grâce à jQuery

● HTML4 : 1999, CSS: 1996 implémentations variées ...

Production

!==

Recommandation W3C

Production

===

Accès facile+ stabilité+ besoin

Web Storage

Stockage

7 implémentations !

StockageDepuis

● IE 6-7 !

Web Storage● UserData

Web Storage● UserData● GlobalStorage

Web Storage● UserData● GlobalStorage● Flash shared object

Web Storage● UserData● GlobalStorage● Flash shared object● Hack window.name


Et enfin Web Storage


Et enfin Web Storage (3 implémentations)

Web StorageDéveloppeur Librairie

LibrairiesIE UserData :

• jQuery jStorage (jstorage.info)• YUI3 Storage lite (bit.ly/lib_store1)



Flash shared object : ✓ YUI2 Storage (yhoo.it/lib_store2)



Flash shared object : ✓ YUI2 Storage (yhoo.it/lib_store2)

window.name :• sessionstorage (bit.ly/lib_store3)

Web StorageConclusion

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

⚠ IE fiable < 64k ou 100k

HTML5Conclusion

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

⚠ IE fiable < 64k ou 100k

quel HTML5 ?Officiel :• Balises• Microdata• Forms• Multimédia• Canvas• Web Storage• Drag & Drop• WebSockets

Associé :● Geolocation● SVG● Upload

Buzz :● CSS3 ...

HTML5Découper, enrober, servir chaud

découpons HTML5

● Sémantique

● APIs

Balises

Balises

<!doctype html>

bit.ly/HTML5_fr bit.ly/XHTML5_fr

Balises

✓Migration HTML5 OK

Merci :)

Balises (avant)<div><div>...</div>

</div><div><div>...<span> ...<p><div>...</div>

</div><div>...</div>

Balises (avant)<div><div>...</div>

</div><div><div>...<span> ...<p><div>...</div>

</div><div>...</div>

Balises (après)

Balises

Balises <meter value=25 max=100>


<progress value=25 max=100>



<figure><figcaption>



<figure><figcaption>

Balises - Bilan● Standard● Facile à comprendre

===

● Bénéfices référencement (bientôt)● Maintenable● Accessible

Balises

✓ Production ⚠ Dépendance JS pour IE6-8

bit.ly/HTML5_shiv

Microdata

MicrodataBalisage sémantique avec

vocabulaire personnalisé

Concurrent de :● Microformats● RDFa

MicrodataIntérêt immédiat : Google

bit.ly/data-google

Microdata● Sémantique standardisée

===

● Référencement● Accessibilité● Exploitation par le navigateur

Microdata

✓ Utilisable en production

Formulaires

Formulaires - types<input type=email />

● Clavier approprié

● Pré-remplissage

● Interface

Formulaires - types<input type=url />

● Clavier approprié

● Pré-remplissage

Formulaires - types<input type=date />

● Interface appropriée

Formulaires - types<input type=color />

● Interface appropriée

Formulaires - types

Non reconnu ?

Formulaires - types

Non reconnu ? =

type=text

Formulaires - types

Non reconnu ? =

type=text=

✓ fonctionnalité OK

Formulaires - types

✓ Production ⚠ Accepter styles et Widgets natifs

</semantique>

<script src=HTML5/API >

découpons HTML5Officiel :

✓ Balises✓ Microdata✓ Forms

• Multimédia• Canvas✓ Web Storage

• Drag & Drop• WebSockets

Associé :● Geolocation● SVG● Upload

Buzz :● CSS3 ...

Spécifications

!==

innovation

Standardiser

Standardiser l'existant

Comment on faisait ?

Comment on faisait ?● Geolocation ? Adresse IP

Comment on faisait ?● Geolocation ? ● Drop de fichiers ?

Adresse IPApplet java

Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ?

Adresse IPApplet javaJavascript

Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ?

Adresse IPApplet javaJavascriptFlash

Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ? ● Drag & Drop ?

Adresse IPApplet javaJavascriptFlashIE

Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ? ● Drag & Drop ?● Online ?

Adresse IPApplet javaJavascriptFlashIEIE

Comment on faisait ?● Geolocation ? ● Drop de fichiers ? ● Forms 2 ? ● <video> ? ● Drag & Drop ?● Online ?● 2D ?

Adresse IPApplet javaJavascriptFlashIEIEVML, flash

Développeur Librairie

Formulaires

Forms - comportement

bit.ly/form2_demo

Forms - comportementEmulation :

● H5Fbit.ly/lib_H5F

● Webforms2bit.ly/lib_WF2

bit.ly/form2_demo

Forms - comportementDéclaratif et standardisé


<input type=number

/>


<input type=numberplaceholder="Combien ?"

/>


<input type=numberplaceholder="Combien ?"required

/>


<input type=numberplaceholder="Combien ?"requiredautofocus

/>


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

/>

Forms - comportementGain ?

Standard===

AccessibilitéFacilité de codage

Forms - bilan

✓ OK pour création

Forms - bilan

✓ OK pour création ✓ OK pour enrichissement

Forms - bilan

✓ OK pour création ✓ OK pour enrichissement⚠Modification : au cas par cas

Geolocation

Vous êtes ici

Geolocation

bit.ly/geoloc_demo

Geolocation

bit.ly/geoloc_demo

Natif Détection IP

4km

Geolocation

Alternative : ● Achat de bases d'IP

Librairie :● YQL-Geo-Library

• bit.ly/lib_geo

Geolocation

✓ Utilisable en production

découpons HTML5Officiel :

✓ Balises✓ Microdata✓ Forms

• Multimédia• Canvas✓ Web Storage

• Drag & Drop• WebSockets

Associé :✓ Geolocation

● SVG● Upload

Plus de démos ?

Je vais conclure

Utilisez les standards● Gains immédiats

● Accessibilité

● Référencement

● Utilisabilité

● Maintenance

Utilisez les librairies● Accès facile

● Maintenance

● Suivi des Specs

● Contribuez

Maintenant● Testez

● Jouez

● Déployez

● Partagez

2022

Questions ?

braincracking.orgRemerciez timeOfMyLife.com

Technology

Html5 now light