HTML 5 Avancé

Images interactives, graphiques et

multimédia
 Image réactive ou image-map
• une image-map est une image avec des zones cliquables.
• Pour cela, on associe à l’élément <img> un élément <map> qui
décompose sa surface en plusieurs parties <area> en spécifiant leur
forme et leurs dimensions.
• L'attribut « usemap » de <img> spécifie une image en tant
qu'image-map côté client.
• L'attribut « usemap » est associé à l'attribut « name »
d'un élément <map> et crée une relation entre <img> et <map>.
 exemple
<img src="[Link]" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="[Link]" alt="Sun">
<area shape="circle" coords="90,58,3" href="[Link]" alt="Mercury">
<area shape="circle" coords="124,58,8" href="[Link]" alt="Venus">
</map>
 La balise <map>
• La balise <map> est utilisée pour définir une image-map côté
client.
• L'élément <map> contient un certain nombre d' éléments <area>,
qui définissent les zones cliquables dans la carte graphique.
 La balise <area>
• La balise <area> définit une zone dans une image-map.
• L’attribut « href » permet de définir la cible du lien.
• L’attribut « shape » définit la forme de la zone cliquable (default,
rect, circle, poly).
• L’attribut « coords » définit les cordonnées de la zone selon son
type: (x1,y1,x2,y2) pour un rectangle, (x,y,rayon) pour un cercle,…
Nb: Les coordonnées (0,0) désignent le coin supérieur gauche
• Exemple
 Graphiques: SVG et CANVAS
• SVG est un langage pour décrire les graphiques 2D en XML.
• Canvas dessine des graphiques 2D, à la volée (avec un JavaScript).
 SVG
• SVG (acronyme de scalable vector graphics) est un format de
données conçu pour décrire des ensembles de graphiques
vectoriels basé sur XML (recommandation du W3C), destiné au
web.
• La balise <svg> permet d'insérer directement dans un document
HTML une figure décrite en format SVG. La figure sera adaptée
aux dimensions spécifiées par les attributs height et width de la
balise <svg>.
 exemple
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-
width="4" fill="yellow" />
</svg>
Permet de dessiner un cercle de rayon 40, avec une bordure verte et un
remplissage jaune. Cx et cy sont les coordonnées du centre du cercle.
• Exemple
 Canvas
• L'élément <canvas> est utilisé pour dessiner des graphiques, à la
volée, via JavaScript.
• L' élément <canvas> n'est qu'un conteneur pour les graphiques.
Vous devez utiliser JavaScript pour dessiner les graphiques.
• Canvas dispose de plusieurs méthodes pour dessiner des chemins,
des boîtes, des cercles, du texte et ajouter des images.
 La balise <canvas>
• Un canevas est une zone rectangulaire sur une page HTML. Par
défaut, une toile n'a pas de bordure ni de contenu.
• syntaxe
<canvas id="myCanvas" width="200" height="100"></canvas>
• Spécifiez toujours un attribut Id (auquel il faut faire référence dans
un script) et un attribut width et height pour définir la taille du
canevas.
 Exemple: un rectangle
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = [Link]("myCanvas");//sélectionner le canvas
var ctx = [Link]("2d"); //créer un objet prédéfini de dessin 2D
[Link] = "#FF0000"; //le style de remplissage de l'objet
[Link](0,0,150,75); //dessine un rectangle
</script>
• Exemple
 Différences entre SVG et CANVAS
• SVG :
• basé sur XMLchaque élément est disponible dans le DOM SVG on peut
attacher des gestionnaires d'événements JavaScript pour un élément.
• chaque forme dessinée est mémorisée comme un objet
• Un peu lourd pour de gros graphiques, n’est pas adapté aux jeux
• CANVAS:
• Le CANVAS est rendue pixel par pixel. Une fois le graphique dessiné, il est oublié
par le navigateur.
• Si sa position doit être modifiée, la scène entière doit être redessinée.
• Plus léger, adapté aux jeux
 Qu'est-ce que le multimédia?
