Les fondements d’internet et du web

Sur 8 milliards d'êtres humains, il y a 5,6 milliards qui utilisent

internet, en 1889 il y en avait 2,6 milliards.
Dans le cadre de votre formation en L.E.A et pour réussir
votre insertion professionnelle vous avez besoin de comprendre et
maîtriser le numérique et le net grâce à des cours magistraux et à
des travaux dirigés.

Dans ce cadre nous allons faire ensemble 3 cours magistraux:

1) « Les fondamentaux d’internet et du Web : Historique, état et perspectives »

Depuis l’antiquité, l’humanité a rêvé à la mise en place d’un savoir universel accessible à
tous :
• Avec la constitution de la Bibliothèque d’Alexandrie
(288 av. J.C.) qui avait pour but de rassembler dans un même lieu l’ensemble
savoir universel,
•Avec le concept de « village Mondial » Mac Lulan (1967) : tout le monde
communique avec tout le monde.
• Après la seconde guerre mondiale, le développement de la cybernétique puis
d’internet et la création du Web et le développement du numérique semblaient
mettre ce rêve à notre portée.
Internet: transport de l’information
Web: manière de communiquer
•Paradoxalement cette utopie a engendré un monde peuplé de drogués du
numérique (dont vous et moi faisons partie).

Comme dit Bruno Patino « L’infini nous été promis nos rêves numérique se
brisent » sur le temps d’attention moyen de « l’homo numéricus » (9
secondes d’après Google) cf l’ouvrage « La civilisation du Poisson rouge
».
•Comme le dit Michel DESMURGET, spécialiste en neuroscience-cognitive,
dans « La fabrique du crétin digital », les usages de divertissement sont
écrasants. Il étudie l’influence des écrans sur les enfants qui
consomment les écrans principalement sous 3 formes :
● Vidéo et télévision
● Jeux vidéos
● Réseaux sociaux
 •Le temps cumulé de 2 à 18 représente cela : 30 année scolaires ou 16 ans
d’emploie salarié… passé à se divertir devant les écrans.
Cette utopie a engendré un « monstre » : Fake News, pillages des
données personnelles, économie du doute, développement des théories
du complot, même la science est remise en cause : internet vous
démontre sans problème que la terre et plate… des IA dédiées à la
bêtise collective…
•Mais paradoxalement le numérique est aujourd’hui au cœur de toutes les
activités humaines : pour étudier, travailler, se distraire, rencontrer amis
et amour…

Des possibilités fantastiques se font jours grâce à l’I.A. et au

robot qui sont en train de bouleversé voir révolutionner le
fonctionnement du monde :
•L’I.A. conduit une voiture, un avion, produit des diagnostics
médicaux, créer de l’art, de la musique etc…
•La plupart des activités humaine sont en, train d’être
bouleversées par les I.A.
•Mais la aussi il y a potentiellement un danger pour BILL GATES,
STEPHEN HAWKING et ELON MUSK les I.A. représente
potentiellement la fin de l’humanité.

DÉFINITIONS:
INTERNET:
Ça veut dire interconnected network. C’est le « réseau des réseaux ». C’est
d'interconnections de tous les réseaux privés ou publics, grâce au langage TCP IP. C’est
par internet que l’information circule.
INTERCONNECTED NETWORKS
INTERNET C’EST : « LE RÉSEAUX DES RÉSEAUX »
« DES TUYAUX », DES RÉSEAUX DANS LESQUELS CIRCULENT DES
INFORMATIONS.

Internet définit simplement comment circulent les informations :

-Pas le contenu de ces informations

-Ni la façon dont on va consulter les informations.

LE WEB : C’EST UNE FAÇON D’UTILISER INTERNET.

LES APPLICATIONS: SUR TÉLÉPHONE MOBILES EN SONT UNE AUTRE QUI NE

FONT PAS PARTIE DU WEB
LE WEB EST UN SYSTÈME DE PUBLICATION ET DE CONSULTATION DE
DOCUMENTS (TEXTES, SONS, IMAGES, VIDÉO, 3D ETC…)

•HISTORIQUE DU WEB ET D’INTERNET

AU DÉPART INTERNET EST UN CONCEPT DÉVELOPPÉ PAR UN DÉPARTEMENT
DE L’ARMÉE AMÉRICAINE LA DRAPA PENDANT LA GUERRE FROIDE DANS LES
ANNÉES 70
•L’ANCÊTRE D’INTERNET S’APPELLE ARPANET DÉVELOPPÉ AUX ÉTATS-UNIS EN
1972.
•FAIT APPEL À UN CONCEPT FONDAMENTAL : LA COMMUTATION DE PAQUET
UNE MÉTHODE DE ROUTAGE EFFICACE ET TOLÉRANTE AUX PANNES CONÇU
POUR RÉSISTER À UNE ATTAQUE MILITAIRE.

CONCEPTS TECHNIQUES
VANNEVAR BUSH : LE MEMEX (1945)
•« SI NOUS PENSONS PAR ASSOCIATIONS, NOUS DEVONS CONSTRUIRE
NOS CONNAISSANCES PAR ASSOCIATIONS ET NOUS DEVONS NOUS
DONNER DES OUTILS QUI TRAVAILLENT DANS CE STYLE ».

