Télécharger en tant que KEY, PPTX
![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 are
currently working together on the development of HTML5.”
Wikipedia - http://en.wikipedia.org/wiki/HTML5](https://image.slidesharecdn.com/html5-110225101153-phpapp02/75/HTML5-Semantique-structure-et-nouveaux-elements-14-2048.jpg)
![section (nouveau)
•Contenu avec un même thème
•Chapitres, Sections d’un document, etc.
“The section element represents a generic section [...]. A
section, 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](https://image.slidesharecdn.com/html5-110225101153-phpapp02/75/HTML5-Semantique-structure-et-nouveaux-elements-46-2048.jpg)
![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 composition
in a document, page, application, or site and that is, in
principle, independently distributable or reusable [..]”
The WHATWG HTML specifications - http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-
element](https://image.slidesharecdn.com/html5-110225101153-phpapp02/75/HTML5-Semantique-structure-et-nouveaux-elements-47-2048.jpg)
Téléchargé parRémy Savard
HTML5 - Sémantique, structure et nouveaux éléments
Le document présente un historique et une analyse des évolutions d'HTML5, son développement par le W3C et le WHATWG, et sa contribution à la sémantique et à l'accessibilité des contenus web. Il aborde les nouveaux éléments, les fonctionnalités de formulaires, et les stratégies de prise en charge par les navigateurs, ainsi que les rôles ARIA pour améliorer l'accessibilité. Les sections discutent des nouveautés techniques, des éléments obsolètes, et de l'importance de la structure sémantique pour un développement web moderne.
Contenu connexe
![Taller De..[1]](https://cdn.slidesharecdn.com/ss_thumbnails/tallerde-1-100101230214-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 - Sémantique, structure et nouveaux éléments
- 1. HTML5 Logo byW3C Sémantique, structure et nouveaux éléments 16 mars 2011 - Rémy Savard
- 3.
- 4.
- 5. UN PEU D’HISTOIRE 1990à 2004 •Création du HTML par le W3C •Standards Web pour XHTML et HTML
- 6. UN PEU D’HISTOIRE 1990à 2004 •Création du HTML par le W3C •Standards Web pour XHTML et HTML 2004 •W3C travail sur XHTML 2.0, pas sur HTML (2000) •Création du WHATWG
- 7. 2006 •W3C s'intéresse audéveloppement d’HTML5
- 8. 2006 •W3C s'intéresse audéveloppement d’HTML5 2007 •W3C + WHATWG = HTML5 •2 groupes, 2 spécifications
- 9. 2006 •W3C s'intéresse audéveloppement d’HTML5 2007 •W3C + WHATWG = HTML5 •2 groupes, 2 spécifications 2008 •Working Draft publique de la spécification d’HTML5
- 10. 2006 •W3C s'intéresse audéveloppement d’HTML5 2007 •W3C + WHATWG = HTML5 •2 groupes, 2 spécifications 2008 •Working Draft publique de la spécification d’HTML5 2009 •W3C abandonne XHTML 2.0
- 11. Aujourd’hui Un mot, plusieursutilisations HTML5 Logo by W3C
- 12. Aujourd’hui Un mot, plusieursutilisations HTML5 •Buzzword •Logo du W3C •Technologies de développement Web modernes •Incluant CSS3 et les Microformats “This logo represents HTML5, the cornerstone for modern Web applications.” W3C - http://www.w3.org/html/logo/faq.html#logo-represent HTML5 Logo by W3C
- 13. Aujourd’hui Un mot, plusieursutilisations HTML5 •Buzzword •Logo du W3C •Technologies de développement Web modernes •Incluant CSS3 et les Microformats “This logo represents HTML5, the cornerstone for modern Web applications.” W3C - http://www.w3.org/html/logo/faq.html#logo-represent HTML5 Logo by W3C
- 14. HTML5 •Hypertext Markup Languageversion 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 are currently working together on the development of HTML5.” Wikipedia - http://en.wikipedia.org/wiki/HTML5
- 15. Demain •HTML5 = endéveloppement •Last Call pour Mai 2011 •Candidate recommandation pour 2012 •W3C recommandation pour 2014 •Attendre = NON “Different parts of the specification are at different maturity levels. Some sections are already relatively stable and there are implementations that are already quite close to completion, and those features can be used today.” The WHATWG Wiki, FAQ - http://wiki.whatwg.org/wiki/FAQ
- 16.
- 17. SÉMANTIQUE, STRUCTURE ET NOUVEAUX ÉLÉMENTS Pourquoi ? •Contenu accessible et utilisable •Diminuer le recours au id et class •Balisage de documents Web structuré et sémantique
- 18. Quoi ? •Éléments HTML5 •Nouveaumodèle de contenu et outline •Nouvelles fonctionnalités de formulaires •Accessibilité grâce au ARIA Landmark Roles
- 19. Quoi ? •Éléments HTML5 •Nouveaumodèle de contenu et outline •Nouvelles fonctionnalités de formulaires •Accessibilité grâce au ARIA Landmark Roles Comment ? •Définitions, exemples, code, etc. •Support des navigateurs, stratégie et outils
- 20.
- 21. DOCTYPE doctypes •Pour les validateurs •Modede rendu (navigateurs) •Navigateurs supportent des fonctionnalités, pas des version de languages
- 22. DOCTYPE doctypes •Pour les validateurs •Modede rendu (navigateurs) •Navigateurs supportent des fonctionnalités, pas des version de languages doctype HTML5 •Rétro-compatible (Maj/min, fermerture />, etc.) •N’utilise plus le concept de version •Utiliser et valider les nouveaux éléments
- 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.
- 25. L’ÉLÉMENT ROOT •Attribut xmlns= namespace XHTML •Attributs lang et xml:lang redondants
- 26. L’ÉLÉMENT ROOT •Attribut xmlns= namespace XHTML •Attributs lang et xml:lang redondants
- 27. L’ÉLÉMENT HEAD •Un scriptsur le Web, c’est un JavaScript!
- 28. ÉLÉMENTS SÉMANTIQUES TEXT-LEVEL(INLINE) Éléments obsolètes •frame, frameset, noframes, acronym, font, big, center, strike •Obsolètes ≠ déprécié
- 29. small (mis àjour) •≠ présentation •« Ceci est une mise en garde. » •Jargon juridique, termes et conditions, attribution, restrictions légales, droits d'auteur, etc.
- 30. small (mis àjour) •≠ présentation •« Ceci est une mise en garde. » •Jargon juridique, termes et conditions, attribution, restrictions légales, droits d'auteur, 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
- 31. small (mis àjour) •≠ présentation •« Ceci est une mise en garde. » •Jargon juridique, termes et conditions, attribution, restrictions légales, droits d'auteur, 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 i (mis à jour) •≠ italique •Avec une voix ou un humeur différente
- 32. a (mis àjour) •Le plus important du HTML •Avertissement: on ne peut pas enrober un a dans un a Avant
- 33. a (mis àjour) •Le plus important du HTML •Avertissement: on ne peut pas enrober un a dans un a Avant HTML5
- 34. a (mis àjour) •Le plus important du HTML •Avertissement: on ne peut pas enrober un a dans un a Avant HTML5
- 35. mark (nouveau) •Passage detexte marqué pour référence, en raison de sa pertinence dans un autre contexte •Passage de texte pour une recherche
- 36. time (nouveau) •Temps surun horloge de 24 heures •Date précise •Fuseau horaire et décalage optionnel
- 37. time (nouveau) •Temps surun horloge de 24 heures •Date précise •Fuseau horaire et décalage optionnel
- 38. time (nouveau) •Temps surun horloge de 24 heures •Date précise •Fuseau horaire et décalage optionnel
- 39. time (nouveau) •Temps surun horloge de 24 heures •Date précise •Fuseau horaire et décalage optionnel
- 40. ÉLÉMENTS DE STRUCTURE •Structureet sémantique •Remplacement de certains div •Génération d’une table des matières automatique •Navigation pour les technologies d’assistance
- 41. ÉLÉMENTS DE STRUCTURE •Structureet sémantique •Remplacement de certains div •Génération d’une table des matières automatique •Navigation pour les technologies d’assistance
- 42. ÉLÉMENTS DE STRUCTURE •Structureet sémantique •Remplacement de certains div •Génération d’une table des matières automatique •Navigation pour les technologies d’assistance
- 43. “In December 2005we did an analysis of a sample of slightly over a billion documents, extracting information about popular class names, elements, attributes, and related metadata. The results we found are available below. We hope this is of use!” Google, Inc. - http://code.google.com/webstats/2005-12/classes.html
- 45. Oui Google, cefut pratique. La plupart des noms de class les plus populaires sont maintenant des éléments HTML5
- 46. section (nouveau) •Contenu avecun même thème •Chapitres, Sections d’un document, etc. “The section element represents a generic section [...]. A section, 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
- 47. article (nouveau) •Regroupement decontenu spécifique •Contenu réutilisable, indépendant •Article de journal, billet de blogue, widget, etc. “The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable [..]” The WHATWG HTML specifications - http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article- element
- 48. 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
- 49. header (nouveau) •Groupe d’aidesd’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.
- 51. footer (nouveau) •Pied depage 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.
- 52. aside (nouveau) •Contenu quiest connexe au contenu l’entourant mais pas essentielle à la compréhension de ce dernier •Citations, publicités, etc.
- 53. nav (nouveau) •Section principalcontenant des liens de navigation •Fat footer ≠ nav •Accessibilité, lecteurs d’écrans ++
- 54. address (mis àjour) •Mis à jour pour article •Information de contact (article ou document) •≠ Adresse physique •Nom, éditeur, adresse physique, etc.
- 55. GROUPING ELEMENTS figure &figcaption •Associer un sous-titre à un ou plusieurs éléments •Images, graphiques, diagrammes, exemple de code, etc.
- 56. canvas, svg, progress,meter, audio, details, sumary, datalist, menu, command, video, etc.
- 57. MODÈLES DE CONTENU “Eachelement defined in this specification has a content model: a description of the element's expected contents. An HTML element must have contents that match the requirements described in the element's content model.” The WHATWG HTML specifications - http://www.whatwg.org/specs/web-apps/current-work/multipage/content-models.html#content- models
- 58. Sectioning content •article, aside,nav et section •Définit la porté des footers et des titres (h1-h6, hgroup) •Son propre outline
- 59. Sectioning content •article, aside,nav et section •Définit la porté des footers et des titres (h1-h6, hgroup) •Son propre outline Sectioning roots •blockquote, body, details, fieldset, figure, td •Invisible pour le outline des éléments parents •Son propre outline
- 60. Sectioning content •article, aside,nav et section •Définit la porté des footers et des titres (h1-h6, hgroup) •Son propre outline Sectioning roots •blockquote, body, details, fieldset, figure, td •Invisible pour le outline des éléments parents •Son propre outline Heading content •h1-h6 et hgroup •Titres d’une section ou document •Créé un outline en utilisant h1-h6
- 61. OUTLINE Sections Implicites 1.A + B 1. C + D 2. E + F
- 62. Sections explicites 1.A 1. B 1. C 2. D
- 63. SUPPORT DES NAVIGATEURS, STRATÉGIE ET OUTILS Support des navigateurs •La plupart des navigateurs supportent déjà les nouveaux éléments de structure •Rendu par défaut: text-level (inline)
- 64. SUPPORT DES NAVIGATEURS, STRATÉGIE ET OUTILS Support 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
- 65. Stratégie •Forcer un sautde ligne en CSS
- 66. Stratégie •Forcer un sautde ligne en CSS •Créer chaque élément en JavaScript
- 67. Stratégie •Forcer un sautde ligne en CSS •Créer chaque élément en JavaScript
- 68. Stratégie •Forcer un sautde ligne en CSS •Créer chaque élément en JavaScript
- 69. Outils •html5shiv •HTML 5 innerShiv •HTML5outliner (h5o) •HTML 5 Outliner •The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks
- 70.
- 71. Placeholder •Aucune valeur =Texte placeholder •Focus sur le champ ≠ Texte placeholder •Quitter le champ et aucune valeur = Texte placeholder
- 72. Autofocus •Attribut booléen •Chargement dudocument = Focus une fois à un champ •input, textarea, select
- 73. Required •Attribut booléen •Prévient lasoumission du formulaire si les champs requis non pas été complétés
- 74. Auto-complete •Empêche les navigateursde se souvenirs des informations entrés dans un formulaire/champ
- 75. list et datalist •Croiserinput et select •Liste de choix pour input •Choisir dans la liste ou entrer un choix
- 76. Search (type d’input) •Réagitcomme un type text •Coins ronds, X pour effacer la saisie, bouton Search etc.
- 77. E-mail (type d’input) •SafariMobile offre un clavier différent (@)
- 78. URL (type d’input) •SafariMobile offre un clavier différent (.com)
- 79. Tel (type d’input) •SafariMobile offre un clavier numérique
- 80. Range (type d’input) •Slidernatif •Valeur par défaut: 0 à 100 •min, max et step
- 81. Number (type d’input) •Spinnernatif •Entrer une valeur ou d’utiliser les contrôles •Valeur numérique seulement •min, max et step
- 82. Date (type d’input) •Année,mois et jour •2009-11-19 Datetime (type d’input) •Année, mois, jour, heures, minutes, secondes et fuseau horaire •2009-11-19T7:35:00-05 Datetime-local (type d’input) •Année, mois, jour, heures, minutes et secondes •2009-11-19T7:35:00
- 83. Time (type d’input) •Heures,minutes et secondes •7:15:00 Month (type d’input) •Année et mois •2009-11 Week (type d’input) •Année et semaine •2009-47
- 85. Color •Sélecteur de couleurnatif •Hexadécimal - 6 chiffres de #00000 à #ffffff
- 86. STRATÉGIE, OUTILS ET SUPPORT DES NAVIGATEURS Support des navigateurs •Très variable •Opera is the king for now •http://quirksmode.org/html5/inputs.html •http://www.miketaylr.com/code/input-type-attr.html
- 87.
- 88.
- 89.
- 90.
- 91. •Modernizr 2 betapreview
- 92. •Modernizr 2 betapreview
- 93. •Chargement conditionnel depolyfills
- 94. •Chargement conditionnel depolyfills
- 95. •Chargement conditionnel depolyfills
- 96. •Chargement conditionnel depolyfills •Regressive Enhancement with Modernizr and Yepnope •Progressively Enhancing HTML5 Forms
- 97.
- 98. Outils •Modernizr •Modernizr 2 beta •yepnope.js •WebForms 2 •jQuery UI •Formalize •The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks •head.js
- 99. ARIA ET LANDMARKROLES •Accessible Rich Internet Applications Suite •Accessibilité pour les technologies d’assistances •Ajax, enrichissement sémantique, etc.
- 100. Landmark Roles •Identifier dessections communes afin de les parcourir à l’aide de technologies d’assistance •Simple et efficace
- 101. Banner •L’entête du document •Unefois par document
- 102. Banner •L’entête du document •Unefois par document Complementary •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
- 103. Contentinfo •Information à proposdu document •Pied de page du document •Une fois par document
- 104. Contentinfo •Information à proposdu document •Pied de page du document •Une fois par document Main •Représente le contenu principal du document •Offre une alternative aux “skip to main content” pour les technologies d’assistance •Une fois par document
- 105. Navigation •Similaire à l’élémentnav •Navigation principal du document
- 106. Navigation •Similaire à l’élémentnav •Navigation principal du document Search • Interface de recherche complète • Libellés, boutons, champs, etc.
- 107. STRATÉGIE, OUTILS ET SUPPORT DES NAVIGATEURS Support des navigateurs •Jaws, NVDA et Voiceover “JAWS announces the type and text of ARIA landmarks, and provides navigation to the next and previous landmark on the page using theSEMICOLON and SHIFT+SEMICOLON quick navigation keys. In addition, pressing INSERT+CONTROL +SEMICOLON should bring up a list of landmarks.” The Paciello Group Blog - http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/
- 108. Stratégie •HTML5 VS ARIA •AncreCSS (≠IE6) Outils •accessifyhtml5.js
- 109.
- 110. CONCLUSION Commencez maintenant! •developers.whatwg.org •html5boilerplate.com •initializr.com •<html>5doctor •Dive into HTML5
- 111. READ/FOLLOW/PRAY JEREMY KEITH MARK PILGRIM BRUCE LAWSON REMY SHARP ANDY CLARKE PAUL IRISH TANTEK CELIK ERIC MEYER JEFFREY ZELDMAN
- 112. HTML5 Logo byW3C @REMYSAVARD HTTP://SLIDESHARE.NET/RSAVARD/HTML5-SMANTIQUE-STRUCTURE-ET-NOUVEAUX-LMENTS
Notes de l'éditeur
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n
- #72 \n
- #73 \n
- #74 \n
- #75 \n
- #76 \n
- #77 \n
- #78 \n
- #79 \n
- #80 \n
- #81 \n
- #82 \n
- #83 \n
- #84 \n
- #85 \n
- #86 \n