PORTFOLIOMUSQUER Nicolas

Som

mai

re

01 02 0301.1

Lab e-quête

01.2Abitibi Tourisme

01.3Abitibi Skate

01.4Totem

02.1Portfolio jQuery

02.2Sauver l’empire

02.3L’année

02.4Z Event

03.1Lecteur Vidéo

03.2Application mobile

03.3Le Grand Hôtel

03.4Mon site Web

Proj

ets

Créa

tifs

Proj

ets

Déve

lopp

emen

t

Proj

ets

Pers

onne

ls, E

ntre

pris

es

Proj

ets

Créa

tfis

01Lab e-quête

Abitibi Tourisme

Abitibi Skate

Totem

p.6

p.8

p.9

p.10

5

L’objectif de ce projet était de créer un concept interactif avec des énigmes à résoudre sur écrans et tablettes.La mission de l’Escape room était d'empêcher l’empoisonnement d’un produit par un concurrent peu scrupuleux. En complément, nous avons aussi créé un site web présentant notre projet.

Escape room: nous avons utilisé des compo-sants multimédias comme «Unity», «PureData» et «Vuforia».Le moteur de jeu «Unity» a été utilisé pour sa complémentarité avec «Vuforia» pour le dévelop-pement de l’application en réalité augmentée ainsi que pour sa complémentarité avec la 3D, utile pour les interactions avec notre «Game Master 3D», personnage qui interagit avec les joueurs quand ils le sollicitent.Le logiciel de programmation graphique «PureDa-ta» a été utilisé pour coder les énigmes du kaléi-doscope, du contrôleur matriciel «launchpad» pour les énigmes musicales et du «makey-ma-key», dispositif d'émulation de clavier à partir d'objets du quotidien, pour l’énigme tactile.

Site web: nous avons utilisé le langage HTML, CSS et le JavaScript (JS), langages de base pour créer un site web. En supplément du JS, nous avons utilisé la biblio-thèque jQuery pour faire des animations plus poussées comme le menu «sticky» ou encore un «auto-scroll» qui permet d’atteindre directement la section demandée par défilement, plus diffici-lement réalisable à partir du JS.L’utilisation du PHP a permis de mettre en place une page de réservation de l’Escape room où le client est invité à rentrer ses coordonnées et reçoit un mail de confirmation.

Pour l’Escape room

Labe-quête

Pour le site web

DUT MMI - groupeProjet tutoré

Escape room2017 - 2018

6

escape romm

7

AbitibiTourisme

Ce projet a été demandé par l’office de Tourisme en Abitibi-Témiscamingue (région du Québec).L’objectif était la refonte de plusieurs pages de leur site web dont la page d’ac-cueil.

Le client souhaitait voir un prototype fonc-tionnel pour la version Web et un autre pour la version téléphone mobile.

Pour répondre à la demande du client, nous avons décidé de créer des «wire-frames» et les 2 prototypes associés, en utilisant les logiciels «Illustrator» pour l’aspect vectoriel permettant d’avoir un meilleur rendu et «InVision» pour créer les prototypes fonctionnels aboutis et réalistes.Cette démarche a permis de rapidement montrer au client les 2 prototypes et ainsi voir si cela répondait à son attente, de prendre en compte ses remarques, de modifier les prototypes afin d’obtenir son accord avant le lancement du développe-ment.

Lien vers la version mobilehttps://invis.io/D2PNB3PGEBJ

Lien vers la version Webhttps://invis.io/CZQJR0UKME8

UQAT - groupeWireframes2018

8

AbitibiSkateUQAT - individuelWireframes2019

Le site «Abitibi skate» sert à promouvoir le talent de la région en skateboard, d’annon-cer les différentes compétitions régionales et leurs résultats. Le propriétaire du site souhaite l’optimiser car, développé sous Wordpress, il est trop limité fonctionnellement. Il est venu nous présenter ses idées pour la création de son nouveau site Web.

Je devais utiliser Photoshop en respectant la grille des 12 colonnes pour un format Web.

Pour définir les «wireframes», j’ai utilisé un fichier Photoshop dont les 12 colonnes ne prenaient pas toute la largeur de la page afin de pouvoir bien placer les éléments dans ces colonnes, et ainsi s’assurer que le design fonctionnera parfaitement sur un petit écran. Le contenu sera étalé sur toute la largeur au moment de l’intégration.Utiliser les 12 colonnes permet de respecter la règle des tiers, d’aider à organiser les éléments pendant le travail de «wireframe» et rendre ensuite les pages Web plus confor-tables à la lecture. De plus, grâce à la règle des tiers, le développement et l’intégration que je vais effectuer suite à l’accord du client sera plus facile. 9

