12 semaines dans la peau d un développeur web. agence de communication ALEXIS BUON ÉTUDIANT EN MÉTIERS DU MULTIMÉDIA ET DE L INTERNET

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

Download "12 semaines dans la peau d un développeur web. agence de communication ALEXIS BUON ÉTUDIANT EN MÉTIERS DU MULTIMÉDIA ET DE L INTERNET"

Transcription

1 12 semaines dans la peau d un développeur web agence de communication ALEXIS BUON ÉTUDIANT EN MÉTIERS DU MULTIMÉDIA ET DE L INTERNET Tuteur : Ernest BRAS Rapport de stage 2015/2016

2 Sommaire Présentation de l entreprise Histoire Organigramme Éléments économiques Éléments financiers Implantation de l entreprise Communication interne Communication externe Projets : des lignes de codes Quelques projets... Les différentes étapes de la conception d un site web La mise en ligne 4 à 8 9 à 13 Conclusion / Bilan Bilan personnel et professionnel 14 Annexes et glossaire 15 à 27 Bonne lecture! 01

3 Introduction J ai effectué mon stage dans une agence de communication située à Champs-sur-Marne. Le nom de cette agence est Lemonad. Elle propose plusieurs services liés au multimédia tels que la réalisation de vidéos promotionnelles ou d identité visuelles en print et enfin la réalisation de sites web en tous genres (site vitrine, e-commerce...). Pendant ce stage de 12 semaines, j ai eu le poste de développeur web. Mon rôle a principalement été de développer des sites avec le framework Thelia 2. Mon tuteur, également le patron de l entreprise achetait des templates graphiques sur internet et il fallait que j adapte ce template au nouveau site tout en le raccordant avec la base de données sur le modèle de Thelia. J ai eu l occasion de travailler sur plusieurs projets pour différents clients. Certains projets était moins conséquent que d autres mais tous était très intéressant et j ai apprécier travailler sur ces projets. Comparativement à l année dernière, où j étais dans une grande entreprise, cette année je suis dans une très petite entreprise, c est une nouvelle expérience que j ai acquis professionnellement et je pourrais en annexe de ce rapport faire un comparatif entre les deux environnements auxquelles j ai été confronté. Cependant la gestion d une entreprise de communication telle que Lemonad ne se limite pas à du développement. En effet, il y avant tout une part de collaboration avec les graphistes avec qui nous travaillons de paire et également un contact avec la clientèle. J ai eu l occasion d accompagner mon tuteur lors de ses réunions avec les clients et ceux pour plusieurs raisons : premièrement, il souhaitait me faire découvrir son métier sous toutes ses formes, ensuite il trouvait intéressant que je m imprègne des projets des clients que j allais ensuite réaliser. La partie sur la communication sera plus détaillée dans la suite du rapport. 02

4 Préambule Avant même de commencer ma recherche de stage, j ai été contacté sur LinkedIn le 7 janvier Benoît Fabre, fondateur de Souscritoo me proposait en effet un stage en tant que développeur web. Après quelques échanges avec lui, il m a demandé mon numéro mais ne m a jamais recontacté. N étant pas particulièrement intéressé par cette offre, je n ai pas relancé l entreprise. Une semaine plus tard, une offre similaire m a été faite par Geoffroy de Pontbriand de chez FASTBOOKING. Cepandant les conditions du stage ne correspondaient pas, j ai donc décliné l offre. J ai commencé ma recherche de stage au début du mois de février. Je recherchais un stage en développement web. J ai appris grâce à une fille de première année l existence d une agence de communication du nom de Lemonad ce situant à Champs-sur-Marne. J ai regardé leur site et je lui ai demandé les contacts pour postuler en tant que stagiaire. La semaine suivante, j avais un entretien avec le patron. Lors de cet entretien plutôt chaleureux, il m a présenté son entreprise et nous avons discuté de mes compétences dans les langages de programmation, des missions que j aurais à faire dans l entreprise ainsi que de culture du web. Dès la fin de mon entretien, Ernest, m a dit que je serais accepté en stage et qu il fallait simplement qu il en parle avec son associé, Élodie. J ai donc décroché mon stage le 16 février janvier 19 janvier 10 février 16 février 11 avril 03