• Il peut s'agir de presque tout ce que vous pouvez entendre ou voir,
comme des images, de la musique, du son, des vidéos, des disques,
des films, des animations, etc.
• Le multimédia est disponible dans de nombreux formats
différents.
• Les pages Web contiennent souvent des éléments multimédias de
différents types et formats.
 Support du multimédia
• Avant HTML5, si vous souhaitiez publier de l’audio ou de la vidéo,
il vous fallait utiliser un plug-in (Flash a été officiellement
abandonné récemment).
• Ces « plug-ins », ou modules d’extension, sont sous le contrôle
d’entreprises indépendantes.
• Avec HTML5, les médias riches sont interprétés de façon native par
le navigateur, sans l’aide d’un plug-in.
 Intégrer des éléments multimédia
• <audio> : pour définir un son, comme la musique ou les autres flux
audio (streaming).
• <video> : Insérer un contenu vidéo.
• <track> : Insérer un sous-titre à une vidéo affichée avec la balise
video .
• <embed> : définit un contenu incorporé, comme un plug in.
 Audio

<audio src="musique.mp3"> </audio>

• Autoplay: permet d’insérer un fichier audio qui démarre
automatiquement.
• Loop: lecture en boucle
• Preload: permet de précharger le contenu de l’audio
• Controls: invite le navigateur à afficher des contrôles natifs
 Formats audio supportés
• seuls les fichiers audio MP3, WAV et Ogg sont pris en charge par la
norme HTML.
• Le format MP3 est le meilleur format pour la musique enregistrée
compressée. Le terme MP3 est devenu synonyme de musique
numérique
 Video
<video src="film.mp4" controls width="360" height="240">
</video>
• L’élément video comprend les attributs optionnels autoplay, loop et
preload et controls (idem que pour l’audio).
• Vous pouvez choisir une image représentative de la vidéo qui sera
affichée à l’aide de l’attribut poster:
<video src="film.mp4" controls width="360"
height="240" poster="[Link]"> </video>
 Formats vidéo supportés
• Seuls les formats MP4, WebM et Ogg sont pris en charge par
HTML.

• Nous avons d’autres formats vidéo, comme le format MP4

recommandé par YouTube, MPEG, AVI,….
 <source>
• Les éléments média disposent d’un moyen alternatif pour indiquer
des sources multiples grâce à <source>, éléments enfants de
<video> et <audio>.
• Avantages :
• proposer plusieurs formats de fichiers possédant chacun un
attribut « type » différent,
• proposer un format de fichier mieux adapté selon le type de
périphérique de consultation (plateforme mobile).
 Comment utiliser <source>?
• Pour définir plusieurs sources alternatives, il faut enlever l’attribut
« src » et rajouter plusieurs éléments « source ».
• Les media queries nous permettent de sélectionner le type de
terminal (portable, écran d’ordinateur,…) ou même en fonction de
certaines caractéristiques physiques de la machine.
 Exemple
exemple: Cibler les mobiles
<video controls="controls">
<source src="[Link]" media="handheld"></source>
<source src="[Link]"></source>
</video>
Les API HTML5
 Les API HTML5
• Avec l’essor de l’internet mobile, HTML5 permet de gérer les
contraintes et possibilités qui en découlent (géolocalisation, gestion
de la batterie, application hors ligne, stockage local…). Mais le
mobile n’est pas le seul concerné.
• Les API sont des interfaces de programmation en JavaScript
permettant d’étendre les fonctionnalités de votre code HTML.
• Nous aborderons dans ce qui suit quelques API qui ouvrent des
perspectives intéressantes.
 API multimédia