10

Totem La consigne pour ce projet était de créer un concept nouveau: nous avons choisi de travailler sur une expérience initiatique avec du mapping video interactif en lien avec la culture nordique. Par l’intermédiaire d’animaux (ours, caribou, aigle, loup) porteurs de légende et d’histoire, un récit visuel est projeté sur une structure en forme d’iceberg.Ce projet est un projet multimédia car il nous a permis de travailler sur le son, la vidéo et l’image.

La modélisation «low poly» des animaux a été obtenue par différentes technologies comme le 3D développé avec le logiciel de modélisation et d’animation 3D «Autodesk 3ds Max».Ces modélisations ont permis d’une part l’im-pression 3D de figurines pour chacun des animaux (totems) et d’autre part leurs anima-tions pour qu’ils puissent être projetés sur la structure. Le mapping des animations des animaux a été créé et est géré via le logiciel «After Effect» pour la synchronisation des 2 projecteurs.

Un participant choisit un totem et le pose sur l’emplacement dédié à cet animal. L’aimant fixé sous le totem est détecté par le capteur Arduino qui transmet un signal à l’applicatif Arduino qui, en fonction du totem, transmet au logiciel «Touch Designer» l’information qui lui permettra de lancer la vidéo attendue sur l’iceberg.Il est prévu de développer un site Web à l’aide des langages HTML, CSS et JS, pour servir de vitrine à ce projet.

UQAT - groupeExpérience initiatique / Mapping2018 - 2019

11

Proj

ets

Déve

lop-

pem

ent

02Portfolio jQuery

Sauver l’empire

L’année

Z Event

p.14

p.16

p.17

p.18

13

PortfoliojQuery

Ce projet a permis de mettre en pratique les différents langages Web étudiés.

Il était imposé d’utiliser la bibliothèque jQuery pour son aide dans l’écriture des scripts et l’architecture Ajax pour la création du portfolio rendant le site Web interactif. Je devais aussi réutiliser un autre portfolio créé à partir du langage PHP pour la gestion des pages du portfolio (ajout ou suppression de travaux).

Avec jQuery, j’ai créé plus facilement des effets comme l’apparition de sous-menus ou le titre des travaux en passant la souris au dessus de l’image ou dessin. L’utilisation de l’Ajax permet une mise à jour plus réactive des pages à partir des actions effectuées par l’utilisateur sur le poste client. Le modèle Ajax donne des applications dyna-miques car il n’est pas utile de recharger com-plètement la page à chaque action de l’utilisa-teur.

Image code

DUT MMI - individuelWebDesign

2018

Ce code envoie les informations demandées à la requête PHP pour pouvoir récupérer les bons fichiers de la base de données en fonc-tion de ce que l’utilisateur a choisi de voir.

Lien vers le portfolio:http://nicolas-musquer.fr/html/PortfolioJquery/portfolio.html

14

15

Sauverl’empire

Ce projet consistait à créer un jeu où le joueur, dans son vaisseau, doit abattre les vaisseaux ennemis en face de lui.

Je devais utiliser un seul fichier PHP et CSS, l’HTML étant intégré dans le PHP. Il était aussi nécessaire de lier ce jeu avec un fichier local pour sauvegarder toutes les actions du joueur et les informations du jeu.

Au début du jeu, le joueur doit indiquer le nom de son vaisseau, du capitaine et de son équi-page. Toutes ces informations sont sauve-gardées puis réaffichées lorsque le joueur clique sur la touche «CONTINUER» du jeu. La position du vaisseau du joueur est enregis-trée à chaque déplacement et ses points de vie sont décomptées à chaque fois qu’un des vaisseaux ennemis lui tire dessus.De même, à chaque fois que le joueur tire sur un vaisseau ennemi, ce dernier perd aussi des points de vie et disparait une fois le compteur de vie à 0.

Image code

Explication code

DUT MMI - individuelJeu2018

Ce code déplace le vaisseau vers le haut lorsque l’on appuie sur la touche «HAUT»

16

