Edition de pages Internet

Claude-F. Béguin, 7 mai 1999

Mise à jour du 31 mai 1999

1. Document internet; généralités

Un document internet est un document avec du texte dans un format lisible sur les différentes plateformes du WEB (Windows, Mac/OS, Unix). Ce format s'appelle HTML; il permet d'associer le texte à d'autres documents de diverses catégories (images, sons, vidéos, autres documents textes, bases de données, gestionnaires, etc.). Il permet aussi d'inclure des instructions (écrites avec un langage de programmation Java par exemple).
Les documents associés sont soit insérés (ils apparaissent dans la page affichée), soit liés (ils sont atteignables depuis la page affichée).
Un document HTML peut être élaboré dans n'importe quel éditeur de texte (le bloc-note de Windows, par exemple), à condition de connaître le code HTML. Il existe cependant des assistants qui permettent d'éviter d'écrire du code. Le navigateur Netscape Communicator (version 4.51 installée dans l'atelier), gratuit pour les particuliers et les écoles, possède un éditeur de pages HTML ("Page Composer"). Microsoft offre gratuitement aussi un éditeur de page ("Front Page").
Les traitements de textes actuels (WORD, WORDPERFECT, etc..) permettent de convertir une page rédigée pour l'impression en pages affichageable sur le WEB.
Nous travaillerons durant le cours, au début en tous cas, avec Page Composer de Netscape.
Lorsqu'on crée des pages WEB, au moins trois aspects doivent être envisagés: technique, pratique et esthétique. Ces trois aspects doivent se conjuguer pour faire d'une page un outil de communication:

