Rapport de stage // Muséum de toulouse // Webdesign communication

RAPPORT DE STAGE

M

U É S MU

TOULOUSE

STÉPHANIE BIZOUARD // Webdesign // Service communication Page_2

Page_2

SOMMAIRE

5

AVANT-PROPOS

RÉALISATION DES PROJETS

13 23

Conception et réalisation du site

Conception et réalisation du template

11 7 29 30

LE MUSÉUM DE TOULOUSE

REGARD PERSONNEL ET PROFESSIONNEL

Page_3

MES ATTENTES LES OBJECTIFS

REMERCIEMENTS

« Le design graphique sauvera notre monde...

Juste après le Rock’N’Roll.»

DAVID CARSON

Page_4

AVANT- PROPOS « CHOISIS UN TRAVAIL QUE TU AIMES, ET TU N’AURAS PAS À TRAVAILLER UN SEUL JOUR DE TA VIE » (Confucius) Cette citation est mon leitmotiv depuis des années, c’est pourquoi j’ai choisi de faire mes études dans un domaine artistique.

Depuis mon enfance, je baigne dans un univers créatif. Ce sont mes proches qui m’ont transmis l’envie de créer.

Cette envie m’a donné l’élan de me lancer que ce soit dans le domaine de la décoration pour mes études, ou de façon plus manuelle dans le dessin, ou la couture, pour mes hobbies.

Suite

à

un

bilan

compétences,et une demande de financement auprès du Fongecif Occitanie, j’ai intégré la formation de Concepteur Réalisateur Multimédias et Internet.

Ce nouveau métier est pour moi une passerelle suite à ma formation de décoration d’intérieur, car il est avant tout un milieu créatif à la recherche d’identité et de communication visuelles.

Afin de valider ma formation, j’ai effectué un stage au Muséum de Toulouse au sein du service de communication, du 3 décembre 2018 au 8 janvier 2019.

Je souhaitais travailler dans un domaine de culture et de partage, plus enrichissant et proche de mes valeurs.

de // Avant- propos //

Page_6

LE MUSÉUM DE TOULOUSE LE MUSÉUM DE TOULOUSE, MUSÉE D’HISTOIRE NATURELLE ET D’ÉTHNOLOGIE,EST APRÈS CELUI DE PARIS, LE DEUXIÈME PLUS GRAND DE FRANCE. Il nous fait voyager à travers le temps et nous propose un regard différent sur notre société et notre culture.

Il est situé au coeur du Jardin des plantes, en plein centre ville de Toulouse, dans un environnement plutôt agréable.

Il abrite une collection de plus de deux millions et demi de pièces sur une superficie d’environ 6 000 m2. Après dix années de fermeture pour rénovation, il a

réouvert ses portes au public en janvier 2008.

La ville de Toulouse, souhaitant faire du muséum un outil d’éducation, de réflexion et de débat sur l’histoire naturelle, l’homme et l’environnement a voulu une conception de la scénographie dans un esprit contemporain.

Le projet unifie d’un seul geste les trois composantes du programme d’exposition : partie historique, partie moderne et jardin botanique.

Centré sur le visiteur, le muséum fait le lien entre les savoirs scientifiques et son appropriation citoyenne. Cette ambition oriente l’ensemble de ses expositions, de ses activités, et de ses animations.

Le site web du muséum s’ins-

// Le Muséum de Toulouse //

crit également dans ce sens : il est une vitrine du muséum mais aussi un « autre » lieu du muséum dans lequel les visites sur place peuvent être prolongées et enrichies, les débats et les échanges peuvent être poursuivis.

La communication et l’identité visuelle du Muséum est assurée par Annabel Saint-Paul Fontecave, qui est chargée de projets culturels en ligne.

Le blog sur lequel j’ai travaillé, est hébergé sur Tumblr depuis 2013. Il vient en complément du site principal du Muséum de Toulouse. Nous pouvons y retrouver toute l’actualité du Muséum : les coulisses des expositions, la vie du Muséum, les réactions des visiteurs, et enfin il apporte un autre regard sur les sciences.

Les bureaux sont situés dans les bâtiments du Quai des Savoirs à côté du Muséum et du Jardin des plantes, tous deux appartiennent à la Mairie de Toulouse, regroupés sous le nom de «Toulouse Métropole».

