Rapport d activités. Apport de la mobilité à WEBSITO CMS

Rapport d activités Apport de la mobilité à WEBSITO CMS Mezcalito Mezcalito 17 Bvd Agutte Sembat 38000 Grenoble - Tuteur de stage : Laurent Beauvisage - Proffesseur : Hervé Girolet - Universtié : JF LPSMIN 1

Sommaire - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p2 Remerciements - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p3 I L entreprise A Présentation de l entreprise - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p4 B Présentation de l équipe - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p6 C Offres de l entreprise - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p9 D Organisation du travail - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p12 II La mission : A WEBSITO - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p13 B Mise en œuvre du travail - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p16 C Organisation du travail - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p25 III Avis personnel A Points positifs de mon travail - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p27 B Points négatifs de mon travail - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p27 C Conclusion - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p28 IV Annexes A Mes recherches et lectures - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p29 B Quelques photos réalisées - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - p31 Mezcalito 2

Remerciements Mezcalito une agence web dynamique, productive et chaleureuse. Ce sont les quelques valeurs parmi d autres que je retiendrai. Je tiens à remercier mon tuteur de stage, Laurent Beauvisage pour le suivi technique et l implication qu il a eu tout au long de ce projet. Pour le sujet conforme à la formation et les nouvelles technologies ou techniques adoptées, qu il m a conseillé d utiliser pour l accomplissement de mon travail. Je remercie l équipe de Mezcalito, Nicolas Prat, Thomas Pierson, Yannis Sgarra, Servane Fourel, Stéphane Chaloin, Jérémy Bobbio, pour leurs conseils et leurs connaissances techniques. J ai pu acquérir de nouvelles connaissances et une nouvelle approche dans l organisation de mon travail que j expliquerai avec plus de détails par la suite. Je remercie Fabien del Nido, ainsi qu Hassen Temilli, pour avoir pris un peu de leur temps pour répondre a des questions ciblées sur l entreprise et son fonctionnement. Je voudrais remercier également mon professeur Hervé Girolet, qui est venu me voir pour voir comment mon travail avait avancé et si tout se passait pour le mieux. Je remercie pour ainir l Université Joseph Fourrier pour la formation en Service Mobile et Interface Nomade, qui nous a été donnée de suivre ainsi que l opportunité que j ai eu grâce a elle pour faire ce stage. Mezcalito 3

I - L entreprise A - Présentation de l entreprise Création de l entreprise Par leur envie d entreprendre et leur savoir- faire dans le domaine de l hébérgement, la création de site internet, le référencement et le télécom ; Fabien del Nido, Hassen Timili et Laurent Beauvisage fondent Mezcalito en 2006, à l origine dénommée Pamplemoos. Ils investissent 10 000 euros chacun dans la création de cette société coopérative et participative (SCOP) qui hérite de certains clients de leur ancienne entreprise nommée Soprane 1 et rachète une technologie de service de réservation rebaptisée Les Parents Services comptant aujourd hui une cinquantaine de clients et plus principalement des collectivités locales. Une des forces pour démarrer cette activité et obtenir une certaine notoriété est l un de ses plus gros client nommé Twinner. Soprane avait travaillé avec eux de 2004 à 2006 pour présenter l enseigne et offrir un module de réservation de matériel de ski avant d'arrêter son activité. En mai 2007, Pamplemoos change de dénomination sociale pour Mezcalito apportant une image plus signiaiante. Elle dénote son nom d une boisson alcoolisé mexicaine, le Mezcal 2, à base du cœur d un cactus fermenté (l agave). Elle connote par son nom, sa typographie aine, sa représentation et ses couleurs vives ; l esprit et la force qui règnent dans cette jeune SSII. 1 Site de Soprane recupéré par B2F Concept : http://1 www.b2f-concept.com/soprane/ 2 Le mezcal sur wiki : http://fr.wikipedia.org/wiki/mezcal Mezcalito 4

