Par
équipe de 3 à 4 élèves, les étudiants devaient
produire un site événementiel en français pour la sortie du dernier
album d'un artiste au choix (Anderson Paak - Ventura, Khruangbin - Con Todo el
mundo, Roméo Elvis - Chocolat, Little Simz - GREY Area, Jim Guthrie - Below,
Agar Agar - The dog and the future).
Le site devait prendre en compte
l'univers de l'artiste et les objectifs d'une création d'un site événementiel. Après
3 semaines intensives de travail, le
jury final s'est déroulé
le vendredi 31
mai à l'école. Il était composé de professionnels indépendants et formateurs
du secteur comme Sandrine HOUNAT, Jérémy LACROIX, Steeve GOSSET et Dominique
HERNANDEZ.
Un savoir faire pédagogique
L' intégration Web HTML/CSS est la base du métier pour nos étudiants en développement Web à L'école. En effet, dans une équipe en charge de la réalisation d'un projet, les graphistes commencent par penser puis réaliser une maquette ou des mockups que le ou les développeurs de l'équipe devront mettre en place concrètement dans un projet.
Nous avons demandé à Bruno Héritier , professeur en développement Web et Mobile à L'École Multimédia, de nous présenter un peu plus ce projet de LAB201 : Pour cette première
partie du travail, le développeur doit connaitre et savoir manipuler (à défaut
de les utiliser tous lors du même projet) quelques propriétés en CSS clés comme
FLEXBOX ou plus récemment CSS-GRID. Il est également pratique de
savoir intégrer facilement des librairies additionnelles de CSS comme BOOTSTRAP.
En effet, de nombreux templates
développés avec la librairie BOOTSTRAP servent de point de départ au
développeur pour avoir une "ossature" de départ à personnaliser à
souhait ensuite.
Encore au début du
mois de mai avec les Développeurs front end de cette année, nous avons intégré
en pur HTML/CSS plusieurs maquettes avec à la clé des animations se déclenchant
automatiquement ou en cas d'interaction avec l'utilisateur (survol, clique d'un
élémen, etc.) et avons utilisé pour positionner et faire tenir les éléments au
mieux dans chaque section le DISPLAY: FLEX et les CSS-GRID.
Vient ensuite le "code" à proprement parlé : après
avoir reproduit un résultat visuel statique et peu interactif, fidèle à la
maquette, le développeur doit développer les fonctionnalités attendues
telles que la validation des champs dans un formulaire, son envoi, le
traitement des données envoyées et leur stockage dans une base de données, des
animations visuelles plus complexes à mettre en place qu'avec du CSS.
Pour se faire, le JAVASCRIPT est le langage approprié
puisqu'il est exécuté directement en frontend, c'est à dire sur le
navigateur web de l'utilisateur.
Des librairies de code en javascript additionnelles peuvent
être utiles à inclure à des projets javascript toujours dans le but de gagner
du temps en développement de fonctionnalités, donnant la possibilité au
développeur d'utiliser des "bouts de code" tout faits et
personnalisables par la suite. La librairie JQUERY pas encore dépréciée
et toujours d'actualité, peut être utile à intégrer à des projets plus ou moins
basiques en javascript. JQUERY est au JAVASCRIPT de même manière que BOOTSRAP
est au CSS : des briques de code déjà faites à réutiliser.
Nous avons pu apprendre à nous servir de plugins en JQuery en formation notamment en ce qui
me concerne avec les développeurs multimédia de ces deux dernières années.
Pour finir, la constitution et l'administration de base de
données n'est normalement pas quelque chose de faisable en JAVASCRIPT , car
cela demande de développer tout ou partie du projet avec un langage qui
s'exécute côté serveur, à l'inverse du JAVASCRIPT qui s' exécute côté
navigateur directement sur la machine de l'utilisateur (comme dit plus
haut).
Il existe des solutions techniques pour palier à ce problème
et pouvoir sans maitriser d'autres langages que le JAVASCRIPT, administrer des
bases de données et autres fonctionnalités de type back-office : parmi
ces solutions deux services sont à retenir, MOGODB et FIREBASE.
Dans le but d'avoir un premier contact avec ce type de
service et pour des applications et sites web élémentaires, FIREBASE semble
être la ressource la plus adaptée. Personnellement, j'ai eu l'occasion de
former les étudiants en développement multimédia à ce sujet.
J'ai pu constater, en tant que formateur aidant et membre du
jury blanc pour le lab201, que toutes les technologies évoquées plus
haut ont été réutilisées par les développeurs de chaque groupe. Les pages web
des artistes ont été intégrées en
HTML/CSS et JAVASCRIPT.
Certains des développeurs, après avoir reçu la maquette à
intégrer ont opté pour l'utilisation d'un template en BOOTSTRAP pour ne
pas avoir à recréer du style concernant notamment les formulaires
d'inscription, de connexion, ou d'ajout d'une date de concert. Ils ont ensuite
inclus la librairie JQUERY et ont inclus un plugin d'auto-scroll
vertical afin de fluidifier la navigation de l'utilisateur.
Pour gérer l'interface d'administration de la page par le
client à savoir l'ajout, la modification, et la suppression de concert, ils ont
utilisé FIREBASE à l'exception d'un étudiant qui ayant des connaissances en
PHP, à savoir un langage s'exécutant côté serveur, a pu se dispenser de
FIREBASE pour constituer sa propre API en PHP/ MYSQL.
Quelques maquettes de nos étudiants
Below par Julio, Cesar, Camille, Cloé
et Absar




Little Simz par Matthieu, Ismael,
Youri et Oumayema
