21/02/2023

Objectifs des cours et des TP

Faculté de génie électrique et informatique L2  Découvrir ce qu’est le Web et comment ça marche :

Département d’informatique Année : 2022/2023
Module : Développement Web – Environnement réseau et mécanismes de base du Web.

 Être capable :
Généralités sur le
– De créer une page Web simple en utilisant le langage HTML.
développement web  Mettre en forme une page ou un ensemble de pages :

– Langage CSS.

 Rajouter des contenus dynamiques dans une page :

– Langage Java script ( côté client).

Responsable du module : Mme Bousnina 1Lila

GÉNÉRALITÉS SUR LE WEB

LA NAISSANCE DU WEB :
 Le Web (World Wide Web : WWW), ou toile en français est un ensemble
d'informations :  Le web fut inventé en 1989 par Tim Berners-Lee
 Reliées entre elles par des liens hypertextes;
(Britannique) et une équipe de recherches au CERN (Centre
 Accessibles par internet;
Européen pour la Recherche Nucléaire).
 Pouvant être visualisées et/ou utilisées avec un navigateur web;
 Regroupées sous forme de pages et de sites.  C'est un système hypertexte qui permet de lier des
Rappel : documents par des hyperliens et ainsi naviguer sur internet
o Web  Internet en cliquant sur ces liens dans un navigateur .
o Internet = support de communication;
o Web = une partie des contenus circulant sur l'Internet (service
de l’internet permettant de naviguer, parmi d’autres tel que le
mail, news, ftp…).
3 4

Définition de La programmation web : Page Web :

C'est un document
 La programmation web est la programmation o Contenant :
informatique qui permet d'éditer des sites web. Elle permet la  Textes, images, vidéo ...
création d'applications, destinées à être déployées  Liens hypertextes.
sur Internet ou en Intranet.  Avec possibilité d'interaction.
o Stocké dans un fichier .html (ou .htm, .xml);
Ces applications web sont constituées de pages web.
o Calculée et affichée par un navigateur;
o Localisée sur internet à l'aide d'une adresse (URL);
o Permet d'accéder à d'autres pages en suivant des liens.
5 6

1
 21/02/2023

Site Web :
Questions :

 Regroupement de pages :
 C’est quoi le web par apport à internet ?
 Autour d'une thématique commune;
 Est-ce qu’on peut parler du web sans internet ? Sans lien hypertexte?
 Reliées entre elles par des liens hypertextes ;
 Quel est le rôle du navigateur pour le web ?
 Émanant d'une même entité (organisation, entreprise,
 Est-ce qu’un moteur de recherche est un navigateur web ?
particulier. .. );

 Accessibles à partir d'une page d'accueil commune;

 Accessibles à partir d'une URL de base commune;

7  En général, localisées sur un même serveur. 8

Définition du site web :

Site Web (2)

 Organisation hiérarchique :  Un site web est l’ensemble des pages web et des ressources
 Structuré sous forme d'arborescence de dossiers et de inter reliées entre elles par des liens hypertextes, auxquelles
fichiers (comme un disque local); l’internaute peut accéder par une adresse web appelée URL, le
 Permet de définir des chemins relatifs; tout enregistré sous le même nom de domaine.
 Exceptions (de plus en plus fréquentes) : pages générées
Un site web ou site internet englobe des textes et multimédia, il
dynamiquement.
est hébergé sur un serveur web, auquel on peut accéder à travers
 Liens vers et à partir d'autres sites :
le réseau internet ou intranet.
 Permettent de naviguer d'un site à un autre;
 Composent la « toile » mondiale (World Wide Web).

9 10

b. Selon le but poursuivi et le contenu :

Types des sites web :
 Les Sites catalogue : permettent de présenter les produits d'une entreprise et de les
mettre en valeur.
a. Selon les fonctionnalités
 Les Sites d'information (blog) : sont des sites fournissant des informations
A. Les sites statiques : Ils sont constitués de pages HTML particulières à des internautes.

 Les Sites institutionnels : sont des sites destinés à décrire l'activité d'une organisation,
dont le contenu est invariable dans le temps.
et à donner les informations nécessaires aux clients ou aux bénéficiaires.

 Les Sites personnels : (parfois pages perso) sont des sites réalisés par des particuliers à
B. Les sites dynamiques : Ce sont des sites web dont les pages titre de loisir, le plus souvent par passion pour un sujet ou une discipline.

