Voir mon mémoire - Corentin Bontemps
Transcription
Voir mon mémoire - Corentin Bontemps
RAPPORT DE STAGE Licence Professionnelle ATC 2015/2016 BONTEMPS CORENTIN 1 éDITO Intégrer la licence Activités et Techniques de Communication spécialité Multimédia d'Elbeuf en alternance, a été pour moi un atout majeur dans ma spécialisation professionnelle. L'apport de nouvelles compétences apportées par cette année d'alternance fut également capital dans l'éxécution de mon travail tout au long de l'année chez Sports Contest. Mon objectif principal était d'approfondir mon niveau dans différents langages, et surtout d'acquérir de nouvelles compétences techniques pour le WEB et le PRINT. Corentin Bontemps Graphiste et Webmaster 2 SOMMAIre L’ éDITO 1 L’ enTrePrISe Présentation de l’entreprise Sports Contest et de ses 4 différents acteurs. LE SITe WeB Un projet ambitieux. 8 3 LES LES Créations WeB 26 Description des travaux réalisés et mis en place sur les différents sites internet. ACTI VI TéS RÉALISÉES LES Créations PrInT 32 Mise en situation et description des créations graphiques réalisées. 46 LA COnCLUSIOn Conclusion de cette année de formation professionnelle & remerciements. par Corentin Bontemps 4 SPORTS CONTEST QUOI ? Sports Contest, S.A.r.L unipersonnelle au capital de 154 000€, a débutée son activité en juillet 2000. Gérant Thierry CHAIX DISTrIBUTIOn SPOnSOrInG PArTenArIATS Activité principale de l’entreprise depuis sa création. Sports Contest supporte des équipes et des joueurs. Les clubs et les équipes peuvent avoir des tarifs préférentiels et des aides. 5 Sports Contest est une entreprise fondée en 2000 et spécialisée dans la distribution d’équipements de sports de glace, tels que le hockey sur glace, le roller hockey, le floorball, et le patinage artistique. Cette activité lui permet d’avoir l’exclusivité en France sur de nombreuses marques telles que CCM, Sher-Wood, Graf, Warrior, Labeda, Jackson Ultima, Blue Sports et bien d’autres encore... Cette activité de distribution n’est pas la seule. En effet, Sports Contest propose d’équiper en matériel et en revêtements de sols, des patinoires et des complexes sportifs qui propose la pratique des sports de glace ainsi que ceux permettant la pratique du roller ou du floorball. Mais ce n’est pas tout, Sports Contest cumule également des partenariats avec des grands clubs français de Hockey sur Glace et de Roller Hockey comme les Dragons de Rouen, les Gamyo d’Épinal, ou les Hawks d’Angers... Et aussi des partenariats avec des joueurs au sein de ces mêmes équipes. Sports Contest c’est aussi un magasin situé à Sallanches en Haute-Savoie proposant l’achat et l’essai de matériel tout en étant conseillé par des professionnels. Les principales marques proposées sports contest étAnt Un Des leADers De lA DistribUtion D’éqUipements De sports De glAce, Un grAnD nombre De mArqUes sont représentées. Domaines: Hockey sur Glace, Roller Hockey, Floorball, Patinage Artistique... 6 7 L’éQUIPe Une entreprise à tAille hUmAine DIreCTeUr COMMerCIAL Eric PINARD SerVICe COMMerCIAL ATTACHée COMMerCIALe SerVICe CLIenT Christian BOZON Christophe CROUÉ Renée ROBERT Sylvain NICOUD Damien ICARD WeBMASTer SerVICe CLIenT GrAPHISTe WeBMASTer Anthony COLLET Corentin BONTEMPS 8 Le SITE WEB Un projet Ambitieux La refonte du site internet de l’entreprise Sports Contest s’est effectuée en plusieurs étapes primordiales dans la conception de sites internet. Ce projet fut une des raisons majeure de ma venue dans cette entreprise. Un site existait déjà, et il était question de radicalement l’améliorer et de repartir de zéro concernant les choix graphiques et l’architecture de celui-ci. Bien évidemment, l’enjeu s’avérait être très important pour l’ensemble de l’entreprise. Tout simplement parce que Sports Contest représente des marques de sports de glace internationales sur le territoire Français en distribuant leurs produits et en les promouvant. Dans un second temps parce que le site permet d’offrir une visibilité aux petits revendeurs affiliés et également aux équipes et aux clubs dans une moindre mesure. Finalement, ce projet s’est étalé sur une bonne partie de l’année, et la première version en ligne fut lancée dans le courant du mois de Novembre 2014. Pour en arriver à la version définitive qui est en place aujourd’hui, j’ai du franchir beaucoup de paliers de compétences qui m’étaient parfois totalement inconnus. C’est pourquoi je considère ce site internet comme une réelle avancée dans ma professionnalisation et un atout non-négligeable quant au fait d’être polyvalent en développement et en design graphique. 9 L’Analyse de l’évolution du site web poUr mieUx comprenDre les Attentes De mon commAnDitAire, j’Ai AnAlYsé l’éVolUtion DU site sports contest DepUis ses DébUts. Site Web : Page d’accueil du site internet de Sports Contest en 2007. Pour mieux comprendre les attentes des différents commanditaires, j’ai analysé l’évolution du site de Sports Contest depuis ses débuts. En effet, le site a vu le jour en 2007, sur une base très simple. Il permettait simplement de télécharger le catalogue produit de l’entreprise et également de participer au moyen d’un formulaire à des concours organisés durant l’année. Le site a ensuite connu une mise à jour conséquente en 2008. L’architecture de celui-ci se rapproche déjà beaucoup plus de la version actuelle. Les produits sont présentés et classés par rubriques (Hockey sur Glace, Roller Hockey, Patinage…), les marques sont représentés en page d’accueil et les informations importantes sont visibles en haut de page. Site Web : Page d’accueil du site internet de Sports Contest en 2008. 10 C’est en 2012, que le site subit son évolution la plus importante graphiquement, tout en conservant la même architecture qu’en 2008. Les bases sont alors posées, le site à réaliser se doit de classer les produits par activités, tout en permettant de les classer par marques et par catégories (Casques, Gants, Crosses...). Site Web : Captures d’écrans du site internet Sports Contest en 2012 & 2013. 11 12 Comprendre son fonctionnement Dès mes premiers jours dans l’entreprise, je me suis attelé à comprendre l’architecture des sites internet gérés par Sports Contest. Dès mes premiers jours dans l’entreprise, je me suis attelé à comprendre l’architecture des sites internet gérés par Sports Contest, et également d’en ressortir les défauts et les atouts. Tout d’abord, l’ensemble des sites ont étés conçus sur une base commune en PHP orienté objet (PDO) au moyen d’une base de données centralisée en MySQL sur un serveur distant. Tous les sites sont organisés de manière cohérente et similaire. N’ayant que très peu pratiqué de PHP orienté objet, il m’a fallu une bonne semaine d’adaptation pour en saisir toutes les notions. Une fois cette étape d’initiation terminée avec l’aide de mon tuteur en entreprise, j’ai pu commencer à analyser dans son fond le site internet de Sports Contest. Le site se découpe en deux parties distinctes, l’une statique, où l’on expose des informations simples et brèves qui ne changent pas ou très peu. L’autre, est quant à elle dynamiquement gérée en PHP au moyen d’une interface de gestion commune aux différents sites. Mon objectif durant tout le déroulement de ce projet a été de maximiser l’utilisation de l’interface de gestion pour mettre à jour rapidement et simplement le site. Un pari réussi puisque aujourd’hui la majeure partie du site actuel est modifiable au moyen de l’interface administrateur. 13 Interface Administrateur : Capture d’écran de l’interface de gestion de la page des Partenaires Sports Contest. Page Partenaires : Capture d’écran de la page des partenaires gérée au moyen de l’interface de gestion ci-dessus. 14 Interface Administrateur : Capture d’écran de l’interface de gestion de la page des Catalogues Sports Contest. Page Catalogues : Capture d’écran de la page Catalogues du site Sports Contest modifiable au moyen de l’interface de gestion présenté ci-dessus. 15 Interface Administrateur : Capture d’écran de l’interface de gestion de la page des Revendeurs Sports Contest. Page Revendeurs : Capture d’écran de la page Revendeurs du site Sports Contest utilisant un plugin jQuery et modifiable dans l’interface de gestion. 16 Technologies utilisées & moyens mis en oeuvres AFIN de DONNER VIE AU PROJET et de le rendre performant, j’ai utilisé plusieurs technologies et langages différents. Le Store Locator : Concernant la création de la page « Revendeurs » du site internet, j’ai utilisé un plugin jQuery qui tire parti de l’API Google Maps qui permet de facilement mettre en œuvre un localisateur de magasins. Il suffit de fournir des données en JSON avec les bonnes informations pour que le plugin fonctionne. Pourquoi avoir utilisé le JSON ? Ce format, provient du monde du JavaScript, et s'apparente au XML dans sa fonction, en permettant de stocker des données textuelles de façon structurée. Ses avantages sont multiples, en effet, le JSON est un format compréhensible par tous (hommes ou machines) et aucun apprentissage est requis pour pouvoir l’utiliser tellement la syntaxe est simple. Il est aussi totalement indépendant de tout langage. Très nombreux sont ceux qui le prennent en charge: Javascript, PHP qui sont eux-mêmes utilisés dans le plugin de localisation des revendeurs. Enfin, il permet de stocker des données de différents types tout en restant très léger et très rapide d’exécution lorsque les requêtes sont plus importantes. C’est surtout dans une éventuelle croissance du nombre de revendeurs que j’ai choisi d’utiliser ce format pour prévoir un nombre de requêtes important. 17 La mise en place du plugin : Les données utlisées par le plugin sont simples : informations de géolocalisation (longitude et latitude), adresses, ville, code postal... Pour mettre en place le plugin, j’ai donc crée une table « revendeurs » dans la base de données qui contient toutes les informations nécessaires à l’affichage des différents magasins sur le site internet. Sur cette page, on peut soit être directement géolocalisé grâce à son adresse IP, ou alors tout simplement rentrer son code postal ou son adresse, et le plugin se charge de nous indiquer les magasins les plus proches et nous propose aussi l’itinéraire le plus rapide pour s’y rendre grâce à Google Maps et son API. Enfin, j’ai personnalisé le plugin en modifiant les feuilles de styles pour pouvoir afficher des informations supplémentaires lors du « clic » sur un revendeur (site internet, horaires, téléphone…). Lors de sa mise en place, seules les boutiques La Maison du Patin étaient présentes sur le site internet. Or, après quelques jours, les autres revendeurs Sports Contest ont réclamés d’être présents sur le site en sachant que celui-ci leur offre une bonne visibilité sur internet. Store Locator : Ci-dessous, les détails affichés lors du clic sur un revendeur précis. 18 Le Lazy Loading : Dans une constante perspective d’amélioration, le lazyloading est une technique primordiale pour accélerer un site WEB tout en économisant des ressources serveurs. En effet, le lazy-loading permet d’attendre une action du visiteur pour charger certaines portions de la page. Dans le cas du site Sports Contest, certaines pages de catégories de produits contiennent beaucoup d’images qu’il n’est pas utile d’afficher si l’utilisateur ne descend pas la page. C’est pourquoi j’ai utilisé cette technique. Cela permet d’accélerer radicalement le chargement des pages du site qui contiennent beaucoup d’images. Dans un second temps, les images présentes sur le site sont appellées depuis la base de données distante, de ce fait certaines pages demandent au serveur d’exécuter des requêtes assez lourdes et qui peuvent bloquer l’affichage de la page demandée, ce qui n’est pas optimal si l’on veut que le maximum de personnes restent sur notre site internet. De cette façon, avec le lazy-loading, on économise un chargement coûteux en ressources pour le serveur. La durée de chargement des pages les plus lourdes du site a donc largement diminuée lors de la mise en place de cette technique sur le site internet. Exemple de Lazy-Loading : Ci-contre, les premières images sont chargées puis affichées, tandis que les images sous la fenêtre d’affichage seront chargées seulement lors du scroll de l’utilisateur. Avant : 10,9 SECONDES Après : 6,7 SECONDES TEMPS DE CHARGEMENT MOYEN 19 Le référencement naturel : Les données structurées : Les données structurées sont des informations présentes dans les pages du site de telle sorte que Google et ses robots puissent les exploiter plus facilement et en analyser le contenu. Par exemple, les avis postés sur un produit du site sont affichés entre des balises notifiant à Google: ceci est un avis. Ces données structurées permettent à Google d’afficher dans ses résultats de recherche des informations complémentaires concernant les pages du site Sports Contest et améliore grandement la visibilité du site dans les résultats. Les données structurées permettent de mettre en valeur davantage les liens affichés dans les moteurs de recherche, et elles fournissent ainsi plus d’informations sur le contenu de la page. Les internautes les apprécient beaucoup pour plusieurs raisons : - Fournir immédiatement des informations - Capter l’attention grâce à des informations supplémentaires. additionnelles. - Faciliter la prise de décision en fournissant des - Augmenter le taux de clics et réduire le taux détails sur certaines requêtes (avis, prix...). de rebond en présentant le type de contenu brièvement. Exemple de données structurées : J’ai donc pensé que privilégier cette technique était très important et primordial dans l’optimisation du site internet. C’est pourquoi je l’ai également mise en place sur les différents sites gérés par Sports Contest. 20 Le responsive Design ou rWD : Les internautes se connectant de plus en plus souvent depuis leur téléphone ou leur tablette, les sites internet doivent savoir s’adapter aux nouvelles modalités de connexion. Or, lors de mon entretien d’embauche pour travailler chez Sports Contest, les attentes étaient claires, le site devra être compatible sur tablettes et mobiles. Cela implique de repenser l’approche de création d’un site Internet pour mieux anticiper les différentes contraintes liées à chaque support. Le Responsive Design est aujourd’hui incontournable si l’on veut conserver sa présence sur internet et ce, quel que soit le support de navigation emprunté. Cette technique permet d’offrir plus de réactivité au site qui s’adapte alors aux différentes résolutions d’écrans disponibles. Cette technique permet d’universaliser l’affichage d’un site WEB en utilisant les nouvelles règles et propriétés de CSS 3 (media Queries, micro formats...), acceptées par la grande majorité des navigateurs. Cette technique permet également une ergonomie optimale en laissant intacte la qualité de l’information sur le site WEB. Le Responsive Design est une solution stratégique à long terme car il permet de répondre à une recherche de manière plus rapide en n’affichant que les éléments les plus pertinents aux mobinautes. Une fois mis en place, il y a très peu de maintenance à réaliser et le coût de développement est plus intéressant que pour un site mobile spécialisé. Le site Sports Contest a donc entièrement été réalisé en responsive web design et, est donc compatible sur un grand nombre de périphériques différents (Ecrans Rétina, Smartphones, Tablettes...) Capture d’écran : Page d’accueil du site internet sur smartphones. 21 Ergonomie sur mobile : Capture d’écran du résultat des test d’ergonomie mobile Google concernant le site Sports Contest. 22 Les différentes pages du site internet Présentation des pages clés du site internet dans leurs versions finales. Page d’Accueil. Page Produits. Page Partenariats. Page Catalogues. Page Patinoires. 23 Page des Revendeurs. Page d’un Produit. Page de Contact. Page Mentions Légales. Page de Recherche. Page d’Erreur 404. L’ensemble de ces pages ont été réalisées en HTML 5 et en CSS 3 avec des bibliothèques jQuery pour créer les différentes animations qui les constituent. Elles sont toutes visionnables sur mobile et sont valides W3C (normes HTML). Page d’une Catégorie. 24 Conclusion du projet Suivi du site internet et de ses fonctionnalités. L’amélioration du site internet s’est prolongée tout au long de mon année au sein de Sports Contest. Cette création m’a permis de parcourir un panel de savoirfaire théorique et pratique conséquent, sans pour autant faire de l’ombre à une éventuelle simplicité de navigation pour les utlisateurs. En effet, l’architecture du site a été plusieurs fois repensée, pour toujours être un peu plus à l’écoute des visiteurs et éviter de les perdre dans des structures trop compliquées. Ce site a été pour moi, une expérience de longue haleine, où surmonter mes propres compétences fût un combat quasiment quotidien. Mais je sors de cette expérience bien plus mûr dans ma façon de travailler et dans la gestion de mon temps qu’a mon entrée chez Sports Contest, où mesurer et quantifier mes heures de travail n’était pas chose facile. 25 26 Les Créations WEB Mises à jour et améliorations Durant cette année d’alternance chez Sports Contest, j’ai aussi eu pour mission d’améliorer et de mettre à jour plusieurs sites marchands dont l’entreprise s’occupe. Tous ces sites appartiennent au domaine des sports de glace comme le site de Sports Contest. La première mission effectuée sur l’un des sites fut de mettre en place un panier dynamique permettant de proposer en fonction des articles déjà présents dans le panier des petits accessoires directement en relation avec ceux-ci. Pour sa conception, j’ai simplement édité une table de la base de données, pour faire coïncider des produits similaires entre eux. A savoir, que ce panier est toujours en phase de test. En effet, nous avons mis en place un système permettant de savoir quand un client ajoute des articles au moyen de ce panier dynamique, pour ensuite déterminer son impact sur les ventes et le mettre en place sur les autres sites internet. Capture d’écran : Ci-dessous, un exemple de produits proposés lorsque l’on ajoute des patins de hockey. 27 Capture d’écran : Ci-dessus, le panier dynamique lorsque l’on ajoute des patins de patinage artistique. Capture d’écran : Ci-contre, la table permettant d’ajouter des produits similaires en fonction de leur catégories. 28 Seconde création WEB dans le cadre de mon année chez Sports Contest, la mise en place de Newsletters pour les différents sites. Le défi ? Faire en sorte que les mails soient visionnables sur tout type de navigateur, client mail et périphériques. C’est donc avec la manipulation de tableaux en HMTL que l’on peut créer ce genre d’email. Le petit plus, fut de créer des templates stylisés et en responsive design pour les 3 sites internets. Capture d’écran : Ci-contre, un aperçu de la version mobile et tablettes de la newsletter pour SPR-Hockey. Capture d’écran : Ci-dessous, la version PC et clients mail de la newsletter SPR-Hockey. 29 Capture d’écran : Ci-dessus, la version PC et clients mail de la newsletter pour La Maison du Patin. Capture d’écran : Ci-contre, un aperçu de la version mobile et tablettes de la newsletter pour La Maison du Patin. 30 Capture d’écran : Ci-dessus, la version PC et clients mail de la newsletter pour Hockey Hebdo Shop. Capture d’écran : Ci-contre, un aperçu de la version mobile et tablettes de la newsletter Hockey Hebdo Shop. Ces newsletters ont été réalisées dans le cadre d’une opération promotionnelle s’étalant sur 4 jours et qui a été une véritable réussite. En effet, le nombre de commandes à été multiplié par 30 donnant lieu à un nouveau weekend promotionnel la semaine suivante. 31 32 Les Créations PRINT Design & création originales Chez Sports Contest, la polyvalence est de rigueur. Malgré la longue durée du projet de la refonte du site internet de l’entreprise, j’ai toute l’année animé les réseaux sociaux et réalisé des campagnes de communication ainsi que deux « design d’objets ». Ces réalisations étant très nombreuses, je les ai pour la plupart mises en situation dans des cadres ou des panneaux publicitaires pour améliorer leur présentation. La deuxième partie la plus importante des missions orientées PRINT fut la création des différents catalogues produits pour l’année 2015-2016. En effet, après m’avoir fourni le tarif actualisé des produits disponibles l’an prochain dans les magasins et sur les sites internet, je me suis attelé à la mise en page de quatre catalogues (sur cinq). Le premier catalogue est celui présentant les différents produits distribués et proposés par Sports Contest pour les patinoires, puis vint les catalogues Hockey sur Glace, Patinage Artistique et Roller Hockey qui présentent les produits vendus dans les magasins SportWest - La Maison du Patin. 33 Mise en situation de visuels crées pour promouvoir des produits sur Facebook. 34 Mise en situation de visuels crées pour promouvoir des produits sur Facebook. 35 Mise en situation de visuels crées pour promouvoir des produits sur Facebook. 36 37 Propositions d’affiches pour les soldes du 24 Juin au 4 Août. 38 Les deux “design objets” Présentation des deux créations d’objets originaux. Un des atouts à travailler dans une entreprise où la polyvalence est de rigueur, c’est que cela m’a permis de réaliser des missions très éclectiques. En effet, je n’avais que très peu touché au design d’objets. Et c’est je trouve, une approche très intéressante de l’infographie. Mise en situation d’une serviette créee à la demande de l’équipe des Dragons de Rouen (RHE). 39 Photos : Photographies des rampes Sports Contest créees à partir du visuel que j’ai réalisé. 40 Les catalogues produits Présentation des quatre catalogues. Pour réaliser les différents catalogues, j’ai utilisé en corrélation trois logiciels primordiaux : Adobe Illustrator, Adobe Photoshop et Adobe Indesign. En effet, chaque catalogues sont réédités chaque années, c’est pourquoi j’ai utilisé les précédentes mises en page pour accélérer les différentes étapes de création. L’ensemble des couvertures sont des montages faits sur Photoshop, alors que les mises en page sont soit des fichiers Illustrator (.ai) pour le catalogue Roller ou des fichiers Indesign (.indd) pour les trois autres. Au fil du processus de création, je me suis donc perfectionné sur tous les terrains qu’un infographiste ou un graphiste doit maîtriser. 41 Catalogue La Maison du Patin 2015 de Hockey sur Glace. 42 Catalogue Patinage Artistique : Première de couverture du catalogue ainsi qu’une double page de présentation de produits. 43 Catalogue La Maison du Patin 2015 de Roller Hockey. 44 Catalogue Sports Contest 2015 des tarifs pour Patinoires. 45 46 CONCLUSION & REMERCIEMENTS L’objectif principal que je m’étais fixé en postulant dans cette licence ATC, était de pouvoir renforcer ma double identité professionnelle : être infographiste et développeur. Ce sont deux univers différents mais qui se croisent dans leurs tâches respectives. Un développeur se doit de connaître des notions en graphisme et inversement pour bien se comprendre au sein d’une équipe dans la réalisation de projets PRINT et WEB. Avoir travaillé au sein de l’entreprise Sports Contest m’a permis de solidifier mes connaissances concernant toutes les étapes de la conception d’un projet WEB, et plus particulièrement un site internet. D’une part en tant que graphiste dans les choix graphiques et leurs création, et en tant que développeur dans la mise en place des différentes technologies utilisées pour créer le site internet. Mon intégration dans cette petite équipe a été un point essentiel dans le bon déroulement de mon année de formation. Cela permet des conditions de travail idéales ainsi qu’une ambiance agréable, mais toujours professionnelle. Je ne regrette en rien le fait d’avoir effectuer cette licence professionnelle en alternance, car je ressors riche de connaissances dans les domaines qui me tiennent à coeur. Cela étant du essentiellement à cette complémentarité des enseigements entre l’IUT et l’entreprise. Les points qu’il me reste à améliorer en sortant de cette année de formation, sont sans aucun doute la gestion de mon temps, et sa quantification pécuniaire. Car à mes yeux, présenter et vendre son travail n’est pas chose facile, mais je reste persuadé que c’est avec de l’expérience que l’on est plus confiant. Remerciements : En premier lieu, je tiens à remercier le directeur commercial Eric PINARD, qui a accepté de m’accueillir au sein de l’entreprise ainsi que toute l’équipe de Sports Contest, et plus particulièrement Anthony COLLET, mon tuteur en entreprise avec qui j’ai passé 10 mois à me former. D’autre part, je souhaite remercier l’ensemble des encadrants de l’IUT qui ont su nous transmettre leurs compétences et leur passion pour le WEB et la communication.