Mémoire de fin d'année : mastère 1 design graphique. Effectué en alternance chez Axones (groupe Neurones)

1. ASHOK RAMASSAMY
WEB DESIGNER / INTÉGRATEUR
MASTÈRE 1 DESIGN GRAPHIQUE
MÉMOIRE 2015 - 2016
UNE SSII DOIT ELLE FAIRE APPEL
À UNE WEB AGENCY OU AVOIR SA PROPRE
ÉQUIPE DE WEB DESIGNERS / INTÉGRATEURS ?

3. Ayant validé l’année dernière ma licence professionnelle, j’ai pu acquérir des bases dans le
graphisme. Je suis aujourd’hui en Mastère 1 Design Graphique à l’IPSSI pour renforcer ces bases
et devenir polyvalent : c’est à dire aussi bien maîtriser mes compétences informatiques que
graphiques.
J’ai été embauché chez Axones en Septembre 2015, où j’ai occupé un poste de web designer/inté-
grateur. Ce poste convenait à mes attentes puisque j’ai pu travailler à la fois l’intégration aux côtés
de développeurs, mais aussi le graphisme, en produisant le plus souvent, des maquettes.
Cette alternance a été pour moi plus que bénéfique, puisque j’ai pu monter en compétences,
mais j’ai également pu gagner en confiance en entreprise. J’ai en effet été en relation avec divers
collaborateurs, mais aussi avec des clients.
AVANT PROPOS

4. 4

5. 5
SOMMAIRE
INTRODUCTION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
01 - L’ENTREPRISE
A - LE GROUPE NEURONES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
B - LA SOCIÉTÉ AXONES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
02 - QU’ATTEND UNE SSII D’UNE ÉQUIPE DEWEB DESIGNERS/INTÉGRATEURS ?
A - LETRAVAIL DE L’INTÉGRATEURWEB . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
B - LETRAVAIL DUWEB DESIGNER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
03 - COMMENT FERAIT UNE SSII SANS UNE ÉQUIPE DEWEB DESIGNER/INTÉGRATEURS INTERNE ?
A - LA MÉTHODE AGILE ET LE PROBLÈME DE COMMUNICATION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
B - L’IMPORTANCE DU DESIGN ET DU DESIGNER . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
C - UNE PERTE DETEMPS ET D’ARGENT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
D - EN CAS DE SOUS EFFECTIFS ET DE CHARGES IMPORTANTES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
CONCLUSION . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
GLOSSAIRE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
REMERCIEMENTS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

7. En ayant occupé un poste de web designer/intégrateur chez Axones, une SSII, j’ai pu comprendre
l’organisation de ma société. J’ai eu l’occasion de travailler avec des développeurs, des chefs de
projets, mais également avec mon équipe de web designers/intégrateurs. J’ai pu faire une analyse
tout au long de mon année. Je me suis en effet demandé si le poste que j’occupais avait une réelle
importance, si le pôle Design Intégration avait raison d’exister. Les SSII n’ont pas systématiquement
un pôle dédié au graphisme et à l’intégration.
De plus, sous traiter un projet peut paraître plus économique et moins engageant pour l’entreprise.
Aucontraire,engagerdesemployéspouravoiruneéquipeinternepeutparaîtrepluscheretestplus
engageant. Mais qu’en est-il réellement ?
Est il vraiment plus avantageux pour une SSII de passer par une Web agency, ou bien
d’avoir sa propre équipe en interne ?
INTRODUCTION
7

9. 01 L’ENTREPRISE
- LE GROUPE NEURONES
- LA SOCIÉTÉ AXONES

10. 10

11. 11
L’ENTREPRISE
A. LE GROUPE NEURONES
1. PRÉSENTATION
DIRIGEANT : Luc DE CHAMMARD
CRÉATION DE LA SOCIÉTÉ : 1985
ADRESSE DU SIÈGE SOCIAL : 205 avenue Georges Clemenceau, 92000 NANTERRE
EFFECTIF : 4580
MONTANT DU CAPITAL SOCIAL : 196.9M€
CHIFFRE D’AFFAIRES 2014 : 399M€
Aujourd’hui à la 12ème place des SSII1
en France, le groupe Neurones a réussi à se hisser en
trente ans parmi les plus importantes sociétés du monde du numérique grâce à une croissance
interne solide. Présente à Paris, Aix-en-Provence, Lille, Lyon et Toulouse , c’est une société
totalement indépendante, contrôlée par son fondateur.
Fin 2014 elle comptait plus de 4500 collaborateurs. Le groupe possède une très grande
solidité financière. En effet, elle possède un chiffre d’affaires de 399M€, des capitaux propres à
hauteur de 196.9M€, un capital stable et détenu à 76% par les associés, et enfin, elle n’a aucun
endettement financier.
1 Société de Services et d’ingénierie Informatiques (voir glossaire)
01
2. FORCE DU GROUPE
SOLIDITÉ FINANCIÈRE :
LeGroupeNeuronesestsolidefinancièrement(180,5M€defondspropres,aucunedette)ets’est
développé principalement par croissance interne.
CAPACITÉ À MOBILISER RAPIDEMENT DES ÉQUIPESTECHNIQUES EN INTERNE :
2800 Ingénieurs et Techniciens au sein du Groupe Neurones. La Direction des Ressources
Humaines du Groupe Neurones a mis en place des procédures de recrutement sous Assurance
Qualité (QCM techniques et entretiens de personnalité obligatoires). Toutes les personnes du
service technique sont sélectionnées pour leurs qualifications.
3. L’ORGANISATION DU GROUPE
Ses multiples entités distinctes font sa force. Elles sont réparties en deux pôles d’activités
complémentaires : l’infrastructure et l’infogérance2
.
ENTITÉS DE L’INFRASTRUCTURE :
NEURONES IT : Conception, intégration & exploitation de systèmes et réseaux
HELP-LINE : Service Desk - Gestion du poste de travail
AS INTERNATIONAL : Ingénierie de production
INTRINSEC :Télé-exploitation de serveurs, Hébergement, Sécurité
PRAGMATEAM : Service Management, Consulting ITIL & Intégration d’outils
RS2I : Ingénierie Informatique & digitale
2 voir glossaire

