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

INTRODUCTION

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

L’évolution de HTML 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

Les navigateurs

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

STRUCTURE DE BASE

Un document HTML5 minimal Titre de la page

LES NOUVELLES BALISES SÉMANTIQUES

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

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)

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

Exemple 1

Exemple 2

Exemple 3

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

LES MICROFORMATS

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

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

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

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

Le microformat « hCard »

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

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

LES MICRODONNÉES (MICRODATAS)

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)

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 : 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 »

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

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

Types de données de base

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

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

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

Exemple 1 : Fiche recette Recette d'une Tarte au Kiwi Recette proposée par Greg, le 8 février Notée 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 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. […]

Exemple 2 : Fiche film Nom du film de la fiche 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

APPLICATIONS WEB ET INTERACTIVITÉ

DÉMARRAGE…

Les kits de « démarrage rapide » Html5 Starter Pack by Sickdesigner.com HTML5 Boilerplate Initializr HTML KickStart Bootstrap

Html5 Starter Pack by Sickdesigner.com Télécharger : starter-pack/ starter-pack/

HTML5 et les navigateurs Can I Use ?

HTML5 et les navigateurs

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

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

Les grilles de mise en forme > Structure de base

Les grilles de mise en forme > Agencement des blocs

CSS et OOCSS

QUELQUES LIENS À SUIVRE

W3C

HTML

Microformats et microdonnées microdata-html5#more microdata-html5#more-633

Object Oriented CSS n-introduction-to-object-oriented-css-oocss/ n-introduction-to-object-oriented-css-oocss/

Les kits de « démarrage rapide » HTML5-starter-pack/ HTML5-starter-pack/

Validation et test

CONCLUSION

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 ?

C’EST FINI !