Rapport Projet Tuteurés - 2ème année IUT

Remerciements ........................................................................................................................ 3

Introduction ............................................................................................................................... 4

Présentation de l’agence

Membre ............................................................................................................................. 5

Historique ........................................................................................................................... 6

Éléments identificateurs ............................................................................................... 7-11

Projets réalisés

Vélo Vert Loisirs ......................................................................................................... 12-23

Présentation globale Description des fonctions du produit

Analyse des risques Benchmarking

Réalisations Bilan de réalisation finalisée

Analyse finale LiliPulse ...................................................................................................................... 24-33




Analyse finale Brugeria ...................................................................................................................... 34-39




Analyse finale Relevé des heures projet et analyse ...................................................................................... 40

Analyse de la répartition ................................................................................................... 41

Pourcentage par projets .............................................................................................. 42-43

Planning ............................................................................................................................ 44

Mise en perspectives ........................................................................................................ 44

Comptes détaillés ........................................................................................................ 44-49

Conclusion .............................................................................................................................. 50

Annexes I .......................................................................................................................... 51-52

Annexes II ......................................................................................................................... 53-55

Tout d'abord nous remercions l’IUT Paul Sabatier, et la formation SeReCom de nous permettre de réaliser ces Projets Tuteurés. Nous remercions Michel Lavigne qui a soutenu l’ensemble des groupes de PTUT pour nous conseiller, et nous faire avancer ! Nous remercions l’ensemble des professeurs, qui ont contribué à l’avancement de nos projets par leurs cours et aussi en répondant judicieusement à nos questions. Nous tenons à remercier Monsieur Trezel qui a été notre tuteur de stage et nous a suivi du début à la fin. Il a su nous faire comprendre nos erreurs, nous a beaucoup conseiller pour la réalisation des projets. A certains moments, nous l'avons écouté, à d'autres nous n'en avons fait qu'à notre tête, pour finalement réfléchir et revenir sur ce qu'il nous avait dit. Il nous a réellement aidé à avancer, encore merci à Monsieur Trezel. Ensuite, même si ils n'ont pas toujours été présents, et malgré leurs exigences ! Nous remercions Guillaume Albert, Matthieu Dewonck et Bernadette Regis, nos commanditaires. Ils nous ont fait confiance et nous espérons avoir été à la hauteur de leurs espérance, ne pas les avoir déçu. Ils nous ont poussés vers le haut, au-delà de nos limites et c'est en partie grâce à eux et à leurs idées que nous avons appris les différentes tâches qui incombent à une agence de Webdesign. Il est aussi important de remercier les membres du groupe LiliPulse, ainsi que les membres de l'association VVL, et la totalité des membres de Brugeria, pour leur sympathie durant les phases, pas forcément joyeuse, de récupération de document. Ces personnes nous ont aidés à vivre les projets tuteurés de façon plus légère, en supprimant partiellement le stress et les inquiétudes !

En première année, nous avons formé l’agence GraphiZ, nous nous sommes créés une identité mais nous avons aussi trouvé des projets. Avant de partir en vacances, un planning avait été rédigé pour définir de façon précise les jalons, les phases de chacun des projets. Content et satisfait de notre première année, nous avons entamé cette seconde année motivés et prêts à en découdre avec nos projets ! Aujourd’hui, nos réalisations sont en place et fonctionnelles. Les commanditaires ont eu ce qu’ils attendaient, bien qu’il reste toujours des améliorations à effectuer, et il y en aura toujours. Pour la première fois en deux ans, nous avons eu le plaisir du travail fini. Mais pour en arriver là, il a fallu surmonter les imprévus, notamment l’arrivée d’un nouveau membre dans le groupe, et s’adapter aux situations auxquelles nous avons été confrontés. Nous avons vécu une année pleine de rebondissements, voire même quelques conflits, mais nous avons toujours réussi à stabiliser la situation et repartir de l’avant pour mener nos projets à bout. Dans ce rapport, vous allez découvrir ce qu’il s’est passé dans l’agence GraphiZ sur ces 10 derniers mois et comment nous avons gérer l’agence pour en arriver à la réussite de chacun de nos projet. Nous commencerons par faire un rappel sur l’agence en elle-même ainsi que ses membres, cela permettra aussi de remettre en place le contexte dans lequel nous nous étions quitté l’an dernier. Ensuite, nous présenterons chacun de nos projets de façon précise en passant par chaque étape, de la recherche du projet à la réalisation en passant par les études du besoin et le Benchmarking, entre autres. Enfin, nous conclurons avec un compte des heures, accompagné d’une analyse détaillée. Les projets tuteurés ont été une expérience enrichissante pour nous tous, ce dossier est le reflet de notre travail, bien qu’il ne puisse en présenter qu’une petite partie. Nous vous laissons découvrir une

année d’apprentissage, de travail : une année avec GraphiZ.

Membres

+ Ludovic Yol Après un bac ES il rejoint la formation SRC puis prend l’option Informatique. Ayant commencé à coder des sites Web dès le lycée il apporte beaucoup à l’agence et joue le rôle du principal codeur. Ludovic a aussi un goût prononcé pour le graphisme et participe donc à la conception graphique des sites web. Ludovic est depuis l’an dernier Directeur de l’agence et supervise l’équipe. Il a su maintenir motivation et efficacité au sein du groupe pendant deux ans.

+ Sablayrolles Sylvain Sylvain, passe un bac S et décide de rejoindre la formation SeReCom pour se rapprocher de ce qui l’intéresse : le réseau. C’est avec calme et patience, qu’il aide l’équipe dans sa tâche de planificateur et de codeur. En deux ans, Sylvain a été très polyvalent dans le groupe et a aidé chaque membre de l’équipe dans chacune de leurs différentes tâches.

+ Regis Romain C’est suite à un bac STI ELN que Romain rejoint SRC. Il a rejoint le groupe de Projet Tuteuré après leur formation, mais s’est très

bien intégré au sein de l’équipe. Il a su faire preuve d’une ample motivation et s’est grandement investit dans les différents projets adoptés. A la base régisseur et documentaliste il a su aider les développeurs par ses multiples idées, de plus nous avons pu compter sur lui pour rassembler des informations à profusion et des contacts utiles à l’agence.

+ Vincent Loubet Apres une formation en STI électronique dans laquelle lui est venu une passion pour l'informatique et le multimédia, il s'est logiquement tourné vers la formation SRC ou il a pu confirmer et affiner ses choix d'orientation. A son aise dans la programmation et le multimédia il s'est donc dirigé naturellement vers la section média.

+ Sophie Royer Sophie passe un bac L option maths et arts plastiques elle a pu apporter à l’agence un œil critique sur les projets en cours. Elle est assez polyvalente et a fait ses preuves en aidant à la communication en général. Sa créativité ‘’booste’’ l’agence et encourage l’innovation.

Historique

L’agence se présente comme créatrice et designer de site web. C’est grâce au penchant de Ludo pour le codage et le webdesign que l’idée de former cette agence est née, regroupant d’abord Sylvain puis Sophie, nous avons accueilli Romain juste après la création de l’agence. Et c’est en deuxième année que nous nous voyons recruter Vincent notre dernier membre.

Plus largement, pourquoi internet ? Pourquoi des sites Web ? Comme dit précédemment chacun des membres à sa propre vision du web et des sites internet. De plus, nous avons voulu travailler sur un support qui ne nous limiterait pas. Internet est et restera -a priori et nous l’espérons- toujours un support aux ressources infinies, en perpétuelle évolution. Il se développe et n’a de cesse que de donner des possibilités d’innover et prend de plus en plus la véritable image d’un piédestal de la créativité.

Enfin nous avons aussi souhaité nous rapprocher au mieux d’un avenir professionnel. Notre formation nous permet de rattacher judicieusement les possibilités qu’offre le web, aux entreprises. Aujourd’hui par exemple, peut-on parler d’une entreprise ou d’une association sans y associer un site web ? La chance de pouvoir créer une agence telle que GraphiZ, est de proposer quelque chose de neuf et réfléchi à des commanditaires en besoin. Parfois, le site web agit comme un reboostant, et relance l’activité des entreprises, des associations ou encore des particuliers.

Pourquoi autant d’impact ? Car, si nous proposons des sites web, nous devons reprendre une image dite « identitaire », qui représentera l’entreprise, ou le concept. GraphiZ, propose de créer, ou de redéfinir cette image que l’on pourrait aussi appeler l’image de marque. C’est grâce à un travail passionné que nous nous investissons autant. Proposant, création de logo, d’identité visuelle, de slogan, et même création et mise en place de dossiers de partenariat. Nous étendons en fait notre travail, au remaniement parfois nécessaire de la communication dans les projets des commanditaires.

C’est grâce à des membres polyvalents que nous pouvons proposer à nos commanditaires un travail répondant à toutes leurs attentes, définies dans un cahier des charges propre à chaque projet. Nous prenons plaisir à comprendre les réels besoins de chaque commanditaire et faisons notre maximum pour refléter nos solutions dans les projets réalisés. Les membres de l’agence ont compris les multiples avantages des Projets Tuteurés. En effet, la gratuité régissant tous les projets, nos cibles clients s’élargissent. Et la variété des projets apporte richesse et intérêt à tous.

É l é m e n t s i d e n t i f i c a t e u r s

A prononcer ‘’Graphi-zède’’ Nous avons choisi de nous appeler GraphiZ. Agence motivée et créative, se voulant assez sérieuse, nous avons décidé de marquer un ‘’socle’’ solide, en se basant sur un mot qui nous définirait au mieux et illustrerait notre activité clairement :

Graphisme : Le graphisme consiste à utiliser, créer ou encore déformer des éléments.

L’image est un de nos critères les plus importants. En le déclinant subtilement nous obtenons un mot clair et très simple qui ne perd pas de son caractère.

Intéressés et curieux d’innovation ainsi que de fraîcheur, nous avons marqué notre nom d’une touche dynamique, pétillante et originale : ‘‘Z’’. Le ‘‘Z’’ signifie la fin, et représente en ce point, un calme et une sérénité que nous avons pensé intéressante de mettre en avant, pour une agence créative, cela sous-entend un côté appliqué, ce qui n’est à notre avis pas négligeable car cela peut prouver notre capacité à gérer des projets de taille et aux responsabilités conséquentes. S’il représente la fin, le ‘’Z’’ annonce aussi un début. Lettre très peu utilisée dans la langue Française, sa sonorité est associée à des onomatopées, elle est comme eux, apporte des fantaisies au langage. Le ‘’Z’’ est la touche de dynamisme du mot, tout comme la créativité apporte vitalité à l’agence. Il résonne aussi et pour finir comme une pointe de modernité en venant actualiser son mot voisin « Graphisme ».

‘‘Z’’

G r a p h i Z

Un diminutif : GZ.

Nous avons choisi de parfois représenter le nom de l’agence par un simple diminutif, notamment dans le logo. Le ‘’G’’ et le ‘’Z’’ sont respectivement la première et la dernière lettre du nom de l’agence. Avec une sonorité qui ‘’accroche’’ par ses nombreuses consonnes; le nom ‘’GraphiZ’’ marque principalement les lettres ‘’G’’ et ‘’Z’’. En illustrant le nom que par ses deux lettres, nous venons subtilement chuchoter le nom complet, et équilibrer l’image d’un mot peut-être un peu dur à retenir( ?)

