Rapport de stage

RAP PORT DE STAGE Cidem

MAWLANAZADA MATTHIEU BTS COMMUNICATION VISUELLE multimédia LYCEE JEANNE D’ARC de ROUEN

Projet Pro / Cidem

Sommaire Introduction..............................................................................................4-5

Présentation de l’association............................................6-9 Mon rôle dans l’association.................................................1 1-13 Mes missions......................................................................................14-23 Regard personnel..........................................................................24-25

Remerciements...............................................................................26-27

5

Sommaire

IN TRO DU CTION

Introduction

C

’est avec enthousiasme que j’effectue ma deuxième année de BTS communication visuelle option multimédia au sein du Lycée Jeanne d’arc.

L’intérêt que je porte aux métiers de l’image et aux nouvelles technologies m’a permis d’approcher un domaine encore inconnu: celui de la création graphique multimédia et du webdesign, au sein de l’association du Cidem, qui m’a accueilli pour mon stage du 10 Mai et 2 Juillet 2010 soit un total de huit semaines.

Dans un premier temps, je consacrerai quelques pages de ce rapport pour expliquer et définir le Cidem, tout en présentant l’équipe et les services que celle-ci propose.

Dans une seconde partie, je présenterai la méthodologie employée pour effectuer les missions réalisées ainsi que les fruits de ces travaux.

La troisième partie exposera les résultats des différentes missions qui m’ont été confiées au cour de cette période.

Ce rapport permettra donc de saisir globalement mon rôle au sein de l'association du Cidem, de présenter celle-ci et d’expliquer ma démarche tout au long de ce stage.

7

Introduction

PRESEN TATION DE L’ASSO CIATION

Historique de l’association

N

é en 1984 avec la volonté de plusieurs associations afin de mener des actions en faveur de l’éducation à la citoyenneté et pour faire progresser la démocratie, le CIDEM a su évoluer pour répondre aux besoins de la société et affirmer son identité et sa vocation originale. Le CIDEM regroupe aujourd’hui onze associations très diverses par leur champ d’action et leurs origines, unies par la même volonté de contribuer à l’épanouissement de citoyens autonomes, solidaires et responsables.

Depuis 25 ans, le CIDEM est un acteur civique engagé.

Le CIDEM est le centre de ressources de tous ceux qui souhaitent s’informer, agir ou faire émerger leur conscience citoyenne.

Il a pour finalité de favoriser les engagements citoyens, à travers les différents pôles d’activités au Cidem.

Informer ne suffit pas, l’action est ce qui permet de faire vivre l’engagement au quotidien. Comprendre sans exercer revient à privilégier une approche abstraite et intellectuelle, éloignée de la vie réelle, ce qui n’est pas l’approche privilégiée par le CIDEM. Le CIDEM s’adresse à tous ceux qui veulent s’engager pour faire vivre le civisme dans leur vie de tous les jours, dans leurs quartiers, leurs écoles ou leurs communes, quels que soient leur âge, leurs origines, leurs croyances ou leur identité.

En donnant à davantage de citoyens les moyens de s’informer, de participer et de développer leur conscience citoyenne, le CIDEM souhaite les aider à s’inscrire dans une société plus humaine, plus accessible et plus responsable.

9

Présentation de l’association Historique de l’association

Cidem Plan des locaux 3-5 rue Saint Fargeau. 75020 Paris

Didier.F

Moi

Alina C. Marion B.

CĂŠdric B.

Julien H. Julien R.

Audrey G. CĂŠcile B.

Organisation

L

’association du Cidem s’organise autour de trois pôles spécifiques.

A sa tête, Cédric Bloquet, directeur général du Cidem. Il dirige son association et son équipe au grès des volontés leurs besoins par le biais de la coopération des différents pôles. A la fois relais entre le client et l’équipe technique, Monsieur Bloquet est le pilier de l’association du Cidem.

Cécile Barres est son assistante de direction et de communication interne au sein du Cidem.

Audrey Guérin est responsable administrative et financière.

Ensuite, il y a Didier François, responsable de l’éducation et de la pédagogie et de la citoyenneté, qui conçoit et réalise des projets pour les proposer aux institutions.

