MODULE INF112. Préparation pour le CC2

(1)

1

MODULE INF112

TD 8 2007 – 2008

2007-2008 INF112 - TD8

2

Préparation pour le CC2

• Choisir un thème scientifique (exposé déjà fait?)

• Faire des recherches sur le Web si nécessaire

• Choisir une organisation du site – Plan des pages Liens

entre elles

Page d'accueil

page1 page2 page3

(2)

3

Préparation du CC2

• Respecter les consignes !!!!

– Nom des fichiers

– Organisation des répertoires

2007-2008 INF112 - TD8

4

Des extensions correctes :

Les noms des fichiers sont composés de deux parties : nnnn.xxxx Où nnnnn représente son nom qui ne doit pas contenir d’espace blanc, ni de caractères accentués ou de ponctuation autre que le point qui le sépare de xxxx, l’extension.

Formes correctes : .html .htm .jpg .gif ....

Pas d'accents ou d'espace blancs dans les noms de fichier.

Remarques pratiques importantes

sur les noms de fichiers

(3)

5

Exemples incorrects :

MonFichier.html.html Mon Fichier.html étoilées.jpg Exemples corrects : MonFichier.html Mon_Fichier.html Des chemins d'accès relatifs pour les URL apparaissant dans les pages web (balises A, IMG, LINK, ...).

Nom du fichier de la page d'accueil : index.php

Remarques pratiques importantes sur les noms de fichiers (suite)

2007-2008 INF112 - TD8

6

Thème relié aux sciences

Recommandations minimales (on peut faire plus …) :

• 1 page accueil+ 3 autres pages.

Le site doit mettre en œuvre tout ce qui a été vu, c'est à dire :

• Les liens : des liens internes, des liens (externes) d'une page à l'autre, des liens vers des sites externes.

• Des images: images simples (photos, schémas ...), images cliquables (boutons, agrandissements, ...), image à zone sensible (MAP).

NB : les liens et les images doivent fonctionner après transfert sur le serveur ! Cf remarques pratiques sur les noms de fichiers,

ainsi que sur l’utilisation de chemins d’accès relatifs (fin TD8).

Cahier des charges du site

(4)

7

• Une table, éventuellement pour la mise en page d'une image, par exemple.

• Une liste, avec numérotation ou avec puces.

• Un formulaireavec plusieurs objets de saisie (boutons, zones textes, ...) et donnant un score correct.

• Une certaine cohérence dans la présentation des pages (couleurs, police, taille des caractères) sera obtenu par l’utilisation d’une feuille de style externe (fichier .css).

• Toutes les sourcesutilisées devront être citées(livres, sites web, ...).

•L'adresse électroniqueet les CVdes auteurs.

Cahier des charges du site (suite)

2007-2008 INF112 - TD8

8

Plan

• Les cookies

• Les chemins d’accès

• Les liens internes, mail

• Les tableaux

• Les images

– Format d’un image

– Insertion d’image dans une page web

– Image à zone cliquable multiples (MAP)

(5)

9

Les cookies

2007-2008 INF112 - TD8

10

COOKIE

Permet de "déposer" de l'information chez l'utilisateur et de

"relire" cette information :

témoin de connexion, mouchard, espion)

• Exemple

• Panier d'achat

• Magazines en-ligne (mémorisation des articles déjà lus)

• Inconvénients potentiels

• Un site peut retrouver les informations produites par d'autres sites;

• Réutilisation possible de la carte de crédit d'un utilisateur (si plusieurs utilisateurs emploient la même machine)

• Motivation

• Chaque requête de page web est indépendante des autres requêtes

• Pas de mécanisme permettant de contrôler l'ordre de navigation dans les pages d'un site.

(6)

11

Page HTML

</SCRIPT>

Client http Client

http

Dépôt de cookie

Client http Client http Serveur

http Serveur

http

Requête HTTP

Page HTML

1^èreméthode : le serveur web envoie une instruction de création de cookie à votre navigateur.

2ème méthode: les instructions de création de cookie (écrites dans un langage de programmation) sont encapsulées dans une page HTML.

Serveur http Serveur

http

Requête HTTP

2007-2008 INF112 - TD8

12

Stockage et contenu d'un cookie

