Olivia TELIN. Dossier d initialisation de stage par : Maître de stage: Guillaume Pegoraro. Maîtresse accompagnatrice: Atika Laribi

Dimension: px
Commencer à balayer dès la page:

Download "Olivia TELIN. Dossier d initialisation de stage par : Maître de stage: Guillaume Pegoraro. Maîtresse accompagnatrice: Atika Laribi"

Transcription

1 Dossier d initialisation de stage par : Olivia TELIN Maître de stage: Guillaume Pegoraro Maîtresse accompagnatrice: Atika Laribi École Supérieure d Informatique de Gestion, Genève

2 SOMMAIRE SOMMAIRE 2 1. L AGENCE DE COMMUNICATION BUXUM PRÉSENTATION POURQUOI BUXUM? SERVICES OUTILS UTILISÉS 4 2. PROJET(S) LES OBJECTIFS RESPONSIVE WEB DESIGN SITE WEB AVANT RESPONSIVE WEB DESIGN SITE WEB APRÈS RESPONSIVE WEB DESIGN 6 3 BUXUM COMMUNICATION OBJECTIFS DÉROULEMENT DU PLANNING 8 2

3 1. L AGENCE DE COMMUNICATION BUXUM 1.1 Présentation Buxum est une agence de communication créée en novembre Son rôle est de réaliser des projets de communication grâce à un savoir-faire et un professionnalisme unique. Fin 2013, trois associés ont repris l agence. Ce nouveau souffle a permis de consolider les compétences déjà présentes et d apporter un nouveau savoir Pourquoi Buxum? Buxum vient du mot en latin buxus qui veut dire buis. Un buis: c est une plante qui s adapte à toutes les formes qu on lui donne. Exactement comme le service donné par l agence, elle s adapte aux projets qu on lui confie. 1.2 Services Aujourd hui, Buxum Communication comptes trois secteurs de compétences différents et variés ainsi qu un secteur administratif. Secteur Digital (intégrateurs d innovations), composé de trois membres, il a différentes missions. Il doit s occuper de la stratégie digitale en passant par la réalisation d applications mobiles et de sites internet, sans oublier le référencement et les média sociaux. Secteur Graphic Design (designers d idées), composé de quatre membres, ce pôle est en constante recherche créative afin de concevoir de nouvelles identités visuelles et créer des projets d édition ou encore de la publicité sur les lieux de ventes (ex : magasin de vêtement). Ensuite, il y a le secteur Conseil (architectes de solution), les quatre collaborateurs qui composent le pôle sont des experts en lancement de produits et services. Ils s occupent également de la conception et l organisation d événements, ainsi que la planification des stratégies de communication dans son ensemble. Olivia Telin ESIG

4 Pour finir, le secteur Administratif, composé de l équipe dirigeante de Buxum, compte un Managing Director, un Create Director puis un Account Director. Le personnel de Buxum est constitué, aujourd hui, de 14 collaborateurs et l entreprise a honoré près de 3'600 mandats avec succès. Et ce n est pas terminé! Administration Graphique Designers Developpeurs web Conseillers 1.3 Outils utilisés L utilisation de WordPress, un système de gestion de contenus (CMS), est essentielle dans nos créations de site web. Un logiciel destiné à la conception personnalisable et à la mise à jour dynamique de site. Une fois la structure du site créée, le CMS va engendrer des pages de code automatiquement. Pour tout ce qui est création/ modification de code, en plus de ceux déjà générés, nous exploitons «Sublime Text 2», un éditeur de texte qui simplifie la lecture du code et qui dispose d un grand nombre de fonctionnalités utiles. Nous utilisons aussi PhpMyAdmin, une interface d administration pour un système de gestion de base de données en MySQL, afin de créer nos bases de données. Pour l'upload des fichiers sur le serveur web nous utilisons FileZilla, Un client FTP (File Transfer Protocole). Concernant les langages de programmation, nous manions PHP, CSS, HTML, JavaScript et MySQL. Il se peut, parfois, que l utilisation de PhotoShop soit indispensable. 4

