WEB : INTRODUCTION Présentation du cours Séance d'introduction autour du web

La page est créée Marine Martin
 
CONTINUER À LIRE
WEB : INTRODUCTION Présentation du cours Séance d'introduction autour du web
Présentation du cours
Séance d’introduction autour du web

WEB : INTRODUCTION
                        http://deptinfo.unice.fr/~renevier/webL3Miage
                                             Philippe.Renevier@unice.fr
contenu, organisation

PRÉSENTATION DU COURS
CONTENU DU COURS
         Objectif principal : Persistance sur le web
            Persistance éphémère (session, cookie)
            Persistance à long terme :
                    Fichier(s)
                    BD
                    Sérialisation

     Besoin d’un minimum de connaissance sur le
      web
     Ouverture sur la conception

Université Nice Sophia Antipolis     L3 Miage – Web – Philippe Renevier-Gonin   3 / 36
CONTRÔLE DE CONNAISSANCE
         Une note de tp : 20%
         Une note de contrôle intermédiaire (QCM, questions de
          cours, questions de tp) : 20%
         Une note d’étude approfondie : 20%
               Présentation de 15 min en cours (support, oral)
                      Questions possibles
               Un exercice à faire en tp (support, corrigé)
               En groupe de 4
               Sujet autour du web (php, html5, javascript, etc.) à faire
                valider
                      À proposer pour le mercredi 25 septembre
         Un contrôle terminal (exercice, étude de cas) : 40%

Université Nice Sophia Antipolis       L3 Miage – Web – Philippe Renevier-Gonin   4 / 36
ORGANISATION
      semaine 01                                                  semaine 08
         cours : intro web                                           cours : php / délégation, classe, héritage...

      semaine 02                                                     tp : ajout de news

         cours : CSS                                              semaine 09
         tp : exo html                                               cours : génération de php, serialisation

      semaine 03                                                     Rendre : vos présentations et vos exercices

         cours : intro fonction / session / cookie                      c’est le 20 novembre
         tp : exo CSS                                                tp : news, d’autres persistance (en tout :

      semaine 04                                                        fichier, BD, XML)
         cours : php / fichier et formulaire
                                                                   semaine 10
                                                                      cours : vers la conception
         tp : premiers exo en php (date, tableau,
           formulaire)                                                tp : news, page de configuration

      semaine 05                                                  semaine 11
         cours : php / fichier et formulaire                         Cours : vos présentations

         tp : suite des exo (bandeau, session)                       tp : flux rss ou json.

      semaine 06                                                  semaine 12
         cours : php / objet / session (suite,                       cours : vos présentations

           autoload)                                                  tp : vos exercices

         tp : fin des exo (en bonus, lien avec CSS3)              semaine 13
      semaine 07                                                     tp : vos exercices

         cours : xml, json                                        contrôle terminal…
         tp : lecture de news

Université Nice Sophia Antipolis           L3 Miage – Web – Philippe Renevier-Gonin                               5 / 36
Protocole, html, CSS, serveur

INTRODUCTION AU WEB
UNE PAGE WEB…
                                                           Pour l’internaute (client)
                                                                 Un navigateur
                                                                 Une URL
                                                                 Un document
                                                                 Des scripts (programmes)

                                                           Pour le « fournisseur » (serveur)
                                                                 Une adresse
                                                                 Un serveur (ordinateur)
                                                                 Un serveur (logiciel, extensions)
                                                                 Des documents (fichiers)
                                                                 Des scripts (programmes)

                                                           une infrastructure
                                                                 Physique
                                                                 logicielle
Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin                       7 / 36
DOMAIN NAME SERVER ET @IP
Je veux voir http://deptinfo.unice.fr/~renevier
Mon navigateur veut récupérer ~renevier sur http://deptinfo.unice.fr/

                      Demande de résolution
                         deptinfo.unice.fr ????                                        DNS
                                Réponse                          serveur
                               134.59.9.1                          DNS

                                                                                  serveur
                134.59.9.1                                                          DNS

         serveur
            web                                                      serveur
                                                                       DNS

Université Nice Sophia Antipolis       L3 Miage – Web – Philippe Renevier-Gonin             8 / 36
DÉSIGNER UN DOCUMENT SUR LE WEB : URL
    NOTION d’URL (Uniform Resource Locator) :
       Un URL représente une identification d’un endroit où stocke une ressource sur
        le réseau Internet
       Une ressource peut-être stockée à plusieurs endroits, elle possède dont un ou
        plusieurs URL
       Format d’un URL : (note : le symbole [xxx] signifie que xxx est facultatif)