12. 12
ENTITÉS DE L’INFOGÉRANCE :
CODILOG : Conseil, Intégration, Support &T.M.A.3
EDUGROUPE : Formation informatique, accompagnement du changement
ARONDOR : Expert GED4
et Processus Métiers
FINAXYS : conseil IT pour les métiers de la finance
AXONES : Conseil, Développement & Maintenance d’applications
Par sa force, son organisation et la diversité de son offre, Neurones et aujourd’hui partenaire
avec de nombreux acteurs dans de nombreux domaines d’activités.
3 Tierce maintenance applicative
4 Gestion électronique de documents
FIGURE 1:RépartitiondesclientsdeNeuronesparsecteurs
B. LA SOCIÉTÉ AXONES
1. HISTORIQUE ET PRÉSENTATION GÉNÉRALE
DIRIGEANT : Bertrand DUCURTIL
CRÉATION DE LA SOCIÉTÉ : 2008
ADRESSE DU SIÈGE SOCIAL : 205 avenue Georges Clemenceau, 92000 NANTERRE
EFFECTIF : 130, en constante augmentation
MONTANT DU CAPITAL SOCIAL : 3M€
CHIFFRE D’AFFAIRES 2015 : 12M€
Axones est SSII, affiliée au groupe Neurones, et spécialisée dans les solutions applicatives.
Elleestlerésultatdelafusionen2008detroissociétés:BrainSoft,IDFactoryetInexware.Grâce
à l’expérience apporté par chacune d’entre elle, Axones a très rapidement développé un certain
niveau d’expertise. En effet, elles ont permis de constituer des pôles forfaits et TMA, cumulant
une vingtaine d’années d’expérience et des centaines de projets.
Ceci les a poussés, il y a quelques années, à adopter le plus largement possible les méthodes
de développement agiles, et permis d’expérimenter celles-ci au travers de leurs réalisations.
Aujourd’hui, Axones est implanté à Paris et Nantes, et poursuit son développement grâce à ses
offresdeservicesàfortevaleurajoutéedanslesdomainesdelamobilité,ducloudcomputinget
des plateformes collaboratives

13. 13
2. LES GRANDES CLASSES DE MÉTIERS CHEZ AXONES
Grâceàsesvingtansd’expériencedanslaconduitedeprojetsapplicatif,Axonespeutaujourd’hui
proposer une offre globale de services auprès des PME, ETI et des grands comptes.
Elle conseille ses clients et les accompagne dans l’adoption des innovations les plus adaptées
à leurs usages et à leurs enjeux. Sa double expertise technique et fonctionnelle lui permet
d’être un acteur de référence dans la mise en oeuvre et le déploiement de portails d’entreprises,
de plateformes collaboratives et de réseaux sociaux d’entreprise.
ELLES LUI ONT ÉGALEMENT PERMIS DE PROPOSER À SES CLIENTS UNE
SOLUTION COMPLÈTE ÀTRAVERS QUATRE MÉTIERS :
PILOTAGE DE PROJET :
Direction de projet SI (système d’infor-
mation), urbanisation, qualité logicielle,
planification et cost control .
CONSEIL ET AMOA :
Maîtrise d’ouvrage, études et spécification,
coaching méthodologique.
ÉTUDES ET DÉVELOPPEMENT :
Études et conceptions applicatives,
benchmark et audit, architecture logicielle,
développementapplicatif.
DESIGN INTÉGRATION :
Conception graphique, ergonomie et
intégration.
3. L’OFFRE D’AXONES
L’ACTIVITÉ DE LA SOCIÉTÉ S’ARTICULE DONC AUTOUR DE 4 GRANDES CLASSES
D’OFFRES :
APPLICATIONS D’ENTREPRISES :
-Applicationsdegestionsurmesure,intégrationdeprogicielmétier,conceptiondesystème
d’information complet, CRM* (Customer Relationship Management)
- Plateformes technologiques J2EE ou .Net
- IHM et ergonomie avancées
- CRM et xRM* avec Microsoft Dynamics
APPLICATIONS COLLABORATIVES :
- Intranets, extranets, portails, CMS, Portail J2EE, Microsoft SharePoint
APPLICATIONS DÉCISIONNELLES :
- Reporting traditionnel et OLAP : Business Object, Cognos, Microsoft SSRS/SSAS
- Modélisation statistique avec SAS
- Alimentation & ETL : Informatica, Datastage,Talend
- BI Agile : Qlikview, Birt, Powerpivot
APPLICATIONS MOBILES POUR SMARTPHONE ETTABLETTES :
- Applications iPhone en objective C
Applications multiplateformes en Flex 4.5

14. 14
4. MODES D’INTERVENTION
5. SES PARTENAIRES
Grâceàladiversitédesonoffreelles’estimplantédansdenombreuxdomainesd’activitésetest
devenue partenaire avec les grands acteurs d’aujourd’hui.
FIGURE 2:Répartitiondesclientsd’Axonesparsecteurs
AXONES DÉVELOPPE ÉGALEMENT DES LIENS ÉTROITS AVEC DES ÉDITEURS
MAJEURS :
MICROSOFT GOLD CERTIFIED PARTNER :
Cette distinction lui procure notamment un avantage
commercial auprès des prospects car elle certifie un
niveau d’expertise élevé dans les technologies Microsoft.
IBM :
Dont il implémente de nombreuses solutions (la suiteWebSphere, Cognos, Datastage )
ADOBE :
EtsessolutionsFlexpermettantdedévelopperdesapplications«riches»(RIA)surtouttype
d’écrans : web, desktop,TV connectées, Smartphone ou tablettes.
QLIKVIEW :
Qui propose une solution de reporting très puissante et intuitive et rend les utilisateurs
capabledepersonnaliserdemanièrespousséesleurspropresrapportssansprogrammation.
6. LE CENTRE DE SERVICES
On trouve dans cette société deux activités différentes et pourtant complémentaires.
En effet il y a d’un côté la régie qui consiste à fournir aux clients une assistance technique par
le biais de la mise à disposition de personnel qualifié directement dans leurs locaux.
Et de l’autre une activité interne de recherche et développement, d’acquisition et de
transfert de connaissance grâce à la réalisation de projets à hauteur de 4000 jours/hommes par
ans.
Les activités internes s’effectuent à Nanterre, dans le Centre de Service (CDS), dans lequel j’étais
placé.
Les trois grands pôles de développement au CDS sont le Java J2EE, SharePoint ainsi que le c#.
Nous retrouvons également un pôle Design et intégration, dans lequel j’étais
rattaché avec AntoineVillieu (directeur artistique).

15. 15
7. ORGANIGRAMME : LES COLLABORATEURS DU CDS PAR
ÉQUIPES
FIGURE 3:L’équipedirigeante
FIGURE 4:L’équipecommerciale
FIGURE 5:L’équiperecrutement
FIGURE 6:L’équipeadministration/finance