CONCEPT FONDATEUR : L’HYPERTEXTE

•TED NELSON : XANADU ( HYPERTEXTE TERME INVENTÉ EN 1965)

•“un grand projet hypertextuel dont l'objectif était de créer une structure
permettant de relier toute la littérature du monde dans un réseau de
publication hypertextuel universel et instantané ”
•hypertexte un réseau constitué par un ensemble de documents
numériques de type littéraire (originaux, citations, annotations) liés entre
eux.

DOUGLAS ENGELBART : INVENTE LA SOURIS AU STANFORD RESEARCH

INSTITUTE (1967)
•LE 9 DÉCEMBRE 1968 IL PRÉSENTE AU PUBLIC : la première souris le avec
une interface graphique basé sur l’hypertexte, le concept de bureau, de
visioconférence, le courrier électronique… considéré comme « The Mother of All
Demo » ou la première Keynote de l’histoire !
 CONCEPT FONDATEUR : HYPERTEXTE
•TIM BERNER’S LEE : WEB (1989-1990-1991)
•l’idée était de faire en sorte que les chercheurs travaillent ensemble en
combinant leurs connaissances dans un maillage de documents en mode
hypertexte. Le web est né sur la base des protocoles :
•URL (UNIFORM RESOURCE LOCATORS) : MODE D’ADRESSAGE
•HTTP : MODE DE TRANSPORT
•HTML : MODE DE RÉDACTION

LE WEB : WORLD WIDE WEB

