Télécharger en tant que ODP, PPTX
Téléchargé parJean-Pierre Vincent
Html5 bonnes-pratiques
Le document traite des bonnes pratiques et des défis liés à HTML5, notamment l'accessibilité, la sécurité et la hiérarchie des éléments. Il aborde les nouvelles syntaxes et failles de sécurité tout en proposant des solutions, telles que l'utilisation de HTML5 shiv pour les navigateurs anciens. Enfin, il souligne l'importance de la validation côté serveur pour les formulaires et évoque des techniques comme le server sent event pour améliorer les interactions utilisateurs.
Html5 bonnes-pratiques
- 1. Les bonnes pratiqueset HTML5 Jean-pierre VINCENT
- 2.
- 3. Qui ça ?Jean-pierre VINCENT braincracking.org @theystolemynick Je sers le Web et c'est ma joie : houra.fr, Yahoo!, timeofmylife.com Livre « HTML5 » en juillet 2011
- 4. HTML5 casse toutAccessibilité
- 5.
- 6. Nouvelles failles desécurité
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. Nouveaux éléments header, nav et les autres (de type display:block )
- 13.
- 14. Non stylable surIE < 9
- 15. Nouveaux éléments Solution1 : HTML5 shiv <script> document.createElement('article') </script>
- 16. Nouveaux éléments Solution1 : HTML5 shiv <script> document.createElement('article') </script> < article class="article" role="main"> <h1>...</h1> ... </ article >
- 17. Nouveaux éléments Solution1 : HTML5 shiv ✗ Dépendance de IE à JavaScript ✓ Sémantique OK ✓ Code normal
- 18. Nouveaux éléments Solution2 : XML namespace <html xmlns:html5 ="http://www.w3.org/1999/xhtml"> < html5:article class="article" role="main"> <h1>...</h1> ... </ html5:article >
- 19. Nouveaux éléments Solution2 : XML namespace ✓ Pas de dépendance JS ✗ Sémantique KO ✗ Code CSS et HTML modifié
- 20. Nouveaux éléments Solution3 : éléments parents <article> <div class="article" role="main"> <h1>...</h1> ... </div> </article>
- 21. Nouveaux éléments Solution3 : éléments parents ✓ Pas de dépendance JS ✓ Sémantique OK ✗ Code CSS et HTML modifié
- 22. Nouveaux éléments Conclusion: facilité de codage ? Shim
- 23. IE sans JSmais BP de codage ? Éléments parent
- 24. Hiérarchie BP#3 :hiérarchie de titres dans la page
- 25. Problème : HTML5a défini un nouvel algorithme
- 26. Hiérarchie HTML 4: <body> <h1> titre page </h1> <div role=main class=article> <h2> titre article </h2> </div>
- 27. 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>
- 28. Hiérarchie Très utilisépar les utilisateurs d'AT
- 29. Pas changeable selonle doctype
- 30. Différent selon lemoteur HTML
- 31. Hiérarchie Pas deréelle solution Ne pas utiliser de balises de section
- 32. Servir un HTMLdifférent selon le navigateur
- 33. Ignorer le problème(petites hiérarchies)
- 34.
- 35. Liens d'évitement (BP#132)Théorie : Remplacés par rôles ARIA ( main , navigation , search )
- 36. Rôles ARIA transmisau AT par le navigateur
- 37. Traduction automatique d'élémentsHTML5 en ARIA
- 38. Liens d'évitement (BP#132)Pratique : Utilisateurs clavier sans AT
- 39.
- 40. Dans la spec,les rôles main et search sont à définir manuellement
- 41. Liens d'évitement (BP#132)Toujours utile
- 42. HTML5 et ARIAaussi
- 43. Canvas Inaccessible (pireque Flash)
- 44. BP#86 : proposerune alternative
- 45. Ou pas, dansle cas d'effets décoratifs
- 46.
- 47. Images Reproche àHTML5 : alt non obligatoire (BP#1)
- 48. Suppression de longdesc
- 49. Images Reproche àHTML5 : alt non obligatoire (BP#1)
- 50. Suppression de longdesc
- 51. summary (pourtable)
- 52.
- 53. Utiliser alt comme aujourd'hui
- 54.
- 55. WebSocket mort ?Problème : faille dans le protocole
- 56. WebSocket mort ?Problème : faille dans le protocole A relativiser : Attaque par proxy intermédiaire
- 57. HTTP est déjàconcerné
- 58. Ceux qui utilisaientWebSocket en prod utilisent Flash en fallback
- 59. Le protocole changera,pas l'API
- 60. Sécurité Problème :html5sec.org recense 10 nouvelles attaques possibles Solution ?
- 61. Sécurité Problème :html5sec.org recense 10 nouvelles attaques possibles Solution : comme toujours, on filtre la sortie HTML
- 62. Les formulaires BP#35: indication du contenu des input (placeholder)
- 63. Les formulaires BP#36: affichage des erreurs ( required , type , pattern )
- 64. BP#39 : caractèreobligatoire des champs ( required + CSS)
- 65.
- 66.
- 67.
- 68. Les formulaires Çava sans dire, mais ça va mieux en le disant : BP#180 : validation des formulaires côté serveur
- 69. URL Mode du#! (convention google)
- 70. Arrivée de HTML5history
- 71. AJAX est (trop)dans la place
- 72.
- 73.
- 74.
- 75. URL Serveur :URL = 1 page + Client : HTML5 history.pushState() = Github Questions ? voir github.com/craigbarnes/html5-shiv
- 76. Développement par couches1. HTML + serveur (2 pages) 2. CSS 3. JavaScript (1 page + XHR) 4. API HTML5 (LocalStorage)
- 77. Server Sent EventBP#53 : nommer les iframes (ou les éviter)
- 78. Problème : techniquede long polling
- 79. Solution : ServerSent Event
- 80. Sniffing BP :détecter la fonctionnalité plutôt que le navigateur
- 81. Problème : implémentationsbancales