BTS SIO. Margaux Paget. [Rapport de stage. 2ème année]

Transcription

1 BTS SIO Margaux Paget [Rapport de stage 2ème année]

2 SOMMAIRE Remerciements A. Présentation de l entreprise I. Présentation II. Organigramme B. Présentation de l environnement de travail I. L environnement de travail II. Les logiciels utilisés C. Présentation des travaux réalisés I. Les mises à jour II. Création d e.mailing III. Création d un formulaire avec Symfony2 Conclusion 1

3 REMERCIEMENTS Je tiens tout d abord à remercier l ensemble des collaborateurs de l entreprise Cyber l pour leur accueil chaleureux. Principalement la dirigeante, Murielle CAILLIBOT, pour avoir accepté de me prendre en stage pendant 4 semaines. Je remercie également Jean Claude CORMIER et Angélique AUBRY, mes chefs de travaux, qui m ont fait partager leur expérience. Merci aussi aux développeurs Julien PILLIAS et Florent SEVESTRE et à la Webdesigner, Virginie ROUSSELLOT qui m ont apporté toutes leurs connaissances afin de m aider dans mes tâches hebdomadaires. 2

4 PRÉSENTATION DE L ENTREPRISE I. Présentation Fondée en 1998, Cyber'L est une agence web située en Essonne. La pluralité des services proposés permet de mettre en œuvre toutes les compétences nécessaires à la réussite d'un projet Internet : Conseil et audit Web Design Créations de sites Internet sur mesure Extranet Intranet Référencement E-Marketing Communication interactive Hébergement La volonté la plus profonde et originelle de Cyber'L est axée sur l'entière satisfaction de ses clients. Cyber'L est restée une entreprise à taille humaine lui permettant d'offrir souplesse, réactivité et un service personnalisé. Leur philosophie se résume en quatre mots : écoute, professionnalisme, plaisir et satisfaction. Afin de répondre au mieux aux attentes des clients, l agence a développé une méthodologie simple, efficace, basée sur «le bon sens» et s'articulant autour de métiers essentiels : Écouter et échanger Élaborer, définir et suivre Imaginer et Créer Développer, programmer, tester et garantir Référencer, positionner Cette visibilité si convoitée! Réactualiser, suivre et faire évoluer. 3

5 II. Organigramme fonctionnel Pôle administratif et commercial Murielle CAILLIBOT Marion BESSLICH Jean-Claude CORMIER Alexia LE DUEY Gérante et Responsable Commerciale Directrice des Solutions Intranet et Outils Collaboratifs Assistant de Direction et Relations Clients Community Manager Pôle graphisme et infographie Virginie ROUSSELLOT Infographiste Pôle développement Angélique AUBRY Julien PILLIAS Florent SEVESTRE Margaux PAGET Développeur et Chef de Projet Ingénieur Développement Web et Chef de Projet Développeur apprenti Stagiaire 4

6 PRESENTATION DE L ENVIRONNEMENT DE TRAVAIL I. L environnement de travail SVN est un dépôt Subversion. Un dépôt Subversion est l'emplacement central où sont stockées toutes les données relatives aux projets gérés. Le dépôt se fait via une URL locale ou distante. Le dépôt contient l'historique des versions des fichiers stockés, les logs enregistrés lors des modifications, les dates et auteurs de ces modifications, etc Au sein d'un dépôt se trouvent un ou plusieurs projets. À chaque projet correspond en général un répertoire situé à la racine du dépôt et qui contient lui-même les fichiers et dossiers du projet proprement dit. Installé sur chaque client, Tortoise est un client open source pour le système de contrôle de version Subversion. C'est à dire Tortoise gère des fichiers et des répertoires à travers le temps. Les fichiers sont stockés dans un référentiel central. Le référentiel ressemble beaucoup à un serveur de fichiers ordinaire sauf qu'il mémorise tout changement fait à nos fichiers et répertoires. Cela nous permet de récupérer les versions précédentes de nos fichiers et examiner l'historique de comment et quand nos données ont changé. Étant un client svn, il va nous permettre d effectuer des commit et gérer les conflits. Une fois que nous aurons apporté les modifications que nous souhaitions apporter au code source, il faut que ces modifications soient vues de tout le monde. Cette opération s'appelle le commit. 5

7 Site SVN Commit des sites SVN 6

