From 1a01baf63e59f5359c4af5cf2159b1e30f47ee74 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Kim=20Nguy=E1=BB=85n?= Date: Tue, 15 Oct 2013 08:25:06 +0200 Subject: [PATCH] Implement table of content. --- prog_internet/prog_internet_01.xhtml | 2 +- prog_internet/prog_internet_02.xhtml | 4 +- prog_internet/prog_internet_03.xhtml | 1069 +------------------------- prog_internet/prog_internet_04.xhtml | 13 +- prog_internet/prog_internet_05.xhtml | 778 +++++++++---------- simpleWebSlides.css | 13 + simpleWebSlides.js | 85 +- themes/uPsud.css | 24 +- 8 files changed, 495 insertions(+), 1493 deletions(-) diff --git a/prog_internet/prog_internet_01.xhtml b/prog_internet/prog_internet_01.xhtml index 8fba8e1..b8f7620 100644 --- a/prog_internet/prog_internet_01.xhtml +++ b/prog_internet/prog_internet_01.xhtml @@ -4,7 +4,7 @@ > - Programmation Internet + Systèmes d'exploitation (1/2) diff --git a/prog_internet/prog_internet_02.xhtml b/prog_internet/prog_internet_02.xhtml index 3300219..497e323 100644 --- a/prog_internet/prog_internet_02.xhtml +++ b/prog_internet/prog_internet_02.xhtml @@ -4,7 +4,7 @@ > - Programmation Internet + Systèmes d'exploitation (2/2) @@ -41,7 +41,7 @@ - +

Programmation Internet

Cours 2

diff --git a/prog_internet/prog_internet_03.xhtml b/prog_internet/prog_internet_03.xhtml index fa93d63..b3dd771 100644 --- a/prog_internet/prog_internet_03.xhtml +++ b/prog_internet/prog_internet_03.xhtml @@ -4,7 +4,7 @@ > - Programmation Internet + Réseaux, TCP/IP @@ -41,7 +41,7 @@ - +

Programmation Internet

Cours 2

@@ -49,1071 +49,6 @@ http://www.lri.fr/~kn
-
-

Plan

-
    -
  1. Systèmes d'exploitation ✔ -
  2. Réseau et Internet -
      -
    • 2.1 Principes des réseaux
      • -
    • 2.2 TCP/IP
      • -
    • 3 -
    -
    3. -
-
- -
-

Définitions

- - - - - - - - - - - - - - - -
Programme séquences d'instructions effectuant - une tâche sur un ordinateur
Exécutable fichier binaire contenant des - instructions machines interprétables par le - microprocesseur
Thread plus petite unité de traitement (≡ - séquence d'instructions) pouvant être ordonnancée par - l'OS -
Processus instance d'un programme (≡ « un - programme en cours d'exécution »). Un processus est constitué - de un ou plusieurs threads.
-
- -
-

Exemple: programme

-

