De la réalité virtuelle à la réalité médicale avec Vtopia

Mission

Voir le projet

Ce projet fut pour moi une chance de prouver à l’entreprise ma détermination et mon implication en toutes circonstances dans les projets qui me sont attribués. Toutes les contraintes se trouvaient dans le peu de temps de réalisation qui m’était accordé : 72h pour créer un one page animée (un site constitué d'une seule page web contenant l'ensemble des contenus d'un site web).

Le besoin des clients

Le brief demandé par l’entreprise 3Primes, était de réaliser un one page qui permette de présenter rapidement une de leur nouvelle réalisation et de s’inscrire à leur newsletter. Il n’y avait qu’une seule grosse contrainte : être obligatoirement adaptable sur mobile. Ce qui est compréhensible étant donné que le site web allait être partagé sur un salon où les commerciaux pourraient en savoir plus sur le sujet en se rendant sur le site dédié. Il était donc plus que probable que les utilisateurs auraient pris leur smartphone pour aller consulter cette page web.

Mes missions

Pour commencer, j’ai respecté la première notion des maquettes du client en m’appropriant un template gratuit qui me permettait de mettre en place un “slideshow”, c’est à dire une navigation sous forme de diaporama. C’est donc à partir de celui-ci que j’ai tout d’abord travailler sur la base du “mobile first”, un concept qui consiste à concevoir un site en travaillant en priorité la version mobile et en adaptant progressivement celui-ci pour les écrans plus larges. Cette façon de procéder est contraire à la manière ordinaire qui consiste à dégrader progressivement un site web pour l'adapter à un affichage sur des écrans plus petit. Les contraintes d’affichage étaient assez élevées car elles me demandaient d’afficher du contenu s’adaptant sur des sections qui ne peuvent pas dépasser la taille de l’écran qu’utilise le visiteur. Si le texte dépassait de l’écran, je devais mettre en place un système de “scroll” (défiler verticalement le contenu d'un document) à l'intérieur d’une diapositive.

En seconde partie, je devais programmer et mettre en place un système de newsletters via MailChimp afin que les clients puissent envoyer des informations à tous les visiteurs qui s’y seraient inscrits. Pour assurer tout de même le procédé, j’ai ajouté une fonctionnalité qui permet de sauvegarder l’adresse mail d’un visiteur souhaitant s’inscrire dans un fichier à la base du FTP du site, dans le backoffice.

Bilan de ce projet

Pour ce site web, mon désir aurait été de travailler avec du langage SASS et une grille CSS se composant sous la technologie FlexBox. Malheureusement, le peu de temps accordé et les templates qui m’ont été donné étaient sous la base d’une grille bootstrap et simplement en CSS3 basique. Cela ne m’a tout de même pas dérangé, et j’ai pu revoir toutes les fonctionnalités que permettent ces technologies tout en essayant au maximum de coder de manière propre et lisible par tout développeur qui viendrait continuer le projet derrière moi. La mise en place du template slideshow n’était pas non plus évidente, car il faut savoir que ce genre de plugin emporte avec lui de nombreux fichiers externes qui ne servent pas forcément à son utilisation mais qui ralentissent énormément le chargement de la page.

Voir le projet