Dossier final agence Wonderpainters

RappoRt depRojet tuteuRé

Avril 2012Rédigé par l’agence Wonderpainters

www.wonderpainters.com

CopyrightLes éléments de ce CD-rom sont utilisables uniquement dans le cadre universitaire de la formation SRC (services et réseaux de communication) à Marne-la-vallée, comprenant le corps enseignant, les interve-

nants externes ainsi que l’agence Wonderpainters.

Rédigé par l’agence Wonderpainters

Rapport de projet tuteuréAgence Wonderpainters

avril 2012

« Il n’y a pas de création sans épreuve... »Fernand Ouellette

Sommaire

Choix du projet- le Choix du projet ...............................................................................................................p001

pourquoi Ce projet- pourquoi Ce projet ? ..........................................................................................................p001

Notre miSSioN- Notre miSSioN .......................................................................................................................p001

etude préalable-etude préalable ...................................................................................................................p002

Cadrage deS beSoiNS - geStioN de projet- Cadrage deS beSoiNS - geStioN de projet ..........................................................p003 - 004

CahierS deS ChargeS teChNiqueS- etude vidéo html5 vS FlaSh ..............................................................................................p005

- Cahier deS ChargeS programmatioN ............................................................................p006

- Cahier deS ChargeS ServiCe Sur réSeau ......................................................................p006

CoNCeptioN FroNtoFFiCe- reCherChe logo ..........................................................................................................p007 - 009

- uN Nouveau deSigN ...................................................................................................... .p010 - 012

CoNCeptioN du baCkoFFiCe- leS FoNCtioNNalitéS du baCkoFFiCe ...............................................................................p013

- diagramme de CaS d‘utiliSatioN ......................................................................................p014

- maquette FoNCtioNNelle ...................................................................................................p015

- CoNCeptioN de la baSe de doNNéeS .................................................................................p016

développemeNt du baCkoFFiCe- la programmatioN orieNtée objet ..................................................................................p017

- dupliCatioN deS FoNCtioNNalitéS : ajout / SuppreSSioN / modiFiCatioN ............p018

- le moteur de reCherChe et ajax ......................................................................................p019

- aFFiChage deS projetS .........................................................................................................p019

développemeNt du FroNtoFFiCe homepage– parallaxe .....................................................................................................................p020 - 022

CommuNiCatioN au SeiN de l’ageNCe- elémeNtS poSitiFS / elémeNtS NégatiFS .........................................................................p023

CommuNiCatioN aveC NoS ClieNtS – la CommuNiCatioN aveC NoS ClieNtS .............................................................................p024

orgaNiSatioN du travail- l’orgaNiSatioN du travail ..................................................................................................p025

expérieNCe- l’expérieNCe ............................................................................................................................p025

aNNexeaNalySe deS diFFéreNtS SiteS vitriNeS SrCl .......................................................p027 - 033

gaNtt projet ClieNt .....................................................................................................p034

deviS Site moSaÿC .........................................................................................................p035

iNSertioN deS vidéoS Sur moSaÿC ...........................................................................p036 - 042

Cahier deS ChargeS programmatioN .....................................................................p043 - 046

CdC ServiCe Sur réSeau ..............................................................................................p047 - 050

reCherChe logo .............................................................................................................p051 - 057

Charte graphique logotype moSaÿC .....................................................................p058 - 063

001 | 063

Projet client : refonte du site vitrine« Mosaÿc » de l’iut de Marne-la-vallée

Choix du projetAu mois de septembre 2011, nous avions comme projet la réalisation d’un site présentant les diffé-rentes écoles dédiées au domaine du Multimédia en leur attribuant un système de notation. Suite à de nombreux échecs (positionnement de l’agence qui n’était pas en cohérence avec le projet client, projet jugé trop vague par l’ensemble des profes-seurs…) nous avons dû abandonner cette première idée de projet.

A deux semaines de la soutenance et n’ayant tou-jours pas de projet client, Mr Pierre Tasso nous a proposé comme projet la refonte du site vitrine « Mosaÿc » de l’IUT. Cette suggestion de projet ayant plu à l’ensemble des membres de l’agence, nous l’avons acceptée.

Ainsi nos clients ont été Mr Pierre Tasso pour toute la conception visuelle et Mme Gaëlle Charpentier pour l’aspect technique du site Mosaÿc.

desCription du projet Réalisé en 2008 par des étudiants en DUT SRC, le site vitrine Mosaÿc de l’IUT de Marne-la-Vallée a pour objectif de présenter les différents travaux pertinents réalisés par les étudiants de cet établis-sement tout au long de leur formation.

