Bonjour et bienvenue

Cette page présente la formation Web Designer sur Calais.
Le métier d’intégrateur Web consiste à gérer l’ergonomie, le contenu et l’aspect graphique ou technique d’un site web.
Cela passe par plusieurs phases : étude du cahier des charges, le graphisme, l’intégration et la mise en ligne du site.

Le Graphisme

Certain(s)/beaucoup pense que nous vivons dans un monde dominé par l’image.
Vrai ou faux, notre rôle sera de penser / exposer / créer / contrôler ces visuels.

Pour être francs, sans un ou plusieurs univers graphiques «aboutis» de votre part, je ne ferai pas de vous des graphistes hors-pairs...

Personnellement, j’adore ça. J’essaie donc de vous transmettre mes différentes idées sur le sujet.
J’essaie d’en parler un maximum durant la formation mais faute de temps, soyez conscient que nous ne sommes pas aux beaux-arts !!!
Venez avec un crayon de bois, je fournis le papier.
L’informatique n’est qu’un outil. Vous avez une idée en tête ? Dessinez-là le plus simplement possible sur papier et reproduisez la sur ordi.
C’est souvent beaucoup plus simple et plus rapide.

Ok mais comment nous «reproduisons» ce visuel sur ordi ?

L’un des programmes incontournable des industries graphiques se nomme Adobe Illustrator.
Nous allons pouvoir poser et assembler des «formes» géométriques simples, mais bien évidemment créer des formes beaucoup plus complexes. C’est donc ce logiciel qui va nous permettre de redessiner des objets tels que des logos, pictogrammes et bien plus encore...
En moyenne, j’essaie d’y accorder 3 semaines mais croyez-moi, vous allez être très vite productif... Très certainement mon programme préféré !!!

Vous devez certainement avoir déjà entendu parler de Photoshop ?

Photoshop va nous permettre de travailler nos photos. La liste des possibilités est quasi infinie...
Il va surtout nous permettre de construire nos maquettes Web.
Les visuels créés depuis Illustrator vont pouvoir bien évidemment être rapatrié dans un document Photoshop.

Vous devez vous demander pourquoi 2 programmes informatiques ?

Parce qu’il existe 2 types d’images...

Le Bitmap :

C’est un ensemble / une grille de pixels - C’est le boulot de Photoshop.

Le Vectoriel :

Pour faire simple, c’est le monde des vecteurs / des tracés... une formule mathématique.
Rassurez-vous, c’est «transparent» au niveau d’Illustrator.
Il faut juste comprendre qui fait quoi, mais ça c’est mon rôle de vous l’expliquer !!!

étude de logo rought - Composition logo Illustrator Photoréalisme Illustrator Background photoshop

L’intégration

La formation se nomme «Designer Web»

Nous allons donc parler un peu... pardon, beaucoup de web !!!
Mon rôle est de former des intégrateurs. C’est la personne qui définit l’ergonomie et l’aspect graphique d’un site web. C’est à lui d’y réfléchir.

Les sites web que nous allons encoder nécessites encore une fois un nouveau programme, ce sera Brackets. Mais si vous préférez Visual Studio Code ou bien même Sublime Text, pas de soucis !!!
C’est ce que l’on appelle un IDE (Integrated Development Environment), Environnement de Développement Intégré en Français. Grâce à lui, nous allons pouvoir créer des pages :qui seront «lues» par la suite dans un navigateur Web.

1On commence par le texte en découvrant les différents types de balises : p / h1 / h2 / li...

2On rattache un fichier :C’est l'acronyme de « Cascading Style Sheets » ce qui signifie « Feuille de Style en Cascade ». Le CSS correspond à un langage informatique permettant de mettre en forme des pages web.

Page full texte

3Une fois que vous aurez compris les principes de base des CSS, nous allons améliorer la technique en utilisant le : C’est en gros le même principe que le CSS mais bien plus rapide et surtout mieux «organisé»... un indispensable.

Et les images ?