Sir Timothey John Berner Lee (anoblie par la reine d'Angleterre en juillet 2004) invente
le WEB (-/+ 1990)

« Un outil au service de toute l’Humanité »

Le World Wide Web est un système hypertexte utilisant le protocole http (hypertext
transfer protocol), permettant de relier un ensemble de données contenues dans des
pages sur le réseau Internet.
W3C : https://www.w3.org/
WORLD WIDE WEB Consortium : communauté internationale pour le développement
des standards du Web.

TCP/IP :

PROTOCOLE DE COMMUNICATION ENTRE MACHINES SUR INTERNET

Le « langage universel » qui permet à toutes les machines reliées à internet de
communiquer entre elles.
● TRANSMISSION CONTROL PROTOCOL
● INTERNET PROTOCOL

LES PROTOCOLES :
●FTP (FILE TRANSFERT PROTOCOL) : PROTOCOLE DE TRANSFERT DE FICHIERS
ENTRE MACHINES DISTANTES
●HTTP (HYPERTEXT TRANSFERT PROTOCOL) : PROTOCOLE D’ACCÈS AUX
MACHINES SUR LE WEB.
●SMTP (les e-mails) ETC…
 LES PRINCIPAUX LANGAGES UTILISÉS DANS LE WEB
•HTML (HYPERTEXT MARKUP LANGUAGE) : LANGAGE DE DESCRIPTION DES DONNÉES ET DE LEUR
REPRÉSENTATION SUR LE WEB
•CSS CASSCADING STYLE SHEET ; FEUILLES DE STYLE EN CASSCADES
•PHP : (MY PRETTY HOMME PAGE) LANGAGE D’INTERROGATION DE BASES DE DONNÉES
•JAVASCRIPT : ANIMATION / INTERACTIONS
•SQL (STRUCTURED QUERY LANGUAGE) : LANGAGE D'ACCÈS AUX BASES DE DONNÉES DEVENU DE
FACTO UNE NORME.
•XML (EXTENSIBLE MARKUP LANGUAGE) : LANGAGE ÉVOLUÉ DE STRUCTURATION DES DONNÉES
SUR LE WEB.
•JAVA : LANGAGE DE PROGRAMMATION MULTIPLATEFORMES
•PYTHON : UTILISÉ PAR L'INDUSTRIE DU JEUX VIDÉO ET LES SCIENTIFIQUE POUR L’IA
•LE RUBY : ORIENTÉ OBJET CAPABLE DE FAIRE DE LA MÉTAPROGRAMMATION…

https >>> « S » veut dire « secured »

DNS : DOMAIN NAME SERVER (SERVEUR DE NOM DE DOMAINE)

 HTML/CSS

L’ÉVOLUTION DU WEB
● LE WEB (1991) EST L’UN DES PROTOCOLES DE L’INTERNET (HTTP, SMTP, FTP, NNTP
ETC.),
● LA CONVERGENCE VERS LE WEB : HYPERTEXTE, INTERFACE GRAPHIQUE
(CONVIVIALITÉ…)
● PETIT À PETIT L’INTERNET S’IDENTIFIE AU WEB,
● C’EST UNE INTERPRÉTATION DES « RÉVOLUTIONS» GÉNÉRATIONNELLES DU POINT
DE VUE DE :
● L’INTERACTIVITÉ ET
● DE LA CONSTRUCTION ET USAGE DU CONTENU

EN RÈGLE GÉNÉRALE:
•web 0.0 : lorsque seuls des spécialistes/techniciens (webmestres, programmeurs,
initiés) œuvrent pour la survie du réseau (structure et contenus),
•web 1.0 / 1995 : lorsque seuls les spécialistes contribuent à la structure (sites) et
le public a accès aux contenus
•web 2.0 / 2004 : dès lors que le grand public contribue aussi au contenu (textes,
images, etc…)
•on aurait dû avoir le web 3.0 sémantique et le Web 4.0 de l’IA… mais à la place a
émergé le règne des plateformes et leur logique économique de la prédation de
l’attention !
 AU-DELÀ DU WEB 2.0
L'ÉMERGENCE DES PLATEFORME
•MICRO-BLOGGING (TWITTER, ETC.),
•WIKI (WIKIPEDIA, ETC.)
•RÉSEAUX SOCIAUX PERSONNELS (FACEBOOK, WHATSAPP, INSTAGRAM ETC.)
•RÉSEAUX SOCIAUX PROFESSIONNELS (LINKEDIN, ZOOM ETC.)

- INTELLIGENCE COLLECTIVE (WIKIPEDIA)

•USER GENERATED CONTENT : MÉDIA COMMUNAUTAIRE QUI PLACE
L'UTILISATEUR AU CENTRE DE TOUTE COMMUNICATION
•FLUX RSS: PAGES PERSONNALISABLES
•INTERNET COMME UNE PLATEFORME : VASTE ESPACE DE STOCKAGE
PERSONNEL QUI PEUT ÊTRE PARTAGÉ AVEC UN GROUPE OU RENDU PUBLIC.
(GOOGLE DRIVE, ONEDRIVE, DROPBOX…

•INTEROPÉRABILITÉ : capacité que possède un produit ou un système à fonctionner

avec d'autres produits ou systèmes existants ou futurs et ce sans restriction de
marque ou de mode de fabrication.
•CONVERGENCE : recoupement de services ou d'outils numériques anciennement
indépendants .
•INTÉGRATION : le fait de rassembler, dans un même outil ou système, plusieurs
composants de base d’origines diverses.
•NORMES/STANDARDS : conventions/directives (de fait ou de consensus) pour
fabriquer des outils, concevoir des systèmes et produire des données (iso, uit, w3c,
cei, …)

DES RÉSEAUX SOCIAUX A LA SERVITUDE VOLONTAIRE

La plupart des réseaux sociaux ont construit un modèle de servitudes numériques
volontaires : au cœur du système l’économie de l’attention :
EN RÉSUMÉ NOUS SOMMES TOUS DES DROGUÉS DU NUMÉRIQUE !
• Pendant longtemps la principale critique sur les réseaux sociaux était :
• « SI C’EST GRATUIT C’EST QUE VOUS ÊTES LE PRODUIT »
• Autrement dit, vous échangiez volontairement vos données personnelles contre
l’utilisation gratuite d’un réseau social ou d’une plate-forme numérique… et en réalité
personne n’en avait rien à faire !
• Même si on vous expliquait que toutes vos infos perso. servent des puissances
étrangères (principalement américaine, au travers du siphonage de vos données par la
NSA) ou à des buts purement commerciaux… la majorité des gens s’en fichent
royalement !

LES GAFAS ET LE BIG DATA

GOOGLE / AMAZONE / FACEBOOK / APPLE …ET TOUS LES AUTRES
RGPD: LOI QUI RÉGULE LA COLLECTE DES DONNÉES

● LEUR PRINCIPALE BUT : RÉCUPÉRER VOS DONNÉES PERSONNELLES

ET LES MONÉTISER PAR L’ECONOMIE DE L’ATTENTION :
- https://www.youtube.com/watch?v=5otaBKsz7k4
- https://www.youtube.com/watch?v=wShQYeH9qJk

•HTTPS://WWW.YOUTUBE.COM/WATCH?V=5MMQEB8MXVK. DATAGUEULE
- OU COMMENT INTERNET CHANGE LE MONDE ET VOTRE FAÇON DE VOIR LE MONDE ET DE VIVRE :
LE PARADOXE :
VOUS DONNEZ VOLONTAIREMENT VOS DONNÉES PERSONNELLES : MÊME LA STASI N’AURAIT PAS
RÊVÉE UNE TELLE MASSE DE DONNÉES…
 •LES BIG DATA SONT UTILISÉES POUR : LA POLITIQUE / COMMERCE / SPORT ET LA SÉCURITÉ : «
MINORITY REPORT » EN ACTION… OU PRESQUE « BLUE CRUSH » D’IBM UTILISÉ À MENPHIS ! EN FAIT
NE MARCHE QUE SUR POUR LES VOLS… POUR L’INSTANT.
•LE CIBLAGE COMPORTEMENTAL EST EN COURS… BIG BROTHER IS WATCHING YOU !
•LES ANALYSES PRÉDICTIVES BATTENT LES PRÉDICTIONS DES JOURNALISTES DANS 70% DES CAS !
DES MATHS DES STATISTIQUES ET DES ALGORITHMES
NATE SILVER : 1 AN AVANT IL SAIT QU’OBAMA SERA ÉLU À 75% DE CHANCES ! « LE DIEU, LE SEIGNEUR
DE L’ALGORITHME AU USA ! »
DEPUIS LE 11 SEPTEMBRE 2001 DES LOIS SUR LA FACILITÉ D’ACCÈS AUX DONNÉES PERSONNELLES SE
SONT SUCCÉDÉES SANS GRAND SUCCÈS VIS-A-VIS DU TERRORISME LUI-MÊME…
2011 : OBAMA GAGNE GRÂCE AU BIGDATA : TOUS LES ABSTENTIONNISTES FAVORABLES À OBAMA
SONT CONTACTÉS.
ON SAIT QU’ILS SONT POUR LUI AU TRAVERS DES RÉSEAUX SOCIAUX…

TOUTES CES SOCIÉTÉS ONT DES POINTS COMMUNS :

-SONT AUSSI PUISSANT VOIRE PLUS QUE DES ETATS

-NE PAIENT PRATIQUEMENT PAS D’IMPÔTS
-SONT TRANSNATIONALES
-SAVENT TOUT SUR VOUS
-S’OCCUPENT DE VOUS TOUT LE TEMPS ET VOUS OCCUPENT L’ESPRIT
-CHANGENT VOS MODE DE VIE PERSONNELLE ET PROFESSIONNELLE
-UBERISATION DU MONDE / UBERISATION DES ESPRITS
-2 MILLIONS D’EMPLOIS AU USA… 320 MILLIARDS DE DOLLARS DE CA !
-FÉVRIER 2011 OBAMA A REÇU TOUS LES DIRIGEANTS DES GAFAS ET DU NET ET
A PROPOSÉ AU PATRON DE GOOGLE DE DEVENIR MINISTRE DE L’ÉCONOMIE !!

VPN: VIRTUAL PRIVATE NETWORK

 2) « Le Webdesign : du Design d’interface au Design de l’attention en passant par l’UX
Design »
Introduction : Qu’est-ce que le « Webdesign » ?
Une première approche simplifiée peut aborder le Webdesign comme étant la
combinaison du WEB ; la toile et du DESIGN :

« Le Webdesigner, c’est concevoir un site web :

à la fois pensé et dessiné pour le web »

Mais c’est trop réducteur par rapport au concept de design souvent perçu avant
tout comme l’expression de quelque chose de visuel.
Steves Jobs : dans The New York Times en 2003 dit :
«La plupart des gens font l’erreur de penser que le design c’est l’apparence… Ce
n’est pas notre avis. Le design ce n’est pas seulement l’apparence et le style. Le
design c’est comment cela fonctionne.».
Le design est avant tout un processus, une méthodologie.
Le design et la production du site web est complexe et va faire appel à tout un ensemble de
compétences de métiers assez avancés et variés :

Au niveau professionnel, la plupart du temps, c’est un travail d’équipe qui comprendra au

minimum :
- un chef de projet identifié comme le webdesigner maîtrisant les méthodologies
comme l’UX Design, le responsive webdesign etc…
- un codeur ou développer, maîtrisant l’HTML, le CSS, le JavaScript, le PHP au
minimum… voire le RUBY, l’ASP, le JAVA… très recherché aujourd’hui car il y a
pénurie.
- un graphiste, maîtrisant les contraintes typographiques, ergonomiques, de formats et
de flux de données bref spécialisé web.
Bien sûr aujourd’hui une seule personne peut réunir toutes ces compétences mais
c’est assez rare.
Depuis la création du web plusieurs types de méthodes de design de site se sont succédées
: nous allons parcourir les principales ; du design graphique au design de l’attention en
passant par la méthode à la mode aujourd’hui : UX design ; le design de l’expérience
utilisateur.

I - Méthodologie de design de site : la conception de site web

Au-delà des modes et des méthodologies comme pour tout projet, il y a toujours un certain
nombre de questions de simple bon sens à se poser du type :

Pourquoi faire un site ? Etes-vous sûr que c’est utile ? Parfois d’autres modes de
communication, d’interactions avec les internautes sont plus adaptés au problème que l’on
veut résoudre par la création du site.
Enfin quel que soit le type ou la combinaison des types de design employés pour la
création d’un site web, il contiendra nécessairement les thèmes abordés ci-dessous :

1) Définir le but du site

