Vous êtes sur la page 1sur 36

METH21F Techniques audiovisuelles et multimdias

Plan du cours
Dates des cours => Janvier : 25 ; Mars : 28 ( confirmer) ; Avril : 4, 25 1er cours le : 25/01/08 Contrle des connaissances : dossier rendre pour le 02/05/08. Au choix : site web, projet multimdia, story-board de film ethnologique , montage powerpoint.

Cours 1 : 25 / 01 /08. Limage et le texte


Liconographie et le texte dans la constitution dun projet danthropologie visuelle Les langages : critures html, xhtml, psp, etc. Les logiciels de cration de projet Les moteurs et annuaires

Cours 2 : 28 / 03 /08 date CONFIRMER. Anthropologie visuelle


Place de lanthropologie visuelle dans la mthodologie ethnographique Les diffrents supports de communication : image et texte Film, photo et autres interfaces visuelles ;

Cours 3 : 04 / 04 / 08. Naissance dInternet


Lecture et criture numriques Internet : dfinition, constitution, fonctionnement

Cours 4 25 / 04 /08. Ecrit et recherche lectroniques


Lcrit lectronique Les nouveaux objets de lanthropologie Galle LACAZE 2e semestre 2007-2008

BIBLIOGRAPHIE Gnralits anthropologie visuelle


ACHUTTI Luiz Eduardo Robinson. 2004. L'homme sur la photo : manuel de photographie. Paris, Tradre. ARRT SUR IMAGES. 2007. Photographie et anthropologie . Ethnologie franaise (1 janvier 2007). BARTHES Roland. 1980. La chambre claire. Notes sur la photographie. Paris. Le Seuil. , Seuil (Les Cahier du cinma). BECKER Howard. 1986, Doing Things Together: Selected Papers. Evanston. Northwestern University Press. BOURDIEU Pierre. 1965. Un art moyen : essai sur les usages sociaux de la photographie. Paris, d. de Minuit. COLLIER John, 1967 (1986). Visual anthropology: Photography as a Research method. Albuquerque, University of New Mexico Press. CONNORD Sylvaine. 2000. On va t'apprendre faire des affaires... Echanges et ngoces entre une anthropologueethnographe et des juives tunisiennes de Belleville. Paris, Journal des anthropologues, 80-81 : pp. 91-116. CONNORD Sylvaine. 2001. Fonctions et usages de la photographie en anthropologie. Des cafs bellevillois (Paris .XX) l'le de' Djerba (Tunisie), Thse de doctorat. Universit de Paris X-Nanterre. CONNORD Sylvaine. 2002. Le choix dune image en anthropologie : quest-ce quune bonne image ? , Ethnolographique.org, n2 ; consult le 30/11/2008, http://www.ethnographiques.org/2002/Conord.html GOFFMANN Ervin. 1974, Les rites d'interaction, Paris, Ed de Minuit, 230 p. HALL Edward. T. 1971, La dimension cache, Paris, Seuil, 253 p. HALL Edward. T. 1979, Au-del de la culture, Paris, Seuil, 234 p. HALL Edward. T. 1984, La danse de la vie : temps culturel, temps vcu (Paris, Seuil) 283 p. KOECHLIN Bernard. 1991, La ralit gestuelle des socits humaines , in J. Poirier (dir.), Histoire des murs, Paris, Gallimard, t. II, p.163-245 (Encyclopdie de la Pliade) LAPANTINE Franois, 2007 Penser en images , ARRT SUR IMAGES. Photographie et anthropologie . Ethnologie franaise (1 janvier 2007). p. 47-56 MARESCA Sylvain et Pierre-Jrme JEHEL (coord.). 2000. Questions d'optiques. Aperus sur les relations entre la photographie et les sciences sociales. Paris, Journal des anthropologues, 80-81 MEAD Margaret & BATESON Gregory. 1942, Balinese Character,. a Photographic Analysis t, New York, New York Academy of sciences, 278 p. PIETTE Albert, 1992. Le mode mineur de la ralit. Paradoxes et photographie en anthropologie. Louvain-la-Neuve, Peeters.

les ressources internet : consultation le 25/01/2007


Annuaire de l'UREC

Maintenant historique, le premier annuaire des sites web franais, mis jour entre janvier 1994 et juillet 1997par l'Unit Rseaux du CNRS (UREC). Remplac par un annuaire consacr la recherche et l'enseignement.
www. www.urec.cnrs.fr/accueil.php3

Cerf, Vinton. How the Internet Came to Be.

Les souvenirs du pre d'lntemet.


www.virtualschool.edu

CREPUQ. Guide d'initiation la recherche sur Internet (GIRl)

Ralis par un groupe de travail provenant de quatre universits canadiennes (Universit Laval, Universit du Qubec, Universit de Montral et Universit du Qubec Montral). Support cours METH21F / G. Lacaze 2

http://www.bibl.ulaval.ca/mieux
Bortzmeyer, Stphane. "Systmes de recherche par mots-cls : pour aller un peu plus loin." Avril 1996.

Explique quelques concepts de base en informatique documentaire. Ces concepts sont illustrs d'exemples pris surtout dans les moteurs de recherche du Web.
www.freenix.fr

Maire, Gilles. "Un nouveau guide intemet (UNGI)."

Guide trs complet usage des francophones.


www.imaginet.fr

Rseau inter-ordinateurs scientifique qubcois (RISQ). "Info Internet."

Le guide Internet du RISQ.


www.risq.qc.ca/

Sterling, Bruce. "Short History of the Internet."

Sur le site du World Wide Web Consortium, une description du dveloppement spectaculaire d'Internet.
http://www.w3.org

les sources IMPRIMES


Barbier, Frdric et Bertho Lavenir, Catherine. Histoire des mdias : de Diderot Internet. Paris :Armand Colin, 1996. 351 p.

L'histoire des mdias depuis 1751, date de la publication de l'Encyclopdie, jusqu'aux dveloppements les plus rcents d'lnternet et des autoroutes de l'information. Voir particulirement la troisime partie ; Un monde en rseau (1950-1995).
Bateson G. et Mead M. 1942, Balinese character : a photographic analysis. New York, Academy of Science. Blisle C., 1998. Navigation et hypermdia , Sminaire DAFCO "L'apprentissage mdiatis", (Intervention du 28 mai 1998), 9 p. Berelson et coll., 1955. Voting : A study of Opinion Formation in a Presidential Campaign, Chicago, University of Chicago Press Berners-Lee, Tim et Ruetschi, Pierre. "Tim Berners-Lee, inventeur du World Wide Web poursuit sa rvolution pour le XXIe sicle. " Tribune de Genve (Suisse) 20-21 dcembre 1997, p.3.

Entretien du journaliste Pierre Ruetschi avec Tim Berners-Lee. Crateur du World Wide Web au CERN (Organisation europenne pour la recherche nuclaire) Genve en 1989-90, Tim BernersLee est actuellement la tte du World Wide Web Consortium, consortium professionnel international ayant pour tche de dfinir les normes de dveloppement du Web.
Borde J.-M., et Hudrisier H., 2000. Au cur de la technologie du document , Solaris n6, d.1999-janv.2000, 19p. Buchanan, William. Mastering Global Information Systems. London : Macmillan, 1997. 264 p. .

Un guide des systmes d'information modernes et des communications de donnes, avec cinq parties sur les sources d'information numriques et le multimdia, Internet, le Web et Java, les rseaux locaux, les rseaux grande chelle et la vido-confrence.
Chartron G., et Noyer J.-M., 2000. Normes et documents numriques : quels changements , Solaris n6, d. 1999-janv. 2000, 20 p. Cotton, Bob and Oliver, Richard. The cyberspace Lexicon : An illustrated Dictionary of Terms From Multimedia to Virtual Reality. London. Phaidon Press, 1994. 224 p.

Un guide travers le ddale des technologies existantes ou mergentes. Un peu ancien puisqu'il date de 1994, mais conserve un intrt du fait de ses trs belles illustrations.
Dahl, Andrew and Lesnick, Leslie. "Intemet Commerce." Indianapolis, Indiana : New Riders Publishing, 1996. 382 p.

Comment mettre en place et grer l'change de monnaie lectronique, que ce soit la construction et le marketing de vitrines numriques ou la confidentialit et la scurit des transactions de la clientle. Support cours METH21F / G. Lacaze 3

David Riesman, La Foule Solitaire , Dufour, Arnaud. "Internet." 5 d. Paris : PUF, 1997. Coll. Que sais-je ?, 3073. 127 p.
e

Les concepts de base, l'histoire et l'volution d'lnternet, les services qu'il offre et les enjeux conomiques et sociaux qu'il sous-tend.
Dufour, Arnaud. Le cybermarketing : intgrer Internet dans la stratgie d'entreprise. Paris : PUF, 1997. Coll. Que saisje ?, 3186. 127 p.

Que sais-je ? qui expose les bases du cybermarketing, les tapes-cls des analyses stratgiques et des tactiques menant la ralisation d'un serveur web commercial, et les perspectives d'avenir sur l'volution du cybermarketing.
Efron D., 1972. Gesture, race and culture (a tentative study of some of the saptio-temporal and "linguistic" aspects of the gestural behavior of eastern jews and southern italians in New-York city, living under similar as well as different environmental conditions). The Hague-Paris, Mouton. Elihu Katz, Communication Research since Lazarsfeld , Public Opinion Quaterly, vol.5, winter, 51 p. Gates, Bill. "La route du futur." 2 d. Paris ; Presses Pocket. 1995. 332 p.
e

Une description des autoroutes de l'information du point de vue d'un des gants de l'informatique. Explique les changements majeurs qu'elles amneront dans tous les domaines : ducation, travail, loisirs, vie quotidienne. Avec la collaboration de Nathan Myhrvold et Peter Rinearson.
Gilster, Paul. "Digital Literacy." New York : Wiley, 1997. 276 p

Une passionnante valuation critique d'lnternet qui procure les lments pour voluer dans un environnement interactif fondamentalement diffrent des mdias "passifs " tels que la tlvision ou l'imprim.
Harold Lasswell, 1948. Structure et fonction de la communication dans la socit , in Lyman Bryson (ed.), The Communication of ideas, New-York, Harper Holzem, Maryvonne,1999, Terminologie et documentation : pour une meilleure circulation des savoirs. ADBS ditions. 292 p. Huitema, Christian. "Et Dieu cra l'Internet." Paris : Eyrolles, 1996. 201 p.

L'histoire d'lntemet par le chercheur qui a particip la premire connexion Internet en France et qui prsida ensuite l'Intemet Architectural Board (IAB).
Kahn, Annie. "1998, l'anne de la tlvision interactive." Le Monde, Supplment Tlvision-Radio-Multimdia, 9 fvrier 1998.

Les chanes numriques exploitent de mieux en mieux l'informatique, tandis que les crateurs de sites web intgrent des crans de tlvision celui de leur PC.
Kchlin B., 1964, Techniques corporelles et leur notation symbolique , Pratiques et langages gestuels, Langage n10 : p. 36-47 Kchlin B., 1982. L'ethno-sociologie : une mthode d'approche des gestes du travail des socits humaines , Geste et image numro spcial, 13-38 Kchlin B., 1991. La ralit gestuelle des socits humaines , J. Poirier (dir) Histoire des murs t. II. Paris, Gallimard : p.163-245 (coll. Encyclopdie de la Pliade) Le Marec J., 1997-1998. Interactivit et multimdia : lieux communs revisits par l'usage , Rencontres mdias 2. Leary, Timothy. Chaos et cyberculture. Paris : Editions du Lzard, 1996. 274 p.

D'aprs l'auteur, philosophe, le XXIe sicle verra l'mergence d'un nouvel humanisme, dont les ides-force seront la contestation de l'autorit, la libert de pense et la crativit personnelle, le tout soutenu et encourag par la vulgarisation de l'ordinateur et des nouvelles technologies de communication.
Lvy P., 1994. L'intelligence collective : pour une anthropologie du cyberespace. Paris, La Dcouverte. Lvy P., 1997. Cyberculture. Paris, Odile Jacob. Lvy P., 2000, L 'hyperscne , Les Cahiers de mdiologie n1 : "La querelle du spectacle". 5 p. Lvy P., et Authier M., 1992. Les Arbres de la connaissance. Paris, La Dcouverte. Coll. Cahiers libres. Lvy, Pierre, "XXIe, sicle des Lumires." Libration, Supplment Multimdia, 16 janvier 1998.

Support cours METH21F / G. Lacaze

Entretien d'Annick Rivoire avec le philosophe Pierre Lvy sur la cyberculture et les impacts culturels de la rvolution numrique, suite la sortie de son livre.
Lvy, Pierre. "Cyberculture : rapport au Conseil de l'Europe." Paris ; Editions Odile Jacob, 1998. 313 p.

De la numrisation la navigation en passant par la mmoire, la programmation, les logiciels, la ralit virtuelle, le multimdia, l'interactivit, le courrier lectronique, etc. Une prsentation des nouvelles technologies, de leur usage et de leurs enjeux.
Lvy, Pierre. "L'intelligence collective : pour une anthropologie du cyberspace." Paris : La Dcouverte, 1997. 245 p.