Exemple de moteur de recherche :

création d’un cookie à l’inititative de Google (nom du domaine : google.com)

PREFID=b1d01d3ec1553ac3:CR=1:TM=1103806235:LM=1121943020:S=gxoZsAVfXXEx5HK google.com/1536261887833632111634206667752029724130*

Chaîne de caractères (NOM = VALEUR) ID = votre numéro d’identification TM = date et heure de création du cookie LM = date et heure des dernières modifications S = afin d’assurer l’intérité des informations Exemple de site commercial :

création d’un cookie à l’inititative de Amazon (nom du domaine : amazon.fr)

session-id-time1103756400amazon.fr/153641380966402968178551858827229680543*session- id402-8231662-3092936amazon.fr/153641380966402968178551898827229680543*ubid-tacbfr432- 9999843-1841217amazon.fr/153610388885763196119452108827229680543*

Exemple de site académique :

création d’un cookie à l’inititative de l’université de Stanford(nom du domaine : stanford.edu)

SUNetCookieBrowserTRUEstanford.edu/153626613596163218157956537628829622347*

… des messages à décrypter !!

(7)

13

Stockage et contenu d'un cookie

• Le stockage des cookies dépend du client HTTP

– IE : chaque cookie dans un fichier différent.

– Firefox : tous ses cookies dans un seul fichier.

– Opera : tous ses cookies dans un seul fichier et le crypte (Impossible de les modifier).

2007-2008 INF112 - TD8

14

Consultation de cookie

Poste serveur Poste client

Client http Client

http

Serveur http Serveur

http Statistique Page HTML particulière, …

Requête HTTP

(8)

15

Les chemins d’accès

2007-2008 INF112 - TD8

16

Les chemins d’accès

<Ahref="../repertoire/monFichier.html">

< imgsource="repertoire/maPhoto.jpg">

Entre guillemets : un chemindésignant l'emplacement d'un fichier.

monFichier.html, maPhoto.jpg : noms de fichiers.

Les noms des fichiers doivent être transmis sans modificationpar des ordinateurs utilisant des systèmes et des langues très variés.

Conseil : n'utiliser ni lettre accentuée ou particulière au français, ni espace, ni barre oblique ou inverse dans un nom de fichier ou de dossier pour site Web.

repertoire/ , ../ sont des noms de dossiers (ou répertoire).

../ désigne le répertoire père du répertoire courant.

(9)

17

Arborescence d'un disque dur

Répertoire Fichier.htm Image.jpg

Home.html

PageToto1.html PageFifi1.html

PageFifi2.html PageFifi3.html

PageToto2.html PageToto3.html Z:\

PagesWeb

MonSite

toto fifi

Poste de travail (votre PC)

CHEMIN ABSOLU:

Z:/PagesWeb/MonSite/home.html Z:/PagesWeb/MonSite/fifi/PageFifi3.html

2007-2008 INF112 - TD8

18

Arborescence d'un disque dur (2)

Poste de travail (votre PC)

Répertoire Fichier.htm Image.jpg

Home.html

PageToto1.html PageFifi1.html

PageFifi2.html PageFifi3.html

PageToto2.html PageToto3.html Z:\

PagesWeb

MonSite

toto fifi

CHEMIN RELATIF(à partir de MonSite) : home.html

fifi/PageFifi3.html

(10)

19

Exercice 8-1A

Voici un extrait des fichiers et répertoires présents sur le disque dur d'un ordinateur :

Z:\

HomeSurSarado

index.html

photo.jpg MonSite

images Page1.html

pages

drapeau.gif

répertoire fichier

Page2.html

Quel code, extrait de "index.html", est exact et quel sera son effet ?

<A HREF="../pages/Page1.html"> Vers la page 1 </A>

<A HREF="../../pages/Page1.html">Vers la page 1 </A>

<A HREF="pages/Page1.html"> Vers la page 1 </A>

<A HREF="../Page1.html"> Vers la page 1 </A>

2007-2008 INF112 - TD8

20

Exercice 8-1B

Z:\

HomeSurSarado

index.html

photo.jpg MonSite

images Page1.html

pages

drapeau.gif

répertoire fichier

Page2.html

Quel code, extrait de "Page1.html", est exact et quel sera son effet ?