• Une riche API en JavaScript permet de gérer les éléments
multimédias intégrés dans la page web.
• Les méthodes et propriétés offertes par cet API permettent, par
exemple: créer un lecteur vidéo personnalisé au lieu d’utiliser les
contrôles par défaut du système; récupérer les métadonnées
relatives au média (comme la durée totale); Calcul de la
progression du téléchargement et de la lecture;…
 l’API Canvas
• API bas niveau de dessin 2D.
• Elle permet de créer du contenu graphique 2D sur une surface, définie
par la balise canvas.
• Permet de dessiner toute sorte de formes et courbes sur une zone
rectangulaire, par exemple des droites, des courbes, des rectangles, des
cercles, des images, du texte, etc., et tout ce qui y est dessiné est en
permanence accessible en détail par un tableau de pixels.
• L’API Canvas a plusieurs applications: rognage de photo, analyse
d’image ou de vidéo, application de filtres de modification de couleurs,
animations, jeux vidéo...
 HTML5 Drag and Drop
• Le glisser-déposer est une caractéristique très courante. C'est
lorsque vous "attrapez" un objet et que vous le faites glisser vers un
autre emplacement.
• En HTML5, le glisser-déposer fait partie de la norme: tout élément
peut être déplacé.
 HTML web workers
• Lors de l'exécution de scripts dans une page HTML, la page ne répond
plus jusqu'à ce que le script soit terminé.
• Un Web worker est un Script qui s'exécute en arrière-plan, sans affecter
les performances de la page.
• Un Web worker est un Script qui s'exécute en arrière-plan,
indépendamment des autres scripts, sans affecter les performances de la
page.
• Vous pouvez continuer à interagir avec la page: cliquer, sélectionner des
objets, etc., pendant que le Web worker s’exécute en arrière-plan.
 Stockage Web HTML5
• Avant HTML5, les données d'application devaient être stockées
dans des cookies, inclus dans chaque demande du serveur.
• Le stockage Web est plus sécurisé et de grandes quantités de
données peuvent être stockées localement, sans affecter les
performances du site Web.
• Contrairement aux cookies, la limite de stockage est beaucoup plus
grande (au moins 5 Mo) et les informations ne sont jamais
transférées au serveur.
 Géolocalisation HTML5
• L’API de géolocalisation HTML permet d’obtenir la position
géographique d’un utilisateur.
• Étant donné que cela peut compromettre la confidentialité, la
position n'est disponible que si l'utilisateur l'approuve.
• Pour afficher le résultat sur une carte, vous devez avoir accès à un
service de carte, tel que Google Maps.
 Événements envoyés par le serveur HTML5
• Les événements envoyés par le serveur permettent à une page Web
d’obtenir les mises à jour d’un serveur.
• Un événement envoyé par le serveur se produit lorsqu'une page Web
obtient automatiquement les mises à jour d'un serveur.
• Cela était également possible auparavant, mais la page Web devrait
demander si des mises à jour étaient disponibles. Avec les événements
envoyés par le serveur, les mises à jour sont effectuées
automatiquement.
• Exemples: mises à jour Facebook / Twitter, flux d'actualités, etc.
HTML5 et web sémantique
 Web sémantique

• But: produire un code compréhensible par la machine

• Avantages:
• permettre de développer des applications permettant un
traitement et une récupération automatiques des données
• Faciliter l’indexation (pertinente) des pages par les moteurs de
recherche
 Web sémantique et HTML5
• Il est possible d’annoter directement des pages Web avec:
• RDF (technologie RDFa),
• des microdata
• des microformats.
• Le créateur de la page web écrit lui-même ses annotations
sémantiques
• Une analyse de la page web permet d’extraire les métadonnées.
 Les microformats
• Les microformats permettent d’ajouter des informations à une page
Web, en utilisant des attributs qui existent déjà en HTML (par
exemple class ou id).
• Permettent de marquer des entités pouvant être génériques
(personnes, organisations, évènements, etc.) ou spécifiques à un
domaine.
 Points forts et limitations