pourquoi Ce projetDepuis 4ans l’IUT n’avait plus de site vitrine présen-tant les travaux réalisés par les étudiants au sein de leur établissement.

A l’origine, ce site a été construit avec un front office en XHTML/CSS et un backoffice en PHP. Il était hébergé sur le site de l’IUT et géré par les pro-fesseurs eux-mêmes. Plusieurs bugs, un graphique vieillissant et un backoffice peu ergonomique et trop rigide qui engendrait de nombreuses difficul-tés dans l’ajout de travaux ont conduit à la suppres-sion de son référencement depuis le site de l’IUT.

notre missionNotre mission est la refonte complète du site vitrine « Mosaÿc » de l’IUT de Marne-la-Vallée.

A ce titre, nous avons comme objectif de créer une nouvelle identité visuelle (logo et charte graphique moderne et dynamique) dotée d’une haute lisibi-lité, d’offrir une ergonomie optimisée, souple et performante et enfin de réaliser un backoffice per-mettant d’effectuer les mises à jour successives de manière optimale.

002 | 063

etude préalableAvant de démarrer notre projet, nous avons réalisé une étude pour identifier les acteurs et les enjeux du marché, préalable fondamental pour construire un site cohérent avec l’image de l’IUT de Marne-La-Vallée. Ainsi nous avons tout d’abord identifié notre cible que sont les futurs étudiants âgés de 17 à 22 ans. Au tra-vers de l’ensemble des recherches qu’ils seront amenés à effectuer, ce site doit notamment leur fournir, à titre d’exemple et pour mieux asseoir la notoriété du département, un accès aux travaux déjà réalisés par les étudiants au sein de la formation SRC. Ainsi ils pourront librement consulter tous les projets accomplis.

Le site Mosaÿc doit également offrir aux entreprises toutes les informations et précisions concernant le potentiel des étudiants qualifiés d’un DUT SRC afin d’évaluer au mieux leurs compétences avant une possi-bilité d’embauche.

De la même manière, un accès leur permettant d’apprécier les travaux déjà réalisés, contribuera à valoriser l’IUT et à installer sa notoriété à l’égard du monde professionnel. Le site pourra aussi offrir aux conseillers d’orientation des réponses quant à leurs recherches de renseigne-ments sur la formation SRC. La visualisation des travaux réalisés par les étudiants permettrait d’orienter au mieux les lycéens.

Après avoir identifié notre cible, il était essentiel de repérer nos concurrents même si c’est un site institu-tionnel à but non lucratif. Nos antagonistes étant de fait tous les autres sites vitrines des départements SRC en France, nous avons donc mis en place une veille pour examiner comment ces différents établissements présentent (ou non) les travaux de leurs étudiants en formation SRC.

Voir annexe :

Analyse des différents sites vitrines SRC

Enfin nous avons recherché les prescripteurs potentiels du site Mosaÿc. Bien évidemment les principaux prescripteurs sont l’université de Marne la Vallée, l’IUT, le département SRC avec ses professeurs et ses élèves et anciens élèves. A cette liste il faut cependant ajouter les sites d’étude comme l’étudiant.fr.


003 | 063

Cadrage des besoins - gestion de projetDans un premier temps, nous avons recueilli les besoins de nos clients. L’agence a organisé une réunion avec Mr Pierre Tasso et ensuite avec Mme Gaëlle Charpentier car nous n’avons pas réussi à les voir en même temps.

Ils ont souhaité qu’une nouvelle identité visuelle s’accompagnant d’une nouvelle charte graphique soit réa-lisées pour donner une image plus « actuelle » avec un design épuré et original. Ces dispositions impliquant de fait la réactualisation du logo de Mosaÿc.

Concernant le contenu du site, Mr Pierre Tasso et Mme Gaëlle Charpentier ont souhaité segmenter les tra-vaux des étudiants en différentes catégories accessibles depuis la page d’accueil qui seront ainsi réparties :

- Vidéo - Animation Flash - Site Web - Mise en page - Photographie

Ensuite l’affichage des projets réalisés par les étudiants devra être aléatoire et dynamique. Ces projets effec-tivement présents dans la base de données seront visibles ou non selon le choix du client via le backoffice leur autorisant ainsi d’afficher les seuls projets qu’ils souhaitent effectivement visualiser.

La présence du logo Mosaÿc devra être accompagnée du logo de l’IUT Marne-la- Vallée ainsi qu’un lien per-mettant d’accéder au site de l’établissement.