5 Présentation de l entreprise

6 Histoire À la base associé depuis 2010 avec Kamel Rizki en tant que responsable technique dans l agence de communication AIRKOM, Ernest Bras liquide la société suite à un différend avec son associé au début de l année La société Lemonad est créée en fin 2011 par Ernest en association avec Elodie Lambert. Elodie travaillait à l époque comme graphiste indépendante avec la société AIRKOM. Suite au départ d Ernest, elle s associe à lui pour créer une nouvelle agence de communication sur Paris du nom de Lemonad. Il trouvent leurs locaux à Champs-sur-Marne en banlieue parisienne et s installent donc ici. Elodie rencontre son compagnon avec qui elle a un enfant et part habiter à Nantes. Elle travaille depuis chez elle mais reste en contact avec Ernest. Il reste donc tout seul sur la région parisienne et deux antennes de l entreprise sont créé : une à Paris et une à Nantes. Lemonad propose aujourd hui plusieurs types de services de la création de site web en passant par la réalisation et l impression de flyers jusqu au court métrage d entreprise. C est une entreprise qui se développe et qui se fait connaître chaque jour de plus en plus. Organigramme Ernest Bras Développeur Co-gérant Elodie Lambert Graphiste Co-gérante Brice Hendel Chargé de com 16/05 au 01/07 Alexis Buon Développeur 11/04 au 01/07 Circé Grand Graphiste 18/04 au 30/04 04

7 Éléments économiques Lemonad est une entreprise de type société à résponsabilité limitée oeuvrant dans le secteur des conseils en relations publiques et communication. C est une entreprise de services qui agit en Ile-de-France, principalement sur la Seine-et-Marne (77) et sur Nantes. Lemonad est une Très Petite Entreprise ne comptant aucun salarié, seulement 2 co-gérant. L activité de Lemonad repose majoritairement sur le développement de sites web. C est donc cette partie de leurs activités que j étudierais. Le marché de la création de site internet En France, 49% des entreprises n ont pas de site Internet en 2013! (soit 1.5 millions d entreprises). En 2012, entreprises ont été créées en France, alimentant ainsi le marché de la création de site web. À cela, il faut ajouter les sociétés déjà équipées d un site qui le renouvellent tous les 3 ans en moyenne (soit refontes par an). Stratégie de développement À l avenir, Lemonad souhaiterait développer son activité en 3 points principaux : Lemonad souhaiterait élargir sa gamme de services notamment au niveau du print avec par exemple de l impression «sur place». Lemonad souhaiterait également Enfin le gérant de l entreprise voudrait embaucher un développeur afin de l aider et de pouvoir gérer plus de projets. Éléments financiers Le seul élément financier que j ai pu récupérer à propos de Lemonad est son chiffre d affaire. chiffre d affaire de % en 2015 croissance de par rapport à

8 Implantation géographique Champs-sur-Marne, Lemonad est idéalement situé sur le campus de la Cité Descartes à 20 minutes de Paris. Les locaux se trouvent à 10 minutes de la gare du RER A de Noisy-Champs, et dispose d un accès direct à l A4. Ernest a investi et acheté le bureau en 2013 car Lemonad avait besoin de bureaux dans le but de développer l activité. Communication interne L organisation de la journée Tous les matins, à 9 heures, nous faisions un point avec Ernest de ce qu il y restait à faire. Il m orientait selon les projets les plus importants et les plus urgents en m indiquant sur quelles parties du site travailler et avancer. J organisais ensuite mon travail comme bon il me semblait. L essentiel pour Ernest était que j avance sur le travail. Je commençais bien souvent par les parties les plus «faciles» afin d avancer rapidement. Les matins étaient généralement calmes et sans grandes difficultés au niveau du développement. Je faisais un point avec Ernest avant de partir déjeuner. J orientais mon travail de l après-midi selon ce qu il me disait. Après la pause déjeuner, je me mettais aux problèmes les plus complexes, ceux que je n avais pas réussis à résoudre la veille. J avançais plus doucement mais au bout de quelques heures ou de quelques jours, je trouvais souvent enfin la solution à mon problème. Je faisais plusieurs petites pauses au cours de la journée pour ne pas rester bloquer sur quelque chose et me libérer l esprit afin de mieux réfléchir quand je me remettais au travail. Quelquefois lorsque je bloquais vraiment trop longtemps, Ernest essayait de voir s il pouvait résoudre mon problème. Les outils de la communication interne Avec Elodie J ai collaboré sur un projet avec Élodie, la graphiste, qui habite à Nantes. Nous communiquions par l intermédiaire de Skype. Elle me faisait part de ses instructions et je m organisais pour faire les modifications dans la journée suivant les autres projets que j avais à faire. Le partage de fichiers s effectuait par l intermédiaire d Ernest. Elodie lui envoyait un mail avec les documents concernés et il me les transmettait. 06

