mis à jour le

remarques, réflexions : Christian Oïhénart

Divers

De nombreux points pourraient encore être traités, mais je me contenterai uniquement de présenter brièvement les chapitres suivants.

Les bibliothèques d'images

La gestion d'un site

Le référencement d'un site

Les formulaires

Les scripts

 

 

Les bibliothèques d'images

Les bibliothèques de Home Page permettent de stocker des images, des logos, des boutons de navigation (dont des images à liens multiples), des tableaux, du texte, des textures, des movies, ... que vous utilisez souvent.
Pour placer un élément en utilisant une librairie, choisir Bibliothèque dans le menu Fichier puis une des bibliothèques listées. La fenêtre qui s'ouvre contient à gauche une liste de rubriques et à droite le contenu de la rubrique sélectionnée. L'image peut alors être collée comme image dans une des fenêtres ouvertes ou comme motif de papier peint en utilisant le 4e bouton (clic appuyé et en sélectionnant la page cible)

Pour créer une nouvelle bibliothèque, choisir Bibliothèque dans le menu Fichier puis Nouvelle. Une fenêtre de bibliothèque apparaît avec à gauche une seule rubrique "sans titre" et à droite un texte explicatif (que vous pouvez supprimer par Retour arrière sur PC et Arrière sur Mac). Cette bibliothèque peut être enregistrée soit dans le dossier du site, soit mieux dans le dossier contenu du dossier Home Page 3.0, ce qui permettra d'y accéder par l'option Bibliothèque.
Pour entrer de nouvelles images, il suffit de les faire glisser d'une page vers le côté droit de votre nouvelle bibliothèque, ou de cliquer sur le 2e bouton et de choisir l'image à insérer.
Vous pouvez tout aussi facilement entrer de nouvelles rubriques en cliquant sur le 1er bouton.

L'utilisation des bibliothèques de Home Page permet un gain de temps précieux dans la conception d'un site Web en ayant toujours sous la main les éléments graphiques les plus fréquents.

Mais attention il ne faut pas oublier que dans une page HTML, les images ne sont pas contenues dans le texte, mais qu'elles sont appelées avec des balises. Il faut donc toujours, comme nous l'avons dit, les regrouper dans un dossier images. Le gestionnaire de sites le fait très bien, mais si on utilise plusieurs fois une image d'une bibliothèque, il la sauvegarde plusieurs fois, ce qui n'est pas fait pour alléger le site !

Pour plus d'informations sur les bibliothèques, vous pouvez consulter la leçon 7 du didacticiel.

 

 

Gestion d'un site

Bon, vous avez fait déjà une bonne partie du travail, vous avez bien regroupé vos fichiers images dans un dossier images et vos autres médias dans un dossier médias (par exemple), le tout étant dans un dossier avec vos fichiers html.

Pour mettre à disposition vos documents, il faut alors les mettre sur un serveur, soit un ordinateur qui reste allumé 24h sur 24. Vous allez pour cela utiliser un outil de transfert de fichier ftp (pour file transfer protocol). Des programmes ftp indépendants (Fetch sur Mac, ws_ftp sur PC) existent et avec un peu d'habitude, ils apportent un plus grand confort d'utilisation, mais nous allons ici utiliser le client ftp intégré à Home Page. Vous pouvez télécharger Fetch (anglais) et un Un guide de Fetch en français pour Mac, ou télécharger WS-FTP LE pour win95-98, WS-FTP Pro pour Win 95-98 ou WS-FTP Pro pour NT.De nombreux programmes pour les deux plates-formes existent chez tucows.

Si votre site ne contient qu'une page, vous pouvez alors, après avoir une dernière fois vérifié que tout fonctionnait bien en local et que toutes les images étaient regroupées dans un dossier images, lui-même dans le dossier de site, décider de transférer votre document sur un serveur en utilisant la commande Transférer du menu Fichier.
Nous avons vu que les images ne sont jamais incluses dans le document html, il faut alors impérativement cocher l'option "Inclure les fichiers d'images" pour que votre document html puisse afficher les images sur le serveur. Ensuite, il vous faudra "Définir les options FTP ..." pour que le programme sache où il doit transférer les fichiers, puis cliquer sur Transférer. Comme la Définition des options FTP intervient aussi dans le cas où votre site contient plusieurs pages, elle sera examinée ci-dessous.
Vous avez aussi la possibilité de ramener une page du serveur, qui ne vous conviendrait plus, par la commande Télécharger du menu Fichier. Une autre méthode consiste à transférer la page modifiée, qui "écrasera" la version sur le serveur.

 

Si votre site contient plusieurs pages (ou même s'il ne contient qu'une page), vous pouvez alors choisir "ouvrir dossier en tant que site ..." dans le menu Fichier.

