# Web - Chaîne de production ## Quelles sont les étapes de la création d'une application Web La chaîne de production d'un site ou d'une application Web peut être décrite en plusieurs étapes, chacune impliquant différents acteurs. Voici un aperçu général des principales étapes et acteurs impliqués : 1. **Planification et conception :** Dans cette phase, les concepteurs, les chefs de projet, les analystes et les clients collaborent pour définir les objectifs du projet, l'expérience utilisateur, les fonctionnalités et les spécifications techniques. 2. **Conception graphique :** Cette étape est assurée par les designers graphiques, qui créent l'interface utilisateur, les maquettes, les designs visuels et les éléments graphiques. 3. **Développement de la partie frontale :** Les développeurs frontend utilisent des langages de programmation comme HTML, CSS et JavaScript pour construire la partie visible de l'application, notamment l'interface utilisateur et les animations. 4. **Développement de la partie backend :** Les développeurs backend utilisent des langages de programmation tels que Python, Ruby, Java, PHP ou Node.js pour construire les fonctionnalités côté serveur, gérer les bases de données, les API et les intégrations externes. 5. **Tests et qualité :** Des équipes de testeurs effectuent des tests fonctionnels, de sécurité, de performances et d'accessibilité pour s'assurer que l'application est de haute qualité et répond aux normes. 6. **Mise en production et maintenance :** Une fois que l'application est testée, elle est mise en ligne. L'équipe d'exploitation de l'application gère l'hébergement, la surveillance, la maintenance et les mises à jour régulières pour garantir que l'application reste stable et sécurisée. Dans chaque étape de cette chaîne de production, les acteurs impliqués peuvent varier en fonction de la taille de l'équipe, du budget et des ressources disponibles. Cependant, une collaboration efficace entre les différents acteurs est essentielle pour garantir la qualité de l'application finale. ## Les différents acteurs Pour bien situer les rôles de chacun dans le processus de création d'un site internet, voyons comment fonctionne la chaîne de production au sein d'une agence web. <!-- ![](https://i.imgur.com/wDqCvO7.png) --> |Wireframer|Designer|Intégrateur|Développeur| |---|---|---|---| |Rôles|Rôles|Rôles|Rôles| |Il définit l'arborescence et la structure de chacune des pages du site, Pour cela. il produit un "wireframe" qui sera le document que devra respecter l'équipe de design: emplacement du logo, du menu, slider animé. zone de contenu|Le designer en se basant sur l’identité visuelle du client et sur le wireframe produit une maquette graphique. C'est le concept visuel du site. Ce à quoi il devra ressembler. A cette étape les pages ne sont que des images.|Il va créer une maquette fonctionnelle en se basant sur la maquette graphique. Ce nouvel outil permettra d'avoir un rendu réel du site dans un navigateur. Mais les contenus sont factices. Comme un squelette.|Il va utiliser le squelette créé par l'intégrateur et y "lnjecter" les contenus réels. Il va rendre le site administrable par le client et mettra le site en ligne| ![](https://i.imgur.com/MoyNWqy.png) <!-- ```mermaid flowchart LR a((1)) --- b((2)) --- c((3))--- d((4)) e(Structure)-.-f(Visuel)-.-g(Fonctionnel)-.-h(Production) ``` --> ## Les étapes de production **1. «Structure» avec le wireframer ou prototyper** Nous retrouvons le wireframer ou prototyper. C'est la personne qui devra construire une arborescence et concevoir l'organisation des informations de façon cohérente et adaptée à la cible d'utilisateurs visée. Il produit donc un document de référence, comme un croquis de ce à quoi le site et sa structure devront ressembler. **2. «Visuel» avec designer ou web designer** Il va produire une maquette graphique à l'aide du logiciel comme _Photoshop_, _Adobe XD_, etc Pour produire cet outil, il se basera sur le wireframe. Certaines contraintes graphiques peuvent l'amener à apporter quelques modifications au wireframe. La maquette graphique produite devra reproduire les principaux modèles de pages nécessaires au projet. Par exemple, il y aura une maquette pour la page d'accueil, une autre maquette pour la page contact, ou encore une autre maquette pour une page particulière. Cela dépend des projets. **3. «Fonctionnel» avec l'intégrateur web** Il dispose de deux outils complémentaires pour produire la maquette fonctionnelle du site : le wireframe et la (ou les) maquettes graphiques. Il va créer les pages au format HTML en utilisant les feuilles de style au format CSS et en complétant certaines actions ou effets visuels avec du Javascript (ou jQuery). La maquette fonctionnelle produite est lisible dans un navigateur web (comme Firefox, Internet Explorer ou Chrome). Mais cette maquette ne contient que des données factices (appelées «lorem»). L'outil produit permet de s'assurer que le gabarit du site fonctionne correctement sur tous les navigateurs et de façon uniforme. Le code produit par l'intégrateur web est l'équivalent d'un squelette visuel et fonctionnel qui va être utilisé par le développeur web. **4. «Production» avec le développeur web** Il va utiliser la maquette fonctionnelle comme squelette visuel et va «injecter» les contenus réels et les fonctionnalités du site. La plupart du temps en reliant ces éléments à une base de données. La base de données permet de manipuler de façon sécuritaire et indépendante les contenus du site sans modifier directement le code du site. Pour manipuler ces contenus, le développeur va installer un CMS (Content Manager System), comme Drupal ou WordPress. Ces «plateformes» intermédiaires permettent d'éditer, ajouter, supprimer du contenu de façon standardisée sur tout le site selon les contraintes qu'aura choisi le développeur. Parfois (même souvent), l'intégrateur web s'assure lui-même de relier un CMS à la maquette fonctionnelle. Le travail d'intégrateur s'étend donc parfois au delà de son rôle initial, et il revêt le costume de développeur web ! <!-- réf https://www.alticreation.com/integrateur-web/ --> :::warning Il est important de noter que les étapes de production peuvent varier en fonction des projets et des équipes, et que certaines étapes peuvent se chevaucher ou être effectuées simultanément. Par exemple, la conception et la conception graphique peuvent être effectuées en parallèle, et le développement frontend et backend peuvent être intégrés à mesure que le projet progresse. :::