Le projet de l'intelligence collective dans une perspective anthropologique de longue dure. Le rseau Internet et le multimdia actif ont entran une mutation dans les modes de communication et l'accs au savoir, mutation qui a elle-mme engendr le cyberespace, nouveau milieu de communication, de pense et de travail pour les socits humaines.
Maignien Y., 1997. La bibliothque de Michel Foucault , Bibliothque Publique d'Information, Beaubourg. Centre Georges Pompidou, 10 p. Maignien Y., Dussert E., et Wagneur J.D. , 1997. Hypertexte et Revues , Revue des revues, IMEC, Paris. N22, 1996, 9 p. Mauriac, Laurent. "Et Vinton Cerf cra l'Internet". Libration, Cahier Multimdia, 16 janvier 1998.

Portrait de Vinton Cerf, appel le pre d'lnternet parce qu'il est le co-inventeur du protocole TCP/IP avec Bob Kahn en 1974. Il cre en 1992 l'Internet Society, un organisme professionnel international non gouvernemental regroupant diffrents groupes d'intrt pour laborer des solutions permettant de promouvoir le dveloppement d'lnternet.
Mauss M. (1975) 1992, Manuel dethnographie, Paris, Petite Bibliothque Payot. Mc Luhan M., 1967. La galaxie Guntenberg, Paris, Mame. Milton Keynes ed., 1977, Mass Communication and Society, Open University Press. Morris D., (1977) 1978. La cl des gestes, Paris, Bernard Grasset. Negroponte, Nicolas. L'homme numrique. Comment le multimdia et les autoroutes de l'information vont changer notre vie. Paris : Presses Pocket, cop. 1995. 290 p.

Par le directeur du Media Lab du MIT (Massachussets Institut of Technology), une explication du numrique et de ses champs d'application que sont le CD-ROM, Internet et les images virtuelles, ainsi qu'une rflexion sur l'influence des nouvelles technologies sur notre avenir.
Nora, Dominique. Les conqurants du cybermonde. Paris : Gallimard, 1997. Coll. Folio Actuel, 52. 530 p.

Par un grand reporter du Nouvel Observateur, une enqute de terrain sur la convergence l'chelle plantaire entre tlcommunications, informatique et lectronique, et une tude des dernires technologies en tlcommunications : Internet, tlvision numrique, mondes virtuels et inforoutes.
Norman S. J., Nouvelle scnographie du regard ou scnographies du nouveau regard ? , Les Cahiers de mdiologie n1 : La querelle du spectacle, 5 p. Perroud, Pierre. Voulez-vous abandonner vos enfants Big Gate ?, Informatique-Informations (Suisse) n 32, fvrier 1997.

Les technologies du futur ne sont pas celles qui nous merveillent aujourd'hui ; ce sont celles que l'on ne connat pas et qui sortiront dans six mois ou dans deux semaines, bouleversant notre existence. Face cette situation, nous devons fournir nos lves des moyens pour entrer dans un monde non pas nouveau, mais en constant renouvellement.
Revue des documentalistes en sc. de linfo. http://www.adbs.fr/adbs/prodserv/document/annexe/html/137-2isko.htm Ryan M.-L., Frontire de la fiction : digitale ou analogique ? , Colloque Frontire de la fiction, 12 p. Search Engine Watch. A Webmaster's Guide to Search Engines.

Explique comment les moteurs de recherche trouvent et classent les pages web et donne des conseils aux responsables de sites pour faciliter la localisation de leur site.
Stiegler B., 2002. Leroi-Gourhan : l'inorganique organis , Les Cahiers de mdiologie n5 : "Pourquoi des mdiologues , 8 p.

Support cours METH21F / G. Lacaze

Urbain J.-D., 1999-2000. Ecritures du voyage et explorations : le dire et le voir , Ecriture de rseaux, socits pistolaires. Anthropologie des cultures graphiques contemporaines, Centre d'tude de l'criture Jussieu, 2 p. Vandendorpe C., 1999. Du papyrus l'hypertexte, Paris, La Dcouverte, 270 p.

Le droit du cyberespace les ressources internet : consultation le 25/01/2007


Commission nationale de l'informatique et des liberts (CNIL)

Site de l'organisme public franais charg de veiller l'application de la loi Informatique et libert (loi n 78-17 du 6 janvier 1978), notamment en ce qui concerne le respect de la vie prive du citoyen dans l'utilisation des fichiers informatiques, et qui adapte maintenant sa mission Internet.
www.cnil.fr

Electronic Frontier Foundation (EFF)

Un organisme but non lucratif de dfense des liberts civiles, qui uvre dans l'intrt public pour protger le respect de la vie prive, la libert d'expression, l'accs en ligne de l'information publique et la responsabilit civile dans les nouveaux mdias. Le site comprend aussi une bibliothque en ligne de 14.000 documents sur les liberts civiles.
www.eff.org

IFLA. "Copyright and Intellectual Property."

Fournit une bibliographie et de nombreuses listes dans les domaines suivants : priodiques, organismes, politiques de copyright, exemples, instruments internationaux, la situation dans les diffrents continents (Amrique, Asie et Pacifique, Europe) http://www.ifla.org/
Journal officiel (Le)

En ligne depuis janvier 1998, le texte intgral du Journal officiel et ses archives rcentes.
www.journal-officiel.gouv.fr

Lgifrance

Site officiel franais permettant la consultation en ligne du Journal officiel depuis janvier 1998, ainsi qu'une quarantaine de codes tels que le Code civil ou le Code pnal, les grandes dcisions de jurisprudence et les textes de base comme la Constitution de la Ve Rpublique ou la Dclaration universelle des droits de l'homme. La page d'accueil propose cinq grandes rubriques : la Constitution, la loi, la jurisprudence, le droit europen et l'actualit juridique.
http://www.legifrance.gouv.fr/

Organisation mondiale de la proprit intellectuelle (OMPI)

Cre en 1967, l'OMPI est charge de promouvoir la protection de la proprit intellectuelle travers le monde grce la coopration entre les tats et d'assurer l'administration de divers traits multilatraux concernant les aspects juridiques et administratifs de la proprit intellectuelle.
http://www.wipo.int/portal/index.html.fr

Pagano, Penny. " Intellectual Property Rights and the World Wide Web. AJR/NewsLink

Par un journaliste indpendant, la prsentation du sujet brlant qu'est la proprit intellectuelle sur le Web.
http://www.divertissement.org/index.html?cadre2=/dossiers/tasini.html

UCLA Online Institute for Cyberspace Law and Policy

Depuis ses dbuts en septembre 1995 l'UCLA (University of Califomia), l'institut a les objectifs suivants : procurer des ressources aux universitaires, praticiens, tudiants et usagers d'lnternet intresss par le droit du cyberespace, aider trouver des solutions aux problmes propres au cyberespace, identifier les problmes lgaux et politiques, favoriser le dveloppement du droit du Support cours METH21F / G. Lacaze 6

cyberespace en tant que discipline propre, procurer un moyen de dissmination des ides nouvelles et favoriser de nouvelles communauts lectroniques dans ce domaine. Offre aussi une bibliographie trs complte sur le droit du cyberespace.
www.ucla.edu

Les sources bibliographiques


" Code de la proprit intellectuelle (partie lgislative).

Premire partie : la proprit littraire et artistique." Journal officiel de la Rpublique franaise, 3 juillet 1992. pp.8802-8813. Document annex la loi n 92-597 du 1er juillet 1992 relative au code de la proprit intellectuelle.
Commission nationale de l'informatique et des liberts (CNIL). "Les liberts et l'informatique : vingt dlibrations commentes." Paris : La Documentation franaise, 1998. 206 p.

Illustre les diffrentes formes d'action de la Commission en montrant les domaines d'intervention de l'autorit charge de la protection des donnes personnelles. En annexe, texte de la loi n 78-17 du 6 janvier 1978 relative l'informatique, aux fichiers et aux liberts.
Dyson, Esther. "Sans tat ni Loi." Libration, Cahier Multimdia, 9 janvier 1998.

La rglementation d'Internet devrait tre faite moins par un gouvernement central qui en dfinirait les rgles que par plusieurs organismes mis en concurrence dans l'intrt du consommateur.
Evans, James, "Law on the net." Berkeley, California : Nolo Press, 1996. VII, 692 p.

Rpertoire prsentant des milliers de ressources juridiques disponibles dans America Online, Compuserve, Prodigy, Delphi, Genie, les BBS (Bulletin Board Services), etc.
Huet Pierre, dir. Association franaise de la tlmatique multimdia (AFTEL). "Le droit du multimdia : de la tlmatique Intemet". Paris ; Editions du Tlphone, 1996. 290 p.

Pose les problmes soulevs par la tlmatique de la premire gnration, le vidotex et l'audiotex : la conciliation de la proprit intellectuelle avec le droit l'information, l'application du droit d'auteur des services traitant des donnes numrises de toute nature, la protection de la confidentialit des rseaux et des systmes, l'adaptation du droit commercial et du droit social la communication lectronique.
Kahn, Annie. "La ncessaire mutation de la CNIL" et "Cyberfilature : la preuve par l'exemple." Le Monde, Supplment Tlvision-Radio-Multimdia, 11 janvier 1998.

Vingt ans aprs sa cration en France, la Commission nationale de l'informatique et des liberts (CNIL) doit adapter sa mission Internet.
Kurz, Raymond A. "Internet and the Law : Legal Fundamentals for the Intemet User." Rockville, Maryland Government Institutes, 1996. XV, 248

Explication des principes de base concernant le droit d'auteur, les marques, le secret de fabrication, les brevets, la diffamation, etc., ainsi que les principes de base de la licence.
Piette-Coudol, Thierry et Bertrand, Andr. "Internet et la loi." Paris : Dalloz, 1997. VIII, 206 p.

Associe troitement la technique et le droit franais, le droit compar et le droit international pour rpondre concrtement aux questions que se posent les internautes et les fournisseurs de services
Reporters sans frontires. "La censure contre Internet." Cahiers de Reporters sans frontires n1, 1997.

Slectionn et dit par Yves Eudes, un recueil d'articles parus dans le journal Le Monde entre janvier 1996 et juillet 1997.
Stern, Jacques. "L'urgence de la scurit sur Internet." Le Figaro, 9 janvier 1998.

Sur le Web, la confidentialit du message et l'origine de la signature de celui qui l'adresse peuvent et doivent tre garanties par des outils mathmatiques performants.
Tortello, Nicole et Lointier, Pascal. "Intemet pour les juristes". Paris : Dalloz, 1996. 331 p.

Support cours METH21F / G. Lacaze

Guide de connexion et ouvrage de rflexion sur le droit d'lnternet, qui rpond aux questions pratiques et thoriques que se posent les professionnels du droit : avocats, magistrats, notaires, huissiers, greffiers, universitaires et juristes d'entreprise.

L'crit lectronique les ressources internet : consultation le 25/01/2007


Benzineb, Jean-Karim. "Glossaire de termes relatifs Intemet."

Glossaire officieux par Jean-Karim Benzineb, traducteur au Conseil de l'Europe.


http://www.chass.utoronto.ca/epc/chwp/wulfric5/

ClicNet

Site culturel et littraire francophone de l'Universit de Swarthmore (Pennsylvanie) qui propose de nombreux liens des uvres de littrature par ordre alphabtique et par sujet, et des liens des ressources virtuelles en franais.
http://clicnet.swarthmore.edu/

Institut national de recherche en informatique et en automatique

INRIA (Institut national de recherche en informatique et en automatique) - avec l'Universit de Jussieu (Paris) : le pionnier d'Internet en France.
http://www.inria.fr/

Le Digital Object Identifier (DOI)

System Gr par l'International DOI Foundation, organisme but non lucratif dont le but est d'analyser les besoins des organismes dfendant la proprit intellectuelle dans l'environnement virtuel grce la cration et la gestion du DOI System (dfinition des lignes d'action, choix des fournisseurs de services et contrle du systme mis en place).
www.doi.org

Institut national de la langue franaise (InaLF)

L'InaLF est une branche du CNRS (Centre national de la recherche scientifique).Ses recherches portent sur la langue franaise sous tous ses aspects, notamment le discours littraire du XIVe au XXe sicles (contenu, smantique et thmatique), la langue courante (langue crite, langue parle et argot), le discours scientifique et technique et ses ressources terminologiques.
http://www.inalf.cnrs.fr/

Logos

Socit de traduction internationale dont le sige est Modne (Italie).Logos propose en accs libre une base de donnes de 459 glossaires, un dictionnaire multilingue de 7 millions d'entres en 31 langues, complt par la conjugaison des verbes en 11 langues) et une bibliothque multilingue avec recherche par mot dans une base de donnes de 230 millions de termes appartenant 5.200 textes (romans, documents techniques et textes traduits) dans 46 langues.
www.logos.it

Ministre de la Culture et de la Communication

Site du ministre franais qui s'articule autour de huit rubriques : prsentation du ministre, actualits, publications, documentation, cybergalerie, expositions, dcouverte de la France et livre d'or. La section Belles trangres (titre inspir d'un pome d'Aragon) recense les manifestations incitant la dcouverte des littratures trangres par le public franais. Le site propose galement un guide de l'Internet culturel.
http://Web.culture.fr

Mygale

