Étude préalable. Refonte du site web pour l association «Cinémas d Aujourd hui» DÉCAILLOZ Lucas MASGONTY Julien NECTOUX Mélina

Transcription

1 Étude préalable Refonte du site web pour l association «Cinémas d Aujourd hui» CHARON Nicolas DÉCAILLOZ Lucas MASGONTY Julien NECTOUX Mélina

2 Sommaire I. Présentation de l équipe en charge du projet p. 3 II. Présentation du projet et objectifs du client p. 4 III. Analyse du site actuel existant p. 5 IV. Étude concurrentielle p. 6 V. VI. Communication sur les médias sociaux Planning du projet p. 10 p. 11 VII. Notre proposition p. 12 VIII. Identité visuelle - Charte graphique p. 17 IX. Choix d un CMS et Plugins p. 18 X. Outils utilisés p. 19 X. XI. XII. XIII. Use-case et acteurs Diagrammes d activité Modèle conceptuel de données Annexe p. 20 p p. 25 p

3 I. Présentation de l équipe en charge du projet Nicolas CHARON Chef de projet Nicolas est le leader de l équipe du projet, il est là pour assurer les échanges entre le client et notre équipe. Il sert également à maintenir une charge de travail équitable entre les membres qui travaillent sur le projet. Nicolas surveille et vérifie le travail de chacun et n hésite pas à demander l avis de l équipe pour prendre au mieux ses décisions et rendre les travaux dans les temps impartis. Lucas DÉCAILLOZ Communicant Lucas est le communicant du groupe, il rédige et met en page tous les dossiers relatifs au projet et les discussions avec le client. Il aide également sur la partie graphisme afin d adapter au mieux le site pour le public ciblé. Il apporte notamment ses idées et une participation dans chacun des autres domaines afin d améliorer l expérience utilisateur. Julien MASGONTY Développeur Julien est le membre de l équipe le plus polyvavent, il intervient principalement sur les travaux techniques du projet mais participe également auprès du graphiste afin de réaliser la maquette et penser pour l utilisateur. Mélina NECTOUX Graphiste Mélina, graphiste, à la charge de travail la plus importante dans cette première partie de réalisation du projet. En effet, elle doit apporter ses propres idées, trouver une identité visuelle et une charte graphique adaptée au projet. Suite à cela, elle réalise une maquette qui servira de modèle pour une première intégration. 3

4 II. Présentation du projet et des objectifs du client L association «Cinémas d Aujourd hui» est une équipe qui propose des films de catégorie Art et essai au cinéma Gaumont Pathé de Belfort. Durant le printemps de l année 2015, l association a déjà accueilli un stagiaire, Arnaud Lustrat, ancien étudiant du DUT MMI, pour réaliser une refonte de leur site web. Le problème étant, pour l équipe qui gère le site web, qu ils ne peuvent modifier qu un minimum de contenu, par exemple seulement les films à l affche et les événements à venir. De plus, la partie administrative du site est très mal conçue. Ils souhaitent donc modifier et améliorer leur site pour convenir davantage à leur clientèle mais souhaite également par dessus tout pouvoir améliorer le contenu qu ils peuvent gèrer. Si possible, ils aimeraient garder leur identité visuelle mais changer la mise en page du site pour convenir à leurs principaux clients (adultes de ans) mais également visé un nouveau public, plus jeune. Nous leur proposerons donc une maquette qui conviendrait à leurs critères et qui ne perdrait pas leurs clients habitués, tout en y ajoutant des aspects plus modernes (par exemple : des animations, des effets au survol des liens ou des images, des images en fond d écran,...). Pour eux, la navigation principale doit être réduite, et proposer moins de catégories pour cela ils souhaitent voir apparaître un pied de page qui pourra contenir les archives (un an d archive, pas plus), la présentation de l association ainsi que les mentions légales. La rubrique «Dans le territoire» aura disparue. Sur la page d accueil ils apprécieraient y trouver directement les films à l affiche ainsi que les événements à venir. Un accès direct au site de l association «Entrevues» sera également présent. Ils souhaitent favoriser l accès au site par les navigateurs web sur ordinateurs et ne souhaite pas une version responsive du site. 4

