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. Situation
• 1ère activité:
▫ Comprendre le fonctionnement d’une plateforme
de partage de photo: la photothèque de l’UniGe.
▫ Etudier d’autres plateformes: wikimédia
commons, flickr, px500 et visualrecipes.

3. Situation
• 2ème activité:
▫ Comprendre le fonctionnement global de Drupal
et de Drupal Gardens
▫ Choisir le thème de votre plateforme de partage de
contenus multimédias
 Définir les métadonnées pour les contenus et les
contributeurs.
▫ Implémenter la ligne graphique (thème) de votre
plateforme.

4. Situation
• 3ème activité:
▫ Adapter le type de contenu « media gallery » de
Drupal Gardens
 En y ajoutant les métadonnées sous forme de fields.
▫ Adapter le profil des utilisateurs
 En y ajoutant les métadonnées sous forme de fields.
▫ Tester le résultat
 En créant un utilisateur contributeur
 En ajoutant des exemples de collections de photos.

5. Et maintenant ?
• Maintenant: la 4ème étape
▫ Il faut adapter votre plateforme pour permettre à
vos visiteurs de naviguer sur la plateforme pour
explorer et découvrir les contenus.
▫ Pour cela, il faut leur donner différents « points
d’entrée » qui leur permettront de chercher, de
parcourir et de sélectionner des contenus.
▫ Ces points d’entrée se construisent à partir de
métadonnées.

6. Comment ?
• Pour cela nous allons utiliser
▫ Les blocs
▫ Les menus
▫ Les vues (views)
• Les blocs permettent d’afficher des contenus, des
résultats, des menus… et de les placer à l’intérieur
du thème
• Les menus permettent de naviguer à l’intérieur du
site et donner accès aux fonctionnalités.
• Les vues permettent de construire des sélections de
contenus selon des critères (filtres, tris…)

7. Page d’accueil
• Le premier point d’entrée: la page d’accueil
▫ Par exemple
 Configurer la page d’accueil pour qu’elle affiche la
liste des contenus triés par date.
 A visionner:
 http://youtu.be/XqRgNJ8zbSw
 Cette vidéo montre comment configurer la page
d’accueil.

8. Les blocs
• Les blocs:
▫ Certains modules créent un ou plusieurs blocs qui
affiche des résultats/informations du module qu’il
est ensuite possible d’activer.
▫ Vous pouvez créer vos propres blocs.
▫ La création d’un menu ou d’une vue entraîne la
création d’un bloc permettant de rendre le menu
ou la vue accessible par un bloc.

9. Les blocs
• La liste des blocs est organisée par régions
▫ Chaque région correspond à une zone
« géographique » de votre thème.
• Plus une liste de blocs « disabled »
▫ Qui comprend les blocs existants mais qui ne sont
pas activés.
▫ Pour activer un bloc, il faut le placer dans une
région du thème.

10. Les blocs
région
bloc configuration

11. Les blocs
blocs inactifs
enregistrer toute modification
sélectionner la région

12. Les blocs
affiche la liste des utilisateurs en ligne
affiche la liste des derniers commentaires
affiche la liste des nouveaux utilisateurs

13. Les blocs
• Les régions localisées dans le thème

14. Les menus
• Les menus
▫ Ils permettent de naviguer dans le site
 Et surtout ils « activent » l’exécution des traitements
de Drupal sur les contenus
 Chaque menu contient des liens
 En cliquant sur un lien
▫ On provoque l’exécution par Drupal d’un traitement
▫ Dont le résultat est ensuite retourné à l’utilisateur dans la
page centrale.

15. Les menus
• Les menus
▫ Il existe des menus par défaut
 Par exemple Navigation
▫ Il est possible d’ajouter des menus
▫ D’ajouter des liens à un menu
▫ De changer un lien de menu

16. Les menus
menu
ajout d’un menu
modification du menu
ajout d’un lien

17. Les menus
• Création d’un lien (add link)
La page « A propos »
et son adresse ou « lien »

18. Les menus
• Création d’un lien (add link)
et son adresse ou « lien »

19. Thème général
• Dans les exemples suivants, on considère que la
plateforme a pour thème les hôtels du monde
▫ La plateforme doit donc permettre aux utilisateurs
contributeurs de créer des contenus représentant
des hôtels en fournissant pour chaque hôtel une
collection de photos et des valeurs pour les
métadonnées.