9 Avec Ernest Les bureaux de Lemonad sont équipés par un serveur Freebox pour l interne. Ernest déposait les fichiers qui n était pas du code et je pouvais me connecter au serveur et les récupérer. Quelquesfois, il me les envoyait par mail aussi. Le code était en ligne sur le serveur externe de Lemonad. J avais plusieurs accès FTP, un pour chaque projet et je modifiais directement le fichier en ligne grâce à une extension de mon éditeur de texte. Les sites que je créais ou modifiais n étaient pas en production, ils avaient une URL du type : www2.nomdusite.fr ou nomdusite.lemonad.fr Communication externe Lemonad utilise plusieurs supports de communication externe dans différentes situations que nous allons voir ici. Le site web Principal élément de communication, le site web de Lemonad. Ce site à la façon d un portfolio présente l entreprise, ses projets, ses membres. Le site a pour vocation principale de faire connaitre l entreprise et ses services. Cela permet d attirer de nouveaux clients, de nouveaux projets et de faire évoluer l entreprise. Le site est acutellement en refonte car celui qui est actuellement en ligne commence à vieillir. C est un projet sur lequel j ai pu travailler pendant mon stage. La plaquette La plaquette est sous la forme d un tryptyque. Tout comme le site web, la plaquette présente et illustre brièvement quelques projets de l agence. Elle contient également les services et les contacts de l agence. Cette plaquette est utilisée lors des rendez-vous avec les clients ou prestataires. Elle permet de faire effet bouche-à-oreille afin de faire connaitre l entreprise. Les réseaux sociaux L agence n est pas très présente sur les réseaux sociaux. Seul un compte Facebook a été créé et il n est pas vraiment entretenu. C est un point qui pourrait être soulevé dans le but d améliorer la communication de l agence. 07

10 Objectif Action Objectif Action est une association de chefs d entreprise dont Ernest est un des fondateurs. Elle est constituée de plusieurs chefs d entreprise qui sont potentiellement des clients pour Lemonad. D ailleurs certains d eux sont déjà client de Lemonad. L agence a donc une place à jouer dans cette association qui lui permet de se mettre en avant et de se faire connaitre. La relation avec la clientèle Enfin, la partie la plus importante et la plus imposante de la communication externe, la relation entre l agence et la clientèle. Elle se déroule en plusieurs étapes : Le devis, la définition des besoins, le rendez-vous, la proposition, la validation et les correctifs. Le première interaction entre l agence et un client est bien souvent amenée par une demande de devis. Un client à un besoin et Lemonad lui fait une offre qui répond à son besoin. Le devis est principalement fait sous forme d échange de mails mais parfois cela ce fait directement sous la forme d un rendez-vous. Un contrat est signé et l agence et le client peuvent travailler ensemble. L agence commence par définir le graphisme du site, soit avec la graphiste de l agence, soit avec un template et revient vers le client pour savoir si cela lui convient. Si effectivement cela lui convient alors l agence continue de travailler sur le projet. Plusieurs fois au cours du projet, des rendez-vous sont organisés avec les client pour savoir si le travail effectué par l agence leur plait toujours et pour affiner les besoins. Avant livraison, un dernier rendez-vous est pris et l ensemble du site est validé par le client et l agence. Une fois validé, le site peut être mis en ligne. Lemonad propose une «maintenance» lorsque le client souhaite effectuer de légères modifications sur son site web après livraison. Le dernier point de communication concerne donc les correctifs. Lorsque qu un client appelle, Ernest écoute la demande du client et si cela correspond bien à une légère modification, alors il fait généralement les changements dans la journée. 08

