Etre rappelé
Le Lab201 : synergie entre développeurs et graphistes
3 semaines intensives pour nos étudiants
Les étudiants en graphisme et développement Web de L'École Multimédia ont participé au Lab201 durant trois semaines intensives du mois de Mai...
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.
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.
Below par Julio, Cesar, Camille, Cloé et Absar
Little Simz par Matthieu, Ismael, Youri et Oumayema
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
Des filières accessibles de tout horizons
Notre cursus en création digitale est accessible en 2e année à tous les étudiants ayant validé un bac+1 et un bac+2, pour la 3e année, en écoles spécialisées, en universités et en écoles de commerce. En tant que graphiste multimédia - UI designer vous créez des interfaces graphiques de produits ou de services numériques et réalisez l'ensemble des graphismes dans le respect de la ligne esthétique générale définie sur un site Web, de la plateforme digitale ou de l'application mobile.
Notre cursus Web développeur forme lui des professionnels du code, maîtrisant les technologies et les méthodes de développement modernes. Tout au long du Bachelor Web développeur, vous allez acquérir l'ensemble des compétences techniques nécessaires au développement de sites Internet, d'applications mobiles et à la programmation de jeux vidéo pour une insertion efficace dans le milieu professionnel.
Vous pourrez poursuivre ces Bachelors par un mastère en direction artistique en alternance ou une le mastère développeur back-end fullstack également en alternance.