20. Les menus
• Construire un menu
▫ Créer un menu
▫ Ajouter des liens
▫ Activer le bloc correspondant au menu
 Pour le rendre visible et accessible aux visiteurs.

21. Exemple de menu
• Procédure
▫ Création d’une page « à propos » décrivant les
objectifs et buts de la plateforme.
▫ Création d’une page « Conditions générales
d’utilisation » décrivant les règles de
fonctionnement à respecter (par exemple en terme
de copyright…)
▫ Création d’un menu donnant accès aux deux pages
 Activation du bloc correspondant

22. Exemple de menu
• Procédure
▫ Créer deux contenus de type « basic page »
▫ Récupérer le lien (URL) des ces deux pages
▫ Créer un menu
 Ajouter les liens sur les deux pages dans le menu
▫ Activer le bloc du menu
▫ Le menu est accessible aux utilisateurs qui en
cliquant sur les liens du menu peuvent accéder au
contenu des deux pages et les lire.

23. Exemple de menu
• A visionner
▫ http://youtu.be/wnuitc9G7cY

24. Moteur de recherche interne
• Le premier « point d’entrée » consiste à activer le
moteur de recherche interne et de permettre aux
visiteurs de l’interroger
▫ Activation du module.
▫ L’indexation des contenus se fait automatiquement
 Tous les fields sont indexés.
▫ Activation du bloc de recherche
 Permet de donner accès au visiteur à la recherche par
mot-clé.
 Le moteur renvoie la liste des contenus (ou des
utilusateurs) dont un des fields contient le mot-clé.

25. Moteur de recherche interne
• A visionner
▫ http://youtu.be/lDRs2UEMkDs

26. Sélection des contenus
• 3 exemples de sélections des contenus
▫ A partir d’une métadonnée associée à une
taxonomy ouverte
 En créant une vue qui affiche dans un bloc la liste
des termes de la taxonomy
 Quand le visiteur clique sur un des termes, tous les
contenus qui ont ce terme comme valeur de la
métadonnée sont sélectionnés et affichés sous forme
de liste.

27. Sélection des contenus
• 3 exemples de sélections des contenus
▫ A partir d’une métadonnée associée à une
taxonomy fermée
 En créant un menu qui affiche dans un bloc la liste
prédéfinie des termes de la taxonomy
 Quand le visiteur clique sur un des liens, tous les
contenus qui ont ce terme comme valeur de la
métadonnée sont sélectionnés et affichés sous forme
de liste.

28. Premier exemple sélection
• Création d’une métadonnées Ville
▫ Elle permet d’attribuer à un hôtel la ville dans
laquelle il se trouve
▫ Le but est ensuite de permettre à un visiteur de
retrouver tous les hôtels d’une ville en
sélectionnant le nom de la ville.

29. Premier exemple sélection
• Procédure
▫ Création d’une taxonomy « Villes »
▫ Création d’un field Ville de type « term reference »
ajouté au type de contenu Hôtel
 Le widget associé est un de type « Autocomplete term »
ce qui permettra de laisser le contributeur soit utiliser un
nom de ville déjà existant, soit de créer un nouveau nom
de ville qui s’ajoutera à la taxonomy.
▫ Configuration du field
 Valeur unique
 Valeur obligatoire
 Il est associé à la taxonomy « Villes »

30. Premier exemple sélection
• Procédure (suite)
▫ Création d’une vue (view)
 Qui sélectionne les termes de la taxonomy « Villes »
et les affiche
 Création d’un bloc associé à la vue qui permet de
visualiser le résultat de la sélection
▫ Activation du bloc de la vue

31. Premier exemple sélection
• Résultat
▫ Chaque fois qu’un contributeur ajoute un hôtel, le
nom de ville qu’il lui attribue est ajouté à la
taxonomy si il n’y existe pas déjà.
▫ Le nouveau nom apparaît dans le bloc de la vue.
▫ Quand un visiteur clique sur un terme qui
correspond à un nom de ville, la plateforme
sélectionne tous les hôtels dont la ville correspond
et affiche la liste.

32. Premier exemple sélection
• Première partie à visionner
▫ http://youtu.be/-IYiLoJhTA0

