TP1 : HTML5

Consignes

Visual Studio Code

Dans le cadre des modules de Web, nous utiliserons l'IDE Visual Studio Code.

Installation de Visual Studio Code

Visual Studio Code est déjà installé sur vos postes de travail UCA.

Si vous utilisez un poste de travail personnel, suivez les instructions ci-dessous :

• Si vous bénéficiez des droits d’administration sur votre poste de travail :
  1. Téléchargez l’installateur (.deb pour Linux).
  2. Installez le paquet (dpkg -i code_*.deb).
  3. S’il manque des dépendances, installez-les (apt -f install).
• Sinon :
  1. Téléchargez le .tar.gz (64bits) pour Linux.
  2. Décompressez le .tar.gz dans un dossier $DIR.
  3. Ajoutez le dossier $DIR/VSCode-linux-arm64/bin/ à votre $PATH.

Configuration de Visual Studio Code

1. Dans un terminal, lancez Visual Studio Code via la commande code.
   ⚠ Sur les postes de travail UCA, vous ne pourrez pas installer les extensions si vous lancez Visual Studio Code via l’interface graphique (problèmes de variables d’environnements mal non-définies).
2. Ouvrez la barre latérale des extensions via Ctrl+⇧+X
3. Recherchez, puis installez les extensions suivantes :
   1. HTMLHint : améliore l’affichage du code HTML dans l’éditeur.
   2. Live server : permet de visualiser votre site en temps réel.

Utilisation de Visual Studio Code

Vous pouvez alors ouvrir un dossier dans Visual Studio Code :

1. à partir de Visual Studio Code :
   Fichier -> Ouvrir le dossier.
2. à partir d'un explorateur de fichier en cliquant-droit sur le dossier puis :
   Ouvrir avec -> Visual Studio Code.

Vous pouvez alors visualiser et manipuler l'arborescence de votre projet via la barre latérale gauche.

💡 Pour lancer votre projet dans un navigateur, cliquez sur "Go live" en bas à droite.

Visual Studio Code offre aussi les fonctionnalités suivantes :

1. Auto-complétion.
2. Un accès à la documentation MDN au survol d’une balise.
3. Réduire/ouvrir les balises (via les petits triangles à gauche des n° de lignes).
4. Navigation dans l'arborescence d'un fichier via la barre au-dessus de l'éditeur.

Il vous est recommandé d’organiser votre espace de travail de la sorte :

• Bureau 1 :
  • à gauche, Visual Studio Code
  • à droite, votre site Web.
• Bureau(x) 2+ : Le sujet de TP, la documentation, votre cours, etc.

Votre premier composant Web

Ouvrir le projet

1. Téléchargez, puis décompressez l'archive Site Web.
2. Ouvrez le dossier dans Visual Studio Code, puis lancez Go Live.
3. Vous devriez alors voir un texte s'afficher dans la page Web.

💡 Le dossier ainsi ouvert est alors la racine (root dir) $ROOT de votre site Web.
Dans le navigateur, il correspondra à l'URL http://localhost:5000/.

Pour rappel, une URL suit la forme suivante : $PROTO//$HOST/$PATHNAME :

• $PROTO : le protocole, ici http:.
• $HOST : l'hôte, indique l'adresse du serveur Web (où le joindre).
• $PATHNAME : le chemin (path), indique le fichier demandé.

💡 Dans votre projet, une telle URL correspondra au fichier $ROOT/$PATHNAME.

💡 Si l'URL correspond à un dossier, par défaut, son fichier index.html sera affiché.

L'inspecteur

1. Ouvrez l'inspecteur en cliquant-droit sur le texte puis sur Inspecter.

Vous pouvez alors visualiser et manipuler le DOM de votre page Web.

• En haut, la barre de recherche 🔍 recherche des éléments à partir d'un sélecteur.
• En bas, vous pouvez naviguer parmi les ancêtres de l'élément sélectionné.
• Vous pouvez déplier et replier les éléments en via le triangle à leur gauche.

💡 Vous remarquerez alors que l'élément personnalisé <hello-world> contient un "#shadow-root" incluant le contenu affiché du composant Web.

⚠ Toutes modifications du DOM via l'inspecteur sont locales et temporaires.

LISS

