Document de projet VALLOIS Lucas ROSSIER Blaise PROGIN René STAUFFER Floraine NOBS Claire-Andrée Projet Multimedia 2013 Université de Fribourg Encadrement CAUHEPE Florence: Gestion de projet, composition et rédaction de contenu DUMONT Cédric: Intégration Web et Réseaux DIAZ Santiago: Création des contenus multimédia Semestre de printemps 2013 1
Table des matières Introduction 5 Présentation générale du projet........................ 5 les objectifs................................. 5 le périmètre................................. 5 les limites.................................. 5 les cibles................................... 5 les risques.................................. 6 Ligne éditoriale.................................. 6 Planification 6 Team....................................... 6 Liste des activités................................. 7 Diagramme de Gantt (initial)......................... 8 Adaptations.................................... 9 Architecture du site 10 Convention pour les dessins des pages..................... 10 Hiérarchie du site.................................. 11 Template des différentes pages......................... 13 page d accueil................................ 13 page rubrique................................ 16 page article................................. 19 Construction du site 22 SEO & Intégration sociale 23 Mots clés..................................... 23 Validation..................................... 23 Optimisation.................................... 27 Interfaces sur réseaux sociaux.......................... 29 Intégration des réseaux sociaux......................... 29 Conclusion 31 2
Annexes 32 [agenda]...................................... 33 [architecture web].................................. 34 [article 1]..................................... 35 [article 2]..................................... 36 [brève 1]....................................... 37 [brève 2]...................................... 38 [brève 3]...................................... 39 [création site web]................................ 40 [gantt]........................................ 41 [mise en ligne]................................... 42 [recherche sujets]................................. 43 [référencement]................................... 44 [rubriques]..................................... 45 [selection autres contenus]............................ 46 [social]........................................ 47 [vidéo]....................................... 48 3
Table des images 1 diagramme................................. 8 2 détail.................................... 8 3 hiérarchie du site.............................. 12 4 page d accueil - version desktop....................... 14 5 page d accueil - version mobile...................... 15 6 page pour une rubrique - version desktop................. 17 7 page pour une rubrique - version mobile................. 18 8 page pour un article - version desktop.................. 20 9 page pour un article - version mobile.................... 21 10 très recherchés................................ 24 11 moyennement recherchés.......................... 25 12 peu recherchés............................... 26 13 mots clés sur un article........................... 28 14 intégration Facebook et Twitter...................... 30 Dernier enregistrement (27.05.13) 4
Introduction Ce document présente les différentes étapes du projet multimédia. Présentation générale du projet les objectifs Réaliser un magazine en ligne (destop + mobile); Informer les étudiants; Promotion de la faculté SES; Interaction avec les réseaux sociaux; Apprendre à travailler en groupe, gestion de projet; Résultat publiable (forme et contenu soignés, référencement). le périmètre Magazine en ligne des étudiants en SES ; Le magazine s adresse aux étudiants, plus généralement à la sphère universitaire; Le contenu doit s inscrire dans les rubriques définies; Le contenu doit être pensé pour le web. les limites Date butoire : 20.05.13. ; 180 heures de travail ; Environs de Fribourg; Ressources humaines. les cibles Monde étudiant, université de Fribourg; 5
les risques Matériel indisponbile; Gestion des délais; Communication au sein du groupe; Le mieux est l ennemi du bien. Ligne éditoriale Notre webzine s intitule Aparté. Aparté s adresse aux étudiants de l Université de Fribourg. Ce webzine est né d un travail commun d étudiants en journalisme. Vidéos, articles et brèves explorent et illustrent la vie des étudiants fribourgeois. Le projet s inscrit dans une nouvelle tendance médiatique; celle du multimédia, du tout en ligne. Planification Team VALLOIS Lucas lucas.vallois@unifr.ch chef de projet ROSSIER Blaise blaise.rossier@unfir.ch web designer PROGIN René rene.progin@unifr.ch web publisher STAUFFER Floraine floraine.stauffer@unifr.ch journaliste NOBS Claire-Andrée claire-andree.nobs@unifr.ch journaliste 6
Liste des activités Chaque activité représentée dans le diagramme précédent est détaillée sur une page. Le détail des charges renvoie au diagramme ci-dessus. Ces pages sont listées en annexes. L ensemble du contenu correspond à un état initial. Ces activités nous ont aidés dans la plannification du projet mais peuvent différées de l état final du projet. Elles sont l image initiale de ce que nous voulions pour notre projet. Le contenu n a pas été mis à jour, ainsi le contenu des articles décrits dans ces feuilles peut différer de ce qui est finalement produit. Les activités selectionnées sont les suivantes: agenda architecture web article 1 article 2 brève 1 brève 2 brève 3 création site web gantt mise en ligne recherche sujets référencement rubriques selection autres contenus social vidéo 7
Diagramme de Gantt (initial) Images tirées d un document généré (VALLOIS Lucas). Figure 1: diagramme Figure 2: détail 8
Adaptations Notre première idée de titre était Apostrophe. Malheureusement, la troupe de théâtre de l université de Fribourg s appelle déjà Les Apostrophes. Il y a donc un problème pour le référencement. Nous avons rebâptisé notre projet: Aparté. Des imprévus (maladie, rendez-vous) ont fait que la vidéo a pris du retard. Nous en avons profité pour avancer le site internet si bien que la vidéo a pu ensuite être terminée dans les temps. Les activités décrites ont été suivies le plus possible tout en adaptant un peu au fur et à mesure que le projet avançait et prenait forme. 9
Architecture du site Convention pour les dessins des pages Nous utilisons des chiffres pour identifier les différents éléments sur le dessin d une page du site. Ces chiffres ont la signification suivante: 0 1 2 3 4 5 6 7 8 Titre du magazine Menu principal liant les différentes rubriques Pied de page Réseaux sociaux La UNE, information mise en avant sur la page Liens vers d autres articles Contenus plus important que celui mis en zone 5 Edito Agenda (dates liées) 9 Article complet (texte + image) 10
Hiérarchie du site Le site se compose de trois modèles de pages différents. Il y a un modèle pour: la page d accueil; une page par rubriques; une page par article. Puisque chaque rubriques et chaque article ont leur propre modèle de page; il est nécessaire d avoir une page HTML par rubrique ainsi qu une page HTML par article. Le site est statique. Une brève est traîtée comme un article. Le site doit pouvoir s adapter à la taille de l écran. Nous utiliserons alors deux feuilles de style CSS pour gérer la mise en forme du site. La page d accueil met en avant les informations les plus importantes du webzine. Depuis la page d accueil, le contenu lié est le suivant: rubriques via le menu principal (zone 1) article le plus important du magazine via la zone 4. articles moins importants mis en avant via les zones 6 autres contenus liés via la zone de liens 5 La page rubrique met en évidence les informations les plus importantes pour une rubrique donnée. Depuis une page rubrique, le contenu lié est le suivant: rubriques via le menu principal (zone 1) article le plus important de la rubrique via la zone 4 articles moins importants de la rubrique via les zones 6 autres contenus liés via la zone de liens 5 La page article met en évidence un article/brève donné. Depuis une page article, le contenu lié est le suivant: rubriques via le menu principal (zone 1) autres contenus liés via la zone de liens 5 11
Figure 3: hiérarchie du site Home - Rubriques - Articles/brèves) agenda - edito - images - social - vidéos La page d accueil peut tout contenir; La page rubrique ne contient pas l édito et l agenda; Finalement, la page articles peut, elle, contenir une image. 12
Template des différentes pages Chaque page a une version desktop et une version mobile. Il y a donc six pages différentes. page d accueil La page d accueil est la page principale. La version desktop contient: (figure 4 ) Le titre du magazine (zone 0) Une barre de navigation vers les rubriques (zone 1) Un edito (zone 7) La Une - info principale (zone 4) Des liens vers d autres articles (zone 6) Une zone réseaux sociaux (zone 3) Un agenda (zone 8) Un pied de page (zone 2) La version mobile contient: (figure 5 ) Le titre du magazine (zone 0) Une barre de navigation vers les rubriques (zone 1) La Une - info principale (zone 4) Des liens vers d autres articles (zone 6) - mais moins que la version desktop Un agenda (zone 8) Une zone réseaux sociaux (zone 3) Un pied de page (zone 2) 13
Figure 4: page d accueil - version desktop 14
Figure 5: page d accueil - version mobile 15
page rubrique La version desktop contient: (figure 6 ) Le titre du magazine (zone 0) Une barre de navigation vers les rubriques (zone 1) La Une - info principale de la rubrique (zone 4) Des liens vers d autres articles de la rubrique (zone 6) Une zone réseaux sociaux (zone 3) Une zone de liens (zone 5) Un pied de page (zone 2) La version mobile contient: (figure 7 ) Le titre du magazine (zone 0) Une barre de navigation vers les rubriques (zone 1) La Une - info principale de la rubrique (zone 4) Des liens vers d autres articles de la rubrique (zone 6) Une zone réseaux sociaux (zone 3) Une zone de liens (zone 5) Un pied de page (zone 2) 16
Figure 6: page pour une rubrique - version desktop 17
Figure 7: page pour une rubrique - version mobile 18
page article La version desktop contient: (figure 8 ) Le titre du magazine (zone 0) Une barre de navigation vers les rubriques (zone 1) L article complet + boutons (partage, j aime) réseaux sociaux (zone 9) Une zone réseaux sociaux (zone 3) Une zone de liens (zone 5) -> tout le contenu est alors lié Un pied de page (zone 2) La version mobile contient: (figure 9 ) Le titre du magazine (zone 0) Une barre de navigation vers les rubriques (zone 1) L article complet (zone 9) Une zone réseaux sociaux (zone 3) Une zone de liens (zone 5) Un pied de page (zone 2) 19
Figure 8: page pour un article - version desktop 20
Figure 9: page pour un article - version mobile 21
Construction du site Le site internet sera un site statique. Comme du contenu créé par les autres groupes doit aussi être intégré, le site aura déjà un nombre de pages important. Il devient alors difficile à maintenir s il faut modifier l ensemble des pages à chaque fois lors d une mise à jour. Il faut être certain des modèles de pages avant de commencer à y insérer du contenu. De plus, le contenu doit être balisé (titres, sous-titres, paragraphe, images, liens,... ). Le travail devient vite conséquent. Afin que le web designer et le web publisher puisse travailler en parallèle, le contenu du site sera séparé des modèles de pages. L ensemble du contenu est écrit en Markdown, un language de balissage léger permettant d écrire du contenu le plus naturellement possible et par la suite de le transformer en code HTML. La librairie php-markdown sera utile ensuite pour parser le contenu et l intéger dans les modèles de pages. Le site sera généré en local et deviendra une version statique qui sera mise sur le serveur. Tous changements, autant dans les modèles de pages que dans le contenu, se fait par la suite très simplement. Le site est en ligne à l adresse suivante: http://homeweb.unifr.ch/proginr/pub 22
SEO & Intégration sociale Mots clés Nous avons tenté de faire une selection pertinente des mots clés. Ci-dessous, notre selection: Aparté Journalisme Médias Articles Étudiant Magazine Université Fribourg Journaliste Web Crise Web 2.0 Etudes Formation Formation Validation Ces termes ont été testés sur: http://www.google.fr/trends avec une recherche centrée sur la Suisse, région ciblée par le magazine. Cela a donné les résultats suivants : 23
Figure 10: très recherchés 24
Figure 11: moyennement recherchés 25
Figure 12: peu recherchés 26
Force est de reconnaître que pour un tel domaine de site web, deux faits s imposent : La recherche du site, et son succès éventuel, se feront principalement par le bouche à oreille, par la promotion sur des réseaux sociaux, et par le cadre de l Université. Il va s agir en quelque sorte de créer une demande qui actuellement n existe presque pas, ou est déjà saturée par d autres sites répondants aux besoins. La plupart des mots-clés liés au journalisme sont en baisse dans les tendances de recherche. En ce sens, il serait donc relativement peu judicieux et peu rentable de créer un magazine en ligne pour ces sujets. La stratégie pour promouvoir le magazine devra donc être appuyée sur le partage des liens vers les articles sur les réseaux sociaux, en particulier sur les pages liées à l Université. De plus, une publicité hors-web devra être faite. Flyers, afin d être distribués dans les corridors Stand (journée d accueil des nouveaux étudiants) Petits événements de promotion (apéro, fête, etc) Optimisation La liste des mots clés sélectionnés, par ordre d importance dans les tendances de recherches sur Google, doit être donnée aux journalistes du magazine, afin qu ils puissent en prendre connaissance et adapter leurs articles, en particulier leurs titres. De plus, la liste des mots clés doit constamment être révisée, ré analysée, et adaptée aux nouvelles tendances et à la réalité du magazine. Concrètement, chaque article doit être écrit et relu de manière à contenir un pourcentage important de mots clés. Nous avons en ce sens différencié 2 types de mots clés. Ceux liés au webzine de manière générale, et d autres, listés spécifiquement pour chaque article, et en lien avec son sujet spécifique. Dans l exemple ci-dessous, les mots clés spécifiques ajoutés sont : job, travail, travailler, AGEF, bourse, stage, annonce, emploi, employeur. 27
Figure 13: mots clés sur un article 28
Interfaces sur réseaux sociaux Une page Facebook a été créée à l adresse suivante : https://www.facebook.com/aparte.unifr L objectif en est de promouvoir les articles qui paraissent sur le site, ainsi que d y inviter à en discuter, à poser des questions, ou à exprimer son avis. Le défi est désormais d y inviter des personnes, pour laisser le bouche à oreille développer l audience de la page. Un lien sera également donné sur la page d accueil du site. Un compte Gmail a été créé, cette adresse pouvant être co-gérée par les responsables du Projet. En plus de permettre de donner une adresse de contact, l adresse sert de base à la création de comptes, notamment sur Twitter. Un compte Twitter a été créé: https://twitter.com/aparteunifr L apparence est calquée sur celle du site, reprenant les couleurs pour permettre une identité visuelle commune. Le Hashtag officel est #ApartéUnifr Intégration des réseaux sociaux Dès que le site sera en ligne, diverses options seront ajoutées : Toutes les pages Icones de liens vers pages Facebook et Twitter Fil des derniers Tweets (zone 3) Articles Bouton Facebook recommander Commentaires Facebook La figure suivante illustre l intégration des réseaux sociaux dans la barre latérale de toutes les pages. On y voit aussi l intégration des modules Facebook (bouton recommander et zone de commentaires). 29
Figure 14: intégration Facebook et Twitter Les fonctionnalités Facebook ne sont accessibles que sur la version en ligne. 30
Conclusion Dans ce travail de groupe, notre équipe a pu expérimenter la gestion de projet. Nous avons réparti les tâches selon les compétences de chaque membre du groupe afin d atteindre nos objectifs de la manière la plus efficace possible. Toutefois, chaque membre du groupe s est toujours tenu au courant de l ensemble du projet. Pendant la réalisation du projet, nous avons combiné travail autonome et travail de groupe en fonction de la nature des tâches. La partie rédactionnelle a été gérée par deux journalistes. Le contenu vidéo est le fruit d un travail de groupe de la définition du sujet jusqu à la production finale par deux membres de l équipe. Finalement, la partie web est produite et gérée par deux membres. Le web designer et le web publisher ont travaillé à la fois ensemble et séparément. Nous avons séparé le contenu des modèles de pages permettant ainsi un travail parallèle. L ensemble du site est généré ensuite à la fin du projet dès que tout le contenu a été édité. Le site internet est donc facilement modifiable et actualisable car l édition de seulement trois pages modèles est nécessaire. Comme dans tout travail de groupe, nous avons rencontré différents obstacles. Nous avons eu des écueils au niveau de la planification des tâches, des empêchements externes tels que les prises de rendez-vous, des mails sans réponse ou encore des problèmes de concordance dans nos emplois du temps respectifs. La planification initiale a été plus ou moins respectée. Sur la base d une certaine autonomie de groupe, l équipe a pu finaliser son engagement. Ce projet restera une expérience plutôt enrichissante pour chacun des membres de l équipe. 31
Annexes Les pages suivantes sont les détails des activités présentes sur le diagramme de Gantt (figure 2). 32
[agenda] Responsable PROGIN René. Participants TOUS. Objectifs Information sur l actualité culturelle. Contenu Evénements, manifestations, fêtes; Concernant les étudiants. Prérequis Se renseigner sur les manifestations prochaines. Livrables Actualisable en continu sur le site. Délais 07.05.13. Charges Voir diagramme Gantt pour le détail; figure 2 33
[architecture web] Responsable ROSSIER Blaise. Participants ROSSIER Blaise. Objectifs Le site est un magazine; Simple; le site doit être réalisable; Privilégier la sobriété. Contenu Dessins des pages; Explication de ce que l on veut faire. Prérequis Ligne éditoriale; Cours Projet Multimedia; Cours Réalisation multimédia en ligne. Livrables Maquette du site; Site utilisable pour le remplissage avec du contenu. Délais 15.03.13. Charges Voir diagramme Gantt pour le détail; figure 2 34
[article 1] Responsable NOBS Claire-Andrée. Participants NOBS Claire-Andrée. Objectifs 250-1000 mots (synthèse/analyse). Contenu Logements/Jobs d étudiants/ (?) Prérequis Prise de contacts. Livrables Article; Illustration; Doit être publiable; Format numérique. Délais 15.04.13. Charges Voir diagramme Gantt pour le détail; figure 2 35
[article 2] Responsable STAUFFER Floraine. Participants TOUS. Objectifs 250-1000 mots (synthèse/analyse). Contenu Fraterie d étudiants. Prérequis Prise de contacts. Livrables Article; Illustration; Doit être publiable; Format numérique. Délais 15.04.13. Charges Voir diagramme Gantt pour le détail; figure 2 36
[brève 1] Responsable NOBS Claire-Andrée. Participants NOBS Claire-Andrée. Objectifs 20-100 mots. Contenu Une actualité universitaire (encore à définir). Prérequis Sujet; Informations synthétisées. Livrables Brève publiable; Format numérique. Délais 05.04.13. Charges Voir diagramme Gantt pour le détail; figure 2 37
[brève 2] Responsable STAUFFER Floraine. Participants STAUFFER Floraine. Objectifs 20-100 mots. Contenu FIFF ou tablettes numériques dans le monde étudiant (encore à définir). Prérequis Sujet; Informations synthétisées. Livrables Brève publiable; Format numérique. Délais 05.04.13. Charges Voir diagramme Gantt pour le détail; figure 2 38
[brève 3] Responsable VALLOIS Lucas. Participants VALLOIS Lucas; PROGIN René. Objectifs 20-100 mots. Contenu Moodle, gestens, myses, pages personnelles: comment s y retrouver dans cette jungle informatique. Prérequis Informations synthétisées. Livrables Brève publiable; Format numérique. Délais 05.04.13. Charges Voir diagramme Gantt pour le détail; figure 2 39
[création site web] Responsable ROSSIER Blaise. Participants TOUS. Objectifs Le site est un magazine; Créer le site selon l architecture retenue. Contenu HTML/CSS; Projet structuré; Doit être publiable (liens relatifs par exemple). Prérequis Ligne éditoriale; Cours Projet Multimedia; Cours Réalisation multimédia en ligne. Livrables Maquette du site. Délais 15.04.13 (selon diagramme, mais avant!) Charges Voir diagramme Gantt pour le détail; figure 2 40
[gantt] Responsable VALLOIS Lucas. Participants VALLOIS Lucas. Objectifs Planifier le projet. Contenu Délais, livrables, tâches, organisation en groupes. Prérequis Connaissance du programme générant le tableau; Cours Gestion de projet. Livrables Diagramme sous format numérique. Délais 19.03.13. Charges Voir diagramme Gantt pour le détail; figure 2 41
[mise en ligne] Responsable PROGIN René. Participants PROGIN René; ROSSIER Blaise. Objectifs Mettre le contenu en ligne; Contrôler la bonne liaison des pages. Contenu Site opérationnel et enrichi. Prérequis Structure du site. Livrables - Délais 26.04.13. Charges Voir diagramme Gantt pour le détail; figure 2 42
[recherche sujets] Responsable VALLOIS Lucas. Participants TOUS. Objectifs Trouver un sujet pour la vidéo; Trouver des sujets pour les articles, brèves. Contenu Réunion de discussion, décision pour un sujet vidéo (sport universitaire/offre en restauration). Prérequis Ligne étitoriale. Livrables 09.03.13. : brèves, articles provisoires. Délais Vidéo : fin avril. Articles : mi-avril. Brèves : début avril. Charges Voir diagramme Gantt pour le détail; figure 2 43
[référencement] Responsable PROGIN René. Participants NOBS Claire-Andrée; STAUFFER Floraine. Objectifs Le site doit être rapidement accessible via les moteurs de recherche; Apprendre à référencer un site techniquement. Contenu Choix des mot-clefs pertinents. Prérequis Cours sur le référencement. Livrables Le site doit être reconnaissable par les moteurs de recherches. Délais 25.04.13. Charges Voir diagramme Gantt pour le détail; figure 2 44
[rubriques] Responsable Groupe A (rubriques communes). Participants Groupe A (rubriques communes). Objectifs Définir 4-5 rubriques réunissant l ensemble du contenu du magazine. Contenu Rubriques pouvant être ensuite intégrées au plan du site. Prérequis Connaître les différents sujets par team. Livrables Les rubriques sont définies et utilisables. Délais Déjà défini avec le Groupe A. Charges Voir diagramme Gantt pour le détail; figure 2 45
[selection autres contenus] Responsable PROGIN René. Participants TOUS. Objectifs Enrichir le site avec le contenu (pertinent) des autes groupes. Contenu Articles; Brèves; Vidéos. Prérequis Travail des autres groupes. Livrables Site/magazine enrichi avec cohérence (rubriques). Délais 17.05.13. Charges Voir diagramme Gantt pour le détail; figure 2 46
[social] Responsable PROGIN René. Participants PROGIN René; ROSSIER Blaise. Objectifs Faire vivre le site sur les réseau sociaux; Gestion des réseaux sociaux; Interaction du site. Contenu Facebook; Twitter. Prérequis Structure du site; Création des pages sur les réseaux sociaux. Livrables Widget integrable au site? Délais 17.05.13. Charges Voir diagramme Gantt pour le détail; figure 2 47
[vidéo] Responsable VALLOIS Lucas. Participants TOUS. Objectifs Réaliser une vidéo pour le web en respectant au mieux les critères enseignés. Contenu Storyboard; Vidéo. Prérequis Storyboard; Matériel vidéo; Final Cut R. Livrables Vidéo montée; Doit être publiable (format). Délais 26.04.13. Charges Voir diagramme Gantt pour le détail; figure 2 48