Quelques astuces diverses

Je ne vais pas faire un cour de (X)HTML , de CSS, ni de Javascript, il y a des bouquins et des sites bien mieux que ce que je pourrais jamais faire pour cela, non, juste donner quelques trucs sympas utilisés sur mes sites...

Remarque: ne pas utiliser les caractères "è" et autres dans du code Javascript.

Page d'accueil du MCMS, remplacée automatiquement par la page principale au bout de 15 secondes.

<meta http-equiv="Refresh" content="15;url=mcmscadr.htm">

lien vers une autre page interne

<a href="nom_de_la_page.htm">texte du lien </a>

lien vers une page externe

<a href="http://www.quelquechose/nom_de_la_page.htm" target = "_blanck" title="lien externe"> texte du lien </a>

le target="_blanck" permet d'ouvrir une autre fenêtre, ce qui était conseillé (mais pas obligatoire) pour les liens externes. Cette proriété target n'existe plus en XHML strict (1.0, 1.1) mais reviendra sous une nouvelle forme dans la prochaine version. Il convient donc d'indiquer par un logo ou par le texte de la zone title que c'est un lien externe.
En fin de compte, ouvrir de nouvelles fenêtres ne seraient pas bien perçu : les utilisateurs novices seraient perdus avec de nombreuses fenêtres ouvertes et les utilisateurs experts seraient chagrinés qu'on veuille utiliser leur navigateur à leur place ! Ce ne serait donc qu'un confort pour... Le webmaster !

lien vers l'envoi d'un message par mail

<a href="mailto:adresse@url.com" > texte du lien du mail </a>

Cet affichage du lien présente quand méme un léger soucis : c'est la porte ouverte à l'envahissement de la boîte aux lettres, cette adresse en clair étant une joie pour les robots spameurs. Attention à ne pas livrer votre adresse personnelle de la sorte ou gérez finement les paramètres de votre lecteur.

On peut facilement remplacer cette adresse par un formulaire si l'hébergement le permet, votre adresse étant alors masqué à vos interlocuteurs, qui en revanche ne pourront peut-être pas joindre de fichiers.

affichage d'une image

Uniquement PNG ou JPEG pour être certain d'être affiché. Les autres formats, le son, la vidéo implique des ajouts aux navigateurs, donc il faut ajouter sur le site des liens vers le téléchargement de patch, donc les gens vont voir ailleurs !!!
Gif si on est certain de la provenance de l'image, le propriétaire du format voulant faire payer le droit d'utiliser des images à un tarif "n'importequoiesque" !!!