Afin de créer des composants Web simplement, en HTML uniquement, nous utiliserons LISS en mode automatique. LISS offre une documentation en français ainsi qu'un bac à sable contenant divers exemples.

Dans le cadre de ce projet, chaque composant Web est défini par un dossier :
$ROOT/components/$NAME/

Dans ce dossier, le contenu du composant Web est défini par le fichier index.html.

⚠ Respectez la casse et la convention $ROOT/components/$NAME/index.html sinon votre composant ne fonctionnera pas !

1. Lisez la documentation de LISS et visualisez ses examples dans le bac à sable.
2. Modifiez le contenu de <hello-world> afin d'afficher Bonjour le monde ;).
3. Créez un nouveau composant Web <my-hello> affichant Bonjour ;).
4. Ajoutez ce nouveau composant Web à la page Web.
5. Vérifiez que Bonjour ;) s'affiche bien dans la page Web.

Créer des composants Web plus avancés.

Contenu dynamique dépendant des attributs de l'élément

LISS permet d'insérer la valeur d'un attribut de l'élément personnalisé dans son contenu. Plus concrètement, ${$ATTR_NAME} sera remplacé par la valeur de l'attribut $ATTR_NAME.

1. Créer un nouveau composant web <user-desc> contenant :
   • un titre de niveau 2 dont le texte est User ${user-id}.
   • un texte Nom : ${user-name} suivi d'un retour à la ligne (line break).
   • un texte Prénom : ${user-surname} suivi d'un retour à la ligne (line break).
   • un texte Âge : ${user-age} suivi d'un retour à la ligne (line break).
2. En vous inspirant de /index.html, créez une nouvelle page /user/ via un fichier /user/index.html affichant la description d'un utilisateur John Doe de 42 ans.
3. Vérifiez que la page /user/ affiche bien la description de l'utilisateur.

💡 Une telle fonctionnalité est usuellement implémentée en JavaScript, mais LISS permet de cacher cette complexité. Ici, l'attribut n'est pas synchronisé avec le contenu, c'est à dire que si vous modifiez l'attribut via l'inspecteur, sa valeur ne sera pas mise à jour dans le contenu de l'élément personnalisé.

💡 De nombreux framework web fournissent des fonctionnalités équivalentes et bien plus avancées.

Répéter un élément personnalisé.

1. À la fin de la page /user/ ajoutez un titre de niveau 3 Dernières connexions
2. Ajoutez une liste ordonnée (ordered list) contenant 10 éléments (list item) :
   [2020-02-23] <b>localhost</b> <em>1h30</em>
3. Créez un composant personnalisé <user-connexion> pour remplacer les éléments de cette liste. Ses attributs seront date, host, et duration.
4. Vérifiez que la page /user/ affiche bien la liste des dernières connexions.
5. Quel est l'un des intérêts des composants personnalisés exploité ici ?

Hériter d'un élément existant

1. Créez une nouvelle page Web /users/ contenant un tableau dont la première colonne de l'en-tête sera vide, et les suivantes seront ID, Nom, Prénom, Âge.
2. Créez un nouveau composant Web <user-line> qui correspondra à une ligne du tableau et qui contiendra 5 cellules (table data) :
   • une image dont la source sera /assets/img/roles/${user-role}.jpg ;
   • l'identifiant (attribut user-id) ;
   • le prénom (attribut user-surname) ;
   • le nom (attribut user-name) ;
   • l'âge (attribut user-age) ;
3. Vérifiez que la page /users/ affiche bien un tableau vide.
4. Ajoutez 5 lignes au tableau de /users/ en utilisant une balise : <tr is="user-line"> 💡 3 rôles sont définis : admin, user, et disabled.
5. Vérifiez que la page /users/ affiche bien 5 utilisateurs.
6. Observez une ligne via l'inspecteur. Vous remarquerez que cet élément n'a pas de #shadow-root.
7. Intervertissez les colonnes Nom et Prénom.
8. Transformez le contenu de la cellule ID en un lien hypertexte renvoyant sur /user/?id=${user-id}.
9. Vérifiez que le lien hypertexte fonctionne bien en cliquant dessus.
10. Quel est l'un des intérêts des composants personnalisés exploité ici ?

💡 Pour le moment, /user/?id=${user-id} affichera toujours le même utilisateur. Nous verrons par la suite comment générer dynamiquement son contenu en fonction de données locales ou externes.