version janvier 2014
DESCRIPTION
Développement de sites collaboratifs avec Drupal Jour 2 Marc-Gabriel Vallières [email protected] Ressources du cours: http://profs.cmaisonneuve.qc.ca/mvallieres/Drupal. Version janvier 2014. Plan. Jour 1 : Développement avec Drupal. - PowerPoint PPT PresentationTRANSCRIPT
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
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 : 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
Jour 2 - Thème 0…
Jour 2 – thème 0
Retour sur le jour 1...
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
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
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
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
Image de fond sur une page
• Il faut installer le module Background
Jour 2 – thème 0
Jour 2 - Thème 1
Jour 2 – thème 1
La gestiondes utilisateurs
et des droits
É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
É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
É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
• 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
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
Jour 2 - Thème 2
Jour 2 – thème 2
La gestion desmenus et des blocs
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
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
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
Jour 2 - Thème 3
Jour 2 – thème 3
La gestion desfichiers
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
• 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
Jour 2 – thème 3
WinSCP
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
Jour 2 - Thème 4
Jour 2 – thème 4
Les types decontenus
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
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
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
Jour 2 - Thème 5
Jour 2 – thème 5
La modération desforums de discussion
Jour 2 – thème 5
Compte modérateur
Exemple 1
Jour 2 – exemple 1
Le développement d’un wiki
Développement d’un wiki
Jour 2 – exemple 1
Exemple 2
Jour 2 – exemple 2
Pages personnelles des étudiants
Pages personnelles des étudiants
Jour 2 – exemple 2
Aperçu
Jour 2 – aperçu
La programmation !
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