Rapport D605 : Annuaire des anciens étudiants MIAGE d'Amiens (UPJV)

Dodi Alphonse Mbuta Ikoko

Description

Dans le cadre de module de cours suivi à l'Université de Picardie Jules Verne, le D605 (Projet thématique), il nous a été demandé de construire un annuaire en ligne pour les anciens étudiants diplômés MIAGE d’Amiens. Il reprend au fait des informations sur chacun des anciens diplômés, principalement leur formation académique (filière MIAGE suivie) et leur profil professionnel, en plus de leur permettre tous de rester digitalement en contact permanant entre eux et avec l’alma mater.

Sujets

• Web
• Programmation Web
• Application Web
• Annuaire Web
• CMS

Informations

• Publié par: daniellambutamankoni16
• Publié le: 04 février 2020
• Nombre de lectures: 2
• Licence : En savoir +
  Paternité, pas d'utilisation commerciale, partage des conditions initiales à l'identique
• Langue: Français
• Poids de l'ouvrage: 3 Mo

Extrait

UFR des sciences

ANNUAIRE EN LIGNE POUR LES ANCIENS ETUDIANTS DIPLOMES MIAGE DE L’UNIVERSITE DE PICARDIE JULES VERNE

Rapport technique sur le projet thématique réalisé Code du module : D605 Intitulé du module : Etude de cas thématique Nomde l’enseignant : Laurent Josse Nom de l’apprenant: Mbuta Ikoko Dodi Alphonse

Sommaire

Actuellement, pour de nombreuses organisations ou entreprises, un site et/ou une application web passe pour un outil important les aidant à atteindre leurs partenaires d’affaires ou clients.Dans ce cadre, certainesd’entre mettent alorssur pied des sites web dits informationnels ou institutionnels qui, au besoin, intègrent des annuaires en ligne reprenant le profil académique et/ou professionnel de leur personnel clé ou stratégique. C’estsouvent le cas avec des entreprises de consulting ou des organisations et institutions universitaires.

Dans le cadre de ce modulede cours, le D605, s’intitulant «», il nous a étéProjet thématique demandé de construire un annuaire en ligne pour les anciens. Ce dernier devrait au fait reprendre des informations sur chaqueancien étudiant diplômé MIAGE d’Amiensde Picardie Jules (Université Verne), principalement sa formation académique (filière MIAGE suivie) et son profil professionnel, en plus de leur permettre tous de rester digitalement en contact permanantentre eux et avec l’alma mater. C’est aussi un annuaire en ligne qui se veut pour missioncelle de pouvoir faciliter la carrière et/ou l’insertion professionnelle des nouveaux diplômés MIAGE d’Amiens mais également, de manière occasionnelle, la levée de fonds pour une recherche de qualité au sein du département informatiqueou de l’ensemble de l’UFR des sciences de l’Université de Picardie Jules Verne.

Supposé gérer des informations à caractère personnel ou privé de chaque ancien étudiant diplômé MIAGE d’Amiens, l’annuaireen ligne à construire devrait en plus respecter les lois et règlements européens applicables en la matière, tels que repris par la CNIL, la « Datainspektionen » et/ou le bureau de la Commission européenne en charge du GDPR. En référence à la directive Web de l’UE de 2016 (cf. OJ L 327, 2016), il devrait également se conformer à la nouvelle loi en vigueur en Suède depuis le 01 janvier 2019 qui réglementel’accessibilité des sites Webdans le pays car c’est un annuaire en ligne qui est aussi également senséoffrir un accès à un plus grand nombre d’utilisateurs ou internautes-visiteurs.

Enfin, cet annuaire en ligne serait construitavec l’aide d’un système de gestion de contenu (CMS) et des technologies ou langages liées au Web, à l’instar de HTML, CSS, JavaScript/Jquery, Bootstrap et C# .NET.

Mots clés : domaines du développement des sites et/ou applications web (Web design), Outils Les fondamentaux pour le développement des sites et/ou applications web, Système de gestion de contenu

ii

(CMS), GDPR, Directives ou accessibilité Web (WCAG) et Projet et processus de développement des sites et/ou applications web CMS Episerver

iii

Table des matières

Sommaire........................................................................................................................................ ii

