INTD - Programme 2013/2014

Écrit par Frédéric Simonet.

Partenaire CNAM
Institut INTD : institut national des sciences et techniques de la documentation
Cursus Chef de projet en ingénierie documentaire
Module 1 - 3 heures Technologies Web
Module 2.1 - 3 heures Architecture logicielle et fonctionnelle des CMS
Module 2.2 - 3 heures Atelier Wordpress
Module 2.3 - 9 heures Atelier Joomla
Module 2.4 - 6 heures Atelier Drupal
Responsable Nadia Raïs

Architecture des CMS | Atelier Wordpress | Atelier Joomla | Atelier Drupal | Projets Web

Technologies Web

Objectifs :

  • Distinguer les notions de codage et d'encodage.
  • Prendre connaissance des principaux systèmes de codage.
  • Distinguer les langages de haut niveau et de bas niveau.
  • Appréhender les notions d'environnement d'exécution et de machine virtuelle.
  • Appréhender la notion de modèle d'architecture.
  • Appréhender la notion de couche logicielle.

Résumé du programme :

  • Fondamentaux de l'informatique.
  • Architectures des réseaux.
  • Architecture[s] des applications du Web.

Support : Fondamentaux des technologies du Web

Programme CMS

Résumé du programme :

  • Présentation des CMS.
  • Spécificités de WordPress : un atelier.
  • Spécificités de Joomla : trois ateliers.
  • Spécificités de Drupal : deux ateliers.

Support : Fondamentaux des CMS – ateliers sur Wordpress, Joomla et Drupal

Modèles d'architectures fonctionnels :

Espaces de travail JOOMLA [MAVG]

Groupe 1b : user[01-07].plateforme02-yws.fr

Groupe 02 : user[08-13].plateforme02-yws.fr

Groupe 03 : user[14-19].plateforme02-yws.fr

Espaces de repli [SITD] : user[06-15].plateforme06-yws.fr

Ateliers et tutoriels

Atelier 1.1. Tutoriels sur fondamentaux de Joomla 2.5 :

Remarques sur les extensions de type « Plugin ». — 1. Les Plugins sont des extensions qui s'exploitent à l'intérieur des articles. 2. Certains Plugins , comme Button - Image, Button - Readmore ou Button - Pagebreak, sont préinstallés.

Remarques sur les extensions de type « Component ». — 1. Les composants sont des extensions qui s'exploitent à l'intérieur du Main Content. 2. Certains composants, comme Newsfeeds, Contact ou Weblinks, sont aussi préinstallés.