Page_8

// Le MusĂŠum de Toulouse //

« C’est en faisant des erreurs que l’on apprend et que l’on se développe. Il faut être mauvais pour devenir bon. » PAULA SCHER

Page_10

MES ATTENTES LES OBJECTIFS Le programme de ma formation est complet sur le métier de webdesigner, mais il m’a fallu assimiler beaucoup d’informations en peu de temps.

Dans ce métier c’est surtout la pratique qui fait l’expérience.

J’avais donc hâte de rentrer en stage, d’être immergée dans le monde de l’entreprise, comment j’allais appréhender les missions qui allaient m’être confiées. Mais surtout la façon de gérer les difficultées. En étant débutante sur ce métier, j’étais un peu anxieuse au niveau du temps de réalisations des deux projets convenus sur un laps de temps assez court.

Pendant l’entretien de

recrutement, nous avons définit avec Annabel, les projets sur lequels j’allais travailler : - CRÉER LE BLOG DU MUSÉUM Nous avons décidé d’utiliser le CMS Wordpress afin que le blog soit administrable, facile à gérer, afin de faire gagner du temps à Annabel, lors de la rédaction des articles.

- CRÉER UN TEMPLATE DE NEWSLETTER AVEC MAIL CHIMP. C’est un outil d’emailmarketing qui permet de gérer des listes de diffusion (contacts personnalisés), de concevoir des newsletters professionnelles, de les programmer et de suivre les résultats des campagnes mails grâce aux statistiques.

// Attentes, Objectifs //

Travailler pour une administration n’est pas une chose facile, j’ai rencontré des difficultés au niveau des accès internet, des téléchargements des logiciels nécessaires pour mettre en ligne un site web.

En amont, il faut créer une demande auprès du service concerné, et celle-ci doit être validée auprès des supérieurs. Pour chaque ordinateur, des accès et fonctionnalités sont attribuées en fonction du poste de la personne.

Page_12

CONCEPTION ET RÉALISATION DU SITE // LE BLOG DU MUSÉUM //

01 02 03 04 05 06

Installation du logiciel Uwamp Choix du thème Wordpress Création d’un thème enfant CSS / Modifcation du thème PHP / Tests sur l’inclusion d’un carroussel photos Finalisation et mise en ligne du site

// Réalisation des projets //

01

Etant donné que mon stage était de courte durée, je n’ai pas voulu perdre de temps, j’ai dans un premier temps, travaillé en local grâce au logiciel Uwamp.

C’est un logiciel qui permet de créer des bases de données, avec lequel je pouvais télécharger les différents thèmes sous Wordpress.

J’ai donc pu tester les 3 thèmes que nous avions retenus avec Annabel.

C’était une très bonne manière de gagner du temps, de tester les fonctionnalités de chaque thème et de décider lequel choisir, et travailler une fois les accès obtenus, directement en ligne sur le thème retenu.

Je me suis entraîné sur la création de bases de données, il m’a fallu en créer une pour chaque thème, et télécharger un nouveau dossier de thème Wordpress afin de présenter les 3 thèmes différents.

02

Le thème retenu, «NEWIE» à été celui qui était le plus épuré au niveau graphique.

Le blog du Muséum est un site informatif, lu par des utilisateurs tous différents, il faut donc que la naviguation soit la plus fluide

et accessible possible.

03

J’ai avant toute modification sur le thème, créé un thème enfant du thème principal, Un thème enfant WordPress est un thème qui hérite des fonctionnalités d’un autre thème, appelé thème parent. Le thème enfant est la méthode recommandée pour modifier un thème existant, et préserver les modifications qui peuvent êtres perdues lors de mises à jour.

Il suffit de créer une copie du thème principal et de le renommer avec la mention «_child» afin de ne pas les confondre. On place le fichier du thème dans le dossier «wp-content» qui est contenu dans le dossier Worpdress.

04

Les options intéressantes pour «customiser» un site sont comprises dans le thème payant, en manipulant des thèmes gratuits, j’ai rencontré des difficultées quant à la mise en page.