Quelques chiffres Mezcalito est spécialisé dans l hébergement, le référencement, la création de site internet et le télécom comptant environ 300 clients pour différents services. Répartition des produits en fonction du nombre de clients Offre Pourcentage Hébergement 70 % Création de site internet 65 % Référencement 10 % Télécom 25 % Cette SCOP a chaque année une forte croissance économique et compte aujourd hui 9 salariés. Les salariés par le statut mis en place, deviennent associés au bout de 3 ans après avoir investi un capital de 10 000 euros 3. Son chiffre d affaire est estimé à environ 907 900 euros en 2011 contre 440 000 en 2006 soit une évolution moyenne d environ 2.06 % depuis sa création. 1000 2007 2008 2009 2010 2011 2012 750 500 250 0 Evolution du CA Un projet est actuellement en cours pour acheter de nouveaux locaux plus spacieux d ici un an et demi. 3 Fabien del Nido : Chaque associé à Mezcalito doit statutairement atteindre 10 000 euros de capital. Les 4 plus anciens associés (3 fondateurs + Servane) ont atteint ce capital. Stéphane en a moins pour le moment, mais cependant il a une voix, comme les autres. C'est un des fondements de la SCOP, le pari sur l'humain. Information par : http://www.societe.com/societe/mezcalito-491307252.html Mezcalito 5

B - Présentation de l équipe Mezcalito compte 9 salariés dont 5 actuellement associés ayant un pouvoir de décision et de participation. Cette SSII par sa croissance ainancière est déjà dans une optique de créer de nouveaux emplois bien qu elle n ai pas l'envie de devenir une société importante en nombre 4. La direction : Fabien del Nido : Gérant associé A la fois technicien et dans les papiers. Il est responsable des achats, négocie directement avec les clients ou les fournisseurs, veille à la sécurité des installations (les serveurs, matériel informatique,...) ; il gère le bon fonctionnement de l entreprise, organise les réunions d équipe (le plus souvent fait le lundi matin), et passe principalement son temps dans la comptabilité. Laurent Beauvisage : Responsable technique associé Le responsable des techniciens. Il est une encyclopédie à lui seul en matière de connaissance et de savoir faire technique. Très vif, cadré et efaicace, il est aussi bien capable de déléguer à son administrateur réseau, ses développeurs qu a son webdesigner. Il délègue et suit son équipe de près pour être toujours plus en quête de productivité et de performance. 4 Fabien de Nido : Et si nous limitons notre croissance c'est par volonté. Nous ne voulons pas subir notre développement et ne souhaitons pas dépasser les 20 salariés. Mezcalito 6

Hassen Temili: Responsable commercial associé A une parfaite connaissance des produits sans être pour autant un expert dans la technique. Très bon communiquant, son travail consiste à répondre aux appels d offre, à récolter de l information sur le terrain, à gérer les relations client, à promouvoir ses offres... Il est d'ôté aussi d une remarquable humeur et d un certain sens de l humour qui à pour conséquence de mettre à l aise ses interlocuteurs. les salariés : Servane Fourel: développeuse sénior associé Sous windows, sa fonction est de gérer aussi bien l architecture d un site web que son développement. Elle connait différentes technologies (CMS 5 ) pour concevoir des sites internet aussi bien institutionnel que vitrine. Stéphnane Chaloin: développeur sénior associé Stéphane a la fonction de gérer principalement un des outils racheté à Soprane nommé Les Parents Services. Il met en place le produit, le met à jour en fonction du besoin et s occupe de la partie télécom de l entreprise (serveurs vocaux, SMS, minitel,...). 5 CMS : http://www.commentcamarche.net/contents/www/cms.php3 Mezcalito 7

Jérémy Bobbio : administrateur système et réseau Avec son clavier Dvorak 6, il tape plus vite que son ombre. Il gère aussi bien les serveurs interne qu'externe de Mezcalito et s occupe de la sécurité et fonctionnalité du réseau. Il fait des astreintes pour assurer un service d hébergement de qualité. Tomas Pierson : développeur junior Adorateur de linux. Il a la fonction de gérer la programmation avancée de certains sites internet et s occupe un peu du réseau quand l administrateur réseau n est pas là et quand l équipe en a besoin. Nicolas Prat : webdesigner junior Sous mac OSX, il maitrise les outils pour faire des retouches photo, des maquettes de site internet (mock up), mais aussi gérer de multiples langages de programmation pour intégrer des effets sur l image et des feuilles de style. Yannis Sgarra : développeur junior Travail également sous mac OSX. Il touche principalement à la programmation avancée et enrichi certains modules aain de les rendre plus fonctionnels et adaptatifs. 6 Le clavier Dvorak : http://fr.wikipedia.org/wiki/disposition_dvorak Mezcalito 8

