1. Projet « PPCM »
Plateforme de Partage
de Contenus Multimédia
Développement d’une plateforme
de diffusion et de partage de
contenus multimédia

2. Drupal
• Référence
▫ Récupérer le livre
 Atelier Drupal 7
 Créer un site internet avec un CMS pas comme les autres
 De Cyprien Roudet
 Sur Connect
 Les parties du livre en relation avec le projet sont surlignées
en jaune dans la table des matières.
 La version originale est disponible sur le site Framabook
 http://framabook.org/12-atelier-drupal-7-creer-un-site-
web-avec-un-cms-pas-comme-les-autres/

3. Drupal
• D’autres références
▫ Site Officiel Drupal France et francophonie
 http://drupalfr.org/
▫ DrupalFacile
 Apprenez Drupal en vidéo et en Français
 http://www.drupalfacile.org/
▫ Faire un site vitrine avec Drupal 7
 https://wiki.koumbit.net/FormationDrupal/Drupal
7Automne2011

4. Drupal
• D’autres références
▫ Présentation de Drupal 7
 http://drupaloo.info/presentation-drupal-7
▫ Faire un site vitrine avec Drupal 7
 https://wiki.koumbit.net/FormationDrupal/Drupal
7Automne2011

5. Drupal
• Structure
▫ Données (nodes/nœuds)
▫ Modules
▫ Blocs & menus
▫ Utilisateurs
 Permissions
▫ Templates (thèmes)

6. Drupal sur stm
• Pas de possibilités d’installer:
▫ De nouveaux thèmes
▫ De nouveaux modules
• Possibilité de personnaliser l’apparence des
thèmes par défaut.
• Des modules supplémentaires sont déjà
installés.

7. Drupal
• Accès administrateur
▫ Back et front office
▫ Accès aux fonctions d’administration
▫ Barre de menu d’administration
• Possibilité de créer des catégories d’utilisateurs
authentifiés
▫ Avec des droits spécifiques décidés par
l’administrateur
• Utilisateurs anonymes (visiteurs)
▫ Avec des droits spécifiques décidés par
l’administrateur

8. Drupal
• Administrateur
▫ Accès au fonctions d’administration par la barre
de menu (en haut)

9. Drupal
• Prise en main
▫ A lire
 Chapitre 1: à la découverte de Drupal
 Section 2
▫ Si vous créez des contenus, il faudra les effacer par la
suite…
 Chapitre 2: Utiliser Drupal
 Section 1, 2 & 3
▫ Dans « Atelier Drupal 7 »

10. Drupal
• Apparence
▫ Thèmes
 Accès par le menu Apparence
 Depuis la barre de menu d’administration (en haut)
▫ Personnalisation du thème actif
 A l’aide de la barre de style
 En activant la barre de menu Style (en bas)

11. Drupal
• Thèmes
▫ Activation de thèmes
▫ Choix du thème par défaut
 Possibilité d’avoir un thème différent pour
l’administration.
▫ Paramétrage du thème

12. Drupal
• Thèmes

13. Drupal
• Paramètres du thème

14. Drupal
• Structure d’un thème
▫ Un thème est organisé par régions
 Pour voir les régions définies pour un thème
 Passer par le menu « Structure », puis « Blocs », puis
« Aperçu des régions de blocs »

15. Drupal
• Régions d’un thème

16. Drupal
• Régions d’un thème
▫ Les régions permettent ensuite de définir où
seront placés les différents éléments de l’interface
comme par exemple les blocs dans le thème.

17. Drupal
• Style du thème
▫ Activation de la barre de menu de style

18. Drupal
• Style du thème
▫ Sélection d’un composant du thème
▫ Modification du style

19. Drupal
• Bannière défilante
▫ Il est possible de créer une bannière défilante à
intégrer dans le thème.
▫ Marche à suivre
 Créer une bannière
 Télécharger les photos de la bannière
 Configure la bannière
 Définir dans quelle région du thème elle sera
affichées