5 2. PROJET(S) 2.1 Les objectifs Mes objectifs principaux se présentent de la manière suivante :! Mettre en place un responsive web design pour certains sites web.! Modifier le graphisme de plusieurs sites web sur WordPress Responsive Web Design Dans le monde du web, Responsive Web Design (RWD), veut dire que la page internet est pensée de manière à pouvoir s adapter à différents supports et donc différentes tailles d écrans. Le principe du Responsive n est pas de refaire le site différent par support, mais bien que les multiples composants graphiques du site internet s adaptent à la résolution de l écran utilisé afin d offrir à l internaute un confort optimal et visuel. 2.2 Site web avant Responsive Web Design Sur un support donc la résolution n est pas adaptée, le site avant le RWD est aperçu maladroitement trop grand ou trop petit. L utilisateur voit le site dans son format habituel (la taille du site adapté à un écran d ordinateur), donc l utilisation du zoom et au défilement horizontal ou vertical pour visionner le contenu est malheureusement indispensable dans cette situation. Voici un exemple d un site confié par les développeurs web sans responsive : 1 1 SmartCockpit : une entreprise qui promeut un logiciel tableau de bord Olivia Telin ESIG

6 2.3 Site web après Responsive Web Design Après une adaptation en RWS, le contenu de la page du site s adapte au périphérique utilisé donc plus de recours au zoom et au défilement horizontal ou vertical, l utilisateur n a plus besoin d adapter par lui-même la dimension du site. Voici deux aperçus du site avec un menu responsive : Lorsque la résolution est petite, le menu se transforme en bouton. Cela dit, mieux vaut utiliser un bouton qui s appelle explicitement «Menu» que le menu hamburger 2. En effet, ce dernier n est pas toujours compris par les utilisateurs. Une fois, qu on appuie sur le bouton, le menu de base du site s affiche sur une liste déroulante. 2 Icône de menu possédant trois barres horizontales utilisé sur les sites responsives. 6

7 3 BUXUM COMMUNICATION 3.1 Objectifs Le directeur artistique et les développeurs web me donnent des projets web souvent déjà en ligne où des modifications sont demandées par les clients, cela pour que je puisse me familiariser plus rapidement au CMS utilisé. Cela dit, on me propose aussi des projets plus importants où on demande du responsive design, c est à ce moment là où du code en CSS, JavaScript, PHP ou HTML doit être appliqué. Mes objectifs principaux se séparent en plusieurs domaines : 1. Une des parties importantes à traiter est de pouvoir s adapter à un projet déjà réalisé et de comprendre la logique du code déjà créée. En effet, car selon les projets les modifications ne peuvent se faire sur le CMS donc il faut ajuster le code existant. 2. La seconde partie majeure de ce projet est de réaliser un responsive web design des sites demandés. Il faut modifier ou recréer un CSS selon la structure de la présentation des informations sur les différents supports. 3. Et pour finir, la troisième partie essentielle est de conceptualiser, développer et implémenter de nouveaux composant graphiques dans le front-end 3. Dans le cadre de mon stage, j ai pour la globalité de ma mission de maintenir et de développer des projets web de plusieurs clients dont le besoin est de promouvoir leur produit ou service. 3 Les éléments du site que l on voit à l écran et avec lesquels on peut interagir. Olivia Telin ESIG

8 3.2 Déroulement du planning Le planning s effectue en début de semaine. Il est planifié par les responsables de Buxum dans l agenda électronique de l agence par ordre d importance des tâches, et peut se modifier au fil des jours en cas de demande de dernière minute. En effet, le planning peut vite changer au cours de semaine en cas d appel important d un client qui souhaiterait modifier ou rajouter une information au site, cela devient une priorité et le planning de base est mis de côté. Généralement, on me donne une à trois tâches par jour, tout dépend de la difficulté du travail à fournir. Afin de voir mon avancée ou les difficultés rencontrées sur les travaux, je dois en fin de journée faire un bilan dans l agenda électronique de l agence (deux pour moi car les développeurs ont un agenda à part) ainsi que de noter les heures passées pour chaque projet planifié. On peut retenir deux grandes phases lors de cette étape de mon stage. La première est bien entendu esthétique : Jouer avec un code couleur, des images, des lignes, des blocs et typographies en essayant de garder une harmonie est un exercice complexe qui suscite fortement mon intérêt. La deuxième phase concerne l aspect ergonomique de l application : Réfléchir aux habitudes de l internaute, rendre l ensemble logique et plaisant, sans pour autant compromettre la charte graphique, est un travail qui demande une grande concentration. 8