Si je voulais des couleurs ou des «widgets» en plus, j’avais l’option d’ajouter du code HTML/CSS dans les emplacements prévus à cet effet. Mais cela reste de

Page_14

l’ordre de modules simples comme un calendrier, des archives, une image dans la colonne sur le côté par exemple.

Me retrouvant avec la frustration de ne pas livrer un site sur-mesure avec la mise en page souhaitée, mais aussi parce que je souhaitais «coder», j’ai proposé à Annabel d’utiliser un template qui soit neutre. Il est téléchargeable (sur le site «Underscore theme») avec le minimum de code en HTML, il faut ajouter ensuite le CSS et le PHP afin d’obtenir un site surmesure et administrable.Cette option n’a pas été validée par Annabel, parce qu’elle à pensé que cela prendrait plus de temps, et comme c’est souvent le cas en entreprise il faut être rapide et efficace.

Me voilà donc avec le thème choisi à «customiser» afin qu’il colle au plus près des attentes d’Annabel.

Le créateur à utilisé un graphisme très sobre, je peux donc à l’aide du CSS le façonner. J’ai utilisé l’outil que l’on trouve dans tous les naviguateurs, celui de Google Chrome est «l’inspecteur». Il est nécessaire pour reprendre les noms des éléments et des balises qui composent le thème afin de «contrer» le CSS

de base, pour enlever certains blocs ou détails inutiles, ou tout simplement pour changer une largeur/ hauteur, une couleur...

Cela n’a pas toujours été évident pour moi, les thèmes créés pour Wordpress sont construits de façon dynamiques et comportent beaucoup d’éléments, de «boîtes dans des boîtes» (que l’on appelle «DIV») qu’il faut être capables d’identifier et de comprendre.

Cela aura été un excellent exercice, et cet outil m’aura été indispensable afin de cibler le bon élément et de le modifier.

C’est un exercice que je n’avais pas assez pratiqué en formation, j’ai surtout utilisé l’inspecteur pour comprendre les erreurs que j’avais faites lorsque mon CSS ne s’appliquait pas. Je ne me sentais pas à l’aise avec cet outil, j’avais l’impression d’être perdue et de ne pas comprendre le code.

Finalement, je n’avais pas le choix ici si je ne voulais pas livrer un site sans âme, je me devais de comprendre le code et de l’utiliser à mes dépends, alors en prenant le temps j’ai cherché les bons éléments à cibler et j’ai réussi à enlever ce qui était superflu !

J’ai effectué quelques modifications sur le menu : la couleur du fond, la couleur des liens afin de les faire ressortir

// Réalisation des projets //

car le menu de base était sur un fond blanc et ne se détachait pas du reste de la page, alors qu’il est un élément fort dans la naviguation de l’utilisateur. J’ai ajouté du code HTML/ CSS afin de mettre un lien de retour vers le site principal du Muséum, dans la colonne en haut à droite.

C’est un détail, mais j’ai pensé qu’en étant stagiaire, une autre personne pourrait avoir besoin de revenir dans mon code CSS. J’ai donc commenté certaines parties au cas où un développeur ou une tierce personne aurait en charge de modifier le code plusieurs mois après mon passage. il suffit de mettre des commentaires non visibles à l’écran, qui indiquent ce à quoi correspondent les lignes de code.

05

Annabel voulait une page d’accueil simple et efficace, avec un carroussel de photos en appel pour les articles du blog.

N’étant pas disponible dans le thème gratuit, j’ai donc essayé d’y inclure du PHP. Je pensais pouvoir utiliser des parties de code que je trouverai sur internet. Cette technique du «copié-collé» de morceaux de code est souvent bien utile pour obtenir le même

résultat sans avoir à tout coder soi-même ! À ce jour, je n’ai pas réussi à utiliser ce que j’avais trouvé sur internet, je pense avoir été ambitieuse en voulant utiliser du PHP.

06

À la rentrée je vais regarder comment insérer un carroussel sans utiliser ni PHP, ni plugins (extensions pour Wordpress) car ces derniers sont très pratiques mais peuvent, lors de mises à jour, être cassés par celles-ci.