8 II. Les logiciels utilisés Cyber L utilise différentes technologies pour répondre aux besoins de ses différents clients. Devenu la technologie la plus utilisée aujourd hui pour dynamiser les sites web, le php permettra d associer une base de données à notre code html. Cyber L fait la différence dans ce domaine en s appuyant aussi sur le Framework Symfony 2 et sur plusieurs CMS. JavaScript / JQuery : énormément utilisé pour faire des interactions dans un site. 7

9 PRÉSENTATION DES TRAVAUX RÉALISÉS Il faut savoir que tous les travaux effectués sont refacturés au client sous forme de forfait horaire. Par exemple, un client achète un forfait de 20 H et peut ainsi demander tous les travaux, mises à jour, e.mailing, etc dans la limite de son forfait. Je dois par conséquent être très vigilante sur le nombre d heures que j affecte à chaque tâche afin que le forfait du client soit débité à sa juste valeur. Tout au long de mon stage j ai eu l occasion de participer à la plupart des travaux réalisés par l entreprise. Mes principales tâches ont été de mettre à jour les sites web des clients et de réaliser plusieurs e.mailings. I. Les mises à jour La plupart des mises à jour sont du changement de contenu. Les textes (ou les images) affichés ne sont plus à jour et il faut donc les modifier, supprimer ou bien remplacer. Certaines mises à jour sont assez simples et nécessitent juste de manier le contenu directement des pages HTML. D autres mises à jour font appels à des techniques plus évoluées, avec la sollicitation d une base de données. J ai effectué ma 1 ère mise à jour pour le client : «Gîte de la Rechassière» 1) Client Gîte de la Rechassière Gîte de la Rechassière est un client qui propose de louer des gîtes, chalet et tables d hôtes. Le client souhaite avoir un nouvel onglet dans la barre de son menu où seraient exposées ses photos sous forme de rubrique. J ai donc créé un nouvel onglet «Album photo» où le visiteur pourra choisir la catégorie de photo qui l intéresse. Les photos ont été insérées via un diaporama. Le code a été fourni grâce au compte Picasa du client, où la fonctionnalité diaporama existait. 8

10 9

11 Extrait du code html pour la navigation : Extrait du code html pour la diapositive : En parallèle, Monsieur CORMIER me donnait d autres mises à jour à effectuer : - Archivage des articles 2013 sur le site «Faculté des Métiers de l Essonne» - Ajout de portraits sur le site «Les femmes chef d entreprise» - Actualisation d e.mail sur les sites «Institut de Coopération Internationale» + «Everstyl» - Ajout d un fichier PDF sur le site de la CGPME 91 - Création de pages sur le site «StudioDéclic» - Rajout de contenu sur différents sites - Modifications de cartes de France sur le site Enodis 10

12 II. Création d e.mailing Lors de mes premières semaines de stage, j ai dû réaliser plusieurs e.mailing. Un e.mailing est une méthode de marketing direct qui utilise le courrier électronique comme moyen de communication commerciale pour envoyer des messages à des clients. Afin de pouvoir les créer, je disposais d une maquette, réalisée sous Photoshop, par la Webdesigner. Cette maquette était sous un format «image», je devais recréer les informations en codage HTML. 1 ) Client ENODIS Enodis est un client qui conçoit, fabrique et fournit des équipements de pointe à forte valeur ajoutée pour la restauration et propose des marques aux performances reconnues dans le monde entier. Afin de promouvoir son nouveau site internet, Enodis a souhaité qu on lui réalise un e.mailing. Environnement : Logiciels : Notepad++ Langage : HTML Système d'exploitation : Windows 8 Temps de réalisation : 1h30 e.mailing nouveau site Enodis 11

13 Extrait du code html pour la réalisation de l e.mailing : 12

14 2 ) Client TANGO Tango est un client qui est producteur de voyages pour des groupes. a ) 1 er e.mailing Afin de promouvoir un week-end à Saint Pétersbourg, Tango a souhaité qu on lui réalise un e.mailing à destination de ses clients intéressés par les courts séjours. Environnement : Logiciels : Notepad++ Langage : HTML Système d exploitation : Windows 8 Temps de réalisation : 2h e.mailing Saint Petersbourg Tango 13

15 Extrait du code html pour réaliser l e.mailing du client : 14