C - Offres de l entreprise La société a de multiples offres à proposer à sa clientèle dans l internet, l hébergement ou le télécom. Tout projet n est pas uniquement informatique, il doit être issu d une étude approfondie suivi d un cahier des charges technique et fonctionnel. Site internet : La société propose différents services pour différents supports de communication allant du bureau, à la tablette et au mobile. Elle utilise des solutions open source 7 (libre de droit) pour pouvoir améliorer l intéropérabilité entre différentes fonctionnalités pour une meilleure performance à l usage de l utilisateur. Pourquoi des sites mobiles et non pas des applications? Parce qu un site mobile s adapte à tous les supports tandis qu une application doit être adaptable selon le système et la version du mobile. Par conséquence un surcoût de production non négligeable. Mezcalito propose aussi d utiliser une technologie CMS WEBSITO qui permet de faciliter la gestion de son site internet et d avoir un site à moindre coût. Référencement : La société propose également un service de référencement permettant ainsi de mesurer l audience d un site internet ou d une campagne webmarketing par du référencement naturel ou publicitaire. 7 Open source : http://fr.wikipedia.org/wiki/open_source Mezcalito 9

Référencement naturel : Cette solution permet d avoir un site plus facilement mémorisable (url rewriting) et optimisé pour la recherche sur les différents moteurs de recherche Français. Elle permet également de contrôler ou suivre l audit et le nombre de clics par page, pour pouvoir mener à bien des actions ciblées. Référencement publicitaire : Cette deuxième solution utilise les services de Google Adwords et devient plus couteuse mais place son site sur les premières pages des moteurs de recherche permettant de gérer son coût grâce à un système de facturation au clic. Elle est souvent utilisée pour le lancement d un produit, une promotion, un évènement avec ciblage géographique. Mail Marketing : Le mail est un moyen de se rapprocher un peu plus près d une clientèle cible et permet de communiquer directement une offre auprès de partenaire, client ou prospect. Mezcalito utilise donc l outil Compaign Commander Entreprise 8 permettant de vériaier le taux d ouverture d un mail, le taux de clics et ceci de manière automatisé et programmé... Vente en ligne : Prestashop est l outil sélectionné par Mezcalito pour créer des sites de e- commerce et ainsi offrir à sa clientèle une boutique accessible 24/24h,une hausse de son chiffre d affaire et une gestion de ses produits (stocks, commandes en cours, livraison). 8 Compagn Commander Entreprise : http://www.emailvision.fr/cc_enterpriseedition Mezcalito 10

CMS Websito : Websito a était créé par Mezcalito pour permettre à mont travail. l utilisateur d avoir un site internet facilement administrable et de moindre coût. J en parlerai davantage dans la partie me concernant, car il est le sujet d étude de Hébergement : 3 services sont proposés par Mezcalito Mutualisé, Dédié, ou Virtualisé. Les sites sont tous hébergés sur des serveurs de proximité à Grenoble (Data Center Cogent et Data Center Xsalto). L hébergement Mutualisé : Le moins cher de tous et le moins complet. Le site hébergé est en colocation avec d autres sites sur le même serveur, a un espace limité à 500 mo par DNS, avec des services de gestion des adresses mails et des DNS. L hébergement Dédié : Permet au client d avoir son propre serveur sans partager la bande passante avec d autres sites hébergés. Ils sont surveiller en permanence et dès qu un problème survient, la personne d astreinte est immédiatement informé par SMS et peut opérer rapidement sur le réseau. L hébergement Virtualisé : Celui- ci est un peu la fusion des deux autres types de services et reprend les avantages techniques du dédié et récupère l interface du Mutualisé. Offrant un service moins chère que le dédié. Mezcalito 11

D - Organisation du travail Horaire de travail Toute l équipe de Mezcalito ont environ les mêmes horaires qui débutent le matin à 9h et se ainissent à 12h30 et reprenne à 14h pour se terminer à 17h30 du lundi au vendredi. Certains de l équipe ont des horaires modulés comme Servane, Stéphane ou Jérémy. Servane ne travaille pas le mercredi pour s occuper de son enfant, Stéphane travaille à mi- temps du lundi au mercredi et Jérémy du mercredi au vendredi. Travaillant dans une SCOP chacun est responsable de leurs horaires et valorise a certains moments le télétravail. Réunion d équipe Plusieurs réunions ont lieu par mois. Une chaque lundi pour débriefer sur les projets en cours, trouver des solutions et revoir le planning. Elle est nécessaire pour le bon déroulement des projets et concerne les associés et l équipe de travail. Une autre est consacrée à la technique et ce surnomme le midi de la technique organisée par laurent Beauvisage, généralement de 12h à 13h, une fois par mois. Elle concerne seulement l équipe technique et permet d échanger sur des technologies pouvant être adoptées. Une autre concerne seulement les associés et a lieu elle une fois par semaine. Elle est conaidentielle et ne concerne pas les salariés de Mezcalito non associé. Mezcalito 12

