TP 1 : technologies côté client

Objectifs pédagogiques du TP

Outils

Préambule

Créez un répertoire "TP1", dans lequel vous archiverez tous les fichiers à rendre dans ce TP. Créez un deuxième répertoire temporaire, dans lequel vous effectuerez les manipulations demandées (merci de ne placer dans "TP1" que les fichiers dont le rendu est demandé).

HTML et XHTML

Ouvrez, éditez et corrigez cette page Web. Itérez jusqu'à ce qu'elle soit sémantiquement correcte et valide en XHTML 1.0.

Indications

  1. Ajout de liens internes

    Notion de lien vers un fragment

    Définition : Un fragment est un élément ou un sous-arbre constitué par un élément et ses sous-éléments. Lorsque'un fragment est identifié par l'attribut id d'un élément, on peut définir des liens vers ce fragment, plutôt que la totalité de la section qui le contient. Pour cela, il suffit de rajouter le caractère "#" (dièse) à la fin de l'URL, suivi de l'id de l'élément visé. Cela indique au navigateur qu'il doit défiler dans la page pour que cet élément se retrouve en haut de l'écran (si possible).
    Exemple : l'ancre de lien <a href="#fragments"> permet de se positionner dans cette section (voir code source de la page).

  2. Vérifiez l'affichage de ce document sur les navigateurs installés sur votre machine et validez ce document avec le validateur du W3C : http://validator.w3.org/.
  3. Éditez votre document avec XMLSpy uo Notepad++ et validez-le avec l'outil de validation de XMLSpy puis avec celui du W3C. Corrigez les erreurs jusqu'à obtenir un document valide.
  4. Sauvegardez ce fichier dans un répertoire "XHTML" de "TP1".

CSS

Création

Dynamisation de l'interface avec JavaScript

Dans cette partie, vous allez faire en sorte de n'afficher que la section demandée par l'utilisateur. Pour cela :

XML

Pour commencer, récupérez le contenu du répertoire contenant les fichiers de ce premier TP, et copiez-le sur votre compte. Ouvrez les fichiers CV_a_corriger.xml et CV.dtd dans XMLSpy.

À l'aide des outils de vérification syntaxique et grammaticale, corrigez le document XML pour qu'il soit bien formé et valide par rapport à sa DTD (n'oubliez pas de ré-enregistrer ce document après chaque modification).

Une fois ce document bien formé et valide, renommez-le en "CV.xml", et remplissez-en la structure avec les mêmes données que celles du document XHTML de la question précédente. Une fois cette manipulation faite, vérifiez que le document est toujours bien formé et valide et sauvegardez-le avec sa DTD dans un répertoire "XML".

DTD

Recopiez la DTD sous un autre nom, et modifiez cette copie pour que :

XSL

SVG

Créez un dossier "SVG" dans votre répertoire de rendu de TP, dans lequel vous travaillerez pour cette question. À l'aide du pointeur de W3Schools sur SVG, utilisez l'outil de création SVG de XMLSpy pour réaliser une figure simple : créez un nouveau document, et choisissez le type SVG. Insérez un ou plusieurs éléments disponibles dans la palette "Elements" (à droite) dans la partie taggée "your graphic here" de votre document.

Visualisez le résultat avec Firefox (IE n'intègre pas en standard de visualisateur SVG...).

Faites ensuite une nouvelle page Web dans laquelle vous incluerez votre document SVG. Modifiez votre document pour qu'il représente un échiquier semblable à l'image ci-dessous. Rajouter à votre page le texte qui s'impose et faites en sorte que l'échiquier se redimensionne si vous redimensionnnez la page.
echiquier vide

JavaScript

Rajoutez un bouton qui lance une fonction pour positionner dynamiquement les pièces comme sur l'image suivante.
echiquier rempli
Les images contenant les pièces se trouvent dans le sous-répertoire "pieces" du dossier contenant cette page.

Rendu du TP

Attention :
Vérifiez bien que les lien entre les différents fichiers que vous allez rendre ne font pas référence à votre système de fichiers propre.
Pour la première partie : inutile de rendre vos fichiers HTML intermédiaires : tout ce qui n'est pas en XHTML ne sera pas noté

Valid XHTML 1.0 Transitional