HTML se construisent dynamiquement lors de leur  Les Sites communautaires : sont des sites réunissant des internautes autour d'un intérêt
commun.
consultation par un internaute. Les informations sont  Les Sites intranet : sont des sites accessibles de l'intérieur d'une entreprise ou d'une
direction, ayant pour objet la mise à disposition et le partage d'informations
changeantes car extraites à partir de bases de données professionnelles.

régulièrement mises à jour.  Les Sites vitrine : (sites plaquette ou sites identité) sont des sites dont l'objectif est de
mettre en avant l'image de marque de la société, en présentant par exemple ses produits
ou ses services
11 12

2
 21/02/2023

Il y a aussi les Sites communautaires

c. Selon les types d'accès :
 Remarques :
 Sites publics : ce sont des sites dont les pages peuvent être

 Un site catalogue se différencie d’un site vitrine, car il est visitées par tous.

généralement beaucoup plus détaillé.  Sites privés : ce sont des sites qui ne donnent accès à aucune

 Les deux ne possèdent pas de fonctions e-commerce. page autre que la page d'accueil, sans une inscription préalable.
L'accès à ce type de sites peut être libre (accessible par tous) ou
 Un site catalogue est l’évolution logique d’un site vitrine, restreint (accessible par un groupe de personnes spécifique).
souvent utilisé comme premier site d’entreprise.  Sites gratuits : ce sont des sites qui offrent des services et outils
gratuits.
 La mission principale d’un site vitrine consiste à fournir à
 Sites commerciaux : ce sont des sites de vente en ligne.
votre entreprise une présence sur la toile.
13 14

Popularité du web due à :

Tests et mise en place d’un site :
Pour l'internaute
 Accessibilité « world-wide »
 Tests : S’assurer que les pages du site crée ont un aspect
 Interfaces graphiques conviviales;
identique ou du moins très semblable dans les différents
 Interactivité et richesse des services.
navigateurs du marché et les résolutions d’écrans afférentes
 Grande quantité (et diversité) d'informations disponibles (Web «
(validation W3C).
1.0 »)

 Possibilité de contribuer en tant qu'utilisateur (Web « 2.0 »)

 Mise en place du site : Une fois cette phase de test effectuée,
Pour le développeur :
il ne reste plus qu’à transférer l’ensemble des pages du site
 Simplicité des développements (technologies de base ... )
vers le serveur distant qui va les héberger pour les mettre à la
 Liens avec les outils applicatifs installés sur le serveur
disposition de tous.
(Python, Node Js, Java, PHP, ... ) ),
 Indépendance par rapport aux plateformes des clients. 15 16

Référencement du site Audit web

 = le faire connaître : Le moyen le plus simple, et généralement gratuit, est  Faire un audit de site web revient à analyser et réaliser un
de le référencer dans les annuaires et moteurs de recherche les plus connus
diagnostic complet d'un site internet.
comme Google ou Yahoo! afin qu’il soit bien placé en réponse à la
Cette analyse minutieuse couvre différents aspects tels que :
recherche d’un internaute.
Astuces pour un bon référencement :
 L’aspect purement technique du site (code, structure) et son
1. Choisissez de préférence un nom court et facile à mémoriser.
référencement (SEO).
2. Les extensions .com (ou .fr en France) sont préférables à .org ou .net car ce
 Le volet ergonomique du site (design, navigation, expérience utilisateur)
sont les premières qui viennent à l’esprit des internautes s’ils ont oublié
 Le volet marketing et commercial .
l’extension réelle.

3. La définition d’un maximum de mots-clés rapportant objectivement le Cet état des lieux vise à analyser la performance globale d'un site web afin

contenu de votre site est essentielle. Elle doit être réalisée à l’aide de l’élément de dresser la liste des problèmes majeurs à régler, des erreurs mineures à

< meta qui est situé dans l’en-tête du document. corriger et surtout, des axes d'améliorations à apporter.
17 18

3
 21/02/2023

L'architecture du web
Principe de fonctionnement :
 Le web est possible grâce au réseau internet qui relie entre eux les ordinateurs.
 Certains ordinateurs hébergent des pages web : les serveurs.
 Chaque page web a une adresse URL (Uniform Resource Locator). Indiquant le

internet
Comment ? Où ? Quoi ?, par exemple :
http://ummto.dz/elearning/
 Un client peut demander qu'on lui transmet une page grâce au protocole HTTP
(HyperText Transfer Protocol) qui permet de définir le format et la signification
 Le navigateur effectue une requête spécifiée à travers l’URL; des messages échangés entre le client et le serveur.

 Le serveur retourne un flot typé de données;

 Le navigateur interprète le flot de données et l’affiche.

19 20

Différence entre Application Web et site Web :

 Une application web est tout site web qui permet à ses