11 Les projets : des lignes de codes

12 L ensemble des projets sur lesquelles j ai travaillé ont été développés avec les versions 1.5 et 2 de Thelia. Thelia 2 est donc une solution e-commerce qui intègre Symfony. En effet, nous retrouvons, le modèle et le langage de Symfony dans Thelia. Quelques projets... J ai eu l occasion de travailler sur plusieurs projets dont les plus importants sont : L école du mariage, ACOS, Objectif Action, Cho cantine, Lemonad et Netcopro44. Les prochaines lignes seront réservées à la présentation de chacun de ces projets puis les suivantes présenteront globalement l élaboration d un projet de site web. Début avril - Mi mai L un des premiers gros projets sur lesquelles j ai travaillé est la refonte d un site flash en HTML5. Ce projet avait un double objectif, la refonte du site en HTML et l adaptation du site en responsive. L école du mariage est le site de la psychologue et conseillère en relation conjuguale musulmane Farida Kaced. Elle propose plusieurs rubriques sur son site : une présentation, des informations et des tarifs sur les consultations, des informations et un système de paiement sur les séminaires, des chroniques vidéos et enfin un contact. Les plus grosses difficultés sur ce site étaient de reproduire le site qui existait déjà en HTML et d imaginer le site sur mobile. J ai ensuite travaillé sur le site de ACOS. L entreprise Air Confort Solaire est spécialisé dans le chauffage, la climatisation, la plomberie et le sanitaire. Le projet du clien était une refonte du site web ainsi qu un ajout de plusieurs fonctionnalités. Mi avril - Fin juin Les fonctionnalités demandées étaient les suivantes : responsive design, un back-office pour gérer les contenus, une présentation pour les particuliers et une autre pour les professionnels, un formulaire d entretien SAV relié à un système de gestion indépendant, la présentation des services, la possibilité de créer un compte avec un espace membre et enfin un formulaire de contact 09

13 Il n y a pas eu de réelles difficultés sur ce projet de mon côté. Cependant, c est la première fois que je touchais à Thelia 2 et il m a fallu un petit temps d adaptation pour commencer à comprendre le fonctionnement qui finalement était plutôt semblable à Symfony. Le client ne sachant pas vraiment ce qu il veut, le projet stagne actuellement et c est pour cela qu il dure aussi longtemps. J ai également travaillé sur la refonte du site de l association de chefs d entreprise Objectif Action. Le site permet aux membres de l association de s informer des dernières actualités ou des évènements à venir, d observer le profil de tous les membres de l association et de s inscrire pour les non adhérents ou de se connecter pour les adhérents. Une fois connecté, les adhérants ont la possibilité de voir et modifier leurs informations personnelles et leur dernier bon de réservation (payé ou impayé) pour un évènement. Ils ont également la possibilité de payer en ligne leur participation à un évènement. La principale difficulté est que beaucoup de modules complémentaires à Thelia ont dû être développés pour ce site. C était nos premiers pas dans le back-end de Thelia Cho cantine est un restaurant asiatique situé dans le 10ème arrondissement à Paris. L enseigne n avait jusqu à présent pas de site web e-commerce mais seulement une page vitrine. Le gérant de Cho cantine, Cyril souhaitait un site d où les clients pouvait voir les produits et faire une commande. Les différentes fonctionnalités de ce site sont : la commande en ligne des produits et donc un espace client, le paiement en ligne, un espace presse relatant tous les articles faisant référence à Cho Cantine, une rubrique à propos du restaurant et enfin un formulaire de contact. Il n y a pas eu de grosses difficultés lors du développement du site. 10