2) Définir la cible du site : grand public / spécialiste / segmentation du public
3) Définir le contenu du site et les fonctions du site
outils : Freemind / Xmind pour faire des cartes mentales
4) Définir l’architecture de l’information et l'accès à cette information: faire une
arborescence du site
5) Définir les interactions du site / wireframes
6) Faire la charte graphique du site
7) Production du site : coder le site
8) Mise en ligne et tests
9) Référencement du site

II - Le webdesign classique : une approche graphique

D’abord, on constate rapidement en explorant le web que ces règles ne sont pas absolues
et qu’un grand nombre d'exceptions vient les infirmer.
Ensuite, elles vont faire appel à des compétences et des métiers très variés pas forcément
maîtrisés par le concepteur du site : des règles typographiques, des règles de graphisme,
des règles d'ergonomie interactives, des règles d’UX etc…
Enfin, quelle que soit la longueur et la variété de la liste, elles ne permettent pas la
réussite d’un site.
 C’est normal, une accumulation de règles n’est pas une méthode de conception : elles
permettent juste, soit d’éviter de grossières erreurs ergonomiques, soit de valider une
interface plus ou moins bien conçue.
Paradoxalement, de plus en plus de gens sans compétences particulières se mettent à
créer des sites web avec parfois des échecs ou des réussites, ce qui parait bizarre vu la
liste des compétences énoncées ci-dessus pour designer et réussir un site Web.
Tout simplement parce la manière de fabriquer les sites web a complètement changé
depuis le début du Web :
Les compétences de codage et graphisme ont été intégrées dans les plateformes d’édition
Web : les Content Management System = CMS !

