SlideShare une entreprise Scribd logo
HTML5 en production
   Maintenant

   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 production
   Maintenant

   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

●
2022 ? pas peur
●   CSS 2.1 : candidate recommandation

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

●
2022 ? pas peur
●   CSS 2.1 : candidate recommandation

●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 !
Stockage
 Depuis
● 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
Web Storage
● UserData
● GlobalStorage

● Flash shared object

● Hack window.name




Et enfin
             Web Storage
Web Storage
● UserData
● GlobalStorage

● Flash shared object

● Hack window.name




Et enfin
 Web Storage (3 implémentations)
Web Storage
Développeur           Librairie
Librairies
IE UserData :
  • jQuery jStorage     (jstorage.info)
  • YUI3 Storage lite   (bit.ly/lib_store1)
Librairies
IE UserData :
  • jQuery jStorage     (jstorage.info)
  • YUI3 Storage lite   (bit.ly/lib_store1)

Flash shared object :
  ✓ YUI2 Storage        (yhoo.it/lib_store2)
Librairies
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)
Web Storage
          Conclusion


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



IE fiable < 64k ou 100k
HTML5
          Conclusion


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



IE fiable < 64k ou 100k
quel HTML5 ?
Officiel :       Associé :
• Balises       ● Geolocation


• Microdata     ● SVG


• Forms         ● Upload


• Multimédia
• Canvas
• Web Storage
• Drag & Drop    Buzz :
• WebSockets    ● CSS3 ...
HTML5
Dé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>
Balises
<meter value=25 max=100>

<progress value=25 max=100>
Balises
<meter value=25 max=100>

<progress value=25 max=100>


<figure>
<figcaption>
Balises
<meter value=25 max=100>

<progress value=25 max=100>


<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
Microdata
 Balisage sémantique avec
vocabulaire personnalisé


 Concurrent de :
● Microformats

● RDFa
Microdata
Inté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 HTML5
Officiel :        Associé :
 ✓ Balises       ● Geolocation


 ✓ Microdata     ● SVG

 ✓ Forms         ● Upload


• Multimédia
• Canvas
 ✓ Web Storage    Buzz :
• Drag & Drop    ● CSS3 ...

• WebSockets
Spécifications

     !==

 innovation
Standardiser


Standardiser l'existant
Comment on faisait ?
Comment on faisait ?
●   Geolocation ?   Adresse IP
Comment on faisait ?
● Geolocation ?        Adresse IP
● Drop de fichiers ?   Applet java
Comment on faisait ?
● Geolocation ?        Adresse IP
● Drop de fichiers ?   Applet java
● Forms 2 ?            Javascript
Comment on faisait ?
● Geolocation ?        Adresse IP
● Drop de fichiers ?   Applet java
● Forms 2 ?            Javascript
● <video> ?            Flash
Comment on faisait ?
● Geolocation ?        Adresse IP
● Drop de fichiers ?   Applet java
● Forms 2 ?            Javascript
● <video> ?            Flash
● Drag & Drop ?        IE
Comment on faisait ?
● Geolocation ?        Adresse IP
● Drop de fichiers ?   Applet java
● Forms 2 ?            Javascript
● <video> ?            Flash
● Drag & Drop ?        IE
● Online ?             IE
Comment on faisait ?
● Geolocation ?        Adresse IP
● Drop de fichiers ?   Applet java
● Forms 2 ?            Javascript
● <video> ?            Flash
● Drag & Drop ?        IE
● Online ?             IE
● 2D ?                 VML, flash
Développeur   Librairie
Formulaires
Forms - comportement




    bit.ly/form2_demo
Forms - comportement
Emulation :

●   H5F
          bit.ly/lib_H5F
● Webforms2


          bit.ly/lib_WF2


          bit.ly/form2_demo
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
   autofocus
   max=10
 />
Forms - comportement
Gain ?

             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
Natif               Détection IP



             4km



        bit.ly/geoloc_demo
Geolocation

 Alternative :
● Achat de bases d'IP




 Librairie :
● YQL-Geo-Library

   • bit.ly/lib_geo
Geolocation


✓ Utilisable en production
découpons HTML5
Officiel :        Associé :
 ✓ Balises        ✓ Geolocation
 ✓ Microdata     ● SVG

 ✓ Forms         ● Upload


• Multimédia
• Canvas
 ✓ Web Storage
• Drag & Drop
• WebSockets
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
                            2022
●   Jouez

●   Déployez

●   Partagez
Questions ?



            braincracking.org
Remerciez timeOfMyLife.com

Contenu connexe

Tendances