II - Ma mission Délégué par Laurent Beauvisage, l objectif de ma mission était de donner un petit coup de jeune et d apporter la mobilité au CMS WEBSITO 9 mis en place par MEZCALITO en 2008. A - WEBSITO Pour comprendre les différentes étapes de mon projet, il est nécessaire de comprendre comment fonctionne ce CMS (Content Management System) car c est sur cette technologie que j ai consacré mes 3 mois de stage. Websito utilise le modèle MVC dans un cadre de développement PHP (framework) Codeigniter. On peut le voir comme une boite à outil permettant de gagner du temps en terme de développement fournissant une bibliothèque prenant en charge les tâches les plus répétitives. Modèle MVC : les différentes interactions entre le modèle, la vue et le contrôleur. Les lignes pleines indiquent une association directe tandis que les pointillés sont une association indirecte... Il comprend actuellement une trentaine de sites mis en ligne, basé sur trois templates différents qui sont eux-mêmes reliés a un backoffice (partie administrable des différents sites) comprenant trois niveaux d utilisation (utilisateur, administrateur, root). Chaque 9 CMS Websito : http://www.mezcalito.fr/internet/websito/ Mezcalito 13

niveau d utilisateur a une vue spécifique pour gérer le ou l ensemble des sites de Websito. Chaque utilisateur appartient à un groupe de sites avec des restrictions plus ou moins importantes. Le niveau root : A un accès total sur l ensemble du backoffice. Il peut aussi bien gérer les groupes d utilisateurs pour les supprimer, leur attribuer un statut spécifique que gérer également les groupes de sites, les pages et les modules de chacun d eux. Il est attribué aux techniciens de Mezcalito qui s occupent de la maintenance ou du développement des sites. Le niveau administrateur : Peut seulement modifier le contenu des pages pour un ou plusieurs sites du même groupe. Il a également la possibilité de rajouter des modules supplémentaires. Il s adapte au technicien ou la personne du site propre à l entreprise qui gère le site. Mezcalito 14

Le niveau utilisateur : Ce niveau là est très restreint en droit. Il peut seulement modifier les pages du site et rajouter une langue ou d un module déjà attribué. Websito peut gérer plusieurs types de langue, Français, Anglais, Espagnol, Allemand, Néerlandais et charger automatiquement la feuille de style (un document xml) propre au site afin de respecter la charte graphique du site. Le frontoffice comporte 3 architectures différentes (template) et permet ainsi de gagner du temps dans la conception de nouveaux sites. Il suffit simplement de définir une feuille de style différente pour avoir un site complétement différent dans l apparence. Le problème de Websito est qu il n était pas du tout adapté à la mobilité et de plus en plus de clients commencent à vouloir avoir un site qui s adapte à ce genre de support. Mezcalito 15

B - Mise en œuvre du travail Confronté a cette problématique mon travail s est accès sur le frontofaice et le backofaice. Travail sur le frontoffice de WEBSITO L objectif n 1 : Observer les différents templates ainsi que le squelette de chaque site anin de créer un mock up (schéma ou maquette) pour adapter leurs contenus à la mobilité. Cette première étape fut essentielle pour comprendre le fonctionnement de Websito dans l objectif de refondre ce qui était uniquement dédié au desksotp a plus de souplesse et d adaptabilité face aux nouvelles technologies tel que les tablettes et les mobiles. J ai dû faire quelques recherches ciblées sur 4 principes du responsive design, qui sont les grilles aluides, le contenu alexible, les media query et bien évidement le VIEWPORT. Les grilles aluides permettent de cloisonner des composants aixes dans une grille pour pouvoir faciliter le graphisme à l architecture et la mise en place d un style css dans un site internet. Le contenu alexible est une manière de penser avant tout. On oubli le px et on utilise certaine propriété css qui sont essentiel dans cette approche (Mobile airst 10 ) comme le % pour les la 10 Mobile first : http://www.abookapart.com/products/mobile-first Mezcalito 16