14 J ai eu l occasion de travailler sur la refonte du site de l agence. Comme décrit dans la partie sur la communication externe, le site web est un pilier car il représente Lemonad sur le web, c est sa carte d identité, son CV. Il y avait donc un enjeu important avec ce site : faire passer un message, celui de représenter au mieux Lemonad, ses valeurs, ses travaux et son esprit. Les fonctionnalités nécessaires sur ce site sont principalement, le book qui présente tous les projets de l agence, la présentation de l agence qui permet de transmettre les valeurs à l internaute et le formulaire de contact. agence de communication Dans un second temps nous avons voulu implanter la possibilité à l utilisateur de se connecter et de pouvoir faire un devis en ligne ou gérer certaines fonctionnalités s il est déjà client. Le site n est pas encore terminé mais a déjà bien été entamé et avance bien. Il n y a pour l instant pas eut d énormes difficultés. Netcopro est un des derniers sites sur lesquelles j ai travaillé. Netcopro est une agence d entretien d immeubles et de locaux professionnels. Basé sur Nantes, c est Elodie qui avait préalablement fait une plaquette pour eux et la cliente lui avait demandé un site web reprenant un peu la plaquette. La demande de la cliente était donc un site vitrine qui présentait son entreprise et ses services avec un simple espace recrutement et un formulaire de contact. Commençant à m adapter et maîtriser Thelia 2, il n y a eu aucun problème, ni aucune difficultés sur ce projet hormis quelques problèmes de communication et de confusion entre Élodie et la cliente. 11

15 Les différentes étapes de la conception Un projet web est défini en fonction des besoins du client. Cependant, j ai pu remarquer le même schéma pour chaque site développé à Lemonad. I. Le cahier des charges Après avoir accepté le devis, un cahier des charges est établi avec le client pour définir ses besoins et la charte graphique qu il souhaiterait adopter. C est un moment clé du projet, comme nous avons pu l expérimenter lors de notre projet tuteuré, cette étape est cruciale pour le bon déroulement du projet. II. La recherche du template Lemonad étant une petite agence n ayant pas beaucoup de moyens, ni de main d oeuvre, elle privilégie les templates pour les petits projets web car c est un gain de temps énorme. Après avoir établi le cahier des charges et une deadline avec le client, c est la recherche du template qui commence. Pour cela des sites comme themeforest existent et mettent à disposition plein de template payant. III. Intégrer les bases du template Une fois le template en notre possession, il faut l intégrer à Thelia qui pour Thelia 2 utilise un système de triple héritage. Le triple héritage est un fichier unique généralement nommé layout qui contient toute la structure de la page. On insère ensuite des balises spécifiques dans ce code. Ces balises définissent l endroit où sera inséré le code des autres pages. En d autres termes, toutes les pages créer seront une extension du layout, mais chaque bloc est spécifique à chaque page. 12

16 layout.tpl <!doctype html> <html> <head>...</head> <body> <header>... </header> index.html {block name= main-content }{/block} {extends file= layout.tpl } {block name= main-content } <main class= main > <section>... </section> <div class= container >... </div> </main> {/block} <footer>... </footer> <script>...</script> </body> </html> L intégration se passe de la façon suivante : on commence par dupliquer le template par défaut de Thelia et on supprime les fichiers spécifiques à Thelia. On insère les assets du template que l on vient d acheter (les images, le javascript, le css, les fonts). On édite ensuite le fichier layout pour faire nos appels de fichiers qui correspondent à notre template. Enfin on insère le header, le footer et les blocs relatifs au triple héritage. Nous avons donc sur notre page le header, le footer et rien entre les deux. IV. Aller plus loin Les bases sont maintenant posées, nous pouvons créer toutes les pages du client statiquement, puis faire des réajustements sur le template pour qu il corresponde aux souhaits du client. Parfois il ne suffit que de quelques changements mineurs comme un changement de couleur mais parfois il faut développer des morceaux de code à implanter comme un espace client. V. Rendre le tout dynamique L étape suivante est de relier le contenu du back-office sur le front-office, c est-ce qu on appelle rendre le site dynamique car le client n aura pas besoin de toucher au code pour gérer ses contenus. Thelia fait appel à un système de loop/boucle pour rendre le contenu dynamique. Une rubrique Dossiers est présente dans le back-office de Thellia (2). À l intérieur de cette rubrique, l utilisateur peut créer des dossiers et/ou des contenus ainsi que des sous-dossiers etc. En tant que développeur nous avons des balises Smarty du type {loop type= content name= content }{/loop} qui permettent ces dossiers et contenus. La loop que j ai utilisée dans mon exemple est une loop du type contenu mais il existe également des loops de type folder (dossier) ou image. Chaque loop possède ses sorties par exemple la balise {$TITLE} affiche le titre du contenu ou du dossier de la loop. 12