Dans un fichier « counter.c » - (attention c'est du pseudo - C)

-
- int count = 0; - int exit = 0; - void display() { - while (exit == 0) { - sleep (3); - printf("%i\n", count); - } - } - void listen() { - while (exit == 0) { - wait_connect(80); - count++; - } - } -
- void main () { - run_function(display); - run_function(listen); - while (getc () != '\n') { }; - exit = 1; - return; - } -
-
-
-

Exemple: programme

-

Compilation
- - gcc -o counter.exe counter.c -
- Le fichier « counter.exe » est un - exécutable (fichier binaire contenant du code machine)
- - ./counter.exe ← il faut la permission +x sur le fichier - -
- Le contenu de l'exécutable est copié en mémoire et le processeur - commence à exécuter la première instruction du programme. -

-
-
-

Exemple: threads

-
    -
  1. main
    2. -
  2. attente d'un évènement clavier - →←changement de thread -
    3. -
  3. listen
    4. -
  4. attente de connexion →←changement de thread -
    5. -
  5. display (affiche - 0 à l'écran)
    6. -
  6. attente pendant 3s → (les - 3 threads attendent un évènement externe)
    - nouvelle connexion sur le port 80 ← - réveil du thread listen -
    7. -
  7. listen - (incrémente count)
    - attente de connexion →
    - … fin des 3s
    - ← - réveil du thread display -
    8. -
  8. display (affiche - 1 à l'écran)
    9. -
-

Les threads partagent leur mémoire (variables communes)

-
-
-

Exemple: processus

-

(différence: les processus - ne partagent pas leur espace mémoire)

-
    -
  1. Exécution de counter.exe pendant 50㎲ -
    2. -
  2. Exécution - de firefox.exe - pendant 50㎲
    3. -
  3. Exécution du processus qui dessine le bureau pendant 50 - ㎲
    …
    4. - -
-

C'est le gestionnaire de processus qui décide quel - programme a la main et pour combien de temps (priorité aux - tâches critiques par exemple)
- Le système d'exploitation stocke pour chaque processus un - ensemble d'informations, le PCB (Process Control Block). -

-
-
-

Proccess Control Block

-

Le PCB contient:

-
    -
  • l'identificateur du processus (pid)
    • -
  • l'l'état du processus (en attente, en exécution, - bloqué, …)
    • -
  • le compteur d'instructions (i.e. où on en est dans - le programme)
    • -
  • le contexte courant(état des registres, …)
    • -
  • position dans la file d'attente de priorité - globale
    • -
  • informations mémoire (zones allouées, zones accessibles, - zones partagées)
    • -
  • listes des fichiers ouverts (en lecture, en écriture), - liste des connexions ouvertes, …
    …
    • -
-
-
-

Opérations sur les processus

-
    -
  • création et destruction de - processus
    • -
  • suspension et reprise
    • -
  • duplication (fork)
    • -
  • modification de la priorité
    • -
  • modification des permissions
    • -
-
-
-

États d'un processus

-

Un processus change d'état au cours de son exécution

- - - - - - -
Nouveau le processus est en cours de création
Exécution le processus s'exécute
En attente le processus attend un évènement - particulier (saisie au clavier, écriture sur le disque, - …)
Prêt le processus est prêt à reprendre son - exécution et attend que l'OS lui rende la main
terminé le processus a fini son exécution
-
-
-

États d'un processus

-

L'OS détermine et modifie l'état d'un processus:

-
    -
  • En fonction d'évènements internes au processus: -
    • lecture d'un fichier (si le contenu n'est pas - disponible, le processus passe de « prêt » à « en attente - »)
      • -
    • le processus attends volontairement pendant x - secondes
      …
      • -
    -
    • -
  • - En fonction d'évènements externes au processus: -
    • un fichier devient disponible
      • -
    • un timer arrive à 0
      • -
    • le matériel déclenche une interruption
      • -
    -
    • -
-
-
-

États d'un processus

- - - - - - - - - Nouveau - Prêt - En exécution - En attente - - - - - - - - - - Terminé - - - - - mise en routepar l'ordonnanceur - interruptionpar l'ordonnanceur - attente E/Sinterruption - fin E/Sint. traitée… - terminaisonnormale - terminaisonanormale - - - -
-
-

La commande ps

-

Permet d'avoir des informations sur les processus en cours - d'exécution (voir « man ps » pour les - options):
- $ ps -o user,pid,state,cmd x - USER PID S CMD - … - kim 27030 Z [chrome] <defunct> - kim 27072 S /opt/google/chrome/chrome --type=renderer - kim 29146 S bash - kim 29834 S evince - kim 29858 S emacs cours.xhtml - kim 29869 R ps -o user,pid,state,cmd x -
-

- -
-
-

États des processus (sous Linux)

- - - - - - -
R Running (en cours d'exécution)
S Interruptible sleep (en attente, - interruptible)
D Uninterruptible sleep (en attente, - non-interruptible)
T Stopped (interrompu)
Z Zombie (terminé mais toujours - listé par le système)
-
- -
-

Signaux

-

L'OS peut envoyer des signaux à un processus. Sur réception - d'un signal, un processus peut interrompre son comportement normal - et exécuter son gestionnaire de signal. Quelques signaux: -

- - - - - - - - - -
Nom Code Description
HUP 1 demande au processus de - s'interrompre
INT 2 demande au processus de se - terminer
ABRT 2 interrompt le processus et produit - un dump
KILL 9 interrompt le processus immédiatement -
SEGV 11 signale au processus une erreur mémoire -
STOP 24 suspend l'exécution du processus -
CONT 28 reprend l'exécution d'un processus suspendu -
-
-
-

Processus et terminal

-

Un processus est lié au terminal dans lequel il est - lancé. Si on exécute un programme dans un terminal et que le - processus ne rend pas la main, le terminal est bloqué - - - $ gedit - - - On peut envoyer au processus le signal STOP en - tapant ctrl-Z dans le terminal: - - - $ gedit - ^Z - [1]+ Stopped gedit - - Le processus est suspendu, la fenêtre est gelée (ne répond plus). -

-
-
-

Processus et terminal

-

On peut reprendre l'exécution du programme de deux - manières:
- $ fg
- Reprend l'exécution du processus et le remet en avant plan (terminal - bloqué)
- $ bg
- Reprend l'exécution du processus et le remet en arrière plan (terminal -libre)
- On peut lancer un programme - directement en arrière plan en faisant:
- $ gedit &
- On peut envoyer un signal à un - processus avec la commande « kill [-signal] pid Â»
- $ kill -9 2345 -

-
-
-

Processus et entrées/sorties

-

Le terminal et le processus sont liés par trois fichiers - spéciaux:

-
    -
  1. L'entrée standard (stdin), reliée - au clavier
    2. -
  2. La sortie standard (stdout), reliée - à l'affichage
    3. -
  3. La sortie d'erreur (stderr), reliée - à l'affichage
    4. -
-

Dans le shell, on peut utiliser les - opérateurs <, > - et 2> pour récupérer le contenu - de stdin, stdout - et stderr:
- -$ sort < toto.txt -$ ls -l > liste_fichiers.txt -$ ls -l * 2> erreurs.txt - -

-
-
-

Processus et entrées/sorties

-

Dans le shell, l'opérateur | permet - d'enchaîner la sortie d'un programme avec l'entrée d'un - autre:
- $ ls -l *.txt | sort -n -r -k 5 | head -n 1 -

-
    -
  1. affiche la liste détaillée des - fichiers textes
    2. -
  2. trie (et affiche) l'entrée standard par ordre - numérique décroissant selon le 5ème champ
    3. -
  3. affiche la première ligne de - l'entrée standard
    4. -
-
- -rw-rw-r 1 kim kim 471 Sep 14 16:25 bd.txt - -rw-rw-r 1 kim kim 234 Sep 15 17:46 foo.txt - -rw-rw-r 1 kim kim 1048576 Sep 24 09:20 large.txt - -rw-rw-r 1 kim kim 1048576 Sep 24 09:20 large.txt - -rw-rw-r 1 kim kim 471 Sep 14 16:25 bd.txt - -rw-rw-r 1 kim kim 234 Sep 15 17:46 foo.txt - - -rw-rw-r 1 kim kim 1048576 Sep 24 09:20 large.txt - -
- -
-
-

Processus de type daemon

-

- Un daemon (prononcé démon) est un processus - qui non-interactif qui tourne en tâche de fond (pas - d'entrée/sortie sur le terminal, pas d'interface graphique, …). On - communique avec ce processus via des signaux ou en lisant - ou écrivant dans des fichiers ou connexions réseau. Le plus souvent, - leur but est de fournir un service -

-

Exemple de scénario: « Les utilisateurs doivent interagir avec - le matériel. L'accès au matériel demande des droits - administrateur. » -

-
    -
  • Solution 1 : tout le monde est administrateur (DOS, Win XP, - …)
    • -
  • Solution 2 : on crée un programme particulier qui a les - privilèges suffisants pour la tâche en question. Les utilisateurs - communiquent avec ce programme
    • -
-
-
-

Quelques daemons sous Linux

- - - - - - - - - - -
Nom Description
sshd shell distant sécurisé
crond exécution périodique de programmes
cupsd serveur d'impressions
pulseaudio serveur de son (mixe les sons des - différentes applications)
udevd détection de matériel hotplug
nfsd serveur de fichier réseau
smtpd livraison des e-mail
httpd serveur de pages Web
-
-
-

Architecture client-serveur

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Client - - - - - Serveur - - - - - - - - - Client - - - - - - - - - - - - - - Client - - - - - - Client - - - - - - - - - - Client - - - - - - Client - - - - - - - - - - - - - -

-

- Des processus clients communiquent - avec le serveur à travers le - réseau. Les clients sont indépendant et ne communiquent pas entre - eux. Attention plusieurs clients peuvent se trouver su la - même machine physique! -

-
-
-

Architecture client-serveur

-
    -
  • Le serveur attend des connexions entrantes
    • -
  • Les clients peuvent se connecter à tout moment
    • -
  • L'application client est généralement légère, envoie une - requête au serveur et attend un résultat
    • -
  • Le serveur est une application plus lourde qui: -
    • effectue des calculs trop coûteux pour le client
      • -
    • gère l'accès à une ressource distante partagée
      …
      • -
    -
    • -
-

Exemples: serveur de bases de données, serveur mail, serveur Web, - terminal de carte bancaire, …

-
diff --git a/prog_internet/prog_internet_04.xhtml b/prog_internet/prog_internet_04.xhtml index beb1272..b0264bd 100644 --- a/prog_internet/prog_internet_04.xhtml +++ b/prog_internet/prog_internet_04.xhtml @@ -4,7 +4,7 @@ > - Programmation Internet + Web et HTML @@ -35,7 +35,7 @@ - +

Programmation Internet

Cours 4

@@ -59,7 +59,7 @@
- +

Internet et ses services

Bref historique d'Internet (1/2)

@@ -224,7 +224,7 @@ - +

Fonctionnement du Web

Fonctionnement du Web

@@ -297,6 +297,7 @@
+

Adressage des documents Web

Adressage des documents Web (1/3)

@@ -343,6 +344,8 @@

devient

/home/kn/public_html/index.html + +

Le protocole HTTP

Plan

    @@ -359,6 +362,7 @@
+

Caractéristiques du protocole HTTP

    @@ -398,6 +402,7 @@

    Démo

    +

    HTML, le format des documents

    Plan

      diff --git a/prog_internet/prog_internet_05.xhtml b/prog_internet/prog_internet_05.xhtml index 91d1ff4..3c32ca0 100644 --- a/prog_internet/prog_internet_05.xhtml +++ b/prog_internet/prog_internet_05.xhtml @@ -4,7 +4,7 @@ > - Programmation Internet + CSS @@ -35,6 +35,7 @@ +

      Programmation Internet

      @@ -42,25 +43,7 @@       kn@lri.fr
      http://www.lri.fr/~kn
      - -
      -

      Plan

      -
      -
        -
      1. Systèmes d'exploitation
        2. -
      2. Réseaux et Internet
        3. -
      3. Le Web
        4. -
      4. CSS -
          -
        • 4.1 Introduction
          • -
        • 4.2 Boîtes
          • -
        • 4.3 Selecteurs
          • -
        -
        5. -
      -
      -
      - +

      Introduction

      Cascading Style Sheets (CSS)

@@ -87,445 +70,420 @@
-

L'attribut style

- Un lien]]> +

L'attribut style

+ color:redUn lien]]>