Support cours METH21F / G. Lacaze

Serveur web ouvert au public et aux associations but non lucratif, avec bote aux lettres lectronique et hbergement gratuit de sites sur un espace disque de 10 Mo (et qui passe 20 Mo au bout d'un an).
www.multimania.lycos.fr/ NetLingo. "The Intemet Language Dictionary."

Dictionnaire en ligne donnant les dfinitions de centaines de mots formant le nouveau vocabulaire de la technologie et de la communaut Internet
www.netlingo.com

Les sources Imprimes


Alley, Brian. "Update : a Blackwell Milestone." Technicalities (tats-Unis), vol. 15, no. 2, February 1995.

L'histoire de Blackwell North America, fournisseur international de livres, priodiques, bases de donnes et services de contrle d'autorits.
Berselli, Beth. " De l'art d'utiliser Internet pour vendre des livres", Courrier international n366, 6-12/11/1997, p41

Par une journaliste du Washington Post sur l'diteur universitaire amricain National Academy Press qui publie sur Internet 1.700 titres de son catalogue, permettant tous de lire gratuitement ses livres. Loin de diminuer, ses ventes augmentent de 17%.
Rawsthorn, Alice. "Online bookshop risks price war." The Financial Times (UK), 02/10/1997

Intemet Bookshop, la plus importante librairie en ligne du Royaume-Uni, a dbut la vente de livres anglais en proposant des remises allant jusqu' 45%, avec le risque d'une guerre des prix et d'une bataille juridique avec les diteurs anglais.
Rawsthorn, Alice. " Publishers may act on internet imports." The Financial Times (UK), 16/10/1997.

La Publishers Association, organisme qui reprsente les diteurs du Royaume-Uni, tudie les propositions d'interdiction de vente de livres amricains des clients britanniques par des librairies Internet bases aux tats-Unis.
Vollnhals, Otto. "Multilingual Dictionary of Electronic Publishing." Mnchen : K.G. Saur, 1996. 384 p.

3.500 entres en anglais, allemand, franais, espagnol et italien, couvrant la fois des sujets modernes comme l'dition en ligne, l'dition de CD-ROM, l'dition de bases de donnes ou la presse lectronique, et des sujets traditionnels comme l'impression et la typographie.

L'crit lectronique et les moyens de communication La presse en ligne: consultation le 25/01/2007


AJR/NewsLink (AJR : American Journalism Review).

Site Newslink dont la vocation est de proposer des liens avec un grand nombre de journaux et magazines, des associations de journalistes, des ressources pour les journalistes, etc.
http://newslink.org/

Rseau Canoe.

Le dossier des articles du cyberquotidien canadien des nouvelles technologies de l'information.


http://www2.canoe.com/techno/

Agence France-Presse (APF)

Propose galement des liens avec la presse franaise (titres nationaux, journaux rgionaux, chanes de tlvision, radios et journaux lectroniques) et la presse francophone de nombreux pays.
http://www.afp.com/francais/home/

Branchez-vous !

Support cours METH21F / G. Lacaze

Magazine permettant de suivre de prs l'actualit d'lnternet puisqu'il recense et commente tous les nouveaux sites francophones. Comprend une rubrique sur des sites consacrs un vnement de l'actualit, une prsentation de logiciels et une slection des cent meilleurs sites francophones.
http://www.branchez-vous.com/index2.php

Libration

Le site web d'un des grands quotidiens franais. Propose la une du quotidien, des dossiers, le Cahier Livres avec le premier chapitre des livres qui font l'actualit et les archives du mme Cahier, le Cahier Multimdia-hebdomadaire et ses archives, des forums de discussion, etc.
www.liberation.fr

Monde (Le)

Site d'un grand quotidien franais qui propose les dossiers en ligne, le journal complet avant 17 h (abonnement payant), l'actualit avec l'AFP (Agence France-Presse), et des rubriques sur la bourse, les livres, le multimdia et les sports. L'intgralit du Supplment Multimdia hebdomadaire est disponible en ligne gratuitement.
www.lemonde.fr

Monde diplomatique (Le)

Accs l'ensemble des textes (depuis janvier 1994) de ce journal de rfrence, par date, sujet ou pays.
www.monde-diplomatique.fr

PageFrance

L'actualit franaise multimdia, l'actualit franaise tout court avec des liens pour trouver l'info, une slection de sites web francophones, une recherche de coordonnes en tous genres, et un guide du shopping Internet.
www.pagefrance.com

Wired

Le site du mensuel Wired, revue culte cre en 1992 en Californie. Premier magazine consacr la culture cyber, Wired se veut le journal du futur l'avant-garde du XXIe sicle. HotWired est le magazine en ligne de Wired.
www.wired.com/

ZDNet

Dirig par Ziff Davis, le site du principal diteur mondial de magazines informatiques
www.zdnet.com

Les bibliothques en ligne: consultation le 25/01/2007


ABU ; la bibliothque universelle

Cre en 1993, une cyberbibliothque permettant l'accs libre au texte intgral d'uvres du domaine public francophone
http://abu.cnam.fr/

Association des bibliothcaires franais (ABF)

Fonde en 1906 et reconnue d'utilit publique en 1969, l'ABF est la plus ancienne et la plus importante association de bibliothcaires en France. Elle regroupe des bibliothcaires de tous types d'tablissements et de toutes catgories.
www.abf.asso.fr

Association des bibliothcaires spcialiss (ADBS)

Trois grandes rubriques : vie associative, vie professionnelle, produits et services.


http://www.adbs.fr/site/

Association for Computing Machinery (ACM) Digital Library

Support cours METH21F / G. Lacaze

10

Cre en octobre 1997 par l'Association for Computing Machinery (ACM), organisme scientifique et de recherche international, un ensemble d'informations bibliographiques et de textes d'articles, ainsi qu'une section consacre aux cyberbibliothques et la recherche d'information.
www.acm.org

Athena

Cyberbibliothque proposant des documents en plusieurs langues dans les domaines suivants : philosophie, sciences, textes, classiques, littratures, histoire, conomie, etc. Liens avec 200 autres cyberbibliothques.
http://un2sg4.unige.ch/athena/html/athome.html

BIBLINK

Le projet BIBLINK fut lanc en avril 1996 par le Programme d'applications tlmatiques de l'Union europenne. Son but est d'tablir des liens entre les agences bibliographiques nationales et les diteurs de documents lectroniques afin de contribuer la cration d'un service bibliographique qui fasse autorit.
www.ukoln.ac.uk

D.Lib Magazine

Financ par la DARPA (Defense Advanced Research Projects Agency), le magazine de la recherche sur les cyberbibliothques, avec l'actualit mensuelle, des commentaires, des discussions et un ensemble de ressources pour la recherche.
www.dlib.org

Gabriel

Acronyme de Gateway and Bridge to Europe's National Libraries, Gabriel est le serveur des bibliothques nationales europennes. Au menu, des informations gnrales, ce qui est nouveau Gabriel, un guide regroupant les bibliothques par pays, un guide regroupant les bibliothques par genre de services, des nouvelles des bibliothques nationales europennes, et des projets communs ces bibliothques.
http://www.theeuropeanlibrary.org/portal/browserSupport.html

Gallica

Inaugure en 1997, la cyberbibliothque de la Bibliothque nationale de France (BnF) propose les images et textes du XIXe sicle francophone. Elle est aussi un serveur exprimental qui a pour fonction de prfigurer la consultation distance de l'ensemble des collections numrises de la BnF.
http://gallica.bnf.fr

International Federation of Libraries Associations and Institutions (IFLA). "Electronic Collections and Resources". Information Policy.

Plusieurs bibliographies sur la politique de l'information : ressources gnrales, Asie-Pacifique, Canada, Europe, tats-Unis, rseau communautaire, copyright et proprit intellectuelle, ressources sur la socit de l'information des pays du G-7, (Section Information Policy). Plusieurs bibliographies sur la bibliothconomie et les sciences de l'information : ressources gnrales, guides pour les documents lectroniques, prt inter-bibliothques, distribution des documents et partage des ressources, humour, organismes et socits, rglements, citations sur les bibliothques et les bibliothcaires, bibliothques nationales accessibles sur le Web. (Section Library and Information Science). Introduction sur UNIMARC, format MARC (Machine Readable Catalogue), international permettant le stockage et l'change informatique de notices bibliographiques. Plusieurs bibliographies sur les cyberbibliothques : ressources et projets, catalogage et indexation des ressources lectroniques, archives de textes lectroniques et de journaux, ressources en mtadata.

Support cours METH21F / G. Lacaze

11

http://www.collectionscanada.ca/

Internet Public Library (IPL), IPL Especially for Librarians : "Internet for libraries"

Liens avec plusieurs projets mens par les bibliothques pour utiliser Internet et largir ainsi les services de la bibliothque. La premire bibliothque publique d'lnternet et pour Internet. Propose notamment une cyberbibliothque d'ouvrages soigneusement slectionns, catalogus et rsums. En tant que bibliothque exprimentale, l'IPL s'efforce aussi de dcouvrir et promouvoir les projets les plus intressants concernant les bibliothcaires et Internet. Liste des bibliothques en ligne, journaux et priodiques en ligne, et textes en ligne.
www.ipl.org

Librairie Itinraires. Ou "le monde en mmoire".

Librairie parisienne proposant tous les ouvrages permettant de prparer, accompagner et prolonger un voyage : guides, cartes, manuels de conversation, ouvrages d'histoire, de civilisation, d'ethnographie et de religion, reportages, rcits de voyage, livres de cuisine, uvres de littrature trangre, livres d'art et de photographie, et cela sur plus de 160 pays, soit environ 250 destinations.
www.itineraires.com/

Library of Congress

Le site de la bibliothque nationale des tats-Unis, qui est la plus grande bibliothque au monde avec ses millions de livres, priodiques et ressources multimdia. Trs intressante section sur les ressources Internet. Dans le catalogue en ligne de la Library of Congress, la recherche s'effectue selon quatre procds : recherche par mots, recherche par liste, recherche par commandes par l'intermdiaire de Telnet pour la connexion LOCIS (Library of Congress Information System), et recherche exprimentale par l'Experimental Search System (ESS). L'ESS permet de rechercher les notices des collections.
http://www.loc.gov/index.html

"L'information pour les bibliothcaires sur Intemet : panorama des ressources".

Unit rgionale de formation l'information Scientifique et technique (URFIST) Strasbourg.


http://www-scd-ulp.u-strasbg.fr/

OCLC On line Computer Library Center

Un organisme but non lucratif destination des bibliothques, dont le but est la fois de favoriser l'accs l'information l'chelon international et de rduire les cots correspondants. Gre la plus grande base bibliographique mondiale avec ses 38 millions de notices (dbut 1998). A la fois service informatique et organisme de recherche, OCLC offre aussi toute une gamme de services ses adhrents : services techniques, partage des ressources, services de rfrence en ligne, prservation des documents, etc.
www.oclc.org

Project Gutenberg

Cre par Michael Hart en 1971, une grande cyberbibliothque anglophone dont le but est de mettre la disposition des usagers d'lnternet le plus grand nombre possible d'uvres littraires pour un cot minimal. Objectifs pour l'an 2001 : un stock de 10.000 uvres littraires et la transmission de 1.000 milliards de textes lectroniques, savoir 1O.OOO textes vers 1OO millions de lecteurs. http://www.gutenberg.org
Research Libraries Information Network (RLIN)

Cr par le Research Library Group (RLG) pour ses bibliothques membres, RLIN, accessible par abonnement, est le plus grand catalogue du monde avec ses 83 millions de notices. Contrairement au OCLC Online Computer Library Center, il propose plusieurs notices pour le mme document. Catalogue trs intressant aussi pour ses notices de livres anciens, documents iconographiques et ouvrages en caractres non latins. Support cours METH21F / G. Lacaze 12

www.rlg.org/ http://www.sudoc.abes.fr/

SUDOC. Systme universitaire de documentation

Le catalogue du Sudoc vous permet d'effectuer des recherches bibliographiques sur les collections des bibliothques universitaires franaises et autres tablissements de l'enseignement suprieur, ainsi que sur les collections de priodiques d'environ 2400 autres centres documentaires.
Universal Library

Cyberbibliothque cre par l'Universit Carnegie Millon (Pittsburgh, Pennsylvanie) et comprenant un index de plus de 5.000 textes anglais. Relie l'Experimental Search System (ESS) de la Library of Congress.
http://tera-3.ul.cs.cmu.edu/

Support cours METH21F / G. Lacaze

13

Lecture Rapide - Recommandations


La lecture rapide revient mettre lpreuve sa capacit de comprhension sans se perdre dans la masse des mots dun texte. Lil doit dcoller des mots. Cette pratique de lecture exige de canaliser lattention vers le sens, le contenu (prvoir, anticiper, reformuler). La comprhension dun texte est insparable de plusieurs lments : la qualit du prlvement des informations dans le texte ; la capacit de conserver ces informations jusqu la fin de la lecture (mmoire court terme) ; la capacit dexprimer ces informations dans son langage soi ; le niveau de comptence ou de familiarisation avec le sujet ; lattachement affectif ou la motivation lire au moment du test ; la raction du lecteur la lisibilit du texte (prsentation, typographie, mise en page, style, vocabulaire). Lionel BELLENGER, Les mthodes de lecture, Paris, PUF, Que sais-je ?, 1995 (1re ed. 1978), p. 24. Autres recommandations de Wolfgang Zielke, cit par Lionel BELLENGER, ibid., p.48-49. chercher le thme : souvent lintroduction met sur la bonne piste ; localiser les explications : cest le moment o lauteur dtaille le sujet ; chercher le mode dargumentation : ce sont les motifs qui vont justifier les affirmations ; trouver lantithse : ce sont les objections qui ont pu tre formules ; trouver les comparaisons : ce sont les analogies ou les diffrences ; reprer les exemples : en gnral, ils illustrent les ides ; chercher les tmoignages : cest le recours au sens commun, aux rfrences, aux citations, le recours aux valeurs ; simprgner de la conclusion : cest souvent retenir lessentiel La mthode amricaine du SQ3R (Survey, Question, Read, Recite, Revise) survoler le texte ; localiser lessentiel ; sinterroger sur ce que lon peut y trouver, lire, reformuler ce que lon a retenu, retourner aux passages essentiels ou mal compris. la mthode PQRST (Preview, Question, Reading, Summary, Tested) oriente le lecteur vers le mme genre de conseils : survoler, sinterroger sur le contenu, lire, rsumer lessentiel ou ce dont on a besoin, vrifier. Le SPIR (Survey, Preview, Inview, Review) de Tony Buzan : survoler, prvoir, approfondir, rviser.

Support cours METH21F / G. Lacaze

14

Grille de lecture des sites


Llaboration dune grille danalyse peut tre gnrale, mais doit aussi prendre un caractre particulier chaque discipline ou matire. La grille danalyse contient une partie gnrale didentification et de prsentation du site.

Contenu

Clart du contenu
Dtail de linformation

La crdibilit : lauteur
Identification de lauteur :

Institution/individu faisant autorit sur le sujet Mention nom dauteur pour chaque page, illustration / Prsence de copyright graphique Coordonnes et logo de linstitution Adresse du site prsente sur chaque page
Objectifs du site

1. 2. 3. 1. 2.

Accs lintgralit des documents Disponibilit suffisante des informations Importance et profondeur du site
Organisation logique

Le site est organis de faon logique, hirarchique Le regroupement de linformation dans chaque sous-partie est cohrent
Aspects didactiques

Prsence claire des objectifs // rsum ? Site informatif // commercial ou promotionnel Prsence de bannires publicitaires Identification claire du public concern
Visibilit du site

1. 2. 3.

1. 2. 3. 4. 5. 6. 7. 8. 1. 2. 3. 4.

Site et connu de faon notoire Adresse du site peut tre intuitive Site rcompens Appartient un rseau (Franco-sciences) ou dun anneau (Infobiogen) Prsence comit ditorial et/ou administrateur de site Site rgulirement cit Faciliment trouv par les outils de recherche Prsence dun compteur
Qualit de linformation

Le site a une relle utilit pdagogique Les objectifs dapprentissage sont clairement identifis Prsence utile et pertinence des illustrations ou des animations
Date de publication

1. 2. 1. 1. 2. 3. 4.

Prsence date de cration sur chaque page et/ou de mise jour Actualit (- de 3 mois)
Lien vers autres sources

Adaptation aux programmes universitaires Portail ou site ressources sur le sujet Site rput exhaustif sur le thme Le contenu du site attendu peut tre trouv (par rapport au titre, au descriptif) 5. Validit relative de linfo ( un pays ou temporaire) 6. Argumentation claire 7. Infos inutiles en dehors du sujet principal 8. Info : faits objectifs et donnes scientifiques impartiales 9. Style : humoristique et provocateur 10. Respect de la netiquette
Valeur de linfo

Quantit consquente de liens : Rsum ou valuation pour chaque pointeur Les signets sont organiss mthodiquement (par exemple par sujet) Lintitul du lien respecte les titres des pages auquel il renvoie Avez trouv des liens qui ntaient plus valides (liens aveugles = erreur400) ? Avez trouv des liens qui navaient aucun rapport avec le contenu scientifique principal du site
Lintractivit

1.

1. 2. 3. 4. 5. 6.

Crdibilit Mention des sources Bibliographie correcte et consquente Mthode dobtention des donnes clairement exprime Thorie ou controverse sur le sujet Prsence de dngation de lauteur

Prsence dune rubrique Nouveauts sur la page daccueil 2. Possibilit dajouter des informations dans le site, des signets, etc. 3. Possibilit denvoyer ses commentaires lauteur (mail, formulaires) 4. Prsence dun chat de discussion, dun forum 5. Possibilit de sabonner une lettre dinformation 6. Possibilit de se crer un profit utilisateur de consultation 7. Le site est disponible en plusieurs langues 8. Prsence de dictionnaires, glossaires, listes dabrviations pour aider la comprhension du lecteur

Support cours METH21F / G. Lacaze

15

Organisation

Organisation technique
Navigation

2. La prsentation est harmonieuse (choix des couleurs, des polices, etc.) 3. Une charte graphique est respecte sur lensemble du site
Aspects techniques

1. La navigation dans le site est-elle satisfaisante ? 2. Le menu du site est toujours visible lcran 3. Les pages intrieures sont accessibles rapidement (entre 3 et 5 clics) 4. Les boutons dorientation sont toujours les mmes et au mme endroit dans la page 5. Les boutons dorientation sont discrets et facilement comprhensibles 6. Les pages longues (au moins 3 crans en hauteur) proposent des sommaires internes 7. Il y a une barre de progression 8. On peut quitter le site trs facilement
Aide supplmentaire

1. Prsence dun moteur de recherche interne au site 2. Prsence dun plan du site 3. Prsence dun index gnral des fichiers du site 4. Prsence dune page daide 5. Prsence dune foire aux questions 6. Prsence dun livre dor 7. Prsence darchives du site 8. Page de redirection en cas de changement demplacement de fichiers

Organisation visuelle
Prsentation de linformation

1. Avez-vous remarqu des fautes dorthographe, de syntaxe, de grammaire, de langue, de traduction 2. Certaines pages sont-elles encore en construction ou vides 3. Les images, sons, graphiques et animations sont utiliss dans un but purement informatif ou didactique 4. Le texte est trs lisible (suffisamment gros, espac, etc.) 5. Les textes sont adapts pour tre imprim 6. Le multifentrage (cadres, frames) est-il utile pour la lecture de linformation ?

1. Les images ou certaines pages sont longues charger (plus de 10 secondes) 2. Le site est trop optimis pour un navigateur (I.E., Netscape, etc.) etc.) et pas assez pour le vtre) 3. Le site ncessite un quipement client trop avanc (version des navigateurs, plug-ins, flash, carte vido, etc.) 4. Le site contient des applets Java 5. Le site propose une version pour chaque navigateur 6. La configuration optimale est prcise (navigateur, plugins, plugiciels, applicatifs), rsolution dcran 7. Avez-Vous repr des morceaux de codes (HTML, JavaScript) certains endroits du site ? 8. Certains liens internes sont mauvais (mauvais noms de fichier, images non-transfres) 9. Il y a des ouvertures de fentres intempestives (pop-up) 10. Possibilit de dsactiver le son, la musique 11. Le site existe en version texte (pour les navigateurs refusant les images) 12. Le site utilise des cookies (mouchards) 13. La taille et le format des fichiers tlchargeables sont indiqus 14. Les fichiers sont tlchargeables en une seule fois (et non pas clats) 15. Les fichiers tlchargeables sont dans des formats universels (type RTF, PDF, etc.) et non pas propritaires 16. Certaines applications ncessaires sont proposes en tlchargement 17. Les balises Mta sont correctement remplies sur chaque page