L'Éditeur de site vous permet de gérer votre site, de vérifier les liens et les références, de regrouper les images, etc. Les boutons de cette fenêtre bénéficient d'une explication lorsqu'on les survole.

Le 6e bouton amène la fenêtre suivante, légèrement différente de la fenêtre de transfert vue préalablement :

 

Vous avez ici plus de possibilités de transférer les fichiers et dossiers de votre choix. "Définir les options FTP ..." donne une fenêtre dans laquelle vous allez indiquer le nom du serveur (l'ordinateur sur lequel vous allez poser vos fichiers), le nom d'utilisateur et le mot de passe (vous êtes le seul à pouvoir modifier vos fichiers) et le dossier distant, ce qui veut dire le dossier qui va contenir votre site. Dès que vous avez entré les 3 premières informations, vous devriez pouvoir parcourir l'arborescence du serveur en cliquant sur le bouton Parcourir, mais cela ne semble pas être le cas. Il faut donc savoir exactement dans quel répertoire iront vos fichiers. Le mode FTP doit être laissé en Passif.

Dès que vous avez cliqué sur OK, une dernière fenêtre apparaît vous indiquant que le logiciel va procéder au regroupement des fichiers multimédia, soit dans le même dossier que les documents html, soit dans un dossier images. Il faut impérativement faire le même choix que sur votre ordinateur en local.

Un petit clic sur Regrouper et les fichiers de votre dossier de site seront enfin transférés (Ouf !). Il ne vous restera plus alors qu'à admirer vos pages Web en utilisant la bonne URL.

Une bonne idée est aussi de consulter la page faite par François Lombard à Tecfa sur ces transferts FTP.

Le référencement d'un site

Bien, vous avez enfin réussi à mettre sur pied votre site sur l'histoire de la choucroute , vous l'avez posé sur un serveur et vous désirez maintenant qu'une personne intéressée par l'histoire de la choucroute puisse découvrir votre site. C'est ici qu'interviennent les moteurs et index de recherche. Ceux-ci utilisent des programmes automatiques (robots) pour inventorier les pages Web, suivre les liens qui y sont présents et compléter ainsi une gigantesque base de données (il y a aussi des annuaires ou le tri et une partie du référencement se font par des humains, par exemple Yahoo).
Le travail des robots est complété par des informations fournies directement par les concepteurs de pages Web. Vous pouvez contacter un à un les principaux moteurs de recherche ou utiliser des programmes qui vous référencent automatiquement votre site sur plusieurs dizaines de moteurs ( certains sont encore gratuits, mais cela devient rare ; voir page Ressources).

Science en avril 98 estimait le pourcentage d'indexation des pages Web à 34% pour HotBot et à 28% pour AltaVista, c'est dire que de très nombreuses pages ne sont pas référencées !

Comment fonctionnent les principaux moteurs de recherche, .... Et bien chacun fonctionne d'une manière spécifique malheureusement. Certains ne scrutent que les titres et les premières lignes de texte des pages, d'autres sont plus complets. Les calculs de la pertinence d'un site par rapport à une demande sont aussi assez variables, dans le but de garder toujours un peu d'avance sur des développeurs qui tenteraient de leurrer les moteurs de recherche.

En tant que concepteur de pages Web, vous pouvez améliorer les chances d'être référencés en utilisant les balises Meta dont différents moteurs utilisent l'information. Il faut alors se mettre en mode "Éditeur source HTML" et entrer directement l'information au niveau de l'entête du document (<HEAD>). Trois lignes peuvent être ajoutées, une donnant l'auteur, la deuxième la description du site et l'autre des mots-clés.

<HTML>

<!--This file created 20.1.2000 13:52 by Claris Home Page version 3.0-->

<HEAD>

<TITLE>divers</TITLE>

<META NAME=GENERATOR CONTENT="Claris Home Page 3.0">

<META NAME="Author" CONTENT="Christian Oihenart">

<META NAME="description" CONTENT="histoire de la fabrication de la choucroute et mes meilleures recettes">

<META NAME="keywords" CONTENT="choucroute, Allemagne, cochon, chou, lard, recette, histoire">

</HEAD>

 

Vous pouvez aussi commencer votre site par une description de son contenu.

Formulaires

Si vous souhaitez obtenir des avis sur votre site, vous pouvez alors faire figurer votre adresse e-mail, mais si vous désirez obtenir des informations plus structurées, les formulaires sont faits pour vous. Normalement, les formulaires ne sont utilisés que sur des serveurs pouvant lancer des programmes CGI (Common Gateway Interface) ; c'est alors le fournisseur d'accès hébergeant vos pages qui met le script CGI pour les formulaires à disposition.

Toutefois, il est parfois possible de contourner le problème en se faisant envoyer le formulaire par courrier. Le message reçu par e-mail consiste en une seule ligne de texte dans laquelle les enregistrements sont séparés par des "&" et les champs sont composés de leur noms unis à leurs contenus par le signe =) ce qui ne facilite pas la lecture et il vous faudra avoir recours à un toilettage de votre texte avant de pouvoir en profiter (macros d'un traitement de texte ou logiciel spécialisé). Le parfois est à retenir car hélas cela ne fonctionne en tout cas pas pour le serveur de l'état.

L'insertion d'une zone de formulaire se fait par la commande Formulaire (zone de formulaire) du menu Insertion. Celle-ci s'affiche sous forme d'un cadre rouge en Mode Editeur de page. Elle peut contenir des champs de texte et des menus déroulants, des boutons radios et des cases à cocher, un bouton RAZ pour effacer tous les champs et recommencer et un bouton Envoi pour diriger les données du formulaire vers votre adresse e-mail. Tous ces éléments peuvent être déplacés dans la zone de formulaire et paramétrés. L'insertion se fait par la commande Formulaire du menu Insertion ou via une palette autonome (dans le menu Fenêtre sur Mac et dans le menu Affichage sur PC).

 

case à cocher / bouton radio / bouton d'envoi / bouton reset

fenêtre de texte / champ de texte / zone de mot de passe / menu pop-up

 

Pour envoyer le courrier dans votre boîte aux lettres, il faut indiquer dans la fenêtre de l'éditeur de formulaire, onglet Paramètres, rubrique Action, soit /cgi... si votre fournisseur de site en met un à votre disposition soit mailto: ... et choisir Envoyer ... ou Recevoir ... (cela dépend des serveurs) comme Méthode.

Exemple de questionnaire d'évaluation d'un site internet (par exemple)

Quelle est votre fonction en quelques mots :

Quel est votre âge :

Vos remarques sur le site (souhaits, erreurs constatées, ...) :

Je travaille principalement sur Mac : sur PC :

J'utilise surtout Netscape : sur Explorer :

Je désire être informé des nouveautés sur ce site :

Adresse e-mail :

Vous pouvez maintenant tout effacer ou envoyer vos informations

 

Comme j'ai utilisé un mailto: dans rubrique Actions ce formulaire ne marche malheuresement pas. Vous pouvez néanmoins interagir avec la page car le bouton Vider le formulaire est opérationnel !

Ce lien amène à une page où le formulaire est opérationnel

Scripts

Mon propos n'est pas de rentrer dans Java ou javascript, mais de montrer que l'on peut réaliser des choses toutes simples avec quelques lignes de code. Je n'aborderai que quelques exemples écrits en javascript (langage léger et orienté objet permettant d'écrire des scripts, inventé par Netscape). Ne pas confondre avec Java qui est un langage de programmation développé par Sun (les programmes Java sont compilés sur le serveur et peuvent être autonomes alors que les scripts écrits avec JavaScript doivent obligatoirement être interprétés par le navigateur).