Puis Aline Chisliac, responsable europe et de la programmation de l’europe pour les citoyens. C’est elle qui s’occupe de la communication avec les pays étrangers.

Enfin, Julien Riant, le webmaster. se trouvait dans le pôle où je travaillais. Il s’occupe de la programmation et du développement de sites webs réaliser par le Cidem. Je travaillais en coopération avec Julien Harant qui était mon maître de stage et graphiste, il a le rôle du webdesigner et s’occupe également des productions prints.

11

Présentation de l’association Organisation

PRÉSEN TATION DE MON RÔLE DANS L’ASSO CIATION

Présentation de mon rôle au sein de l’association

L

ors du premier jour de travail dans le pôle graphisme, on m’a présenté l’espace de travail que j’allais occuper durant les huit semaines à venir. Ce premier jour m’a permis de me familiariser avec les rangements des travaux de la partie graphisme et web.

J’ai principalement travaillé sur les logiciels de la suite CS3: . Indesign pour la mise en page, . Illustrator pour la création vectorielle . Photoshop pour la retouche d’image, . Dreamweaver pour la mise à jour de site internet.

La petite déception a été de ne pas avoir pratiqué sur les logiciels d’animation, Flash et Dreamweaver, mes travaux n’ayant pas pour nécessité de l’utilisation de ces logiciels.

Au sein de l’association, mon rôle était le même qu’un employé, j’avais les même tâches, les mêmes horaires (9h30 - 18h30) et mes avis et considérations étaient souvent pris en compte.

Les tâches que l’on me confiait étaient diverses : scanner des documents administratif et en faire des pdf, fiche pédagogique, fiche d’exercice, mais principalement la conception et la réalisation de sites internet, ainsi que la réalisation d’une affiche avec son livret de référencement en adéquation.

13

Présentation de mon rôle au sein de l’association

Conception et réalisation de site internet

C

e fut la tâche qui occupa la moitié de mon temps de travail (l’autre moitié a servi à réaliser une affiche et d’autres tâches secondaires). Cela consistait à recevoir le cahier des charges établis avec Julien Harant. Il me fallait ensuite réfléchir très vite sur une idée, une base afin de proposer des visuels et les proposer à mon maître de stage. Il s’agissait donc de capter et de rendre compte de l’atmosphère à communiquer sur une page internet.

En général, cette première partie n’occupait qu’une petite partie de mon temps. Avec un ratio d’une demi journée de réflexion sur la conception contre une semaine ou plus pour la réalisation.

Du fait d’avoir eu un seul projet de site à effectuer, j’eu le temps pour proposer assez de visuels variés répondant au cahier des charges et laissant le choix à Julien le temps d’analyse des propositions faites.

Je travaillais souvent avec un stylo et un carnet que j’entretenais tout au long de mon stage pour me rendre compte des principes graphique et ergonomique. Je rendais mes idées sur des planches Illustrator en affichant une grille de 100 px subdivisé tout les 10 px.

Cela m’a permis d’avoir un rendu précis de ce que j’envisageai de réaliser, afin de construire un graphisme bien en place. La grille permet au webmaster de se repérer par rapport à la mise en place des éléments lorsqu’il s’occupe de la partie codage css.

J’ai pu avoir un bref aperçu de l’utilisation du php, et du javascript notamment pour un module jquery installé sur un site que j’ai réalisé.

Conception et réalisation de site internet

À la fin de l’étape de conception, il fallait passer à la réalisation.

La partie qui a donc occupée la majorité de mon temps.

La réalisation est la concrétisation des idées posées soit sur le papier, soit sur Photoshop : à partir d’une base visuelle bien claire, il faut retranscrire l’image en code html et css. Il en est de même pour la maîtrise de l’actionscript et des logiciels de création numérique.

De nombreux détails sont à prendre en compte lors de la programmation d’un site, notamment la compatibilité des différents codages css et types d’images. Car certains ne sont compatibles avec tous les navigateurs internet (ie6, ie7, safari, opéra, mozillar firefox, google chrome...). Cette tâche se révéla être plus ardue que prévu. Cependant, l’expérience n’en fut que plus enrichissante.

