Post on 02-Jul-2015
description
Les bonnes pratiqueset HTML5
Jean-pierre VINCENT
#fear
Qui ça ?Jean-pierre VINCENT
braincracking.org@theystolemynick
Je sers le Web et c'est ma joie :
houra.fr, Yahoo!, timeofmylife.comLivre « HTML5 » en juillet 2011
HTML5 casse tout Accessibilité Nouvelle syntaxe Nouvelles failles de sécurité Javascript only
Bonnes pratiques ? Opquast codage
Et vous ?
Nouveaux éléments
header, nav et les autres (de type display:block)
Problème : Non stylable sur IE < 9
Nouveaux élémentsSolution 1 : HTML5 shiv<script> document.createElement('article')</script>
Nouveaux élémentsSolution 1 : HTML5 shiv<script> document.createElement('article')</script>
<article class="article" role="main"> <h1>...</h1> ...</article>
Nouveaux élémentsSolution 1 : HTML5 shiv
✗ Dépendance de IE à JavaScript
✓ Sémantique OK
✓ Code normal
Nouveaux élémentsSolution 2 : XML namespace<html xmlns:html5="http://www.w3.org/1999/xhtml">
<html5:article class="article" role="main"> <h1>...</h1> ...</html5:article>
Nouveaux élémentsSolution 2 : XML namespace
✓ Pas de dépendance JS
✗ Sémantique KO
✗ Code CSS et HTML modifié
Nouveaux élémentsSolution 3 : éléments parents
<article> <div class="article" role="main"> <h1>...</h1> ... </div></article>
Nouveaux élémentsSolution 3 : éléments parents
✓ Pas de dépendance JS
✓ Sémantique OK
✗ Code CSS et HTML modifié
Nouveaux élémentsConclusion :
facilité de codage ? Shim
IE sans JS mais BP de codage ? Éléments parent
Hiérarchie BP#3 : hiérarchie de titres dans la page
Problème : HTML5 a défini un nouvel algorithme
HiérarchieHTML 4 :<body><h1>titre page</h1><div role=main class=article> <h2>titre article</h2></div>
HiérarchieHTML 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
Très utilisé par les utilisateurs d'AT
Pas changeable selon le doctype
Différent selon le moteur HTML
HiérarchiePas de réelle solution
Ne pas utiliser de balises de section Servir un HTML différent selon le navigateur Ignorer le problème (petites hiérarchies)
Liens d'évitement (BP#132)
Liens d'évitement (BP#132)
Théorie : Remplacés par rôles ARIA (main, navigation, search) Rôles ARIA transmis au AT par le navigateur Traduction automatique d'éléments HTML5 en ARIA
Liens d'évitement (BP#132)
Pratique : Utilisateurs clavier sans AT
Support actuel restreint (FF4)
Dans la spec, les rôles main et search sont à définir manuellement
Liens d'évitement (BP#132)
Toujours utile
HTML5 et ARIA aussi
Canvas
Inaccessible (pire que Flash)
BP#86 : proposer une alternative
Ou pas, dans le cas d'effets décoratifs
Canvas
ImagesReproche à HTML5 : alt non obligatoire (BP#1) Suppression de longdesc
ImagesReproche à HTML5 : alt non obligatoire (BP#1) Suppression de longdesc summary (pour table)
Solution : Utiliser alt comme aujourd'hui Utiliser aria-describedby
WebSocket mort ?Problème : faille dans le protocole
WebSocket mort ?Problème : faille dans le protocole
A relativiser : Attaque par proxy intermédiaire HTTP est déjà concerné Ceux qui utilisaient WebSocket en prod utilisent Flash en fallback Le protocole changera, pas l'API
Sécurité
Problème : html5sec.org recense 10 nouvelles attaques possibles
Solution ?
Sécurité
Problème : html5sec.org recense 10 nouvelles attaques possibles
Solution : comme toujours, on filtre la sortie HTML
Les formulaires
BP#35 : indication du contenu des input (placeholder)
Les formulaires BP#36 : affichage des erreurs (required, type, pattern) BP#39 : caractère obligatoire des champs (required + CSS)
<input type=textrequiredpattern="[a-zA-Z]{5,10}"/>
Les formulairesÇa va sans dire, mais ça va mieux en le disant :
BP#180 : validation des formulaires côté serveur
URL Mode du #! (convention google) Arrivée de HTML5 history
AJAX est (trop) dans la place
Twitter, gawker ...
URL twitter.com/#!/theystolemynick
URLgawker.com/#!5786244
URL Serveur : URL = 1 page+ Client : HTML5 history.pushState()=
Github
Questions ?
voir github.com/craigbarnes/html5-shiv
Développement par couches
1. HTML + serveur (2 pages)2. CSS3. JavaScript (1 page + XHR)4. API HTML5 (LocalStorage)
Server Sent Event
BP#53 : nommer les iframes (ou les éviter)
Problème : technique de long polling
Solution : Server Sent Event
Sniffing BP : détecter la fonctionnalité plutôt que le navigateur Problème : implémentations bancales