Commentaire sur les extensions. — En plus des extensions front-office [préinstallées ou installées par l'administrateur], Joomla intègre des extensions back-office sur lesquelles l'administrateur ne peut pas forcément agir.

Atelier 1.2. Mise en place d'un portail sur les espèces menacées (le loup, le lynx, le tigre, etc.).

Ressources : contenu du site et photos du site

Exercice à réaliser :

  • Classer les articles à partir du plan de classement du document.
  • Générer le menu (identifiant et module associé).
  • Mettre en place les liens du menu.

Atelier 2.1. Configuration du contenu principal des pages.

À savoir. — Joomla permet de configurer la présentation du contenu « globalement » : cela signifie que la configuration mise en place s'applique à « toutes les pages » du site. Pour accéder à ce niveau de configuration, il faut cliquer sur le bouton Options affiché par l'écran de gestion des articles Article Manager. (Joomla permet aussi de configurer la présentation du contenu « localement », c'est-à-dire pour « une seule page », en reprenant, spécifiquement, la configuration du lien qui pointe vers la page concernée.)

Exercice à réaliser :

  • Afficher le titre et le descriptif des catégories.
  • Présenter les articles pointés par les liens de type Category Blog dans une seule colonne.
  • Retirer les boutons « print » et « email » des articles.

Atelier 2.2. Gestion des alias.

À savoir. — Joomla génère des alias, aussi bien pour les liens des menus, que pour les catégories et les articles. Ces alias sont utilisés pour générer des URL SEF (Search Engine Friendly), et en conséquence, pour améliorer le référencement des pages.

Remarque. — Pour réécrire les URL, Joomla donne la priorité aux alias des liens qui sont définis dans les menus. Si des catégories (ou des articles) ne sont pas accessibles depuis un menu, Joomla utilise alors les alias des catégories (ou des articles) concernés.

Exercice à réaliser :

  • Préfixer les alias des liens, catégories et articles avec « alias-lien », « alias-cat » et « alias-art ».
  • Retirer du site, sans les supprimer, les liens sur les antennes ; analyser les URL.
  • Retirer du site, sans le supprimer, le lien sur la catégorie « Antennes et télévision » ; analyser les URL.

Atelier 2.3. Exercices sur contextualisation des menus dans le cadre du SEO.

À savoir. — Pour redéfinir un même lien dans un deuxième menu, on utilise la technique de l'« alias ». Cette technique permet de réutiliser les URL initialement générées dans le premier menu et donc, de garantir l'intégrité [unicité] des URL associées à un contenu déterminé.

Remarque. — Joomla fait intervenir trois types de lien fondamentaux : le type Category Blog, le type Single Article et le type Menu Item Alias.

Exercice à réaliser :

  • Générer un nouveau menu « Électricité ».
  • [Re]générer le lien qui pointe vers la catégorie « Électricité » en utilisant la technique de l'alias (cf. tutoriel T02J25. Écran j25_menu_07 : option Menu Item Alias).
  • [Re]générer les trois liens qui pointent vers les trois articles de la catégorie « Électricité » vers le nouveau menu « Électricité ».
  • Contextualiser le menu (cf. tutoriel T04J25. Écran j25_context_07).
  • Répéter l'exercice de contextualisation avec les antennes.

Liens utiles :

Exemple de mise en place : http://www.heifer.org

Atelier 3.1. Personnalisation de la charte graphique (cf. onglet « Atelier “Charte graphique” »).

Atelier 3.2. Gestion des flux RSS.

À savoir. — Joomla donne la possibilité :

  • de générer des flux RSS, avec le module Syndication Feeds ;
  • de lister des flux RSS dans le Main Content avec le composant Newsfeeds ;
  • de lire [afficher] des flux RSS dans le Main Content, toujours avec le composant Newsfeeds ;
  • de lire [afficher] des flux RSS à la périphérie du Main Content avec le module Feed Display .

Remarques sur le module « Syndication Feeds ». — 1. Ce module s'applique aux pages qui affichent une liste d'articles. 2. Ce module ne peut être exploité que si les pages sont pointées par un lien faisant partie d'un menu. 3. Le module s'applique aux types [de lien] Category Blog et Category List.

Exercice à réaliser :

  • Générer un premier flux pour la page « Équipements », un deuxième pour la page « Électricité » et un troisième pour la page « Antenne et télévision ». Attention ! Il n'est pas nécessaire de créer un nouveau module de type Syndication Feeds pour chaque page : la génération d'un seul module [contextualisé] est suffisante. (Le module sera lié à la position « position-6 ».)
  • Lister les trois flux RSS générés en utilisant le composant Newsfeeds. Les flux seront rangés dans la catégorie « Équipements ».
  • Ajouter un lien de type List News Feeds in a Category dans le menu « Conseil sur équipements ».
  • Tester l'affichage des flux dans le Main Content.
  • Tester la lecture des flux dans le Main Content en cliquant sur leur nom [et non pas leur adresse]. (Le clic sur les adresses sert à s'abonner.)
  • Afficher les cinq derniers articles de la catégorie « Équipements » en ajoutant un module de type Feed Display . (Le module sera lié à la position « position-7 ».)

Atelier 3.3. Configuration de la page d'accueil.

À savoir. — La page d'accueil, et son contenu principal notamment, se définit en activant le lien qui pointera vers un article, une catégorie ou un composant : il suffit pour cela de cliquer sur le bouton de la colonne « Home », représenté par une étoile.

Remarque. — L'assignation d'un article, d'une catégorie ou d'un composant à la page d'accueil ne définit celle-ci que partiellement : il faut aussi positionner les modules [et leur contenu] autour du Main Content.

Exercice à réaliser :

  • Ajouter un nouvel article qui sera utilisé comme page d'accueil. L'article s'intitulera « Structure du site de démonstration » et sera lié à la catégorie Uncategorised.
  • Ajouter dans le menu « Conseil sur équipements » le lien « Accueil » [de type Single Article] sur l'article « Structure du site de démonstration ».
  • Remonter le lien en première position en cliquant sur la flèche d'ordonnancement (flèche bleue).
  • Affecter au Main Content de la page d'accueil l'article « Structure du site de démonstration » en cliquant sur l'étoile.
  • Spécialiser [en reprenant la configuration du lien] la présentation de l'article.
  • Retirer du site, sans les supprimer, les modules inutiles. Commencer par identifier les modules concernés et cliquer sur le bouton de la colonne « Status », associé à chaque module.

Annexe. Tutoriel sur installation de Joomla 2.5

Atelier « Charte graphique »

Exercice 1. Premier niveau de personnalisation.

  • Retirer le logo du site : champ Logo de l'écran de configuration du template.
  • Modifier le nom du site : champ Site Title de l'écran de configuration du template.
  • Modifier le slogan du site : champ Site Description de l'écran de configuration du template.

Chemin d'accès aux champs Logo, Site Title et Site Description :

  1. Écran Control Panel. — Menu : Extensions > Template Manager.
  2. Écran Template Manager: Styles. — Colonne : Style ; Lien : Beez2 - Default.
  3. Écran Template Manager: Edit Style. — Zone [panel] : Advanced Options.

Exercice 2. Remplacement du bandeau.

Intégration du nouveau bandeau :

  • Télécharger le nouveau bandeau du site « beez_header_1.png ». (Ressource : bandeau du site.)
  • Afficher l'écran de gestion des images puis créer le répertoire « beez ». (Écran Control Panel. — Menu : Content > Media Manager.)
  • Charger le bandeau sous le répertoire « beez ».

Modification de la feuille de style personal.css :

  • Se reporter à la classe .logoheader qui est définie dans la feuille de style personal.css.
  • Remplacer ../images/personal/personal2.png par ../../../images/beez/beez_header_1.png.
  • Tester la modification.

Chemin d'accès aux feuilles de style :

  1. Écran Control Panel. — Menu : Extensions > Template Manager.
  2. Écran Template Manager: Styles. — Colonne : Template ; Lien : Beez_20.
  3. Écran Template Manager: Customise Template. — Zone [panel] : Stylesheets.

Code source de la règle :

.logoheader
{
background: #0c1a3e URL(../images/personal/personal2.png) no-repeat bottom right;
color:#fff;
min-height:200px;
margin:0em 10px 0 10px !important;
}

Exercice 3. Repositionnement du nom du site.

Feuille de style personal.css :

  • Mettre à jour l'identifiant .logo de l'élément h1.
  • Remplacer padding:0.9em 20px 20px 10px; par padding:1.5em 20px 20px 100px;.
  • Tester la modification.

Code source de la règle :

h1#logo
{
font-family: 'Titillium Maps', Arial;
padding:0.9em 20px 20px 10px;
text-transform:uppercase;
font-weight:normal;
margin-top:0;
}

Exercice 4. Repositionnement du slogan du site.

Feuille de style personal.css :

  • Mettre à jour le sélecteur d'élément span associé à l'identifiant #logo.
  • Remplacer padding-left:50px; par padding-left:0px;.
  • Tester la modification.

Code source de la règle :

#logo span{
color:#fff;
padding-left:50px;
font-size:0.3em !important;
text-transform:none;
font-family:arial, sans-serif
}

Exercice 5. Mise à jour de la typograghie des titres des articles.

Feuille de style personal.css :

  • Remplacer color:#0d4c89; par color:#b43e11; dans la première règle.
  • Remplacer color:#095197; par color:#b43e11; dans la deuxième règle.
  • Tester les modifications.

Code source des règles :

#main .blog-featured  h1
{
color:#0d4c89;
border-top:solid 1px #ddd;
border-bottom:solid 1px #ddd;
font-family: 'Titillium Maps', Arial;
margin-top:-1px !important
}
#main h2 a{color:#095197;}

Exercice 6. Mise à jour du background du menu d'en-tête.

Feuille de style personal.css :

  • Remplacer background:#0d4c89; par background:#b43e11;.
  • Tester la modification.

Code source de la règle :

#header ul.menu li a:hover,
#header ul.menu li a:active,
#header ul.menu li a:focus
{
background:#0d4c89 ;
color:#fff;
}

Projets Web

[sous-domaine].plateforme09-yws.fr :

  • green-it ;
  • social-media-marketing ;
  • souverainete-numerique ;
  • valorisation-mediation-fonds-documentaires ;
  • acces-donnees-recherche ;
  • serious-games ;
  • e-democratie ;
  • objets-connectes ;
  • internet-des-objets ;
  • moocs ;
  • patrimoine-region-ile-de-france ;
  • fablabs ;
  • reduction-empreinte-carbone-pme ;
  • valorisation-musique-jazz.

Liens utiles :

Configuration générale

A. François Patatut et François Delastre ont un compte.

B. Contenu de base

  • Une page d'accueil (article non catégorisé).
  • Une catégorie contenant un article.
  • Un menu de référence : ce menu contiendra tous les liens du site.
  • Un menu principal : ce menu exploitera les liens définis dans le menu de référence.

C. Configuration des espaces de travail :

  • Activation de la fonction de desindexation du contenu.
  • Installation du module Maxi Menu CK. (Patchs (tag : simonet) ajoutés dans ./modules/mod_maximenuck/themes/css3megamenu/css/maximenuhck.php ; la feuille de style du script n'est pas accessible depuis le back-office.)
  • Intégration du français côté front-office.
  • Reconfiguration du fil d'Ariane.
  • Intégration du module de recherche.