Les films en plein air Spécifications fonctionnelles

PLAN DU DOCUMENT

  1. Les attentes et coûts du projet
  2. L'arborescence du site
  3. Contenu des différentes pages
  4. Spécifications techniques
  5. Parcours utilisateur
  6. Wireframes, chartre graphique et maquette

1. Les attentes et coûts du projet

La cliente organise une projection de cinéma sur plusieurs jours au parc Monceau, intitulé « Les films de plein air ». Elle y projètera des films d’auteur dans une intention de faire découvrir ce type de cinéma.

  • Fonctionnalités
  1. Site vitrine, pour présenter le festival et la liste des films, ainsi que son concept (découverte du cinéma d’auteur, projections en plein air)
  2. Ajout régulier de news
  3. Système de pré-incription pour chacune des soirées
  • Autres attentes
  1. Chartre graphique
  2. Adresse profesionnelle et hébergement
  3. La présence en ligne avec un site Internet implique une stratégie de référencement sur la base de quelques mots clés à définir.
  • Coûts directs du projet
  1. Hébergement du site web
  2. Création d'une adresse mail professionnelle

Le seul achat direct est l’hébergement du site. La souscription chez l’hébergeur donne souvent une année de nom de domaine et la possibilité de créer des adresses mail personnalisées. Une année est largement suffisante dans notre cas car l’évènement a une durée bien précise.

2. L'arborescence du site

3. Contenu des différentes pages

HOME contiendra une présentation générale du festival (concept, lieu, animations) et affichera les 3 dernières news postées par la cliente

PROGRAMME présentera les films projetés durant les différentes soirées et les dates de représentation. Sur cette page chacune des dates offrira une redirection vers le formumlaire d’inscription.

INSCRIPTION contiendra le formulaire d’inscription pour les différentes dates.

NEWS regroupera toutes les news postées classées par date, par ordre décroissant.

CONTACT affichera les mentions légales, les partenaires et permettra l’envoi de mails à l’organisatrice.

4. Spécifications techniques

En vue de développer le site et ses différentes fonctionnalités j’utiliserai plusieurs outils :

  1. Balsamiq Mockup pour les wireframes
  2. Canva.com et Adobe Color CC pour la création de la chartre et maquette graphique
  3. Un framework CSS pour la mise en page
  4. PHP et MySQL pour l’ajout et l’affichage des news, ainsi que le système d’inscription.
  5. Ckeditor, plugin JS de mise en forme de texte
  6. Google Captcha
  • Wireframes et graphisme

Les deux premiers points se passent presque de commentaire :

Les wireframes seront créés en vue d’offrir à l’utilisateur un parcours et une expérience fluides et naturels.

La chartre graphique sera réalisée pour coller à des standarts modernes, et à l’univers de la cliente et de sa cible.

Les outils ont été choisis pour offrir un résultat visuel professionnel, alors même que ces aspects ne font pas partie intégrante du travail ou des compétences d’un développeur.

  • Framework CSS

Il faut tout d’abord une structure HTML/CSS au site. Pour cela je choisi de m’orienter vers du CSS grid-layout, je choisis d’utiliser KNACSS un framework développé par l’excellent Raphaël GOETER.

L’essentiel de la mise en page s’effectuera par cet outil, une feuille de style sera créée pour les autres modifications visuelles

  • PHP et MySQL

Trois fonctionnalités seront développées avec ces technologies :

  1. L’ajout régulier de news par la cliente et son affichage
  2. L’incription des visiteurs sur une date de projection
  3. L’envoi de mails via la page contact

Nous utiliserons la base de donnée pour stocker les news et les informations des inscrits (nom, prénom, mail, numéro et soirée(s) choisie(s)).

La cliente aura accès à un espace d’administration authentifié pour manager le site, c’est à dire pour ajouter du contenu ou consulter la liste des inscrits.

Chaque news se présentera sur une forme pré-établie, c’est à dire un titre, une image et du contenu. L’ajout d’une nouvelle news sera réalisée via un formulaire, traité ensuite par un script PHP pour son intégration dans de la base de données.

CKeditor, un plugin javascript sera intégré pour permettre à la cliente de faire de la mise en forme du contenu de l’article

L’affichage des articles ajoutés sera géré sur les pages HOME et NEWS via un appel à la base donnée et un traitement PHP.

Sur la page INSCRIPTIONS on trouvera un formulaire permettant de prévenir de sa présence à l’une des soirées de projection. Les wireframes donneront le format et les données demandées dans ce formulaire. Le captcha Google sera intégré pour éviter les inscriptions factices.

La page CONTACT contiendra un formulaire permettant l’envoi d’un mail par le visiteur du site ; l’envoi se fera directement sur l’adresse mail créée au moment de la location d’une solutions d’hébergement.

Ainsi chacune des fonctionnalités demandées est prévue, et les autres attentes de la cliente seront comblées (hébergement, adresse mail pro, graphisme).

5.Le parcours utilisateur

L’utilisateur arrive sur la page HOME et prend connaissance de l’évènnement, de son concept. L’utilisateur a alors accès aux informations essentielles : dates, lieu, dernières news, découverte du système d’inscription.

L’étape suivante serait d’aller consulter le programme. Un fois qu’il est accroché par le concept et qu’il a pu vérifier la possibilité pour lui de se rendre à l’évènement (date, distance), il va s’informer plus en détail sur le contenu.

De là deux choix possibles : soit il va directement sur la page des inscriptions, soit il se rend d’abord sur la page NEWS en vue d’avoir d’autres éléments de décision. Notons que la page NEWS sera également consulée par des visiteurs inscrits, curieux d’en savoir plus.

La page CONTACT présentera les différents partenaire et laissera au visiteur la possibilité de contacter l’organisatrice en cas de besoin.

À AJOUTER :

WIREFRAMES

CHARTRE GRAPHIQUE

MAQUETTE

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.