TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)

TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles, constitue une application web dans un sens assez large. On parle souvent de web statique car les pages ne peuvent pas réagir aux actions de l utilisateur. Les CMS (Content Managing System) sont des application web, dites dynamiques, qui permettent d organiser du contenu et de le publier en ligne sans que les auteurs, éditeurs,... (c.à.d. ceux qui produisent le contenu) aient à se soucier de la difficulté de la programmation web. Toute la difficulté des langages web (HTML, CSS, PHP, MySQL, mais aussi ASP,.NET,... ) est confié aux développeurs et webmaîtres qui s occupent respectivement de coder l application et de veiller au bon fonctionnement du site. Néanmoins, tous les CMS exposent au moins en partie les couches profondes de l application afin de permettre aux utilisateurs avancés d accomplir certaines tâches techniques. Dans ce TP, forts de nos connaissances de HTML et CSS, on va se placer du côté des auteurs éclairés et on va interagir avec deux CMS différents afin de personnaliser les affichages. Le rôle du développeur sera l objet des prochains TPs. Avant de commencer Firebug Attention : pour ce TP il est fortement conseillé de travailler sous FreeBSD car Firebug y est déjà installé par défaut. 1 Quand on veut étudier des gros documents HTML, lire les sources dans un éditeur peut devenir pénible. Des outils avancés existent pour parcourir et éditer à la volée la structure d un document HTML, le plugin Firebug pour Firefox est l un d entre eux. Exercice 1 Premiers pas avec Firebug Ouvrez la page poemes.html du TP4 dans Firefox et tapez F12, l éditeur Firebug s ouvre 2. Naviguez dans la structure du document jusqu à trouver la balise <link> qui relie la feuille de style, ouvrez-la. Remarquez que les feuilles de style sont affichées de façon plus pratique par l onglet CSS de firebug. 1. Cliquez avec le bouton droit sur la balise <link> et choisissez Supprimer l élément. Que se passe-t-il? 2. Maintenant cliquez sur le bouton Inspecter (ou l icône, selon la version), déplacez la souris dans la page web et cherchez la balise qui contient le texte Mignonne, allons voir si la rose. Cliquez, firebug vous positionne sur la balise ; changez le texte en Quand vous serez bien vieille et le <em> en <u>. (Indice : le bouton Éditer peut vous aider). 3. Tapez à nouveau F12 pour fermer l éditeur, rafraîchissez (Ctrl+R, ou F5, ou par les menus). Observez que les modifications faites par firebug ne sont pas sauvegardées dans votre fichier : firebug fait une copie privée du fichier et travaille sur celle-ci, ce qui vous permet de modifier aussi bien des pages qui ne vous appartiennent pas (essayez avec un site de votre choix). 1 Si vous travaillez sur ordinateur portable, ou si vous êtes allergiques à FreeBSD, vérifiez que vous avez au moins 12Mo libres dans votre espace de stockage et copiez ce lien dans firefox : http://getfirebug.com/releases/firebug/1.3/firebug-1.3.1.xpi 2 Si rien ne se passe, c est que firebug n est pas installé sur votre machine. Dans ce cas, suivez les instructions ci-dessus pour l installer. 1