15

Conception et réalisation de site internet

PRESEN TATION DES MISSIONS EFFECTUEES

Présentation des missions effectuées I. Missions d’ordre secondaires, mise en bouche.

L

ors de ma première semaine au Cidem, Julien m’a demandé de « fouiner » le poste que j’occupais afin que prenne mes marques et que je sache où trouver les emplacements fichiers rangés. J’ai d’abord effectué des tâches dont le but était de me faire la main sur le poste informatique et les logiciels ainsi je montrais mes compétences à Julien afin qu’il voit de quoi j’étais capable. Pour cela il m’a demandé d’entreprendre la modification de multiples sujets, sur différents supports : . Fiche d’exercice pour apprendre l’Europe aux enfants. . Modification de cartes européennes destiné aux institutions. . Fiches pédagogiques sur l’histoire de Nelson Mandela. . Modification de couleur d’un bouton de site web. . Mise à jour du site PEC. . Redimensionnement de photographie pour l’Unicef. . Plaquette de présentation du Cidem.

Bouton : remplacement de couleur du «u».

Modification des données de la Carte de l’Union Européenne.

17

Présentation des missions effectuées Mise en bouche

Présentation des missions effectuées II. Missions concrètes.

1.Web : Mémoire Commune/ Mémoire Partagée.

Partie 1 : recherche/interface du site.

D

ès ma seconde semaine, un projet de site internet m'a été confié. Début du projet 25 mai. Il s'agissait d'un site d'exposition photographique virtuelle, "Mémoire Commune – Mémoire Partagée "afin de commémorer et rendre hommage aux combattants de la guerre pour la France et à des évènements historiques.

Je voulais que l'on navigue sur ce site de la même manière que si elle avait été installé dans un lieu réel qui aurait été théâtralisé à cette occasion (me rappellant ma sortie à la «Maison Européenne de la photographie» à Paris lors d'un sujet de recherche appliquée en 2008 ). Ce site a dû être fait sur un support web à défaut de ne pas avoir été réaliser dans un espace d'exposition.

J'ai d’abord effectué un briefing avec Julien H. et Julien R. La durée de réalisation du site était d’un mois et demi environ. La question qui se posait était de savoir si le site allait être fait en Flash ou en html. Pour des raisons de temps et de compatibilité de poste chez les différents navigateurs nous avons opté pour du html. (une version flash aurait été pensé si la version html avait été terminé à temps).

Julien Harant s’est occupé avec moi de la partie design web, Julien Riant quant à lui s’est chargé de m’aider à mettre en ligne le site.

Didier chargé du projet m’assistait régulièrement dans mes tâches pour suivre la progression du site.

Pendant une semaine entière, Julien Harant fut absent, je me suis donc occupé du design, du site et de la navigation. À son retour

Présentation des missions effectuées Mémoire Commune / Mémoire Partagée

de congé, j'ai pu lui faire une dizaine de propositions d’interface graphique avec des principes de navigation. Nous en avons discuté, puis sélectionné trois d'entre eux. Ensuite notre choix s'est orienté à l'avis de Didier (chargé du projet), Laurence (chargé du contenu du projet), et Julien Riant (web master).

Ensuite il est venu le temps des modifications, de l'ergonomie du site, du design des boutons, de la modification du logo, du choix typographique.

Jusqu'au 7 juin, je n'avais toujours aucun contenu concernant l'exposition, ni texte ni photographie.

Certaines pièces photographiques se situaient dans différents arrondissement de Paris. Le jeudi 10 juin, j’ai donc pris l'initiative de me porter volontaire et de partir à la quête photographiques des différentes places et monuments qui devait figurer dans l'exposition.

19

Présentation des missions effectuées Mémoire Commune / Mémoire Partagée

1

2

3

Maquette du site : 1. Accueil - choix des rubriques

2. Introduction d’une rubrique

3. Galerie photographique de la rubrique

Présentation des missions effectuées Mémoire Commune / Mémoire Partagée

