B R I E U C

M e r t e n s

Chapitre 1

Animation, Menu et Optimisation

Du 19 octobre au 3 janvier, je suis stagiaire à Boitsfort chez Phenomen. Cette agence qui se définit comme une équipe de « digital crafters » travaille autant dans le web que le print et le branding. J’y suis en tant que stagiaire front-end developer mais je compte tout de même toucher à plus de domaines pour en apprendre le plus possible sur ces 11 semaines.

À mon arrivée lundi matin, même si j'avais déjà rencontré toute l’équipe, j’étais encore un peu nerveux. J’étais curieux de voir la complexité de ce qu’on allait me demander de faire. Tout d’abord on me présente aux employés des différentes agences et entreprises qui partagent notre open-space ainsi qu’à la machine à café. Normalement je devrai m’installer à une simple table, mais cette semaine quelqu'un est absent j’ai donc droit à un vrai bureau, pour être plus à l’aise.

Sans grande surprise, on me demande de finir la petite animation commencée lors du team building. Il s’agissait d’un SVG devant bouger comme s’il était soufflé par le vent. Même si cela ne semblait pas grand chose, arriver à choisir les bonnes durées, les bons délais et les bons easings reste assez complexe.

L'équipe

Lorsque je finis une première version et que je la présente, on me demande de recommencer. Elle n’est pas assez réaliste. David, mon maitre de stage, me regarde avec un demi sourire comme s’il avait peur que j’en ai déjà marre. Mais pour moi, pas de souci! Ce type d’animation me plait beaucoup et de toute façon c'est grâce à ces petits détails que le rendu final semble réel.

Après quelques versions où l’animation est trop brusque ou trop peu crédible, un collègue vient m'aider. Guillaume, qui est bon sur After Effect, tente de réaliser avec moi une sorte de calcul afin de distribuer de manière équitable la durée de chaque clé d’animation.

On s’arrache les cheveux une bonne heure et une fois le calcul fini, on se rend compte qu’il est faux. Qu’à cela ne tienne, on l’applique quand même au SVG et (oh joie !), ça donne quelque chose de vraiment bien (comme quoi notre erreur ne devait pas être si importante). Le temps de corriger quelques autres éléments et c’est déjà la fin de cette première journée.

Une bonne ambiance de travail et un premier travail agréable. Cette première journée s’est très bien passée.

Les deux jours qui suivent, on me propose de continuer dans l’animation avec le menu du futur site de l’agence. Son style final est décidé, mais pas comment il devra apparaitre, et disparaitre. Avec Guillaume et Manon, respectivement graphic designer et front-end developer, nous proposons une idée chacun à notre tour. Guillaume les réalise ensuite sous forme d'aperçus sur After Effect pour voir laquelle est la plus agréable en terme d'UX ou la plus logique.

Après avoir choisi, je travaille sur l’intégration et le mardi soir elle est finie. Toute la journée de mercredi, je règle un paramètre important de l’animation pour qu’elle corresponde à la charte graphique du site. Je rajoute également des petits détails comme les états hover, les fonts et de nouveaux éléments graphiques proposés par mes collègues. Un peu d'optimisation de mon code pour la gestion des différents navigateurs et l’animation est enfin finie.

Ce jour-là, j’ai également eu l’occasion d’aller en réunion avec l’équipe pour voir la présentation d’un CRM que l'agence comptait acquérir: Teamleader. Je ne connaissais pas du tout les CRM. Il s’agit de programmes de gestion de relation avec les clients. Teamleader nous a impressionné car c’est une WebApp très complète et son développement a dû être difficile.

David

À partir de jeudi, on me donne accès aux fichiers d’un site déjà en ligne pour y faire des corrections. Il s’agit de Luminette, un site de présentation et de vente de lunettes de luminothérapie. Le site en lui-même est fini mais l’équipe aimerait alléger ses scripts et corriger les animations d’apparition pour éventuellement le présenter sur des sites comme Awwwards.

Après un temps d’analyse et sous les conseils de Michael, back-end developer, je retire 3 librairies JavaScript qui réalisaient à peu près les mêmes tâches de maniêre légèrement différente. À la place, on me propose de travailler uniquement avec Waypoint.js et Velocity.js. Ces deux librairies bien plus légères me sont inconnues donc je passe la majeure partie de mon vendredi à en apprendre le fonctionnement. En fin de journée je suis parvenu à créer et configurer mes premières animations.

Ayant compris le fonctionnement de ces nouvelles librairies, me voilà prêt pour travailler à fond sur ce premier gros projet dès la semaine prochaine. Durant cette semaine, on m’a déjà annoncé les différents travaux sur lesquels je devrai travailler. Au premier abord, ça m’a semblé beaucoup. Mais on ne me donne pas de délais, uniquement un ordre de priorité et donc moins de pression pour moi.