Apperçu:

Un lien

-

Inconvénient: il faut copier l'attribut - style pour tous les liens de la page. -

+

Inconvénients :

+
  • il faut copier l'attribut + style pour tous les liens de la page
    • +
  • modification de tous les éléments difficiles
    • +
-

Internet

-
    -
  • Ensemble de logiciels et protocoles basés sur TCP/IP -
    • -
  • Modèle Client/Serveur
    • -
  • Un serveur fournit un service: -
      -
    • courriel
      • -
    • transfert de fichier (ftp)
      • -
    • connexion à distance (ssh)
      • -
    • Web (http)
      • -
    -
    • -
  • Plusieurs services peuvent être actifs sur la même - machine (serveur). Un port (identifiant numérique) - est associé à chaque service. Sur Internet, un service est - identifié par: -
      -
    • L'adresse IP de la machine sur lequel il fonctionne
      • -
    • Le numéro de port sur lequel le programme attend les - connexions
      • -
    -
    • -
+

L'élément style

+ + + … + + + + Lien 1 Lien 2 + + ]]> +

Apperçu :

+

+ Lien + 1 + Lien 2 + +

+

Inconvénient : local à une page

-

Exemples de services

-
- - - - - - - - - - - - - - - -
ServiceProtocolePortDescription
ftp File Transfer Protocol - 20,21 Transfert de fichiers
telnet Network Virtual - Terminal 23 Shell à distance
ssh Secure Shell 22Shell à - distance crypté
mailSimple Mail Transfer - Protocol 25 Envoi de mail
pop Post Office - Protocol 110Récupération de mail
imap Internet Message Access - Protocol 143Synchronisation de mails
nslookup Domain Name - System 42 Serveur de noms
http Hyper Text Transfer Protocole80Web
+