Au départ, dans les années 2000, c’est très simple : si vous ne saviez pas programmer le
HTML et le JavaScript, c’était tout simplement impossible de faire un site Web !

Puis, très vite sont apparus les outils pour aider les non-programmeurs ou les débutants à
créer des sites web.

Puis les CMS (Content Management System), comme WordPRESS ou DRUPAL, JUMLA
etc… sont apparus et ont tout changé.
En séparant le contenu du site, de sa mise en forme (template) et ses fonctions (Plug-in),
ils ont permis trois choses fondamentales :
◦1) Permettre la création de site par des non-programmeurs.
◦2) Accroître la facilité, donc la rapidité de création des sites web et abaisser leur coût.
◦3) Permettre à des non-spécialistes de facilement modifier le contenu du site, bref
faciliter la modification du contenu (texte, images, vidéos) des sites webs.

Pour fabriquer un site web, trois solutions s’offrent à vous aujourd’hui :

1) Si on veut pouvoir tout contrôler et créer avec le maximum de liberté un site web,
Il faut créer un site « from scratch», c’est à dire de zéro : tout coder !
Il vous faut donc commencer par apprendre le HTML, le CSS, le JavaScript et enfin le PHP
avant de commencer. Ou faire appel à un développeur ; le seul problème, c’est le coût.
2) Tout faire dans un éditeur de site, une plate-forme. Il en existe aujourd’hui un grand
nombre de populaires comme WIX / WORDPRESS.
Au départ c’est facile et même gratuit. En quelques heures on peut créer un site !
Par contre, très vite on se retrouve dans un système fermé et très limité, qui n’aura qu’une
chose à vous proposer pour améliorer votre site : passer à la formule payante !
3) Une troisième voie s'offre à nous : utiliser un CMS comme environnement de création de
site Web avec le concours de codeur pour les fonctions qui ne sont pas fournies et de
graphiste pour créer les visuels les plus adaptés au client.
C’est le cas aujourd'hui de la plupart des sites professionnels ce qui permet d’avoir
une grande souplesse tout en ayant le meilleur rapport qualité / prix dans la
création.

Néanmoins, le fait d’avoir réalisé une intégration du savoir-faire des webdesigner, des graphistes et des
codeurs dans les plates-formes de création de site web ne rend pas obsolète la nécessité d’apprendre le
webdesign car quelle que soit la qualité d’un outil, la qualité du résultat dépend avant tout des choix et du
savoir-faire de celui qui le manie.
Voici donc dans la partie suivante, un panorama non exhaustif des différents types de design de site web que
vous pouvez utiliser dans la création des sites web.
 III - D’autres approches de design de site web :
Beaucoup d’approches sont possibles. Voici celles qu’il me semble nécessaire de
connaître aujourd’hui.
◦Le responsive web design

Il s’agit de concevoir un site, qui non seulement fonctionne sur les différents types de
média (ordinateur de bureau, portable, tablette, mobile), mais va se redimensionner
automatiquement en fonction de la taille des écrans. Il est surtout pensé pour ces
différents types de médias et donc affiche un contenu adapté à chaque type de
support.

Un des promoteur de ce type de design est Ethan MARCOTTE :

Vous pouvez découvrir sa démarche dans son site ou ses publications :
https://ethanmarcotte.com/
Pour mettre en place un site responsive il faut s’appuyer sur 3 choses :

1) Une grille flexible : facilité par l’apparition en CSS et HTML 5 de deux techniques :
FlexBox et CSS Grid layout. Hérité des mises en page papier, la création de grille
modulaire permet à la fois une grande souplesse et une grande créativité :
http://yharel.free.fr/data/informatique/logiciels/bureau/traitement_de_texte/typographie/mise_page_modulaire.htm

2) Des images flexibles : en utilisant des pourcentages pour l’affichage des images et en
utilisant des images vectorielles type SVG (Scalable Vector Graphics) prises en charge
aujourd’hui par la plupart des navigateurs web.
3) Les Media Queries : la technologie HTML / CSS qui permet d’adapter les images à la
taille des écrans mais aussi de contrôler et changer la taille des polices et le type de
mise en page.

◦Design d’affordance: ne me faites pas chercher!

En 1977, James Gibson crée le terme qui vient de l’anglais affordance venant du verbe
anglais to afford qui a un double sens : « être en mesure de faire quelque chose » et «
offrir ». Ce terme vient de la psychologie cognitive.
 Définition : Nous pouvons aussi dire que l’affordance est la capacité d’un objet ou d’un