20. Drupal
• Créer une bannière défilante
▫ Passer par le menu « Structure », puis « Blocs »,
puis « Add a rotating banner »

21. Drupal
• Créer une bannière défilante
▫ Fournir un titre

22. Drupal
• Créer une bannière défilante
▫ Ajouter des photos, configurer la bannière

23. Drupal
• Créer une bannière défilante
▫ Définir la région d’affichage dans le thème

24. Drupal
• Modifier une bannière défilante
▫ Passer par « Structure », puis « Blocs », puis chercher la région
dans laquelle la bannière est insérée (ici Entête).
▫ Sélectionner « configurer »

25. Votre mission
• Choisir le thème/sujet de votre plateforme
▫ En vous inspirant de VisualRecipes
 Il s’agit de s’en inspirer comme exemple, pas de le
copier: soyez créatifs.
 Vous êtes libres du choix du thème, mais vous devez
en définir un précis.
 Ne pas se contenter de « recopier » un des exemples
de cette présentation.

26. Votre mission
• Dans VisualRecipes (1/2)
▫ Chaque contributeur peut
 Ajouter des recettes
 Chaque recette correspond à une ou plusieurs photos
(une collection de photos).
▫ Chaque recette est représentée par une collection
de photos
 Qui illustre par exemple la recette à différentes
étapes.

27. Votre mission
• Dans VisualRecipes (2/2)
▫ Chaque recette est complétée par une série de
métadonnées/descriptions/tags… qui permettent
ensuite de fournir aux visiteurs des point d’entrée
pour explorer le contenu de la plateforme:
 Recherche par ingrédients, par type de plat…
▫ La plateforme est complétée par un ensemble
d’outils communautaires qui permettent aux
utilisateurs d’échanger autour sur le thème des
recettes:
 Forums…

28. Votre mission
• Dans votre plateforme
▫ Reprenez le même principe, mais adapté au thème que
vous aurez choisi (1/2):
 Par exemple « les monuments »
 Scénario d’utilisation:
▫ Un contributeur X a une ou plusieurs photos de la tour Eiffel
▫ Il dépose la collection de toutes ses photos de la tour Eiffel sur la
plateforme (il crée un contenu « monument » et y télécharge sa ou
ses photos).
▫ Il ajoute toutes les informations de description du monument
associées à la collection de photos: date, lieu, hauteur …
▫ Un autre contributeur, Y, a lui aussi sa ou ses photo(s) de la
tour Eiffel
▫ Il télécharge sa collection de photos dans un contenu
« monument » qu’il crée sur la plateforme.
▫ Il ajoute toutes les informations de description du monument

29. Votre mission
• Dans votre plateforme
▫ Reprenez le même principe, mais adapté au thème
que vous aurez choisi (2/2):
 Un visiteur Z cherche des photos de monuments de
Paris
▫ Grâce à un des outils de recherche/exploration de la
plateforme, il indique le lieu qui l’intéresse: Paris
▫ Il retrouve les deux contributions de X et Y concernant la
Tour Effeil parmi d’autres et peut choisir celle(s) qui
l’intéresse(nt).

30. Votre mission
• Le prototypage de la plateforme va consister à
▫ Définir toutes les métadonnées à associer
 Aux photos
 Aux utilisateurs (contributeurs authentifiés)
▫ Permettra de définir des points d’entrée pour les
visiteurs: outils de recherche, navigation,
exploration, découverte… pour qu’ils accèdent aux
photos et/ou aux contributeurs.
▫ Définir des fonctionnalités
« sociales/communautaires » pour faciliter la
sélection et le partage des contenus photos de la
plateforme.

31. Votre mission
• Votre plateforme
▫ Devra permettre à un utilisateur contributeur de
déposer des photos
▫ Devra permettre à un utilisateur visiteur de
rechercher des photos à partir de plusieurs
mécanismes de recherche et d’exploration.
▫ Devra permettre aux contributeurs/visiteurs de
communiquer entre eux au travers de fonctions
sociales (commentaires, notes, forums…).