16. 16
8. L’AGENCE PERSPECTIVE
Suite au manque de suivi après la livraison des projets aux clients, l’agence Perspective a été
créée.L’agencemesurelebesoinetconstruitavecsesclientsunesolutionsurmesure.Samission
estdecréerdel’engagementgrâceàunecommunicationforte,desoutilsnovateursetundesign
adapté. Mais encore, de trouver un concept engageant à partir du besoin exprimé
QU’APPORTE L’AGENCE À SES CLIENTS ?
UN SUIVI DU CLIENT DE A À Z DANS LES PROJETS :
LeschantiersdePerspectiveallientunsavoir-fairetechnique,stratégiqueetcréatifpour
un seul et même objectif : la maîtrise de l’application livrée et un meilleur suivi.
L’agence est au plus près des ingénieurs Axones qui développent et intègrent des solutions
collaboratives: Intranet, extranet, sites e-commerce, applications mobiles, réseaux sociaux
d’entreprise…Ellecollaboreégalement aveclepôleDesignetintégrationquipro-
posedesmaquettes,desvisuelsetquisechargedel’intégrationgraphiquedesapplications.
FIGURE 7:L’équipemanagement
FIGURE 8:Lesrésponsablesdepôles
FIGURE 9:LescollaborateursduCDS

17. 17
LES SERVICES DE L’AGENCE PERSPECTIVE :
CONSEIL EN DIGITAL MARKETING :
SOCIAL MÉDIA :
Pour accroître la notoriété et diffuser l’image de marque sur les réseaux sociaux.
E-CRM5
:
C’est la gestion des relations clients d’une entreprise sur internet ) : Pour que nos clients
puissent garder un lien avec ses clients grâce aux outils digitaux (Sites institutionnels,
newsletters, blogs, campagnes sur les réseaux sociaux, applications mobiles…).
ÉUDE DE POSITIONNEMENT & STRATÉGIE ÉDITORIALE :
Pour analyser la maturité digitale et présenter nos clients comme des entreprises en pleine
maturité digitale.
DIGITAL DESIGN :
WEB DESIGN & INTÉGRATION:
Pour créer un univers : Charte graphique, pictogrammes…
USER EXPÉRIENCE & RESPONSIVE DESIGN:
Pour faire de la navigation, une expérience intuitive ludique et mobile.
CHANGE MANAGEMENT :
STRATÉGIE CONDUITE DU CHANGEMENT:
Pour trouver un nouveau concept qui sera fédérateur et engageant.
COMMUNICATION INTERNE :
Pour accompagner les utilisateurs avec des supports de communication (teaser , plaquettes
) ou des dispositifs attrayants (atelier , événements de lancement …).
5 Electronic Customer Relationship Management (Gestion de la relation clientèle sur Internet)
9. MA PLACE ET MON RÔLE CHEZ AXONES
Placé dans le centre de services au sein
du pôle Design et intégration, j’ai
pu collaborer avec les développeurs
des différents pôles. Également intégré
à l’agence Perspective, j’étais en charge
de l’élaboration de chartes graphiques, de
maquettes responsive ainsi que de l’intégration
graphique.
J’ai eu l’occasion de travailler chez certains
clients, pour des ateliers graphiques, des
missions d’intégrations ou pour des échanges
afin d’élaborer et de valider les chartes
graphiques en fonction du besoin exprimé.
10. MES DIFFÉRENTES MISSIONS :
- L’étude du cahier des charges et l’élaboration
de Zoning
- L’élaboration de maquettes sous Photoshop selon
cahier des charges client
- L’intégration des maquettes sous SharePoint, J2EE,
Drupal ...
- Le recettage avant mise en production
- La gestion des tickets (bug tracking) sur «JIRA»

19. 02 QU’ATTEND UNE SSIID’UNE ÉQUIPE DE WEB DESIGNERS/INTÉGRATEURS ?
- LETRAVAIL DE L’INTÉGRATEUR
- LETRAVAIL DUWEB DESIGNER

20. 20

21. 21
QU’ATTEND UNE SSII D’UNE ÉQUIPE DE
WEB DESIGNERS/INTÉGRATEURS ?
Dans une SSII on retrouve un schéma type dans le déroulement des projets dans les équipes de
web designers/intégrateurs :
- Le zoning et le travail sur l’ergonomie
- La proposition de maquettes graphiques
- L’intégration
Jevaisdoncvousillustrerlesdifférentesétapesdelaréalisationd’unprojetpardescasconcrets.
J’en profiterai également pour vous détailler les attentes de la SSII envers ses designers/inté-
grateurs. Je présenterai dans un premier temps le travail de l’intégrateur pour vous montrer les
contraintes techniques lié au métier. Je terminerai ensuite par le travail du web designer.
A. LE TRAVAIL DE L’INTÉGRATEUR WEB
1. L’EXEMPLE DE SHAREPOINT, UN OUTIL COMPLEXE
POUR L’INTÉGRATION
QU’EST-CE QUE SHAREPOINT ?
SharePointestunoutilcollaboratifpermettantdecréerdessitesweb.Onpeutl’utiliserpour
stocker, organiser, consulter ou partager des informations dans différents types d’appareils
et de façon sécurisée. Chaque utilisateur peut, s’il a les droits, collaborer en modifiant les
fichiers partagés par les autres.
En plus des fonctionnalités natives, les développeurs peuvent en ajouter en fonction des
attentes du client.
02 L’INTÉGRATION AVECVISUAL STUDIO
Visual Studio est un ensemble d’outils de développement permettant de générer des
applications web en ASP.NET.
Sur les deux captures d’écrans qui suivent, nous pouvons voir la page de démarrage du
logicielVisual Studio ainsi que la page CSS du site.
Il faut commencer par ouvrir le projet. L’ensemble des fichiers se trouvent dans l’explora-
teur de solution. Une fois le fichier choisi, le code s’affiche au centre de la page.
FIGURE 10:Captured’écrandevisualstudion°1

22. 22
FIGURE 11:Captured’écrandevisualstudion°2
Si les fonctionnalités commandées par le client sont natives à SharePoint, ma participation
se limite au design des différents éléments grâce au code inséré dans la page de style.
En revanche, si les fonctionnalités sont personnalisées par nos développeurs, alors
j’interviensautantdanslespagesciblesavecl’utilisationdecodeHTMLquelapagedestyle
CSS du projet.
EN QUOI L’INTÉGRATION PEUT ÊTRE DIFFICILE ?
Que se soit sur SharePoint ou d’autres environnements utilisés par les SSII, le principe reste
le même. La structure HTML de SharePoint est prédéfinie. Il est difficile de la modifier et
d’y insérer du code HTML. L’intégrateur doit donc savoir lire le code du développeur afin
d’identifier les différents éléments de la page. S’il rencontre des difficultés, il doit collaborer
avec le développeur pour retrouver les pages correspondantes, et les lignes de code où il
peut insérer sa structure HTML.
Comme vous pouvez le constater, la structure de SharePoint est complexe. Nous retrouvons
plusieurs composants de SharePoint qui sont difficilement modifiables. Il faut alors ajouter
de classes ou des id pour pouvoir effectuer tout changement de style.
Afin de mener ses projets à bien, la SSII doit donc avoir à disposition une équipe
disponible, qui puisse communiquer avec ses développeurs, et qui ait de
préférence des compétences techniques pour avoir une meilleure coordination.
FIGURE 12:Captured’écrandequelqueslignesdecodeHTML