33. Premier exemple sélection (suite)
• Seconde partie à visionner
▫ http://youtu.be/PkTGpG6K21c

34. Premier exemple sélection (suite et
fin)
• Troisième partie à visionner
▫ http://youtu.be/iC1ogaNKKyk

35. Deuxième exemple sélection
• Création d’une métadonnée « Continent »
▫ Elle permet d’associer à chaque hôtel le continent
dans lequel il se trouve situé.
 On a à faire à une liste de valeurs fixe et prédéfinie
(contrairement à l’exemple précédent)
▫ Le but est ensuite de permettre à un visiteur de
retrouver tous les hôtels d’un continent en
sélectionnant le nom d’un continent.

36. Deuxième exemple sélection
• Procédure
▫ Création d’une taxonomy « Continent »
 Ajout des 5 termes de la liste de continents
▫ Création d’un field « Continent » ajouté au type de
contenu Hôtel
 Le widget associé est un de type « radio button » ce qui
permettra de laisser le contributeur sélectionner la valeur
parmi la liste complète des termes de la taxonomy.
▫ Configuration du field
 Valeur facultative
 Valeur unique

37. Deuxième exemple sélection
• Procédure (suite)
▫ Création d’un menu
▫ Ajout d’un lien sur chaque terme de la taxonomy
« Continents »
▫ On obtient un menu à 5 entrées, chacune
correspondant à un des termes de la taxonomy.

38. Deuxième exemple sélection
• Résultats
▫ Chaque fois qu’un visiteur clique sur un des liens
du menu
 Les hôtels associés au continent correspondant sont
sélectionnés et la liste est affichée.

39. Deuxième exemple sélection
• A visionner
▫ http://youtu.be/dxt8lmxY52k

40. Troisième exemple sélection
• Création d’une métadonnée « Activités »
▫ Elle permet d’associer à chaque hôtel les activités
qu’il est possible d’y pratiquer: golf, sauna,
piscine...
▫ Le but est ensuite de permettre à un visiteur de
retrouver tous les hôtels qui proposent une
activité précise en lui permettant de faire une
recherche en fournissant lui-même le nom de
l’activité.

41. Troisième exemple sélection
• Procédure
▫ Création d’un field « Activités » ajouté au type de
contenu Hôtel
 De type « text »
▫ Configuration du field
 Valeur optionnelle
 3 valeurs possibles

42. Troisième exemple sélection
• Procédure (suite)
▫ Création d’une vue (view)
 Qui sélectionne les contenus de type hôtel à partir de
la valeur du field « Activités ».
 Qui permet de laisser l’utilisateur saisir lui-même la
valeur de l’activité qu’il veut rechercher.
▫ Création d’un menu
 Avec ajout d’un lien sur la vue
▫ Activation du bloc du menu

43. Troisième exemple sélection
• Procédure (suite)
▫ Création d’une vue (view)
 Dans Drupal, les contenus sont stockés dans les
tables d’une base de données du même type que
celles que vous avez vu au semestre précédent en
séminaire du cours d’Introduction à la Science des
Services.
 Le module View est un interface qui permet de
construire une requête du même type que les
requêtes SQL pour sélectionner des contenus à
partir d’une table.

44. Troisième exemple sélection
• Résultat
▫ Quand le visiteur sélectionner le lien dans le
menu, un formulaire simple est affiché qui lui
permet de saisir une valeur d’activité dans un
champ de texte.
▫ Une fois la valeur validée par le visiteur, la
plateforme sélectionne les hôtels qui proposent
cette activité et en affiche la liste
 Si aucun ne propose l’activité, la liste de résultats est
vide.

45. Troisième exemple sélection
• Première partie à visionner
▫ http://youtu.be/xojnRsRet0U

46. Troisième exemple sélection (suite)
• Passez à la vidéo qui suit…

47. Troisième exemple sélection (suite et
fin)
• Seconde partie à visionner
▫ http://youtu.be/hR0wPCPovak

48. A vous
• A vous maintenant à partir des exemples
présentés de les adapter à vos propres
métadonnées pour définir des « points
d’entrée » qui permettront à vos visiteurs
d’explorer et de sélectionner les collections de
photos qui les intéressent.