Il est donc recommandé d’utiliser d’autres façons, je vais me tourner vers le Jquery, c’est avec ce langage que j’ai appris à faire des carroussels, j’ai trouvé un tuto qui explique la marche à suivre. Ce tuto utilise les deux langages , PHP et JAVASCRIPT, ce ne sont pas des langages avec lequels je suis très à l’aise, je verrai ainsi où vont mes limites.

Ce sont des langages que je dois encore approfondir après ma formation. Je vais trouver une solution afin de livrer un site fini, et de qualité.

N’ayant pas eu les droits ouverts sur mon poste de travail je travaille toujours en local, sur mon ordinateur personnel. A la

Page_16

CONNEXION AU TABLEAU DE BORD DE WORPDRESS AVEC LE LOGICIEL UWAMP

// Réalisation des projets //

CHOIX ET CRÉATION DU THEME ENFANT

Page_18

MODIFICATION DU MENU ET DU FOOTER OUTIL «INSPECTEUR GOOGLE

// Réalisation des projets //

MODIFICATION DU MENU LIEN AVEC IMAGE VERS LE SITE PRINCIPAL

Page_20

Page_21

« La simplicité se démarque, alors que la complexité va se perdre inexorablement dans la foule. » KEVIN BARNETT

Page_22

CONCEPTION ET RÉALISATION DU TEMPLATE // LA NEWSLETTER DU MUSÉUM //

01 02 03 04

Recherches / Utilisation de l’outil MailChimp Édition / Mise à jour du fichier HTML d’origine Recherches / construction du tableau en HTML Travail sur le «responsive» de la newsletter

// Réalisation des projets //

01

Il était prévu que je crée un template de newsletter sur la plateforme MailChimp. C’est un outil d’email-marketing qui permet de gérer des listes de diffusion (contacts personnalisés), de concevoir des newsletters professionnelles, de les programmer et de suivre les résultats des campagnes mails grâce aux statistiques.

J’ai commencé par faire un peu de benchmark (recherches sur la concurrence) sur internet, afin de prendre la tendance graphique des newsletters proposées aujourd’hui. C’est un travail de recherches que j’ai commencé le premier jour du stage, n’ayant pas mes accès sur mon poste de travail.

Le travail de recherches, est important avant de se lancer dans la conception. Je note mes idées, fais de rapides croquis, des maquettes si nécessaire, et ensuite je me lance dans la conception. Ce travail de recherches me permet de réfléchir à la construction de mon projet.

Finalement il s’est avéré que je n’ai pas utilisé les templates proposés par MailChimp, ils ne correspondaient pas aux

dimensions souhaitées par Annabel. La newsletter du Muséum comporte 3 grandes sections : l’agenda, le contenu des actualités et le contenu éditorial. Je ne pouvais pas garder cette configuration avec les templates, même en utilisant la partie éditeur de l’outil, je me suis vite retrouvée coincée.

02

Annabel m’a donc envoyé le fichier HTML utilisé pour éditer sa newsletter, afin que je le télécharge dans l’éditeur de l’outil et que je puisse le modifier.

Un problème s’est posé avec ce fichier, qui a été crée il y a quelques années, il était donc obsolète et n’était pas «responsive». Aujourd’hui, plus de la moitié des utilisateurs lisent leurs mails sur leurs mobiles, il faut donc être en capacité de s’adapter en s’assurant que les mails soient consultables sur n’importe quelle plateforme et sans aucun souci d’affichage du contenu.

Je l’ai donc retravaillé avec l’éditeur de texte NOTEPAD++, qui permet d’écrire des lignes de code HTML/CSS et d’afficher le résultat dans un naviguateur internet.

J’ai dans un premier temps

Page_24

le navigateur. De nouvelles balises sont apparus avec le HTML5 et le CSS3, j’ai donc adapté mon document à ces nouveaux langages.

J’ai dû faire des recherches sur internet pour cette newsletter et, encore une fois, ce fût un très bon exercice. Jusqu’à présent je n’avais pas réellement utilisé la balise «tab» qui sert à construire des tableaux en HTML. Ces tableaux sont interprétés différement selon chaque messagerie, certains attributs HTML et propriétés CSS sont interprétés sur certaines messageries mais non sur d’autres. Voilà pourquoi il est difficile de coder un template de newsletter en HTML.

03

