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 Web

Enregistrer au format PDF Formation professionnelle

Initiation à la création de site Web

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

Prérequis

Cette formation est l’appoint technique de la formation sur le cahier des charges. Sans cette connaissance permettant d’aborder la création d’un site Web, cette formation n’a pas véritablement d’utilité.

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-MySQL) 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

Cette formation est un perfectionnement technique de la formation compréhension des techniques de création Web et mise en place d’un cahier des charges dont vous trouverez le descriptif sur cette page et dont vous pouvez télécharger le PDF ici .
Le programme de cette formation n’aborde donc pas la mise en place du cahier des charges pour se concentrer exclusivement sur les aspects techniques de différents langages utilisés dans la création Web.

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.

Rappel sur les pages Web

Afin de bien saisir la mise en page Web, je ferais néanmoins ici un rappel sur :

  • Le zoning
  • Le wireframe
  • L’interactivité
  • Le chemin utilisateur et la navigation
Langage de base : HTML et CSS

Qu’il soit écrit directement ou généré depuis les langages de programmation, le HTML et les CSS sont la base d’une page Web. Ce langage de balise s’est énormément développé depuis ses origines et est passé du statut de langage de structuration à celui de langage de programmation, même s’il garde aussi son premier statut. Nous aborderons donc :

Structuration en balise : définition et propriétés
Structure d’une page HTML

  • Le HEAD
    • Balises meta
    • Les styles
    • Les scripts
  • Le BODY
    • Balises de positionnement
    • Balises texte
    • Balises de formulaire
    • Balises médias et tableaux
  • Le DOM : identificationdes balises pour les CSS
    • Les feuilles de styles en cascade (CSS)
    • Les sélecteurs
    • Les propriétés
    • Les règles CSS
    • SASS et Less : les préprocesseurs
HTML5 et mise en page sémantique

L’idée des balises sémantiques du HTML5 est de permettre une meilleure structuration du document permettant aux robots (pour le référencement) et aux navigateurs (pour l’accessibilité) d’identifier les différentes parties d’une page Web selon leur contenu, non seulement au niveau structurel – qu’est-ce qui est principal ou secondaire dans la page et à quoi sert chaque partie –, mais aussi à l’intérieur d’un contenu textuel, les différents types d’information qu’on y trouve (date, titre, citation, auteur…).

  • Balise de structuration de la page Web
  • Balise sémantique de formatage du texte
    • Balises de type block
    • Balise de type inline
Langages de programmation

Boutique en ligne

La programmation se différencie en deux parties, la programmation côté client et la programmation côté serveur. Elle sert à différentes actions qu’il est important d’identifier tant dans son rapport à l’interactivité qu’à celui avec la donnée.

  • Introduction : définition et algorithme
  • Javascript et JQuery
    • Les différents modes de scripts
    • Les variables
    • Les fonctions
    • Exemples d’action sur la page Web
  • Exemple d’un langage côté serveur : PHP
    • Introduction : type de données et fonctions
    • Focus sur les fonctions echo et print_r
    • L’include PHP
    • Les conditions
    • Les boucles
    • Dialogue avec une base de données : l’extension PDO
    • L’authentification et les sessions
    • Actions sur les textes
    • Traitement de formulaire : méthodes GET et POST
    • Sécurisation d’un site
  • Exemple d’une base de données : MySQL
    • Structure d’une base de données
    • Les différents types de données
    • Les clés et les propriétés
    • Les principales requêtes
  • Aperçu d’Ajax
  • Le .htaccess sur un serveur Web
  • Débogage
    • Les outils d’analyse des pages Web
    • le débogage côté client
    • le débogage côté serveur : fonction tail et fichiers log

Site portail éducatif fait sous spip

CMS

Les CMS sont des outils d’installation de site Web clé en main. Nous installerons donc un CMS de votre choix parmi la liste suivante : SPIP, WordPress, Drupal.

  • Installation et paramétrage d’un CMS
Les outils statistiques

Les outils statistiques permettent de suivre la fréquentation de votre site. Nous parlerons ici de deux outils : Google Analytics et XITI.

  • Paramétrage des outils statistiques
  • Les différentes données statistiques
  • Suivi et interprétation
L’emailing

Emailing relationnel