Aspects graphiques

1. La page daccueil est complte dans un scut-cran (sans avoir besoin des ascenseurs)

Support cours METH21F / G. Lacaze

16

Astuces pour la cration de site


Les diffrents sites

Sites de premire gnration Les sites de premire gnration sont linaires. Si vous observez une page typique dun site de premire gnration, vous pourrez noter les restrictions quimposent les modems faible dbit et les moniteurs monochromes. La page comprend une suite de textes et dimages qui stend de haut en bas et de gauche droite de lcran, parseme de retour chariot et autres sparateurs de chanes de caractres tels que puces ou lignes horizontales. Toutes les structures HTML initiales taient bases sur ce modle de mise en page de type tlscripteur. Dans le meilleur des cas, ces sites ressemblaient des diaporamas projets sur un mur. Sites de deuxime gnration Ce sont globalement des sites de premire gnration o les icnes ont remplac les mots, les papiers peints les fonds griss et les bandeaux les titres. Ils ont adopt un modle de page daccueil descendant qui prsente une hirarchie dinformations. Bien que les sites de premire gnration dominent toujours en termes de volume, les sites de deuxime gnration sont plus apprcis parce quils comportent plus dlments graphiques. Les sites de deuxime gnration orientent le visiteur selon un mode associatif ou hirarchique. Les sites de deuxime gnration restent essentiellement bass sur les menus, les icnes et les technologies. Sites de troisime gnration Les sites de troisime gnration sont btis autour de principes de conception et non de comptences technologiques. Les concepteurs de sites de troisime gnration passent des journes entires rendre leurs pages attirantes aux yeux du public quils visent. Un site de troisime gnration applique des principes visuels de typographie et de mise en page pour dcrire une page en deux dimensions. Aujourdhui, les concepteurs spcifient scrupuleusement la position et les relations entre les diffrents lments dune page. Ils matrisent ainsi la mise en page.

Structure dun site

La plupart des sites de troisime gnration possdent une entre, une zone centrale avec une page centrale servant de point de dpart et une sortie clairement indique. Ces sites attirent les visiteurs en leur faisant miroiter quelque chose dextraordinaire sur chaque page. Pour appter le poisson, il faut lui donner quelque chose dapptissant. Avec la commercialisation du Web, attirer le client est pratiquement devenu une obligation. Une porte dentre Une porte dentre - galement appele cran Splash - doit se charger rapidement et signaler en un clin dil au visiteur ce qui se passe lintrieur. La premire qualit dun cran splash est de se tlcharger rapidement. Faites un petit cadeau vos visiteurs et un certain nombre dentre eux exploreront votre site. Faites preuve dimagination. Pensez quelque chose susceptible dintresser vos visiteurs, dont ils pourront parler leurs amis qui, leur tour, viendront jeter un coup dil. Les tunnels dentre conviennent parfaitement aux sites grand public. Limitez-les quatre ou cinq crans et rendez-les distrayants.

Support cours METH21F / G. Lacaze

17

La page centrale la diffrence du concept de page daccueil des sites de deuxime gnration, les sites de troisime gnration peuvent possder une ou plusieurs pages centrales destines organiser et prsenter le contenu du site. Elles orientent et conduisent le visiteur en Fournissant des liens vers des pages appropries ou dautres pages centrales. Celles-ci sont riches en informations et incitent poursuivre la visite. Fournissez une foule de liens internes et quelques liens externes. Insrez certains lments intressants chaque page. Les pages centrales utilisent des lments de contenu pour sduire et envoter. Servez-vous de dtails dimages et dextraits de textes pour guider votre visiteur. La sortie Paradoxalement, une sortie bien indique incite le visiteur rester. Les liens vers la sortie doivent tre la fois subtils et nombreux. vitez dinciter vos visiteurs quitter les lieux sans avoir vu la fin du spectacle. La page de sortie convient bien pour demander quelque chose vos visiteurs, par exemple de remplir un formulaire, dappeler un numro vert, denregistrer une commande, dajouter leur nom votre liste dadresses ou deffectuer une autre action. ce stade, ils sont disposs collaborer parce que vous avez rpondu leurs attentes. Les petits cadeaux fonctionnent aussi bien la sortie qu lentre. Si les gens parlent de votre site, sils y reviennent souvent, si votre mtaphore devient clbre et que votre porte dentre est sduisante, vous tes sur le bon chemin de lintrt rciproque. Lintrt rciproque consiste tre en phase avec son public. Si vous soignez les dtails lors de la ralisation dun site. Vous crerez un lieu o les gens aiment flner. Ce genre de flnerie cre lintrt rciproque. Plus lintrt est grand pour votre public, plus celui-ci sera reconnaissant par la suite. La mtaphore : un outil dexploration Les sites de troisime gnration utilisent efficacement la mtaphore. Une mtaphore puissante peut servir guider le visiteur et structurer votre site. Certains sites essaient de prsenter des mtaphores de galeries marchandes ou despaces physiques, qui sont fortement tributaires de graphismes en 3D. Vous vous retrouvez dambuler dans des couloirs, passer des portes, monter des escaliers, etc. Ces techniques fonctionnent bien avec des transmissions haut dbit ou des CD-ROM mais pas avec des modems. Limitez-vous des mtaphores lgres mais efficaces. Lastuce consiste traiter votre mtaphore en HTML pour quelle se charge rapidement. Les lments visuels cls de votre mtaphore devront tre suffisamment petits pour pouvoir tre prsents frquemment titre de renforcement. Les Icnes participent la conception des sites de troisime gnration. quilibrer mtaphores et comparaisons implique mesure et retenue.

Le thme : lamnagement interne du WEB

