--- title: Projet ciné streaming tags: SEO, wireframe robots: noindex, nofollow author: Giuseppe Militello --- # 🚀 Développement d’une page de promotion pour une application streaming de cinéma d'horreur, thriller & SF ![cover](https://hackmd.io/_uploads/SJ6b1GUUa.jpg) © [Giuseppe Militello](https://www.linkedin.com/in/giuseppe-militello-22406ab0/) - All rights reserved for educational purposes only ## 📝Le concept > Une Agence web nous confie la réalisation d’une application/site promotionnelle pour une diffusion exclusive de films d’horreur, thriller et science fiction en streaming. La promotion a pour but de conquérir des abonnés, en proposant la diffusion de tous les classiques du cinéma d'horreur, thriller et science fiction. Pour cela nous propose d’abord d’analyser toutes les fonctionnalités au travers des deux wireframes. Les spécifications pour le fonctionnement de chaque partie ne sont pas définies. La charte graphique est en cours d’élaboration. ## 📝Organisation > Pour commencer vous devez tout simplement mettre en place une structure html sémantique car le contenu de cette publication est destiné à tout public. Penser à produire un code optimisé pour les moteurs de recherche à l’indexation de l’information et prévoir l’accessibilité pour l’inclusion d’un public en situation d’handicap : lecteur d'écran, version et sous-titre ## 💡Avant de commencer la réalisation > faites une recherche documentaire sur les films que vous voulez afficher : titre, réalisateur, acteur et année de sortie. Pour l'intégration des médias, cherchez les meilleurs formats de photos à intégrer en guise de couverture. Si vous souhaitez ajouter de bandes-annonces cela sera un atout pour votre évaluation. Pour une collection de données regardez ce qui existe : *API rest*. Sans cette partie vous ne pouvez pas commencer à réaliser ou sinon vous pouvez toujours utiliser des placeholder pour les médias. [Voir les Placeholder](https://placehold.jp/en.html) ## 📝Phases de réalisation * Créer un répertoire de travail pour ce projet y compris un dépôt gitHub * Commencer le travail par une maquette statique : pas de mise en forme CSS * Valider la maquette dans le validateur W3C * Respecter les emplacements des éléments vus dans les wireframes * Commencer à réfléchir aux parties fonctionnelles de l'application : formulaire, fenêtre modal et boutons * Respecter le design pattern qui est proposé * Après l’intégration de la charte graphique, revenir sur les fonctionnalités et se préparer à les factoriser dans l'application * Chercher la meilleure méthode pour reproduire le contrôle des événements : envoie des requête et réponse. ## 📝L'arborescence ![arbo](https://hackmd.io/_uploads/HJ2sZMw8T.png) > Cette arborescence peut évoluer voir changer ## 📝Modèle de conception fonctionnel ![design_patern](https://hackmd.io/_uploads/BJGYQWv86.png) ## 🧑‍💻Wireframe : page d'index ![index](https://hackmd.io/_uploads/HknHfzPLa.png) ## Page : Nos films ![nos_films](https://hackmd.io/_uploads/H1w6UMvLa.png) ## Page : S'inscrire ![formulaire](https://hackmd.io/_uploads/SyOdcGP8a.png) ## Page : 🔒️ Se connecter ![se_connecter](https://hackmd.io/_uploads/r1_6azwUp.png) ## Page : Location ![location](https://hackmd.io/_uploads/HkDGEXv86.png) --- Project by Militello Giuseppe