Enfin les exigences de nos client concernant le backoffice sont les suivantes :

Il doit être ergonomique et simple d’utilisation et uniquement dédié aux professeurs. Il devra permettre le dépôt, l’ajout, le choix de la visibilité du projet sur le site Mosaÿc, l’édition et la suppression de contenus avec un dispositif de sécurité informatique pour éviter toute manœuvre malencontreuse ou intempestive.

Un tableau de bord permettant de voir les statistiques du nombre de visites chaque mois, les projetsles plus vus et les mieux notés sera créé à cet effet. Ces statistiques permettront ainsi d’évaluer, dans le temps, la notoriété du site.

De plus, un moteur de recherche sera intégré dans le backoffice afin de faciliter la recherche de projets.


004 | 063

Après avoir analysé les besoins du client nous avons établi un diagramme de Gantt afin de bien anticiper les éventuels problèmes ainsi qu’un cahier des charges client, réseau et programmation.

Voir annexe :Gantt projet client

Au cours de notre projet nous avons mis à jour le Gantt en fonction de l’évolution du projet. (précision des tâches à effectuer, réorganisation de celles-ci). Grâce au Gantt nous avons pu répartir les tâches au sein de notre équipe. Pour l’intégration et le développement du backoffice par exemple Mr Hervé LO avait souligné une mauvaise répartition des tâches car nous avions décidé que les deux développeurs développeraient chacun plusieurs parties du backoffice.

Rappelons que les fonctionnalités sont les mêmes pour chaque catégorie à quelques détails près. Nous avons donc séparé le travail selon les fonctions à développer qui seront ensuite dupliquées pour les diffé-rentes parties du backoffice.


Après avoir fait valider le cahier des charges nous avons réalisé un devis pour le client. Il est présenté de manière à distinguer toutes les phases du projet ainsi que toutes les tâches détaillées en fonction de leur durée et du tarif en hors taxe.

Voir annexe :Devis site Mosaÿc

005 | 063

Cahiers des Charges teChniques - etude vidéo html5 vs FlashPour présenter les vidéos sur le site, nous devions développer un lecteur car le département SRC ne pouvait pas se permettre de diffuser des vidéos provenant d’un site d’hébergement de vidéos comme «Youtube» ou «Dailymotion».

Cette contrainte nous a conduit à réaliser une étude sur les technologies HTML5 et Flash qui permettent toutes deux la lecture de vidéos sur internet. Notre cliente Gaëlle Charpentier nous avait en effet demandé de nous intéresser à l’HTML5 récemment implémenté par les nouveaux navigateurs. Il en a résulté que la vidéo en HTML5 est plus simple à mettre en place mais nécessite l’encodage des vidéos sous plusieurs for-mats (minimum deux) car les navigateurs ne prennent pas en charge les mêmes codecs.

De plus certains navigateurs ne lisent pas du tout les vidéos HTML5 et il faut donc mettre en place ce qu’on appelle un « callback » en flash : si le navigateur de l’utilisateur n’implémente pas l’HTML5 alors la technolo-gie flash sera utilisée pour lire la vidéo. Mais alors ne vaut-il mieux pas utiliser flash directement plutôt que d’utiliser une technologie encore « à l’essai » qui nous oblige de toute façon à utiliser flash ? A vrai dire les deux technologies ont leurs avantages et inconvénients, reste que l’une est avant-gardiste. A la lecture de notre étude nos clients ont d’ailleurs sélectionné celle-ci. Nous utiliserons donc HTML5 pour l’insertion des vidéos sur Mosaÿc.

Voir annexe :Insertion des vidéos sur Mosaÿc


006 | 063

- Cahier des Charges programmationA partir du cahier des charges du projet nous avons décrit les fonctionnalités du site Mosaÿc et les techno-logies à utiliser pour les développer dans un cahier des charges dédié. Nous avons tout d’abord étudié les différents langages qui étaient utilisables dans notre cas : gestion d’un site web dynamique avec base de données, et avons choisit le langage PHP pour la création de pages dynamiques et MySQL pour la gestion de la base de données. La combinaison « PHP + MySQL » a pour avantage d’être la plus courante et est suffi-samment performante pour développer un site tel que Mosaÿc. Ces deux langages sont très populaires et disposent d’une grande communauté sur Internet.

Nous avons également listé en amont toutes les fonctionnalités du site Mosaÿc et quelles techniques nous allions utiliser pour chacune d’entre-elles : création d’un compteur de vues, attribution de notes, affichage dynamique et aléatoire des projets, affichage des projets similaires et création d’un moteur de recherche.

