Home > Développement > HTML > Éléments pratiques

Éléments pratiques

Vidéo

Ajout de vidéo à une page web sans recours à Flash ou à d’autres plugins.

<video src="URL">Code alternatif</video>

Format autorisé : OGG et MP4.
Possibilité d’avoir plusieurs sources.

Même principe pour <audio>

Attributs

Source / largeur / hauteur : src ; width ; height ;

Image affichée sur la vidéo avant le démarrage : poster="URL"

Boutons de contrôle : controls

Lecture en boucle : loop

Démarrage automatique : autoplay

Muet : muted

Chargement de la vidéo automatique au chargement de la page : preload

JavaScript

Joue la vidéo : video.play()

Retourne un booléen : video.played()

Met la vidéo en pause : video.pause()

Retourne un booléen : video.paused()

Durée de la vidéo : video.duration

Temps écoulé : video.currentTime

Va à la seconde 10 : video.currentTime = 10

Barre de progression : barre.style.width = (video.currentTime * barreExt.clientWidth) / video.duration + "px";

Stockage local

Enregistrement de données dans le navigateur de manière :

  • Permanente via localStorage (copie d’un mail non envoyé à cause d’une perte de connexion)
  • Temporaire, pour la durée d’une session, via sessionStorage (formulaire multipage)

Plusieurs mégaoctets par site, contre 4 kilooctets pour un cookie.

JavaScript

Stocker un valeur : localStorage.setItem(clé,valeur)

Récupérer une valeur : localStorage.getItem(clé)

Supprimer une valeur : localStorage.removeItem(clé)

Supprimer toutes les valeurs : localStorage.clear()

Même principe pour sessionStorage

Animation

Animation en CSS pur :

<div>Bonjour</div>
@keyframes test { /* Nom de l'animation */
  0% { height: 10px; } /* Début de l'animation */
  100% { height: 200px; } /* Fin de l'animation */
}

div {
  animation-name: test;                /* Nom de l'animation */
  animation-duration: 5s;              /* Durée en seconde (s) ou milliseconde (ms) */
  animation-iteration-count: 8;        /* Nombre de répétition : nombre ou infinite */
  animation-direction: alternate;      /* Sens de lecture : normal ou alternate */
  animation-timing-function: ease-out; /* Progression appliquée entre les images clés : ease ; linear ; ease-in ; ease-out ; ease-in-out ; step-start ; step-end ; steps ; cubic-bezier */
  animation-delay: 1s;                 /* Durée de latence avant de démarrer l'application en seconde (s) ou milliseconde (ms) */
}

La propriété transform

matrix() ; Valeurs dans l’ordre croissant : scaleX ; skewY ; skewX ; scaleY ; translateX ; translateY

Décalage horizontal et vertical : translate(x,y)

Décalage horizontal : translateX()

Décalage vertical : translateY()

Redimension horizontale et verticale scale(x,y) ; scaleX() ; scaleY()

Rotation en degré (deg) : rotale()

Inclinaison horizontale et verticale en degré (deg) : skew(x,y) ; skewX() ; skewY()

Lecture de fichier

Lecture d’un ou plusieurs fichiers (ajoutés via un formulaire ou par glisser-déposer), par exemple afficher un aperçu d’une image qui vient d’être ajoutée en pièce jointe.

lecteur = new FileReader();

/* Lit et traduit en texte */
lecteur.readEsText(fichier);
/* readAsBinaryString() : en binaire */
/* readAsDataURL() : en base 64 */

/* Lecture en cours et récupère le nombre d'octets lus */
lecteur.addEventListener("progress", function(e) {
  lu = e.loader;
});

/* Réussite de la lecture et récupère l'affichage */
lecteur.addEventListener("load", function(e) {
  e.target.result;
});

JavaScript

La lecture a commencé : loadstart

Échec de la lecture : error

Interruption de la lecture : abort

La lecture a été stoppée (après error, abort et load) : loadend

Géolocalisation

Différents moyens utilisés par le navigateur web pour se géolocaliser, suivant la connexion et le terminal : adresse IP, triangulation (mobile ou Wi-fi) ou GPS.

JavaScript

