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 > Initiation à la création de site internet

Enregistrer au format PDF Formation professionnelle

Initiation à la création de site internet

Approche globale pour la création d’application web

Par une approche globale, le but de ces ateliers est double.

Permettre une véritable compréhension du fonctionnement d’un site web et devenir le plus autonome possible dans sa création, sa gestion et son actualisation.

Introduction

Complexité d’Internet

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

Mon principe pédagogique de base repose sur les rapports qui existent entre ce que l’apprenant veut apprendre, doit connaître et peut accomplir. On ne devient pas webmaster du jour au lendemain, mais on peut apprendre à s’inspirer de ce qui existe, savoir chercher et trouver des solutions, on ne devient pas développeur par la simple volonté, mais on peut 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.

L’atelier est toujours adapté aux besoins de chacun, par le biais de travaux qui répondent à leurs souhaits et à leur niveau.
Ainsi, tous travaillent sur leurs projets, que ceux-ci soient libres, orientés, imposés ou proposés.

Pédagogie

Présentation générale

Page d’accueil d’une page pro

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 Internet.

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 à donc pour but de vous permettre de pratiquer les langages de base (langages d’affichage ou de mise en page) que sont le HTML et les CSS et de vous initier aux 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 définition du besoin et cahier des charges

Le premier travail dans la création d’un site Internet n’est pas un travail technique, mais un travail de réflexion. Il est nécessaire de définir non seulement les fonctionnalités du site en question, mais pour cela il est primordial d’en définir la cible : à qui s’adresse-t-on ? Selon la cible on sait si les différents chemins d’accès aux fonctionnalités devront être très accompagnés ou non. On ne s’adresse pas de la même façon à des jeunes et à des personnes âgées !

Un fois cette cible définit, il est nécessaire d’en déterminer les services et donc les fonctionnalités.

Le cahier des charges

Site portail éducatif

Le cahier des charges présente ces différents éléments et il est important de le constituer de façon précise et exhaustive. Il doit aussi incorporer les différentes possibilités d’évolution, voir les étapes de version du site.

Le cahier des charges contient aussi les chemins de fonctionnalité de chaque service proposé, ce qui est accessible avec et sans identification, ce qui nécessite des chemins de pages ou des interactions directes (sans changement de page)... Ces chemins sont d’une extrême importance, car ils vont influencer non seulement le graphisme, mais aussi les choix techniques.

Ce cahier des charges se compose de deux parties : front et back-office, c’est-à-dire ce qui est du côté de l’internaute et ce qui est du côté du ou des administrateurs, rédacteurs et « client » du site.

Enfin, on intègre dans ce cahier des charges l’organisation du contenu et les divers moyens de navigation directs et transversaux.

Contenu textuel (cahier des charges sémantique)

On commence par définir l’organisation de son contenu et les différents chemins d’accès aux différents éléments de ce contenu.

Il est aussi important de savoir comment on construit ces textes. Les textes sont à la base du référencement naturel et il est important de les construire en respectant quelques règles de base sur leur hiérarchisation, leur titraille, et les mises en exergue. Cette construction influencera aussi le graphisme. On voit aussi ici les impératifs légaux en terme de mentions légales.

Le cahier des charges graphique : la D.A.

Une fois que l’on sait à qui s’adresse le site et ce qu’il propose, il convient d’en établir la forme graphique. Cette forme graphique doit intégrer non seulement l’identité du site, mais chaque étape de fonctionnalité. La D.A. aborde donc deux aspects : l’esthétisme et l’ergonomie, et sans un bon cahier des charges, on se retrouve souvent à devoir bidouiller des choses de dernières minutes qui nuisent à la bonne homogénéité du site. En cela nous aborderons la notion de Wireframe.

Le cahier des charges technique

Boutique en ligne

Une fois que l’on sait ce que l’on veut faire et quel aspect ces choses auront, il est nécessaire de déterminer comment on les fait. Les différents langages de programmation web présentent divers avantages et inconvénient en utilisation de ressource machine du côté de l’internaute ou du côté serveur (hébergeur). Il est donc important d’évaluer la fréquentation, et le type d’hébergement que l’on va utiliser ainsi que le type d’ordinateur de la cible.

Une fois ces paramètres déterminés, il convient de construire à proprement le cahier des charges techniques qui présente les solutions pour chaque aspect de l’administration et des services proposés par le site.
Mise en place d’un calendrier des travaux
Cette partie présente la nécessité d’établir un calendrier des travaux, surtout face au travail en équipe, et présente les notions de maître d’ouvrage, et de livrable.

Le graphisme

Selon que vous possédez ou non déjà une charte graphique pour vos autres outils de communication, le cheminement est différent. Globalement, on part du logo.

Pour le reste, la charte graphique doit représenter chaque type de page et chaque interactivité sur chacune d’elle. Il est important de prendre en compte dès la conception de cette charte graphique, les limites et difficultés de l’intégration web, même si presque tout est possible. Une charte graphique web doit être au pixel près et prendre en compte les différents aspects de la consultation Internet : c’est le responsive design.

Les choix techniques

La première préoccupation est le choix de l’hébergeur, du type d’hébergeur et du service de nom de domaine. Ce sont des domaines qui paraissent secondaires, mais qui sont en fait primordiaux pour aborder sereinement le développement et l’évolution d’un site Internet.

