RÉSUMÉ THÉORI QUE – FILIÈRE DIGITAL DESIGN

M102 - Identifier les enjeux digitaux chez l’utilisateur

60 heures
SOMMAIRE 01 - CONNAITRE L’HISTOIRE DU WEB
Identifier les utilisations du web
Connaitre les évolutions de solutions digitales du web
02 - DEFINIR LES ELEMENTS DU WEB
Identifier les types de sites
Connaitre l’écosystème du web
Connaitre les termes techniques liés aux sites web
03 - ANALYSER LA COMPOSITION D’UN SITE
Distinguer les anciens codes d’un site des nouveaux
Reconnaître les différentes parties d’un site
04 - MAITRISER LES REGLES DU WEB
Connaitre les termes techniques liés au web
Comprendre la construction d’un site
Connaitre les différentes évolutions de conception des interfaces
Différencier la conception des interfaces du développement

05 - LIER LE WEB AUX UTILISATEURS

Développer une attitude tournée vers l’utilisateur
Comprendre la notion d’utilisateur
Appréhender la mise en œuvre d’une solution Web
 PARTIE 1
CONNAITRE L’HISTOIRE DU WEB

Dans ce module, vous allez :

• Identifier les utilisateurs

• Connaître les évolutions des solutions digitales utilisant
les technologies web
 CHAPITRE 1
Identifier les utilisations du web

1. Contexte historique
2. Contexte lexique et vocabulaire
01 - Identifier les utilisations du web
Contexte historique

Les chiffres clés en 2021

• Notre environnement de vie (personnelle ou Chiffres clés en 2021
professionnelle) est baigné dans le numérique.
Le web est devenu incontournable. 4,66 Mds d’internautes (59,5 %)
• Il est synonyme d’activités commerciales, 316 M d’internautes supplémentaires en 2020 (+7,3 %)
sociales et récréatives, en tout lieu et à tout
moment. 5,22 Mds de mobinautes (+1,8 %)

• Ce constat est renforcé par des réseaux rapides, 6,66% de la population mondiale utilisant le mobile
fiables et sûrs. 93 M de nouveaux utilisateurs de mobile (+1,8 % en un an) (59,5 %)

96,43 Mbps de vitesse de connexion moyenne d’une ligne fixe à Internet (+31,1 %)

4,32 Mds d’utilisateurs d’Internet à partir d’un mobile

4,2 Mds d’utilisateurs actifs des réseaux sociaux (53,6 % )

6h54 passées en moyenne sur Internet (+4 %)

PARTIE 1

63,4 % des internautes utilisent le navigateur Chrome (-0,4 %)

 01 - Identifier les utilisations du web
Contexte historique

• Le nombre d’internautes/mobinautes flambe en une petite période. En dix ans, le nombre a bondi de 166%.

POPULATION UTILISATEURS DE UTILISATEURS UTILISATEURS

TOTALE SMARTPHONE INTERNET RÉSEAUX SOCIAUX

7.83 BILLION 5.22 BILLION 4.66 BILLION 4.20

BILLION

• Le nord de l’Europe est considéré la région la

plus connectée avec 95% des utilisateurs.
• Une augmentation en Amérique du Nord a
été notée (95% contre 88% l’année dernière).
PARTIE 1

• La région la plus isolée est l’Afrique Centrale

avec un taux de pénétration très faible (12%).
 01 - Identifier les utilisations du web
Contexte historique

• Temps moyen passé par un utilisateur sur internet dans le monde: la moyenne est de 6h, un temps considéré assez stable.
• Le temps passé sur mobile (3 h 14) progresse au détriment de celui passé sur un ordinateur (3 h 28).
 01 - Identifier les utilisations du web
Contexte historique

L’utilisation du web par activité

• LA TÉLÉVISION (en streaming ou broadcast) constitue L’ÉCOUTE DE LA MUSIQUE

la principale activité quotidienne des internautes
3H24 1H31
• LES RÉSEAUX SOCIAUX LES JEUX VIDÉO
2H25 1H12
• LA LECTURE DE LA PRESSE L’ÉCOUTE DES PODCASTS
2H02 0H54
PARTIE 1
 01 - Identifier les utilisations du web
Contexte historique

