Sommaire
2
Sommaire Sommaire............................................................................... 3 Introduction............................................................................ 5 L’Agence Impact Web........................................................... 6 Historique.......................................................................................................6 Secteurs d’activités.......................................................................................6 Les collaborateurs.........................................................................................7 Fonctionnement.............................................................................................7
Site Alsavert.com.................................................................. 8 Site Chroma-france.com..................................................... 10 Maquette Impact Web.......................................................... 16 Site Afrique-du-sud-autrement.com.................................. 22 Maquette Europodium......................................................... 30 Site Spindler.tm.fr................................................................ 38 Conclusion........................................................................... 45 Annexes............................................................................... 47
3
Introduction
4
Introduction P
our finaliser la formation de la Licence 3 Science du Langage, de l’Information et de la Communication de l’UFR STGI de Montbéliard, les étudiants de la promotion 2008/2009 doivent réaliser un stage de 8 semaines en entreprise spécialisé dans le domaine des Technologies de l’Information et de la Communication (TIC).
E
tant originaire des environs de Strasbourg dans le Bas-Rhin, j’ai réalisé mon stage dans le village de Still (situé à 30km de Strasbourg) dans l’entreprise Impact Web. Mon responsable de stage est le dirigeant de Impact Web, Monsieur Marcel SEVRAIN. Impact Web 1, quai des anciens abattoirs 67120 MOLSHEIM 03 88 38 76 75 info@impact-web.com
Objectifs du stage
L
e stage est fait pour permettre de découvrir le monde professionnel du multimédia et des TIC, principalement pour ceux qui n’ont pas suivi la formation du DUT SRC et qui n’ont pas fait de stage similaire l’année précédente.
Objectifs personnels
D
’une manière générale, j’avais pour objectifs personnels de découvrir le fonctionnement d’une Web Agency et de pouvoir participer à la réalisation de projets en passant par le relationnel avec le client et le suivi de projets dans leur intégralité.
P
ar ailleurs, les étudiants ont appris le langage ActionScript 3 durant cette année de Licence 3. J’avais donc comme second objectif de mettre en application ce nouveau langage sur des projets concrets.
5
L’Agence Impact Web Historique
I
mpact Web est une entreprise qui a vu le jour en 1996 grâce au fondateur et dirigeant Monsieur Marcel SEVRAIN. Après 5 années, principalement à activité de prestation Informatiques Hardware / Software, Impact Web engage un développeur Web. L’agence compte alors 2 employés.
E
n 2005, l’entreprise continue doucement sa progression en élargissant ses domaines d’application avec 3 nouveaux employés spécialisés dans le développement JAVA pour le développement de l’application Deck3D (logiciel de création de terrasse en bois) logiciel phare de l’entreprise.
I
mpact Web voit alors ses effectifs augmentés de 3 personnes supplémentaires venant soutenir le développement JAVA et Web. L’agence compte alors 8 employés dans ses locaux. Le projet Deck3D prend fin en 2008 et Impact Web retombe à 5 employés.
E
n 13 années d’activités, la taille d’Impact Web a fluctué suivant les projets à réaliser. Actuellement, l’entreprise a toujours ses locaux dans le sous-sol du domicile de Monsieur SEVRAIN à Still dans le Bas-Rhin (67).
Secteurs d’activités
I
mpact Web a plusieurs secteurs d’activités. Ainsi, l’agence est en mesure de fournir plusieurs prestations de services qui peuvent parfois se compléter et faciliter le processus de création d’un projet.
6
Organigramme des activités (annexe page 48)
L
e stage réalisé se situe plus particulièrement dans le cadre de la Web Agency, englobant le secteur de la communication et du développement. Réalisation de maquette pour de nouveaux sites internet, modifications et mise à jour de site, intégration de modules flash, etc ont été mes tâches quotidiennes.
L
’activité « informatique » est principalement gérée par le fondateur de l’entreprise M. SEVRAIN, l’informatique étant sa première activité professionnelle. Les autres collaborateurs de l’entreprise s’occupent de la Web Agency, managé par M. SEVRAIN.
Les collaborateurs
E
n avril 2009, lors de mon arrivée à Impact Web, l’agence compte 6 collaborateurs au total dont 3 apprentis, 1 stagiaire et 1 employé permanent :
• • • • • •
P
Marcel SEVRAIN - Dirigeant et Manager Patrick LAGROST - Développeur analyste Elodie KAEUFFER - Apprentie (licence) Web Designer David HEITZ - Apprenti (bac pro) Hardware et Installation réseau Sébastien BIET - Apprenti (master) Ingénierie Logicielle Maxime LUTZ - Stagiaire (licence) Web Designer
our plus de détails sur la structure et l’organisation de Impact Web, je vous invite à vous référer aux organigrammes présents en annexe page 49.
Fonctionnement
A
vec un parc informatique et une structuration des données rigoureuses, chaque collaborateur a accès à l’ensemble des projets réalisés depuis les débuts d’Impact Web.
D
es sauvegardes de sécurité et des mises à jour des contenus des serveurs des clients sont faits tous les jours pour que les collaborateurs puissent travailler sur les dernières versions des projets.
U
n système de tâches planifiées et attitrées à chaque collaborateur par M. SEVRAIN, ainsi qu’un logiciel de pointage permet de vérifier l’avancé des travaux de chaque collaborateur et d’assurer un meilleur suivi des projets.
7
Site Alsavert.com
8
Site alsavert.com après modifications
Présentation du projet
A
lsavert est une entreprise spécialisée dans l’aménagement d’espaces verts en Alsace. Le site http://www.alsavert.com a été réalisé en 2002 par les soins de l’agence Impact Web.
A
l’heure actuelle, le site n’est plus tout jeune et présente une structuration de programmation ancienne (utilisation de frame et tableau principalement). Cependant, cela n’empêche en rien l’entreprise Alsavert de continuer à mettre à jour régulièrement le contenu de son site.
D
e ce fait, il a souhaité ajouter sur sa page d’accueil un lien qui mène l’internaute à une vidéo de démonstration. Cela a constitué ma première « tâche » au sein de l’agence.
Tâches • •
Inclure un lien vers la vidéo de manière visible et lisible Avoir un contrôle (classique) de la vidéo : lecture, pause, etc...
Réalisation
D
ans un premier temps, j’ai créé un lien sur la frame correspondant à la page principale du site. L’icone vidéo a été remanié à partir d’un modèle existant de sorte qu’il corresponde à la charte graphique du site.
L
’intégration de la vidéo a été faite avec un module de LiteBox vidéo gratuit et intitulé VidéoBox (http://videobox-lb.sourceforge.net). La vidéo a été recompressée et intégrée dans un module FLVPlayPack de sorte a être le mieux exploitable possible et d’avoir le contrôle de lecture.
E
nfin, j’ai modifié les fichers CSS du site pour que l’ensemble de cette modification soit cohérent (couleurs, placement, re-nommage du bouton « FERMER », etc...).
Conclusion
L
’intégralité du travail correspond à 3h de travail (re-compression comprise). L’adaptation à l’utilisation des frames et des tableaux m’a pris un peu de temps mais je n’ai pas réellement rencontré de difficultés particulières.
9
Site Chroma-france.com
Site avant modifications
10
Présentation du projet
C
hroma-France est une entreprise spécialisée dans la distribution de couteaux de cuisine japonais. Le site (http://www.chroma-france.com) a été tout d’abord réalisé par Chroma-France eux-même puis, suite à des résultats non satisfaisants, ils ont confiés la réalisation à Impact Web en février 2007.
A
ujourd’hui, pour rafraichir leur site, les responsables de Chroma-France ont souhaité faire quelques modifications. Ainsi, en collaboration avec Maxime LUTZ, j’ai traité plusieurs retouches graphiques ainsi que la réalisation d’un module dynamique de recherche.
T
ravaillant en parrallèle sur le module de carte intéractive pour le projet afrique-du-sud-autrement, mon collaborateur et moi avons convenu que Maxime s’occupe du module de recherche. J’ai donc reçu la majorité des tâches graphiques (modifications de second ordre).
Tâches • • •
Suppression des quadrillés en arrière plan de la bannière du site Mise en valeur des lien-titres du menu Changements des aplats des entêtes des rubriques
Réalisation (partie 1)
P
our la première tâche, je n’ai pas retrouvé le fichier source de l’entête. Il m’a donc fallu recomposer l’image sous Photoshop à partir de la bannière existante puis la réintégrer dans le site. Sans le quadrillage, l’image est allégée et est plus agréable à l’oeil.
P
our la mise en valeur des titres des encarts du menu, le client a fait le constat que la plupart des visiteurs ne remarquait pas que ces titres sont des liens cliquables ! Avec M. SEVRAIN, il a été convenu de simplement les souligner, ce qui est plus conforme par rapport aux règles d’ergonomie et suggère davantage le lien. J’ai ainsi modifié la feuille de style CSS du site en conséquence.
P
our la mise en valeur des aplats des entêtes des différentes rubriques, j’ai proposé de supprimer la couleur beige ne faisant référence à aucune autre couleur significative du site par la couleur correspondant à l’encart du menu. Ainsi le site répond à la règle d’ergonomie du groupement par format de Amélie Boucher (spécialiste en ergonomie du web : http://ergolab.net). De ce fait, l’utilisateur peut mieux se retrouver dans le site et cette modification renouvelle quelque peu l’image du site.
11
Site Chroma-france.com
E
nfin, lors de la relecture générale du site pour vérifier si je n’avais pas fait d’erreurs, j’ai remarqué que l’intégration faite jusque là (et/ou avec les modifications que le client a effectué lui même) comportait des erreurs en fonction de la quantité de contenu. En effet, lorsque la quantité de textes était inférieure à la hauteur du menu, le menu se plaçait au dessus du bas de page et hors du conteneur général du site. Je me suis donc proposé pour résoudre cette erreur afin qu’elle ne soit plus présente sur tous les navigateurs.
Retour du client
P
our effectuer ces modifications, il m’a tout de même fallu la bonne majorité de la journée. Je n’ai pas rencontré de problèmes particuliers si ce n’est l’adaptation à un code qui n’avait pas été réalisé par mes soins. La méthodologie de programmation employée n’est pas forcément la même d’un intégrateur à un autre et c’est bel et bien ce que j’en tire comme conclusion sur ce projet, d’où la nécessité de coder en respectant des règles et en commentant nos programmes.
A
prés la mise en ligne des modifications, étant donné que le client voulait changer un peu l’image de son site sans tout modifier et sans savoir réellement ce qu’il souhaitait, il nous a recontacté pour effectuer de nouvelles modifications.
12
Site après premières modifications
13
Site Chroma-france.com
Fond blanc, aplat vert
14
Fond gris, aplat violet
Site final
Tâches • Adoucir l’aplat du rouge en prenant le rosâtre du cercle se trouvant dans le menu couteau japonais • Dissocier les ustensiles et les couteaux japonais par la création d’une nouvelle rubrique avec une nouvelle couleur (à déterminer) • Suppression des cadres blanc ou gris entourant le texte pour n’avoir plus qu’une seule couleur de fond : blanc ou gris.
Réalisation (partie 2)
L
es modifications ont été rapidement réalisées dans l’heure et les maquettes misent en ligne. J’ai opté pour deux propositions par tâche, sans compter la modification de la teinte du rouge qui a été corrigée.
J
’ai donc réalisé une maquette avec un fond blanc et une avec un fond gris. Pour les aplats de couleurs de l’entête de la rubrique «Ustensiles Accessoires», j’ai proposé au client un violet et un vert dans les mêmes teintes que les autres couleurs de sorte qu’elles soient intégrées correctement.
L
e client, après quelques jours de réflexions et quelques modifications de détails, a choisi la maquette avec un fond gris avec l’aplat vert pour la rubrique «Ustensiles et Accessoires».
J
’ai alors fait l’adaptation sur toutes les pages du site et procédé à la mise en ligne du site. Aucun retour négatif n’a été fait.
Conclusion
A
vec ce projet j’ai pu découvrir une des facettes du travail des agences de communication qui est la modification et la maintenance de site existant.
C
ela me semble moins interressant à mes yeux car la création et les possibilités y sont plus restreintes et quasiment déjà tracées. Cependant, il est parfois plus difficile d’apporter des nouveautés à un projet contraint que de tout imaginer, ce qui relève un nouveau défi à notre créativité : faire du neuf avec du vieux !
15
Maquette IW.com Présentation du projet
L
e site de l’agence Impact Web (http://www.impact-web.com) a été créé en 2004 et a plus que l’âge de prendre sa retraite ! Reflet du travail de l’agence et gage de professionnalisme, ce site internet doit convaincre les prospets de choisir Impact Web.
E
n collaboration avec Maxime LUTZ, une lourde tâche nous est alors confiée, refaire le site impact-web.com pour le remettre dans l’air du temps tout en dégageant le professionnalisme et le sérieux de l’entreprise.
Contraintes • • • •
16
Mettre en avant les références : site vitrine Caractère professionnel avec une touche d’originalité Animation possible mais au service de la compréhension Normalement le logo est de couleur rouge
Site impact-web.com existant
Analyse de l’existant
N
ous avons commencé le processus par une analyse du site existant de Impact Web. Voici ce que j’ai listé lors du brainstorming :
• Site en plein écran, pas de scroll écran • Bandeau flash • Présentation des références en première page et dans une rubrique références mais pas de page spécifique par référence • Navigation simple – séparation par couleurs – (7) niveaux respectés • Bouton avec un lien vers l’accueil, pas de retour au clique sur le logo • Mise en relation avec Impact Web (contact) sur le deuxième niveau ! • Professionnel mais manque d’originalité : trop simple ! • Arborescence à revoir • Couleurs ternes mais pro : cohérence entre les rubriques • Pas de phrase d’assise ou slogan… ni de précision sur le domaine de l’entreprise !
Arborescence Arborescence existante • •
Accueil Notre métier : E-Strategie, E-Design, E-Business, E-Reference, E-Hebergement
• •
Références Informations : Coordonnées, Contact, Infos légales
Arborescence proposée
R
etour accueil : Le retour à la page d’accueil se fait par le clique sur le logo de Impact Web. Il n’existe plus de bouton propre au retour à la page principale. On évite de surcharger la barre de navigation.
«
Nos services » : Met en avant le savoir-faire de l’entreprise tout en prenant en compte le client car un service est toujours pour quelqu’un : le client. On entretient ainsi la relation client. Les sous rubriques restent inchangées.
17
Maquette IW.com «
Des résultats » : Produit du client et de l’entreprise. Gage de qualité et de réussite pour les futurs prospects.
«
Nous écrire » : Implique l’action du client pour contacter Impact Web. Cette rubrique contient les coordonnées et le formulaire d’envoi de message sur la même page.
«
Espace Client » : Permet au client de suivre son projet. Cette zone est sécurisée et nécessite une identification.
E
n barre secondaire on retrouve les mentions légales, date d’édition, et tous les autres liens institutionnels habituels.
Recherches
M
axime et moi avons réalisé deux maquettes chacun. Les templates présentés ont été revus une première fois après un point avec M. SEVRAIN.
J
’ai choisi de m’orienter sur deux versions différentes en fonction de la mode ou non, c’est-à-dire une version qui est plus intemporelle et classique alors que l’autre et plus au gout du jour.
Version épurée (HTML + AS3)
D
eux teintes de couleurs principales : rouge et grise. La particularité réside dans la barre de navigations des références : la zone de l’image survolée s’agrandit. Les autres images sont mangées par l’image survolée.
I
ci, l’univers est plus sobre et posé. Je joue sur la simplicité et l’espace pour mettre en avant le contenu. Une simple courbe vient séparer intuitivement le menu du contenu.
Version dynamique (full flash : AS3)
M P
étaphore des intercalaires mobiles… Chaque couleur correspond à une rubrique et le passage de l’une à l’autre se fait par survol.
our la rubrique Résultats, je propose un modèle un peu plus «tape à l’oeil» avec effet similaire à un coverFlow.
18
Version épurée
Version dynamique
19
Maquette IW.com Mise au point
A
prés discussions et quelques modifications sur nos templates respectifs, nous avons fait une mise au point pour en tirer le meilleur de nos concepts et les plus adaptés au projet.
B
ien que l’absence de couleurs tend vers une ambiance trop sombre et triste, le template proposé par maxime est intéressant. Les différents bandeaux sont originaux notament le fait que l’on puisse voir sur n’importe quelle page les références de l’agence. Le bandeau de référence défile en fonction de la position de la souris sur l’écran. Au survol, on affiche le nom du client ainsi que le type de produit.
Template retenu de Maxime
E
n ce qui me concerne, c’est la version épurée qui a le plus plu et plus particulièrement le bandeau pour ses couleurs et ses formes ainsi que la trace de séparation entre la zone du menu et celle du contenu.
M
. SEVRAIN m’a alors confié la tâche de faire une synthèse des deux templates retenus. J’ai alors réalisé 5 nouveaux templates (voir ci-contre).
Conclusion
P
ar soucis de temps, nous n’avons pas pu terminer ce projet. En effet, ayant commencé à réaliser ces templates le premier jour de stage et M. SEVRAIN nous ayant donné de nouveaux projets tout de suite dans la foulée, le projet impact-web.com n’a pas évoluer pendant un temps. La mise au point c’est fait plus tard dans le stage mais j’ai juste eu le temps de faire les cinq maquettes présentées ci-contre.
J
20
e suis un peu déçu de ne pas avoir pu continuer ce projet car il me semble très intéressant avec un enjeu considérable... Cependant cela m’a aussi permis de me rendre compte que dans le milieu professionnel, un projet peut s’arrêter tout aussi vite qu’un autre peut arriver !
Différentes recherches graphiques à partir des propositions de Maxime et moi-même
21
Site (ADS).com Présentation du projet
A
frique-du-sud-autrement.com (http://www.afrique-du-sud-autrement.com) est un site internet proposant des safaris différents où le client peut choisir les lieux à découvrir à la carte. Bien entendu, des circuits « tout faits » sont aussi proposés à l’internaute !
L
e maquettage ainsi que l’intégration du site a été fait par d’autres collaborateurs. Cependant, il m’a été demandé de m’occuper de la rubrique « Des sites enchanteurs », en offrant à l’utilisateur une carte interactive présentant plusieurs galeries photographiques des lieux traversés durant les safaris.
Tâches • • • • • •
Réalisation d’un module dynamique et interactif Mise en avant de plusieurs points cliquables sur une carte Réalisation d’une galerie photos adaptable et automatique Possibilité d’ajouter ou de modifier le contenu des galeries Gestion de la langue : français et anglais Chaque photographie doit mentionner l’auteur et la source
Phase 1 : Conception
P
our réaliser ce projet, j’ai souhaité travailler en ActionScript 3 pour la majorité du travail, gage de souplesse d’interactivité et de dynamisme. Afin d’assurer la modularité et l’évolution du produit, j’ai utilisé le système de fichier XML.
L
a structure du projet se compose d’un premier SWF faisant office de chargeur du SWF principal pour la partie technique, et d’introduction pour l’internaute. En effet, ce SWF présente le continent Africain et plus particulièrement l’Afrique-du-Sud. Une animation présente la carte d’identité du pays ainsi que son drapeau. Lorsque le chargement est terminé, on invite l’internaute à explorer le pays pour en apprendre davantage.
O
n entre ainsi dans le deuxième SWF. Celui-ci fait appel à un fichier XML contenant toutes les informations de la carte interactive : coordonnées de chaque point, titre, miniature, etc... Chaque point est une instance d’une même classe contenant la définition d’une zone cliquable (point).
22
A
u clique sur l’un des sites touristiques, on appelle une autre classe qui va instancier une galerie. A l’aide d’un ficher XML propre au site touristique cliqué, on va pouvoir définir le nombre de photographies, le chemin vers les miniatures et les photos, les descriptions, etc...
E
nfin, ce module est administrable via une page PHP. Le client peut ainsi modifier et traiter les fichiers XML et les photographies téléchargées.
Schéma structurel de développement
23
Site (ADS).com Phase 2 : Graphisme
L
es templates réalisés se divisent donc en trois parties : l’introduction, la carte et la galerie. Les templates présentés ici sont les finaux mais n’ont que très peu été modifiés au cours de l’évolution du projet.
L’introduction
A
la demande du client, nous trouvons dans l’introduction plusieurs informations sur l’Afrique-du-Sud permettant de patienter pendant le chargement de l’application. Une fois terminé, une invitation accompagnée d’une flèche invite l’internaute à cliquer pour commencer le voyage photographique.
La carte
D
onnant de multiples informations par son code couleur et ses annotations, la carte complémente les informations de l’introduction. Par ailleurs, elle met en scène les 13 sites touristiques proposant chacun une galerie photos. Au survol, une miniature s’affiche et donne un avant-gout de ce que l’utilisateur va voir.
La galerie
A
24
la manière d’une lightBox, la galerie s’affiche par-dessus la carte. Classiquement, deux parties composent la galerie : l’image et les minatures. Pour chaque photographie, on trouve un titre et une description (français et anglais) avec l’auteur et la source.
Phase 3 : Intégration Le Front-Office
C
omme vu dans la partie conception, la programmation du site s’est fait en actionScript 3 avec utilisation de classes et de XML.
P
our l’intégration du SWF principal dans la page php, j’ai choisi d’utiliser le script Javascript SWFObject. Ce script à la particularité de simplifier l’intégration tout en gardant une adaptativité et adaptabilité sur la grande majorité des navigateurs.
L
a gestion et la selection de la langue se font sur la page PHP du site. Au chargement de l’application SWF, à l’aide d’une flashVar, l’application flash récupère et traite les informations en conséquence.
L
a classe BoutonLieu.as, correspondant à la création des 13 boutons des sites, instancie un movieClip de la bibliothèque associé à cette classe. Au survol de cette animation, s’affichent une miniature et un texte. La source de la miniature ainsi que le texte, préalablement extraits d’un xml (version française ou anglaise suivant la langue), sont envoyés en paramètre au constructeur de cette classe.
S
ur un schéma similaire, la classe Gallerie.as, appelée au clic sur un des boutons de site touristique, instancie un movieClip contenant une galerie de photographies. A partir d’un xml (différent suivant la langue) se trouvant dans le dossier du site touristique, la classe va charger toutes les miniatures ainsi que la première image accompagnée de ces informations (titre (français ou anglais), descriptions, etc...). Le contrôle de la galerie se fait via le clique sur les miniatures ou à l’aide des flèches suivant / précédent.
Le Back-Office
L
a gestion de la galerie photos est la seule partie administrative du site afrique-du-su-autrement.com. De ce fait, je n’ai pas eu besoin de me calquer sur un CMS existant mais bel et bien de le créer.
A
fin de faciliter la création de l’administration de la galerie, j’ai pu m’aider du travail déjà effectué par l’agence Impact Web pour la gestion de la galerie photo pour le site de luc-siegel.fr. Ainsi, j’avais en ma possession une trame de départ pour mon travail.
25
Site (ADS).com
Page d’accueil de l’administration
26
Gestion des photographies
P
our la sécurité de la partie administrative du site, j’ai utilisé un .htaccess permettant ainsi de verrouiller l’accès à la page d’administration par un identifiant et un mot de passe. Pour éviter les contournements du .htaccess, j’ai placé dans l’ensemble des sous-dossiers un simple index.htm faisant une redirection sur la page d’accueil du site. Ainsi, le site a une sécurité basique permettant de rejetter la majorité des intrusions.
La page principale
E
lle liste les 13 sites touristiques. Pour chacun d’eux, j’ai repris la miniature du site en plus de son nom, afin que l’utilisateur puisse aisément repérer le site qu’il veut modifier.
La galerie du site
A
prés avoir sélectionné le site à modifier, apparait un listing de toutes les photographies présentes dans cette galerie dans l’ordre d’apparition sur le site internet.
A
partir de cette page, l’utilisateur va pouvoir ajouter une photographie, modifier l’ordre d’apparition des photos avec les flèches de la colonne position (ce qui implique un changement cran par cran), modifier les informations de chaque photos ou encore en supprimer.
L
ors de l’ajout d’une photographie, l’utilisateur va pouvoir télécharger une image en respectant uniquement la condition qu’elle soit inférieure à 4Mo (taille par défaut de limite de téléchargement sur le serveur). Le script que j’ai mis en place va formater le nom du fichier pour supprimer les caractères spéciaux, redimensionner et placer le fichier dans le dossier correspondant à la galerie du site touristique et créer une miniature associée à la photos. Les redimensionnements de l’image et de la miniature sont optimisés pour occuper l’espace maximum qui leur est alloué. La modification d’une photographie
L
a modification d’une image permet uniquement de modifier les informations liées à la photographie. L’utilisateur ne peut donc pas changer l’image téléchargée, il ne peut que la visionner en taille réelle (rapport 1:1);
L
a fonctionnalité supplémentaire de cette page est la possibilité de placer l’image à n’importe quelle position de la galerie du site touristique dans lequel on se trouve (cela évite en cas de grand nombre de photos de devoir faire plusieurs fois la manipulation de «cran par cran»).
27
Site (ADS).com La modification de la miniature
L
’utilisateur a la possibilité de modifier le nom et la miniature qui apparaissent sur la carte lors du survol d’un site touristique. Le programme utilise le même principe que pour une photographie de la galerie. Communication et modification pour la partie flash
E
n réalité les modifications qui sont effectuées dans la partie administrative se font dans une base de données. Ainsi, on gère plus facilement les photographies et leurs informations.
D
e ce fait, à la fin de chaque modification un script est exécuté réalisant la réécriture des fichiers xml du site touristique (ou de la carte dans le cas de la modification d’une miniature de site).
A
insi, l’utilisateur peut faire des modifications qui sont répercutées instantanément sur le site de afrique-du-sud-autrement.com, en même temps que les internautes naviguent. Au prochain chargement du xml, ils auront les nouvelles données.
Conclusion
C
e premier projet plus conséquent, a été pour moi une bonne expérience mêlant complexité et nouvelles notions apprises.
L
a partie du Front Office en flash ne m’a pas réellement posé de problème car le langage actionScript 3 est familier à mon égard. Le fait d’avoir, durant cette année de Licence, travaillé à plusieurs reprises sur ce langage a été un plus pour ce projet.
C
ependant la partie la plus longue à réaliser fut le back-office car le fait d’avoir un code similaire à ce que je souhaitais faire m’a d’une part grandement aidé, mais d’autre part m’a aussi obligé de comprendre et de réinterpreter une logique qui n’était pas la mienne. Par ailleurs, je n’avais jamais réalisé de zone d’administration de galeries photographiques.
U
ne réunion avec prise en main à distance (Still-Johannesbourg) a été faite avec le client pour sa formation à l’utilisation de la galerie. Des problèmes sont survenus lors du téléchargement d’images à partir du Mac du client mais cela a été résolu dans les quelques jours suivants.
28
Modification d’une image
29
Modification d’une miniature
Maquette Europodium Présentation du projet
E
uropodium est une entreprise située à Greswiller, situé à côté de Still. Cette entreprise est spécialisée dans le matériel pour spectacle comme les scènes et les podiums. De renommée internationale, elle a des petits clients mais aussi d’importants projets comme « l’Opéra Céleste » au stade de France.
I
mpact Web s’est occupé de leur site depuis que Europodium se trouve sur la toile. De ce fait, le site http://www.europodium.com a subi plusieurs refontes. En 2008, l’entreprise a décidé de faire de la vente en ligne. Impact Web a alors revu la charte graphique du site existant à cette période pour réaliser http:// www.europodiumshop.com mais le site principal europodium.com n’a pas évolué depuis ce jour.
L
’objectif est de réaliser un site vitrine mettant en situation les produits, tout en offrant des informations techniques et la possibilité d’achats via le site de vente en ligne. Je dois donc mettre en valeur les articles de Europodium avec une galerie photographiques (entre autres) pour complémenter les informations de europodiumshop.com.
Tâches • Réalisation d’une maquette pour le site de europodium.com en respectant la charte déjà en place.
30
europodium.com avant modifications
europodiumshop.com actuellement
Rubrique « produits »
L
’arborescence du nouveau projet tournant uniquement autour des produits de europodium, j’ai tout de suite commencé à réaliser mes premières maquettes non pas sur l’accueil mais sur une page type de produit.
Première maquette
S
uite à la première maquette, Monsieur Sevrain et moi-même avons constaté que l’ambiance sobre et professionnelle est bien adaptée par rapport à l’esprit de l’entreprise mais qu’il manquait le côté festif du spectacle.
A
vec ces nouvelles données, j’ai refait de nouvelles propositions en me focalisant davantage sur un aspect rendant le template plus original. J’ai principalement porté mes recherches sur le sous menu qui n’a pas encore, à ce stade, trouvé sa place.
31
Maquette Europodium
Evolution 1
Evolution 2
32
Evolution 3
Evolution 1
P
our égailler davantage la page, j’ai dans un premier temps joué sur les nuances de bleu dans le bandeau contenant le logo de l’entreprise (Evolution 1). Par ailleurs, l’ajout de la bande jaune pour le titre du produit permet de faire un rappel au menu principal tout en ajoutant du dynamisme.
J
’ai essayé d’ajouter des images en filigrane dans la présentation des gammes en sous-rubrique mais cela n’est pas encore ce qu’il faut car on perd en lisibilité des produits.
Evolution 2
D
ans cette nouvelle version, j’y ai ajouté des courbes dans le bandeau pour créer une dynamique supplémentaire. De plus, pour éviter les problèmes de lisibilité, j’ai réduit les images de présentation des gammes pour éviter le filigrane. Cette dernière modification remet en cause l’utilisation des images car dans ce cas elles ne sont plus du tout visibles.
Evolution 3
P
our donner plus d’air à la page mais asseoir davantage les gammes, j’ai marqué chacune d’elle dans un bloc bien visible et plus grand avec l’image du produit.
U
n problème d’équilibrage réside encore dans certaine version car les sousrubriques semblent prendre la place de la barre principale de navigation...
Evolution 4
C
ette évolution est la dernière pour la partie produit. Nous avons réussi ici à résoudre l’équilibrage de la navigation en grossissant un peu le menu principal et en supprimant les nombreuses répétitions des noms des gammes dans les sous rubriques. Ils s’y trouvent maintenant une seule fois en haut du module de gamme. En dessous, ne sont écrits uniquement les différents modèles de la gamme.
L
es coins supérieurs droits des zones centrales de contenu ont été arondis de sorte a être mieux intégrés par rapport à la navigation. La deuxième zone de contenu avec les spécifications techniques a aussi été rajoutée pour complémenter les informations fournies.
33
Maquette Europodium
34
Evolution 4 : maquette retenue pour la rubrique produit
N
otons l’ajout de la phrase d’assise dans le bandeau qui donne des informations supplémentaires à l’internaute sur le domaine d’activité de l’entreprise. Les drapeaux pour le passage d’une langue à l’autre ont aussi été ajoutés dans le bandeau.
Page d’accueil
A
partir de la maquette de la rubrique « produit » ci-contre, j’ai travaillé sur la page d’accueil. Dans un premier temps, j’ai pris le parti de faire une page d’accueil similaire à la maquette « produit » : sobre et professionnelle.
P
our plus d’originalité et pour retrouver davantage le coté festif du spectacle, M. SEVRAIN m’a demandé de continuer mes recherches dans cette optique. J’ai ainsi réalisé trois nouvelles maquettes plus explosives de couleurs.
35
Maquette Europodium
Maquette potentiellement retenue pour la page d’accueil
E
tant trop nombreux et agressifs, nous avons décidé de réduire les effets pour avoir simplement une petite touche de couleurs et d’originalité sans entrer dans l’extravagance.
P
lus simple, mais présentant plus d’éléments : le matériel du spéctacle avec le morceau de structure, le spectacle «plein les yeux» avec les deux photos des deux plus gros projets de europodium et enfin, la petite touche d’originalité avec le jeu sur la typographie.
P
ar ailleurs, je fais un clin d’oeil à la construction de la page produit avec les différentes rubriques reprises dans les mêmes blocs.
36
L
ors de ma dernière semaine de stage à Impact Web, je me suis repenché sur cette page d’accueil. Vous pouvez voir le résultat de mes recherches en annexe page 50.
Conclusion
J
’aurais du participer à la réalisation de ce projet dans son intégralité. Malheureusement, avec les autres projets en cours, je n’ai pas eu le temps de m’y atteler durant la période de mon stage.
L
’analyse et la réflexion ont été portées sur plus ou moins quatre cinq journées quasiment complètes (Au moment où j’écris ces lignes, je n’ai pas terminé d’y travailler !).
J
’ai été sceptique sur le temps passé sur cette maquette à revoir et à modifier certains détails qui à mes yeux n’avaient pas lieu d’être à cette étape...
L
a philosophie de Impact Web à ce sujet est de réaliser plusieurs recherches et maquettes mais de n’en proposer qu’une seule au client ! Pourquoi cela ? Pourquoi ne pas lui proposer deux ou trois des maquettes réalisées ?
A
ce que j’ai pu constater pendant mon stage, le client ne modifie que très peu la maquette qui lui est proposée. En généralité, il ne sait pas réellement ce qu’il veut mais il sait surtout ce qu’il ne veut pas, d’où la solution de Impact Web, lui proposer qu’une version. Ainsi, il est moins perdu dans des choix fastidieux et valide ou non les éléments de cette maquette. Statistiquement, l’agence a majoritairement visé juste d’après les attentes du client.
J
’en ai conclu qu’il est parfois plus judicieux de passer un peu plus de temps sur une maquette pour gagner du temps par après.
37
Site Spindler.tm.fr Présentation du projet
L
es marqueteries Spindler sont mondialement connues. Elles font l’objet d’expositions à New York et en Californie. Si vous rendez au musée d’Art moderne de Strasbourg, vous pourrez également admirer quelques-unes des plus belles pièces.
S
itué à St Léonard, la marqueterie Spindler a fait confiance à Impact Web depuis qu’elle a décidé d’être sur Internet. Le site spindler.tm.fr était un site avant-gardiste lors de sa mise en ligne. Aujourd’hui, il ne l’est plus vraiment et Jean-Charles Spindler souhaite le refaire. La tâche m’a donc été confiée pour concevoir sa nouvelle image.
Tâches • • •
38
Réalisation d’une maquette Mise en place de galeries d’oeuvres Gestion des galeries via une page d’administration
Site avant refonte
Recherche
P
our la création de l’aspect graphique du site, Maxime et moi avons réalisé plusieurs templates. Nous avons ainsi procédé de la même manière que pour le projet du site Impact-Web. Tout d’abord, des propositions personnelles, puis une synthèse avec les meilleures idées.
Proposition 1
L
a marqueterie d’Art étant une activité noble et à caractère luxueux, j’ai souhaité réaliser quelque chose de sobre et aéré.
J
ouant sur les espaces et sur le contenu, cette disposition est relativement bien équilibrée et réagit correctement face aux différentes résolutions possibles d’écran de l’utilisateur. On peut cependant lui reprocher un manque de couleurs.
Proposition 2
P
lus colorée et originale de part sa disposition alignée à gauche, la proposition 2 que j’ai faite reste dans la même ambiance calme et reposante.
L
’équilibrage de ce template n’est pas correct car sur des écrans à résolution plus grande, le contenu est écrasé sur la partie de gauche. De plus, l’intégration d’une galerie ne se fait pas correctement dans cette disposition.
Mise au point
L
ors de la première synthèse avec M. SEVRAIN, nous avons principalement orienté nos recherches suivantes sur mes deux travaux. Les propositions de Maxime étaient interressantes mais semblerait-il cette fois-ci qu’elles l’étaient moins que les miennes...
39
Site Spindler.tm.fr Maquette
J
’ai construit la maquette en reprenant le bleu de ma proposition 2 sur le modèle de la proposition 1. Afin qu’elle soit bien équilibrée, j’ai revu les traits de fuite encadrant le contenu.
Maquette proposée au client
A
vant de finaliser cette maquette M. SEVRAIN, Maxime et moi avons passé pas beaucoup de temps à réfléchir à une nouvelle arborescence mettant davantage en valeur les oeuvres et les produits. Vous pouvez retrouver le résultat de ce travail en annexe du rapport en page 51.
L
e site étant principalement un site vitrine qui présente les oeuvres de la marqueterie, la maquette proposée au client doit présenter une galerie type. Pour ce faire, maxime et moi y avions travaillé individuellement lors de nos premières recherches.
40
M
axime avait alors proposé un carrousel en flash pour présenter les tableaux et moi une simple disposition des miniatures les unes à coté des autres. Dans les deux cas, au clique sur l’une des miniatures des tableaux, on ouvre une lightBox présentant la marqueterie en grande taille.
Galerie «carroussel » proposé par Maxime
Galerie «classique» que j’ai proposé
A
près un moment de délibération et de confrontation d’idées, M. SEVRAIN a pris la décision de mettre à disposition de l’internaute le choix entre les deux affichages de la galerie. Ainsi, par défaut on arriverait sur une présentation plus dynamique et tape à l’oeil avec le carrousel. On pourrait passer de l’une à l’autre via un bouton.
Retour du Client
A
près quelques jours de réflexion pour le client, celui-ci nous a livré ses impressions. Il a bien apprécié le graphisme et l’ambiance dans sa globalité et l’arborescence est peut être à revoir pour certains détails mais bonne dans l’ensemble.
C
oncernant la galerie d’images, il n’a pas été vraiment séduit par le carrousel de Maxime ni part le fait de pouvoir passer de d’un affichage à l’autre. Il a donc préféré avoir uniquement l’affiche «classique» comme je le proposais.
P
ar ailleurs, le client a demandé à avoir une loupe dans la galerie pour voir en détail les oeuvres à partir des grandes images. Il a été aussi précisé que les informations de l’image ne doivent pas figurer sur cette dernière de sorte à ne pas dénaturer l’oeuvre.
41
Site Spindler.tm.fr Intégration de la galerie
L
es détails de la maquette n’étant pas entièrement figés avec le client, je me suis attelé à l’intégration de la galerie car nous avions bien cadré ce que le client souhaitait pour celle-ci.
E
tant donné que j’avais déjà conçu la galerie de afrique-du-sud-autrement. com précédemment et que j’avais déjà réalisé le back-office, j’ai réutilisé mon travail, principalement pour l’administration de la galerie.
Conception de la galerie
N
otons que le site est trilingue et que la galerie doit gérer cela parfaitement notamment le passage des dimensions des oeuvres en système impérial lorsque le site est en anglais.
L
a galerie est en flash afin de réaliser de petits effets graphiques et de traiter plus facilement les centrages en fonction des dimensions des miniatures. En effet, chaque oeuvre ne devant pas être dénaturée, il faut que les miniatures se placent l’une à côté des autres à intervalle régulier tout en justifiant la ligne pour que le module soit plus agréable à l’oeil. Les intervalles d’une ligne à l’autre sont donc différents.
N
ous avons vu précédemment que cette galerie «classique» ouvre l’image cliquée en plein écran. Pour ce faire, j’ai utilisé une lightBox nommée shadowBox qui offre d’énormes possibilités de paramétrages. La shadowBox permet d’y intégrer facilement un élément flash. Je souhaitais donc au départ, insérer un flash qui allait chercher la version grande taille de l’image cliquée, ainsi que les informations liées à cette oeuvre.
L
42
ors du redimensionnement de la fenêtre, la shadowBox réduit homothétiquement son contenu ce qui est une bonne chose pour garder l’image de l’oeuvre en pleine page. Par ailleurs cela réduirait aussi les informations textuelles et la navigation. De plus, toujours dans un souci de ne pas dénaturer l’oeuvre, il m’a été interdit de placer quelconque élément sur l’image. Le contenu entièrement flash n’était donc pas adapté.
J
’ai fait des recherches et des comparaisons pour arriver à la conclusion qu’il faut insérer dans la shadowBox un contenu html chargeant un flash (avec des dimensions en pourcentage pour l’adaptation en pleine page). De ce fait, deux parties composent la shadowBox : une grande zone avec le flash (avec un systeme de loupe) cherchant l’image de l’oeuvre demandée et un bandeau en html, contenant la description de l’oeuvre et un panneau de controle pour passer d’une image à l’autre sans devoir fermer la shadowBox à chaque fois.
P
our pouvoir modifier aisément la galerie via le back-office, j’utilise du xml pour transmettre des informations au flash ainsi qu’une base de données.
Fonctionnement de la galerie
Conclusion
C
e projet compose la deuxième grande partie de mon stage. Bien que j’ai pu réaliser l’ensemble de la conception du site et des fonctionnalités, je reste quelque peu sur ma faim car j’aurais souhaité mener le projet à terme (reste principalement l’intégration HTML et la gestion des actualités).
L
e projet m’a plu du fait des petits challenges de la réalisation et de sa noblesse. Bien que j’avais la majorité du code pour l’administration de la galerie, l’adaptation de afrique-du-sud-autrement.com au site spindler.tm.fr m’a tout de même demandé une bonne journée !
43
Conclusion
44
Conclusion L
es huits semaines de stage dans les locaux de Impact Web se sont très biens déroulées et les projets se sont rapidement enchainés. Il est certain que j’ai eu matière à travailler ce que j’ai grandement apprécié.
P
ar rapport à mes objectifs personnels, je pense avoir mis en application certaines de mes compétences aussi bien dans le domaine du web que du design.
E
n effet, j’ai pu toucher aux différentes facettes d’un Web Agency : maintenance et modification de site avec Chroma-france et Alsavert, refonte graphique de site internet avec Impact Web et Europodium, création d’un nouveau site avec Juki (projet commencé les deux derniers jours de stage) et programmation d’application flash avec Spindler et Afrique-du-sud. Finalement, je n’ai juste pas eu l’occasion de faire de l’intégration HTML/CSS ni à travailler sur des réalisations presse (faute de projets).
P
ar ailleurs, je n’ai pas eu l’opportunité de réaliser un projet dans son intégralité. Je retiens tout de même que lors de travail en équipe, l’utilisation des compétences de chacun permet aussi d’aboutir à un résultat tout aussi satisfaisant voir meilleur qu’avec une seule personne sur le projet.
D
e par le fait que je n’ai pas suivi de projet dans son intégralité, je n’ai pas eu de réelle relation avec la clientèle, hormis la formation à l’utilisation de la galerie avec M. SCHOEFFEL pour afrique-du-sud-autrement.com qui a symbolisé à mes yeux l’aboutissement de mon travail.
E
nfin, je pense que ce stage a été bénéfique autant pour l’entreprise que pour moi puisque nous avons quasiment convenu de prolonger l’expérience au mois de juillet en Contrat à Durée Déterminé.
Remerciements
J
e souhaite remercier tout particulièrement M. SEVRAIN, mon responsable de stage et dirigeant de Impact Web pour le temps qu’il m’a accordé et l’opportunité qu’il m’a donnée de réaliser mon stage dans ses locaux.
J
e remercie aussi l’ensemble de mes collègues que j’ai côtoyés pendant ces huit semaines ainsi que l’ensemble du corps enseignant de la Licence 3 SLIC de l’UFR STGI de Montbéliard pour cette année instructive.
45
Annexes
46
Table des annexes Secteurs d’ActivitÊs....................................................................................48 Organigrammes...........................................................................................49 Maquettes Europodium...............................................................................50 Arborescence Spindler...............................................................................51
47
Secteurs d’Activités
1/1
10/01
AdmOrgACT.doc 21/06/2008
48
Organigrammes Administratif Organisation OGN Ver 1.20 Redacteur :Sv
Organigrammes
doc :AdmOrgOGN.doc modcation :06/03/2009 création :14/04/2008
page : 1/1
1) Objectif du document :
Ce document a pour objectif de présenter les organigrammes fonctionnnel et opérationnel au sein de la Société Impact Web
2) Organigramme Fonctionnel:
3) Organigramme Opérationnel:
X = Opérationnel x = Interventions M=Management PRESTATIONS Informatique Personne
Fonction
Marcel SEVRAIN
Dirigeant
Sébastien BIET
APP.Master Dévelop.inf
David HEITZ
APP. Bac Pro MRIM
Elodie KAEUFFER
Webdesigner
Patrick LAGROST
Développe ur Analyste
IM PACT WEB
Communication
Développement
Exploitation
Hardware
Software
Presse
Sites Web
Référencement
Applicatifs Web
Applicatifs java
Serveur web
Réseau local
MX
MX
M
M
MX
M
M
MX
MX
X X
X X
X
x
X
x
X
X
X
x
X
X
X
49
Maquettes Europodium
L
es templates présentés ici sont ceux réalisés durant les derniers jours de mon stage à Impact-Web.
N
ous avons quasiment statué sur le modèle ci-contre avec le jeu sur les cercles illustrant l’accroche de Europodium.
L
a maquette sera normalement présentée au client et réalisée, sous réserve de validation, en juillet 2009.
50
Arborescence Spindler Créations (nos collections, nos oeuvres, nos réalisations, nos créations,...) • alsatiques • contemporains • disponibles en gallerie (tableaux doublons) Décoration d'intérieur Accessoires (boutique, souvenir, produits dérivés, etc...) Visite de la galerie • galerie (lien vers « disponible en galerie ») • le site historique St Léonard • atelier Qui sommes nous... • presse book (il parle de nous, récompenses, etc...) • historique • entreprise du patrimoine vivant Actualité • • • •
news calendrier en cours de production livre d'or ?
• • • • • • •
adresse google map coordonnées formulaire horaires demande d'expertise newsletter / RSS
Contact
51