Fondamentaux de l'Internet (FDI)

Présentation au sujet: "Fondamentaux de l'Internet (FDI)"— Transcription de la présentation:

1 Fondamentaux de l'Internet (FDI)
JeanDo Lénard

2 Linux (utilisation) Les commandes de la fois précédente :
ls : liste des fichiers et répertoires (ls –l détails) cd : changer de répertoire chmod : changer les droits sur un fichier grep : pour trouver une chaîne dans des fichiers cut : pour couper un résultat suivant un motif echo : pour afficher un texte ou une variable sort : pour trier man : pour l'aide sur les commandes redirections, pipes

3 Les scripts Lorsqu'un enchaînement de commandes devient complexe et répétitif, on écrit des scripts. Les scripts sont des fichiers texte exécutables qui permet d'exécuter un ensemble de commandes sans intervention. Un fichier de script est écrit dans un langage particulier au choix de l'utilisateur : - en bash (shell) - en perl, en python, en php, en ruby, etc…

4 Les scripts La première ligne d'un fichier de script indique quel est le langage du script : - #!/bin/bash - #!/bin/perl La suite du fichier est simplement l'enchaînement des commandes. Un script peut prendre des arguments. Les arguments passés en paramètre sont utilisables dans le script sous les noms : - $0 est la commande lancée, - $1 pour le premier paramètre, - $2 pour le second, etc…

5 Commandes simples pour le scripting
for : commande de boucle for i in (ou tout autre type de liste –fichiers par exemple) do operation done if : commande de test simple if [ -f $1 ] (le fichier $1 existe et est un fichier régulier, cf man bash) then cat $1 else echo $1 non existant fi

6 Exo 1 : Faire un script en bash qui affiche "coucou" à l'écran $sh ./exo1 coucou

7 Exo 2 : Faire un script qui prend en argument deux noms de fichier, qui affiche "x sera copié dans y" (ou x est le nom du premier fichier et y le nom du second) et effectue la copie de x dans y (x et y étant variable, bien évidement) $sh ./exo fichier1 fichier2 fichier1 sera copié dans fichier2

8 Exo 3 : Faire un script qui prend en argument un nom de fichier, affiche "x sera sauvegardé en x_save", et effectue la copie de x dans un fichier nommé x suivi de _save

9 Exo 4 : Construire un script qui prend en argument le nom d'un dossier (qu'on appelle $SOURCES_DIR). Il crée un dossier (qu'on appelle $DEST_DIR) qui se nomme $SOURCES_DIR concaténé à .save dans un endroit donné par le deuxième argument de la commande. Il copie l'intégralité du dossier $SOURCES_DIR dans $DEST_DIR, en ajoutant '.save' à la fin de chacun des fichiers ainsi copiés. Le script doit annoncer chacune de ces actions par une phrase à l'écran (uniquement de l'affichage)

10 Exo 5 : Faire un script qui va créer une page html contenant des liens vers les fichiers d'un répertoire donné. Une page d'index en quelque sorte. Cahier des charges : le script doit prendre en paramètre le nom du dossier à traiter. Il doit créer dans ce dossier un fichier "index.html" Ce fichier "index.html" doit avoir une syntaxe html valide. Le corps de page doit entre autres contenir des liens vers les fichiers contenus dans le répertoire à raison de un lien par ligne. enfin, à la fin de son exécution, le script doit signaler qu'il a créé un fichier index.html dans le répertoire en question.

11 Exo 6 : convert, Créer des miniatures de tout un tas d'image contenues dans un dossier. Pour cela, le script récupère le nom du dossier à analyser, crée un répertoire "miniatures", et crée des miniatures de 150 pixel de large à partir de tous les *.jpg contenus dans le dossier. Ces imagettes seront stockées dans "miniatures" et auront leur nom précédé de 'mini_"

12 Exo 7 : On reprend un peu de tout ce qu'on a fait avant. Le but est ici de créer une page html qui contient un série de liens pointant vers des images grand format sous forme d'imagettes de 150 px de large. Comme dans l'exercice précédent, il faut créé le dossier "miniatures" contenant les modèles réduits, mais aussi la page index.html (qui doit être valide html) contenant les liens.

13 Exo 1 : #!/bin/bash echo "coucou"

