L’essentiel à savoir sur HTML 5 - Partie 1

HTML 5 est la dernière version majeure du HTML sortie fin 2014 et spécifié par le WorldWideWeb consortium W3C.
Le langage comprend pas mal d’évolutions, d’outils et de technologies pour créer des sites internet plus ciblés, plus complets mais surtout plus « sémantiques » et « accessibles ».
Il arrive avec huit nouvelles API qui augmentent l’expérience utilisateur et les performances d’un site web pour le grand confort des utilisateurs.
Voici un petit aperçu d’une ou deux technologies pour chaque nouvelle API :
 
1-    La sémantique

Chaque balise porte désormais un nom qui a un « sens » : section, header, footer, nav, aside, article 
De cette façon, les robots indexeurs de Google et Bing ont une indication claire sur le type et le rôle du contenu présenté.
Un doctype Simplifié : 
<!DOCTYPE html>
  
Un encodage universel standardisé : 
<meta charset="UTF-8">

Avec l’arrivée des microdonnées, une fonctionnalité HTML5, le web est beaucoup plus sémantique.
La page web prend tout son sens aussi dans le fond que dans la forme.
Et nous avons une recherche internet optimisée avec les « rich snippets ».
Supposons que vous tapez l’expression « location hôtel Rouen » dans votre barre de recherche.
Voici ce qu’on pourrait avoir comme résultat :
 
On voit bien apparaitre une note et un nombre de votes.
Ces informations sont ajoutées à l’aide de schémas.
Des nouvelles balises 
Mais on a beaucoup de nouveaux attributs qui sont apparus avec HTML5 comme « placeholder », « required », « pattern » qui améliorent la saisie et les contrôles côté utilisateurs avant la soumission du formulaire.  
Des balises obsolètes ou supprimées
Certaines balises orientées styles comme <font>, <big>, <center>, <tt>, <u>, <strike> ont purement été supprimées.

2- CONNECTIVITÉ

WebSockets : ouvre une connexion bidirectionnelle permanente entre la page web active et le serveur cible.
Coté serveur : Socket.io basé sur un nodeJS.
But : développement d’application temps-réel
Exemples d’applications : sites d’informations, suivi du cours de la bourse, multi-utilisateurs : chat, jeux en ligne  
 
3- Connexion et stockage de données :

Web Storage :  permet de stocker les données des applications hors-ligne.
Avant, on utilisait les cookies limités en taille.
Maintenant, on a deux interfaces sessionStorage (stockage pour la durée de la session et dans la portée de la fenêtre active) et localStorage (stockage sans limite de durée de vie)
But :  Créer des applications utilisables en mode déconnecté
 
API File : Autorise l’upload de plusieurs fichiers avec l’attribut « multiple » et leur gestion simplifiée depuis des applications web.
L’accès à ces fichiers est simplifié, et sa manipulation se fait au travers d’une collection d’objets utilisable comme un tableau.
 
4- Multimédia :

Audio/Video : alternative native à Flash pour intégrer des audio/video à une page web à travers la balise <video>.
Sachant que IOS ne supporte pas Flash.
On peut faire du multi source et permettre le support de plusieurs navigateurs en fonction du format d’entrée du média.


5- Graphiques et Effets :

Canvas 2D : faire du dessin en 2 dimensions rendu grâce à <canvas>. C’est une matrice de pixels transparents à la base, dotés de Javascript capable de proposer un grand nombre de fonctionnalités graphiques : du simple tracé d’une courbe aux animations et jeux vidéo les plus complexes.
Cela fait partie des plus grandes évolutions de HTML5. 


On pourra par exemple créer des jeux en ligne comme Street Fighter :
 
SVG : pour faire Dessin vectoriel basé sur XML et rendu grâce à la nouvelle balise <svg>.
C’est aussi une autre des évolutions apportées par le HTML5.
On pourrait par exemple obtenir une carte interactive à zones cliquables avec cette balise.

6- Performance et intégration

Géolocalisation : permet la mobilité. Son utilisation se fait en parallèle avec les apis de données géographiques comme Google Maps.

  • On peut calculer des itinéraires, 
  • Intégrer des plans, calculer les positions en latitude/longitude/altitude à partir d’une adresse donnée
  • Renvoyer des résultats de recherche en fonction de la ville où se trouve l’utilisateur

L’api est exploitable grâce à l’objet javascript geolocation, attributs de l’objet navigator.


Fetch : pour remplacer XMLHttpRequest, et améliorer les appels aux requêtes http depuis la page html.

7- Accès aux périphériques

Web workers :  Permet d’exécuter des scripts javascripts dans des mini-processus en arrière-plan.
C’est utile notamment quand on fait des actions d’entrées /sorties via Ajax.
Une fois lancé un worker et son script appelant peuvent s’envoyer des messages.


Exemples : Faire des calculs en background, calculer et afficher les sommes successives des n entiers nombres premiers, affichage de la progression d’une tâche sans impacter le calcul     
 


8- Style

Flexbox CSS3 : Permet de disposer les éléments HTML, de manière beaucoup plus simple.
Fini les casse-têtes d’élément de type block, inline. Il s’agit d’un nouveau modèle de boite flexible.
1.    Distribution des éléments horizontale ou verticale, avec passage à la ligne autorisé ou non,
2.    Alignements et centrages horizontaux et verticaux, justifiés, répartis,
3.    Réorganisation des éléments indépendamment de l’ordre du flux (DOM),
4.    Gestion des espaces disponibles (fluidité).

Ce qui permet des rendus très poussés que les webdesigners peuvent utiliser à souhait pour sortir des designs incroyables sans trop faire d’acrobaties.

Dans la partie 2, nous verrons plus en détails comment tirer partie de ces outils et API.
 
 

Restez informés sur notre actualité

Inscrivez-vous à notre newsletter pour recevoir les dernières évolutions de notre produit