Pour naviguer sur le Web, il faut :

1. Une connexion au réseau
   
   • Réseau
     • Connexion physique (câbles,sans fils, …) à des machines
     • Protocoles de communication
       Plusieurs niveau (couche) :
       • Internet protocole IP
       • Transmission Control Protocol TCP
       • …
       • HyperText Transfer Protocol HTTP
       • …
     • Fournisseur d'accès (FAI) (Free,SFR …)
2. Un navigateur Web
   (Browser) graphique ou texte

Naviguer: dialoguer avec un serveur web

Uniform Resource Locator (adresse web)

http	://	www.cnam.fr	/	…/repertoire/…	/	unepage.html
↑		↑		↑		↑
protocole		adresse du serveur		chemin vers le fichier/		page demandée

Page web affichée par un navigateur graphique

Page web affichée par un téléphone mobile

Page web affichée par un navigateur en mode texte

Page web reçue par le navigateur

La page HTML

• Un fichier de texte en langage HTML (code source)
  
  • HTML langage de balises =⇒ structuration
     
• Interprétée par le navigateur
  • utilise la structure pour l'affichage
   
• Contient des liens vers d'autres ressources
  • autres pages, images, son, vidéo …
   
• écrite avec un éditeur de texte
  
  • notepad ++ , sublime text , textedit, emacs …
  • pas Word, ni Open Office !!!

La page HTML (source)

• Langage HTML: ensemble de balises
• élément HTML : balise ouvrante + contenu + balise fermante

La page HTML (emboîtement de balises)

La page HTML (vue comme un arbre)

Structuration vs présentation

• Structuration : HTML
  mais comment présenter?
  • Couleur du fond ?
  • Taille, couleur de H1,
  • …
  au choix du navigateur
   
• Présentation : CSS (cascading style sheet) 2

  • 		body      {background-color:white;}
    	      

  • 		h1 {color:red;font-size:xx-large;}
    	      

  • …

  Feuille de style: fichier texte en langage CSS (extension css)

HTML et CSS

Le fichier CSS

HTML et CSS (résultat)

Fichier CSS transmis au navigateur après la page web.
interprété pour afficher:

Intérêt des feuilles de style externes

• Uniformité du style du site entier
   
• Changement d'apparence facile.
   
• Adaptabilité : différentes feuilles de styles alternatives
  • écran, impression, braille …

En résumé

• HTML et CSS
  
  • fichiers textes, écrits une fois pour toutes
  • statiques : stockées sur le serveur (ou en locale)
• Hypertexte : navigation de page en page.

Pages dynamiques: appel de scripts coté serveur

• Insuffisance des pages statique
  Construire les pages au moment de la demande, lire/stoker des informations sur le serveur, …
• Exemple : Un blog
  
  • La page contient:
    1. Un article
    2. Une liste de commentaire (peut être vide)
    3. Une zone pour écrire un nouveau commentaire
    4. Un bouton pour envoyer votre commentaire
  • Scénario utilisateur :
    1. lire l'article et les commentaires,
    2. ajouter un commentaire
    3. lire l'article et la nouvelle liste de commentaire,
    4. …

    A chaque lecture, la page fournie est potentiellement différente

Impossible à faire avec HTML + CSS !!!!!!

Solution

• Le serveur doit stocker (fichier, BD ) la liste des textes ecrits.
   
• Consultation de la page
  • N'est pas un lien vers une page HTML ( statique)
    
  • Est un lien vers quelque chose qui construit la page html des textes
    a partir de l'ensemble des textes stockés au moment de la demande ( dynamique)
    
  • Est un lien vers un programme qui construit la page HTML en fonction des textes stockés sur le serveur.
  
   
• Programme cote serveur
  • programme ≠ HTML
  • programme = cgi-bin, PHP …
  • programme = stocké et exécuté côté serveur

En résumé

Dynamisme coté Navigateur

• Depuis la page HTML, appeler des programme qui s'exécutent coté client (Navigateur)
  • Javascript : langage de programmation interprété par le navigateur coté client
  • Applications Flash, Silverlight/Moonlight …
  • Applet Java (historique)
  
  
• Propiétés des scripts coté client
  • Accès (lecture et écriture) au contenu de la page qui les appelle.
  • Pas accès aux données stockées coté serveur (peut les demander via ajax)
  • Restrictions de sécurité ( pas accéder (par défaut) aux fichiers de la machine locale, au hardward, …
  
  
• Utilisés
  • pour réagir à des évènements utilisateurs : click ou passage sur une zone de la page …,
  • quand la réaction demandée ne necessite rien de ce qui est stocké sur le serveur.
    Exemples : une calculette, un soduku, vérifications de base du remplissage d'un formulaire …

Appel de script Javascript

Convertisseur Francs euros

Convertisseur Francs euros : source HTML

Convertisseur Francs euros : source JS

Web 2.O, Ajax, …

• Faire des requêtes et modifier le contenu d'un document sans avoir recharger une page entière.
   
• Communication de javascript avec les serveurs

Plan du cours

• Introduction (c'est fait)
  
• Structuration: HTML
  • Principes de base
  • Compléments HTML:div, span, id, class ...
    
  
  
• Présentation: CSS
  • Principes de CSS: sélecteur, propriétés simples
  • Compléments CSS: mécanisme de sélection complet, placement ...
  
  
• Formulaire et protocoles
  • Éléments de formulaire
  • Balise <Form> et protocole
  
  
• Comportement, dynamisme cote client : JavaScript
  • Introduction
    • javascript et page HTML
    • langage de base: variable, type, structures de contrôle, fonctions, ...
  • Javascript et le traitement de formulaires, InnerHTML
  • DOM
  • Les objets
  • Découverte de l'api HTML 5 et des api assimilées: Canvas, SVG, local storage , ...
  • ...
  
  
• Quelque spécificité des téléphones mobiles, tablettes tactiles, ...
  
• Points épineux : sécurité, accessibilité …
• Examen