Nous nous sommes basés sur un bleu ciel contrasté par des touches de couleurs chaudes afin d’illustrer la polyvalence de l’agence, son dynamisme et son sérieux. En premier plan figurent le G et le Z de GraphiZ. Enfin, en bas, figure le nom complet de l’agence.

En arrière-plan du logo Nous pouvons voir un losange bleu aux multiples facettes, il s’apparente à un diamant. Un quart du losange semble se parsemer dans les airs, une sorte de mouvement d’envol. L’idée de représenter un diamant, montre simplement et encore une fois la volonté de l’agence de souligner ses bases solides (matière du diamant : une des plus résistante au monde) mais aussi sérieuses, le diamant est qualifié de différent degrés de pureté, nous aimons ce concept, nous aimons nous dire que la valeur de notre travail représenterait un certain degré de qualité pour nos clients. Les multiples facettes représentent, elles, simplement la polyvalence de l’agence. Une agence sérieuse…

…Mais pas que. Le ‘’losange’’ ou ‘’carré penché’’ rappelle notre unité de travail : le pixel. Nous avons voulu illustrer la touche de rêveries que nous pourrions apporter à nos différents travaux, grâce à un travail créatif important. C’est pour cela qu’une partie du diamant, bien que solide, sait par lui-même s’accorder de la légèreté et s’envole avec délicatesse. Par la même occasion nous avons utilisé une forme, et un mouvement de logo dit ‘’positif’’, qui se lit dans le sens de la lecture occidental, de la gauche vers la droite et grandit tout en s’évaporant.

Du bleu ! Couleur de base froide, nous l’avons choisi pour sa fraicheur. Mais aussi pour ses connotations immédiates, telles que : bleu ciel, l’air, la sérénité, synonymes d’imagination et de rêve il est là pour illustrer de manière sereine l’aspect créatif de l’agence, les dégradés et les reflets sont aussi là pour rappeler la matière première du diamant et donc du socle sérieux et de la confiance que souhaite dégager l’agence. Pour ses symboliques, le bleu est la couleur de la communication, ce qui semble correspondre parfaitement à la représentation d’une agence de webdesign telle que la nôtre. Une bonne communication est un point essentiel de notre fonctionnement.

De l’imaginaire, du rêves, un certains risque de représenter l’infini et le manque de limite. Nous aimons prendre des risques ! Mais nous avons, grâce à des couleurs plus chaudes, voulu rappeler le dynamisme de l’agence. Et pour marquer les limites, chaque élément possède un contour noir et notre nom diminutif vient comme se poser sereinement sur le diamant. Notre nom est en noir, comme les contours des diamants, cela fait discrètement référence au dessin, où l’on retrouve souvent des contours noirs, qui viennent définir le dessin finit sur lequel, on peut par la suite y ajouter des couleurs. Comme l’énoncé d’un mode de fonctionnement précis.

Lors de notre première année de Projet Tuteuré, nous avons concentré notre travail sur l’identité graphique de l’agence. Une fois un nom et logo cohérents trouvés nous avons créé notre site. Le site terminé nous avons commencé nos projets sans revenir sur notre image d’agence afin de mieux nous concentrer sur les travaux des commanditaires. Nous avons réussi à travailler sur trois projets au cours de ces deux ans de PTUT. Suite à l’arrivée de Vincent dans l’équipe en deuxième année, et ayant atteint notre ‘‘nombre maximum’’ de projets réalisables, nous n’avons plus besoin d’être contacté via le site, nous n’avons donc pas mis à jour le site concernant les membres de l’agence. Nous avons aussi créé une page Facebook ce qui nous a permis de faire la promotion de notre site qui était alors nouveau.

Lors de la mise en place du site (1ère année) nous n’étions pas passé par un CMS*. A l’époque nous ne connaissions pas ou très peu le principe. De plus, nous avions comme idée de base de réaliser un site vitrine, sans mise à jour régulières. Le CMS ne nous était alors pas

indispensable. *CMS : Un système de gestion de contenu ou SGC (Content Management System ou CMS) est une famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d’applications Multimédia. Ex : WordPress, Joomla, Drupal…

Pour notre agence, nous avons voulu faire un site vitrine, rapide d’utilisation, simple et surtout compréhensif. Pour cela nous avons organisé une hiérarchie en quatre parties : « Bienvenue », « Biographie », « Portfolio » et enfin « Contact ».Dans la première partie, un message de bienvenue résumant synthétiquement l’Agence et les services proposés. Dans la partie Biographie, une description de chacun des membres de l’agence. La partie Portfolio est, elle, particulière. Elle contient les projets finis mais aussi ceux en cours !

Nous avons voulu entretenir un contact facile avec nos commanditaires. Pour cela, nous avons trouvé intéressant de mettre un lien renvoyant au travail en cours. Ainsi, le commanditaire peut regarder l’avancement du projet sans être obligé de nous solliciter et d’attendre une réponse. Pour cela il leur suffisait de cliquer sur le lien « site en cours de développement ». Et enfin la partie Contact, un formulaire de contact classique envoyant directement un mail de l’agence : [email protected].

+ L’idée était d’avoir l’ensemble du contenu sur une seule et même page. Le problème de n’avoir qu’une page ? Risque de manque de lisibilité, où de surcharge. Nous voulions faire en sorte que le contenu ne supplante pas le design. Nous avons réussi à faire cohabiter l’idée et le problème grâce à l’accordéon. N’est alors requis aucun chargement de page, mais une séparation des informations aussi efficace qu’avec des liens ordinaires. + Design : En première année, il est évident qu’un site en JavaScript était incompréhensible, mais avec notre capacité d’analyse et l’esprit de logique nous avons réussi à modifié un thème préexistant, Motion, pour nous l’approprier en ajoutant la touche GraphiZ. (Voir annexes : Annexes I – GraphiZ) + La partie portfolio utilise encore le « hover » comme sur la bannière mais c’est la partie contact qui a été la plus complexe, il a fallu apprendre des bases de « PHP », langage qui en début de première année était alors inconnu des codeurs. + Le site a été mis en ligne en Janvier 2012, sur PlanetHoster, grâce à un tutoriel du site du zéro.

× Gmail, avec la création d’une adresse Gmail × Google Agenda (plutôt en première année) afin de fixer les heures de réunion. En

deuxième année, nous nous voyons tous les jeudi après-midi, ce qui facilite la tâche de l’organisation.

× Facebook : Si nous n’y avons pas pensé en première année, nous avons créé un groupe (différent de la Page www.facebook.com/graphiz) car le groupe n’est visible que par les membres de l’agence. Nous y partageons des fichiers, du texte, des images…L’avantages ? La rapidité, et l’affichage de toutes les actualités, sur une seule page à l’accès simple et direct. Cela permet de communiquer plus vite.

De plus, Facebook possède un système de ‘‘vu’’ qui s’apparente à un accusé de réception un peu plus poussé, ainsi nous pouvons directement savoir qui de l’agence est informé ou non des dernières actualités postées sur la page du groupe. Ce système marche aussi pour les messages de types mail sur Facebook. Cela nous permet, si jamais de remarquer très rapidement un ralentissement dans l’agence et de remotiver les troupes en temps voulu.

× Téléphones : Nous communiquons aussi beaucoup par SMS, rapide est direct cela nous permet de nous tenir informé les uns des autres en permanence.

Commanditaire : Guillaume Albert

Nous vous invitons à visiter le site www.vvl-montredon.fr et la page Facebook www.facebook.com/VVLMontredon

Vélo Vert Loisirs est une association qui organise des randonnées VTT et pédestres dans la région Sidobre. Elle existe depuis une dizaine d’années, mais n’ayant pas suivi l’évolution des supports de communication et avec sa communauté vieillissante, elle a subi une grosse perte de membres et une perte d’influence sur ces dernières années. Le jeune Guillaume Albert qui fait maintenant parti des membres actifs de l’association a pour souhait de relancer cette dernière avec notamment la création d’une image sur le web, inexistante jusqu’à présent, en faisant sa promotion sur des supports plus contemporain. Voici les différents objectifs que nous nous sommes fixés:

Réaliser un site

× Comportant informations « fixes » (type site vitrine)

× Mais aussi des informations dynamiques (modules ajouté au site vitrine)

× Ayant pour but de promouvoir l’association dans la région Sidobre

Faciliter la mise en place d’une communauté en ligne

× Ayant pour but de réunir une communauté de passionnés × Permettre l'échange entre les membres dans la communauté (forum) × Permettre l'échange entre les membres de la communauté et les «

administrateurs » (blog)

Architecture du site en deux parties : une partie spectateur ‘‘publique’’ et une partie membre (forum)

Interactivité Musique de fond, Navigation intuitive (grâce au menu en forme de roue, original mais facile d’utilisation)

Interface graphique Epuré, mais ensemble basé sur la photo. Le site serait sublimé par les photos de fond qui retrace l’atmosphère de l’association et des randonnées VTT.

Maintenance facile à prendre en main. Nous proposons des tutoriaux rédigés par nos soins.

Outils propres aux développeurs : × Editeur de code source : Notepad++ × Client FTP pour la transmission de fichiers qui utilise le protocole de

communication FTP* : FileZilla × Utilisation d’une plateforme de gestion de contenu (CMS : Content

Management System): Nous avons choisi WordPress car il était déjà connu par le commanditaire.

Outils propres aux graphistes : × Logiciels de traitement d’image : Photoshop, Illustrator (logiciel de

traitement d’image vectorielle)

*Protocole FTP : Il permet, depuis un ordinateur, de copier des fichiers vers un autre ordinateur du réseau, ou encore de supprimer ou de modifier des fichiers sur cet ordinateur. Ce mécanisme de copie est souvent utilisé pour alimenter un site web hébergé chez un tiers.

Manque de suivi / Anticipation des évènements

Etant notre premier projet, nous avons appris de nos erreurs tout au long de ce travail. Il a en effet été long a réellement démarrer, nous avons remarqué que dans ce projet nous avons tardé à commencer un quelconque travail, car nous avons dû attendre le logo qui était produit par un ami designer du commanditaire. Nous avons alors travaillé sur les autres aspects du site, c’est-à-dire le squelette et le structure. Mais ce travail fini nous avons eu un temps de latence.

Ce premier évènement nous a appris à anticiper, et nous avons alors établie un planning assez large pour laisser du jeu en cas d’imprévus. Nous avons aussi essayé d’envisager tous les problèmes possibles, par exemple nous avons définie des méthodes de travail pour créer les maquettes du site, nous nous sommes divisé en deux groupes à l’intérieur de l’agence, et nous

avons travaillé chacun de notre côté, sans se concerter pour pouvoir proposer au commanditaire deux interprétations complètement différentes du graphisme de son site.

