Enseignant
Formateur

Art graphique
Infographie

Denis CHRISTINE

Cours et atelier tout public

Encre, crayon, huile, gouache,... sur papier, carton, toile...
Expression libre, copie, interprétation
Infographie, photoshop®, vectorisation, web :
chromie, retouche, montage, optimisation...

Accueil > Cours et formations > Compréhension des techniques de création Web et mise en place d’un cahier (...)

Enregistrer au format PDF Formation professionnelle

Compréhension des techniques de création Web et mise en place d’un cahier des charges

Le premier travail pour la création d’un site Web

Lors de la création ou de la refonte d’un site Web, il est nécessaire de mettre en place un réel travail de réflexion sur la notion d’application Web, sur les fonctionnalités, les données, les chemins utilisateur et le calendrier de développement et de réalisation de l’outil. Ce travail c’est le cahier des charges.

Introduction

En qualité d’enseignant, mon premier devoir est d’apporter une écoute active pour comprendre les attentes des apprenant·es par rapport à ce qu’ils savent faire, à ce qu’il leur est possible de faire, à ce qu’ils ont envie de faire et à ce qu’ils doivent faire, afin de mettre en place un enseignement adapté à chaque personne. Raison pour laquelle mon programme, fondé sur des thématiques et des techniques adaptées, utilisera différents outils pédagogiques et exercices, en gardant toujours à l’esprit l’idée de progression, et suivant la volonté des participant·es. C’est en sollicitant leur curiosité, mais également par l’observation du travail des autres en groupe, qu’ils et elles seront amené·es à utiliser toutes les techniques dans des champs créatifs inexplorés.

Mon principe pédagogique de base repose sur les rapports existant entre ce que l’apprenant·e veut apprendre, doit connaître et peut accomplir. On ne devient pas chargé de projet du jour au lendemain, mais on peut apprendre à s’inspirer de ce qui existe et créer ce qui nous est utile de façon efficace avec une qualité professionnelle en se basant sur des règles et des méthodes de travail et de recherche.

La formation est toujours adaptée aux besoins de chacun·e, au moyen de travaux qui répondent à leurs souhaits et à leur niveau.

Ainsi, toutes les personnes travaillent sur leurs projets, que ceux-ci soient libres, orientés, imposés ou proposés.

Pédagogie

Présentation générale

Cette formation a pour but de vous permettre d’appréhender, d’utiliser et de maîtriser les bases des différentes techniques nécessaires à l’élaboration, la mise à jour ou la réalisation d’un site Web.

Le Web est composé d’une multitude de techniques, de langages, de besoins matériels et intellectuels et je vous propose à travers ce cours une approche globale pour la création d’applications Web.

Outre les nombreuses connaissances techniques nécessaires à la création d’un site Web, c’est aussi une technique d’analyse du besoin et des protocoles d’avancement dans le projet qu’il faut comprendre et pratiquer lors de la mise en place d’un site.

Ce cours a donc pour but de vous permettre d’analyser les langages de base (langages d’affichage ou de mise en page) que sont le HTML et les CSS et de vous initier aux possibilités des langages de programmation côté client (JavaScript et Jquery) et côté serveur (PHP) afin de vous permettre de mieux appréhender les nécessités de développement relatif au cahier des charges, étape primordiale pour la réussite de votre projet.

Enfin, nous aborderons tous les à-côtés techniques que sont le référencement, les médias, la sémantique, les noms de domaine, l’hébergement ainsi que les outils connexes à votre site comme l’emailing ou la publicité.

Programme

Comment fonctionnent Internet et un site Web

Il est important de comprendre, au moins de façon schématique, la structure d’Internet, l’hébergement et les noms de domaine et ce que représente la connexion à un site Web. Sans cette connaissance préalable, il est difficile d’entrevoir les aspects et nécessités techniques qu’il va falloir prendre en compte lors de l’établissement d’un cahier des charges. Cette partie abordera donc les points suivants :

  • Le FAI et Internet
  • IP local et IP public
  • Cheminement d’une connexion à un site Web : rôle du nom de domaine
  • Internet et le Web
  • Les protocoles HTTP et HTTPS : le certificat SSL
  • Autres protocoles Internet
Le serveur Web

Serveur Web

Parler de serveur Web est souvent un abus de langage pour parler, certes du serveur Web, mais aussi des autres serveurs nécessaires à la mise en place et au fonctionnement d’un site Web. En cela j’aborderais ici :

  • Le type de serveur (physique/virtuel) : la virtualisation, un confort de travail
  • Les serveurs Linux
  • Le serveur Apache
  • Le serveur MySQL
  • Le serveur de Mail
  • Le serveur FTP
