HTML5 Les débuts du web accessible et sémantique ?

Présentation au sujet: "HTML5 Les débuts du web accessible et sémantique ?"— Transcription de la présentation:

1 HTML5 Les débuts du web accessible et sémantique ?

2 INTRODUCTION

3 HTML, c’est quoi ? Langage de script permettant de décrire la structure de base d’une page web Elle est accessible via une URL (Uniform Resource Locator) Une URL est un moyen de repérer une ressource dans le web Cette page est envoyée généralement par un serveur vers un poste client équipé d’un navigateur pour sa visualisation Un document HTML contient des informations multimédias : textes, images « fixes » ou animées, sons, vidéos, animations,... L’extension ou suffixe d’un document HTML est :.htm ou.html HTML = HyperText Markup Language Langage de description de document multimédia utilisé notamment par le Web. HTML utilise des balises ou tags pour indiquer la façon dont le document doit être affiché. Délimiteurs de balises : ‘ ‘ mon texte Les noms de balises peuvent être écrits en majuscules ou minuscules

4 L’évolution de HTML 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2013 XHTML 2.0 conception contestée HTML suit les implémentations des navigateurs HTML 2.0 HTML 3.2 HTML 4.0 HTML 4.01 HTML 1.0 Origine Tim Berners-Lee (CERN) World Wide Web Apports de NCSA Mosaic et Apports de Netscape Navigator XHTML 2.0 conception abandonné XHTMLHTML 5

5 Les navigateurs 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2013

6 Et la sémantique dans tout ça ? Une page web a une signification sous- jacente qu’une personne peut comprendre aisément en la lisant, mais ce n’est pas le cas d’un moteur de recherche On peut l’aider à mieux interpréter une page web en ajoutant des balises supplémentaires, des microformats ou des microdonnées

7 STRUCTURE DE BASE

8 Un document HTML5 minimal Titre de la page

9 LES NOUVELLES BALISES SÉMANTIQUES

10 Le sectionnement section – Permet de regrouper des éléments de contenus liés par une thématique – Plus de sens que la balise « div » – Peut contenir une balise « h1 » – Une page web peut contenir plusieurs balises « section » – Se situe généralement au milieu du document article – Permet de regrouper des éléments de contenus liés par une thématique, constituant une portion indépendante, pouvant être reprise dans un autre site – Peut contenir une balise « h1 » – Une page web peut contenir plusieurs balises « article » – Se situe généralement au milieu du document aside – Permet de regrouper des éléments de contenus constituant des informations complémentaires/associées – Une page web peut contenir plusieurs balises « aside » – Se situe généralement au milieu du document

11 Le sectionnement nav – Permet de regrouper des principaux liens de navigation du site – Les liens structurés à l’aide des balises « ul » et « li » Main – C’est nouveau ! – Contenu principal du document – un seul main dans le document – Ne doit pas figurer à l’intérieur des sections – Ne doit pas se trouver dans l’en-tête – Ne doit pas se trouver dans le pied de page – Ne doit pas se trouver dans la navigation – (role -> ARIA WAI)

12 Le sectionnement header – Permet de regrouper des éléments de contenus relatifs à un en-tête – Intègre par ex. le titre du site, logo, carrousel, bannière, formulaire de recherche, menu multilinguisme, … – Peut contenir une balise « h1 » – Les différentes sections de la page peuvent aussi contenir une balise « header » – Se situe en général en haut du document footer – Permet de regrouper des éléments de contenus relatifs à un pied de page – Intègre par ex. le menu secondaire, logos des partenaires, plan du site, mentions légales, … – Les différentes sections de la page peuvent aussi contenir une balise « footer » – Se situe en général en bas du document

13 Exemple 1

14 Exemple 2

15 Exemple 3

16 Les données spécifiques time, figure, figcaption, etc

17 LES MICROFORMATS

18 Les microformats microformats.org Existent depuis 5 ans au moins Existaient avant HTML5 Repose sur l’utilisation des attributs : – class – rel

19 La « class » et le style L’attribut class permet de caractériser plusieurs éléments HTML Ciblage de plusieurs éléments HTML via la feuille de styles CSS pour la mise en forme

20 La sémantique c’est la « class » L’attribut class permet de caractériser plusieurs éléments HTML Donner du sens à un élément contenant l’information Favoriser l’atteinte et la manipulation d’un élément par un moteur de recherche ou un objet communicant

21 L’attribut « rel » Cela permet définir le type de relation entre deux ressources Exemples : Atteindre mon lien

22 Le microformat « hCard »

23 Le microformat « hCalendar » November 11, 2013 – event title

24 Le microformat « hReview » Nov 11, 2004 by anonymous 0.3

25 LES MICRODONNÉES (MICRODATAS)

26 Les microdonnées Possibilité de faire référence à une structure de représentation de l’information au sein d’un élément HTML (cf. schema.org) Liées à l’arrivée de HTML5 De nouveaux attributs (itemscope, itemtype, itemprop, itemref, itemid)