Nous avons eu un seul léger problème avec le commanditaire concernant le suivi du projet. Nous pensions impératif d’avoir du contenu pour remplir un minimum le site, et le rendre exploitable dès son lancement lors de la finalisation du projet. Nous avons alors demandé à Guillaume A. de nous fournir du contenu (texte descriptif de l’association etc.). Mais avec son emploi du temps chargé il n’a pas trouvé le temps de le rédiger, nous avions peur de voir les échéances arrivées et de ne rien avoir, mais nous priorisons le reste du travail sur le site, et nous avons mis en arrière-plan le souci de contenu. Nous avons même contourné le problème, car le site étant basé sur WordPress, le commanditaire pourra ajouter, modifier, supprimer le contenu à sa guise, et grâce à la documentation d’instruction que nous lui fournirons, il n’aura alors aucun problème !

Délais / Spécifications

Dès le début du projet, nous avions carte blanche sur le graphisme du site. MAIS le commanditaire avait quelques idées, quelques sites qu’il appréciait et qui l’inspiraient. Ayant la chance d’avoir eu comme référence des sites au concept original et à l’aspect graphique très intéressant, nous avons pu laisser déborder notre imagination.

C’est alors que nous avons pris le risque de jouer la carte de l’originalité. Qui dit originalité, dit, concept visuel poussé mais aussi codage complexe. Nous pensions alors que Vélo Vert Loisir serait notre seul et unique projet car nous avions plein d’idée et de ressources à épuiser ! Se posait alors un vrai risque quant au respect des délais. Mais grâce au savoir-faire de Ludovic et à la sérénité de Sylvain, nous nous sommes rendu compte que nous pourrions arriver à nos fins, avec nos propres moyens, sans bâcler le travail.

Concurrence

La seule concurrence possible est celle des autres associations similaires aux alentours de Montredon-Labessonié et dans la région du Sidobre. Ceci dit, il n’y a pas vraiment de concurrence. Le seul défi à relever pour l’association est de se faire connaître, et nous sommes là pour assurer leur notoriété. Concernant la concurrence ‘‘virtuel’’ l’association n’est pas la seule à réaliser un site parlant de VTT, pour cela nous avons réalisé un Benchmarking disponible plus bas.

Communication

Grâce au site nous encourageons la communauté de l’association existante à agrandir le cercle, et à partager des informations sur un forum. Le risque étant éventuellement d’opter pour des supports non adaptés à la cible, ou encore pire de se tromper de cible. Pour cela, nous avons -lors des réunions avec le commanditaire- posé clairement la question des membres et des habitués.

A savoir : devait-on s’adresser à une ‘‘clientèle’’ existante, ou à une clientèle inexistante et à venir?

La réponse fut un peu les deux, nous avons alors décidé de faciliter la communication entre les membres, qu’ils soient anciens ou nouveaux.

× Une communication entre les membres de la communauté. Ce via un forum, simple d’utilisation il est accessible à tous, on y retrouve très vite une atmosphère communautaire, qui nous semblait importante pour l’association. Le forum serait privé et réservé aux membres de l’association.

× Favoriser le contact entre les membres et les ‘‘administrateurs’’, membre très actifs et/ou fondateurs de l’association. Ce contact se fera grâce à la création d’un blog, où toutes les nouvelles, les actualités, les informations seront rédigées par les administrateurs et lu par les membres et les autres curieux.

Clarification des rôles

Pour ce projet, nous sommes au début partis du principe que notre polyvalence serait un allié. Si cela nous a aidés à nous comprendre, il a vite fallu revenir sur nos choix et clarifier la situation. En effet, nous avions commencé à avoir une communication entre le commanditaire et nous assez floue, nous étions un peu perdus… Par exemple, Ludovic le chef de projet ayant des facultés dans la plupart des domaines, a préféré cibler son travail sur la programmation ainsi qu’une partie du graphisme. Sophie s’est vu attribuer, en plus de son rôle de graphiste initial, les responsabilités de la communication entre le commanditaire et l’agence. Nous avons vu petit à petit, qu’il était plus facile pour le commanditaire d’échanger avec le chef de projet, car il avait un œil plus objectif quant à l’avancement du travail. Nous sommes alors revenus sur nos choix. C’est pourquoi nous avons adapté la répartition des rôles de chacun au fur et à mesure du projet.

Cette année, Ludovic s’est vu prendre les rênes de la programmation au dépend de la création graphique totalement déléguée à Sophie. L’équilibre s’est définie petit à petit et nous nous sommes chacun amélioré dans notre domaine et travaillons beaucoup plus efficacement qu’en début de projet.

Structuration de la démarche

1ère phase : recherche

Nous avons mis du temps à cerner les besoins du commanditaire, car d’une part il s’agit là de notre premier projet, et nous débutions à peine les projets tuteurés. Etablir le cahier des charges a été assez long car nous manquions de détails.

2ème phase : conceptualisation / 3ème phase : squelette et maquettes

Pour ce projet, la recherche graphique a été très importante, nous avons alors passé énormément de temps à concevoir l’identité graphique de l’association autour du logo. Nous devions aussi et avant tout, établir un squelette de site solide. Le site proposant beaucoup de

contenu, nous avons pris le temps de clarifier chaque point et mettre en place une hiérarchie la plus judicieuse possible.

4ème phase : maquette finale

Une fois les maquettes proposées choisies, améliorées et validées nous pouvons passer à la véritable réalisation.

5ème phase : codage et approfondissement du sujet en parallèle.

En effet nous sommes allés plus loin dans l’analyse des besoins de l’association en proposant par exemple, à Guillaume A. des dossiers de partenariat avec des magasins de VTT de la région.

Afin de définir et connaitre les réels besoin de l'association Vélo Vert Loisir, une analyse de la concurrence a été réalisée en prenant en compte les cibles visées, l'activité, le but et la concurrence directe sur le secteur du Tarn. Actuellement, Vélo Vert Loisirs est une association locale qui n'agit que sur le secteur de Montredon - Labessonié. La communication interne de l'association se fait d'adhérant à adhérant. Pas d'information sur celle-ci sans se rendre sur place. Sans site, sans publicité et sans évènement régulier, cette association est au point mort. Le Benchmarking qui a été réalisé en fonctions des associations de VTT de la région, qui possède un site web.

Benchmarking réalisé au lancement du projet VVL, durant la première année. Depuis, certains sites ont évolués mais nous ne prendrons pas en compte ces changements afin de ne pas se perdre.

Castres-Cyclo Club. www.castres.cyclo.club.over-blog.com Les Plus Les Moins

Apparait en 1° page de recherche Google avec les mots clés "association VTT Castres"

- Template (style du site) ne correspondant pas avec l'activité - Logo simpliste - Utilisation d’ascenseurs verticaux (scrolling) - Mise à Jour irrégulière

Le Castres Cyclo Club dispose d'un site internet, mais n'utilise pas correctement ses outils. D'une part "le scrolling" important à un effet répulsif vis à vis de l'utilisateur lambda, d'autre part, le manque cruel de mises à jour peut faire croire que le site est laissé à l'abandon aussi bien par les usagers que les administrateurs.

VTT Mazamet Club. www.vtt-club-mazamet.fr/ Les Plus Les Moins

- Site léger -Prise en main rapide et simple -Premier sur Google avec les mots clés "association VTT Mazamet" - Utilisation d'une "GoogleMap" afin de localiser l'association.

- Site "vide" - Manque de personnalité - Manque d'informations

A l’heure actuelle le site du VTT Mazamet Club manque d’informations, cependant cela laisse penser que le site a été créé récemment et que les mises à jour prochaines se chargeront de régler ce problème. Le site s'affiche rapidement, et la prise en main est très intuitive.

VTT Brassac - Lacaune www.brassacxcrossbybrassaclacaunevtt.overblog.com Les Plus Les Moins - Site internet mis à jours fréquemment (4/5 Mise A Jours par mois) - Navigation Simple - Lien vers deux sites "Pro" dans le domaine du VTT - Premier sur Google avec les mots clés "association VTT Brassac"

- Mauvaise organisation du site - Logo à retravailler - Bannière

Les mises à jours régulières laissent penser que l'association est active, en effet, l'organisation de nombreux évènements le confirme (le dernier en date X-Cross Brassac du 17 au 20 Mai). L'association compte de nombreux membres, ainsi que des bénévoles prêts à donner de leurs temps pour faire perdurer cette association.

Pour résumer, le concurrent le plus important reste VVT Brassac - Lacaune, mais il ne faut cependant pas négliger les autres associations. C'est pourquoi Vélo Vert Loisirs doit posséder un site internet vivant, simple d'utilisation, jolie et avec toute les informations nécessaires pour bien connaitre l'association, son fonctionnement et pouvoir être tenu au courant des nouveautés très rapidement.

Un Benchmarking sur les autres associations de vélo de la région Sidobre a

démontré que l’image de marque est un enjeu important, essentiel pour Vélo Vert Loisir. Les concurrents ont pour la plupart des sites à l’abandon, très peu actualisés et mal référencés. Les sites sont composés d’un blog qui est souvent reliés à une page Facebook. Les informations sont cachées [ou en tout cas mal mises en place], on se perd dans des sites mélangeant vente (publicités) et

informations réelles.

Community Management et stratégies de communication sur le web : Vélo Vert Loisirs

Agence GraphiZ Cf Annexes II – Vélo Vert Loisirs.

Ce site devra donc comprendre :

Calendrier : Afin de noter les évènements liés ou non à l'association, mais toujours sur le thème du VTT.

Forum : Un espace où les adhérents peuvent échanger des informations simplement.

Espace média : Pouvoir consulter toutes les photos ou vidéos liés au VTT, et à l'association.

Premières maquettes cf Annexes I – Vélo Vert Loisir

Avant de présenter le projet final nous nous permettons de faire un léger rappel de l’historique de productions, qui nous a amené au site actuel et sans lesquels nous n’aurions pas pu évoluer.

S

A gauche la maquette du menu principal.

Ci-dessous les icones réalisés pour intégrer au menu. Ils reprennent la construction de la croix occitane (traits+points) et évoque aussi les constellations, en rapport avec la randonnée (se balader et regarder le ciel)

D e s e c o n d e a n n é e (Pour visualiser les réalisations antérieures

cf Annexes I – Vélo Vert Loisirs)

Maquette finale (cf détails en Annexes II – Vélo Vert Loisirs.)

Cette maquette est la maquette finale du site, c’est celle sur laquelle nous nous sommes basés pour coder.

Étude de ‘’Community management’’

Cf Annexes II – Vélo Vert Loisirs

Si l’association est à but non lucratif on peut quand même y appliquer des stratégies de

communication marketing, car le but reste le même: se faire connaître et développer une “image de marque”. Pour cela nous avons défini rapidement le type de client, il s’agit en fait de personnes entre 30 et 40 ans plutôt masculines. Mais nous avons pu remarquer que l’association regroupe aussi des enfants entre 7 et 10ans et des personnes plus âgés. C’est pourquoi, nous divisons la communication de Vélo Vert Loisirs en quatre grandes parties: - Le bouche à oreilles. - L’information “direct” et “sans retour” via le site. - L’échange entre une communauté VVL qui pourra interagir sur un forum officiel.

- L’échange direct entre l’association et les utilisateurs via Facebook.

(Suite et développement en Annexes II – Vélo Vert Loisirs)