5 III. Analyse du site actuel existant Nous avons réalisé une courte analyse du site actuel de l association : Le site existant est non responsive. Dans son en-tête, il dispose d une grande bannière qu il est possible de changer avec une image, du logo de l association et d une navigation composée de 7 rubriques, dont 2 rubriques qui disposent d un sous-menu. La partie gauche du site correspond à un cadre changeant qui affiche un menu pour se diriger vers les infos pratiques, la programmation et les films/événements à venir, et d un cadre qui présente les actualités. Il y a également une barre de recherche. Cette partie est peu visible par l utilisateur, elle n est pas mise en avant et présente pourtant le contenu principal du site. La partie droite, quant à elle, propose le formulaire d inscription à la newsletter, un lien vers le site du cinéma Gaumont Pathé de Belfort (avec une image), et des liens vers facebook et les archives. Le site ne dispose pas de pied de page. Parmis les pages du site, nous pouvons trouver l accueil qui présente les films à l affiche cette semaine, avec un film par ligne (ce qui signifie une grosse perte d espace), sans informations supplémentaires (exemple : tarifs, horaires, informations du film). Sur les pages film nous trouvons désormais les informations concernant le film lui-même (titre, année, acteurs, synopsis...), rien de plus. La page «Association» présente uniquement leur équipe et leur rôle avec un court descriptif. Le lien «Entrevues» emmène vers une même autre page similaire qui fournit uniquement un lien vers le site officiel du festival (perte de temps pour le client). La partie la plus avancée concerne «Éducation à l image», qui propose plusieurs catégories et un lien vers une page d inscription pour réserver une séance scolaire. (La partie inscription dispose d un calendrier, des écoles et classes ainsi que le professeur associé et les heures et effectifs possibles). La page partenaire offre une liste de leurs associés ainsi que leurs coordonnées, leur logos et noms. Et finalement la page contact avec une carte qui situe l association et leur coordonnées et un formulaire pour leur envoyer des commentaires. 5

6 D après les informations que nous a fourni notre commanditaire, leur site est propulsé par le serveur OVH. La personne dans leur équiqe qui s occupait auparavant de la partie web est partie, et ne leur a laisser aucun accès ni au serveur, ni à la base de données. Leur seule solution étant de se connecter en administrateur sur le site et à ce moment ils peuvent trouver une liste des personnes abonnées à la newsletter, mais ne peuvent faire en aucun cas une sauvegarde ou un export, autrement que par un vulgaire copié-collé. IV. Étude concurrentielle Afin de proposer une maquette adaptée au client et à leur secteur de travail nous avons éffectué une étude de leurs concurrents. Parmis ces concurrents nous pouvons seulement compter le Colisée, le cinéma de Montbéliard (25) qui est le seul autre cinéma à proposer des films de la catégorie Art et Essai près de Belfort grâce à son association «Du cinéma et rien d autre». Ce cinéma ne dispose pas de site internet mais son association oui. Nous nous sommes donc référé à celui-ci et aux autres sites des associations art et essai de la région Franche-Comté tel que «Les amis du cinéma» à Vesoul (70). Les sites web de ces associations proposent le même contenu que le site actuel de l association «Cinémas d aujourd hui», c est-à-dire : - une programmation actuelle - les films et événements à venir - des infos pratiques (tarifs) - des moyens de contact - des archives L association «Les amis du Cinéma» en Haute Saône propose également, tout comme «Cinémas d aujourd hui» une rubrique «École au cinéma» et des partenaires. Au niveau de l aspect graphique, ces sites internets ressemblent à des blogs avec un design très peu élaboré, voir dépassé. Notre client souhaite justement avoir un site web qui se différencie du blog. 6

7 Page d accueil du site de l association «Les amis du Cinéma» Page d accueil du site de l association «Le cinéma et rien d autre» 7

8 Page d accueil du site du cinéma Gaumont Pathé de Belfort 8

9 9

