Généralités et concepts des applications web - Administration des sites web et veille 2ème année Master MMI - Département d ...

 
CONTINUER À LIRE
Généralités et concepts des applications web - Administration des sites web et veille 2ème année Master MMI - Département d ...
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/2021
Généralités et concepts des applications web - Administration des sites web et veille 2ème année Master MMI - Département d ...
2   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/2021
Généralités et concepts des applications web - Administration des sites web et veille 2ème année Master MMI - Département d ...
3        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/2021
4   Principes de fonctionnement

                                  1/7/2021
5          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/2021
6        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/2021
7   HTTP

     Principe de fonctionnement du protocole HTTP ?

                                                       1/7/2021
8   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/2021
9   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/2021
10   HTTP

      Une requête HTTP a donc la syntaxe suivante ( signifie retour chariot
       ou saut de ligne) :

                                                                                1/7/2021
11     HTTP

      Voici donc un exemple de requête HTTP :

                                                 1/7/2021
12   HTTP

      Commandes HTTP ?

                          1/7/2021
13
     HTTP

       En-têtes HTTP ?

                          1/7/2021
14   HTTP

      En-têtes HTTP ?

                         1/7/2021
15   HTTP

      En-têtes HTTP ?

                         1/7/2021
16   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/2021
17   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/2021
18   HTTP

      Syntaxe d’une réponse HTTP ?

                                      1/7/2021
19   HTTP

      Exemple d’une réponse HTTP :

                                      1/7/2021
20   HTTP

      En-têtes d’une réponse HTTP :

                                       1/7/2021
21         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/2021
22   HTTP

      Les codes de réponse HTTP :

                                     1/7/2021
23   HTTP

      Les codes de réponse HTTP :

                                     1/7/2021
24   HTTP

      Les codes de réponse HTTP :

                                     1/7/2021
25   HTTP

      Les codes de réponse HTTP :

                                     1/7/2021
26   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/2021
27   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/2021
28    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/2021
29   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/2021
30   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/2021
31   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/2021
32   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/2021
33   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/2021
34   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/2021
35   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/2021
36   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/2021
37   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/2021
38     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/2021
39   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/2021
40   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/2021
Serveur 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/2021
Serveur HTTP
42
      Exemple

      Cas standard : port utilisé 80 (rien n’est spécifié sur la barre d’adresse)
                                                                                     1/7/2021
Serveur 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/2021
44   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/2021
45   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/2021
46   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/2021
47   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/2021
48   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/2021
49   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/2021
50   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/2021
51   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/2021
52   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/2021
53   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/2021
54   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/2021
55     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/2021
56   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/2021
57          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/2021
58   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/2021
59   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/2021
60            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/2021
61              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/2021
62   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/2021
63   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/2021
64   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/2021
65   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/2021
66   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/2021
67   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/2021
68   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/2021
69   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/2021
70        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/2021
71   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/2021
Sites 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/2021
Sites 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/2021
74   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/2021
75   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/2021
76   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/2021
77   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/2021
78   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/2021
79   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/2021
80   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/2021
81
     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/2021
Web 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/2021
83

     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/2021
84   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/2021
85   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/2021
Monitoring 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/2021
87

                      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/2021
88   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/2021
89   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/2021
90   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/2021
91   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/2021
92           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/2021
93
      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/2021
94   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/2021
95

     FIN

           1/7/2021
Vous pouvez aussi lire