23. 23
2. CAS PRATIQUE : L’INTÉGRATION POUR RTE,
UN PROJET J2EE
CONTEXTETECHNIQUE
Codilog, une société appartenant au groupe Neurone, était sur un projet pour le client RTE.
N’ayantpasd’équipededesigner,etnesouhaitantpasemployerunewebagencyparsoucis
detempsetdecoûts,l’entrepriseafaitappelàAxones.Lesdeuxsociétésontdonccollaboré
sur le projet.
Je me suis chargé de la refonte graphique du projet et de son intégration.
L’application est vieillissante, aussi bien graphiquement que dans sa structure du code.
En effet,
- Le HTML n’est pas fait avec des“DIV”mais avec des“TABLE”
- Les classes sont mal utilisées sur l’ensemble du site : les éléments similaires n’ont
pas forcément les mêmes classes suivant les pages
- Les différentes zones du site ont été séparées en différents fichiers HTML générés
par le code J2EE. Il y avait une page pour le header, le contenu, le menu, le footer, les
différents onglets de la page, et les différents tableaux présents sur le site.
Face à ces contraintes techniques, l’intégration a donc demandé plus de temps que les autres
projets de refonte que j’ai eu. J’ai dû faire en sorte de changer le moins possible la structure
HTML, et ne modifier qu’essentiellement le fichier CSS. Mais dans certains cas, je n’avais pas le
choix.
Lorsque j’avais besoin de rajouter des classes HTML, je devais chercher la ligne de code
souhaité dans l’ensemble des fichiers du site, ce qui demandait beaucoup de temps puisque les
élémentsHTMLsontsouventgénérésautomatiquement.J’aidoncdûcollaboreraveclesdifférents
développeurs de chez Codilog, mais aussi d’Axones. L’environnement de développe-
ment étant installé chez Codilog, j’ai dû me charger de l’intégration graphique dans leurs
locaux. Je n’ai pas pu avoir accès à l’environnement de développement chez Axones, car son
installationdemandedutempsetquesonaccèsestlimitéauxpersonnesayantaccèsauréseaude
l’entreprise (Les réseaux de Codilog et Axones n’étant pas reliés).
3. JAVASCRIPT ET LES NOTIONS D’ACCESSIBILITÉS
Sur certains projets d’intégration, il est difficile de modifier la structure HTML
decertainséléments.Eneffet,certainscomposantssontnatifsauxenvironnementsutilisés,cequi
empêchetoutemodificationdirectedanslesfichiersduprojet.Afindecontournerleproblème,la
solutionrapideetefficaceestdepasserparducodeJavaScript1
etlesbibliothèquesJQuery2
.
NouspouvonsainsimodifierlastructureHTMLdefaçondynamique(ajouts/déplacementsde
classes, de balises …), mais aussi créer des animations.
Certains clients donnent une grande importance à la notion d’ergonomie et d’accessibilité.
L’intégration doit évidemment suivre des règles de bonnes pratiques (respecter la sémantique
des balises, remplir les attributs alt sur les images …).
En plus de ces bonnes pratiques, des notions d’accessibilités existent pour que les malvoyants
par exemple puissent naviguer sur le site sans difficultés.
EXEMPLE : LE CRÉDIT AGRICOLE :
Voici un aperçu du site et du menu qui a été intégré pour un intranet :
1 Voir glossaire
2 Voir glossaire

24. 24
FIGURE 13:CréditAgricoleIntranet:paged’accueil

25. 25
FIGURE 14:CréditAgricoleIntranet:menu
FIGURE 15:CréditAgricoleIntranet:menusurvolé

26. 26
Chaque rubrique du menu contient plusieurs sous rubriques.
Pour que l’intégration respecte les normes d’accessibilité, il faut que les éléments du menu
soient visibles et interprétables par tout appareils de lecture pour malvoyants, même s’il
n’est pas affiché sur l’écran.
Il existe un moyen de savoir si le site peut être parcouru par un interpréteur vocal : il suffit
d’utiliser la touche“TAB”de votre clavier. Si les éléments de la page sont sélectionnés un à
un dans l’ordre, alors le site est est adapté aux normes.
COMMENT AVONS NOUS PROCÉDÉ POUR QUE LE MENU RESPECTE CES NORMES :
Pour que chaque élément soit parcouru dans l’ordre en appuyant sur la touche“TAB”, il faut
d’unpremiertempss’assurerquelastructureHTMLsoitbonne:Nousavonsdécidéd’utiliser
la structure en“ul li”avec les différents niveaux d’importance (“ul”est un titre père et ses
“li”sont ses titres fils).
Ensuite, nous avons besoin d’utiliser du JavaScript. Comme je l’ai dit précédemment, tous
lesévènementsdoiventêtreprésentsurlesite,mêmes’ilsnesontpasaffichés(doncpasde
“display:none;”ou toutes propriétés équivalentes).
Au préalable dans le CSS:
Nous initialisons la hauteur du conteneur à 0px en lui appliquant un “overflow:hidden”.
Ainsi, tous les éléments enfants en dehors des limites du parent seront masqués ( pour
l’utilisateur seulement, en réalité ils sont présents sur l’écran).
FIGURE 16:codeHTML:structure«ulli»
Comme les éléments du menu ne sont visibles uniquement lorsqu’ils se situent dans les
limites de son parent, il suffit d’augmenter la taille du parent dynamiquement en fonction
de la hauteur du contenu à afficher (des enfants). Ainsi les éléments du menu se retrouvent
dans le conteneur, ils sont donc visibles.
C’esticiqueJavaScriptintervient:pourmodifierdynamiquementlatailleduconteneur
en fonction du contenu à afficher.
FIGURE 18:codeJavaScriptdumenu
FIGURE 17:codeCSSdumenu