Cinq scripts sont présentés ici et commentés (merci à Charles Lachat pour les explications sur le 5e !).

Vous trouverez de très nombreux scripts sur de nombreux sites (voir dans Ressources) que vous pourrez télécharger librement et adapter à vos besoins. Attention à ne pas surcharger vos pages d'effets et à rester conscient que suivant les navigateurs, les versions de navigateurs et les plate-formes, les scripts peuvent se comporter de manière diffférente.

1 Un exemple de rollover générant une fenêtre d'alerte

 Code correspondant

<A HREF ="" onmouseover ="alert('J\'avais dit de ne pas toucher')"><IMG SRC="images/javascript2.gif" WIDTH=128 HEIGHT=57 BORDER=0 ALIGN=bottom>

Explications

Le tag A HREF.. comprend l'instruction onmouseover.
Ainsi, si le curseur se trouve au-dessus de l'image, le navigateur affiche une fenêtre d'alerte.

 

2 Un exemple de rollover sur une image (changement de cette image)

Code correspondant

<A HREF="divers.html" onmouseover="document.coucou.src = 'images/titrescript2.gif'" onmouseout="document.coucou.src = 'images/titrescript.gif'"><IMG SRC="images/titrescript.gif" WIDTH=80 HEIGHT=30 BORDER=0 ALIGN=bottom name=coucou></A></P>

Explications

