TUTORIELS

SUR LA CREATION DUN SITE WEB

Source : http://guides.rotule.net/creation/analys e3.htm

SANGARE SOULEYMANE 00225-08-28-16-48 sangsoulinter@yahoo.fr sangsoulci@hotmail.com

PLAN DU COURS
I-Analyser Dfinir les objectifs du site Crer des sections Organiser le site Faire un storyboard

II-Crer HTML ksako ? Choisir un diteur Le multimdia Quelques conseils III-Hberger Ou placer son site ? Uploader les pages IV-Se faire connaitre

I-Analyser
1-Analyse du problme
Quand on publie un livre ou un rapport on ne l'crit pas d'une traite du dbut la fin. On planifie ce que l'on va faire de faon avoir une ide de ce que l'on va devoir accomplir, de sa structure, etc. Pour crer des sites WEB, on ne peut utiliser les mmes mthodes d'criture ou de design que pour les modes de communications conventionnels. En effet les sites qui sont crs comme a sont gnralement difficiles comprendre et/ou ne tiennent pas compte de toutes les possibilits de l'hypertexte.

Des pages WEB mal organises, sont aussi plus difficiles entretenir ou tendre. Pour pouvoir crer un site facile maintenir, il faut se pencher sur ce que l'on va faire en rflchissant quelques points et en se posant quelques questions.

Que veut-on faire sur Internet ?

Cela peut sembler tre une question stupide, mais le but est de savoir quel contenu on veut mettre sur le WEB. Le contenu est un terme gnral qui peut dsigner du texte, des graphiques, des mdias, etc. Si on expliquait quelqu'un le sujet de nos pages, on lui ferait une description du contenu. Quel type de contenu peut-on mettre sur le WEB ? A peu prs tout ce que l'on veut. Ci-dessous se trouve une liste de quelques types de contenus que l'on rencontre souvent sur Internet actuellement :