système à évoquer son utilisation, sa fonction.

En Webdesign, ce terme désigne avant tout le fait que les boutons ou les menus
n’ont besoin d’aucune explication pour être compris, utilisés. APPLE a basé longtemps son
succès avec l’Iphone sur ce concept.

Selon Donald NORMAN dans son ouvrage de 1988, « The Design of Everyday
Thing », l’apparence d’un objet est une clef pour permettre à l’utilisateur de trouver ce qu’il
cherche pour comprendre comment utiliser un objet. L’attention portée par ce designer à
l’expérience des utilisateurs en a fait un des précurseurs de l’UX Design.
 IV - L’UX Design
Le User eXeperience design : UX design en terme anglo-saxon, ou en français, le design
de l’expérience utilisateur est peu à peu adopté, mais est souvent mal compris et recouvre
des pratiques très diverses.

L’idée principale est d’introduire l’expérience de l’utilisation tout au long du processus de

création du site.
Mais cette idée n’épuise pas tous les apports de la méthode UX et sert trop souvent d’alibi
à une méthode somme toute puissante mais complexe.
Voici les points essentiels à ne pas oublier :
◦ L’expérience est un processus psychologique et donc complexe à interpréter.
◦ Le design est un processus itératif, une méthodologie qui s’adapte au projet et peut
donc générer des aller-retour à chaque étape.
◦ Le produit final et donc la demande du commanditaire ne doit pas être oubliée sous
prétexte que la méthode est centrée sur l’expérience de l’utilisateur.
Le but premier du design étant de résoudre des problèmes en modelant un produit ou un
service, la première question qui doit occuper l’esprit est de :

Découvrir et comprendre quel est le problème ?

Pour ensuite explorer tout le champ des possibles et d’identifier de façon itérative la
meilleure solution à la fois du point de vue de l’utilisateur, mais aussi du commanditaire.
Les racines de cette méthode se trouvent d’ailleurs dans le « Design thinking ».
1) l’expérience est subjective
Il faut alors lors de ces phases de va et vient entre les utilisateurs et les designers ne pas
oublier que toute expérience humaine est subjective par nature : qu’elle varie d’un individu
à un autre en fonction de l’humeur, du lieu, de l’heure de l’expérience. Au fil du temps, la
mémoire, les relations sociales altèrent et transforment le souvenir de l’expérience.
2) Un processus itératif :
Les différentes phases présentées par Jesse James Garrett, (toujours considéré comme un
des fondateurs de l’UX design pour le web, en 2002 dans son ouvrage « The Elements of
User Expérience ») forment avant tout des phases qui se superposent et bouclent même
si son schéma le plus connu les montrent se succédant.
3) Le produit final ne doit pas être conçu à partir des attentes des utilisateurs : il
y a bien un commanditaire qui paye pour la création d’un service. Il s’agit
donc avant tout d’une co-création ou la plus grande difficulté consiste à faire
se rencontrer le but du commanditaire avec la réalité des utilisateurs.
Les utilisateurs peuvent avoir envie d’un service, par exemple gratuit, ou payer le
moins possible, alors que le commanditaire veut facturer ce service : il va donc
falloir faire en sorte de trouver le point d’équilibre entre les deux visions.
Pour réussir, l’UX designer va devoir comprendre aussi bien le commanditaire que
les utilisateurs. C’est pourquoi toute une série d’outils et de méthodologies sont
mis à sa disposition pour y parvenir.
D’abord nous considérons qu’il y a trois sujets d’études :
◦ L’utilisateur : ses motivations, ses comportements...
◦ Le contenu : texte, image, vidéo, données : le corpus qui constitue le projet…
◦ Le contexte : les objectifs du projet…
Le processus de travail aura 4 grandes phases qui vont s’entremêler :
◦Recherche
◦Concept
◦Prototype
◦Design

Méthode pour comprendre le commanditaire :

1) Le cahier des charges ou brief fourni.
2) Interviewer les parties prenantes
3) Créer un atelier ou chacun va décrire ses objectifs et les comparer aux autres
4) Faire l’inventaire et l’analyse des contenus (lieu / temps / alphabétique / hiérarchie /
focus / catégories)
5) Créer un BMC : Business Model Canvas

Méthode pour comprendre l’utilisateur :

En premier lieu, avoir le bon état d’esprit : ne pas porter de jugement, être
empathique et garder l’esprit ouvert !
1) Etudier les statistiques sur le Web
2) Créer des tests utilisateurs
3) Créer des enquêtes / questionnaire en ligne
4) Animer des ateliers de « Brainstorming »
5) Si possible faire des enquêtes de terrain (seulement si cela s’y prête)
6) Faire des recherches ethnographiques (si c’est possible)
7) Animer des « Focus-Group » : réflexion sur des questions précises avec
grilles
8) Utiliser le tri des cartes pour hiérarchiser des choix
9) Créer des « personas» des fiches type d’utilisateur.
 V - L’écoconception web