Tout ou presque peut servir de thme. Les meilleurs sont la fois subtils et cohrents. Les sites thmatiques sont plus difficiles crer que lon pense. La tentation est forte de les encombrer de sons, animations, polices, graphismes et de crer une confusion. Le recours des photos de qualit peut faire la diffrence. Sites but informatif Dans le domaine de linformation, les sites doivent satisfaire des visiteurs impatients daller droit au but. Ces sites ne peuvent pas se permettre de masquer linformation devant les artifices. Ils peuvent nanmoins devenir attractifs sans recours une foule dicnes et de bandeaux. La plupart des sites informatifs prsentent des pages interminables de texte et de listes puces avec une table Support cours METH21F / G. Lacaze 18

des matires (NOUVELLES / QUI SOMMES NOUS / CATALOGUE / QUESTIONSREPONSES / AIDE). Les meilleurs sont dots dun moteur de recherche qui permet aux visiteurs de trouver immdiatement certains lments, dans la mesure o ils savent ce quils recherchent. Le meilleur moyen dviter la surcharge consiste choisir un thme, simple et douvrir des portes mesure que le visiteur progresse. Insrez du contenu, de nouvelles informations et des possibilits de navigation sur toutes les pages. Offrez vos visiteurs quelques occasions de prendre des virages inattendus ou de consulter de nouvelles sections. Utilisez un thme en filigrane ou une mtaphore qui donnent envie de revenir sur votre site. Les sites informatifs doivent tre bien quilibrs. Ils doivent attirer de nouveaux visiteurs tout en fournissant aux habitus du site un moyen facile datteindre leur objectif. InfoSeek, un moteur de recherche trs apprci, prsente ses rsultats sous la Forme de tableaux dans la zone principale de la page et insre une slection de recommandations dans la marge de gauche. Cette valeur ajoute dans un tel site incite les visiteurs revenir. Ce type de site doit proposer la fois des possibilits de recherche et de navigation. Les efforts de conception sont encore plus visibles sur des sites informatifs. Les principes de la prsentation dinformations, de la conception interactive, de larchitecture et de la conception dinterface utilisateur, aideront les concepteurs de sites crer de nouveaux paradigmes de navigation dans dnormes volumes de donnes.

Prparation des images

Les images informatiques sont de deux types : les images bitmap et les images vectorielles. Les images bitmap sont composes dune infinit de points distincts (pixels) organiss en une grille large de x pixels, haute de y pixels et profonde de z pixels (la valeur z dsigne la profondeur de pixel et dtermine le nombre de couleurs possibles pour chaque pixel). Les images bitmap ont une dimension fixe, le volume du fichier croissant avec la taille et la rsolution de limage. Limage de lcran de votre moniteur est mise jour en permanence. Les images vectorielles sont des descriptions mathmatiques dimages (la formule dun cercle par exemple). Elles sont par consquent indpendantes de la rsolution et peuvent tre de toutes dimensions et rsolutions pour tre affiches sur diffrents moniteurs ou tre imprimes. Dans la terminologie traditionnelle de la conception graphique, les images bitmap reprsentent les dessins dcran, alors que les images vectorielles reprsentent les dessins au trait (les photos, par exemple, par opposition aux plans). Si les concepteurs professionnels ont gnralement des machines capables dafficher des images 24 bits, la plupart des ordinateurs grand public sont dots de couleurs 8 bits. Ils ne sont donc pas capables dafficher plus de 256 couleurs la fois. Il est faux daffirmer que la taille dun fichier croit de manire significative ds que vous augmentez le nombre de couleurs puisque, sur le Web, les images sont toujours transmises sous forme compresse. Le paramtre qui affecte le plus la taille des fichiers est leur compressibilit. Palettes Il existe deux formats de stockage des images bitmap, le format index et le format RVB.Les images au format RVB - galement appel format quadrichromie ou true-color - utilisent les 8 bits (0 255) des valeurs Rouge, Vert et Bleu pour former un pixel de 24 bits (8 + 8 + 8 = 24). Les images de 256 couleurs (ou moins) sont appeles images indexes. Une palette de couleurs est associe chaque image et appele color-look-up-table ou CLUT. Elle permet de dfinir jusqu 256 couleurs en assignant un nombre chacune delles. Limage fait rfrence ensuite chaque couleur par sa position dans la palette.

Support cours METH21F / G. Lacaze

19

Le cube de couleurs Le navigateur Netscape possde sa propre palette appele cube des couleurs qui permet dafficher des images sur les moniteurs 256 couleurs de toutes les plates-formes. Pour gnrer des images, lorsque vous utilisez Painter ou Photoshop, essayez de vous servir des couleurs du cube. Il suffit de veiller, en rgle gnrale, appliquer des couleurs du cube aux plus grandes zones et ainsi viter des juxtapositions trop voyantes. Il existe plusieurs mthodes pour verser des images dans le cube. Le logiciel - DeBabelizer propose le plus large choix. Dans Photoshop, servez-vous de la commande Palette personnalise et chargez le cube des couleurs au titre de palette personnalise (Il nexiste ce jour aucun moyen denregistrer le cube de couleurs de faon permanente sous Photoshop). Le dilemme est de savoir si vous devez faire des juxtapositions ou non. Il vaut toujours mieux viter den faire. La juxtaposition donne meilleure allure aux images photographiques mais les rend plus difficiles compresser. Lissage En un mot, le lissage consiste ajouter des couleurs intermdiaires pour raboter les dentelures qui apparaissent entre deux zones unies. Pour rduire la taille des fichiers, vous devez lisser avec le moins de couleurs possibles. Mais, lheure actuelle, aucun programme nest capable deffectuer cette opration automatiquement. Cest pourquoi vous devez lisser toutes vos images la main, procdure certes difficile mais ncessaire. Le lissage est particulirement utile si votre arrire-plan possde un motif mais, dans la plupart des cas, il suffit de rduire le contraste de limage place larrire-plan pour obtenir un bon rsultat. Si vous modifiez la couleur de Fond dune image lisse, vous obtenez un effet de halo. Cest un dfaut quil faut viter. Pour le moment, veillez prendre larrire-plan en compte chaque fois que vous ralisez une image et lissez-la convenablement en fonction de cet arrire-plan particu1ier. La compression GIF Omniprsent sur le Web, le format GIF traite des images indexes dun maximum de 8 bits. Le processus de compression GIF (algorithme LZW) est dit sans perte, ce qui veut dire que limage dcompresse obtenue larrive est identique loriginal. Le taux de compression moyen des images GIF est de 4 :1. En rgle gnrale, utilisez la compression GIF pour tout ce qui nest, pas photographie (ou alors pour du texte, des dessins au trait et de petites photographies). Entrelacement Une image entrelace stocke les pixels dans un ordre non linaire. Les images entrelaces arrivent sur votre navigateur en blocs galement espacs. Une fois que le premier bloc est tlcharg, le navigateur rpte les donnes de ce premier bloc et fournit ainsi une version grossire de limage finale, afin que les netsurfers aient une ide de limage venir. Dautres portions viennent ensuite complter cette image en trois passes supplmentaires. Cest un excellent exemple de standard conu spcialement pour le monde cyber. Pour entrelacer une image, cochez la case Entrelac du logiciel qui effectue la compression GIF. Une image entrelace est lgrement plus grande quune image non :entrelace. Dans la pratique, utilisez lentrelacement pour toute image dun format suprieur 200 x 200 pixels. Transparence Dans les images gif89a, vous pouvez dfinir une couleur comme couleur transparente. Tout navigateur acceptant le format gif89a affichera tous les pixels de limage de cette couleur en transparence, permettant ainsi larrire-plan dtre visible. Cest ce quon appelle lincrustation couleur. Vous ne pouvez toutefois choisir quune seule couleur transparente dans votre image. Elle Support cours METH21F / G. Lacaze 20

est remplace partout o elle apparat. Tout pixel proche de cette couleur - mme proche au point de ne pas en tre distingu - ne sera pas rendu en transparence. Des images correctement lisses avec des effets de transparence constituent les lments de base dun site de troisime gnration. Elles permettent aux concepteurs de rompre avec les images rectangulaires. Nappliquez jamais lentrelacement et la transparence simultanment. Leur application simultane est une source connue de problmes avec certains navigateurs. Animation Le format GIF permet dimbriquer plusieurs Images GIF en un seul fichier pour crer une animation. Les GIF anims sont faciles raliser. Ils possdent mme diffrentes options daffichage, pour une animation continue ou un effet diaporama. Pour raliser un GIF anim, crez toutes vos images aux formats Pict ou BMP et faites-les passer par votre programme de fabrication danimations GIF. Il rduira les couleurs une palette commune toutes les images, les regroupera au format GIF et runira le tout sous la forme dun seul fichier GIF anim. Si vous utilisez des fichiers GIF au lieu de fichiers PICT, veillez, ce quils aient tous la mme palette de couleurs. Les G IF anims peuvent accepter des intervalles entre deux images successives par incrments dun centime de seconde, ainsi que des passages en boucle finis ou infinis. Les images GIF89a sont plus faciles raliser et plus souples que les anciens scripts CGI aliments par serveur. Une fois que le fichier image est tlcharg dans la mmoire client, il peut continuer tourner mme si la connexion est interrompue ou suspendue. En dpit de leur popularit, plus vite vous vous dbarrasserez des standards GIF, mieux cela vaudra. Le traitement de photo Le format JPEG (nom courant du format dimage bitmap dfini par le Joint Photographic Expert Group) est le meilleur moyen pour compresser des images photographiques. Toutefois, cause de la surcharge quil implique, il nest pas trs adapt aux petites images ou aux dessins au trait. JPEG est un processus dit perte. Des informations sont toujours perdues au cours de la compression. Une fois compresse par JPEG, mme en appliquant les meilleurs paramtres, limage est diffrente de la version RVB originale. Pour le Web, servez-vous des JPEG de faible qualit car ils sont trs fortement compressibles. Les taux de compression de JPEG vont gnralement de 10:1 100:1 en fonction du paramtrage de qualit. Plus la compression est leve, plus le fichier sera petit (plus il aura perdu dinformations). cause de la surcharge impose par le format JPEG, le format GIF est prfrable pour de petites images. Lobjectif de lutilisation du format JPEG nest pas de rduire le nombre de couleurs mais la taille du fichier. Cest la raison dtre des paramtres de qualit. Si votre programme vous propose les options Basse Qualit, Qualit Moyenne et Haute Qualit, choisissez loption la plus basse. Vous serez surpris de la qualit des JPEG de basse qualit. La fonction Masquer Flou renforce la nettet de limage et gonfle le fichier JPEG rsultant ; le flou gaussien le rduit. linstar des fichiers GIF entrelacs, les fichiers JPEG progressifs sont lgrement plus volumineux que les non-progressifs. La plupart des navigateurs majeurs sont aujourdhui en mesure dafficher des JPEG progressifs. Une erreur courante consiste croire quil faut rduire le nombre de couleurs pour rduire la taille dun fichier. Bien que cette technique fonctionne souvent, il ny a pas de relation de cause effet direct. Lorsque vous travaillez sur des images compresses, ne rflchissez pas en termes de trois dimensions (x par y par z) mais plutt en termes de schma de compression et de paramtres de compression. Nombreux sont ceux qui utilisent des images 8 bits sur leurs sites Web, ce qui nest en aucun cas indispensable. La plupart de nos images comprennent de lordre de l5 35 couleurs, Support cours METH21F / G. Lacaze 21