27. 27
Nous avons ici le cas où un élément du menu est survolé ( par la souris ou via la touche
TAB),etlorsqu’ilnelestplus.Nouscalculonslahauteurdesoncontenu(enluiajoutantune
margede10pixels)puisnousluiappliquonsuneanimationquivaagrandirleconteneurde
façon fluide.
Comme vous pouvez le constater, ces manipulations peuvent nécessiter
des compétences d’intégration plus avancées. Cet exemple illustre la
complexité de l’intégration. En effet, l’intégrateur, doit communiquer constam-
mentaveclesdéveloppeursafind’ajouterdesclassesauxbalisesHTML.Ilarrivetrès
fréquemment que les éléments HTML auxquels nous voulons ajouter
des propriétés, ne soient pas accessible dans le code. Il faut alors passer par du
JavaScript pour les cibler et ajouter les propriétés voulues.
De plus les développeurs n’ont souvent que des bases en intégration, et ces
derniers ne connaissent pas toujours les règles de bonnes pratiques. Le devoir
de l’intégrateur est aussi de lui montrer comment structurer la partie HTML.
Sanscettecollaboration,ilestpresqueimpossiblepourl’intégrateurdefaireson
travail.
4. LES DERNIÈRES ÉTAPES DU PROJET
LA QUALIFICATION
Après avoir intégré le projet, un collaborateur de notre agence passe sur une phase
de recette interne appelé qualification.
Elle consiste à vérifier la conformité des capacités et des fonctionnalités du projet
par rapport aux spécifications techniques.
Pendant cette phase, le collaborateur effectue différents tests afin de déceler le moindre
bug ou problème sur le site. Si le client a envoyé un jeu de test à effectuer, le collaborateur
effectue les différents tests avant d’envoyer le package au client.
LA LIVRAISON
La livraison consiste à envoyer au client un «package» du site qu’il pourra par la suite
installer dans son environnement.
LA RECETTE
Enfin, après que le client ait reçu et installé le package de son site, celui-ci effectue
différentstestsdenavigation,depriseenmain,debonfonctionnementdesfonctionnalités
demandées.
C’est la phase de recette. S’il retrouve des erreurs qui nous auraient échappé pendant la
phasedequalification,leclientpeutnousremonterceserreursgrâceauxdifférentslogiciels
de gestion de «tickets». Dans notre cas, l’outil utilisé s’appelle“JIRA”.
Voici comment se présente cet outil :

28. 28
FIGURE 19:JIRAaccueil

29. 29
FIGURE 20:JIRAdétaild’unticket
Sur la première capture, nous avons l’interface JIRA. Nous retrouvons à droite un bloc avec
les tickets qui me sont attribués.
Sur la seconde capture nous avons le détail d’un ticket. Nous retrouvons souvent une pièce
jointe pour avoir un détail de la demande. Puis en dessous, un texte expliquant le besoin.

30. 30
B. LE TRAVAIL DU WEB DESIGNER
1. LE ZONING
Le zoning est un découpage de la page en zones. Cela permet
de positionner les éléments comme la zone de navigation, les
contenus, le logo, le pied de page, ou encore le fil d’Ariane.
En fonction du cahier des charges du client, l’ergonomie du site se
fait dès le zoning.
Avant de passer à la réalisation concrète de la maquette du site,
le zoning nous sert à décrire les différentes zones et d’entrevoir
les fonctionnalités. Il donne au client les moyens de se projeter et
d’effectuer quelques modifications avant le passage aux
maquettes qui présentent l’allure graphique.
Le zoning offre un aperçu plus ou moins réel des maquettes.
Il peut servir par exemple à placer un menu avec beaucoup de
rubriques et d’estimer la place qu’il pourrait prendre au pixel près.
Il permet également de hiérarchiser visuellement les informations
sur la page et de travailler l’ergonomie.
La personne en charge de la création des maquettes peut ensuite
prendre en compte tous ces éléments.
Voici un exemple de zoning :
FIGURE 21:ZoningIMERYS
Ce zoning fait avec le client lors d’un atelier graphique reprend ses attentes en terme de contenu et d’ergonomie.
- Le logo en haut à gauche
- Une barre de recherche, le changement de langue et la connexion utilisateur en haut à droite
- Au centre, le contenu avec une image
- Enfin un footer avec des liens
Voici la maquette que j’ai produit en fonction de ce zoning, elle reprend l’ensemble des éléments demandés:

31. 31
FIGURE 22:Maquettecrééeàpartirduzoning:IMERYS

32. 32
2. LES ÉCHANGES AVEC LE CLIENTS JUSQU’À VALIDATION
DES MAQUETTES
LES ATELIERS GRAPHIQUES
Après le placement des éléments et le travail sur l’ergonomie ( qui peut être faite par le
client au préalable dans certains cas), les graphistes peuvent participer à des ateliers
graphiques afin d’avoir un premier contact avec le client et d’avoir directement ses attentes
au niveau du visuel.
Préparation à l’atelier graphique, l’exemple du projet RTE:
Pour le projet RTE je me suis chargé de la refonte graphique du projet. L’application
vieillissante avait besoin d’avoir un visuel plus travaillé et moderne. Mais comme elle a été
développée il y a plusieurs année, les techniques employées sont aujourd’hui obsolètes :
ellen’estpascompatibleaudessusd’internetexplorer6,etlastructureHTMLestchaotique.
En effet :
- Le HTML n’est pas fait avec des “DIV” mais avec des “TABLE”, ce qui n’est plus
utilisé de nos jours pour les sites web car la structure en tableau est difficilement
maintenable. Il existe aujourd’hui des bonnes pratiques dans le web pour
l’intégration. L’utilisation de tableau ne fait pas parti de ses règles.
- Les classes sur le site ont été utilisées de manière non rigoureuses : les éléments
similaires sur l’ensemble du site n’ont pas systématiquement les mêmes classes. La
modification devait donc se faire manuellement sur l’ensemble des pages.
- Les différentes zones du sites ont été séparées en différents fichiers HTML générés
par le code J2EE. Il y avait une page pour le header, le contenu, le menu, le footer, les
différents onglets de la page, et les différents tableaux présents du site.
J’aidoncdûfaireuneanalysedelastructureducodeavantlaproductiondesmaquettes.J’ai
pu savoir ce qu’il serait possible de réaliser en fonction des délais.
Il a donc été décidé de ne changer que l’allure du site de façon superficielle sans
modifier l’organisation des éléments.
Voici un aperçu du site avant et après la refonte graphique :

33. 33
FIGURE 23:Capture,pagelogin

34. 34
FIGURE 24:Capture,pagetableau

35. 35
Et voici maintenant les maquettes que j’ai réalisé
FIGURE 25:Maquette,pagelogin

36. 36
FIGURE 26:Maquette,pagetableau

37. 37
Sur les maquettes réalisées, plusieurs éléments de la charte graphique qui ont été définis :
- le header avec les pictogrammes et le logo
- les titres
- le menu
- les tableaux
- les formulaires
- les boutons
- les checkbox
Face aux nombreuses contraintes techniques, le visuel des maquettes n’est pas très
moderne. Il est néanmoins meilleur que l’application existante.
D’après cet exemple, nous voyons qu’il est bien préférable à une SSII d’avoir
sa propre équipe de web designer/intégrateurs. En effet l’équipe doit faire
de multiples allers retours avec le client jusqu’à la validation finale. Elle doit
également avoir des compétences techniques et collaborer directement avec les
développeurs afin de faire une analyse avant le maquettage. De plus, présenter
au client une équipe externe peu poser des soucis de crédibilité.
BILAN
Le web designer/intégrateur, dans une SSII, doit être polyvalent. En effet en plus de se
charger de la création des maquettes et de l’intégration, il doit être capable de :
- Communiquer avec les développeurs
- Lire du code afin d’intégrer sa structure HTML et d’analyser sa complexité et ses
contraintes pour pouvoir proposer des maquettes réalisables
Ildoitégalementfaireplusieursallersretoursavecleclientsetlesdéveloppeurs.Doncildoit
être à proximité de la SSII. Une équipe interne permettrait donc de limiter les problèmes de
communication, donc d’économiser du temps, et donc de l’argent.