Définition : Elle a pour but de réduire les impacts environnementaux et économiques des
services numériques en améliorant leur conception et leur réalisation. » de Frédéric
Bordage « Eco-conception web / Les 115 bonnes pratiques ».
Pourquoi : l’infrastructure du web est une grande consommatrice d’électricité et donc
d’énergie. Chaque année, l’impact de chacun des 4 milliards d’internautes de la planète
est équivalent à :
368 Kwh d’électricité
364 kg de gaz à effet de serre
1923 litres d’eau douce…
Mais surtout le poids moyen d’une page web en 20 ans a été multiplié par 115 !

Pourquoi s’occuper de ce thème ?

parce que l’impact physique du web est loin d’être négligeable !
L’infrastructure du web est constitué de 3 ensembles :
◦Les utilisateurs (terminaux)
◦Les réseaux (internet)
◦Les centres informatiques (qui contiennent les serveurs)
◦En 2018, on estime qu’il y a 4 360 centres informatiques partagés dans 122 pays et
500 000 centres dans des entreprises, plus les méga-data center… de Facebook,
Amazon, Apple, Google etc…

◦Au total en 2010 plus de 232 millions de serveurs

L’objectif va donc être de réduire l’empreinte d’un site web en jouant sur 3 points :

◦Utiliser la plus petite configuration possible du côté de l’internaute : réduire la

puissance informatique.
◦Monopoliser le moins longtemps possible les serveurs et le réseau : réduire le temps
passé par l’internaute devant son terminal
 ◦Nécessiter le moins de serveurs possible pour fabriquer les pages Web : réduire la
quantité de traitement des données

◦On peut remarquer que ces choix sont en contradiction avec d’autres approches du
design comme ceux du design de l’attention.

Depuis sa création en 1998 à la Stanford University de Palo Alto, le « Persuasive

Technologie Lab » cherche comment modifier le comportement des gens.
Fondé et animé par B.J. Fogg, ce laboratoire semble la prolongation de sa thèse de
doctorat sur « Les ordinateurs Charismatiques ». Fogg est devenu selon les médias (New
York time, le Magazine Fortune) le nouveau gourou à la mode.
Dans son ouvrage : « Tiny Habits : the small changes can change everything » J.B. détaille
même une partie de sa méthode pour le grand public.
Ce n’est pas un laboratoire d’informatique mais un laboratoire de psychologie qu’il dirige :
« J’essaie de trouver comment les ordinateurs peuvent changer ce que les gens
pensent et ce que les gens font ».
Il a crée la science de la « captologie » l’art de capter l’attention de l’utilisateur qu’il le
veuille ou non !

VI - Le Design de l’attention
C’est l’observation des comportements des adolescents, qui entre autre l’a inspiré. Les «
teenegers » sont tournés avant tout vers la compétition, donc il va utiliser le système du
jeu pour créer de la compétition, avec des niveaux, des scores, des points à atteindre.
En agissant sur trois éléments importants du comportement :
◦L’élément déclencheur (la peur, jusqu’à l’envie de se comparer aux autres)
◦L'habileté (la capacité à mener à bien l’action)
◦La motivation (donnée par les scores et les buts à atteindre, la récompense)

◦Le champ d’activité de cette captologie est l’IHM (interface Homme Machine). Le
graphisme et les interactions programmées sont sa matérialisation. Les performances
sont mesurées en temps de connexion, durée de connexion, quantité d’interactions
générées…

◦Comme dit Bruno Patino dans « La civilisation du poisson rouge » :

◦« Ces graphismes sont les outils numériques de la conquête du temps humain. »
◦Le but de l’UX Design devient alors de transformer les habitudes des utilisateurs en
addictions. L’UX design devient alors une méthode d’une grande efficacité
économique.

Parfois on va encore plus loin dans le système en considérant que l’on a pour but de «
Hacker le cerveau ». C’est ce qu’on appelle le « Dark Design ». Des design faits par
exemple pour nous faire croire que l’accès à un service est gratuit ou provisoire, mais en
réalité, au bout d’un certain temps, il devient payant ou met en place un service
d’abonnement Ad vitam æternam !
Pour cela, on va exploiter les neurosciences pour agrandir des parts de marché à partir des
données personnelles qui sont comparées aujourd’hui au pétrole brut. On va les raffiner
pour comprendre les comportements des gens et mieux les influencer.
Cette démarche globale prend deux directions dans les systèmes autoritaires. Il va s’agir
de surveiller et contrôler les populations dans les systèmes d’économie libérale, de capter
l’attention pour revendre cet espace de temps.
Cette mutation technologique va entrainer une surproduction de contenus numériques
envahissant l’espace numérique de façon exponentielle mais le temps disponible pour
consommer cette production, lui, ne l’est pas.

Si on y réfléchit bien, un des paradoxes fondamental de notre époque est :