• L’édition 2021 du rapport digital annuel publié par Global Digital Insights dévoile les dernières données et tendances internationales du digital, du
social media, du mobile et du e-commerce, le contenu en streaming et les jeux vidéo.
• Le Maroc est plutôt bien positionné à l’échelle africaine et même mondiale, notamment quant à l’accès à Internet et l’usage des réseaux sociaux.
• Selon le rapport, 27,62 millions d’internautes en janvier 2021 sont comptabilisés au Maroc, représentant un taux de pénétration de 74,4%.
• Le rapport montre que le nombre d’internautes au Maroc a augmenté de 2,3 millions (+ 9,1%) entre 2020 et 2021.
• Le camembert suivant présentent quelques utilisations du web au Maroc. E-commerce
 01 - Identifier les utilisations du web
Contexte historique

Parmi les plateformes de médias sociaux les plus actives au

Maroc, figure :
• Whatsapp (73.7% des usagers) en pole position,
• Facebook (70.5%),
• Youtube (66.5%)
• FB Messenger (43.8%)
• Instagram (51.6%)
• Snapchat (26.1%)
• Twitter (22.5%), Linkedin (7.2%) et Pinterest (7.7%).
Concernant le réseau Facebook au Maroc, l’étude montre
une activité de :
• 16 millions d’usagers actifs (36% de sexe féminin et 64%
de sexe masculin)
• par mois, en progression continue.
PARTIE 1
 01 - Identifier les utilisations du web
Contexte historique

L’histoire du World Wide Web (www)

• Le chercheur britannique Tim Berners-Lee a inventé le World Wide Web en 1989, lorsqu’il travaillait au CERN.
• Le projet a été conçu et développé pour que des scientifiques travaillant dans des universités et instituts du monde entier puissent s'échanger des
informations instantanément.
• [Link] était l’adresse du tout premier site et serveur Web, qui était hébergé sur un ordinateur NeXT du CERN.
• L’adresse de la première page Web était [Link]
• Tim Berners-Lee a rédigé le schéma « Information Management : A Proposal » dans lequel il évoque l’idée d’une « toile »; une mise en réseau de
plusieurs ordinateurs, où ses collègues dans le monde pourraient « naviguer » de contenus en contenus, échanger et partager l’information
facilement.
• Il imagine le développement d’un système hypertexte organisé et partagé sur le réseau informatique.
• Le tout premier site et le tout premier serveur web, le « CERN httpd », voient ainsi le jour et sont mis en ligne le 20 décembre 1990.
• Le site, qui n’est consultable que sur le réseau interne du CERN, est affiché sur un outil baptisé « navigateur » que Tim Berners-Lee nomme World
Wide Web.
• Ce dernier centralisait alors toutes les informations sur le projet WWW. Les visiteurs pouvaient en apprendre davantage sur les liens hypertextes, les
détails techniques pour créer leur propre page web et même trouver une explication sur la manière de trouver des informations sur le web.
 01 - Identifier les utilisations du web
Contexte historique

Janvier 1994 : Yahoo!

Deux étudiants de Stanford, Jerry Yang et David Filo, décident de créer un
gigantesque annuaire de sites, classés de façon thématique. D’abord baptisé
Jerry’s guide to the World Wide Web, le site est très vite rebaptisé Yahoo! Il
va vite devenir le portail numéro 1 de la Toile dans la seconde partie des
années 90.

• Juillet 1995 : [Link]

• 16 Aout 1995 : Internet Explorer
• 1998 : Google
• 15 janvier 2001 : lancement de Wikipedia
• 9 novembre 2004 : première version stable de Firefox
• 4 février 2004 : [Link]
• 2005 : YouTube et le Web 2.0
• 11 décembre 2008 : Chrome
• 2008 : l'arrivée des applis mobiles
PARTIE 1

• 2010 : l'émergence du HTML5, le futur du Web

• Octobre 2013 : Internet Explorer 11, la dernière version du navigateur
• 2014 : le milliard de sites dépassés
• Mars 2019 : plus de 4 milliard d’utilisateurs
 CHAPITRE 1
Identifier les utilisations du web

1. Contexte historique
2. Contexte lexique et vocabulaire
 01 - Identifier les utilisations du web
Contexte lexique et vocabulaire

Internet (réseau ouvert) Intranet (réseau interne)

