Prénom :
Nom :
Email :

Sujet de TP

On repart des installations WordPress (WP) disponibles.  Le but est de vous familiariser avec la création de document(s) Web, par la manipulation directe, en suivant les concepts vus dans le cours. Pour cela, vous allez utiliser les outils graphiques offerts par Wordress ainsi que l’édition manuelle de manière à constater les avantages et limitations de cet outil. Vous utiliserez aussi l’outil « Developper Tools » de votre navigateur.

Le TP comporte 4 principales étapes: la création d’un document Web, la modification de son contenu, la modification de sa présentation et, finalement, nous verrons comment le rendre plus dynamique.

Cette page est à la fois le sujet du TP et le document Web utilisé comme support des exercices !

ginko-separator_blue

Etape 1 – Création de document Web

E1.A. Créez une nouvelle page WordPress vierge sur votre propre compte projet http://enabled.fr/projetX.

E1.B. Récupérez le contenu source de cette page ici et copiez le dans la page vierge que vous venez de créer.

E1.Q1. Quel est le mode d’édition de page WordPress approprié pour faire cette copie (« Visuel » ou « Texte ») ?

E1.Q2. De quel type est le contenu source de la page entré dans le mode « Texte » ?

E1.C. N’oubliez pas de cliquer sur « Mettre à jour » dans le bandeau de droite du mode édition de WordPress pour sauvegarder et publier votre nouvelle page.

E1.Q3. Venez-vous de créer un Document Web ? Si non, pourquoi ? Si oui, quel est son périmètre ?

E1.Q4. Faire un diagramme très simple sur papier du contenu hypermedia que nous venons de créer, en représentant comme dans le cours le périmètre du document, les fichiers qui le composent, les liens vers ses ressources, et les hyperliens vers autre(s) document(s). Il n’est pas indispensable de représenter les balises où les adresses. Aidez-vous de la vue « Texte » si nécessaire.

E1.Q5. S’agit-il du même document Web que le document source que vous avez copié (un seul est unique document) ou de deux documents bien distincts ?

Une vidéo d’exemple incluse dans la page (… c’est un document Hypermedia)

Etape 2 – Evolution de document Web: modification du contenu

Prérequis: vous êtes en mode édition de page dans WordPress, sur la page que vous avez créée à l’étape 1.

E2.A. Modification avec l’éditeur visuel WordPress: ajoutez ci-dessous (juste avant étape 2.B) une image disponible sur votre ordinateur que vous allez « uploader » dans WordPress grâce au bouton « Ajouter un média » visible dans le haut à gauche du mode édition. L’image doit être centrée sur la page.

Ajoutez l'image à la place de ce bloc <pre>...</pre>

E2.B. Modification avec l’éditeur texte (HTML): basculez en mode « Texte » avec l’onglet en haut à droite du mode édition et utilisez la balise <img src= »URL »/> pour inclure dans votre page juste en dessous de ce paragraphe 2.B (mais sans l’ajouter à votre projet WordPress comme à l’étape 2.A) une image disponible ailleurs sur le Web. Vous devez donc remplacer l’adresse « URL » dans la balise img par l’URL d’une image déjà en ligne sur un autre site.

Ajoutez l'image à la place de ce bloc <pre>...</pre>

E2.Q1. En ajoutant ces images à la page, avez-vous créé un nouveau document Web ?

E2.Q2: Les modifications que vous venez d’effectuer sont-elles durables (si on recharge la page) ? Pourquoi ? Où sont enregistrées les modifications que vous avez effectuées ?

Etape 3 – Evolution de document Web: modification de la présentation

E3.Q1. Pourquoi le design du contenu de cette page, une fois copié sur votre site projet WordPress, diffère-t-il du design original de la page sur le site du cours (alors que vous aviez directement copié tout le code HTML source de la page) ?

E3.Q2. Quelles sont les informations de présentations de cette page rendues visibles par WordPress en mode « Texte » ?

