Rapport de stage (2)

RAPPORT DE STAGE
L É O P O L D C H A L A M O N
CONTRIBUTION AU DEVELOPPEMENT D’UN JEU
SERIEUX POUR LES MEDECINS EN TECHNOLOGIES
WEB AU SEIN D’UNE EQUIPE AGILE
M A S T E R 2 C I M / D T
P R O M O T I O N 2 0 1 6 / 2 0 1 7
E N S E I G N A N T R E F E R E N T
T U T E U R D ' E N T R E P R I S E
F R E D É R I C R E Y N A U D
C H R I S T O P H E N E Y
L'ENTREPRISE
AGENCE INTERACTIVE
58 AVENUE DEBOURG
69007 LYON
WWW.AGENCEINTERACTIVE.COM
04 37 37 83 20
LE GROUPE
AFLUENS GROUPE
WWW.AFLUENS.FR

SOMMAIRE
INTRODUCTION
I. ENVIRONNEMENT DU STAGE
A. L'entreprise
B. L'équipe
C. L'organisation de l'agence
D. L'approche agile
E. L'organisation d'un développement
II. INTEGRATION DANS L’ENTREPRISE ET SES PROJETS
ET FORMATION AUX TECHNOLOGIES DE L’AGENCE
A. Produit Minimum Viable (PMV) : formation aux méthodes de montage
HTML de l'agence
B. Office de Tourisme de Madagascar (ONTM) : continuation de ma
formation front et application du PMV
1. Le développement front d'un site basé sur les blocs PMV…
2. ... Et ses problèmes
C. Savoie Mont Blanc (SMB) : première expérience en solo d'un montage
web et approfondissement de mes connaissances
D. OREXAD : première expérience de newsletter
E. Amiens Métropole : participation au projet du montage à l'intégration
1. Le montage, le défi de l’accessibilité
2. La découverte d'un nouveau CMS : EZPublish
III. MES CONCLUSIONS SUR MON STAGE
A. Les compétences acquises
B. Mon intégration dans l’entreprise
C. Conclusion générale
1123 Hillcrest Circle, Minneapolis, MN 55401 • 763-568-5503
hello@shutterspeed.com • www.shutterspeed.com

REMERCIEMENTS
Je tiens à remercier toute l'équipe
d'Agence Interactive pour m'avoir
accueilli dans l'entreprise et intégrés aux
projets auxquels j’ai participé au même
titre qu’un membre de l’équipe de
développement.
Christophe NEY
Je tiens à remercier le directeur de
production Christophe Ney, qui m'a
encadré en tant que tuteur durant mon
stage, ainsi que le président directeur
général Frédéric Gander Jouniaux, qui
m'a accueilli dans son entreprise.
Frédéric GANDER JOUNIAUX
Je remercie toute l’équipe de développement qui
m’a soutenue et aidé à m’intégrer et à développer
mes compétences dans l’entreprise.
Léopold CHALAMON
2016 / 2017
page 3 /

INTRODUCTION
Mon stage de fin d'année de master 2 a commencé le 13 mars 2017 et se finira le
29 septembre 2017, dans l'entreprise Agence interactive, agence spécialisée dans
le développement web.
Ayant déjà effectué un stage dans cette agence l’année dernière et ayant réalisé
des missions en tant que freelance durant toute l’année scolaire 2016 - 2017, il fut
tout naturel pour moi de revenir faire un stage de fin d’études chez Agence
Interactive en tant que stagiaire en développement web.
L'agence est expérimentée et réputée dans le domaine de la communication
digitale. En effet, de nombreux sites touristiques ont été réalisés par l'équipe
composant l'agence. Les nombreuses compétences de l'agence ont permis de
faire de mon stage une vraie opportunité de développement de mes compétences
personnelles.
Voici quelques réalisations de l'agence :
http://www.savoie-mont-blanc.com/
Léopold CHALAMON
2016 / 2017
page 4 /