• Utilisés par l'ensemble des principaux moteurs de recherche.
• Ils sont très répandus car relativement anciens, mais pas très riches.
• vocabulaires séparés, ciblés, pour peu de types de données :
Marquer une adresse postale, les expériences d’un CV, ...
• Les Microformats ne font pas l’objet d’une standardisation,
contrairement aux microdata et RDFa.
 Quelques microformats
liste complète sur [Link]

• hCalendar :événements
• hCard : personnes, organisations, contacts
• hMedia : informations multimédias (images, vidéo, audio)
• hRecette : recettes de cuisine
• hResume : CV
• adr : informations de localisation d'adresse
• Geo : latitude et longitude (emplacement)
 Exemple
Si une organisation veut s'identifier via un élément, elle peut utiliser
une classe h-card:
<a class="h-card" href="[Link]
Lorsqu'un parseur de microformat détectera cette donnée, il saura
que cette page contient une « carte » qui décrit une personne ou une
organisation nommée USTHB et dont l'URL est [Link]
 Le microdata
• Vos pages Web ont une signification sous-jacente que les gens
comprennent lorsqu'ils lisent les pages Web.
• Mais les moteurs de recherche ont une compréhension limitée de ce qui
est discuté sur ces pages.
• En ajoutant des balises supplémentaires au code HTML de vos pages
Web, vous pouvez aider les moteurs de recherche et d'autres applications
à mieux comprendre votre contenu.
• Les microdonnées sont un ensemble de balises, introduit avec HTML5,
qui vous permet de faire cela.
 Ajouter des microdata
1. l'élément itemscope, ajouté à la balise HTML qui renferme
l’information, permet d’identifier la section de la page qui "concerne" le
thème abordé
2. l'attribut itemtype, qui vient immédiatement après le itemscope, permet
de spécifier le type d'élément.
• Les types d'élément sont fournis sous forme d'URL.
• La hiérarchie des types [Link].
 Ajouter des microdata-suite
3. l'attribut itemprop est utilisé pour étiqueter les propriétés d'un élément.
• Il existe une liste complète de toutes les propriétés que vous pouvez
associer à un itemtype donné sur [Link]
 Exemple
<div itemscope itemtype = "[Link]
<h1 itemprop = "name" > Avatar </ h1>
<span> Réalisateur: <span itemprop = "director" > James
Cameron </ span> (né le 16 août 1954) </ span>
<span itemprop = "genre" > Science fiction </ span>
</ div>
 RDF in attributes ou RDFa
• RDFa est basé sur RDF qui est le langage de base du Web
sémantique.
• des vocabulaires sont formellement définis « [Link] »,
traitant d’un thème particulier.
• On ajoute des attributs au document HTML5 afin de définir la
sémantique d’une partie donnée
 Syntaxe RDFa
RDFa utilise pour partie la syntaxe HTML existante :
• l'attribut class - permettant de spécifier le type de l'objet
• l'attribut id - indirectement, servant à définir l'URI d'un objet dans la page
• les attributs rel, et href - spécifiant une relation avec une autre ressource
RDFa ajoute ses propres éléments, les attributs :
• about - une URI spécifiant la ressource décrite par les métadonnées ;
• property - spécifiant une propriété pour le contenu d'un élément;
• content - attribut optionnel qui remplace le contenu d'un élément quand on utilise l'attribut
de propriété.
• datatype - attribut optionnel qui spécifie le type de donnée du contenu;
• resource - attribut optionnel spécifiant une ressource externe, en général non cliquable.
 Exemple: Balises RDFa d’une adresse postale

<p vocab="[Link] typeof="PostalAddress">

<span property="name">Google Inc.</span>
P.O. Box <span property="postOfficeBoxNumber">1234</span>
<span property="addressLocality">Mountain View</span>,
<span property="addressRegion">CA</span>
<span property="postalCode">94043</span>
<span property="addressCountry">United States</span></p>