35 reprsentant dj un nombre apprciable de couleurs. Mme sans juxtaposition, vous serez surpris de voir quune palette assez rduite peut trs bien convenir. Dans quels cas la rduction du nombre de couleurs permet-elle de rendre une image plus compressible ? Dans la pratique, dans la plupart des cas. Limage moyenne que vous souhaitez insrer dans une page Web comporte une part de tissage et cest dans ce domaine que la rduction de couleurs peut avoir un effet. Dans la mesure o le lissage introduit un trs grand nombre de teintes subtiles, la rduction de ce nombre permet de crer des sries horizontales de plusieurs pixels. Palettes de couleurs Bien quil existe plusieurs mthodes diffrentes de rduction des couleurs, utilisez une palette de couleurs adaptable qui permet lordinateur de vous aider reconstruire limage avec un nombre plus faible de couleurs. Lorsque vous pratiquez la rduction de couleurs laide dune palette adaptable, Photoshop applique un processus trs labor pour conserver les couleurs de votre image. En coulisses, Photoshop fabrique un histogramme de toutes les couleurs qui composent votre image en les classant par frquence. Dans la pratique, des images simples atteignent un bon taux de rduction parce que lalgorithme de coupe mdiane de Photoshop recherche les zones de couleurs diffrentes et essaie au mieux de les conserver (au dpens des couleurs intermdiaires). Peu dutilisateurs savent que Photoshop se sert de la slection courante au cours du processus de rduction de la palette comme zone de rfrence de lhistogramme. Rduire les couleurs sans effectuer de slection permet de construire un histogramme partir de limage entire. Si vous choisissez des zones plus importantes, vous pouvez effectivement supprimer des zones de lhistogramme et ainsi orienter lopration dans le sens des couleurs souhaites. Un dcalage peut se produire parce que Photoshop rduit les couleurs dun espace chromatique 24 bits (8 x 8 x 8) un espace chromatique 15 bits (5 x 5 x 5) avant dexcuter son algorithme de coupe mdiane pour trouver la meilleure palette. Aprs rduction, la palette 15 bits rsultante reoit quelques bitt supplmentaires pour devenir une palette finalise en RVB.Ces bits supplmentaires provoquent le dcalage de couleurs que vous percevez, et qui provoque son tour une zone avec superposition lorsque limage est affiche sur un navigateur ne disposant que de 256 couleurs. Adobe devrait fournir la solution sous la forme dune extension dexportation true-color, pour le moment, servez-vous de DeBabelizer pour finaliser les rductions de couleurs parce quil ne provoque aucun dcalage . Lorsque vous voyez une page Web safficher, votre navigateur tlcharge les GIF et les dcode pour les reconstituer leur taille relle (x x y x z) et les afficher lcran. Les images GIF gonflent toujours la taille de limage (paramtres x et y) multiplie par 8 bits (un octet) ou plus (avec Netscape sur Macintosh, les GIF gonflent 8 bits, mais les GIF PC gonflent en fonction de la profondeur de couleur du client). Le cas des images JPEG est encore pire. Elles subissent une inflation qui remplit systmatiquement la profondeur de couleur du systme rcepteur. Si vous pouvez afficher des millions de couleurs et que vous chargez ce mme fichier de 500 x 500 x 2 bits, il gonflera 500 x 500 x 24 bits = 750 Ko. Rduisez dabord les dimensions et la complexit de vos images, allongez ensuite les sries, peaufinez vos images la main et jouez sur les histogrammes si ncessaire avant dajouter de nouvelles couleurs. Passez au format JPEG plutt que dutiliser des juxtapositions dans un GIF. Comparez la taille des fichiers obtenus avant de retenir un format dfinitif. Une bonne image est une petite image. Efforcez-vous toujours datteindre le nombre minimum de couleurs en respectant la vraie Rgle dOr de la rduction de taille de fichier. Les navigateurs de demain devraient mettre notre disposition des fonctions qui nous soulageront de ces tracas, mais, en attendant, usez avec une extrme parcimonie dimages de grandes dimensions, quelle que soit leur taille compresse. Support cours METH21F / G. Lacaze 22

Mise en page

Du fait des limites actuelles de HTML, le dfi majeur du concepteur de site de troisime gnration est de sassurer quil matrise entirement la disposition des lments sur sa page. Vous quilibrez vos lments visuels par rapport aux blancs - les zones qui nont aucun lment en manipulation directe. HTML noffre pas aux concepteurs de site un cadre de travail propre la manipulation directe en deux dimensions. Ils disposent principalement de deux astuces : celle du GIF pixel unique et celle du tableau invisible. Chacune de ces astuces nest quun palliatif. Elles permettent au concepteur de matriser le processus de mise en page, mais pas de la meilleure faon. Le GIF Pixel unique Cet outil trs utile est actuellement disponible sur des dizaines de milliers de sites Web. En crant une image transparente dun pixel sur un pixel, vous pouvez utiliser les attributs despacement et de positionnement de HTML pour placer vos lments votre guise ou presque sur votre page. Cette astuce permet de crer des retraits de paragraphe et autres effets typographiques. Pour dimensionner une image, incluez les arguments WIDTH=X et HEIGHT=Y dans la balise <IMG>. Le GIF pixel unique va sagrandir pour atteindre x pixels de large et y pixels de haut. Vous devez la fois indiquer la largeur et la hauteur dune image pour la positionner correctement. Pour crer un espace autour dune image, vous devez inclure les arguments HSPACE=X et VSPACE=Y dans la balise <IMG>. Si vous utilisez HSPACE=X, votre navigateur affichera x pixels despace des deux cts de votre GIF pixel unique, la largeur effective devenant alors 2x+1 pixel. Vous pouvez ainsi positionner des graphismes et des tableaux par incrments de deux pixels, Vous avez la possibilit de spcifier chacun de ces arguments indpendamment lun de lautre. Dans la pratique, HSPACE et VSPACE sont plus utiles, parce quils peuvent tre utiliss indpendamment lun de lautre. Le tableau invisible Dsactivez toujours les bordures de tableau en insrant largument BORDER=0 dans la balise de <table>. Les tableaux sont rem plis de piges. Rien ne remplace le temps et la patience lorsquon manipule les tableaux. De plus, les navigateurs Netscape et Microsoft ont des comportements diffrents dans laffichage de tableaux. Les pixels de donnes vhiculent du sens, alors que les pixels de non-donnes tablissent la structure de ces donnes. La rgle gnrale consiste rduire les pixels de non-donnes et augmenter les pixels de donnes. Utilisez des largeurs absolues. Les tableaux sans contrainte donnent les meilleures mises en page quels que soient les lments que vous placiez dans ces tableaux. Mieux vaut spcifier la largeur des cellules et laisser le navigateur dfinir celle du tableau. Vous pouvez spcifier la hauteur et utiliser la balise <TD VALIGN=bottom>, mais dans ce cas, tout sera regroup au bas du tableau. En gnral, les tableaux stendent ou se rduisent en fonction du contenu afficher. Pour grer la largeur des cellules, il faut quelles soient relatives ou absolues. Pour spcifier des largeurs de cellules relatives, utilisez <TD WIDTH=x %>, o X reprsente !e pourcentage de la largeur du tableau contenant la cellule. Les largeurs relatives permettent de crer des tableaux souples qui se remettent en forme lorsque les dimensions de la fentre changent. Les largeurs de cellules absolues (utilisez <TDWIDTH=x>) permettent de dfinir une largeur en pixels. La taille de ce type de cellule ne change pas, mme si les dimensions de la fentre varient. Utilisez les balises CELLSPACING et CELLPADDING pour garantir la prsence de blancs. Pour le concepteur, les balises cellpadding et cellspacing sont identiques. La balise cellpadding permet de dcrire la distance qui spare le contenu dune cellule de ses bordures, alors Support cours METH21F / G. Lacaze 23

que la balise cellspacing dcrit lespace qui entoure une cellule. Servez-vous de la balise cellspacing pour crer une ruelle lorsque vous voulez sparer deux colonnes par un espace donn. Cette technique est particulirement utile pour la conception de formulaires. Utilisez des cellules de tableau pour emboter des images horizontalement et verticalement. Utilisez les alignements pour justifier votre texte droite. LAlignement fonctionne aussi bien pour le texte que pour les images. Servez-vous surtout de lalignement pour aligner des lments le long de la bordure droite dune cellule, lorsque vous voulez provoquer un effet typographique, du type ruelle ou forme. Concernant le texte justifi, un constructeur de navigateurs permettra tt ou tard aux concepteurs de lutiliser sur le Web. Ne vous laissez pas tenter ! Prservez-vous des dfauts despacement de mots. Justifier du texte droite et gauche convient pour les romans ou autres publications forte densit textuelle, mais il faut en user avec prcaution et le Web nest pas le lieu le plus appropri. Imbriquez vos tableaux uniquement en cas de ncessit. Utilisez les tableaux imbriqus pour fabriquer des structures plus grandes o insrer plusieurs tableaux. Cest souvent une bonne solution de remplacement aux cadres. Ils sont difficiles mettre au point, mais peuvent tre utiles dans des cas complexes. Matriser les techniques fondamentales tableaux invisibles et GIF pixel unique et vous serez prt crer des sites dynamiques. Espace blanc vertical Dans un site, lutilisation systmatique des espaces blancs peut grandement amliorer la prsentation du texte et en faciliter la lecture et la comprhension.
Matrise des espaces blancs verticaux

La balise <P> nest pas tellement utilise dans un site de troisime gnration. Entre les sections, insrez la quantit despace approprie en vous servant dun GIF pixel unique suivi dune balise <BR>. Appliquez un blanc de huit dix pixels avant un titre et placez un blanc plus grand avant un titre principal quavant un intertitre. Servez-vous de sections et de pages pour subdiviser vos textes.
Bannissement des rgles horizontales

Nutilisez pas de rgles horizontales dans vos sites. Elles sont inutiles et crent des ruptures dans la fluidit du texte. HTML ne vous permet pas de grer linterlignage. Les typographes qui souhaitent insrer du blanc entre les lignes doivent recourir la technique du GIF pixel unique, qui, dans ce cas, fait office dinterlignage du pauvre. En insrant entre les mots la fin de chaque paragraphe de minces GIF pixel unique verticaux, vous russirez crer un texte avec interlignage. Lattribut GJF VSPACE=8 insre huit pixels de blanc avant et aprs limage. Les lignes se repoussent littralement les unes les autres mesure quelles saffichent sur la page. Les intertitres (voir ci-avant) doivent tre troitement associs aux paragraphes qui les suivent. Insrez un espace lgrement plus grand plutt entre un intertitre et la premire ligne dun paragraphe quentre les lignes successives dun mme paragraphe. Pour obtenir un tel espace, utilisez un GIF pixel unique avec VSPACE=l entre lintertitre et le premier paragraphe. Quelle que soit la mthode employe, ninsrez jamais une ligne blanche entre un intertitre et le paragraphe associ. Voici une raison supplmentaire pour placer un retrait au dbut du paragraphe qui suit : lensemble apparatra accroch lintertitre et un espace vertical plus grand permettra dindiquer quil sagit dune nouvelle section. Intertitres, retraits, marges et colonnes troites sont les marques de fabrique de la typographie daujourdhui. Puces Comme les rgles horizontales, les puces remplissent de lespace libre lorsque lon place un certain nombre dlments de listes sur une page. Dans le cyberespace, les pixels sont gratuits et Support cours METH21F / G. Lacaze 24

personne ne doit se soucier de la longueur des pages. Les puces sont un pis-aller pour les listes. Elles sont laides et gure utiles, parce quelles sont toutes semblables et ne vhiculent aucune information effective. Les marqueurs de statut doivent tre soigneusement tudis et il ne faut pas se contenter de puces rouges, vertes ou bleues. Dfilement Le droulement est banni des interfaces utilisateur classiques. Cest trs bien ainsi compte tenu de la faon dont il se prsente, mme si le dfilement nest pas intrinsquement mauvais. Pour remplacer le mcanisme traditionnel du droulement, utilisez un plateau bascule (une variante en deux dimensions de linterrupteur bascule) plac dans langle infrieur droit de la fentre. Dans la pratique il nest pas drangeant dutiliser un peu de dfilement. Si la longueur est bien calibre, un dfilement harmonieux peut mme tre assez efficace. La rgle est de ne faire dfiler devant les yeux de lutilisateur quun maximum de six crans avant de passer une nouvelle page. Trouvez un moyen en utilisant une page avec des sous-entres ou une page distincte par lettre, ou encore des cadres. Espace blanc horizontal laide de cellules de tableaux invisibles et de GIF pixel unique. Des marges et des retraits peuvent transformer le texte bord bord le plus rbarbatif en colonnes lisibles.
Espacement entre lettres

Les majuscules, en revanche, peuvent tre espaces, laide de Photoshop, vous pouvez crer des mots de belle allure entirement crits en lettres capitales et qui se tlchargeront rapidement. Attention aux espaces laisss entre les mots. Sils ressemblent aux espaces laisss entre les lettres, vos capitales sont trop espaces.
Retraits

Servez-vous du GIF pixel unique pour :placer un retrait en dbut de paragraphe prcd par un autre. Les retraits sont des signaux. Ils ne signalent pas le dbut dun nouveau paragraphe mais le passage entre deux paragraphes associs, parce quaucun autre lment ny parvient aussi efficacement. <BR><IMG VSPACE=0 HSPACE=8 SRC= resources/dot_clear.gif > Cration de marges Pour insrer une marge de gauche, crez un tableau deux colonnes, laissez la cellule de gauche vierge et placez votre texte dans la seconde cellule. Le meilleur moyen de dfinir la largeur ~dune cellule de marge consiste la fixer~ en valeur absolue et y ajouter un GIF pixel unique pour s assurer qu'elle reste ouverte. Cette approche peut avoir lair redondante, mais, comme les navigateurs voluent constamment, elle peut vous faire gagner beaucoup de temps. En rgle gnrale, ne centrez jamais une colonne de texte. Assurez-vous donc quil existe une relation parfaite entre une colonne de texte et sa marge de gauche. Il ny a aucun moyen de garantir la prsence dune colonne droite, moins que votre colonne de texte ne soit de taille relative. Si vous tes amen utiliser une largeur de colonne relative pour assurer la prsence dune marge de droite, commencez par des largeurs de cellules respectives de 25 %, 65% et 10 % de la largeur totale de la page. Longueur de ligne Les longues lignes de texte empchent de revenir facilement la marge de gauche pour saisir la ligne suivante. Idalement, chaque paragraphe ne devrait pas contenir plus de 10 12 mots dans des conditions de lisibilit normale. Mais cet aspect chappe au contrle du concepteur, puisquil Support cours METH21F / G. Lacaze 25