Des informations personnelles. Ces pages contiennent des informations que tout un chacun peut avoir envie de connatre votre sujet (vos hobbies, votre photo, ...) Des hobbies ou centres d'intrts. Ces pages contiennent de l'information concernant un sujet donn : la musique, les motos par exemple. Des publications. Il s'agit de journaux, de magazines ou de toute autre publication qui veut profiter des avantages d'Internet (rapidit de diffusion, facilit de mise jour). La prsentation d'une socit. Ce sont des sites destins prsenter les services de l'entreprise, l'endroit o elle est localise, les produits qu'elle vend ou fabrique, etc. De la documentation en ligne. Le terme "documentation en ligne" fait rfrence tout ce qui touche l'aide en ligne, des quick manuals aux modules de formation en ligne. Et cela ne doit pas spcialement se rfrer un produit. Tout ce qui est task oriented peut tre considr comme de la documentation en ligne (changer l'huile d'une voiture, apprendre l'HTML, ...). Les catalogues en ligne. Ce sont des sites o les socits proposent leurs produits la vente. Il s'agit en quelque sorte de catalogues lectroniques de vente par correspondance. Ils offrent beaucoup d'avantages (mise jour des tarifs rapide, possibilits d'interactivit, ...). Et tout ce que l'on peut imaginer (jeux en ligne, livres de fiction en ligne, ...)

Le WEB est seulement limit par ce que l'on veut en faire.

2-Dfinir des objectifs

Que dsirent faire les gens qui visitent votre site ? Sont-ils la recherche d'une information spcifique pour savoir comment faire quelque chose ? Vont-ils lire toutes les pages les unes la suite des autres, jusqu' la fin ? Vont-ils partir de la homepage et errer dans votre monde jusqu' ce qu'ils en aient marre et s'en aillent ? Voici quelques exemples :

Pour le site d'une socit. Certains visiteurs voudront peut-tre avoir des informations concernant les possibilits d'engagement, d'autres voudront savoir o se trouve la socit. D'autres encore ont entendu dire que votre socit mettait

disposition sur le WEB des white papers et ils veulent tlcharger le plus rcent. Pour un catalogue en ligne. Le but peut tre de permettre au visiteur de consulter les produits suivant le nom ou le prix et de commander les articles qui l'intressent. Pour un site personnel, le seul objectif est de permettre au visiteur de consulter l'information que vous avez prpare.

La dfinition des objectifs prcde le design et l'organisation du site car les pages doivent tre crites pour remplir les objectifs (et pas le contraire).

3-Sparer le contenu en diffrentes sections

Il faut essayer de sparer le contenu en sections en gardant en mmoire les objectifs raliser, et en plaant dans la mme section les informations qui se rapportent aux mmes sujets. Parfois les objectifs et les thmes sont fort semblables. Par exemple pour une librairie en ligne, l'objectif pouvoir commander des livres se retrouve bien dans une section commande de livres. L'objectif de cette partie de l'analyse est de se faire une ide de ce que l'on va dcrire dans les pages. Par exemple si le thme du site est le tuning de voitures, les diffrentes sections pourraient ressembler ceci :

Changer l'huile et le filtre Vrifier et ajuster le timing du moteur Vrifier et ajuster l'ouverture des soupapes Vrifier et remplacer les bougies d'allumage Vrifier les niveaux des liquides et les freins

Il ne faut pas se proccuper de l'ordre des tapes ou de la manire dont on va permettre le passage d'une section une autre. Il faut juste lister les choses que l'on veut dcrire dans les pages. Dans le cas d'actions moins task oriented, par exemple un site qui prsente un groupe de musique, les sections pourraient ressembler ceci :

L'histoire du groupe La biographie de chaque membre du groupe La discographie du groupe Les paroles de certaines chansons Des photos Les projets d'avenir du groupe (concerts et albums)

On peut dfinir autant de sections que l'on veut mais il faut essayer de garder chaque section dans une taille raisonnable. Si une section est trop grande, il vaut mieux la sparer en sous sections. Par exemple, si on veut crer une encyclopdie des plantes vnneuses, faire une section pour chaque plante est insense car il y en aura beaucoup trop. Il vaut mieux grouper les plantes par lettre et utiliser chaque lettre comme une section.

4-Ides pour l'organisation et la navigation

A ce stade-ci de la conception du site, les choses doivent tre claires : vous savez de

quoi vous allez parler dans vos pages. Cette tape-ci consiste structurer l'information en un groupe de pages. Il faut dfinir un type de structure. Les modles les plus courants sont dtaills ci-aprs. Il faudra peut-tre combiner plusieurs types de structures pour votre site WEB. Modle hirarchique C'est probablement le modle le plus logique pour structurer un site. Ce type de structuration est particulirement adapt des systmes d'aide en ligne. On doit d'abord faire un choix parmi des sujets gnriques puis, plus on avance, plus les sujets deviennent particuliers. Dans une structure hirarchique, il est facile de s'y retrouver car les choix sont limits. On peut aller un niveau au-dessus pour des sujets plus gnriques ou un niveau en dessous pour des sujets plus dtaills. Il est intressant de fournir un lien vers le menu principal, de faon ce que le lecteur puisse retourner rapidement un endroit connu. Dans cette organisation, la home page fournit une vue d'ensemble du contenu accessible via des liens. Il faut viter d'inclure trop de niveaux et trop de choix ; 2 ou 3 niveaux sont un bon nombre. Trop de pages de menu conduisent au "voice mail syndrome", c'est--dire qu'aprs avoir d choisir parmi trop de niveaux, le visiteur a oubli la raison de sa visite. Modle linaire Une autre faon d'organiser un site WEB est le modle linaire ou squentiel. Ce modle est assez similaire la manire dont on parcourt les documents imprims. Dans un modle linaire, la homepage est le titre ou l'introduction et chaque page suit squentiellement. Dans un modle linaire strict, il y a des liens pour aller d'une page l'autre, en gnral la page suivante et la page prcdente. Un contexte linaire est trs rigide et limite la libert du lecteur pour explorer et la votre pour prsenter l'information. Cette structuration est nanmoins trs intressante pour mettre en ligne des sujets qui sont trs linaires comme des livres, des instructions pas pas, etc. Modle linaire avec des alternatives Ce modle permet d'assouplir la rigidit du modle linaire en autorisant le lecteur dvier du chemin principal certains endroits. Ce modle convient bien, par exemple, pour l'explication d'une procdure d'installation d'un produit dont toutes les tapes, sauf une, sont identiques. Le cheminement est identique jusqu'au moment o il diffre pour une plate-forme : l'utilisateur doit alors choisir l'tape suivante qui convient sa plate-forme. Une fois la spcificit traite, l'utilisateur est renvoy vers la partie commune de l'installation. Modle combinant structure linaire et hirarchique Ce modle combinant les deux types d'organisations est un modle courant sur le WEB. Ce modle convient bien pour la mise en ligne de documents trs structurs mais linaires, tels les FAQ (Frequently Asked Questions ou Foire Aux Questions). Comme on mlange 2 types de structures, on trouve gnralement des liens vers les pages prcdentes et suivantes, les niveaux suprieurs et infrieurs. Mais dans ce contexte, que signifie page prcdente ?

Si vous tes arriv sur cette page via le sommaire, la page prcdente signifie : retourner au sommaire d'o vous venez. Mais si vous tes arriv sur cette page en venant d'une autre page, vous pensez que le lien "page prcdente" va vous ramener cette page alors qu'en ralit, il va vous amener une page que vous n'avez peut-tre jamais vue auparavant. Il faut donc faire attention en utilisant les termes prcdents, suivants, etc. et les rendre plus explicites en ajoutant quelques mots. Modle WEB Un WEB est un ensemble de documents avec peu ou pas de structure. La seule chose qui lie les pages entre elles, c'est un lien. Le lecteur passe de document en document en suivant les liens environnants. Les structures WEB permettent au visiteur d'errer dans le site ; elles sont idales quand on veut encourager le visiteur naviguer sur le site. Un exemple d'utilisation de cette structure pourrait tre un ensemble de chambres virtuelles. Dans ce contexte, chaque page est organise de faon correspondre une location (une pice) et de cette location on peut se dplacer dans diffrentes directions pour explorer les environs comme on passe de pice en pice dans un building. Le problme avec ce type d'organisation, c'est qu'il est facile de se perdre. Sans aucune structure du contenu, il est difficile de se reprsenter les relations entre l'endroit o l'on se trouve et l'endroit o on va aller. Ce type de structure est trs dsorientant quand le visiteur a un objectif en tte. Pour solutionner le problme on peut soit prvoir sur chaque page un lien vers la home page soit inclure une carte du site avec une indication de la position du visiteur dans la structure (comme les flches vous tes ici dans les grands immeubles par exemple).

5-Faire un storyboard
Cette tape consiste dfinir quel contenu va sur quelle page et prvoir les liens de base qui vont servir la navigation entre ces diffrentes pages. Quand on utilise une des structures dfinies auparavant, la ralisation du storyboard peut tre simple, mais si l'on combine plusieurs types de structures la ralisation du storyboard est plus complique. L'ide de faire un storyboard est une ide emprunte l'industrie du film dans laquelle chaque scne est dcrite avec les angles de prises de vues, la position des acteurs, etc. Cela permet de savoir quel endroit du film doit venir s'intercaler une prise de vue. Le storyboard permet d'avoir une vue d'ensemble de ce quoi ressemblera le site une fois termin. A l'aide du storyboard il est possible de dvelopper chaque page sans avoir se remmorer quel endroit se trouve la page dans le site et cela, mme si les relations entre pages sont trs complexes. Dans le cas de grands sites, le storyboard permet plusieurs personnes de dvelopper diffrentes parties du site. Un storyboard ressemble un ensemble de feuilles de papier. Chaque feuille reprsente une page du site, avec une liste de points que la page va dcrire et les liens que cette page va inclure. Trucs pour crer le storyboard :

Quel sujet va sur quelle page ? Comment est organise la navigation de base entre les pages ? (vers la page prcdente, la home page, etc.) Comment est organise la navigation secondaire entre les pages ? (glossaire, ...)

Que mettre sur la homepage ? Vrifier les objectifs. Vrifier que l'on respecte bien les objectifs lors de la cration des pages.

Exemple de story board

6-La cration proprement dite

Une fois l'analyse effectue (la partie la plus ch~#@te du processus), on va pouvoir passer la cration proprement dite. Enfin avant de mettre les mains dans le moteur, il faut encore penser certaines choses. Il faut essayer de dfinir un look graphique pour le site et essayer de s'y tenir le plus possible : c'est dire si je dcide que mon fond d'cran sera blanc dans une partie du site, il faut qu'il le reste dans toute cette partie. C'est comme pour les magazines, ils

essayent d'avoir une mise en page uniforme de faon ne pas trop perturber le lecteur. Nanmoins il est (presque) certain que votre look ne plaira pas a tout le monde, coutez les critiques et essayez d'amliorer votre travail en fonction des remarques. Un des mes copains trouve que mon fond blanc est pas terrible, il prfre ses couleurs flashantes; moi je les aimes pas trop ou alors juste un ptit peu pour mettre quelque chose en 'relief'. Donc en rsum c'est chacun ses gots mais il y a quand mme des trucs viter pour que votre site soit un peu lisible : crire en marron sur du noir n'est peu tre pas le plus lisible que l'on puisse inventer, la preuve, vous voyez quelque chose ? Il faut donc essayer de prendre des couleurs contrastes entre elles

II-Crer
7-HTML ? Qu'est-ce que c'est ??
L'HTML (Hyper Text Markup Langage) est le langage qui permet de mettre en page les documents destin Internet ou l'Intranet ( rseau local qui utilise les techniques d'Internet pour changer des informations). Cette mise en page se fait comme sur les anciens traitements de texte, en plaant des balises qui dfinissent les effets appliquer sur une portion de texte. HMTL a t cr comme tant un moyen intuitif, clair et concis de prsenter de l'information accessible via le rseau. Un des avantages de ce langage est d'tre universel (en thorie en tout cas en pratique pas toujours), c'est dire que les documents cres en HTML peuvent tre lus aussi bien sur un Macintosh, que sur une machine Windows ou une machine Linux. Un autre avantage est sa possibilit de navigation hypertexte, c'est dire que l'on peut placer des zones qui lorsqu'on les actives en cliquant dessus vous amnent sur un autre document ou une autre partie du document, c'est que l'on appelle des liens. Si vous avez du mal a vous reprsenter le concept des liens, imaginez un livre dont tous les lments de la table des matires seraient des liens vers les diffrentes parties du livre; en cliquant sur Chapitre 4, c'est comme si vous ouvriez le livre directement au chapitre 4. Les balises utilises pour raliser cette mise en page, sont gnralement dsigns par le terme anglais tags. Tous les tags sont inclus entre les caractres < >. Il y a 2 grandes sortes de tags :

Les tags simples : ils se composent d'un seul lment et n'ont pas besoin d'un tag de fermeture pour dire d'arrter l'effet du tag. Exemples : <BR> : qui indique qu'il faut retourner la ligne (Break Row ou un truc du style ;-) ) <HR> : qui indique qu'il faut dessiner une ligne horizontale Les tags avec fermeture : qui sont composs de 2 parties un qui sert commencer l'effet et l'autre qui sert indiquer l'endroit ou il faut le terminer.

Exemples :
<FONT>Du texte</FONT> : Les tags commenant par un / sont des tags de fermeture. Ici j'ouvre donc un tag FONT avec <FONT> (sert modifier les proprits du texte) et je le referme avec </FONT>. Le code d'un document HTML ressemble donc : <HTML> <HEAD> <TITLE> Exemple </TITLE>

</HEAD> <BODY> Ici vous pouvez mettre du texte, des images, du son... </BODY> </HTML> En voyant a, vous vous dites peut tre que ca l'air compliqu. Dtrompez vous, les termes utiliss pour les tags sont tout fait comprhensibles, il s'agit en gnral de parties de mots anglais. Voila maintenant que vous connaisez le principe, la partie suivante va expliquer comment crer la page proprement dite.

8-Choisir un diteur
Pour crer une page web, il y a 2 mthodes : 1. Crer la page avec un diteur genre le bloc notes Cette mthode un peu prhistorique implique donc que vous devez connaitre la syntaxe de tous les tags HTML et que vous allez devoir les taper tous la main pour crer votre page. C'est une mthode qui n'est videmment pas recommender aux dbutants. Elle a nanmoins l'avantage de vous laisser dcider les tags et les options que vous utilisez et de ne placer que le strict minimum de tags. 2. Crer la page avec un diteur conu pour la ralisation de pages webs Ici on va utiliser des programmes spciaux qui vont insrer les tags a votre place en faisant attention la syntaxe (dans la mesure du possible du moins). Ces programmes sont gnralement appelles diteurs HTML. On distingue 2 types d'diteurs HTML : 1. Les diteurs WYSIWYG (What You See Is What You Get : ce que vous voyez est ce que vous obtenez) Ce sont des diteurs ou l'on ne voit pas le code HTML qui est gnr par le programme. Ils peuvent se comparer des traitements de textes actuels. Donc quand on slectionne un morceau de texte et que l'on augmente la taille de la police, on voit a l'cran les caractres s'agrandir. Ce genre d'diteur est trs convivial et trs facile utiliser. Malheureusement ils ont tous tendance gnrer du code HTML superflu ce qui rend la recherche des incohrences trs difficiles. Voici quelques noms d'diteurs WYSIWYG : Microsoft Word 97 : et oui Word 97 peut servir crer des pages HTML. Pour cela il faut utiliser l'option enregistrer en HTML du menu fichier Microsoft Front Page : c'est l'diteur spcialis de Microsoft pour la conception de pages web et la gestion de grand sites web. Il est trs apprci par certains et dtest par d'autres (moi :-P entre autres). Il existe en version light livre avec Internet Explorreur 4. Cette version light est tout fait satisfaisante pour quelqu'un qui veut crer ses premires pages web. Il faut nanmoins faire attention de ne pas insrer de composants WebBots (compteurs, horodateurs, moteurs de recherche, etc...) car ils ne fonctionnent que sur certains serveurs web (vous pouvez les insrer si votre serveur les accepte, mais c'est rare).

