Ministère d’enseignement supérieur et de la recherche scientifique

Université Tunis El Manar

Institut supérieur d’informatique

Cours Web design

Chapitre 1 : Introduction au web
design

Niveau : L1SIL

Enseignant : Zohra CHANNOUF

Année universitaire :2018/2019

Bref historique

 1962 Début des recherches sur ARPANET

 1969 Connexion des 4 premiers ordinateurs d’ARPANET
 1991 World Wide Web (Tim Berners-Lee)
 1993 premier navigateur : Mosaic
 1994 Yahoo ! et W3C
Définition du W3C
Selon Wikipédia

Le W3C est un organisme de normalisation fondé en

octobre 1994 comme un consortium chargé de promouvoir

la compatibilité des technologies du World Wide Web.

Le W3C n’émet pas des normes au sens européen, mais

des recommandations a valeur de standards industriels.

https://fr.wikipedia.org/wiki/World_Wide_Web_Consortium
Du web statique vers le web dynamique

Au tout début du World Wide Web (1991), les pages

etaient statiques : leur contenu était fixé une fois pour
toute et ne variait pas
Du web statique vers le web dynamique
L’introduction des CGI (Common Gateway Interface) puis
par la suite la généralisation des scripts exécutables sur le
serveur dans différents langages (Perl, PHP, Python, Ruby)
ont permis de faire varier le contenu des pages
on a alors parlé de Web dynamique
Du web statique vers le web dynamique
Web design

 Le web design est la conception de l'interface web :

l’architecture interactionnelle, l’organisation des pages,
l’arborescence et la navigation dans un site web.

 Le web design d'un site se présente en premier temps sous

forme de maquette fonctionnelle avec des spécifications
techniques : ergonomie, charte graphique, identité
visuelle, marketing, interactivité.
Etapes de création d’un site web
 D’une manière générale, la création d’un site
web passe par 5 étapes:
 Projet
◦ l'objectif du site, sa cible, sa rentabilité, les moyens
financiers à engager...
◦ le contenu : pages, services attendus, principes de
navigation
 Mise en œuvre
◦ Dépôt d'un nom de domaine.
◦ Choix d'un hébergeur.
◦ Choix et installation d'un Système de gestion de contenu
(Drupal, Joomla, Wiki, Wordpress, ...) ou d'un éditeur de
site Web ( Dreamweaver, phpDesigner, FrontPage, NVU,
KompoZer) ou texte ( Bluefish, Emacs, Notepad++...).
Etapes de création d’un site web
 Conception
◦ Établissement d'une structure de pages HTML ou XHTML.
◦ Définition d'une arborescence
◦ Mise au point d'une charte graphique et éditoriale.

 Réalisation
◦ Création de pages
◦ Mise en place de la charte graphique
◦ Éventuels développements dynamiques (formulaire,
services, etc.)
 Suivi
◦ Lancement du site (mise en ligne) Annonce
Mise à jour Sauvegarde Maintenance
Accessibilité , ergonomie,
référencement et mesure d’audience
 L'accessibilité du web signifie que les personnes
handicapées peuvent l'utiliser.
 Ces gens peuvent percevoir, comprendre, naviguer,
interagir avec le web, et y contribuer.
 L'accessibilité bénéficie également aux personnes âgées.
 L'accessibilité est définie par des normes techniques
établies par la Web Accessibility Initiative (WAI) du World
Wide Web Consortium (W3C).
Accessibilité , ergonomie,
référencement et mesure d’audience
 L'ergonomie s'intéresse à l'amélioration du confort, de la
sécurité et de l'efficacité sur un site web pour le plus de
visiteurs possible.
◦ Optimiser l'interface homme-machine
◦ Réduire les erreurs
◦ Faciliter l'utilisation.
 L'ergonomie sur le web s'intéresse à de nombreux points
dont la simplicité d'utilisation, l'amélioration de la lecture
(améliorer la visibilité), la rapidité d'exécution et aussi à
l'accessibilité.
Accessibilité , ergonomie,
référencement et mesure d’audience
 Le référencement consiste à mettre en œuvre des
pratiques pour faire apparaître un site dans les moteurs de
recherche et pour lui faire gagner des positions.
◦ Faire apparaître un site dans un moteur de recherche
 C'est la phase d'indexation. Si vous trouvez votre site en tapant