utilisateurs d'accomplir des tâches spécifiques et qui n’a pas
besoin d’être installée. Reposent sur des sources de
données.

 Un site web est ce que l'on retrouve (contenu) lorsqu'on entre

une adresse et qu'on atterrit sur une page. Ce contenu ne peut
pas être modifié, vous pouvez simplement naviguer entre les
différents contenus.

Note : un site web peut contenir un ou des applications web.

21 22

Les langages du web

Les types de développements web : a. Côté client

 Le navigateur permet de traduire toutes les informations contenues dans
les fichiers html, css et js, en un rendu qui s'affiche à l'écran avec lequel
l'utilisateur peut interagir.
 Les 3 standard du web :
 Html (HyperText Markup Language): Il contient le texte de la page et décrit
ce texte afin qu'il puisse être compris par des programmes informatiques
(navigateur web ou robots des moteurs de recherche).
 Css (Cascading StyleSheet): permet de mettre en forme (définir les styles)
 Le programme qui s’exécute sur le navigateur = Front en modifiant les couleurs, polices... de de la page
 js (javaScript): permet de rendre les pages web interactives, pour par
 Le programme qui s’exécute sur le serveur web = Back exemple récupérer les données d'un utilisateur entrées dans un formulaire,
en exécutant un programme par le navigateur.
23 24

4
 21/02/2023

Le développement d'une page Web

b. Côté serveur
Avant de publier le site sur internet, on commence par le développer
 Pages générées dynamiquement.
localement sur son ordinateur avec deux logiciels:
 Le serveur doit calculer la ressource avant de la renvoyer :
1. Un éditeur de code :
 En exécutant des « modules» (programmes).
Des éditeurs de code qui permettent de colorer le code, l'indenter, le
 Sécurité, scripting, redirection ...
vérifier, l'auto compléter..., par exemple:
 Avec un langage de programmation côté serveur :  Notepad ++
 PHP, Node Js, ASP, java, python ...  Atom
 En fonction des données :  Visual Studio Code
 Brackets
 Indiquées par le client (formulaires, cookies).
2. Un navigateur web :
 Présentes sur le serveur (fichiers de données, pages statiques).
Un navigateur qui permet de visualiser le rendu du code, par exemple :
 Présentes sur d'autres serveurs (web, bases de données, mail. .. ) :
 Mozilla Firefox
 Le serveur considéré est le client d'autres serveurs.  Google Chrome
 Le mécanisme de requête/réponse reste le même. 25
 Microsoft Edge 26

Les différentes versions du web : Le Web 2.0 : ou web social (2000-2010)

 Il privilégie la dimension de partage et d’échange d’informations et
Le Web 1.0 : ou web traditionnel (Simple Web)
de contenus (textes, vidéos, images ou autres).
 Démarre dans les années 1990.
 Il voit l’émergence des réseaux sociaux, des smartphones et des
 C’est avant tout un web statique, centré sur la distribution
blogs.
d’informations (un portail d’informations ).  Le web se démocratise et se dynamise.
 Majoritairement associé aux grandes entreprises.  C’est l’époque des forums, des wikis (Le terme désigne un logiciel ou
 Il se caractérise par des sites orientés produits, qui sollicitent peu un contenu collaboratif, c'est-à-dire accessible à tous les visiteurs qui
l’intervention des utilisateurs (sans la possibilité de publier des peuvent le modifier à leur gré.), etc.
 L’avis du consommateur est sollicité en permanence et il prend goût à
commentaires ou des réactions).
cette socialisation virtuelle.
 C’est souvent la transcription en ligne des catalogues papier.
 Toutefois, la prolifération de contenus de qualité inégale engendre
une infobésité difficile à contrôler.
Connecter des informations
27 Connecter les gens 28

Le web 4.0, ou web intelligent ,

Le Web 3.0 ou web sémantique (2010-2020),
Il vise à immerger l’individu dans un environnement digital de
vise à organiser la masse d’informations disponibles en fonction
plus en plus prégnant (durable).
du contexte et des besoins de chaque utilisateur, en tenant compte
Basé sur la communication sans fil reliant les personnes et les
de sa localisation, de ses préférences, etc.
objets (IoT : Internet of Things) à tout moment et en tout lieu
C’est un web qui tente de donner sens aux données.
dans le monde physique ou virtuel en temps réel.
C’est aussi un web plus portable qui répond aux besoins
d’utilisateurs mobiles, toujours connectés à travers une multitude
de supports et d’applications.

Connecter les connaissances

29 30

5
 21/02/2023

31 32