API de HTML5

Licence Informatique, semestre 6

Jean-Marc LecarpentierPascal Vanier

Enseignement des technologies du Web

 

API de HTML5

Notes de cours

Travail personnel

Objectifs

Ce TP propose un exemple simpliste d'architecture Ajax, qui vous fait également utiliser des API de HTML5, ainsi qu'un exercice de manipulation du canevas.

Exercice 1 (optionnel) — Site de poèmes en Ajax et HTML5 #

Cet exercice vise à faire une version Ajax d'un site de poèmes. Le but est d'écrire le JavaScript qui rend fonctionnelle la page de base.

Remarque importante : l'exercice est intéressant car il est parfois utile de charger des parties de page dynamiquement. Cependant, tel que le site est proposé, il est complètement absurde d'utiliser du JavaScript : on ne fait que réimplémenter des fonctionnalités de base du web… Malheureusement, de trop nombreux sites web font le choix de fonctionner de cette façon. Ne pas prendre cet exercice comme un exemple à suivre. Ce n'est qu'un entraînement à JS+Ajax+HTML5.

Télécharger l'archive de l'exercice : elle contient la page HTML, la feuille de style CSS, un fichier JS vide, les poèmes sous forme de fragments HTML, et des informations sur chaque poème au format JSON. Placer l'ensemble sur votre espace web personnel.

L'exercice consiste à créer le fichier JS ; il ne faudra pas modifier les autres fichiers.

Ajax

  1. Faire en sorte que cliquer sur le nom d'un poème dans le menu télécharge le poème en question en HTML (répertoire fragments/) et l'affiche dans le cadre de droite. Pour récupérer le HTML, on utilisera une requête XHR en forçant le type de réponse au format « document », puis on clonera le contenu de l'élément body pour le placer dans le DOM de notre page web.
  2. Modifier le code pour qu'en plus du poème, les informations le concernant soient téléchargées et affichées comme sur ce modèle. Les informations se trouvent dans le répertoire infos/ ; on les récupérera avec une requête XHR au format JSON, qui renverra un objet JavaScript dont on utilisera le contenu.
  3. Faire en sorte que le poème couramment affiché soit mis en valeur dans le menu en lui appliquant la classe choisi).

Améliorations de l'ergonomie avec HTML5

Puisque la navigation sur notre site se fait purement en Ajax, on a cassé certaines fonctionnalités de base du navigateur : en particulier, l'historique et les boutons « précédent/suivant » ne marchent plus, et chaque poème n'a pas d'URL attitrée. On peut utiliser des API introduites par HTML5 pour corriger ces problèmes.

  1. Faire en sorte que naviguer dans le menu des poèmes modifie la barre d'adresse et l'historique de l'internaute.
  2. Faire en sorte que le navigateur se souvienne du dernier poème visité lorsque l'internaute revient sur la page après l'avoir fermée.

Exercice 2 (optionnel) — Application de dessin #

On va manipuler le canevas HTML5 en faisant une petite application de dessin. Créer une nouvelle page avec un canevas.

  1. Dessiner un point là où l'internaute clique sur le canevas.
  2. Ajouter un contrôle permettant de changer la taille du pinceau (par exemple un input de type range).
  3. Ajouter un bouton permettant de passer en « mode arc-en-ciel », c'est-à-dire que la couleur du pinceau passe progressivement par plusieurs couleurs (idéalement, les couleurs de l'arc-en-ciel, mais on se contentera de quelque chose de simple pour commencer).
  4. Ajouter un bouton permettant de télécharger le dessin effectué. Pour ce faire, utiliser une des méthodes d'export des données du canevas (data-URL ou blob), créer un lien qui pointe vers le résultat, puis cliquer dessus en JavaScript (méthode HTMLElement.click()). Pour que le navigateur propose un téléchargement au lieu de se rendre à l'URL indiquée, utiliser l'attribut download de l'élément a. Le lien doit être dans le document pour qu'on puisse appeler click dessus, mais rien n'interdit de le cacher avec du CSS.
  5. Optionnel : notre application n'est pas très pratique pour dessiner, puisque l'on passe son temps à cliquer. Faire en sorte que l'on puisse dessiner en gardant le bouton de la souris enfoncé. (Remarque : dessiner plutôt des chemins que des points, pour éviter d'obtenir des pointillés si l'internaute fait des mouvements trop grands ou trop rapides).
  6. Optionnel : afficher cette image libre de droits (source) quelque part sur la page. Quand l'internaute clique sur une des icônes, et qu'il ou elle clique ensuite sur le canevas, l'icône doit être recopiée à l'endroit où le clic a eu lieu.