Web performance - appliquer les règles de base
Web performance - appliquer les règles de baseWeb performance - appliquer les règles de base
Web performance - appliquer les règles de base
Jonathan Buttigieg
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
Horacio Gonzalez
 

Tendances (16)

Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
 
Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?Comment réussir une migration de site web en seo ?
Comment réussir une migration de site web en seo ?
 
Web performance - appliquer les règles de base
Web performance - appliquer les règles de baseWeb performance - appliquer les règles de base
Web performance - appliquer les règles de base
 
Magento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerceMagento et SEO : le combo parfait pour développer son e-commerce
Magento et SEO : le combo parfait pour développer son e-commerce
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
 
Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
L’envers du décor d’un site WooCommerce | WP Tech Nantes
L’envers du décord’un site WooCommerce | WP Tech NantesL’envers du décord’un site WooCommerce | WP Tech Nantes
L’envers du décor d’un site WooCommerce | WP Tech Nantes
 
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidementENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
ENIB 2013-2014 - CAI Web #3: J’ai besoin d’une appli web rapidement
 
WebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenantWebExtensions - it's now / c'est maintenant
WebExtensions - it's now / c'est maintenant
 
Solutions multilingues pour WordPress
Solutions multilingues pour WordPressSolutions multilingues pour WordPress
Solutions multilingues pour WordPress
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java script
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
 
Accélérez le développement de vos interfaces web
Accélérez le développement de vos interfaces webAccélérez le développement de vos interfaces web
Accélérez le développement de vos interfaces web
 
JCertif 2013 - Vers un web moderne pour l'Afrique ?
JCertif 2013 - Vers un web moderne pour l'Afrique ?JCertif 2013 - Vers un web moderne pour l'Afrique ?
JCertif 2013 - Vers un web moderne pour l'Afrique ?
 

Similaire à Html5 now light

Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Frédéric Harper
 
Ingénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdfIngénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdf
JEANCLAUDECAMARA
 

Similaire à Html5 now light (20)

Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Inclure du Javascript de manière performante
Inclure du Javascript de manière performanteInclure du Javascript de manière performante
Inclure du Javascript de manière performante
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 2/3 - HTML5 / CSS3 / Twitter...
 
Techniques d'accélération des pages web
Techniques d'accélération des pages webTechniques d'accélération des pages web
Techniques d'accélération des pages web
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
 
HTML5
HTML5HTML5
HTML5
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
 
Présentation welcom la webperf by object23
Présentation welcom la webperf by object23Présentation welcom la webperf by object23
Présentation welcom la webperf by object23
 
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
JCertif Tunisie 2015 - Le Web sur Mobile, Faisons le point !
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Ingénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdfIngénieur étude et développement JAVA JEE.pdf
Ingénieur étude et développement JAVA JEE.pdf
 

Plus de Jean-Pierre Vincent

Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwiparty
Jean-Pierre Vincent
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech days
Jean-Pierre Vincent
 

Plus de Jean-Pierre Vincent (13)

Mesurer la performance : onload, pages
Mesurer la performance : onload, pagesMesurer la performance : onload, pages
Mesurer la performance : onload, pages
 
Les Performance de rendu sur mobile
Les Performance de rendu sur mobileLes Performance de rendu sur mobile
Les Performance de rendu sur mobile
 
La performance sur mobile
La performance sur mobileLa performance sur mobile
La performance sur mobile
 
Performances web - quoi de neuf ?
Performances web - quoi de neuf ?Performances web - quoi de neuf ?
Performances web - quoi de neuf ?
 
Accélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exempleAccélération des pages Web : les bases en exemple
Accélération des pages Web : les bases en exemple
 
Introduction à la webperf
Introduction à la webperfIntroduction à la webperf
Introduction à la webperf
 
Techniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwipartyTechniques accélération des pages web #kiwiparty
Techniques accélération des pages web #kiwiparty
 
Le monitoring de la performance front
Le monitoring de la performance frontLe monitoring de la performance front
Le monitoring de la performance front
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Function oop - bonnes pratiques ms tech days
Function   oop - bonnes pratiques ms tech daysFunction   oop - bonnes pratiques ms tech days
Function oop - bonnes pratiques ms tech days
 
Fondamentaux portée - contexte - function ms tech days
Fondamentaux   portée - contexte - function ms tech daysFondamentaux   portée - contexte - function ms tech days
Fondamentaux portée - contexte - function ms tech days
 
Javascript : fondamentaux et OOP
Javascript : fondamentaux et OOPJavascript : fondamentaux et OOP
Javascript : fondamentaux et OOP
 
Télés connectées et développement Web
Télés connectées et développement WebTélés connectées et développement Web
Télés connectées et développement Web
 

Html5 now light