Fichier .css séparé

+

Fichier style.css:

+

+ a { color: red; } +

+

Fichier test.html:

+

+ + + … + ]]><link href="style.css" type="text/css" rel="stylesheet" /> + + … + ]]> +

+

Modifications & déploiement aisé
-

World Wide Web (1/2)

+

Syntaxe

+

Une propriété CSS est définie en utilisant la + syntaxe: +

+

nom_prop : val_prop + ;

    -
  • Service de distribution de page hypertexte
    • -
  • Une page hypertexte contient des références - immédiatement accessibles à d'autres pages (pointeurs - ou liens hypertextes)
    • -
  • Les pages sont décrites dans le - langage HTML (HyperText Markup Language)
    • -
  • Architecture client/serveur: -
      -
    • Les pages sont stockées sur le serveur
      • -
    • Les pages sont envoyées au client (navigateur Web) qui - en assure le rendu
      • -
    +
  • Si on utilise l'attribut style d'un + élément: + color:red;border-style:solid;border:1pt;Lien 1]]> +
    • -
  • Utilise le protocole HTTP pour les échanges entre - le client et le serveur
    • +
  • Si on utilise un fichier .css ou une feuille de + style: + a { + color : red; + border-style: solid; + border: 1pt; + } + h1 { /* Le style des titres de niveau 1 */ + text-decoration: underline; + color: green; + } +
- +

Boîtes

-

World Wide Web (2/2)

-

Concepts clé:

+

Unités de longueur

+

CSS permet de spécifier des longueurs comme valeurs de + certaines propriétés (position et taille des éléments, épaisseur + des bordures, …). Les longueurs doivent comporter une + unité. Les unités reconnues sont:

- - - + + + + + + + + + + +
URL localisation d'une page Web (« adresse de - la page »)
HTTP protocole de communication entre un - client et un serveur Web
HTML langage de description des pages - Web
px pixel
in pouce (2,54cm)
cm centimètre
mm millimètre
pt point (1/72ème de pouce, 0,35mm)
pc pica (12 points)
em facteur de la largeur d'un caractère de la police + courante
ex facteur de la hauteur d'un caractère « x » + de la police courante
% pourcentage d'une valeur particulière + (définie par propriété)
vh viewport height (% de la + hauteur de la partie visible de la page)
vw viewport + width (% de la largeur de la partie visible de la + page)
-

Évolutions récentes (Web 2.0, internet mobile, Cloud, …)

-
    -
  • Standardisation du contenu multimédia (images, vidéos et - sons en streaming)
    • -
  • Contenu interactif avancé (stockage de fichier coté - client, rendu 3D, …)
    • -
  • Uniformisation de nombreuses extensions ad-hoc: HTML5
    • -