function afficherPosition(p) {
  p.timestamp;                /* Date */
  p.coords.latitude;          /* Latitude */
  p.coords.longitude;         /* Longitude */
  p.coords.accuracy;          /* Précision (en m) */
  p.coords.altitude;          /* Altitude */
  p.coords.altitudeAccuracy;  /* Altitude précise (en m) */
  p.coords.heading;           /* Degrés par rapport au Nord */
  p.coords.speed;             /* Vitesse (en m/s) */
}

function afficherErreur(e) {
  e.message;                  /* Message et code d'erreur */
}

/* Géolocalisation fixe */
if(geo = navigator.geolocalisation) {
  geo.getCurrentPosition(afficherPosition, afficherErreur);
} else {
  alert("Géolocalisation non supportée");
}

/* Géolocalisation en déplacement */
if(geo = navigator.geolocalisation) {
  w = geo.watchPosition(
    afficherPosition, /* (optionnel) */
    afficherErreur, {
      enableHighAccuracy: true, /* Haute précision (optionnel) */
      timeout: 60000,	/* Délai de réponse maximale souhaité (ms) (optionnel) */
      maximumAge: 0  /* Âge maximal des géolocalisations en cache pouvant être réutilisées (ms) (optionnel) */	
    });
  geo.clearWatch(w);
} else {
  alert("Géolocalisation non supportée");
}

Web Workers

Exécution de scripts en arrière-plan indépendamment des scripts d’interface graphique et pour une meilleure performance de la page.
Chaque Worker a sa tâche de fond séparée (ou thread).
Communication avec la page par messages.
Pas d’accès aux éléments de la page depuis un Worker.

JavaScript

Page HTML : Web Workers

/* Appel du fichier travail.js */
travailleur = new Worker("travail.js");

/* Réception d'un message du travailleur */
travailleur.onmessage = function(e) {
  e.data;
}

/* Envoi d'un message au travailleur */
travailleur.postMessage("Bonjour");
/* OU */
travailleur.postMessage({param1: "Bonjour", param2: "le monde"});

/* Arrêt du travailleur */
travailleur.terminate();
travailleur = undefined;

Script travail.js

/* Réception du message */
onmessage = function(e) {
  /* Envoi d'un message à la page principale */
  postMessage("Travailleur" + e.data);
  /* OU */
  postMessage("Travailleur" + e.data.param1 + " " + e.data.param2);
}

Sémantique

Adoption de méthodes communes pour l’échange de données.
Ajout d’indications sémantiques au code source (HTML ou JS) d’une page pour différencier les informations qu’elle contient et faciliter ainsi leur réutilisation sur le web (moteurs de recherche, réseaux sociaux,…) :

  • HTML : attributs RDFa (Ressource Description Framework in Attributes) ou attributs Microdata ;
  • JS : JSON-LD (JavaScript Object Notation for Linked Data).

Utilisation

HTML de référence

<div>
  Netflix
  100 Winchester Circle CA 95032 Los Gatos
  (866) 716-0414
  <a href="http://www.netflix.com">netflix.com</a>
</div>

Ajout d’attributs Microdata

<div itemscope itemtype="http://schema.org/Organisation">
  <span itemprop="name">Netflix</span>
  <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">100 Winchester Circle</span>
    <span itemprop="postalCode">CA 95032</span>
    <span itemprop="addressLocality">Los Gatos</span>
  </span>
  <span itemprop="telephone">(866) 716-0414</span>
  <a href="http://www.netflix.com" itemprop="url">netflix.com</a>
</div>

Alternative : Ajout d’un script JSON-LD

<script type="application/Id+json">
  {
    "@content": "http://schema.org",
    "@type": "Organisation",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "100 Winchester Circle",
      "postalCode": "CA 95032",
      "addressLocality": "Los Gatos"
    },
    "name": "Netflix",
    "telephone": "(866) 716-0414",
    "url": "netflix.com"
  }
</script>

Attributs Data

Ajout aux balises HTML d’attributs personnalisés pour renseigner des infos supplémentaires.
Attributs accessibles en JS et CSS, l’objectif étant l’utilisant dans la page et non par des entités externes telles que les moteurs de recherche. Pas de valeurs prédéfinies, contrairement à Microdata.

Utilisation

<img id="id1" data-ville="Paris" data-album-categorie="loisirs">
<span data-msg-erreur>test</span>
/* Récupère la valeur d'un attribut data */
ville = img.dataset.ville;
/* Modifie la valeur */
img.dataset.albumCategorie = "travail";
img[data-ville="Paris"] {}
span[data-msg-erreur] {}