HTML5 Logo by W3CSémantique, structure et nouveaux éléments           25 février 2011 - Rémy Savard
“ L.Beckers request: We have to contribute to all the changes that are going on in the Web industry. Do                 no...
http://www.flickr.com/photos/willpate/111479065/
UN PEU D’HISTOIRE
UN PEU D’HISTOIRE1990 à 2004•Création du HTML par le W3C•Standards Web pour XHTML et HTML
UN PEU D’HISTOIRE1990 à 2004•Création du HTML par le W3C•Standards Web pour XHTML et HTML2004•W3C travail sur XHTML 2.0, p...
2006•W3C sintéresse au développement d’HTML5
2006•W3C sintéresse au développement d’HTML52007•W3C + WHATWG = HTML5•2 groupes, 2 spécifications
2006•W3C sintéresse au développement d’HTML52007•W3C + WHATWG = HTML5•2 groupes, 2 spécifications2008•Working Draft publiqu...
2006•W3C sintéresse au développement d’HTML52007•W3C + WHATWG = HTML5•2 groupes, 2 spécifications2008•Working Draft publiqu...
Aujourd’huiUn mot, plusieurs utilisationsHTML5 Logo by W3C
Aujourd’huiUn mot, plusieurs utilisationsHTML5•Buzzword•Logo du W3C•Technologies de développement Web modernes•Incluant CS...
Aujourd’huiUn mot, plusieurs utilisationsHTML5•Buzzword•Logo du W3C•Technologies de développement Web modernes•Incluant CS...
HTML5•Hypertext Markup Language version 5•W3C + WHATWG•Éditeur: Ian Hickson (Google Inc.)•Nouveaux APIs, nouveaux éléments...
Demain•HTML5 = en développement•Last Call pour Mai 2011•Candidate recommandation pour 2012•W3C recommandation pour 2014•At...
caniuse.com
SÉMANTIQUE, STRUCTURE   ET NOUVEAUX ÉLÉMENTSPourquoi ?•Contenu accessible et utilisable•Diminuer le recours au id et class...
Quoi ?•Éléments HTML5•Nouveau modèle de contenu et outline•Nouvelles fonctionnalités de formulaires•Accessibilité grâce au...
Quoi ?•Éléments HTML5•Nouveau modèle de contenu et outline•Nouvelles fonctionnalités de formulaires•Accessibilité grâce au...
http://joshduck.com/periodic-table.html
DOCTYPEdoctypes•Pour les validateurs•Mode de rendu (navigateurs)•Navigateurs supportent des fonctionnalités, pas des versi...
DOCTYPEdoctypes•Pour les validateurs•Mode de rendu (navigateurs)•Navigateurs supportent des fonctionnalités, pas des versi...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"       "http://www.w3.org/TR/html4/strict.dtd">    <!DOCTYPE html PUBLIC ...
<!DOCTYPE HTML>
L’ÉLÉMENT ROOT•Attribut xmlns = namespace XHTML•Attributs lang et xml:lang redondants
L’ÉLÉMENT HEAD•Un script sur le Web, c’est un JavaScript!
ÉLÉMENTS SÉMANTIQUES       TEXT-LEVEL(INLINE)Éléments obsolètes•frame, frameset, noframes, acronym, font, big, center, str...
small (mis à jour)•≠ présentation•« Ceci est une mise en garde. »•Jargon juridique, termes et conditions, attribution, res...
small (mis à jour)•≠ présentation•« Ceci est une mise en garde. »•Jargon juridique, termes et conditions, attribution, res...
small (mis à jour)•≠ présentation•« Ceci est une mise en garde. »•Jargon juridique, termes et conditions, attribution, res...
a (mis à jour)•Le plus important du HTML•Avertissement: on ne peut pas enrober un a dans un a                       Avant ...
mark (nouveau)•Passage de texte marqué pour référence, en raison de sa pertinence dans un autre contexte•Passage de texte ...
time (nouveau)•Temps sur un horloge de 24 heures•Date précise•Fuseau horaire et décalage optionnel
time (nouveau)•Temps sur un horloge de 24 heures•Date précise•Fuseau horaire et décalage optionnel
time (nouveau)•Temps sur un horloge de 24 heures•Date précise•Fuseau horaire et décalage optionnel
time (nouveau)•Temps sur un horloge de 24 heures•Date précise•Fuseau horaire et décalage optionnel
ÉLÉMENTS DE STRUCTURE•Structure et sémantique•Remplacement de certains div•Génération d’une table des matières automatique...
ÉLÉMENTS DE STRUCTURE•Structure et sémantique•Remplacement de certains div•Génération d’une table des matières automatique...
ÉLÉMENTS DE STRUCTURE•Structure et sémantique•Remplacement de certains div•Génération d’une table des matières automatique...
“In December 2005 we did an analysis of a sample ofslightly over a billion documents, extracting information aboutpopular ...
Oui Google, ce fut pratique. La plupart des  noms de class les plus populaires sont    maintenant des éléments HTML5
section (nouveau)•Contenu avec un même thème•Chapitres, Sections d’un document, etc.“The section element represents a gene...
article (nouveau)•Regroupement de contenu spécifique•Contenu réutilisable, indépendant•Article de journal, billet de blogue...
hgroup (nouveau)•Grouper des éléments h1-h6•Permet de prendre seulement le premier titre (h1-h6) en compte dans le documen...
header (nouveau)•Groupe d’aides d’introduction ou de navigation•Normalement h1-h6 ou hgroup•Position code/visuel sans impo...
footer (nouveau)•Pied de page pour l’élément parent de sectioning content (article, aside, nav, section) ou de sectioning ...
aside (nouveau)•Contenu qui est connexe au contenu l’entourant mais pas essentielle à la compréhension de ce dernier•Citat...
aside (nouveau)•Contenu qui est connexe au contenu l’entourant mais pas essentielle à la compréhension de ce dernier•Citat...
nav (nouveau)•Section principal contenant des liens de navigation•Fat footer ≠ nav•Accessibilité, lecteurs d’écrans ++
nav (nouveau)•Section principal contenant des liens de navigation•Fat footer ≠ nav•Accessibilité, lecteurs d’écrans ++
address (mis à jour)•Mis à jour pour article•Information de contact (article ou document)•≠ Adresse physique•Nom, éditeur,...
address (mis à jour)•Mis à jour pour article•Information de contact (article ou document)•≠ Adresse physique•Nom, éditeur,...
GROUPING ELEMENTSfigure & figcaption•Associer un sous-titre à un ou plusieurs éléments•Images, graphiques, diagrammes, exemp...
GROUPING ELEMENTSfigure & figcaption•Associer un sous-titre à un ou plusieurs éléments•Images, graphiques, diagrammes, exemp...
canvas, progress, meter, audio, details,  sumary, datalist, menu, command,             video, etc.
MODÈLES DE CONTENU“Each element defined in this specification has a contentmodel: a description of the elements expected con...
Sectioning content•article, aside, nav et section•Définit la porté des footers et des titres (h1-h6, hgroup)•Son propre out...
Sectioning content•article, aside, nav et section•Définit la porté des footers et des titres (h1-h6, hgroup)•Son propre out...
Sectioning content•article, aside, nav et section•Définit la porté des footers et des titres (h1-h6, hgroup)•Son propre out...
OUTLINESections Implicites 1. A + B    1. C + D    2. E + F
Sections explicites 1. A    1. B       1. C    2. D
SUPPORT DES NAVIGATEURS,    STRATÉGIE ET OUTILSSupport des navigateurs•La plupart des navigateurs supportent déjà les nouv...
SUPPORT DES NAVIGATEURS,    STRATÉGIE ET OUTILSSupport des navigateurs•La plupart des navigateurs supportent déjà les nouv...
Stratégie•Forcer un saut de ligne en CSS
Stratégie•Forcer un saut de ligne en CSS•Créer chaque élément en JavaScript
Stratégie•Forcer un saut de ligne en CSS•Créer chaque élément en JavaScript
Stratégie•Forcer un saut de ligne en CSS•Créer chaque élément en JavaScript
Outils•http://html5shiv.googlecode.com/svn/trunk/html5.js•Extension Google Chrome•http://gsnedders.html5.org/outliner/
FORMULAIREShttp://nettuts.s3.amazonaws.com/881_html5Forms/demo/demo.html
Placeholder•Aucune valeur = Texte placeholder•Focus sur le champ ≠ Texte placeholder•Quitter le champ et aucune valeur = T...
Autofocus•Attribut booléen•Chargement du document = Focus une fois à un champ•input, textarea, select
Required•Attribut booléen•Prévient la soumission du formulaire si les champs requis non pas été complétés
Auto-complete•Empêche les navigateurs de se souvenirs des informations entrés dans un formulaire/champ
list et datalist•Croiser input et select•Liste de choix pour input•Choisir dans la liste ou entrer un choix
Search (type d’input)•Réagit comme un type text•Coins ronds, X pour effacer la saisie, bouton Search etc.
E-mail (type d’input)•Safari Mobile offre un clavier différent (@)
URL (type d’input)•Safari Mobile offre un clavier différent (.com)
Telephone (type d’input)•Safari Mobile offre un clavier numérique
Range (type d’input)•Slider natif•Valeur par défaut: 0 à 100•min, max et step
Number (type d’input)•Spinner natif•Entrer une valeur ou d’utiliser les contrôles•Valeur numérique seulement•min, max et s...
Date (type d’input)•Année, mois et jour•2009-11-19Datetime (type d’input)•Année, mois, jour, heures, minutes, secondes et ...
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...
Color•Sélecteur de couleur natif•Hexadécimal - 6 chiffres de #00000 à #ffffff
STRATÉGIE, OUTILS ET SUPPORT DES NAVIGATEURSSupport des navigateurs•Très variable•Opera is the king
Stratégie•Détection de fonctionnalité avec Modernizr
•Ancre CSS (≠IE6)
Outils•Modernizr•head.js•http://code.google.com/p/webforms2/•http://jqueryui.com/•http://www.miketaylr.com/code/input-type...
ARIA ET LANDMARK ROLES•Accessible Rich Internet Applications Suite•Accessibilité pour les technologies d’assistances•Ajax,...
Landmark Roles•Identifier des sections communes afin de les parcourir à l’aide de technologies d’assistance•Simple et efficace
Banner•L’entête du document•Une fois par document
Banner•L’entête du document•Une fois par documentComplementary•Similaire à l’élément aside•Délimite du contenu qui est rel...
Contentinfo•Information à propos du document•Pied de page du document•Une fois par document
Contentinfo•Information à propos du document•Pied de page du document•Une fois par documentMain•Représente le contenu prin...
Navigation•Similaire à l’élément nav•Navigation principal du document
Navigation•Similaire à l’élément nav•Navigation principal du documentSearch• Interface de recherche complète• Libellés, bo...
STRATÉGIE, OUTILS ET SUPPORT DES NAVIGATEURSSupport des navigateurs•Jaws, NVDA et Voiceover
STRATÉGIE, OUTILS ET SUPPORT DES NAVIGATEURSSupport des navigateurs•Jaws, NVDA et VoiceoverStratégie•HTML5 VS ARIA•Ancre C...
STRATÉGIE, OUTILS ET SUPPORT DES NAVIGATEURSSupport des navigateurs•Jaws, NVDA et VoiceoverStratégie•HTML5 VS ARIA•Ancre C...
CONCLUSIONCommencez maintenant!
CONCLUSIONCommencez maintenant!  •developers.whatwg.org  •html5.validator.nu  •html5boilerplate.com  •initializr.com
READ/FOLLOW/PRAY     JEREMY KEITH     MARK PILGRIM    BRUCE LAWSON      REMY SHARP     ANDY CLARKE       PAUL IRISH     TA...
HTML5 Logo by W3C@REMYSAVARD
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
Prochain SlideShare
Chargement dans…5
×

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

13 057 vues

Publié le

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.

Publié dans : Technologie

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

×