-
-

Plan

-
    -
  1. Systèmes d'exploitation
    2. -
  2. Réseaux et Internet
    3. -
  3. Le Web -
      -
    • 3.1 Internet et ses services
      • -
    • 3.2 Fonctionnement du Web
      • -
    • 3.3 Adressage des documents Web
      • -
    • 3.4 Le protocole HTTP
      • -
    • 3.5 HTML, le format des documents
      • -
    -
    4. -
-
-
-

Fonctionnement du Web

-
- -
+

Boîte

+

Chaque élément de la page HTML possède une boîte + rectangulaire qui délimite le contenu de l'élément: +

+
+ ← width →
+ margin (marge)
+ + border (bordure)
+ + padding (ajustement)
+ + Lien 1 + + + + + + ↑



+ height



↓ + +
+ +

La taille t du contenu est calculée pour que:
+ (height|width) = padding + margin + border + t +

- -
-

Côté client

-

Le navigateur :

-
    -
  • Analyse l'URL demandée
    • -
  • Obtient l'adresse IP auprès du serveur DNS
    • -
  • Établit une connexion (potentiellement sécurisée) avec le serveur
    • -
  • Envoie une requête HTTP au serveur
    • -
  • Récupère la page envoyée par le serveur dans - sa réponse
    • -
  • Analyse la page et récupère les éléments référencés : - images, sons, …
    • -
  • Effectue le traitement du code client
    • -
  • Met en forme le contenu et l'affiche dans la fenêtre
    • -
-
-
-

Côté serveur

-
    -
  • Un listener (thread particulier) attend les - connexions sur un port par défaut (80 dans le cas de HTTP)
    • -
  • À chaque nouvelle connexion, le listener crée - un thread de traitement et se remet en attente -
    • -
  • Le thread de traitement vérifie la validité de la - requête : -
      -
    • le document demandé existe ? -
      • -
    • le client est autorisé à accéder au document ? -
      • -
    • …
      • -
    -
    • -
  • Le thread de traitement répond à la requête : -
      -
    • Exécution de code côté serveur, récupération de - données dans une BD, … -
      • -
    • Envoi de la page au client -
      • -
    -
    • +

    Marge, bordure, ajustement

    +

    On peut spécifier jusqu'à 4 valeurs:

    +
    • 1 valeur: toutes les dimensions égales à cette + valeur
      • +
    • 2 valeurs: haut et bas égal à la première valeur, gauche + et droite égale à la deuxième
      • +
    • 3 valeurs: haut à la première valeur, gauche + et droite égale à la deuxième, bas égal à la troisième
      • +
    • 4 valeurs: haut, droit, bas, gauche
    -
- -
-

Plan

-
    -
  1. Systèmes d'exploitation
    2. -
  2. Réseaux et Internet
    3. -
  3. Le Web -
      -
    • 3.1 Internet et ses services
      • -
    • 3.2 Fonctionnement du Web
      • -
    • 3.3 Adressage des documents Web
      • -
    • 3.4 Le protocole HTTP
      • -
    • 3.5 HTML, le format des documents
      • -
    -
    4. -
+ span { + padding:10pt 20pt 5pt 0pt; + margin:10pt 5pt; + border-width:3pt; + border-color:red blue green; + border-style:solid dotted; + } +
Du texte dans une boite +
-

Adressage des documents Web (1/3)

+

Modes d'affichage

+

La propriété display contrôle le mode + d'affichage d'un élément: +

- + + + + +
URL Uniform Resource Locator - identifie un document sur internet
nonel'élément n'est pas dessiné et n'occupe + pas d'espace
inlinel'élément est placé sur la ligne + courante, dans le flot de texte. La taille du contenu (avec + les marges, ajustements et bordures) dicte la + taille de la boîte, height et width sont + ignorés (, , , , …]]> + sont inline par défaut).
blockl'élément est placé seul sur sa + ligne. La taille est calculée automatiquement mais peut être + modifiée par width et height + (,

,

, …]]> + sont block par défaut)

inline-blockpositionné comme inline + mais la taille peut être modifiée comme pour block
-

Une URL se décompose en 3 partie

-
  • protocole (comment ?)
    • -
  • adresse (où ?)
    • -
  • document (quoi ?)
    • -
-

Syntaxe (simplifiée) :

- protocole://adresse/document -

Exemple :

- http://www.lri.fr/~kn/teach_fr.html
-
-

Adressage des documents Web (2/3)

-

On peut aussi préciser un numéro - de port, des paramètres - et un emplacement : -

- protocole://adresse:port/document?p1=v1&p2=v2#empl -

Exemple :

- http://www.youtube.com:80/results?search_query=tbbt#search-results -

Le serveur utilise les paramètres passés par le client dans - l'URL pour calculer le contenu de la page (changer la - chaîne « tbbt » ci-dessus et essayer)

+

