Le projet « ppcm » consiste en la création d'une plateforme de partage de contenus multimédia, où les participants travaillent en groupes pour définir un thème précis et des métadonnées pour les galeries de photos. La plateforme est basée sur Drupal, qui offre des solutions flexibles pour la gestion des utilisateurs et la personnalisation des fonctionnalités. Chaque groupe doit tester la plateforme tant du point de vue des contributeurs que des visiteurs, en facilitant ainsi l'interaction et le partage de contenus.

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. Rappel
• Les activités du projet sont à réaliser
▫EN GROUPE
de 2 ou 3

3. 1er exemple
• La photothèque de l’UniGe
▫ http://phototheque.unige.ch/
▫ Déjà étudié lors de la première activité
 Méta-données
 Mots-clés

4. 2ème exemple
• Wikimedia Commons
▫ http://commons.wikimedia.org/wiki/Accueil
▫ A visionner
 http://youtu.be/7SI2IpNtv5U

5. 3éme exemple
• Flickr
▫ http://www.flickr.com/
▫ A visionner
 http://youtu.be/ySJfBcfQpt4

6. 4éme exemple
• 500px
▫ http://500px.com
▫ A visionner
 http://youtu.be/x728Sc3B5uE

7. 5ème exemple
• Visualrecipes
▫ http://visualrecipes.com/
▫ A visionner
 http://youtu.be/4I4aFkDVNLU

8. CMS / SGC
• A visionner
▫ http://youtu.be/p5KzwWKE5iQ

9. Drupal
• http://drupal.org

10. Drupal
• Drupal propose un mécanisme flexible
▫ Un « cœur » qui propose des fonctions de base:
 Par exemple la gestion des utilisateurs
▫ Un eco-système de modules:
 Qui permettent d’étendre et de spécialiser Drupal
dans de nombreuses directions
 Par exemple modules de e-commerce.

11. Drupal
• Drupal est une solution utilisée sur le marché
par de nombreuses entreprises et organisations:
▫ Vous pouvez voir un certain nombre d’exemples
de sites réalisés avec Drupal à
 http://drupal.org/case-studies
▫ La gamme de sites possibles est très large:
 E-commerce
 Arts
 Education
 Administration
 …

12. Drupal
• Whitehouse.gov
using Drupal

13. Drupal Gardens
• http://www.drupalgardens.com/

14. Drupal Gardens
• Drupal Gardens est un site professionnel
▫ Il propose des solutions hébergées de Drupal.
 Moins souple que si vous installez Drupal vous-même,
mais beaucoup plus simple à réaliser (pas de
configuration du serveur, pas d’installation de Drupal…)
 Drupal est pré-installé
 Avec une liste de modules limitées qui peuvent être activés
ou non.
 Il n’est pas possible d’ajouter de nouveaux modules.
 Avec la possibilité de choisir plusieurs « modèles » de
sites prédéfinis
 Ou de créer sa propre version en choisissant soi-même la
liste des modules à activer.

15. Drupal Gardens
• Drupal Gardens
▫ Chaque module peut être adapté et configuré
depuis l’interface d’administration en ligne.
▫ Par exemple, vous pouvez définir vous-même quel
sera le profil type des utilisateurs de votre
plateforme en choisissant et en définissant quelles
informations chaque utilisateur aura à remplir
lorsqu’il s’inscrira: ses nom et prénom, son hobby,
son style de musique préféré… de façon à adapter
le profil utilisateur aux objectifs de votre
plateforme.

16. Drupal Gardens
• Plusieurs formules
▫ Drupal Gardens propose plusieurs formules
d’abonnement
 La version gratuite/free est la plus limitée
 Elle permet de prototyper son site complètement dans
une configuration du serveur limitée.
 Puis de passer à une formule payante adaptée une
fois le site complètement finalisé.

17. Drupal Gardens
• Plusieurs formules

18. Drupal Gardens
• Pour ouvrir un compte et un site Drupal
▫ Sélectionner l’offre free/starter (par défaut)
▫ 1ère étape: signup
 Adresse du site, identifiant/mot de passe Drupal
Gardens
▫ 2ème étape: template
 Choix du template
▫ 3ème étape
 Création du site
▫ 4ème étape
 Invitation du reste de l’équipe

19. Drupal Gardens
• Ouvrir un compte Drupal Gardens
▫ Signup

20. Drupal Gardens
• Choix du template
▫ Choisir « Create your own template »
▫ N’activez aucune « features »

21. Drupal Gardens
• Création du site

22. Drupal Gardens
• Finalisation de la création du site

23. Drupal Gardens
• Un seul membre du groupe de projet crée un
site:
▫ exemple.drupalgardens.com
• Il invite le ou les autres membres de son groupe
▫ Depuis le menu « People »

24. Drupal Gardens
• Il invite le ou les autres membres de son groupe
▫ Depuis le menu « People »