17 VI. Les modules Maintenant que le template est installé et que toutes les pages ont étés créées et rendus dynamiques, certaines fonctionnalités manquent encore pour finaliser le projet du client. Nous avons déjà exploité les fonctionnalités que Thelia nous livre, heuresement il reste encore les modules. Qu est-ce qu un module? Un module est comme un plugin qui se greffe au «moteur» de Thelia et qui permet d ajouter des fonctionnalités. Les modules sont développés par la communauté et sont disponibles sur Git Hub, la plateforme de partage de code source. Il existe par exemple un module pour ajouter la date de naissance à un client dans les formulaires et dans la base de données. La toute dernière étape est donc le développement des modules complémentaires. Heuresement, Thelia permet de créer la structure d un module à partir de fichiers XML grâce à des commandes de console. Les fichiers de configuration de base permettent de définir des nouvelles loops, les tables sql, les services... Nous avons fini de développer notre site, tout est entièrement fonctionnel et conforme aux attentes du client. Le site est prêt à être mis en ligne. La mise en ligne La mise en ligne du site dépend du client et peut se dérouler de deux façons différentes. Soit le client est hébergé chez Lemonad, car Lemonad propose dans ses services l hébergement et la maintenance, soit le client à son propre hébergeur. Dans ce cas-là, il arrive souvent que le client donne ses identifiants à l agence et qu Ernest s occupe de mettre le site en ligne. Cependant, une fois qu il est en ligne, il n opère pas de maintenance. Bien entendu chaque projet, chaque site est différent et ce schéma n est pas vrai pour chacun d eux mais il représente dans la globalité ce que j ai fait pendant mon stage, c est-à-dire du développement sous Thelia 2. Si je devais faire le lien entre les compétences qui m ont été demandées pendant le stage et ce que j ai appris en MMI, je dirais que tout ce que j ai appris m a été utile. De la gestion de projet, aux langages de développement en passant par le graphisme, tout m a servi. 13

18 Conclusion Bilan

19 Bilan professionnel Professionnellement, mon stage chez Lemonad s est très bien passé et a été pour moi l occasion d apprendre et d échanger. Lorsque je suis arrivé à Lemonad, Ernest le gérant et mon tuteur utilisait la version 1.5 de Thelia qui commence maintenant à devenir veille et obsolète. Comme je l ai déjà précisé précédemment, Thelia 2 est développé avec Symfony et Ernest n avait pas le temps d étudier de son côté Thelia 2 pour passer ses projets sous cette version. Grâce à mon arrivée et mes connaissances, nous avons pu passer sous Thelia 2 et ainsi améliorer la qualité de nos projets. J ai pu lui expliquer ce qu était le système de triple héritage et de controller. Tout au long de mes 12 semaines de stage, j ai pu légèrement m améliorer en PHP mais je me rappelle surtout avoir réussi à gérer un formulaire en ajax avec du json et avoir appris Bootstrap. J ai découvert les templates et certaines libraires. Toujours professionnellement, j ai appris plusieurs choses en MMI qui m ont servi lors de ce stage. Premièrement, il y a tout ce qui est en rapport avec les langages de programmation comme le langage HTML et CSS que j ai énormément pratiqué lors de ce stage mais aussi PHP et Symfony que j ai pu apprendre lors de mon projet tuteuré qui nous a permis de passer sous Thelia 2. La gestion de projet m a également aidé à m organiser car j avais beaucoup de projet différent en même temps et chacun avait ses deadlines et ses priorités. Ce que j ai appris lors de mes deux projets tuteurés et les cours de gestion de projet m a permis de gérer tout cela parfaitement. Enfin les cours de graphisme m ont donner le minimum nécessaire pour garder quelque chose de beau lorsque j ai dû modifier des templates ou les améliorer. Ces 12 semaines m ont vraiment permis d acquérir de l expérience, d avoir un pied dans le monde de l entreprise et ici dans le monde des TPE. J ai pu vraiment m épanouir sur les projets qui m ont été données et j en tire un très bon souvenir. D ailleurs je reste chez Lemonad un an pendant mon Bachelor Web en alternance à HETIC. Bilan personnel L expérience que j en tire personnellement est très positive. Je pense que cela m a éclairé sur l orientation que je souhaitais prendre et sur la suite de mon parcours professionnel. Avant de commencer mon stage, je pensais créer mon entreprise et y développer un concept. Par exemple nous avions E-PASS lors de notre projet tuteuré, c est une idée que j aurais pu développer et vendre. À la fin de ce stage, je sais que c est définitivement ce que je veux faire. J ai adoré l expérience que j ai pu avoir de la très petite entreprise et je souhaite commencer ma carrière dans une entreprise comme ça. Les relations que j ai pu avoir avec mon patron, les autres stagiaires ont également été super. J ai su prendre ma place en tant que développeur et proposer mes idées sur les différents projets. Ernest m a fait confiance tout au long du stage et je l en remercie pour ça. Enfin il faut dire que les cours de communication et de théâtre enseigné par Mme Niel et Mme Chassaigne m ont aidé à savoir mieux m exprimer et à faire valoir mes idées. Comme bilan général, je peut dire que je suis très content de ce stage et que tout est positif. J ai eu de la chance cette année et l année dernière d avoir eu la chance de faire ce qu il me plait et de pouvoir aimer mon travail. 14