ne peut pas connatre la taille des polices de ses visiteurs sur le Web. Les cellules dune largeur de 380 conviennent. Une cellule de 200 pixels est trop troite et tout ce qui dpasse 450 trop large pour assurer une bonne lisibilit. Dcalages et alignement Vous avez rencontr le redoutable problme, du dcalage de navigateur. Conclusion : un dfaut dalignement entre le premier-plan et larrire-plan est quasiment invitable. Le besoin dun alignement prcis a entran la cration cet effet deux attributs de balise : LEFTMARGIN et TOPMARGIN. Ils ne sont pas paramtrs zro par dfaut pour des besoins de compatibilit descendante) mais ils permettent datteindre des points quaucune autre balise avant eux ne pouvait atteindre : les bordures de la fentre du navigateur. Cadres et ensembles de cadres Les cadres, fonction puissante de Netscape Navigator 2.0. placent le Web sur une nouvelle voie. Ils vous permettent dafficher plusieurs URL sur une mme page et de les organiser votre guise. Malheureusement, ces outils puissants peuvent devenir des armes mortelles. Le cadre est un format mta-document cest--dire quil affiche simultanment plusieurs documents HTML. Le cadre nest pas du HTML. Pour fabriquer un cadre, vous devez dcrire un document ensemble de cadres qui contient un certain nombre de cadres ou fentres contenant des documents HTML. Vous pouvez spcifier la taille absolue ou relative de ces fentres. Les cadres sont laids car on ne peut les rgler sur zro. Pouvoir colorer les bordures de cadre est agrable ; pouvoir les rgler sur zro est indispensable dfaut de pouvoir raliser une page de cadres esthtique. Les cadres ne peuvent pas rsoudre tous vos problmes. Ils provoquent le chargement de plusieurs pages, ce qui ralentit la navigation. Les concepteurs de site sen servent pour compenser une conception, boiteuse ou une absence totale de vision globale. On utilise les cadres pour trois raisons : pour crer des hirarchies, par plaisir et pour visualiser des index de bases de donnes horizontales. Les cadres ne sont utiliss que pour rendre une page agrable . De la mauvaise conception ltat pur. Nombre sont ceux qui utilisent les cadres pour prsenter des hirarchies. En rgle gnrale, ne placez jamais de cadres sur la premire page dun site. Le concept de cadre est bon, mais il est source de problmes - en particulier sur le plan de 1interface - et il nest pas suffisamment au point pour tre utilis. Utilisez les cadres pour prsenter des index dans des espaces de base de donnes horizontales qui, en HTML, seraient mal conus parce quils occuperaient un nombre trop lev de pages. Les cadres sont particulirement bien adapts aux pages de catalogue car ils vous permettent de basculer davant en arrire pour comparer entre eux plusieurs lments. Dans ce cas, faites de la page de cadres une destination cest--dire une impasse. Lorsquils ont termin, les internautes peuvent soit cliquer sur le bouton Retour soit utiliser un lien qui comporte la commande TARGET= top , pour supprimer les cadres et revenir un document HTML standard. Une utilisation matrise des cadres dans ce type de situation vous permet dtendre vos bases de donnes et de faciliter la comparaison dlments dans la fentre cible. Les concepteurs de sites de troisime gnration disposent soigneusement tous leurs lments. Ils rduisent au minimum les pixels de non-donnes et prsentent les pixels de donnes avec le plus grand soin. En attendant quune technique plus sophistique nous soit propose, nous utilisons les techniques du GIF pixel unique et du tableau invisible.
Cration typographique

Les bons concepteurs sont trs pointilleux en ce qui concerne les polices et les styles. Cest pourquoi ils insrent des polices dans leurs sites Web en crant des images typographiques sous Support cours METH21F / G. Lacaze 26

Photoshop et en incluant ces graphismes laide de la balise <IMG> dans HTML. Utilisez uniquement des GIF pour vos images typographiques car le format JPEG donne des rsultats flous. Rduction des caractres sous Photoshop Le meilleur moyen de reproduire des caractres consiste les crer dans une trs grande taille puis de confier Photoshop la tche de les rduire. Pour linstant, si vous voulez reproduire un caractre dune taille infrieure 20 points, gnrez dabord ce caractre 80 ou 140 points, puis rduisez-le la taille souhaite. Photoshop ne propose aucun paramtre numrique dans sa commande Image> Effets> Homothtie.Vous pouvez contourner le problme en crant un fichier GIF. Dernire opration : transformer un caractre en image GIF est un travail fastidieux. Comme les ultimes modifications arrivent gnralement la dernire minute, attendez davoir la dernire version avant de finaliser ces images typographiques. En une seule passe : 1. Rduisez (indexez) les couleurs du fichier matre au nombre minimum acceptable. 2. Slectionnez puis coupez soigneusement chaque caractre individuel en veillant ne laisser aucun espace autour des bordures. 3. Collez chacun de ces lments dans un nouveau fichier en notant les dimensions de chaque image. 4. Exportez les GIF de ces nouveaux fichiers en appliquant une palette exacte et en donnant des noms identifiables aux fichiers. 5. Insrez les dimensions et les chemins daccs des fichiers GIF dans vos balises <IMG>. Si la taille des images varie, dressez une liste des fichiers GIF au fur et mesure que vous les enregistrez. Vous en aurez besoin au moment du codage HTML. Conserver des archives Photoshop ne conserve pas le texte que vous saisissez sous la forme dun texte. Cest pourquoi vous avez pris lhabitude de conserver tous vos textes dans un fichier de traitement de texte. Prenez ce dont vous avez besoin dans ce fichier et collez-le dans la bote de dialogue de loutil Texte de Photoshop. Possder un tel document dans ses archives permet de traiter, en un clin dil les rvisions invitables. En revanche, si vous voulez placer vos caractres le long dune courbe ou leur appliquer un autre type deffet, vous devez gnralement les transfrer partir dun logiciel comme Illustrator. Rduction des couleurs, allongement des sries Les caractres ont meilleure allure quand ils ne prsentent pas de dentelures malheureusement, le lissage introduit de nombreuses couleurs intermdiaires le long des bordures. Cherchez toujours rduire au minimum le nombre de couleurs de transition tout en conservant leffet satin du lissage. Vous navez que trs rarement besoin de plus de six couleurs intermdiaires lorsque vous dessinez des caractres sur un fond en a-plats. Si vous dessinez des caractres sur un fond uni, vous navez gnralement pas besoin de plus de quatre couleurs intermdiaires. Dans certains cas, vous pouvez vous passer du lissage. Si vous avez une grande zone de caractres et devez rduire la taille des fichiers, ou si vous choisissez une prsentation sans arrondis, vous pouvez essayer de dessiner des caractres sans lissage.

Support cours METH21F / G. Lacaze

27