• Internet est le réseau informatique mondial que tout le • Un Intranet est un ensemble de services Internet (par exemple un serveur
monde connaît correspondant à une interconnexion d’un Web, un serveur de messagerie, un serveur de fichiers) mais à l’échelle
grand nombre de machines entre-elles. d’un réseau local.
• Ce réseau Internet rend accessible un certain nombre de • Ce réseau utilise des technologies Internet qui reposent sur le fameux
service hébergé. protocole IP mais à l’échelle du réseau de l’entreprise.
• Le point commun de tous ces services est le protocole IP • Ce réseau privé n’est pas visible du réseau Internet.
(Internet Protocol) qui assure la communication entre
• Sa particularité est d’adopter les grands standards Internet mais de
toutes ces machines via un navigateur et une connexion. manière privée.
• L’Intranet est particulièrement adapté pour le travail collaboratif.
PARTIE 1
0 tilisations du web
Contexte lexique et vocabulaire
1

- Extranet (réseau privé)

I World Wide Web
• Un Extranet est une extension du système d’information
d • Un système hypertexte fonctionnant grâce à l'outil internet et permettant
d’une entreprise à des partenaires situés au-delà du
e réseau de cette entreprise.
de naviguer de pages en pages sur des sites web.
n • Cette extension est sécurisée de manière à n’autoriser Site web
t l’accès uniquement qu’aux personnes désignées. • Un ensemble de pages web et de ressources reliées par des hyperliens,
• Dans ce cas, le réseau Internet est mis à contribution défini et accessible par une adresse web.
i pour véhiculer l’information, mais l’information n’est pas
f • Un site est développé à l'aide de langages de programmation web, puis
accessible du grand public.
i hébergé sur un serveur web accessible via le réseau mondial Internet, un
• Un Extranet n’est donc ni un Intranet, ni un site Internet: intranet local, ou n'importe quel autre réseau, tel le darknet.
e C’est un système supplémentaire offrant par exemple aux
r clients d’une entreprise, à ses partenaires ou à des
filiales, un accès privilégié à certaines ressources
l informatiques de l’entreprise par l’intermédiaire d’une
e interface Web.
s

u
PARTIE 1

invoque une URL d’une page web spécifique, le

• Il se présente sous la forme d'une série de caractères permettant
navigateur récupère le contenu à partir d’un serveur web
l'identification d'un site Internet et/ou d'une page web.
et affiche la page sur le périphérique de l’utilisateur.
• Techniquement, il indique aux navigateurs (Internet Explorer, Mozilla,
Firefox, Safari, etc.) le chemin assurant l’accès aux ressources contenues
dans le World Wide Web.
URI
• Il s’agit de l’unique séquence de caractères qui identifie les
Navigateur Web URL ressources logiques ou physiques utilisées par la technologie
• Un navigateur web est une application logiciel • « UniformWeb.
Ressource Locator » est une référence à la ressource du Web
permettant d’accéder au WWW. Lorsque l’utilisateur spécifiant ainsi sa localisation sur le réseau du périphérique.
 CHAPITRE 2
Evolution des solutions digitales
utilisant
les technologies du Web

Ce que vous allez apprendre dans ce chapitre :

• Comprendre les notions d’adaptative et de responsive

dans la conception des solutions digitales
• S’initier aux pratiques du Mobile First et Application mobile

03 heures
 CHAPITRE 2
Evolution des solutions digitales
utilisant
les technologies du Web

1. L’adaptative et le responsive dans la conception

des solutions digitales
2. Mobile First et Application mobile
 02 - Evolutions des solutions digitales via Web
Adaptive et Responsive web design

• Le contenu d’une solution digitale web doit être • Le terme de Responsive Web design a été introduit par Ethan Marcotte
accessible sur différents types d’interfaces → en 2010 et décrit théoriquement en 2011 dans son ouvrage « Responsive
déploiement sur tous les écrans. Web Design » .
• Il y a des années, la navigation principale des internautes • Responsive Web Design = Design Web Adaptable (Fr)
ne se fait plus sur un PC mais bien souvent depuis un
smartphone malgré les problèmes que présentent la
navigation mobile Remarque :
• Le Web design Responsive est une approche de Un site web Adaptatif n’est pas synonyme d’un site web
conception Web qui vise à l'élaboration de sites pour responsif (adaptable)
garantir une expérience de navigation optimales pour
l'utilisateur quelle que soit sa gamme d'appareil
• Par extension, le « responsive design » désigne
généralement l’ensemble des techniques permettant
d’adapter nos pages web à toutes les tailles d’écrans afin
d’avoir un bon résultat.
PARTIE 1
02 - Evolutions des solutions digitales via Web
Les types de Design des sites Web