Cette étude nous a permis de cerner correctement les réels besoins de l’association Vélo Vert Loisirs. Et nous avons ainsi vu avec le commanditaire pour créer une page Facebook qui servira réellement à l’association.

Site réalisé pour Vélo Vert Loisir(impressions d’écrans)

Grâce aux bonnes capacités de codeur que possède l’agence, nous avons pu rester très proches des maquettes de base, notamment concernant le menu.

S o l u t i o n s t e c h n i q u e s o p é r a t i o n n e l l e s

La réalisation a commencé dès le début de la seconde année. Nous nous sommes basé sur le menu. Elément de design sur lequel s’appuie tout le site, il fallait le mettre en avant, ne pas le négliger. Nous avons réalisé ce menu avec les modules jQuery* pour l’interactivité et la technologie CSS3** pour l’animation. Il s’adapte aux écrans en se centrant verticalement et horizontalement. Les fichiers sont sur le serveur et l’implémentation du menu est simple, à base de copier/coller. WordPress était un choix commun. Le commanditaire connait la plateforme, et nous avons des cours traitant ce CMS. Le nombre

de modules associés à cette plateforme permet d’ajouter beaucoup de fonctionnalités sans complications. Les pages A Propos, Blog, Liens et Contact sont basées sur un thème WordPress que nous avons développé à partir d’un thème existant, très basique, créé pour être modifié : BBV1. Les pages précédemment citées sont entièrement modifiable par l’administrateur. L’utilisation d’un module pour la page Contact a grandement simplifié la tâche, nous remercions les développeurs de Cforms ! En bref, le Wordpress permet d’administrer la moitié des pages du site. Ces pages sont basés

sur des « templates », ou modèles de page, que nous avons codé.

Certaines fonctionnalités demandées ne sont pas adaptables par WordPress. N’étant pas assez qualifié pour créer une interface de gestion permettant de gérer ces fonctionnalités très complexe, nous avons trouvé des solutions sur internet :

Le Calendrier devait permettre l’ajout d’évènement et leur modification. Nous avons trouvé cela sur internet, PHP Event Calendar de Oxava. Le commanditaire avait spécifié qu’il voulait qu’un petit tampon imprimé du logo de l’association s’affiche à l’ajout d’un évènement et un système d’inscription pour les participants. Nous avons donc navigué dans le code Php et implémenté ces deux fonctionnalités, puis nous avons modifié le design du calendrier pour qu’il corresponde à la charte graphique définie auparavant.

La gestion du Forum n’a pas pu se faire par WordPress. Malgré la diversité de solutions proposées, aucune n’était satisfaisante. Nous avons installé la célèbre plateforme PHPBB, qui permet d’utiliser des forums sans difficultés, autant du côté utilisateur qu’administrateur. La seule tâche conséquente était d’adapter le thème de base à la charte graphique de Vélo Vert Loisir.

Enfin, la galerie Photo. Guillaume étant un grand amateur de photographie, il désirait une galerie dans laquelle il pourrait ajouter des photos concernant l’association. Très rapidement, nous avons trouvé le module Javascript Galleria, parfait aux yeux de tous. Ce module prend en paramètre des fichiers JSON, qui comme XML, créé une sorte de tableau de données contenant dans le cas présent les adresses des photos, les descriptions et autres données. Ces données sont ensuite transférées au module qui affiche les photos. Après quelques recherches, il s’avère que WordPress ne peut pas être lié à ce module, il a donc fallu installer GalleryCMS qui permet de gérer le contenu de la galerie. Le module a cependant été implémenté dans un template pour Wordpress, pour garder le thème déjà développé.

Le Petit Plus des Réseaux Sociaux ! Sur la page du blog, et sur chacune des pages des articles, nous avons ajouté un « j’aime » lié à la page Facebook. Les gens peuvent donc « AIMER » l’association Vélo Vert Loisirs directement depuis le site. Sur les pages A Propos, Galerie, Liens et Contact, la barre qui

normalement contenait les derniers articles et les archives est remplacée par l’actualité Twitter. Le dernier message de l’association sur le réseau social se retrouve ici, dans un petit design adéquat.

Il y a quelques défauts dans ce site, mais ils sont tous explicables, et nous avons tout fait