La graisse La fonction transparence de Photoshop foncera lgrement les couleurs intermdiaires. Vous pouvez ensuite superposer le transparent la couche copie pour modifier la graisse des lettres. Si vous voulez encore augmenter la graisse, copiez le caractre et recollez-le en le faisant glisser dun pixel vers le haut ou vers le bas (mais pas simultanment dans les deux sens). Cette technique est utile lorsque la graisse normale est insuffisante et que le gras est trop pais ou non disponible. Ne dcalez jamais de plus dun pixel dans lune ou lautre direction. Juxtaposition chez le client Si vous laissez le programme client (dans ce cas le navigateur) effectuer la juxtaposition (ce qu'il fait automatiquement pour des couleurs non comprises dans le cube), vos visiteurs capables dafficher plus de 256 couleurs en profiteront, alors que les autres, moins bien quips, ne verront pas la diffrence. La taille du fichier ne change pas. Retouches la main Retouchez, remplissez et arrondissez les pixels gars. Prparez-vous y consacrer des heures entires si vous vous lancez dans le lissage. Faites attention, car si vous fates trop de retouches, vous allez dtriorer la graisse de vos lettres. Espacement fin Les mots en capitale doivent tre largement espacs, de faon que chaque lettre saffiche distinctement dans son propre espace. Les polices de qualit comportent de nombreuses paires avec crnages intgrs, de faon que certaines combinaisons de lettres aient automatiquement bonne allure dans des logiciels comme PageMaker. Ombrages Les ombrages sont mal compris et trop utiliss. Les meilleurs ombrages permettent de mettre en vidence les bordures. Les sites de troisime gnration ne comptent pas sur les caractres en 3D pour crer des effets saisissants. Pour crer un ombrage, recopiez lobjet dans sa propre couche en le faisant glisser sur licne Nouvelle couche. En rduisant la luminosit et le contraste, assombrissez Fortement la nouvelle couche. Placez-la ensuite sous la couche objet et faites-la glisser jusqu ce que 1ombrage apparaisse avec un dcalage dun pixel. Aprs avoir masqu le cadre, servez-vous des touches flches pour dplacer la couche ombrage vers la gauche puis vers la droite afin de dterminer quelle orientation est la meilleure. Si ncessaire, descendez de deux pixels. Parfois trois. Mais rarement plus. Une fois que vous avez choisi votre ombrage, veillez bien donner la mme allure tous les ombrages dune mme page. Si vous voulez reprsenter leffet produit par plusieurs sources lumineuses, revoyez votre conception. En effet, les ombrages ne donnent pratiquement jamais de bons rsultats dans ce cas de figure. Les ombrages peuvent tre de nimporte quelle couleur, du moment que leffet obtenu est satisfaisant. De prfrence choisissez une teinte plus sombre que la couleur de larrire-plan. Vous aurez tout de mme besoin de bordures lisses. Testez-les en mode daffichage 256 couleurs avant de les livrer. Lettrines Elles doivent tre belles. Procurez-vous quelques jolies polices de caractres daffiche ou des polices spciales de lettrines et ralisez ~~ des premiers paragraphes de belle facture. Il existe deux types de lettrines : les lettrines bornes et les lettrines non bornes. I2]. Les premires possdent un fond transparent. Elles sont entoures dun cadre avec ou sans bordures. Elles devraient toujours tre insres dans le paragraphe. Le texte dbutant partir du haut de la lettrine. Ajoutez De l'espace autour du cadre pour que le texte (ne soit pas coll la lettrine. Les caractres daffiche donnent les meilleurs rsultats. Les secondes peuvent tre insres dans le texte, tre places dans la marge ou y empiter (en occupant une cellule de tableau distincte). Coupez la bordure droite trs Support cours METH21F / G. Lacaze 28

prs du caractre. Insrer une lettrine non borne, de la mme couleur que les autres caractres, est un moyen astucieux de dbuter une nouvelle page. !~.Une bonne rgle pratique : n'employez jamais plus d'une lettrine par page Lgendes Une petite lgende place sous chaque image dun article naugmente que lgrement la taille du fichier, mais garantit un lien efficace entre lgende et image et vous vite davoir traiter cette question ultrieurement. Najoutez que quelques pixels de blanc entre une illustration et sa lgende. Prsentez-les en caractres gras, ou dans une couleur contraste. vitez toutefois les italiques, peu lisibles en petite taille sur des crans dordinateur. Veillez simplement conserver un bon taux de compressIon en liminant les couleurs intermdiaires superflues Petites capitales Commencer un nouveau chapitre ou un article de magazine Web par quelques mots en petites capitales attire lattention en invitant le lecteur lire cette ligne puis poursuivre sa lecture. Utilisez-les pour des effets demphase : titres, noms, formulaires, invitations, (des invitations Web avec des URL secrtes sont plus amusantes que des invitations imprimes), documents importants, etc. Cest une touche agrable sur une page qui comporte dj de nombreuses images ou laquelle vous souhaitez donner, peu de frais, un aspect formel. Les capitales rduites sont plus claires que les capitales normales auxquelles elles sont associes, et votre ligne aura un aspect ingal. Utilisez de prfrence une police munie dune version lgrement plus grasse, demi-gras ou caractre ddition par exemple et ajoutez les capitales normales celles lgrement plus grasses pour obtenir des petites capitales du pauvre. Le meilleur moyen davoir des petites capitales est den acheter un jeu. Choisissez soigneusement vos polices, lissez-les proprement, rendez-les compressibles sans leur faire perdre leur aspect arrondi et convertissez-les au format GIF en attendant quon nous propose mieux.

Refaonner une page

Stratgie globale
Un arrire-plan propre, en mosaque

De nombreux arrire-plans cherchent crer un effet de 3D qui interfre avec le texte, donnant limpression quil se dtache de la page. Mais les images darrire-plan peuvent galement donner une structure la page. Commencez par fabriquer une image trs large et mince qui va se rpter verticalement dans la fentre du navigateur. Sous Photoshop, ouvrez un nouveau fichier de 25 pixels de haut sur 1200 de large. Pourquoi 25 pixels ? Il suffit que sa hauteur soit dun pixel pour le rpter en mosaque. La largeur de 1200 pixels empche larrire-plan de se rpter horizontalement sur de grands moniteurs. Si vous lui donnez, par exemple, une largeur de 600 pixels, la page aura lair parfaite sur votre ordinateur. Mais sur un moniteur plus grand, une deuxime colonne bleue saffichera droite du texte. Pour garantir un contraste maximal et un taux de compression optimal, choisissez uniquement le blanc pour la partie droite. Les polices sans empattement sont meilleures que les autres, qui deviennent floues aprs le lissage. De nombreuses images libres de droit sont disponibles Sur des sites du gouvernement amricain comme la NASA. Veillez avant tout bien lire les consignes donnes. Ne lissez pas les images davant-plan qui saffichent sur des couleurs de transition dominantes. Les dcalages de Support cours METH21F / G. Lacaze 29

navigateurs vous empchent de placer une image lisse sur un arrire-plan dot de deux zones de couleurs dominantes ou plus.
Le texte

Si vous navez que trs peu de texte sur votre page daccueil, vous pouvez Prfrer du texte sombre sur un fond clair. La solution prconise consiste transformer le bandeau suprieur en une image qui ne se lisse pas. Ce bandeau peut se dplacer comme il veut sans problmes, tant que la largeur de la cellule de marge vierge est suffisante pour compenser tous les dcalages de navigateurs. Les grands bandeaux rectangulaires sont une solution de facilit, peu engageante toutefois pour vos visiteurs. Rglez les dcalages sur zro dans les navigateurs de troisime et quatrime gnration et attendez que les internautes en disposent. <BODY LEFTMARGIN= 0 TOPMARGIN= 0 BGCOLOR= #CC0000 ALINK= #FF330 VLINK= #330099 BACKGROUND= images/ spine.gif > Leon tirer : si une image davant-plan est lisse sur les bordures, elle doit tre parfaitement cale moins que larrire-plan ne soit uni. Les images non lisses nont pas besoin dtre cales. Le calage de Larrire-plan nest pas envisageable tant que la plupart des netsurfers ne disposent pas de dcalages nuls. Vous noterez le peu de HTML employ. Le plus gros du travail a t ralis sous Photoshop. Il a fallu rgler des problmes de lissage et de transparence. Pour faciliter la navigation, insrez une version rduite de Marque dans toutes les pages du site et reliez-les la page daccueil. Toute information urgente doit tre place au dbut de la page, immdiatement sous le titre.

Un site personnel Ces sections ont des intituls percutants, grce linsertion dun graphisme surprenant dans chaque zone. Les prototypes peuvent tre raliss sous Photoshop, afin de prendre toutes les dcisions de conception avant daborder le travail avec HTML. Une couche est rserve chaque lment, mais utilisez bien plus de couches quil ny a dlments parce quun certain nombre dentre-elles sont dordre exprimental.

Support cours METH21F / G. Lacaze

30

Les principales balises HTML 1/ Commentaire


* <!--...-->

2/ Definition du document HTML


* <html dbut de fichier html> Englobe le document HTML tout entier. </html fin de fichier html> Peut contenir : <HEAD> <BODY>

* <head Dbut section d'en tte>En tte de page : englobe le prologue du document HTML et gnralement les scripts JavaScript. Informations descriptives.</head Fin de section d'en tte > Peut contenir : <TITLE><META> Autoris l'intrieur de : <HTML>

* <title dbut de titre>Titre qui apparait en haut de la fentre </title fin de titre> Autoris l'intrieur de : <HEAD>

3/ Definition de la page dans le site : En tete descriptive de la structure de la page


* <meta name="Nom de la page de rfrence" content="contenu de cette page">

* <meta name="keywords" content="thesaurus">Permet de dfinir des mots-cls

* <LINK REV=" " REL=" " HREF ="URL">Dossier et nom du fichier ainsi que ses relations de dpendance

Support cours METH21F / G. Lacaze

31

* Si vous n'avez pas envie de remplacer les caracteres accentus par des codes, placez la ligne suivante dans l'en-tete du document. Insrez par exemple cette ligne entre les balises </title> et </head> : <meta http-equiv="Content-Type" content="text/html; charset="jeu de caractres:tableau">

4/ Definition des caractristiques d'une page : arriere plan et couleur


* <BODY>Contient le corps (texte et marqueurs) du document HTML, le contenu de la page</BODY> Peut contenir : <H1> <H2> <H3> <H4> <H5> <H6> <DL> <OL> <UL> <PRE> <BLOCKQUOTE> <HR> <ADDRESS> Autoris l'intrieur de : <HTML> * <body bgcolor="COULEUR :tableau">Couleur de fond</BODY> * <body background="URL"> arrire plan par effet de mosaique </BODY> * <body text="black"> couleur du texte </BODY> * <body link="COULEUR"> couleur d'un lien </BODY> * <body vlink="COULEUR"> lien visit </BODY> * <body alink="COULEUR"> lien actif </BODY>

5/ Quelques balises de mise en page : divisions et paragraphes


* <BLOCKNOTE>Cration d'un bloc. Gnralement indent. Utilis pour de longues citations</BLOCKNOTE> * <H?>Niveaux de Titre</H?> = <H1>...</H1>, <H2>...</H2>, <H3>...</H3>, <H4>...</H4>, <H5>...</H5>, <H6>...</H6> Taille des caractres : 1 correspond la taille maximale. Peut contenir:<A> <IMG> <BR> <CITE> <CODE> <DFN> <EM> <KBD> <SAMP <STRONG> <VAR> <B> <I> <U> <TT> Autoris l'intrieur de <BLOCKQUOTE> <B0DY> * <p>Paragraphe avec insertion d'une ligne vierge : d'aprs la norme HTML 3.2, le marqueur de terminaison </p> est facultatif. Peut contenir:<A> <IMG> <BR> <CITE> <CODE> <DFN> <EM> <KBD> <SAMP> <STRONG> <VAR> <B> <I> <U> <TT>

Support cours METH21F / G. Lacaze

32

Autoris l'intrieur de <BLOCKQUOTE> <B0DY> <DD> <LI> * <CITE>Citation</CITE> * <CODE>Instructions de programme (gnralement police Courrier), pour les listings de code source</CODE> * <div>Distinction d'un corps de texte particulier : division</div> * <DFN>Dfinition d'un terme, rarement implante</DFN> * <EM>Mise en valeur. Gnralement affich en italique</EM> * <KBD>> Texte saisi au clavier (gnralement police Courrier)</KBD> * <SAMP>Texte d'exemple </SAMP> * <STRONG>Mise en plus fonc : insistance plus forte (gnralement gras)</STRONG> * <VAR>Pour reprsenter une variable </VAR> * <ADDRESS>Utilis pour indiquer toute information concernant l'auteur du document.</ADDRESS> * <PRE>Respecte la mise en page du texte source HTML, texte preformate qui respecte les espaces, tabulations et retours chariot</PRE> Attributs : width="?"

6/ Listes
Le choix du type de liste s'effectue avant et aprs chaque bloc. Chaque entre de liste doit tre prcd de <LI> et termin par </LI>

1. <DL> Dlimite une liste descriptive : l'attribut COMPACT spcifie une forme condense occupant moins de place.</DL> Attributs : COMPACT Doit contenir : <DT>avant chaque terme<DT> <DD> avant chaque dfinition</DD> Autoris l'intrieur de : <BLOCKQUOTE> <BODY> <DD> <LI>

2. <DT>Prcde chaque lment de la liste. Utilis avec <DL> </DT> Peut contenir:<DD> <A> <IMG> <BR> <CITE> <CODE> <DFN> <EM> <KBD> <SAMP> <STRONG> <VAR> <B> <I> <U> <TT>

3. <DD>Prcde chaque dfinition d'lment</DD> Peut contenir:<A> <IMG> <BR> <CITE> <CODE> <DFN> <EM> <KBD> <SAMP> <STRONG> <VAR> <B> <I> <U> <TT> Support cours METH21F / G. Lacaze 33

Autoris l'intrieur de : <DT> 4. <OL>Liste ordonne (numrote)</OL> Doit contenir : <LI> Autoris l'intrieur de : <BLOCKQUOTE> <BODY> <DD> <LI> 5. <UL>Liste non ordonne (liste puce)</UL> Doit contenir : <LI> Autoris l'intrieur de : <BLOCKQUOTE> <BODY> <DD> <LI>. 6. <LI>Article de liste utilis avec : <OL> <UL> </LI> Peut contenir:<A> <IMG> <BR> <DL> <OL> <UL> <P> <PRE> <BLOCKQUOTE> <CITE> <CODE> <DFN> <EM> <KBD> <SAMP> <STRONG> <VAR> <B> <I> <U> <TT> 7. <MENU>Liste de menu</MENU>
Doit contenir : <LI>

<DIR>Liste de rpertoire</DIR> Doit contenir : <LI>

7/ Quelques balises de police


Tous les marqueurs de formatage de caractres ont les caractristiques suivantes : Peut contenir:<A> <IMAGE> <BR> <CITE> <CODE> <DFN> <EM> <KBD> <SAMP> <STRONG> <VAR> <B> <I> <U> <TT> Autoris l'intrieur de :<A> <ADDRESS> <DD> <DONT> <LI> <H1> <H2> <H3> <H4> <H5> <H6> <P> <PRE> <CITE> <CODE> <DFN> <EM> <KBD> <SAMP> <STRONG> <VAR> <B> <I> <U> <TT> <font color="Couleur de Police">Paramtrage des prfrences de police</font> <font size="3">Taille de la police</font> <FONT FACE="Times">Categorie de police</font> <P>&nbsp;</P>Saut de paragraphe <HR>Rupture de ligne : filet, barre horizontale Attributs : SIZE=valeur Epaisseur du trait en pixels WIDTH="valeur" Valeur absolue ou en pourcentage ALIGN="valeur" Peut prendre la valeur LEFT, RIGHT ou CENTER VALIGN="valeur" Peut prendre la valeur TOP, MIDDLE ou BOTTOM <br>Saut de ligne, sans insertion de ligne vierge <B>Gras</B> 34

Support cours METH21F / G. Lacaze

<I>italique</I> <U>Texte soulign</U> <TT>Police machine crire, police pas fixe</TT> <SUB>Indice</SUB> <SUP>Exposant</SUP> Formatage de caractre ALIGNEMENT HORIZONTAL= <center><left><right><justify> ALIGNEMENT VERTICAL= <TOP><MIDDLE><BOTTOM> <NOWRAP> Pas de retour la ligne

8/ Pour faire un tableau


<TABLE CELLSPACING=?>Ajustement d'une cellule de tableau</TABLE> <TABLE CELLPADDING=?>Ajustement d'une cellule de tableau</TABLE> <TABLE BORDER> Bordure equivalente a 1 pixel</TABLE> <TABLE BORDER=?>Bordure de ? pixel</TABLE> <TABLE BORDERCOLOR="#000000">Couleur de bordure</TABLE> <TABLE WIDTH=?>Largeur d'un tableau en pixel ou en %</TABLE> <TABLE BORDER CELLSPACING=1 BORDERCOLOR="#000000" CELLPADDING=4 WIDTH=652> <TR>Ligne de tableau</TR> <TD>Definition de cellule </TD> <TD WIDTH="Largeur de cellule : en pourcentage ou en pixel %"> <TD VALIGN="TOP/MIDDLE/BOTTOM"> <TD ALIGN="LEFT/RIGHT/CENTER">

9/ Les liens hyper-texte


<a>Avec l'attribut HREF, cre un lien vers un autre document ou un ancrage, avec l'attribut NAME, cre un ancrage vers lequel peut tre tabli un lien.</a> <a href="URL#nom fichier">Lien dans un autre document</a> <BASE HREF="URL ou nom fichier">ancrage vers lequel peut tre tabli un lien</a> Doit se trouver dans l'en-tte <a href="URL">Lien dans un autre document identifi par une adresse</a> <a href="URL" TARGET="NOM DE LA FENETRE DE BASE">Lien dans un autre document identifi par une adresse</a> <BASE TARGET="NOM DE LA FENETRE DE BASE">ancrage vers lequel peut tre tabli un lien</a>. Doit se trouver dans l'en-tte <a href="URL? NOM DU FICHIER">Lancement d'une recherche vers un fichier spcifique</a> <a href="#nom paragraphe">Dans le meme document</a> <a name="nom paragraphe">ancrage vers lequel peut tre tabli un lien</a> <a href="mailto:"adresse e-mail">adresse e-mail</a> 35

Support cours METH21F / G. Lacaze

10/ Les liens vers des images


<IMAGE>Insre une image dans un document.</IMAGE> Attributs : SRC="URL et nom de l'image" <IMAGE SRC="URL" ALT="Chane de caractres afficher, si le navigateur ne supporte pas les images"> <IMAGE SRC="URL" WIDTH="Largeur" HEIGHT="Hauteur">En pixel <IMAGE SRC="URL" ALIGN=valeur> Alignement de l'image par texte qui la prcde et au texte qui la suit. Valeurs possibles : TOP, MIDDLE, BOTTOM. <IMAGE SRC="URL" ISMAP> Cette image est une image ractive, elle exige un script.

Les tableaux de codes


Black Silver gray White Maroon Red Purple Fuschia Green Lime (vert clair) Olive Yellow Navy Blue Teal (turquoise) Aqua Code de couleurs #000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF #008000 #00FF00 #808000 #FFFF00 #000080 #0000FF #008080 #00FFFF &eacute; &agrave; &egrave; &acirc; &ecirc; &icirc; &ocirc; &ucirc; &auml; &iuml; &ouml; &uuml; &ccedil; &#? < > & " Marque dpose Copyright Caractres accentus tre O ? &lt; &gt; &amp; &quot; &#174; // &reg; &#169; // &copy;

Support cours METH21F / G. Lacaze

36

Vous aimerez peut-être aussi