INTRODUCTION
http://www.tourisme-nordpasdecalais.fr/
http://www.printemps-des-landes.com/
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 5 /

INTRODUCTION
https://www.habitat-humanisme.org/
Au début de mon stage, il a été décidé que je travaillerais non pas au sein de
l’équipe, mais seul, et encadré par Monsieur Christophe Ney, sur un projet pour
l’université de Grenoble de développement d’un “serious game” pour les étudiants
de médecine.
La validation du projet par l’Université prenant du retard, d’autres projets étant
prioritaires sur ce dernier, et étant déjà intégrés aux processus de l’entreprise
depuis longtemps, il a été décidé que je participerais à de plus gros projets, au sein
de l’équipe de développement.
Mon stage n’a donc pas réellement de sujet en particulier mais plus une
composante d’intégration dans l’entreprise et tous ses projets.
Je présenterais en première partie l’entreprise, en deuxième temps les projets
sur lesquels j'ai contribué, et dans un dernier temps je ferais un bilan des
compétences acquises et de mon intégration dans l'entreprise.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 6 /

I. ENVIRONNEMENT DU STAGE
A. L'ENTREPRISE
Agence Interactive est une entreprise expérimentée dans la création de site web.
C’est une société par actions simplifiées basée dans le 7è arrondissement de Lyon.
Elle fut fondée par Frédéric Gander Jouniaux le 10 mai 2000 et est composée
aujourd’hui d’environ vingt personnes.
Elle accompagne ses clients sur le web, les écoute afin de comprendre
précisément leurs demandes et propose des solutions adéquates et innovantes
pour réaliser leurs projets.
Elle intervient sur 4 domaines nécessaires à la conception d’un site :
De par son expérience, l’agence se voit confier de gros projets. Elle réalise des sites
pour toute sorte d’organismes qu’ils soient publics ou privés. L’agence est tout de
même spécialisée dans la conception de site web touristique ce qui lui a valu une
certaine notoriété en France.
Parmi ses clients, on peut citer des offices de tourismes comme la région
d’Aquitaine, de Normandie, de l’Auvergne et des sociétés comme la Caisse
d’épargne, Progress Partner ou encore Lyon City Boat.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 7 /

I. ENVIRONNEMENT DU STAGE
B. L'EQUIPE
L’équipe est composée d’environ vingt personnes réparties en cinq grands pôles.
Le pôle direction composé des membres créateurs et actionnaires, le pôle création
qui regroupe les graphistes, le pôle pilotage qui regroupe les chefs de
projets, le pôle technique pour les développeurs et les intégrateurs et enfin le pôle
marketing.
L’équipe est répartie aléatoirement en binôme dans un OpenSpace. Chaque
binôme comprend une personne expérimentée et une personne plus novice.
L’agence disperse tout le monde afin d’éviter de regrouper les personnes de même
pôle ce qui permet de ne pas former des groupes et de maintenir une bonne
ambiance dans l’agence.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 8 /

I. ENVIRONNEMENT DU STAGE
C. L'ORGANISATION DE L'AGENCE
Chaque projet s’effectue en équipe et chaque pôle est concerné. Un chef de
projet est assigné et dirige une équipe de développeurs, d’intégrateurs, de
graphistes et le webmarketeur. Les responsables développement et création
supervisent le projet.
Chaque personne possède un planning où figurent les projets sur lesquels il
travaille, ce qui permet d’avoir une bonne organisation au sein de l’agence.
D. L'APPROCHE AGILE
L’agence fonctionne en méthodologie Agile. C’est une méthode qui marche sur la
base de l’itératif et de l’incrémental. Les tâches de chaque projet s’effectuent par
ordre de priorité et des phases de contrôle et d’échange avec le client ont souvent
lieux.
L’utilisation de cette méthode permet de s’adapter aux besoins évolutifs du client
ce qui permet généralement de mieux répondre aux attentes de celui-ci. Les
relations avec le client reposent sur une collaboration, et non sur un engagement
contractuel.
La méthodologie agile consiste tout d’abord à faire une liste des fonctionnalités
exigées par le client ce qui produira ce qu’on s’appelle le Product Backlog. Une fois
le Backlog complété, l’équipe qui développe le projet fait une planification de sprint
ce qui consiste à découper le projet en sprint (étape).
Au début de chaque sprint, l’équipe projet réalise un chiffrage en termes de
temps sur les fonctionnalités à réaliser.
Chaque sprint est découpé lui-même en histoires, c'est à dire le développement
d'une fonctionnalité ou d'une tâche d'une certaine taille, découpées elles-mêmes
en petites tâches à réaliser.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 9 /