Table des matières ........................................................................................................................ iv Liste des tableaux..........................................................................................................................vi Liste des figures............................................................................................................................vii INTRODUCTION ......................................................................................................................... 1 Contexte et description du projet................................................................................................. 1 Objectifs et finalité de notre projet .............................................................................................. 1 Canevas du rapport ...................................................................................................................... 3 Chapitre 1 Concepts théoriques associés..................................................................................... 5 1.1Les domaines du développement des applications et/ou sites web, quid ?..................... 5 1.1.1.......................................................................... 5Rappel sur la définition du mot Web 1.1.2Les domaines du développement Web : le font-end et le back-end............................ 6 1.1.3.......... 8Les technologies clés pour le développement de sites et/ou applications web. 1.1.4La conception graphique etles critères d’accessibilité Web (WCAG).................... 13 1.2Les systèmes de gestion de contenu.............................................................................. 17 1.2.1Définitions et fonctionnalités.................................................................................... 17 1.2.2Types de CMS .......................................................................................................... 17 1.2.3Architecture d’un système de gestion de contenu......................91............................... 1.3Un mot sur les projets informatiques ou TI dans leur ensemble................................... 20 1.3.1Définitions et types de projets informatiques ........................................................... 20 1.3.2pilotage opérationnel au sein d’unModes d’approvisionnement et éléments de projet informatique ............................................................................................................... 21 1.3.3Les processus et/ou procédés de développement pour les sites ou applications web22 Chapitre 2 Méthodes et outils utilisés ........................................................................................ 31 2.1Présentation de l’annuaire en ligne à construire pour «les anciens étudiants diplômés MIAGE d’Amiens» .................................................................................................................. 31 2.1.1Rappel sur la définition d’un annuaire en ligne........................................................ 31 2.1.2Description de l’annuaire en ligne des anciens étudiants diplômés MIAGE d’Amiens  32 2.1.3Procédé, environnement intégré, langages et autres technologies associées adoptés pour le développement de l’annuaire en ligne......33................................................................. 2.1.4Considérations fonctionnelles et techniques du WCMS choisi : le « EpiServer CMS ». 36

iv

2.1.5La documentation du projet ...................................................................................... 41 Chapitre 3 Résultats obtenus ...................................................................................................... 43 3.1Collecte et analyse de besoins exprimés par le client ................................................... 43 3.1.1Raffinement de différents besoins exprimés............................................................. 43 3.1.2La scénarisation et les users stories .......................................................................... 44 3.2L’architecture et/ou la structure de l’information de l’annuaire en ligne (plan du siteou site map) et le codage. ............................................................................................................... 47 3.2.1L’architecture informationnelle................................................................................ 47 3.2.2Le codage .................................................................................................................. 49 3.2.3Le contenu définitif de l’annuaire en ligne............................................................... 50 3.3L’esthétique de différentes pages ou interfaces web créées.......................................... 53 3.3.1La charte typographique et l’intégration du contenu définitif au niveau des pages ou interfaces web construites ..................................................................................................... 54 3.3.2Le responsive ............................................................................................................ 59 3.3.3Tests d’utilisabilité et d’accessibilité sur les différentes pages ou interfaces web créées pour l’annuaire en ligne.............................................................................................. 60 Chapitre 4 Discussions et critiques ............................................................................................ 66 4.1Par rapport à la réalisation de notre projet dans son ensemble ..................................... 66 4.2Par rapport au codage et aux différents tests réalisés.................................................... 67 4.3Par rapport à la vérification et à la validation finale de différentes pages ou interfaces web créées et de leur contenu .................................................................................................... 69 Conclusion .................................................................................................................................... 71 Annexe A Plan de développement de l’annuaire...................................................................... 73 Annexe B Code source de l’annuaire construit......................................................................... 74 Bibliographie ................................................................................................................................ 75

v

Liste des tableaux

Tableau 1–Différentes outils et technologies choisis ou adpotés pour notre projet................... 35 Tableau 2–Première monture des users stories obtenues grâce à la scénarisation de différentes exigences fonctionnelles et non fonctionnelles...................................................................... 46 Tableau 3–Quelques critères WCAG 2.1 utilisés........................................................................ 62 Tableau 4– Propositions Nombre de violations WCAG 2.1 après les tests automatiques de différentes pages ou interfaces web créées........................................................................... 63