32. Votre mission
• Pour le projet
▫ Vous devez configurer la plateforme depuis
l’interface administrateur.
▫ Tester la plateforme comme utilisateur
contributeur (et déposer quelques exemples de
photos).
▫ Tester la plateforme comme utilisateur visiteur
(rechercher des galeries à partir des outils de
recherche et d’exploration).

33. Votre mission
• Pour le projet
▫ Une fois les prototypes de plateforme terminés,
chaque binôme testera la plateforme d’un autre
binôme en tant que visiteur.
▫ Chaque binôme devra évaluer le prototype de
l’autre binôme selon un certain nombre de critères
qui vous seront communiqués à ce moment là:
pertinence des metadonnées, ergonomie de la
navigation, pertinence des fonctions
d’exploration…

34. Activités à réaliser
• Définir vos métadonnées pour décrire les
contenus
▫ Quelles significations/sens (par rapport au but de
la plateforme)
▫ Quels types de valeurs: nombre, texte, date…
▫ Quelles valeurs possibles:
 Liste fixe (par exemple les 5 continents)
 Liste ouverte
 Valeurs multiples/Valeur Unique
 Valeur obligatoire/Valeur facultative

35. Activités à réaliser
• Définir vos métadonnées pour décrire les
utilisateurs ?
▫ Quels rôles (avec quelles fonctions: visiteur,
contributeur…)
▫ Quelles significations/sens (par rapport au but de
la plateforme)
▫ Quels types de valeurs: nombre, texte, date…
▫ Quelles valeurs possibles:
 Liste fixe/Liste ouverte
 Valeurs multiples/Valeur Unique
 Valeur obligatoire/Valeur facultative

36. Rendu
• Déposer un fichier (PDF ou autre) dans le sous-
groupe d’activité de votre projet sur Connect:
▫ Qui décrit et documente:
 Le thème choisi pour votre plateforme
 Les métadonnées que vous envisagez d’attribuer aux
contenus médias et aux utilisateurs
 Ce document pourra évoluer au cours du projet

37. Activités à réaliser
• Définissez et travaillez la ligne graphique de
votre plateforme
▫ A partir des outils disponible depuis le menu
« Apparence » de la barre du menu
d’administration.
 Sélectionnez un thème graphique, un layout, un logo
et un favicon (vous pouvez en créer un à
http://www.favicon.cc/), une palette de couleur…
 Personnalisez ensuite l’ensemble en éditant les
éléments du thème individuellement

38. Activités à réaliser
• Une plateforme d’échange doit définir les règles
de fonctionnement d’utilisation:
▫ Pour les contributeurs.
▫ Pour les visiteurs.
• En définissant leurs droits et leurs obligations:
▫ A propos de nous/About us
▫ Charte
▫ Conditions d’utilisation
▫ Règles de confidentialité
▫ …

39. Activités à réaliser
• Inspirez-vous des plateformes existantes
(photothèque de l’Université, Flickr, Youtube…)
pour définir et rédiger vos règles d’utilisation et
autres politiques de fonctionnement.
• Modèle de CGU
▫ http://www.droitissimo.com/contrat/conditions-
generales-dutilisation-cgu-dun-site-internet

40. Activités à réaliser
• L’édition et la publication sur le web
▫ http://www.droitsurinternet.ca/section.php?secti
on=87

41. Activités à réaliser
• Quels droits de réutilisation des photos?
▫ Copyright/droit d’auteur
▫ Creative commons
 http://creativecommons.org/
 http://creativecommons.fr/
▫ Réutiliser des contenus produits par des tiers
 http://eduscol.education.fr/internet-
responsable/se-documenter-publier/reutiliser-des-
contenus-produits-par-des-tiers.html

42. Synthèse
• A faire
▫ Ligne graphique de la plateforme
▫ Définition des métadonnées pour les photos et les
utilisateurs
▫ Rédaction des conditions générales d’utilisation, à
propos…
• Ces différentes parties du projet pourront
évoluer et être mises à jour au cours du
semestre.