Voir annexe :Cahier des charges programmation

- Cahier des Charges serviCe sur réseauNos clients nous ont demandé d’évaluer les besoins du serveur qui accueillera le site Mosaÿc afin qu’ils réflé-chissent à l’éventualité de s’abonner à une offre d’hébergement sur internet (le site actuel étant hébergé sur le serveur de l’IUT). Pour ce faire, nous nous sommes tout d’abord intéressé au poids des différentes pages du site, et des vidéos. Ensuite nous avons analysé : le poids total du serveur, le trafic mensuel et la base de données. Nous avons alors pu estimer que le site a besoin d’un espace de 3 Go / mois et d’une base de don-nées de 1,4 Mo pour démarrer, et d’un trafic de 1 Go/ mois. (Les langages PHP et MySQL doivent évidem-ment êt re implémentés par le serveur).

Nous avons proposé dans le cahier des charges, la souscription à l’offre de OVH qui propose un espace disque de 25Go, un trafic illimité, une base de données de 50Mo et l’implémentation de PHP4, 5.2, 5.3 et 5.4 ainsi que MySQL 5.1 pour 2€38 TTC / mois.

Voir annexe :CDC Service sur réseau


007 | 063

ConCeption FrontoFFiCeAvant d’établir une charte graphique pour la réalisation des maquettes du frontoffice, il était indispensable de concevoir le nouveau logo Mosaÿc.

- reCherChe logo Dans un premier temps nous avons réalisé une recherche sémantique autour du site Mosaÿc :


Nous avons sélectionné les mots correspondant au projet : multimédia, graphisme, réseaux, web et avons ensuite étudié les couleurs présentes dans les images décrivant ces mots :

008 | 063


A partir de ces 5 couleurs nous avons présenté plusieurs logos aux clients avec différentes déclinaisons en partant sur une base commune : le triangle représentatif d’un « fragment de mosaïque ».

Voir annexe :Recherche Logo

009 | 063


Suite à la présentation des différents logos ainsi obtenus, Mr Pierre Tasso et Mme Gaëlle Charpentier, ont choisi le visuel suivant :

Dans ce logo, les différents éléments graphiques sont représentés en arrière plan de l’identité «mosaÿc». Cette identité englobe donc tous les projets que les internautes vont pouvoir découvrir en parcourant le site.

Les figures triangulaires sont bien représentatives des éléments d’une mosaïque avec de multiples couleurs pour figurer la diversité des projets réalisés en SRC tout en signalant une base commune.

Voir annexe :Charte graphique logotype Mosaÿc

0010 | 063


- un nouveau designParallèlement aux recherches du nouveau logo, un premier zoning accompagné d’une maquette ont été pré-sentés en fonction des contraintes exposées par notre client. Le zoning est une technique consistant à schématiser une page Web à l’aide de blocs ou boîtes, dans le but de montrer les grandes fonctionnalités et les zones principales du contenu.

Par la suite, nous avons du abandonner ce zoning car on ne pouvait pas l’intégrer en HTML/CSS.Contraint par le temps et en tenant compte des critiques émises par le client, une deuxième version de maquette a été réalisée sans passer au préalable par un zoning en respectant les contraintes d’intégration et les codes couleurs du logo Mosaÿc. Le fait de ne pas avoir réalisé de zoning nous a pénalisé et ralentit puisque nous n’avions pas schématisé les fonctionnalités et l’ergonomie du site. Nous voulions gagner du temps et en avons finalement perdu, nous savons dès lors que la pahse de zoning est primordiale.

La forme triangulaire prédominante du logo a été reprise pour caractériser les différentes catégories de la page d’accueil, la présentation des travaux réalisés et le menu des autres pages:

0011 | 063


Dans cette composition, nous avons réutilisé les triangles du logotype pour créer la mosaïque de projet.

Grâce à cette composition, l’utilisateur est immergé dans les travaux des étudiants et selon la catégorie qu’il a sélectionné préalablement, les projets sont affichés aléatoirement par groupe de 9. L’utilisateur peut rafraîchir cette liste grâce à la barre de rafraichissement des projets.

Le graphisme est à la fois sobre et épuré mais grâce à l’interactivité des catégories du site ainsi que des hover des projets, les couleurs apparaissent et font découvrir les aperçus des projets.

0012 | 063


Le challenge de cette page était de trouver un compromis entre l’importance du visuel ainsi que celui des informations sur le projet.

