Design et Conception site web
" 1 million de connects Internet en France ! "
Ce chiffre, qui parat norme, a t annonc en dbut 1998. Il faut
dire qu'il ne s'tait jamais vendu autant de machines sur les
diffrents circuits de distribution. Cette anne l, les publicits
pour les "ordinateurs multimdia communicants" et les grands
"providers Internet" ont envahi nos journaux, nos crans de tlvision
et autres moyens d'information. Il ne se passe pas une journe sans
que quelques uns des mots suivants : Multimdia - CD Rom - Modem -
Internet - Web - E-mail - Commerce Electronique - Intranet - etc.
ne soit prononcs dans notre entourage, la radio, la tl...
Dans pratiquement toutes nos revues de la presse informatique,
les oprateurs (AOL, Wanadoo, Compuserve,...) glissent un "CD
offert" contenant un "Kit de connexion" pour 10, 20, 50 (ou plus)
heures gratuites d'accs Internet. Le temps n'est plus o seules les
grandes socits et les grands organismes avaient un "site Web".
Aujourd'hui, les PME, les PMI, les artisans, les commerants et les
associations veulent figurer sur le "Net". Mme au niveau individuel
le phnomne s'amorce : grce aux "diteurs HTML" en shareware et aux
nombreuses possibilits d'hbergement gratuit, de plus en plus de
particuliers publient leurs "Home Page".
Si l'on peut dire que la communication crot sur un plan
quantitatif, il en va tout autrement sur un plan qualitatif. De
nombreux dysfonctionnements viennent perturber le bon droulement de
nos connexions. Qu'il est rageant, frustrant :
d'attendre l'affichage d'une page trop lourde ou d'un tableau
trop volumineux,
d'essayer de comprendre le fonctionnement d'une page compose
d'un trop grand nombre de "frames" la navigation hasardeuse,
d'tre oblig de tlcharger un composant supplmentaire pour
visualiser un nouveau gadget,
d'tre oblig de supporter les bannires des sponsors ou de tomber
nez nez avec une "Erreur 404"
de penser que pendant ce temps l les units tlphoniques sont
gentiment comptabilises par "France Tlcom"...
Introduction
Un site Web est un organe de communication dont le but est avant
tout de vhiculer un "message". Sa conception est souvent le fruit
des travaux d'une quipe pluridisciplinaire, compose de spcialistes
de la communication, d'informaticiens, et parfois de graphistes et
autres artistes.
Comme toute application informatique, la dmarche de conception
d'un site voit se succder diffrentes phases d'tude, d'analyse, de
ralisation, de mise en place et de tests. Une tude pralable si
l'opportunit d'un site est mergeante, permettra de rpondre
certaines questions de divers ordres techniques ou pas :
Quel message faire passer, dans quel but et pour qui ?
Quels services offrir :
vitrine, catalogue, vente avec ou sans paiement scuris,
rservation et prise de commande, promotion et publicit, mise
disposition d'information et/ou de bases de donnes, tlchargement,
rcupration de formulaires, messagerie, forum, jeux...
Qui va raliser le contenu ?
Peut on rutiliser ou adapter du "matriel" existant :
textes, graphismes, photos, sons, musiques, vidos...
Faut-il crer des applications spcifiques ?
Quel niveau de scurit faut-il attendre ?
De quel budget disposons nous ?
A quelle date le site doit-il tre achev ?
A qui sadresse le site:
utilisateurs internes ou externes, connus ou non,
professionnels ou non, nombre dutilisateurs,
disposition gographique...
...
Un cahier des charges, un descriptif complet du site permettront
de stabiliser le projet et de contractualiser les rapports
clients/fournisseurs. L'tape suivante aura pour but la conception
dtaille du site (arborescence, dcoupage en pages, navigation,
composition de la page...).
Document papier, document lectronique
Il parat intressant dtudier la structure dun document papier
pour apprhender celle dun document lectronique. Lunit suprieure est
le tome ou volume pour un ouvrage, le numro pour une revue. Chacun
dentre eux est dcoup en chapitres (parfois appels livres) ou en
articles pour une revue. La division infrieure est le paragraphe
avec une possibilit dinsertion dlments picturaux (schmas, dessins,
photos). La page est rarement une division logique, cest plutt une
division physique qui dpend du format dimpression.
La consultation dun ouvrage varie selon sa nature, elle est
linaire pour un roman, par la lecture des pages dans lordre
croissant. Elle peut tre linaire et rapide, dans le sens croissant
ou mme dcroissant, pour le feuilletage dune revue. Une consultation
slective est possible en utilisant une table des matires ou un
sommaire qui prsente la squence des diffrents articles. La
couverture affiche parfois des titres allchants avec le numro des
pages correspondantes. Une documentation technique doit permettre
en plus un accs direct linformation par un index de mots clefs.
Il est possible de retrouver cette hirarchie et ces outils dans
un site.
Prenons lexemple dun site qui peut tre assimil une revue. La
page daccueil joue le rle de la couverture, elle nous aiguille sur
la page centrale (sommaire) et peut directement nous amener des
articles daccroche. Les articles lectroniques sappellent des pages.
La notion de dcoupage physique en pages de papier correspond sur le
Web au dcoupage en crans, divisions qui dpendent de la rsolution
utilise et de la taille de la fentre.
La consultation linaire dune page seffectue la souris (par
cliques ou par molette). Le feuilletage en avant darticle en
article nest possible que si cette navigation a t prvue par le
concepteur. En sens inverse, le navigateur propose une option de
retour avec le bouton Prcdent. Laccs direct peut se raliser par le
menu de la page centrale. D'autres fonctionnalits telles qu'un
index ou une carte du site peuvent raliser cet accs direct. Un
autre type de navigation, (qui n'existe pratiquement pas sur papier
si ce n'est dans les notes de bas de page ou les "livres dont vous
tes le hros") permet partir dun lment quelconque (mot, titre,
image...) par lien hypertexte, hypermdia de rallier un autre lment
(une image agrandie, une autre partie de la mme page, une autre
page, une autre URL...).
Sites de premire gnration.
David SIEGEL, concepteur de sites et auteur clbre, classe les
sites Web en 3 gnrations dans son livre "Crer des sites Web
spectaculaires".
La fonction des premiers sites tait de mettre disposition des
informations presque exclusivement textuelles, pour des internautes
utilisant des postes monochromes, non multimdia, des modems faible
dbit et des navigateurs non graphiques (Lynx).
Les sites les plus simples proposaient une structure linaire
compose dune page daccueil conduisant une suite de longues pages,
dans lesquelles les textes taient spars par des lignes blanches ou
des traits horizontaux. Des sites plus labors, utilisaient une
structure hirarchise dans laquelle les informations taient
organises en rubriques divises elles-mmes en sous-rubriques... La
navigation permettait de rejoindre directement les niveaux
hirarchiques suprieures, voire le sommaire de la page daccueil.
Dautres structures ont aussi t cres: rayonnante, complexe, ... (Cf.
Conception dun site Web, document AFPA de J-P DEKOONINCK).
Exemple de site de premire gnration
Sites de deuxime gnration
Les sites de seconde gnration utilisent des structures
similaires ceux de la premire gnration. La diffrence rside en une
mise en forme plus labore et lutilisation des extensions apportes
au HTML. Les pages deviennent plus graphiques: utilisation dimages
de fond de page, icnes remplaant les mots en tant quancres des
liens hypertextes, boutons en relief et bandeaux de prsentation des
titres, utilisation de listes puces pour les menus
hirarchiques...
Certains concepteurs, trop pris de technologie, perdirent de vue
le but premier du site: communiquer un contenu, en prsentant des
pages beaucoup trop colores, en essayant de nouvelles
fonctionnalits exotiques plus ou moins reconnues par les
navigateurs...
En 1998, David SIEGEL dclare encore A lheure actuelle, la
majorit des sites Web se situe quelque part entre les sites de
premire gnration dops et des modles de seconde gnration mal
excuts.
Sites de troisime gnration
Les sites de troisime gnration ne se distinguent pas par leurs
caractristiques technologiques, mais plutt par leur conception base
sur le visuel, sur la mtaphore, sur lintrt et la curiosit quils
suscitent auprs des visiteurs. Leurs concepteurs les construisent
limage dun espace (habitation, magasin, village, ...), avec une
entre, une sortie, et des schmas de circulation qui conduisent
linformation.
La page dentre (cran splash) doit se charger rapidement. Elle
prsente un repre connu (logo, slogan) ou une accroche, et indique
au visiteur o il se trouve. Elle conduit la page centrale, soit
directement, soit par un tunnel. Ce dernier est une suite dcrans
destins vanter le site, attiser la curiosit. Sil existe, il doit
tre court (2 ou 3 crans), un raccourci doit permettre de lviter. La
page centrale (elle peut tre multiple) est le centre nerveux du
site et a pour but de diriger, dorienter le visiteur vers les
diffrentes pages. Elle doit tre agrable, riche et proposer de
nombreux liens internes. Suivant les cas, des liens de page page
sont aussi tablis. Une sortie, avec ventuellement un petit tunnel,
accompagne le visiteur et lui propose de revenir. Cette catgorie se
destine plus particulirement aux sites grand public ou aux sites
commerciaux.
Exemple de site de troisime gnration (avec 2 pages
centrales).
Structures et Reprsentations
De la mme faon qu'un architecte conoit son btiment sous forme de
schmas, d'esquisses et de plans, le concepteur de site Web doit
s'approprier un moyen de reprsentation de la structure du futur
site. Ce moyen doit faire apparatre prcisment les diffrentes pages
ainsi que les liens qui les runissent. Aprs une phase de rflexion
qui utilise des croquis, le projet se prsente sous forme d'un
organigramme de type planaire (cf. Site de 3 gnration) ou
isomtrique, notez que la visualisation des liens est plus difficile
avec le second type. Un diteur tel que "FrontPage 98" de Microsoft
montre de manire exhaustive tous les liens entrants ou sortants
d'une page.
Attention la "Navigation FrontPage 98" ne visualise pas les
liens Hypertexte crs par le concepteur mais ceux crs
automatiquement par le logiciel, dont les boutons se trouvent dans
les bordures partages..
Exemple dorganigramme isomtrique.
Liens hypertexte entrants et sortants de la page "Les
satellites".
Dans le cas dun site de troisime gnration, la structure finale
dpend aussi de la mtaphore choisie: on ne visite pas une autoroute
dans laquelle le paysage dfile de faon linaire, comme on visite un
village qui sarticule autour dune place.
Cosmtique du site
Lhabillage dun site peut tre volontariste, visible ou
discret.
La mtaphore affirme la volont des concepteurs, plus quun
habillage, elle fait partie intrinsque des sites de troisime
gnration. Les sujets sont varis, il doivent proposer une troisime
dimension qui peut tre lespace (boutique, exposition dart, ville,
march, bande dessine...), ou qui peut tre aussi le temps (mission
de tlvision, croisire et voyage, construction dun btiment...). En
tout cas, la mtaphore doit tre en adquation avec le contenu du
site, peu contraignante pour tre raliste et respecter les rgles de
la ntiquette (rgle de biensance et de politesse sur Internet).
Le thme dun site ninflue pas sur sa structure, il doit prsenter
les pages de faon originale, agrable et raisonnable. Souvent le
thme est inhrent au sujet mme du site: tel que lactivit dune
association loi 1901, la boutique pour un commerce divers, le
tourisme pour un syndicat dinitiative... Le thme doit tre cohrent
avec le contenu, il semblerait trs curieux de prsenter une cole
dagriculture en utilisant des lments thmatiques maritimes! Pour
russir un thme, vous devez rsister la tentation dajouter lexcs des
sons, des Gifs anims, des imagettes, des fonds, des polices ou des
barres horizontales fantaisie. Le thme doit plutt tre ressenti par
le visiteur sous la forme dune atmosphre.
Sans mtaphore, sans thme, vous pouvez aussi raliser un site de
qualit. Pour cela vous devrez jouer sur lharmonie des couleurs, des
formes et des compositions. Vous devez viter les couleurs trop
nombreuses ou trop agressives, les gadgets inutiles qui surchargent
les pages et napportent rien au message. Vous devez respecter une
homognit entre les pages, et faire preuve dimagination et de bon
got ...
ELEMENTS DE PAGE
CHARTE GRAphique
Les grands organismes, les grandes socits utilisent une charte
graphique. Elle impose pour tous les documents (papier, audiovisuel
ou lectronique) une image de marque, travers une constance dans les
logos, couleurs, polices de caractres et prsentation... Vous devez
la respecter pour monter vos pages. Si elle nexiste pas, vous devez
vous astreindre nutiliser que des lments qui sapprochent au mieux
de documents existants.
typographie
Il y a deux types de caractres prsents sur une page, et chacun
require un traitement diffrent. Soit, ils reprsentent du texte
rdactionnel et sont donc directement saisis dans lditeur ou imports
depuis un fichier et dans ce cas une police standard, utilise par
tous, est conseille. Soit, les caractres sont contenus dans des
illustrations, des logos et sont grs comme des images. Dans le cas
de la titraille (terme de PAO), les deux solutions sont possibles.
Pour composer des titres traditionnels, les tags HTML H1 H6 sont
utiliss. Pour raliser des titres fantaisie ou se ddouaner des
contraintes du blanc vertical d aux tags Hn les titres sont raliss
dans une image.
Les rgles habituelles de la P.A.O. sappliquent dans la plupart
des cas aux pages HTML. Par exemple, limitez vous lutilisation de
deux polices de caractres (trois au maximum). Lusage veut quune
police sans srif (Arial, Helvetica, ...) soit utilise pour les
titres, et que le texte courant soit crit dans une police avec
srifs (Garamond, Times,...), ce qui facilite la lisibilit dun texte
en petite taille. Nutilisez pas systmatiquement de polices
fantaisie. Rservez les un usage graphique, consommez les avec
modration. Les attributs des types gras, soulign ou italique
sutilisent seuls! Ne les combinez pas. Lattribut clignotant (Blink)
est aussi dconseill. Hormis pour certains titres, utilisez des
minuscules, contrairement aux ides reues les majuscules ne
favorisent pas la lisibilit.
CouleurS
La couleur de fond (Background) est trs importante, elle
contribue pour beaucoup latmosphre du site. Utilisez de prfrence
une couleur ple, qui ne parasite pas les lments colors que vous
aurez placs (textes, Gifs anims, barres...). Vous pouvez aussi
utiliser une image de fond qui sera reproduite en mosaque. Elle
devra tre relativement de petite taille, peu volumineuse (en
octets), et peu colore. Voici un moyen de lclaircir convenablement:
ouvrez limage sous Photoshop, crez un nouveau calque, remplissez ce
dernier de blanc et rglez son opacit 70%, et aplatissez le
tout.
Image originaleImage + 70% de blanc
La couleur des caractres est paramtrable. Si vous la modifiez,
noubliez pas de configurer aussi la couleur de fond, sinon dans le
cas o le visiteur a choisi une couleur par dfaut dans son
navigateur, vos textes risquent dtre peu lisibles, voire
invisibles. Le contraste, lettres blanches sur papier noir, est
intressant si lon en abuse pas. Dernier point, vous pouvez modifiez
la couleur des liens visits, non-visits ...
Images
Gnralits
La prsence dimages (dessins, schmas et photos) a contribu au
succs dInternet. Avant tout, une image publie doit apporter un plus
au message rdactionnel. Sa prsence doit tre justifie, car elle
entrane un temps de chargement plus long. Elle doit tre de qualit:
nettet, contraste, quilibre des couleurs et cadrage pour une photo,
harmonie des couleurs, qualit picturale pour un dessin...
Si vous ne crez pas vous-mme les images, vous pouvez en numriser
avec un scanner, en rcuprer sur des CD-Rom de cliparts et de
photos, ou en tlcharger depuis des sites spcialiss. Attention la
lgislation! Les droits dauteur sappliquent toutes ces
illustrations, utilisez de prfrence des images libres de droit
(pour un usage personnel), ou mieux encore, libres de droit
dexploitation (pour un usage public).
Pour les internautes qui ne visualisent pas les images (fonction
image dsactive, pour obtenir un chargement rapide des pages avec un
modem de faible dbit), il faut, dans le tag HTML IMG, utiliser
lattribut ALT qui affiche un texte en remplacement de limage. De
plus avec un navigateur de type 4, en glissant la souris sur limage
le message alternatif sera automatiquement affich...
Noubliez pas que les images ralentissent considrablement le
chargement dune page. Aussi faut-il les utiliser avec parcimonie,
et seulement dans le cas o elles apportent quelque chose au contenu
rdactionnel. Pour une image, le poids en octets ne doit pas, en
gnral, excder 15 ou 20 Ko. Le navigateur commence par afficher
simultanment le texte et lemplacement de chaque image (symbolise
par un rectangle), puis ensuite tlcharge une une les diffrentes
images. Pour acclrer le processus et viter que le navigateur
calcule lemplacement de chaque image, vous placerez dans le tag
HTML IMG, les attributs WIDTH et HEIGHT
Exemple de linstruction HTML, qui dcrit une image avec son texte
de substitution et ses dimensions exprimes en pixels.
Traitements et formats
Les images et en particulier les bruts de scan sont rarement
utilisables directement. Vous devez les redimensionner la taille
daffichage voulue, et effectuer diffrents rglages, de faon obtenir
une image quilibre. Par exemple, vous pouvez suivre la dmarche
suivante en neuf tapes pour un scan avec le logiciel de retouche
dimage Photoshop:
1. numrisation au double de la rsolution de sortie (soit 2 X 72
150 dpi),
2. utilisation des niveaux automatiques pour quilibrer
limage,
3. massicotage avec ventuellement redressage pour un bon
cadrage,
4. retouche si ncessaire,
5. ventuellement flou gaussien de 1 pour noyer la trame dans le
flou,
6. rchantillonnage la bonne rsolution (72 dpi),
7. rchantillonnage pour ajustement de la taille au pixel
prs,
8. accentuation des contours (surtout aprs le flou
gaussien),
9. enregistrement au bon format de fichier.
Il existe de nombreux formats de fichiers graphiques, mais
seulement deux (bientt trois) sont utilisables sur une page Web. Ce
sont le Gif et le Jpeg. Pour acclrer le temps de chargement, les
lments de page, en particulier les images, doivent tre les moins
volumineux possible en terme doctets. Aussi Gif et Jpeg oprent une
compression dimage sur deux principes diffrents.
Format Gif pour les dessins
Une image (photo numrique, scan,...) est code en true colors, 16
millions de couleurs sur 24 bits (parfois mme sur 30 ou 36 bits).
Ce mode rgressera en couleurs indexes, 8 bits au maximum, pour
utiliser le format Gif. Cest dire, que la rgression constituera une
palette de 256 nuances au maximum prises parmi les 16 millions.
Limage code alors sur 256 couleurs au plus, pourra tre compresse
(taux de compression moyen de 4), par un algorithme doccurrence de
squence de pixels (LZW). La compression nentrane pas de perte de
qualit. Au contraire la rgression de mode perd des informations
colorimtriques, dans les dgrads, les transitions et les tons
continus. Le Gif est pour cela dconseill pour une photographie. Par
contre il est idal pour les images en plats (schmas, BD style
Tintin, logos...) qui ne comportent que quelques couleurs.
Des logiciels de retouche dimage, tels que Photoshop effectuent
avec plus ou moins de brio la rgression de mode. Le perfectionniste
est souvent amen modifier la main la palette gnre par la rduction
de couleurs. Des logiciels tels que DeBabelizer sont spcialiss dans
cette tche.
Autres particularits, la palette utilisable sur le Net ne
comporte pas 256 couleurs, mais seulement 216 pour lutilisateur,
les quarante autres sont rserves un usage systme, commun aux
plates-formes Mac et Windows. En utilisant le format Export GIF89a
vous pouvez rendre transparente une partie de limage qui laissera
apparatre le fond de la page. Lentrelacement permet dafficher
entirement limage en dbut de chargement en basse rsolution, puis
ensuite daffiner de plus en plus les dtails, cette option augmente
lgrement la taille du fichier.
Format Jpeg pour les photos
A linverse du Gif, Jpeg est conseill pour la photo, et dconseill
pour les plat. En effet, il conserve (en trs grande partie) les
couleurs de loriginal et utilise un algorithme bas sur lattribution
de tons moyens des zones de pixels de tons voisins. Il compresse
les images avec une perte de qualit que vous pouvez contrler. En
choisissant qualit maximum, le taux de compression sera faible,
mais la perte de qualit sera minime, tel point quil est difficile
de reconnatre loriginal de la version Jpeg. Par contre en faible
qualit le taux sera maximum (jusqu' 100), mais la perte de qualit
importante. Entre ces deux extrmes un rglage moyen est souvent
suffisant. Le Jpeg ne prend pas en compte la transparence.
Bientt le Png
Le Ping (Png) est un format destin remplacer le Gif. Par rapport
ce dernier, il offre une profondeur dimage qui peut tre code jusqu'
48 bits en couleur et 16 bits en niveaux de gris, un lissage
automatique, un entrelacement bidirectionnel, ainsi quune couche
alpha. Cette couche fantme sur 8 bits, a un fonctionnement
similaire aux couches de Photoshop, elle peut tre utilise pour le
masquage, pour la gestion de 256 niveaux de transparence... Ping
nest pas encore dun usage frquent et demande de charger une
extension sous Nescape.
Les liens
Un lien (link) permet linternaute de surfer en se dplaant: dune
partie une autre au sein dune mme page, dune page une autre page
dun mme site ou dun site diffrent (les deux premiers cas sont nomms
des liens internes, le troisime est externe). Conventionnellement
lutilisateur reconnat un lien au curseur souris qui se transforme
en main quand il passe sur lui, et la couleur de lobjet (mot
soulign et color, image entoure dune ligne colore). Cette norme
comporte deux couleurs qui signifient: lien non-visit ou lien
visit.
Le concepteur peut prvoir des liens dans sa page, chacun
correspond en HTML une ancre. Cette dernire peut tre une ancre de
dpart (href)vers une adresse URL, une ancre darrive (name) ou
parfois les deux types combins. Une lettre, un mot, une phrase ...
tags en ancres sont des liens hypertexte. Une image entire ou
dcoupe en plusieurs zones (appele alors image cliquable ou ractive)
est un lien hypermdia.
satellite gostationnaire
La navigation du site est ralise par des liens, reprsents sous
forme, par exemple, dune liste puces dans le menu dune page
daccueil dun site de premire gnration. Un menu textuel ou
iconographique trouve sa place dans une frame situe gauche de
lcran, plus rarement en bas ou en haut. Pour mettre jour ce menu en
fonction de la page o lon se trouve, il faut en gnral utiliser un
petit script.
Il est possible avec un lien dafficher la bote de saisie de
messages e-mail, ladresse sera dj saisie ainsi que lobjet si vous
le dsirez.
Ecrivez moi
Avant de publier votre site, vous devez en vrifier tous ses
liens, soit la main, soit automatiquement en utilisant une
fonctionnalit de lditeur HTML telle que Etat des liens hypertexte
dans FrontPage 98. Vrifiez de temps autre, vos liens extrieures
surtout si dans lURL figure un tilde ~ qui signifie par convention
adresse temporaire. Il est trs dsagrable pour le surfeur dobtenir
un message derreur du type Not Found, ERROR 404. De mme, des liens
vers des pages non encore ralises, peuvent afficher des images Page
en construction, la condition que cela ne dure que quelques
jours...
autres elements
Dautres lments peuvent tre ajouts une page Web, la premire
consquence de cet ajout sera laccroissement du temps de chargement.
Certains peuvent apporter un plus la page, dautres par contre ne
sont que des gadgets, dont la prsence ne se justifie pas. Il ne
faut pas transformer une page en vitrine technologique!
Certains lments fonctionnent directement avec une seule des deux
familles de navigateurs (Netscape et Internet Explorer), et encore
cela dpend des versions. Mais la plupart demande que linternaute
ait tlcharg un module externe (plugin) dans son navigateur pour
fonctionner. A titre de curiosit, en dcembre 1998, le Netcenter de
Netscape proposait, pas moins de 176 plugins descendre, dont 35
pour laudio et la vido, 42 pour la 3D et lanimation, 41 afficheurs
dimages, 9 pour la prsentation de donnes et 49 pour les services,
lentreprise et divers.
Des sites spcialiss proposent des Gigaoctets dicnes, de boutons
sensitifs ou non, dimagettes, de fonds de page, de barres
horizontales, de Gifs anims, de sons, de vidos, de compteurs daccs,
de textes dfilants (marquee), de thmes pour FrontPage plus ou moins
libres de droit dexploitation. Au risque de me rpter, il faut les
utiliser avec modration!
Composition et performance
La composition dune page HTML, obit aux rgles habituelles de la
PAO auxquelles est ajoute une difficult supplmentaire. Le
concepteur ne connat pas la plate-forme utilise par linternaute, ni
son navigateur, ni mme la version dudit navigateur, pas plus que
lcran utilis, sa rsolution, sa profondeur de couleurs et la taille
de la fentre! Voil toute la problmatique de la mise en page:
comment organiser sa page pour quelle soit affiche au mieux dans
les configurations matrielles/logicielles les plus courantes?
Une autre difficult technique rside dans le temps de chargement
de limage. Tous les visiteurs ne possdent pas forcment une ligne
Numris ou un modem haut dbit, aussi faut-il optimiser ce temps. Un
bon test pour estimer de visu ce temps, consiste en phase de
ralisation copier la page et ses composants sur une disquette (le
temps daccs et le taux de transfert de ce priphrique sont trs
mdiocres), et raliser le chargement depuis cette dernire...
le texte
Par rapport une version papier, le texte en ligne doit tre
court, concis et prcis (dix ou douze lignes maximum pour un
paragraphe). Pour les numrations, HTML met votre disposition des
listes puces, des listes numrotes, ainsi que les listes de
dfinitions pour raliser des glossaires par exemple. Lorthographe et
la grammaire ne doivent pas tre ngliges pour autant, au contraire.
En gnral le dcoupage doit suivre la rgle suivante: - 1 rubrique par
page - 1 ide par paragraphe -.
Les images
Rappel: une image nest incorpore une page que si elle apporte un
plus au contenu rdactionnel! Elle doit tre de qualit et ne pas
peser plus de 15 20 Ko. Une page standard doit mettre au grand
maximum 15 secondes pour se charger, sinon linternaute se lasse et
va surfer ailleurs.
Mise en page
En PAO, le concepteur dplace ses lments (pavs, illustrations,
filets...) au dixime de millimtre prs. Ceci est impossible pour une
page Web, HTML na pas t conu pour cela. Il est assez ardu de faire
coexister dans la largeur de la fentre des marges, des textes, des
illustrations, et de matriser leurs ordonnancements. Les
concepteurs ont palli ces difficults grce deux astuces: mise en
tableaux et utilisation Gif dune seule pixel (cette technique est
copieusement dcrite dans le premier livre de David SIEGEL).
Les tableaux
Les tableaux, dont les contours et sparations peuvent tre
invisibles, peuvent contenir tout objet HTML. Vous pouvez bien sr
crer des tableaux dimagettes commentes, des menus de liens. En
laissant des colonnes ou des lignes vides, vous pouvez raliser du
blanc typographique vertical ou horizontal. Vous pouvez aussi
saisir du texte dans deux colonnes et gnrer une ruelle (blanc
vertical entre elles), attention, cette prsentation est peu adapte
au Web...
Vous pouvez dcrire les largeurs des colonnes du tableau en
absolu (nombre de pixels) ou en relatif (pourcentage de la fentre).
La premire possibilit permet de conserver la mise en page sur une
fentre plus grande que celle de conception, mais pas sur une plus
petite. La seconde sadapte la taille de la fentre, ce qui nest pas
satisfaisant non plus. En effet, une marge doit avoir une largeur
minimum incompressible! Aussi la solution consiste concevoir des
tableaux, dans lesquels chaque marge est compose dune colonne de
largeur absolue correspondant au minimum admissible, la quelle est
accole une colonne de largeur relative qui voluera avec la taille
de la fentre.
Le contenu dun tableau commence safficher lorsque la taille des
diffrents composants a t value par le navigateur. Les tableaux qui
stalent verticalement sur plusieurs crans sont trs longs charger.
Lastuce consiste les scinder en plusieurs petits tableaux de faon
ce que le visiteur commence prendre connaissance du premier,
pendant que le second saffiche...
Les feuilles de styles en cascade
Il nest pas vraiment ais de raliser des pages HTML telles que le
concepteur (et souvent le client) les souhaiterait. Comme nous
lavons vu prcdemment il faut user dastuce et dimagination.
Heureusement, ont t inventes les CSS (Cascading Style Sheets) ou
feuilles de styles en cascade. Ce procd qui nest pas encore
compltement normalis, sinspire des feuilles de style utilises en
PAO ou en Bureautique (PageMaker, XPress, Word...).
Un fichier texte supplmentaire contient la description des tags
HTML (balises) modifis pour raliser une dfinition du style. Chaque
tag, appel dans ce cas slecteur peut alors tre reparamtr,
reconfigur par le concepteur et ragir laffichage comme il le
souhaite (sous rserve de compatibilit avec le navigateur - Nescape
communicator 4.0 ou version ultrieure - Internet Explorer 4.0 ou
version ultrieure -). Le codage du style est alors spar du texte
source HTML.
Ce systme apporte une facilit certaine de maintenance ainsi
quune flexibilit. En changeant la feuille de style, le concepteur
change lapparence du site. Il est mme possible de prvoir une
dtection automatique de la configuration logicielle/matrielle de
linternaute de faon utiliser la feuille de style
correspondante.
body{
margin: 2em;
margin-left: 22%;
margin-right: 8%;
background: #FFFFFA url(./style/textura.gif);
color: black;
font-family: Verdana, Gillsans, sans-serif;
font-size: 0.8em;
}
Exemple de dfinition typographique attache au slecteur body.
accs aux bases de donnes
Disposer de donnes prcises sur ltat du march est souvent lunique
cl de la survie dune entreprise dans lunivers contemporain. Chaque
fois que lon rpond une demande de renseignements sur Internet,
notre nom et notre adresse vont figurer dans de nombreuses listes.
Toutes ces informations sont stockes dans dnormes bases de donnes
rparties dans le monde entier.
Les pages Web dynamiques ont pour fonction de traiter des
informations actualises. Pour rpondre la requte du client, le
serveur ne gnre quau dernier moment une page compose en fonction
des donnes extraites de la base.
Les bases de donnes
Les systmes de gestion de base de donnes couvrent une large
gamme de produit depuis les applications personnelles bureautiques
comme Microsoft Acces jusquaux applications serveurs comme
Microsoft SQL Server, Oracle... Chacun deux est tudi pour rpondre
des besoins particuliers tels que le nombre dutilisateurs
simultans, le volume de donnes manipuler ou la vitesse de rponse.
Chacune de ces applications possde ses propres mthodes dextraction
dinformations, en fonction des donnes quelle contient.
Offrir linformation
Il existe plusieurs types de donnes diffuser et modifier, qui
peuvent tre combins dans des pages Web. Distribuer ces informations
en utilisant la technologie Internet et la visualiser laide dun
navigateur standard crent une interface cohrente, et permettent de
relier entre eux diffrents types de donnes qui peuvent provenir de
plusieurs serveurs.
Conception de pages Web dynamiques
Le serveur Web doit tre connect la base de donnes afin denvoyer
le contenu de la base sur demande. Ainsi, lutilisateur qui ouvre
une page HTML visualise les dernires valeurs des enregistrements de
la base. Par exemple, sil tablie une commande, la quantit commande
sera soustraite de la valeur du stock actuel, il verra alors, comme
tous les autres utilisateurs, la nouvelle quantit disponible du
stock safficher.
Etablissement de la connexion
Etablir une connexion physique directe, qui permet des
mouvements de donnes entre lutilisateur et la base de donnes, via
Internet, est non seulement difficile mais cre une brche dans la
scurit. Le serveur doit disposer dun logiciel de connexion qui gre
les requtes des utilisateurs et fournit des pages de rsultats. Ce
logiciel peut tre Microsoft Internet Information Server (IIS) sous
Windows NT. En ce qui concerne le SGBD (Systme de gestion de base
de donnes), des produits tels que Acces sous Windows 95/NT peuvent
tre utiliss, tant que le site reste de taille et de frquentation
modeste. Pour des ralisations plus importantes, il est prfrable
dutiliser des serveurs orients Entreprise comme SQL Server. La base
de donnes et le logiciel de serveur Internet peuvent aussi
fonctionner sur un rseau local
Les solutions techniques Microsoft
Le principal problme est de trouver le composant qui va grer
linterface entre le Web et la source de donnes. Ce composant doit
accepter les instructions venant du navigateur, comme dans le cas
dune page contenant une section (formulaire HTML). Il doit ensuite
traiter la requte correspondante, rcuprer les informations de la
base de donnes. Puis, doit prparer ces informations pour laffichage
HTML, et les renvoyer au navigateur du client.
Internet Database Connector (IDC)
IDC est un mcanisme contenu dans IIS. Il sagit dune passerelle
entre une base de donnes ODBC (Open DataBase Connectivity) et IIS.
IDC utilise un script stock sur le serveur qui permet de dfinir les
paramtres requis pour extraire et mettre en forme les informations.
En parallle avec le script, il est ncessaire de crer un fichier
modle HTML qui comprend les emplacements dfinis pour les donnes
renvoyes. IDC utilise une requte SQL insre dans le fichier script
pour raliser lextraction. IDC est relativement simple utiliser du
ct du navigateur et facile mettre en uvre du ct serveur.
DbWeb
Pour faciliter la rcupration des informations, Microsoft propose
un utilitaire appel DbWeb (DataBase Web). Il se connecte IIS et
sappuie sur ODBC pour rcuprer les donnes de tous les SGBD en ligne.
Son principal atout est la facilit avec laquelle on peut crer sa
propre interface de formulation de requtes, sans tre un expert en
langage SQL. Les mthodes IDC et DbWeb offrent un moyen facile de
communiquer avec IIS, cependant, il est ncessaire de traiter
directement avec le logiciel de serveur Web pour raliser des
applications plus puissantes.
CGI
Le Common Gateway Interface (CGI) est un mcanisme qui permet un
client Web dexcuter des programmes sur un serveur Web, puis de
renvoyer les rsultats vers ce client. A travers lutilisation des
programmes CGI, le serveur reoit les entres dune page HTML de
requte et produit dynamiquement des documents HTML en retour
OLEISAPI
Il est possible de travailler directement avec ISAPI (Internet
Server Applications Programming Interface) condition de crer une
bibliothque de liens dynamiques (DLL) et non une application
excutable. Ceci pose problme pour certains langages de
programmation. ISAPI est intgr IIS et permet dautres logiciels
dinterroger le serveur, et de lui demander une rponse en format
HTML.
Actif Server Page (ASP)
ASP est la plus rcente des passerelles entre Internet et les
bases de donnes. Avec larrive de VBScript, dans le navigateur,
Microsoft a produit une implmentation ct serveur. Celle-ci offre
beaucoup plus de possibilits que le VBScript pur, car elle permet
la manipulation de bases de donnes, de fichiers et dautres objets
systme. Cependant elle fonctionne comme son quivalent du ct client.
Lcriture de Scripts ct serveur laide dASP est aujourdhui au cur de
la stratgie de Microsoft qui depuis le 2me trimestre 1997 encourage
vivement les concepteurs de sites Web dynamiques utiliser cette
nouvelle technologie plutt que la solution IDC, DbWeb ou
OLEISAPI.
Je remercie mes collaborateurs Michel ASTRE et Jacques SATURNIN
pour leur aide dans la ralisation de ce chapitre.
arborescence
La structure logique de votre site, reprsente par un
organigramme, ne prcise que les cheminements de navigation et le
dcoupage en diffrentes pages. Il en va tout autrement de la
structure physique. Cette dernire sattache aux fichiers, et dcrit
leur organisation sur la mmoire de masse (disque dur). Cette
arborescence, cre au fur et mesure du dveloppement du projet sur
votre ordinateur, sera reproduite lidentique sur la machine qui
lhbergera.
Le systme dadressage des pages dpendra directement de
lorganisation physique des fichiers. Il peut tre absolu et dcrire
compltement le chemin, ou relatif et faire rfrence la racine du
site par exemple, ce qui rendra plus facile le changement
dhbergement. Comme pour tout autre application informatique, vous
devez donner des noms de fichier significatif (ou utilisant une
codification claire et prcise). La page daccueil porte
conventionnellement le nom index.htm (ou default.htm sur les
serveurs Microsoft).
Une page HTML gnre un fichier dont lextension est .htm (ou .html
suivant les plates-formes) qui contient le code source. Les lments
ajouts la page (images, sons ...) sont enregistrs sparment. Il est
conseill de classer les fichiers dans des rpertoires et
sous-rpertoires diffrents, en fonction de leur nature (images,
photos, pages...), ou en fonction de leur appartenance une page.
Dans ce cas, il faut un sous-rpertoire par page avec tous les
fichiers dpendants plus un autre sous-rpertoire pour les fichiers
communs. FrontPage 98, utilise en plus un sous-rpertoire _private
dans lequel il range, par exemple, les formulaires remplis par les
visiteurs.
Un exemple dorganisation de fichiers, sris par type.
