Festival de films en plein air

Voici le tout premier projet que j’ai réalisé sans CMS (comme WordPress par exemple), uniquement à l’aide des langages suivants : HTML & CSS. ☺️

Ici, une association m’a contacté pour réaliser le prototype d’un site web pour un futur festival de films, qui prévoyait de faire en plein air. Pour confectionner tout ça, l’association m’a envoyé un mail, afin que je débute ce travail dans les meilleures conditions possibles. Justement, voici le mail que j’avais reçu à l’époque :

Mon association “Les Films de Plein Air” vient d’obtenir l’autorisation de projeter au parc Monceau cette année, chaque soir du 5 au 8 août, de 18 heures à minuit. Je souhaite ainsi faire découvrir des films d’auteurs indiens au grand public.
J’ai besoin de communiquer sur le festival en amont et j’ai besoin pour cela d’une présence en ligne avec un site web. Sur ce site, pour lequel il faudra définir une charte graphique, j’ai besoin notamment de présenter le festival, la liste des films et de communiquer régulièrement sur les dernières actualités du festival.
L’accès aux projections sera gratuit et ouvert à tous mais je souhaite que le public puisse se préinscrire pour estimer le nombre de personnes présentes chaque soir.

À partir de cette communication, j’ai pu lister les fonctionnalités dont avait besoin cette association. Grâce à cela, j’ai ainsi pu définir une solution technique adaptée.

Avant de me lancer sur la réalisation de la première version de leur site, j’ai réalisé un cahier des charges, afin que l’association valide mes idées, et que l’on puisse avancer davantage, et ce dans la bonne direction.

Pour ma part, c’était le tout premier cahier des charges que je réalisais. Au sein de ce cahier, j’ai évoqué des points importants, qui sont le benchmark, la conception graphique, les spécifications fonctionnelles et techniques, et bien entendu le budget. Je ne vais pas détailler davantage la réalisation de ce cahier des charges. Si cela vous intéresse, je vous invite à le consulter en cliquant ICI, et nulle part ailleurs.

Quand je repense au budget que j’avais imaginé pour ce projet, je crois que j’étais parti un peu trop loin là. 🤣

Revenons en maintenant à la confection du prototype. Le site est composé de 6 blocs, avec comme fond, les couleurs du drapeau indien, étant donné que l’association envisageait de projeter des films de ce pays. Le premier bloc présente une image de ce que à quoi peut ressembler une projection en plein air, avec un titre, assez gros pour qu’on le remarque. Le second, est un résumé de l’association. Le troisième quant à lui, présente l’actualité de l’association par rapport à ce festival.

En ce qui concerne le quatrième bloc, je vais en parler plus longuement, car c’est celui-ci où j’ai passé le plus de temps à coder. Ce bloc était destiné à représenter les affiches des films qui seraient diffusées lors du festival. Et je voulais réellement obtenir quelque chose qui attire le regard. J’ai donc joué beaucoup avec l’animation et la mise en forme, à l’aide du CSS. Pour rendre tout ceci encore mieux, j’ai décidé d’intégrer à mon code, une fenêtre de type “modal”. En effet, dès qu’on clique sur une affiche, une fenêtre apparaît. Pour la réalisation de ceci, je me suis inspiré d’un site en ligne bien connu de tous les cinéphiles : IMDb. J’ai donc incrusté des informations utiles sur les films, comme une bande-annonce, pour que les gens sachent à quoi s’attendre, et aille voir réellement les films qui pourraient les intéresser. 👍

Le cinquième bloc était destiné au formulaire, afin que les gens informent l’association, en leur indiquant par exemple, le jour où ils comptaient venir, et pour voir tel film, et non un autre. Je suis resté très simple pour ce formulaire, je n’ai pas cherché à faire quelque chose de fanfaronnant. Et le dernier bloc, c’était un ➕, afin d’intégrer Google Maps au site pour aider les gens à savoir où se situait exactement le festival. Comme ça, ils pourraient s’y rendre sans problème.

Envie de voir à quoi ressemble ce site web ? Vous n'avez plus qu'une chose à faire.

flèche qui permet de revenir au début du site

Ce site web utilise des cookies afin de vous garantir la meilleure expérience possible.