<A HREF="../pages/index.html"> Accueil </A>

<A HREF="../../pages/index.html"> Accueil </A>

<A HREF="pages/index.html"> Accueil </A>

<A HREF="../index.html"> Accueil </A>

(11)

21

Exercice 8-1C

Z:\

HomeSurSarado

index.html

photo.jpg MonSite

images Page1.html

pages

drapeau.gif

répertoire fichier

Page2.html

Quel code, extrait de "Page2.html", est exact ? Quel sera son effet ?

<IMG SRC="images/drapeau.gif">

<IMG SRC="../images/drapeau.gif">

<IMG SRC="../drapeau.gif">

<IMG SRC="../../images/drapeau.gif">

2007-2008 INF112 - TD8

22

Exercice 8-1D

Z:\

HomeSurSarado

index.html

photo.jpg MonSite

images Page1.html

pages

drapeau.gif

répertoire fichier

Page2.html

Sachant que la page web doit être installée sur un serveur web, quel est le meilleur lien pour accéder à la page index.html dans le répertoire MonSite ?

<A HREF="MonSite/index.html"> page accueil </A>

<A HREF = "Z:/HomeSurSarado/MonSite/index.html"> page accueil </A>

(12)

23

Exercice 8-1E

Z:\

HomeSurSarado

index.html

photo.jpg MonSite

images Page1.html

pages

drapeau.gif

répertoire fichier

Page2.html

L'auteur du site veut ajouter un lien sur les mots "Page 2" du fichier

"Page1.html" permettant d'accéder au fichier "Page2.html".

Doit-il ajouter quelque chose dans Page1.html ? Si oui, quoi ? Doit-il ajouter quelque chose dans Page2.html ? Si oui, quoi ?

2007-2008 INF112 - TD8

24

Liens : pour aller plus loin

(13)

25

Les liens (ou pointeurs) :

<A> … </A>

<A HREF="adresse_cible"> texte ou image cliquable </A>

texte du lien ou image cliquable

• L'adresse cible peut être:

• un document distant :

<a href="http://www.ujf-grenoble.fr">

<a href="http://www-valence.ujf-

grenoble.fr/~girod/COURS_INTERNET">

<a href="http://www.grr.ulaval.ca/grrwww/manuel/

manuelhtml.html">

•un document local (sur le même serveur)

<a href="../repertoire/monFichier.html">

2007-2008 INF112 - TD8

26

<a href="#ancre">texte du lien</A>

Auparavant, cette ancre doit avoir été définie au moyen de :

<A NAME="ancre"> </A>

Recherches de toutes sortes : moteurs, annuaires, encyclopédies,...

<a href="#annuaires">Annuaires</a>*

<a href="#moteur">Moteursde Recherche</a> *

<a href="#recherche">Recherches spécialisées</a>*

<a href="#encyclopedie">Encyclopédies</a> *

<a href="#revues">Périodiques scientifiques</a>

<a NAME="annuaires"></a>Annuaires : Annuaire Universitaire : ...

Annuaire de l'Enseignement et de la Recherche (UREC) : ...

Les pages blanches : ...

Les spectacles : ...

<a NAME="moteur"></a>Moteurs de Recherche : Google : ...

AltaVista : ...

Yahoo : ...

<a NAME="recherche"></a>Recherches spécialisées :