tailles, les marges,... des conteneurs HTML (div, ul, span,...) ou le em pour taille des polices contenue dans des blocs tel que (h1, h2, p, span, li,...). Pour plus d information a ce sujet on peut lire la bible dans ce domaine Responsive Design d Ethan Marcotte 11. Media query est une propriété de CSS3 permettant de palier à l attribut «media» de CSS2 de la balise <link /> : media= handheld à la base prévue pour le mobile mais pas utilisé par les navigateurs des mobiles en question qui par défaut lisent media= screen (Ethan Marcotte nous en parle également plus sérieusement dans son livre). CSS3 nous permet donc d utiliser une propriété qui nous permet de définir dans une même feuille de style ou l attribut media le code css qui sera interprété pour une résolution ou une taille spécifique au support de navigation. Enfin le viewport permet de spécifié l échelle et la taille d affichage de la mise en page pour apporter une résolution optimale à l utilisateur. J ai également réfléchit, à comment gérer la détection du navigateur pour savoir si c est du mobile ou du desktop (user agent) et comme le framework Codeigniteur est bien fait, il y a une classe et une fonction prévue a cet effet. 11 Responsive Design par Ethan Marcotte : http://www.abookapart.com/ Mezcalito 17

L objectif n 2 : Trouver un moyen pour que chaque site déjà existant puisse s adapter au mobile et le mettre en place sans toucher à l architecture et en n utilisant que des classes html. Je savais qu il y avait un problème d adaptation sur différent support dû à l architecture des sites qui ne convenait pas a celle du mobile (l afaichage d un tableau à plusieurs colonnes qui sur un mobile dépasserait de l écran, un menu horizontal qui se transforme en dropdown (balise <select> html) ou l afaichage d une image dans une lightbox qui doit s adapter au format paysage ou au portrait et doit s approprier des largeurs maximales du navigateur... Pour remédier a ce type de problème, j ai donc dû faire une initialisation des feuilles de styles en css (Reset CSS, Eric Meyer 12 ) ainsi quand javascript (ajax) pour certain style directement intégré à l architecture html. J ai par la suite,créer un style css de base propre au mobile avec des classes html spéciaique (ex : class= header_mobile ) et ai transformé des contenus aixes en contenus alexibles. J ai également adapté une ergonomie en factorisant des fonctions en javascript pouvant être chargées et utilisées dans chaque site au besoin. Il est presque essentiel de l utiliser si l on veut gagner du temps. En très peu de temps, en n attribuant uniquement des classes HTML et le script js, il est possible grâce à cet outil de formater un site web desktop en site web mobile. 12 Reset css d Eric Meyer : http://www.webcssdesign.com/css/reset-css-eric-meyer/ Mezcalito 18

L objectif n 3 : Résoudre le problème de détection si c est mobile ou desktop et permettre à l'utilisateur de choisir entre les deux types d interfaces. La détection était déjà prévue dans codeigniter 13 cependant il m a fallu créer des fonctions permettant d utiliser la classe php prévue a cet effet aain permettre au navigateur de mémoriser un quelconque support et d autoriser le changement à sa convenance (Mobile ou desktop). J ai pour se faire écrit des fonctions dans un modèle (Codeigniter, MVC Model Vue Contrôler ) de websito permettant de charger les styles css ou javascript en fonction de la détection. Une fois la détection faite, il fallait la mémoriser. L utilisation des cookies était non négligeable. 13 User agent : http://www.codeigniter.fr/user_guide/libraries/user_agent.html Mezcalito 19

L objectif n 4 : Factorisation de différentes méthodes pour appeler des liens css ou js utilisant les technologies pour mininier le code en un seul script et une seule ligne. J ai rajouté une catégorie dans la base de données pour autoriser ou non la mise en place d un site mobile à partir du backofaice. L objectif suit le précédant et permet de trier (en fonction de la détection de l user agent et si l option est permise dans le backofaice) les différents scripts appropriés à l usage. Chaque lien est donc formaté dans un tableau puis miniaié 14 pour encoder et charger tous les scipts et styles en un seul aichier. Cette méthode permet de charger le site plus rapidement ce qui est nécessaire sur un mobile utilisant un réseau 3g, 2g, Hedge,.... L objectif n 5 : Factorisation du code css en less 15 avec gestion des variables... Less est une très bonne technologie pas encore reconnue et adaptée de tous, mais vraiment nécessaire pour ce type de projet. Less sans rentrer dans les détails et dans son apprentissage, permet de rendre le css encore plus intelligent et facile d exploitation. Dans un projet comme celui- ci l'intérêt est de charger le script de base et dans modiaier les variables qui se réfèrent à des propriétés css comme la couleur, la taille, la police,..., est de pouvoir changer la conaiguration d un style du template en quelques déainitions. Il n est donc, grâce a cette technologie qui compile du code less en css, plus nécessaire de re- spéciaier les classes ou les identiaiants de chaque balise html. Ne maîtrisant pas la technologie, j ai dû me documenter et me former sur celle- ci aain de rendre l outil propre et fonctionnel. 14 Minify google : http://code.google.com/p/minify/ 15 LessCSS : http://lesscss.org/ Mezcalito 20

Travail sur le back-office de WEBSITO L objectif n 1 : Refondre le back-ofnice en utilisant deux technologies principales : Twitterboostrap 16 et less. Twitter Bootstrap permet d adapter un design responsive (mobile, tablette, bureau ) en redéainissant des classes html à chaque composant de l architecture. Pour mettre en place cette technologie il m a fallu revoir l ergonomie de chaque vue du backofaice pour en modiaier l interface de base. J ai donc apporté des modiaications importantes à l architecture spéciaiant les classes html attribuées de Twitter Bootstrap. J ai également écrit un aichier less permettant d initialiser le style css des navigateurs de base et d appeler les styles less de Twitter Bootstrap. Pour plus de productivité car il est facile de s y perdre lorsque l on touche à une quarantaine de aichier en même temps, était de faire des recherches ciblées grâce à la console (bash) permettant de lister tous les aichiers contenant un mot spéciaique et éventuellement de le remplacer par un autre... 16 Twitter Bootstrap : http://twitter.github.com/bootstrap/ Mezcalito 21

L objectif n 2 : Rendre le menu de navigation du gestionnaire de site plus ergonomique et adapté à la mobilité. Un bon travail de réalexion pour apporter une meilleure ergonomie a ceux qui existaient à l origine, comme la mise en place de deux moteurs de recherche en ajax permettant de rechercher un type particulié de contenu. Formatage de menu ou de tableau pour alléger la lecture d une page. Il fallait cibler l utilisateur vers des champs spéciaiques à remplir... L objectif n 3 : Adapter un wysiwyg et un manageur de Nichier compatible avec les différents navigateurs ainsi que sur mobile, tablette et bureau. Sur l ancienne version de webstio existait déjà ces outils bien que dépassés par rapport à ce qui se fait aujourd hui en terme de wysiwyg (What you see is what you get) et de manageur de aichier. J ai donc opté pour la technologie Ckeditor 17 et Filemanager 18 qui contrairement à son prédécesseur est compatible et adaptatif sur tous navigateurs. Le seul problème est qu il n était pas géré de la même manière que l ancien. Il m a fallut trouver des solutions pour modiaier le wysiwyg lui- même aain d adapter ce que je voulais faire. Le manageur, quant à lui, 17 Ckeditor : http://ckeditor.com/ 18 Filemanager sur Gihub : https://github.com/simogeo/filemanager Mezcalito 22

apporte de nouvelles fonctionnalités comme l aperçu des aichiers et l ergonomie de l interface. Le manageur n est quant à lui pas adapté au mobile mais seulement aux tablettes de gros format ou au bureau mais n est pas forcément l outil le plus utilisé. Le manageur n est quant à lui pas adapté au mobile mais seulement aux tablettes de gros format ou au bureau mais n est pas forcément l outil le plus utiliser. L objectif n 4 : Factorisation et gestion des styles formatés en xml pour le wysiwyg Une fois les technologies adaptées, il m a fallu lui apporter des fonctionnalités que l ancien avait, mais que lui n avait pas comme la gestion des styles formatés en XML ne lisant uniquement des tableaux d objets javascript. Il m a fallu factoriser un algorithme pour récupérer ce aichier généré par un script php en ajax et dans transtyper son contenu en objet pour le wysiwyg. Mezcalito 23

L objectif n 5 : Correction d un bug et d une fonctionnalité pour la création de page parent ou enfant. Mon projet comportait un bug dans les fonctionnalités du backofaice. Lorsque l on voulait rajouter une page à un site, il rajoutait une page enfant à la page parent. Le sénario de l ancienne version du backofaice n était pas le même. J ai donc mis en place en ajax la possibilité de créer une nouvelle page parent ou une nouvelle page enfant. Finalité du travail Création d un template adapté au mobile pour permettre à l équipe de Mezcalito d adopter et de comprendre les nouvelles fonctionnalités misent en place dans le cms. Mezcalito 24

C - Organisation du travail Plateforme de travail Mon travail a été effectué sur le système d exploitation mac osx Lyon en utilisant différents outils et langages de programmation. Outil de version L outil principal de ce projet est Git 19, qui est un logiciel de version décentralisé. Quand plusieurs développeurs travail sur un même projet, il se peut qu il y ai souvent des problèmes. Les développeurs changent à chaque fois quelque chose et tous les autres développeurs du projet doivent en quelque sorte se mettre à jour. Si les modiaications n'étaient pas aussi bonnes que cela, il devrait y avoir une possibilité de retour à un état antérieur ou de rétablir le code par d'autres moyens. La première solution à ce problème est de créer un dépôt centralisé. Ce dépôt est géré par un système de contrôle de révision/version. Les changements sont généralement identiaiés par un numéro et sont appelés révisions. Par exemple, une première série de aichiers est révision. Lorsque le premier changement est effectué, l'ensemble est la révision. Chaque révision est associée à un horodatage et à la personne qui fait le changement. Les révisions peuvent être comparées, restaurées et avec certains types de aichiers, fusionnées. Je me suis donc familiarisé avec cet outil pour récupérer le projet de base centralisé sur les serveurs de Mezcalito pour faire des améliorations du projet sans écraser celui d origine. Maquette Pour débuter ce projet, j ai utilisé Wireframesketcher 20, un plugin d Eclipse qui m a permis de créer une maquette (mock up) et d orienter mes recherches. Editeur de texte Netbeans, un peu lourd mais faisant son travail et que j ai utilisé après en avoir essayé plusieurs qui ne me convenaient pas. La particularité de cet éditeur en comparaison des autres, est qu il se jumelle parfaitement bien avec le logiciel de version Git et permet de contrôler les différences entre chaque version de aichier créé. Au changement de branche, il 19 Git : http://fr.wikipedia.org/wiki/git 20 Wireframesketcher : http://wireframesketcher.com/ Mezcalito 25

met à jour les aichiers naturellement. Il a un atout concernant l auto complétion, permettant ainsi de gagner du temps dans l écriture et les appels de fonction php ou javascript. Le bash Le bash (shell) est un interpréteur de commande que j utilisais rarement avant ce stage. Il a eu un rôle essentiel pour l utilisation de git (logiciel de version) dans la création de commit, de branch... Mais aussi pour éditer des aichiers avec la commande vim ou pour la recherche et modiaication de mots dans le dossier parent des aichiers du projet avec les commandes grep,perl, emacs, mv, ls,... Navigateur J ai installé différents émulateurs tel que Iphone ou Android pour tester mes avancés sur des supports adaptés au mobile. Les navigateurs comme Chrome ou Firefox ainsi que certaine extension pour changer l user agent ou gérer des cookies, les consoles de débugage m'ont permis d être efaicace dans l écriture de mes scripts. Communication La communication s est faite avec, à partir du réseau Jabber par l'intermédiaire d ichat pour échanger facilement entre chaque membre de l équipe sans avoir à se déplacer ou déranger les autres qui travaillent dans le même espace. Une adresse internet au nom de la société m a été attribuée (theo@mezcalito.fr) pour pouvoir notifier plus particulièrement mes avancés, puis expliquer à mon tuteur les commit sous Git effectué... Et recevoir mon todo list 21 (ma liste de tâche à effectuer)... 21 Laurent Beauvisage : Salut Théo, voici ton todolist... Mezcalito 26

IIl - Avis personnel A - Points positifs de mon travail Un projet dans le contexte de ma formation orienté sur la mobilité et les nouvelles technologies. J ai pris connaissance de différentes technologies que je n avais pas vu auparavant et qui sont aujourd hui adoptées comme git, less, bash, bootstrap... Des outils qui facilitent la gestion d un projet, rendant les tâches plus productives. Ainsi, par ces outils celui qui reprendra la suite du projet n aura pas de mal à comprendre les modiaications pour les adapter. Le fait de travailler en équipe permet de résoudre des problèmes techniques que l'on ne maitrise pas et de rendre le travail plus convivial d autant que l équipe est à l écoute et est toujours prête à rendre service. B - Points négatifs dans mon travail Certaines technologies nécessitaient un apprentissage plus approfondi pour pouvoir les maitriser et les utiliser rapidement. Je me suis donc beaucoup documenté sur certaines pour pouvoir m en servir. Cependant, j ai été confronté à un problème comme le merge d une branch sur git. En faisant cette manipulation, j ai réuni deux branches en une, ce qui n est pas très grave mais rend l utilité de git beaucoup moins intéressante. J ai aussi en utilisant le bash et en changent le statut (pour éditer un aichier avec des droits spéciaiques) écrit des aichiers avec des droits d écritures restreintes à un type d utilisateur. Le problème est qu'en repassant à une utilisation normale, je ne pouvais plus réécrire par dessus ces aichiers car ils étaient déclarés propriétaire. J ai donc fait appel à Thomas qui a résolue ce problème très rapidement. J ai également demandé au webdesigner, Nicolas Partt, s' il avait des solutions pour l ergonomie de certains composants du backofaice. Il m a donné de bons conseils qui ont été validés une fois mis en place comme par exemple : l ajout d un moteur de recherche dans le backofaice. Servane et Yannis m ont également aidé pour ce qui est du fonctionnement de Websito utilisant le Framework MVC de Codeigniter. Mezcalito 27

D - Conclusion Ce stage technique au sein de l équipe Mezcalito, m a énormément intéressé. J ai pu faire la connaissance d une équipe dynamique et chaleureuse, elle sait être à l'écoute, comprendre et répondre aux besoins, tant pour leurs clientèles que pour leurs stagiaires. Ces 3 mois ont été enrichissants d un point de vue technique et m ont permis d acquérir de nouvelles connaissances que je n hésiterai pas a utiliser pour d éventuels futurs projets... Je fais allusion à Git, less, bash qui pour moi ont été l'essentiel dans l avancement et l'aboutissement de ce projet bien qu ils m étaient inconnus. Je me suis vite rendu compte qu ils avaient un rôle extrêmement important pour la productivité de mon travail et l échange entre chaque membre de l équipe. Le sujet choisi par Laurent m a fortement intéressé car il était d ampleur et dans le contexte de ma formation. Un projet qui m a mis au déait, sur mes connaissances techniques, et qui je crois sera utile à la société. Le projet à peine terminé, Hassen l a mis en avant sur une page de leur site internet, et ils en ont déjà quelques retours. Face à ce projet, je me suis rendu compte que mes connaissances et mon savoir- faire pouvait encore s enrichir pour maitriser davantage de technologies et être toujours plus opérationnel. L idée de soi, rejoindre une équipe comme celle de Mezcalito ou de continuer mes études en contrat de professionnalisation est l objectif que je me aixe après ce stage, en quête d apprentissage, et de savoir- faire. Mezcalito 28

lv - Annexes A - Mes recherches et lectures Lecture durant le stage Documentation Bash En plus de l utilisation de Git et de toutes ses commandes, quelques autres qui m ont bien était utile comme grep, perl, emacs/vim, mv, mkdir, ls... : $ grep - r 'btn' /* $ perl - pie 's/remplace/origine/g' > *.php $ git init $ git clone $ git status $ git branch $ git checkout mabranche $ git add - - all $ git commit - am/m 'unedescriptionducommit' $ git merge $ gitk... Mezcalito 29

Gitk permet d afaicher une interface permettant de voir toutes les branches et les commit du projet Documentation en ligne de Codeigniter 1.7 CodeIgniter est un cadre développement (framework) PHP. Il s'agit d'une boite à outils d'aide à la construction de sites web. Son but est de nous permettre d'améliorer le temps de développement de nos projets en fournissant un ensemble complet de bibliothèques prenant à leur charge les tâches les plus répétitives, offrant une interface simple et structure logique pour utiliser ces bibliothèques. Le projet était basé sur Codeigniter 1.7 et non 2.0 disponible a cette adresse : http:// www.codeigniter.fr/user_guide/ Mezcalito 30

Documentation en ligne de Twitter Bootstrap Un outil permettant d intéger un design simple et efaicace pour différent support de navigation. http://twitter.github.com/bootstrap/ Documentation en ligne de LessCss Less étend CSS avec le comportement dynamique comme les variables, les mixins, les opérations et les fonctions. Il fonctionne aussi bien sur le côté client (Chrome, Safari, Firefox) que côté serveur avec la class Node.js et Rhino. http://lesscss.org/ D - Quelques photos réalisées Mezcalito 31

Mezcalito 32