Protocole://      Hôte                 [:Port]      Chemin              Nom          [#Ancre]   [?Paramètres]

    Exemple 1 : une ressource statique est un fichier html
http://           deptinfo.unice.fr                 /~renevier/         POO

    Exemple 2 : une ressource dynamique générée avec des paramètres
http://     iihm.imag.fr              /cgi-bin/Vitesse2/        vitesse2.bat           ?Keywords=unsa&SearchEngine=Goo
                                                                                       gle&Kind=Search&InfoSpace=&MaxInf
                                                                                       oNumber=100&VitesseMode=Win

Université Nice Sophia Antipolis                 L3 Miage – Web – Philippe Renevier-Gonin
                                                                                                     9             9 / 36
CODAGE D’UNE URL
     Tabulation           %09                                                 <   %3C
     Espace               %20                                                 =   %3D
     "                    %22                                                 >   %3E
     #                    %23                                                 ?   %3F
     %                    %25                                                 @   %40
     &                    %26                                                 [   %5B
     (                    %28                                                 \   %5C
     )                    %29                                                 ]   %5D
     +                    %2B                                                 ^   %5E
     ,                    %2C                                                 '   %60
     .                    %2E                                                 {   %7B
     /                    %2F                                                 |   %7C
     :                    %3A                                                 }   %7D
     ;                    %3B                                                 ~   %7E
Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin             10 / 36
PROTOCOLE HTTP :
    TRANSFERT ENTRE LE CLIENT ET LE SERVEUR

         HTTP (HyperText Transfer Protocol) : protocole le plus utilisé sur
          Internet depuis 1990.
               La version 0.9 était uniquement destinée à transférer des données sur
                Internet (en particulier des pages Web écrites en HTML).
               La version 1.0 du protocole (la plus utilisée) permet désormais de
                transférer des messages avec des en-têtes décrivant le contenu du
                message en utilisant un codage de type MINE.
         Transfert de fichiers localisés grâce à une URL entre un navigateur
          (le client) et un serveur Web (httpd).
               Le navigateur effectue une requête HTTP
               Le serveur traite la requête puis envoie une réponse HTTP
         RFC 1945 - Hypertext Transfer Protocol -- HTTP/1.0
         RFC 2616 - Hypertext Transfer Protocol -- HTTP/1.1

Université Nice Sophia Antipolis    L3 Miage – Web – Philippe Renevier-Gonin       11 / 36
COMMANDE D’UNE REQUÊTE HTTP

   Commande                                                  Description

 GET                          Requête de la ressource située à l'URL spécifiée
                              Requête de l'en-tête de la ressource située à l'URL
 HEAD
                                spécifiée
                              Envoi de données au programme situé à l'URL
 POST
                                spécifiée
 PUT                          Envoi de données à l'URL spécifiée

 DELETE                       Suppression de la ressource située à l'URL spécifiée

Université Nice Sophia Antipolis        L3 Miage – Web – Philippe Renevier-Gonin    12 / 36
RÉPONSE HTTP
         Syntaxe
           VERSION-HTTP CODE EXPLICATION
           EN-TETE : Valeur
           ...
           EN-TETE : Valeur
           Ligne vide
           CORPS DE LA REPONSE
         Exemple de réponse HTTP:
           HTTP/1.0 200 OK
           Date : Sat, 15 Jan 2000 14:37:12 GMT
           Server : Microsoft-IIS/2.0
           Content-Type : text/HTML
           Content-Length : 1245
           Last-Modified : Fri, 14 Jan 2000 08:25:13 GMT

           …

Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin   13 / 36
CODE RÉPONSE HTTP
 Code       Message                  Description
 10x        Message d'information    Ces codes ne sont pas utilisés dans la version 1.0 du protocole
 20x        Réussite                 Ces codes indiquent le bon déroulement de la transaction

                                     Ces codes indiquent que la ressource n'est plus à
 30x        Redirection
                                       l'emplacement indiqué

 40x        Erreur due au client     Ces codes indiquent que la requête est incorrecte

 403        FORBIDDEN                L'accès à la ressource est tout simplement interdit

                                     Classique! Le serveur n'a rien trouvé à l'adresse
 404        NOT FOUND                   spécifiée.

 50x        Erreur due au serveur    Ces codes indiquent qu'il y a eu une erreur interne du serveur

