Généralités et concepts des applications web - Administration des sites web et veille 2ème année Master MMI - Département d ...
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Université Moustafa BEN BOULAID -Batna 2-
Faculté des mathématiques et d’informatique
Département d’Informatique
Généralités et concepts
des applications web
Administration des sites web et veille
2ème année Master MMI
Année universitaire : 2020/20212 Introduction
Qu’est-ce que le Web (ou World Wide Web, Toile, 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.
Le premier usage du web:
Le web a été créé pour faciliter la communication entre des
chercheurs scientifiques (physique des particules).
1/7/20213 Introduction
Différence entre le web et l’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). . .
Le Web: n’est qu’une des applications d’Internet ; distincte d’autres
applications comme le courrier électronique, la messagerie
instantanée, et le partage de fichiers en pair à pair.
1/7/20214 Principes de fonctionnement
1/7/20215 terminologie
Abréviations et synonymes ?
o WWW ou W3
o La Toile ou Toile mondiale
o Information Mesh (maillage d’informations)
Ressources du World Wide Web ?
Est une entité informatique (texte, image, boîte aux lettres électronique, etc.)
accessible indépendamment d’autres ressources.
1/7/20216 HTTP
Hypertext Transfer Protocol ?
Est un protocole de communication client-serveur développé pour le
W3.
Le but du protocole HTTP est de permettre un transfert de fichiers
(essentiellement au format HTML) localisés grâce à une chaîne de
caractères appelée URL entre un navigateur (le client) et un serveur
Web (appelé d'ailleurs httpd sur les machines UNIX).
1/7/20217 HTTP
Principe de fonctionnement du protocole HTTP ?
1/7/20218 HTTP
Le navigateur effectue une requête HTTP
Le serveur traite la requête puis envoie une réponse HTTP
Requête HTTP
Une requête HTTP est un ensemble de lignes envoyé au serveur par le
navigateur. Elle comprend :
Une ligne de requête: c'est une ligne précisant le type de document
demandé, la méthode qui doit être appliquée, et la version du protocole
utilisée.
1/7/20219 HTTP
Les champs d'en-tête de la requête: il s'agit d'un ensemble de lignes
facultatives permettant de donner des informations supplémentaires sur la
requête et/ou le client (Navigateur, système d'exploitation, ...).
Chacune de ces lignes est composée d'un nom qualifiant le type d'en-tête,
suivi de deux points (:) et de la valeur de l'en-tête .
Le corps de la requête: c'est un ensemble de lignes optionnelles devant
être séparées par une ligne vide et permettant par exemple un envoi de
données par une commande POST lors de l'envoi de données au serveur
par un formulaire.
1/7/202110 HTTP
Une requête HTTP a donc la syntaxe suivante ( signifie retour chariot
ou saut de ligne) :
1/7/202111 HTTP
Voici donc un exemple de requête HTTP :
1/7/202112 HTTP
Commandes HTTP ?
1/7/202113
HTTP
En-têtes HTTP ?
1/7/202114 HTTP
En-têtes HTTP ?
1/7/202115 HTTP
En-têtes HTTP ?
1/7/202116 HTTP
Réponse HTTP
Une réponse HTTP est un ensemble de lignes envoyées au navigateur par le
serveur. Elle comprend :
Une ligne de statut: c'est une ligne précisant la version du protocole utilisé
et l'état du traitement de la requête à l'aide d'un code et d'un texte
explicatif.
La ligne comprend trois éléments devant être séparés par un espace :
La version du protocole utilisé
Le code de statut
La signification du code
1/7/202117 HTTP
Les champs d'en-tête de la réponse: il s'agit d'un ensemble de lignes
facultatives permettant de donner des informations supplémentaires
sur la réponse et/ou le serveur.
Chacune de ces lignes est composée d'un nom qualifiant le type d'en-
tête, suivi de deux points (:) et de la valeur de l'en-tête .
Le corps de la réponse: il contient le document demandé.
1/7/202118 HTTP
Syntaxe d’une réponse HTTP ?
1/7/202119 HTTP
Exemple d’une réponse HTTP :
1/7/202120 HTTP
En-têtes d’une réponse HTTP :
1/7/202121 HTTP
Les codes de réponse HTTP :
o Ce sont les codes que vous voyez
lorsque le navigateur n'arrive pas
à vous fournir la page demandée.
o Le code de réponse est constitué de
trois chiffres : le premier indique
la classe de statut et les suivants la
nature exacte de l'erreur.
1/7/202122 HTTP
Les codes de réponse HTTP :
1/7/202123 HTTP
Les codes de réponse HTTP :
1/7/202124 HTTP
Les codes de réponse HTTP :
1/7/202125 HTTP
Les codes de réponse HTTP :
1/7/202126 URL
Uniform Resource Locator ?
L’URL (Uniform Resource Locator « localisateur uniforme de ressource »),
auquel se substitue informellement l'expression adresse web, désigne
une chaîne de caractères utilisée pour adresser les ressources du World
Wide Web
Les URL ont été inventées pour pouvoir indiquer avec une notation (d'où
l'adjectif «uniforme ») aux navigateurs web comment accéder à toutes
les ressources d'Internet.
1/7/202127 URL
Hyperliens ?
Chaque hyperlien du web est construit avec l'URL de la ressource
pointée, insérée dans un document source (ou dans un programme
ou dans une interface utilisateur) pour indiquer la localisation d'une
autre ressource.
Lorsqu'on active un hyperlien, le navigateur web peut présenter son URL
dans une barre d'adresse.
1/7/202128 URL
Fonctionnement ?
Une URL est une chaîne de caractères combinant les informations
nécessaires pour indiquer à un logiciel comment accéder à une
ressource Internet.
Ces informations peuvent notamment comprendre:
le protocole de communication,
un nom d'utilisateur, un mot de passe,
une adresse IP ou un nom de domaine,
un numéro de port TCP/IP,
un chemin d'accès,
une requête. 1/7/202129 URL
URL absolue ?
Une URL absolue permet d'indiquer comment accéder à une ressource
indépendamment de tout contexte où elle peut être précisée ou
transmise.
L’URL absolue commence par l'indication d'un schéma de représentation
(spécifique au protocole de communication utilisé pour accéder à cette ressource),
• suivi de l'ensemble des paramètres permettant de localiser sur le réseau le service
hébergeant la ressource,
• puis permet de préciser à ce service le nom d'une ressource à traiter, transmettre
des données de traitement, acheminer et récupérer les résultats,
• puis de préciser éventuellement quelle partie de ce résultat sera utilisée.
1/7/202130 URL
Exemple :
http://Admin:Passe@www.example.com:8888/chemin/d/acc%C3%A8s.php?q=req&q2
=req2#signet
Protocole, normalement obligatoire (mais certains clients web peuvent tenter
de déterminer le protocole) :
o http - protocole de communication, en l’occurrence ici HTTP pour
accéder à un serveur web.
o : - caractère de séparation obligatoire si le protocole est précisé. 1/7/202131 URL
Exemple :
http://Admin:Passe@www.example.com:8888/chemin/d/acc%C3%A8s.php?q=req&q2
=req2#signet
Localisation complète de la ressource:
o // - chaîne de caractères pour les protocoles dont la requête comprend
un chemin d'accès, permettant de préciser et localiser le service avant
ce chemin.
1/7/202132 URL
Exemple :
http://Admin:Passe@www.example.com:8888/chemin/d/acc%C3%A8s.php?q=req&q2
=req2#signet
o Données d’authentification (optionnelles, le service peut les demander
séparément de façon plus sécurisée que via l’URL):
• Admin - nom d’utilisateur, notamment utile pour accéder à des
parties non publiques d'un site web
• : - caractère de séparation si un mot de passe est indiqué.
• Passe - mot de passe de l'utilisateur, indiqué ici en clair.
• @ - caractère terminant les données d'identification présentes avant
le nom du service.
1/7/202133 URL
Exemple
http://Admin:Passe@www.example.com:8888/chemin/d/acc%C3%A8s.php?q=req&q2
=req2#signet
www.example.com - nom de domaine du service, on peut parfois utiliser
plutôt son adresse IP. Si le nom de service ou l’adresse peuvent contenir des
caractères réservés comme :, le nom de service ou l'adresse sera encadré de
crochets doubles [[ ]]. Lui-même se décompose en:
o www: sous-domaine (par défaut www).
o example : nom de domaine de deuxième niveau
o com : nom de domaine de premier niveau 1/7/202134 URL
Exemple :
http://Admin:Passe@www.example.com:8888/chemin/d/acc%C3%A8s.php?q=req&q
2=req2#signet
Indication optionnelle d’un numéro de port (au cas où le même serveur
possède des services n’utilisant pas le port par défaut pour le protocole de
communication)
o : - caractère indiquant qu’un numéro de port est précisé en suffixe
o 8888 - numéro de port TCP/IP du serveur HTTP, doit être précisé
lorsqu’il ne s’agit pas du port standard pour le protocole utilisé (qui est
80 pour HTTP, 21 pour FTP…).
o [1234:abcd::1234]:8888 - Dans le cas d'une adresse IPv6, si on veut
spécifier le port, il est obligatoire de mettre l'adresse entre crochets
pour ne pas confondre le port et l'adresse.
1/7/202135 URL
Exemple :
http://Admin:Passe@www.example.com:8888/chemin/d/acc%C3%A8s.php?q=req&q2=
req2#signet
Nom complet de la ressource à demander sur le service une fois connecté
o /chemin/d/ - chemin absolu (commençant par un /) sur le service
contenant la page web, obligatoire pour les services à chemin d’accès
(par défaut ce chemin sera /).
o acc%C3%A8s.php - nom de la page web, optionnel (de nombreux
services web déterminent un nom de ressource par défaut pour chaque
chemin indiqué);
On remarque qu’un caractère non ASCII comme « è » est codé en
«%C3%A8 ».
1/7/202136 URL
Exemple :
http://Admin:Passe@www.example.com:8888/chemin/d/acc%C3%A8s.php?q=req&q
2=req2#signet
Données supplémentaires optionnelles, transmises au service lors de la
demande à la ressource:
o ? - caractère de séparation obligatoire pour indiquer que des données
complémentaires suivent.
o q=req&q2=req2 - chaîne de requête, traitée par la page web sur le
serveur.
1/7/202137 URL
Exemple :
http://Admin:Passe@www.example.com:8888/chemin/d/acc%C3%A8s.php?q=req&
q2=req2#signet
Données supplémentaires optionnelles, pour l’exploitation de la ressource
après son obtention par le logiciel client :
o # - caractère de séparation obligatoire pour indiquer un signet (ou une
balise).
o signet - identificateur du signet ou de la balise, il s’agit d’un
emplacement à l’intérieur de la page web retournée par le service, cette
donnée sera traitée par le navigateur web.
1/7/202138 URL
URL relative
Une URL relative ne contient ni protocole ni nom de domaine. sont
souvent utilisées pour les hyperliens à l'intérieur d'un même site web.
Les URL relatives sont directement inspirées de la syntaxe des systèmes de
fichiers Unix.
L'usage d'URL relatives permet de ne pas avoir à reprendre l'ensemble des liens
lors du changement d'adresse d'un site.,
o ./ correspond au dossier actuel ;
o ../ correspond au dossier parent ;
o / correspond au dossier racine.
1/7/202139 Serveur HTTP
Un serveur HTTP est un logiciel utilisé pour servir des ressources à
travers le protocole HTTP.
Un serveur HTTP ou daemon HTTP ou HTTPd (HTTP daemon) ou (moins
précisément) serveur Web est un logiciel servant des requêtes respectant le
protocole de communication client-serveur HyperText Transfer Protocol
(HTTP), qui a été développé pour le World Wide Web.
1/7/202140 Serveur HTTP
Liste de serveurs HTTP
C : Apache, Zeus Web Server, nginx, lighttpd, Cherokee, Hiawatha Webserver
ASP/ASP.Net(C#, VB.net) : IIS
Java : Tomcat, Jetty, GlassFish, JBoss, JOnAS, Vert.x
Python : Zope
Pike : Caudium
Ruby : WEBrick, Mongrel, Thin
Erlang : Yaws
Javascript : Node.js
1/7/2021Serveur HTTP
41
Port utilisé pour accéder à un serveur HTTP ?
Le port par défaut pour accéder à un serveur http, le port est le 80. Mais,
les navigateurs sont capables de dialoguer avec un serveur http sur des
ports différents.
Cette technique avec des ports différents est utilisée pour atteindre les serveurs de
manière différente :
o Avec le port par défaut, vous consultez les pages mises à disposition par le
serveur.
o Avec un port différent, vous accédez à d’autres pages, non accessibles
directement comme des pages d’administration du serveur par exemple.
Il est également possible d’avoir plusieurs sites sur le même serveur. L’accès à l’un
ou l’autre des sites se fera en fonction du port adressé.
1/7/2021Serveur HTTP
42
Exemple
Cas standard : port utilisé 80 (rien n’est spécifié sur la barre d’adresse)
1/7/2021Serveur HTTP
43
Exemple : port
spécifique
Pour utiliser un port
spécifique, il suffit
d’ajouter le numéro
du port derrière
l’adresse du serveur
(en ajoutant les « : »).
webmin est un outil
d’administration des
serveurs Linux via des
pages web. Par défaut,
l’accès à Webmin se
fait par le port 10000).
1/7/202144 Client HTTP
C’est quoi ?
Un client HTTP est un outil permettant d’utiliser les ressources fournies par
un serveur HTTP.
Fonctions d’un client HTTP:
• Faire traduire le nom d’hôte en adresse IP par un DNS,
• Rentrer en contact avec le serveur HTTP, et de lui fournir différentes
informations telles que:
Le nom du site,
La ressource désirée, ainsi que ses capacités (gestion de différents types
de ressource, capacité d’affichage, possibilité de compression de données,
etc.)
Sa volonté dans l’utilisation des données fournies (choix des langues,
protection de la vie privée).
1/7/202145 Client HTTP
Navigateur web
Un navigateur web est un type de logiciel client HTTP à interface homme-
machine et 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.
• Le support d’autres types de ressources et d’autres protocoles de
communication dépend du type de navigateur.
1/7/202146 Client HTTP
Robot d’indexation (web crawler ou web spider)
Un type de logiciel client HTTP, utilisé pour indexer les différentes
ressources de sites web.
• Il est généralement conçu pour collecter les ressources (pages Web, images,
vidéos, documents Word, PDF ou PostScript, etc.), afin de permettre à un
moteur de recherche de les indexer.
• Pour indexer de nouvelles ressources, un robot procède en suivant
récursivement les hyperliens trouvés à partir d'une page. Par la suite, il est
mémorise l'URL de chaque ressource récupérée.
1/7/202147 Client HTTP
Agrégateur Web
L'agrégateur est une sorte de « facteur » qui va chercher le courrier à
l'extérieur, puis le dépose chez l'utilisateur, dispensant ce dernier d'aller
régulièrement aux nouvelles en visitant de nombreux sites internet.
• Il prévient de la mise à jour d'un site web ou des actualités qu'il publie (par
notification sonore, visuelle, etc.).
• Également, il importe le contenu nouveau en question et il le fait pour un
ensemble de sites.
1/7/202148 Client HTTP
Aspirateur de site web
Logiciel qui télécharge toutes les données contenues par un site Web
pour les sauvegarder sur un support de mémoire local, ce qui permet
de consulter les pages correspondantes sans être connecté à Internet.
• Un index des éléments composant chacune d'elles est établi (texte HTML de
la page, images, sons, vidéos, animations, etc.)
• La profondeur d'analyse peut aussi être paramétrée pour télécharger plus ou
moins de fichiers.
1/7/202149 Page web
Page web ?
Une page web (ou page) est un document destiné à être consulté avec
un navigateur web.
Une page web est toujours constituée d’une ressource centrale (généralement
un document HTML ou XHTML) et d’éventuelles ressources liées,
automatiquement accessibles (par exemple, des images, des feuilles de style,
des scripts javascript ou des fontes de caractères).
1/7/202150 Le web profond ou web invisible
Le web profond ou web invisible
Est la partie du web qui n’est pas indexée et donc introuvable avec les
moteurs de recherche généralistes. Une étude publiée en 2001 indiquait
que la partie invisible du web représente plus de 99 % du web
Le web profond comprend notamment les ressources suivantes :
les ressources inaccessibles au public, notamment les pages administratives ou
payantes, protégées par un mot de passe ;
les ressources qui ne sont pas communiquées par des protocoles de communication
pris en charge par les robots (souvent ils ne prennent en charge que HTTP et
HTTPS) ;
les ressources dont le format de données n’est pas pris en charge par le robot ;
les ressources listées dans un fichier d’exclusion des robots ;
1/7/202151 Le web profond ou web invisible
Le web profond comprend notamment les ressources suivantes :
les ressources exclues par le robot car elles sont conçues pour abuser du
référencement (spamdexing) ;
les ressources exclues par le robot car elles sont considérées comme trop
peu pertinentes;
les ressources vers lesquelles les hyperliens sont créés dynamiquement en
réponse aux interrogations des visiteurs.
Ces dernières ressources proviennent généralement de bases de données et
constituent la partie la plus importante du web profond.
1/7/202152 Intranets et web privé
Intranets et web privés
Un site web mis en ligne sur un intranet est privé, car le public ne peut
pas accéder à un intranet.
En outre, si l’on met en ligne un site web sur Internet en oubliant de créer des liens
depuis au moins une page existante du World Wide Web,
alors ce site constitue un web isolé.
Il est virtuellement privé, car le public ne peut pas le découvrir en suivant des
hyperliens.
1/7/202153 Type de ressources
Les divers types de ressource du web ont des usages assez
distincts :
Les ressources constituant les pages web : documents HTML, images JPEG ou
PNG ou GIF, scripts JavaScript, feuilles de style CSS, sons, animations, vidéo ;
Les ressources accessibles depuis une page web mais consultables avec une
interface particulière : applet ;
Les ressources conçues pour être consultées séparément : documents (PDF,
PostScript, Word, etc.), fichier texte, images de tout type, morceaux de
musique, vidéo, fichiers à sauvegarder ;
Les ressources appartenant à des systèmes qui ont une existence indépendante
du web, mais vers lesquelles il est possible de créer un hyperlien : forums
Usenet, boîtes aux lettres électronique, fichiers locaux.
1/7/202154 Technologie web
Technologies pré-existantes
Le web repose sur les technologies d’Internet, notamment:
o TCP/IP pour assurer le transfert des données,
o DNS pour convertir les noms d’hôte en adresses IP
o et MIME pour indiquer le type des données.
Les standards de codage de caractères et les formats d’image numérique GIF et
JPEG ont été développés indépendamment.
1/7/202155 Technologie web
Technologies spécifiques
Trois technologies ont dû être développées pour le World Wide Web :
o les URL pour pouvoir identifier toute ressource dans un hyperlien ;
o le langage HTML pour écrire des pages web contenant des hyperliens;
o le protocole de communication HTTP utilisé entre les navigateurs et les
serveurs web.
1/7/202156 Technologie serveur
plusieurs techniques propres au Web sont mises en œuvre pour faire fonctionner les
serveurs HTTP (ou serveurs web)
Serveur HTTP
Le serveur HTTP est chargé d’assurer la communication entre le poste client et
les ressources des sites.
1/7/202157 Technologies serveur
Langages d’application dynamiques côté serveurs
En pratique, CGI et fastCGI permettent d’utiliser n’importe quel langage, cependant,
certains langages de script populaires utilisent d’autre technique pour communiquer avec
le serveur.
Le langage de programmation PHP (PHP: Hypertext Preprocessor) jouit d’une forte
intégration avec le serveur HTTP et les langages HTML.
C’est aujourd’hui le langage le plus utilisé côté serveur.
ASP (Active Server Pages) a été développé par Microsoft pour interpréter du
langage de script dans le serveur IIS (Internet Information Services),
Le langage Java, dont les pages sont servies par Apache Tomcat
En Ruby, Phusion Passenger, fonctionnant avec Apache et Nginx
1/7/202158 Technologie serveur
Bases de données
Les bases de données sont également une partie importante de la génération des
sites à contenu dynamique.
Les principaux types de base de données sont :
De type SQL ; MySQL est la plus populaire, suivie de Microsoft SQL Server,
PostgreSQL, SQLite, Berkeley DB et Oracle.
De type NoSQL ; MongoDB est la plus utilisée, mais on peut également citer
CouchDB, Amazon SimpleDB ou BigTable utilisé par Google.
1/7/202159 Programmation web
La programmation web peut prendre différentes formes : de la simple page statique
à la page dynamique avec connexion à une base de données
différentes technologies possibles dans la programmation côté client ou côté
serveur:
• Langage HTML , XML ou XHTML
• Langages de Script
• Langage de programmation (Java, PHP…)
1/7/202160 Langages de balisage
HTML est un langage de balisage qui définit essentiellement la structure
de la page web (titres, tableaux, paragraphes, etc.).
C'est un langage qui permet de créer des hyperliens.
Depuis sa version 4, le langage HTML s'accompagne des CSS (Cascading Style Sheets -
Feuilles de style en cascade)
Le langage de balisage XML peut également servir de base à une page
web.
Le fichier XML contiendra le contenu de la page web.
Ce fichier sera lié à un fichier XSL (Feuilles de style XML) qui mettra en forme les données
du fichier XML.
Le XHTML est une évolution du HTML basée sur XML.
1/7/202161 Langages de script
Animation flash
Flash (de Adobe Systems - Macromedia) est un programme qui permet de créer des animations
dans un format vectoriel propriétaire relativement léger
L'utilisation de Flash dans une page web nécessite l'installation du plug-in "Flash player" qui
n'est pas disponible pour tous les systèmes.
Applet Java (Appliquette)
Applets ou appliquettes sont des petits programmes avec interface en java
Ils sont téléchargés avec la page web et exécutés par l'ordinateur client.
Active X
Les ActiveX sont une solution de création d'applications développée par Microsoft.
La programmation peut se faire avec plusieurs langages (C++, Visual Basic, Java) mais
nécessite de bonnes connaissances en programmation
1/7/202162 Programmation web côté client
La programmation côté client sera utilisée essentiellement dans le cas de validation de
formulaires (champs obligatoires, petits calculs, ...) et dans la création de petites animations
(menus déroulants...).
La programmation côté client utilise des langages de scripts.
À la différence d'autres langages de programmation, ces langages ne sont pas
compilés.
Ils sont interprétés par le navigateur web du visiteur, et leur syntaxe est
moins stricte que celle des langages de développeurs (variables non-typées a
priori, le point-virgule à la fin des instructions est optionnel...).
1/7/202163 Programmation web coté client
JavaScript est le plus utilisé des langages de programmation web côté client.
Il est reconnu par tous les navigateurs (dans les versions actuelles). Il se base
sur le langage normalisé ECMAScript.
JScript, fort proche du JavaScript est simplement une adaptation de celui-ci
par Microsoft.
VBScript est le langage de script développé par Microsoft sur base du Visual
Basic. Ce langage n'est interprété que par les navigateurs basés sur ceux
développés par Microsoft (soit Internet Explorer et Maxthon).
DHTML n'est PAS un langage de script mais simplement la combinaison,
dans une page web, de JavaScript, de HTML 4 ou de XHTML et de CSS.
1/7/202164 Programmation web coté client
Avantages et inconvénients
Avantages : La programmation côté client est légère et relativement simple à
implémenter (syntaxe pas trop complexe).
Inconvénients : Le code est envoyé tel quel au client, et donc visible par celui-
ci (s'il regarde les sources de sa page) et donc peu sécurisé.
• Le bon déroulement du programme dépend entièrement du navigateur du
client, de sa configuration et de son niveau de sécurité.
Il n'est donc pas question ici de lier le site web à une base de données.
1/7/202165 Programmation web coté serveur
Lors de l'insertion de programmation côté serveur dans une page, lorsque le visiteur
demande la page, le serveur va d'abord lire celle-ci, il va interpréter le code serveur et
encapsuler le résultat dans la page HTML.
Cette dernière sera expédiée au visiteur sans aucune trace du code serveur.
Le visiteur reçoit donc une pure page html (avec éventuellement encore du
code client).
De ce processus, on gagne énormément en sécurisation du code. On a aussi
un grand nombre de possibilité d'interactions avec d'autres systèmes ou
applications comme les bases de données.
1/7/202166 Programmation web coté serveur
Technologies Microsoft
ASP (Active Server Pages): Technologie développée par Microsoft à partir de
1996 dans le but de créer des pages dynamiques.
Langages utilisés : VBScript (langage par défaut) ou JScript.
Utilisation : Tout site web dynamique peut être créé en ASP.
ASP.NET: Technologie développée par Microsoft sur base du
Framework.Net.
L'évolution est importante par rapport à ASP et les possibilités deviennent
quasi infinies.
Utilisation : Tout type d'application web peut être créé avec ASP.NET.
1/7/202167 Programmation web coté serveur
PHP
PHP: Hypertext Preprocessor est un langage de script interprété côté
serveur.
Le code PHP est lu par le serveur et interprété pour produire une page
HTML à chaque fois que la page sera demandée.
PHP travaille généralement avec une base de données MySQL.
1/7/202168 Programmation web coté serveur
Technologies Java
JSP (JavaServer Pages) : Technologie développée par Sun Microsystems dans
le but de créer des pages dynamiques avec le langage Java.
Les JSP permettent d'ajouter du code Java dans la page HTML qui sera
interprété par le serveur.
Servlets: Le nom vient d'une analogie possible à faire avec les applets. Il
s'agit donc de programmes créés en Java et tournant sur le serveur web.
L'exécution du programme génère les pages web renvoyées au client.
1/7/202169 Programmation web coté serveur
Technologies Java
JSP (JavaServer Pages) : Technologie développée par Sun Microsystems dans
le but de créer des pages dynamiques avec le langage Java.
Les JSP permettent d'ajouter du code Java dans la page HTML qui sera
interprété par le serveur.
Servlets: Le nom vient d'une analogie possible à faire avec les applets. Il
s'agit donc de programmes créés en Java et tournant sur le serveur web.
L'exécution du programme génère les pages web renvoyées au client.
1/7/202170 Programmation web coté serveur
ColdFusion
ColdFusion est une technologie de création de pages dynamiques développée par
Macromedia.
Les pages d’application sont des pages web contenant des instructions de
programmation écrite à l’aide d’un langage propriétaire, le CFML (ColdFusion
Markup Language).
Ajax
Ajax (Asynchronous JavaScript And XML) est une technologie, avec ses avantages et
inconvénients, qui combine plusieurs éléments : XHTML, CSS, JvaScript, XML, XSLT
et XMLHttpRequest,
À la base, cette technologie permet d'effectuer une requête HTTP asynchrone (en
parallèle) au serveur web (effectuer une action, mettre à jour une information...).
1/7/202171 Site web
C’est quoi un site web?
Un site web (ou site) est un ensemble de pages web et d’éventuelles autres ressources,
liées dans une structure cohérente, publiées par un propriétaire et hébergées sur un ou
plusieurs serveurs web.
L'adresse web d'un site correspond en fait à l'URL d'une page web, prévue
pour être la première consultée : la page d'accueil.
Techniquement, rien ne distingue la page d'accueil d'une autre page..
1/7/2021Sites web statiques
72 C’est quoi ?
Ces sites ont le mécanisme de fonctionnement le plus simple : les URL
correspondent à un fichier renvoyé par le serveur web.
Le contenu des pages d'un site statique ne dépend donc pas de variables telles
que la date ou de bases de données.
Pour changer le contenu d'une page, il est nécessaire de changer le contenu du
fichier.
Pour les réaliser, seuls les langages dits de d'interface utilisateur (frontend) sont
nécessaires, c'est-à-dire HTML, CSS et JavaScript (en théorie, il est toutefois
possible d'utiliser uniquement le HTML).
Le HTML permet d'écrire le contenu de sa page
Le CSS permet de la décorer ;
JavaScript permet d'ajouter du dynamisme, mais uniquement du côté du
navigateur (par exemple des animations graphiques).
1/7/2021Sites dynamiques
73
Sites dynamiques
Ces sites offrent un contenu qui peut évoluer dans le temps.
Des programmes tournent du côté des serveurs, à l'arrière plan, (backend) pour
générer les pages du site.
Ces programmes peuvent se servir de bases de données ou autres sources de données
pour composer les pages qui seront affichées dans le navigateur.
Ce dynamisme apporte des fonctionnalités que ne peuvent offrir les sites dits
statiques.
Il existe plusieurs langages pour créer ces pages : PHP, Java, C#, Ruby, voire d'autres comme
C++, Python et Visual Basic via l'interface CGI.
Leur temps de chargement est généralement plus long que pour les pages statiques, toutefois il
est possible d'obtenir des valeurs proches en stockant les pages dynamiques déjà appelées dans
une mémoire cache, qui les réaffichera plus vite.
1/7/202174 SGC ou CMS
SGC ou CMS
Les systèmes de gestion de contenu (initiales SGC, CMS en anglais) permettent de
fabriquer des sites web en utilisant des modèles pré établis.
Ces logiciels sont disponibles pour les débutants et simplifient certaines étapes comme
la programmation informatique ou l'architecture du site.
Les procédures de demande du nom de domaine, d'hébergement du site et de
référencement sont semblables aux sites personnalisés classiques.
Quelques SGC : Academic , Agora, Apache Jetspeed, Bizy-Nova, Calker CMS,
Caméléon CMS, Joomla!, CMS++ , CMS chronosite , CMSimple
1/7/202175 Organisation d'un projet web
Les différentes étapes de la conduite d'un projet web ?
LANCEMENT:
étude des besoins, de la concurrence et de l'existant pour l'établissement d'un cahier
des charges
CONCEPTION:
élaboration de la structure (arborescence), du contenu des pages web, du graphisme,
qui font partie du cahier des charges fonctionnel ;
1/7/202176 Organisation d’un projet web
RÉALISATION:
L'étape de réalisation comprend :
• la réservation et gestion d'un nom de domaine (l’adresse web à laquelle le site est
accessible) ;
• la mise en œuvre d'une infrastructure d'hébergement du site (serveurs web, base
de données...) ;
• le développement de l'interface utilisateur (frontend), la partie visible dans le
navigateur ; les différentes pages sont décrites en langages connus des
navigateurs web, principalement HTML, CSS et JavaScript.
• le développement de l'arrière plan (backend), la partie qui fonctionne côté
serveur.
1/7/202177 Organisation d’un projet web
PRODUCTION :
le site est mis en ligne, devient accessible au public ciblé
Exploitation :
phase de maintenance et de promotion du site, avec notamment le référencement
naturel (Netlinking) ou payant (Google Adwords, Microsoft Adcenter, ou autres)
1/7/202178 Maintenance d’un site web
La maintenance d’un site web consiste en général à s’assurer de son bon
fonctionnement ;
On peut distinguer quatre types de maintenances :
La maintenance corrective:
• Elle consiste à corriger les problèmes et les défauts de fonctionnement
ayant survenu d’une manière inattendue
La maintenance préventive:
• Un problème a été identifié, mais n’est pas apparu; alors, pour prévenir
le dysfonctionnement d’un site web, on va corriger le bug à l’avance.
1/7/202179 Maintenance d’un site web
La maintenance évolutive:
• La maintenance évolutive consiste à améliorer les services d’un site web
et d’ajouter de nouvelles fonctionnalités pour qu’il soit adapté aux
nouvelles exigences des utilisateurs.
La maintenance adaptative:
• La maintenance adaptative consiste à améliorer le contenu d’un site web
pour qu’il soit compatible avec les nouvelles contraintes technologiques
(navigateurs, taille des écrans…).
1/7/202180 Portail web
Portail web
Un portail web est un site web qui offre une porte d'entrée commune à un large
éventail de ressources et de services accessibles sur Internet et centrés sur un domaine
d'intérêt ou une communauté particulière.
Les ressources et services dont l'accès est ainsi rassemblé peuvent être des
sites ou des pages web, des forums de discussion, des adresses de courrier
électronique, espaces de publication, moteur de recherche, etc..
Les portails web sont apparus durant la décennie des années 1990. Durant la fin
de cette décennie, certains ont été vendus à un prix très élevé (grâce au trafic web
dont ils bénéficiaient).
Parmi les plus visités, les firmes Google et Yahoo! proposent des portails Web.
1/7/202181
Le Web design dans les smartphones
Via les terminaux mobiles, on ne vise pas les mêmes objectifs en matière de Web
design. Et cela peut pousser à refaire tout le processus de conception si l'on change
de public (passage d'un site web vers le mobile)
Lorsque l'on met un site web, il faut d'abord s'assurer qu'il soit accessible sur
un mobile, et de manière très rapide.
Parmi la communauté des développeurs web, ceux qui visent le marché
mobile vous diront que le temps de chargement d'une page est une contrainte
très sévère et qui peut nuire à un site.
Le web designer doit alors privilégier les performances et le contenu
important sur mobile.
Pour aider à améliorer l'expérience, Google a publié un outil nommé
Pagespeed Insights destinés aux développeurs qui souhaitent des conseils en
matière de Web design sur mobile.
1/7/2021Web design d'entreprise
82
Dans le cadre d'un site web d'entreprise, le web design est défini selon les objectifs qui
lui sont fixés :
Site web corporate:
• l'objectif premier est de développer la visibilité de l'offre et de la marque.
• Les sous-objectifs fixés au web design sont la validation de la lisibilité de
l'identité de la société, l'amélioration de la qualité du trafic (plus profond),
la facilitation de création d'un capital relationnel entre les visiteurs et le site
web
Site web e-commerce:
• L'objectif premier est de transformer les visites en ventes.
Landing page:
• La landing page, appelée également page d’atterrissage, désigne la page sur
laquelle arrive un internaute après avoir cliqué sur un lien (lien
commercial, lien email, lien bandeau publicitaire, etc..).
1/7/202183
Le monitoring de site web ou surveillance de site web consiste en une vérification de la
disponibilité et de la navigabilité d'un site web.
L'intérêt étant de connaître les conditions d'accès et de navigation des
internautes.
Le monitoring est le plus souvent externe, soit réalisé au moyen de points
de contrôles (ou sondes) disséminés dans le monde.
1/7/202184 Monitoring de site web
Monitoring interne
Il sert à vérifier le bon fonctionnement des serveurs et services présents sur
l'intranet de l'entreprise et ce, depuis l'entreprise.
Il peut être complémentaire du monitoring externe mais ne peut suffire à
mesurer la disponibilité d'un site web du point de vue d'Internet.
Monitoring externe
Il sert à vérifier le bon fonctionnement des serveurs et services de l'entreprise
accessibles aux internautes, depuis Internet.
La vérification est réalisée au moyen de multiples sondes réparties dans des zones
géographiques différentes.
1/7/202185 Monitoring de site web
Monitoring externe
Différents types de monitoring externe
Il existe deux types de monitoring externe : le traditionnel et le
scénarisé.
Le premier consiste en une simple requête d'URL (accompagnée le cas
échéant d'une vérification d'intégrité de contenu et de mesures de
réactivité).
Le second consiste en une véritable navigation sur le site, visant à
simuler la visite d'un internaute.
Lorsque cette visite a pour objet de vérifier le bon fonctionnement
d'un processus d'achat, on parle de monitoring transactionnel..
1/7/2021Monitoring de site web
86
Points clés de la surveillance
Pour surveiller les points sensibles d'un site web, on peut surveiller en
particulier :
1. La page d’accueil : c'est la vitrine de l'entreprise et elle fait partie intégrante de
sa communication.
2. Une page accédant à des ressources externes (base de données, serveur
d’application, etc.),
3. Les formulaires : de réservation, de contact, de login, de recherches, etc.
4. Les services de messagerie : environ 70 % du courrier en entreprise passe
aujourd’hui par le courriel, il est donc utile de surveiller les serveurs de
messagerie POP/IMAP et/ou SMTP.
5. Le serveur de transfert de fichier « FTP ».
6. Les routeurs, firewalls, serveurs hétérogènes, webcams, grâce au protocole
« ping» qui enverra une requête au serveur afin de vérifier son état (pas de
connexions, pertes de paquets, etc.). 1/7/202187
Rentabiliser un site web se révèle souvent nécessaire
Méthode
Il existe plusieurs méthodes pour rentabiliser un site internet :
La publicité
Une des méthodes les plus courantes pour rentabiliser son site internet est
d’afficher un lien ou une bannière publicitaire que fournit un annonceur.
• La publicité on-line : l‘espace publicitaire sur le site est loué.
• Publicité rémunérée à l’affichage : vous serez rémunéré à chaque fois
qu’un internaute cliquera sur la publicité.
• Publicité rémunérée au clic : vous serez rémunéré à chaque fois qu’un
internaute cliquera sur une image (ou un lien) publicitaire que vous
aurez publiée sur votre site internet.
1/7/202188 Rentabiliser un site web
L’affiliation
L’affiliation consiste à vendre les produits d’un annonceur, pour gagner de
l’argent grâce à son site.
Exemple d’annonceurs:
• affiliation Amazon, affiliation Tradedoubler, PublicIdeas, Zanox
L’affiliation en marque blanche:
Vous rentabiliserez votre site en vendant vous-même les produits de
l’annonceur.
L’utilisateur ne passera à aucun moment par le site de l’annonceur.
1/7/202189 Rentabiliser un site web
Micropaiement
Il s’agit ici de vendre des services, un accès à des zones payantes du site ou des
produits virtuels de faible coût.
À l’origine, ce système était conçu pour éviter les frais bancaires trop
importants sur les petites sommes.
Vous affichez pour votre produit un contenu crypté qui ne sera accessible à
l’internaute qu’une fois qu’il aura récupéré le code grâce à un numéro de
téléphone surtaxé, un SMS.
Vous toucherez donc une commission sur la surtaxe.
Exemples: Allopass, Optelo ,Rentabiliweb.
1/7/202190 Rentabiliser un site web
Articles sponsorisés
Vous écrivez pour votre site des articles sur un sujet précis commandé par
l’annonceur qui vous rémunère selon le trafic de votre site.
Faites attention à ne pas vous décrédibiliser auprès de vos lecteurs en
acceptant n’importe quel sujet.
Cette méthode est considérée comme de la publicité, donc dans certains pays
il est obligatoire d’informer que les articles sont sponsorisés.
1/7/202191 Rentabiliser un site web
Modes
CPC : le coût par clic : rémunération lorsque le visiteur clique sur un
lien texte ou une bannière.
PPS : la rémunération par vente : vous touchez une commission sur
l’achat du visiteur.
CPL : le coût par formulaire rempli : devis, inscription newsletter.
CPA : la rémunération par action. C’est l’action du visiteur qui vous
rémunère (par exemple, par le téléchargement d’un logiciel ou l’achat
d’un livre sur le site web de votre partenaire) ..
1/7/202192 Rentabiliser un site web
Optimisation de la publicité
Il faut penser aussi au confort de l’internaute.
Eviter la publicité trop agressive (pop-up), mal placée, trop présente.
Choisissez bien le type d’annonce (bannière, image, lien) que vous souhaitez voir sur
votre site.
Placez la publicité à des endroits où cela ne gêne pas la navigation.
Veillez aussi à respecter la thématique de votre site dans le choix des publicités que
vous souhaitez afficher.
Avant de choisir un annonceur, vérifiez la qualité de ses campagnes publicitaires.
1/7/202193
Méthodes
Il est souvent bien plus profitable de préserver les visiteurs que l’on a déjà, en
les fidélisant, que de chercher sans cesse à en acquérir de nouveaux.
Comment les fidéliser ?
Fidéliser par la communication
communiquer directement sur votre site internet (par contact email)
ou via l’envoi de newsletters (offres promotionnelles par exemple),
Le commentaire :indispensable à tout blog, même d’entreprise. Il
permet à vos visiteurs de vous parler en direct, de mieux vous
connaître.
Les réseaux sociaux : la communication sur les réseaux est plus rapide
et spontanée, utilisez-les pour communiquer de manière moins
formelle avec vos visiteurs.
1/7/202194 Fidéliser les visiteurs
Fidéliser par l’affirmation
Il est bien évident que pour fidéliser les visiteurs, ils doivent connaître et
reconnaître votre site.
Si vous vous fondez dans la masse, ils pourraient bien ne jamais revenir !
• L‘identité : un design, un nom de domaine, un logo, tous ces marqueurs sont
importants pour que vos lecteurs se souviennent de vous
• Inspirer confiance : Votre site doit avoir une page à propos (avec photo c’est encore
mieux) où vous expliquez qui vous êtes et le pourquoi du site.
• Foire aux questions : C’est une rubrique qu’il faut créer pour répondre aux
préoccupations habituelles de vos visiteurs et ainsi gagner leur confiance.
Fidéliser par l’incitation
Le bonus à l’inscription : livre blanc, promotion, tutoriaux …
Les call to action : à la fin d’une page ou d’un article, placez un appel à
l’action pour entraîner vos visiteurs à s’inscrire sur votre site
1/7/202195
FIN
1/7/2021Vous pouvez aussi lire