… que l’on devrait tous avoir plein de temps libre !
Nos grands parents n’avaient pratiquement pas de congés (les congés payés de 15
jours datent de 1936). Avant, il n’y avait que le dimanche de férié). Ils travaillaient
10 heures par jour en moyenne et devaient faire la lessive à la main, coudre ou
repriser les vêtements, attendre le courrier postal pour avoir des nouvelles des
proches, faire la queue pour accéder aux cabines téléphoniques ou pour s’inscrire
dans une administration quelconque… voyager avec des moyens de transports le
plus souvent à vapeur, donc pas très rapides (train, bateaux). Etc…
Aujourd’hui, toutes les communications sont pratiquement instantanées par les
réseaux. Le traitement de l’information est automatisé : on s’inscrit en ligne et un
ensemble de robots dit « ménagers" nous simplifie les tâches. Les transports sont
plutôt rapides… Le travail est en Europe autour de 8H par jour, avec au moins 2
mois de congés par an !
Dans les années 1960, beaucoup se demandaient si tout ce temps gagné n’allait
pas provoquer des conséquences psychologiques négatives, des dépressions
dûes à l’ennui…

Alors où est passé tout ce temps ?

Si on y réfléchit bien, un des paradoxes fondamental de notre époque est :
… que l’on devrait tous avoir plein de temps libre !
Nos grands parents n’avaient pratiquement pas de congés (les congés payés de 15 jours
datent de 1936). Avant, il n’y avait que le dimanche de férié). Ils travaillaient 10 heures par
jour en moyenne et devaient faire la lessive à la main, coudre ou repriser les vêtements,
attendre le courrier postal pour avoir des nouvelles des proches, faire la queue pour
accéder aux cabines téléphoniques ou pour s’inscrire dans une administration
quelconque… voyager avec des moyens de transports le plus souvent à vapeur, donc pas
très rapides (train, bateaux). Etc…
Aujourd’hui, toutes les communications sont pratiquement instantanées par les réseaux. Le
traitement de l’information est automatisé : on s’inscrit en ligne et un ensemble de robots
dit « ménagers" nous simplifie les tâches. Les transports sont plutôt rapides… Le travail
est en Europe autour de 8H par jour, avec au moins 2 mois de congés par an !
Dans les années 1960, beaucoup se demandaient si tout ce temps gagné n’allait pas
provoquer des conséquences psychologiques négatives, des dépressions dûes à
l’ennui…

Alors où est passé tout ce temps ?

Organiser la captation du temps des internautes en leur proposant de gagner du temps est
le paradoxe principal de cette économie de l’attention.
Gagner toujours plus de temps pour en perdre toujours plus à cause de l’addiction induit
par ses réseaux, est une boucle sans fin, insoluble car comme l’addiction à tout type de
drogue l’a démontré. La satisfaction du manque entraine une surenchère des doses…
Par exemple : l’envoi de notifications d’alertes constantes a entrainé l’envoi d’alertes de
plus en plus folles. De l’événement majeur, à l’événement totalement secondaire, en
passant par des notifications pour dire… qu’il n’y a rien à notifier ! Car, oh malheur !!!
aucune activité sociale de votre correspondant n’a été notifiée, pour justement notifier
l’absence d’activité !!!
Pour repousser les limites, les 24H théoriques d’un individu sont devenues en moyenne
34H.
Le système pousse et donne aux individus les moyens de faire plusieurs choses en même
temps : d’où votre envie incompressible de consulter constamment votre portable, même
quand vous êtes en train d’écouter un cours d’amphi…
Un temps pour chaque chose disait l’Ecclésiaste… on en est bien loin…

Mais gagner tout ce temps sur votre vie ne s’est pas fait instantanément, ni sans
casse :
D’abord il a fallu mettre en place une connexion permanente et constamment
accessible : le téléphone portable a été l’instrument technique idéal. La 4G et
maintenant la 5G permettent des débits nécessaires à cet asservissement.
Ensuite, il a fallu gagner du temps sur le temps des autres activités humaines :
d’abord le temps perdu : dans les transports, les lieux ou files d’attente. Puis, peu
à peu, sur le temps social dans les interactions entre individus : au bar, au
restaurant lors des repas familiaux, amicaux… puis pendant le temps de travail ou
d’études…
Selon Bruno Patino en 2018 :
Sur le temps moyen d’un citoyen américain, le temps se répartit par semaine
comme ceci :
Le sommeil : 7 heures
La nourriture , ménage, vie sociale : 7 heures
Le travail : 5 heures
Total : 19h00
Enfin, le temps consacré aux écrans de tous types : 12H00
« Une moitié de vie commercialisable. Une moitié de vie commercialisée. »

Conclusion
Comme vous avez pu le voir le webdesign est un processus complexe qui se fait la plupart
du temps en équipe.

Même si la méthode dominante en Webdesign est l’UX design : il n’y a pas qu’un seul
processus pour designer un site web !
Certains processus sont même contradictoires dans leur méthodes ou attentes. Mais
surtout, selon le commanditaire, les objectifs et doncles méthodes de design employées
seront totalement différentes.
Quand une plate-forme comme GOOGLE créée un site, ses attentes et objectifs sont très
différents de celle d’un artiste ou d’une ONG, ou même d’une entreprise de distribution de
produit physique et donc les méthodes de designs le seront aussi.

3) « Culture numérique, de l'utopie du cyberespace à l'économie de l'attention en passant

par les dystopies numériques. »