Université Nice Sophia Antipolis    L3 Miage – Web – Philippe Renevier-Gonin                     14 / 36
EN RÉSUMÉ…   1.   L’utilisatrice veut voir la page
                  http://deptinfo.unice.fr/~renevier
             2.   Tape l’adresse, valide
             3.   Le navigateur fait une requête                                                3.f
             4.   Le navigateur attend la réponse
             5.   Affiche la « page »
             6.   L’utilisatrice lit la page

                                 3.a : le navigateur, via
                                 l’ordinateur, demande
                                           un document          Internet :
                                                                -   3.b identification de la
                                                                    localisation de la page
                                                                    (DNS)
                                       3.c Internet             -   …
                                                                -   3.f Internet aiguille la
                                       « aiguille » la              réponse vers l’ordinateur
                                       machine jusqu’à la           demandeur

                                       l’endroit identifié (=
                                       un ordinateur)

                                3.d - Réception de la demande par le serveur
                                3.e - Identification du document à partir de l’URL

                                             3.f - Renvois de la réponse (document ou erreur)
HTML : LANGAGE DES DOCUMENTS SUR
LE WEB
LANGAGE HTML

     Une balise : une instruction de mise en forme
     Une balise : contient des textes et/ou des
      autres balises autorisées
     Une balise : structure le texte

     Avant : une balise : mise en forme

Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin   17 / 36
TEXTE ORGANISÉ VISUELLEMENT                            TEXTE STRUCTURÉ POUR L’ORDINATEUR
Le dormeur du val                                      Le dormeur du val
                                                       C'est un trou de verdure où chante une rivière
C'est un trou de verdure où chante une rivière         Accrochant follement aux herbes des haillons
Accrochant follement aux herbes des haillons           D'argent ; où le soleil, de la montagne fière, 
D'argent ; où le soleil, de la montagne fière,         Luit : c'est un petit val qui mousse de rayons.
Luit : c'est un petit val qui mousse de rayons.        Un soldat jeune, bouche ouverte, tête nue, 
                                                       Et la nuque baignant dans le frais cresson bleu, 
Un soldat jeune, bouche ouverte, tête nue,             Dort ; il est étendu dans l'herbe, sous la nue, 
Et la nuque baignant dans le frais cresson bleu,       Pâle dans son lit vert où la lumière pleut.
Dort ; il est étendu dans l'herbe, sous la nue,        Les pieds dans les glaïeuls, il dort. Souriant comme
                                                       Sourirait un enfant malade, il fait un somme :
Les pieds dans les glaïeuls, il dort. Souriant comme   Nature, berce-le chaudement : il a froid.
Sourirait un enfant malade, il fait un somme :         Les parfums ne               font pas frissonner sa narine ;
Nature, berce-le chaudement : il a froid.                    Il dort dans le soleil,

Les parfums ne font pas frissonner sa narine ;
Il dort dans le soleil, la main sur sa poitrine,       la main sur sa poitrine, 
Tranquille. Il a deux trous rouges au côté droit.      Tranquille.       Il a deux trous rouges au côté droit.

EXEMPLE DE STRUCTURATION
                                                                               Arthur RIMBAUD (1854-1891)
INTERPRÉTATION DU HTML
         Navigateur : recherche des balises et interprétation
               ….
               & (caractères spéciaux) : "&#code ascii;". Ex :
                      il y a : & /& ; < / < ; > / >
                      é / é (note les caractères s'obtiennent par la
                       &+lettre+accent; les accents étant acute, grave, circ, cedil, tilde et
                       aussi les ligatures avec lig, e.g. æ / æ).
         Liens hypertexte :
               Chaque document HTML identifié par une URL
               Un document HTML peut contenir des liens vers les autres
                documents (html, multimédia, programme, etc.)
         Outil de validation : http://validator.w3.org

