Développement de sites collaboratifs avec Drupal

Jour 1Marc-Gabriel Vallières

mvallieres@cmaisonneuve.qc.ca

Ressources du cours:http://profs.cmaisonneuve.qc.ca/mvallieres/Drupal

Version janvier 2014

Plan

• Jour 1 : Développement avec Drupal

1. Introduction aux systèmes de gestion de contenu2. Génération d'un site Drupal3. Choix d'un thème4. Développement d'un site web de base5. Recherche de contenu6. TP : développement d'un site de diffusion d'information

pédagogique7. Utilisation des forums de discussion

Plan• Jour 2 AM : Fonctions de webmestre

1. Gestion des utilisateurs et des droits2. Gestion des menus et des blocs3. Définition et gestion des types de contenus4. Gestion des forums de discussion

1. Types de contenus spécialisés2. Gestion des téléchargements et fichiers de médias3. Exemple 1 : développement d'un wiki4. Exemple 2 : pages de présentation des étudiants5. TP : Ajout de fonctions collaboratives au site du jour 1...

• Jour 2 PM : Sites web collaboratifs

Thème 1

Jour 1 – thème 1

Les systèmes de gestion de contenu

Le web traditionnelHTML

(+ CSS, JavaScript, applets Java, Activex, etc.)

ou

Logiciel de génération de pages

(MS Frontpage, MS Expression Web,

Dreamweaver, etc.)

Site web statique

Jour 1 – thème 1

Les systèmes clients-serveur

Jour 1 – thème 1

Pages web générées en temps réel

Programme de génération de pages

(php, .NET, etc.)

Côté serveur Côté client

Base de données

Que fait-on si ?

• Le contenu est changeant dans le temps (sites des organismes de presse, etc.) ?

