ࡱ > ap bjbjMFMF 0 /, /, e > > ( j
^
E
O 2?$ e 0 > :
16 euros
Nous nous proposons dapporter,
sous la forme dun lexique cratif ,
un clairage thorique et des rponses
pratiques.
de la maturit ? Il est en effet temps
de considrer les sites comme des supports
ditoriaux avec des contraintes propres
que les graphistes se doivent de matriser,
comme ils matrisent celles de limprim.
Un site doit avoir une ligne ditoriale,
un contenu et une forme ; il doit vivre.
Des formes dexpressions pertinentes
ont vu le jour : internet entrerait-il dans lge
-:HSMJLA=Z[ZV]X:
ISBN 2-910565-18-1
ditions
internet,
lexique
cratif
Thierry Sarfis et Olivier Cabon
Thierry Sarfis est
graphiste spcialis
dans la communication
institutionnelle,
a t commissaire
de nombreuses
expositions et enseigne
Paris et Besanon.
Olivier Cabon a t
responsable de la PAO
dans des entreprises
publiques et dans
des groupes de presse ;
historien et photographe,
il est galement
formateur chez
Pyramyd.
Ensemble, ils ont
ralis une quinzaine
de sites internet.
internet, lexique cratifThierry Sarfis et Olivier Cabon
Notre grand
et glorieux chef-
doeuvre cest
de vivre propos.
Michel de Montaigne, Essais
2 2
sommaire
Un site pour quoi faire ?
par Pierre Briant,
professeur au Collge
de France, fondateur Dreamweaver 70
et directeur du site cran 39
achemenet.com 5 ditorial 42
Plus simple, plus efficace Excel 70
pourquoi faire compliqu feuille de style 43
lorsque lon peut faire FireWorks 70
simple ? 9 Flash 45
Lexique cratif format 46
accueil 17 formulaire 48
Acrobat 25 gabarit 52
animation 29 gif 56
arborescence 33 GoLive 70
ascenseur 33 graphisme 58
client 34 hirarchisation 60
communication 34 home page 64
couleur 35 html 65
CSS 43 Illustrator 70
dessin 38 ImageReady 70
propos de quelques majuscules : certains noms tant devenus
communs (gif, html, internet, jpeg) nous en avons tir les consquences
typographiques ; en revanche, nous avons gard lorthographe
anglaise commerciale des noms de logiciels.
InDesign 70 Photoshop 70
indexation 69 poids 88
internaute 70 preload 86
JavaScript 98 rfrencement 91
jpeg 56 repres 92
logiciel 70 roll-over 94
Macintosh 71 rubriques 96
mise en pages 72 scripts 98
moteur de recherche 74 service 99
navigateur 71 standardisation 100
navigation 75 style 102
nom de domaine 91 suivi 103
nouveau 79 texte 104
objectif 80 tableaux 43
outils 81 typographie 106
palette de navigation 84 webmaster 111
PC 71 Word 70
photographie 86 XPress 70
sommaire
3
Les lecteurs stonneront sans doute quun livre consacr llaboration de sites
internet soit prfac par un professeur au Collge de France, qui plus est spcialiste
de lhistoire et de la civilisation du Proche-Orient au temps des
Grands rois. Au demeurant, si lon mavait dit, il ny a gure, que lon min
forme de la narration.
un site pour quoi faire
?
viterait rdiger un tel texte, jaurais t moi-mme pour le moins surpris,
voire incrdule, et je reste quelque peu incertain quant au ton que je dois
adopter. Le plus simple est probablement de rappeler une rencontre sous la
Ctait lautomne 1999, je venais dtre lu au Collge
de France et je caressais depuis pas mal de temps dj lide de mettre en
oeuvre un projet scientifique et ditorial ambitieux, celui de rassembler sur
un site internet spcialis un champ scientifique particulirement clat,
savoir lhistoire et la civilisation du Moyen-Orient ancien, entre Indus et
Mditerrane, politiquement unifi sous la domination des Grands rois
perses, puis conquis par Alexandre.
Cest en 1990 que javais dcouvert internet: lors dun sjour aux
tats-Unis, javais t fascin de voir un collgue me dmontrer comment
on pouvait commander du foie gras du Prigord en appelant Yahoo ! Dix
ans plus tard, javais appris interroger internet, et javais conu un projet
que je pensais tre cohrent, mais je navais pas, prs de moi, de collaborateur
prt construire le site dont je rvais.
5
Jeus alors la chance quun ami commun, Nicolas Grimal, me mt en rapport
avec Olivier Cabon. Ancien tudiant en gyptologie, passionn par lhistoire
de lAntiquit et par larchologie, il prsentait pour moi le rare avantage
dallier qualification technique et got pour mettre mes ides en pages.
Dautant quil travaille avec un graphiste, Thierry Sarfis, qui lui aussi sest
lanc dans le projet avec enthousiasme, et qui, trs vite, a conu la page den
6
un site pour quoi faire
?
tre au laboureur, partir dun dessin que je lui avais propos.
recueillir des documentations qui, illustrant un espace-temps historique
dtermin, prsentent des spcificits fortes les unes par rapport aux autres:
aussi bien des documents crits en de nombreuses langues et critures, que
des monnaies, des stles, des peintures, des objets, des fouilles archologiques,
sans parler des annonces, des bibliographies et darticles en ligne ? Et
comment organiser une circulation fluide et aise et imaginer la palette de
navigation ? Qui plus est, il convenait davoir une vue sur le long terme, car
il fallait proposer une organisation ditoriale qui rsisterait laccroissement
exponentiel du nombre de documents disposs sur le site.
Le dfi ntait pas mince. Comment organiser un site destin
Le problme, on le sait bien, nest pas fondamentalement technique,
il sagit dune rflexion ditoriale, qui ne peut tre aborde que sous une
approche conceptuelle, elle-mme fruit dune discussion et dun change entre
le concepteur du projet de dpart et des partenaires soucieux de proposer
des solutions la fois esthtiques, efficaces et respectueuses du fond. Cest
trs exactement ce que jai trouv dans cette collaboration.
Lorsque jai lu les preuves du livre quils publient aujourdhui,
jy ai retrouv la substance de certaines des trs nombreuses discussions que
ne justifie pas une prsentation aride et inconfortable.
un site pour quoi faire
?
nous avons eues depuis plus de deux ans maintenant. Plus simple et plus
efficace , telle semble tre la philosophie dOlivier Cabon et de Thierry
Sarfis. Tels taient aussi mes objectifs au dpart, car un contenu scientifique
Laccueil qui a t fait dj notre site sonne comme la reconnaissance
de la pertinence des choix dfinis en commun. Je nvoque pas seulement
les ractions nombreuses que jai reues de collgues et dtudiants
de nombreux pays, mais aussi des recensions logieuses publies dans diverses
revues par des spcialistes des sites web. Lun de ces critiques 1 crivait des
premires pages mises en ligne: Elles tmoignent dun parti pris trop rare
en matire de recherche: lalliance entre rudition et esthtique. Je prends
cette apprciation pour un bel hommage la collaboration qui sest dveloppe
au sein du projet www.achemenet.com.
Pierre Briant, professeur au Collge de France, chaire Histoire et civilisation du monde
achmnide et de lempire dAlexandre , fondateur et directeur du projet www.achemenet.com,
pierre.briant@college-de-france.fr
1 Michel Deverge, LHistoire 247 (2000), p. 146.
7
En quelques annes, le paysage de linternet a, la fois, beaucoup et peu
volu. La bulle sest dgonfle mais, paralllement, le nombre
dinternautes a augment et les liaisons haut dbit ont commenc
devenir banales; les machines ont gagn en puissance; les logiciels
sont devenus sophistiqus. Paradoxalement, ce qui semblait une
antienne il y a quatre ans en mettre plein la vue est moins
dactualit aujourdhui alors que (parce que ?) la technologie adquate
sest rpandue. Dans le mme temps, les responsables se sont
aperus que raliser un site internet rendait possibles des conomies
de diffusion mais que cela ne permettait pas de saffranchir de ce qui
fait lessence du mtier : le processus ditorial. Un site doit avoir une
ligne ditoriale, un contenu et une forme ; un site doit vivre.
Des formes dexpressions pertinentes ont vu le jour :
internet rentrerait-il dans lge de la maturit? Il est en effet temps de
considrer les sites internet comme des supports ditoriaux avec,
certes, des contraintes propres, mais dont les graphistes matrisent
depuis longtemps la problmatique.
Pour concevoir, il faut dabord prendre le temps de
mener une rflexion pralable approfondie. Quatre principes rappels
pages 10 14 , transposition directe des rgles dirigeant la
communication visuelle, devraient ensuite guider le travail: les considrations
suivantes peuvent, par certains aspects, sembler videntes,
mais elles sont souvent perdues de vue. Il sagit de communiquer,
plus simple, plus efficace
9
10 10
plus simple, plus efficace
dchanger et de mettre en commun. Les principes de base de la
communication sont souvent oblitrs au profit dune utilisation abusive
des mthodes du marketing qui substituent un systme dchange
un discours sens unique o la contradiction na pas sa place.
La premire qualit du style, cest la clart, dit Aristote.
Mme si les logiciels offrent des possibilits techniques de plus en
plus tendues, ces principes ne doivent pas tre oublis: le possible nest
pas forcment souhaitable et seule importe la pertinence. Des outils
plus complexes imposent, dabord, de mener une rflexion largie sur
lquilibre entre fonctionnalit et beaut cest--dire sur les rapports
entre les choix techniques et lutilisation de la symbolique des signes
et des diffrents codes de reprsentation. Ils requirent, ensuite, des
comptences plus tendues.
Manipuler loutil ne suffit pas; il faut galement comprendre
les consquences de cette utilisation sur les volutions de lorganisation
du travail et du processus de production des images.
Un site internet est avant tout un support ditorial qui doit vivre, ce nest
pas une plaquette fige. Pour le crer et lanimer, il faut, ds le dbut
de la rflexion, runir les comptences ncessaires chef de projet
(parfois le client lui-mme), rdacteur, correcteur, graphiste, informaticien,
infographiste Tout support ditorial a un objet et sadresse
un public prcisment dfini: la rponse aux questions un site
pour quoi faire?; un site pour quel public? est lobjet de la rflexion
pralable.
Quel sera lquipement de linternaute ? Avant de faire des choix techniques,
il faut, bien videmment, tenir compte des contraintes, qui
dpendent pour lessentiel du parc machines des ventuels visiteurs
(grand public ; employs de ladministration ou dune grande entreprise;
public spcialis et surquip) et de leur type daccs (modem,
intranet, lignes haut dbit): le poids des crans devient vite un
obstacle la visite; les fichiers gif ne peuvent, par nature, comporter
plus de 256 couleurs (lusage dune palette plus restreinte permet de
diminuer encore le poids des crans); la qualit des images jpeg diminue
au fur et mesure que lon allge ces mmes crans ;
le recours des plug-ins spcialiss (Flash, RealAudio) peut tre rdhibitoire
Dans le cadre dun site destin des professionnels de
la mise en pages quips de Macintosh rcents et disposant dun accs
haut dbit, le recours Flash, QuickTime VR et autres RealAudio
peut tre recommand. Est-ce le cas pour celui destin au personnel
dune administration dissmine dans le monde entier et disposant dun
parc de dizaines de milliers de PC tournant sous des versions de
Windows allant de la 3.31 2000? Pourquoi commencer par priver un
site de 90% de ses visiteurs potentiels?
11
plus simple, plus efficace
Lcran de choix,
qui peut galement
servir de home page ,
est lexpression
de la hirarchisation
et de lorganisation
de linformation
(voir accueil ).
1. Linformation est organise et hirarchise en rubriques et sous-rubriques.
Les dnominations des diffrentes parties doivent tre trs suggestives
et ne pas prter confusion; elles doivent permettre de rpondre
aux questions simples que se pose linternaute : quoi ? o ?
quand? comment?. Les textes des crans, courts et lisibles, sont
ensuite conus pour ce support particulier ; les textes longs, introduits
par un cran-rsum, peuvent tre proposs sous la forme de
fichiers Acrobat tlcharger (et imprimer).
12
plus simple, plus efficace
Les formes et les couleurs
du logotype de la ville
de Saint-Denis ont servi
de base pour la cration
des signes repres
exprimant le contenu
des rubriques.
2. La communication visuelle est associe la communication crite. Pour
cela, il suffit dattribuer une forme chaque type dinformation, en
utilisant les possibilits de lart de la typographie, la symbolique des
signes, la pertinence des codes de reprsentation (une photo ou un dessin
ne disent pas la mme chose) et les ressources des couleurs. Ces lments
permettent de crer un langage visuel et des points de repre
permanents. Pour que les textes soient lisibles (et stables) et les
formes matrises, il faut dessiner les crans. Notre choix technique,
cest la mise en forme dans Illustrator; la transformation en images
gif pour les textes, jpeg pour les photographies dans ImageReady;
lcriture du code html dans Dreamweaver.
3. La navigation fait appel ces points de repre systmatiquement mis en
ordre sur chaque cran et qui permettent de toujours savoir o lon
est et o lon peut aller : pour linternaute, la navigation est facile et
fluide, ce qui lui donne envie de dcouvrir lensemble du site et dy
revenir.
La barre de navigation
permet de naviguer
et de savoir o lon est :
le trop frquent plan
du site est inutile
pour peu que linformation
ait t correctement
hirarchise.
La barre de navigation
reprend les choix
de lcran initial et rend
ainsi possible laccs
direct nimporte
quelle partie du site.
Lorsquune information
est rpartie sur une
suite dcrans,
le bouton cran
suivant , situ droite
de la palette, clignote;
les retours sont indiqus
de la mme manire par
le bouton de gauche.
La palette de navigation
se dveloppe en
fonction du cheminement
suivi: lusage
de la couleur permet
de visualiser
ce dplacement.
plus simple, plus efficace
13
4. Le service rendu linternaute doit motiver son retour rgulier : un site
ne peut pas tre une simple plaquette, il doit offrir des informations
utiles, mises jour rgulirement et que lon ne trouve nulle part
ailleurs. Un site doit donc comporter une rubrique nouveau permettant
au visiteur daccder directement aux parties mises jour
(un site qui nvolue pas est rapidement considr comme mort par
les internautes).
14
plus simple, plus efficace
Malgr de fortes contraintes :
choix techniques et
format dcran imposs,
logotypes obligatoires
il est possible de rendre
ais laccs
linformation.
Le service rendu est ici
vident: linternaute
peut, avant de construire
un btiment, consulter
latlas des plus hautes
eaux connues sans
se dplacer
la prfecture et sans
transporter une valise
de documents de sept
kilos (sic) et suivre
en direct la monte
des eaux ce qui peut
se rvler prcieux
en priode dinondation.
Le parti pris de la simplicit nempche pas de faire appel des outils informatiques
sophistiqus: paiement en ligne, bases de donnes, recherche
documentaire et agrandissement dimages jpeg dcoupes en tuiles
de manire optimiser leur chargement, moteurs de recherches smantiques
peuvent tre au rendez-vous.
chacun son mtier : chaque tape de la ralisation fait appel des
comptences particulires. Mlanger les genres aboutit, le plus souvent,
un rsultat mdiocre. Le chef de projet nest pas le rdacteur, qui nest
pas le graphiste, qui nest pas lingnieur, qui nest pas linfographiste,
qui nest pas le dveloppeur
Puisque lon est jamais servi si bien que par soi-mme, le lecteur
comprendra probablement que nous proposions, lappui de notre
propos, des exemples tirs de nos propres ralisations. Bien videmment,
nous navons pas la prtention dtre les seuls comptents: il sagit
l dune facilit que lon nous pardonnera peut-tre. De mme, celui
qui aura la curiosit de visiter les sites prsents ci-dessous et dont
nous donnerons systmatiquement les adresses se rendra probablement
compte que ladage faites ce que je dis, ne faites pas ce que
je fais est parfois vrifi: lexprience nest-elle pas la somme des
erreurs? Aprs avoir nous-mmes, tels des Dupont et Dupond, navigu
dans les terres 1, nous vous souhaitons bonne navigation
plus simple, plus efficace
15
Les versions originales des sites que nous avons raliss sont
visibles ladresse www.thotm.com/sites.htm
1. Naviguer dans les terres se dit lorsque la carte maritime se trouvant fausse, le vaisseau
navigue dans un espace indiqu sur cette carte comme terre , Dictionnaire dmile Littr.
Les pages daccueil donnent directement accs au contenu. La rflexion ditoriale a
permis dorganiser et de hirarchiser linformation. Les ressources de la symbolique
des signes et de la typographie sont alors mises contribution pour donner
une forme cette hirarchie : la communication visuelle est associe la communication
crite.
Pour que la communication soit efficace, mieux vaut viter dimposer
linternaute dinterminables successions dcrans. Souhaiter bienvenue sur mon
site ne fait plaisir quau propritaire qui, le plus souvent, a alors concentr tous
ses efforts sur laccueil et a nglig lessentiel : la mise en forme dun contenu cohrent.
Ce principe ninterdit pas, linstar de ceux prsents ci-aprs, de btir des
crans daccueil en gifs anims. Si lon souhaite que linternaute revienne, il faut bien
videmment lui mnager un accs direct linformation voir gif, hirarchisation,
nouveau, rubriques
Une image parlante aux historiens de la priode achmnide sert de support
aux cinq entres principales du site www.achemenet.com. Les cinq entres
principales sont lexpression de la hirarchisation et de lorganisation
de linformation
accueil
17
accueil
18
Les couleurs qui, sur la page daccueil, identifient les diverses rubriques
dun site se retrouveront dans la palette de navigation. Les innombrables
possibilits du graphisme et de la typographie permettent de donner
un ton personnel (ici, deux sites en cours de ralisation).
Tenir compte de liconographie existante et en tirer un parti dynamique
permet dexprimer la structure de linformation : www.eauhumanite.com
catalogue en ligne de la banque dimages leau pour lhumanit
et www.egypt.edu dont lobjet semble vident.
accueil
19
accueil
egyptologues.net
la chaire archologie philologie histoire
liensnouveau
egyptologues.net
la chaire archologie philologie histoire
liensnouveau
20
Une srie dimages emblmatiques illustre les parties du site www.egyptologues.net
du Collge de France.
Lancienne version du site de la fondation du Patrimoine: moins de dcor,
plus dinformation que dans la version actuelle. www.fondation-patrimoine.com
Mme remarque pour www.fradet-creation.com dont la nouvelle version,
compose par copier-coller dlments, est devenue incohrente
car les rgles de base du graphisme nont pas t respectes.
Cet cran devrait tre la page daccueil. www.baby-creation.com
accueil
21
accueil
22
Sept entres proposes par linstitut du Monde arabe loccasion du salon
du Livre de jeunesse. www.imarabe.org
Une animation transformait le logotype qui servait alors de support lannonce
des quatre parties de lancienne version du site. www.ecole-maryse-eloy.com
Les rubriques du site www.ville-saint-denis.fr (en cours de ralisation) montrent
quil sagit de rendre service linternaute plutt que de faire de la propagande.
Largot des typographes (voir page 73) est en fait le seul service rendu par notre
site-plaquette. www.thotm.com
accueil
23
accueil
Thotm
ditions
.com
Persika diffusion
achat
en ligne
Qants
vient
de sortir
contact
Thotm
ditions
.com
Persika diffusion
achat
en ligne
Qants
vient
de sortir
contact
24
Mme si un site naissant ne comporte que quelques crans, il faut avoir
une vision de son volution probable. www.thotm-editions.com
Composer une phrase avec les noms des rubriques est une solution pour
simplifier un contenu complexe. www.cgt.fr/ucr/ucr/choix.htm
Malgr tous nos efforts, un cran (cathodique) sera toujours un cran : il est difficile
dy donner lire confortablement des dizaines de pages et le support lui-mme se
prte mal au retour en arrire, au feuilletage, lannotation, toutes actions qui
soutiennent la rflexion. Par ailleurs, et malgr des apparences parfois trompeuses,
un cran est une image perptuellement renouvele, ce qui, une fois encore, nest
pas vraiment propice la rflexion.
Cest pourquoi, lorsquun long texte doit tre mis en ligne, il est judicieux
denvisager le recours un fichier Acrobat qui, une fois tlcharg, peut tre
consult hors connexion et tre imprim: lexemple de la leon inaugurale de
Nicolas Grimal au Collge de France est, cet gard, clairant.
Pour viter laffichage du document dans le cadre du navigateur (et
le recours au plug-in du mme nom, souvent lent et parfois instable), il suffit de
faire un clic-droit (sur PC) ou un contrle-clic (sur Macintosh) et de demander
lenregistrement du fichier sur le disque dur.
Les fichiers Acrobat permettent galement de mettre en ligne un livre
dont les chapitres peuvent tre verrouills de manire empcher, par exemple,
la slection de textes ou dimages, sa modification ou son impression. Quel intrt?
me demanderez-vous. Des tudes fort srieuses menes aux tats-Unis montrent
que les diteurs qui proposent ainsi leurs ouvrages en ligne voient leurs ventes
augmenter de manire notable : linternaute qui nest pas plus bte que lutilisateur
de la photocopieuse sait bien quimprimer et relier plusieurs dizaines de
pages cote plus cher que dacheter le livre et ce pour un rsultat moins agrable.
Ralisant lintrt du livre, il hsite moins lacheter.
La mise en ligne de fichiers Acrobat permet enfin de mettre la disposition
de linternaute des bons de commande et tous types de formulaires administratifs
voir texte et typographie
Acrobat
25
26
Acrobat
26
Acrobat
Les premires lignes du texte sont prsentes et le tlchargement de ce dernier sous la forme
dun fichier Acrobat est propos. www.egyptologues.net/chaire/grimal02.htm
27
Acrobat
27
Acrobat
Des rsums des textes introduisent les fichiers Acrobat.
www.cgt.fr/ucr/ucr/histoire.htm
24 dcembre 2001
Dans les annes soixante-dix et quatre-vingt, le monde industriel a connu une phase de croissance
ralentie qui fut baptise en France de crise . Le temps ayant pass, on a mieux peru les phnomnes
qui, dans une certaine pnombre, prenaient de la force pour se manifester avec clat dans les annes
quatre-vingt-dix.
Dans le mme temps, les socits ont volu. Ronald Reagan et Margaret Thatcher ont entendu
limiter les interventions de ltat. Quant au systme sovitique, il devait seffondrer, entranant
28
Acrobat
lclatement de lURSS : la dcentralisation de la gestion a fav
systmes hirarchiques traditionnels ont t contests. Cependant, les succs r
conomie ne sont pas alls sans engendrer des drives que le chapitr
13.1 Une rvolution technologique
13.2 Des entreprises plus agressives
13.3 Une nouvelle conomie ?
13.4 Des changements dans la socit
11113333....1111 UUUUnnnneeee rrrrvvvvoooolllluuuuttttiiiioooonnnn tttteeeecccchhhhnnnnoooo
Le temps aidant, les nouvelles technologies de linformation et de la communication (N
provoqueront sans doute dans lconomie et dans la socit des changements comparables ceux que
limprimerie, la machine vapeur, le moteur explosion ou llectricit ont dclenchs leur poque.
les rvolutions du monde
2.1 les rvolutions mondiales
2.2 les drives du secteur priv
2.3 au-del de ltat-nation
rvolutions
Les NTIC intressent les matriels et les services informatiques et lectroniques, les matriels et les
services de tlcommunication. Mais leurs effets vont bien au-del de ces domaines dactivit.
La rvolution est-elle, pour autant, accomplie ? Un bouleversement radical, brusque et, certains
gards, dfinitif a-t-il eu lieu comme maints journalistes ou financiers lont proclam ? Si lon
considre la dcennie 1991-2001, le cheminement semble avoir t plus complexe. Certains
dveloppements, comme celui des tlphones portables ou dInternet ont bien eu lieu mais on en a
dduit, trop vite, que des changements massifs, dans les processus de vente ou la transmission des images
par exemple, taient imminents. Des obstacles ou des rsistances se sont manifests, conduisant des
www.contrat-social.com 13 - 1
Lobjet du site www.contrat-social.com (en cours de ralisation)
est de proposer, sous la forme de fichiers Acrobat, de nombreux textes
de rflexion : les crans sont de simples accs aux textes.
Une animation doit tre pertinente, sous peine de voir le site se transformer en arbre
de Nol: cest au graphiste dy veiller. Deux usages peuvent tre envisags: primo,
lanimation de la page daccueil qui se dveloppe partir dun signe graphique
fort (dans ce cas, lanimation vite de nombreux clics) ; secundo, la mise en
vidence dun lment dterminant: zone cliquable, bouton, information importante,
signaltique
Qui dit animation dit souvent Flash: est-ce si pertinent? tes-vous
certain que tous les internautes qui vous vous adressez disposent de la configuration
ncessaire pour naviguer confortablement? Le fait que le plug-in de visualisation
soit gratuit ne rgle pas tous les problmes: quen est-il de la puissance
de la machine? de la version du systme dexploitation et du navigateur? de la
quantit de mmoire vive installe? de la vitesse de connexion?
Par ailleurs, quid de la mise jour du site? Raliser une superbe animation
cest bien, devoir la mettre la poubelle au bout de trois mois, a lest
moins Cet aspect, trop souvent nglig, doit tre pris en compte ds la conception
du site et la dfinition de son contenu.
Si vous tenez animer un site avec Flash, pensez dcouper lanimation
en petites squences autonomes quil sera facile de mettre jour et en proposer
une version html, base de gifs anims.
Les diffrentes tapes des animations quelles se prsentent sous la
forme dun gif anim ou dun fichier Flash sont traites comme autant de
fichiers Illustrator. Il est beaucoup plus simple de remonter le temps en partant
de limage finale et en supprimant, tape par tape, les lments qui ne doivent plus
safficher. Les diffrents tats des roll-overs peuvent galement tre des gifs anims,
traits de la mme manire voir Flash et gif
animation
29
30
animation
30
animation
Les diffrentes tapes des animations se prsentent comme autant de fichiers Illustrator. Elles sont ensuite traites,
31
animation
31
animation
comme ici, dans ImageReady pour obtenir un gif anim ou dans Flash. www.egyptologues.net/
32 32
animation
Lanimation de la page daccueil se dveloppe partir dun signe
graphique fort, ici le logotype de lcole dart Maryse-loy est pixellis,
ce qui introduisait le systme de navigation et des points de repres
graphiques. www.ecole-maryse-eloy.com/
jour du site.
Larborescence du site doit tre le reflet fidle de la conception ditoriale.
Cette organisation est une des spcificits dinternet ; la possibilit
daccder une information en suivant plusieurs chemins, loin
dtre un handicap, peut tre cultive condition que lcran final
ne soit pas dmultipli, sous peine de rendre quasi impossible la mise
*
*
lexception des formulaires et des longs tableaux, le recours lascenseur doit tre prohib.Si ce dernier se rvle indispensable, la palette de navi-
gation reste toujours apparente. Il faut donc recourir des frames.
Lorganisation des diffrents dossiers (rpertoires) contenant
les pages reprend fidlement larborescence du site. Les noms
des fichiers html et des images gif ou jpeg composant les crans sont
immdiatement comprhensibles et se rpondent. Le classement des
fichiers Illustrator correspond exactement celui des pages html voir
navigation, palette et suivi
Linternaute qui ne peut visualiser dun seul coup doeil lensemble dun
cran perd une partie des repres et le fil du discours. Les textes doivent
donc tre courts et conus, rdigs et dcoups en fonction de
lcran voir Acrobat, cran, feuille de style et formulaire
arborescence, ascenseur
33
?
Sans client, ni commande ni moyen de raliser un projet. Comme le
rappelle le grand dictionnaire encyclopdique Larousse: Le client est
une personne ou une collectivit qui reoit de quelquun, contre paiement,
des fournitures commerciales ou des services.
Contrairement au verbiage pdant la mode dans certains
milieux qui croient saffranchir ainsi dune sujtion vile, un
client nest pas un commanditaire, car ce dernier toujours selon le
Larousse est un associ dune socit en commandite, le bailleur
de fonds dune entreprise par actions. Sil nest commanditaire, le client
est partenaire : il connat le sujet et son contexte ; de la qualit du
dialogue nou avec lui dpend la pertinence des propositions du graphiste
voir graphisme
client, communication
!
La principale rgle est de plaire et de toucher. Toutes autres ne sont
faites que pour parvenir cette premire. Mais toutes ces rgles sont
dun long dtail, dont je ne leur conseille pas de sembarrasser. Ils
ont des occupations plus importantes. Racine 1
Pour les longs dtails, nous vous conseillons de vous
reporter Sciences de linformation et de la communication 2: on
peut y trouver de bons auteurs de Platon Wiener en passant
par Marx et Freud et une bibliographie raisonne
1. Prface Brnice, in Thtre , I, page 379, Garnier-Flammarion.
2. Sous la direction de Daniel Bougnoux, Larousse, collection Textes essentiels
La couleur est un des outils dont dispose le graphiste pour guider linternaute et
rendre visibles les repres. Lors de la dfinition dune couleur, il faut tenir compte
des contraintes dinternet : les images gif nen comportent que 256, les crans des
internautes sont rarement talonns et calibrs, une mme couleur est souvent rendue
diffremment par les PC et par les Macintosh. Peu dentre elles sont donc dun
usage sr et, en cas de doute, il vaut mieux sen tenir la palette scurise pour
le web voir gif, hirarchisation, jpeg, palette et poids
La couleur permet de voir immdiatement dans quelle partie du site
se trouve linternaute, comment naviguer et quels sont les documents
disponibles. www.achemenet.com/recherche/textes/textes.htm
forum cellules
de recherche
textes pigraphiques dAnatolie
annuaires bibliographies annonces
stle trilingue
de Xanthos,
face aramenne
introduction
grecs
aramens
lyciens
lydiens
phrygiens
cariens
monolingues
bilinguestrilingues
couleur
35
36
couleur
36
couleur
Le traitement de certaines couleurs est parfois dlicat. Nous voulions
tre certains que les fonds de la page html et de limage gif servant
de support aux textes seraient identiques. Nous avons commenc
par dfinir la couleur dans Illustrator. Nous avons import dans
Dreamweaver limage gif obtenue grce ImageReady. La couleur
html prleve via la pipette de Dreamweaver a t transforme
en TSV, dont lquivalent, dans Illustrator, est le mode TSL
(attention, le TLS de Dreamweaver est un faux ami).
Il ne restait plus qu corriger la couleur dans Illustrator.
www.cgt.fr/ucr/contact.htm
couleur
37
Pour traiter un cran comme une image, il faut que ses lments y compris les textes
puissent tre facilement manipuls, dplacs ou modifis et restent indpendants
les uns des autres : il faut donc travailler dans un programme de dessin vectoriel,
et le standard cest Illustrator.
Ce programme trs fiable est matris par un grand nombre doprateurs
PAO et dinfographistes : cest le genre de dtail qui prend toute son importance
lorsque lon doit renforcer une quipe pour achever un projet dans les dlais
ou pallier la maladie ou le dpart du dessinateur habituel. Autre avantage: le passage
ventuel vers Flash ou vers limprim est extrmement simple
Quand le dessin se rvle le plus efficace ou le plus appropri,
Illustrator permet de venir bout dcrans qui, sans lui, seraient
quasi irralisables. www.fradet-creation.com/francais/evenemt/ref/
montmart.htm
38
dessin
617 x 465 pixels est la taille de nos crans. Cest un format un peu plus carr
que le traditionnel rapport 3 par 2. Cela permet de mnager plus de place en hauteur.
Les navigateurs ajouteront leur interface autour de cette fentre: la surface totale
occupe par Internet Explorer, toutes barres (des boutons, des adresses, des
favoris) affiches est alors de 654 x 603: cest un peu plus grand que le 640 x 480,
minimum syndical de fait. En masquant ces barres, la surface occupe devient
652 x 504: seuls les internautes munis de tout petits crans seront alors trs lgrement
handicaps. Dans Illustrator, un cran de 617 x 465 pixels correspond un
document de 217,77 mm x 163,33 mm.
La taille des fichiers Illustrator dpend, bien videmment, de celle
fixe pour les crans. Pour notre part, nous considrons comme primordial que linternaute
apprhende dun seul coup doeil tout le contenu dun cran et nous excluons
donc sauf cas particulier des formulaires lusage des ascenseurs voir dessin,
formulaire, html, internaute, logiciels et mise en pages
Les crans tant dessins dans Illustrator, tous les lments peuvent
tre modifis. www.egypt.edu/egypte/egypte.htm
39
cran
40 40
cran
cran
DIllustrator (en haut gauche) ImageReady (en bas gauche) :
la transformation en image gif ; dImageReady Dreamweaver
(ci-dessus) : dcoupe de limage et gestion de la navigation.
41
...
Oui,
42
ditorial
un site
internet est un support dont les critres et les contraintes
sont, mutatis mutandis, les mmes que ceux de limprim.
Il faut en tirer toutes les consquences sur lorganisation
du travail : dfinir un objectif prcis, en dialogue
avec le client; runir les spcialistes ncessaires citons
dans le dsordre : responsable de projet, rdacteur en
chef, rdacteur, journaliste, secrtaire ddition, graphiste,
infographiste, ingnieur, webmaster, documentaliste,
iconographe ; organiser la planification de toutes
les tapes du travail ; mettre en place la chane de validation
: client, chef de projet, correcteur
...
Faire lconomie dune tape ou se passer
dune comptence, cest prendre le risque de dsorganiser
le processus de production et daboutir un site
bancal et inexploitable voir client, hirarchisation, suivi
et webmaster
Il est peu de sites internet qui ne recourent, un jour ou lautre, des tableaux.
Quelques recettes faciles mettre en oeuvre permettent dobtenir rapidement le rsul
tat prsent page suivante :
feuille de style, CSS, tableaux
Primo, les tableaux sont gnralement longs et il ne faut pas que
lusage de lascenseur entrane la disparition de la palette de navigation. Il est donc
indispensable de recourir un montage comprenant trois fichiers html : le fichier
matre qui sera appel est une simple enveloppe comportant deux panneaux
(frames) dans lesquels seront affichs le fichier de la palette de navigation et le
Secundo, il faut que le tableau soit le plus simple et le plus lger possible.
La meilleure solution qui garantit des rsultats quivalents sur PC et sur
Macintosh est dindiquer la largeur du tableau en pourcentage de celle de lcran
(une valeur comprise entre 80 et 96% permet de mnager de lespace de part et dautre
du tableau) et de ne surtout pas spcifier de largeur pour les cellules: il vaut mieux
Le recours aux feuilles de style en cascade (Cascading style sheet, Css)
permet de gagner un poids prcieux, dans la mesure o les diffrentes couleurs et les
divers types de caractres utiliss ne sont pas indiqus chaque changement de style
graphique mais sont dfinis une fois pour toutes dans la feuille de style correspondante,
appele dans len-tte du fichier. Avantage supplmentaire et non ngligeable:
si vous dcidez de procder des ajustements, une simple modification de la feuille
tableau proprement dit.
laisser le navigateur se dbrouiller.
de style se rpercutera sur tous les documents qui lutilisent. Veiller la cohrence
graphique dun grand nombre de tableaux devient alors un jeu denfant.
Une remarque au passage : les tableaux gnrs automatiquement par
Word et par Excel ne sont ni propres ni lgers. Trois solutions soffrent vous,
qui, en tout tat de cause, impliquent que vous matrisiez lhtml ou que vous fassiez
appel un spcialiste. Soit vous dfinissez vos tableaux dans un diteur de texte, soit
vous les prparez dans Dreamweaver ou dans GoLive et vous les peaufinez lhuile
de coude, soit vous recourez une moulinette dveloppe dans 4D ou dans
FileMaker. Cette dernire solution implique, certes, un peu de programmation, mais
les rsultats sont garantis et rapidement reproductibles voir ascenseur, html,
navigation et palette
43
.titreColonne { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; color: #35287F;
line-height: 40px; vertical-align: text-top;; font-weight: bold}
.lien { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 26px; vertical-align: texttop;;
color: #999999}
.texte { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 26px; vertical-align:
text-top;}
.liengris { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 26px; vertical-align:
text-top; background-color: #222222;; color: #999999}
.textegris { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 26px; verticalalign:
text-top; background-color: #222222;}
44
feuille de style, CSS, tableaux
La palette de navigation doit toujours rester apparente. Les Css facilitent
grandement le dveloppement et la maintenance.
www.achemenet.com/recherche/textes/babyloniens/nabu/nabu.htm
Les animations dveloppes en Flash sont lgres et fluides, au point que ce programme
a parfois t considr comme le futur standard de dveloppement des sites
spectaculaires. Deux cueils sont viter : il faut que lquipement de linternaute
soit adapt et la mise jour dun site implique parfois de tout reprendre zro,
moins que cette mise jour nait t srieusement tudie.
La ralisation des crans dans Illustrator permet dentre de jeu le
passage ventuel en Flash de tout ou partie dun site voir animation et internaute
Lorsquun site est anim en Flash, il faut penser aux internautes dont
le matriel ne suivra pas et leur proposer la version html-gif anim.
En raison de la complexit de la mise jour, ce site a dsormais renonc
Flash. www.baby-creation.com/
FlashFontaine puricultureFontaine baby care
Html Flash
45
46 46
format
Un des handicaps du couple html-images gif ou jpeg sur Flash est que le contenu des
crans ne peut pas tre redimensionn. Il faut donc en prvoir la taille en fonction
de lquipement standard du public.
Lcran doit tre centr et son fond html doit tre conu de manire
ne pas perturber linternaute disposant dun grand moniteur voir couleur, cran,
internaute
Dun petit un trs grand moniteur, il peut y avoir de la marge:
les crans doivent tre conus de manire ne gner personne.
www.thotm-editions.com/qanats.htm
47
format
47
format
48 48
formulaire
Les formulaires sont traiter avec le plus grand soin. Ils doivent tre proprement introduits
et soigneusement mis en crans. Ils sont souvent longs: tous les principes noncs
page 43 pour les tableaux y compris le recours un spcialiste sappliquent
galement. Pour que linternaute nenvoie pas un formulaire moiti rempli, il faut
placer le bouton de validation en pied.
La mthode de traitement dpend de la quantit de formulaires qui
vous parviendra : si vous nen recevez quun ou deux par jour, il est inutile de
mettre en place linfrastructure lourde et onreuse des bases de donnes en ligne.
Dans ce cas, le formulaire est post et son contenu vous sera adress par courrier
lectronique. Les protections mises en place par de nombreux hbergeurs et la
mthode de traitement particulier dAOL rendent cette mthode alatoire.
Lastuce consiste alors dporter le traitement sur un autre site: un
script Common Gateway Interface (CGI, standard propos par tous les hbergeurs)
est appel dans le lien menant au formulaire; un script php3 est galement
mis en place sur le site de traitement.
Cette mthode permet de tester la validit des champs obligatoires. Un
de ses autres avantages est quelle permet dappeler un cran de confirmation de lenvoi
des donnes pour peu que le fichier idoine soit au mme niveau que le formulaire.
Ce dernier cran peut, alors, demander le raffichage de celui do a t
appel le formulaire.
Lexploitation des donnes peut se faire dans une petite base 4D ou
FileMaker et leur transfert peut avoir lieu par simple copier-coller, une moulinette
tant alors charge de dcouper le texte et de transfrer les informations vers les diffrents
champs.
Si vous voulez mettre en place un systme de paiement en ligne, il faut
quil soit scuris. Do, pensez-vous, mise en place dune infrastructure trs lourde
et trs coteuse et recours obligatoire des spcialistes mais vous pouvez galement
faire appel Kagi.
Dans ce cas, il ny a pratiquement pas de mise de fonds initiale et les
frais sont fonction de la valeur des biens vendus: logiciels et biens immatriels, certes,
mais aussi tout ce que vous pouvez expdier par la poste. Il y a, toutefois, trois
formulaire
49
La palette de navigation devrait toujours rester apparente : ce nest pas le cas ici. Le bouton
de validation est plac en pied du formulaire, ce qui vite linternaute doublier de remplir
une rubrique. Ladresse http://www.egyptologues.net/cgi-bin/formframeset.pl? http://www.
egyptologues.net/formulaires/francais/formulaire.htm est la marque de la mthode de traitement.
contraintes : primo, matriser un minimum lhtml ; secundo, accepter (pour linstant)
que les paiements ne seffectuent quen dollars amricains (leuro et dautres
monnaies devraient arriver incessamment sous peu) ; tertio, tolrer linterface un peu
prsente de Kagi. Le code html, mme sil nest pas totalement standard, se
matrise assez facilement condition dtre patient et den tester frquemment
le rsultat voir Acrobat et feuille de style
50
formulaire
Un traitement simple et peu onreux mais efficace. Le formulaire est appel via un script CGI
qui dporte son traitement sur un autre site et appelle lcran de confirmation denvoi
puis ramne linternaute au point de dpart. Il parvient au destinataire sous la forme
dun courrier lectronique. www.egyptologues.net/contact.htm
51
formulaire
51
formulaire
Cest dans Illustrator quest cr le premier gabarit, dcoup dans ImageReady en fonction
des zones au contenu fixe (id est, essentiellement, la palette de navigation) et
au contenu variable. Ce second gabarit est galement prcieux.
Cette manire de faire vite de charger la palette lors du passage dun
cran lautre et permet ainsi dconomiser le temps de linternaute, dont on sait
combien il est prcieux. Elle permet galement de prparer les roll-overs de la
palette de navigation.
Cest aussi ImageReady qui gnre le premier fichier html qui sert de
base au troisime gabarit, finalis dans Dreamweaver. Lcriture du code grant les
52
gabarit
roll-overs de la palette est grandement facilit par ce dernier logiciel voir html, navigation,
palette, roll-over et standardisation,
Le premier (ci-dessous) et le deuxime (ci-contre) gabarit : dIllustrator ImageReady.
53
gabarit
53
gabarit
Du deuxime (ci-dessous) au troisime (ci-contre) gabarit : ImageReady gnre un code html
qui est peaufin dans Dreamweaver. Il ne reste plus qu adapter les lments variables:
nom de limage principale, liens page prcdente et page suivante, zones cliquables
54
gabarit
55
gabarit
55
gabarit
Gif ou jpeg ? Il ne sagit pas dune affaire de got mais dun raisonnement purement
technique. Au gif, les animations, les textes traits comme des images et les documents
au trait ou comportant peu de couleurs. Au jpeg, les photographies.
Les paramtres sont dfinir prcisment : nombre de couleurs pour
le gif ou taux de compression pour le jpeg. Il ne faut pas changer le nombre de couleurs
dun cran lautre dune mme srie gif sous peine de fluctuations visibles.
Il ne faut pas non plus trop compresser les images jpeg, sinon une pixellisation trs
visible apparat.
Un mauvais choix se paie toujours comptant : soit par des temps de
56
gif, jpeg
tlchargement allongs, soit par une qualit dimage dgrade voir animation et
poids
ma gauche, le gif, ma droite, le jpeg : poids gal (28 kO dans les deux
cas), la comparaison se passe de commentaire.
gif, jpeg
57
Sil fallait un jour dfinir ce quest lart graphique, ce choix serait hamletesque.
mon modeste avis, il commence par les piroglyphes de lAsie centrale et finit
par les signes dHenryk Tomaszewski dclare Roman Cieslewicz 1.
Le geste graphique tient sa force et sa complexit de son adquation
un message, ce quun tre humain a voulu dire un autre pour engager la
conversation. La difficult principale vient du fait quil faut respecter le message du
client tout en affirmant son style, ses sentiments, ses positions pour mouvoir,
cest--dire, au sens premier, avoir de limpact. Cette confrontation entre vrit, prise
de position et dialogue sert de base toute communication qui veut dpasser les
58
graphisme
abus de la propagande, quelle soit politique ou commerciale. Engager sans a priori
le dialogue, tolrer que linterlocuteur ne soit pas daccord, est loppos des objectifs
du marketing.
danalyser le contexte et ses contraintes techniques. Les apports des sciences sociales
sont fconds; les connaissances gnrales sont mises contribution. Il sagit, ensuite,
de trouver une dynamique entre symbolique des signes, choix des codes de repr-
Dans le cadre dune commande, le travail du graphiste est dabord
sentation et adquation de ces derniers au support ditorial.. Le rsultat de ce travail
est affiche, livre, plaquette, exposition, signaltique Les sites internet sont un
terrain nouveau mais non radicalement diffrent dexercice du mtier voir
client, ditorial, hirarchisation et style
Du papier lcran, la dmarche du graphiste reste la mme :
du contexte, de la structure de linformation et des contraintes
techniques dpend la mise en forme. Ci-contre, le droulant
dune brochure et la structure dun site.
1. In Henryk Tomaszewski, graphismes et pdagogie, ditions Somogy.
59
graphisme
59
graphisme
60 60
hirarchisation
Hirachiser, cest organiser linformation et en tirer les consquences sur le plan visuel :
systmele systme franais et ses blocagesnouveau
contacts
rvolutions
tat-providence
rformescontrat-social
1.1 le systme franais1.2 un secteur public mal gr1.3 une nouvelle noblesse
cela implique de faire des choix avec le client et dutiliser les ressources de la couleur
nouveaudernires mises jour 1/2
cellulesde recherche
annuaires bibliographies annonces
14 dcembre 2001
Textes babyloniens dats de Cambyse (Francis Joanns)
Notes Nabu premier millnaire
Nouvelles publications : novembre 20018 novembre 2001
jasr 2001.3, Geoffrey D. Summers, Near Eastern Archaeologyon the World Wide Web: Who Wants What ?
documents gyptiens
textes babyloniens, nouvelle prsentation, version revuedes textes de Francis Joanns
cours et sminaires de lanne 2001-2002, Collge de Franceet cole pratique des Hautes tudes
on en parle
hirarchisation
61
et lart de la typographie pour rendre visible et lisible cette hirarchisation de
62
hirarchisation
linformation voir arborescence, couleur, ditorial, graphisme et typographie
hirarchisation
63
64
home page
La page daccueil dun site doit
rendre compte de son objet
et de son organisation. Il ne peut
sagir de produire un exercice
de style isol mais, au contraire,
de raliser lintroduction au site.
La home page doit safficher
trs rapidement, donner
immdiatement accs aux
diffrentes parties du site
et tre compatible avec toutes
les configurations : inutile
de jeter la porte, dentre
de jeu, la plupart des visiteurs
voir accueil, arborescence, Flash,
graphisme et typographie
64
home page
La page daccueil dun site doit
rendre compte de son objet
et de son organisation. Il ne peut
sagir de produire un exercice
de style isol mais, au contraire,
de raliser lintroduction au site.
La home page doit safficher
trs rapidement, donner
immdiatement accs aux
diffrentes parties du site
et tre compatible avec toutes
les configurations : inutile
de jeter la porte, dentre
de jeu, la plupart des visiteurs
voir accueil, arborescence, Flash,
graphisme et typographie
Le html (Hypertext markup language) est le langage comprhensible par lensemble des
navigateurs internet (Internet Explorer, Netscape). Chaque lment dune page
peut tre associ un lien. Lutilisateur, en cliquant sur ces liens, fait safficher une
autre page dans son navigateur. Le html permet de positionner des lments graphiques
ou multimdia des endroits prcis et de dfinir des styles pour formater
rapidement les diffrents textes dune page.
Il existe plusieurs versions du langage html : il faut en tenir compte
et sassurer que les pages composes apparatront bien sous la mme forme, quel que
soit le navigateur utilis.
Les diteurs actuels facilitent grandement le dveloppement, pour
peu que le travail ait t correctement prpar: liens, roll-overs, prchargement
des images et gestion de larborescence sont parmi les fonctions les plus utilises
sans compter, bien entendu, les tableaux prdfinis par ImageReady et dont les cases
contiennent les diffrentes images composant lcran.
Il faut commencer par dfinir la carte du site, sinon la gestion de
larborescence et la vrification des liens ne pourront tre effectues. Les caractristiques
du premier cran sont alors modifies: titre, couleur du fond, marges et centrage.
Au tour, ensuite, de la palette de navigation et ses roll-overs. Pensez, galement,
dfinir en franais et en anglais les tags qui seront exploits
par les moteurs de recherche : liste des mots clefs () et description en une phrase ().
Un des grands avantages du html, cest que les fichiers sont des fichiers
texte: ils peuvent tre ouverts dans tout diteur ou traitement de texte. Il est alors
possible de chercher toutes les occurrences dun terme (nom dune image, liens)
et de les remplacer par un autre: cette mthode se rvle vite trs prcieuse lorsquil
sagit de faire vivre rapidement les pages actualit dun site
html
65
66
html
66
html
Les diteurs html grent parfaitement larborescence des sites. Avant
de raliser une srie dcrans, il faut dfinir prcisment les gabarits
dont le gabarit html qui simplifient le travail.
Une fois dfinies les caractristiques gnrales de la page qui servira de gabarit, il est possible
de raliser le roll-over de la palette de navigation. Pour insrer une image survole,
le plus simple est de supprimer limage fixe et de rimporter les deux images qui la composent.
67
html
68
html
68
html
Dreamweaver gnre automatique le code JavaScript de gestion du roll-over. Une seule
contrainte : il faut sous peine de message derreur penser donner limage un nom
qui soit diffrent de celui des fichiers appels.
On nous rebat les oreilles sur lavantage quil y aurait transformer, dun clic de souris
et sans effort, un fichier InDesign ou XPress en crans html. Parce qu supports
diffrents, fonctions, contenus et formes diffrents, cette dmarche ne nous semble
pas trs intressante. En revanche, la complmentarit entre le papier et lcran peut
parfois prendre un aspect inattendu, entraner une augmentation de la frquentation
dun site et engendrer des conomies dimpression substantielles. Pour
preuve, le livre ci-dessus dont les planches, imprimes en une couleur , sont prsentes
en couleurs sur le site de lditeur. Sur ce site, il est galement possible
dagrandir les planches voir gabarit
Quid dune recherche interne au site ? Deux cas de figure sont envisager : cette
recherche porte sur quelques informations textuelles et trs structures ou sur une
grande quantit dinformations comportant des textes et des images.
Dans le premier cas, un tableau html correctement plac dans larborescence
du site doit suffire, dans la mesure o tous les navigateurs permettent
de rechercher une chane de caractres lintrieur dun cran.
Dans le second, le recours une base de donnes est quasi obligatoire.
Qui dit base de donnes dit comptences pointues pour dvelopper le programme
et le mettre en ligne. Il faut, dentre de jeu, se proccuper du type de logiciels que
lhbergeur propose et du surcot quentranerait la mise disposition dun ordinateur
exclusivement rserv cette base de donnes (trs rares et inconscients
sont ceux qui acceptent de faire tourner sur leurs serveurs et au pril de leur hbergement
des programmes exognes). Une fois les comptences trouves et le cadre
du dveloppement dfini, il reste travailler en symbiose avec le dveloppeur et
lui proposer une interface de consultation propre.
Des moteurs tournant sur un autre site et indexant le contenu du
vtre existent. Un des plus aboutis et des plus performants est fond sur Intuition
(www.sinequa.com/): Sinequa Free Index, destin aux sites personnels, est gratuit;
Sinequa Pro Index est, comme son nom lindique, destin aux professionnels et
payant. Dtail ne pas ngliger : Intuition sait indexer toutes sortes de fichiers, y
compris les documents Acrobat voir moteur de recherche
indexation
69
La vie est mal faite : il faut non seulement exaucer les souhaits,
dsirs et exigences des clients, mais aussi rpondre
par avance aux questions que linternaute se posera et anticiper
ses habitudes et ses manies voir accueil, graphisme,
navigation, service et suivi
internaute, logiciel
Ce nest pas au logiciel dimposer ses volonts au graphiste ou au webmaster. Plus que
les perfectionnements de tel ou tel programme, ce qui compte, cest ladquation
entre un propos et les outils mis contribution.
siner, Photoshop pour retoucher les photographies, ImageReady pour gnrer les
Nous utilisons, par ordre dapparition lcran, Illustrator pour des-
images gif ou jpeg et le code brut de fonderie du gabarit html, Dreamweaver pour
grer larborescence du site et finaliser les crans, GoLive pour en vrifier le code
mais aussi Word et TexEdit pour en diter le texte, XPress, PageMaker ou InDesign
pour mettre en pages les textes transforms en fichiers Acrobat grce aux logiciels
du mme nom, Excel pour prparer les tableaux et 4D pour les mouliner , sans
oublier FireWorks en complment dImageReady et tous les outils de gestion des
serveurs web et de tlchargement des fichiers voir outils
Internet mdium universel ?
Paradoxalement, une mme page
napparat jamais de la mme
manire selon que lon utilise
Macintosh, PC, navigateur
un Macintosh ou un PC,
selon le type de navigateur (id est
Internet Explorer ou Netscape
Navigator pour ne citer que
les deux poids lourds) et, mme,
selon la version dudit navigateur !
Cest une des raisons pour lesquelles
nous avons choisi de traiter
nos crans comme des images gif.
Cette mthode offre une grande
libert graphique et typographique.
Elle assure quune page sera toujours
affiche de la mme manire,
quel que soit lquipement
de linternaute. Les gifs obtenus
sont lgers (de 10 15 kO pour
des crans de texte simple, moins
de 35 kO en tout tat de cause).
Pour amliorer la fluidit
de la navigation, il est possible,
grce quelques lignes de JavaScript
parfaitement crites par
Dreamweaver ou GoLive,
de prcharger les crans.
Pour assurer la mme cohsion
aux tableaux, le recours aux feuilles
de styles (CSS) simpose voir feuille
de style, html et scripts
71
Quil sagisse dcran ou de papier, les principes gnraux de mise en pages restent les
mmes mais les problmes de lisibilit sont diffrents. Si le fond de lcran est
clair, sa luminosit rend pnible la lecture suivie. La taille des pixels empche de descendre
le corps du texte courant en dessous de 10 ou 12 points. La synthse
additive (rouge-vert-bleu) modifie le rendu des couleurs.
Les limitations du html et de ses drives (xml) nempchent pas
de mettre en pages les crans voir hirarchisation, logiciels,service et typographie
72
mise en pages
Tout est permis, condition de rester pertinent et lisible.
Leau pour lhumanit (ci-dessous): www.atelier-corbin.com/eau/catalogue/ catalogue.htm.
Le site de la ville de Saint-Denis (en cours de ralisation, ci-contre,
en haut) et celui de Thotm (ci-contre, en bas): www.thotm.com/etaussi/argot/ argot01.htm
mise en pages
73
Obtenir quun moteur de recherche classe un site dans les dix premiers est un vritable
exercice de style. De nombreux lments entrent en compte : le nom du site, bien
sr, mais aussi le texte des fichiers html et les deux balises meta keywords
et description .
Dans la jungle des noms de domaine premier arriv, premier servi
il est devenu trs difficile de rserver une bonne place. Il faut dsormais faire preuve
dimagination. Les moteurs ayant tous leurs algorithmes propres, les plus perfectionnistes
des webmasters prparent des pages satellites au contenu adapt
chaque robot logiciel venant inspecter les pages. Dfinir les balises est plus compliqu
quil ny parat : la liste des mots clefs doit tre exhaustive mais pas trop
longue ; la phrase de description doit tre explicite. Pensez crer une version
anglaise de ces deux balises. Si les textes des crans sont traits comme des images
gif, il faut alors crer des pages annexes, invisibles, reprenant, partie par partie du
site, les textes mis en ligne voir hbergement, html, nom de domaine et rfrencement
74
moteur de recherche
Pour offrir linternaute une navigation agrable et claire, toutes les ressources de la
conception ditoriale et du graphisme peuvent tre utilises. De la page daccueil
www.achemenet.com/choix.htm, linternaute accde aux cellules de recherche
navigation
75
aprs avoir fait son choix parmi les multiples offres (les titres sombres correspondent
des parties en travaux), il arrive www.achemenet.com/recherche/
monnaies/grandroi.htm ltude dtaille des monnaies des Grands rois
76
navigation
puis un choix raisonn www.achemenet.com/recherche/monnaies/grandroi/
choix/21.htm. Un retour lcran de choix des monnaies permet dadmirer les
poinons www.achemenet.com/recherche/monnaies/grandroi/choix/21.htm
navigation
77
aprs avoir vrifi la forme dun poinon www.achemenet.com/recherche/
monnaies/grandroi/poincons/18.htm, lamateur, dun clic, arrive lcran des annonces
www.achemenet.com/annonces.htm voir ditorial, hirarchisation et palette
78
navigation
Plus un site comporte dcrans, plus il est mis jour rgulirement, plus il est impratif
quil y ait une entre nouveau sinon, linternaute erre la recherche des
nouveauts, se dcourage et ne revient pas voir accueil, suivi et webmaster
www.egypt.edu/et www.egyptologues.net/nouveau.htm
lgypte
livres
feuilleton actualitenseignement
et aussi
dernire mise jour le 1er janvier 2002
nouveau
archologie philologiela chaire histoire liens
egyptologues.net
79
80 80
objectif
But, cible que quelque chose doit atteindre, rsultat vers
lequel tend laction de quelquun, dun groupe. 1
La dfinition, avec le client, de lobjectif permet de dterminer
les moyens utiliser pour latteindre. Cette dfinition
prcise et simple est un garde-fou pour tout
processus de communication.
Pour dterminer un objectif, il faut mettre
en oeuvre une procdure de choix, inspire par lexi-
gence dmocratique dun accord partag ou dun consen-
sus peut-tre assez dsordonn pour inspirer de lhorreur
aux technocrates et les inciter rver dune formule
magique []. Bien entendu, aucune formule magique
nest disponible []. Amartya Sen, prix Nobel
dconomie 1999 2
1. Grand dictionnaire encyclopdique Larousse.
2. in Un nouveau modle conomique, dveloppement, justice, libert,
ditions Odile Jacob.
La rflexion mene par le graphiste et son client pour dfinir le projet ditorial et le
contenu du site permet de choisir les outils utiliser: mode de cration des crans,
type de programmation, langages complmentaires mis en oeuvre (scripts, bases de
donnes), nature de lhbergement voir couleur, ditorial, graphisme, logiciels,
typographie
Ce qui se conoit clairement snonce aisment et les mots pour le dire viennent simplement
dit ladage: en dautres termes, lorsque le graphiste sait ce quil doit faire, le ralisateur trouve
facilement les bons outils et les tapes de la production senchanent simplement.
Dessin dans Illustrator, transformation en gif et dcoupe dans ImageReady, criture du code
html dans Dreamweaver, contrle dans GoLive et surf dans Internet Explorer :
www.ecole-maryse-eloy.com/pages_html/cadres.htm (dans un tat prcdant sa modification).
outils
81
82 82
outils
outils
83
84
palette de navigation
.edu
feuilleton livres actualit et aussienseignement
L thi it h
84
palette de navigation
.edu
feuilleton livres actualit et aussienseignement
L thi it h
net
introduction cosmographie historiographie
liens
archologie philologiela chaire histoire lienscolloque 1/3
Le reflet de lorganisation de linformation et de la conception ditoriale est la palette de navigation. Bienconue, elle remplace fort avantageusement les innombrables plans du site dont on peut se demander quoi ils servent voir arborescence, hirarchisation et navigation
palette de navigation
85
Lennemi, cest la photographie et plus prcisment le poids des images. Linternaute
qui attend plus dune dizaine de secondes laffichage dun cran et a fortiori celui
de lcran daccueil est un internaute mcontent, qui peut zapper et est alors perdu.
Trois options techniques permettent de remdier ce problme :
primo, bien paramtrer le taux de la compression jpeg le cas chant, un cran
comportant du texte et une grande image sera dcoup en zones gif et jpeg ; secundo,
ne pas infliger doffice laffichage dune image de grande taille mais en proposer une
vignette linternaute qui a cliqu pour agrandir limage sait quil doit tre plus
patient; tertio, prcharger les images voir gif, jpeg, poids et scripts
86
photographie
Les deux images peuvent tre agrandies en cliquant sur les vignettes.
Le premier cran, gif, pse 20 kO; les deux suivants 52 et 13 kO:
www.achemenet.com/recherche/sites/aynmanawir/temple01.htm
nouveau cellules annuaires bibliographies annonces
de recherche
sites archologiques Ayn Mnwr tudes temple 1/1
Le temple construit en brique crue sur un plan axial est long
de 35m et large de 18m. Une cour prcde une faade pylne
derrire laquelle se trouve un vestibule. Au centre une salle
hypostyle vote donne accs trois chapelles.
Les enduits de lencadrement de la porte de la chapelle
axiale taient dcors. La chapelle nord, construite sur une crypte,
avait conserv son mobilier cultuel lors de labandon dfinitif
du monument.
Partie remarquable de ce mobilier, environ 360 statuettes
en bronze, essentiellement des figurations dOsiris.
nouveau cellules
de recherche
sites archologiques Ayn Mnwr tudes temple 1/1
annuaires bibliographies annonces
vue arienne du temple
nouveau cellules
de recherche
sites archologiques Ayn Mnwr tudes temple 1/1
annuaires bibliographies annonces
statuette dOsiris
inv 3307
nouveau cellules
de recherche
sites archologiques Ayn Mnwr tudes temple 1/1
annuaires bibliographies annonces
statuette dOsiris
inv 3307
photographie
87
Transformer un fichier Illustrator en image est dautant plus simple quAdobe a prvu
tout ce quil fallait, sous la forme dImageReady, complment de Photoshop. Les
crans de texte et ceux ne comportant que des images au trait ou peu colores
(ainsi que les vignettes des images agrandir) sont transforms en gifs. De
manire les allger au maximum et en fonction de lanti-aliasing des textes et
de la qualit des images , le nombre de couleurs sera compris entre 16 et 256. Les
crans comportant des images de plus grande qualit sont traits en jpeg (une
qualit moyenne de 60 est un bon compromis, permettant de traiter galement les
lgendes des illustrations). Les animations seront obligatoirement traites comme
88
poidsdes gifs : quand du jpeg anim ? voir couleur, gif et jpeg, logiciel et photographie
Du fichier Illustrator lcran, tout est affaire de doigt. Ci-contre, des dtails de la trs grande
carte (les images gif sont gauche et les jpeg droite) : il sagit de trouver le bon compromis
entre le poids de limage finale et le nombre de couleurs (gif) ou le taux de compression (jpeg).
lvidence, cest le gif quil faut privilgier ici. www.achemenet.com/recherche/sites/
aynmanawir/carte03.htm
5800
5400
5000
4600 4600
5000
5400
5800
2000160012008004000-400-800-800-4000400800120016002000
3800
4200
28002400
3800
4200
28002400
*
* *
*
p
p
p
p
MQ-3
MQ-4
MQ-5
MQ-2 MQ-1
MQ2
MQ3
MQ1
MQ0 MQ4
MQ5
MQ6
MQ7
MQ8
MQ9
MQ10
MQ11
MQ12
MQ14 MQ15
MQ13
MQX
MP4
palmeraie
ncropoles
atelier de potier
temple
MMS
MMR
MZB
MZD
MZA
MP3
MMC
MQ5d
MDA
MMD
MMA
MQ4m
MMB
MMF
MQ1t
MQ0t
MMPMN1
MN2
3041' E
2434'N
23,454 grN.G.
MQ4d
MME
agglomration / dpotoir romain
agglomration / dpotoir perse
agglomration / dpotoir ptolmaque
dunes de sable
parcellaire
rseau hydraulique
cliquez pour tlcharger la version Acrobat de la carte
* zone d'outillage lithique
p
le systme de coordonnes est indpendant
l'quidistance entre les courbes de niveau est de 2 m
carte dresse
sous la responsabilit
de Michel Wuttmann
Ifao
89 89
poids
90
poids
90
poids
Le gif est idal pour les textes et le jpeg pour les photographies. Il ne faut
donc pas hsiter dcouper lcran. Sept cellules contiennent les gifs
de la palette de navigation et trois les deux textes gif qui encadrent
une image jpeg. www.thotm-editions.com/ diffusion/hierogyphes.htm
Comme aurait pu le dire Jacques de Chabannes, marchal
de France et marquis de La Palice, rien ne sert davoir un
superbe site internet si personne ny vient et sil ntait
pas mort, votre site ferait encore envie.
Pour gnrer du trafic, il faut, tout dabord,
un bon nom de domaine. Il est devenu quasi impossible
dobtenir un nom gnrique mme merde.com
est rserv par une entreprise de San Francisco! et il
faut dsormais faire preuve dimagination.
://
Deux mthodes renforcent limpact du
nom de domaine : primo, on peut tablir avec des sites
traitant de sujets voisins des liens rciproques ; secundo,
il faut obtenir un bon rfrencement dans les moteurs
de recherche (id est Yahoo, Lycos).
vous de jouer des balises meta et
dfinir en franais et en anglais les tags qui
seront exploits par les moteurs de recherche : liste des
mots clefs () et description en une phrase ).
Si les textes sont traits comme des images,
il faudra crer des pages satellites contenant, au format
html, lintgralit de ces textes et appeles par des
liens discrets. Les webmasters les plus pointus dfinissent
des pages adaptes chaque moteur de recherche.
Une fois les tags dfinis et les pages satellites
en ligne, il reste dclarer le site auprs des moteurs
de recherche. Toute cette procdure est relativement
complexe et il peut tre souhaitable de faire appel un
spcialiste voir html et nom de domaine
rfrencement
91
Les points de repres visuels, comme pour tout type de support de communication,
sont indispensables la cohrence globale et permettent linternaute de savoir dans
quelle partie du site il se trouve. Tous les outils du graphisme peuvent tre mis
contribution : formes, symboles, couleur, lettres, chiffres voir accueil, couleur,
navigation, palette et typographie
Ciseaux, main, point dexclamation, rouge, noir, blanc
sont les points de repres qui se retrouvent dun cran lautre.
www.eauhumanite.com ; www.atelier-corbin.com/eau/
association/association.htm et www.atelier-corbin.com/eau/
catalogue/catalogue.htm
92
repres
repres
93
Pour mettre en vidence un point de repre, le roll-over se rvle trs efficace. Monter
un roll-over prend du temps et son usage peut tre rserv aux lments fixes de lcran,
id est la palette de navigation.
Les diffrents tats des roll-overs qui peuvent tre des gifs anims
sont autant de fichiers Illustrator dcoups dans ImageReady et monts dans
Dreamweaver voir accueil, animation, repres et html
94
roll-over
ditions diffusion achat
en ligne nouveau contact
336 pages et 30 figures,
140 x 205 mm, cahiers
cousus, dos carr, reli.
ISBN 2-914531-00-1 ;
280 francs, 42,7 euros,
43 dollars amricains.
Cliquez ici pour
commander cet ouvrage
Cliquez ici pour accder
aux fichiers Acrobat
du BHAch I
et du BHAch II.
persika 1
collection dirige par Pierre Briant,
chaire dhistoire et civilisation
du monde achmnide
et de lempire dAlexandre,
Collge de France
bulletin dhistoire
achmnide II
Pierre Briant
ditions diffusion achat
en ligne nouveau contact
336 pages et 30 figures,
140 x 205 mm, cahiers
cousus, dos carr, reli.
ISBN 2-914531-00-1 ;
280 francs, 42,7 euros,
43 dollars amricains.
Cliquez ici pour
commander cet ouvrage
Cliquez ici pour accder
aux fichiers Acrobat
du BHAch I
et du BHAch II. persika 1
collection dirige par Pierre Briant,
chaire dhistoire et civilisation
du monde achmnide
et de lempire dAlexandre,
Collge de France
bulletin dhistoire
achmnide II
Pierre Briant
95
roll-over
95
roll-over
Structurer le site et donner aux rubriques et aux sous-rubriques des noms explicites qui
rpondent aux questions quoi? o? quand? comment? est un des aspects
essentiels de la dmarche ditoriale. La mise en forme graphique est un des outils
tre citoyen agenda mon quartierpratique
96
rubriques
conseil municipal services municipaux
associations
services de ltat action internationale
voter
aide juridique
tre citoyen agenda mon quartierpratique
aide juridique associations bienvenue au monde lus, conseil municipal initiatives services de ltat
services municipaux voter
aide aux handicaps
anciens
combattants
culture
et cadre de vie
socio-ducatif
amicales des locataires
associations et comits de quartiers
dmarches quartier emploi et insertion environnement
partis politiques sant socio-culturel
solidarit sport associations diverses
chercher
qui permet de rpondre ces questions voir accueil, ditorial, hirarchisation, palette
de navigation, repres et style
le systme de rubriques du site de la ville de Saint-Denis, en cours de ralisation.
tre citoyen agenda mon quartierpratique
Allende Centre ville-Basilique Courtille-Saussaie-Floral Delaunay-Belleville Franc Moisin-Bel air
Joliot-Curie-Cosmonaute La Plaine Mutuelle-Champ de course Pri-Langevin-Stalingrad-Politzer
Pleyel Rpublique-Gare-Porte de Paris Smard-Delaune-Guynemer
adresses utiles agenda associations dmarche quartier
rubriques initiatives plan pratique
associations disciplines pratiques installations sportives
tre citoyen agenda mon quartierpratique
action sociale cultes dmarches-formalits se dplacer se distraire-se cultiver emmnager-dmnager
tudier sinformer sinscrire se loger propret-voirie retraite se soigner sport travailler urgences
97
chercher
Un langage de programmation interne permet la plupart des naviga-
teurs de rendre les pages html plus interactives ou plus dynamiques.
largement incompatibles, de JavaScript voir html, roll-over
98
script, JavaScript
JavaScript permet, par exemple, de substituer trs simplement
une image une autre au moment o la souris la survole: cest
un roll-over. On peut agir de la mme faon sur du texte et en changer
la couleur au moment o la souris passe au-dessus.
Le plus rpandu de ces langages est JavaScript dont il existe pluclics
de souris ou la saisie de texte dans des formulaires.
sieurs versions qui permet daccder individuellement (mais sous
certaines conditions) chacun des lments dune page et donne aux
programmeurs la possibilit dagir en rponse certaines actions de
lutilisateur. Ces actions sont, le plus souvent, des mouvements ou des
JavaScript ne se limite pas la gestion de quelques jolies
animations dans les pages : il peut aussi vrifier la validit des champs
dun formulaire (par exemple dun code postal) avant que celui-ci ne
soit envoy au serveur pour enregistrement. Cest lui qui prcharge
(preload) les images.
On confond parfois Java et JavaScript. Mme si ces deux
langages se ressemblent, ils sont diffrents et ne sont pas excuts de
la mme faon dans le navigateur. Alors que du code JavaScript tourne
directement dans le navigateur, un programme Java a besoin quune
machine Java soit associe ce navigateur et va sexcuter dans une
applet. Un programme Java et un code JavaScript peuvent cohabiter
dans une mme page et schanger des informations.
Les deux navigateurs les plus populaires Internet
Explorer et Netscape ont chacun leur propre version, qui sont
Pour que linternaute revienne rgulirement sur un site grand public ,
il faut lui rendre un service. Certains sites les moteurs de recherche
(www.google.fr ; http://fr.altavista.com ; www.lycos.fr/), les encyclopdies
en ligne (www.universalis-edu.com ; www.eb.com), les
sites dactualit (www.liberation.fr; www.lefigaro.fr) ou techniques
(www.macgeneration.com ; www.macplus.net) , par leur seul
contenu, rendent ce service.
Les sites dachat en ligne, pour peu quils soient correctement
conus et disposent dun moteur de recherche dautant plus
performant que leur contenu est abondant (www.picard.fr; www.laredoute.
fr; www.chapitre.com; www.fnac.com), peuvent aussi rentrer
dans cette catgorie.
En gnral, les concepteurs des sites voqus ci-dessus ne
considrent toutefois pas que la qualit ditoriale et le graphisme font
partie des services rendre leurs clients.
Les sites autopromotionnels , qui sont souvent de
simples plaquettes publicitaires doivent, en revanche, faire des
efforts particuliers en proposant une structure ditoriale claire et une
mise en forme soigne. Ils doivent, en outre, proposer linternaute
des services ou des informations lis leur mtier, que lon ne trouvera
que chez eux et qui justifient le retour des visiteurs.
Certains accumulent les atouts. Le Monde, par exemple,
non seulement met lactualit en ligne mais propose des services tels
que la traduction du et vers le franais, langlais, lallemand et lespagnol
(outils > traducteur) et la rponse aux questions de franais
(outils > questions de franais) avec la possibilit dinterroger directement
le chef correcteur du journal
service
99
100 100
standardisation
Associe des normes graphiques tablies, la standardisation du processus de fabrication
permet de mettre en mouvement une dynamique entre les contraintes techniques
et la conception graphique. Une fois les diffrents gabarits crs, la ralisation
des pages suivantes est alors dune simplicit confondante: aucun texte html nest
mettre en forme et le dessin des crans, rgi par la norme graphique, ne prsente
aucune difficult particulire. Si la taille des diverses images composant les crans
est bien fixe, tous les autres lments resteront en place: il ny a qu modifier le nom
de limage correspondant aux lments variables, modifier les liens image
prcdente et image suivante et, ventuellement, la disposition des zones et les
liens correspondant aux imagettes sur lesquelles il faut cliquer pour obtenir limage
plein cran.
Html, cest du texte seul . Sa paresse rend lhomme intelligent, qui
lui fait trouver des astuces techniques pour conomiser son nergie. Nhsitez pas
donner aux images les mmes noms ( lextension. gifou. jpg prs) quaux fichiers
html. Utilisez les fonctions rechercher-remplacer des traitements de texte. Faites
appel des utilitaires comme FileBuddy pour renommer une srie de fichiers
Rutiliser (au mme niveau darborescence, gestion des liens oblige) les nombreux
crans contenus dans un dossier est alors un jeu denfant voir arborescence, cran,
feuille de style, gabarit, html et palette de navigation
egypt.edulgypte feuilleton livres et aussienseignement
actualit
Dcouverte dune cavit soigneusement masque
dans la pyramide de Khops
Gilles Dormion et Jean-Yves Verdhurt sont bien connus
des gyptologues depuis leurs dcouvertes tonnantes
de cavits soigneusement caches dans la pyramide
de Medoum. La communication correspondante au congrs
mondial dgyptologie, qui stait tenu au Caire du 28 mars
au 3 avril 2000, a eu un grand retentissement.
Courant 2002-2002, avec lautorisation du conseil suprme
des Antiquits gyptiennes, ils ont effecu lintrieur des
autres pyramides de la IVe dynastie les mmes tudes et ont
appliqu la mme mthodologie que pour la pyramide de Medoum.
Ils viennent dannoncer que, dans la pyramide de Khops,
le go-radar a mis en vidence une anomalie, qui, en distance,
orientation et dimensions, correspond exactement au couloir
1 er janvier 2002
1
standardisation
La partie actualit du site www.egypt.edu est mise jour rgulirement et rapidement. Les textes
sont mis en place dans le gabarit Illustrator et leur partie variable dcoupe dans le gabarit
ImageReady. On recherche ensuite si une des actualits prcdentes comporte le mme nombre
dcrans. Le dossier concern est alors dupliqu. Ses fichiers html sont rebaptiss (via la fonction
idoine de FileBuddy). Les liens sont globalement modifis (par chercher-remplacer dans TexEdit).
Il ne reste plus qu crer les ventuels liens particuliers (imagettes cliquables, renvoi vers
les pages des partenaires, lien avec lactualit prcdente).
101
102 102
style
Le style est la faon particulire dont chacun exprime sa pense, ses motions,
ses sentiments. Pour illustrer cette dfinition du grand dictionnaire
encyclopdique Larousse, nous vous proposons quelques
citations: Le style, cest lhomme mme. Buffon 1; Le style nest
pas une danse, cest une dmarche. Jean Cocteau ; Le style est
comme les ongles: il est plus facile de lavoir brillant que propre. Pablo
Picasso; Sitt que lon souhaite faire partager un tat dme autrui,
on est oblig de se servir de la notion de style. Jacob Paludan. Affirmer
son style, cest affirmer sa libert car on ne combat pas pour tre libre,
mais parce quon lest dj. Jean Cavailles voir client, graphisme
1. Discours de rception lAcadmie.
Les deux spcificits dinternet sont lorganisation de linformation en arborescence
et un rapport trs particulier au rythme des activits humaines, au temps social: autant
un support imprim (livre, revue, plaquette, journal) a un achev dimprimer,
une limite physique (taille et nombre de pages) et un contenu fini (ventuelles
rditions mises part), autant un site devrait voluer rgulirement et ne devrait
avoir ni limite physique ni contenu fig. Lorganisation de la vie dun site doit tre
prvue ds sa conception.
Le suivi dun site internet est peut-tre lopration la plus complique:
toutes les comptences ont t mobilises pour crer, souvent dans lurgence, un site
(voire une page daccueil) sans que sa vie future ait t envisage : laccs direct aux
nouvelles pages nest pas mnag et les comptences indispensables (chef de
projet, graphiste, infographiste, webmaster) ont t dmobilises voir nouveau et
webmaster
suivi
103
Ds que le nombre dcrans atteint la centaine et a fortiori lorsquil dpasse le millier
se pose le problme de la gestion du texte. Il faut trouver un systme assurant
un rendu identique (quels que soient la machine, son systme dexploitation et
le navigateur) et un processus de cration standardis et rapide.
Les feuilles de style (CSS) permettent de dfinir peu prs le corps et
linterlignage. Elles imposent des ajustements crans par crans. Elles nassurent pas
que les textes safficheront dans la bonne police et dans la justification prcisment
souhaites. Lorsque le texte mettre en ligne est vraiment long et quil saffichera
sur plus de dix crans, la question dAcrobat est poser voir Acrobat, ascenseur, cran
feuille de style et typographie
Internet et gestion rigoureuse des textes ne sont pas incompatibles.
http://perso.wanadoo.fr/ babycare/html/gb/price.htm
www.achemenet.com/recherche/sites/aynmanawir/ occupation01.htm
www.cgt.fr/ucr/ucr/sante/invalidite04.htm
104
texte
referenc e
2 2
2 0
2 0
2 1
1 4
5 2
3 3
3 1
3 2
P r i c e s V A T i n c l u d e d , v a l i d f o r E E C . S a l e s o u t s i d e F r a n c e : p a y m e n t o n l y w i t h c r e d i t c a r d .
I f t o t a l a m o u n t u n d e r 6 0 0 f r a n c s ( 9 1 . 4 7 ) a d d 5 0 f r a n c s ( 7 . 6 2 ) f o r t r a n s p o r t c o s t .
S w i t z e r l a n d : V A T 2 0 . 6 % t o b e d e d u c t e d . Other destinations : contact us.
000
031
000
331
000
700
000
000
000
item
Changing cupboard
Changing mat, blue stripes
Changing mat, white colour
Safety changing mat, blue stripes
Moses stand
Sitmatic
Swing cradle
Reclining cradle
Siesta cradle
prices in FF
799.00 F
94.00 F
89.00 F
148.00 F
185.00 F
252.00 F
310.00 F
199.00 F
255.00 F
prices in euros
1 2 1 . 8 0
1 4 . 3 3
1 3 . 5 7
2 2 . 5 6
2 8 . 2 0
3 8 . 4 2
4 7 . 2 6
3 0 . 3 4
3 8 . 8 7
1
2
3
4
5
6
7
8
F o n t a i n e p u r i c u l t u r e b a b y c a r e
1 2 3 4 5 6 7 8 p r i c e l i s t
C l i c k h e r e t o c o n t a c t u s b y e - m a i l
d o w n l o a d o f t h e o r d e r f o r m : P c o r M a c i n t o s h
1 0 5
t e x t e
n ouveau cellules
de recherche
sites archologiques Ayn Mnwr le site occupation 1/6
annuaires bibliographies annonces
Lhomme revient Ayn Mnwr vers le milieu du Ve sicle
av. J.-C., avec de nouveaux moyens techniques. La capacit
exploiter les ressources en eau prsentes sous le sol
est la condition sine qua non pour tout tablissement
sur lun quelconque des sites de cette rgion aride.
Avant mme que nos recherches ne nous aient donn
les moyens de dater les ouvrages hydrauliques creuss
et amnags lors de ce retour, les qants, il fallait
donc imaginer quune partie au moins du vaste rseau
dont les dblais aligns la surface de la colline sont
observables par tout visiteur en ft contemporaine.
VNP maladie-chirurgie Safir rente invalidit Capital dcs
contactez-nous
Quand adhrer ? Plus tt vous souscrivez, plus bas sera le tarif,
cest--dire partir de 50 ans et ce jusqu 75 ans inclus.
Vous rpondrez aux questions simples poses sur le bulletin jusqu
70 ans inclus et des formalits mdicales complmentaires ds 71 ans.
Si vous adhrez en couple vous bnficiez chacun
de 6 mois dadhsion gratuite.
Exclusion : nest pas garanti lassur qui la date dadhsion
ne remplissait pas les cinq conditions dadmission figurant
sur la demande dadhsion.
105
texte
nouveau cellules
de recherche
sites archologiques Ayn Mnwr le site occupation 1/6
annuaires bibliographies annonces
Lhomme revient Ayn Mnwr vers le milieu du Ve sicle
av. J.-C., avec de nouveaux moyens techniques. La capacit
exploiter les ressources en eau prsentes sous le sol
est la condition sine qua non pour tout tablissement
sur lun quelconque des sites de cette rgion aride.
Avant mme que nos recherches ne nous aient donn
les moyens de dater les ouvrages hydrauliques creuss
et amnags lors de ce retour, les qants, il fallait
donc imaginer quune partie au moins du vaste rseau
dont les dblais aligns la surface de la colline sont
observables par tout visiteur en ft contemporaine.
VNP maladie-chirurgie Safir rente invalidit Capital dcs
contactez-nous
Quand adhrer ? Plus tt vous souscrivez, plus bas sera le tarif,
cest--dire partir de 50 ans et ce jusqu 75 ans inclus.
Vous rpondrez aux questions simples poses sur le bulletin jusqu
70 ans inclus et des formalits mdicales complmentaires ds 71 ans.
Si vous adhrez en couple vous bnficiez chacun
de 6 mois dadhsion gratuite.
Exclusion : nest pas garanti lassur qui la date dadhsion
ne remplissait pas les cinq conditions dadmission figurant
sur la demande dadhsion.
typographie
106
La typographie est lart dutiliser lespace que reprsente le
format dun ouvrage, en choisissant les caractres les mieuxappropris, en appliquant des rgles issues des habitudesde lecture, du respect de la langue, pour le plus grandconfort du lecteur. Grand dictionnaire encyclopdiqueLarousse voir couleur, graphisme, hirarchisation, style et texte
107
typographie
pdagogieactualit port ouvert
o ?
quoi ?
comment ?cole
rendez-vousdadmissiondu 1er marsau 30 juin
exposition-porte ouverte
les 17 et 18 mars 2001
admissionsur entretienpour lanneprparatoire,
admissionsur entretien etsur dossier pourla spcialisation demandede renseignementstl +33 (0)1 42 78 53 50e-mail secretariat@ecole-maryse-eloy.com
exposition des diplms
de la promotion 2001
le vendredi 15 juin
de 14 heures 19 heures
le samedi 16 juin
de 11 heures 19 heures
107
typographie
pdagogieactualit port ouvert
o ?
quoi ?
comment ?cole
rendez-vousdadmissiondu 1er marsau 30 juin
exposition-porte ouverte
les 17 et 18 mars 2001
admissionsur entretienpour lanneprparatoire,
admissionsur entretien etsur dossier pourla spcialisation demandede renseignementstl +33 (0)1 42 78 53 50e-mail secretariat@ecole-maryse-eloy.com
exposition des diplms
de la promotion 2001
le vendredi 15 juin
de 14 heures 19 heures
le samedi 16 juin
de 11 heures 19 heures
Quelques exemples dun traitement de la typographie qui naurait pas t concevable en html pur et dur .
www.ecole-maryse-eloy.com/pages_html/cadres.htm
108 108
typographie
organigramme direction statuts
LUCR rassemble des adhrentsvenus de tous les horizons,
qui se regroupent
portraits de militants
www.cgt.fr/ucr/ucr/organisation/organigramme.htm
histoire liens
109
typographie
egyptologues.net
historique enseignement bibliothque
autres outils renseignements pratiquesarchologie philologiela chaireJean Leclantleon inauguraleCliquez pour tlcharger les fichiers Acrobat
gyptologie, 1979-1990Gaston Maspero
www.egyptologues.net/chaire/grimal.htm
110
typographie
nouveau cellulesde r echer che
r essour ces bibliographies annonces
colloques
sminaires
publications en ligne
expositions/exhibitions cours et confrences
runions
110
typographie
nouveau cellulesde r echer che
r essour ces bibliographies annonces
colloques
sminaires
publications en ligne
expositions/exhibitions cours et confrences
runions
www.achemenet.com/annonces.htm
... ?
Le webmaster est celui sur qui repose la vie du site. Une fois
passe leuphorie du lancement, cest lui de coordon
ds le dbut de la rflexion et associ toutes les tapes
de la ralisation. Il est le contact des prestataires
*
ner la mise en ligne des nouveaux crans (et larchivage
de ceux devenus obsoltes). Il connat parfaitement
les tenants et les aboutissants du site (sa ligne ditoriale)
et en matrise les subtilits techniques: il est donc nomm
webmaster
111
extrieurs voir client, service et suivi
! ...
112 112
Pyramyd NTCV et Thotm ditions 2002,
tous droits rservs ; Bloc notes publishing est
dit par Pyramyd NTCV, 15 rue de Turbigo 75002
Paris, tlphone 33 (0) 1 40 26 00 99 tlcopie 33 (0) 1 40 26 07 03
e-mail artdesign@pyramyd.fr; Thotm ditions 5 rue Guyde-
la-Brosse 75005 Paris, tlphone 33 (0)1 43375658 tlcopie
33 (0)1 70817090 e-mail livres@thotm-editions.com; dptlgal
mars 2002 ; ISBN : 2-910565-18-1 ; achev dimprimer sur les
presses de limprimerie Autographe, 10 bis rue Bisson,
75020 Paris, tlphone 0143582626. Conception Thierry Sarfis, ralisation
Olivier Cabon / Thotm. Merci tous les clients qui nous ont fait confiance et Aminata
Sackho-Autissier, Sophie-Charlotte Barrire, ric Aubourg, Christophe Barthe, Thierry
Buanic, Nicolas Chaumely, Emmanuel Grard et Jos Paumard pour leur aide prcieuse. Merci
galement lquipe de Pyramyd et particulirement Michel et Patrick, Fleur, Isabelle, Marie-
Jos et Nathalie, Bruno, Fabrice, Laurent et Loc.
ap hh h$?z
, U } 3 ^
3
4
5
?
@
K
T
]
~
gd$?z
& ' < S i | V X f x gd$?z
<
[
y
& @ W l
# gd$?z # $ & e 7 O i 5 N k gd$?z m V W X p q r , x y O 1 2 W X gd$?z - ~ L 2 ; < $ w gd$?z ^ * + , q
X Y [ . } ~ " n gd$?z
! S! ! ! 9" " " "