Les liens : ancre (ou cible, ou point d'accès)

(14)

27

Une ancre à l'intérieur d'un fichier local …

<a href="../repertoire/monFichier.html#ancre">

… ou distant :

<a href="http://www-valence.ujf-

grenoble.fr/~girod/COURS_INTERNET/chap4/Cours_html.html#He ading4">

<a href="../repertoire/

monFichier.html#ancre">

<a name="#ancre"> <a>

monFichier.html

Les liens : ancre (suite)

2007-2008 INF112 - TD8

28

<A href="mailto:[email protected]"> Envoyer un mail à Toto </A>

Envoyer un mail à Toto

Les liens : adresse électronique

(15)

29

Exercice 8-2A

Z:\

HomeSurSarado

index.html

photo.jpg MonSite

images Page1.html

pages

drapeau.gif

répertoire fichier

Page2.html

glossaire.html

Dans la page index.html, on souhaite mettre un lien permettant aux visiteurs du site d'envoyer un courrier électronique. Pour cela, il faut introduire :

1.Un lien interne 2.Un lien externe 3.Un lien ftp 4.Un lien mailto

2007-2008 INF112 - TD8

30

Exercice 8-2B

Z:\

HomeSurSarado

index.html

photo.jpg MonSite

images Page1.html

pages

drapeau.gif

répertoire fichier

Page2.html

glossaire.html

Laquelle de ces syntaxes est correcte ?

1. <A HREF="[email protected]"> </A>

2. <A HREF="[email protected]"> contacter Toto </A>

3. <A HREF="mailto:[email protected]"> contacter Toto </A>

4. <A MAILTO="[email protected]"> contacter Toto </A>

(16)

31

Exercice 8-2C

Z:\

HomeSurSarado

index.html

photo.jpg MonSite

images Page1.html

pages

drapeau.gif

répertoire fichier

Page2.html

glossaire.html

Dans la page Page2.html, on souhaite faire un lien vers glossaire.html. Pour cela, on insère le code suivant : <a href=" ../../glossaire.html"></a> dans Page2.html. A votre avis, ce code va-t-il nous permettre de réaliser ce que l’on souhaite ?

1. Oui

2. Non, l'URL du site doit commencer par http://

3. Non, il faut insérer ce code dans glossaire.html 4. Non, il faut mettre <a href="../glossaire.html">

5. Non, il faut ajouter du texte entre les balises <a> et </a>

2007-2008 INF112 - TD8

32

Exercice 8-2D

Dans la page Page2.html, on décrit la formation des différents types de massifs montagneux. Pour organiser le texte, on introduit deux parties (une pour décrire la formation des massifs jeunes et une autre pour décrire la formation des massifs anciens). En début de cette même page, une table des matières est proposée. On souhaite permettre aux utilisateurs d’accéder directement à chacune des parties à partir de la table des matières.

Pour faire cela, il faut :

1. introduire une ancre pour chaque nom de la table des matières en début de fichier et introduire un lien externe au niveau de chaque partie

2. introduire une ancre pour chaque nom de la table des matières en début de fichier et introduire un lien interne au niveau de chaque partie

3. introduire une ancre pour chaque partie, et introduire un lien externe pour chaque nom de la table des matières en début de fichier

4. introduire une ancre pour chaque partie, et introduire un lien interne pour chaque nom de la table des matières en début de fichier

5. ce n’est pas possible

(17)

33

Les tableaux en HTML

2007-2008 INF112 - TD8

34

Balises HTML de base d'une table :

<TABLE></TABLE>Création d'un tableau.

<TR></TR> Définition d'une rangée, à utiliser pour chacune des rangées requises, à l'intérieur des deux balises <TABLE></TABLE>.

(« Table Row »)

<TD></TD> Définition d'une cellule de la table, à insérer à l'intérieur des deux balises <TR></TR>. (« Table Data »)

<TABLE>

<TR>

<TD>1</TD><TD>2</TD>

<TD>3</TD><TD>4</TD>

</TR>

<TR>

<TD>5</TD><TD>6</TD>

<TD>7</TD><TD>8</TD>

</TR>

</TABLE>

(18)

35

Attributs de la balise <table>

L’attribut BORDER permet :

1- d'afficher une ligne entourant chaque cellule du tableau 2- définir un encadrement d'épaisseur variable autour du tableau Avec <TABLE BORDER=1>

l'exemple précédent devient :

Avec <TABLE BORDER=10>

l'exemple précédent devient :

2007-2008 INF112 - TD8

36

Attributs de la balise <table>

L’attributCELLSPACINGdétermine l'épaisseur de la bordure entre les cellules.

L’attributCELLPADDING détermine l'espacement entre le texte de chaque cellule et sa bordure.

Avec :

notre exemple devient :

Avec :

notre exemple devient :

(19)

37

Attributs de la balise <table>

L’attribut WIDTH permet de spécifier la largeur totale d'un tableau

Soit enpourcentage de la largeur de la fenêtre. Ainsi, si vous redimensionnez cette fenêtre plus large ou plus étroite, le tableau se recalculera en conséquence.

Soit ennombre de pixels. La largeur du tableau est alors fixe.

Remarque : cet attribut capricieux ne donne pas toujours le résultat prévu…

Exemple avec

Exemple avec

2007-2008 INF112 - TD8

38

Attributs de la balise <table>

L’attribut

BGCOLOR="#RRGGBB"

définit la couleur de fond de la cellule.

RR, GG et BB sont les valeurs hexadécimales des composantes Rouge(RR), Verte(GG) et Bleu(BB).

Remarque : cet attribut s'applique s'applique aussi à <body>, <TR> et

<TD>

Exemple avec :

(20)

39

Attributs des balises <TR> et <TD>

ALIGN permet d'aligner le contenu des cellules :

à gauche ALIGN=LEFT

à droite ALIGN=RIGHT ou au centre ALIGN=CENTER Par défaut : alignement à gauche

(ALIGN=LEFT) Exemple avec :

<TABLE width="200"

border="2">

<TR align="right">

<TD>1</TD>

<TD>2</TD>

<TD>3</TD>

<TD>4</TD>

</TR>

<TR>

<TD

align="center">5</TD>

<TD>6</TD>

<TD>7</TD>

<TD>8</TD>

</TR>

</TABLE>

2007-2008 INF112 - TD8

40

Attributs des balises <TR> et <TD>

VALIGN

permet d'aligner le contenu :

» en haut VALIGN = TOP

» au centre VALIGN = MIDDLE

» au bas VALIGN = BOTTOM

» ou sur la même ligne BASELINE Par défaut : alignement au centre (VALIGN=MIDDLE).

Exemple avec :

<TABLE width="200" height="200"

border="2">

<TR>

<TD valign="top">1</TD>

<TD valign="middle">2</TD>

<TD valign="bottom">3</TD>

<TD baseline>4</TD>

</TR>

<TR>

<TD VALIGN="TOP">5</TD>

<TD VALIGN="MIDDLE">6</TD>

<TD VALIGN="BOTTOM">7</TD>

<TD BASELINE>8</TD>

</TR>

</TABLE>

(21)

41

Attributs de la balise <TD>

COLSPAN donne à une cellule une largeur qui est un multiple des autres colonnes

<TABLE width="200" border="2">

<TR>

<TD colspan="4">1</TD>

</TR>

<TR>

<TD>5</TD><TD>6</TD><TD>7</TD><TD>8</TD>

</TR>

</TABLE>

ROWSPAN donne à une cellule une hauteur qui est un multiple des autres lignes <TABLE width="200" border="2">

<TR>

<TD rowspan="2">1</TD>

<TD>2</TD>

<TD>3</TD>

<TD>4</TD>

</TR>

<TR>

<TD>6</TD><TD>7</TD><TD>8</TD>

</TR>

</TABLE>

2007-2008 INF112 - TD8

42

Table : parcours étudiants

(22)

43

Table : parcours étudiants

<TR><TD COLSPAN=2 ALIGN="CENTER">Déroulement</TD>

<TD COLSPAN=5 ALIGN="CENTER">Modules</TD>

</TR>

<TR><TD VALIGN="MIDDLE" ROWSPAN=2>Année 1</TD>

<TD> Semestre 1</TD>

</TR>

<TR><TD >Semestre 2</TD>

</TR>

<TR><TD VALIGN="MIDDLE" ROWSPAN=2>Année 2</TD>

<TD >Semestre 1</TD>

</TR>

<TR><TD >Semestre 2</TD>

</TR>

<TR><TD >Année 3</TD>

<TD COLSPAN=6 ALIGN="CENTER">Licence biologie</TD>

</TR>

</TABLE>

2007-2008 INF112 - TD8

44

Exercice 8-3 : table

<HTML>

<HEAD>

<TITLE>ABC</TITLE>

</HEAD>

<BODY>

<table BORDER=1 >

<tr>

<td><center>Température</center></td>

<td COLSPAN="2"><center>Saison</center></td>

</tr>

<tr>

<td>Ville</td>

<td>Hiver</td>

<td>Eté</td>

</tr>

<tr>

<td>Montréal</td>

<td>-20</td>

<td>30</td>

</tr>

</table></BODY></HTML>

Représentez la page web qui sera produite par le butineur avec le code html suivant :

(23)

45

Exercice 8-4 : table encore

<HTML>

<HEAD>

<TITLE>ABC</TITLE>

</HEAD>

<BODY>

<TABLE BORDER CELLSPACING=1 CELLPADDING=10>

<TR>

<TD>A</TD>

<TD>B</TD>

<TD>C</TD>

<TD>D</TD>

</TR>

<TR>

<TD>L</TD>

<TD COLSPAN=2 ROWSPAN=2> </TD>

<TD>E</TD>

</TR>

<TR>

<TD>K</TD>

<TD>F</TD>

</TR>

<TR>

<TD>J</TD>

<TD>I</TD>

<TD>H</TD>

<TD>G</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Représentez la page web qui sera produite par le butineur avec le code html suivant :

2007-2008 INF112 - TD8

46

Exercice 8-5 : table

• Ecrivez le code HTML permettant l'affichage suivant :

Compétiti on de Curling

(24)

47

Les images

2007-2008 INF112 - TD8

48

Image numérique

Qu’est ce qu’une image ?

– Forme discrète (quantifiable) d’une représentation d’un phénomène continu.

– Taille d’une image en pixels ≈définition d’une image

Image Informatique :

– Discrétisation →codage informatique – Poids d’une image ≈place prise en mémoire

(25)

49

Image vectorielle

Décomposition en objets graphiques élémentaires

Primitives graphiques basées sur des concepts mathématiques (cercle, rectangle, segment, arc, courbe …)

Stockage : position, caractéristiques (couleur, épaisseur trait, style trait)

avantages :

• indépendance par rapport à la résolution

• écriture fine et lisible

• modification des objets aisée (forme et apparence) Inconvénients :

• Ne permet pas de traiter des formes trop complexes (paysage)

• Pas d’effets spéciaux (flou…)

2007-2008 INF112 - TD8

50

Image bitmap

Tableau de points Pas de notion d’objet

Codage d’une suite de points

Mixage complexe de couleurs fondamentales Résolution : densité de pixels dans l’image

Plus la résolution est élevée, plus l’image a de pixels PPP :pixels par pouce (2,54cm)

DPI :dot per inch

avantages :

• adaptable aux images complexes

• format proche du matériel Inconvénients :

• Taille importante indépendante de l’information de l’image

(26)

51

Image vectorielle ou Image bitmap ?

Vectorielle :

• Schémas

• Cartes

• Domaines de la CAO et DAO (mécanique, architecture..)

Bitmap :

• Retouche d’une photo

• Effets graphiques sophistiqués

2007-2008 INF112 - TD8

52

Manipulation d’images

Les images bitmap

Concevoir l’image directement sur l’ordinateur

Récupérer l’image à partir d’un autre support ; acquisition (scanner, appareil photo et caméra numérique …)

Manipulation de l’image avec un logiciel de traitement d’image (paint, photoshop, paint shop pro, gimp …)

Les images vectorielles

Elles se traitent avec un grapheur.

(careldraw, illustrator, xfig, gnuplot … et aussi graphiques d ’Excel) Actuellement sur internet on ne manipule pratiquement que des images

bitmap (balises IMG)

De nouvelles méthodes permettent de manipuler des images vectorielles et de les insérer dans des pages web.

(27)

53

La couleur

Codage

: sur 8 – 16 – 32 – 64 bits Bit = plus petite unité de

mémoire de l’ordinateur Pour reproduire une zone

« grandeur » d’information, le système emprunte à la mémoire 2 – 4 – 8 – 16 – 24 ou 32 bits.

• Ce qui détermine les possibilités ci-contre.

• L’information pour chaque pixel est définie par une couleur propre

16.700.000 Couleurs et oui seize millions (mode "True Color").

24

65.000 Couleurs ("High Color").

16

256 Couleurs ou nuances de gris tenant compte des contraintes ci-dessus.

8

16 Couleurs ou nuances de gris avec les mêmes obligations de 0 = vide et 15 couleurs pures.

4

Deux couleurs NOIR ou BLANC Avec : 0 = vide, 1 = Noir et 2 = Blanc 2

2007-2008 INF112 - TD8

54

La couleur

(28)

55

Couleur indexée

L’information contenue dans chaque pixel est référencée dans une table.

Ceci limite le nombre de couleurs au nombre d’éléments de la table.

Ce mode de codage de la couleur a été introduit pour des problèmes historiques de conception, afin de limiter le coût de mémorisation.

Actuellement toutes les cartes vidéo fonctionnent en codage direct.

2007-2008 INF112 - TD8

56

Les calques

Une image est constituée d’un arrière-plan et

d’éventuelles couches successives indépendantes.

Calques = couches

Les éléments d’une couche peuvent être opaques et

donc masquer les couches inférieures et l’arrière-

plan, ou se « mélanger » de différentes façon avec

les couches inférieures.

(29)

57

Séquence de fabrication

2007-2008 INF112 - TD8

58

La sauvegarde

• Format de l’image

• Vectoriel : PS (postscript), CGM, WMF…

• Bitmap : PNG, BMP, GIF, JPEG …

• Conversion possible entre les différents formats à partir de logiciels …

• Certains formats permettent de réduire la taille

d’origine d’une image en utilisant les techniques de

compression : la compression peut-être avec ou sans

perte d’informations.

(30)

59

Format GIF (Graphics Interchange Format)

Version GIF89a

Format payant pour la sauvegarde sous un logiciel Couleurs indexées : palette de 256 couleurs Système de compression d’image

Utilise une couleur de transparence

Peut sauvegarder plusieurs images dans un même fichier pour donner un « GIF animé », une image animée.

Formats manipulés sous le Web

2007-2008 INF112 - TD8

60

Format JPEG (Joint Photographic Expert Group) Format ‘ true color ”

Système de compression très efficace

Les images JPEG (.jpg) ne peuvent êtretransparentes Les images JPEG (.jpg) ne peuvent êtreanimées

Suivant les choix de l’utilisateur une partie de l’information de l’image peut être perdue

Formats manipulés

sous le Web

(31)

61

Format PNG (Portable Network Graphics) Format PNG (.png)

Système de compression efficace Permet la transparence

Plusieurs logiciels sont disponibles gratuitement pour convertir vos images JPEG, GIF, BMP, TIFF, PSD ….

au format PNG.

Formats manipulés sous le Web

2007-2008 INF112 - TD8

62

Formats manipulés sous le Web

Format FLASH

Nouveau standard pour réaliser des animations dans les pages web

Utilise le format vectoriel pour sauvegarder les

éléments de chaque image de l’animation.

(32)

63

<IMG SRC="image" ALIGN="attribut" height=xx width=yy>

Insertion d'image dans une page html

image = adresse d'une image Les attribut facultatifs :

"MIDDLE" "TOP" "BOTTOM" "LEFT" ou "RIGHT"

La taille imposée de l’image est donnée par xx, yy en pixels.

2007-2008 INF112 - TD8

64

<IMG ALIGN=BOTTOM SRC="chouetteG.gif"> La chouette

Exemples

<IMG ALIGN=RIGHT SRC="chouetteG.gif"> chouette <BR>

nom par lequel on désigne couramment<BR>

certains oiseaux rapaces nocturnes.<BR>

<EM>Le Petit Robert</EM> <BR CLEAR=ALL>

(33)

65

Image cliquable simple

Syntaxe générale d'un lien :

<A HREF="adresse_cible"> texte du lien ou image cliquable </A>

Exemple :

<a href="CV-anglais.html">

<img SRC="drapeauAnglais.jpg" height=68 width=52></a>

Syntaxe générale d'une image cliquable :

<a href="adresse_cible"><img SRC="adresse_image"></a>

2007-2008 INF112 - TD8

66

Image avec plusieurs zones cliquables

(images à zones sensibles ou MAP)

(34)

67

<IMGSRC="Z:\SVSTU2\plan-5-9m.jpg" WIDTH=727 HEIGHT=511 BORDER=0 USEMAP="#map">

<MAPNAME="map">

<AREA SHAPE="POLY"

COORDS="543,223,544,244,562,245,583,232,579,268,592,286,516,302,514, 296,523,277,512,275,507,266,519,254,492,239,497,222,539,221"

HREF="http://www.ujf-grenoble.fr/BUS">

</MAP>

Image avec différentes zones cliquables

2007-2008 INF112 - TD8

68

Coordonnées du rectangle

(222,307)

(342,376)

<AREA SHAPE="RECT" COORDS="222,307,342,376" HREF="http://dsu-net.ujf-grenoble.fr">

(35)

69

Coordonnées du polygone

<AREA SHAPE="POLY"

COORDS="543,223,544,244,562,245,583,232,579,268,592,286,516,302,514, 296,523,277,512,275,507,266,519,254,492,239,497,222,539,221"

HREF="http://www.ujf-grenoble.fr/BUS">

(543,223) (544,244)

(

562,245

) (

583,232

)

(

579,268

)

2007-2008 INF112 - TD8

70

Image avec différentes zones cliquables

(36)

71

<mapNAME="France">

<areaSHAPE="POLYGON" COORDS="238, 41, 225, 6, 314, 0, 381, 54, 381, 72, 341, 70, 317, 64, 276, 49"

HREF="/annuaire/index.fcgi?req=lcommunes&re=NORD+-+PAS+DE+CALAIS">

<areaSHAPE="POLYGON" COORDS="270, 67, 284, 85, 283, 119, 297, 123, 339, 129, 352, 144, 358, 127, 364, 122, 371, 115, 373, 110, 381, 71, 341, 71, 327, 70, 275, 49, 270, 67"

HREF="/annuaire/index.fcgi?req=lcommunes&re=PICARDIE" alt="Picardie">

<areaSHAPE="POLYGON" COORDS="245, 156, 222, 106, 179, 85, 204, 48, 271, 67, 286, 86, 283, 119, 265, 148, 245, 156" HREF="/annuaire/index.fcgi?req=lcommunes&re=HAUTE+NORMANDIE">

<areaSHAPE="POLYGON" COORDS="352, 173, 360, 146, 339, 129, 296, 123, 283, 119, 274, 138, 294, 178, 313, 180, 334, 185, 352, 173" HREF="/annuaire/index.fcgi?req=lcommunes&re=ILE+DE+FRANCE">

...

<areaSHAPE="POLYGON" COORDS="120, 477, 150, 334, 207, 380, 232, 337, 263, 354, 266, 379, 233, 440, 191, 446, 190, 463, 205, 480, 180, 521, 120, 477"

HREF="/annuaire/index.fcgi?req=lcommunes&re=AQUITAINE">

<areaSHAPE="POLYGON" COORDS="373, 358, 390, 356, 398, 365, 372, 396, 349, 383, 331, 402, 322, 384, 311, 402, 296, 402, 296, 383, 313, 361, 314, 357, 319, 338, 318, 320, 314, 304, 302, 294, 333, 268, 374, 290, 366, 306, 365, 333, 377, 346, 373, 358"

HREF="/annuaire/index.fcgi?req=lcommunes&re=AUVERGNE">

<areaSHAPE="RECT" COORDS="0, 0, 607, 635" HREF="/annuaire/cartes/">

</map>

<imgborder="0" src="/annuaire/cartes/carte_france.gif" usemap="#France"WIDTH="608" HEIGHT="632">

2007-2008 INF112 - TD8

72

Exercice 8-6 : Poids d’une image

L’appareil photo numérique que le Père Noël vous a offert produit des images couleurs par points de 2000x1500 pixels ; la

couleur de chaque pixel est codée sur 3 octets. Le récit de vos aventures au Tibet occupe 500 pages ; chaque page contient 40 lignes de 60 caractères. Chaque caractère est codé par un octet. Vous réalisez un site web à l‘intention de votre famille en Bretagne pour leur faire partager ces moments inoubliables. La vitesse de transmission sur Internet sur la liaison utilisée est de 1 Mbits/s.

• Combien de possibilités de couleurs y a-t-il par pixel ?

• Combien de temps faudra-il à votre famille pour recevoir : - le texte de votre site ?

- une image de votre site ?

(37)

73

<AREA SHAPE="rect" COORDS="47,127,208,151"

HREF="phil_Web/mona.html">

</MAP>

Exercice 8-7 : Image MAP

Voici une image MAP dont les zones sensibles ne fonctionnent pas. Trouvez les 4 erreurs visibles dans le code html.

2007-2008 INF112 - TD8

74