Définition du projet

Le site Web dans l’entreprise

C’est la première étape dans l’élaboration d’un projet de Site Web. C’est une étape à la fois simple et complexe. Simple, parce que l’idée de base est souvent simple, complexe, parce que cette idée simple va faire émerger un grand nombre de concepts et de problématiques techniques, va se décomposer en processus plus ou moins évident et doit prendre en compte non seulement son état présent, mais aussi son évolution. Nous aborderons donc ici les notions suivantes :

  • Définition rapide du projet : le but
  • Les cibles
  • Le positionnement du projet dans l’activité de l’entreprise
  • Le positionnement du projet dans la structure informatique de l’entreprise
  • Le positionnement du personnel de l’entreprise face au projet
  • La place du projet dans la communication globale
  • La redéfinition du projet : les fonctionnalités
Définition des données

La définition des données va donner la base pour structurer la base de données (BDD) permettant au site de fonctionner. Il est important de définir ces données et le rapport qu’elles entretiennent entre elles. Cette partie de la formation comprend :

  • Définition de la donnée : type et propriété
  • Utilisation de la donnée : données proposées et données acquises
  • Relation entre données et fonctionnalités
  • La spécificité du contenu informatif : l’arborescence du contenu
  • La méthode Merise de définition et de relation des données
  • Travaux préparatoire pour la base de donnée
  • Mise en place du cahier des charges des données
Le cahier des charges première partie

Cette partie du cours met en place les nécessités de réaction de la première partie du cahier des charges permettant la rédaction du projet dans sa définition globale, c’est-à-dire dans la synthétisation de la description du projet et des données qui lui sont relatives. Elle comprend :

  • Rédaction du projet
  • Analyse de synthèse
  • l’arborescence de navigation : contenu informatique et fonctionnel
  • Correction du projet
Benchmark

Le benchmark est l’étude comparative des services identiques ou similaires. Il est important de réaliser cette étude pour bien définir le projet et son positionnement. Cette partie comprend :

  • Étude des sites concurrents
  • Relevé des usages graphiques et fonctionnels
  • Rapport entre les sites concurrents et le projet
  • Correction du projet (fonctionnalités, données et chemin utilisateur)
Les chemins utilisateurs : première analyse du front-office

Lorsque l’on a défini les fonctionnalités et les données, il est important de se pencher sur les chemins utilisateurs, c’est-à-dire sur les différentes façons dont un internaute (utilisateur) va parcourir et utiliser le site Web. Chaque fonctionnalité va donc être décrite en actions (étape) d’utilisation et ces descriptions vont permettre au développeur de poser les algorithmes de vérification et de réponse du site. Cette partie comprend donc les points suivants :

  • Définition du chemin utilisateur
  • Définition des nécessités de l’interfaçage pour chaque étape
  • Définitions des accès, présentation et utilisation des données par l’utilisateur
  • Synthèse globale
Le back-office

De la même façon qu’il est nécessaire d’appréhender l’expérience utilisateur côté front-office, il est important (et primordiale) de définir celle du côté administration du site.

  • Définition des fonctionnalités du back-office
  • Vérification des données accessibles depuis le back-office
  • Rattachement des services connexes (emailing, SSO, boutique...)
  • Chemin utilisateur du back-office
  • Synthèse globale et vérification sur les données et les fonctionnalités
Étude de l’interface

Une fois que l’on connaît les fonctionnalités et les données qui leur sont utiles et que l’on a défini les chemins utilisateur, on peut se pencher sur l’interface du site. Cette partie comprend :

  • L’interface côté back-office
    • Définition des gabarits
    • Étude du zoning
    • Wireframe
  • L’interface côté front-office
    • Définition des gabarits
    • Étude du zoning
    • Wireframe
  • Les variations responsives : adaptation des fonctionnalités

Remarque : selon la complexité du projet et le planning, le wireframe peut être suivi d’une maquette fonctionnelle (mockup) qui permet de mieux suivre la réaction du site aux sollicitations de l’internaute et de dissocier la partie développement de l’applicatif de la partie développement de l’habillage. Cette partie sera donc traitée dans la partie calendrier de développement.

Charte graphique

L’étude de l’interface est la partie fonctionnelle de l’étude graphique, c’est-à-dire la définition des zones (zoning) et de leur contenu (wireframe). La charte graphique va mettre en place les éléments d’habillage du site Web. Cette partie comprend :

  • Analyse de la charte graphique présente (si elle existe)/mise en place d’une charte graphique générique
    • Le logo
    • La typographie
    • Les couleurs
    • Les formes géométriques
    • L’iconographie
    • Les médias
  • Adaptation ou extension de la charte graphique générique
  • Focus sur les fontes (polices)
  • Iconographie spécifique
  • Traitement des médias
  • Habillage global : la maquette
  • Les différentes formes du responsive