Université Nice Sophia Antipolis          L3 Miage – Web – Philippe Renevier-Gonin          19 / 36
LANGAGE HTML
    BALISES DE BASE
       Format général de balise :

           Les balises conteneurs : les balises contiennent de textes et des balises autorisées.
            Une balise conteneur est utilisée pour présenter ou structurer le texte et les balises
            qui lui appartiennent.
          Exemple :  Mon document  
           Les balises vides : qui sont destinées à insérer un élément hors du texte dans le
            document : séparateur, saut paragraphe, saut de ligne, image, …
          Exemple :  

               Balises conteneur
                                        Balises vides
             Corps_balise (texte et balises)                       
             
              {attibut="val"} : liste de couples attribut=‘val’ séparés par des espaces

Université Nice Sophia Antipolis          L3 Miage – Web – Philippe Renevier-Gonin                   20 / 36
PROPRIÉTÉS DES BALISES HTML
         Propriétés générales (mais pas systématiques)

         id, class (document-wide identifiers)
         lang (language information), dir (text direction)
         title (element title)
         style (inline style information )

         onclick, ondblclick, onmousedown, onmouseup,
          onmouseover, onmousemove, onmouseout, onkeypress,
          onkeydown, onkeyup (intrinsic events )

         Définition dans la DTD de html…

Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin   21 / 36
FICHIER XHTML MINIMUM

              …
          
Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin         22 / 36
FICHIER HTML5 MINIMUM

              …
          
Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin   23 / 36
BALISES HTML / XHTML
         Balises structurelles
         Balises contenant du texte (phrase)
         Balise hypertext
         Balises de titres
         Balises de paragraphes et citations
         Balises de listes
         Balises de table (tableaux)
         Balises de formulaire
         les images cliquables, objets, applet
         Balises de Frame
         Balises Meta (entêtes)
         Basiles HTML5…
         Balises de mise en forme (dépréciées !!)

Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin   24 / 36
BALISES STRUCTURELLES
    html : définition du document
       un head, un body

    head : partie comprenant les entêtes et meta-données du document
       Un  …  obligatoire
       Les balises « meta », « script », « style », etc. optionnelles

    title : titre du document
        Titre de la page (en haut du navigateur)
        Contient du texte

    body : corps du document
       Partie centrale du navigateur
       « block » ou script
       ins et del
       Attribut spécifique : onload, onunload

Université Nice Sophia Antipolis     L3 Miage – Web – Philippe Renevier-Gonin   25 / 36
NIVEAU BLOCK
         Niveau de structuration du document à gros grain
            Regroupement de phrase
            Regroupement de « paragraphe »
         Balises concernées :
            Regroupement générique : div | fieldset
            Paragraphes : p | pre
            Titres : h1 | h2 | h3 | h4 | h5 | h6
            Listes : ol | ul | dl
            Tableau : table
            Formulaire : form
            Etc.

Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin   26 / 36
NIVEAU INLINE
     Niveau de la phrase
     texte (PCDATA)
     phrase : em | strong | code | samp | cite …
     special : a (lien, avec href)| img (image, avec alt et
      src) | br (retour à la ligne, balise vide) | script|
      sub | sup | span …
     formulaire : input | select | textarea | label |
      button
     etc

Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin   27 / 36
BALISE  HYPERTEXT - INLINE
    référencer une page par son URI
       ….

    référencer à l’intérieur d’une page
       référence : href= "URI#nom de l'ancre" (lien local si URI ="")
       "nom de l'ancre" = la valeur d’un attribut id d’une balise (n’importe laquelle)
       http://deptinfo.unice.fr/~renevier/introweb/html/exo/index.html#exo2

    Contient des éléments html « inline » excepté 
    Attributs
       href (uri)

          name (id)
          hreflang = langcode : langue de la destination, seulement quand il y a href
          type = content-type (MIMETYPE : ftp://ftp.isi.edu/in-
           notes/iana/assignments/media-types/.)
          rel = relation entre le document courant et la cible (quand href)
              Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright,
                Chapter, Section, Subsection, Appendix ,Help, Bookmark
          rev = idem rel (dans le sens inverse)
          charset = encodage de la cible

