Rapport de stage EPSI Bachelor 2 · 3 MENANTEAU Cédric Bachelor 2 1. Remerciements. Je tiens à remercier mon maître de stage Jean-François MULLER pour m [avoir permis de réaliser

1

MENANTEAU Cédric Bachelor 2

Rapport de stage EPSI Bachelor 2

Développement d’un site vitrine pour un menuisier ébéniste.

Stage de deuxième année.

7 janvier au 8 février 2019.

2


Sommaire :

1. Remerciements.

2. Contexte & présentation de l’entreprise.

3. Planification des tâches et missions.

a. Missions au sein de l’entreprise. b. Organisation de travail. c. Discussion et validation autour des tâches intermédiaires.

4. Travaux préparatoires. a. Langages, frameworks et outils. b. Contraintes graphiques.

5. Réalisation du site vitrine DE STYL. a. Analyse de la demande client & réflexion. b. Retour client sur les différentes fonctionnalités. c. Modifications à la suite des retours clients. d. Difficultés rencontrées au cours de ce stage.

6. Conclusion.

7. Annexes.

3


1. Remerciements. Je tiens à remercier mon maître de stage Jean-François MULLER pour m’avoir permis de réaliser son site web durant ces cinq semaines de stage ainsi que Alan FERRONIERE pour son soutien technique, Mathias BRAUX et Frédéric REINOLD pour leur encadrement durant ce stage. Je remercie également Jules PEGUET, mon collègue durant ce stage.

2. Contexte & présentation de l’entreprise.

Afin de valider ma deuxième année à l’EPSI ainsi que ma deuxième année de BTS SIO, j’ai effectué mon stage pour le menuisier ébéniste Jean-François MULLER auto entrepreneur de l’entreprise " DE STYL ", créateur de meubles sur lesquels il travaille seul avec passion et patience, du 7 janvier au 8 février 2019. Etant donné que monsieur MULLER ne disposait pas des compétences informatiques nécessaires à la réalisation d'un site internet. Nous nous sommes donc avec Jules PEGUET appliqués à répondre au mieux aux exigences concernant ce site vitrine.

DE STYL est une auto-entreprise spécialisée dans la création et aménagement de meubles en bois sur-mesure, elle est située à Compiègne dans l’Oise, et travaille principalement sur Paris. Ce tout nouveau site pour l’entreprise a pour but d’élargir sa clientèle et d’avoir une visibilité sur internet, autre que les réseaux sociaux (Instagram, Houzz...).

4


3. Planifications des tâches et missions.

a. Missions au sein de l’entreprise.

La mission qui m’a été confiée au sein de l’entreprise DE STYL était de réaliser le site vitrine de cette entreprise afin d’offrir une visibilité accrue des différentes prestations réalisées par monsieur Muller. Les utilisateurs doivent pouvoir également contacter DE STYL directement sur le site afin d’obtenir des informations sur un projet futur. Le site devait contenir un maximum de photos et d’informations afin de faciliter la visibilité de l’entreprise sur internet. Nous avons aussi complété cette mission en formant notre maître de stage à son tout nouveau site Web pour qu’il puisse mettre à jour régulièrement son site (ajout de photos, de descriptions de projets…).

b. Organisation de travail.

Au fil de ce stage, nous avons mis en place un dépôt Azure Dev Ops1 afin de pouvoir s’attribuer des tâches en fonction du travail à faire, et de gérer un GIT2 afin de partager notre code et d’avoir des versions de celui-ci. (Annexe n°1)

En début de stage, nous avons fait une réunion avec notre maître de stage afin d’établir le cahier des charges. Ensuite, deux jours ont été consacrés à l’ouverture du serveur ainsi que du GIT. (Annexe n°2)

Le code était mis à jour sur ce azure plusieurs fois par jour. Les tâches étaient crées chaque jour en fonctions des demandes clients, de ses retours par rapports aux modifications à effectuer et déjà effectuées ainsi qu’avec nos idées ou recommandations évoluant au fur et à mesure du stage. Ces éléments étaient toujours validés par notre maître de stage avant que nous les réalisions. (Annexe n°1)

1 : Azure Dev Ops permet la gestion de projets avancée en regroupant sur une même plateforme un outil de création et d’assignation de tâche, et permet de lier celles-ci avec le code correspondant au moyen d’un dépôt GIT

2 : GIT permet de gérer des versions de code, et de les partager entre les différents acteurs du développement d’une solution informatique

5


c. Discussion et validation autour des tâches intermédiaires.

Dans un premier temps lors de ce stage, nous avons discuté avec notre client sur ses attentes concernant le site, ce qui devait apparaître et comment cela devait apparaître dans l’espace de la page, et devait mettre en avant les informations à propos des créations de monsieur Muller, ainsi qu’un moyen de contact pour de futurs clients.

Nous avions établi un contact journalier avec notre client, qui nous envoyait ses demandes par mail le matin, un point téléphonique était opéré le midi, et les modifications à la suite de cet appel effectuées l’après-midi.

Ceci nous a permis de rester en contact constant avec le client afin de répondre au mieux à ses attentes et ses demandes, tout en ayant la possibilité de proposer nos idées pour faire avancer le site. Effectivement, monsieur Muller nous demandait régulièrement notre avis, sur d’éventuelles modifications sur l’ergonomie du site ainsi que sur la visibilité des éléments.

Le client ayant des demandes très particulière au niveau du design du site, ce système de discussion nous a permis de recommencer plusieurs fois des éléments présents sur le site qui ne lui convenaient pas et ainsi de gagner du temps sur la conception du site.

6


3. Travaux préparatoires.

a. Langages, frameworks et outils.

Au début de ce stage, nous avons envisagé d’utiliser le framework PHP Laravel. Nous avons finalement, après un temps de réflexion choisi d’utiliser Symfony comme framework PHP afin de bénéficier des nombreuses pages de documentations et de nombreux tutoriels mis à disposition sur internet pour nous aider au mieux dans notre mission. Symfony nous était aussi familier du fait de son utilisation dans différents cours.

Nous avons aussi utilisé le framework Materialize1 car son design assez épuré collait avec l’idée que nous et le maître de stage nous faisions du site ainsi avoir un site plus facile à insérer en responsive.

Nous avons donc choisi d’utiliser Symfony étant donné que notre maître de stage ne nous avait pas imposé, ni ne connaissait de technologies WEB.

Nous avons choisi de travailler sur Visual Studio Code pour des soucis de synchronisation avec le dépôt azure, ainsi que pour notre connaissance de cet éditeur de texte.

Nous nous sommes aussi servis de JQuery, qui permet l’utilisation de la librairie JQuery et Ajax.

L’utilisation de google font (librairie permettant l’insertion de polices de caractères) a été utilisé dans le cadre de la recherche de police pour le site web.

Le site en question est hébergé chez OVH qui nous était familier et qui offre une facilité d’administration et de déploiement par l’accès FTP au serveur distant.

Nous avons aussi utilisé les outils " Google Search Console " afin d’avoir un outil plus poussé d’administration et de supervision de notre site web, ainsi que des méthodes d’optimisation pour avoir un meilleur temps de chargement sur le site (tailles des images etc…). Un outil d’optimisation du responsive (compatibilité du site entre écrans de différentes tailles) a été utilisé pour nous aider dans cette tâche. (Annexe n°3)

1 : Materialize est une librairie graphique CSS et JS qui ajoutent des composant tels que des éléments dynamiques déjà crées, des éléments de design boutons …

7


b. Contraintes graphiques.

Les contraintes graphiques ont été majoritaires pendant ce stage. Dans un premier temps, il a fallu que nous cherchions comment générer un cube en CSS afin d’y mettre le nom du site “DE STYL” ainsi que son corps de métier “Menuisier - Agenceur” pour avoir cette vue sur toutes les pages du site. Nous avons donc pensé à afficher des éléments sur des plans différents afin de gérer l’effet de perspective et obtenir un résultat satisfaisant. Mais ce résultat manquait de profondeur et de perspective.

Pour palier à ce problème de profondeur, nous avons utilisé un site (http://tridiv.com/) permettant de générer des polygones en 3D pour créer ce logo, plus épuré et avec une plus grande profondeur de champ. Ce site permettait de choisir un polygone, sa taille son volume, d’en ajouter et de les mettre sur les différents plans jusqu'à avoir un résultat comme celui-ci :

Ensuite des lignes aux coordonnées aléatoires sur la page puis enfin des hexagones pour le menu, ceux-ci passant à l’état d’un menu classique sur téléphone. (Annexe n°4)

Toutes ces transitions de design nous ont permis de prendre du recul sur ce que nous faisions et de préparer au mieux le site aux différents appareils (ordinateur, tablette et téléphone) sur la fin du stage, et ainsi de l’adapter pour tous ces appareils.

Une autre des contrainte graphique était de jouer avec les photos et des pages très sobres afin de faire ressortir celles-ci et donc de mettre en valeur le travail de l’entreprise dans le contexte de la page. Pour se faire nous avons utilisé un fond blanc ainsi qu’un alignement d’image pour rendre la page vivante en restant sobre.

8


4. Réalisation du site vitrine DE STYL.

a. Analyse de la demande client & réflexion.

La demande du client était celle d’un site vitrine pour son entreprise avec des contraintes telles que le design des pages comme énoncé dans la partie n°2.

Le site devait comporter une page d’accueil simple avec une photo le menu principal du site ainsi que des coordonnées et des liens Instagram et Houzz afin que les clients puissent contacter l’entreprise. Cette page contient le menu, qui est présent sur toutes les autres pages. L’image centrale correspond à une création de monsieur Muller photographiée sous plusieurs angles. (Annexe n°8)

Ensuite, une des demandes était d’avoir une visibilité des réalisations de l’entreprise afin de pouvoir donner une idée du travail fourni, ainsi, le système de page seulement remplie de photos pour les réalisations n’a pas été retenu, car il ne permettait en effet pas d’avoir un détail du projet (autres photos, description). Afin de répondre à cette demande nous avons fait le choix de mettre en place des " cartes " cliquables (Annexes n°5) afin de pouvoir voir le détail du projets (différentes photos, descriptions…).

Ensuite, il nous a été demandé un onglet contact permettant l’envoi de mail via un formulaire comportant le mail du demandeur un objet à ce mail, un corps de mail ainsi que la possibilité de joindre une pièce jointe, ainsi que sur la page, les coordonnées de l’entreprise. (Annexe n°6)

L’onglet “L’atelier” regroupe quelques photos diverses ou de projets permettant aux visiteurs de découvrir plus amplement le travail de l’entreprise. Le système de grille de Materialize permettant de gérer des éléments en ligne et en colonne, a été utilisé pour cette page afin de faciliter l’alignement des éléments (le système de " grid " de Materialize découpe l’écran en 12 parties distinctes. En attribuant le bon préfixe à l’élément que l’on veut placer, on peut l’attribuer à n’importe laquelle de ces parties). Nous avons dû chercher des solutions afin d’avoir un alignement autant sur un grand écran que sur un téléphone. Dans ce cas, les images passent en affichage les unes au-dessus des autres.

L’onglet "A Propos" regroupe également des photos de projets, mais aussi des descriptions sur monsieur Muller et son travail. Dans ce cas aussi, le système de grille a été utilisé afin de permettre l’alignement des éléments les uns par rapport aux autres.

9


b. Retour client sur les différentes fonctionnalités.

Le design initial prenait en compte des lignes placées un peu aléatoirement sur les différentes pages. Une fois ce design réalisé, nous avons demandé au client son avis, ce dernier nous a proposé un design plus sobre, sans ligne, mais un simple cube entourant le lien " DE STYL " de retour au site. (Annexe n°7)

Nous avons ensuite proposé à notre maître de stage de changer de menu pour avoir un résultat en forme d’hexagone autour des libellés des différentes pages, car celui du cube ne correspondait plus au design du site. En effet, celui-ci avait changé pendant le temps de recherche de design du cube. (Annexe n°8)

Au fil du développement, le client nous a demandé une plus grande visibilité notamment sur les projets réalisés, car nous avions réalisé un système de carrousel comportant les images des projets. Nous avons mis en place cela à l’aide d’un système de cartes avec Materialize, et en faisant changer les images de fond de cette carte à l’aide d’un décompte de temps en JQuery. (Annexe n°9)

Ce carrousel ne remplissait absolument pas la page et laissait de grands espaces vides, nous avons donc opté pour l’affichage en cartes simples, cliquables permettant l‘accès aux détails des projets en question. (Annexe n°10)

c. Modifications suite aux retours clients.

Afin de correspondre au mieux aux attentes du client en terme de design, nous avons cherché comment générer aléatoirement un chiffre afin de changer dynamiquement les coordonnées (point de début et de fin) des lignes dans la première ébauche de design (simple boucle en twig (Twig est un moteur de templates pour le langage de programmation PHP sous Symfony)..). (Annexe n°11)

Nous avons aussi dû jouer avec les axes x, y et z en CSS (permettant d’envoyer des éléments dans les différents plans de l’écran, les mettre en retrait ou en avant par rapport aux autres) afin d’obtenir un cube convenable en cumulant plusieurs éléments et les positionnant de tel façon afin d’avoir un résultat semblable à ceci.

10


Le résultat final avec les hexagones est généré seulement avec des before et after en CSS (before et after en CSS sont des éléments qui sont dépendant d’un bloc parent, ils peuvent servir pour des animations, ou éléments graphiques ne rentrant pas en conflit avec les autres éléments de la page) permettant de créer des éléments relatifs à l’élément dont il dépend.

d. Difficultés rencontrées au cours de ce stage.

Les différentes difficultés rencontrées au cours de ce stage sont surtout les multiples changements de design du site (différents éléments de design, lignes aléatoires sur toute la page, cube contenant le nom de l’entreprise ainsi que le corps de métier, menus entre des lignes ou, menu dans des hexagones...) au fil du développement qui nous ont obligés à créer plusieurs structures du site en parallèle (différents types de menus, différents types de pages). Nous aurions pu éviter ce problème en bloquant un design définitif lors des premières semaines de stage au lieu de laisser ouvert les propositions tout au long de celui-ci. Lors de la dernière semaine de stage, nous avons décidé de ne plus effectuer de modifications graphiques qui viendrait bouleverser tout le site effectif. Nous avons donc pu nous concentrer sur l’aspect référencement et optimisation de celui-ci. (Annexe n°7 et n°8)

Nous avons aussi rencontré un problème au niveau de la typographie utilisée, qui faisait partie de celles fournies par Adobe. Cette typographie ne chargeait pas. Pour résoudre ce problème nous avons dû télécharger et charger indépendamment dans le CSS, et forcer son utilisation par toutes les pages pour quelle puisse apparaître à l’écran. Repérer et modifier ce souci nous a pris une journée, car nous n’avions aucune idée de la cause ce dysfonctionnement.

Une autre difficulté était de faire du référencement afin que le site soit référencé et apparaisse dans les moteurs de recherches, pratique que nous n’avions jamais effectué auparavant. Pour se faire nous avons rajouté une balise meta dans le head de notre html comportant un nom et une description pour chaque page (cela permet de renseigner à Google le nom de la page ainsi que sa description pour son affichage dans un navigateur).

11


8. Conclusion.

En conclusion, ce stage nous a permis d’explorer un peu plus l’aspect et la dimension de discussion avec le client, ainsi que de faire des retours fréquents sur l’avancée du projet afin de répondre aux mieux aux attentes de celui-ci.

La tâche qui nous a été donnée de réaliser ce site vitrine a été réalisé grâce à nos connaissances, nos recherches et notre apprentissage.

Lors de ce stage, j'ai appris à converser avec un client n'ayant pas de compétence poussée en informatique. Il a donc fallu lui expliquer les différents éléments qui allaient être mis en place ainsi que discuter de ses attentes, de son idée du site, et d’utiliser les bons termes dans le cas de sa formation et de son information par rapport aux éléments présent sur le site. Ce stage m’a aussi apporté de nouveaux outils tels que les outils de référencement, ainsi que des connaissances supplémentaires dans les outils déjà utilisés tel que Symfony.

12


9. Annexes.

Annexe n°1 : Azure Dev Ops.

Gestion et répartition des tâches sur Azure Dev Ops. Chaque colonne correspond à un état de tâche, nouvelle, en cours, en test et terminée.

13


Annexe n°2 : Cahier des charges du site web.

Le site devra contenir :

-Une page principale de présentation de l’entreprise.

-Une page mettant en avant les créations du menuisier.

-Une description du parcours de celui-ci.

-Le moyen de prendre contact avec l’entreprise (grâce aux réseaux sociaux, mais également via un formulaire de mail interne ou les utilisateurs peuvent ajouter une pièce jointe pour d’éventuelles photos ou plans).

-Une page présentant l’environnement de travail du maître de stage.

14


Annexe n°3 : Google search console et outils d’optimisations.

Ce site (https://search.google.com/test/mobile-friendly) permet d’avoir des informations sur la mise en page d’un téléphone, si celui-ci met trop de temps à charger par rapport à une norme établie.

La Google Search Console permet d’avoir des vues sur le trafic des pages de vos sites, ainsi que des indices de performances et de couverture de ces pages.

https://search.google.com/test/mobile-friendly

15


Annexe n°4 : Menu final du site web et menu en version téléphone.

Le menu en version téléphone reste sobre dans le contexte de la page. Il est appelé par un bouton afin de s’ouvrir sur l’entièreté de la page.

16


Annexe n°5 : Principe de cartes pour les réalisations.

Annexe n°6 : Formulaire de contact permettant l’envoie de mail à l’entreprise.

17


Annexe n°7 : Premier mockup du site (page d’accueil).

18


Annexe n°8 : Mockup final du site (page d’accueil).

19


Annexe n°9 : Mockup du carousel de début de stage.

Annexe n°10 : Détail des réalisations.

Les réalisations ont un ensemble de photos ainsi qu’une petite description et un lieu.

20


Annexe n°11 : Exemple de premier mockup avec des lignes aléatoires.

Documents

Rapport de stage EPSI Bachelor 2 · 3 MENANTEAU Cédric Bachelor 2 1. Remerciements. Je tiens à remercier mon maître de stage Jean-François MULLER pour m [avoir permis de réaliser