10 V. Communication sur les médias sociaux Concernant leur stratégie de communication, nous avons pu observer qu ils avaient deux pages facebook. Nous en avons parler avec la personne qui s occupe de cette partie, elle nous a avouer ne plus avoir accès à l une des deux. Nous avons discuté des médias sociaux avec notre commanditaire pour savoir si nous devions également intervenir sur leur présence en ligne au niveau des réseax sociaux et ils nous ont répondu que non, afin que l on se concentre au maximum sur la refonte du site web, mais que si nous avions des conseils à leur fournir il n y aurait pas de problème. Néanmoins nous pouvons constater que la page facebook qui est utilisée est plutôt bien gérée et le contenu est mis à jour régulièrement. Afin de prévenir leurs clientèle d une mise à jour prochaine de leur site web nous avons pensé à envoyer, plus tard, un mail aux abonnés de la newsletter dans le but d augmenter le nombre de visite à la sortie de la refonte du site. 10

11 VI. Planning Voici notre planning de travail qui présente les différentes tâches que nous devons réaliser et les délais pour mener à bien le projet. Une version complète de l image, associée à un calendrier est disponible à cette adresse : 11

12 VI. Notre proposition Voilà donc notre proposition pour répondre au mieux à notre client : Le site que nous souhaitons réaliser sera désormais responsive mais ce n est pas la mission sur laquelle nous allons nous concentrer premièrement car notre commanditaire ne souhaite pas un site responsive. Il favorise les visites sur PC. Dans l en-tête de la page il n y aura plus de bannière mais uniquement le logo de l association et une navigation composée de 5 rubriques et un lien direct vers le site du festival Entrevues. Le site est maintenant une one-page et les liens de la navigation mènent donc à des ancres à différents niveaux de la page. Premièrement on trouve une grande image en introduction sur la page, et ensuite les différentes parties qui se situent les unes en dessous des autres. Ce qui correspond à un design plus moderne que leur site actuel. Le premier bloc correspond à la programmation avec les affiches des films du moment ainsi qu une barre de recherche. En dessous des affiches, nous pouvons trouver un lien pour faire apparaitre les films à venir prochainement et un lien vers les archives de l année précédente. Ensuite le bloc des évenements est présent avec un carrousel qui montre les évenements actuels et ceux à venir. La partie suivante présente les 3 catégories d Éducation à l image, avec trois images et un court descriptif pour chacune. Chaque catégorie envoie vers une page où les établissements scolaires peuvent réserver leur séance. Ensuite il y a le bloc Association qui propose une présentation de l équipe et de leur rôle. Les membres de l équipe apparaissent en photo dans un cadre losange ; chacun de ces cadres est cliquable pour pouvoir contacter la personne en question. Dans ce même bloc, un formulaire d inscription à la newsletter est également présent. Finalement, nous pouvons trouver les tarifs dans une dernière partie. Dans le pied de page nous trouvons les mentions légales, un formulaire de contact, l adresse où est située l association, ainsi que les partenaires. Afin de rendre le site encore plus moderne, pour obtenir les informations des films et des événements il suffit de cliquer sur leur affiche pour faire apparaitre une pop-up afin d y trouver une bande-annonce, des images 12

13 et un descriptif (acteurs, date de sortie, durée...). Voici une des maquettes graphiques que nous avons réalisé et sur laquelle nous nous sommes concentré : 13

14 14

15 Depuis la réalisation de cette maquette, nous avons changé les polices choisies afin d offrir une meilleure lisibilité à l utilisateur. 15

16 Arborescence Fiche film Fiche événement École au cinéma Accueil Index Collège au cinéma Connexion Réservations associées Classe audiovisuelle Archives Lien externe Partenaires Entrevues Index contient les parties du site suivantes: Tarifs Présentation association Contact Événements Programmation 16