Mes recherches se sont donc portées sur la construction d’un tableau en HTML pour une newsletter, j’ai trouvé une vraie mine d’informations sur internet, sur des sites, des blogs, des forums.

J’ai donc réussi grâce à ces informations, ces bouts de code pris ça et là, à construire un tableau.

Cela n’aura pas été un exercice facile, parce que j’ai recueilli beaucoup d’informations, dû

faire le tri dans tout cela, et j’ai du adapter mon code au fur et à mesure, essayer encore et encore !

J’ai également effectué un travail sur le CSS, sur des petits détails, comme les «pictos» des liens des réseaux sociaux, mettre des marges autour de certains blocs afin d’aérer le graphisme. Et enfin, j’ai ajouté, à la demande d’Annabel, un bouton «callto-action» pour inciter les utilisateurs à lire le reste du contenu des articles sur le site, ou le blog.

Ma ténacité m’aura été utile, et surtout j’ai mieux assimilé certaines fonctions en CSS.

04

Ma newsletter, aujourd’hui correspond à ce que souhaitais Annabel du point de vue de la mise en forme, elle est actuelle et plus épurée.

Ce n’était pas mon projet le plus important, je l’ai donc mis de côté afin de travailler sur le blog.

Il me reste encore le plus gros du travail sur le «responsive». J’ai fais quelques essais qui n’étaient pas concluants, il y a encore des soucis au niveau de l’affichage des colonnes qui ne passent pas sur une seule ligne.

// Réalisation des projets //

MISE A JOUR DU FICHIER HTML CONSTRUCTION DU TABLEAU

Page_26

AFFICHAGE DE LA NEWSLETTER

// Réalisation des projets //

« En terme de graphisme, il y a selon moi deux choses essentielles, la simplicité et la clarté. Un bon design nait de ces deux éléments. » LINDON LEADER Designer graphique.

Page_28

REGARD PERSONNEL ET PROFESSIONNEL J’ai absorbé beaucoup d’informations et de langages différents tout au long de ces huit mois de formation. J’étais donc tiraillée entre le stress et l’excitation, avant de commencer mon stage.

C’était un vrai challenge personnel et professionnel. Je voulais savoir si j’étais capable de tenir mes engagements, et de livrer un blog et un template de newsletter, à la fin de ce mois de stage.

Je suis bien consciente d’être encore très scolaire, c’était donc l’occasion de me mettre à l’épreuve, et de savoir si j’étais capable de me débrouiller avec mon niveau de débutante.

A ce jour, il me reste encore à finaliser le blog, et travailler sur le responsive de la newsletter.

Je pense que j’ai perdu du temps

à vouloir tout coder par moimême.

Comme me l’a fait remarquer Annabel, «il faut que je gagne en confiance et ne pas perdre de vue que, ce sont les résultats qui comptent et non les moyens. Je dois être moins perfectionniste et aller davantage à l’essentiel».

Finalement je suis plutôt fière de ce que j’ai accompli, j’ai trouvé les capacités et les ressources nécessaires afin de rendre un travail de qualité.

Je pense que j’ai encore beaucoup de choses à apprendre sur le métier de Webdesigner, mais je me sens plus confiante pour chercher et trouver un emploi.

J’ai la créativité nécessaire pour ce métier mais je dois apprendre la partie technique, c’est avec l’expérience qu’elle viendra au fur et à mesure.

// Réalisation des projets //

REMERCIEMENTS je remercie tout particulièrement Annabel Saint-Paul, Chargée de projets culturels en ligne, de m’avoir fait confiance et l’ensemble de l’équipe du Muséum et du Quai des Savoirs pour leur accueil chaleureux dans l’ entreprise.

J’ai appris beaucoup lors de ce stage et j’ai surtout été conforté dans le choix de mon avenir professionnel.

Je remercie également l’équipe d’encadrement d’AP Formation, ainsi que les formateurs pour m’avoir accompagnée et guidée tout au long de ma réorientation professionnelle.

Merci à vous pour votre lecture.

Page_30

Page_31

FORMATION PROFESSIONNELLE CONCEPTEUR ET RÉALISATEUR MULTIMÉDIAS ET INTERNET avril 2018 // janvier 2019