25. Drupal Gardens
• Une fois que l’invité a confirmé son invitation
▫ L’invité reçoit un email à son adresse pour lui
fournir la marche à suivre.
• Le nouvel utilisateur apparaît dans la liste des
utilisateurs du panneau « People »
▫ Par défaut il est seulement « Authenticated user ».
▫ Editez le compte et attribuez lui les rôles
« Administrator » et « Site Maintainer ».

26. Drupal Gardens
• Chaque membre du groupe dispose d’un compte
qui lui permet d’administrer le site
▫ Attention à vous coordonner et vous répartir les
tâches par la suite.

27. Drupal Gardens
• De l’aide en ligne (et en Anglais)

28. Drupal Gardens
• Des vidéos (toujours en Anglais)

29. Drupal Gardens
• Se connecter en passant par Drupal Gardens

30. Drupal Gardens
• Se connecter en passant par Drupal Gardens

31. Drupal Gardens
• Se connecter en passant par Drupal Gardens

32. Drupal Gardens
• Se connecter en passant par Drupal Gardens

33. Drupal Gardens
• Se connecter en passant directement par le site

34. Drupal Gardens
• Se connecter en passant directement par le site

35. Drupal Gardens
• Se connecter en passant directement par le site

36. Drupal Gardens/Drupal
• Administrateur
▫ Login,
▫ Accès total au site + administration du site.
• Utilisateur authentifié
▫ Login
▫ Accès au site en « lecture » et accès contrôlé au site selon fonctions
autorisées par les administrateurs (par exemple déposer des photos).
▫ Pas d’accès à l’administration du site.
• Visiteur
▫ Pas de login
▫ Accès au site en « lecture » + fonctions autorisées par les
administrateurs (en général plus limitées qu’utilisateur authentifié, par
exemple pas de dépose de photo, mais noter ou commenter les photos).
▫ Pas d’accès à l’administration du site.

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

38. Votre mission
• Dans VisualRecipes (1/2)
▫ Chaque contributeur peut
 Ajouter des recettes
 Chaque recette correspond à une galerie d’images.
▫ Chaque recette est représentée par une série de
photos
 Qui illustre par exemple la recette à différentes
étapes.

39. 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
sur l’ensemble des galeries d’images:
 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…

40. 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
 Un contributeur X crée une galerie de photos pour la tour
Eiffel
▫ Il dépose l’ensemble des photos
▫ Ajoute toutes les informations de description du monument:
date, lieu, hauteur …
 Un contributeur Y crée une galerie de photos à son tour pour
la tour Eiffel
▫ Il dépose l’ensemble des photos
▫ Ajoute toutes les informations de description du monument

41. 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 galeries de photos de X et Y et peut
choisir celles qui l’intéresse.

42. Votre mission
• Le prototypage de la plateforme va consister à
▫ Définir toutes les métadonnées à associer
 aux galeries de photos
 aux utilisateurs (qui peuvent être à la fois contributeur
et/ou visiteur)
▫ 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.

43. 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
galeries de photos).
▫ Tester la plateforme comme utilisateur visiteur
(rechercher des galeries à partir des outils de
recherche et d’exploration).

44. Votre mission
• Votre plateforme
▫ Devra permettre à un utilisateur contributeur de
déposer une galerie de photos
▫ Devra permettre à un utilisateur visiteur de
rechercher des galeries de photos à partir de
plusieurs moyens de recherche et d’exploration.

45. Activité 2.1
• Quelles métadonnées seraient utiles et nécessaires
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

46. Activité 2.1
• Quelles métadonnées seraient utiles et nécessaires
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

47. Activité 2.1
• Editez une page dans le groupe d’activité de
votre projet sur hec-onnect
▫ Pour décrire et documenter:
 Le thème choisi pour votre plateforme
 Les métadonnées que vous envisagez d’attribuer aux
contenus médias et aux utilisateurs

48. Activité 2.2
• Créez votre site Drupal Gardens et commencez à
définir et travailler la ligne graphique de votre
plateforme
▫ A partir des outils disponible depuis le menu
« Appearance » de la barre de 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
 A visionner: http://youtu.be/tZ0DIGfIJEU

49. Activité 2.2
• Commencez à définir et travailler la ligne
graphique de votre plateforme (suite)
▫ A visionner
 http://youtu.be/Tmn0LxQj_M4
 http://youtu.be/CJuoZWHnaCk

50. Ressources
• Vous retrouverez l’ensemble des vidéos à
visionner dans la playlist:
▫ http://www.youtube.com/playlist?list=PL96E3BBFC7B2EEDF3
• Vous trouverez une collection de tutoriels en français (un peu)
en anglais (beaucoup) qui présente Drupal Gardens et son
fonctionnement:
▫ http://www.youtube.com/playlist?list=PLE4A6615EBE3C2EF4