20 Annexes

21 Tables des annexes Embauche Annexe 1 - Échange de mails 16 Annexe 2 - Mon cv 17 La communication externe de Lemonad Annexe 3 - Le site de Lemonad Annexe 4 - Devis Les outils Annexe 5 - Exemple de balise Smarty Annexe 6 - Back-office de Thelia 2 Les projets Annexe 7 - Site de Objetctif Action Annexe 8 - Site de Netcopro44 Annexe 9 - Site de Cho Cantine Autres Annexe 10 - Convention de stage Annexe 11 - Comparaison entre Ludendo et Lemonad Glossaire Fin! 15

22 Annexe 1 - Échange de mails Échange des premiers mail entre Ernest et moi, au moment de ma candidature spontannée dans son agence en tant que développeur. 16

23 Annexe 2 - Mon cv Exemplaire du CV que j ai envoyé lors de ma demande de stage. 17

24 Annexe 3 - Le site de Lemonad Nouveau site sur lequel j ai travaillé Site actuel de Lemonad Les deux illustrations ci-contre représentent la page book du site de Lemonad. On peut observer que le nouveau site est beaucoup plus clair et aéré. 18

25 Annexe 4 - Devis Exemple de devis pour un client. 19

26 Annexe 5 - Exemple de balise Smarty La capture d écran ci-dessus illustre le début d une page web dynamique sous thelia. Tout d abord nous avons évidamment le extends qui fait appel au layout. Le second block permet de récupérer différentes variables qui seront utilisés par la suite. Les troisième, quatrième et cinquième block sont destinés au référencement avec la gestion des balises title et meta. Le dernier block gère le fil d ariane. Exemple de loop. Cette loop est de type category, c est-à-dire qu elle va chercher dans éléments qui sont des catégories. Thelia impose ensuite de donner un nom à la loop. Plusieurs autres paramètres peuvent être intégrés à la loop. Ici le but est d afficher toutes les catégories donc nous avons une liste et chaque <li> est un lien avec le nom de la catégorie correspondante. 20

27 Annexe 6 - Back-office de thelia 2 Cette capture d écran illustre le catalogue de Thelia. Dans cette rubrique se trouve les rubriques des produits du site Cho Cantine. Le gérant du restaurant à accès à cette partie et gère lui même ses rubriques et sesproduits. Cette capture d écran illustre l édition d une rubrique. Plusieurs champs sont disponibles. Nous pouvons définir le titre et un résumé de la rubrique, lui donner une description, définir son dossier parent, choisir son image... Cette capture d écran illustre les dossiers de Thelia. Tout comme le catalogue, l utilisateur peut gérer ses contenus depuis cette rubrique. 21

28 Annexe 7 - Site de Objectif Action Page présentation d Objectif Action. Cette page n est pas terminée. 22

29 Annexe 8 - site de Netcopro44 Page d accueil de la société de nettoyage Netcopro44. L ésthétique du site a été fait en fonction de la plaquette qui avait été préalablement réalisé. 23

