L'optimisation du processus de production des sites web

HAL Id: dumas-01686980

https://dumas.ccsd.cnrs.fr/dumas-01686980

HAL is a multi-disciplinary open access archive for the deposit and dissemination of sci-entific research documents, whether they are

pub-L’archive ouverte pluridisciplinaire HAL, est destinée au dépôt et à la diffusion de documents scientifiques de niveau recherche, publiés ou non,

L’optimisation du processus de production des sites web

Guillaume Reynier

To cite this version:

Guillaume Reynier. L’optimisation du processus de production des sites web . Sciences de l’information et de la communication. 2015. �dumas-01686980�

a

Université

de Lille

Y SCIENCES HUMAINES O ET SOCIALES

I

ANRT

Atelier National

de_{Reproduction des Thèses}

Guillaume

MASTERl, MENTION ICCD

(option : Sciencesde l'Information etdu Document)

MEMOIREDESTAGE

missioneffectuée du 13/03/2015au27/07/2015

à

EÀtelierNational de _{Reproduction des Thèses}

1 Ruedu _{Barreau, 59653Villeneuve-d'Ascq}

L'optimisation du

processus

de

production des

sites

web

Sous la direction de:

M._Joachim

_SCHÔPFEL

Soutenule26Juin2015àl'UFR DECCID-SID

UniversitéCharles deGaulle, Lille3(CampusPontde Bois)

a Université

de Lille

^ SCIENCES HUMAINES O ET SOCIALES

I

ANRT

Atelier National

"N de_{Reproduction des Thèses}

Guillaume REYNIER

MASTERl, MENTION ICCD

(option: Sciencesde l'Informationetdu Document)

MEMOIRE DE STAGE

missioneffectuée du 13/03/2015 au27/07/2015

à

LÂtelierNational de_{Reproductiondes Thèses}

1 RueduBarreau, 59653_{Villeneuve-d'Ascq}

L'optimisation du

processus

de

production des

sites

web

Sous la direction de:

M._Joachim

_SCHÔPFEL

Soutenule26Juin 2015àl'UFR DECCID-SID

UniversitéCharles deGaulle, Lille3(CampusPontde Bois)

Remerciements

/'e tiens à exprimer

toute

ma

gratitude

envers

M.

RachidBerbache

et

M.

l'Atelier National de_{Reproduction des Thèses.}

Mes remerciements s'adressent _{également à l'ensemble de l'équipe de} l'organisation quim'a rapidementintégrée.

Je tiens_{enfin àremercierl'ensemble des étudiants duMaster2 GIDEayant}

réaliséles audits du site de _{diffusion de thèseà la carte de l'ANRT. Leurs}

Sommaire

Remerciements 2

Sommaire 3

Introduction 5

Présentationde

_{l'organisation}

₇

I)

_Typologie

des

sites

web

8

1) Sitesstatiquesetsitesdynamiques 8

l.a) Sites statiques 8

1.b) Sitesdynamiques 9

2) Différentes manières dedévelopperunsite 11

2.a)Ledéveloppement«brut» 11

2.b) Développementàl'aide d'unSystèmedeGestiondeContenu(CMS) 12

2.c) _{Développementà}l'aide d'un Framework 13

II/

_Conception

_du

_site

₁₆

1_{) Lesobjectifsetlescontraintes 16}

l.a)Les_{objectifs de L'Atelier National de Reproduction des Thèses 16}

1.b) Les contraintesetsolutionsenvisagées 17

2) L'ergonomie 18

2.a)Conceptionergonomiqueparlapratique 19

2.a. 1_{) Utilisationd'un référenciel d'audit deservicespouraméliorer l'ergonomie . .19}

2.a.2)Benchmarking 21

2.b) Conception ergonomiqueparla théorie 24

3) Design

graphique

3.a) Choix de la méthode 30

3.b) Phased'exploration : Observationparla veille 32

3.c) Sélection des idées 34

3.C.1)La typographie 34

3.C.2)Lesicônes et_symboles 35

3.c.3)Lelogotypeetlefavicon 36

3.C.4)Lescouleurs 37

3.c) Création desmaquettes 38

III/

_{Développement}

₃₉

1) Choixde la solutionde_{développement du site de l'ANRT} 39

l.a) LeCMSWordpress 39

1.b)Nomde domaineetserveur 40

2) Améliorerleprocessusde développement 41

2.a) Lediteur detexte 41

2.b) Utilisation de la documentation 42

2.c) Utiliser leCSSplusefficacement 42

3) Accessibilitésurles terminaux 44

3.a) Choix des navigateurs 44

3.b)Développerpoursmartphonesettablettes 45

3.c) Développerpourlesimprimantes 46

4) Optimiserle chargement despages 47

4.a) AvecWordpress 47

4.b)Avecleslangagesweb 47

4.c) Avec les images 48

Conclusion 49

Bibliographie

51

Introduction

Dans le cadre du Master 1 _{parcours Sciences de l'Information et de la Documentation,}

nous avonsl'occasion d'effectuerun_stagedans le _secteurd'activité_{quinousconvient.} C'est alors une occasion idéale de _{porter notre attention sur une activité} mêlant _{pratique et} théorie _au coeurdenotresociété maissouffrant d'un_{manque d'intérêtscientifique:la production des sites}

web.