Présentation des missions effectuées 1. Web : Mémoire Commune/ Mémoire Partagée.

Partie 2 : programmation.

L

e 22 juin, le projet du site d’exposition photographique aurait dû être terminé depuis une semaine mais Didier, qui était censé me fournir le contenu, était souvent absent à cause de ces nombreux déplacements. Ce qui engendrait donc le retard du projet.

Le site devait être officiellement mis en ligne le 18 juin.

Le design a été finalisé mais la mise en ligne n’as pu être programmé à partir du moment où le contenu n’était pas complet.

J’ai programmé le site avec l’aide de Julien Riant.

Ce que j’en ai appris: Il faut penser de manière simple, les formes doivent rester légères à pour ce type de site (et la plupart d’ailleurs). Il faut vraiment se mettre à la place du navigateur afin de facilité sa navigation du site. Il doit être ergonomique.

Lors de la programmation, il faut rendre compatible le site sur tous les navigateurs, et faire en sorte que les codes css puissent fonctionner sans problème sur chacun d’entre eux (ie 6, ie7, safari, opéra, mozilla firefox, google chrome...).

En effet, il faut prendre en compte le fait que certaines personnes utilisent encore les versions précédentes du navigateur. J’ai également pris conscience qu’il faut impérativement aller rechercher ce qu’il se fait en matière de graphisme, afin de pouvoir réutiliser ces principes.

21

Présentation des missions effectuées Mémoire Commune / Mémoire Partagée

Poster DUDH

Aperçu des pages du livret

Présentation des missions effectuées Déclaration Universelle des Droits de l’Homme

Présentation des missions effectuées 2. Print : Poster de la Déclaration Universelle des Droits de l’Homme.

P

endant la réalisation du site, afin que je ne m’en lasse pas, Julien m’a confié la création du poster de la DUDH destiné aux institutions. Celui-ci pour la rentrée de Septembre 2010.

J’ai proposé et argumenté les affiches auprès de Julien lors de leur présentation.

Mon but était de bien mettre en avant le titre, car c’est un poster avant tout et il doit avoir un impact lorsqu’il est aperçu à une longue distance. J’ai d’abord travaillé la typographie. La Rockwell a plu pour son caractère fort et assuré. J’ai pivoté de quarante cinq degrès tout le contenu du poster pour le rendre ascensionnel et dynamique, cela se fait de plus en plus de nos jours. Le problème qui s’est posé fut celui de devoir faire apparaître tout les articles, tous devait être au moins une fois présent et entier afin de s’y référer. Enfin l’affiche a été validé par Cédric Bloquet.

Après que l’affiche eut été terminée, il a fallut réaliser, en adéquation du poster, le livret de référencement aux articles. J’ai appliqué à la couverture du livret la même structure que celle de l’affiche, cela étant pour correspondre et lier les deux objets entre eux.

Ce que j’en ai appris: Tout doit être carré : composition des éléments, interlettrage, alignement des blocs de texte, bloc d’éléments entre eux, des marges bien réglées pour une bonne lisibité, et surtout la hiérarchie des éléments.

23

Présentation des missions effectuées Déclaration Universelle des Droits de l’Homme

1

2