son adresse URL ou le nom de votre marque, alors votre site est
indexé.

◦ Gagner des positions dans les moteurs de recherche

 C'est phase d'optimisation du référencement. Pendant toute
l'existence de votre site, vous devez faire le nécessaire pour gagner
des positions dans un moteur de recherche.
https://www.e-monsite.com/pages/guides/referencement/referencer-un-site-le-guide-du-
referencement-sur-e-monsite.html
Accessibilité , ergonomie,
référencement et mesure d’audience

 La mesure de l'audience d'un site Web (Web analytics)

permet de quantifier la fréquentation d'un site en fonction
d'indicateurs tels que le nombre de visiteurs uniques, les
pages vues, les visites, la durée moyenne des visites etc.
Elle regroupe la mesure, la collecte, l'analyse et la
présentation de données provenant d'Internet utilisées afin
de comprendre et d'optimiser l'utilisation du Web.
Technologies : les navigateurs
Technologies : les langages
 HTML et CSS sont à la base du fonctionnement de tous les
sites web.

 Quand on consulte un site avec le navigateur, il faut savoir

que, en coulisses, des rouages s'activent pour permettre
au site web de s'afficher. L'ordinateur se base sur ce qu'on
lui a expliqué en HTML et CSS pour savoir ce qu'il doit
afficher
Technologies : les langages
Technologies : les langages
 HTML (HyperText Markup Language) : il a fait son
apparition dès 1991 lors du lancement du Web. Son rôle
est de gérer et organiser le contenu.

 CSS (Cascading Style Sheets, aussi appelées Feuilles de

style) : le rôle du CSS est de gérer l'apparence de la page
web (agencement, positionnement, décoration, couleurs,
taille du texte…). Ce langage est venu compléter le HTML
en 1996.
HTML: Historique
 HTML 1 : première version créée par Tim Berners-Lee (1991).
 HTML 2 : deuxième version (1994). Les règles et le
fonctionnement de cette version sont donnés par le W3C (tandis
que la première version avait été créée par un seul homme).
 HTML 3 : (1996). Cette version du HTML rajoute de nombreuses
possibilités au langage comme les tableaux, les scripts, le
positionnement du texte autour des images, etc.
 HTML 4 : (1998). Cette version propose l'utilisation de frames
(qui découpent une page web en plusieurs parties), des tableaux
plus complexes, des améliorations sur les formulaires, etc. Mais
surtout, cette version permet pour la première fois d'exploiter des
feuilles de style, notre fameux CSS !
 HTML 5 : c'est La dernière version. Elle apporte de nombreuses
améliorations comme la possibilité d'inclure facilement des
vidéos, un meilleur agencement du contenu, de nouvelles
fonctionnalités pour les formulaires, etc.
CSS: Historique
 CSS 1 : dès 1996, on dispose de la première version du
CSS. Elle pose les bases de ce langage qui permet de
présenter sa page web, comme les couleurs, les marges,
les polices de caractères, etc.

 CSS 2 : apparue en 1999 puis complétée par CSS 2.1,

cette nouvelle version de CSS rajoute de nombreuses
options. On peut désormais utiliser des techniques de
positionnement très précises, qui nous permettent
d'afficher des éléments où on le souhaite sur la page.

 CSS 3 : c'est la dernière version, qui apporte des

fonctionnalités particulièrement attendues comme les
bordures arrondies, les dégradés, les ombres, etc.
En résumé

 Le Web a été inventé par Tim Berners-Lee (1991).

 Pour créer des sites web, on utilise deux langages informatiques :

◦ HTML : permet d'écrire et organiser le contenu de la page
(paragraphes, titres…) ;
◦ CSS : permet de mettre en forme la page (couleur, taille…).

 Les dernières versions sont HTML5 et CSS3.

 Le navigateur web est un programme qui permet d'afficher des

sites web. Il lit les langages HTML et CSS pour savoir ce qu'il doit

afficher. (Google Chrome, Mozilla Firefox, Edge, Safari, Opera…)

 Dans ce cours, Nous travaillerons avec un programme appelé «

éditeur de texte » (Sublime Text, Notepad++, jEdit, vim…).