Tableau 5– Propositions de correction sur les différentes violations trouvées (Ici, sur la page d’accueil).56..............................................................................................................................

vi

Liste des figures

Figure 1 - Différents navigateurs web modernes et leurs différentes versions stables (source : Can I Use, https://caniuse.com/#search=css, 2019)............................................................... 6 Figure 2 -Une portion d’un exemple de code HTML..................................................................... 9 Figure 3 -Une portion d’un exemple de code ou de fonction Javascript/Jqueryutilisant aussi AJAX (« doSearch »)............................................................................................................. 11 Figure 4 -Outil d’inspection de pages web (à droite de cette page web)..................................... 13 Figure 5–Couleur bleu du logo de l’UPJV sous trois différentes notations ou écritures (RGB, HEX et HSL).......................................................................................................................... 15 Figure 5– Cercle : Chambeau Athony,chromatique de Johannes Itten (source https://www.cours-de-peinture.net/technique-de-melange-en-peinture-acrylique/, 2019)... 15 Figure 7–Le cycle de vie du logiciel et laplace naturelle d’un procédéde développement logiciel (source : Luc Lavoie, 2007, cité par Mbuta Ikoko, 2011)..................................................... 22

Figure 8 - Scrum framework et ses principales parties [Sutherland Jeff et Schwaber Ken (2017, reprise par Mbuta Ikoko, 2018), source : https://www.scrum.org/resources/what-is-scrum). ............................................................................................................................................... 26 Figure 9–The Five Planes (source: Garrett Jesse, 2011)........................................................... 28 Figure 10 -Vue d’ensembledu système et du site Web ou solution personnalisé......................... 36 Figure 11 -L’architecture d’EpiServer (source ffh: https://www.episerver.com/learn/tech/technical-resources/architecture/)........................... 38 Figure 12–de développement versus environnement de production pour Environnement EpiServer CMS...................................................................................................................... 38 Figure 13– Environnement de développement versus environnement de production pour EpiServer CMS...................................................................................................................... 39 Figure 14– Environnement de développement MS Visual Studio avec les options « Add » possibles grâce à l’EpiserverCMS Visual Studio Extension installé................................... 40 Figure 15–Exemple d’uneuser storie de notre projet transcrite sur TFS. ................................... 46 Figure 16 - Sitemap reprenant les pages de notre site ................................................................... 48 Figure 17 -Un des prototypes fabriqués à l’aide d’un papier fonctionnel (ici, c’est le prototype de la page principale « Annuaire des anciens »). ....................................................................... 48 Figure 18– Ecran représentant le code et les différents objets et propriétés de notre annuaire structurés en MVC sous le MS Visual Studio........................................................................ 49 Figure 19 -L’interface de rédaction et de personnalisation WYSIWYG du CMS EpiServer...... 50 Figure 20–Une partie de la page web principale « Blog » et son contenu définitif rédigé par le web redacteur après codage.................................................................................................. 53

vii

Figure 21–accueilpage principale «  La » de l’annuaire et l’en-tête (header), avec un logo et une barre de navigation........................................................................................................ 54

Figure 22–Une partie de la page d’accueil, avec des cartes avec images matricielles remplies ayant plusieurs couleurs, et le pied de page de l’annuaire (footer), avec des liens jugés essentiels et incountounables................................................................................................ 55

Figure 23–Exemple d’un article ou post intégral du blog (ici, avec des liens icones sur les trois réseautage sociaux phares, et pour l’impression,le mailing et le fil RSS)........................... 56 Figure 24–partie de la sous page de la liste des anciens étudiants diplômés filtrée par Une promotion 2017, grâce au choix de l’onglet qui se trouve dans la sous navigation à gauche. ............................................................................................................................................... 57 Figure 25– Une partie de la page de présentation du profil complet d’un ancien étudiant diplômé MIAGE d’Amiens.................................................................58.................................... Figure 26–La page Contact de l’annuaire en ligne construit..................................................... 58 Figure 27 - Affichage responsive de la page principale « Annuaire des anciens » sous le format Desktop (ici, avec le device HP Z Book 1200px).................................................................. 59 Figure 28 - Affichage responsive de la page principale « Annuaire des anciens » sous les formats Mobile/tablette (ici, avec le device iPad : 768 px x 1024 px) et Mobile/smartphone (ici, avec le device iPhone X : 375 px x 812 px)................................................................................... 60 Figure 29–Violations WCAG 2.1 trouvées sur la page d’accueil de notre annuaire en ligne avec Total validator....................................................................................................................... 63

viii

INTRODUCTION

Contexte et description du projet Pour de nombreuses organisations ou entreprises, leurs sites et/ou applications web passentaujourd’hui pour des outils importants qui les aident à atteindre leurs différentsclients ou partenaires d’affaires. Ils arrivent aussi à aider les parties prenantes internes (acteurs dirigeants et employés) de ces organisations à communiquer, échanger et/ou partager, mais aussi également à mettre à la disposition de leur public et de leurs différentsclients ou partenaires d’affairesdes informations pertinentes, digestes, intéressantes et mémorables concernant leurs différentes activités et services offerts. Certaines de ces organisations ou entreprises ne s’arrêtent pas là mais vontun peu plus loin. Elles intègrent au sein de leurs sites web des annuaires en ligne qui reprennent le profil académique et professionnel de leur personnel clé ou stratégique.C’est souvent le cas avec des entreprises de consulting ou des organisations et institutions universitaires. Concernant les organisations et institutions universitaires, elles intègrent des annuaires en ligne au niveau de leurs sites web pour pouvoir mettre en valeur le profil académique et professionnel de leur personnel académique ou administratif clé, mais aussi parfois celui de leurs anciens étudiants notables afin de pouvoir servir au final de reférence marketing communicative et attirante. Les différentes associations ou réseaux d’almuni (anciens étudiants) de ces organisations et/ou institutions universitaires font aussi presque pareil. En France, plusieurs associations ou réseaux d’almuniexistent au sein des organisations et/ou institutions universitaires et, suivant leurs besoins de communication ou autre, possèdent donc des annuaires en ligne qui reprennent respectivement le profil académique et professionnel de leurs membres qui ne sontd’autres que des anciens étudiants diplômés, et cela, pour aussi leur permettre de rester digitalement en contact entre eux et avec leur alma mater, parfois également pour créer des opportunités d’affaireseux. Il entre s’agit en effet d’unesimple donne communicationnelle quin’est pas nouveau dans l’actuelle société de l’information, appeléedésormais la société de la connaissance ou du savoir. Tous ces annuaires en ligne ont souvent pour principal but de créer alors une identité virtuelle et de pouvoir augmenter la visibilité des organisations ou entreprises et de leurs activités respectives. Pour ce faire, la communauté ou le réseau d’anciens étudiants diplômésMIAGE d’Amiens de l’Université de Picardie Jules Verne ne compte pas rester à la traîne de cette donne communicationnelle vu le caractère international et de haut-niveau de la formation suivie, la formation MIAGE. Elle compte donc aussi construire ou mettre sur pied un annuaire en ligne même si elle fait déjà partie de la fédération nationale des étudiants et diplômés de MIAGE, connue sous le nom de «MIAGE connection »,et qui disposed’un annuaire global pour tous les anciens étudiants diplômés MIAGE de France. Objectifs et finalité de notre projet 1° Objectif général L’objectifgénéral de notre projet thématique, dans le cadre du module de cours D605, est de pouvoir 1 construire un annuaire en ligne pour les anciens étudiants diplômés MIAGEd’Amiens,c.à.d. du département informatique de l’Université de Picardie Jules Verne qui fait donc partiede l’UFR des sciences de l’Université.

1  Le diplôme ou le master deméthodes informatiques appliquées à la gestion des entreprises(MIAGE) est un diplôme universitaire français de niveau bac+5, alliant une double compétence en informatique et engestion, déstiné à former des cadres supérieursd’entreprises experts en ingénierie et management des systèmes d’information. Les formations MIAGE sont dispensées dans vingt universités francaises et apour vocation de former desprofessionnels de niveau cadre à l’ingénierie des systèmes d’information au sein des organisations.

1

C’estun annuaire en ligne qui devrait reprendre des informations sur la filière académique suivie et le profil professionnel actuel dechaque ancien étudiant diplômé MIAGE d’Amiens, en plus de leur permettre de rester digitalement en contact permanant entre eux et avec leuralma mater. C’est aussi un annuaire en ligne qui se donne pour mission celle de pouvoirfaciliter la carrière et/ou l’insertion professionnelle des nouveaux diplômés MIAGE d’Amiens maisaussi également, de manière occasionnelle, la levée de fonds pour une recherche de qualité au sein du département informatique ou de l’ensemble de l’UFR des sciences de l’Université de Picardie Jules Verne. 2° Objectifs concrets et vérifiables Le but principal de ce travail est de: construire un annuaire en ligne pourles anciens étudiants diplômés MIAGE d’Amiens, avec l’aide d’un système de gestion de contenu (CMS) et des technologies ou langagesweb liés, à l’instar de HTML, CSS, JavaScript/Jquery, Bootstrap,C# .NET, etc. La solution à construire pourrait également être étenduepar l’ajout ou la configuration des modules, plugins, ou composants, etc. créer des interfaces utilisateurs web conviviales, c.à.d. simples d’utilisation par les différents utilisateurs ou internautes-visiteurs (user-friendly suivant le propos de Nielsen Jakob, 1994) ; disposer des informations de bonne qualité, c.àd. qui sont pertinentes, digestes, intéressantes et mémorables pour les utilisateurs ou internautes-visiteursde l’annuaire en ligne; appliquer une logique communicationnelle visuelle sur une base typographique acceptable ; etc. En plus, le fait que la solution qui va être construite au cours de ce projet va technologiquement être assise sur un système de gestion de contenu, les informations qui vont être rendues disponibles devraient alors être protégées et gérées en faisant respecter les lois et règlements européens relatifs à la protection de données à caractère personnel ou privé, telles que reprises par la CNIL, par la « Datainspektionen » et/ou par le bureau de la Commission européenne en charge du GDPR. Sensée également offrir un accès à un plus grand nombre d’utilisateurs ou internautes-visiteurs, l’annuaire en ligne qui va être construit devrait également se conformer à la nouvelle loi en vigueur en Suède depuis le 01 janvier 2019 qui, en référence à la directive Web de l’UE de 2016 (cf. OJ L 327, 2016), réglemente l’accessibilité des sites web (WCAG) dans sa version 2.1. 3° Limites du projet Le projet thématique TI (ou web) que nous allons réaliser ne va paschercher à s’assurer de l’existence de cette communauté ouréseau d’anciens étudiants diplômés MIAGE d’Amiens, moins non plus de chercher à décrire de manière formellel’organisation et le fonctionnement de cettedernière. A la place, il va plutôt chercher de se focalisersur le développement c.à.d. sur la construction d’une version beta de l’annuaire en ligne démandée pour le compte deladite communauté ou réseau, et cela, avec l’aide d’un système de gestion de contenu puis à partir des sources d’informations qui vont êtreà notre disposition ou mises simplement celles qui vont être trouvées sur Internet à propos. Toutefois, nous faisons noter que le développement des sites et/ou applications web ne disposant presque pas à ce jourd’un processus ou procédé ad hoc connu. Lesdéveloppeurs web s’appuient ou continuent de s’appuyer sur des procédés prédictifs et agiles connus du monde de Génie logiciel. D’autrespréfèrent plutôt travailler suivant une approche intégrant ou unifiant plusieurs de ces processus et/ou procédés connus pour enfin arriver à construire, créer ou fabriquer un site et/ou une application web fiable, fonctionnelle ou conviviale. Derrière cette logique de travail évoquée et pour ne pas inventer une nouvelle roue, nous allons donctenter aussi d’intégrer oud’unifier au moins deux processus ou procédés de développement logiciel connus et adaptés pour la construction, la création ou la fabrication de notre annuaire en ligne. Au fait, ca devrait être un exercice qui va nous aider de cerner correctement, par la théorie et par la pratique, la pertinence réelle de cette logique intégratrice de processus ou procédés de développement logiciel dans le cas qui nous concerne, c.à.d. celuid’unprojet de développement web qui

2

recommande aussi logiquement une forte interaction ou collaboration entre les différentes parties prenantes impliquées. Faisons également noter que nous n’allons pas publier et/ou hébergeren lignenotre solution car c’est juste un projet thématique. Néanmoins le code source et la possibilité de son exécutíon en local seront rendus disponibles. Canevas du rapport Le rapport technique qui est présenté ici contient les différentes informations théoriques et pratiques qui ont servies pour la construction, la création ou la fabrication del’annuaire en lignenous demandé. Il s’agit d’un rapport technique écrit dans le cadre du module de cours D605, intitulé « projet thématique », et comporte 4 chapitresen dehors de l’introduction et de la conclusion. Ainsi, hormis ce point introductif, le chapitre 1, dans les limites évoquées de notre projet thématique, va se focaliser sur une revue de la littérature synthèse liée au développement des sites et/ou applications web au sein des organisations. Les deux domaines accompagnant actuellement le développement web vont donc être présentés, mais aussi quelques outils et technologies clés qui y sont liés, suivi de la présentation de systèmes de gestion de contenu. En rapport avec les systèmes de gestion de contenu, nous allons profiter pour parler aussi de la protection de données à caractère personnel ou privé. Cette protection de données à caractère personnel ou privé va être évoquée de manière globale dans un contexte de comment un site et/ou une application web construit devrait respecter les lois et règlements européens liés, c.à.d. les lois et règlements européens relatifs la protection de données à caractère personnel ou privé et qui sont issus ou repris par la CNIL, la « Datainspektionen » ou le bureau de la Commission européenne en charge du GDPR. En plus, une ligne va également être écrite par rapport àla directive Web de l’UE de 2016 (cf. OJ L 327, 2016); une directive qui insiste sur l’accessibilité de sites et/ou applications webet construits destinés à être accéssibles à un large public.C’est donc un chapitre qui va donner suffisamment aux différents lecteurs de notre rapport des éléments de compréhension pour pouvoir interpréter par la suite correctement son contenuet celui de l’annuaire en ligne construit. Il se termine, ce premier chapitre, par la présentation condensée de quelques processus ou procédés de développement logiciel connus du Génie logiciel et utilisésdans le cadre d’un projet TI web, à l’instar par exemple du procédé agile Scrum et du cadre théorique et pratique de Garrett James qui sont basés sur les interactions et/ou sur les expériences profondes et positives des utilisateurs (UCD). Le chapitre 2 va décrire la méthodologie que nous avons adoptée pour construire, créer ou fabriquer l’annuaire en ligne qui nousa été démandé, et cela, à travers la présentation d’un processus ou procédé de développement logiciel théorique et pratique qui se veut intégré ou unifié. Les outils et les technologies choisis et qui vont être utilisés pour cette activité vont aussi être présentés. Ainsi, comme dit Masamba N’kazi (1998, cité par Mbuta Ikoko, 2011), notre méthodologie adoptée est stratégique mais aussi fonction de la thématique étudiée, des ressources disponibles et del’expérience antérieure ou actuelle dans le domaine. En se servant également de notre expérience modeste en management des projets TI/SI et en architecture et dévelopement des systèmes informatiques, les éléments du procédé agile Scrum et du cadre de référence proposé par Garrett James vont alors être intégrés ensemble pour servir des grandes lignes de notre méthodologie.

Quant au chapitre 3, il va plutôt présenter les résultats de la construction, création ou fabrication de l’annuaire en ligne demandé, et cela, en fonction de la méthodologie adoptée et des outils et technologies utilisés. Quelques pages et/ou interfaces web créées seront illustrées, accompagnées des quelques commentaires synthèses. Au fait, il va être seulement question de clarifier ces résultats obtenus par rapport à la collecte et analyse des besoins exprimés, aux différents modèles concues (exigences, extra- fonctionnel, de conception, etc.), au codage, mais la structure, le contenu et la convivialité de l’annuaire en ligne construit, créé ou fabriqué.

Le chapitre 4 va être un chapitre qui va globalement nous fournir quelques lignes de discussions et critiques surl’ensemble du projet TI web réalisé mais aussi sur l’annuaire construit, créé ou fabriqué. Les violations trouvées sur les différentes pages ou interfaces web créées pour notre annuaire vont être

3