L’annéeCe jeu JS raconte une histoire au cours de laquelle le joueur doit faire des choix qui peuvent changer le cours de l’histoire…Ce jeu reprend mon histoire personnelle de cette année d’étude à l’UQAT au Québec !

Le jeu est un «Point and Click» réalisé à l’aide du HTML, CSS et JS. L’aspect responsive n’était pas à prendre en compte.

Le langage HTML permet de placer les objets et de définir les phrases qui vont être affichées à chaque étape du jeu en les cachant derrière des feuilles de style CSS.Grâce au CSS, j’ai défini ce qui est visible ou non lors du chargement d’une page et j’ai appliqué des transitions aux éléments qui vont apparaitre et disparaitre lorsque le joueur avance dans l’histoire.Le langage JavaScript permet de déclen-cher les transitions, lorsque le joueur clique sur un objet par exemple, et de remplacer du texte à des endroits définis pour avan-cer dans l’histoire. Des alertes ont été déve-loppées en JS pour avertir le joueur d’un mauvais choix.

UQAT - individuelJeu

2018

Ce chronomètre décompte le temps qu’il reste au joueur pour finaliser un étape de l’aventure avant de perdre. Il peut être affecté par les actions faites par le joueur.

Lien vers le jeu:http://nicolas-musquer.fr/html/LAnnee/lannee.html

17

18

Z EventL’objectif était de créer une expérience interactive proposant à l’internaute 5 sections différentes l’informant sur un sujet. Nous avons retenu le projet caritatif Z Event comme événement à présenter sur notre site Web. Le Z Event réunit chaque année les streamers fran-çais afin de récolter des dons pour une association (édition 2018 - Médecins sans frontières).

Les consignes données étaient d’utiliser le jQuery et d’avoir un site responsive.

Tout d’abord, nous avons essayé de rester au plus près de la charte graphique du site officiel de Z Event. Nous avons ainsi retenu le trio des couleurs dominantes de l’infographie: le noir, le vert et le blanc.Nous avons créé le site Web en HTML et CSS puis nous avons ajouté des interactions avec jQuery pour rendre notre site plus dynamique. Par exemple, les effets d’apparition des textes ou images sont fonc-tion de la section sur laquelle l’internaute se trouve.Avec les plugins proposés par jQuery, nous avons ajouté un carrousel avec «Ninja Slider» au niveau des «Best-Off» ainsi que le changement de page avec «Page Piling». Ce dernier permet d'avoir un ascenseur vertical qui sert à passer d’une section à l’autre sans avoir besoin de cliquer sur le menu correspondant et des animations de transition sont aussi créées lors de ce changement de section.

avec des plugins

UQAT - groupeWebDesign2018

Ce code affiche les photos des streamers avec les effets souhaités grâce aux classes CSS prédéfinies.

Lien vers le site:http://nicolas-musquer.fr/html/ZEvent/zevent.html

19

Proj

ets

Pers

onne

lsEn

trep

rises

L’objectif était de créer une expérience interactive proposant à l’internaute 5 sections différentes l’informant sur un sujet. Nous avons retenu le projet caritatif Z Event comme événement à présenter sur notre site Web. Le Z Event réunit chaque année les streamers fran-çais afin de récolter des dons pour une association (édition 2018 - Médecins sans frontières).

Les consignes données étaient d’utiliser le jQuery et d’avoir un site responsive.

Tout d’abord, nous avons essayé de rester au plus près de la charte graphique du site officiel de Z Event. Nous avons ainsi retenu le trio des couleurs dominantes de l’infographie: le noir, le vert et le blanc.Nous avons créé le site Web en HTML et CSS puis nous avons ajouté des interactions avec jQuery pour rendre notre site plus dynamique. Par exemple, les effets d’apparition des textes ou images sont fonc-tion de la section sur laquelle l’internaute se trouve.Avec les plugins proposés par jQuery, nous avons ajouté un carrousel avec «Ninja Slider» au niveau des «Best-Off» ainsi que le changement de page avec «Page Piling». Ce dernier permet d'avoir un ascenseur vertical qui sert à passer d’une section à l’autre sans avoir besoin de cliquer sur le menu correspondant et des animations de transition sont aussi créées lors de ce changement de section.

03Lecteur vidéo

Application mobile

Le Grand Hôtel

Mon site Web

p.22

p.24

p.26

p.27

21

Lecteurvidéo