Modes d'affichage (exemples)

+
+
+ a { display: inline; … } +
+
+ Le lien 1, + le lien 2 et + le lien 3. +
+
+
+
+ a { display: block; … } +
+
+ Le lien 1, + le lien 2 et + le lien 3. +
+
+
+
+ a { display: inline-block; + width: 4em; + height: 2em; + … } +
+
+ Le lien 1, + le lien 2 et + le lien 3. +
+
-

Adressage des documents Web (3/3)

-

- La racine d'un site Web - (ex: http://www.lri.fr/) correspond - à un répertoire sur le disque du serveur - (ex: /var/www). Le fichier

- http://www.lri.fr/index.html -

se trouve à l'emplacement

- /var/www/index.html -

Le serveur Web peut aussi effectuer des réécritures - d'adresses :

- http://www.lri.fr/~kn/index.html -

devient

- /home/kn/public_html/index.html -
-
-

Plan

-
    -
  1. Systèmes d'exploitation
    2. -
  2. Réseaux et Internet
    3. -
  3. Le Web -
      -
    • 3.1 Internet et ses services
      • -
    • 3.2 Fonctionnement du Web
      • -
    • 3.3 Adressage des documents Web
      • -
    • 3.4 Le protocole HTTP
      • -
    • 3.5 HTML, le format des documents
      • -
    -
    4. -
+

Positionnement

+

Le type de positionnement est donné par la + propriété position

+ + + + + +
staticpositionnement « automatique + »
fixedpositionnement par rapport à la fenêtre + du navigateur (la boîte est supprimée du flot)
relativepositionnement « relatif » par + rapport à la position normale
absolutepositionnement « absolu » par rapport + à l'ancêtre le plus proche qui n'est pas static
+

Pour fixed, relative et absolute, + les propriétés top, bottom, left + et right dénotent les décalages respectifs. +

-

Caractéristiques du protocole HTTP

-
    -
  • Sans connexion permanente: -
      -
    • Le client se connecte au serveur, envoie sa requête, - se déconnecte
      • -
    • Le serveur se connecte au client, envoie sa réponse, - se déconnecte
      • -
    -
    • -
  • Indépendant du contenu : permet d'envoyer des documents - (hyper) texte, du son, des images, …
    • -
  • Sans état: chaque paire requête/réponse est - indépendante (le serveur ne maintient pas d'information sur le - client entre les requêtes)
    • -
  • Protocole en mode texte
    • +

    Positionnement (exemple)

    +
    +
    + a { position: static; + … } + a { position: fixed; + right:10pt; + top: 10pt; + }
    +
    + a { position: relative; + left: 10pt; + bottom: -5pt; + … } + a { position:absolute; + right:0pt; + bottom: 10pt; + } +
  • …
    • …
]]> +

+
    +
  • Positionnement static
    • +
  • Positionnement fixed + (right:10pt,top:10pt)
    • +
  • Positionnement relative + (left:10pt,bottom:-5pt)
    • +
  • Positionnement absolute + (right:10pt,bottom:10pt)
    • +
+

Autres propriétés

-

Format des messages HTTP

-

Les messages ont la forme suivante

-
  • Ligne initiale CR LF
    • -
  • zéro ou plusieurs lignes d'option CR LF
    • -
  • CR LF
    • -
  • Corp du message (document envoyé, paramètres de la - requête, …)
    • -
-
  • Requête la première ligne contient un nom - de méthode (GET, POST, HEAD, …), le paramètre de la - méthode et la version du protocole
    • -
  • Réponse la version du protocole, le code de la - réponse (200, 404, 403, …) et un message informatif -
    • +

    Couleurs

    +

    Les couleurs peuvent être données:

    +
      +
    • par nom + symbolique: red, + blue, + purple, + …
      • +
    • en + hexadécimal: #xxyyzz, avec + 00 ≤ xx,yy,zz ≤ ff
      • +
    • en + décimal: rgb(x, y, z), + avec 0 ≤ x,y,z ≤ 255
      • +
    • en + décimal avec + transparence: rgba(x, y, z, + a), + avec 0 ≤ x,y,z ≤ 255 et 0 ≤ a ≤ 1
      • +
-

Démo

-
-
-

Plan

-
    -
  1. Systèmes d'exploitation
    2. -
  2. Réseaux et Internet
    3. -
  3. Le Web -
      -
    • 3.1 Internet et ses services
      • -
    • 3.2 Fonctionnement du Web
      • -
    • 3.3 Adressage des documents Web
      • -
    • 3.4 Le protocole HTTP
      • -
    • 3.5 HTML, le format des documents
      • -
    -
    4. -
-
-
-

HTML

-

