Département UFR Sciences et Techniques Webmaster pour la société Eco-Action-Plus SARL Eco-Action-Plus Création du site web vitrine et produits communicants annexes Pen Ar Valy 29200 Milizac Maître de stage : LUCAS Bastien du 25/01/11 au 30/05/11 FAIDY Igor DEUST T-MIC 1 ère année 2010-2011
Université Bretagne Ouest Département Sciences et Techniques FAIDY Igor 1 ère année DEUST Techniciens des Médias Interactifs et Communicants Webmaster pour la Société à Responsabilité Limitée Eco-Action-Plus Collecte & recyclage de déchets Création du site web vitrine et produits communicants annexes du 25/01/11 au 30/05/11 Maître de stage : LUCAS Bastien
Ce rapport présente l ensemble de mon travail réalisé lors de mon stage pour l entreprise Eco-Action-Plus du 25 janvier au 20 avril 2011. Cette société de collecte et de recyclage de déchets avait besoin d un site web vitrine pour pénétrer le marché efficacement. La création de ce site internet a consitué ma mission. Il est construit dans une identité visuelle propre à la société. Son administration est désservie par un système de gestion de contenu, permettant le dévelloppement du site parrallèlement à son enrichissement par le chef d entreprise. Il présente clairement et met en valeur les prestations et services de l entreprise. Les difficultés rencontrées et solutionées sont mises en avant dans ce document. Cette expérience professionnelle a enrichi mes compétences techniques et m a confonté aux exigences du travail de webmaster en entreprise. Je remercie Bastien Lucas, pour m avoir permis de faire ce stage au sein d Eco-Action-Plus, pour la confiance qu il m a témoignée en me premettant de travailler sur un outil important pour l entreprise, la diponibilité dont il a fait preuve pour échanger régulièrement sur le travail, pour le temps qu il m a accordé dans la réalisation du site et enfin pour la convivialité dans les rapports que nous avons entretenus. Merci également à Thomas Arzel et Lucie Le Gall qui ont su donner des avis pertinents sur ce projet.
SOMMAIRE INTRODUCTION 7 L ENTREPRISE 9 Son secteur d activité 10 Les partenaires 10 Une société de service 11 Les prestations 11 La mission pour l environnement 12 Les engagements 12 LES travaux éffectués 13 Enjeux et objectifs 13 Analyse de l existant 13 L identité visuelle 13 Les moyens techniques 14 Le site internet 15 Charte graphique 16 Réalisation et publication 17 Évolutions et version finale 20 Les missions annexes 21 BILAN 23 Les objectis atteints, les apports pour la société 23 Les difficultés rencontrées et les points à améliorer 23 Les acquis 23 CONCLUSION 25 Les apports professionnels 25 Les perspectives pour la suite du stage 25 Les apports personnels 25 ANNEXES 27 Table des annexes 27
Introduction Du 25 janvier 2011 au 30 mai 2011, j effectue un stage dans l entreprise Eco-Action-Plus basé à Brest-Milizac. Une grande partie du travail est réalisée en présentiel. Après un stage dans le domaine de la communication culturelle en octobre 2010, dans lequel j ai réalisé des produits uniquement sur support papier, je souhaitais améliorer mes compétences dans d autre champs d actions, plus en lien avec ma formation. Je voulais établir un état des lieux de mes connaissances dans le domaine du web, développer mes compétences techniques, et enfin, mesurer mes capacités à répondre à la demande d une entreprise. Étant sensibilisé aux questions environnementales, la proposition de la société Eco-Action-Plus correspondait à mes attentes. Cette jeune entreprise propose des services de collecte et recyclage du papier et déchets de bureau auprès des professionnels. Il est nécessaire pour elle de figurer sur internet, pour se faire connaître et développer son activité économique. C est un outil de communication essentiel pour démarcher la clientèle potentielle. Elle avait besoin de créer un site internet vitrine indispensable pour éxister sur la toile : c est la mission qui m a été confiée. Dans un premier temps, il est nécessaire de présenter Eco-Action-Plus, son activité, sa solution spécifique au problème de collecte et de recyclage des déchets. Elle répond auprès des professionnels à un manque particulier dans ce domaine. J ai pris connaissance de son activité, du contexte local dans lequel elle agit, de ses prestations, ses partenaires et ses engagements. Ces éléments sont développés dans la première partie de ce rapport. En deuxième partie sont présentés les travaux réalisés. Après un temps de clarification des missions, en association avec le maître de stage, nous avons défini les enjeux et objectifs. Puis pour répondre à la demande, mon premier travail consiste à analyser l ensemble des produits communicants de l entreprise ainsi que les moyens techniques disponibles. Ensuite, les différentes étapes de création du site, son évolution, son aboutissement, sont détaillées et étudiées. Enfin, un premier bilan, puisque mon stage se poursuit, fait apparaître la plus-value que représente le site pour la société, ainsi que les difficultés rencontrées et les compétences acquises dans cette experience profesionnelle. En conclusion, les perspectives qu offrent la suite du stage et les apports dans ma formation et dans mon projet professionnel sont précisées. 7
l Entreprise Bastien Lucas, à l origine de l association Eco-Action, qui sensibilise les particuliers aux problèmes environnementaux et au tri sélectif, crée en 2010 la Société à Responsabilité Limitée Eco-Action-Plus. Demarrant son activité en 2011, cette entreprise propose, auprès des professionnels, une gamme de services pour la collecte, la destruction et le recyclage des déchets. C est une entreprise jeune qui agit sur l ensemble du département du Finistère et qui s associe avec de nombreux partenaires afin de développer son activité. La société est dirigée par Bastien Lucas, qui a un BTS Commerce Internationnal et un Master en Management. Il emploie Thomas Arzel au poste de reponsable commercial, qui possède une licence en Droit Environnemental. 9
son SECTEUR d activité L activité de collecte et de recyclage s inscrit dans un secteur en plein développement. Eco-Action-Plus apartient à un réseau de partenaires de traitement des déchets. Elle n entre pas en concurence directe avec les grandes enseignes du recyclage et de l environnement. Elle s adresse à un marché de niche : les PME-PMI ne possédant pas de dipositifs de collecte. les partenaires Eco-Action-Plus achemine les déchets vers des centres de recyclage. La société a contractualisé des partenariats avec les recycleurs de différents materiaux : Les Recycleurs Bretons pour le papier Corepile pour les piles et accumulateurs Eco-Tri à Saint Evarzec pour les déchets d équipements électriques et électroniques Recylum pour les lampes Polythec pour les cartouches d encres et toners Situation géographique des principaux partenaires locaux : Les Recycleurs Bretons Centre d enfouissement Eco-Action-Plus Les Recycleurs Bretons Siège Social Ecotri UNE société de SERVICEs Ce qui caractérise Eco-Action-Plus, c est qu elle développe une activité de collecte et de transport des déchets qui vise les entreprises locales. Son travail permet aux professionnels de disposer d outils pour trier leurs déchets. Son activité essentielle consiste à acheminer les déchets collectés chez les clients vers les recycleurs partenaires. La société est déclarée en Préfecture pour l exercice de transport par route de déchets. Les prestations Pour la gestion des papiers et déchets de bureaux de sa clientèle, Eco-Action-Plus propose plusieurs prestations: Désarchivage des locaux (destruction et recyclage) Mise à disposition d éco-box pour l ensemble des déchets de bureaux Collecte ponctuel des déchets papiers, cartons, toners, piles et tubes fluorescents Mise en place d un programme de recyclage avec des enlévements mensuels ou bimensuels Ces services sont proposés à travers plusieurs forfaits: Le forfait papier avec un enlèvement mensuel, bimensuel ou trimestriel dès 55 HT Le forfait multi déchets (collecte et recyclage des cartouches d encres, toners, piles, tubes fluorescents ainsi que déchets d équipements électriques et électroniques) dès 45 HT Le forfait Duo qui comprend ces deux offres dès 70 HT 10 11
la mission pour l environnement Eco-Action-Plus est avant tout une éco-entreprise qui offre une solution à forte valeur ajoutée pour les entreprises désireuses d adopter un comportement responsable. les engagements L entreprise c est engagée dans un processus de développement durable en proposant un service aux clients avec une gestion de «bout en bout» de la fin de vie de leurs déchets. De son côté, l équipe adopte une attitude de responsabilité environnementale : En travaillant avec des partenaires locaux tels que les Recycleurs Bretons En adoptant les principes de notre charte interne d engagement réciproque En ne faisant qu appel à des fournisseurs éco-responsables pour l achat notamment de nos consommables En travaillant localement afin d éviter les longs trajets énergivores en carburant et qui augmentent les émissions de CO2 réglementation Afin de gérer efficacement la fin de vie des déchets dans le strict respect de l environnement, chacun des déchets collectés par Eco Action Plus fait l objet d une réglementation spécifique. Page «Réglementation» du site internet : Les papiers Le déchet papier peut être soumis à différentes législations (déchet banal, déchet d emballage et/ou déchet dangereux s il est souillé). La loi du 15 juillet 1975 relative à l élimination des déchets et à la récupération des matériaux impose «la valorisation des déchets par réemploi, recyclage ou toute autre action visant à obtenir à partir des déchets, des matériaux réutilisables ou de l énergie». Les piles et accumulateurs Les piles salines et alcalines sont des déchets dits banals alors que les piles et accumulateurs contenant du mercure ou encore du cadmium sont assimilés à des déchets dangereux. La directive du 6 septembre 2006 relative aux piles et accumulateurs ainsi qu aux déchets de piles et accumulateurs fixes des objectifs de recyclage et de valorisation ainsi que la restriction sur le marché des piles et accumulateurs contenant du cadmium. Les tubes fluorescents et lampes fluo compactes Seuls les lampes à économie d énergies et celles de type LED font l objet d une valorisation. Un décret du 18 avril 2002 classifie les lampes concernées par cette obligation. Les cartouches d encres et toners Contre toute attente, celles-ci sont considérées comme des déchets banals non dangereux bien qu elles soient fabriquées à partir de dérivés du pétrole. Cependant, la loi du 13 juillet 1992 oblige les entreprises à les valoriser. LES travaux éffectués Enjeux et objectifs Un site internet vitrine pour la société est nécessaire pour pénétrer le marché. Il est essentiel pour promouvoir et faire connaître ses services auprès du grand public et des professionnels. Internet étant un espace de communication investi par toute entreprise, Eco-Action-Plus doit y avoir une présence. L objectif du site est de créer un lien communicant entre les clients potentiels et l entreprise. Il doit également présenter l ensemble des services et prestations de la société. La création du site s accompagne de missions annexes relatives à l e-mailing et d autres moyens de communications. Il est envisagé d accompagner le site vitrine d un espace web dédié aux futurs clients. L ensemble de ces objectifs sont clarifiés et déterminés en colaboration avec le maître de stage. Analyse de l existant La première étape consite à lister l ensemble des produits communicants déjà existant au sein de l entreprise, ainsi que des outils techniques pouvant être utilisés. Il s agit ensuite de les étudier pour les réinvestir au sein de la communication numérique. l identité visuelle Tout d abord j ai mis en lumière l ensemble de ces produits communicants: Le logo annexe 1, page 28 présent sur le véhicule, la carte de viste et les autres supports de communication La carte de visite annexe 2, page 29 Le modèle de papier à lettre annexe 2, page 29 Le dépliant commercial annexe 3 page 30 Les différentes images d illustrations annexe 4, page 31 Ces différents éléments offrent à la société une bride d identité visuelle qui servira de base à l établissement de la charte graphique du site internet. 12 13
les moyens techniques Premièrement, un espace d hébergement est disponible chez l hébergeur OVH, qui delivre également un client mail. La société possède déjà son nom de domaine: www.eco-action-plus.fr. La plateforme Joomla! y est installé dans sa version 1.5.15. Présentation du CMS Joomla! Joomla! est un CMS (Content Management System), c est à dire un Système de Gestion de Contenu. Ce type de logiciel permet la conception et la mise à jour dynamique de site internet. Il possède notament les fonctionnalités suivantes : Plusieurs individus peuvent travailler en même temps sur l élaboration du site internet, par l intermédiaire d un système de gestion de comptes utilisateurs. Il fournit une chaîne de publication (workflow) offrant par exemple la possibilité de mettre en ligne le contenu d un document. Il permet de séparer les opérations de gestion de la forme et du contenu Il offre la possibilité de déterminer une structure pour un contenant en fonction du contenu ( par exemple l utilisation de FAQ, de documents, de blogs...) Les différent utilisateurs peuvent se connecter via un navigateur. D un côté le propriétaire pourra publier des pages et du contenu sur le site, et de l autre l administateur pourra effectuer les opérations liées à la forme. Un compte Administrateur est déjà créé. L installation de Joomla! sur l espace d hébergement détermine l arbosescence des fichiers suivante: RACINE WWW (sous-domaine) acceuil (répertoire joomla) index.html (page d acceuil OVH) (documents relatifs à la page d acceuil OVH) template (aspect du site) images plugins modules... administrator (interface de connection)... eco-action-plus Le site internet La création du site internet demande l acquisition de compétences particulères liées à l utilisation de Joomla!. De nombreux tutoriels, ressources en lignes et forums me servent à l auto-aprentissage de ce système de gestion qui bénéficie d une communauté très active sur la toile. D autres sites me sont éqalement utiles pour approfondir mes compétence techniques dans le développement web. La grande majorité de mon travail est avant tout une mise en application de mes connaissances acquises lors de ma formation en DEUST. Voici une liste non-exaustive de mes principales ressources : www.joomlack.fr.nf forum.joomla.fr www.allhtml.com www.zonecss.fr www.alsacreations.com www.codes-sources.com www.siteduzero.com ressources.mediabox.fr www.gratos.be/webmaster Tutoriel : Créer son template pour Joomla! 1.5 par Ced Administration d un site internet Joomla! par Eric Elzière Les outils utilisés L interface en ligne de Joomla! est le principal outil pour la création du site internet, néanmoins le travail de création graphique et d élaboration du code source effectué en amont est réalisé à l aide des logiciels suivantes : La suite Adobe CS5 (notament Illustrator, Photoshop et Flash) pour la création graphique Codelobster PHP Edition pour le traitement de fichiers html, php, javascript et css FileZilla pour le transfert de fichiers via le protocole ftp Firebug et ColorZilla pour Mozilla Firefox d autres programmes courants tel que Paint, Notepad, WinRAR... 14 15
Charte graphique En premier lieu, des recherches graphiques préliminaires sont effectuées afin de déterminer l apparence esthétique du site internet, en corelation avec l identité visuelle de l entreprise, comme vu précedement annexe 5, page 32. Ensuite l organigramme du site est élaboré conjointement avec le maître de stage. Voici comment l achitecture du site est décidée: Acceuil Nos services - Nos forfaits - Nos offres unitaires - Nos prestations complémentaires - FAQ Notre mission -Nos engagements - Comment sont recyclés vos déchets Notre société - Présentation - Contact - Les entreprises qui nous font confiance - Partenaires et liens Réglementation Par la suite le maquetage/zoning du site est effectué, l organisation spaciale des éléments dans la page est relativement classique : logo header (en-tête) top menu (menu principal) body menu left middle (component) (contenu de la page) footer (pied de page) Une première version esthétique du site est ainsi établie, résultant d une pseudo charte graphique annexe 6, page 33. Réalisation et publication Les éléments graphiques constituant les parties du site sont réalisés un par un, en respectant les dimensions en pixels imposées par la structure globale du maquetage annexe 7, page 34. Écriture du code source L utilisation de Joomla! impose une organisation et un codage particulier des fichiers. La template s organise autour d un fichier php qui détermine la position des éléments dans la page, celui-ci comportera également les menus et contenus textuels qui se répètent sur toute les parties. L aspect visuelle de ceux-ci sont donnés par une feuille de style css. Les fichiers sont organisés dans l arborescence suivante, le répertoire de travail est celui vu en page 16. RÉPERTOIRE DE TRAVAIL eco-action-plus menu left index.php (1) templatedetails.xml (2) index.html (3) favicon.ico (4) template_thumbnail.png (5) images (6) css (7) template.css (8) index.html (3) Le contenu des fichiers et répertoires est détaillé page suivante. 1360px 1000px - 1020px - - 980px - topmenu - 100px - - 860px - - 980px - footer 16 17
(1) Le fichier index.php est celui contenant les informations php relatives à Joomla!, les Première publication informations d en-tête ainsi que les balises 37ĊOPIE conteneurs html annexe 8 et 9, pages 35-36. On note notamment les balises servants à charger les références externes : <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> pour le favicon, voir (4) <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this- >template?>/css/template.css" type="text/css" /> pour charger la/les feuille(s) de style externe(s) <script src="scripts/swfobject_modified.js" type="text/javascript"></script> pour l implémentation des scripts (voir page suivante) (2) Ce fichier est essentiel pour que la template puisse être utilisable par Joomla!. Il donne les informations importantes suivantes annexe 8, page 35 : <install version="1.5" type="template"> <name></name><version></version><creationdate></creationdate><license></license> <description></description> pour les informations de version, de licence, et divers descriptions <files></files> <folder></folder> <filename></filename> liste les fichiers et réperoire contenu dans le dossier du template <positions></positions> indique à Joomla les différentes positions de modules chargés dans la template (voir page suivante) (3) Ce fichier est vide, mais tout les répertoires doivent en contenir un, il est utile pour l indexation afin que Joomla! puisse explorer l arborescence. (4) Ce fichier donne l aspect de l icone associé au site dans le navigateur de l utilisateur. Il s agit ici d une récupération d un détail du logo. Implémentation flash et javascript (5) Ce fichier image donne simplement la miniature de la template lorsque son nom est pointer dans la liste du gestionnaire des templates de Joomla!. (6) Le sous-dossier comportant les images de la template annexe 7, page 34. (7) Ce répertoire comporte les feuilles de style. (8) La feuille de style css pour la template de base. annexe 10, 9, page 41 Dans un premier temps, une redirection automatique est mise en place de la page d index à la racine du site vers le répertoire joomla www.eco-action.plus/acceuil. La version de Joomla! est migrée de la 1.5.15 vers la 1.5.22 (correctifs de failles de sécurité). Le site est placé sous licence Créative Commons BY-NC-ND 2.0 (Paternité - Pas d Utilisation Commerciale - Pas de Modification 2.0 France). Les utilisateurs peuvent partager, distribuer et communiquer sur le site dans les conditions décrites ici: http://creativecommons.org/licenses/by-nc-nd/2.0/fr/. La licence fait l objet d un code légal intégral publié à cette adresse: http://creativecommons.org/licenses/by-nc-nd/2.0/fr/legalcode. Les fichiers sont compressés dans une archive.rar et transféré via Joomla!, pour bénéficier de la validation du système de gestion. Le CMS rejette l intallation de la template si des fichiers sont invalide (les informations d en tête). L utilisation du simple protocole FTP avec FileZilla par exemple ne permet pas cette vérification de la part de Joomla! qui ne détectera tout simplement pas aucune nouvelle template. Les modifications et corrections du code source sont effectués par la suite avec l interface en ligne de Joomla!. Joomla! met à disposition une bibliothèque de modules pouvant être insérer dans les emplacements donnés dans le fichier templatedetails.xml. Ils sont appelés dans le fichier index.php grace à la balise orpheline <jdoc:include/> dans laquelle est préciser le type du document inclu et la position. Ces modules servent notament à l affichage des menus et des articles créés par le chef d entreprise. Un logo animé en flash vient remplasser le logo fixe afin de rendre le site plus vivant. Il est inclus dans un module de bannière disponible dans la bibliothèque Joomla!, ce qui permet d éviter d inclure du code javascript pour son affichage. Le menu déroulant est générer par du code javascript appelé dans le fichier index.php, son aspect est défini séparément dans une deuxième feuille de style annexe 10, page 37. Les sections et catégories sont gérés en parralèle dans l interface Joomla!. 18 19
évolutions et version finale Principales évolutions Il est effectuer de nombreuses modifications du site au cours du stage, il évolue à la fois sur l aspect esthétique et sur l organisation des éléments. En premier lieu, à la demande du maître de stage, les couleurs et fonds sont modifiés afin de mieux correspondre à l identité visuelle de l entreprise annexe 11 page 38. De plus, la taille du site dans sa globalité sera réduit afin d optimiser l affichage sur les écrans de petite taille. L aspect visuelle sera simplifée afin d aller vers plus de sobriété, comme le veut dans sa globalité l identité visuelle de la société. Dans un deuxième temps, le menu de gauche est abandonner au profit d un menu complémentaire en bas de page, pour plus de simplicité annexe 11 page 38. Le pied de page est visuellement fusionner avec le fond afin de tendre vers plus de clarté. Ces améliorations aboutissent à la version finale du site. Il est prêt à recevoir le contenu publié par le chef d entreprise dans son compte Joomla! et est ouvert aux visiteurs à l adresse www.eco-action-plus.fr. Les missions annexes Durant mon stage j ai réalisé également d autres travaux liés à la communication numérique, notament dans le domaine de l e-mailing. L ensemble de ses productions s inscrit dans l identité visuelle globale d Eco-Action-Plus. La plupart des images illustratives présentées précédement sont réapproriées pour construire l image. La difficulté de création du modèle de mail publicitaire était l emploi d un code très pauvre, nécessaire pour maximiser la compatibilité sur les différents clients mails. L interprétation est difficilement controlable chez le destinataire du mail publicitaire annexe 12, page 39. J ai aussi créé les en-tête et signatures mails: SARL Eco-Action-Plus à Brest - Milizac Votre facture Votre devis Collecte & recyclage de vos papiers et déchets de bureaux SARL Eco-Action-Plus à Brest - Milizac Collecte & recyclage de vos papiers et déchets de bureaux SARL Eco-Action-Plus à Brest - Milizac Collecte & recyclage de vos papiers et déchets de bureaux Imprimez ce message que si vous en avez vraiment besoin! blucas@eco-action-plus.fr Bastien LUCAS Gérant 06 38 21 65 59 02 98 40 00 57 Fax: 09 70 06 90 38 Imprimez ce message que si vous en avez vraiment besoin! contact@eco-action-plus.fr Imprimez ce message que si vous en avez vraiment besoin! tarzel@eco-action-plus.fr Thomas ARZEL Responsable commercial 06 74 14 03 77 02 98 40 00 57 Fax: 09 70 06 90 38 Je me suis occupé également de la vectorisation des images pour la communication éffectuée sur les eco-box de la société: 20 21
bilan Un pré-bilan, puisque mon stage se poursuit, fait apparaître la plus-value que représente ce site pour Eco-Action-Plus, les difficultés rencontrées pendant la création du produit ainsi que les compétences acquises. Les objectis atteints, les apports pour la société Un premier bilan peut être établi. Le site de la société est opérationnel et accessible à toutes les entreprises clientes potentielles. Il présente clairement et met en valeur les prestations et services d Eco-Action-Plus. Le responsable de l entreprise a validé le produit fini et autorisé sa publication définitive. Ce site possède des qualités d accessibilité, de clarté et devient pour l entreprise son point d ancrage sur la toile et son outil référent de communication. Les statistiques de Google Analytics indique une hausse des visites de 12% pour le mois d avril en comparaison avec le mois de mars dont 50% de nouveaux visiteurs. Ces visites proviennent à 51% de moteurs de recherche, 40% en accès direct et 9% par des sites référents, notament grâce au travail d indexation et de référencement du chef d entreprise. La valeur du site internet est estimée à 638,35 par bizinformation.com. La publication récente du site ne permet pas d obtenir une évaluation véritablement fiable. Les difficultés rencontrées et les points à améliorer Ce travail est aujourd hui abouti. Les difficultés surtout d ordre méthodologique et de façon moindre, techniques, et les solutions apportées pour les résoudre ont enrichi mes capacités à créer un site web. En effet, la charte graphique n ayant pas au départ été suffisament précisée et détaillée, il a fallu tardivement apporter des modifications d ordre esthétique sur le site. D autre part, le système de gestion de contenu Joomla! a suscité des difficultés dans l écriture du code source, en raison de certaines tâches automatisées par le CMS comme le nettoyage du code. C est en autodidacte, à l aide de ressources en ligne (citées en page 17) que j ai résolu ces difficultés. Les acquis Cette réalisation m a permis d améliorer ma méthode de travail, notamment dans l organisation chronologique des étapes de création d un site. D autre part, ella a permis d optimiser mes compétences techniques. J ai acquis la maîtrise du CMS Joomla!. 23
CONCLUSION Les apports professionnels Pendant ce stage, j ai experimenté les différents aspects du métier de webmaster, l administration, la programmation et le webdesign. La demande de création de site de l entreprise d Eco-Action-Plus m a confronté aux exigences de ce métier. À savoir d une part, être à l écoute du commanditaire pour définir le contenu du site et rendre compatible ce contenu avec les dispositifs techniques adéquats. J ai pu ainsi mesurer mes capacités à répondre à la demande d une entreprise en tenant compte de ses contraintes de productivité et rentabilité. De plus, j ai amélioré ma maîtrise du langage technique informatique en utilisant les outils étudiés en cours de DEUST Technicien des Médias Interactifs et Communicants à l UBO. Les perspectives pour la suite du stage La dernière partie de mon stage sera consacrée d une part à l enrichissement du contenu du site vitrine et d autre part au projet de création d espaces clients dans un sous-domaine du site (leplus.eco-action-plus.fr). Un logiciel de gestion de base de données client à été installé au sein de l entreprise sur un réseau interne. Il servira d appui pour nourir la base de données qui désservira les comptes ouverts par les clients. Les apports personnels Ce stage a confirmé mon orientation professionnelle dans le domaine des télécomunication et tout particulièrement internet. L association du travail de dévelopement web avec les enjeux environnementaux m intéresse fortement. Dans mes éxperiences précédentes, j ai éffectué deux stages ou j ai travaillé sur des supports papiers, en agence de communication et pour une association culturelle. Pour poursuivre ma spécialisation dans la création numérique, je souhaite effectuer un prochain stage en agence de communication multimédia au sein d une équipe. 25
ANNEXES TABLE des annexes 1. Logo 2. Carte de visite et papier à lettre 3. Dépliant 4. Images illustratives 5. Recherches graphiques préliminaires 6. Maquette 7. Éléments constituants 8. Code source 1/3 9. Code source 2/3 10. Code source 3/3 11. Déclinaison des éléments 12. E-mailing 27
LOGO Déclinaison en bleu Encienne version 1 2 carte de visite et papier à lettre 28 29
dépliant 3 4 images illustratives 30 31
recherches graphiques préliminaires Compte Votre espace client Acceuil Actus Notre mission Gallerie photos Contact Compte Votre espace client Acceuil Actus Notre mission Gallerie photos Contact 5 6 maquette 32 33
éléments constituants en-tête et fond menu principal pied de page éléments assemblés menu de gauche espace pour le contenu de la page 7 8 TemplateDetails.xml code source 1/3 <?xml version="1.0" encoding="utf-8"?> <install version="1.5" type="template"> <name>eco-action-plus(2)</name> <version>1.0.0</version> <creationdate>2011</creationdate> <author>igor Faidy</author> <authoremail>contact@if-webbook.net</authoremail> <authorurl>www.if-webbook.net</authorurl> <license>cc BY-NC-ND 3.0</license> <description>template de base pour le site vitrine d Eco-Action-Plus</description> <files> <folder>images</folder> <folder>scripts</folder> <folder>css</folder> <filename>index.php</filename> <filename>templatedetails.xml</filename> <filename>template_thumbnail.png</filename> </files> <positions> <position>user1</position> <position>user2</position> <position>user3</position> <position>footer</position> <position>logo</position> </positions> </install> index.php - en-tête <?php /** * @license CC BY-NC-ND 2.0 * Joomla! is free software. This version may have been modified pursuant * to the GNU General Public License, and as distributed it includes or * is derivative of works licensed under the GNU General Public License or * other free or open source software licenses. */ // no direct access defined( _JEXEC ) or die( Restricted access );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language;?>" lang="<?php echo $this->language;?>" > <head> <jdoc:include type="head" /> <!-- --------- on charge les références externes -------- --> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> <link rel="stylesheet" href="<?php echo $this->baseurl?>/templates/<?php echo $this->template?>/ css/template.css" type="text/css" /> <script src="scripts/swfobject_modified.js" type="text/javascript"></script> <!-- MOOMENU HORIZONTAL--> <link rel="stylesheet" href="templates/<?php echo $this->template?>/css/moomenuh.css" type="text/ css" /> <script type="text/javascript" src="<?php echo $this->baseurl?>/templates/<?php echo $this- >template?>/scripts/moomenuh.js"></script> <!-- FIN MOOMENU HORIZONTAL --> </head> 34 35
code source 2/3 index.php - balises html <body> <div id="container"> <!-- début du header --> <div id="header"> <div id="logo"> <jdoc:include type="modules" name="logo" style="xhtml" /> </div> <div id="compte"></div> </div> <!-- fin du header--> <!--début du topmenu--> <div id="fond_menu"><jdoc:include type="modules" name="user3" style="xhtml" /></div> <!--fin du topmenu--> <!--début du body--> <div id="body"> <!-- on affiche le corps du site --> <div><jdoc:include type="modules" name="menuleft" style="xhtml" /></div> <div id="bodymiddle"> <div id="message"><jdoc:include type="message" /></div> <div id="component"><jdoc:include type="component" style="xhtml" /></div> </div> <div id="footer"> <div id="contactfooter"> <a href="http://www.eco-action-plus.fr/accueil/index.php?option=com_content&vie w=category&id=10&itemid=34">contacter le service commercial</a> - Tél: 02.98.40.00.57 - Fax: 09.70.06.90.38 - <a mailto="contact@eco-action-plus.fr">contact@eco-action-plus.fr</a> </div> <div id="menufooter"> <ul id="boutons"> <li> <a id="recherche" href="index.php?option=com_search&view=search"></a> <li> <a id="contact" href="index.php?option=com_content&view=category&id=10&i temid=34"></a> <li> <a id="client" href="http://www.leplus.eco-action-plus.fr/"></a> </ul> </div> </div> </div> <!--fin du body--> <!--début du footer--> <div id="modfooter"> <small><small><small> <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/interactiveresource" property="dct:title" rel="dct:type"> <a rel="license" href="http://www.eco-action-plus.fr">www.eco-action-plus.fr</a> est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-ncnd/2.0/fr/">licence Creative Commons BY-NC-ND 2.0 France</a>.<br/> 2011 SARL Eco-Action-Plus. Le logo «Les Recycleurs Bretons" est la propriété exclusive de la société <a href="http://recycleurs-bretons.fr">les Recycleurs Bretons</a>.<br/> Les noms des sociétés ou organisations partenaires citées sont la propriété exclusive de celles-ci ou des ayants droits.<br/> Réalisé par <a href="http://if-webbook.net/" title="igor Faidy" target="_blank">igor Faidy</a>. Basé sur une oeuvre à <a xmlns:dct="http://purl.org/dc/terms/" href="http://www.joomlack.fr.nf" rel="dct:source">ced</a>. <a href="http://www.joomla.org/">joomla!</a> est un logiciel libre sous licence <a href="http:// www.gnu.org/licenses/gpl-2.0.html">gnu/gpl</a>. </span> </small></small></small> </div> <!--fin du footer--> </div> </body> <!-- fin du body --> </html> 9 10 template.css (extrait) body { background: none; bgcolor:#99cd55; color: #000; font-family: verdana, sans-serif; font-size: 100%; padding: 0px; text-align: center; a { color:#000; text-decoration:none; font-weight:bold; a:hover { color:#000; text-decoration:underline; font-weight:bold; a:visited { color:#000; text-decoration:none; font-weight:bold; a img { border: none; #container { width: 914px; height: 1013px; background: url(../images/header.png) no-repeat center; padding-left:0px; margin-left:auto; margin-right:auto; margin-top:10px; text-align: center; position: center; #header { height: 191px; #logo { background: url(../images/logo.png) no-repeat center; margin-left:0px; padding-top:0px; height:140px; width:300px; font-size:80%; #compte { background: url(../images/compte.png) no-repeat right; margin-right:0px; margin-top:-109px; margin left:500px; padding-top:0px; padding-right:0px; height:100px; width:300px; #fond_menu { background: url(../images/menu.png) no-repeat center; code source 3/3 moomenuh.css (extrait) #top_menu { width:780px; height:30px; clear:both; display:block; position:relative; z-index:100; list-style : none; margin-left:54px; margin-right:0px; margin-top:0px; margin-bottom:0px; padding:0; text-align: left; vertical-align:middle; align:center; #top_menu li{ margin-top:0px; margin-left:0px; padding-right:0px; height:30px; float:left; position:relative; list-style : none; background : none; vertical-align:middle; text-align:left; line-height:29px; z-index:1000; #top_menu li a { color:#000; text-transform:none; padding-right:20px; padding-left:20px; height:31px; display:block; float : none!important; float : left; position:relative; z-index:98; text-decoration:none; vertical-align:middle; font-weight:normal; font-size:110%; border-left:1px solid #aac6f3; border-right:1px solid #aac6f3; #top_menu li a:hover{ text-decoration:none; color: #fff; font-weight:normal; background: #01632f; border-left:1px solid #000; border-right:1px solid #000; height:31px; #top_menu li ul { display:block; width: 14em; position:absolute; z-index:97; left: -999em; clear:left; margin:0; 36 37
11 12 déclinaison du FOND fond choisie...afin d imaginer ensemble un monde plus responsable...afin d imaginer ensemble un monde plus responsable SARL Eco-Action-Plus à Brest... Afin d imaginer ensemble un monde plus responsable en-tête pour news-letters et couriers promotionnels e-mailing 38 39