Production Multimédia Travail pratique 1

P roduction Multimédia
Travail pratique 1
Réalisation d'un site Web à l'aide d'un CMS
et rédaction d'un guide de l'usager
Contexte de réalisation
Pondération :
Travail en équipe :
Travail présenté :
Remise du travail :
Durée :
20% de la note finale.
2 personnes (déterminé en classe par les enseignants).
Mercredi, le 21 août 2013 à 12 h 35.
Vendredi, le 30 août 2013 avant 22 h 00 (heure de fermeture des laboratoires) sur
le serveur « _session5_chute ».
1 semaine, 1 jour et quelques heures
Remarque : Ne pas aller chercher de l'information auprès d'une autre équipe. Dites-vous que ce sont
des firmes concurrentes.
Formation des équipes :
Équipe #
1
2
3
4
5
6
Noms des équipiers
Jennifer Gauvert
Jimmy Houle
Alexandre Baux
Clément Banse
Alexandre Colard
Benoît Proulx
Michel Cantin St-Louis
Marius Rebeyrol
Loïc Pierre
David Beaulieu
Marie-Joêlle
Éléments de compétences
O15N Analyser la conception du projet
1. Participer à l'idéation du projet.
O15Q Contrôler la qualité du produit
6. Corriger le produit.
O15S Vérifier la faisabilité technique du projet
1. Évaluer les contraintes techniques relatives à la réalisation et à la diffusion du produit.
2. Évaluer les possibilités techniques de nouvelles technologies.
O15T Réaliser un produit multimédia en ligne
1. Analyser l'information relative à la conception du projet.
2. Vérifier la faisabilité technique du projet.
3. Planifier l'intégration des médias.
4. Préparer les médias.
5. Intégrer les médias.
6. Programmer l'interactivité des pages-écrans.
7. Contrôler la qualité du produit.
8. Documenter le produit.
9. Archiver le travail.
10. Présenter le produit.
11. Travailler au sein d'une équipe multidisciplinaire.
Mise en situation
Une nouvelle chaîne de télévision pour enfants vient de naître. Cette chaîne est spécifiquement pour les
jeunes de 12 ans et moins. C'est une chaîne de langue française. Il n'y a aucune émission anglophone.
L'image du site de la chaîne doit refléter le public cible et ce que sa programmation propose. Au
préalable, il serait bien d'aller voir la concurrence afin de vérifier ce qui se fait présentement. Les
administrateurs de la chaîne désirent que le site soit mis à jour facilement, donc vous devrez utiliser un
CMS. Le choix du CMS vous sera communiqué lors de la rencontre.
Étant donné que c'est une nouvelle chaîne, il vous est demandé de faire un logo pour le site Web. De
plus, on vous demande de proposer un nom représentatif de l'image de la chaîne.
Finalement, un guide de l'usager devra être rédigé en vue de former les employés de la chaîne pour la
mise à jour du site. Il va sans dire que le document doit être professionnel, imagé et facile à
comprendre. Il en va de votre renom.
Les principales sections demandées sont :
 Accueil
 Grille-horaire : horaire des 7 jours de la semaine.
 Émissions : la liste des émissions diffusée par la chaîne (un minimum de 7 émissions différentes).
Attention, le client ne veut pas un pdf comme le site Yoopa.
 La page informative de l'émission (développez seulement 7 pages différentes). Cette page ne sera