L’emailing est un outil de communication incontournable en complément (ou seul) des réseaux sociaux. Il nécessite une approche particulière et possède des outils spécifiques. Pour l’étudier nous utiliserons le compte gratuit de Mailjet (https://fr.mailjet.com) la première solution d’emailing certifiée ISO 27001 et conforme au RGPD. Nous aborderons les points suivants :

  • Les différentes plateformes et clients mail
  • Les différentes sortes d’emailings
  • Les statistiques des emailings
  • Technique de construction d’un emailing
  • Les techniques d’envoi
  • La délivrabilité et les certificats mail
  • La base de données client et les règles légales
  • Les messages de retour en erreur
Ressources
  • Ressources HTML
  • Ressources JavaScript
  • Ressources PHP
  • Ressources Linux
Conclusion sur le programme

Ce programme ne fera pas de vous des développeurs, mais il vous permettra d’appréhender les bases qui vous permettront de mieux comprendre les problèmes de développement et le rapport existant entre les différents langages.

Cette formation vous donnera aussi la possibilité de développer par vous même ces connaissances en vous donnant le langage de base nécessaire à l’autoformation.

Enfin, cette formation vous permettra d’aborder le débogage d’un site Web, tout du moins, l’identification des problèmes.

Les exercices

Au fur et à mesure de l’avancée des cours nous commencerons par construire des pages HTM en local (sur l’ordinateur) et à leur attribuer style et bibliothèque de script JQuery.

Pour la partie PHP, il est nécessaire de disposer d’un serveur Web. Il est possible d’installer des simulateurs de serveur (MAMP sur Mac et Wamp sur Windows), néanmoins, il est préférable d’avoir au moins un serveur mutualisé, les simulateurs de serveur ne donnant pas accès à toutes les fonctions. La mise en place d’un serveur mutualisé et d’un nom de domaine qui lui est lié, permet la mise en place de fichier .htaccess et .htpasswd ainsi que la réécriture d’URL.

De plus, pour l’installation d’un CMS et l’utilisation d’une BDD il est nécessaire de disposer d’un serveur MySQL et même si les simulateurs de serveur le permettent, il est, pour le suivi des logs, préférable de disposer d’un serveur en ligne.

Aussi, si vous ne disposez pas d’un serveur, je vous préconise pour cette formation de prendre un abonnement sur https://www.gandi.net/fr/simple-hosting qui vous permettra de disposer d’un serveur et de gérer les noms de domaines. De plus, cet abonnement nous permettra de mettre en place une adresse mail permettant l’étude pour les envois d’emailing.

Le déroulement des cours

Les cours alterneront des exposés théoriques et de nombreux exercices. L’apprentissage des techniques nécessite en effet une grande pratique pour assimiler les différents aspects et techniques qui seront abordés.

Durée et coût de la formation

Formation complète

Pour une formation complète il est nécessaire de compter un minimum de vingt jours à raison de 6 h/j. Dans ce cas, cette formation se déroulera par demie-journée de trois heures espacées de un à deux jours pour laisser à l’apprenant le temps de pratiquer, tout du moins d’assimiler les concepts de base.

Coût de la formation hors trajet : 10 000 €

Formation partielle

La formation partielle consiste à se concentrer sur certaines tâches qu’il sera nécessaire de définir en fonction de prérequis. Le découpage des différentes parties du cours est le suivant (en journée de six heures) :

  • Rappel sur les pages Web : 1 journée
  • Langage de base : HTML et CSS : 4 jours
  • HTML5 et mise en page sémantique : 1 journée
  • Langage de programmation : 7 jours
  • CMS : 2 jours
  • Outils statistiques : 1 journée
  • L’emailing : 2 jours
  • Les ressources : 1 journée
  • Exercices complémentaires et question : 1 journée

Coût de la journée hors trajet : 800 €

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’une connexion Internet et des différents abonnements (que nous mettrons en place) évoqués dans le programme. Les ordinateurs devront disposer d’un logiciel pour la création de codes (Sublime Text, NotePad++, Textwrangle...) et d’un logiciel FTP (CyberDuck, FileZilla...) pour la mise en ligne des fichiers, et bien entendu d’au moins deux navigateurs Web. Un logiciel même minimaliste de traitement d’image sera utile.

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.