Un design "Static" Un design "Adaptive"

• Un design statique (ou fixe) se réfère à des dimensions • Un design Adaptatif est une amélioration du design statique: les unités de
figées (par exemple 960px) quelle que soit la surface de largeur sont fixes, mais différentes selon la taille de l'écran, qui est
l'écran. La grande majorité des sites web était construite détectée via CSS3 Media Queries.
sur cette base avant l'arrivée du Responsive Web Design
dans les années 2010. Un design "Responsive"
• Un site web Responsive est une amélioration du design liquide associée à
Un design "Fluide" des méthodes CSS3 Media Queries permettant de modifier les styles
• Un site web Fluide (ou "liquid") est un site web dont (ré-organisation de la page par exemple) selon certains critères, pour
toutes les largeurs de colonnes sont exprimées en unités s'adapter complètement à la taille d'écran, quelque soit le point de
variables et qui s'adapte généralement automatiquement rupture.
à la taille de fenêtre, jusqu'à une certaine mesure.
1
PAR
TIE

Nous allons à présent détailler le Responsive Design

 02 - Evolutions des solutions digitales via Web
Responsive web design

• Les sites web Responsive sont des sites dont les pages s’adaptent au viewport du navigateur. Au fur et à mesure que la taille du
navigateur change, le site réorganise le contenu et la mise en page en conséquence → fournir une meilleure mise en page.
• L’idée est de rendre le contenu flexible pour qu’il « flotte » et se disposent différemment selon la taille de l’écran. Peu importe l’appareil
que l’on utilise, les pages sont uniques et ne changent pas. Cela nécessite moins de travail puisque les développeurs doivent seulement créer
une seule mise en page, contrairement à plusieurs mises en page lors de la construction d'un site adaptatif.
PARTIE 1
 02 - Evolutions des solutions digitales via Web
Responsive web design

Avantages Inconvénients
Le site reste cohérent en fonction des appareils utilisés, offrant une meilleure Les publicités peuvent être perdues lorsque les sites sont réarrangés pour les
expérience utilisateurs. On peut prendre comme exemple le fait que 85% des smartphones. Certaines peuvent ne pas apparaitre à l’écran et donc réduire les
acheteurs en ligne commencent leur achat sur un appareil et le termine sur un revenus potentiels.
autre.
Les sites responsive sont adaptés aux moteurs de recherche, notamment Google. Les sites peuvent charger plus lentement sur les appareils mobiles que sur les
En effet, les sites sont indexés selon leur version mobile par rapport à la version ordinateurs de bureau en raison de la taille des images sur le site. Les sites
desktop. Si l’on suit cette logique, les sites responsive ont donc plus de chance développés principalement pour desktop, même s'ils sont réactifs, peuvent
d’avoir de meilleurs résultats SEO. rencontrer ce problème en raison de la présence d’images lourdes.
Les sites en responsive permettent une expérience de visualisation optimale, avec
une grande flexibilité, une bonne vitesse et un bon SEO.

Les développeurs ont moins de contrôle sur la façon dont le site est organisé en
fonction de l'espace disponible dans un navigateur. Ils doivent donc prudents et
PARTIE 1

s'assurer que la conception du site web fonctionnera bien sur une grande variété
d'écrans.
 02 - Evolutions des solutions digitales via Web
Responsive web design

Les différentes résolutions d’un écran

PARTIE 1

Ecran desktop standard Tablettes Smartphone

 02 - Evolutions des solutions digitales via Web
Adaptive et Responsive web design

L’ Adaptive » web design :

• Les sites web conçu en adaptative design ont leurs pages désignées pour différents
types d’appareils. Ils fonctionnent donc avec différentes mises en page. Ces dernières
sont créées à l’avance en fonction des appareils sur lesquels le site doit être navigable.
La résolution de l’appareil est détectée et le site charge en conséquence une page
adaptée à l’écran de l’utilisateur.

• Il est donc nécessaire de créer une stratégie de contenu propre à chaque support lors
de la conception. Pour ce faire, il s’agira donc de débuter le projet par une analyse
utilisateurs afin de connaitre leurs besoins et habitudes de navigation.
PARTIE 1
 02 - Evolutions des solutions digitales via Web
Adaptive et Responsive web design