14 Exo 2 : #!/bin/bash echo "$1 sera copie dans $2" cp -- $1 $2

15 Exo 3 : #!/bin/bash DEST=${1}_save echo "$1 sera sauvegardé dans $DEST" cp $1 $DEST

16 Exo 4 : CODE #!/bin/bash #script faisant une copie de sauvegarde d'un repertoire passé en argument. #le script doit rajouter ".save." à la fin de chaque fichier copié #les répertoires SOUR_DIR=$1 DEST_DIR=$2/${SOUR_DIR}.save #création du rep de destination mkdir $DEST_DIR #liste des fichiers à copier FILE_LIST=$(ls $SOUR_DIR) #corps de script for i in $FILE_LIST do cp ${SOUR_DIR}/$i ${DEST_DIR}/${i}.save echo "$i copié" done echo "" echo "fin de la copie"

17 Exo 5 : #!/bin/bash # script créant un index.html contenant des liens vers tous les fichiers d'un répertoire passé en argument #repertoire SOUR_DIR=$1 DEST_DIR=$2 # liste fichiers FILE_LIST=$(ls $SOUR_DIR) #fichier de sortie index.html OUT_FILE=${DEST_DIR}/index.html #entete HTML echo "<HTML>" > $OUT_FILE echo "<HEAD>" >> $OUT_FILE echo "<TITLE>index de $SOUR_DIR</TITLE>" >> $OUT_FILE echo "</HEAD>" >> $OUT_FILE echo "<BODY>" >> $OUT_FILE #corps du travail for i in $FILE_LIST do echo "ajout de $i" echo "<A href=\"$SOUR_DIR/$i\">$i</A><BR />" >> $OUT_FILE done #footer echo "</BODY>" >> $OUT_FILE echo "</HTML>" >> $OUT_FILE echo "index.html fini"

18 Exo 6 : #!/bin/bash # cet exo crée un répertoire contenant des miniature des images jpeg d'un répertoire passé en argument #les répertoires SOUR_DIR=$1 DEST_DIR=$2 #création du répertoire mkdir $DEST_DIR #liste des images cd $SOUR_DIR FILE_LIST=$(ls *.jpg) #corps du script for i in $FILE_LIST do echo "traitement de $i" convert ${SOUR_DIR}/$i -geometry 150 ${DEST_DIR}/mini_$i echo "$i traitée" echo "" done #fin echo "traitement terminé"

19 Exo 7 : #!/bin/bash #script créant une page index.html contenant les imagettes (avec les liens) de toutes les images # d'un dossier passé en argument #répertoire SOUR_DIR=$1 DEST_DIR=$2 # index.html OUT_FILE=$DEST_DIR"/index.html" #creation du rep des imagettes mkdir $DEST_DIR #liste des images à traiter cd $SOUR_DIR FILE_LIST=$(ls *.jpg) cd $DEST_DIR #header echo "<HTML>" > $OUT_FILE echo "<HEAD>" >> $OUT_FILE echo "<TITLE>index de $SOUR_DIR</TITLE>" >> $OUT_FILE echo "</HEAD>" >> $OUT_FILE echo "<BODY>" >> $OUT_FILE

20 Exo 7 (suite) : #corps for i in $FILE_LIST do MINI=mini_$i echo "# traitement de $i" convert $SOUR_DIR/$i -geometry 150 ${DEST_DIR}/$MINI echo "# traitée" echo "# ajout de $i" echo "<a href=\"$SOUR_DIR/$i\"><img src=\"${DEST_DIR}/$MINI\" /></a><br />" >> $OUT_FILE echo "# ajouté" echo "" done #footer echo "</BODY>" >> $OUT_FILE echo "</HTML>" >> $OUT_FILE #fin cd .. echo "index.html fini"

21 Les navigateurs (histoire)
Le navigateur, c'est l'interface entre Internet et l'utilisateur. Cette interface est de type hypertexte actuellement, ça n'a pas toujours été le cas. L'hypertexte réseau, comme on le connaît aujourd'hui sur Internet, a été proposé par Tim Berners-Lee (avec peu de succès). Le premier navigateur hypertexte a également été proposé par Tim Berners-Lee. Il s'appelait WWW. Le premier navigateur hypertexte graphique a été Mosaic (1991), dont la popularité a fait du www le moyen d'accès privilégié au Net. Mosaic a été supplanté par Netscape Navigator en Supplanté à son tour par Internet Explorer. "Grignoté" par Mozilla Firefox.