La société Evolis conçoit et fabrique des systèmes d’impression et solutions de personnalisation pour cartes plastiques.L’objectif de ce stage était de finaliser un lecteur vidéo permettant de lancer le tuto-riel fourni avec le logiciel EDIKIO.

Le lecteur vidéo devait fonctionner sur tous types de plateformes  : Windows, Linux et Macintosh.

Le lecteur vidéo utilisé ne fonctionnait pas avec toutes les versions de Windows. Avec l’aide d’un développeur R&D, nous avons codé un lecteur en C# permettant d’analy-ser le problème et de le résoudre. C’était une incompatibilité d’un composant logiciel avec le codec utilisé.Nous avons réalisé un nouveau lecteur vidéo en C++ sous le framework «QT Crea-tor» et retenu la librairie «FFMPEG» pour son codec H264 (traitement de flux audio et vidéo). Le nouveau lecteur vidéo, finalisé et validé, est livré avec le tutoriel des impri-mantes.

Stage entreprise - EVOLISMultimédia2017

22

23

24

ApplicationmobileCe projet concernait la création d’une application mobile sur tablette demandée par le service Marketing. Une étude de marché conduite auprès des clients avait mis en évidence la nécessité de développer un concept simple de mobilité pour les événements de type salon, festival. L’objectif était de permettre l’impression de cartes d’accès après saisie des informations par les hôtesses d’accueil (type nom, prénom, société, photo) via un formulaire sur tablette.

L’identité visuelle de l’évènement et le design de la carte imprimée devaient pouvoir être changés simplement. L’application mobile devait être ergonomique et intuitive pour une utilisation par tous profils de personnes.

J’avais la responsabilité de mener ce projet en respec-tant la méthodologie de la société. Des réunions régu-lières étaient organisées avec le service R&D et le service Marketing pour faire un état d’avancement, des démonstrations de l’application et discuter avec eux des points à améliorer.Au niveau technique, les langages HTML, CSS et JS ainsi que le framework front-end MDL (Material Design Lite) m’ont permis de créer l’application mobile. De base, l’application devait être développée avec Android Studio mais j’ai proposé l’utilisation de «Apache Cordova» (besoin de NodeJS) pour que cela soit multi-plateforme, permettant le déploiement de l’application sous Android et IOS.

Disponible sous

Stage entreprise - EVOLISMultimédia2018

Ce code récupère les informa-tions saisies dans le formulaire de la tablette pour les envoyer au serveur Web présent dans l’impri-mante.

25

Le GrandHôtelMes parents possèdent un appartement dans les Pyrénées. Pour aider à la location du logement, ils m’ont demandé de réaliser un site Web.

Pour réaliser le site, j’ai retenu le framework «Bootstrap» pour ses possibilités de création de design de sites et d’application Web. En découvrant et testant les différentes possibilités proposées, j’ai ainsi obtenu le rendu désiré: présentation moderne et épurée.J’ai consulté «unheap», librairie proposant des plugins jQuery et j’ai utilisé le plugin «scrollreveal» pour l’intégrer sur le site Web.L’utilisation de «Bootstrap» permet d’obtenir un site responsive, mais certaines améliorations sont en cours car les éléments codés sans utiliser «Bootstrap» ne sont pas totalement responsive.Enfin, pour trouver plus facilement le site à partir d’une recherche, j’ai acheté et choisi un nom de domaine explicite : «location-aulus-les-bains.fr». J’ai commencé à lire des articles discutant du référence-ment naturel pour essayer d’améliorer la visibilité de ce site. 

avec des plugins

PersonnelWebDesign2018

Lien vers le site:http://location-aulus-les-bains.fr/

26

Monsite Web

PersonnelWebDesign

2019

J’ai souhaité créer un portfolio pour mieux présenter les différents travaux que j’ai effectués durant mes années d’étude.

Pour ce portfolio, j’utilise les technologies HTML, CSS et JS ainsi que le framework «Bootstrap» utilisé pour le menu par exemple.M’intéressant aux sites Web ayant un visuel moderne, je regarde et lis régulièrement des articles sur les sites Web «Pinterest» et «Awwwards», ce dernier spécialisé dans la promotion des meilleurs sites en concep-tion web innovante.Je retiens des idées intéressantes au niveau conception et qualité visuelle pour les appli-quer à mon portfolio. Je cherche à l’améliorer constamment en utilisant de nouveaux plugins pour rester au goût du jour.

avec des plugins

Lien vers mon site Web:http://nicolas-musquer.fr/ 27