1 Première partie Claroline Le didel n est rien d autre qu une application web dynamique, il est construit sur la plate-forme Claroline (http://www.claroline.net/). Claroline est un CMS spécialisé dans la gestion de contenus didactiques, parfois on appelle LMS (pour Learning Managment System) ce genre d applications web. Dans cette partie on va étudier comment Claroline permet de gérer les contenus. Connectez-vous sur le didel et allez sur la page du cours. Dans le menu de gauche sélectionnez Groupes mon groupe Documents et liens. 1.1 Générer du HTML Exercice 2 L outil Document et liens Dans cet outil, créez un répertoire à votre nom et entrez-y. Choisissez Créer un document, donnez un nom au document et dans l éditeur décrivez en au moins deux paragraphes la façon dont vous êtes habillé aujourd hui et la dernière musique que vous avez écouté (si les sujets ne vous conviennent pas, vous pouvez en choisir des autres, vous adapterez le reste de l exercice en conséquence). 1. Faites une liste (numérotée ou non ) pour vos éléments vestimentaires, ajoutez du gras et de l italique là ou il vous semble bon. 2. Ajoutez au moins une image (, google images peut vous aider si vous manquez d inspiration) et un lien ( ). 3. Centrez le deuxième paragraphe. 4. Créez un dernier paragraphe contenant les textes Valider HTML et Valider CSS ; collez sur les textes des liens, respectivement, vers http://validator.w3.org/check?uri=referer et http://jigsaw.w3.org/css-validator/check/referer. Sauvegardez. Votre fichier est créé. Vous pouvez le visionner en cliquant dessus. Exercice 3 Editer le HTML Visionnez le code source du document que vous venez de créer. Remarquez que le code produit par Claroline est propre, comprehensible et respecte assez bien les standards ; neanmoins il se sert d attributs qui ne sont pas permis en XHTML Strict tel align="center". Revenez à l outil Documents et liens et éditez le contenu de votre fichier. Cette fois-ci on ne se servira pas de l éditeur WYSIWYG, mais on editera directement le code HTML grâce au bouton. 1. Eliminez l attribut align là où il apparaît, donnez une classe aux paragraphes qui doivent être centrés. D une façon générale, éliminez tous les attributs qui servent à faire de la mise en page. 2. Changez le paragraphe conenant les deux liens Valider... en un <div>. Regroupez dans deux <div> différents la discussion sur votre habillement et la discussion sur la musique. Donnez un id à chaque div. 3. Entourez chaque nom de couleur apparaissant dans votre texte d une balise <span>, donnez une classe à chaque balise span (même classe à même couleur, bien évidemment!). Si vos vêtements n ont pas de couleur, c est qu il y a un problème... remediez-y! Sauvegardez. Visualisez à nouveau le document et cliquez sur le lien Valider HTML, ceci vous redirige vers le validateur w3c. Vous pouvez constater que la page ne valide pas, et pour cause : les entêtes ne contiennent même pas la balise <title>. 2

Exercice 4 Soyons stricts Claroline ne permet pas une gestion assez fine du code HTML généré, on va donc devoir retourner aux vieilles manières. Téléchargez (avec click droit Enregistrer la cible du lien sous... ) le fichier que vous avez crée et ouvrez-le avec votre éditeur de texte. 1. Ajoutez une DTD XHTML Strict (souvenez-vous du squelette qu on vous a donné en cours), complétez les entêtes et éditez le fichier jusqu à ce que ça valide. Vous remarquerez qu en local le lien Valider HTML ne marche plus, pourquoi? 2. Ajoutez une balise <link> qui relie une feuille de style que vous allez aussitot créer. Uploadez le document ainsi modifié dans l outil Documents et liens en vous servant du lien Ajouter un fichier, ignorez d éventuels messages d erreur concernant les images. Visionnez le fichier et cliquez sur le lien Valider HTML, si ça ne valide pas c est que vous avez commis un erreur... revenez à la case de départ! 1.2 Ajouter du style Claroline ne permet pas de gérer la mise en page des documents, pour cette partie on va devoir travailler en local et uploader le résultat dans Documents et liens. Exercice 5 Mettre du style Si ce n est déjà fait, créez le fichier de style relié à la page HTML sur laquelle vous avez travaillé auparavant. À partir de ce moment vous n avez plus droit de toucher au fichier HTML. Faites en sorte que 1. Les éléments qui doivent être centrés soient centrés. 2. Les noms de couleurs s affichent dans la couleur correspondente. 3. Tous les <div> aient une bordure et largeur 40%. En considerant les <div> dans l ordre d affichage, donnez une marge inférieure de 50px au premier, une marge supérieure de 50px au deuxième et une hauteur de 80px au troisième. 4. Faites sortir le troisième <div> du flux d affichage en modifiant son attribut position et essayez de le caser dans l espace blanc entre le premier et le deuxième <div>. Que remarquez-vous? 5. Faites en sorte que les images ne soient plus des éléments inline : chacune doit resider seule sur sa propre ligne. Faites en sorte que chaque image soit centrée sur sa propre ligne. (Indice : allez voir les propriétés display et margin:auto. 3 ) 6. Faites disparaître tout le texte en gras, d abord en utilisant display, ensuite visibility. Quelle est la différence? 7. Faites en sorte que les liens Valider... s affichent comme des éléments d une liste (la propriété display est encore votre amie). Uploadez la feuille de style dans l outil Documents et liens, visonnez la page HTML et validez le CSS en cliquant sur le lien. 2 Deuxième partie Wordpress Wordpress est un CMS spécialisé dans la publication de blogs. Il est bien plus puissant que Claroline et il compte parmi ses utilisateurs le New York Times et Le Monde. Visitez le site http://wpmu.magn.in/wp-signup.php et créez-vous un compte (ne changez pas les options : les valeurs par défaut vont bien), seulement les adresses @etu.univ-paris-diderot.fr et @univ-paris7.fr sont acceptées. Allez consulter votre boîte à courriels et suivez les instructions pour activer votre blog. 3 Ni selfhtml, ni w3schools documentent très bien le modèle par boîtes, les marges collapsables et margin:auto ; pour une reférence complète on pourra consulter http://www.w3.org/tr/css21/visudet.html. 3

2.1 Créer du contenu Suivez le lien View your site ou, si vous êtes déjà loggués dans le panneau d administation, cliquez sur le bouton Visit site tout en haut. Ceci est votre blog, pas bien rempli pour l instant : il contient un billet et un commentaire. On va commencer par ajouter des billets à ce blog. Exercice 6 Votre premier billet Grâce aux liens dans le menu de droite, logguez-vous (le mot de passe vous a été envoyé par mail) ou, si c est déjà fait, allez dans Site admin. Ceci est le panneau d administration de Wordpress, il vous permet de gérer vos billets, de modifier l affichage, d ajouter d autres auteurs à votre blog et fournit plein d autres fonctionnalités qu on vous invite à explorer aussi en dehors des TPs. Pour cette partie on va se limiter à l édition des billets : le menu Posts (post = billet) est votre ami. 1. Mettez à la poubelle le billet généré automatiquement Hello world. 2. Créez un nouveau billet décrivant votre habillement, créez-en un autre qui parle de musique. Ajoutez des images ( ), des liens, du gras, des listes comme pour l exercice 2. Pas la peine de créer les liens Valider... : Wordpress s en charge pour vous! 3. Publiez 4 les billets. Sans vous délogguer, sortez du panneau d administration pour aller voir le résultat dans le blog. Cliquez sur le lien Valid XHTML pour vérifier que Wordpress a bien généré du code valide. Explorez le code source de la page pour vous faire une idée du code HTML généré ; étant donnée la complexité du code, firebug vous rendra un grand service! 4. Revenez au panneau d administration et éditez le deuxième billet en centrant le texte. L onglet HTML vous permet d éditer directement le code HTML du billet, allez voir le code et regardez quelle technique Wordpress utilise pour centrer le texte. Cette technique respecte-t-elle les standards? Vous vérifierez à l aide du lien Valid XHTML. 5. En utilisant l onglet HTML, mettez des <span> autour des noms de couleurs et donnez des classes appropriées. 6. Vous pouvez ranger vos billets par catégories 5. Créez au moins une catégorie TP et assignez-y tous les billets qu on vous demande de créer en TP ; créez au moins une autre catégorie et assignez-y un billet. 7. Pour ceux qui vont trop vite Worpdress intègre aussi un concept de pages : une page n est rien d autre qu un billet doté d un lien permanent dans la barre des menus du blog. À l aide de l outil Pages du panneau d administration, créez une page qui parle de vous. 8. Pour ceux qui vont vraiment trop vite Explorez les outils Media et Links. 2.2 Donner de la forme Si la gestion du contenu dans Wordpress est simple, intuitive et XHTML Strict (!), il en est pas de même pour la gestion de la forme. Wordpress intègre un concept de thèmes et de widgets : les premiers contrôlent l affichage global du site, les deuxièmes contrôlent le contenu du menu. Exercice 7 Gestion utilisateur de l affichage Dans l outil Appearence, sélectionnez Themes, changez le thème d affichage et allez vérifier le résultat. Revenez à Appearence et sélectionnez Widgets, à l aide de la souris composez votre menu en traînant vos widgets dans Sidebar, n oubliez pas d inclure le widget Meta. Allez voir le résultat. Si vous souhaitez revenir aux widgets par défaut, il vous suffit de vider à nouveau la boîte Sidebar. 4 La boîte Publish vous permet de sauvegarder un brouillon Save Draft, prévisualiser Preview ou publier Publish un billet 5 La boîte Categories sur la droite vous permet de créer des catégories et d y assigner des billets 4

Tout ça est bien pratique, mais très décevant pour nous, experts de CSS. Les développeurs de Wordpress ont estimé, probablement pas à tort, que la gestion fine du style d affichage est une tâche qu il faut réserver aux développeurs de thèmes et plugins. Pour vous éviter la difficulté d aller bidouiller avec le code PHP de Wordpress, vos enseignants ont développé un plugin, nommé (ironiquement?) Buddhist Gardener, qui vous permet d aller retoucher les feuilles de style des pages. Ce plugin est expérimental, n hésitez pas à nous signaler tout comportement qui ressemble à un bug. Exercice 8 Gestion avancée de l affichage Assurez-vous que le thème IO2 soit le thème actif. Dans l outil Appearence, sélectionnez Buddhist Gardener. Un éditeur de css s affiche, pas très différent de l éditeur de billets, de fait le concept de Buddhist Gardener est très simple : une feuille de style est la même chose qu un billet! Créez un nouveau style qui : 1. Affiche tout le texte en sans-sérif 14pt, 2. donne la bonne couleur aux <span> que vous avez mis dans vos billets, 3. fait en sorte que toutes les images contenues dans un billet (et seulement celles-ci) soient seules sur leur propre ligne et centrées. (Indice : servez-vous de firebug pour répérer les <div> qui contiennent des billets, identifiez quelle classe 6 est commune à tous les billets). Validez votre code à l aide du bouton dans la boîte Actions. Donnez un nom à la feuille de style, ajoutez une description, sauvegardez et allez voir le résultat. Exercice 9 Des styles en cascade On va maintenant étudier comment se comporte une page à laquelle on applique plusieurs feuilles de style (en cascade). 1. Créez une autre feuille de style qui: affiche tout le texte en sérif 10pt, contienne la directive span{color:black;}, donne une couleur de fond de votre choix au billet qui parle de votre habillement, fait apparaître des bordures quand la souris passe sur le billet qui parle de musique, fait disparaître un widget de votre choix. 2. Sauvegardez et allez voir le résultat. Regardez le code source à l aide de firebug et repérez les balises <link> qui introduisent des feuilles de style, notez bien l ordre. Revenez à l outil Appearence, cliquez sur Choix des styles et changez l ordre des feuilles de style. Allez voir le résultat. Que remarquez-vous? 3. Ajoutez une feuille de style contenant la directive span{color:black!important;}. Que remarquez-vous? Exercice 10 Pour ceux qui vont vite Créez encore une feuille de style qui 1. déplace le menu de droite à gauche, 2. numérote les billets dans une page, 3. donne place à votre imagination! 6 Vous remarquerez que Wordpress assigne plusieurs classes à une même balise, ceci est possible grâce à la syntaxe <div class="classe1 classe2 classe3">. 5