3 Interface d’accueil : 1. En ligne (http://itinerairesdecitoyennete.org/journees/17_oct/ 2 & 3. Interfaces proposées.

Présentation des missions effectuées Journée Mondiale du Refus de la Misère

Présentation des missions effectuées 3. Web : microsite du 17 Octobre, Journée du refus de la misère.

I

l me restait deux semaines de stage. Je fut chargé d’une nouvelle mission, réaliser le microsite du 17 Octobre, journée mondiale du refus de la misère.

C’est un site dans lequel je devais essentiellement privilégier la place à du contenu textuel et des liens aux contenus téléchargeables.

J’ai donc proposer deux pistes en contraste l’une de l’autre mais répondant toute de même à la demande.

Je me suis porté sur une directive, bidonville. Les couleurs que j’ai choisies ne sont pas très joviales afin d’éviter d’être contradictoire avec le thème du site. Elle ne devaient pas être « déprimante » non plus car il ne pas que le visiteur ait envi de quitter le site, ayant le « moral à zéro ».

Après mon départ, Julien m’a envoyé la correction du site, ce qu’il allait mettre en ligne.

A l’ouverture du fichier je fus surpris de la manière dont le fichier avait été corrigé. Julien m’a alors expliqué que le Cidem devait publier des travaux à son image (restriction des formes et des couleurs ).

Ce que j’en appris: En réalisant ce site, je devais penser Cidem. Réaliser ce que le Cidem peut faire, il devait être à son image. J’ai voulu utiliser de la texture pour exprimer une idée. L’utilisation de texture doit se faire de manière très discrète et légère, presque éphémère. Julien m’a montré différents exemples de site qui utilisait de la texture en background.

L’application de texture se fait beaucoup de nos jours mais il faut faire attention à ce qu’elle ne soit pas trop lourde visuellement.

25

Présentation des missions effectuées Journée Mondiale du Refus de la Misère

REG ARD PER SON NEL

Regard personnel

+

-

27

P

our conclure ce rapport de stage, je peux dire que cette expérience fut aussi enrichissante qu’interéssante. Elle m’a permis d’approcher et même d’intégrer pour quelques semaines le monde du graphisme. De la conception à la réalisation des sites, d’une affiche et de son livret.

Le Cidem m’a apporté la vision interne du métier en misant sur le côté technique et graphique. J’ai pu rencontrer les différentes erreurs que tous webdesigner peut rencontrer : de l’adaptation en code de site, des questionnements sur la communication et le respect des consignes imposées dans le cachier des charges.

Ce stage fut l’occasion pour moi d’apprendre les bases du php, son fonctionnement et ce à quoi il sert, dans quelles circonstances.

Le Cidem travail toujours au compte à rebours, les éléments qui doivent être fournit en temps et en heure jamais présent quand il le faut. La preuve en est, j’ai quitté le Cidem tandis qu’il manquait toujours des textes et des photos à inclure dans le site pour Mémoire Commune Mémoire Partagée.

Le Cidem réalise des travaux destinés à des institutions, au ministère, enfin plus globalement pour l’Etat français. De ce fait, j’ai appris à être plus rigoureux, à travailler sur des choses qui ne me plaisait pas forcément mais sur lesquelles j’ai acquis des techniques et des connaissances. Malgré tout, la créativité n’était pas vraiment au rendez-vous, lorsque l’on travail en agence, pour un commanditaire, nous sommes surtout éxecutant et non créatif. Je pourrais qualifier la production en agence, d’impersonnelle.

Regard personnel

RE MER CIE MENTS

Remerciements

J

e tiens à remercier dans un premier temps, toute l’équipe pédagogique du Lycée Jeanne D’arc et les intervenants professionnels responsables de la formation de ce BTS en communication visuelle option multimédia pour avoir assuré un enseignement théorique, pratique et rigoureux.

Je tiens à remercier et à témoigner tout particulièrement ma reconnaissance aux personnes suivantes, pour l’expérience enrichissante et pleine d’intérêt qu’elles m’ont fait vivre durant ces huit semaines au sein de l’association du Cidem: Monsieur Cédric Bloquet, directeur général du Cidem, pour l’accueil et mon intégration au sein de l’association. Ainsi que Didier François, chargé du pôle « éducation pédagogique à la citoyenneté, environnement et développement durable », du projet de site qu’il m’a confié, Mémoire commune, mémoire Partagée, pour lequel il m’a fourni les contenus et à participer à son élaboration.

Julien Harant et Julien Riant, mes deux maîtres de stages, graphiste pao et web master respectivement, qui se sont montrés patients et disponibles, pour le temps qu’ils m’ont consacré durant cette période de stage, ainsi que pour avoir su enrichir mes connaissances et mes techniques des nouvelles technologies.

Audrey Guérin (administratif), Cécile Barres (assistance du directeur général) et Alina Chisliac du Pôle Europe (coordinatrice européenne), pour l’accueil agréable et sympathique, ainsi que leur coopération professionnelle tout au long de ce stage.

29

Remerciements

31