Le développement

Si vous pilotez un projet Web, il y a peu de chance pour que vous le développiez vous-même, il est néanmoins nécessaire pour vous de comprendre les enjeux, les possibilités et de savoir analyser ce que l’on vous propose. Pour cela, un minimum de bagage technique vous est nécessaire. Cette partie aborde donc les points suivants :

  • Sécurisation des serveurs et protocole de communication
  • Les langages côté serveur/côté client
  • Les nécessités de l’accessibilité : structure sémantique du HTML
  • Les nécessités du référencement naturel
  • Le développement : calcul avec et sans changement de page : aperçu d’Ajax
  • La mise en mémoire des données (Session/stockage local – html5)
  • Construction monolithique vs structure en service
    • Service d’identification
    • Service boutique
    • Service d’emailing
    • Service publicité
    • Les API Web
    • L’analyse de fréquentation
    • Le référencement payant
    • Lien avec les réseaux sociaux
  • Bibliothèque, CMS, framework et développement intégral
  • Le paramétrage du serveur Web : structure dépendant de la fréquentation prévue et de la structure des services
  • Calendrier de développement et suivi d’action
  • Le recettage, les outils de débogage et le beta testing
Suivi et maintenance du site et de l’hébergement

Il est important de mettre en place dès la conception du site le type de maintenance, de sauvegarde, de mise à jour et de création de contenus du site Web. Cette partie aborde donc les points suivants :

  • Mise en place des sauvegardes
  • Structure d’évitement de l’interruption de service
  • Mise en place des MAJ du site et du (ou des) serveur(s)
  • Service de création et de modification des contenus
  • Analyse de la fréquentation et webmarketing
  • Webmarketing et communication

Mise en application

La mise en application consistera en la création d’un ou plusieurs cahiers des charges. Chaque étape abordée donnera lieu à une étape de rédaction et de construction en dehors de la partie relative au développement qui nécessite, pour une réelle mise en place, d’une commande et d’un rapport avec des développeurs. De même, la partie esthétique (charte graphique) nécessite pour être totalement finalisée d’un graphiste. Néanmoins, il est possible dans cette partie de réfléchir tant à la charte graphique générique, qu’au logo.

Conclusion

La mise en place d’un projet Web est un travail complexe qui nécessite une grande vigilance et un cheminement structuré. Le rapport avec les prestataires est primordial et doit être maîtrisé, nombre de prestataires profitant de la non-connaissance du sujet pour imposer leur façon de voir et les techniques qu’ils maîtrisent. Cette formation a donc pour but de vous permettre de rester chef de votre projet et de vérifier la cohérence entre ce dernier et sa réalisation.

Durée et coût de la formation

Ces prix sont donnés à titre indicatif et peuvent varier en fonction de la distance, du nombre d’apprenants, de l’étalement de la formation dans le temps et de la durée des séances.

  • Comment fonctionnent Internet et un site Web et Le serveur Web : une journée (6 heures)
  • Définition du projet : une journée
  • Définition des données : une journée et demie
  • Benchmark : une demi-journée
  • Le cahier des charges première partie : TP une journée
  • Les chemins utilisateurs : première analyse du front-office/le back-office : une journée
  • Étude de l’interface : une journée
  • Charte graphique : une journée
  • Le développement : trois journées
  • Suivi et maintenance du site et de l’hébergement : une journée
  • Questions diverses, finalisation du projet et présentation TP : trois journées
Soit quinze jours – 90 heures
- Le coût de la formation est de 2000 € pour une ou deux personnes
- Le coût de la formation est de 3000 € pour trois ou quatre personnes

Conditions de formation

Ces formations sont proposées individuellement et à des groupes de 2 à 4 personnes dans certaines conditions de salle et de matériel.

Le ou les apprenants devront disposer de leur ordinateur ou d’un ordinateur d’entreprise disposant d’un logiciel de traitement de texte, d’un tableur et d’une connexion Internet.

Tout l’apprentissage pratique sera effectué sur des projets menés de A à Z par les apprenants. Ces projets devront être définis par eux. Dans le cas où les apprenants n’ont pas de projets spécifiques ou d’idée particulière de simulation, je leur proposerais des conceptions de sites pour des sociétés fictives à l’activité identifiée.

Demande de renseignements

Cette formation bénéficie d’une déclaration d’activité organisme de formation professionnelle : enregistré sous le numéro 11755677175. Cet enregistrement ne vaut pas agrément de l’état.