Archives

Programme Technologies Web

• Fondamentaux de l'informatique.
• Architectures des réseaux.
• Architecture[s] des applications du 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.

Programme CMS

Présentation des CMS :

• Architecture et technologies des CMS (modèles d'architecture et langages de programmation).
• Administration des CMS (installation/suppression et migration/sauvegarde).
• Architecture fonctionnelle des CMS.

Ateliers :

• Un Atelier WordPress.
• Trois ateliers Joomla.
• Deux ateliers Drupal.

Tutoriels WordPress 3

• T01-W3 : Configuration générale du site
• T02-W3 : Personnalisation du header
• T03-W3 : Publication de contenu de type Page
• T04-W3 : Publication de contenu de type Post
• T05-W3 : Indexation des billets par mots clés
• T06-W3 : Classement des billets par catégorie
• T07-W3 : Configuration du menu principal
• T08-W3 : Intégration du plugin Post-tab
• T09-W3 : Intégration du plugin Nextgen
• T10-W3 : Gestion des widgets et des permaliens

Tutoriels Joomla 2.5

[Atelier 1] Tutoriels sur fondamentaux de Joomla 2.5 :

• T01-J25 : Gestion des contenus
• T02-J25 : Gestion des menus
• T03-J25 : Gestion des photos
• T04-J25 : Contextualisation des menus
• T05-J25 : Intégration du plugin Tabs&Slides

Remarques sur extensions de type « plugin » : 1. Les plugins sont des extensions qui s'exploitent à l'intérieur des articles. 2. Certains plugins, comme Image, Readmore ou 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 (suite et fin)] Mise en place d'un portail sur les espèces menacées (le loup, le lynx, le tigre, etc.).

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] 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 (suite)] 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 (suite et fin)] 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.
• [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.
• Répéter l'exercice de contextualisation avec les antennes.

[Atelier 3] Personnalisation de la charte graphique : cf. onglet « Atelier “Charte graphique” ».

[Atelier 3 (suite)] 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 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 (suite et fin)] 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.

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 ».
• 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.

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.

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.

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.

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.

Tutoriels Drupal 7

• T01-D7 (taxonomie) : Structuration macro des pages
• T02-D7 (modèles de contenu) : Structuration micro des pages
• T03-D7 (contenu) : Enregistrement des contenus et assignation des pages
• T04-D7 (menus-taxonomie) : Génération des menus
• T05-D7 (menu principal) : Reconfiguration générale
• T06-D7 (contenu) : Page statique/Bloc de contenu contextualisé
• T07-D7 (thème) : Installation et configuration des thèmes
• T08.1-D7 (module Panels) : Installation du module
• T08.2-D7 : Paramétrage des pages personnalisées
• T08.3-D7 : Intégration des Mini Panels
• T08.4-D7 : Intégration de la fonction Variant
• T09.1-D7 (module Views) : Installation du module
• T09.2-D7 : Paramétrage des vues
• T09.3-D7 : Formatage/Filtres/Fonctions de tri
• T09.4-D7 : Intégration des blocs/Panels/Mini panels

Projets Web (sous-domaines)

• 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.

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. (Feuille de style non accessible le back-office.)
• Intégration du français côté front-office.
• Reconfiguration du fil d'Ariane.
• Intégration du module de recherche.