Projet « PPCM »

Plateforme de Partage

de Contenus MultimédiaDéveloppement d’une plateforme de diffusion et de partage de contenus multimédia

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/

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/Drupal7Automne2011

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/Drupal7Automne2011

Drupal

• Structure

▫ Données (nodes/nœuds)

▫ Modules

▫ Blocs & menus

▫ Utilisateurs

Permissions

▫ Templates (thèmes)

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.

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

Drupal

• Administrateur

▫ Accès au fonctions d’administration par la barre de menu (en haut)

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 »

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)

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

Drupal

• Thèmes

Drupal

• Paramètres du thème

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 »

Drupal

• Régions d’un thème

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.

Drupal

• Style du thème

▫ Activation de la barre de menu de style

Drupal

• Style du thème

▫ Sélection d’un composant du thème

▫ Modification du style

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

Drupal

• Créer une bannière défilante

▫ Passer par le menu « Structure », puis « Blocs », puis « Add a rotating banner »

Drupal

• Créer une bannière défilante

▫ Fournir un titre

Drupal

• Créer une bannière défilante

▫ Ajouter des photos, configurer la bannière

Drupal

• Créer une bannière défilante

▫ Définir la région d’affichage dans le thème

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 »

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.

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.

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…

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

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

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.

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…).

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

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…

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

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

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

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

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é▫ …

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

Activités à réaliser

• L’édition et la publication sur le web

▫ http://www.droitsurinternet.ca/section.php?section=87

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

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.