SlideShare une entreprise Scribd logo
1  sur  41
Les bonnes pratiques et HTML5 Jean-pierre VINCENT
#fear
Qui ça ? ,[object Object]
HTML5 casse tout ,[object Object]
Nouvelle syntaxe
Nouvelles failles de sécurité
Javascript only
Bonnes pratiques ?
Opquast
codage
Et vous ?
Nouveaux éléments ,[object Object]
Problème :
Non stylable sur IE < 9
Nouveaux éléments ,[object Object],<script> document.createElement('article') </script>
Nouveaux éléments ,[object Object],<script> document.createElement('article') </script> < article  class=&quot;article&quot; role=&quot;main&quot;> <h1>...</h1> ... </ article >
Nouveaux éléments ,[object Object]
Nouveaux éléments ,[object Object],< html5:article  class=&quot;article&quot; role=&quot;main&quot;> <h1>...</h1> ... </ html5:article >
Nouveaux éléments ,[object Object]
Nouveaux éléments ,[object Object],<article> <div class=&quot;article&quot; role=&quot;main&quot;> <h1>...</h1> ... </div> </article>
Nouveaux éléments ,[object Object]
Nouveaux éléments ,[object Object]
IE sans JS mais BP de codage ? Éléments parent
Hiérarchie ,[object Object]
Problème : HTML5 a défini un nouvel algorithme
Hiérarchie HTML 4 : <body> <h1> titre page </h1> <div role=main class=article> <h2> titre article </h2> </div>
Hiérarchie HTML 4 : <body> <h1> titre page </h1> <div role=main class=article> <h2> titre article </h2> </div> HTML5 : <body> <h1> titre page </h1> <article role=main class=article> <h1> titre article </h1> </article>
Hiérarchie ,[object Object]
Pas changeable selon le doctype
Différent selon le moteur HTML
Hiérarchie ,[object Object]
Servir un HTML différent selon le navigateur
Ignorer le problème (petites hiérarchies)
[object Object]
[object Object],[object Object]
Rôles ARIA transmis au AT par le navigateur
Traduction automatique d'éléments HTML5 en ARIA
[object Object],[object Object]
Support actuel restreint (FF4)
Dans la spec, les rôles  main  et  search  sont à définir manuellement
[object Object],[object Object]

Contenu connexe

Tendances

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 (20)

Html5 now light
Html5 now lightHtml5 now light
Html5 now light
 
HTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIsHTML5 maintenant partie 2 : APIs
HTML5 maintenant partie 2 : APIs
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014
 
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
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
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 ?
 
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
 
Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014Combien coûte un site WordPress ? - Wordcamp Paris 2014
Combien coûte un site WordPress ? - Wordcamp Paris 2014
 
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...
 
HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux HTML5 & CSS3 : Jeux
HTML5 & CSS3 : Jeux
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
HTML5 maintenant partie 3 : multimedia
HTML5 maintenant partie 3 : multimediaHTML5 maintenant partie 3 : multimedia
HTML5 maintenant partie 3 : multimedia
 
HTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FRHTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FR
 
Publication de documents sur le Web
Publication de documents sur le WebPublication de documents sur le Web
Publication de documents sur le Web
 
Bootstrap 4
Bootstrap 4Bootstrap 4
Bootstrap 4
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5
 
Wordpress et la sécurité des plugins
Wordpress et la sécurité des pluginsWordpress et la sécurité des plugins
Wordpress et la sécurité des plugins
 
SEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturelSEO WordPress : Optimiser le référencement naturel
SEO WordPress : Optimiser le référencement naturel
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Wordcamp paris 2015 dev-pragmatique-bonnes-pratiques
Wordcamp paris 2015  dev-pragmatique-bonnes-pratiquesWordcamp paris 2015  dev-pragmatique-bonnes-pratiques
Wordcamp paris 2015 dev-pragmatique-bonnes-pratiques
 

Similaire à Html5 bonnes-pratiques

Similaire à Html5 bonnes-pratiques (20)

Atelier template
Atelier templateAtelier template
Atelier template
 
Introduction à PHP
Introduction à PHPIntroduction à PHP
Introduction à PHP
 
Chapitre2 HTML5
Chapitre2 HTML5Chapitre2 HTML5
Chapitre2 HTML5
 
Jump Camp - HTML5
Jump Camp - HTML5Jump Camp - HTML5
Jump Camp - HTML5
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Conception Web Avec Dreamweaver
Conception Web Avec DreamweaverConception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
 
RDFa, comment insuffler un peu d'intelligence à une page Web ?
RDFa, comment insuffler un peu d'intelligence à une page Web ?RDFa, comment insuffler un peu d'intelligence à une page Web ?
RDFa, comment insuffler un peu d'intelligence à une page Web ?
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
 
CreativeLab Html5 workshop
CreativeLab Html5 workshopCreativeLab Html5 workshop
CreativeLab Html5 workshop
 
Formation html3 css3
Formation html3 css3Formation html3 css3
Formation html3 css3
 
JsPhDDefense
JsPhDDefenseJsPhDDefense
JsPhDDefense
 
HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?HTML5, ARIA et accessibilité du Web: où en est-on?
HTML5, ARIA et accessibilité du Web: où en est-on?
 
Cours Php
Cours PhpCours Php
Cours Php
 
Cours Php
Cours PhpCours Php
Cours Php
 
Android Lab Test : La connectivité réseau avec HTTP (français)
Android Lab Test : La connectivité réseau avec HTTP (français)Android Lab Test : La connectivité réseau avec HTTP (français)
Android Lab Test : La connectivité réseau avec HTTP (français)
 
Internationalisation du Front
Internationalisation du FrontInternationalisation du Front
Internationalisation du Front
 
Formation html5
Formation html5Formation html5
Formation html5
 
Introduction au langage PHP (2éme partie) élaborée par Marouan OMEZZINE
Introduction au langage PHP (2éme partie) élaborée par Marouan OMEZZINEIntroduction au langage PHP (2éme partie) élaborée par Marouan OMEZZINE
Introduction au langage PHP (2éme partie) élaborée par Marouan OMEZZINE
 
Paris Web
Paris WebParis Web
Paris Web
 

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 (16)

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
 
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
 
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
 
Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010
 
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
 
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
 

Html5 bonnes-pratiques