rapport de stage

RAPPORT DE STAGE
Du 04/01/2016 au 26/02/2016
Webmaster
Refonte de l’intranet
Dans la Société : Barclays Bank France
Sommaire
Remerciements .......................................................................................................................... 1
Introduction................................................................................................................................ 2
L’entreprise ................................................................................................................................ 4
Son activité ............................................................................................................................. 4
Son histoire............................................................................................................................. 5
Mission du Stage ........................................................................................................................ 6
Présentation de l’environnement .......................................................................................... 8
Changement du site de la Direction Informatique .............................................................. 10
Changement du site principal de l’intranet ......................................................................... 12
Modifications sur SharePoint Designer ............................................................................ 15
Ajout de jQuery ................................................................................................................ 18
Conclusion ................................................................................................................................ 20
RAPPORT DE STAGE
Remerciements
Je remercie mon maître de stage Andy Guerard qui m’a accompagné tout au long de cette
expérience professionnelle avec beaucoup de pédagogie.
Je souhaite aussi également adresser mes remerciements à tout le reste de l’équipe IT Gouvernance
Ilham Bennani, Laetitia Leba et Amine Bouazizi qui m’ont accueilli dans la bonne humeur et la
sympathie.
OBADIA Yoni
1
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Introduction
Lors de mon BTS SIO (Brevet de Technicien Supérieur, Services Informatiques aux
Organisations) au centre de formation IF2I j’ai eu l’opportunité d’effectuer un stage du 4
janvier 2016 au 26 février 2016, dans l’entreprise Barclays Bank situé 183 Avenue Daumesnil
Paris 75012. J’ai pu m’intéresser au développement et à l’intégration web.
Ce stage a été l’opportunité de découvrir le métier de développeur web dans une grande
société, et la découverte du logiciel SharePoint. En plus d’enrichir mes connaissances en
HTML5/CSS3, ce stage m’a permis d’en apprendre plus sur le JavaScript et le jQuery. Ce
stage m’a aussi permis de me créer une nouvelle expérience sous un format que je
n’imaginais pas, le fonctionnement interne d’une entreprise, les réunions, et formalités
administratives requises pour mettre en œuvre le travail fait en environnement test.
Pour commencer ce rapport de stage, je pense qu’une présentation de l’entreprise s’impose.
Ensuite je vous expliquerai les différents aspects de mon travail durant mon stage et enfin,
pour conclure, je vous exposerais les connaissances, l’expérience, et les autres bienfaits que
ce stage m’a apportés pour ma formation.
OBADIA Yoni
2
Rapport de Stage 2015-2016
RAPPORT DE STAGE
PRÉSENTATION DE
L’ENTREPRISE
OBADIA Yoni
3
Rapport de Stage 2015-2016
RAPPORT DE STAGE
L’entreprise
Téléphone : 01 55 78 78 78
Site : https://www.barclays.fr/1-index.html
Son activité
L’entreprise Barclays Bank est situé 183 Avenue Daumesnil dans le 12ème arrondissement de
Paris. Barclays est une banque britannique basée à Londres aux Royaume-Uni fondée en
1896. Barclays est présent dans plus de 60 pays aussi bien en Europe, en Asie ou encore en
Amérique et en Afrique. Le groupe fait partie des 5 plus grandes banques britanniques.
OBADIA Yoni
4
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Son histoire
L’histoire de Barclays remonte au Moyen-Age à Londres, Lombard Street est un centre
d’affaires et un marché pour les artisans de l’or et de l’argent. John Freame qui y voit un
avenir va alors créer l’affaire qui allait devenir Barclays Bank. En 1728, son fils, Joseph,
achète la maison de l’aigle aux ailes déployées dont le nom évoque l’influence évidente des
pionniers de la finance et qui est encore aujourd’hui le symbole du Groupe Barclays dans le
monde.
Le nom de Barclays apparaît, quant à lui, lorsque Joseph Freame prend comme associé son
beau-frère, James Barclay. A la fin du siècle, les familles Bevan et Tritton se joignent aux
autres associés et ainsi sont établies les bases d’une grande Banque.
La puissance du Groupe Barclays s’affirme au XIXème siècle grâce à une série de fusions. Le
développement de la banque s’opère d’abord en Grande-Bretagne où elle faisait déjà partie
des "Big five" (Lloyds Bank, Midland Bank, National Provincial, Westminster Bank et Barclays
Bank), puis au niveau international à partir de 1918, sous l’influence de Frederick Crawford
Goodenough. Cette expansion commence en France par l’acquisition de la London Provincial
et South Western Bank qui détient une grosse participation dans Cox & Co Limited, société
fondée durant la première guerre mondiale par les trésoriers payeurs britanniques aux
armées.
Lorsque Joseph Freame s’établit rue des Lombards, il conserve sur sa façade l’enseigne de
l’aigle noir déployé.
Figure 1 - Première enseigne de Barclays
OBADIA Yoni
5
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Mission du Stage
Lors de mon stage j’ai principalement utilisé Microsoft SharePoint Designer 2007 et 2010, je
vais donc commencer pas vous présenter SharePoint Designer et expliquer les diverses
fonctionnalités de ce dernier, ainsi que le choix de ce logiciel par l’entreprise Barclays.
Microsoft SharePoint Designer est un logiciel de créations de sites web. Sa première version
SharePoint Designer 2007, est sortie le 30 novembre 2006, était un logiciel payant
cependant en 2009 le logiciel est devenu gratuit. Il utilise les technologies de Microsoft
comme ASP.NET 2.0, les feuilles de styles et Microsoft Windows Workflow Foundation.
Barclays Bank a choisi d’utiliser Microsoft SharePoint Designer pour diverses raisons telles
que le partage de fichier sécurisé entre services, la possibilité de modifier, supprimer et
ajouter des fichiers en toute simplicité. SharePoint Designer propose des modèles où
l’utilisateur doit simplement ajouter ses parties comme il le souhaite.
Ma mission lors de ce stage a été d’améliorer le design du site intranet de Barclays, j’ai pu
répondre à leurs attentes en utilisant du CSS, JavaScript et jQuery.
OBADIA Yoni
6
Rapport de Stage 2015-2016
RAPPORT DE STAGE
PRÉSENTATION DU STAGE
OBADIA Yoni
7
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Présentation de l’environnement
Lors de mon arrivé dans l’entreprise, on m’a affecté un poste de travail fonctionnant sur
Windows 7, j'ai commencé par me documenter sur le logiciel et la version utilisé par
l’entreprise de SharePoint Designer, et me familiariser avec l’intranet de l’entreprise.
Par exemple avec l’annuaire de l’entreprise utile pour obtenir le numéro de téléphone ou
l’adresse e-mail d’un collègue.
Figure 2 - Annuaire intranet Barclays
OBADIA Yoni
8
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Grâce à cette fiche nous avons aussi accès à un organigramme nous représentant ainsi que
nos collègues dans l’entreprise. Par exemple dans cet organigramme on peut voir le rôle de
chacun et sa position dans la hiérarchie.
Figure 3 - Organigramme de la DI
OBADIA Yoni
9
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Changement du site de la Direction Informatique
Une fois l’environnement pris en main nous, Andy Guerard et moi, avons décidé des
modifications à apporter sur le site intranet de la Direction Informatique de l’entreprise.
Tout en prenant en compte la charte graphique de Barclays (fichier PDF que l’on peut
retrouver sur mon portfolio dans l’onglet Stage 2ème année).
Le site intranet de la DI initialement conçu en 2006 et maintenu par Andy Guerard est le
suivant :
Figure 4 - Site intranet de la DI avant modification
OBADIA Yoni
10
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Figure 5 - Site DI après modification
OBADIA Yoni
11
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Changement du site principal de l’intranet
Une fois avoir appris ma venue à Barclays Bank pour le changement du site intranet de la DI,
le service de communication de Barclays Bank a contacté la DI. Ils devaient répondre à une
contrainte de la charte graphique en provenance du Brand Manager de Londres, et avaient
besoin de mon aide pour que puisse modifier la page d’accueil et aussi le site principal de
l’intranet et particulièrement ce que SharePoint appelle une page maître.
Figure 6 - Page maitre
Une page maitre permet de créer un masque sur le site et ses sous sites, avec une notion
d’héritage ce qui permet d’utiliser une seule page maître pour toute une collection de site.
Lors de notre première réunion avec les chargées de communication nous avons décidé de
modifier le header pour qu’il corresponde à la charte graphique de Barclays.
OBADIA Yoni
12
Rapport de Stage 2015-2016
RAPPORT DE STAGE
La page d’accueil Barclays n’a pas été modifiée depuis 2007.
Figure 7 - Accueil Intranet première version
Figure 8 - Accueil intranet deuxième version
OBADIA Yoni
13
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Après avoir convenu des modifications à effectuer sur l’intranet, j’ai dû créer un change, qui
est une demande de modifications pour n’importe quel sujet, et où l’on doit préciser la date
de livraison du produit, les raisons, objectifs et risques encourus lors de ce changement. Cela
permet d’informer le service Manager d’une évolution et d’un risque d’incidents. Il faut aussi
prévoir comment revenir en arrière si il y a des problèmes lors de la mise en production.
Figure 9 - demande de change
Une fois la demande de change effectuée il faut passer devant le CAB (Comité d’Approbation
des Changements) pour avoir l’autorisation d’appliquer les modifications sur le site, si la
demande est approuvée on peut donc mettre les changements en place.
OBADIA Yoni
14
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Modifications sur SharePoint Designer
Après que la partie administrative soit complétée, j’ai reçu les accès du compte opérateur
qui gère le serveur internet de Barclays Bank et qui possède les droits pour effectuer des
modifications sur les pages maîtres et pages du site intranet.
Figure 10 - page maître SharePoint
Sur cette page maître de SharePoint on peut voir plusieurs options telles que Design, Split et
Code en bas de l’écran. Ces différentes options changent la vue d’affichage sur SharePoint,
donc une personne qui ne connait pas le HTML/CSS peut modifier cette page sans en avoir
recoure en utilisant l’option Design, ou pour les plus expérimentés l’option Split et Code qui
permettent de modifier directement le HTML/CSS voire même JavaScript de la page.
Comme on peut le voir sur ci-dessus, les pages de SharePoint peut être constitué d’autre
chose que du HTML, elles peuvent contenir du code ASP.NET, par exemple ce texte
sélectionné permet de créer le menu qui apparait dans la deuxième partie de l’écran.
OBADIA Yoni
15
Rapport de Stage 2015-2016
RAPPORT DE STAGE
La partie CSS est dans un dossier appelé « Style Libraries ». Comme on peut le voir il y a
environ une dizaine de CSS pour tous les sites de l’intranet Barclays.
Figure 11 - CSS intranet
OBADIA Yoni
16
Rapport de Stage 2015-2016
RAPPORT DE STAGE
ci-dessous nous pouvons voir toute l’arborescence de l’intranet de Barclays Bank. Les
dossiers avec un petit rond vert correspondent aux sous-site, et les autres sont simplement
des dossiers contenant toute sorte de fichier, comme les fichiers css, le code source des
pages de l’intranet, des fichiers excel, word etc … Tout ce dont les employés Barclays se
partagent durant leur quotidien.
Figure 12 - sous sites intranet
OBADIA Yoni
17
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Ajout de jQuery
Lors de ce stage on m’a demandé de supprimer le menu de gauche apparaissant sur la page
d’accueil et seulement sur la page d’accueil. Le seul problème concernant cette modification
est qu’elle fait partie de la page maître, comme vu précédemment la page maître est le
modèle pour toutes les pages. Si on la modifie, cela change donc l’affichage pour toutes les
pages présentes sur le site qui prennent la page maître comme modèle.
Le changement via page maître était donc impossible c’est pourquoi je me suis tourné vers la
solution de jQuery qui permet de modifier le code HTML assez facilement.
Figure 13 - Code jQuery
Je vais expliquer le code ci-dessus, $(document).ready permet lors du chargement de la page
d’effectuer une action, cette action est dans les accolades de function().
Comme précisé précédemment, nous voulions retirer le menu uniquement sur la page
d’accueil c’est pourquoi on fait un test sur l’url de la page. Windows.location.href permet de
récupérer l’url sur la page que l’on visite.
Si l’url de cette page est égale à l’url de la page d’accueil alors on fait l’action :
$(‘table’).remove(‘#menu-gauche’) ; qui sélectionne l’élément possédant l’id=’’menugauche’’ et la fonction remove permet de supprimer cette élément du code HTML. C’est
ainsi que l’on a pu arriver au résultat suivant.
Le problème encontré lors de la mise en production a été la compatibilité entre les
navigateurs, le groupe utilisant encore IE8, il a fallu trouver un solution pour que le jQuery
puisse fonctionner, c’est pourquoi après quelques recherches nous avons trouvé que les
versions < 2.0 de jQuery fonctionnait sur IE, alors nous sommes passé sur cette version et
tout était opérationnel.
OBADIA Yoni
18
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Figure 14 – accueil intranet troisième version
OBADIA Yoni
19
Rapport de Stage 2015-2016
RAPPORT DE STAGE
Conclusion
J’ai trouvé mon stage au sein de Barclays Bank intéressant et enrichissant. Il m’a permis de
me familiariser avec le logiciel SharePoint Designer 2007 et 2010. J’ai aussi pu voir comment
le métier de webmaster interagissait dans le milieu de l’entreprise aussi bien du côté
administrative que du niveau de conception.
J’ai aussi participé à des réunions de définition de besoin avec les utilisateurs, le service
communication, et ainsi appris à gérer les contraintes d’une grosse structure, tels que de
rester sur un site compatible avec 2 IE8 différents et chrome, le groupe utilisant toujours IE8
en interne.
Les pages maîtres étant utilisés par d’autres équipes il a fallu faire attention à ne pas
modifier leur affichage, tout en faisant les modifications demandé par le Brand Manager de
Londres.
Ce stage m’a fait progresser dans la vie professionnelle, et m’a donné une autre vision de
l’informatique, celle dans le milieu bancaire.
OBADIA Yoni
20
Rapport de Stage 2015-2016