IHM Androide

Travaux Pratiques

Interfaces Web

Introduction

Le but de ce TP est d'étudier les notions abordées lors du cours IHM-Androide sur les Interfaces Web.

Compte-Rendu

Pour ce TP, vous devrez rendre les différents fichiers produits (HTML/CSS/JS/...) et les réponses aux questions dans un fichier nommé reponse.txt, comme celui-ci. On fera attention au vocabulaire utilisé. Le tout devra être zippé et téléchargé à cette adresse au plus tard une semaine après la fin du TP. Utilisez l'indentation et les commentaires à bon escient. Vous vous assurerez que votre code est acceptable pour les validateurs (celui du W3C pour le HTML et JSHint pour le JavaScript).

Exercice 1 - Utilisation simple de HTML

Question 1a: Suivez ce lien avec votre navigateur, utilisez l'explorateur de code source ("View Source" ou CTRL+U) et l'inspecteur d'éléments ("Inspect Element" ou F12, onglet Element) et comparez les résultats. Quelles sont les différences ?

On prendra l'habitude dans le reste du TP de régulièrement vérifier si la console affiche des erreurs et si l'interprétation faite par un navigateur est conforme à vos attentes.

Question 1b: A partir du fichier de la question précédente, on souhaite mettre en valeur les mots Telecom ParisTech. Expliquez comment faire simplement (on n'utilisera pas CSS) et sauvegardez votre résultat dans le fichier exercice1b.html? Généralisez et expliquez à quoi servent les balises du HTML ?

Question 1c: A partir du fichier précédent, ajoutez une balise "title" contenant le texte: "Ceci est une page de test", et sauvegardez le dans le fichier exercice1c.html. Que s'affiche-t-il dans le navigateur ? A partir de cet exemple et en généralisant, expliquez la structure de base d'une page HTML. On utilisera cette structure correcte par la suite.

Question 1d:
A partir du fichier précédent, placez le texte "Ma page personnelle de Telecom ParisTech" dans une balise h1 au début de la page.

Après la balise h1, créez 3 éléments <div> et insérez du texte dans ces éléments (suffisamment dans les deux premiers pour que le contenu complet ne tienne pas dans la hauteur de l'écran et que la barre de défilement apparaisse, vous pouvez utiliser du texte généré automatiquement, par exemple du "Lorem ipsum" avec ce générateur en ligne). On donnera un identifiant unique (div1, div2, div3) à chaque élément div.

Créez une liste à points permettant de naviguer dans la page. On placera cette liste dans une balise <nav> avant les <div>. Vous pourrez également ajouter des liens externes.

Ajoutez une image au début du premier <div>. On utilisera une image au format PNG, GIF ou SVG.

Sauvegardez le résultat dans un fichier nommé exercice1d.html.

Expliquez la différence entre les balises sémantiques comme nav et les autres balises comme div.

Question 1e: Ecrivez un fichier SVG appelé exercice1e.svg représentant l'arbre DOM résultant de toutes ces opérations (on ne présentera que les noeuds de type Element). On pourra utiliser un éditeur SVG comme Inkscape ou écrire le directement le code dans un éditeur de texte. Si vous utilisez un éditeur, on s'assurera que le résultat est lisible dans un navigateur et qu'il n'y a pas trop de balises externes au langage SVG. En se concentrant sur ces balises SVG, comparez la structure du fichier par rapport à la structure d'une page HTML.

Question 1f: Expérimentez, dans un fichier exercice1f.html à partir de l'exemple 1d la robustesse et le comportement des navigateurs quand vos balises ne sont pas ou sont mal fermées. Donnez un exemple de balise non fermée qui ne change rien (y compris dans la structure de l'arbre DOM), et un autre de balise non fermée qui a changé le rendu.

Exercice 2 - Ajout de styles CSS

Question 2a: A partir du fichier exercice1d.html, ajoutez du code CSS directement sur chaque balise:

Sauvegardez le résultat dans un fichier nommé exercice2a.html.

Pour rappel, vous pourrez vérifier et modifier le code CSS via l'inspecteur de code.

Expliquez les approches que vous avez utilisées.

Question 2b: Déplacez ce code CSS dans la balise <head> de la page HTML. Sauvegardez le résultat dans un fichier nommé exercice2b.html. Expliquez ce que vous avez dû changer et les avantages/inconvénients de cette méthode.

Question 2c: Supprimez le code CSS précédent et utilisez cette feuille de style externe. Sauvegardez le résultat dans un fichier nommé exercice2c.html. Expliquez ce que vous avez dû changer et les avantages d'utiliser une feuille de style externe.

Exercice 3 - JavaScript, AJAX et DOM

Vous rendrez les résultats de cet exercice dans des fichiers nommés exercice3.*.

Pour cette question, dans le cadre du TP (il ne faudrait pas faire ça pour un vrai site web, pour des raisons de sécurité!), il faut configurer le navigateur pour autoriser les requêtes AJAX à partir d'un fichier et vers un fichier.

Pour Firefox, aller à l'adresse about:config, rechercher "origin" et positionnez à "false" la valeur de security.fileuri.strict_origin_policy.

Pour Chromium, il faut fermer toutes les fenêtres Chrome/Chromium. Ensuite, à partir d'un terminal, executer: chromium --allow-file-access-from-files --user-data-dir=/tmp.

Téléchargez ce fichier texte dans un fichier exercice3.txt.

Créez une page HTML nommée exercice3.html qui utilise un fichier exercice3.js.

Question 3a: Dans le fichier exercice3.js, ajoutez une fonction nommée 'addText' qui charge le fichier exercice3.txt et inclue son contenu dans la page quand vous cliquez sur un bouton. Le texte importé sera mis dans une balise textarea placée en dessous du bouton. Expliquez le fonctionnement de votre code.

Question 3b: Dans le fichier exercice3.js, ajoutez une fonction nommée 'addHtml' qui remplace la balise textarea avec chaque ligne dans un élément p auquel vous attribuerez une couleur différente via CSS (evéntuellement en utilisant JavaScript). Expliquez le fonctionnement de votre code.

Exercice 4 - JavaScript, JSON et Animations

Ce fichier JSON représente une façon possible pour décrire un slideshow. Chaque slide est représenté par un temps de début (en secondes) et une URL à présenter.

Question 4a: Créez 2 fichiers exercice4.html et exercice4.js qui contiennent:

Expliquez les grandes lignes de votre code.

Question 4b: Modifiez ces fichiers pour inclure

Expliquez les modifications.