26/02/2023
INTRODUCTION AUX TECHNOLOGIES WEB
P r. M O HAM M E D B O U TAL L I N E
Ecole Nationale des Sciences Appliquées – Béni Mellal
Téléphone : +2125 23 48 02 18
E m a i l : b o u t a l l i n e @ g ma i l . c o m
S i t e we b : b o u t a l l i n e . wo r d p r e s s . c o m
26/02/2023 1
PLAN
Le cours est constitué des éléments suivants :
Initiation au développement Web
Introduction au World Wide Web (Web)
Principe de fonctionnement du Web
Protocole de communication web HTTP
Initiation à la programmation frontend (client-side): HTML, CSS et JavaScript
Introduction aux systèmes de gestion de contenus (CMS)
Introduction aux Bases de données
26/02/2023 2
1
26/02/2023
CHAPITRE N° 1
GÉNÉRALITÉS LE WEB
26/02/2023 3
Historique
1969 ARPANET, ancêtre d'Internet, est lancé.
1974 Introduction de TCP
1990 Introduction du World Wide Web, HTTP, HTML.
1994 Yahoo! est fondé.
1995 [Link], Ebay, AltaVista sont fondés.
1998 Google est fondé.
2001 Wikipédia est lancé.
26/02/2023 4
2
26/02/2023
Le Web
• Qu'est-ce que le Web (ou World Wide Web, WWW, W3) ?
Système hypertexte public système contenant des documents liés entre
eux par des hyperliens permettant de passer automatiquement d'un
document à l'autre.
• Différence entre le Web et Internet?
Internet: réseau mondial d'ordinateurs permettant aux utilisateurs de
communiquer (courrier électronique), de publier des informations (Web),
de transférer des données (FTP), de travailler à distance (telnet et ssh)...
Web: un aspect d'Internet.
26/02/2023 5
Statistiques
• Près de 250 millions de domaines, dont 50% dans .com.1
• > 61,1% du contenu est en anglais, 3% en français. 2
• Plus de 3 milliards d'utilisateurs sur Internet.3
• Google connaît plus d'un trillion (1012) d'URLs uniques.4
→ On soupçonne qu'une large partie du Web n'est pas indexable : le Web caché.
1. [Link]
2. [Link]
3. [Link]
4. [Link]
26/02/2023 6
3
26/02/2023
Architecture distribuée
Le client Navigateur : Internet Explorer, Mozilla, Firefox, Chrome...)
Demande au serveur des informations
Affiche des pages pour l'utilisateur
Le serveur Apache, Microsoft IIS, Tomcat ...
Reçoit en permanence les requêtes du client
Renvoie les documents correspondants
Le réseau Internet Basé sur le protocole TCP/IP
Chaque machine dispose d'un numéro IP et d'un nom associé grâce aux
serveurs de nom du domaine (DNS)
Exemple
Nom de la machine : [Link]
Adresse IP : [Link]
26/02/2023 7
Protocole HTTP
Protocole Ensemble normalisé de règles décrivant la manière de transmettre des
informations, par exemple sur un réseau comme Internet entre un
client et un serveur.
HTTP HyperText Transfer Protocol, le plus utilisé des protocoles de
communication sur le World Wide Web. Permet à un client Web
d'indiquer quelle page il veut obtenir, et au serveur Web de lui
répondre en lui donnant cette page.
26/02/2023 8
4
26/02/2023
Protocole HTTP
26/02/2023 9
Les URL
• URL: Uniform Resource Locator
• Identifie l'endroit où se trouve une ressource sur le Web.
• Dans le cas du Web, ressource= document ou fragment
• [Link]
protocole machine répertoire fichier fragment
• Principaux protocoles utilisés dans les URL : ftp, http, https, nntp, mailto, telnet,
etc.
26/02/2023 10
5
26/02/2023
Client Web
26/02/2023 11
Navigateurs Web historiques
26/02/2023 12
6
26/02/2023
Navigateurs Web actuels
26/02/2023 13
Navigateurs textuels
Aussi : navigateurs auditifs pour les aveugles
26/02/2023 14
7
26/02/2023
Parts de marché
Visitez : [Link]/U9SJ
26/02/2023 15
Monteurs de rendu
Trident. Internet Explorer seulement, propriétaire.
EdgeHTML. Fork de Trident sans le vieux code, propriétaire.
Gecko. Firefox et apparentés, libre et gratuit.
KHTML. Libre et gratuit, projet KDE.
WebKit. Fork de KHTML, Safari et (anciennement) Chrome, navigateurs
Android et iOS, libre et gratuit.
Blink. Fork récent (avril 2013) de Webkit, Chrome, Opera.
Presto. Propriétaire, anciennes versions d'Opéra.
Autres. Dillo, autres moteurs exotiques...
26/02/2023 16
8
26/02/2023
Vocabulaire
Un serveur Web Hôte sur lequel fonctionne un serveur HTTP. Il héberge les
ressources qu'il sert.
Un navigateur Web Logiciel client HTTP conçu pour accéder aux ressources du Web.
Sa fonction de base est de permettre la consultation des
documents HTML disponibles sur les serveurs HTTP.
Une page Web Document destiné à être consulté avec un navigateur Web. Elle
est constituée d'une ressource centrale et d'éventuelles
ressources liées automatiquement.
26/02/2023 17
Vocabulaire
Un site Web Ensemble de pages Web et d'éventuelles autres ressources, liées
dans une structure cohérente, publiées par un propriétaire (une
entreprise, une administration, une association, un particulier, etc.)
et hébergées sur un ou plusieurs serveurs Web.
Un hébergeur Web Entreprise de services informatiques hébergeant (mettant en ligne)
sur ses serveurs Web les ressources constituant les sites Web de
ses clients.
Hyperlien Lien logique, unidirectionnel (codé par une balise HTML) reliant
une page Web à une autre.
Surfer, Naviguer Parcourir le Web en suivant les hyperliens, de en page Web. page
Web
26/02/2023 18
9
26/02/2023
Principe du Web
Solution statique Solution dynamique
26/02/2023 19
Quelle solution ?
Quelle solution choisir ?
En fonction de :
• Quelle sera la fréquentation du site ?
• Quel temps peut être investi ?
• Quelles sont les compétences disponibles ?
• Combien de personnes travailleront sur le site et quel sera leur rôle ?
→ CMS ou Site Web développé personnellement ?
26/02/2023 20
10
26/02/2023
Développer son site
Développer ses propres pages web (écrire le code à partir d'un éditeur)
• Code clair
• Intéressant si contenu relativement « statique »
• Veillez à respecter les normes du W3C : World Wide Web Consortium.
• W3C un organisme de normalisation fondé en octobre 1994
• [Link]
[Link]
26/02/2023 21
Développer son site – A la main
Quel éditeur utiliser ?
• Outils : Un simple éditeur de texte
Un éditeur WYSIWYG
WYSIWYG = What You See Is What You Get
• Veillez à respecter les normes du W3C
• Connaissance des langages HTML, XHTML, CSS (contenu statique)
• Connaissance des langages PHP, Perl etc... (contenu dynamique)
26/02/2023 22
11
26/02/2023
Les standards – HTML
H T M L = HyperText MarkUp Language
• Standard du web définit par le World Wide Web Consortium (W3C)
• Contenu statique
• Langage type balise
<HTML>
<HEAD>
<TITLE>Ma première page en HTML</TITLE>
</HEAD>
<BODY>
Bonjour, voici ma première page web !
</BODY>
</HTML>
26/02/2023 23
Les standards – CSS
C S S = Cascading StyleSheets ou « feuilles de style »
code HTML uniquement
CSS
26/02/2023 24
12
26/02/2023
Les standards – CSS
CSS = Cascading StyleSheets ou « feuilles de style »
définit la mise en forme de la page web (du site)
• Mise en forme centralisée = modification du style de tout un site en seulement
quelques changements
• Une plus grande lisibilité du HTML, car les styles sont définis à part ;
• Des chargements de page plus rapides, pour les mêmes raisons que
précédemment ;
• Un positionnement plus rigoureux des éléments.
26/02/2023 25
Développer son site – Editeur W Y S I W Y G
Utilisation d'un éditeur WYSIWYG
► WYSIWYG = What You See Is What You Get
• Editeurs payants (Adobe Dreamweaver, BlueGriffon...)
Dreamweaver
BlueGriffon
• Editeurs gratuits (TinyMCE ...)
TinyMCE
Visitez :
[Link]
26/02/2023 26
13
26/02/2023
CMS - Définition
C.M.S. : Content Management Systems
→ système de gestion de contenu.
• Site web disposant de fonctionnalités de publication
• Site web avec une interface d'administration (backoffice) pour gérer articles,
rubriques
• Contenu du site stocké dans un base de données
• Templates (modèles de pages) pour la forme
26/02/2023 27
CMS - Définition
Un énorme choix de CMS gratuits et
performants !
Voir : [Link]
Quelles sont mes besoins ? Quelles technologies maitrise t-on ?
• Statistiques ? • PHP ?
• Gestion « fine » des utilisateurs ? • MySQL ?
• Personnalisation jusqu'à quel niveau ? • Perl ? etc...
• Mailing ?
• Url sécurisées ? etc...
Plus le CMS est complet, plus il est complexe
→ Ai-je besoin de toutes ces fonctionnalités ?
→ Ai-je le temps de m'investir dedans ?
26/02/2023 28
14