Macromedia Dreamweaver : cet diteur permet de crer des pages web mais aussi de crer des pages dynamiques sans connaitre une seule ligne de programmation. Il possde aussi un module qui permet de vrifier la compatibilit du code avec les diffrents navigateurs. Filemaker Homepage 3.0 : crer des pages avec cet diteur est simple comme un jeu d'enfant. 2. Les diteurs non WYSIWYG (non visuels) Avec ce genre d'diteur, vous voyez le code HTML gnr par le programme, mais vous ne voyez pas directement quoi va ressembler la page une fois termine. L'avantage de ce genre d'diteur est que le code gnr est trs pur, sans trop de code inutile. L'inconvnient est qu'il n'est pas toujours facile de s'y retrouver et de voir ou on en est puisque ce n'est pas graphique. Pour raliser mes pages j'utilise en grande majorit ce genre d'diteur. Voici quelques noms d'diteurs non WYSIWYG : WebExpert de Visicom Media : diteur HTML en franais, simple utiliser et relativement puissant. Il permet l'insertion de scripts tout faits pour crer des petites animations. Il possde toute une collection d'applets java intgrer dans vos pages. Un gros avantage de ce programme est que c'est un shareware, vous pouvez donc le tester avant de l'acheter. C'est cet diteur que j'utilise le plus souvent. Homesite d'Allaire : un avantage de cet diteur est qu'il peut diter les pages lorsqu'elles sont sur le serveur. Il est galement disponible en shareware.