39. 03 COMMENT FERAIT UNE SSII
SANS UNE ÉQUIPE DE WEB DESIGNERS/INTÉGRATEURS INTERNE ?
- LA MÉTHODE AGILE ET LE PROBLÈME DE COMMUNICATION
- L’IMPORTANCE DU DESIGN ET DU DESIGNER
- UNE PERTE DETEMPS ET D’ARGENT
- EN CAS DE SOUS EFFECTIFS ET DE CHARGE IMPORTANTES

40. 40

41. 41
03
FIGURE 27:FonctionnementdelaméthodeAgile
COMMENT FERAIT UNE SSII SANS ÉQUIPE DE
WEB DEISGNER/INTÉGRATEUR INTERNE ?
A première vue, sous traiter un projet peut paraître économique, moins engageant. En
effet l’entreprise choisi son sous traitant en fonction de ses tarifs, des compétences créatives
ettechniques.Ilpeutêtrechangéàtoutmoment.Aucontraire,engagerdesemployéspouravoir
une équipe interne peut paraître plus cher et est plus engageant.
Mais est il vraiment plus avantageux pour une SSII de passer par uneWeb agency ?
A. LA MÉTHODE AGILE ET LE PROBLÈME DE
COMMUNICATION
Le problème de la communication entre l’équipe de designer/intégrateur avec le reste de
l’équipe et le client peut engendrer un sur-coût lié à la gestion de projet.
1. PRÉSENTATION MÉTHODE AGILE
La méthode Agile est une méthode de gestion de projet qui va à l’encontre
des traditionnelles. Les moyens classiques visent à demander au client la détail
de son besoin. La SSII entre alors en phase de réalisation jusqu’à la phase de recette. Il n’y
a donc pas de visibilité ni pour la SSII, ni pour le client. De plus la réalisation se base sur les
besoins exprimés au début du projet.Tout changement est difficile et un déphasage avec le
besoin initial est souvent constaté.
La méthode Agile, elle, est plus flexible. Les spécifications du client peuvent évoluer à tout
moment,cequiévitedetravaillersurdesfonctionnalitésquiserévèlentfinalementinutiles
à l’usage. Au contraire, de nouvelles découvertes en cours de route,peuvent donner plus
de valeur au produit. Il y a cependant des règles à respecter. Dans la méthode Agile, nous
partons d’un point A pour arriver à un point B, qui est la fin du projet. Mais le chemin ne se
fait pas en une seule fois. Entre le point A et B, nous avons plusieurs points intermédiaires
avec le client. Nous avons ainsi plusieurs courts objectifs et de nouvelles spécifications
peuvent être ajoutés ou modifiées en fonction de l’avancée du projet.
2. UNE DIFFICULTÉ À SUIVRE LE PROJET POUR LA WEB
AGENCY
Comme je l’ai décrit précédemment, la méthode Agile nécessite de multiples allers
retours avec le client et l’équipe. Il faut que les designers puissent suivre l’évolution du
projet et les nouvelles spécifications du client.
Par soucis de temps, toutes les pages ne sont pas maquettés. Le designer se charge
de la création des différents gabarits ( comme les formulaires, les boutons, les titres,
les paragraphes …). L’intégrateur doit ensuite travailler en étant le plus fidèle
aux maquettes. Il doit ensuite avoir la validation du client. Ils doivent donc échanger
à plusieurs reprises.
Faire appel à une web agency engendrerait des frais supplémentaires. En effet,
les développeurs devraient faire des points réguliers avec la web agency, ce qui demande
du temps, du travail et donc des frais supplémentaires.

42. 42
B. UNE PERTE DE TEMPS ET D’ARGENT
En plus d’engendrer un surtout lié à la difficulté de communication, employer une web
agency peut avoir d’autres inconvénients :
- La réactivité : une nouvelle équipe peut avoir des difficultés à se
coordonner avec les équipes de la SSII et avoir ses habitudes de travail.
- La réalisation n’est pas toujours possible : en effet, les web agency proposent
des visuels souvent très élaborés et aux goûts du jours. Cependant, dans une SSII
ceci n’est pas toujours possible. Si le designer ne connaît pas les contraintes des
techniquesemployées,l’intégrationpeutêtredifficile,voireimpossibleavecletemps
et le budget donnés.
- La perte de temps : il est plus rentable d’avoir sa propre équipe, de la former afin
qu’elle exécute les missions rapidement. Elle aura les bons réflexes et habitudes des
projets en SSII et sura se coordonner à l’ensemble de l’équipe.
La perte de temps est considérable. En effet, les développeurs ont besoin d’installer
un environnement de développement pour pouvoir travailler. Cela peut
demander quelques jours. Ces derniers sont installés sur des machines virtuelles acces-
siblespartouteslespersonnesprésentesdansleslocaux.Lesintégrateursdoiventégalement
travailler via ces environnements pour pouvoir se charger de l’intégration graphique.
Si nous faisions appel à une web agency, des jours seraient facturés pour l’installation de
l’environnement.
L’avantage d’avoir une équipe interne, est que les designers et intégrateurs ont le soutien
deséquipestechniquesetilscollaborentdanslaréalisationduprojet.Encasd’unbesoin
de modification de la structure html, les développeurs peuvent intervenir immédiatement
et directement sur le poste de l’intégrateur ( ou en passant par la machine virtuelle qu’il
utilise). Alors qu’avec une web agency, il faudrait compter le temps que la demande soit
faite, que la SSII la traite pour ensuite faire une livraison. Si le contenu de la livraison ne
convient pas, il faut répéter l’opération. La perte de temps est donc considérable.
De plus, avec une équipe interne, la SSII gère elle même le budget du projet. Alors qu’avec
une web agency, des frais sont comptés pour chaque personnes intervenues sur le
projet ( directeur artistique, ergonome, designer, intégrateur ...). Avec une équipe interne
polyvalente, les frais sont ainsi réduits.
Enfin, toutes les réunions que l’équipe peut organiser avec ses collaborateurs sont facturés
par la web agency pour le temps passé.
Il y a ainsi de nombreux frais supplémentaires engendrés par le fait de faire appel à une
agence.
LE PROJET SHAREPOINTTHEMIS
Un exemple, un essai avait été fait pour un projet SharePoint pour tester l’efficacité
desdéveloppeursàintégrerlesmaquettes.Afindeleurfaciliterletravail,lesiteaétéintégré
avec bootstrap.
Voici les maquettes que j’ai réalisé pour le projetTHEMIS :

43. 43FIGURE 28:Paged’accueilThemis

44. 44
FIGURE 29:PageinterneThemis