Le tag A HREF.. comprend les instructions onmouseover et onmouseout.
Le tag IMG SRC... comprend la déclaration d'une variable pour la propriété name.
Ainsi, si le curseur se trouve au-dessus de l'image, le navigateur affiche la deuxième image (titrescript2.gif) et quand le curseur est en dehors, il affiche la première image (titrescript.gif).
Pour réaliser cet effet, il faut d'abord avoir prévu deux images, puis insérer dans l'Editeur de page la première image (titrescript.gif correspondant à "Survolez-moi !") et lui attribuer un lien.
Sélectionner ensuite cette image et entrer dans l'éditeur HTML, puis écrire à la main onmouseover="document.coucou.src = 'images/titrescript2.gif'" onmouseout="document.coucou.src = 'images/titrescript.gif'" à la bonne place.
Revenir à l'Editeur de page, sélectionner l'image et l'éditer : l'instruction pour le nom se met simplement dans l'onglet Etendu (name=coucou).

Il est aussi possible de rentrer directement tout le code dans l'Editeur HTML.

 

3 Un exemple de rollover sur une image avec changement d'une autre image dans la page

Code correspondant

A HREF ="divers.html" onmouseover ="document.survol.src = 'images/javascript4.gif'" onmouseout ="document.survol.src = 'images/pixel.gif'"><IMG SRC="images/javascript3.gif" WIDTH=113 HEIGHT=43 BORDER=0 ALIGN=bottom></A>

<IMG SRC="images/pixel.gif" WIDTH=85 HEIGHT=57 ALIGN=bottom name=survol>

Explications

Le tag A HREF.. comprend les instructions onmouseover et onmouseout.
Le tag IMG SRC... comprend la déclaration d'une variable pour la propriété name pour l'imag qui doit changer.
L'astuce est ici d'avoir une image invisible (pixel.gif) à droite du bouton "Encore un survol ?" et de la remplacer par l'image "Superbe" correspondant à javascript4.gif.

 

4 Un exemple de boutons modifiant l'aspect de la page

Code correspondant

<FORM ACTION="" METHOD=POST>

<CENTER><INPUT TYPE=button NAME=Bouton VALUE="gris" onclick="document.bgColor='silver'"><INPUT TYPE=button NAME=Bouton VALUE="vert" onclick="document.bgColor='lightgreen'"><INPUT TYPE=button NAME=Bouton VALUE="fuchsia" onclick="document.bgColor='fuchsia'"><INPUT TYPE=button NAME=Bouton VALUE="bleu" onclick="document.bgColor='lightblue'"><INPUT TYPE=button NAME=Bouton VALUE="blanc" onclick="document.bgColor='white'"></CENTER>

</FORM>

Explications

Ces boutons se trouvent dans une zone de formulaire afin que Netscape les voie. 

 

5 Un exemple de menu déroulant

Code correspondant

Entre les balises <HEAD> et </HEAD>

<script><!--
function change_url (sel) {
window.open(sel.options[sel.selectedIndex].value+".html", "_top");
sel.selectedIndex = 0;
}
// --></script>

A l'endroit souhaité du menu

<FORM ACTION="" METHOD=POST name="nom_de_form">
<P>&nbsp;</P>
<P><SELECT NAME=premier onchange="change_url(this)">
<OPTION SELECTED>BD : Faites votre choix...
<OPTION VALUE=garfield>garfield
<OPTION VALUE=mickey>mickey
<OPTION VALUE=obelix>obélix
<OPTION VALUE=simpsons>simpsons
</SELECT></P>
</FORM>

Explications

On arrive ici à des instructions plus complexes : l'idée est de pouvoir sélectionner à partir d'un menu déroulant une adresse url. Le menu déroulant va se trouver dans une zone de formulaire et il fera appel à une fonction javascript décrite dans l'en-tête du document.

Menu déroulant (popup):

<SELECT NAME=premier onChange="change_url(this)"> l'événement détecté est onChange et on applique à cet événement le gestionnaire change_url avec passage du paramètre (this) propre à l'élément de form SELECT. . 

<OPTION SELECTED>BD : Faites votre choix... correspond au texte affiché par défaut 

<OPTION VALUE=garfied>garfield la valeur garfield sera transmise au gestionnaire change_url par le paramètre this. garfield a été choisi parce que l'url à afficher s'appelle garfield.html.

Script :

window.open(sel.options[sel.selectedIndex].value+".html" renvoie garfield.html ou mickey.html ou ... selon le choix effectué par l'utilisateur

"_blank" est un paramètre optionnel qui permet d'ouvrir la nouvelle URL dans une nouvelle fenêtre ou dans la même fenêtre que la fenêtre appelante (_top).

sel.selectedIndex renvoie 1 pour garfield, 2 pour mickey, etc et 0 pour "BD : Faites vote choix..."

sel.selectedIndex = 0 positionne le popup sur "BD : Faites votre choix..."

 
Page précédente Page suivante Travaux pratiques