Voila quelques diteurs prsents. Il faut nanmoins faire attention au prix de certains diteurs. Cela va de 2.000 bef (+- 300 ff) prs de 30.000 bef (4.000 ff). Il faut donc voir si vous avez l'utilit d'un de ces logiciels de conception Web. D'autant que chaque navigateur est livr avec un diteur de pages html tout fait satisfaisant pour beaucoup d'usages : Front page Express est livr avec Internet Explorreur 4 et Composer est livr avec Netscape Communicator. Avant de commencer crer votre page web, attendez la fin de cette partie du guide. La partie suivante parlera des images et la dernire partie vous donnere quelques conseils.

9-Le cot multimdia d'Internet

Les pages web, ce n'est pas uniquement du texte de diffrentes tailles et couleurs, ca peut aussi tre un contenu multimdia : du son, des images, de la vido, ...

Les images : c'est l'lment que l'on rencontre le plus souvent sur une page web. Pour tre visualisables, les images doivent tre soit au format Gif soit au format Jpeg. Le Gif est un format ou le nombre de couleurs est limit 256, tandis que le Jpeg peut contenir jusqu' 16 millions de couleurs. Le format Gif est donc mieux adapt aux images contenant peu de couleurs comme des boutons, des petites images; le Jpeg tant plus adapt pour la restitution de photographies. Les Gifs sont souvent utiliss car il est possible de raliser de minis-animations avec ce format : on enregistrer dans une seule et mme image diffrentes images qui seront affiches successivement les unes aprs les autres de faon a crer une animation. L'insertion d'une image se fait via le tag <img src="nomdelimage" width="largeur" height="hauteur" border=0 alt="Le commentaire concernant l'image"> Par exemple la ligne : <IMG SRC="../images/miniguides.jpg" BORDER=0 WIDTH=124

