HTML5 - Sémantique, structure et nouveaux éléments

12,365 views
12,261 views

Published on

Utiliser la prochaine révision majeure d’HTML afin d’améliorer le balisage de vos documents Web. HTML5 arrive avec tout un arsenal de nouvelles fonctionnalités et plusieurs d’entre elles peuvent être utilisées dès maintenant. Syntaxe, nouveaux éléments sémantiques, formualires enrichis et accessibilité seront quelques uns des sujets détaillés.

Published in: Technology
6 Comments
17 Likes
Statistics
Notes
No Downloads
Views
Total views
12,365
On SlideShare
0
From Embeds
0
Number of Embeds
1,416
Actions
Shares
0
Downloads
445
Comments
6
Likes
17
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML5 - Sémantique, structure et nouveaux éléments

    1. 1. HTML5 Logo by W3CSémantique, structure et nouveaux éléments 25 février 2011 - Rémy Savard
    2. 2. “ L.Beckers request: We have to contribute to all the changes that are going on in the Web industry. Do not sit back! #waq” -Anne-Marie Gauthier
    3. 3. http://www.flickr.com/photos/willpate/111479065/
    4. 4. UN PEU D’HISTOIRE
    5. 5. UN PEU D’HISTOIRE1990 à 2004•Création du HTML par le W3C•Standards Web pour XHTML et HTML
    6. 6. UN PEU D’HISTOIRE1990 à 2004•Création du HTML par le W3C•Standards Web pour XHTML et HTML2004•W3C travail sur XHTML 2.0, pas sur HTML (2000)•Création du WHATWG
    7. 7. 2006•W3C sintéresse au développement d’HTML5
    8. 8. 2006•W3C sintéresse au développement d’HTML52007•W3C + WHATWG = HTML5•2 groupes, 2 spécifications
    9. 9. 2006•W3C sintéresse au développement d’HTML52007•W3C + WHATWG = HTML5•2 groupes, 2 spécifications2008•Working Draft publique de la spécification d’HTML5
    10. 10. 2006•W3C sintéresse au développement d’HTML52007•W3C + WHATWG = HTML5•2 groupes, 2 spécifications2008•Working Draft publique de la spécification d’HTML52009•W3C abandonne XHTML 2.0
    11. 11. Aujourd’huiUn mot, plusieurs utilisationsHTML5 Logo by W3C
    12. 12. Aujourd’huiUn mot, plusieurs utilisationsHTML5•Buzzword•Logo du W3C•Technologies de développement Web modernes•Incluant CSS3 et les Microformats“This logo represents HTML5, the cornerstone for modernWeb applications.”W3C - http://www.w3.org/html/logo/faq.html#logo-representHTML5 Logo by W3C
    13. 13. Aujourd’huiUn mot, plusieurs utilisationsHTML5•Buzzword•Logo du W3C•Technologies de développement Web modernes•Incluant CSS3 et les Microformats“This logo represents HTML5, the cornerstone for modernWeb applications.”W3C - http://www.w3.org/html/logo/faq.html#logo-representHTML5 Logo by W3C
    14. 14. HTML5•Hypertext Markup Language version 5•W3C + WHATWG•Éditeur: Ian Hickson (Google Inc.)•Nouveaux APIs, nouveaux éléments, comportements des navigateurs en cas d’erreurs de syntaxe, etc.“HTML5 is the next major revision of the HTML standard,currently under development. [...] W3C and WHATWG arecurrently working together on the development of HTML5.”Wikipedia - http://en.wikipedia.org/wiki/HTML5
    15. 15. Demain•HTML5 = en développement•Last Call pour Mai 2011•Candidate recommandation pour 2012•W3C recommandation pour 2014•Attendre = NON“Different parts of the specification are at different maturitylevels. Some sections are already relatively stable and thereare implementations that are already quite close tocompletion, and those features can be used today.”The WHATWG Wiki, FAQ - http://wiki.whatwg.org/wiki/FAQ
    16. 16. caniuse.com
    17. 17. SÉMANTIQUE, STRUCTURE ET NOUVEAUX ÉLÉMENTSPourquoi ?•Contenu accessible et utilisable•Diminuer le recours au id et class•Balisage de documents Web structuré et sémantique
    18. 18. Quoi ?•Éléments HTML5•Nouveau modèle de contenu et outline•Nouvelles fonctionnalités de formulaires•Accessibilité grâce au ARIA Landmark Roles
    19. 19. Quoi ?•Éléments HTML5•Nouveau modèle de contenu et outline•Nouvelles fonctionnalités de formulaires•Accessibilité grâce au ARIA Landmark RolesComment ?•Définitions, exemples, code, etc.•Support des navigateurs, stratégie et outils
    20. 20. http://joshduck.com/periodic-table.html
    21. 21. DOCTYPEdoctypes•Pour les validateurs•Mode de rendu (navigateurs)•Navigateurs supportent des fonctionnalités, pas des version de languages
    22. 22. DOCTYPEdoctypes•Pour les validateurs•Mode de rendu (navigateurs)•Navigateurs supportent des fonctionnalités, pas des version de languagesdoctype HTML5•Rétro-compatible (Maj/min, fermerture />, etc.)•N’utilise plus le concept de version•Utiliser et valider les nouveaux éléments
    23. 23. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    24. 24. <!DOCTYPE HTML>
    25. 25. L’ÉLÉMENT ROOT•Attribut xmlns = namespace XHTML•Attributs lang et xml:lang redondants
    26. 26. L’ÉLÉMENT HEAD•Un script sur le Web, c’est un JavaScript!
    27. 27. ÉLÉMENTS SÉMANTIQUES TEXT-LEVEL(INLINE)Éléments obsolètes•frame, frameset, noframes, acronym, font, big, center, strike•Obsolètes ≠ déprécié
    28. 28. small (mis à jour)•≠ présentation•« Ceci est une mise en garde. »•Jargon juridique, termes et conditions, attribution, restrictions légales, droits dauteur, etc.
    29. 29. small (mis à jour)•≠ présentation•« Ceci est une mise en garde. »•Jargon juridique, termes et conditions, attribution, restrictions légales, droits dauteur, etc.b (mis à jour)•Texte stylisé différemment de l’écrit régulier sans transmettre d’importance additionnel•Nom de produit dans une critique/revue
    30. 30. small (mis à jour)•≠ présentation•« Ceci est une mise en garde. »•Jargon juridique, termes et conditions, attribution, restrictions légales, droits dauteur, etc.b (mis à jour)•Texte stylisé différemment de l’écrit régulier sans transmettre d’importance additionnel•Nom de produit dans une critique/revuei (mis à jour)•≠ italique•Avec une voix ou un humeur différente
    31. 31. a (mis à jour)•Le plus important du HTML•Avertissement: on ne peut pas enrober un a dans un a Avant HTML5
    32. 32. mark (nouveau)•Passage de texte marqué pour référence, en raison de sa pertinence dans un autre contexte•Passage de texte pour une recherche
    33. 33. time (nouveau)•Temps sur un horloge de 24 heures•Date précise•Fuseau horaire et décalage optionnel
    34. 34. time (nouveau)•Temps sur un horloge de 24 heures•Date précise•Fuseau horaire et décalage optionnel
    35. 35. time (nouveau)•Temps sur un horloge de 24 heures•Date précise•Fuseau horaire et décalage optionnel
    36. 36. time (nouveau)•Temps sur un horloge de 24 heures•Date précise•Fuseau horaire et décalage optionnel
    37. 37. ÉLÉMENTS DE STRUCTURE•Structure et sémantique•Remplacement de certains div•Génération d’une table des matières automatique•Navigation pour les technologies d’assistance
    38. 38. ÉLÉMENTS DE STRUCTURE•Structure et sémantique•Remplacement de certains div•Génération d’une table des matières automatique•Navigation pour les technologies d’assistance
    39. 39. ÉLÉMENTS DE STRUCTURE•Structure et sémantique•Remplacement de certains div•Génération d’une table des matières automatique•Navigation pour les technologies d’assistance
    40. 40. “In December 2005 we did an analysis of a sample ofslightly over a billion documents, extracting information aboutpopular class names, elements, attributes, and relatedmetadata. The results we found are available below. We hopethis is of use!”Google, Inc. - http://code.google.com/webstats/2005-12/classes.html
    41. 41. Oui Google, ce fut pratique. La plupart des noms de class les plus populaires sont maintenant des éléments HTML5
    42. 42. section (nouveau)•Contenu avec un même thème•Chapitres, Sections d’un document, etc.“The section element represents a generic section [...]. Asection, in this context, is a thematic grouping of content,typically with a heading.”The WHATWG HTML specifications - http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element
    43. 43. article (nouveau)•Regroupement de contenu spécifique•Contenu réutilisable, indépendant•Article de journal, billet de blogue, widget, etc.“The article element represents a self-contained compositionin a document, page, application, or site and that is, inprinciple, independently distributable or reusable [..]”The WHATWG HTML specifications - http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element
    44. 44. hgroup (nouveau)•Grouper des éléments h1-h6•Permet de prendre seulement le premier titre (h1-h6) en compte dans le document outline•Sous-titres, titres alternatifs ou slogans
    45. 45. header (nouveau)•Groupe d’aides d’introduction ou de navigation•Normalement h1-h6 ou hgroup•Position code/visuel sans importance•Table des matière d’une section, un formulaire de recherche, des logos pertinents, etc.
    46. 46. footer (nouveau)•Pied de page pour l’élément parent de sectioning content (article, aside, nav, section) ou de sectioning root (blockquote, body, details, filedset, figure, td)•Information à propos de la section•Position code/visuel sans importance•Liens à des documents similaires, droits d’auteur, etc.
    47. 47. aside (nouveau)•Contenu qui est connexe au contenu l’entourant mais pas essentielle à la compréhension de ce dernier•Citations, publicités, etc.
    48. 48. aside (nouveau)•Contenu qui est connexe au contenu l’entourant mais pas essentielle à la compréhension de ce dernier•Citations, publicités, etc.
    49. 49. nav (nouveau)•Section principal contenant des liens de navigation•Fat footer ≠ nav•Accessibilité, lecteurs d’écrans ++
    50. 50. nav (nouveau)•Section principal contenant des liens de navigation•Fat footer ≠ nav•Accessibilité, lecteurs d’écrans ++
    51. 51. address (mis à jour)•Mis à jour pour article•Information de contact (article ou document)•≠ Adresse physique•Nom, éditeur, adresse physique, etc.
    52. 52. address (mis à jour)•Mis à jour pour article•Information de contact (article ou document)•≠ Adresse physique•Nom, éditeur, adresse physique, etc.
    53. 53. GROUPING ELEMENTSfigure & figcaption•Associer un sous-titre à un ou plusieurs éléments•Images, graphiques, diagrammes, exemple de code, etc.
    54. 54. GROUPING ELEMENTSfigure & figcaption•Associer un sous-titre à un ou plusieurs éléments•Images, graphiques, diagrammes, exemple de code, etc.
    55. 55. canvas, progress, meter, audio, details, sumary, datalist, menu, command, video, etc.
    56. 56. MODÈLES DE CONTENU“Each element defined in this specification has a contentmodel: a description of the elements expected contents. AnHTML element must have contents that match therequirements described in the elements content model.”The WHATWG HTML specifications - http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#content-models
    57. 57. Sectioning content•article, aside, nav et section•Définit la porté des footers et des titres (h1-h6, hgroup)•Son propre outline
    58. 58. Sectioning content•article, aside, nav et section•Définit la porté des footers et des titres (h1-h6, hgroup)•Son propre outlineSectioning roots•blockquote, body, details, fieldset, figure, td•Invisible pour le outline des éléments parents•Son propre outline
    59. 59. Sectioning content•article, aside, nav et section•Définit la porté des footers et des titres (h1-h6, hgroup)•Son propre outlineSectioning roots•blockquote, body, details, fieldset, figure, td•Invisible pour le outline des éléments parents•Son propre outlineHeading content•h1-h6 et hgroup•Titres d’une section ou document•Créé un outline en utilisant h1-h6
    60. 60. OUTLINESections Implicites 1. A + B 1. C + D 2. E + F
    61. 61. Sections explicites 1. A 1. B 1. C 2. D
    62. 62. SUPPORT DES NAVIGATEURS, STRATÉGIE ET OUTILSSupport des navigateurs•La plupart des navigateurs supportent déjà les nouveaux éléments de structure•Rendu par défaut: text-level (inline)
    63. 63. SUPPORT DES NAVIGATEURS, STRATÉGIE ET OUTILSSupport des navigateurs•La plupart des navigateurs supportent déjà les nouveaux éléments de structure•Rendu par défaut: text-level (inline)•≠ IE 6, 7 et 8
    64. 64. Stratégie•Forcer un saut de ligne en CSS
    65. 65. Stratégie•Forcer un saut de ligne en CSS•Créer chaque élément en JavaScript
    66. 66. Stratégie•Forcer un saut de ligne en CSS•Créer chaque élément en JavaScript
    67. 67. Stratégie•Forcer un saut de ligne en CSS•Créer chaque élément en JavaScript
    68. 68. Outils•http://html5shiv.googlecode.com/svn/trunk/html5.js•Extension Google Chrome•http://gsnedders.html5.org/outliner/
    69. 69. FORMULAIREShttp://nettuts.s3.amazonaws.com/881_html5Forms/demo/demo.html
    70. 70. Placeholder•Aucune valeur = Texte placeholder•Focus sur le champ ≠ Texte placeholder•Quitter le champ et aucune valeur = Texte placeholder
    71. 71. Autofocus•Attribut booléen•Chargement du document = Focus une fois à un champ•input, textarea, select
    72. 72. Required•Attribut booléen•Prévient la soumission du formulaire si les champs requis non pas été complétés
    73. 73. Auto-complete•Empêche les navigateurs de se souvenirs des informations entrés dans un formulaire/champ
    74. 74. list et datalist•Croiser input et select•Liste de choix pour input•Choisir dans la liste ou entrer un choix
    75. 75. Search (type d’input)•Réagit comme un type text•Coins ronds, X pour effacer la saisie, bouton Search etc.
    76. 76. E-mail (type d’input)•Safari Mobile offre un clavier différent (@)
    77. 77. URL (type d’input)•Safari Mobile offre un clavier différent (.com)
    78. 78. Telephone (type d’input)•Safari Mobile offre un clavier numérique
    79. 79. Range (type d’input)•Slider natif•Valeur par défaut: 0 à 100•min, max et step
    80. 80. Number (type d’input)•Spinner natif•Entrer une valeur ou d’utiliser les contrôles•Valeur numérique seulement•min, max et step
    81. 81. Date (type d’input)•Année, mois et jour•2009-11-19Datetime (type d’input)•Année, mois, jour, heures, minutes, secondes et fuseau horaire•2009-11-19T7:35:00-05Datetime-local (type d’input)•Année, mois, jour, heures, minutes et secondes•2009-11-19T7:35:00
    82. 82. Time (type d’input)•Heures, minutes et secondes•7:15:00Month (type d’input)•Année et mois•2009-11Week (type d’input)•Année et semaine•2009-47
    83. 83. Color•Sélecteur de couleur natif•Hexadécimal - 6 chiffres de #00000 à #ffffff
    84. 84. STRATÉGIE, OUTILS ET SUPPORT DES NAVIGATEURSSupport des navigateurs•Très variable•Opera is the king
    85. 85. Stratégie•Détection de fonctionnalité avec Modernizr
    86. 86. •Ancre CSS (≠IE6)
    87. 87. Outils•Modernizr•head.js•http://code.google.com/p/webforms2/•http://jqueryui.com/•http://www.miketaylr.com/code/input-type-attr.html
    88. 88. ARIA ET LANDMARK ROLES•Accessible Rich Internet Applications Suite•Accessibilité pour les technologies d’assistances•Ajax, enrichissement sémantique, etc.
    89. 89. Landmark Roles•Identifier des sections communes afin de les parcourir à l’aide de technologies d’assistance•Simple et efficace
    90. 90. Banner•L’entête du document•Une fois par document
    91. 91. Banner•L’entête du document•Une fois par documentComplementary•Similaire à l’élément aside•Délimite du contenu qui est relié ou supporte d’autre contenu, malgré que ce dernier ne dois pas nécessairement le contenir ou le lié visuellement
    92. 92. Contentinfo•Information à propos du document•Pied de page du document•Une fois par document
    93. 93. Contentinfo•Information à propos du document•Pied de page du document•Une fois par documentMain•Représente le contenu principal du document•Offre une alternative aux “skip to main content” pour les technologies d’assistance•Une fois par document
    94. 94. Navigation•Similaire à l’élément nav•Navigation principal du document
    95. 95. Navigation•Similaire à l’élément nav•Navigation principal du documentSearch• Interface de recherche complète• Libellés, boutons, champs, etc.
    96. 96. STRATÉGIE, OUTILS ET SUPPORT DES NAVIGATEURSSupport des navigateurs•Jaws, NVDA et Voiceover
    97. 97. STRATÉGIE, OUTILS ET SUPPORT DES NAVIGATEURSSupport des navigateurs•Jaws, NVDA et VoiceoverStratégie•HTML5 VS ARIA•Ancre CSS (≠IE6)
    98. 98. STRATÉGIE, OUTILS ET SUPPORT DES NAVIGATEURSSupport des navigateurs•Jaws, NVDA et VoiceoverStratégie•HTML5 VS ARIA•Ancre CSS (≠IE6)Outils•accessifyhtml5.js
    99. 99. CONCLUSIONCommencez maintenant!
    100. 100. CONCLUSIONCommencez maintenant! •developers.whatwg.org •html5.validator.nu •html5boilerplate.com •initializr.com
    101. 101. READ/FOLLOW/PRAY JEREMY KEITH MARK PILGRIM BRUCE LAWSON REMY SHARP ANDY CLARKE PAUL IRISH TANTEK CELIK
    102. 102. HTML5 Logo by W3C@REMYSAVARD

    ×