16 b ) 2 ème e.mailing Afin de promouvoir un nouveau circuit en Equateur, Tango a souhaité qu on lui réalise un e.mailing à destination de ses clients intéressés par le séjour. Environnement : Logiciels : Geany Langage : HTML Système d exploitation : Windows 8 Temps de réalisation : 1h e.mailing Equateur Tango Extrait du code html pour réaliser l e.mailing du client : 15

17 3) Client «Les Spécialistes» «Les Spécialistes» est une plate-forme dédiée aux différents acteurs du marché des objets et textiles publicitaires : fabricants / revendeurs / annonceurs. Afin de promouvoir un nouveau salon, «Les Spécialistes» a souhaité qu on lui réalise un e.mailing à destination de ses clients intéressés par l invitation au salon. Environnement : Logiciels : Notepad++ Langage : HTML Système d exploitation : Windows 8 Temps de réalisation : 20min e.mailing invitation Les Spécialistes 16

18 Extrait du code html pour réaliser l e.mailing du client : 4) Client LES MACARONS GOURMANDS «Les Macarons Gourmands» est un client qui confectionne des macarons pour professionnels et particuliers Le groupe fête ses 15 ans. Pour cette occasion, j ai du créer deux e.mailing différents : un pour les professionnels et un autre pour les particuliers. Environnement : Logiciels : Notepad++ Langage : HTML Système d exploitation : Windows 8 Temps de réalisation : 3h30 e.mailing professionnel 15 ans Macarons Gourmands 17

19 Extrait du code html pour réaliser l e.mailing du client : e.mailing particulier 15 ans Macarons Gourmands 18

20 Extrait du code html pour réaliser l e.mailing du client : 5) Client SMAG Graphique SMAG Graphique est un client qui a pour métier la fabrication et la distribution de machine d impression et de transformation pour les fabricants d étiquettes adhésives et flexibles packaging. Afin de promouvoir une nouvelle formation à venir, SMAG Graphique a souhaité qu on lui réalise un e.mailing à destination de ses clients intéressés par les journées professionnelles. Environnement : Logiciels : Notepad++ Langage : HTML Système d exploitation : Windows 8 Temps de réalisation : 5min (rajout juste du «J-13») e.mailing journée professionnelle SMAG Graphique 19

21 Extrait du code html pour réaliser l e.mailing du client : 6) Client ACBI SA ACBI SA est une entreprise spécialisée dans la protection collective. Afin de promouvoir un nouvel article ACBI SA a souhaité qu on lui réalise un e.mailing à destination de ses clients. Environnement : Logiciels : Notepad++ Langage : HTML Système d exploitation : Windows 8 Temps de réalisation : 2h 20

22 e.mailing ACBI SA 21

23 Extrait du code html pour réaliser l e.mailing du client : III. Création d un formulaire avec Symfony2 Pour le besoin de différents sites internet, j ai dû créer des formulaires de contact, soit pour une newsletter soit pour une demande de contact. Afin de reussir à créer les formulaires de contact, j ai utilisé le framework Symfony 2. 1) Présentation de Symfony 2 Symfony2 est un Framework écrit entièrement en PHP. Il a été initié par Sensio, une agence web française. Ce Framework est un projet open-source et il bénéficie d énormément de contributions de la part des internautes ou de diverses entreprises. Symfony2 propose de découper le code en trois parties, selon l architecture du modèle MVC : Model View Controller. Le modèle (Model) contient toutes les données persistantes de l application. La plupart du temps, ces données sont sauvegardées dans une base de données. Mais elles peuvent aussi l être dans des fichiers. La vue (View) permet de mettre en page les données qui doivent être envoyées à l utilisateur. Cette mise en page se fait la plupart du temps en HTML et CSS. Enfin, le contrôleur (Controller) fait office de chef d orchestre. Il reçoit la requête du client, récupère depuis les données nécessaires depuis le modèle, effectue éventuellement certains traitements supplémentaires, puis envoie ces données à la vue. Il récupère les données mises en pages grâce à la vue qu il renvoie sous forme de réponse au client. 22