pas accessible à partir du menu, mais à partir de la grille horaire ou de la page contenant la liste des
émissions.
 Webtélé (non développé pour l'instant)
 <nom de la chaîne> sur demande (non développé pour l'instant)
 Vous êtes aussi libre d'ajouter d'autres modules si vous les trouvez intéressants, naturellement une
fois le travail terminé.
Attention : aucun pdf si ce n'est en supplément au site Web.
Matériel :
 La grille horaire : inspirez-vous des grilles horaires déjà existantes sur le Web.
 Au besoin, inventez les informations utiles à afficher sur le site.
 Récupérez les images et informations d'émissions déjà existantes sur le Web en lien avec la chaîne.
Voici quelques sites Web à visiter :
 Yoopa : http://www.yoopa.ca/statique/yoopa-tv/
 Teletoon Retro : http://www.teletoonretro.com/fr/
 Teletoon : http://www.teletoon.com/fr/ - http://www.teletoon.com/fr/schedule/
 Nickelodeon : http://www.nickelodeon.fr/





VRAK.TV : http://www.vrak.tv/
Disney : http://www.disney.fr/disney-tv/
Disney Junior : http://www.disneyjunior.ca/fr/horaire
Netguide : http://www.netguide.com/Chaines-tele-pour-enfants/
Momes.net : http://www.momes.net/television/chaines_tele_enfants.html
Exigences de la chaîne pour le site Web :
 Une mise en page de qualité.

Vous devez utiliser les gabarits déjà existants du CMS. Il est possible d'y apporter des modifications
(PHP, HTML & CSS) afin d'y insérer des éléments visuels à l'image de la chaîne (logo, images, etc.).

Le site doit être visible dans les moteurs de recherche.

La page d'accueil doit être invitante. À vous de nous surprendre.

La page « Horaire » comprend :
- Vous devez produire un horaire pour chaque jour de la semaine (7 jours, 24 heures par jour).
Vous pouvez récupérer des émissions de chaînes déjà existantes.
- Contient une miniature de la photo de l'émission ainsi qu'une courte description.
- Liens vers la page informative de l'émission en cliquant sur l'image de l'émission et sur (le titre
de l'émission et/ou Détails+).
- Au minimum, un lien représentant une émission différente dans chacun des jours de la semaine.
Les liens peuvent se répéter tout dépend du moment de la diffusion de l'émission (voir grille
horaire de sites déjà existants). L'équipe de la nouvelle chaîne s'occupera du reste.
- Il est possible de télécharger la grille horaire en format pdf de l'automne 2013. Nous ne vous
demandons pas de faire une grille horaire complète en pdf. Le contenu du pdf contient
seulement le logo de la chaîne ainsi que le texte suivant : « programmation automne 2013 » et
« du 26 août au 22 décembre 2013 ». C'est tout! Pas de grille horaire.
Exemple (voir seulement l'entête) :
o http://www.vrak.tv/television/horaire/_pdf/vrak_grille_automne_2013.pdf
o http://www.seriesplus.com/polopoly_fs/1.1303038.1375302537!/menu/standard/file/S%C3
%A9ries%2B%20Grille%20A13.pdf.pdf

La page « Émissions » comprend :
- La liste des émissions par ordre alphabétique ou par catégorie.
- En cliquant sur le titre et/ou l'image de l'émission, vous vous rendez à la page à proprement
parlé de l'émission (du programme).

La page de l'émission (du programme) comprend :
- Le titre
- Une image
- Le résumé de l'épisode
- La diffusion et la rediffusion (s'il y a lieu) : le ou les jours de la semaine où est diffusée l'émission.

Les liens vers : facebook, twitter, etc. (fictif).
Au niveau technique :
 IMPORTANT : Pour ne pas entrer en conflit avec les chaînes de télévision présentes sur le Web, nous
vous demandons de sécuriser l'accès à votre site Web. Donc, deux fichiers :
- un .htaccess contiendra l'adresse du .htpasswd et quelques autres options que vous pourrez
définir;
- un .htpasswd qui contiendra le login et le mot de passe;
- pour le login utilisez « tp1 » (en minuscules);
- pour le mot de passe utilisez « prod » (en minuscules);
- de cette façon, à l'interne il sera facile d'y avoir accès sans que l'extérieur puisse voir vos sites
Web. Cela peut éviter bien des problèmes…

Lors de l'installation du CMS assurez-vous qu'il soit à la racine de votre dossier et NON pas dans un
sous-dossier tel que « wordpress ».
Exemple : http://tim.cgmatane.qc.ca/prod/2013/tp1/eq1/ (et là sont vos fichiers…)

Les URL du site doivent être « SEO friendly » c'est-à-dire améliorer l'esthétique, l'utilisation et la
pérennité de vos liens.
Par exemple : http://www.fashion-geektim.fr/?p-123
pour : http://www.fashion-geektim.fr/archivers/123

Les différentes erreurs de validation doivent toutes être corrigées. Le site doit être valide selon le
gabarit choisi.

Le site doit être opérationnel sur les dernières versions des navigateurs : IE, Firefox , Safari, Chrome
et les plateformes PC et Mac (excepté IE).

Vous devez créer deux utilisateurs avec certaines restrictions :
- un compte administrateur;
- un compte éditeur qui a les permissions de : gérer les articles, les pages, les catégories et les
commentaires. Pour certains cela sera les catégories pour d'autres les pages. Tout dépend de
votre gabarit. Un éditeur n'a pas accès aux fonctionnalités offertes par les plugins. Seul
l'administrateur y a accès.
Guide de l'usager :
 Mise en page :
- Un document professionnel, imagé et facile à comprendre.
- En un seul document : page de couverture, avant-propos, table des matières, contenu, courte
conclusion et annexes s'il y a lieu.
- Une pagination du document (excepté sur la page couverture).
- Portez une attention particulière aux captures d'écran, elles doivent être claires et de bonne
qualité pour que nous puissions nous repérer.

Contenu :
- Page couverture : le titre du document « Guide de l'usager », logo et le nom à qui le document
est destiné, le nom des auteurs, la date de parution du document ainsi que le logo et le nom de
votre entreprise.
- Avant-propos : vous pouvez indiquer pourquoi ce document a été créé et qui contacter en cas
de problèmes (adresse de courriel).
-
Table des matières.
Contenu du guide de l'usager à proprement parlé comprend tout ce qui facilite la mise à jour du
site Web en utilisant le CMS :
o se connecter;
o ajouter, modifier ou supprimer un élément dans le menu (incluant l'ordre de parution);
o créer, modifier ou supprimer une page Web;
o ajouter, modifier ou supprimer une émission;
o modifier la grille horaire;
o ajouter ou supprimer des images;
o ajouter ou supprimer le(s) document(s) (pdf) dans la page;
o etc. (en fait tout ce qui est utile pour la mise à jour du site).
les captures d'écran appuieront les instructions données (les textes). De plus, vous devez
identifier clairement sur l'image les éléments spécifiés dans votre texte par des flèches et/ou
des numéros. Évitez autant que possible de mettre la capture d'écran sur une page et les
instructions sur l'autre.
Terminez le document avec une petite conclusion. Cela peut être un mot de remerciement.
Annexes s'il y a lieu
o

Il est primordial que les instructions soient rédigées de façon claire, précise et concise.

Il va sans dire que le document doit être exempt de fautes grammaticales et orthographiques.

N'oubliez pas que ces personnes ne connaissent absolument pas votre système d'administration.

Après rédaction, testez votre guide en demandant à quelqu'un ne connaissant pas les CMS de faire
une mise à jour du site. Ceci afin de vérifier la clarté de vos instructions. Vous ne devez en aucune
façon sauter des étapes dans votre guide. Tout doit être clair pour un néophyte.

Le document sera remis aux employés qui suivront la formation. Donc, le login et le mot de passe
de l'administrateur ne doivent absolument pas figurer dans ce document. Par contre, le login et le
mot de passe de l'éditeur doivent figurer dans le guide afin que les employés ne soient pas obligés
de courir après ledit login et mot de passe.

En étant que vous avez deux types d'utilisateurs, lorsque la tâche est spécifique à l'administrateur,
veuillez l'indiquer.

Il n'est pas nécessaire d'inclure l'installation du CMS dans le guide de l'usager.
Feuille de temps (non pondéré) :
• Une pour chaque membre de l'équipe.
• Notez le temps que cela vous prend pour réaliser ce travail tant au niveau du design, de la
programmation, de l'intégration, etc. Vous aurez probablement à réutiliser ces renseignements dans
le cours Gestion de projet. Ceci est pour vous habituer à comptabiliser vos heures de travail en vue
de la facturation au client.
Biens livrables

Site sur le serveur http://tim.cgmatane.qc.ca/prod/2013/tp1/eqX/ dans le dossier de votre équipe,
le site qui sera placé là sera celui corrigé.

Backup : Dossiers & Fichiers :
- Un dossier contenant :
o tous les fichiers du CMS;
o les fichiers : .htaccess et .htpasswd.
- Un dossier pour les documents :
o le guide de l'usager en format .docx;
o le login et le mot de passe de l'administrateur ainsi que l'url de votre site Web dans un
document à part;
o feuille de temps (1 pour chaque membre de l'équipe).

Compressez le tout dans un dossier intitulé :
TP1_eqX_nomFamilleInitialePrenom_nomFamilleInitialePrenom (.7z ou .zip) et déposer sur le
serveur dans « _session5_chute ».

Impression :
- guide de l'usager (libre de l'imprimer en couleur, pour cette fois, ce n'est pas une exigence);
- login et mot de passe de l'administrateur et l'URL du site;
- auto-évaluation et évaluation par les pairs;
- feuille de temps (1 pour chaque membre de l'équipe).

À noter : Vous pouvez remettre l'évaluation par les pairs directement à l'enseignant, si vous le
désirez, lors de la remise du travail.
Critères d'évaluation
Divers



20%
Sécurité : .htaccess & .htpasswd
Installation du site Web et référencement
Logo du site Web
/3
/2
/2
Site Web
 Contenu, intégration du pdf, mise en page du site
 URLs du site améliorés
 Validation (selon le gabarit)
 Compatibilité sur les principaux navigateurs et plates-formes (Mac et PC)
/35
/5
/5
/8
Guide de l'usager
 Mise en page du document selon les critères demandés
 Contenu :
- page couverture;
- avant-propos;
- table des matières;
- connexion : login & mot de passe;
- clarté, pertinence, précision et concision des instructions;
- intégration des images;
- conclusion;
- etc.
/10
/25
Qualité de la langue
/7
/53
/35
/5
La note sera ramenée sur
Gestion de panique : Jean-Michel Simard et Claudine Billette
Total
/100
/20
Bon travail!