L’interface encore très épurée, reste camouflée pour éviter d’atirer l’oeil de l’utilisateur.

0013 | 063

ConCeption du baCkoFFiCe - les FonCtionnalités du baCkoFFiCeSelon les besoins du client le backoffice doit être ergonomique et simple d’utilisation et uniquement dédié aux professeurs. Il devra permettre pour chaque catégorie : l’ajout, la suppression et la modification des pro-jets. Les utilisateurs pourront spécifier pour chaque projet :

- le titre, l’agence- le ou les auteurs du projet- la description- la liste de mots-clés (pour permettre l’affichage des projets similaires, voir cahier des charges programmation)- la vignette, le ou les sources (seul un projet de la catégorie site web peut être associé à plusieurs médias : jusqu’à 4 images et une vidéo)- la récompense éventuellement obtenue, la visibilité ou non sur le site.

Concernant les vidéos, l’utilisateur pourra uploader une image, celle-ci apparaitra avant que l’utilisateur ne clique sur play (elle donne un aperçu de la vidéo avant que celle-ci ne se lance).

Le tableau de bord devra permettre de visualiser le nombre de visites par mois, les projets les plus vus et les mieux notés. Ces statistiques permettront ainsi d’évaluer, dans le temps, la notoriété du site. Un moteur de recherche sera intégré dans le backoffice afin de faciliter la recherche de projets.


0014 | 063


- diagramme de Cas d‘utilisationDans un premier temps nous avons réalisé un diagramme de cas d’utilisation de notre projet client. Les dia-grammes de cas d’utilisation sont des diagrammes UML utilisés pour donner une vision globale du compor-tement fonctionnel d’un système logiciel.

Un cas d’utilisation représente une unité discrète d’interaction entre un utilisateur (humain ou machine) et un système et représente leurs relations. Il existe deux types de relations :

- L’inclusion : dans ce type d’interaction le premier cas englobe l’autre et son issue dépend souvent de la résolution du second (exemple : gérer les projets inclut de se connecter).

- L’extension : Elle représente des prolongements logiques de certaines tâches sous certaines conditions (exemple : ajouter un projet étend gérer les projets).

A partir de ce diagramme d’utilisation, nous avons alors pu définir les acteurs et les services rendus par le système pour avoir une vision globale de ceux-ci et n’oublier aucune fonctionnalité.

0015 | 063


- maquette FonCtionnelleEnsuite nous avons présenté un wireframe du backoffice réalisé grâce au logiciel « Balsamiq mockups ». Le wireframe a pour but de schématiser une page web, montrer les fonctionnalités, les zones de contenu et la structure de l’interface (le wireframe est plus précis que le zoning définit précédemment). Aucun design n’est fait sur cette étape de wireframing, son objectif étant avant tout fonctionnel.

Le document que nous avons réalisé est un « pdf interactif » permettant de visualiser toutes les fonction-nalités du backoffice. Nos clients ont donc pu visualiser la structure des pages et simuler une visite du backo-fice en cliquant sur certaines parties du pdf.

Ils ont été satisfaits du wireframe qu’ils ont validé et nous avons donc pu démarrer le développement du backoffice en toute sérénité.

0016 | 063


- ConCeption de la base de donnéesNous avons du créer une base de données afin de gérer les projets et les différents medias présents sur le site Mosaÿc. En effet les projets peuvent être liés à une image (categories photo, flash et visuel) à une vidéo (categorie video) ou plutôt deux puisqu’elle doit être encodée sous deux formats (comme expliqué dans la partie étude vidéo), et à plusieurs images et une vidéo pour (catégorie web).

Puisque le nombre et le type des médias associés au projet ne sont pas toujours les mêmes, nous avons créé une table media à part entière, une table projet et une table catégorie. Ainsn un projet est lié à une seule catégorie et à un ou plusieurs médias. Nous avons créé le diagramme de classe puis modélisé à partir de celui-ci la base de données grâce à un logiciel prévu à cet effet :

MySQL Workbench (Le diagramme de classe représente l’architecture conceptuelle du système et la relation entre les différents éléments.).

0017 | 063

développement du baCkoFFiCe - la programmation orientée objet

La programmation orientée objet est une méthode d’organisation du code utilisée dans plusieurs langages comme le C++, le Java ou dans notre cas le PHP.

On distingue deux éléments en programmation orientée objet : les classes et les objets. Une classe est un élément de programmation caractérisé par des variables et des fonctions qui lui sont propres. Un objet est une instance de cette classe. Prenons un exemple concret :