45. 45
Nous avons choisi de confier l’intégration de ces maquettes aux développeurs car le design
est simple à mettre en place et approprié pour un premier essai.
Sur ces maquettes, nous avons plusieurs gabarits qui sont à prendre en compte pour
l’intégration :
- Le header
- Les formulaires
- Les menus ( deux niveaux)
- Le slider
- Les titres
- Les zones de texte
- Le footer
COMMENT AVONS NOUS PROCÉDÉ :
Après la conception et validation des maquettes, je me suis chargé de faire une pre-
mière version de l’intégration : simplement un fichier HTML/CSS. J’ai également fait un
découpage des images pour faciliter le travail de l’intégrateur.
Le développeur en charge de l’intégration a ensuite commencé avec les éléments que je lui
aifourni.Malgrécela,j’aidûintervenirsurleprojetpourl’intégrationensoutienàplusieurs
reprises.
Une semaine était prévue pour l’intégration de 7 pages (avec 8 gabarits présents).
Finalement, elle en a prit deux, les délais ont été dépassés et beaucoup de temps a été
perdu.
Il est donc évident que le fait de ne pas avoir de réel intégrateur peut nuire à la
productivité de l’entreprise, donc lui faire perdre du temps et de l’argent.
C. L’IMPORTANCE DU DESIGN ET DU DESIGNER
Le design a aujourd’hui une place très importante. Certains peuvent penser que les
développeurs sont plus importants car se sont eux qui font fonctionner les applications, les
designer ne viennent que décorer l’existant. Mais c’est faux ! C’est le designer qui pense à
comment doivent fonctionner les choses.
Un exemple pour illustrer cette importance,Windows et Apple :
Windows,quiavaitlongtempsétéleleaderdanssondomaine,s’estfaitrattraperparApple,
son concurrent. En grande partie car Apple a su être à l’écoute des tendances. Windows a
prit le parti de les ignorer, ce qui a provoqué un échec stratégique. Ce n’est qu’à partir de
Windows 8 que nous observons un changement de position. Mais ce fut un nouvel échec :
leshabitudesdesanciensutilisateursontététotalementbouleverséesavecladisparitionde
la barre“démarrer”entre autre. Des progrès en terme de design et d’ergonomie sont toute-
fois constatés dans les versions supérieures.
1. L’APPEL D’OFFRES BNP
Aujourd’huilesdesignerssontdeplusenplusreconnuspourleurtravail.Tellementquepour
certains appels d’offres auxquels j’ai pu répondre avec Axones, certains clients potentiels
refusaient toutes les équipes sans designers. C’était le cas pour l’appel d’offres de BNP, voici
des maquettes que j’ai réalisé :

46. 46
FIGURE 30:Appeld’offreBNP,version1

47. 47
FIGURE 31:Appeld’offreBNP,version2

48. 48
LE BRIEF CLIENT ET LA RÉALISATION
La BNP voulait pour une de ses sous entité, une application permettant à ses commerciaux
d’envoyer des mails de façon rapide et automatisée. Les clients souscrivent des contrat avec
les commerciaux. Des mails doivent être envoyés aux client qui ont leur fin de contrat qui
approche,ouquiestpassée.Lesdeuxmaquettesontlemêmefonctionnement.Simplement
l’approche visuelle et marketing avait été différente.
Voici comment a été pensée l’application :
- Nous avons deux onglets, l’un avec une liste de tous les clients. L’autre avec ceux
qui ont une date de fin de contrat proche de la fin.
- Nous avons un tableau épuré et simplifié au maximum afin de rendre la lecture
la plus facile possible. Et également un code couleur qui vient accompagner la
lecture et l’identification des différents états de contrats.
Nousavonsdoncaccordéuneimportanceaussibiensurlesfonctionnalitésquesurledesign
du site.Toute l’ergonomie a été pensé : le tableau qui est, d’après le brief, l’outil principal, a
été travaillé.
RÉSULTAT DE L’APPEL D’OFFRES
Finalement Axones n’a pas été retenu pour ce projet. C’est une autre entreprise déjà connue
par la BNP qui a été sélectionnée car plusieurs projets avaient déjà été réussis avec celle
dernière. Une seconde société a été directement éliminée car elle n’avait pas d’équipe de
designer.Uneentreprisequipossèdesapropreéquipeinternededesigner,etquilaprésente
auxclient,inspired’avantageconfianceetdonnel’imaged’ungroupestructuréetorganisé.
2. L’ABSENCE DE RÉEL DESIGNER PEUT SE CONSTATER
SUR CERTAINS PROJETS : LOUVRE HOTELS
Nous avons systématiquement chez Axones des projets de refonte graphique :
des applications fonctionnelles mais où l’esthétique nuit à son utilisation et à sa
rentabilité. C’est un cas qui a été constaté lors du projet du groupe Louvre Hotels :
Symbiose.
Voici les captures d’écran de l’application avant la refonte :
Nous voyons que le visuel a été complètement délaissée et n’est pas moderne. Il rend
l’utilisation de l’outil presque désagréable. Afin de remédier à ces désagréments,
Louvre Hotels a fait appel à Axones pour revoir toute son esthétique.
Vous trouverez en Annexe n°1, la maquette réalisée pour ce projet. L’objectif avait été
de ne changer que les couleurs et l’esthétique de façon superficielle, en consommant
le moins de jours possible.

49. 49
FIGURE 32:CaptureLOUVREHOTELS1

50. 50
FIGURE 33:CaptureLOUVREHOTELS2

51. 51
D. EN CAS DE SOUS EFFECTIFS ET DE CHARGES
IMPORTANTES
A certaines périodes il arrive que la SSII soit en sous effectif par rapport au travail.
Il n’est pas toujours facile de recruter de nouveaux salariés pour répondre à un besoin
rapidement. Pour compenser ce manque, elle est donc contrainte d’employer
des prestataires pour de courtes durées.
Les prestataires externes sont facturés en moyenne de 500 à 600€ la journée. Ils peuvent
être utiles ponctuellement en renfort dans les périodes où les charges de travail sont
importantes. Mais n’employer que des prestataires reviendrait beaucoup plus cher. Ils sont
rentablespourdestempsréduits.Eneffet,ilvautmieuxpayerunprestatairelorsquelebesoinse
ressent, que d’engager une ressource interne supplémentaire qui serait en sous charge le reste
du temps ( avec un salaire fixe).
Faire appel à un prestataire externe peut donc être très utile, mais il faut savoir qu’il y a des
inconvénients :
- Le risque de manque de coordination et potentielle absence de partage de
savoir-faire entre les partenaires.
- Le sous-traitant n’est pas forcément motivé pour améliorer la qualité du produit.
- L’entreprise assume seule les conséquences vis-à-vis de ses clients en cas de
défaillance du sous-traitant.

