Download - Version janvier 2014
![Page 1: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/1.jpg)
Développement de sites collaboratifs avec Drupal
Jour 2Marc-Gabriel Vallières
Ressources du cours:http://profs.cmaisonneuve.qc.ca/mvallieres/Drupal
Version janvier 2014
![Page 2: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/2.jpg)
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
![Page 3: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/3.jpg)
Plan
• Jour 2 : Fonctions de webmestre1. Gestion des utilisateurs et des droits2. Gestion des menus et des blocs3. Gestion des téléchargements et fichiers de médias4. Définition et gestion des types de contenus
5. La modération des forums de discussion6. Exemple 1 : développement d'un wiki7. Exemple 2 : pages personnelles des étudiants8. Aperçu : la programmation !9. TP : Ajout de fonctions collaboratives au site du jour 1...
• Jour 2 : Sites web collaboratifs
• Retour sur quelques points du jour 1
![Page 4: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/4.jpg)
Jour 2 - Thème 0…
Jour 2 – thème 0
Retour sur le jour 1...
![Page 5: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/5.jpg)
Pour changer la page d'accueil1. Créez une nouvelle page d'accueil de type
«Basic page».2. À l'onglet «Options de publication», en bas
de la page, cochez «Épingler en haut des listes», pour que le contenu de la page apparaisse au dessus des nouvelles (s'il y en a, bien sûr!)
Jour 2 – thème 0
![Page 6: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/6.jpg)
Pour changer la page d'accueil3. Notez le numéro du noeud de cette page 4. Au menu «Configuration» du webmestre,
cliquez le lien «SYSTÈME > Informations»5. Indiquez le numéro du noeud de la nouvelle
page d'accueil sous la forme «node/#» :
Jour 2 – thème 0
![Page 7: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/7.jpg)
Pour changer la page d'accueil
6. N'oubliez pas de modifier aussi le menu afin d'accéder à cette page lorsque l'élément Accueil («Home») du menu est cliqué. (Voir section «Gestion des menus» au thème 2).
Jour 2 – thème 0
![Page 8: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/8.jpg)
Exercice1. Ajoutez une nouvelle page d'accueil à votre
site comportant un texte qui apparaîtra avant les nouvelles
2. Vérifiez si c'est bien la page qui s'affiche lorsque vous accédez à votre site au moyen de l'URL sans numéro de noeudhttp://pfm##.aegir.cmaisonneuve.qc.ca/
3. Ajoutez deux nouvelles («Ajouter du contenu > Article») et vérifiez qu'elles apparaissent bien après le texte
Jour 2 – thème 0
![Page 9: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/9.jpg)
Image de fond sur une page
• Il faut installer le module Background
Jour 2 – thème 0
![Page 10: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/10.jpg)
Jour 2 - Thème 1
Jour 2 – thème 1
La gestiondes utilisateurs
et des droits
![Page 11: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/11.jpg)
Étape 1 : La définition des rôles• Le module «Node permissions grid» permet
une gestion plus aisée des droits d'accès• On ajoute des rôles (groupes d'utilisateurs)
par le bouton «Rôles» de l'onglet «Droits» du menu «Personnes» du webmestre
• On définit un rôle pour chaque groupe d'utilisateurs à qui on voudra donner des droits différents des autres groupes, ou dont les droits changeront dans le temps à un moment différent des autres groupes
Jour 2 – thème 1
![Page 12: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/12.jpg)
Étape 2 : La définition des droits
• On définit les droits de chaque groupe dans la grille accessible au moyen du bouton «Droits» de l'onglet «Droits» du menu «Personnes» du webmestre
Jour 2 – thème 1
![Page 13: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/13.jpg)
Étape 3 : La définition des utilisateurs• On définit chacun des utilisateurs au moyen du
lien «Ajouter un utilisateur» de l'onglet «Lister» du menu «Personnes» du webmestre
• On associe un rôle à chaque utilisateur• Il vaut mieux définir un second compte
d'administrateur en plus du webmestre, au cas où on perdrait le mot de passe du webmestre!
• Il est possible d'associer plusieurs rôles à un même utilisateur (exemple: prof et modérateur)
Jour 2 – thème 1
![Page 14: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/14.jpg)
• Si l'adresse de courriel de l'utilisateur est @cmaisonneuve.qc.ca, spécifiez-là. Seuls ces utilisateurs pourront changer leur mot de passe!!!
• Sinon, entrez «[email protected]» comme adresse de courriel, car elle ne pourra pas être utilisée par ce site. Le serveur du Collège empêche l'envoi de courriels vers l'extérieur.
Jour 2 – thème 1
![Page 15: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/15.jpg)
Exercice1. Créez un rôle Prof et donnez-lui le droit de créer et
de modifier des pages de base, mais pas de modifier les pages des autres utilisateurs ni d’ajouter de pages au menu
2. Créez des comptes d'utilisateurs pour tous les profs de votre département (maximum 10, si vous faites partie d'un «gros» département!)
3. Connectez-vous avec un de ces comptes et créez une page
4. Connectez-vous avec un autre compte et vérifiez que vous ne pouvez pas modifier cette page
Jour 2 – thème 1
![Page 16: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/16.jpg)
Jour 2 - Thème 2
Jour 2 – thème 2
La gestion desmenus et des blocs
![Page 17: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/17.jpg)
Gestion des menus• Si votre site n'a qu'un seul menu principal, vous
pouvez spécifier vers quel page chaînera un élément de menu dans l'écran de modification de cette page
• Vous pouvez modifier l'ordre d'apparition des éléments dans le menu au moyen de l'élément «Menus» du menu «Structure» du webmestre
• Vous pouvez modifier les titres des éléments de menu pour qu'ils soient différents des titres des pages correspondantes
Jour 2 – thème 2
![Page 18: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/18.jpg)
Sous-menus• Pour définir des sous-menus, il faut d'abord
installer le module NiceMenus ou le module Superfish
• Le thème choisi doit comporter des menus dans un bloc…
Jour 2 – thème 2
![Page 19: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/19.jpg)
Gestion des blocs• La localisation des blocs pour un thème donné
peut être spécifiée au moyen du lien «Blocs» de l’élément «Structure» du menu du webmestre
• Utilisez le lien «Aperçu des régions des blocs» pour visualiser où sont situées chacune des régions dans le thème actif
• Les blocs peuvent être affichés de façon conditionnelle pour certaines pages ou pour certains utilisateurs
Jour 2 – thème 2
![Page 20: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/20.jpg)
Jour 2 - Thème 3
Jour 2 – thème 3
La gestion desfichiers
![Page 21: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/21.jpg)
Le répertoire /files• Le site Drupal a un sous-répertoire /files dans
lequel le webmestre peut sauvegarder des fichiers en sftp
• Ces fichiers peuvent être des images, des vidéos, des documents pdf, Word, Excel, etc.
• Les images peuvent être utilisées dans des pages au moyen de la balise html «image» à l'adresse http://nom-du-site/files/image.jpg (.jpg, .gif ou .png)
Jour 2 – thème 3
![Page 22: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/22.jpg)
• On peut accéder aux autres fichiers (pdf par exemple) en faisant dans une page un hyperlien vers l'adressehttp://nom-du-site/files/nom-du-fichier.pdf
Jour 2 – thème 3
![Page 23: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/23.jpg)
Jour 2 – thème 3
WinSCP
![Page 24: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/24.jpg)
Exercice• Aucun compte sftp n’ayant été défini pour ce cours,
utilisez les images suivantes dans une des pages de votre site :http://informatique.cmaisonneuve.qc.ca/files/Portes.jpg
http://informatique.cmaisonneuve.qc.ca/files/LogoAndroid.jpg
• Créez un hyperlien sur une des pages de votre site pour que le fichier pdf suivant puisse être accédé (calendrier scolaire 2011-2012) :
Jour 2 – thème 3
http://informatique.cmaisonneuve.qc.ca/files/Calendrier2011-12.pdf
![Page 25: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/25.jpg)
Jour 2 - Thème 4
Jour 2 – thème 4
Les types decontenus
![Page 26: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/26.jpg)
Jour 2 – thème 4
Définition de nouveaux types
1. Créez d’abord les nouveaux types de pages avec le lien «Types de contenu» de l’élément «Structure» du menu du webmestre
2. Définissez ensuite les droits de chacun des groupes d’utilisateurs sur ces pages avec l’onglet «Droits» de l’élément «Personnes» du menu du webmestre
![Page 27: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/27.jpg)
Exercice1. Créez un type «Page perso». Ces pages ne doivent
pas pouvoir être ajoutées au menu2. Donnez à tous les utilisateurs inscrits le droit de
créer et de modifier ce type de page lorsqu’ils en sont le créateur, mais pas de modifier les pages des autres utilisateurs
3. Donnez au webmestre tous les droits sur ce type de page
4. Enlevez aux utilisateurs inscrits et aux profs tout droit sur les pages de base et sur les articles /…
Jour 2 – thème 4
![Page 28: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/28.jpg)
Exercice
5. Connectez-vous avec votre compte de prof (pas webmestre!) et créez une page perso décrivant vos activités
Jour 2 – thème 4
![Page 29: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/29.jpg)
Jour 2 - Thème 5
Jour 2 – thème 5
La modération desforums de discussion
![Page 30: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/30.jpg)
Jour 2 – thème 5
Compte modérateur
![Page 31: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/31.jpg)
Exemple 1
Jour 2 – exemple 1
Le développement d’un wiki
![Page 32: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/32.jpg)
Développement d’un wiki
Jour 2 – exemple 1
![Page 33: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/33.jpg)
Exemple 2
Jour 2 – exemple 2
Pages personnelles des étudiants
![Page 34: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/34.jpg)
Pages personnelles des étudiants
Jour 2 – exemple 2
![Page 35: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/35.jpg)
Aperçu
Jour 2 – aperçu
La programmation !
![Page 36: Version janvier 2014](https://reader035.vdocuments.site/reader035/viewer/2022070405/56813d03550346895da6a681/html5/thumbnails/36.jpg)
Utilisation de «snippets» en langage php
1. Activez le module «PHP filter»2. Au menu «Configuration», «RÉDACTION DE
CONTENU > Formats de texte», configurez le format «PHP code» pour que seuls les administrateurs puissent l’utiliser
3. Le webmestre a maintenant le format «PHP code» lorsqu’il crée ou modifie une page
Exemple d'usage : la page d'accueil pourrait détecter l'utilisation d'un appareil mobile et faire afficher une autre page !
Jour 2 – aperçu