Imaginons que nous avons un objet Personnage de jeu. Un personnage a des caractéristiques :

- Une force - Une localisation - Une certaine expérience - Des dégâts

Toutes ces caractéristiques correspondent à des valeurs ces valeurs sont stockées dans des variables.

Mis à part ces caractéristiques, un personnage a aussi des capacités. Il peut :

- Frapper un autre personnage- Gagner de l’expérience- Se déplacerCes capacités correspondent à des fonctions.

Les classes sont en quelque sorte les machines qui permettent de fabriquer les objets. Prenons un exemple simple : les gâteaux et leur moule. Le moule, est unique et peut produire une quantité infinie de gâteaux. Dans ces cas-là, les gâteaux sont les objets et le moule est la classe. La classe est donc une sorte de machine à produire des objets. Elle contient le plan de fabrication d’un objet et on peut s’en servir autant qu’on veut afin d’obtenir une infinité d’objets.


0018 | 063

L’utilisation de la programmation orientée objet permet une organisation plus simple et rigoureuse du code.

Dans notre cas nous avons créé deux classes : Media et Pro-jet. Celles-ci sont caractérisées par plusieurs variables cor-respondant aux champs des tables de la base de données.

Ainsi lors de l’ajout d’un projet, nous créons un nouvel objet projet et appelons la fonction ajouter_projet propre à la classe Projet. Dans le même temps nous créons un ou plu-sieurs objets media et appelons la fonction ajouter_media propre à la classe Media.

Ces deux fonctions vont directement ajouter l’objet ,définit par ses variables, dans la base de données.


Le code est plus clair, correctement organisé. Au final nous n’avons écrit qu’une seule fois les instructions permettant d’ajouter, supprimer ou modifier un média ou un projet et les avons utilisées dans les pages cor-respondantes.

dupliCation des FonCtionnalités : ajout / suppression / modiFiCationNous avons définit par fonction d’ajout, et modification l’affichage d’un formulaire, la récupération des don-nées du formulaire, l’affichage des erreurs si elles existent, le traitement des données et leur insertion dans la base de données.

Si les fonctions d’ajout, suppression et modification des projets dans la base de données sont les mêmes quelque soit la catégorie du projet, les instructions permettant de vérifier les champs du formulaire et de récupérer les données entrées par l’utilisateur sont sensiblement différentes. Nous avons par exemple véri-fié si l’utilisateur avait uploadé un type de fichier correct (exemple : un fichier swf pour l’ajout d’une anima-tion flash), mais celui-ci varie selon les catégories (image, vidéo, ou animation swf).

0019 | 063


En outre ce qui nous a posé le plus de difficultés est la gestion de plusieurs images et optionnellement d’une vidéo pour la catégorie site web. Nous avons du par exemple :

Vérifier que l’utilisateur n’essayait pas d’uploader plus de 4 images, vérifier qu’il associait bien au moins un fichier au projet (fonctionnalité simple pour les autres catégories puisqu’il ne peut ajouter qu’un fichier source), optimiser l’ergonomie et ainsi afficher 3 champs d’upload si l’utilisateur souhaitait ajouter 3 images etc...

Ces fonctionnalités ont été développées exclusivement pour cette catégorie de projet. L’ajout, la suppres-sion et la modification des projets n’étaient donc pas de simples fonctions à dupliquer telles qu’elles mais nécessitaient entre chaque catégorie des ajustements.

- le moteur de reCherChe et ajaxAjax, en passant par le javascript, permet d’éviter l’affichage d’une nouvelle page lors de requêtes vers le serveur web. Le principal avantage du moteur Ajax est le gain de temps dû à sa grande réactivité et sa compatibilité avec tous les navigateurs. Nous avons donc trouvé intéressant de nous tourner vers cette technologie pour concevoir notre moteur de recherche.

Nous avons utilisé un système d’autocomplétion qui permet d’afficher le contenu de la base de donnée en temps réel au fur et à mesure de la saisie. Un menu déroulant comprenant les dix premières entrées correspondant à la saisie s’affiche pour que l’utilisateur puisse choisir le projet avant même d’avoir lancé la recherche. Pour plus de visibilité, les lettres correspondant à la saisie changent de couleur.

L’utilisateur peut donc choisir un projet directement dans la liste à condition qu’il sache le nom du projet qu’il recherche.

Dans le cas contraire, il peut entrer un nom d’agence, d’auteur ou un mot-clé, les travaux correspondant s’afficheront dans la liste.