17 VII. Identité visuelle - Charte graphique Ci-dessus l harmonie colorée choisie qui reprend celle déjà utilisée sur le site actuel. Avec différentes nuances de rouge : ROUGE 1 : #BA2426 ROUGE 2 : #891F24 Et les possibles gris utilisés : GRIS 1 : # GRIS 2 : #4D4D4D GRIS 3 : # GRIS 4 : #B3B3B3 GRIS 5 : #E6E6E6 Ainsi que #FEFEFE qui se rapproche du blanc et #000 qui est noir. Pour les typographies nous avons séléctionné des polices sans empattement comme notre client le préferait : Joesfin Sans pour les titres. Open Sans pour les textes. 17

18 VIII. Choix d un CMS et Plugins Un CMS (Content Management System) est donc un système de gestion de contenu. Nous avons choisi le CMS Wordpress qui est le CMS le plus connu et utilisé notamment grâce à sa facilité d installation. Tout d abord nous avons choisi un CMS car notre commanditaire (Cinémas d Aujourd hui) souhaiterait que nous réalisions un site vitrine pour leur association. Nous pensons que l utilisation d un framework ne serait pas pertinente pour la création de ce site vitrine, puisque ce projet nécessite peu de contenu et de fonctionnalités complexes. Le contenu de ce site devrait donc changer de façon hebdomadaire (d un mercredi à un autre par exemple), de plus, Wordpress détient une gestion facile et intuitive, le gérant du site pourra facilement changer le contenu. Ensuite, le commanditaire nous a confié ne pas avoir de connaissance dans le domaine de la programmation alors qu il souhaiterait avoir la possibilité de tout modifier (même les onglets de navigation du site). Pour éviter de se lancer dans le code sans le connaitre, Wordpress paraît-être un outil adéquat et complet. Voici la liste des plugins que nous allons potentiellement utiliser : - TinyMCE Advanced (éditeur de texte avancé) - Simple Tags (gestionnaire de tags pour les articles wordpress) - WP Google Maps (Plugin Google Maps) - Events Manager (Gestionnaire d événements) - WP-DBManager (Gestionnaire de base de données : export - sauvegarde -...) - Search Everything (Fonctionnalités de recherches avancées) - The Events Calendar (Calendrier - Gestion d événements) - Smart YouTube PRO (Gestionnaire de vidéos) - Booking Calendar (Alternative à The Event Calendar) Lors de la phase de développement du projet, il est possible que ces plugins changent pour d autres, plus adaptés. 18

19 IX. Outils utilisés Afin de travailler sur ce projet, voici la liste des outils que nous utilisons d ores et déjà : Pour les diagrammes et la plannification : - ArgoUML v Microsoft Visio Microsoft Project 2013 Pour les supports de présentation : - Google Slide Online - Microsoft Office PowerPoint 2013 Pour rédiger le contenu : - Microsoft Office Word Google Docs Online - Adobe InDesign CC 2014 et 2015 Pour correspondre et échanger : - Facebook - Google Drive - Mail Pour intégrer : - Microsoft Visual Studio PHP Storm v Brackets v à WAMP - EasyPHP 14.1vc11 Pour la partie graphisme et design : - Adobe Illustrator CC 2014 et Adobe Photoshop CC 2014 et

20 X. Use-case et acteurs Disponible en format complet à l url suivante : 20

21 Authentifications Début Arrivée sur le site Non Oui Administrateur? Professeur / école Oui Authentification Non Authentification Non Succès? Message d erreur + réessayer Succès? Oui Non Oui Message d erreur + réessayer Accès au site Fin 21

22 Édition Début Éditer le site Non Ajouter du contenu? Oui Ajouter Valider Non Oui Éditer du contenu? Éditer Valider Continuer l édition? Oui Non Quitter l édition Fin 22

23 Réservation Début Réserver une séance Choisir film Choisir plage horraire Non Validation? Oui Fin 23

24 VisiteSimple Début Base de données fonctionnelle Affiche un message d erreur Oui Afficher la page Oui Inscription Newsletter? Non Rentrer mail Recommencer Non Mail correct? Oui Inscription validée Consulter à l affiche Présentation de l association... Accueil Non Contact? Oui Accès à la page contact Fin L intégralité des diagrammes d activité est disponible en format complet ici : 24

