HTML5 - Sémantique, structure et nouveaux éléments
•Télécharger en tant que KEY, PDF•
18 j'aime•7,991 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (20)
Similaire à HTML5 - Sémantique, structure et nouveaux éléments
Similaire à HTML5 - Sémantique, structure et nouveaux éléments (20)
HTML5 - Sémantique, structure et nouveaux éléments
- 1. HTML5 Logo by W3C Sémantique, structure et nouveaux éléments 16 mars 2011 - Rémy Savard
- 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 au développement d’HTML5
- 8. 2006 •W3C s'intéresse au développement d’HTML5 2007 •W3C + WHATWG = HTML5 •2 groupes, 2 spécifications
- 9. 2006 •W3C s'intéresse au dé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 au dé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, plusieurs utilisations HTML5 Logo by W3C
- 12. Aujourd’hui Un mot, plusieurs utilisations 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, plusieurs utilisations 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 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
- 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 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. caniuse.com
- 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 •Nouveau modèle de contenu et outline •Nouvelles fonctionnalités de formulaires •Accessibilité grâce au ARIA Landmark Roles
- 19. Quoi ? •Éléments HTML5 •Nouveau modè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
- 21. DOCTYPE doctypes •Pour les validateurs •Mode de rendu (navigateurs) •Navigateurs supportent des fonctionnalités, pas des version de languages
- 22. DOCTYPE doctypes •Pour les validateurs •Mode de 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. <!DOCTYPE HTML>
- 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 script sur 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 de texte marqué pour référence, en raison de sa pertinence dans un autre contexte •Passage de texte pour une recherche
- 36. time (nouveau) •Temps sur un horloge de 24 heures •Date précise •Fuseau horaire et décalage optionnel
- 37. time (nouveau) •Temps sur un horloge de 24 heures •Date précise •Fuseau horaire et décalage optionnel
- 38. time (nouveau) •Temps sur un horloge de 24 heures •Date précise •Fuseau horaire et décalage optionnel
- 39. time (nouveau) •Temps sur un horloge de 24 heures •Date précise •Fuseau horaire et décalage optionnel
- 40. É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
- 41. É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
- 42. É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
- 43. “In December 2005 we 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, ce fut pratique. La plupart des noms de class les plus populaires sont maintenant des éléments HTML5
- 46. 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
- 47. 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
- 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’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.
- 51. 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.
- 52. aside (nouveau) •Contenu qui est connexe au contenu l’entourant mais pas essentielle à la compréhension de ce dernier •Citations, publicités, etc.
- 53. nav (nouveau) •Section principal contenant 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 “Each element 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 saut de ligne en CSS
- 66. Stratégie •Forcer un saut de ligne en CSS •Créer chaque élément en JavaScript
- 67. Stratégie •Forcer un saut de ligne en CSS •Créer chaque élément en JavaScript
- 68. Stratégie •Forcer un saut de ligne en CSS •Créer chaque élément en JavaScript
- 69. Outils •html5shiv •HTML 5 innerShiv •HTML5 outliner (h5o) •HTML 5 Outliner •The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks
- 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 du document = Focus une fois à un champ •input, textarea, select
- 73. Required •Attribut booléen •Prévient la soumission du formulaire si les champs requis non pas été complétés
- 74. Auto-complete •Empêche les navigateurs de se souvenirs des informations entrés dans un formulaire/champ
- 75. list et datalist •Croiser input et select •Liste de choix pour input •Choisir dans la liste ou entrer un choix
- 76. Search (type d’input) •Réagit comme un type text •Coins ronds, X pour effacer la saisie, bouton Search etc.
- 77. E-mail (type d’input) •Safari Mobile offre un clavier différent (@)
- 78. URL (type d’input) •Safari Mobile offre un clavier différent (.com)
- 79. Tel (type d’input) •Safari Mobile offre un clavier numérique
- 80. Range (type d’input) •Slider natif •Valeur par défaut: 0 à 100 •min, max et step
- 81. Number (type d’input) •Spinner natif •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 couleur natif •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
- 91. •Modernizr 2 beta preview
- 92. •Modernizr 2 beta preview
- 93. •Chargement conditionnel de polyfills
- 94. •Chargement conditionnel de polyfills
- 95. •Chargement conditionnel de polyfills
- 96. •Chargement conditionnel de polyfills •Regressive Enhancement with Modernizr and Yepnope •Progressively Enhancing HTML5 Forms
- 98. Outils •Modernizr •Modernizr 2 beta •yepnope.js •Web Forms 2 •jQuery UI •Formalize •The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks •head.js
- 99. ARIA ET LANDMARK ROLES •Accessible Rich Internet Applications Suite •Accessibilité pour les technologies d’assistances •Ajax, enrichissement sémantique, etc.
- 100. Landmark Roles •Identifier des sections communes afin de les parcourir à l’aide de technologies d’assistance •Simple et efficace
- 101. Banner •L’entête du document •Une fois par document
- 102. Banner •L’entête du document •Une fois 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 à propos du document •Pied de page du document •Une fois par document
- 104. Contentinfo •Information à propos du 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ément nav •Navigation principal du document
- 106. Navigation •Similaire à l’élément nav •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 •Ancre CSS (≠IE6) Outils •accessifyhtml5.js
- 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 by W3C @REMYSAVARD HTTP://SLIDESHARE.NET/RSAVARD/HTML5-SMANTIQUE-STRUCTURE-ET-NOUVEAUX-LMENTS
Notes de l'éditeur
- \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