• Le site doit être participatif (les utilisateurs sont des fournisseurs de contenu, doivent pouvoir ajouter des commentaires, modifier des contenus d'autres utilisateurs, etc.) ?

• Il faut gérer les accès (différents utilisateurs doivent avoir accès à des infos différentes ou effectuer des actions différentes) ?

Jour 1 – thème 1

Le contenu est temporel ?

Jour 1 – thème 1

Le site doit être interactif ?

Jour 1 – thème 1

Le contenu change selonl'utilisateur ?

Jour 1 – thème 1

On devait autrefois :• Développer des applications serveurs (MS

Visual Studio / .NET, PHP, Java, etc.)ou

• Utiliser des applications spécialisées : babillards (phpBB, etc.) blogs (WordPress, etc.) wikis (TikiWiki, MediaWiki, Pimki, TomBoy,

etc.) documents collaboratifs (GoogleDocs)

Jour 1 – thème 1

Les systèmes de gestion de contenu• Permettent le développement rapide d'applications web par les

spécialistes du contenu, plutôt que par des informaticiens• Le contenu peut être dynamique (en temps réel)• Le contenu peut être participatif (plusieurs «fournisseurs» ou

sources de contenu)• Les utilisateurs peuvent être authentifiés au besoin• Le contenu / les actions peuvent différer par classe d’utilisateurs• Le contenu peut être de multi-formats (pages web,

documents .doc/.pdf/.xls/etc., graphiques, photos, vidéo, audio...)

• Des modules peuvent, dans certains cas, être ajoutés pour des fonctions spécialisées (gratuiciels, modules commerciaux, développement personnalisé)

• Certains logiciels de gestion de contenu peuvent être interfacés par des systèmes informatiques d'entrepriseJour 1 – thème 1

Deux types• Les plate-formes («frameworks») de gestion

de contenu (MS Sharepoint et Drupal)- Incluent les fonctions de base- Permettent l'ajout de fonctions personnalisées- Prévoient des interfaces avec divers SGBD- Permettent de développer des interfaces avec des systèmes informatiques d'entreprises (modèle MVC, par exemple)

• Les logiciels de gestion de contenu- Ne comportent que des fonctions de base, sans ajout de fonctions personnalisées

Jour 1 – thème 1

Quelques produits• MS Sharepoint : produit commercial, orienté «entreprise»

et «documents», autant pour l’intranet, l’extranet que les sites webs publics – le contenu est généré par Office. L'infrastructure doit être gérée par des spécialistes. Requiert des ressources matérielles importantes.

• Drupal : logiciel libre et enfichable. L'installation et la gestion peuvent être effectuées par des non-spécialistes, si aucun développement n'est requis. Ne demande que peu de ressources matérielles.

• Quelques logiciels orientés web : - La suite WordPress (blogs) + bbPress (babillards) +

BuddyPress (réseautage social)…- TYPO3, Joomla! (et son prédécesseur Mambo), etc.

Jour 1 – thème 1

Drupal vs Moodle vs LÉA• LÉA s'adresse aux utilisateurs des cours-

groupes d'un même prof à une seule session; les utilisateurs doivent avoir un accès Omnivox.

• Moodle est orienté cours à une seule session; les utilisateurs doivent aussi avoir un accès au système. La persistance des informations requiert des manipulations.

• Drupal n'a aucune restriction par défaut; le développeur peut définir les accès qu'il désire.

Jour 1 – thème 1

Usages pédagogiques de Drupal

• Site permanent pour un cours• Site pour une séquence de cours• Site d'activités non reliées à un cours / groupe

d'intérêts (SIG) (c.f. un groupe des utilisateurs de Linux)

• Site d'aide par les pairs / Centre d'aide virtuel (c.f. un forum de discussion sur le langage de programmation C#)

Jour 1 – thème 1

• Site où les étudiants construisent une base de connaissances de façon collaborative (c.f. une banque d'oeuvres d'art commentées)

• Plus de latitude pour gérer les accès (c.f. les étudiants du cours 201 d'un programme donné pourraient conserver un accès aux notes du cours 101)

Jour 1 – thème 1

Avantages face aux sitesweb traditionnels

• Possibilité d'interactions (c.f. forums de discussion)

• Possibilité de sites collaboratifs (c.f. wikis)• Plus aisé pour l'enseignant de conserver les

acquis des sessions précédentes (on ne recommence pas à chaque session...)

• Facile de gérer les accès à des sections de cours sans ajouter ou retirer l'information

Jour 1 – thème 1

Eh oui! Y'a des inconvénients...• L'accès à certaines fonctions par les étudiants

pourrait ouvrir une boîte de Pandore... (c.f. l'accès au multimédia, vidéo, etc. donne accès au HTML complet...)

• Les nouvelles fonctions de «modérateur» de l'enseignant peuvent devenir fastidieuses... (il y a des «trolls» même au cégep!)

• Peu de documentation claire disponible; il faut être un peu «hacker» pour bien se débrouiller!

Jour 1 – thème 1

Questions à se poser avantde commencer...

• Quelles fonctions veut-on utiliser ? Si une seule fonction est nécessaire (ou deux...), il est plus simple

d'utiliser des logiciels spécialisés (blog, wiki, babillard). On peut s'abonner à un service gratuit (blogspot...) où la gestion à effectuer sera minimale.

Exemple: http://juliepellerin.blogspot.com• Veut-on prévoir une croissance du site ? Si on prévoit ajouter éventuellement de nouvelles fonctions

requérant un peu de programmation, un système de gestion de contenu plus sophistiqué sera nécessaire.

Jour 1 – thème 1

Thème 2

Jour 1 – thème 2

Génération d'un site Drupal

Matériel et logiciels requis• Serveur Linux, Windows ou Mac• Service web Apache (recommandé) ou MS-IIS• Interpréteur de langage PHP• Base de données MySQL (recommandée)• Nom de domaine (si un accès web est requis)

• Au collège : pré-installé par le Service informatique (Jérôme Charaoui)

• Fournisseurs de services : parfois pré-installéJour 1 – thème 2

Accès au site test

• Votre URL et le mot de passe du webmestre vous ont été distribuéshttp://pfmnn.aegir.cmaisonneuve.qc.ca

• Ce site demeurera actif pour environ un mois• Communiquez avec Jérôme Charaoui si vous

désirez le convertir en un site permanent pour votre département ou pour un projet spécial (aide@cmaisonneuve.qc.ca)

Jour 1 – thème 2

La page d'accueil du site

Jour 1 – thème 2

Le menu du webmestre

Jour 1 – thème 2

N'apparaîtra pas pour les autres utilisateurs

Thème 3

Jour 1 – thème 3

Choix d'un thème

Thèmes disponibles1. Choisissez un ou plusieurs thèmes dans la

bibliothèque de Drupal :

http://drupal.org/project/themes

2. Demandez au Service de l'informatique de l'ajouter à votre site.

3. Activez le thème désiré avec l'onglet «Apparence» du menu du webmestre

Il est possible de développer votre propre apparence en choisissant le thème «Zen».

Jour 1 – thème 3

Paramètres du site1. Activez le thème désiré avec l'onglet «Apparence» du

menu du webmestre2. Entrez le nom du site et le slogan avec le lien «SYSTÈME >

Informations» de l'onglet «Configuration» du menu du webmestre

3. Chargez le logo du site avec le lien «Paramètres» du thème actif dans l'onglet «Apparence» du menu du webmestre

Jour 1 – thème 3

Paramètres du thème actifAttention ! Les paramètres dépendent

du thème choisi !

• Schéma de couleur

• Affichage de certains éléments

• Chargement du logo

• Chargement de l'icône («favicon»)

(des logos et un favicon sont sur la page des ressources du cours)

Thème 4

Jour 1 – thème 4

Développementd'un site

Les types de contenu

• Une nouvelle est un court texte dont le résumé apparaîtra sur la page d'accueil du site

• Une page de base est une page web qui apparaîtra ou non dans un menu. Si elle n'est pas accessible par un menu, elle pourra être affichée soit par un hyperlien dans une autre page, soit par la fonction «Recherche»

Jour 1 – thème 4

Création d'une page de base

• Une page de base est une page web qui apparaîtra ou non dans un menu. Si elle n'est pas accessible par un menu, elle pourra être affichée soit par un hyperlien dans une autre page, soit par la fonction «Recherche»

Jour 1 – thème 4

• Dans le bloc «Navigation», choisissez «Ajouter du contenu» et le type «Basic page»

• Donnez un titre à la page (requis)

Jour 1 – thème 4

Jour 1 – thème 4

Jour 1 – thème 4

Les outils de mise en page sont les mêmes que dans un traitement de textes...

Jour 1 – thème 4

Les outils de liens permettent de créer des hyperliens externes et internes...

Si la page doit figurer au menu

Jour 1 – thème 4

Création d'une nouvelle

• Les nouvelles sont habituellement affichées sur la page d'accueil du site (on pourra configurer la page d'accueil différemment!)

• Dans le bloc «Navigation», choisissez «Ajouter du contenu» et le type «Article»

• Donnez un titre à la nouvelle (requis)

Jour 1 – thème 4

Le résumé de l'article(pour la page d'accueil)

Jour 1 – thème 4

Les commentaires des utilisateurs

Jour 1 – thème 4

La publication de la nouvelle

Jour 1 – thème 4

Numéro de la page• Chaque page et/ou nouvelle a un numéro unique

qui figure dans l'URL de la page

Jour 1 – thème 4

Liste des pages et des nouvelles• Le webmestre a accès à une liste des pages

par son menu «Contenu»

Jour 1 – thème 4

Thème 5

Jour 1 – thème 5

Recherche de contenu

• L'indexation s'effectue en arrière-plan selon un horaire prédéterminé

• Valeur par défaut : aux trois heures!

Jour 1 – thème 5

• L'indexation peut être forcée par le webmestre au moyen de l'élément «RECHERCHE ET MÉTADONNÉES > Paramètres de recherche» du menu «Configuration»

Jour 1 – thème 5

• L'intervalle d'indexation peut être modifiée par le webmestre au moyen de l'élément «SYSTÈME > Cron» du menu «Configuration»

Jour 1 – thème 5

Thème 6

Jour 1 – thème 6

Travail pratique :développement d'un site de diffusion

d'information pédagogique

(le document est sur la page de ressources du cours)

Thème 7

Jour 1 – thème 7

Utilisation des forums de discussion

Jour 1 – thème 7

Dans la liste de forums suivante :

«Généralités, règlements, annonces» et «Programmes informatique» sont des conteneurs de forums, alors que «Règlements», etc. sont des forums.

Création d'une structure de forums• Dans le menu «Structure» du webmestre,

choisissez l'élément «Forums»• Utilisez les liens «Ajouter un conteneur» et

«Ajouter un forum» pour créer la structure• En ajoutant un forum, l'élément «Parent»

permet de le classer dans un conteneur• Affichez les poids des lignes pour trier les

conteneurs et les forums (les poids des conteneurs et des forums sont indépendants)

Jour 1 – thème 7

Création d'un sujet de discussion• Pour accéder aux forums : lien «Forums» dans

le bloc «Navigation»

• Une fois la structure de forums créée par le webmestre, tout utilisateur (qui en a le droit) peut créer un nouveau sujet de discussion avec le lien «Ajouter un nouveau sujet de discussion»

Jour 1 – thème 7

Écueils dans les forums• Les «trolls»: provoquent la polémique; ils

aiment bien foutre le bordel!• Les «flooders»: ils sont très volubiles, mais

presque toujours hors sujet; ils envoient le même message dans tous les forums; ça peut aller jusqu'à l'inondation pour faire planter le réseau (déni de service).

• Les «lurkers»: ils lisent tout mais ne participent jamais; ils représentent un défi pédagogique pour l'enseignant!

Jour 1 – thème 7