Les bonnes pratiques et HTML5 Jean-pierre VINCENT
#fear
Qui ça ? <ul>Jean-pierre VINCENT braincracking.org @theystolemynick Je sers le Web et c'est ma joie : houra.fr, Yahoo!, ti...
HTML5 casse tout <ul><li>Accessibilité
Nouvelle syntaxe
Nouvelles failles de sécurité
Javascript only
Bonnes pratiques ?
Opquast
codage </li></ul>
Et vous ?
Nouveaux éléments <ul><li>header ,  nav  et les autres (de type  display:block )
Problème :
Non stylable sur IE < 9 </li></ul>
Nouveaux éléments <ul>Solution 1 : HTML5 shiv </ul><script> document.createElement('article') </script>
Nouveaux éléments <ul>Solution 1 : HTML5 shiv </ul><script> document.createElement('article') </script> < article  class=&...
Nouveaux éléments <ul>Solution 1 : HTML5 shiv ✗  Dépendance de IE à JavaScript ✓  Sémantique OK ✓  Code normal </ul>
Nouveaux éléments <ul>Solution 2 : XML namespace <html  xmlns:html5 =&quot;http://www.w3.org/1999/xhtml&quot;> </ul>< html...
Nouveaux éléments <ul>Solution 2 : XML namespace ✓  Pas de dépendance JS ✗  Sémantique KO ✗  Code CSS et HTML modifié </ul>
Nouveaux éléments <ul>Solution 3 : éléments parents </ul><article> <div class=&quot;article&quot; role=&quot;main&quot;> <...
Nouveaux éléments <ul>Solution 3 : éléments parents ✓  Pas de dépendance JS ✓  Sémantique OK ✗  Code CSS et HTML modifié <...
Nouveaux éléments <ul>Conclusion : <li>facilité de codage ? Shim
IE sans JS mais BP de codage ? Éléments parent </li></ul>
Hiérarchie <ul><li>BP#3 : hiérarchie de titres dans la page
Problème : HTML5 a défini un nouvel algorithme </li></ul>
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 : <bo...
Hiérarchie <ul><li>Très utilisé par les utilisateurs d'AT
Pas changeable selon le doctype
Différent selon le moteur HTML </li></ul>
Hiérarchie <ul>Pas de réelle solution <li>Ne pas utiliser de balises de section
Servir un HTML différent selon le navigateur
Ignorer le problème (petites hiérarchies) </li></ul>
<ul>Liens d'évitement (BP#132) </ul>
<ul>Liens d'évitement (BP#132) </ul><ul>Théorie : <li>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 </li></ul>
<ul>Liens d'évitement (BP#132) </ul><ul>Pratique :  <li>Utilisateurs clavier  sans AT
Support actuel restreint (FF4)
Dans la spec, les rôles  main  et  search  sont à définir manuellement </li></ul>
<ul>Liens d'évitement (BP#132) </ul><ul><li>Toujours utile
Prochain SlideShare
Chargement dans…5
×

Html5 bonnes-pratiques

4 356 vues

Publié le