HEIGHT=90 ALT="Minis guides"> entraine l'affichage de cette image :

Ces tags possdent d'autres attributs pour rgler l'espacement entre l'image et du texte, la position du texte par rapport l'image, etc ... mais je ne vais pas les dtailler ici.

Le son : on peut introduire diffrents lments sonores dans les pages web : on peut utiliser des fichiers Wav pour les bruitages et des fichiers midi pour la musique (les plus courant) ou encore les Au(Unix) et les Aiff (Macintosh). Il est aussi possible d'utiliser d'autres formats sonores condition que le visiteur possde le plug-in (programme qui permet d'tendre les fonctionnalits du browser); on peut alors par exemple utiliser le format Real audio pour envoyer de la musique en direct sur internet (en live ou presque). Pour insrer le fichier midi qui suit, j'ai utilis la ligne de code : <EMBED SRC="MissionImpossible.mid" WIDTH=145 HEIGHT=60 ALIGN="middle" > Pour ajouter un fichier Wav, je vais utiliser la mme ligne de code : <EMBED SRC="BUTTON2.WAV" WIDTH=145 HEIGHT=60 ALIGN="middle"> Il est possible de rajouter les attributs AUTOSTART=true pour dmarrer le son ds le l'affchage de la page. L'attribut LOOP=true permet de faire jouer le son en boucle. Pour insrer un fichier Real audio en flux continu (qui se joue au fur et a mesure de son tlchargement), il faut d'abord crer un fichier metafile. Il s'agit d'un fichier texte qui pointe sur le fichier Real audio. Pour crer le fichier metafile il faut crer un fichier texte contenent l'URL entire du fichier jouer; exemple : http://rotule.citeweb.net/fichier.ra et de l'enregistrer avec l'extension .ram. Il suffit alors de faire un lien vers le fichier metafile via la ligne : <a href="audio.ram">Ecouter en Real audio</a>; ce qui entraine l'affichage de la ligne : Ecouter en Real audio (Remarques : vous devez avoir le plug-in real audio pour entendre quelque chose et ne me demandez pas d'ou sort ce son, j'ai converti le premier fichier que j'ai trouv sur mon disque dur ;-O ).

La vido : mettre de la vido sur le web est la porte de tout le monde. Les diffrents formats utilisables sont le format Avi, le Mpeg ou le QuickTime. Quand on place de la vido sur le web, il faut vraiment faire attention la taille car le moindre film de quelques secondes prend rapidement beaucoup de place et un temps incroyablement long pour se tlcharger. Tout comme pour le son, il est aussi possible d'envoyer des images en direct sur le net en utilisant la technologie Real Video. Pour insrer de la vido, on utilise les lignes suivantes : <EMBED SRC="sample.mov" WIDTH=145 HEIGHT=160 ALIGN="middle"> Pour insrer de la vido en flux continu, on procde de la mme faon que pour les fichiers audio : on fait un lien vers un metafile contenant l'url complte du fichier realvideo.

Remarques : Pour crer des fichiers Real audio ou Real video, il faut tlcharger l'encodeur. Il est disponible gratuitement l'adresse : http://www.real.com/products/creation/.

Encore quelques derniers conseils et vous pourrez enfin vous lancer dans la grande aventure de la cration de sites internet et laisser libre cours votre crativit.

10-Quelques conseils pour la route

Voila vous tes presque la fin de la partie cration et je vais vous foutre la paix avec mes conseils et mes questions stupides concernant le site (que faire, pour qui, ...) mais je vais encore vous livrer quelques conseils pour viter de faire fuir les visiteurs (ou en tout cas essayer de les garder le plus longtemps possible ;-) ). 1. Couleurs : comme expliqu brivement un peu avant (dans Crer), faites attention aux couleurs que vous choisissez pour vos textes, vos fonds d'crans, ... Mme si les gouts et les couleurs ne se discutent pas, essayer de ne pas mettre une couleur claire sur un fond clair, ni une couleur fonce sur un fond sombre car cela rend la lecture trs difficile. 2. Mises en vidences : par mise en vidence, je pense tous les artifices qui permettent de mettre un bout de texte en vidence : soulignement, gras, italique, clignotemment, ... Ces mises en vidence ne doivent tre utilises que pour des morceaux de texte relativement courts; quelques mots, au grand maximum une ou deux lignes pour ne pas rendre la lecture trop difficile. Le clignotement surtout est limiter au maximum car il dtourne l'attention du visiteur. 3. Images : bien qu'un petit dessin vaille mieux qu'un long discours, il faut illustrer ses pages avec parcimonie car beaucoup d'images rendent le chargement des pages terriblement long et gnralement les visiteurs n'aiment pas trop attendre sauf s'ils sont certains de trouver quelque chose d'intressant sur votre page. 4. Images toujours : il faut essayer, dans la mesure du possible, d'utiliser les attributs height et width dans le tag img. Ils permettent une mise en page plus rapide car le navigateur ne doit plus attendre le chargement de la de l'image pour avoir sa taille. Utilisez aussi l'attribut alt qui permet aux visiteurs qui ont dsactiv l'affichage des images dans leur navigateur d'avoir une ide du sujet de votre image. 5. Images (et oui envore :P ) : si vous faites une barre de menus, une barre d'icnes avec des images essayez d'utiliser toujours les mmes images pour la plus grande partie du site comme cela le chargement sera plus rapide car les images proviendront du cache du navigateur. 6. Images encore : faites attention la taille des images que vous insrez dans vos pages. Tout le monde ne surfe pas via le cble (moi pas en tout cas et je dois pas tre le seul); via un modem 33600 bps il faut environ 10 secondes pour transfrer une image de 30 Ko, pensez donc au temps qu'il va falloir si votre page en contient une dizaine donc limitez la taille de vos images au maximum, surtout pour les pages d'intrt gnral (homepage, ...). Si vous devez montrer de grosses images, faites un lien vers ces images en en spcifiant la taille de faon ce que le visiteur ne soit pas surpris par le temps de chargement. Je sais, le gif anim que vous venez de crer avec Corel Web est trs beau, mais personne ne va attendre 155 secondes qu'il soit charg pour l'admirer (cas vridique d'un gif anim de 460 Ko vu sur une page web) donc limitez la taille des images (l je crois que je me rpte ;-) ). 7. Tableaux : les tableaux sont souvent utiliss pour raliser des mises en page volues; malheureusement ils ralentissent l'affichage des pages, car il faut que tout le tableau soit charg dans le navigateur avant de pouvoir l'afficher. Il vaut donc mieux dcouper la page en une suite de petits tableaux qui s'afficheront les uns aprs les autres, de faon crer une impression de mouvement sur la page.