53. Comme je vous l’ai présenté précédemment, pour une équipe de web designer/intégrateur,
travailler au sein d’une SSII peut être compliqué et nécessite plusieurs qualités et de la rigueur.
La SSII doit, quant à elle faire un choix : employer une équipe interne, laisser ses développeurs se
charger de l’intégration, passer par une agence, ou bien engager des personnes en freelance.
Quel est donc le bon choix ?
Nous avons vu que laisser ses développeurs se charger de l’intégration demandait plus de temps et
n’était pas efficace. Alors, faut il employer une agence ou une équipe interne spécialisée ?
Il faut surtout comprendre que l’équipe de designer/intégrateur doit communiquer sans cesse
avec l’ensemble des équipes, mais aussi avec le client. Il faut qu’il y ait une harmonie entre
les différents métiers qui interviennent sur le projet. Que toutes les équipes communiquent, mais
sans s’arrêter aux frontières de son métier. Il faut qu’elles aillent au delà, et qu’elles s’intéressent à
celui des autres pour pouvoir être plus efficace et ainsi mieux collaborer. Une équipe en harmonie
c’est une équipe qui s’écoute, qui communique et qui cherche des compromis ensemble tout en
ayant chacun son domaine d’expertise.
Toutesleséquipesdoiventêtreaucourantdel’évolutionduprojetetilestimpératifd’économiserdu
temps et de l’argent pour que le projet soit rentable.
Tous ces argument mènent à une solution plus rentable pour la SSII :
Employer sa propre équipe interne de web designers/intégrateurs. Et lorsque les charges
sont trop importantes à certaines périodes, il y a toujours la possibilité d’employer un prestataire
externe en fonction des besoins.
CONCLUSION
53

54. 54

55. 55
GLOSSAIRE
SSII (SOCIÉTÉ DE SERVICES EN INGÉNIERIE INFORMATIQUE) , OU ESN
(ENTREPRISE DE SERVICES DU NUMÉRIQUE)
C’est une société experte dans le domaine de l’informatique. Elle peut regrouper plusieurs
métiers comme : le conseil, la conception et la réalisation d’outils, ou encore la maintenance.
Son objectif est de réaliser un projet informatique et d’accompagner son client.
LE CONSEIL
Lesmétiersduconseilconsistentàfournirauxentreprisesdesprestationsintellectuellesdehaut
niveau de consultants et d’experts qui interviennent de la stratégie de l’entreprise à la mise en
œuvre de la transformation d’un système d’information ou d’un processus métier.
- Conseil en stratégie : il a pour but l’élaboration de réflexions sur la stratégie
marketing, commerciale, d’études d’opportunités, de fusions / acquisitions...
- Conseil en management et organisation : il recouvre des prestations comme
l’amélioration du fonctionnement de l’entreprise, l’évolution de son organisation et
de sa gouvernance...
- Conseil sur le SI (système d’information) : il vise à établir une cartographie
des systèmes d’information, à transformer leur architecture, à piloter la conception
d’un nouveau système d’information et à accompagner leur mise en œuvre.
- Conseil en infrastructure : il recouvre des prestations d’audit et d’amélioration
de l’exploitation informatique, de la sécurité et des réseaux informatiques.
L’INGÉNIERIE
Cette activité consiste à concevoir, réaliser et installer un système informatique répondant à des
besoins spécifiques.
Danssaversionlaplussimple,l’ingénieriedesystèmespeutselimiteràréaliserdeslogicielssur
spécifications fonctionnelles du client. Elle peut s’étendre jusqu’au développement complet du
système d’information avec ou sans fourniture de matériels comprenant :
- L’intégration de Systèmes
- L’assistanceTechnique
- L’Infogérance
L’INFOGÉRANCE
C’est la prise en charge partielle ou totale du système d’information d’une entreprise
cliente par un prestataire informatique. Le client confie la gestion de tout ou partie de son
système d’information à un ou plusieurs prestataires, avec ou sans transfert des ressources du
client (hommes et matériels), avec ou sans délocalisation.
Les risques de la sous-traitance sont donc les suivants :
- Dépendance forte au sous-traitant.
- Risque de manque de coordination et potentielle absence de partage de sa
voir-faire entre les partenaires.
- Le sous-traitant n’est pas forcément motivé pour améliorer la qualité du produit.
- L’entreprise assume seule les conséquences vis-à-vis de ses clients en cas de défail
lance du sous-traitant.

56. 56
BOOTSTRAP
Bootstrap est une puissante « boîte à outils »,
un framework. Il sert à créer l’architecture d’une
page web en offrant du code CSS. Le contenu est
responsive (adapté en fonction de la résolution
ou de la taille de l’écran). Ainsi l’agencement du
contenu de la page est optimisé et est adapté
aux plus petits écrans, comme les plus grands.
On pense par exemple à la navigation sur un
Smartphone, une télévision ou simplement sur
un écran d’ordinateur.
JAVASCRIPT
C’est un langage informatique utilisé sur
les pages web. Ce langage à la particularité
de s’activer sur le poste client, C’est donc le
navigateur qui reçoit le code et qui l’exécute.
Ainsi, ce langage permet de rendre
le site dynamique via une interaction
avec l’utilisateur en fonction de ses
actions (lors du passage de la sou-
ris au dessus d’un élément,
du redimensionnement de la page...).
JQUERY
C’est une librairie Javascript libre de droit qui
regroupe plusieurs fonctionnalités. L’utilisation
de cette bibliothèque permet de gagner du
temps de développement puisque les fonction
sontdéjàréalisées,ilnesuffitquedelesutiliser.

57. Je tiens à remercier tout d’abord, Antoine VILLIEU, mon tuteur, pour m’avoir accueilli au sein de
l’entreprise AXONES. Il a su m’accompagner tout au long de mon année et m’a aidé à monter en
compétences.
Grâce à lui, j’ai pu gagner en autonomie et en confiance au niveau professionnel.
Je remercie également mes collègues pour leurs conseils et amitiés tout au long cette année. Mais
égalementl’ensembledel’équipeAxones,avecquiletravailaétéplusqu’enrichissantetm’adonné
une très belle expérience en alternance.
Enfin, je remercie l’école IPSSI et les formateurs pour m’avoir permis de poursuivre cette année qui
m’a donné l’opportunité d’enrichir mes connaissances et d’avoir aujourd’hui de bons bagages.
REMERCIEMENTS
57

59. Source : Organisation visuelle et zoning web
http://ergonomie-web.studiovitamine.com/organisation-visuelle-et-zoning-web,349,fr.html
Source : Introduction méthodes agiles
http://www.agiliste.fr/introduction-methodes-agiles/
Source : forfait ou assistance technque
http://www.prestationintellectuelle.com/2012/11/08/forfait-ou-assistance-technique/
Source : Documentation Axones
SOURCES ET ANNEXES
59

60. 60
ANNEXE N°1