22 Les navigateurs (aujourd'hui)
Il existe une foule de navigateurs. On en cite généralement assez peu (% de marché en Août 2006) : - Internet Explorer % - Mozilla Firefox & Gecko % - Opera % - Netscape % Il en existe de nombreux autres : MSN Explorer, Tiscali, NetCaptor, Crazy Browser, Avant Browser, Avant-Browser, MyIE, Neoplanet, AOL Explorer, Fast Stone 4in1 browser, Netscape Navigator 5 et plus, BrowserG!, Epiphany, Kiosk, vBrowse (vocal), wmlbrowser Magellic, Mercury Spider, K-Meleon, Galeon, Skipstone, Ghostzilla, IBM Web Browser, Compuserve, AOL OS X, wKiosk, wKid, wDesk, Camino, Mozilla Firefox, Konqueror, Safari, Omniweb 4.5, Amaya, Dillo, Links-Graphic MiniWeb, Belle Nuit HTML Book, HTTrack, Lynx, Links, W3M, etc………..

23 Les navigateurs Un navigateur est un interpréteur :
- Il charge la page demandée, - Il l'affiche, - Il offre des fonctions plus ou moins conviviales pour son utilisation. Les deux points importants du navigateur sont donc : - Son moteur de rendu des pages, - Sa conformité aux standards.

24 Les navigateurs Comment un navigateur affiche-t'il les pages ?
1 - Le navigateur va chercher les informations sur le réseau dans un thread séparé de celui de l'affichage 2 – Lorsque les informations arrivent, elles sont transmises à un Tokeniser qui repèrent ce qui est attribute, valeur, tag de début, etc… 3 – Le Tokeniser envoie ces informations à un parser HTML 4 – Le parser HTML crée l'arborescence des objets du document : feuilles de style, scripts, images, texte, etc… 5 – L'arbre de rendu est alors crée pour affichage. 6 – La page est affichée.

25 Les navigateurs Ce modèle ne fonctionne pas correctement car il est trop lent. Par exemple, cnn.com se charge à 99% en 350ms, mais un script a besoin d'aller chercher une publicité qui prend 2-3s à récupérer ! Donc dans notre modèle, la page s'affichera au bout de 2-3 secondes (trop long!) Les premières tentatives d'amélioration permettait au navigateur d'afficher au fur et à mesure. Mais alors les changements (d'arrière plan par exemple) faisaient flasher la page. Les navigateurs actuels (Firefox/Camino) ont un temps d'attente d'affichage (250ms) pour commencer à afficher, puis affiche tout ce qu'ils peuvent (flash possible si la feuille de style n'était pas chargée). On ralentit donc exprès l'affichage, mais l'impression est qu'il est rapide ! Dans Safari, le système a été encore sophistiqué pour éliminer le risque de flash.

26 Les navigateurs et les standards
Pourquoi un navigateur (et des pages web) devrait-il respecter les standards ? Les standards du Web sont définis par les W3C (World Wide Web Consortium).

27 Les navigateurs et les standards
Pourquoi un navigateur (et des pages web) devrait-il respecter les standards ? Pour s'assurer que les pages s'afficheront comme l'a prévu le concepteur. Durant la gueguerre Netscape/IE, il était quasiment impossible d'avoir un rendu des pages identiques et cohérent. D'où le "Ce site a été optimisé pour IE (ou pour Netscape)". Il est (était) souvent plus long de bidouiller les pages pour qu'elles s'affichent correctement que de les créer ! (cf. Test Acid2)

28 Les navigateurs et les standards
Microsoft a fait un gros effort pour "tuer" Netscape en l'incluant dans Windows. Puis il a arrété le développement de son navigateur. IE6 est aujourdh'ui un dinosaure avec une carapace pleine de trous !!! Lorsque l'on peut, IE6 est à proscrire. Ce qui n'empêche pas qu'il faut bien développer pour lui. A mon avis, le plus efficace est sans doute Opera9 mais il est commercial, Firefox et Safari restent donc les meilleurs choix (Konqueror sous Linux peut-être)