I. ENVIRONNEMENT DU STAGE
Pour chaque tâche est créé un post-it lié à son histoire, que l'on affiche sur un
tableau dédié au projet dans l’OpenSpace. Tous les post-its sont chiffrés, et
additionné pour chiffrer chaque histoire et chaque sprint.
Le tableau est découpé en trois parties. La première avec les histoires et post-its
"à faire", la partie du milieu, "en cours", et la troisième partie, "j'ai fini" et "on a fini".
Chaque histoires et post-its sont placés à l'endroit correspondant à son statut pour
avoir une vision globale et précise de l'avancement du sprint.
Au cours des sprints, il y a une réunion quotidienne qui dure une quinzaine de
minutes maximum appelée Daily Scrum (mêlée quotidienne). Elles réunissent
l’équipe projet, se réalisent debout et se déroulent devant le tableau où sont
affichés les post-its. Les collaborateurs indiquent à tour de rôle ce qu’ils ont fait la
veille, ce sur quoi ils vont poursuivre et les éventuels problèmes qu’ils ont
rencontrés.
Ces mêlées sont très importantes car elles permettent d’avoir une vue sur le
projet, de savoir ce que font les collègues, de répartir efficacement les tâches, de
venir en aide à ceux qui sont en difficultés et de respecter la timeline.
Lorsqu’un sprint se termine, l’équipe présente les fonctionnalités qui ont été mise
en place au client qui fera ensuite des feedbacks (retours). Cela permet d’avancer
étape par étape et d’anticiper les sprints suivant.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 10 /

I. ENVIRONNEMENT DU STAGE
E. L'ORGANISATION D'UN DEVELOPPEMENT
Le développement d’un site ou d’une application se fait en trois phases : le
développement en local, la mise en préproduction et la mise en production.
Le développeur “monteur” commence à développer la partie front du site en
HMTL, CSS et Javascript en se basant sur les maquettes réalisées par le pôle
création et en s’aidant d’un outil de l’agence basé sur Gulp et Sass, le "kit frontend".
Le produit réalisé, le “prototype” va permettre au client de faire ses premiers
retours sur le design du site. Ce produit est un site statique avec tous les
différents blocs HTML et les différentes pages composants le site.
Ensuite vient la partie développement back du site. Le développeur va créer
toutes les fonctionnalités, via un CMS, tels que WordPress, Rubedo, EZPublish ou
Steno, un CMS développé par l’agence.
Vient ensuite la phase d'intégration du prototype, c’est à dire de la structure
HTML dans les fichiers de templates du CMS utilisé, ainsi que l’intégration des
fichiers CSS et Javascript. L’intégration est régulièrement mise à jour sur un
serveur de préproduction pour permettre au client de continuer ses retours et
effectuer sa saisie de contenu. Le fait de mettre à jour le site sur un
environnement différent permet aussi de tester le site en profondeur.
A chaque retour client, les développeurs repassent par une phase de
développement local, puis de mise en préproduction.
Enfin, dès que le client est satisfait, un passage en production est effectué dans
l’environnement définitif du site. Quelques retours, ou touches finales, sont
éventuellement à prévoir.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 11 /