Le deuxième choix est double : choix du langage de développement côté serveur (PHP, Ruby, Perl, ASP...) et le choix de l’utilisation ou on d’un CMS (SPIP, Joomla, WordPress, Drupal...), car selon le choix du langage de programmation il est plus ou moins facile de trouver un CMS.

Le troisième choix est l’utilisation plus ou moins importante de langage de programmation côté client (c’est-à-dire du côté de l’ordinateur de l’internaute). On trouvera principalement l’utilisation du JavaScript et des bibliothèques JQuerry.

Emailing commercial

Programmes : les technique web

Aperçu des différents choix d’hébergement

J’aborde ici les notions de base nécessaires à la compréhension ds aspect technique d’un hébergement web et les différents choix possibles de services auprès d’opérateur tel OVH, Gandi, Ikoula et page perso des providers Internet. On distingue principalement deux types d’hébergement : les hébergements mutualisés et les hébergements dédiés. Il est aussi important de regarder la gestion des noms de domaine et des adresses mail liées au site.

Initiation à l’intégration web

L’intégration web est le passage de la maquette (faite sous Photoshop) au langage permettant à cette maquette de se transformer en page web.Retour ligne automatique
Cette partie présente les règles de base du HTML et des CSS. On y aborde entre autres l’utilisation de grille pour la mise en page web, les balises HTML et les règles de CSS.

On y retrouvera aussi l’utilisation des balises texte et leur importance dans le référencement naturel.

Traitement des médias

J’aborde ici les différents formats et traitements des médias. J’y parcours les formats et l’optimisation des images, ainsi que l’intégration des médias sonores et vidéo.

Les langages de programmation

Nous aborderons ici une initiation à trois langages de programmation :

  • PHP : langage côté serveur, c’est-à-dire que ce que « calcule » ce langage est fait par le serveur qui héberge votre site. Il permet entre autres l’envoi de formulaire, les relations entre votre site et une base de données, le traitement des données...
  • JavaScript et Jquery : langage côté client, c’est-à-dire que c’est votre navigateur (et donc votre ordinateur) qui fait les calculs. Ce sont des langages qui permettent de gérer l’interactivité.
  • Mysql : langage côté serveur, est le langage par lequel PHP passe pour rentrer en relation avec votre base de données.
Outils de reporting et référencement naturel

J’aborde ici les deux principaux outils d’analyse de fréquentation des sites Internet : Google Analytics et Xiti. Comment mettre en place le balisage de ces outils et comment interpréter les statistiques qu’ils renvoient.

Pendant naturel de la fréquentation d’un site, le référencement naturel. Il existe quelques incontournables pour optimiser le référencement de son site. Je vous présente ici ces règles.

Emailing relationnel

Emailing

Je vous présenterais, quelques outils d’emailing ainsi que les règles régissant l’envoi d’emailing, de newsletter : règles techniques, déontologiques et d’efficacité.

Publicité

Avoir un espace pub sur son site, mettre des publicités sur d’autres sites, utiliser Google Adword, créer ses pubs, il existe plusieurs formes de publicité sur Internet et il convient de ne pas faire des choses inutiles. Aussi je vous présenterais ici quelques règles à respecter pour que vos publicités, si vous en faites, soient relativement efficaces. Je dis relativement, parce que dans le domaine publicitaire, tout est relatif sur Internet.

Le Projet

Il est nécessaire de travailler sur un projet pour pouvoir intégrer la pratique aux connaissances théoriques abordée durant ce cours. Il sera donc demandé à chaque élève de choisir un projet afin de pouvoir le construire sur toute la partie cahier des charges, et selon la complexité du projet, de le mettre en place techniquement.

Public

Devenez autonomes

Le but de cette formation est de permettre aux professions libérales, PEM-PMI, auto entrepreneur, artisans de devenir autonome dans leur approche des problématiques web et de pouvoir, si ce n’est créer leur propre site pouvoir diriger l’élaboration de leur projet en connaissance de cause. En effet, en tant que free-lance j’ai souvent rencontré des personnes qui me racontaient leur déboire avec d’autres free-lance ou avec des agences de com, qui leur avaient fait payé cher des outils inadaptés ou inefficaces.

La connaissance que je vous propose vous permettra de mieux appréhender votre problématique et les moyens de la résoudre.

Ce cours se pratique en individuel ou en groupe de deux à quatre personnes devant toutes posséder un poste de travail. Il est limité à quatre personnes afin que je puisse donner à chacun l’attention nécessaire à un enseignement individualisé. Les postes de travail devront nécessairement disposer d’une connexion Internet, si possible (pour la commodité du repérage dans le code source) de Dreamweaver, d’un logiciel type Notepad, Sublime Text ou Text Wrangler, d’un logiciel FTP (CyberDuck ou Filezilla) de plusieurs navigateurs, dont Firefox. Un logiciel de retouche et composition d’image (pour la recherche graphique) type Photoshop sera nécessaire.

Il sera aussi nécessaire d’avoir accès à un serveur web même gratuit (type Free).

Cette formation nécessite un minimum de dix séances pour un survol complet, mais vingt séances sont nécessaires pour un approfondissement des notions techniques.


Le programme de ce cours est défini avec les apprenants en fonction de leurs besoins et de leurs désirs d’apprentissage, du temps qui leur est imparti selon un calendrier qui laisse un le temps, entre chaque séance, de pratiquer ce qui est appris à la séance précédente.