Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Upcoming SlideShare
Loading in …5
×

Html5 bonnes-pratiques

4,566 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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>

×