II. INTEGRATION DANS
L’ENTREPRISE ET SES PROJETS
ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
A. PRODUIT MINIMUM VIABLE (PMV) :
FORMATION AUX METHODES DE MONTAGE HTML
DE L'AGENCE
Le Produit Minimum Viable pour les sites touristiques vient de l’idée de l’agence
de proposer, en lieu et place d’un site totalement sur mesure, d’un ensemble de
blocs HTML, et un ensemble de “gabarits” de pages, dénués de couleur et de
police particulière, censé couvrir tous les besoins des clients en blocs HTML.
Un gabarit de page étant une page avec un haut de page spécifique au gabarit
et un bas de page et un menu communs à tous les gabarits, qui sera composés
des blocs HTML au gré de l’envie du client.
Ces blocs et gabarits sont donc génériques et seront surcouchés d’un style de
police, de couleurs et d'une disposition des éléments déjà existants propres à
chaque sites utilisant les blocs PMV. Ils sont ainsi destinés à être remplis de
contenus (image, texte, lien…) par le client, et placé dans le site où bon lui semble.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 12 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
Un bloc du PMV
L’intérêt réside dans le gain de temps considérable que ce produit aura sur les
créations de l’agence. Les blocs ont déjà un comportement bien défini sur chaque
résolution d’écran, et chaque cas à été étudié avec soin pour éviter de retoucher au
code plus tard.
L’idée, à terme, est que le développeur ne s’attarde plus au montage de même blocs
sur chaque nouveau site, mais que le client choisisse ses blocs parmi la gamme et que
le chef de projet n’ai plus qu’a paramétrer de manière facile et rapide les différentes
couleurs et police propre au site.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 13 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
Le bloc même bloc que précédemment après la surcouche
Le PMV Tourisme est étroitement lié à une solution WordPress développée par
l’agence en parallèle, qui permet la mise en place d’un site, rapidement, avec des
plugins WordPress (déjà existants ou développés par l’agence) préalablement installés.
Cette solution intègre aussi un système sur lequel j’avais travaillé durant mon
précédent stage, qui permet de disposer des blocs HTML sur un gabarit de page,
comme je l’ai dit plus haut, au gré de l’envie du client.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 14 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
Le gabarit de "page type" avant et après la surcouche
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 15 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
C’est à travers le développement front des blocs du PMV que j’ai découvert les
méthodes de montage HTML de l’agence. J’ai intégré l’équipe en charge du
développement du “prototype”, le fameux site statique regroupant tous les blocs
HTML et pages composant le site. N’étant pas familier au développement front, j’ai eu
deux défis en parallèle.
Le premier fut de me familiariser avec l’environnement de développement de
l’agence, un kit front-end basé sur Gulp, un task-runner, SASS un préprocesseur CSS,
Bootstrap, un framework CSS, et JQuery, une librairie Javascript. Ce kit est une base
sur laquelle l’agence commence tout ses projets.
Une structure de fichier est déjà posée pour pouvoir s’y retrouver facilement parmi
les librairies Javascript utilisée, les mixins (regroupement de règles CSS réutilisable de
partout), les variables que nous utilisons beaucoup pour développer plus facilement et
rapidement.
Une structure logique de tous les fichiers CSS et Javascript propres à chaque blocs
est aussi posée pour permettre une aisance de développement.
Le deuxième défi fut de me familiariser avec le CSS avancé, en utilisant la syntaxe
SASS, et ses problématiques telles que le responsive design, et les bonnes règles de
développement CSS, pour un code propre.
Dans un produit tel que le PMV, rien n’est laissé au hasard, et j’ai du redoubler de
rigueur pour apprendre en développant les blocs que l’on m’a confié. Mais j’ai été
encadré par des développeurs experts en développement front, qui m’ont transmis
leur rigueur et leur savoir, ce qui m’a permis développer une expertise pointue en CSS
et Javascript.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 16 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
B. OFFICE NATIONAL DE TOURISME DE
MADAGASCAR (ONTM) : CONTINUATION DE MA
FORMATION FRONT ET APPLICATION DU PMV
1. Le développement front d'un site basé sur les blocs PMV...
Peu de semaines après le démarrage du projet de PMV fut démarré le premier
projet basé sur les blocs du PMV, le site de l’Office National de Tourisme de
Madagascar. Nous avons donc commencé à créer le prototype du site, basé sur les
blocs dénués de style développés préalablement.
Le kit front-end fut créé de manière à ce que des fichiers SCSS (SASS) soient
créés pour chaque blocs pour surcharger les blocs déjà créés. La surcharge à l’air
simple et basée essentiellement sur la couleur et la police mais en réalité, les blocs
PMV ont été créés de manière à ce qu’ils soient le plus génériques possibles. Nous
avons donc du surcharger le positionnement et le comportement d’énormément
d’éléments.
Les blocs du PMV et du site ONTM étant étroitement liés, nous avons dû faire
énormément d’aller retour entre les deux projets pour faire évoluer correctement
l’ensemble.
Une des parties les plus intéressantes du développement fut pour moi le
développement du système de favoris via un système de Cookies. Il intègre aussi
une page listant les événements favoris sous forme de petits blocs HTML, et liés à
une Carte GoogleMap faisant apparaître la position de chaque événements sur la
carte de Madagascar. Ce système a été revu peu après car la demande a changé
entre temps, mais j'ai tout de même appris beaucoup.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 17 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
Le site de l'Office de Tourisme de Madagascar avant et après la refonte par
l'agence
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 18 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
2. ... Et ses problèmes
Le gros problème rencontré ici fut que la phase de recette sur les blocs et
gabarits de page n’a pas été effectué entre le temps du montage du PMV et celui
du montage d’ONTM.
La phase de recette est une phase durant laquelle le chef de projet inspecte le
site, ou le prototype, et note sur un fichier Excel les défauts qu’il voit, ou les
éléments qu’il aimerait changer.
Nous avons donc commencés à développer un prototype basé sur des blocs non
recettés et donc susceptibles de changer radicalement. La phase de recette des
blocs du PMV a été effectuée en même temps que celle des blocs surchargés sur
le prototype d’ONTM.
La pression d’une date de livraison à l’Office de Madagascar du prototype arrivant
vite, nous avons dû redoubler d’efforts pour arriver à un résultat professionnel et
propre. Cette période fut assez difficile car très stressante. Nous avions d’un côté la
pression du développement front d’un produit censé être viable et réutilisable le
plus longtemps possible, donc censé être parfait, et d’un autre côté la pression de
la livraison d’un très gros site pour l’Office de Tourisme de Madagascar.
Cette expérience de travail sous stress fut enrichissante et m'a permis de montrer
ma motivation et de commencer à faire réellement parti de l’équipe de
développement.
Nous avons tous donnés beaucoup de nous-même sur ce projet et la fierté
d’arriver à un résultat propre et qui a satisfait pleinement le client a dépassé les
mauvaises impressions de la réalisation du projet.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 19 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
C. SAVOIE MONT BLANC (SMB) : PREMIERE
EXPERIENCE EN SOLO D’UN MONTAGE WEB ET
APPROFONDISSEMENT DE MES CONNAISSANCES
Suite la réalisation du site Madagascar, et du Produit Minimum Viable, réalisés sur
une période d’environ deux mois, mes compétences renforcée en développement
front m’ont permis d’être assigné au projet de développement front du nouveau site
professionnel de Savoie Mont Blanc.
Le site Savoie Mont Blanc est un gros ensemble de sites de l’office de tourisme
de Savoie, qui est le plus gros client de l’agence. La demande du client fut de
refondre totalement le design du site mais tout en gardant le moteur du site,
tournant sur le CMS EZPublish.
Je fus encadré par un développeur au début du projet pour poser la structure du
kit front-end de l’agence avec moi et me guider. Je me suis très vite retrouvé seul,
mais avec toujours ce soutien et cet encadrement des développeurs, très à l’écoute
et disponibles.
Le projet n’avait pas de difficultés particulières mais avait le mérite d’utiliser un
certain nombre de librairies Javascript intéressantes telles que :
- Pikaday, widget javascript de calendrier que j’ai du surcharger en CSS et autour
duquel j’ai développé un système de remontée d’informations liés à une date
particulière.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 20 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
Le widget Pikaday surchargé par mon application
- Owl Carousel, plugin de slider assez simple.
- LazyLoad, un plugin permettant d’optimiser le chargement des images.
Ce projet m’a permis de passer un cap dans ma maîtrise des technologies de l’agence
et du développement front, et notamment dans l’utilisation de Gulp et des librairies
Javascript.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 21 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
Le site professionnel Savoie Mont Blanc suite à la refonte par l'agence
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 22 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
D. OREXAD : PREMIERE EXPERIENCE DE
NEWSLETTER
Suite aux quelques semaines de développement de la partie front de Savoie
Mont Blanc pro, on m’a donné une première expérience de montage de Newsletter.
Je fus très intéressé car je n’avais encore jamais fait de Newsletter, et avide
d’apprendre de nouvelles choses.
Le développement ne dura qu'une journée, une Newsletter est très rapide à
développer, mais je fus surpris de la difficulté de l’exercice. Une Newsletter a pour
vocation à être lue par un maximum de clients mails, services pas toujours très au
points sur le Css3 et le Html5, voir pas du tout.
La première difficulté est de mettre en place la structure de la Newsletter, se
faisant en tableau HTML, chose que je n’avais pas pratiqué depuis ma découverte
du HTML. Le tableau doit être très bien structuré en fonction des maquettes pour
pouvoir accueillir toutes les informations de la Newsletter. Cela donne au final un
ensemble de tableaux imbriqués dans d’autres tableaux etc…
La deuxième difficulté est l’ampleur des règles CSS non gérées par les clients
mail. Lorsque l’on monte une Newsletter, on est obligé de faire du Web 1.0, sans
utilisation de media queries, ou même ne serait-ce qu’une feuille CSS! Toute règle
CSS doit être directement dans les balises HTML, et le mieux est encore d’utiliser le
plus possible les attributs HTML tels que “align=center”.
La dernière difficulté réside dans la manière de tester la Newsletter. Pour tester
une Newsletter, il faut l’envoyer à chaque client mail pour vérifier le résultat.
Fort heureusement, l’agence possède un compte professionnel sur un site
proposant “d’émuler” l’affichage sur un panel assez conséquent de client mail :
EMailOnAcid. Cela facilite le travail mais ne permet pas de débugger comme sur
une page web classique.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 23 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
Si un élément n’est pas calé, il faut
déduire tout seul d’où vient le
problème. Il faut donc avoir un certain
nombre de connaissances pour être
efficace.
Je dois dire qu’encore une fois que j’ai
été très bien encadré par les
développeurs de l'agence qui n’ont
pas hésité à mettre leur temps à mon
profit pour m’aider sur le projet et à
m’expliquer en détail les tenant et
aboutissant d’une Newsletter.
Ce projet m’a forcé à être rigoureux
et à réfléchir aux fonctionnements de
chaque règles CSS utilisées pour
pouvoir débuggé efficacement.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 24 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
E. AMIENS METROPOLE : PARTICIPATION AU
PROJET DU MONTAGE A L’INTEGRATION
1. Le montage, le défi de l’accessibilité
Fort de mes expériences passées durant mon stage, j’ai intégré l’équipe de
développement du site d’informations de la métropole d’Amiens avec beaucoup
d’enthousiasme. J’ai été sur le projet presque du début à la fin, étant parti en congés
une semaine avant la fin du projet. J’ai participé du développement front jusqu’au
développement et à l’intégration en back.
Concernant la partie front, un tout nouveau défi, pour l’agence comme pour moi, fut
de réaliser un site “accessible”.
Un site accessible est un site qui peut être consulté par tous, que l’on soit
handicapé, mal ou non voyant, sourd ou même dyslexique, ou une personne non
initiée à l’utilisation du Web. Un site accessible doit répondre aux besoins de tous les
utilisateurs : ceux qui n’utilisent pas de souris ou de clavier, ceux qui utilisent des
lecteurs d’écrans…
Il existe des normes d’accessibilités définies par des organismes. Ici, le client nous a
demandé de respecter la norme AA, deuxième niveau d’accessibilité défini par le
W3C. Chaque niveau définit des normes à respecter sur son site pour qu’il soit le plus
accessible possible.
Toutes ces normes ont ajouté une difficulté au développement car rien ne doit être
laissé au hasard durant le montage HTML. D’une manière générale, ces normes
suivent ces 4 préceptes :
- Le site doit être perceptible : tout élément non textuel doit avoir une alternative
textuelle, l’utilisateur doit pouvoir distinguer le contenu de la forme (via les contrastes
de couleurs).
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 25 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
- Le site doit être utilisable : tout éléments d’interface utilisateur doivent être
accessible à la souris et au clavier (pour les outils d’assistance).
- Le site doit être compréhensible : l’utilisateur doit être en mesure de comprendre
l’information et l’interface utilisateur.
- Le site doit être robuste : sa présentation et son accessibilité ne doit pas différer
selon les outils de navigation utilisés.
Nous avons donc dû faire au préalable un travail de veille sur les technologies que
l’on pouvait utiliser, soit accessibles, soit pouvant nous aider à la mise en place de
l’accessibilité, ainsi qu’un travail de veille sur les règles à respecter lors du
développement.
Le site avant la refonte de l'agence
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 26 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
Le site après la refonte de l'agence
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 27 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
2. La découverte d'un nouveau CMS : EZPublish
Après la phase de montage réalisée avec deux collègues, nous avons démarrer la
phase d’intégration et de développement back sur un CMS tout nouveau pour moi :
EZPublish.
Ce logiciel, dont l’édition utilisée à l’agence est gratuite, est développée par une
entreprise norvegienne en PHP. Il intègre un moteur de template propre à lui et basé
sur Twig (un langage de templating), et à une logique très orientée objet, ce qui est
très agréable et facile d’utilisation.
De part mon expérience sur WordPress, je peux
énoncer ma préférence pour l’utilisation
d’EZPublish, de par son côté orienté objet, rendant
la récupération des informations très facile,
contrairement à la logique des templates très
propre à WordPress et plus difficile dès que l’on
veut développer des choses pointues.
Mais d’un autre côté,
le manque cruel
d’informations dans la
documentation du CMS
rend son utilisation
parfois très difficile,
contrairement à
WordPress qui est très
bien documenté.
EZPublosh repose sur un principe de noeuds, où chaque pages et types de
contenus (gabarits, blocs...) possède un noeud propre avec un ID et toutes les
informations liées au noeud.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 28 /

II. INTEGRATION DANS L’ENTREPRISE ET
SES PROJETS ET FORMATION AUX
TECHNOLOGIES DE L’AGENCE
Au delà de l’apprentissage du CMS, aucune difficulté particulière ne se fit sentir
pour moi, étant déjà bien expérimenté en intégration back. Quelque soit les langages
ou CMS, la logique reste la même.
Le seul autre défi fut le développement d’un
système de flux RSS des actualités du site, n’ayant
jamais abordé ce sujet auparavant. Mais le principe
est simple : de générer des fichiers XML avec un
minimum de données par actualités (titre, texte,
image, description…).
Pour moi, ce projet est celui qui s’est le mieux passé, et dans lequel je me suis le
plus senti bien et intégré à l’équipe de développement.
1123 Hillcrest Circle, Léopold Minneapolis, CHALAMON MN 55401 • 763-568-5503
hello@shutterspeed.com 2016 /• 2017 www.shutterspeed.com
page 3 page 29 /