Toutefois, il reste un problème gênant avec IE jusqu'au moins la version 6. Si ce navigateur affiche convenablement les PNG, s'il sait gérer la transparence "8 bits" (l'équivalent de la transparence du GIF mais parfois avec des effets surprenant, en utilisant deux couleurs différentes là où on en a choisi une seule) il échoue vilainement sur la transparence "24 bits" ou transparence dégradée, en appliquant une couleur unie (et non transparente). Donc en attendant que la version 7, corrigée à ce niveau, remplace les versions précédente, il faut parfois oublier cette technique particulière, malgré ses avantages graphiques et se contenter du PNG "8 bits" ou utiliser un hack (toujours problématique) pour réaliser cet effet... Ou se fâcher avec 85% des internautes qui ne verront pas votre joli effet (moins sensible avec IE depuis la version 7)...

<img src="nom_image.png ou .jpg (ou .gif à la rigueur donc)" width="largeur" height="hauteur" alt="description de l'image" title="Autre description" />

Le choix du format est "simple" : une photo sera en JPG, un shéma sera en PNG, une image nécessitant de la transparence sera en PNG. Attention, une image en PNG peut être plus lourde que la même en JPG (et réciproquement) et il convient de réduire le nombre de couleurs (et la définition) pour limiter son poids.

lien par une image

<a href="page.htm"><img src="nom_image.png ou .jpg" width="largeur" height="hauteur" border="1" alt="description de l'image" title="Autre description" /></a>

Le texte contenu dans ALT est affiché à la place de l'image avant son affichage ou à la place si elle n'est pas affiché (dans ce cas, il vaut mieux éviter de mettre HEIGHT et WIDTH pour lire tout le texte, le cadre de l'image grandira de façon à contenir le texte) ou encore au bout d'un court instant quand on place le curseur sur l'image avec IE (sur les autres navigateurs, c'est le contenu de TITLE qui est normalement affiché. border permet d'avoir un cadre autour de l'image, qui se comporte comme les autres liens au niveau des couleurs... On peut également utiliser LONGDESCR si on a un texte trop long pour le Alt.

Code pour afficher la date de mise à jour d'une page.

Assez long car Netscape ne passait pas le cap de l'an 2000 !!!

Dans <body>

<script type="text/javascript">
<!-- //
var time = new Date(document.lastModified)
var ddate = time.getDate()
var dmois = time.getMonth()+1
var dan = time.getYear()
var temp = ((ddate < 10) ? "0" : "") + ddate

temp += ((dmois < 10) ? "/0" : "/") + dmois
if (dan < "2000")
dan += 2000
temp += "/" + dan
document.write(temp)
// -->
</script>

cadres

Afficher des cadres, implique de prévenir si on est sur un navigateur n'autorisant pas les cadres. Naturellement dirais-je, là non plus ça ne marche pas en XHTML strict.

<frameset cols="180, 100%" border="1">
<frame src="sommair1.htm" scrolling="auto" noresize id="sommaire">
<frame src="mcms.htm" scrolling="auto" noresize id="texte">
<noframe>
<body>
Bienvenue sur le site du MC Motards Sympas de Melun et Région...

Vous utiliseriez un navigateur affichant des cadres, vous n'auriez pas besoin de cliquer sur <a href="mcms.htm">l'adresse -> mcms.htm</a>. Vous accéderez aux mêmes pages mais l'ergonomie va s'en ressentir : pas de bouton de retour au menu par exemple...
</body>

Les cadres affichent le menu à gauche (180 pixels) et le texte à droite (100% de la place qui reste) et l'absence de cadre le message de remplacement (déclaré dans noframe)

si un site est appelé d'après un autre site utilisant les cadres, il ne va pas prendre toute la place dans la fenêtre, mais juste le cadre dans lequel il a été appelé. Pour éviter cela.

Dans <header>

<script type="text/javascript">
<!--
if (self!=top)
top.location.href=self.location.href
-->
</script>

Le soucis est qu'un site écrit de la sorte va poser d'énormes problèmes:
Quelle que soit la page affichée, seule la page avec le frameset sera affichée dans la barre de titre.
Cette même page sera la seule à pouvoir être mis dans les signets sauf à utiliser FF
Mais si on veut quand même utiliser les cadres, il faut utiliser une DTD frameset ou transitional.

Appel à un CGI (programme) de gestion de formulaire.

C'est gratuit, fourni par Développeur Paradise en échange d'un bouton lien pour celui que j'ai utilisé. Il existe d'autres CGI gratuite de ci de là. Celle ci après saisie du formulaire et clic sur le bouton envoyer, Devparadise m'envoie un mail avec les données du formulaire. On notera que iFrance par exemple refuse qu'on utilise d'autres CGI que les siens... On utilisera cette technique uniquement avec les pages statiques, si on utilise des pages dynamiques et une base de données, on pourra faire son propre traitement.

Nom : le nom saisie

Pre : le prénom saisie

Etc.

<form method="post" action="http://www.devparadise.com/cgi-bin/mailto.pl">
<input type="hidden" id="id" value="Code donné par Paradise">
<input type="hidden" id="SUJet" value="le sujet du formulaire">
<input type="hidden" id="URL" value="l'URL complète d'une page de remerciement">
Votre E-MAIL (attention à la casse) : <input type="text" id="mailfrom" size="40" />

Nom :
<input type="text" maxlength="40" width="60" name="nom" />

prénom :
<input type="text" maxlength="25" name="pre" />

<input type="reset" value="Initialiser" />
<input type="submit" value="Envoyer" />

Mes outils

Tous du monde du Libre ou presque (les autres étaient alors en package sur l'ordinateur, ou des versions anciennes mise à disposition gratuitement ou par un magazine), j'utilise ces logiciels pour ce qu'ils m'apportent mais je tape encore quasiment tous mes sites "à la main".

Retour au menu - Page précédente