25 XI. Modèle conceptuel de données Et également disponible à l adresse : 25

26 XII. Annexe Compte Rendu #1 Lieu : Locaux de l association Cinémas d Aujourd hui Durée : 1h30 Participants : Nicolas CHARON, Mélina NECTOUX, Lucas DÉCAILLOZ, Julien MASGONTY Date de la réunion : 17/09/2015 Dernière mise à jour du compte-rendu : 27/09/2015 Lors de notre arrivée, Mégi s est présentée et nous à inviter à entrer dans les locaux de Cinémas d Aujourd hui. Nous nous sommes présentés et avons directement entamé une visite générale du site. Nous avons discuté avec elle de l ancien stagiaire qui avait déjà travaillé sur la refonte du site. Nous demanderons donc à Arnaud Lustrat s il a encore des sauvegardes de son travail afin de récupérer quelques pistes qui ont plu à l entreprise et qu ils aimeraient retrouver dans nos futures propositions de maquette. Ils souhaitent abandonner tout le site actuel et repartir de zéro car il manque de nombreuses fonctionnalités et le site n est plus adapté à leur cible en terme d expérience utilisateur (personnes de 40~45 et public plus jeune). Au niveau de la charte graphique, ils souhaitent garder les mêmes couleurs associées au site actuel et à leur logo : noir, blanc, rouge et nuances de gris. Pour les typographies, ils souhaitent garder des polices standards, et sans empattement afin de ne pas compliquer la lisibilité des titres par exemple. Pour la navigation, ils souhaitent voir apparaître un pied de page avec une rubrique présentation «L association» qui aura disparu du header (en-tête) pour apparaître dans le footer (pied de page) au côté des mentions légales, des archives, des contacts et des partenaires. Le lien dans le menu de navigation : «Entrevues» doit renvoyer directement vers le site officiel sans avoir une page de transition. Le menu de navigation doit donc contenir : - Programmation - Evènements - Entrevues 26

27 - Éducation à l image : École au cinéma/collège au cinéma/classe audiovisuel au lycée La rubrique Dans le territoire peut disparaître. Pour l aspect visuel, ils aimeraient avoir un jeu d animation en hover (survol de lien/image), préfèrent avoir un scroll (défilage, déroulement de la page) horizontal (type bandeau) pour faire apparaître la liste des films à l affiche, à venir et les news. Cf. la maquette d Arnaud Lustrat. Si possible sur les fiches film l arrière-plan serait l affiche du film en image. La fiche film contiendrait : - Titre - Genre - Réalisateur - Année - Langue - Pays d origine - Description / Résumé / Synopsis - Durée - Acteurs - 1 seule image! - 1 bande annonce (Upload de vidéos de différents sites, autres qu AlloCiné et également Upload possible depuis des fichiers locaux) - Mettre des icônes (par exemple Avant-première ou Soirée ) Le serveur du site actuel est OVH. Sur la fiche film et la programmation, il serait possible de voir les horaires pour le jour même sans avoir à cliquer quelque part. Il faut rendre possible l ajout des séances, événements et horaires pour les jours, semaines, mois à venir? (type calendrier?) Ils souhaitent garder des archives pour l année précédente à garder en lien dans le pied de page. Sur la partie d une fiche événement, il doit être possible de fournir les informations principales : titre, date, film, présence éventuelle d un réalisateur etc. et également avoir des emplacements pour ajouter les logos des partenaires. Concernant la newsletter, il faut mettre à jour la fiche type et garder la possibilité d avoir un aperçu de la newsletter. A propos des établissements scolaires, ils souhaiteraient avoir un seul 27

28 et unique identifiant pour tous les établissements (collèges etc.). Ils souhaitent également avoir un meilleur moyen de s inscrire et de gérer le planning pour les séances des établissements scolaires. Ils ne souhaitent pas de modifications du logo. Au sujet de leur page Facebook, nous pensons venir à nouveau pour rencontrer la personne qui gère cette page afin d en discuter avec elle pour savoir si nous devront travailler dessus. 28