technique: exactitude du code et des liens (les assistants y pourvoient en général correctement);
pratique: pas de surcharge inutile (surtout pour les pages d'accueil, ou "home page") qui augmente le temps de chargement et décourage le visiteur;
esthétique: une page doit être illustrée et animée (pas trop!) pour renforver son contenu écrit.

Les assistants de création permettent de régler les formats du texte (polices, tailles) et des paragraphes (alignement), ainsi que de créer des listes, des tableaux, d'insérer des séparateurs, de corriger l'orthographe, etc.

2. Contenu du cours

Présentation de l'environnement de travail (Windows NT en client Novell) avec serveur local (CASTOR);
Analyse de la structure d'une page WEB;
Réalisation de quelques pages en exploitant les principaux attributs (images, fonds, tableaux);
Etablissement de divers types de liens entre pages et à l'intérieur d'une page;
Attributs avancés (sons, vidéos, animation).

3. Exercices

Exercice 1

Analyser quelques pages internet
Identifier les principaux éléments d'une page et évaluer leur lisibilité, leur esthétique et l'attrait qu'elles exercent.
En cliquant sur le bouton droit de la souris, un menu est déroulé qui permet, entre autre:

d'afficher les composants de la page (images, fond, codes HTML) en sélectionnant View Image, View Info ou View Source;
de capturer les images ("Save Image As"), le fond ("Save Background As") et le code HTML de la page ("View Source").

Visitez les pages des sites rapportés ci-dessous en cliquant sur leur nom dans la colonne de gauche ou en copiant leur adresse dans la colonne du centre, puis en la collant dans la ligne location de la barre des tâches.

Fondation Gianadda	http://www.gianadda.ch/	Esthétique, rapidité de chargement, image de fond (Background)
Fondation Gianadda	http://www.gianadda.ch/e_expos_turner.html	Information sur les images, le fond, mise en page en tableau
Le Louvre	http://www.Louvre.edu/ et http://www.Louvre.edu/Bienvenue.htm	Images actives, fond, trames ("frames")
Namibia Web Site Design & Hosting	http://www.etosha.com/design/	Images animées de présentation
AgenceVirtuelle.com	http://www.agencevirtuelle.com/	Animation à l'aide d'une application spécialisée (Flash 3) de Macromedia
Fondation Éthologique de Bellevue	http://www.ethology.org	programme Java (Java Script)

Exercice 2

Sauvez des documents
Dans le répertoire Editions de pages WEB de votre poste, créez le dossier Ressources et dans celui-ci les dossiers Images, Images Animées, Fonds et Textes.
Ensuite, en explorant les sites mentionnés dans l'exercice 1, sauvez les documents qui vous intéressent dans les répertoires créés.
Complétez vos ressources en faisant une recherche sur le site francophone Lokace (http://www.lokace.com/) avec des mots-clé correspondant à un thème de votre choix (mots-clé par défaut: "graphisme art communication").

Exemples:

http://www.neveux.fr:80/skynet/Jean-Pierre.David/index_fr.html; un artiste se présente et présente son travail.
http://www.bruxelles.irisnet.be/fr/7fr_user/7FR_7INS/7fr_7ins.htm; page de promotion de la ville de Bruxelles.
http://dir.yahoo.com/Arts/Visual_Arts/Graffiti/Exhibits/.

Exercice 3

Créer un document composite texte et images
Dans le répertoire Editions de pages WEB de votre poste, créez le dossier Composition.
Ensuite, en utilisant les documents que vous avez chargés dans le dossier Ressources et ses sous-dossiers Images, Images Animées, Fonds et Textes, créez un document composite texte et images que vous sauvegarderez dans le dossier Composition.

Exercice 4

Mise en page d'un document à l'aide d'un tableau
Les tableaux constituent une solution satisfaisante pour répartir textes et ressources graphiques sur une page WEB. L'intérêt principal réside dans la stabilité de la configuration obtenue, qui n'est pas modifiée au gré des écrans des utilisateurs.
Le paramétrage des tableaux est cependant un peu déconcertant parfois.
Beaucoup d'ennuis sont évités en faisant le plan du tableau et en calculant au préalable la largeur de chaque colonne (en fonction de la largeur des images), sans omettre la largeur totale du tableau (elle n'est pas calculée automatiquement par défaut).

Exercice 5

Créer une page avec une vidéo insérée
Il est très facile de lier une vidéo à une page en utilisant l'assistant. Cette solution n'est cependant pas très satisfaisante, surtout si plus d'une vidéo est associée à une page; il est parfois difficile de savoir quel fenêtre est associée à quel lien.
L'insertion dans la page avec le code "EMBED" constitue une solution élégante, qui permet de faire apparaître la vidéo dans un rapport précis avec le texte auquel elle correspond, voire dans un décor. Un protocole est proposé à partir de ce lien.

Exercice 6

Créer un site
Choisir un thème et créer un site constitué de 4 à 6 pages liées, avec images et vidéo, ainsi que des liens vers d'autres sites.
Les pages seront hébergées à l'adresse: http://meltingpot.fortunecity.com/tanzania/880

Exercice 7

Animation GIF
Les documents en GIF animé donnent des possibilités intéressantes pour l'illustration et l'animation, même si certains effets (fondus enchaînés) ne sont pas possibles.
Créer une animation GIF à l'aide de Alchemy GIF Construction Set. Une suggestion pour les images; le site de Vesalius.
Sauvez des images de même format, convertissez-les au format GIF à l'aide de Paint Shop Pro et compilez-les en utilisant l'assistant.

Exercice 8

3D sur Internet
Explorer les possibilités de documents 3D sur Internet; l'option VRML..

Exercice 9

Palettes
Les applications sur le WEB affichent 216 couleurs. Les couleurs excédentaires d'images qui en dénombrant un nombre plus élevé ne sont pas affichées et des aggrégats de ces couleurs sont responsables de "trous" dans les images comme on peut le voir ci-dessous.


Avant traîtement (240 couleurs)	Après traîtement (73 couleurs)

La charge d'une palette appropriée remplace ces couleurs et permettent ainsi de prévenir ces inconvénients.
Vous pouvez téléchargez la palette WEB de Paint Shop Pro et l'essayer sur des images GIF ou JPG.

Plug-ins

Digigami CineWeb

Digigami CineWeb is the definitive multimedia-viewing plug-in for the Netscape Navigator 2.0+ series of World Wide Web browsers. Featuring JetStream technology, CineWeb lets you view the content as it is sent to you--no more waiting for lengthy downloads to finish!
CineWeb also requires no proprietary codecs or video file formats to work. You can even save multimedia content directly on your computer for later viewing!
CineWeb allows you to view the following multimedia file types directly in your browser, without making you configure helper applications.

QuickTime

QuickTime 4 Preview Release lets you add over 200 digital media capabilites and components to your Mac or PC. Upgrade to QuickTime Pro For just $29.99 unleash all of your viewing, editing and creative capabilities.

Shockwave

The new Shockwave 7 Player provides auto-updating of the player. Three simple steps to get free the Web player. *

Adobe Acrobat Reader

The Adobe Acrobat Reader lets view and print PDF files on all major computer platforms.

Real audio

Compressions

Sons

MP3

MP3 is a file format which stores audio files on a computer in such a way that the file size is relatively small, but the song sounds near perfect. You can identify MP3 files because they will end in .mp3.
Typically 1 MB is equal to one minute of music or several minutes for spoken word/audiobooks.

Vidéos

Protocoles de F. Lombard (CPTIC-Tecfa)

Couleurs et Palettes

BACKGROUNDS AT NETSCAPE
Jay Boersma
IconBAZAAR
Yahoo Graphics
MSDN Online Downloads Area

Sites 3D

www.3drender.com

www.lumis.com

www.aw.sgi.com/pages/assistant/assistant/index.html

www.optimage-cg.com

www.abel.net.uk/~jackal

www.kinora.com

*

Si cette page est affichée sur Internet, retour à la page d'accueil