Il a aussi la possibilité d’entrer un ou plusieurs mots-clés dans le champ de recherche. Les projets dont le titre contient le ou les mots-clés s’afficheront. Les mots saisi, quant à eux, apparaîtront en gras. Le principal inconvénient d’utiliser l’Ajax est l’absence de référencement. En effet, les robots d’indexation n’éxécutent pas les programmes conçu en javascript, mais dans notre cas, il s’agit du backoffice et n’a donc pas besoin d’être référencé. Un fichier a d’ailleurs été ajouté pour empêcher l’indexation de cette partie du site internet.

L’affichage des projets se fait grâce à DataTables, un plugin jQuery qui permet d’ajouter des fonctionnalités à un tableau (la défini-tion de jQuery et JavaScript est abordée à la partie suivante).Ces fonctionnalités sont le tri, la pagination, le filtre et le choix du nombre d’affichage dans la page.

Dans chaque catégorie, l’utilisateur peut choisir le nombre d’élé-ments à afficher et grâce au filtre, cibler un projet de la catégorie dans laquelle il se trouve. L’avantage d’utiliser jQuery est sa com-patibilité avec les navigateurs.

De plus, une fois la page chargée, la recherche de projet est faci-lité grâce à la rapidité du système. Par contre, et c’est son prin-cipal inconvénient, dataTables est un plugin assez lourd qui peut mettre un certain temps à charger si la connexion est trop faible. C’est pour cette raison que nous avons décidé de faire apparaître le tableau de résultats en fondu par souci d’esthétique, celui-ci se chargeant pendant le fondu.

Concernant l’interface graphique, nous avons utilisé la librairie jQuery UI et son ThemeRoller qui permet de paramètrer entière-ment le design du tableau.

- aFFiChage des projets

0020 | 063

développement du FrontoFFiCe homepage – parallaxe

GénéralitésLe terme parallaxe désigne en général l’incidence du changement de position de l’observateur sur l’observa-tion d’un objet. Il est utilisé en photographie ou même en astrologie. Sur le web, l’effet de parallaxe désigne le déplacement d’éléments sur des couches et à des vitesses différentes.

Au scroll (défilement de la vue) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Ce principe concerne au minimum deux éléments et peut être appliqué à plusieurs endroits : sur les images de fond, sur un en-tête ou un pied de page, sur des images... etc.

Nous avons décidé d’appliquer cet effet à la homepage et plus précisément aux triangles permettant d’accé-der aux différentes rubriques du site, afin d’ajouter du dynamisme et une certaine interactivité à la page.


0021 | 063

Le JavaScriptPour déplacer les éléments nous avons utilisé JavaScript, un langage de programmation de script. Le JavaS-cript est à ce jour utilisé majoritairement sur Internet, conjointement aux pages Web (HTML ou XHTML).

Le JavaScript s’inclut directement dans la page Web (ou dans un fichier externe) et permet de dynamiser une page HTML, en ajoutant des interactions avec l’utilisateur, des animations, de l’aide à la navigation, comme par exemple :

- afficher/masquer du texte- faire défiler des images- créer un diaporama avec un aperçu «en grand» des images- créer des infobulles...


Grâce à l’utilisation de JavaScript, il est également possible de déplacer les élé-ments par rapport à la position de la sou-ris ou du niveau de défilement (scroll).

Le but va donc être de modifier les valeurs de positionnement en fonction de ces paramètres que l’on mesure.

Avec même déplacement de la souris, l’élément a aura parcouru une distance plus faible que l’élément b.

C’est cette différence de vitesse qui crée l’effet parallaxe.

0022 | 063

Plugin PlaxPlax est un plugin reposant sur la librairie JQuery (JQuery est une bilibothèque JavaScript libre qui a pour but de simplifier ses principales commandes).

Il permet de mettre facilement en place l’effet parallaxe basé sur la position de la souris. Il suffit de téléchar-ger le plugin, de le lier aux pages concernées et d’ajouter quelques paramètres aux images à animer.

<img src=»octocat.png» data-xrange=»40» data-yrange=»40»><img src=»bg.png» data-xrange=»10» data-yrange=»10» data-invert=»true»>

data-xrange définit la de déplacement en x et data-yrange la zone de déplacement en y en pixels. data-invert=true permet d’inverser le sens de mouvement (contraire aux aiguilles d’une montre).


0023 | 063

CommuniCation au sein de l’agenCeEléments positifs ayant contribué à la bonne circulation des infos :