pour minimiser leurs impacts. Le premier concerne la diversité de plateformes. Tout n’est pas géré dans la même interface administrateur et cela peut être difficile de s’y retrouver. Une page « Portail D’administration » été créé (http:// vvl-montredon.fr/admin.html). Très simpliste, mais qui s’avèrera très pratique, elle permet d’un part, d’ouvrir le site (en cliquant sur la roue) pour voir les modifications en temps réel, et d’autres parts, toutes les interfaces grâce aux liens, le tout dans de nouveaux onglets. Nous ne sommes que des débutants dans le domaine de la création web, nous n’avons pas pu créer une interface unique pour tous les modules, mais nous avons su les utiliser à bon escient ; cette page ainsi que l’harmonisation des mots de passes représente une facilité

d’utilisation conséquente.

Un autre défaut est celui de l’accessibilité. Tout d’abord, l’accessibilité par les navigateurs car même si nous avons fait en sorte qu’il soit fonctionnel sur un maximum de supports, certains navigateurs ne supportent pas CSS3. Mais aussi par les internautes qui n’ont pas tous cette intuitivité, l’idée de cliquer sur la roue qui tourne. Dans les deux cas, c’est le menu qui pose problème. Nous sommes en train de développé une alternative qui ressemblera au Portail D’administration mais avec des liens vers les différentes pages du site. Cela pourra aussi s’avérer utile pour les personnes malvoyantes. Il est important de penser à tous les internautes et à ne pas se limiter aux cibles visées. Ce problème n’est due qu’à l’application d’une consigne du commanditaire qui dans un esprit esthétique n’a pas voulu ajouter de liens sur la page, ce qui est compréhensible.

P r o j e t i n i t i a l / r é a l i s a t i o n f i n a l e

La réalisation fut longue. C’est un site complet, intégrant beaucoup de fonctionnalités diverses. Nous avons dans ce projet appris à analyser la demande, y trouver une solution et finalement, offrir au client une réponse adaptée à son problème. En début de projet, savions que tout ne serez pas facile, la création d’un site internet nous était inconnu. Nous avons mis à profit nos acquis en cours et nous avons recherché des solutions sur cette mine d’or qu’est Internet. Le tout était de ne se donner aucune limite, car tout est possible. Nous avons visé haut, hors de nos compétences de départ, non seulement pour nous motiver, mais aussi pour dépasser nos limites. Nous avons beaucoup appris de ce projet qui est le premier à nous avoir apporté cette satisfaction du projet fini.

La présence du commanditaire durant la réalisation a beaucoup aidé. Comme on peut le remarquer, le résultat final ne correspond pas vraiment aux maquettes prédéfinies. En nous donnant son avis à chaque étape de la réalisation, nous avons su communiquer et adapter la maquette à ses envies. Les fonctionnalités sont les mêmes, seul le design a subi quelques modifications.

M i s e à j o u r / D é v e l o p p e m e n t u l t é r i e u r

La mise à jour se fera par le commanditaire, tout a été fait pour qu’il puisse administrer les contenus de manière autonome et à sa guise. Nous proposons au commanditaire une documentation détaillée et explicative pour qu’il puisse gérer son contenu seul. Elle suit le plan suivant :

Page Mémo, incluant les mots de passe et les adresses utiles !

Présentation des modules et ajout de contenu, pour chacune des pages du site

Structuration du site, sur le serveur et en base de données pour permettre la modification du site par un autre développeur. Cette aide s’ajoute au code commenté, pour faciliter le travail s’il y a besoin de modification, que ce soit nous ou un autre intervenant.

Cette documentation devrait être suffisante pour utiliser le site comme nécessaire. S’il devait y avoir un problème, nous avons pris l’engagement d’être disponibles durant la période de « test » jusqu’à la date de la soutenance et nous serons à sa disposition pour répondre à ses questions, modifier la documentation et/ou le site. Le site n’est pour l’instant pas référencé, le contenu est trop faible pour risquer une mauvaise indexation. Cela va être la tâche de Sylvain durant les semaines précédant la soutenance. L’objectif est d’atteindre entre la cinquième et la première place, sur Google en tapant les mots clés : « Association » « Vélo » « Montredon ». Les cours de référencement de première année vont nous être très utiles. Guillaume nous a parlé d’une base de données qui pourrait contenir des tracés, des parcours pour ses randonnées VTT. Il enregistre le parcours grâce à son SmartPhone et une application Google Map. Il pourrait être intéressant de stocké ces parcours et de les rendre accessible via une application Android/iOS. Les cours de développement mobile nous ont montré que c’était possible, donc une seule idée nous vient à l’esprit, pourquoi pas ?

Nous vous invitons à visiter le site www.lilipulse.fr et le blog www.lilipulse.fr/blog

Lili Pulse (anciennement Sandrine)

Commanditaire : Mathieu Dewonck

Sandrine est le second projet de GraphiZ. Mathieu est en fait nouveau dans le groupe qu’il souhaite dynamiser. Il a constaté qu’ils n’avaient pas vraiment d’image ni d’univers propre à leur musique. Dans leur indécision le groupe a changé trois fois de nom depuis que nous avons décidé de collaborer. D’abord nommé ‘‘Sandrine’’, ensuite ‘‘L’’ et dernièrement ‘‘Lili Pulse’’. Mathieu voit dans ce groupe un potentiel important et aimerait un site internet pour pouvoir le montrer au public et surtout aux organisateurs de concerts. Cela leur offrirait un support plus intéressant et personnel qu’un MySpace ou une page Facebook. En effet, avec un site entièrement modifiable, ils peuvent retranscrire un univers et une image précise contrairement aux réseaux sociaux. Cet univers n’étant pas encore marqué, Mathieu nous demande donc de l’aider à construire une image de groupe, une identité visuelle. Et par la suite de l’implémenter dans un site vitrine qui permettra au groupe d’avoir une meilleure image venant faciliter leurs contacts et peut-être, pourquoi pas, jouer encore plus ? Nos objectifs :

× Réaliser un site

× Comportant les informations de bases sur le groupe (type site vitrine)

× Mais aussi des informations dynamiques (modules ajouté au site vitrine) avec des actualités, les dates des derniers évènements et une galerie de médias

× Ayant pour but de promouvoir le groupe, notamment auprès des organisateurs

de concert

× Fixer un univers pour le groupe.

× Créer une dynamique, un échange

× Avec la partie News, reliée au blog, créer un échange entre ‘‘fans’’ et membres du groupe

Le site serait comme une carte de visite sur Internet

Commanditaire du Projet Lili Pulse

Architecture du site simple, ordonnée.

Interactivité Musique si lecture. Concept innovant. Interface graphique Epuré, minimaliste, idées de couleurs : noir & blanc représentant une atmosphère zen. Mais essayer quand même d’ajouter une touche dynamique : carte blanche à l’agence de trouver l’élément qui viendra donner le ‘‘Pep’s’’ nécessaire

Maintenance facile à prendre en main. Nous proposons des tutoriaux rédigés par nos soins

Nous retrouvons les mêmes out i ls que pour Vélo Vert Lois ir .

Outils propres aux développeurs : - Notepad ++ : outil indispensable du développeur Web - Filezilla : pour le transfert de fichiers vers le serveur - Wordpress : pour éviter de trop diversifiez les plateformes

Outils propres aux graphistes : - Illustrator : réalisation du logo - Photoshop : Réalisation d’une maquette

Outils de communication utilisés par l’agence : × Gmail, comme pour VVL, la relation s’est faite par la messagerie de Google

× Pas de réseaux sociaux, les membres du groupe, pour la plupart, ne sont pas présent sur Facebook, ce qui a rendu la tâche plus difficile, pas seulement au niveau communication.


Dans ce projet, nous avons pu commencer le travail beaucoup plus rapidement et sûrement que le premier. Nous savions par où commencer, nous avons alors établie un cahier des charges quasi-complet. Il y a un détail que nous n’avions en revanche pas prévu, il s’agit du manque de suivi du projet par le commanditaire. En effet à cause du manque de réponse récurrent, nous avons complètement ralenti l’avancée du projet.


Lorsque Mathieu nous a contacté grâce à Facebook et via le site de l’agence, et lors de la première réunion, au vue du projet nous pensions pouvoir le boucler très rapidement. Il aurait servi de projet d’appoint en secondant notre projet principal VVL. Et en ce point nous n’avions pas réellement tort, les besoins, et les solutions proposées ne demandait pas une quantité de travail énorme, et ne nous aurais nullement handicapé parallèlement au premier projet. Mais encore une fois, la communication difficile entre le commanditaire et l’agence a rendu les choses un peu plus compliquées que prévu. Si Mathieu, lui n’était pas réellement pressé, nous nous étions fixés des délais et nous pensions pouvoir finir ce projet en première année. Ce qui n’a en fait pas du tout été le cas.

Concurrence

Dans le domaine de la musique, la concurrence reste les groupes du même style. Dans un objectif de rentabilité, il est préférable de penser aux concerts rémunérés … Pour cela on parle de concurrence, car si un autre groupe est choisi pour un évènement particulier, le groupe de Mathieu resterait sur le carreau. Grâce à un nouveau site, on espère pouvoir les aider à faciliter la prise de contact avec les organisateurs de concerts, mais aussi à donner une image reflétant la personnalité nouvelle du groupe.

Communication

Si d’une part nous avons eu un souci de communication avec le commanditaire, cela était aussi dû à un problème de communication interne propre au groupe (de musique). Nous nous sommes vite retrouvés avec une boite mail remplie d’un débat entre les différents membres du groupe, à propos du nom qu’il devait prendre. Cela a perturbé la progression du projet. Mais nous avons tout de même réussi à stabiliser la situation en rappelant que le maitre d’ouvrage à nos yeux était Matthieu, et qu’il serait le seul à nous transmettre les idées d’ensemble, au préalable discutées et validées par l’ensemble du groupe.


Nous avons voulu reprendre le schéma de travail déjà utilisé auparavant en divisant le travail en deux grandes parties : la programmation, et la partie design. Chaque membre est en fait resté sur le même rôle que pour le projet précèdent. Les deux projets étant réalisés en parallèle l’un de l’autre. Si Sophie avait commencé le design du groupe en tant que ‘‘Sandrine’’ et se sentait à l’aise dans ce travail, cela n’a pas duré longtemps car il a fallu revoir et repenser un nouveau design pour un nouveau nom : ‘‘L’’. A ce moment-là et sentant que la situation n’était pas stable, nous avons stoppé les productions graphiques. Et Sophie s’est concentrée sur le projet Vélo Vert Loisir. Ludovic a alors pris les choses en mains et a relancé le projet, en s’occupant lui-même du design du groupe. Encore une fois, nous avons su nous adapter à la situation. Sophie a finalement contribué à la communication entre Mathieu et GraphiZ.



Le commanditaire avait des idées assez précises pour la présentation globale du site. A côté de ça, nous avons vite analysé la situation et remarqué le manque certains d’identité du groupe. C’est pourquoi nous sommes passés par une phase de recherche d’identité graphique à attribuer au groupe. Ayant du mal à comprendre l’univers du groupe et à obtenir des informations du commanditaire seul, nous avons pris «le taureau par les cornes » et sommes avons de voir le groupe dans son ensemble pour leur poser individuellement les questions nécessaires. Ainsi nous avons pu commencer à avoir une vue d’ensemble sur les attentes du groupe.


Ici, la conceptualisation du projet a été assez fastidieuse… Vu que l’univers du groupe n’a pas pu être défini clairement et rapidement. Nous nous sommes alors basé sur les premières demandes du commanditaire : quelque chose de ‘‘zen’’ avec du noir et du blanc, ou du blanc cassé. Afin de ne pas faire de hors-sujet et d’avancer, nous avons réalisé une maquette très simple représentant le menu, et les modules de contenu. Afin de pallier le manque d’univers graphique, nous avons misé sur l’originalité du site en proposant une animation originale lors de la transition entre les différents modules de contenu.(détails plus bas)


Une fois la maquette, améliorée et enfin, validée nous pouvons passer à la véritable réalisation.

5ème phase : codage et intégration

L’originalité du site reposant sur un système d’animation entre les différents modules, le temps passé sur le codage est plus important que ce que nous avions prévu à l’origine. Mais, le travail en est d’autant plus intéressant.

Kehro http://groupekehro.free.fr/ Les Plus Les Moins Apparait en 1èr sur la 1ère page de recherche Google avec les mots clés "site groupe rock"

- Non-Style

- Pas de logo - intégration d’ascenseurs verticaux … Ce qui donne 2 barres de scroll !

Clairement, dans ce site, rien ne va… du « non » design, à l’utilisation de .gif... Et ne parlons pas de la clarté du site… rien ne va, rien n’est délimité… C’est typiquement un mauvais site pour un groupe de musique… Le site n’invite en rien à plonger le spectateur dans l’univers du groupe. Il y a cependant, quelques bonnes idées… Avec une hiérarchie de site assez classique, et l’intégration d’un livre d’or.

Naive http://www.naivemusique.com/ Les Plus Les Moins - Apparait en second, sur la première page de recherche Google avec les mots clés "site groupe rock" - Il est clair et sobre - il est ergonomique - il y a un suivi régulier et une bonne intégration des réseaux sociaux.

- L’atmosphère ne retrace pas réellement l’univers musical - Il faut scroller (légèrement) sur la première page pour pouvoir éventuellement visualiser un clip et entendre leur musique. Autrement dit, au premier coup d’œil on ne voit aucun player. - Il manque peut-être d’infos sur le groupe en première page ? On ne comprend pas forcément que l’on est sur le site d’un groupe de rock.

Ce site est intéressant par sa construction, il reste classique mais est bien réalisé, il donne envie d’être exploré. Le souci étant… que l’identité du groupe ne ressort peut-être pas assez par la sobriété qui s’en dégage… Dans le slider de la page d’accueil on aurait peut-être apprécié une photo du groupe et un petit texte de présentation rapide… Ceci dit, cela reste un site qui a l’air d’être mis à jour régulièrement, et comporte un contenu pertinent.

Muse http://www.muse.mu/ Les Plus - Site professionnel - Beaucoup d’informations - Suivi régulier et une bonne intégration des réseaux sociaux. Les Moins - Si il y a beaucoup d’information et que cela est un bon point, cela n’est pas adapté à notre cas, le cas d’un groupe de musique qui n’est pas professionnel au point de Muse. Le site de Muse est très bien, il est bien réalisé, retrace l’univers du groupe et donne un maximum d’information. Mais nous sommes sur un site d’un groupe mondialement connu. Ce qui le différencie de LiliPulse qui doit, entre autre essayer d’améliorer sa notoriété.

Le site de Lilipulse.fr devra donc comprendre :

Une partie « présentation du groupe » dans laquelle on retrouve une présentation rapide du groupe, et la possibilité de lancer de la musique grâce à un player. Ces infos seront en page d’accueil

Une partie « dates » : Afin de noter les évènements liés ou non au groupe, comme les prochains concerts par exemple.

Une partie New (reliée aux articles du blog) qui permettra au groupe d’échanger librement avec ses « fans » et les visiteurs du site. Et d’instaurer une ambiance chaleureuse ET montrer qu’il s’agit d’un groupe actif !

Espace galerie : Pouvoir consulter toutes les photos ou vidéos du groupe

Une partie contact avec un formulaire, clair permettant une prise de contact simple et rapide

D e s e c o n d e a n n é e (Pour visualiser les réalisations antérieures

cf Annexes I – LiliPulse)

Recherche de logo. Evolution du logo complète en Annexes II - LiliPulse

Avec ce logo dynamique et coloré, j’ai

pensé préférable de faire un site avec une sorte de tension, une sensation de dynamisme qui correspondra à la

navigation choisie.

Ludovic – Maquette LiliPulse Cf Annexes II – LiliPulse

Réalisation d’une maquette

.pdf explicatif et détaillé (pour le commanditaire)

Est disponible en Annexe II dans la partie ‘‘Lili Pulse’’

Réalisation d’un visuel ‘‘en construction’’ pour le site lorsqu’il n’était pas en ligne.

Réalisation d’un ‘‘shooting’’ photo pour avoir du contenu et des images à mettre sur le site.

Ses photos ont été retouchées pour un rendu moins ‘‘amateur’’

S o l u t i o n s t e c h n i q u e s o p é r a t i o n n e l l e s La réalisation, cette fois, fut plus complexe. La page d’accueil regroupe 5 blocs (Home, News, Dates, Galerie, Contact) accessible via un menu fixe, centré en haut de l’écran. La page est d’une grande taille, exactement 4100x2600px, et chaque bloc est habilement placé pour ne pas se chevaucher et au niveau placement, correspondre à son accesseur du menu. L’idée de cette navigation était de supprimer le scroll, c’est-à-dire empêcher l’utilisateur de pouvoir naviguer grâce aux barres de défilement, horizontale et verticale. A partir de là, il a fallu implémenter quelques modules jQuery* et fonctionnalités Php** :

Le premier concerne la navigation, car il est nécessaire que l’utilisateur puisse accéder aux éléments de la page sans complications.

. Après avoir paramétré les fichiers Javascript, nous avons réussi à rendre la navigation fluide, et surtout adaptable à tous les écrans ! En cliquant sur un lien du menu, le navigateur vient glisser jusqu’à l’élément référent.

Après la navigation, il a fallu adapter les blocs à leur contenu. Si l’utilisateur ne peut pas bouger la page entière grâce aux barres de défilement, il aura du mal à accéder au contenu. C’est pourquoi nous avons limité la taille des conteneurs Dates et News, auxquels nous avons ajouté le module « scrollbar », qui permet d’avoir des barres de défilements internes à la page. Elles s’activent si le contenu est trop long pour être affiché.

Pour la Galerie, après le succès de la mise en place sur Vélo Vert Loisirs, et surtout l’efficacité du diaporama, nous avons décidé de mettre en place la même fonctionnalité. Il y a donc une interface administrateur par laquelle notre commanditaire pourra changer, ajouter, modifier des photos.

Parlons Wordpress. Pour gérer la partie News, rien de tel que d’ajouter un wordpress et de récupérer le contenu de son dernier article pour l’afficher en page d’accueil. Un développeur Américain, Peter Upfold, met à disposition sur internet une classe Php qu’il génère grâce à un formulaire d’installation. Il suffit alors de l’intégrer et de l’utiliser dans l’index pour récupérer le dernier article de n’importe quel blog ! Après mise en forme, nous arrivons à la partie News tel que vous pouvez la voir.

Le lecteur MP3 n’est qu’un Player en flash auquel on passe en paramètre des morceaux. Très simple d’utilisation, mais plutôt faible au niveau modification esthétique, nous verrons si il faut le changer. Pour l’instant, il correspond aux besoins du commanditaire.

Enfin, les dates ont été l’élément le plus long à réaliser. En réutilisant les cours de Php, une interface administrateur relié à la base donnée a été créée. Elle permet d’ajouter et supprimer des dates, après connexion bien entendu. Ces dates s’affichent alors sur la page d’accueil, avec une mise en forme simple, mais efficace. Nous avons donc eu à créer notre propre interface utilisateur, certes simple, mais utile et indispensable dans ce projet.

Avec tous ces éléments, la mise en place du site fut assez rapide. La phase de recherche a été plutôt longue car nous ne savions pas comment intégré des « scrollbars » internes à la page, ni comment faire un effet de défilement vers un autre élément de la page. Mais Internet est une mine d’or pour cela, l’entraide entre les développeurs est efficace, cela nous as facilité la tâche de façon conséquente. Si l’on récupère le dernier article du blog pour l’afficher sur l’accueil, cela veut dire qu’il a fallu développer un thème Wordpress. Nous avons seulement modifié un thème Minimalist, pour l’adapter à la charte graphique, mais cela reste une tâche complexe et redondante de devoir étudier le code d’autrui, surtout s’il est peu commenté, pour ensuite le modifier. C’est une des raisons pour lesquelles nos documentations sont plutôt complètes. Nous voulons faciliter le travail à un éventuel Webdesigner qui reprendrait le projet après nous pour apporter des modifications. Comme pour le premier projet, un portail d’administration est en place est permet l’accès à toutes les interfaces administrateurs : pour ajouter des articles aux blogs, modifier les photos et les dates.

*jQuery est une l ibrair ie Javascr ipt adaptée aux s i tes Webs fac i l i tant l ’ interaction et l ’animation, a insi que l ’ut i l isat ion de Javascript pour le développeur. **Php est un langage de programmation qui gère la re lat ion c l ient serveur, jusqu’à la base de données et qui est en général ut i l isé pour rendre le contenu d’un s i te dynamique. Les Réseaux Sociaux On remarquera une totale absence de lien vers les réseaux sociaux car, optimiste par ces temps où la communication sur le web des groupes de musiques se fait essentiellement par Facebook et Twitter, Lili Pulse ne veulent pas s’installer sur ces plateformes et faire leur promotion seulement par le bouche à oreilles et finalement, par ce site internet. C’est un gros inconvénient et nous avons essayé d’expliquer avec chiffres, statistiques, potentiel que ce n’était qu’un avantage pour eux d’avoir une page Facebook, sans résultat. Nous comprenons leur choix et nous ne pouvons pas les forcer à utiliser Twitter ou Pinterest. C’est pourquoi il n’y a aucun lien vers les réseaux sociaux sur lilipulse.fr.

P r o j e t i n i t i a l / r é a l i s a t i o n f i n a l e

On peut penser qu’en tant que second projet, la réalisation du site de Lili Pulse fut plus simple car nous étions déjà passés par ces étapes avec Vélo Vert Loisir. Là où la communication se faisait parfaitement avec Guillaume Albert, le commanditaire de Vélo Vert Loisir, elle a été beaucoup moins accommodante dans ce second projet. Matthieu Dewonck étant peu réactif, ou en tout cas n’étant pas très présent dans l’échange avec l’agence, nous avons eu du mal à mettre au point une charte graphique et une maquette fonctionnelle rapidement. Comme on a pu le voir plus haut, les difficultés dans la communication prenaient racine au sein du groupe même et ont déteint sur la communication entre GraphiZ et Mathieu. Mais nous avons essayé d’améliorer la situation et d’aller de l’avant. On a pu voir par la réalisation de ce projet l’importance de la communication dans une entreprise, comme dans un groupe de musique ou tout simplement un couple. Pour avancer, il faut tout d’abord savoir communiquer. Et savoir faire table rase de la totalité des problèmes pour mieux comprendre leurs sources et essayer de les résoudre. La maquette est assez différente de la réalisation finale dans le sens où nous ne savions pas exactement ce que le commanditaire voulait, ni comment nous allions réaliser ces fonctionnalités. Finalement, le menu est similaire. La taille des éléments diffère mais les contenus sont les mêmes. Le résultat plait et nous sommes heureux d’avoir pu démontrer aux autres, autant qu’à nous même, qu’il était possible de réaliser des sites avec des éléments auxquels nous n’avions jamais été confrontés auparavant.

M i s e à j o u r / D é v e l o p p e m e n t u l t é r i e u r Comme pour les autres projets, le contenu est modifiable. La structure est fixe, mais si y a besoin, il y a possibilités de nous contacter par mail pour que nous modifions ou ajoutons un élément. La documentation est basé sur le même plan (page mémo, consignes par rubriques, structure du site) et permet à l’administrateur de gérer son contenu sans difficulté.

Le référencement est en cours. Les robots de Google font leur travail, et nous espérons atteindre un bon PageRank et une bonne place pour les mots clés « musique » « Lili » « Pulse », ce qui ne devrait pas être très complexe. Après réflexion, le site est esthétiquement propre mais il manque une petite touche de design. Lors de notre première réunion avec le commanditaire, nous avions parlé de quelques éléments que l’on pourrait ajouter au site pour le rendre plus complet, qu’il fasse moins vide. Nous avons proposé au commanditaire d’étoffer l’arrière-plan avec des dessins aux crayons à papier représentant les membres du groupe. Il y a 5 rubriques, 5 membres, cela conviendrait parfaitement. Nous sommes en attente de réponse.

Nous vous invitons à visiter le site www.ensemble-vocal-brugeria.fr

Et l’ancien site www.ensemble-brugeria.com (futur site dédié uniquement au chœur homme)

Brugeria

Commanditaire : Bernadette Régis Le projet Brugeria, est une sorte de « refonte » de site. En effet le site regroupe, une partie « choeur hommes » et une partie « choeur mixte ». Au vue de certaines tensions et d’intentions complètement opposées entre le choeur homme (plutôt « classique ») et le choeur mixte, nous ne pourrons nous charger uniquement de la partie « choeur mixte ». Ce sont deux ensembles vocaux indépendants, aux désirs totalement différents. Le choeur mixte souhaite rajeunir son image, la dynamiser et la rafraîchir. Par exemple, ils souhaitent se séparer d’une image qui actuellement leur colle à la peau lors de divers représentations qui est : l’aspect religieux. S’étant diversifié dans ses chants, le choeur a pour but d’étendre sa cible et de diversifier son publique. N’ayant aucune notion de graphisme et encore moins des techniques multimédia, l’ensemble vocal nous laisse complètement libre quant à l’aspect visuel du site, même si, face au site actuel nous avons pu comprendre, une certaine réticence face à l’image proposée représentant la chorale. En effet, le site est fait sur une base de « site tout prêt », très peu modifiable sans maîtriser le HTML et le CSS. N’y est appliqué aucun style, il n’y a aucune harmonie graphique, aucune « image » représentative se dégageant du site et encore moins de clarté quant au contenu. Le site regroupe 2 chorales mais nous ne pourrons travailler que sur certaines parties du site.

Travailler et dynamiser l’image de la chorale

Définir une identité graphique de l’ensemble vocal Brugeria

Séparer le site chœur mixte du site chœur homme

Repenser la structure du site

Réaliser une vidéo

Réaliser une diapo par évènement

Réaliser des posters, flyers etc.

Architecture

Interactivité Musique si lecture. Concept innovant. Interface graphique Epuré, minimaliste, idées de couleurs : noir & blanc représentant une atmosphère zen. Mais essayer quand même d’ajouter une touche dynamique : carte blanche à l’agence de trouver l’élément qui viendra donner le ‘‘Pep’s’’ nécessaire

Maintenance facile à prendre en main. Nous proposons des tutoriaux rédigés par nos soins

Nous retrouvons les mêmes out i ls que pour Vélo Vert Lois ir .

Outils propres aux développeurs :

× Editeur de code source : Notepad++

× Client FTP pour la transmission de fichiers qui utilise le protocole de communication FTP* : FileZilla

× Utilisation d’une plateforme de gestion de contenu (CMS : Content Management System): Nous avons choisi WordPress car il était déjà connu par le commanditaire.

Outils propres aux graphistes : × Logiciels de traitement d’image : Photoshop, Illustrator (logiciel de traitement d’image vectorielle)


Dans ce projet nous avons dès le début pris en compte que les futurs utilisateurs ne seraient pas des fervents adeptes d’internet. Nous avons donc pris la décision d’encadrer le projet de manière assez autonome. Dès que l’on termine une étape, on tient au courant la commanditaire. Par chance, elle est très réactive ce qui nous permet de pouvoir modifier, et avancer très rapidement contrairement au projet précèdent.


Ce dernier projet présente un risque beaucoup plus important quant aux délais. En effet note codeur habituel et habitué du CMS WordPress travaille activement sur le projet Lili Pulse et Vélo Vert Loisir

qui n’est pas des plus simples et laisse donc la place de principal codeur sur ce projet à Vincent. Quant à Brugeria, il a été choisi pour pouvoir intégrer ce dernier à l’équipe et lui permettre de faire des heures. Le souci étant que par un problème de communication évident entre Vincent et le reste de l’agence nous perdons du temps et les délais de fin de PTUT se rapprochent à grand pas au risque de ne pouvoir boucler le projet. Voyant ce risque possible, nous sommes en train de prendre des mesures pour simplifier au maximum le projet afin de le rendre réalisable dans les temps.

Concurrence

La concurrence est faible voir presque inexistante, car il s’agit d’un groupe de chorale municipale. Il est propre à la ville de Labrugière. Nous avons pris en compte la seule éventuelle concurrence directe est celle du site du chœur homme. Car en séparant le chœur mixte du site du chœur homme nous prenons le risque de perdre certains visiteurs. HORS nous avons pris les mesures nécessaires pour lier réciproquement les deux sites, en affichant sur la première page de chacun un lien vers l’autre. (sur le site du chœur homme un lien vers le site du chœur mixte et inversement) de ce fait l’éventuelle concurrence se dissipe et rassemble les deux sites !

Communication

Pour l’ensemble vocale Brugeria, partie chœur mixte il était important de définir une identité visuelle, et de dynamiser l’image de la chorale. Il a donc été primordial de discuter vivement avec un maximum de représentant du chœur mixte. Et cela a été très rapide et facile, il y a eu une très bonne entente, Sophie et Romain ont su écouter les envies et attentes du groupe. Ils ont aussi cerné l’atmosphère de la chorale, s’en dégage une ambiance très chaleureuse et très dynamique !


Pour ce projet aux délais très courts par sa date de lancement, nous avons décidé d’utiliser un CMS que nous connaissons maintenant tous plutôt bien : WordPress. Vincent étant nouveau dans le groupe nous nous sommes concertés et mis d’accord : il est le principal codeur. Sophie s’occupe du graphisme et Romain gèrera les éventuels soucis d’intégration et de base de donnée avec Vincent, il est aussi un très bon intermédiaire entre Sophie et Vincent, car connaît et comprend les besoins des codeurs et est habitué à travailler avec Sophie, de cette manière il intègre de manière astucieuse Vincent dans le cadre du travail.



Au vue d’un délai très serré, nous avons accéléré la phase de recherche. Un benchmarking a été fait presque immédiatement.


Le but du projet était de dynamiser l’image de la chorale mais aussi de restructurer la hiérarchie existante sur le site précèdent. Grâce à nos cours de première et deuxième année, nous savons rapidement –notamment avec la règle des trois cliques- organiser un plan de site.

Suite à cette refonte, et encore une fois dans un objectif de rapidité, Sophie a directement proposé trois logo (re-design du logo de la ville pour utiliser au nom de la chorale) chacun associé à une palette de couleur différente et l’ensemble avec un seul et même fond. Suite à la validation des logos et des palettes de couleurs, elle a pu proposer deux maquettes très rapidement.


Une fois la maquette validée nous pouvons passer à la véritable réalisation.

5ème phase : codage et intégration

Nous avons conclu dès la première réunion sur Brugeria, que nous partirons -par soucis de délais et de rapidité- d’un thème existant WordPress et que nous n’aurions plus qu’à le modifier pour le personnaliser. Nous sommes actuellement en train de le réaliser.

Pour ce projet, le benchmarking a plus joué le rôle de ‘‘veille’’ pour trouver l’inspiration et l’innovation possible pour un site de chorale sans tomber dans les clichés religieux. Voici donc, plusieurs visuels de site de chorale qui nous ont inspirés. Ils ont été trouvés pour la plupart sur Behance.fr

Le logo a été travaillé à partir du logo de la ville ci-dessous le logo de Labrugière et le logo retenu. Vous trouverez en Annexes II – Brugeria les différents logos proposés

Maquette au menu vertical : Validée par le commanditaire. Nous avons jugé bon de garder le même modèle de menu que le site précèdent pour ne pas perturber les utilisateurs de l’ancien site !

Maquette au menu horizontal :

N’a pas été validé par le commanditaire. (désolée pour la faute cœur = chœur)

S o l u t i o n s t e c h n i q u e s o p é r a t i o n n e l l e s

Dès la validation de la maquette nous avons pu commencer l’intégration et la programmation. Comme pour les autres projets, nous avons utilisé WordPress. Dans le cas présent, il était impératif d’utiliser un CMS, WordPress reste quand même une plateforme assez claire et relativement rapide à prendre en mains.

Vincent a commencé par créer une version du site en html/css. Il a ensuite démarré l’intégration des différentes fonctions WordPress comme la gestion des titres, des contenus, et des images (minitatures) pour une mise à jour facile via le backoffice (la plateforme) de WordPress.

Chaque page du site a un modèle de page : ‘‘le modèle de page’’ permet de changer l’apparence d'une page particulière, ainsi, l'ensemble du contenu du site est modifiable via le backoffice et la mise à jour du site devient assez simple d’utilisation.

Une fois l'intégration de ses différentes fonctions sur toutes les pages du site, nous avons intégré les plugins :

- le plugin anythingslider nous permet de réaliser les diaporamas de la page galerie.

- anythingslider permet de faire des diaporamas de n’importe quel média (image, vidéo, texte ....)

- Le plugin CformII nous a permis de réaliser un formulaire de contact personnalisé et simple d'utilisation.

- Enfin, leplugin GraphiSlider il s'agit du slider que l'on pourra voir sur la page d'accueil du site, il a été créé à l'aide d'une bibliothèque jquerry que les membres de l'agence ont converti en plugin wordpress, les images insérées dans les slides de ce plugin sont redimensionnées automatiquement à la bonne taille afin de garantir une utilisation simple.

Ce projet n’est pas encore finit. En revanche on peut déjà noter un souci de réalisation. Les consignes mises en place lors de réunion de groupe pour obtenir un résultat assez rapide n’ont pas été respectée pour l’instant par le codeur, malgré la multitude ‘’d’avertissements’’ et de messages envoyés ! Si le projet n’est pas encore finit, on comprend bien qu’il y a un début, que les bases ont été posées (cahier des charges etc.) Nous sommes en train de revoir l’organisation du groupe pour pouvoir aboutir ce projet pourtant simple, sans problèmes et dans les temps !

ventilées par tâches et par date.

o Le total par étudiant doit apparaître clairement.

o Des sous-totaux permettent une lecture rapide par grands blocs de tâches.

o Seules les heures effectuées après la soutenance de 1ère année doivent être mentionnées.

Tout d’abord voici un total de chacun des membres du groupe GraphiZ au rendu du rapport. Avec la période de travail intensive, les chiffres ont été arrondis sur la fin, veuillez nous en excusez. Nous avons divisé les heures en tâches. Les réunions représentent les heures où nous faisions des réunions soit entre nous, soit avec un commanditaire. La communication correspond à la rédaction, mais aussi à la liaison avec les commanditaires. On y ajoutera aussi la documentation. La recherche correspond aux recherches de design, de partenaires et de modules. On y inclura la partie apprentissage d’utilisation. Document, représente le temps passés à récupérer des informations. La réalisation graphique correspond au design tandis que la programmation correspondra au temps de codage. Enfin, on a ajouté, comme conseillé par Monsieur Lavigne, l’auto-formation, sans en abuser bien entendu.

99h 70h 70h 64h 56h30 359h30

30h30 24h30 27h 34h30 21h 137h30

36h 53h 32h 36h 24h 181h

9h 20h 26h 8h 16h 79h

6h30 15h 33h 34h30 15h 104h

5h 34h30 2h 10h 12h 63h30

84h 5h 14h 38h30 53h 194h30

20h 37h 23h 35h 35h 150h

191h 189h 157h 196h30 176h 909h30

290h 259h 227h 260h30 232h30 1269h

La répartition des tâches s’est fait selon les compétences de chacun, mais aussi selon la motivation et l’envie d’apprendre. Sur le papier, il est écrit qu’il faut un documentaliste, un régisseur, un planificateur… Nous nous sommes basé sur ces documents, mais la réussite d’une entreprise aujourd’hui n’est-elle pas basée sur la polyvalence de ses membres ? Bien évidemment, Sophie étant plus douée en Design et Communication et Romain étant plutôt sociable et disponible, nous n’allions pas confier la réalisation de la maquette du site à Romain et envoyer Sophie recueillir des données sur le terrain. La bonne entreprise de nos projets s’est faite par la bonne volonté, la curiosité et l’envie. Il y a bien évidemment eu des accrochages, des petits conflits dus à des problèmes de quantité de travail ou d’heures. Mais en étant primant la polyvalence, nous avons su poser à plat les soucis, nous écouter et nous nous sommes complétés et entendus pour avancer. On remarquera tout de même quelques préférences. -Sylvain et Romain se sont occupés de la récupération de données sur le terrain, autant pour Vélo Vert Loisirs que pour Lili Pulse et Brugeria ; bien que Ludovic et Vincent aient aussi participé. Ils ont, par curiosité et envie, modifié un thème WordPress pour Lili Pulse, et ce malgré leurs lacunes en programmation. -Romain a beaucoup travaillé en duo avec Ludovic sur la programmation des sites, en plus de recueillir des données. On remarque une réelle envie de rattraper le retard de la première année. -Ludovic et sa capacité à coder et développer des sites Web avec facilité, s’est plus occupé de la réalisation des projets, autant au niveau design que programmation. En tant que directeur de l’agence c’est aussi lui qui a su recadrer le groupe à certains moments, accélérer le rythme quand il l’a fallu. -Sophie a été engagé comme graphiste mais s’est aussi occupé de la communication et de la rédaction des documents. Etant dans le groupe Média et donc avec moins d’affinités avec les langages de programmation que les infos, ses idées ont toujours été pertinentes et innovantes. -Enfin, Vincent, récemment arrivé dans le groupe a partagé son savoir-faire et est en train de réaliser un projet qui lui est dédié, Brugeria. Peu présent en début d’années du fait de son redoublement, il s’implique plus au dernier semestre et, grand passionné de VTT aidera à la récupération de données pour Vélo Vert Loisirs. Au final, chacun des membres a aidé dans son domaine de prédilection, mais a aussi pris des risques pour aider ses camarades en s’intéressant à des domaines inconnus. C’est aussi comme cela que l’on apprend et que l’on se découvre. Romain a par exemple découvert qu’il aimait aller directement sur le terrain prendre des photos, faire des interviews, poser des questions pour le bien d’un projet.

Faisons une analyse en pourcentage de travail par projets, par personne, durant la seconde année avant de voir le compte détaillé des heures par personnes…

Pour démontrer de façon plus claire le pourcentage de travail par personne dans l’agence, selon les projets, nous avons créé des diagrammes, beaucoup plus évoquant que de simples tableaux. Une explication écrite complètera chacun de ces diagrammes, pour plus de compréhension.

Vélo Vert Loisirs est le premier projet de GraphiZ. Vincent n’a que très peu participé, pour la

collecte des données. Ludovic a énormément travaillé sur la création du site. Sylvain a surtout eu un

rôle de documentaliste accompagné de Romain, qui a aussi aidé à la programmation. Sophie s’est

occupée des éléments de design comme les icones qui lui ont pris beaucoup de temps.

30%

20% 25%

20%

5%

VVL

Ludovic Sophie Sylvain Romain Vincent

Lili Pulse est le second projet. Encore une fois Vincent est arrivé tard et n’a pas pu s’intégrer à ce projet aisément. Il a pris quelques photos et recueilli des documents. Sophie et Sylvain ont fait les études ensemble, mais c’est

Sylvain qui rédigea les documents. Sylvain et Romain ont recueilli un maximum de données (photos, musiques, interview) avec une participation de Ludovic qui a surtpit développé le site, presque entièrement.

Brugeria avait un objectif, rectifier le manque d’heure de certains membres, notamment Vincent. Ludovic n’est pas concerné, il a su se tenir au courant de ce qu’il se passait sans s’impliquer, présent seulement en cas de problème. Vincent, Romain et Sophie se sont

partagé le projet avec comme tache respective, la programmation, la documentation, le graphisme. Sylvain a encore une fois aidé le groupe sur des petits problèmes comme la recherche de partenariats par exemple.

35%

12% 21%

25%

7%

Lili Pulse


0%

35%

6%

24%

35%

Brugeria


Au niveau du planning, nous a pris du retard. Nous avions calculé ce planning sans prendre en compte la quantité de travail externe aux projets tuteurés. Il y a plus d’investissement personnel en seconde année qu’en première année. A certains moments, il y a eu des ralentissements dans tous les projets. L’arrivée de Vincent a bouleversé l’organisation de l’agence, pourtant stable en première année. Un nouveau projet a dû être trouvé rapidement pour subvenir au besoin d’heure de Vincent. Il y a eu un décalage qui s’est créé, Sophie s’occupant des maquettes. Nous avons tout de même réussi à stabiliser la situation, notamment grâce à certaines périodes, comme les vacances, durant lesquelles une grande partie du travail a été faite. Les prévisions ont été faussées par des éléments externes aux projets tuteurés, mais nous avons su rebondir et finir les projets avec un léger retard sur le planning.

On remarque que certaines personnes ont moins d’heures que d’autres sans forcément que la

qualité du travail où sa pertinence ne soit remis en cause. Les 300 heures restent un objectif global,

mais ne vaudrait-il pas mieux calculer la note sur la qualité du travail et de l’organisation plutôt que

sur un nombre d’heures à atteindre ?

L’année n’est pas finie, il reste encore quelques tâches à réaliser pour finir les projets. Ludovic les déléguera aux autres pour éviter d’avoir un surplus d’heure plus important. Le référencement des sites sera fait pas Sylvain, les modifications de sites seront effectuées par Vincent, si il y en a. Sophie s’occupera des derniers documents à rédiger et surtout de la préparation de la soutenance. Romain quant à lui a réussi à remonter, nous le laisserons se concentrer sur son rapport de stage. Passons aux comptes détaillés des heures, par personne !

Romain s’est chargé de recueillir les données de chacun des membres et de les intégrer dans un tableau. Il n’a fait que recopier les tableurs de chaque membre qui sont donc totalement responsables de leur compte. Il y a quand même eu des vérifications pour éviter les abus. Nous nous excusons d’avance pour les « Sandrine » et « Lili Pulse », qui sont le même projet mais nous avons tous eu du mal à nous y habituer, en voici la preuve !

Dates Taches Heures

Heures Validées 99h

Réunion 13/09 Mise au point, ébauche fonctionnelle Sandrine 5h30

17/09 Préparation entretien commanditaire Sandrine 2h

27/09 Vincent, introduction dans le groupe 1h

04/10 Commanditaire VVL, charte graphique 3h

29/11 Logo, charte graphique Sandrine 4h

16/01 Commanditaire VVL, maquette 3h

24/01 Travail sur le projet VVL, finalisation Menu 4h

31/01 Travail sur le projet VVL, Wordpress 4h

21/02 Réunion finale, avant finalisation projets 4h

Total Réunion 30h30

Communication 23/11 Infosup 10h

5/12 Benchmarking, VVL 2h

7/01 Community management 4h

-/02 Rédaction document (doc, rapport) 20h

Total Com- 36h

Recherche 20/09 Recherche CMS Calendrier 4h

- Wordpress Module 5h

Total Recherche 9h

Document 6/10 Photos Lili Pulse + tri 6h30

Total Document 6h30

Graphisme 5/12 Maquette Sandrine 2h

-/02 Réalisation Finale 3h

Total Graphisme 5h

Programmation 18/09 Refonte de l’architecture Sandrine Réalisation fonctionnelle VVL

4h30

17/01 Travail sur le projet Sandrine et VVL 4h

27/09 Correction des bug du calendrier PHP 3h

3/10 Page d’accueil VVL, mise en page calendrier 3h

7/10 Refonte du menu VVL 3h

18/10 Intégration du Menu 3h

8/11 Passage Sandrine Wordpress/ Module cForms/ Comptabilité du menu VVL : Mozilla

6h30

14/11 Amélioration Menu VVL 2h

15/11 Finition menu VVL, footer.php et compte à rebours en attendant de publier le site

7h

6/02 Intégration du Calendar sur VVL 3h

-/02 Programmation finale VVL 20h

-/02 Programmation finale Lili Pulse 25h

Total Prog- 84h

Auto-Formation - Html/css 5h

- Php/Javascript 10h

- Photoshop/Illustrator 5h

Total A-F 20h

Total 290h

Dates Taches Heures





20/09 Réunion 4h


24/01 Travail sur le projet VV 3h

17/01 Entrevue Chorale Brugeria 3h


Communication 3/11 Appel Skype Commanditaire VVL 3h


13/01 Résumé cahier des charges 4h

17/01 Travail sur le projet, Chorale 4h

24/01 Travail sur le projet, Chorale 4h

-/02 Rédaction document (doc, rapport) 30h

Total Com- 53h

Recherche - Recherche design 10h

- Design Emotionnel 10h

Total Recherche 20h

Document - Information projet Chorale 15h

Total Document 15h

Graphisme - Icones VVL, correspondance ChGraph (cdc) VVL 6h

- Icones VVL 10h

8/11 Retouches finales Photos, Lili Pulse 4h30

29/11 Charte Graphique, Maquette, Chorale 14h

Total Graphisme 34h30

Programmation - Test Joomla 5h

Total Prog- 5h


Photoshop/Illustrator 20h

Gestion de Projet 12h

Total A-F 37h

Total 259h

Dates Taches Heures





20/09 Réunion 4h

4/10 Entretien VVL 3h

8/11 Réunion 4h

17/11 Entretien VVL 1h30

16/01 Travail sur le projet VVL 3h

Total Réunion 27h

Communication 29/11 Dossier partenaire VVL 4h


31/01 Travail projet Sandrine 4h

-/02 Rédaction document (doc, partenaires) 20h

Total Com- 32h

Recherche 15/11 Recherche calendrier Wordpress + forum 4h

- Partenaire VVL 10h

17/01 Projet Sandrine et VVL 6h

24/01 Partenaires Sandrine 6h

Total Recherche 26h

Document 30/09 Photo VVL 6h

8/12 Photos et Vidéos Lili Pulse 10h

10/12 Acquisition Vidéos 2h

13/12 Tri Photos + Acquisition Vidéo 5h

- Teaser Lili Pulse 10h

Total Document 33h

Graphisme 5/12 Maquette Lili Pulse 2h

Total Graphisme 2h

Programmation - Codage Blog Lili Pulse 4h

- Aide Ludovic VVL 10h

Total Prog- 14h



- Adobe Premiere 3h

- Php 10h

Total A-F 23h

Total 227h

Dates Taches Heures





04/10 Commanditaire VVL, charte graphique 3h

29/11 Logo, charte graphique Sandrine 4h


24/01 Travail sur le projet VVL, finalisation Menu 4h

31/01 Travail sur le projet VVL, Wordpress 4h

9/02 Entretien Chorale Brugeria 2h

16/02 Réunion VVL 3h

17/02 Réunion Chorale 3h


Communication 07/01 Community Management 4h

- Création du rapport, rassemblement documents 12h

- Gestion des heures 20h

Total Com- 36h

Recherche 20/09 Recherche CMS Calendrier 4h

- Wordpress Module 4h

Total Recherche 8h

Document 6/10 Photos Lili Pulse + tri 5h

30/09 Photos VVL 6h

3/10 Tri Photos VVL 5h30

8/12 Photos Vidéos Sandrine 5h

13/12 Tri Photos + Acquisition Vidéo 3h

24/02 Récupération Information Brugeria 7h

Total Document 34h30

Graphisme 3/10 Retouches photos VVL 4h

18/10 Retouches Photos Sandrine 4h

5/12 Maquette Sandrine 2h

Total Graphisme 10h

Programmation 18/09 Refonte de l’architecture Sandrine Réalisation fonctionelle VVL

4h30

17/01 Chorale 4h

27/09 Correction des bug du calendrier PHP 3h

3/10 Approfondissement Calendrier 2h30

8/11 Passage Sandrine Wordpress, Module cForms, Comptabilité du menu VVL : Mozilla

6h30

15/11 Finition menu VVL, footer.php et compte à rebours en attendant de publier le site

7h

24/01 Projet Chorale Wordpress 4h

31/01 Hebergement Brugeria 4h

6/02 Intégration du Calendar sur VVL 3h

Total Prog- 38h30


- Php/Javascript 10h

Photoshop/Illustrator 5h

Lightroom/Photgraphie 15h

Total A-F 35h

Total 260h30

Dates Taches Heures

Heures Validées 56h30

Réunion 27/09 Vincent, introduction dans le groupe 4h

4/10 Réunion 4h

18/10 Réunion 4h

15/11 Réunion 4h

9/01 Réunion, Commanditaire Chorale 2h

16/01 Réunion Commanditaire VVL 3h

Total Réunion 21h

Communication 29/11 Benchmarking Sandrine 4h


-/02 Rédaction document (doc, partenaires) 12h

Total Com- 24h

Recherche 11/11 Programmation Plugin Wordpress Galerie 6h

- Module Wordpress 10h

Total Recherche 16h

Document 8/12 Photo / Vidéos Lili Pulse 10h

13/12 Tri et Acquisition 5h

Total Document 15h

Graphisme 03/10 Retouches Photos VVL 4h

18/10 Retouches Photos Sandrine 4h

- Maquette Brugeria 4h

Total Graphisme 12h

Programmation 8/11 Intégration Sandrine Wordpress 4h

11/10 Forum VVL 3h

30/10 Formulaire Contact 2h

8/11 Passage Sandrine sur Wordpress 2h

8/11 Mise En Place du Module Contact 5h

9/11 Suite Intégration Sandrine 3h

22/11 Formulaire Plugin Galerie 2h

17/01 Projet Chorale 4h

24/01 Projet Chorale 4h

31/1 Projet VVL 4h

- Programmation Finale Brugeria 20h

Total Prog- 53h



- Lightroom Photo 15h

- Php 10h

Total A-F 35h

Total 232h30

Les projets tuteurés ont été une aventure très mouvementée ! Mais aussi très enrichissante pour chacun d’entre nous. Nous avons vécu des hauts et des bas mais tous ont contribués à la réussite des projets ! Nous avons sûrement beaucoup écris dans ce rapport, mais nous nous devions de justifier notre travail de manière la plus juste possible ! Nous terminerons ce rapport sur des remerciements quant à la possibilité que l’IUT nous offre de faire cette expérience !

"Bonne expérience ! Je me suis senti valorisé dans ce travail de groupe. Et je me

suis investi à 100% car j’étais très motivé ! J’ai beaucoup appris au cours de ces

deux ans"

Romain Régis

‘’Beaucoup de travail, mais aussi beaucoup d'acquis. Les PTUT sont vraiment une

bonne méthode d'apprentissage. De plus je me suis senti encore plus investi dans

mes cours car il y avait des mises en parallèle permanentes au Projets en cours’’

Ludovic Yol

"En deux ans j’ai pu apprendre beaucoup du travail d’équipe, je me suis épanouie

‘’professionnellement’’ et j’ai appris à beaucoup mieux m’organiser !!! Les PTUT sont

très très enrichissants pour tous !"

Sophie Royer

‘’ Expérience fort bien sympathique, de nombreuses compétences acquises et

améliorées. Les ptut ont permis d'améliorer l'ensemble des compétences acquises

lors de notre formation, à les améliorer, et de voir un projet concret et fini.’’

Vincent Loubet

" Une bonne expérience pré-professionnelle, qui montre dans son ensemble le

fonctionnement d'une entreprise vis à vis d'un projet. Cela m'a également permis

d'améliorer certaines compétences acquises lors de la formation en SRC."

Sylvain Sablayrolles

Rappel du Rapport PTUT GraphiZ 1ère année :

2ème année