8. Java : viter le au maximum car il ralentit fortement les sites car le navigateur doit excuter le code java et pour l'instant cette excution n'est pas encore trs rapide, surtout dans Netscape (Internet Explorer est plus performant de ce point de vue). 9. Adresses : permettez toujours vos visiteurs de vous faire une remarque, un commentaire en les y encourageant. Pour cela placez votre adresse mail sur chaque page de votre site. Vous pouvez galement prvoir un livre d'or dans lequel vos visiteurs vous feront part de leurs impressions. 10. Critiques : essayez de tenir compte des critiques, remarques que vous font vos visiteurs. Certaines ne sont peut tre pas justifies, mais d'autres le sont probablement car personne ne dtient la science infuse. Pour vous aider dans votre tche, voici une petite liste de sites visiter : o Annuaire Francophone des Scripts CGI : si vous cherchez des scripts CGI pour donner de l'intelligence, de l'interactivit votre site, allez visiter ce site il prsente en franais plus de 250 scripts CGI (compteurs, livres d'or, bannires, ...) o Website garage : vrifie votre homepage : liens morts, temps de chargement, compatibilit avec les diffrents navigateurs, popularit de votre site auprs de moteurs de recherches, ... Le diagnostic est gratuit, mais le service est payant :-( o Gifwizard : vous montre dans quelle mesure la taille de vos images peut tre rduite. Le diagnostic est gratuit, mais le service est payant :-( o <ovh="net"> : vous propose gratuitement divers services pour votre homepage : compteur, statistiques, guestbook, forum, ... o Un nouveau guide Internet : pour en apprendre plus sur tout : html avanc, javascript, perl, cgi, ... Un site bookmarker absolument ! o Webmania : un autre site de services gratuits. Il propose un guestbook, un outil statistique totalement invisible, un beau compteur de visites, une news list, la cration de bannires et logos, ... o All HTML : pour tout savoir sur les tags HTML, leur syntaxe, ... Voila, maintenant je me tais, c'est vous de jouer, enfin de crer. Le seule limite c'est votre imagination (ou presque) :-)

III-Hberger
11-Hberger le site
Faire un site c'est bien, c'est gnralement (toujours) beaucoup de travail et donc cela n'a d'intrt que si il est accessible sur Internet. Pour cela il faut qu'il soit plac sur un serveur qui est connect en permanence Internet. Dans cette partie, je vais prsenter quelques serveurs qui hbergeront volontiers vos pages pour pas cher ( c'est dire partir de 0 francs) et je vais expliquer comment on envoie ses pages sur le serveur. 1. O s'hberger ? Quelques bonnes adresses qui ont fait leurs preuves, avec leurs point forts et leurs points faibles et leurs caractristiques. 2. Comment envoyer ses pages sur le serveur ? Comment configurer son logiciel FTP pour envoyer ses pages sur le serveur.