Le choix du _{stage s'est alors porté sur LAtelier National de Reproduction des Thèses car}

cet_{organismeabesoin decréersonsiteweb institutionnel.Le tempsoctroyépourréaliser cette}

mission est de 4 mois. C'est alors l'occasion demener une étude _{approfondie surles différents}

aspectsliés àl'activité de réalisationd'un siteweb.

leXXI èmesiecleestune _{époque où}le web_etsesoutils_{mutent etse propagent}de_manière

exponentielle. Parallèlementà cette évolution,les supports numériquestendent à sediversifier, toutcommeles usagers _etleurs_attentes. Malgré_{tout, même} s'il_estrelativement _aiséde_trouver

des ouvrages sur la programmation ou des études sur l'ergonomie des sites web, il existe en revanche un vide informationnel au sein de la littérature scientifique _concernantles _pratiques

de création. Les _{concepteurs développeurs sont pourtant les premiers acteurs du web et son} évolution est en _{grande partie liée àleur activité. S'intéresser à aux pratiques des concepteurs}

développeurs pourrait permettre aux Sciences de l'Information et de la Communication d'apporter leurs expertises tout en fournissant des réponses pertinentes pour améliorer la

qualité dessitesweb.

La _{question ayant permis la rédaction de ce mémoire et à en établir la problématique est la}

suivante:

Comment _optimiser

_le

_de

_création

_d'un

_internet

_?

Dans cette _{question, deux termes sont à préciser. Nous entendons par optimisation,}

l'amélioration _{qualitative du produit en respectant les délais pour préserver la productivité. Le}

motcréationsous-entend la_{conceptionetledéveloppement, les deuxactivités principales dela}

Ce _{mémoire à pour vocation d'accompagner la conception et le développement du} site _{institutionnel de l'ANRT par le choix pertinent d'outils, de technologies et de pratiques}

permettant d'optimiser cette tâche. Ces choix sont motivés par le travail effectué lors de ce

stage etrenforcéspar uneexpériencede4ans de veilleetdebenchmarking dans le domaine du

développement informatique orientéweb.

Dans une première_{partie, nous} développerons _avec précision la _notion de site web _etles

différentes manières que nous avons pour les réaliser avec différentes ressources pertinentes

permettantd'optimiser l'apprentissage.

La seconde _{partie de ce mémoire est liée à la conception du site internet et centrée en}

grande partie sur l'utilisateur. Cette partie plus théorique se fonde en grande partie sur des

articles _{scientifiques et des pratiques professionnelles. Lbbjectif principal est de proposer un}

raisonnementintellectuel_{permettantd'optimiser la qualité dusitefinal.}

Enfin, la dernière _partie se concentrera sur la réalisation technique. Lessentiel du travail ici est alors _{d'optimiser le travail des développeurs en proposant des pistes d'amélioration en}

matière de_{productivitéetde chargecognitive.}

Pour _{adopter une postureobjective etun axe de réflexion qui n'est pas uniquementliée à}

une _expérience personnelle, _{un travail de préparation} de _{mémoire a été} réalisé. _{Des entretiens}

ont été menés avec différents acteurs de la _{conception et du développement de sites web. Ces}

entretiens ont_{pour uniquebut d'apporter plus de cohérence au plan tout enmotivantle choix} de cette_{problématique, (résumés disponibles en annexe3-p.63)}

Présentation

de

_{l'organisation}

Le _{stage s'est effectué au sein de l'Atelier National de Reproduction des Thèses. Cet}

organisme comptabilisant 18 employés a été créé en 1971 avec comme principale activité la reproduction des thèses

d'État.

d'assurer de la conservation etla diffusion detoutes les thèsessoutenues en France. Ces thèses

sont_{reproduites àla base partechnique d'offset. Cette techniquene permet malheureusement} pas de couvrir les besoins de diffusion de l'ensemble des thèses soutenues en France. La reproductionsurmicrofiche estalors adoptée àpartirde 1983.

Avant 2001, existaient deux ateliers de _{reproduction de thèse. Un premier atelier basé}sur Lille pour les thèses de lettres et un autre basé à Grenoble pour les sciences exactes. C'est à

cette _{date que l'atelier de Grenoble ferme ses portes et, l'ANRT de Lille prend alors en charge} l'ensemble des_disciplines.

Malheureusement, dans un contexte de plus en plus numérique, l'activité de diffusion

de thèses _{papierdécroît. Il est alors important pour l'ANRT de diversifier endéveloppant ses} services _{périphériques. Cet atelier dynamique est en mutation et développe alors des services}

commenumérisationd'ouvrages_{anciens ou}la numérisation rétrospective dethèses.

L'ANRT _{possède un site permettant devendre les thèses ayant subi une refonte en 2011.}

Ce site n'a _{pas de butcommercial car lavente des thèses est destinée uniquement à couvrirles}

frais defonctionnementde _{l'organisation. Leproblème principal est quece site nepossède pas}

une bonne visibilité ne _{permet malheureusement pas de communiquer correctement sur les}

activités annexes comme l'activité de numérisation ou de veille dans le domaine _{juridique. Ce}

site a été produit _{par une agence} de _{communication et} il n'est _pas administrable directement

parl'organisation.Enfin, lesmises à jour peinentàsefaireavec efficacité.

Lamissiondece_{stagerépond doncàunbesoin de l'organisation. Il fautpermettreàl'ANRT}

dese doter d'un siteattractifet _{possédantunebonne visibilité surles moteurs de recherche.Le}

principal objectif decesiteestlacommunication.Ildevraprésenterles informationsdemanière

claire et doit de _{plus, permettre aux employés de l'administrer simplement afin de réaliser les} misesà_{jourd'information le plusrapidementpossible}

I)

_{Typologie des}

_sites

_web

Avant de détailler le travail effectué durant la mission _{pour créerlesite web de}

l'ANRT, ilestnécessaired'établirunetypologie plus générale. La réalisation de_cette

typologieestutilepourdéterminer la technologie à employeretrépondreauxbesoins de lamission. Connaîtrel'ensemble des outilsnous_permettantde réaliser_unsiteest une_{étapepréliminaire,maisnécessairepouroptimiserleprocessusde}production.

« La bonne réalisation d'une mission est liée à _{l'expertise du concepteur/}

développeurcarcetteexpertisepourrafournirunesolutionsatisfaisanteetadaptée.»

[01[-(Chevalier, A., &Bonnardel, N. (2003))

1)

Sites

statiques

et

sites

dynamiques

Ilexisteunedifférence fondamentaleentrelessites_{statiquesetlessitesdynamiques.Lorsde} l'élaboration d'unsite, savoirsile siteest_statique oudynamiquepermets d'anticiper l'utilisation

des _{langages mis en œuvre et la complexité du projet. C'est la première caractéristique à} déterminer.

l.a) Sites

_statiques

Même silenom_{peutprêter àconfusion,unsite statiquen'estpas une page sansmouvement,}

maisune_{pagevisibleparlenavigateurweb tel qu'elle aété conçue. Ilest possible alorsd'afficher} une vidéo, un diaporama interactif _mais ce site ne sera pas en mesure de proposer aux utilisateurs de _{s'enregistrer ou de rédiger un commentaire par exemple. Les sites dits statiques} sont des sites _{qui ont pour objectif l'affichage simple d'une page web sans traitement effectué}

par le site. Ces sites sont codés principalement en HTML/CSS. Dans certains cas, l'utilisation

du _{JavaScriptest possible pour établir une interactivité entrel'usager etlenavigateur. Ces sites}

ne mobilisent pas _{de grandes connaissances en programmation et se} codent _assez rapidement.

Les _{enseignements dispensés à l'université dans certaines formations permettent}

rapidement d'apprendre à créer ce type de sites, mais il est aussi conseillé d'apprendre le développement demanièreautonome. Unsimple éditeur detexte etlenavigateurpermettentde

créerune_{pagestatique.}

Openclassroomunesourcepertinente permettantd'apprendreàréaliser lessitesstatiques.

Ce cours _{permetd'apprendre les bases du langageHTML/CSSdemanière intuitive :}

http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Pourréaliser des sites_{statiquesintéractifs, ilestnécessaired'apprendre le langage JavaScript:}

http://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript

Enfin, le site _{http://codepen.io/pen/ ou http://jsfiddle.net/ sont deuxsites qui permettent}

de coder en _{HTML/CSS/JavaScript}directement _{au sein} d'uneinterface _{interactive permettant}

d'observer lerésultatdemanière _synchrone.

l.b) Sites

_dynamiques

Opposésauxsitesstatiques,lessites dynamiques sontcodés différemmentenintroduisant deux _{langages très importants pour les développer : le PHP qui permettant d'ajouter de}

nouvelles fonctionnalités au _{langage HTML etle My SQL qui permet d'interagir avec la base}

de données. L'intérêt_{principal de ces sites est de proposer une information qui sera différente}

enfonction de l'utilisateur sans intervention du webmestre. Actuellement, la _{majorité des sites} comme celui deLille3 oude Facebooksontdes sites _{dynamiques. Il estrecommandé de savoir} comment_{développerunsite statique(connaîtreau minimumles langages HTMLetCSS) avant}

de _{développer un site dynamique. Un tutoriel permettant d'apprendre à développer un site} dynamiqueen PHPsesitue àcette adresse:

http://openclassrooms.com/courses/concevez-votre-site-web-avec-php-et-mysql

Un éditeur de texte etun _{navigateur nesuffisent pas pour interpréterles fichiers qui sont}

développésen PHP. En effet, lesnavigateursnepeuvent interpréterqueles fichiers HTML, CSS et _{JavaScript. Pour ce faire, il est nécessaire de stocker l'ensemble des fichiers sur un serveur.} Ce serveur va se _{charger de générer du code HTML à partir des fichiers PHP. Le} code _HTML

généré sera envoyé et affiché au navigateur du client. Les serveurs sont souvent payants mais

des solutions existent _{pour apprendre à développer des sites dynamiques directement sur un} ordinateur. Le _{principe est simple : simuler un serveur au sein de l'ordinateur à l'aide d'un} certain _{typedelogiciel.Lelien fourniversle tutoriel d'open classroompermetaussid'apprendre} àutiliser

Selon le _{systèmed'exploitation,leprogramme quipermetde réalisercettetâcheestdifférent:}

- Lesordinateurs

avec un _{systèmedetypeWindows utilisentWampServer} http://www.wampserver.com/

-Lesordinateursavec un _systèmede_{typeMac OS}utilisent_MAMP https://www.mamp.info/en/

-Lesordinateurs avec un _système de _{type GNU} utilisent _{LAMP via}le_gestionnaire de_paquets.

La_{procédure d'installationestexpliquéeàcette adresse}

http://doc.ubuntu-fr.org/lamp

Information_{complémentaire I : Unsite dynamique n'estpastoujourscodéenPHP/Mysql.} La _{majorité des sites dynamiques est codée en PHP/MySQL. Mais, il existe bien d'autres} manières de_{développerunsite dynamique.Voicilesméthodes les plus utilisées actuellement:}

-Rubyonrails, unframework utilisantunlangage développéparYukihiroMatsumotopubliéen 1995.

-Java Enterprise Edition (java EE) publié en 1999. Utilisé pour les entreprises, permet de développerune application solideenjava.

-DepuispeuleJavascriptutilisé principalementpourl'interactivitéentrel'usageretlenavigateur

évolue pour permettre de développer un site dynamique grâce a Nodejs, une plate-forme

logicielle libre crééeen2009 parRyan Lienhart Dahl.

Pour réaliser site _{dynamique avec ces technologies, il estnécessaire d'avoir un niveau de} connaissance encore _{plus importantque la simpleconnaissance des langages. Rails,java EE et} Nodejs sontdes Frameworks etil est importantde maîtriserleurs fonctionnementsen plus du

langage (notionde frameworkdéveloppéeenpartie 1.2.C).

Information_{complémentaire2: LesCookies}

Le cookie est un _petit fichier _texte stocké _sur le terminal de l'internaute. _Ces fichiers

permettent aux navigateurs de conserver des données sur les utilisateurs et leurs habitudes

de _{navigation. Cette amélioration dans la navigation consiste à enregistrer les préférences des} utilisateursou encoreleursmots_{de passeafin dene pasavoiràs'en souvenir. C'estpourcelaque} les cookiessont_{largement utilisésau sein dessitesdynamiques.}

Il est _{important de noter que depuis la directive 2009/136/CE, L'usager d'un site utilisant}

les cookies doit_{obligatoirementêtre avertideleurs utilisations, carcertains cookies (les cookies} de _{pistages) sont uniquement utilisés pour suivre les habitudes de navigation de l'internaute,} l'utilisateur doit donnersonaccord_{pourpermettreausited'utiliser les cookies.}

2) Différentes manières de

développer

un

site

Après avoir déterminé silesite doitêtre statique ou dynamique, ilestutile desavoir quels

outilsvontnous_{permettre de développer le siteetquelles serontles contraintes de conception.}

Tous les outils _{présentés permettent de coder un site statique ou un site dynamique mais, ces} solutions _{possèdent toutes desavantages et des inconvénients. Le choix va être déterminé par}

une réflexion menée d'une _{part sur les objectifs et les contraintes associées aux besoins du}

commanditaireetd'autre_{partsurlescompétences du développeur.}

2.a)Le

_{développement}

_brut

Ceterme familier_{exprime la façon de réaliserun siteweb statique ou dynamiqueàl'aide} d'un _{simple éditeur de texte à partir d'un document vierge. Il n'existe pas vraiment de nom}

pour qualifier cette technique, mais c'est pourtantla façon la plus répandue, que ce soitpour

créer un site _{basique ou pourapprendre à développer. Créer un sitede cette manièreoblige le}

développeurà avoir au minimumune connaissancedans le HTML etle CSS. La complexité de

développement est liée exclusivementàla complexité des fonctionnalités misesen œuvre dans lesitefinal.

Avantages :

-Un _{simple éditeur de texter permet de coder un site statique ou un serveur}

émulé danslecasd'unsite _dynamique

-Le_{développeura un contrôlesurtoutce quise passeauseindusite. Le sitecréé} est_{théoriquement optimisé}

-C'est la meilleure_{façon d'apprendre àdévelopper}

Inconvénients:

-Il faut _{posséderune certaine connaissance des langages du web. C'est alors une approche plus}

appropriéepourles développeursavertis.

-Travailler de cette manière _{peut-être extrêmement chronophage. Toutes les fonctionnalités} doivent être codées etle _{développeur devra apprendreconstamment. D'autres solutions seront} préférées dans le cadre de lacréationd'un sitedynamique

-Chaquepersonne a sa proprevisiondu développementetlastructured'unsitereflèteengénéral la _{façon depenser quiestpropreà chacun. Il estalors difficile demener un projet importantet,}

2.b)

_{Développement à l'aide d'un Système de Gestion de Contenu (CMS)}

Un _{Système de Gestion de Contenu (ou Content Management System) est un outil}

permettant de créer et d'administrer des sites web dynamiques par l'intermédiaire d'une

interface _{système en ligne. Les CMS les plus connus actuellement sont Wordpress (https://}

fr.wordpress.org/) et Drupal (http://drupalfr.org/). Il existe deux types de CMS : Les CMS open source et les CMS propriétaires. Les premiers sont gratuits, mais l'usager n'est pas

propriétaireetle codesourceestaccessiblepartoutlemonde tandis quelesCMS propriétaires sont_{développés pardes agences ou desentreprisesprivées qui sontdoncpropriétaires deces} architectures.Généralement, les CMS _{possèdent deuxpartiesdistinctes} :

1) Le «Back-office» : Cet anglicisme désigne l'interface d'administration _{qui permet} au

webmestre demodifierlecontenu_{des pages oule design dusite.Cetteinterfaced'administration} est_{accessible par unnombre d'utilisateursrestreint contributeur dusite.}

2) Le « Front-office » : Désigne l'interface (le site web) _{qui sera vue par} l'internaute lors de

l'accès ausite internet.

Les CMS introduisent aussi les notions de modules et de thèmes. Les modules sont

des _{programmes téléchargeables facilement au sein de l'interface d'administration ajoutant} des fonctionnalités très variées soit _{pour l'administrateur au sein du back-office soit pour} l'internaute dans le front-office. Les thèmes _{quant à eux permettent de modifier simplement}

l'apparence duback-office oudufront-officesans avoiràinteragiravecleCSS.

Avantages:

-LesCMSsontfacilement utilisables_{parles débutantsgrâceleuraccès facilitéetla clartéde leur}

interface.

-Ces_{systèmespermettentde développerunsite statiqueoudynamiquesansavoiràprogrammer.} -La_{plupartdes CMSsontdisponibles enOpen Source, c'est-à-dire qu'ilssontlibres de droitset} queleur codeest accessiblepartoutle monde.

Inconvénients:

-Les_{CMS open sourcesontgratuits,maisles modulesetthèmes les plus performants développés} pardes professionnelssonten réalité,souvent payants.

-L'utilisation d'un CMScontraintlewebmestreà_{adaptersesbesoinsàl'outil. Vouloir modifier le}

design oulesfonctionnalités des CMSsans avoirrecours àdes modulesoudes thèmes oblige le webmestre àunebonne_{expérience deprogrammation dessitesdynamiques.}

- L'architecture de

ces _{systèmes ne permet pas d'avoir un référencement optimal et peut poser}

des_{problèmesdesécurité.}

-Ces outils _{proposent des solutions s'adaptant à tous les besoins, les CMS sont dotés de} fonctionnalités _{qui ne sont pas forcément utiles à tous et qui, par conséquent, alourdissent le} chargement despages.

2.c)

_{Développement à}

_{l'aide d'un}

_Framework

Au fil du_{temps et auregard desdifférentesmanières quiont été présentéesde développer}

unsiteweb, les_{développeurs} sontparvenus auconstatsuivant :

-Le code d'un site web _{développé de manière « brute » est difficilement maintenable dans} le _{temps et par une équipe de développeurs. Plus le site est complexe et riche en matière de} fonctionnalités,_{plus le code}est redondantet désordonné.

-les sites de_{type CMS nepossèdent pas toujours un code optimal et certaines fonctionnalités}

sont_{superfluesce quinuitàlaréactivitédusite.}

Ce constat introduit la dernière _{façon de développer un site, les Frameworks. En} informatique, un Framework est un ensemble cohérent de composants et de fonctions qui

permettentdecoder plus efficacement selon une structuredéfinie. Icipourcréer un siteweb, il

n'est_{plus possible demettrelespages,les imagesoumêmele code sansrespecterunehiérarchie}

prédéfinie. Le but est de réaliser le site d'une façon bien structurée. Selon les Frameworks et

leur _{philosophie de programmation, l'agencement des fichiers se fera de manières différentes,}

mais_{l'objectifetla façon de développer restentles mêmes : Optimiserle code etle rendre plus}

maintenableetévolutif.

Ces Frameworksont _{permisde démocratiserla structureMVC : Modèle Vue Contrôleur.} LastructureMVC_{permetdeséparerle code selon3facettes distinctes :}

-le Modèle : cette _partieest relative_{à tout ce quiva agir sur} les données stockées dans la base

de données. Son rôle _{principal estd'interagir avec cettebase de données pour de récupérerou}

stocker desinformations.

-la Vue : Cette _{partiese concentre}exclusivement _surl'affichage des données dansle _navigateur

du client. Lavueestdonc_{constituée parles langagesHTML, CSS etJavaScript.}

-LeContrôleur : C'estla_partie décisionnelle de l'architecture. _Le contrôleur_se charge de faire

le lien entrele modèle estlavue. Il sera aussi en _{charge par} exemple de _récupérerles données

extraites par le modèleetde l'injecter dans la vue pour afficher les informationsau navigateur

Avantages:

-Les Frameworks et la structure MVC _{permettent aux sites d'être plus stables et facilement} maintenables par une équipe complète. Il est aussi plus aisé de reprendreun ancien projet avec cettearchitecture.

-Développer un site de cette manière permettra d'optimiser le chargement des pages et la

sécuritédes fichierssans même avoir_{à y penser.}

Inconvénients :

-La _{prise en main d'un framework est complexe. En plus de bien connaître tous les langages}

propres à ces frameworks comme le PHP/MySQL, il est important de savoir de maîtriser la

façon de coderau seindecesframeworks.

-Les frameworks sont en évolution _{permanente et} l'architecture des fichiers _{se voit} parfois

modifiée entredeuxmises à_{jource quipeut êtredérangeant pourle développement.}

Les tutoriels _{permettant d'apprendre à développeravec un framework sontrécents. Grâce} àla veille réalisée dans ce domaine, nous_{pouvons citer}deuxframeworks performants. Laravel

5 un framework PHP et _{angular JS un frameworkjavascript. Google Trends permet de rendre}

comptede l'intérêt porté à cesframeworks grâceaugraphe ci-dessous :

angularjs TtftineOv et**»;: laravel T«itie iwlHf'&Ht ♦_Ajouter unterme

Évolutionde l'intérêt _{pourcette recherche}

r

Àce_{jour,deux tutorielspertinentspermettentd'apprendre àutiliserle framework Laravel 5 :}

-http://openclassrooms.com/courses/decouvrez-le-framework-php-laravel

-http://www.grafikart.fr/formations/laravel

Le _{JavaScript estbeaucoup moins utilisé que le PHP pour réaliser des sites dynamiques. Les}

tutorielssuivants concernant_{AngularJSsontmoinscomplets etenanglais:}

-http://www.tutorialspoint.com/angularjs/index.htm

-https://docs.angularjs.org/tutorial/step_OO

Dans cette _{partie, l'ensemble des solutions permettant de savoir développer un site web}

professionnel ont été étudiées. Lexpérience dans les techniques et le développement des sites

internetoctroieun _{avantagenonnégligeable, carle choix des technologies n'est alors paslimité}

par les compétences en programmation. Cette connaissance de la typologie des sites permet

de fournir une _{réponseadaptée auxbesoinsformulésparle commanditaire. Pour maîtriserces}

outils ilest_{importantde pratiquerlaprogrammationdemanièreautonome(commementionné} dans toutes les _interviews) car c'est un _{apprentissage permanent et} les technologies du web

II/

_Conception

_du

_site

La _{principale difficulté de l'activité de conception d'un site web réside dans le} fait _{que son champ d'études est extrêmement vaste. La conception d'un site est}

une activitémêlant_{pratiquesprofessionnelles et théories scientifiques. Elle doit}

s'effectuerautant _{quepossibleen concertation avecl'ensemble des représentants} de_{l'entrepriseoudel'organisationetdesesbénéficiaires.Leconcepteurdoittenir}

comptedesattentesdesdifférentsacteursduprocessus :le commanditaireetles futurs

utilisateurs dusite. Durantcette_{phase deconception, ilestfortement déconseillé} decommencerle_{développement carie choix des technologies à utiliserou encore}

l'élaboration du_{designseferaau coursdecetteétape. Deplus, les objectifsnesont}

pas toujoursdéfinis lepremier jouret peuventévoluerau coursde la mission. Le

butestdemontrerla démarche intellectuellemiseen_{placepourconcevoirlesite}

institutionnel de l'ANRT.

1)

Les

_objectifs

et

les

contraintes

l.a) Les

_{objectifs de L'Atelier National de}

_{Reproduction des}

_Thèses

Déterminer les _{objectifs de la création d'un site internet est la première étape. Il est}

important de comprendre précisément les besoins du commanditaire. Cette étape doit

s'effectuer le _{plus rapidement possible tout en conservant le maximum d'objectivité. Ce travail}

d'analyse s'effectuesi possible dès l'entretien avecl'organisme.

Lors de la mission, les _{objectifs ont été déterminés dès l'entretien} avec M. Rachid Berbache,

M. _{Schopfel et M. Custodio. Ces objectifs ont tout d'abord été formulés sous forme de}

problèmes, car l'ANRT possède déjà un site à l'adresse suivante : http://www.diffusiontheses.

fr/,maisce site necorrespond _{pas aux}besoins actuels de l'institution _:

- Il

ne_représente qu'une des activités del'entreprise _{(lavente de thèsesauformat papier)}

- Il

n'est pasadministrableparlesemployéset, a été réalisépar un prestatairedeservices.

- Le site

- Les

employés de l'ANRT ne possèdent pas les compétences nécessaires pour développer un siteweb.

- Lesite

possèdeundesign quinecorrespondpas auxstandards actuels.

En _{complément, 3 audits du site commercial del'ANRT m'ont été fournis. Ces audits ont} été _{réalisés par 11 étudiants du Master 2 GIDE. Les conclusions de ces audits n'ont pas permis}

d'établirde nouveaux_{objectifs,maisontpermis deconfirmer les problèmes actuels.}

Ces _{problèmes ont ensuite permis de cerner plus précisément les objectifs du site à}

développer:

- lesitedoit

apparteniràl'ANRTetdoit êtrefacilement administrableparles employés.

- Le site doit

se concentrer sur l'aspect informatif_{etdoit permettre à} l'internaute de _connaître

l'ensembledes activitésde _{l'organisation.}

- Le

design doitêtreattractifet doit fournir confort visuel optimal, s'adaptantaux smartphones ettablettes.

l.b) Les contraintes etsolutions

_envisagées

à _{partir du moment où les objectifs sont établis, il est important de définir toutes les}

contraintes. Cette _{étape va nous permettre de bien saisir les difficultés que nous allons} rencontrer lors de la_{création pour ensuite trouverdes solutionspragmatiques et adaptées. Ces}

contraintes _{peuvent être liées à plusieurs composantes. Lenvironnement dans lequel évolue}

l'entreprise,certainsobjectifsou encoreles connaissancesenprogrammation peuventconstituer

desobstacles à_{prendreencompteavant toutdéveloppement.Dans le cadre de lamission, nous}

avons dû faireface à plusieurs_{contraintes concernantlecontexte de créationdusite etcertains}

objectifs quidemandentune attentionparticulière :

-Comme mentionné dans la _{présentation de l'entreprise, l'ANRT est en pleine reconversion.} L'activité de diffusion de thèse est en _{régression et, l'organisation est en attente d'une nouvelle}

mission nationale avec un délai de 2 ans minimum. Cette contrainte a un _impact direct _sur

la difficulté de _{conception. Dans l'étape de conception d'un site, il est important de posséder} le contenu _{pour constituer la hiérarchie des informations présentes. De plus, concevoir} et _{développer un site tout en rédigeant l'ensemble des contenus augmente la difficulté de} la mission. _{Un corpus de base a été constitué mais, ce corpus n'a pas été jugé satisfaisant. La} solution_{temporaireaétédeconcevoirle siteetl'ensemble despageslecomposantsansposséder} le contenu_adéquat.

-La seconde contrainte est liée aux _{objectifs établis. Réaliser un site web administrable}

par les employés ne connaissant pas les langages de programmation restreint le choix des technologies à employerpour le développement. Il est difficilede coder le siteen « brut » ouà

laided'unframework_{pourdeuxraisons :}

1-Durant lamission, il n'est pas possible de développerune interface d'administrationavec ces

outilscarcela_{prendraittrop detemps.}

2-Les _{employés ne pourraient pas rajouter de contenus sans bien connaître les langages de}

programmation associéscequin'estpas pertinent.

Cette contrainte _{implique aussi le fait de prendre en compte deux types d'utilisateurs dans la}

conception etle développement du site : L'internaute etles employés de l'ANRT quiseront tous deuxamenés àutiliser lesitedifféremment.

2)

_Conception

_de

_Fergonomie

Lergonomie est un aspect central de l'activité de conception du site web. C'est pourquoi

l'étude sur l'utilisabilité du site est effectuée directement _{après avoir défini les objectifs et les} contraintes. Selon _{[02]- Fabien duchateau, maître de conférences à l'Université Lyon 1 et} auteur de cours sur l'ergonomie dans _{un contexte numérique, une} définition simple _{serait :}

« _{Lergonomie est}

vue comme l'étude scientifique des relations entre l'homme et ses moyens,

méthodes et milieux de travail et _{l'application de ces connaissances à la conception de}

systèmes ». Lobjectif principal de l'ergonomie d'un site web est de permettre aux utilisateurs

d'utiliser le_{dispositifavec un maximum deconfort tout enpermettant d'accéder rapidementà} l'information recherchée.

Il existe _{aujourd'hui un nombre important de techniques permettant d'évaluer et}

d'améliorer _{l'ergonomie d'un site web comme les tests utilisateur encore les techniques} d'eye-tracking. Mais l'ensemble de ces méthodes est appliqué sur un site web existant et le

site institutionnel de l'ANRT n'est _{pas encore en développement à ce stade de la mission. La}

conception de l'ergonomie du site a été rendue possible grâce une approche expérimentale

empruntantàdiverses techniques d'analysepuisuneapproche adoptantuncadre plus théorique

2.a)

_{Conception ergonomique}

_la

_pratique

2.a.l) Utilisation d'un

référenciel

l'ergonomie

Information :

L'audit deservice estun_processusd'analyse_{visantàévaluer}la qualité d'une_{prestation. Ce}

travail d'auditestfacilité_{parl'utilisation de référentiels faisantautoritéet permettantd'appliquer}

une méthode _{rigoureuse. Le référentiel que nous avons utilisé durant de ce stage est la}

check-list. Une check-list est une _{grille d'analyse permettant d'évaluer les bonnes pratiques d'un site}

web. Ces bonnes_{pratiques pourront évaluer l'ergonomie mais aussi d'autres aspects commela}

pertinencedescontenusoula qualité du code.

Cettesolution_{envisagéepourconcevoirunsitepeutne passemblerappropriée,maisiln'est}

pastoujours possible demener destests impliquant les utilisateurs dans le cadre de la création

d'unsiteweb étantdonné lescontraintes _{temporelles. Une expérienceaétémenéeeninversant}

la _{procédure d'audit et en détournant son usage. Les check-lists n'ont pas été mobilisées pour}

évaluerundispositif. Elles_ontété utilisées_pourréaliser l'expérience _suivante:rédiger_uncahier

des_{chargespourconcevoirlesiteweb. Lebutestdetraiterchaquepointdu référentieletde les}

consignerdans undocument structuréetrédigédemanièresimple (Annexe2p.62).

À _{partir d'un raisonnement déductif, il est essentiel de défendre cette expérience : Si la} check-list _{permet d'évaluer l'ergonomie d'un site web. Concevoir un site web à partir de la}

check-list doit _{permettre au siteweb ainsi conçu, le respect des règles ergonomiquesénoncées} dans ceréférentiel._{Lenjeu principalestalorsdetrouverleréférentielle plus complet possibleou}

demobiliser_{plusieurs référentielspourcouvrirle plus de possibilités.}

Le document _{rédigé nous a permis de constituer le cahier des charges du site de l'ANRT.}

Cecahier des_{charges s'est basé surles deux check-lists suivantes :}

- La charte

ergonomiquedes sites internetpublics. Unecheck-list sélectionnée parles étudiants

du Master 2 GIDE. Cette check-list a été utilisée _{pour mener un} audit _sur le _site de _vente de

thèseàlacarte.Lacharte_{ergonomiquedessites internetpublics se situeàl'adressesuivante :}

- Leréférentiel

d'Opquast, unecheck-list utiliséeparles professionnels du web pour évaluer les bonnes _{pratiques mises en œuvrepourleur réalisation. Cette check-list apermis de compléter} le cahier des _{charges car son champ d'application estplusvaste que la charteergonomique des}

sitesinternet_{publics.Lacheck-listse situeàl'adressesuivante :}

http://checklists.opquast.com/fr/

Ces référentiels ont_{permisde réaliser le cahier des charges rapidement, cartouslespoints} énoncéssontdéfinis_{explicitementetdemanière structurée. Lescheck-listsontaidéà concevoir}

unsite_{respectantuncertain nombre de règles d'ergonomietoutenrespectantlesdélaisimposés} pourla rédaction decemémoire. Lecahier des chargesainsi généréestànotre sensclair, adapté à_l'ANRT,ethiérarchiséenfonction descontenus_présents.

Cette _{expérience estjugée concluante d'unpointde vue conceptuel, car ce document est}

simple et apermis deposer surpapier un nombre important d'informations pour concevoirle

site.

«les _principauxproblèmes de _{conception ont comme} particularité _{que toutes} les informations

nécessaire àleurs résolutionnesont_{pas consignéesdans le cahierdes charges »}

[03]- ChevalierA., FOUQUEREAU N„VANDERDONCKT J.

Le résultat _{dépasse l'élaboration d'un document permettant de fournir les informations} nécessaires àune _ergonomieminimale _{au sein} du_siteweb. Toutefois, le travail _surl'ergonomie

du site est minimal et n'est _{par conséquent, jugé que peu satisfaisant. Il est indispensable de}

trouver d'autres_{solutions pourcontinuerle travailsurl'ergonomie.}

Attention:

La charte _{ergonomique des sites internet publics est destinée aux sites émanant d'un}

organisme assurant un service public. Les sitesvisés sontles sites institutionnels etles sites de

service en ligne de _{ces organisations. De ce} fait, il _est difficile de les appliquer _{pour un autre}

typedesite. Nous avons puappliquerceréférentielau siteinstitutionnel de l'ANRTcaril vérifie

ces conditions. Afin de _{pouvoir réaliser l'expérience dans un autre contexte, il alors préférable}

2.a.2)_Benchmarking

Un des _{avantages du concepteur webest qu'il estaussi utilisateur de sites web. Il est utile}

de_{profiter decet avantagepour réaliserunbenchmarkingsimple. Dansnotre cas,cette activité} consiste à _{adopter le point devue d'un internaute afin d'analyser les modes d'organisation des} sitesweb_{s'approchant dufutursiteinstitutionnelde l'ANRT afin de s'eninspirer.Il n'existepasde} site similaireau futursite institutionnel de l'ANRT (site proposantl'impression dethèses _ainsi

quelacréation demicrofiches).Unautretype de benchmarkaalors été mobilisé :lebenchmark

générique. Ilse différenciedes autres benchmarks, car il consiste à analyser le fonctionnement

des sites web des _{organisations non concurrentes conservant une caractéristique commune.}

Ce benchmark _{permettra de mettre en évidence certaines fonctionnalités attractives et les}

problèmes d'ergonomierencontréssurles sitesafin dene pasreproduire lesmêmeserreurs.

L'unique critère de sélection qui est retenu est la relation qu'ils entretiennent avec le

Ministèrede_{l'EnseignementSupérieuretde la Recherche :}

-Le CINES _{(www.cines.fr) (Centre Informatique National de l'Enseignement Supérieur)} dont les missions sont le calcul _{numérique intensif, l'archivage de données électroniques et} l'hébergement deplates-formesinformatiques d'envergure nationale

-LABES _{(http://www.abes.fr/) (Agence Bibliographique del'EnseignementSupérieur) amisen}

œuvrele SUDOC,un_cataloguecollectif des bibliothèques de l'enseignement Supérieur

-Le _{CNRS(http://www.cnrs.fr/accueiI.php) (Centre National de la recherche scientifique) qui}

produitet metauservicede la sociétéle savoir.

-Le Muséumnational d'Histoire naturelle _{(https://www.mnhn.fr/fr) dontla principale mission}

estla recherche etla diffusion de la culture_{scientifique naturaliste.}

Lors de cette _{étape, l'expérience menée surles check-lists est déjà réalisée. Lensemble du} cahier des _{charges relatifausite institutionnelde l'ANRT estenpartie constitué. Cebenchmark}

a été réalisé dans l'unique but de découvrir de nouvelles pistes _{permettant à} l'ANRT de _se distinguer des autres sitesliés au même ministère. Les problèmesmajeurs deces sitesont alors

Affichagesurlesdispositifs mobiles :

Seule la moitié des sites étudiés _{possède un affichage pour les smartphones et tablettes.}

La _{navigation n'est toutefois pas optimisée. Seuls les sites du CINES et de l'ABES respectent}

l'affichage pour les dispositifs mobiles. Sur le site mobile du CINES, la navigation au sein du

site n'est _{pas du tout ergonomique. Le menu est caractérisé par un « Go to... » et le nombre} d'éléments dumenu est_{supérieur à 100 ce quin'estpaspratiquepourl'internautenaviguantsur}

lesite.

Lesitemobile del'ABESestdifférent dusiteduCINES. Là oùle_{CINES propose unefeuille}

de _{style qui s'adapte au mobile, le site de l'ABES se situe sur une adresse différente. L'ABES}

possède doncdeuxsitesindépendantscequin'estpas enaccordavecle cahier des charges établi.

[04]- Jakob Nielsen, expertreconnu dans le domaine de l'ergonomie informatique a pourtant

défenducette idée:

« Good mobileuser_{experience requires adifférent designthan what's neededtosatisfydesktop} user. Two _{designs, two sites, and cross-linking to make it ail work ». Cette citation exprime}

le besoin de _{posséder deux sites différents. Un site destiné aux ordinateurs et un destiné aux} dispositifs mobiles, mais cesystèmeengendre plusieursproblèmes.

Même si certains moteurs de recherche à l'instar de _{Google permettent de savoir si}

l'internaute_{navigue sur unsmartphone ou unordinateur, ce n'estpaslecasdetous les moteurs}

de recherche et _{l'usager sur smartphone peut alors accéder au site qui n'est pas destiné à son}

terminal. De_{plus, les dispositifs mobilesetleursrésolutionssontde plusenplusvariés,etnous}

ne_{pouvons pasréaliserun site pourtoutesles résolutions. La}solution préférée aujourd'hui_est

tout _{simplement l'adaptation d'un seul siteà touslesdispositifs. Pourle site de l'ANRT, unseul} site sera _{développé et cesite devra s'adapterà tous} les dispositifs _{touten prenant encompte} la

façondenaviguersurlesdifférents dispositifs. La_{surchargeinformationnelle :}

Un des _{problèmes rencontrés lors de la navigation sur les différents sites est la présence} d'une forte _{surcharge informationnelle. Les sites essayent de proposer un maximum de}

ressources à l'internaute dès la _page d'accueil. Il _{y a} donc _un nombre considérable de liens

menant vers une multitude de ressources. Un internaute connaissant _{précisément son besoin}

informationnel _{pourra trouverl'information sans nécessairementlui proposer une navigation} satisfaisante mais, l'internaute désirant s'informer surles _{organisations} (conformément _{à notre}

Une_{navigation difficile:}

En _{plus de proposer àl'internaute beaucoup de liens dès la page d'accueil, Les menus ne}

sont_{pas trèspratiques,exempleaveclesitedu CINES. Son menupossèdeunetriple imbrication}

qui nuit fortement au confort de navigation. De plus, les contenus ne sont pas toujours

pertinents ( certains éléments de menu amènent vers une pagecontenant quelques lignes tout

auplus).

Accuef: Présentation _Archivage

Commentcalculer ? ft' > Calcul > Matent

GuidededémarrageOccigen f AQ Calcul Intensif

Guide de dém Malerie,s

,'o ciun_{guidepour uneprise}en Gestion des données

2e_guideest unpremier eiéme Utilisateurs<jjca|Cul

mouvezaussi trouver des informi

Projetseuropéens

|Services

3EN >

Formatons Actualités Annonces Contact

Le_{supercalculateur}OCClGLN

LesupercalculateurYODA

SOUSCETTE RUBRIQUE

Env ronnement Lamachinede_pré-post traitementCRISTAL Configuration matérielle Environnementdecalcul Compilation

Da.n,a.e modlc*M« 6ràvri ExBCU,io"*suh,i dun'ob Odcumentatlootechnique

Occigen

Le second soucis de _{navigation rencontré est, la cohabitation de liens internes amenant} à une ressource contenuesurle site et liens externes amenant sur un autre site sans en notifier

l'internaute.

Dela même manière nous avons_{navigué surl'ensemble des établissements publics placés} sous tutelle de _{l'enseignement supérieur. Ces sites possèdenten général les mêmes problèmes.}

Celaest en _{parti dû au nombre importantd'informations que ces sites doivent concentrer, et à}

l'expertise desdifférents acteursdéveloppantces sitesetneconnaissant pasnécessairement bien les _{principes d'utilisabilitémentionnésdans les audits.}

Le site doté de la meilleure _{ergonomie générale est celui du Muséum national d'Histoire} naturelle. Lelément retenu est la_{présence de deuxmenusdifférents :}

-Le _{premier menu est conventionnel et ressemble aux menus trouvés sur les sites des musées}