API HTML5

HTML5

On a vu que le DOM est une interface permettant à un programme d'interagir dynamiquement avec les éléments d'un document HTML

Les pages modernes ne sont plus toujours de simples documents textuels mais peuvent être de véritables applications

modifier les éléments n'est pas la seule chose que l'on a besoin de faire (manipulation de documents multimédia, de primitives de dessin, etc.)

Il est nécessaire d'avoir des API pour faire ça (et de nombreuses autres choses)

elles sont fournies par la norme HTML5

La norme HTML5 ne décrit pas qu'un langage de balisage, mais également toutes les façons dont on peut interagir avec la page et le navigateur

Ce cours contient une vue d'ensemble des API importantes ou pratiques, pour les détails il faudra aller fouiller par vous-mêmes

NB : si une démo ne marche pas, essayer avec un autre navigateur

Multimédia

• Audio : élément audio
• Vidéo : élément video
• Désaccords sur les codecs à utiliser…

  possibilité de mettre plusieurs fichiers alternatifs

• Le navigateur affiche ses propres contrôles, mais il est possible de créer les siens
• API de contrôle, événements DOM (play, pause, end)…
• Gestion des sous-titres

Canvas

• Élément pour contenir des dessins ou images
• Couplé à JavaScript
• Exemple (source) :
• Démos vidéo + canevas : miroir, filtre couleur

Interactions utilisateur

• Édition du contenu : attribut contenteditable — exemple
• Drag & drop en standard :
  • Exemple et un autre
  • un tuto
• User Interactions de HTML5

Historique de navigation

• Bouton « retour » très utilisé par les internautes
• Malheureusement souvent cassé par les applications utilisant Ajax
• API History : permet d'ajouter/enlever des entrées dans l'historique de l'utilisateur
• Peut aussi modifier l'URL dans la barre d'adresse
• démo
• API History

Autres API associées à HTML5

D'autres API faisaient originellement partie de la norme HTML5, mais en sont sorties

Stockage de données client

• Objectif : pallier les défauts des cookies
• Les sites peuvent stocker des données chez le client, sans avoir besoin de passer par le serveur
• Deux types de stockage
  • sessionStorage : pour stocker des données propres à une fenêtre (ou onglet), donc spécifiques à une navigation
  • localStorage : pour stocker des données sur le client, indépendamment des fenêtres. Données conservées même lorsque le client est fermé.
• Exemples
  • sessionStorage
  • localStorage
• Recommendation Web Storage

Stockage SQL client

• Avoir une base de données dans le navigateur
• Web SQL Database dans une impasse, a été abandonné
• La solution retenue n'est pas du SQL mais une base de données indexée : Indexed Database API

Géolocalisation

• API JavaScript pour accéder à des infos de géolocalisation
• Démo simple
• Geolocation API Specification

Web sémantique

• Web sémantique avant HTML5 :
  • Microformats (simples mais avec des limites)
  • RDFa avec XHTML (pas simple)
• Microdata : avoir un mécanisme simple pour ajouter des données sémantiques dans les pages
• Tuto par Google
• Recommendation HTML Microdata
• HTML+RDFa 1.1 pour mettre du RDFa dans le HTML
• Utilisation de profils

Travaux en cours au W3C

• Web Workers : exécuter du JavaScript avec des threads différentes de l'UI
• Web messaging : communication entre différents contextes de navigation
• Web sockets : communiquer avec le serveur sans passer par HTTP (un article introductif en anglais)

Conclusion

• Beaucoup de fonctionnalités, en standard
• Implémentations qui avancent
• Beaucoup de travail pour rester à la pointe !