Création d’un groupe sur «facebook» afin de poster des messages pouvant être lus par chacun des membres de l’agence.

Création d’un espace dédié à l’agence sur «dropbox» qui a permis de partager des fichiers locaux mis en ligne et uniquement accessibles aux membres de l’agence.

Eléments négatifs ayant perturbé le bon déroulement du projet :

Préalable : la création de tout nouveau groupe de travail est toujours confrontée à la rencontre des person-nalités et des égos de chacun de ses membres. Soit les personnalités et les égos s’harmonisent d’entrée de jeu avec plus ou moins d’évidence ; soit les personnalités et les égos se heurtent également d’entrée de jeu avec plus ou moins de force.

Notre agence a malheureusement dû faire face au cas de figure le plus difficile à résoudre : des personnali-tés, des égos et des compétences qui ont rapidement affiché leur incompatibilité.

Ce scénario a entretenu la primauté de l’individu sur le collectif, du personnel sur le professionnel, avec son lot de conséquences : tensions, démotivation, incompréhensions... qui ont conduit à des retards consé-quents à l’égard des échéances du projet.

Projet client : Bilan général

0024 | 063

CommuniCation aveC nos ClientsNous avons mis en place un lien vers notre blog depuis le site de l’agence avec un accès privé leur permet-tant d’accéder à tous les comptes rendus de réunion. Nous avons donc décidé d’utiliser , dotclear un CMS très performant et libre, qui permettait en plus de mettre très facilement en place un procédé d’authentifi-cation au blog.

Par la suite, tous les échanges pour informer les clients de l’état d’avancement du projet ont été réalisés par mail. Le fait que nos clients soient nos professeurs nous a été bénéfique dans le sens où nous pouvions très facilement les croiser et obtenir leurs avis.

Cependant leurs opinions étaient parfois différentes (l’un s’attachant plus au graphisme, l’autre à l’ergonomie) et leurs retours parfois lents ou pas assez explicites.

Dans l’ensemble la communication avec nos clients s’est toutefois bien déroulée. Si nous étions pressés d’avoir leurs retours c’est que nous étions nous-même en retard et ne pouvons donc pas leur en tenir rigueur.


0025 | 063

organisation du travailL’organisation du travail, comme pour tous les groupes, a été immédiatement confrontée avec l’ensemble des autres travaux (partiels, autres projets en marge de l’IUT...). Il a donc été décidé de répartir les tâches par compé-tence. Ce type de répartition, originellement partagé, n’a pas empêché les difficultés à respecter notamment les échéances impératives du projet, difficultés issues d’un climat insuffisamment apaisé au sein de l’agence.

expérienCeComme pour toute expérience, bonne ou mauvaise, elle a été particulièrement enrichissante, car elle nous a amené, paradoxalement, à une prise de conscience certaine et une véritable réflexion quant à la dynamique d’un groupe.

En effet, dans le monde professionnel et en entreprise, nous ne choisissons pratiquement jamais les per-sonnes avec lesquelles nous allons travailler et partager les missions : nous devons faire avec cette obliga-tion. Et la création de notre agence nous a révélé avec une authentique force de l’importance capitale de l’existence d’une bonne ambiance au sein d’une équipe. Nous pensons même qu’une saine ambiance pour-rait pallier en partie à un manque de compétences.

C’est bien pourquoi l’organisation, l’anticipation, le cadrage des besoins, une répartition équitable des tâches et une écoute bienveillante de «l’autre» sont un préalable indispensable à la réussite finale d’un projet.

La leçon primordiale que nous avons retenue de notre expérience de groupe est l’absolue priorité à dépasser son égo, à «prendre sur soi» autant professionnellement que personnellement. Sans cette mise en œuvre, le groupe est assuré d’aller tout droit dans une impasse.


0026 | 063

Projet client : annexe

0027 | 063


0028 | 063


0029 | 063


0030 | 063


0031 | 063


0032 | 063


0033 | 063


0034 | 063


0035 | 063


0036 | 063


0037 | 063


0038 | 063


0039 | 063


0040 | 063


0041 | 063


0042 | 063


0043 | 063


0044 | 063


0045 | 063


0046 | 063


0047 | 063


0048 | 063


0049 | 063


0050 | 063


0051 | 063


0052 | 063


0053 | 063


0054 | 063


0055 | 063


0056 | 063


0057 | 063


0058 | 063


0059 | 063


0060 | 063


0061 | 063


0062 | 063


0063 | 063


www.wonderpainters.com

Documents

Dossier final agence Wonderpainters