12-Quelques hbergeurs

Voici donc comme promis une liste de serveurs qui vont pouvoir hberger vos pages. Ce ne sont que quelques exemples parmi tant d'autres. Hbergeurs gratuits La liste voluant rapidement, voici un lien avec une liste rgulirement mise jour : http://www.phwinfo.com/forum/showthread.php?t=73 Hbergeurs payants L'hbergeur de l'Annuaire Francophone des Scripts CGI eBusiness.be propose diffrentes formules d'hbergement allant de 50 300 eBusiness Mo d'espace disque, des adresses emails accessibles en pop3 et imap, des sous domaines, un accs ftp, PHP 4, des bases de donnes MySQL, ... partir de 20,7 / mois (HTVA). Serveurs situs en Belgique et en France. Serveur.be propose la location de serveurs ddis des prix intressants pour les sites ayant des besoins particuliers (logiciels spcifiques, consommation Serveur.be leve en terme de ressources, bande passante) ou les personnes souhaitant effectuer de l'hbergement de sites. A partir de 179 / mois (htva). BeLT propose des hbergements de 250 a 750 mo d'espace disque, des emails en pop3, des sous domaines, accs ftp, Real Audio et Video G2, PHP, bases BeLT de donnes MySQL, Miva, accs Telnet ou SSH, ... partir de 25 / mois (HTVA). Serveurs situs aux USA

En rsum, vous avez l'embarras du choix et cette liste n'est pas termine.

13-Uploader les pages sur le serveur

Pour envoyer vos pages sur le serveur il existe diffrentes possibilits qui varient en fonction de votre hbergeur.
o

La mthode la plus courante est d'utiliser le protocole FTP. Vous utilisez alors un client FTP pour vous connecter sur le serveur FTP de votre hbergeur et placer vos fichiers sur le serveur. Je vais illustrer la configuration du logiciel FTP Explorer. Ce logiciel est gratuit pour les particuliers et est trs facile utiliser pour les adeptes du drag'n drop.