27 Les nouveaux attributs item… Itemscope Permet de créer un objet sémantique (item) et n’accepte aucune valeur Itemtype Définit le type de l’item. Sa valeur est l’URL vers une référence de schema.org (ex : http://schema.org/Person) Itemprop Permet de doter l’item d’une propriété du schéma indiquant la nature du contenu marqué Itemref Permet de lier des données ne se trouvant pas dans le même élément Itemid Définit un identifiant unique (ex : ISBN, EAN, visa d’exploit., …) et doit être associé aux attributs « itemscope » et « itemtype »

28 schema.org Un effort commun répertorié par schema.orgschema.org Reconnu et soutenu par la plupart des moteurs de recherche (Bing, Google, Yahoo!, Yandex, …) Un schéma structuré de balisage de données Un vocabulaire qui se fonde sur des types et des propriétés

29 Plusieurs schémas Les schémas sont composés de types Les types sont organisés hiérarchiquement Chaque type comporte des propriétés

30 Types de données de base

31 Le type d’item le plus générique : Thing Tous les autres types dépendent de « Thing »

32 Types d’items couramment utilisés Travaux créatifs : – CreativeWork, – Book, – Movie, – MusicRecording, – Recipe, – TVSeries... Objets intégrés non-textuels : – AudioObject, – ImageObject, – VideoObject Event MedicalEntity Organization Person Place, LocalBusiness, Restaurant... Product, Offer, AggregateOffer Review, AggregateRating

33 La hiérarchie complète des types Cliquez ici !

34 Exemple 1 : Fiche recette http://schema.org/Recipe Recette d'une Tarte au Kiwi Recette proposée par Greg, le 8 février 2012 - Notée http://schema.org/AggregateRating 4 / 5 avec 35 avis. Délicieuse, cette tarte d'hiver émoustille les papilles. Toute simple, elle est à la portée des novices en cuisine. Succès garanti ! Informations Durées Durée de préparation : 15 mn Durée de cuisson : 25 mn Durée totale : 40 mn Nutrition http://schema.org/NutritionInformation 240 calories Ingrédients 1 pâte feuilletée 350 g de kiwis 125 g de crème liquide 1 jaune d'oeuf 2 cuillères à café de cassonade 30 g de sucre semoule Instructions Préchauffez le four à 220°C. Déroulez la pâte toute prête et posez-la avec son papier dans un moule à tarte. […]

35 Exemple 2 : Fiche film http://schema.org/Movie Nom du film de la fiche http://schema.org/VideoObject Trailer : Nom du film de la fiche Courte description de la vidéo Contenu principal de ma fiche film Réalisateur Emily Atef Acteurs Maria-Victoria Dragus Roeland Wiesnekker Wolfram Koch Christine Citti Nathalie Boutefeu Distributeur Les Films du Losange Musique par John Smith Ratio d'image 2.35 Langues Français Allemand Année de production 2011 Date de sortie 25 avril 2012 Genre Drame Durée 91 min

36 APPLICATIONS WEB ET INTERACTIVITÉ

37

38 DÉMARRAGE…

39 Les kits de « démarrage rapide » Html5 Starter Pack by Sickdesigner.com http://sickdesigner.com/resources/HTML5-starter-pack/ http://sickdesigner.com/resources/HTML5-starter-pack/ HTML5 Boilerplate http://www.html5boilerplate.com/ http://www.html5boilerplate.com/ Initializr http://www.initializr.com/ http://www.initializr.com/ HTML KickStart http://www.99lime.com/ http://www.99lime.com/ Bootstrap http://twitter.github.com/bootstrap/ http://twitter.github.com/bootstrap/

40 Html5 Starter Pack by Sickdesigner.com Télécharger : http://sickdesigner.com/resources/HTML5- starter-pack/ http://sickdesigner.com/resources/HTML5- starter-pack/

41 HTML5 et les navigateurs Can I Use ? http://caniuse.com/http://caniuse.com/

42 HTML5 et les navigateurs

43 Les grilles de mise en forme > Pourquoi une grille C’est plus simple C’est plus rapide C’est plus beau ! C’est tendance

44 Les grilles de mise en forme > Choix d’une grille Choix d’un système de grille de mise en forme – CSS Grid Layout – 960.gs – 978.gs – 1 % grid – - … Nombre de colonnes : 12, 16 ou 24 Grilles verticales / horizontales Fluide ≠ adaptative

45 Les grilles de mise en forme > Structure de base

46 Les grilles de mise en forme > Agencement des blocs

47 CSS et OOCSS

48 QUELQUES LIENS À SUIVRE

49 W3C http://www.w3.org http://www.w3schools.com/

50 HTML5 http://www.w3schools.com/html/ http://dev.w3.org/html5/markup/ http://docteurhtml5.com/html5/ http://fr.wikipedia.org/wiki/HTML5 http://www.youtube.com/html5?hl=fr

51 Microformats et microdonnées http://www.html5-css3.fr/html5/microformats- microdata-html5#more-633 http://www.html5-css3.fr/html5/microformats- microdata-html5#more-633 http://schema.org/

52 Object Oriented CSS http://oocss.org/ http://www.stubbornella.org/ http://coding.smashingmagazine.com/2011/12/12/a n-introduction-to-object-oriented-css-oocss/ http://coding.smashingmagazine.com/2011/12/12/a n-introduction-to-object-oriented-css-oocss/

53 Les kits de « démarrage rapide » http://sickdesigner.com/resources/ HTML5-starter-pack/ http://sickdesigner.com/resources/ HTML5-starter-pack/ http://www.html5boilerplate.com/ http://www.initializr.com/ http://www.99lime.com/ http://twitter.github.com/bootstrap/

54 Validation et test http://validator.w3.org/ http://caniuse.com/ http://browsershots.org/ http://html5test.com/

55 CONCLUSION

56 Conclusion Une syntaxe de base plus simple De nouvelles balises L’introduction d’éléments de nature sémantique facilite le travail aux moteurs de recherche, aux nouveaux outils et aux applications permettant d’obtenir des résultats plus riches pour les internautes Facilite le travail aux développeurs web Des problèmes de compatibilité avec certains navigateurs Alors Adobe Flash : c’est fini ?

57 C’EST FINI !