- HyperText Markup Language : langage de mise en forme - de documents hypertextes (texte + liens vers d'autres - documents). Développé au CERN en 1989.
- 1991 : premier navigateur en mode texte
- 1993 : premier navigateur graphique (mosaic) - développé au NCSA (National Center for Supercomputing - Applications) -

+

Propriétés du texte

+

Certaines propriétés permettent d'alterer le rendu du texte + d'un élément

+ + + + + + +
directionltr ou rtl + (orientation du texte)
text-transform capitalize, uppercase, lowercase +
text-decoration underline, overline, line-through
text-align left, right, center, justify
text-indent longueur du retrait de paragraphe
-

Document HTML

-
  • est un document semi-structuré
    • -
  • dont la structure est donnée par - des balises
    • -
-
- - - - - - - -
Exemple Rendu par défaut
en gras ]]>Un - texte en gras
Un lien ]]>Un lien
-
  • Premièrement
    • -
  • Deuxièmement
    • - ]]>
      -
    • Premièrement
      • -
    • Deuxièmement
      • -
    +

    Propriétés de la police

    + + + + +
    font-familyliste de nom de polices séparées + par des virgules (Helvetica, sans, "Times New Roman")
    font-style normal, italic
    font-weight normal, lighter, bold, bolder
    font-size soit une longueur + soit xx-small, x-small, small, medium, + large, x-large, xx-large
    - -

    On dit que ]]> est une balise - ouvrante et ]]> une - balise fermante. On peut - écrire ]]> comme raccourci pour - ]]>. -

    - -
    -

    Historique du langage HTML

    - - - - - - - - -
    1973 GML, Generalised Markup Language développé chez -IBM. Introduction de la notion de balise.
    1980 SGML, Standardised GML, adopté par l'ISO
    1989 HTML, basé sur SGML. Plusieurs entreprises (microsoft, -netscape, ... ) interprètent le standard de manière -différente
    1996 XML, eXtensible Markup Language norme pour les -documents semi-structurés (SGML simplifié)
    2000 XHTML, version de HTML suivant les conventions - XML
    2008 Première proposition pour le nouveau standard, - HTML5
    2014Standardisation de HTML5
    +

    On peut aussi spécifier un descripteur de + police

    + + @font-face { + font-family: Toto; + src: url(toto.ttf); + } + a { font-family: Toto; } +
    - +

    Selecteurs

    -

    XHTML vs HTML

    -

    On utilise XHTML dans le cours. Différences avec HTML:

    -
      -
    • - Les balises sont bien parenthésées - ( ]]> </b> est interdit) -
      • -
    • Les balises sont en minuscules
      • -
    -

    Les avantages sont les suivants

    -
    • HTML autorise les mélanges majuscule/minuscule, de ne - pas fermer certaines balise … Les navigateurs corrigent ces - erreurs de manières différentes
      • -
    • Le document est structuré comme un programme - informatique (les balises ouvrantes/fermantes correspondent à - { et }). Plus simple à débugger.
      • -
    +

    Selecteurs

    +

    On peut sélectionner finement les éléments auxquels un style + s'applique

    + + + + + + + + + +
    xtous les éléments dont la balise + est x
    .foo tous les éléments dont + l'attribut class vaut foo
    #fool'élément dont l'attribut + id vaut foo (les id doivent être uniques)
    X Y tous les éléments + selectionnés par Y qui sont des descendants d'éléments + sélectionnés par X
    X > Y tous les éléments dont + selectionné par Y qui sont des fils d'éléments + sélectionnés par X
    a:visitedles liens déjà + visités
    a:linkles liens non + visités
    X:hoverélément selectionné + par X et survollé par la souris
    + div.foo ul li a:visited { color: red; }
    -
    -

    Rôle d'(X)HTML

    -

    Séparer la structure du document de - son rendu. La structure donne une sémantique au - document :

    -
      -
    • ceci est un titre
      • -
    • ceci est un paragraphe
      • -
    • ceci est un ensemble de caractères importants
      • -
    -

    Cela permet au navigateur d'assurer un rendu en fonction de la - sémantique. Il existe différents types de rendus:

    -
      -
    • graphique interactif (Chrome, Firefox, Internet Explorer, - …)
      • -
    • texte interactif (Lynx, navigateur en mode texte)
      • -
    • graphique statique (par ex: sur livre électronique)
      • -
    • rendu sur papier
      • -
    • graphique pour petit écran (terminal mobile)
      • -
    -
    -
    -

    Exemple de document

    -

    (liste des balises - données sur la feuille de TD 4!)

    -
    - - - - Un titre - - - -

    Titre de section

    -

    premier paragraphe de texte. On met - un lien ici. -

    - - ]]>     -
    -
    - diff --git a/simpleWebSlides.css b/simpleWebSlides.css index a42c85e..794eed4 100644 --- a/simpleWebSlides.css +++ b/simpleWebSlides.css @@ -164,6 +164,19 @@ body > h1, body > h2, body > h3 { p { width: 100%; } +/* counters for the toc */ + +.sws-toc ul { + counter-reset: list-item; +} + +.sws-toc li { + counter-increment: list-item; + +} +.sws-toc li::marker { + content : counters(list-item, '.'); +} /* Control Panel */ diff --git a/simpleWebSlides.js b/simpleWebSlides.js index cd19624..f42811d 100644 --- a/simpleWebSlides.js +++ b/simpleWebSlides.js @@ -293,8 +293,9 @@ SWS.Presentation = new function () { if (_initialized) return; //jQuery does not seem to work well //on a partial DOM - - var slide_num = $(".sws-slide").length - 1; + var slides = $(".sws-slide"); + var h1s = $("body").children("h1"); + var slide_num = slides.add(h1s).length - 1; SWS.Utils.push2(_slide_callbacks, slide_num,{ 'fn': f, 'frame': i }); @@ -490,6 +491,53 @@ SWS.Presentation = new function () { } + self.buildFullTOC = function () { + + var build_sections = function (doc) { + var res = []; + var h1s = doc.find("body").first().children("h1"); + var slides = doc.find("body").first().children(".sws-slide"); + var slide_num = 1; + var collection = h1s.add(slides); + collection.each (function () { + if ($(this).is("h1")) { + res.push({ 'title' : $(this).text(), + 'slide' : slide_num }); + } else { + slide_num++; + } + }); + return res; + }; + + var toc = []; + + var append = function (a,e) { + return a.push(e); + }; + var prepend = function (a,e) { + return a.unshift(e); + }; + + var loop = function (doc, dir, add, ignoreFirst) { + if (ignoreFirst !== true) { + var this_toc = { 'title' : doc.find("title").first().text(), + 'sections' : build_sections(doc) }; + add(toc, this_toc); + }; + var url = doc.find(dir).first().attr("href"); + if (!SWS.Utils.isUndefined(url) && url != "") { + $.ajax({ 'url' : url, 'async' : false ,'success' : function (page) { + loop ($(page), dir, add, false); + }}); + }; + }; + loop ($(document), ".sws-previous", prepend, false); + return toc; + + }; + + var _xstart = 0; self.inputHandler = function (event) { @@ -706,11 +754,38 @@ SWS.Presentation = new function () { $("html").addClass("sws-display"); //$(window).resize(self.redraw); + var slides = $(".sws-slide"); + var h1s = $("body").children("h1"); + var slide_num = slides.add(h1s).length - 1; - - _total_slides = $(".sws-slide").length; + _total_slides = $(".sws-slide").add($("body").children("h1")).length; var cur = self.getCurrentSlide(); + var toc = self.buildFullTOC(); + var common_html = "

    Plan

      "; + var i; + for (i= 0; i < toc.length - 1; i++) + common_html += "
    • " + (i+1) + + ' ' + toc[i].title + "
      • "; + + common_html += "
    • " + toc.length + ' ' + toc[toc.length - 1].title; + common_html += "
        "; + var sections = toc[toc.length - 1].sections; + $("body").children("h1").each(function (i) { + var this_html = common_html; + var j; + var secnum = toc.length + '.'; + for (j = 0; j < i; ++j) + this_html += "
      • " + secnum + (j+1) + ' ' + + sections[j].title + "
        • "; + this_html += "
      • " + secnum + (i+1) + ' ' + + sections[i].title + "
        • "; + for (j = i+1; j < sections.length; j++) + this_html += "
      • " + secnum + (j+1) + ' ' + +sections[j].title + "
        • "; + this_html += "
    "; + $(this).after(this_html); + }); $(".sws-slide").each(function (i) { @@ -786,6 +861,8 @@ SWS.Presentation = new function () { _slide_callbacks = null; /* avoid a leak */ var passed_theme = SWS.Utils.getParameterByName("theme"); + + //workaround weird chrome CSS loading bug var f = function () { diff --git a/themes/uPsud.css b/themes/uPsud.css index df9f424..eb41dbb 100644 --- a/themes/uPsud.css +++ b/themes/uPsud.css @@ -23,6 +23,8 @@ h1 { background: white; padding: 0 0 0 0; margin: 0 0 0 0; + /* allows the canvas to cover the logo needed */ + z-index:2; } .sws-footer { @@ -37,10 +39,12 @@ h1 { display:block; width:10vh; height:10vh; + color:red; content:""; background-size: 10vh; background-image: url("upsud.png"); background-repeat: no-repeat; + z-index: -1; } .sws-slide-num-sep:after { @@ -76,6 +80,8 @@ p { text-align:justify; } + + code, pre, tt { font-family: 'Inconsolata', monospace; color: #494948; @@ -131,15 +137,14 @@ table.desc { } table.desc tr { + margin: 0 0 0 0; + padding: 0 0 0 0; + } table.desc td { vertical-align: top; text-align: justify; - padding-bottom: 3vh; -} - -table.desc tr:last-child td { - padding-bottom:0; + margin: 0 0 0 0; } table.desc td:first-child { @@ -218,4 +223,13 @@ table.simple th{ table.simple th, table.simple tr { vertical-align:top; +} +.css3:after { + content:"CSS3"; + color:white; + background: #0a64a4; + border-radius:0.25em; + font-size:small; + margin: 0.25em; + padding:0.1em; } \ No newline at end of file -- 2.17.1