24 Dans Symfony2, le code source est rangé d une manière bien particulière : il est divisé en Bundles. Un Bundle est en fait un regroupement de contrôleurs, de modèles, de vues, et d autres outils divers qui permettent de faire un travail bien précis dans l application. L avantage des Bundles est que, s ils sont construits selon la convention de Symfony2, ils peuvent être intégrer dans n importe quel projet. Il existe notamment un site web qui regroupe les Bundles les plus populaires. Voici une liste des principaux Bundles que j ai utilisés. Je détaillerai leur fonctionnement au fur et à mesure de l avancement de ce rapport : - FOSUserBundle : Ce Bundle, sûrement l un des plus populaires propose de gérer les utilisateurs d une application. Il ajoute à la table utilisateur du projet divers champs (comme le nom d utilisateur, le mot de passe chiffré, la date de dernière connexion, etc.) Il s occupe de gérer tout seul le chiffrement des mots de passes. Il propose aussi de gérer l inscription, le login ou bien encore la régénération de mot de passe par , etc. - DoctrineOrmBundle : Ce Bundle s occupe d intégrer l ORM* Doctrine dans Symfony2. - SonataAdminBundle : Ce Bundle permet de générer des pages d administration pardessus des tables en base de données. - Avalanche123ImagineBundle : Ce Bundle permet de gérer des miniatures d images dans le site web. Les utilisateurs peuvent par exemple uploader des images de diverses tailles. Ce Bundle s occupe alors de la redimensionner à la bonne taille lors de son affichage. Toutes ces miniatures sont mises en cache pour pouvoir être réutilisées. - KnpMenuBundle : Ce Bundle s occupe de la gestion des menus du site. - StfalconTinymceBundle : Ce Bundle intègre l éditeur TinyMCE au site. *ORM: Object Relational Mapping (Mapping objet-relationnel). Outils permettant de visualiser une base de données comme un ensemble de classes et d instances de classe. 2) Exemple de formulaire de contact Dans l exemple ci-dessous, j ai créé un formulaire de contact pour une newsletter pour le site Baticonfort qui sera mis en ligne fin février. Pour créer un formulaire de contact, il faut disposer d un controller, d une vue, d une entité et d un form. Il faut tout d'abord créé la classe générique «Newsletter» (qui sera l entité) qui représente et stocke les données pour une tâche : Code de l entity «Newsletter» 23

25 Après avoir créé l entité, on va créer et d'afficher le formulaire HTML. Dans Symfony2, cela se fait en construisant un objet formulaire qui est ensuite affiché dans une vue. Pour l'instant, tout ceci peut être effectué dans un contrôleur : Exemple de controleur pour un formualire Nous pouvons ensuite créer notre vue : Vue de la page Newsletter 24

26 Une fois toutes ses étapes terminées, nous avons le résultat final. Résultat final IV. Balises de référencement Lors de mon stage, j ai pu également intégrer des balises de référencement à différents sites interne. Afin de pouvoir mener ma tâche correctement Monsieur CORMIER et Mademoiselle LEDUYE, me fournissait des documents WORDS, on j avais le contenu que devait avoir les différentes balises. Les balises de référencement sont des éléments importants pour le référencement, elles ne sont pas tout : beaucoup de moteurs vont "fureter" à l'intérieur des pages et les mots repris dans leurs textes ont donc autant d'importance. C'est souvent l'occurrence de ceux-ci avec ceux repris dans les balises qui assureront une bonne indexation. Les balises de référencement les plus utilisé sont : - META Description - META Title 25

27 - META Footer J ai donc pu intégrer des balises de référencement sur le site de Papo-France, Groupe SMSM, Enodis et AMPHIA. Exemple de syntaxe pour le titre : <meta name="title" content="texte dédié au titre de la page"> Exemple de syntaxe pour la description: <meta name="description" content="texte dédié au contenu de la page"> Exemple de syntaxe pour le pied de page : <meta name="footer" content="texte dédié au pied de la page"> 26

28 CONCLUSION Cette deuxième expérience dans le monde de l informatique m a apportée une nouvelle expérience très enrichissante et variée autour du monde du web. Ce stage a été très formateur pour moi. J ai pu acquérir de nouvelles compétences par les technologies très employées et recherchées telles que Symfony2 et Photoshop. J ai effectué plusieurs tâches durant mon stage ce qui m a permis d avoir de la diversité tout au long de ces 5 semaines. J ai surtout apprécié de travailler en équipe où j ai découvert d autres métiers du développement web. 27