Avantages Inconvénients
Les pages étant créées en amont en fonction des tailles d’écran, les sites adaptatifs Un site adaptatif nécessite beaucoup de travail pour créer plusieurs mises en page
offrent une meilleure expérience utilisateur (UX). d'une même page. Étant donné la charge de travail plus lourde qu'exige ce choix de
développement, les coûts associés sont plus élevés que ceux du développement
d’un site responsive. De nombreux développeurs peuvent donc choisir d'utiliser un
site adaptatif pour moderniser leur site existant, ce qui leur permet de l'utiliser sur
plusieurs tailles d'écran.

La création d'une mise en page unique pour les utilisateurs d’un certain appareil Ce type de site peut parfois ne pas tenir compte des utilisateurs lorsque la mise en
peut leur signifier que vous vous souciez de leur expérience lorsqu'ils naviguent sur page n'est pas optimisée pour s'adapter à une taille d'écran moins populaire ou
votre site depuis leur smartphone. moins courante. Par exemple, un site adaptatif peut ne pas avoir de mises en page
spécialement conçues pour les tablettes ou les netbooks.

Ce type de site convient aux sites qui utilisent des annonces publicitaires pour Le lancement de nouveaux smartphones avec des configurations d'écran uniques
générer des revenus. Les développeurs peuvent optimiser chaque mise en page exigera également que les développeurs créent de nouvelles mises en page. C'est
pour inclure correctement les publicités afin de s'assurer qu'elles seront vues. ce qui s'est passé quand Apple a lancé l'iPhone X, qui a posé plusieurs problèmes
pour les applications et les sites qui n’avaient pas été conçus pour ce nouvel
environnement.
PARTIE 1

Une collection de mises en page statiques qui sont positionnées sur des points Les résultats du SEO peuvent différer entre la version mobile et la version desktop
d'arrêt contribue au fonctionnement de la mise en page web Adaptif. d'un site adaptatif. Même si le contenu est identique, certains moteurs de
recherche évaluent le référencement sur la version bureau d'un site différemment
que sa version mobile. En conséquence, cela peut affecter négativement le
référencement et donc la performance du site.
 02 - Evolutions des solutions digitales via Web
Adaptive et Responsive web design

Le système à 6 résolutions :
Pour l’adaptive design, les développements se font
indépendamment pour chaque périphérique selon
le système de résolution ci-dessous :
• 320 pixels pour les appareils mobiles
• 480 pixels pour les mobiles et mini tablettes
• 760 pixels pour les mini tablettes et les tablettes
• 960 pixels pour les grandes tablettes et les
ordinateurs de bureau
• 1200 pixels pour les ordinateurs de bureau et les
grands écrans
• 1600 pixels pour les grands écrans
PARTIE 1
 02 - Evolutions des solutions digitales via Web
Adaptive et Responsive web design

Le Responsive design utilise un seul Layout pour une page

web et l’ajustement se fait automatiquement
en fonction de l’écran (tablette, Smartphone, ordinateur).

L’Adaptive design crée plusieurs Layouts pour les adapter à

une taille d’écran bien spécifique.
PARTIE 1
 CHAPITRE 2
Evolution des solutions digitales
utilisant
les technologies du Web

1. L’adaptative et le responsive dans la conception des

solutions digitales
2. Mobile First et Application mobile
 02 - Evolutions des solutions digitales via Web
Mobile First et Application Mobile

Définition Mobile-first et mobile-only

• C’est une technique et une stratégie marketing consistant • Mobile-first donne la priorité au mobile, mais ne délaisse pas pour autant
à privilégier l’usage du mobile (téléphone en premier lieu, la version ordinateur de bureau.
mais également tablette) dans le cadre d’un accès à La version extrême du mobile-first est le mobile-only, se concentrant
• ainsi
l’information. uniquement sur un développement mobile.
• Parce que le mobile est devenu depuis plusieurs années C’est le cas de certaines applications comme Instagram, Snapchat ou
• celles
notre premier écran, une approche mobile-first permet qui impliquent l’usage d’un mobile, comme la réalité augmentée par
de prioriser les développements techniques sur
exemple.
l’utilisation du mobile par rapport aux fonctionnalités sur
ordinateur de bureau.
• La plupart des grands réseaux sociaux ou des outils de
messagerie, sont ainsi mobile-first : ils restent accessible
sur ordinateur, mais la plupart des efforts et des
innovations sont concentrés sur le mobile.
• C’est également une tendance forte parmi les e-
commerçants qui investissent sur le
mobile afin de
TIE 1

proposer une expérience client pertinente depuis un

PAR

smartphone.