Graphisme & Développement PIERRE LECA
PRESENTATION Passionné d infographie, j ai choisi de m orienter vers le DUT Métiers du Multimédia et de l Internet après l obtention en 2011 du baccalauréat STG Mercatique. En effet, ce DUT est le seul qui couvre l ensemble des techniques permettant de développer un projet multimédia, de la conception à la réalisation. Ayant une bonne capacité d adaptation technique et relationnelle, j ai déjà travaillé dans des secteurs très divers (entreprise de service public, PME) et avec des approches différentes (création en free-lance pour des sites marchands, appui communication et créativité au sein de l entreprise). Après l obtention de mon DUT en 2013, c est dans une démarche de professionnalisation et de consolidation de mon savoir-faire que j ai intégré l École Multimédia en alternance puis effectuer une licence professionnelle Techniques et activités de l image et du son en apprentissage au sein de la SNCF. A travers de ce book, je vous invite à découvrir une sélection de mes travaux les plus représentatifs.
1 2 3 4 5 6 SOMMAIRE Sites créatifs et institutionels Site commercial Maquette 1 GETI Consulting p4 2 Syndicat-Emeraude p8 3 Liens virtuels p12 4 Carbonara bike p16 5 Le quai Branly p20 6 L école des chats p22
GETI CONSULTING SITE FLAT DESIGN RESPONSIVE http://geti-consulting.com/ A PROPOS Dans le cadre de mon alternance à l École Multimédia, j ai réalisé un site responsive pour le compte d une entreprise de conseil et d audit dans le secteur de la finance. J ai entièrement réalisé le site, de la maquette à la mise en place, dans le respect du cahier des charges de l entreprise mais également en étant force de proposition, notamment pour optimiser le coût du projet et trouver les solutions techniques les mieux adaptées et les plus innovantes. 4 Geti-consulting
PAGE DE CONNEXION AU MEMBRES L espace membre que j ai mis en place s adresse à 2 cibles distinctes : - Les utilisateurs du site qui peuvent accéder à leurs cours en ligne, suivre l avancement de leur progression et consulter leur planning en temps réel. - Les administrateurs du site, qui en fonction des droits dont ils disposent, peuvent suivre l évolution des élèves, leur progression et leur assiduité. ADMINISTRATION DES MEMBRES ET DES PAGES Grâce à cette interface, l administrateur habilité peut modifier les informations personnelles des membres. Il peut également intervenir sur le contenu des pages du site et gérer la newsletter avec des outils designés pour ne nécessiter aucune compétence informatique particulière. Geti-consulting 5
FORMULAIRE AVEC FEED-BACK PERSONNALISÉ L objet de cette fonctionalité est de mettre à la disposition de l utilisateur et du client des formulaires, des devis, des fiches d inscription et des fiches de contact avec l équipe. Elle permet également le dépôt de CV et de lettres de motivation avec accusé de réception automatique par envoi d email personnalisés au design de GETI. CONTENUS INTERACTIF EN JQUERY Retenir l attention et l intérêt du client potentiel pour lui donner l envie de poursuivre la découverte du site et surtout d y revenir, est un objectif essentiel à atteindre. Pour ce faire, j ai développé des animations et interactions sur l ensemble du support afin de rendre la visite du site plus ludique et vivante. 6 Geti-consulting
LANGAGES : HTML5, CSS3, JQUERY, PHP, MY SQL Les langages utilisés pour la création de ce site sont : HTML5, CSC3, JQUE- RY, PHP et MYSQL. Ces derniers sont tous à la norme W3C qui optimise la structure du code et le référencement du site sur Google. J ai utilisé PHP et MYSQL afin de sécuriser les transferts de données entre le site, la base de données et les clients, ainsi que d afficher le contenu du site. SYNTHÈSE Ce site permet aux clients d effectuer un suivi personnalisé et personnalisable de leur formation. Son administration est facilitée par la mise à disposition de formulaires permettant de mieux répondre aux besoins de l entreprises et des ses clients avec une plus grande réactivité. Sa maintenance quotidienne ne nécessite pas de compétence informatique particulière. Son design agréable et ergonomique permet une navigation fluide et ludique intégrant les objectifs marketing de l entreprise. Les langages utilisés pour le développement ont été choisis pour mieux renforcer la sécurité des données et faciliter la maintenance du site. Geti-consulting 7
SYNDICAT EMERAUDE SITE POUR LE SERVICE PUBLIC http://www.syndicat-emeraude.com A PROPOS J ai réalisé la refonte du site du Syndicat Emeraude dans le cadre de mon stage de fin de DUT. Cette entreprise de service public a pour mission de collecter et de traiter les déchets dans 17 communes du Val d Oise. Les enjeux du projet étaient principalement orientés vers l amélioration des services proposés aux usagers, sans objectif commercial. Ce site a été conçu conjointement avec le service communication du Syndicat Emeraude. 8 Syndicat-emeraude
UN SITE AU SERVICE DE L ADMINISTRÉ Ce site a été conçu pour être utilisé par des personnes peu familières avec internet. Le niveau d interactivité exigé par le cahier des charges était néanmoins élevé pour rester attrayant pour les utilisateurs confirmés et donner une image positive et innovante de l entreprise. Le site devait donc être polyvalent, visuellement agréable et répondre aux attentes pratiques des usagers. GESTION DES PROBLÈMES DES USAGERS EN LIGNE Un formulaire interactif est mis à disposition sur le site, reprenant l ensemble des questions et demandes pouvant être formulées par les usagers dans le cadre de la collecte des déchets. Cette fonctionnalité permet de répondre rapidement aux questions posées et de soulager le standard téléphonique. Elle permet également à l utilisateur de signaler rapidement et sans attente tout dysfonctionnement et au service technique de mieux planifier ses interventions et optimiser ses ressources. Syndicat-Emeraude 9
CARTE INTERACTIVE DES BORNES EN TEMPS RÉEL Une carte interactive Google Maps a été implémentée sur le site permettant à l usager de visualiser en temps réel l emplacement des bornes les plus proches de son adresse. VISITE VIRTUELLE 360 DE L ÉCO-SITE Cette partie du site permet d effectuer une visite virtuelle de l écosite. Elle contient également toutes les informations utiles pour l usager concernant le tri, comme par exemple les consignes de tri et les emplacements des containers. 10 Syndicat-emeraude
LANGAGE : PHP, HTML5, CSS3, JQUERY, KML Les langages utilisés pour la création de ce site sont : HTML5, CSC3, JQUE- RY, PHP. Ces derniers sont tous aux normes W3C qui optimisent la structure du code et le référencement sur Google. SYNTHÈSE La réalisation du nouveau site du Syndicat Emeraude a nécessité de réaliser au préalable un état des lieux intégrant les spécificités d un domaine technique très particulier. La nécessité de développer un site accessible au plus grand nombre avec une obligation de service public a également été une contrainte très forte. L implémentation d une interface agréable et ergonomique a permis d atteindre ces objectifs. J ai rédigé un manuel utilisateur et des fiches de procédures permettant de faciliter la maintenance du site. Syndicat-Emeraude 11
LIENS VIRTUELS SITE FLASH http://liensvirtuels.fr/ A PROPOS Liens virtuels est un concept original issu d un travail collectif, traitant le sujet des relations virtuelles. Le site a été développé en Flash. Il s agit d un site d information, qui a pour objectif de partager des points de vue et réflexions sur la thématique suivante «Pourquoi utilisonsnous de façon abusive les réseaux de communication virtuelle jusqu au renfermement?» 12 Liens virtuels
CD-ROM AVEC EXECUTABLE Pour l occasion du festival SRC de l université, une version CD-ROM avec executable à été produit. Une plaquette et un cd contenant toutes les spécificités techniques nécessaires pour lancer le contenu ont été imprimés. UN MONDE VIRTUEL IMMERSIF Les utilisateurs sont invités à visiter les points chauds qui contiennent des vidéos, en naviguant sur le site à l aide des flèches directionnelles. Le but de cette exploration est d immerger profondément l internaute dans un monde virtuel et de l amener à se questionner sur les risques de déconnexion du monde réel inhérents aux nouveaux moyens de communication. Liens virtuels 13
INTERVIEWS DE SPÉCIALISTES Dans le cadre de ce projet, nous avons interviewé les spécialistes Michael Stora (psychologue/psychanalyste) et Yann Leroux (psychologue/ psychanalyste). Ariane Ferrol, nous a fait part de son expérience vécue des interactions positives possibles entre les mondes virtuels et réel, en particulier dans le domaine des MMORPG (Massively Multiplayer On Line Role Playing Games). ACTUALITÉS DYNAMIQUE Cette page permet d ajouter et de modifier les évènements qui seront indiqués dans le cercle Actualité. L ensemble des évènements sont enregistrés dans une base de données 14 Liens virtuels
LANGAGE : ACTION SCRIPT 3 ET XML L action script 3 à été utilisé pour développer l environnement de liens virtuel. L association avec le XML et PHP ont permis a créer un back office facilement administrable. SYNTHÈSE La réalisation du site Liens virtuels est le résultat d un travail universitaire collectif qui a nécessité en amont une réflexion importante ainsi qu un effort de créativité. L implémentation du site a demandé de travailler en mode projet : estimation des ressources, répartitions des tâches en fonction des compétences des contributeurs, suivi des tâches et respect du planning. Dans le cadre de ce projet, j ai plus particulièrement pris en charge les aspects audio-visuels. Liens virtuels 15
CARBONARA BIKE E-COMMERCE MAGENTO http://carbonarabike.com/ A PROPOS Carbonara bike a été ma première prestation free-lance. Je l ai créé sous Magento qui est actuellement l outil de développement le plus complet et le plus performant pour les sites de e-commerce. J ai également former le client afin qu il puisse assurer l administration courante du site. Par ailleurs, j assure la maintenance corrective et évolutive du site Carbonara. 16 Carbonara bike
PRISE EN MAIN ET FORMATION MAGENTO Magento est un CMS (Content Management System) relativement complexe. J ai organisé plusieurs formations Magento pour que le client puisse assurer l administration du site. Tous les aspects de la gestion du site Magento ont été abordés, de l organisation du catalogue produits à l adaptation au marché français, en passant par la gestion des flux de commandes et l animation commerciale. CRYPTAGE ET PAIEMENT SÉCURISÉ Le certificat SSL sécurise les flux d informations entre le site et les clients. Il garantie la confidentialité des informations personnelles des clients et sécurise les transactions. Carbonara bike 17
EXTENSIONS ET PACKAGES Pour répondre rapidement aux besoins potentiels de Carbonara, différentes extensions et packages ont été intallées : mise en place d un blog, liens avec les réseaux sociaux, tracking, rappel de panier, optimisation des temps de chargement. THÈME PERSONNALISÉ Afin de minimiser les délais de développement, l implémentation d un d un thème préexistant a été préférée à un développement ex nihilo. Quelques modification au niveau des feuilles de style ont été effectuées afin de créer un design unique. 18 Carbonara bike
LANGAGE : HTML, CSS ET PHP Un éditeur de texte est disponible pour décrire les produits et les feuillles de style. Ceux-ci peuvent néanmoins être codées directement en html et css. Par ailleurs, un script a été réalisé en php pour souhaiter l anniversaire des clients du site. SYNTHÈSE La réalisation du site marchand Carbonara bike a nécessité la prise en main de Magento. Le site a été conçu pour permettre son évolution rapide. La confidentialité des données clients et la sécurité des transactions est assurée grâce au certificat SSL. Une formation à Magento a été dispensée au client pour l administration courante du site. Carbonara bike 19
QUAI BRANLY PROPOSITION DE MAQUETTE A PROPOS Dans le cadre d un travail en bînome à l Ecole-Multimédia, nous avons proposé une refonte graphique du site existant du musée du Quai Branly. En effet, la structure du site actuel donne une impression de complexité qui nuit à sa lisibilité. Par ailleurs, sa technologie obsolète ne permet pas une utilisation poussée des outils graphiques. 20 Quai Brany
UNE ARCHITECTURE DE L INFORMATION REPENSÉE Le Quai Branly scénarise chacune de ses expositions en mettant en place un véritable parcours scénique. Le même concept a été adopté pour la refonte du site afin de permettre au visiteur de (re)vivre une expérience comparable avec le site internet du musée. INTERFACES SIMPLIFIÉ Principaux objectifs de la refonte graphique : - retranscription de l identité du musée à l ensemble du site. - refonte totale de l éditorial. - rendre le site plus convivial et plus attractif - Mettre plus en avant les collections et expositions du musée. Quai Branly 21
L ÉCOLE DU CHAT MAQUETTE RESPONSIVE A PROPOS Dans le cadre d un travail en bînome à l Ecole-Multimédia, nous avons fais une proposition de refonte graphique du site de l association L école du chat. En effet, ce site est techniquement obsolète et peu convivial. L objet de ce site est de venir en aide aux chats errants. Il propose de les recueillir, les adopter ou les parrainer. Il prend en charge leur tatouage et vaccination. Il met aussi en place des abris dédiés. 22 Ecole du chat
DESIGN BASÉ SUR UN MOTEUR DE RECHERCHE Pour rendre le site plus pratique et moderne, nous avons pris le parti de le présenter sous forme de site de rencontre. Seuls les fitres les pus importants ont été conservés afin d éviter tout risque de discrimination pour le choix de l animal. ADAPTÉ AUX TABLETTES ET SMARTPHONES Dans un soucis de mobilité, le site a été pensé pour qu il puisse s afficher correctement sur tous les supports et être consulté partout. Ecole du chat 23
06 51 54 73 68 pierrelecasrc13@gmail.com pierre.portfolio.free.fr