Université Nice Sophia Antipolis     L3 Miage – Web – Philippe Renevier-Gonin             28 / 36
BALISE  – IMAGE - INLINE

     Balise pour insérer des images.
     Balise vide, les paramètres sont des attributs
         
            src="philippe.jpg" : adresse de l’image (adresse
             relative ou absolue en http://)
            alt="picture of philippe at 29" : description de
             l’image (en remplacement)

Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin   29 / 36
PARAGRAPHES (BALISES TEXTUELLES) - BLOCK
    p (paragraph)
        Balisede niveau « block »
        Contient du « inline » : pas de  dans un  !!

    pre (texte pré-formaté)
        espaces  et retours à la ligne conservés
        Balise de niveau « block »
        Contient « inline » sauf IMG | OBJECT |BIG | SMALL |
         SUB | SUP

Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin   30 / 36
BALISE LISTES - BLOCK
     (non ordonnée) ou  (ordonnée)
          Contiennent uniquement et au moins une 
          Attributs dépréciés : type (1, A, a, i, I) ; start (ol : une valeur de
           début) ; compact

     (list item)
          « Flow »
          Attributs dépréciés : type, value (une valeur), compact

     (Définition list)
          (dt | dd)+
     (term) ou  (définition)
          dt contient du « inline »
          dd contient du « flow »

Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin    31 / 36
BALISES  – TABLEAUX - BLOCK
    (caption?, (col*|colgroup*), thead?, tfoot?, tbody+)
          Le tableau peut avoir une légende 
          On peut regrouper les colonnes ( et )
          Il peut y avoir une entête (répété pour impression) : 
          Il peut y avoir un pied de tableau (répété pour impression) : 
          Il doit y avoir au moins un corps de tableau 
    Attributs
       summary (texte)
       align (déprécié, left,center ou right)
       width (largeur en pixel ou pourcentage)
       cellspacing (pixel ou %) -- spacing between cells --
       cellpadding (pixel ou %) -- spacing within cells --
       frame = void|above|below|hsides|lhs|rhs|vsides|box|border (cadre
          autour du tableau):
                                      void: No sides. This is the default value.
                                      above: The top side only.
                                      below: The bottom side only.
                                      hsides: The top and bottom sides only.
                                      vsides: The right and left sides only.
                                      lhs: The left-hand side only.
                                      rhs: The right-hand side only.
                                      box: All four sides.
                                      border: All four sides.

Université Nice Sophia Antipolis          L3 Miage – Web – Philippe Renevier-Gonin   32 / 36
BALISES  – TABLEAUX - BLOCK
    Attributs (suite)
          rules = none|groups|rows|cols|all (les traits internes)
                                      none: No rules. This is the default value.
                                      groups: Rules will appear between row groups and column groups only.
                                      rows: Rules will appear between rows only.
                                      cols: Rules will appear between columns only.
                                      all: Rules will appear between all rows and columns.
          border = pixel (épaisseur du trait externe)
    Processus d’affichage
       Résumé
       Titre
       Entêtes et pieds
       Calcul du nombre de colonne (nombre de ligne donné par nombre de TR)
       Rendu des cellules

    caption (titre)
          Ne contient que du inline

Université Nice Sophia Antipolis          L3 Miage – Web – Philippe Renevier-Gonin                      33 / 36
BALISES  – TABLEAUX - BLOCK
    thead (entêtes) et tfoot (pieds) et tbody (corps)
          tr+
          même nombre de colonne
          ordre d’apparition
          tbody toujours requis sauf si unique et pas de thead ni de tfoot
    colgroup
          Contient des 
          regroupement de colonnes
          attribut : span (nombre) width (% ou relative (poids) )
    col
          vide
          regroupement d’attributs pour des colonnes
          attribut : span (nombre) width (% ou relative (poids) )
Université Nice Sophia Antipolis   L3 Miage – Web – Philippe Renevier-Gonin   34 / 36
BALISE  – TABLEAUX - BLOCK
         tr (ligne)
            (th        | td)+
         th (titre) ou td (data) : les cellules
            Contient              du « flow »
            attribut
                    rowspan = nombre de ligne
                    colspan = nombre de colonne

Université Nice Sophia Antipolis         L3 Miage – Web – Philippe Renevier-Gonin   35 / 36
NOUVELLES BALISES DE STRUCTURES HTML5
          : notamment pour les menu /
          barres de navigation
          : notamment pour les pieds de
          page
          : notamment pour les barres de
          navigation
          : un contenu
          : sous partie d’un article ou
          regroupe d’article
          : un encart
          and 

         Exemple (source Michel Buffa) :
          http://jsbin.com/agoyoj/7/edit
         Source de l’image :
          http://www.fredcavazza.net/files/2009/09/
          html5_structure.png

Université Nice Sophia Antipolis        L3 Miage – Web – Philippe Renevier-Gonin   36 / 36
Vous pouvez aussi lire