Pour crer une nouvelle connexion, c'est trs simple. Il suffit de rentrer les donnes correctes. Profile name Host Adress Port Login C'est le nom sous lequel apparaitra la connexion dans la partie gauche de la fentre C'est l'adresse du serveur ftp de l'hbergeur. En gnral l'adresse commence par ftp. ftp.citeweb.net dans le cas de Citeweb Le port sur lequel se connecter. En gnral c'est le port 21. Le login que vous utilisez pour vous connecter. En gnral c'est celui que vous avez choisi pour le nom de votre site. rotule dans mon cas Le mot de passe utiliser pour se connecter. Gnralement le mme que celui que vous utilisez vous relever votre mail. *** dans mon cas (vous n'esprez quand meme pas que je vais vous donnez mon pass ;-) C'est le dossier du serveur dans lequel vous voulez arriver en vous connectant. Cela vite de devoir parcourir l'arborescence pour retrouver le rpertoire ou vous allez souvent. Le nombre de tentatives de connexions effectuer pour se connecter au serveur au cas ou celui ci est indisponible et le nombre de secondes attendre entre chaque tentative. C'est le rpertoire de votre disque dur ou seront enregistrs les fichiers que vous aller downloader.

Password

Initial path Attempts & Retry delay Download path

Une fois les donnes correctement saisies, il ne reste qu'a cliquer sur connect pour lancer une connexion au serveur. Quand la connexion est tablie, on a l'arborescence du serveur qui s'afiche.

Pour uploader un fichier, c'est trs simple, il suffit de le slectionner dans l'explorateur de Windows et de le faire glisser dans le bon rpertoire sur le serveur ftp. Une autre mthode consiste utiliser la fonction upload (flche bleue vers le haut ou upload.. dans le menu file) et a slctionner les ou les fichiers uploader.
o

Une autre technique utilise sur certains serveurs consiste se rendre sur une page Web et a choisir sur le disque dur le fichier que l'on souhaite envoyer sur le serveur. Cette mthode est trs facile mais peu pratique car elle ne permet pas de grer les rpertoires et sous rpertoires. Elle est par exemple utilisable sur Altern. Certains serveurs autorisent l'utilisation des extensions Front page pour uploader vos pages (ne me demandez pas comment ca marche, je n'en sais rien).

14-Se faire connaitre

Ca y est ! votre site est fini, il ne reste plus qu'a le promouvoir (faire de la pub, mais sans excs) pour que les surfeurs sachent que vous existez et qu'ils puissent venir visiter votre site. Pour cela, il y a diffrents moyens :
o

Les moteurs de recherche / annuaires Le meilleur moyen de s'attirer du monde, est d'tre connu des moteurs de recherche/annuaires. Pour indexer un site, les moteurs de recherche se basent sur le contenu du site en lui mme. D'autres par contre se basent sur le contenu des tags <title> </title> et sur les mots cls que vous avez dfinis. La dfinition de mots cls se fait via les tags : <META NAME="Keywords" CONTENT="mots cls qui caractrisent le site"> et <META NAME="description" CONTENT="la description de votre site">

o o o o o o

Ces tags doivent tre inclus dans l'en-tte de chaque page du site, en adaptant leur contenu bien entendu. Placez un maximum de mots cls qui caractrisent votre site. Pour les annuaires la procdure est quelque peu diffrente puisque vous devez vous inscrire dans leur base de donnes pour y tre rfrenc. Cela peut prendre un certain temps avant que vous ne soyez effectivement trouvable (quelques semaines sont un cas courant). La procdure doit donc tre recommence pour chaque moteur dans lequel vous souhaitez figurer. Heureusement il existe des logiciels ou des sites qui peuvent vous aider dans cette tche, pour les trouver cherchez sur le web des rfrenceurs (ca vous permettra de voir si ils ont bien fait leur travail ;-) Par mail La plupart des clients mails actuels vous permettent d'ajouter une signature la fin de vos mails. Cette signature est en fait une suite de lignes dans lesquelles il vous suffit d'insrer l'adresse de votre site web, de faon a ce que vos correspondants puissent aller le visiter. Exemple de signature :
----------------------------------------------------------rotule@rotule.net http://www.rotule.net/ ma page perso disponible 24h/24 (ou presque) avec des explications sur la cration de pages, le perl, les cgi, ... -----------------------------------------------------------

Dans les newsgroups Il existe des groupes de discussion spcialement concus pour faire de la "pub". Rien ne sert de faire de la pub sur tous les newsgroups car vous aller vous faire engue..er et vous n'attirerez pas de visiteurs. Les groupes spcialiss en annonces, sont ceux qui contiennent 'annonce' dans leur nom. Vous pouvez ventuellement passer un message pour annoncer que votre site traite d'un sujet qui est en rapport avec le groupe sur lequel vous postez. Pensez galement inclure un signature dans les rponses ou les questions que vous postez dans les groupes de nouvelles (mme signature que pour le mail, voir plus haut). Divers Il n'y a pas qu'internet dans la vie, n'oubliez pas de parler de votre site autour de vous, d'indiquer son url sur votre carte de visite, dans les brochures publicitaires, etc.

Dans tous les cas quand vous faites de la pub, faites attention la nettiquette