30 Annexe 9 - Site de Cho cantine Page contact du site de Cho Cantine. Le site n est pas complétement terminé et le client n a pas rempli tout ses contenus. 24

31 Annexe 10 - Convention de stage 25

32 Annexe 11 - Comparaison entre Ludendo et Lemonad L année dernière, j ai fait mon stage de 1ère année à Ludendo, l entreprise qui détient plusieurs chaines de magasins dont La Grande Récré. Cette entreprise dispose de plus de 5000 salariés. Je travaillais au service communication interne. L essentiel de mon travail était la réalisation d affiches de communication interne. J ai également codé un petit site mobile dans le cadre d une campagne de sensibilisation sur la confiance en soi. Cette année j ai fait mon stage dans l agence de communication Lemonad. Cette entreprise ne compte que 2 employés dont l un sur la région de Nantes. J ai travaillé dans cette agence en tant que développeur web. L essentiel de mon travail reposait sur la réalisation de site web avec le framework Thelia 2. Après avoir testé la grande entreprise, j ai voulu tester une plus petite du type startup afin d expérimenter les deux environnements et affiner la vision de mon parcours professionnel futur. J ai apprécier les deux expériences mais c est indéniablement le monde de la très petite entreprise que j ai préféré. Ce monde laisse beaucoup plus de libertés au travailleur et lui permet de s organiser comme il le souhaite. Dans le monde du développement web, tout va si vite qu il est important de savoir gérer son temps et savoir/pouvoir prendre des initiatives. 26

33 Glossaire HTML : est le format de données conçu pour représenter les pages web. C est un langage de balisage permettant d écrire de l hypertexte, d où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. CSS : est un langage consacré à la mise en forme des contenus HTML. Apparu vers le milieu des années 90, c est aujourd hui un complément essentiel de tout site Web qui se respecte. Il assure l uniformité des pages et facilite leur maintenance. PHP : est un langage de programmation libre, principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP, mais pouvant également fonctionner comme n importe quel langage interprété de façon locale. PHP est un langage impératif orienté objet. JavaScript : est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs jquery : est une bibliothèque JavaScript libre et multi-plateforme créée pour faciliter l écriture de scripts côté client dans le code HTML des pages web. Ajax : permet de construire des applications Web et des sites web dynamiques interactifs sur le poste client en se servant de différentes technologies ajoutées aux navigateurs web entre 1995 et Smarty : est un moteur de template pour le langage PHP. Il est rapide et permet la gestion des caches. Il facilite la séparation entre la logique applicative et la présentation (d un point de vue du modèle OSI). Bootstrap : est une collection d outils utile à la création de sites et d applications web. C est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. Symfony 2 : est un framework MVC libre écrit en PHP (compatible avec PHP 7). Il fournit des fonctionnalités modulables et adaptables qui permettent de faciliter et d accélérer le développement d un site web. Thelia2 : reprend les principes de méta-langage et de boucles de contenu popularisés par SPIP. Il devient ainsi possible d exploiter des interfaces utilisateurs complètement indépendantes du système, et de les adapter à Thelia par la manipulation de boucles. Ce type de solution permet de concilier une totale liberté dans la création de l interface avec l utilisation d un back office quasiment prêt à l emploi. Template : est un patron de mise en page où l on place images et textes. Aussi, il est souvent utilisé de manière répétitive pour créer des documents présentant une même structure. MVC : est un modèle destiné à répondre aux besoins des applications interactives en séparant les problématiques liées aux différents composants au sein de leur architecture respective. un modèle (modèle de données) ; une vue (présentation, interface utilisateur) ; un contrôleur (logique de contrôle, gestion des événements, synchronisation). 27

34 I made my internship of the second year of my TWO-YEAR TECHNICAL DEGREE Jobs of Multimedia and the Internet in a communication agency situated to Champs-sur-Marne. The name of this agency is Lemonad. It proposes several services bound to the multimedia such as the realization of promotional videos or visual identities print and finally the realization of Websites in any kinds (site shop window, e-commerce). I was a web developer during these 12 weeks. My leading part was to develop sites with Thelia 2, a framework based on Symfony 2. I made several projects for various customers. This internship was the opportunity for me to acquire some experience and improve my skills in Web.