Il y a énormément à dire sur les images... L’important est de préserver la qualité, tout en essayant d’optimiser leur poids «informatique». Lorsque c’est possible, il faudra privilégier le vectoriel (SVG). Quoi qu’il en soit, il faudra comprendre la compression JPG, préserver la transparence grâce au PNG 32 et plein d’autres joyeusetés !!!

Texte & images

Et ça s’affiche sur Minitel ?

NON, mais partout «ailleurs»... L’un des buts également de la formation est la gestion du RESPONSIVE (en gros, adapter les sites aux différentes périphériques : Ordinateurs de bureau, Tablettes et Smartphones).

  • schema responsive ordinateur
  • schema responsive tablette et smartphone

Les animations CSS

Grâce aux «nouveaux» navigateurs (Chrome, Firefox et Edge), nous avons des possibilités d’animations CSS. Rebonds, pivotement, agrandissement, boucle... c’est fun et pas trop compliqué !!!

Le Framework Bootstrap

La définition de Wikipédia : «Bootstrap est une collection d'outils utiles à la création du design de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.»
Il faut tester pour savoir, vous me direz si vous aimez... ou pas.

Le JavaScript

Il est temps de rendre nos pages web «interactives»

Grâce au langage de programmation JavaScript nous allons pouvoir «animer» nos pages web.
Par exemple, nous aurons la possibilité de déclencher une «action» sur un élément en cliquant sur un autre. Ou bien faire apparaître des éléments lorsque nous scrollons/descendons dans notre page. Beaucoup de Script sont disponibles sur le net, à nous de les comprendre, de les tester et de s’en servir !!!

Le PHP

En préambule, je vous expliquais que mon rôle est de former des intégrateurs.
Il y a beaucoup de métiers dans le monde du Web, dont les développeurs. Ce sont eux qui s’amusent avec le PHP. Nous découvrirons les bases pour faciliter la transmission du projet. Au menu nous découvrirons le «Include» et la création d’un formulaire de contact sécurisé.

Animate

C’est un des programmes de la constellation Adobe.
Il va nous permettre de créer des animations que nous pourrons intégrer dans notre site web. Je complète la formation par un rapide passage sur le montage vidéo.
Faute de temps, je ne peux malheureusement pas vous expliquer Adobe Première ou After Effect. Mon montons donc nos vidéos depuis Photoshop. Simple, rapide et ça fonctionne plutôt pas mal !!!

WordPress

C’est un système de gestion de contenu gratuit. Il permet de monter des sites web rapidement et plus ou moins facilement.
L’avantage et l’inconvénient de WordPress est de «partir» d’une formule existante, pré-montée. En gros, j’ai la possibilité de choisir un thème / modèle et de concevoir mon site.
Des extensions sont disponibles pour ajouter des fonctionnalités supplémentaires (formulaire de contacts, galerie d’images, etc...). Tout fonctionne depuis une interface où vous n’aurez qu’à Cliquer, sans mettre «la tête dans le code».
Donc l’idée principale de ce module WordPress est de comprendre l’interface / la philosophie (lol) WordPress, le choix des différents thèmes, les extensions très utiles, la mise en ligne, et comme nous aimons le code, nous rajoutons une «surcouche» CSS pour adapter le design au cahier des charges.

Le materiel

Possibilité d'accueil :

14 postes

Chaque poste informatique comprend :

  • écran informatique 2écrans 16/9
    1920 x 1080 px
    Connexion ADSL
  • tablette graphique 1tablette graphique INTUOS 4
  • Borne WIFI pour smartphone
  • 2 tablettes tactiles à disposition
  • 1 serveur de développement

Le planning

La formation dure au total (période en Entreprise comprise) :

1 225 heures soit 35 semaines (8 mois et demi).
  • Période d’apprentissage :
  • Le graphisme : 8 semaines
  • L’intégration : 8 semaines
  • Le JavaScript : 2 semaines
  • Le Php : 1 semaine
  • Animate : 1 semaine
  • WordPress : 4 semaines
  • Période en Entreprise :
  • 8 semaines
  • Période de Certifiaction (Examen) :
  • Préparation : 2 semaines
  • Validation du titre : 3 jours

Si "validation" du titre, vous serez en possession du diplome d'état Web Designer (niveau BTS).

Contactez moi !