les bonnes pratiques appliquées pour ou contre HTML5
présenté à strasbourg à la kiwi party

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
4 356
Sur SlideShare
0
Issues des intégrations
0
Intégrations
117
Actions
Partages
0
Téléchargements
90
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Html5 bonnes-pratiques

  1. 1. Les bonnes pratiques et HTML5 Jean-pierre VINCENT
  2. 2. #fear
  3. 3. Qui ça ? <ul>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 </ul>
  4. 4. HTML5 casse tout <ul><li>Accessibilité
  5. 5. Nouvelle syntaxe
  6. 6. Nouvelles failles de sécurité
  7. 7. Javascript only
  8. 8. Bonnes pratiques ?
  9. 9. Opquast
  10. 10. codage </li></ul>
  11. 11. Et vous ?
  12. 12. Nouveaux éléments <ul><li>header , nav et les autres (de type display:block )
  13. 13. Problème :
  14. 14. Non stylable sur IE < 9 </li></ul>
  15. 15. Nouveaux éléments <ul>Solution 1 : HTML5 shiv </ul><script> document.createElement('article') </script>
  16. 16. Nouveaux éléments <ul>Solution 1 : HTML5 shiv </ul><script> document.createElement('article') </script> < article class=&quot;article&quot; role=&quot;main&quot;> <h1>...</h1> ... </ article >
  17. 17. Nouveaux éléments <ul>Solution 1 : HTML5 shiv ✗ Dépendance de IE à JavaScript ✓ Sémantique OK ✓ Code normal </ul>
  18. 18. Nouveaux éléments <ul>Solution 2 : XML namespace <html xmlns:html5 =&quot;http://www.w3.org/1999/xhtml&quot;> </ul>< html5:article class=&quot;article&quot; role=&quot;main&quot;> <h1>...</h1> ... </ html5:article >
  19. 19. Nouveaux éléments <ul>Solution 2 : XML namespace ✓ Pas de dépendance JS ✗ Sémantique KO ✗ Code CSS et HTML modifié </ul>
  20. 20. Nouveaux éléments <ul>Solution 3 : éléments parents </ul><article> <div class=&quot;article&quot; role=&quot;main&quot;> <h1>...</h1> ... </div> </article>
  21. 21. Nouveaux éléments <ul>Solution 3 : éléments parents ✓ Pas de dépendance JS ✓ Sémantique OK ✗ Code CSS et HTML modifié </ul>
  22. 22. Nouveaux éléments <ul>Conclusion : <li>facilité de codage ? Shim
  23. 23. IE sans JS mais BP de codage ? Éléments parent </li></ul>
  24. 24. Hiérarchie <ul><li>BP#3 : hiérarchie de titres dans la page
  25. 25. Problème : HTML5 a défini un nouvel algorithme </li></ul>
  26. 26. Hiérarchie HTML 4 : <body> <h1> titre page </h1> <div role=main class=article> <h2> titre article </h2> </div>
  27. 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. 28. Hiérarchie <ul><li>Très utilisé par les utilisateurs d'AT
  29. 29. Pas changeable selon le doctype
  30. 30. Différent selon le moteur HTML </li></ul>
  31. 31. Hiérarchie <ul>Pas de réelle solution <li>Ne pas utiliser de balises de section
  32. 32. Servir un HTML différent selon le navigateur
  33. 33. Ignorer le problème (petites hiérarchies) </li></ul>
  34. 34. <ul>Liens d'évitement (BP#132) </ul>
  35. 35. <ul>Liens d'évitement (BP#132) </ul><ul>Théorie : <li>Remplacés par rôles ARIA ( main , navigation , search )
  36. 36. Rôles ARIA transmis au AT par le navigateur
  37. 37. Traduction automatique d'éléments HTML5 en ARIA </li></ul>
  38. 38. <ul>Liens d'évitement (BP#132) </ul><ul>Pratique : <li>Utilisateurs clavier sans AT
  39. 39. Support actuel restreint (FF4)
  40. 40. Dans la spec, les rôles main et search sont à définir manuellement </li></ul>
  41. 41. <ul>Liens d'évitement (BP#132) </ul><ul><li>Toujours utile
  42. 42. HTML5 et ARIA aussi </li></ul>
  43. 43. Canvas <ul><li>Inaccessible (pire que Flash)
  44. 44. BP#86 : proposer une alternative
  45. 45. Ou pas, dans le cas d'effets décoratifs </li></ul>
  46. 46. Canvas
  47. 47. Images <ul>Reproche à HTML5 : <li>alt non obligatoire (BP#1)
  48. 48. Suppression de longdesc </li></ul>
  49. 49. Images <ul>Reproche à HTML5 : <li>alt non obligatoire (BP#1)
  50. 50. Suppression de longdesc
  51. 51. summary (pour table)
  52. 52. Solution :
  53. 53. Utiliser alt comme aujourd'hui
  54. 54. Utiliser aria-describedby </li></ul>
  55. 55. WebSocket mort ? <ul>Problème : faille dans le protocole </ul>
  56. 56. WebSocket mort ? <ul>Problème : faille dans le protocole A relativiser : <li>Attaque par proxy intermédiaire
  57. 57. HTTP est déjà concerné
  58. 58. Ceux qui utilisaient WebSocket en prod utilisent Flash en fallback
  59. 59. Le protocole changera, pas l'API </li></ul>
  60. 60. Sécurité <ul>Problème : html5sec.org recense 10 nouvelles attaques possibles Solution ? </ul>
  61. 61. Sécurité <ul>Problème : html5sec.org recense 10 nouvelles attaques possibles Solution : comme toujours, on filtre la sortie HTML </ul>
  62. 62. Les formulaires <ul><li>BP#35 : indication du contenu des input (placeholder) </li></ul>
  63. 63. Les formulaires <ul><li>BP#36 : affichage des erreurs ( required , type , pattern )
  64. 64. BP#39 : caractère obligatoire des champs ( required + CSS)
  65. 65. <input type=text </li><ul><li>required
  66. 66. pattern=&quot;[a-zA-Z]{5,10}&quot;
  67. 67. /> </li></ul></ul>
  68. 68. Les formulaires <ul>Ça va sans dire, mais ça va mieux en le disant : <li>BP#180 : validation des formulaires côté serveur </li></ul>
  69. 69. URL <ul><li>Mode du #! (convention google)
  70. 70. Arrivée de HTML5 history
  71. 71. AJAX est (trop) dans la place
  72. 72. Twitter, gawker ... </li></ul>
  73. 73. URL <ul>twitter.com/#!/theystolemynick </ul>
  74. 74. URL <ul>gawker.com/#!5786244 </ul>
  75. 75. URL <ul>Serveur : URL = 1 page + Client : HTML5 history.pushState() = Github Questions ? voir github.com/craigbarnes/html5-shiv </ul>
  76. 76. Développement par couches <ul>1. HTML + serveur (2 pages) 2. CSS 3. JavaScript (1 page + XHR) 4. API HTML5 (LocalStorage) </ul>
  77. 77. Server Sent Event <ul><li>BP#53 : nommer les iframes (ou les éviter)
  78. 78. Problème : technique de long polling
  79. 79. Solution : Server Sent Event </li></ul>
  80. 80. Sniffing <ul><li>BP : détecter la fonctionnalité plutôt que le navigateur
  81. 81. Problème : implémentations bancales </li></ul>

×