E3.Q3. Sont-elles toutes accessibles et/ou modifiables en mode Texte ? Pouvez-vous identifier un type d’élément de la page dont la présentation n’est pas modifiable directement dans l’éditeur (Visuel/Textuel) de WordPress ?

E3.A. Manipulation de l’outil « Developper Tools » de Chrome (ou Firefox) pour modifier temporairement la présentation de votre document. Trouvez l' »Outil développeur » ou « Developper Tools » dans les menus de votre navigateur et utilisez-le pour changer le style (CSS) des titres (h1, h2, h3, …) du document.

E3.Q4.Les modifications que vous venez d’effectuer sont-elles durables (si on recharge la page) ? Pourquoi ?

E3.B. Modification des feuilles de style (CSS) du thème utilisé pour modifier définitivement la présentation de votre document. Pour cela il faut changer « en dur » la feuille de style principale du thème utilisé par votre site (par défaut thème « Twenty Fifteen »). WordPress intègre l’outil nécessaire pour faire cette modification. On va ajouter une modification uniquement pour les titres de niveau h1 grâce au code CSS suivant:

h1 {
  color : blue
}

Bilan étapes 2 et 3: vous avez réalisé une évolution de document Web, après sa publication, puis re-publié ce document Web. ,Mais attention, seules les modifications en profondeur de contenu et de style (étapes E2.A, E2.B, E3.B) sont durables car ce sont les fichiers sources (HTML, CSS) du document Web qui sont modifiés sur le serveur ! Dans les autres cas de modification (manuelle) du DOM sur votre ordinateur vous modifiez uniquement la version locale à votre navigateur du document, qui est volatile et en mémoire seulement sur votre ordinateur

Etape 4 – Vers un Document Web évolutif (dynamique)

E4.A. On va maintenant modifier le contenu du document, et pas seulement sa présentation, via le DOM. On utilise toujours l’outil « Developper Tools » du navigateur. Vous allez supprimer purement et simplement un élément en entier de la page. Ici on montre avec un titre, mais vous pouvez le faire pour n’importe quel élément. Vous pouvez constater que la modification disparait dès que vous rechargez la page, comme pour l’exercice précédent.

Bilan d'étape: il s'agit là encore d'une modification du document en mémoire, pas de sa "source". Si vous rechargez la page, le DOM est recréé depuis la source HTML sur serveur, et vos modifications sont perdues. C'est un comportement normal et attendu.

E4.B. On va utiliser le même principe de modification du DOM pour rendre le document affiché dynamique par l’adjonction de code Javascript. Ce sera maintenant ce code qui va modifier automatiquement le DOM et pas vous manuellement avec l’outil Developper Tools.

  • Vous n’avez pas à écrire le code Javascript, il est déjà disponible à cette adresse. Mais vous devez l’ajouter dans la partie en tête (<header>) de la page du TP pour qu’il soit chargé par votre navigateur.
  • Problème: WordPress ne vous permet pas de modifier le header d’une page (limite de l’outil). On contourne le problème en modifiant directement le header du thème utilisé par votre installation Worpress. Cf. étapes ci-dessous.
  • Après avoir sauvegardé votre thème, si vous rechargez la page, le script sera chargé avec (invisible – sauf avec l’outil Developper Tools).

E4.C. Le formulaire ci-dessous fait appel au script qui est maintenant lié à ce document Web. Il est appelé quand vous cliquez sur « Assigner » et va modifier le DOM de la page dynamiquement (vos nom, prénom et adresse email sont injectés directement dans le document (allez voir le haut de la page Web après avoir complété le formulaire). Nous avons donc maintenant un document Web vraiment dynamique.




Bilan d'étape: on parle de Document Web dynamique (ou évolutif) car le document est lui-même capable de se modifier en fonction [des actions] des utilisateurs (cf. Cours #1). Dans ce dernier exemple, ce n'est pas un nouveau document