Mes Astuces
Ou simplement, les fichiers dont je suis fier!
Je vais commenter mes fichiers, à vous de regarder ce qu'il y a dedans (le code source) et de récupérer, modifier et améliorer mes codes (dans ce cas prévenez-moi, les améliorations m'intéressent!). Ceci est le fruit de mon expérience, à vous de faire la votre !
Vous pouvez lire linéairement ce fichier ou regarder directement l'index de cette page si un champ vous intéresse.
Si vous surfez librement à partir des liens de cette page, vous gardez la Frame de gauche et ainsi vous pourrez peut-être voir volontairement un des problèmes inhérents aux frames. Comme par exemple si vous cliquez ici! Je vous conseille de faire retour en arrière après, à moins de cliquer sur un menu à gauche.
Enfin, je n'ai rien inventé, j'ai tout au plus modifié des éléments trouvés dans des différents liens que j'ai indiqués sur ma page pour les WebMasters débutants. Je remercie bien les auteurs de ces pages.
Ce n'est vraiment pas mon point fort! Je fais afficher mes fichiers avec un traitement de texte qui voit (en partie) mes erreurs, et je les corrige moi-même dans mon fichier original. Je fais attention à ne pas sauver la version corrigée par le traitement de texte, mais celle que j'ai corrigée moi-même sur un éditeur de texte : les traitements de texte ajoutent parfois des balises ou d'autres cochonneries (comme MSWord qui vire consciencieusement toutes vos astuces pour les remplacer par ses merdes).
J'espère pour vous comme pour moi que cette méthode permettra de faire des progrès en orthographe!
Mon expérience m'a montré qu'on peut éviter de fermer certaines balises dans certains cas comme entre les balises TD des tableaux. Ceci est une mauvaise habitude, j'ai eu un problème avec la balise DIV car je ne fermais ni small, ni font : la balise /div n'était pas repérée par Netscape. Ceci est d'autant plus important que les nouvelles normes imposeront même de fermer les balises br ! Voir par exemple le XML.
Voici quelques idées pour le HTML. Le premier fichier dont je vais parler est le fichier Poids_Taille.html. Dans ce fichier, j'ai mis des boutons radio dont je parlerai plus tard sous la rubrique javascript.
D'un point de vue purement HTML, j'ai surtout approfondi les tableaux. Ils m'ont permis de paginer la feuille en deux colonnes en insérant le texte dans un tableau à deux colonnes dont la largeur du bord est nulle : border="0" (inutile car c'est par défaut). Vous verrez dans ces deux colonnes des tableaux : on peut sans problème insérer des tableaux dans des tableaux. J'ai aussi mis des th à la place des td pour signaler les entêtes du tableau. J'ai aussi utilisé rowspan et colspan pour assembler des cellules du tableau entres-elles. Là, il ne faut pas se tromper car un assemblage est signalé une seule fois et surtout avec rowspan, il prend une case dans la ligne suivante alors qu'on ne le signalera pas. Finalement, j'ai mis dans le tableau de concordance taille-poids des colonnes vides pour séparer les groupes de colonnes.
On peut se servir de tableaux pour la pagination : Je me suis aussi servi d'un tableau, par exemple, sur mon index général pour la première ligne avec les dates et dans mon index des maths pour faire des colonnes.
Un autre problème sur les tableaux (Merci MicroSoft!!) est que IE ne supporte pas des liens qui prennent tout le tableau : <a href=...><table>....</table></a>
Je propose aussi une astuce pour organiser les images/photos sur une page. Je pense qu'il n'est pas nécessaire de les mettre toutes/tous du même côté. On peut alterner gauche-droite ceci permet avec le paramètre align="left" ou align="right" de prévoir un changement de la taille de la page et des caractères sans trop de problèmes. Vous pouvez voir des exemples à la page Affiche images.html pour bien comprendre ses exemples, changez les paramètres suivants simultanément : augmentez la définition de l'écran et diminuez la taille de caractères puis faîtes l'inverse. Vous verrez ainsi comment s'adapte le texte et vous choisirez la première méthode j'espère. Il existe d'autres méthodes comme faire un tableau à deux colonnes, mettre d'un côté le texte puis de l'autre l'image. Mais cette méthode ne s'adapte absolument pas aux changements de taille d'écran ou de caractères : elle laisse un vide soit en dessous le texte pour attendre la fin de l'image, soit en dessous de l'image pour attendre la fin du texte. Le tableau est prévu pour une seule configuration. La votre?
Pour mettre une icone dans le navigateur (mozilla ou netscape uniquement, pour le moment IE ne prend pas ça en compte) de votre visiteur, insérez dans la section head le code suivant <link REL=¨SHORTCUT ICON¨ HREF=¨chemin_icone¨;> comme je l'ai fait par exemple à mes pages d'électronique
Je tiens aussi à signaler que si vous tapez vous-même vos fichiers à la main, pour afficher un 'à', il est inutile de taper 'a´'. L'accentuation française est prise en compte dans la norme HTML. Le seul intérêt de ces frappes à rallonge est de singer les documents MicroSofts (bêtement donc).
Dans le fichier "répertoire" de mon monde, j'ai sélectionné des parties de la carte de mon monde pour en faire différents liens. J'ai remarqué que si plusieurs zones passent au même endroit, c'est la dernière identifiée qui prend le dessus. Vous pouvez faire apparaître un message accroché au curseur en donnant un Title à l'area choisie.
Grâce aux FORM on peut envoyer des courriers. Vous pouvez voir ceci en cliquant sur la lettre qui bouge en permanence sur votre gauche, c'est le fichier message.html. Ce fichier contient d'autres astuces en javascript : voir "mailto" et Javascript. Cette méthode dépend de l'hébergeur : renseignez-vous avant!
Moi, voici les exemples que je vous propose : sur Free, sur chez et sur Multimania. Sur Chez et Multimania, j'ai choisi moi même le nom de la page suivante : valide message.html alors qu'à free, ce nom était imposé : result.html. Sur Multimania, l'URL du fichier suivant devait être écrit depuis la racine : "http://...".
Je viens de voir que l'ordre d'écriture est important pour des opérations devant se faire au fur et à mesure de l'affichage du fichier. C'est à dire que si on définit une variable : var avis = (navi) ? document.idAvis : document.all.idAvis.style en fonction d'un élément (nommé ici idAvis) qui sera afficher plus tard, cette définition ne donnera rien car l'item idAvis n'est pas encore connu. Pour la définition de mes sous menus dans la frame ci-contre, j'ai du faire attention à ça : je voulais mettre tout le code javascript dans la section head, ceci a été impossible.
Là, on rentre vraiment dans la programmation, c'est qui m'intéresse. Je vais encore commencer par le fichier Poids_Taille.html pour parler cette fois des zones de communication : les boutons radio, et les zones texte. Vous pouvez aussi regarder mes exemples en électronique : tirage de DS ou test.
Commençons par les boutons radio, il faut regrouper un type (ou famille) de données par nom comme ici "Dp", "Sexe", "Race" pour les trois premiers (voir dans le corps du fichier HTML : body). Un seul élément peut-être coché parmi une famille. Il faut faire attention à l'ordre car par la suite, on saura uniquement si c'est le ième bouton qui est coché si form.nom[i-1].checked vaut 1. J'ai beau avoir mis un nom à chaque item de la famille, ceci ne m'a donné aucun avantage : à vous de le trouver, ça m'intéresse! Dans ce fichier, j'ai aussi bien imposé des valeurs aux familles (au démarrage avec un item sélectionné "checked" ou en fonction de tirage aléatoire dans la procédure Tire_pt) que lu les items sélectionnés dans la procédure Calcul_pt. Pour repérer l'item choisi, j'ai fait une procédure, la function rang, qui fourni le rang de l'item sélectionné. Cette procédure, la dernière de mes procédures, admet deux variables : un pointeur sur la famille (radio) et le nombre d'item de la famille (t) afin de sortir même si rien n'a été choisi. Cette procédure renvoie soit l'item sélectionné, soit le suivant du dernier si rien n'est sélectionné.
Pour la communication, j'ai aussi utilisé des entrées de type text, celles nommées DeltaT, DeltaP, T_DE, T_DO, T_H ou T_FG. Comme précédemment, j'ai aussi bien imposé des valeurs que lu les valeurs sélectionnées dans les mêmes procédures. Pour faire exécuter les calculs avec ou sans tirage (mes procédures javascript), j'ai utilisé les entrées de type button juste après mes tableaux. Ces entrées sont des boutons poussoirs sur lesquels on peut "appuyer". Finalement pour afficher le résultat, j'ai utilisé à la fin du fichier un TEXAREA afin d'afficher un texte : le texte de "message" à la fin de la procédure Calcul_pt. L'avantage de ce type par rapport à l'entrée text simple est qu'on impose la hauteur en plus de la largeur de l'affichage.
Dans le fichier sur les emprunts, j'ai aussi utilisé des formes, mais pour les sorties, j'ai utilisé la fonction alert qui oblige le surfeur à cliquer pour continuer de naviguer. Je parle d'une autre sortie utilisée par ce fichier sous la rubrique tableau.
Dans le fichier Poids_Taille.html, j'ai aussi utilisé les fonctions switch, case et break afin de faciliter les tris en fonction de la valeur d'une famille. Ces fonctions évitent un enchevêtrement de if/else comme au début de la procédure Tire_pt. Le dernier point intéressant de cette procédure est le tirage aléatoire, première instruction de la procédure Tire_pt. Il se fait avec la fonction new date qui donne le nombre de millisecondes écoulées depuis le 1/1/1970. On travaille avec les restes successifs des divisions : ici deux fois par 200 au début, ceci donne un cycle en 200x200ms=40 000ms=40s. Attention, quand ce nombre devient trop grand, les tirages consécutifs se ressemblent trop! C'est pour cela que j'ai effectué un nouveau tirage après les if/else en espérant que le temps d'exécution jusque là ne sera pas toujours le même (taches de fond...). J'avais vu que le résultat de new date était au 100ème près alors que je crois voir que chez moi il est au millième, j'aimerai avoir votre avis. Merci.
Dans deux fichiers, j'ai fait des tableaux avec des procédures en Javascript. Le premier est le fichier sur les tirages de dès. J'ai fait une procédure qui fait un tableau avec des spécifications particulières afin de diminuer la taille du fichier. Le seul but de cette manipulation était d'avoir un fichier 10 fois plus petit que le fichier HTML pondu par Word de MicroSoft. Diminuer la taille d'un fichier de MicroSoft par 2 ou 3 n'est pas un exploit, mais par 10, si ! Dans ce fichier vous pourrez aussi voir des tirages de dès quand vous passez sur différents titres.
Le second fichier est le fichier où je parle des prêts et des emprunts. Dans ce fichier, je fais le tableau d'amortissement dans un nouveau fichier que je fais construire par la procédure amor(forme).
Dans le fichier sur les emprunts, j'ai aussi utilisé des fonctions mathématiques pour résoudre les différents problèmes. J'ai aussi du faire un programme de résolution d'équation pour trouver le taux mensuel.
L'écriture de ces fonctions demande la présence d'un Math. devant. Mais on peut l'éliminer d'un paquet d'instruction si elles sont dans un système With (Math) {...}. Je me suis servi de cette astuce dans ma page de tracé de fonction où vous pouvez voir la liste des fonctions diponibles.
Dans un fichier, la frame qui est à la gauche de votre écran, je fais un passage de paramètre d'une frame à l'autre : la couleur de fond et de caractère. Il faut bien connaître sa page avec ses frames : si vous cliquez sur le lien du début de ce paragraphe, le changement de couleur demandé dans la nouvelle page (la même que la frame de gauche) ne se fera avec le même code que sur la partie droite de l'écran. Vous pouvez encore faire des essais avec ce lien : lien d'essai. Cette méthode permet aussi quand on a un affichage qui gardera toujours une frame (comme un logo), de garder des constantes dans la frame qui ne bougera pas : dès qu'une page (un fichier) html s'ouvre, il réinitialise tous ces paramètres, il peut aller les chercher sur une frame qui n'a pas changé.
Une autre méthode, qui cette fois ne demande pas la présence de frame est l'utilisation des cookies. Vous verrez un exemple dans le fichier "répertoire" de mon monde. Ce passage de paramètre permet un affichage différent en fonction du cookie dont la valeur change lorsqu'on clique sur les répertoires.
Avec la seconde méthode, vous retrouvez vos paramètres d'un passage à l'autre sur le fichier, même si vous êtes allés faire d'autres visites entre temps. Par contre, je ne sais pas encore passer les paramètres d'un fichier html à un autre. Quant à la première méthode, c'est tout à fait différent : elle permet de passer les paramètres d'un fichier à l'autre, mais on les retrouve initialisés à chaque visite.
On peut aussi passer des paramètres en appelant un fichier html en l'appelant de la façon suivante : "fichier.html?paramètres", les paramètres sont reçus dans location.search. Vous voir ceci dans mes fichiers : sur chez et sur Multimania. La fonction slice dans location.search.slice(1) sert à enlever le "?" qui est reçu en début de chaine par le fichier valide message (Attention, le bouton "Le message a été envoyé" renvoie 2 pages plus tôt dans l'historique!).
Dans le fichier une visite guidée, vous trouverez des scrooling (déroulement) dans la barre de statut. Comme dans beaucoup d'autres fichiers, il y a un déroulement qui s'amorce au démarrage, mais en plus, il y en a d'autres qui prennent la relève suivant où est la souris sur la carte. Ces déroulements n'ont lieu qu'une fois pour plusieurs raisons. Tout d'abord, ça permet une meilleure lisibilité et si on les fait se reboucler sur eux mêmes, on risque de saturer le buffer et de planter le système (même s'il n'est pas MicroSoft)!
Dans mon index je repère la position de la souris pour lui faire une queue en utilisant le DHTML.
Comme j'ai utilisé Chez.com pour ma boite aux lettres, j'ai utilisé une astuce pour que vous reveniez à cette page ensuite, ce quelque soit votre site de départ : free, multimania, libertysurf ou chez. La méthode d'envoi implique d'aller dans un fichier fixe : elle signale que le message a été envoyé et cette page ne contient qu'un bouton qui renvoie deux pages plus tôt dans l'historique. Ce bouton ne marchera pas si la première page était la page message.html.
Je crois que le plus important est de regarder comment votre hébergeur vous conseille de faire : la méthode à utiliser est propre à l'hébergeur !
Dans ma présentation, j'ai mis une barre de défilement comme celle qui est à droite de la fenêtre de votre navigateur. Pour la mettre en place, j'ai utilisé des éléments de DHTML : chaque élément doit être placé à une place précise et en plus le curseur bouge...
La difficulté de cette manipulation est la gestion de la souris, j'ai du mettre des onMouseClick, onMouseOut et des onMouseDown pour gérer au mieux. Pour le moment, ça marche, mais j'aimerai faire encore mieux...
Dans la feuille de présentation du département GEII de l'IUTB, je place mes images en fonction de la taille de l'écran. La taille de l'image de fond dépend même de celle de l'écran. Là encore, pour Netscape, il y a plus de possibilités qu'avec IE! Avec IE, je ne peux qu'avoir la largeur screen.width ou la hauteur screen.Height de l'écran alors qu'avec netscape j'ai celles de la fenêtre : window.innerWidth et window.outerHeight. Comparer le lien avec IE ou Mozilla (netscape) !
Je conseille de faire des fonds d´écrans qui prennent le moins de place possible. Les fonds d"écrans comme celui de ma page de garde trop gros sont à déconseiller (j'ai réduit la taille au maximum). Une méthode simple pour diminuer la taille des fichiers images consiste à diminuer leur nombre de couleurs (à deux si possible). Je conseille soit de faire changer la couleur de fond en fonction des pages ou de mettre des motifs le plus petit possible : le navigateur va recouvrir le fond d'écran en le dallant avec votre motif (mosaïque).
Voici des motifs que j'ai faits spécialement pour vous (et mon site). En changeant les couleurs, vous pouvez changer l'impression générale de la page, mais attention, il faut pouvoir lire le texte! C'est pour cela que mes couleurs sont toujours très claires. Si vous en avez des petits et différents, passez-les moi!.
Vous pouvez voir des essais sur mon index, dans la barre de menu à droite, ma présentation ou dans le fichier "répertoire" de mon monde : ils marchent au moins avec N6.1, Mozilla et IE 5.5.
Dans mon index, j'ai mis 30 étoiles dans des div à positionnement absolu (éléments de base du DHTML) que je fixe une à une sur la dernière position de la souris. J'ai rajouté la variable delta pour ne pas toujours effacer la dernière étoile mise, mais une autre, ceci permet d'étaler un peu plus la queue avec une densité moins importante à la fin. J'ai du résoudre un autre problème : avec Netscape, je dois décaler l'image afin qu'elle ne soit pas sous le curseur à la place du lien où on aimerait cliquer! Vous pouvez encore augmenter le nombre d'étoiles. La théorie pour savoir quelles étoiles vont rester doit reposer sur la décomposition des entiers en nombres premiers.
Dans ma présentation, j'ai rajouté une barre de défilement dont je parle dans le chapitre javascript.
Quand on fait bouger un objet, le plus simple est de faire une procédure qui s'appelle elle-même, mais ceci, à chaque appel, rajoute sur la pile une adresse de retour. Cet appel se fera jusqu'à ce que la pile soit pleine. A ce moment, l'explorateur générera une erreur ou se plantera. Pour ceci, je vous propose la fonction setInterval que j'ai utilisée dans les fichiers précédemment cités : setInterval est une fonction qui appelle régulièrement une autre fonction.
Dans la frame ci contre, j'ai fait afficher des commentaires sous les liens quand la souris passe dessus avec des div (ou claques) au positionnement : position: absolute que je cache ou montre avec les fonctions onmouseover="montre(index)" onmouseout="cache(index)" à l'intérieur de la balise a, avec IE5, on pourrait les mettre dans les td du tableau et ainsi définir l'action pour toute la case, mais ce n'est plus du HTML (merci MS de vouloir détruire ce qui n'est pas à toi!).
Le principal problème est le positionnement : comment savoir la position de notre zone sélectionnée? Pour ma part, j'avais forcé la hauteur des cellules à 45 (enfin un peu plus) en mettant une image de 45 de haut par ligne. Malgré ceci, je n'avais pas ma hauteur de 45 par ligne et elle était même différente pour Netscape 4.7 et IE5! On peut tout aussi bien trouver la place de l'affichage en fonction de la position de la souris, sa place dépendra du point d'entrée dans la zone sélectionnée pour le lien, comme j'ai dans le fichier de présentation La Taillerie. Depuis, j'ai remarqué que les div à positionnement absolu dont les coordonnées ne sont pas imposées se placent à la suite de la dernière ligne affichée par le fichier (dans l'ordre chrnologique de la lecture du fichier). J'ai donc mis mes commentaires
juste après les cases qu'ils commentent.
Dans la frame ci contre, les messages s'effacent quand on sort de la zone sélectionnée. Ceci ne permet pas de faire un sous-menu ce qui est d'autant plus volontaire que le commentaire cache l'item suivant du menu! Pour gérer ainsi des sous menu, il faut enlever le onmouseout="cache(index)" et effacer les autres sous menus éventuellement affichés avant d'afficher le nouveau. Un sous menu peut être un tableau, comme les miens, mais ils peuvent aussi être un texte quelconque, pour mériter le nom de sous menu, ils doivent seulement proposer des options plus fines que le menu. Pour ceci, regardez le fichier tracé de fonction qui affiche des commentaires en fin de page.
Voici en brut les thèmes que j'aborde ici Je n'ai rien inventé, vous trouverez tous les liens utiles dans ma page d'aide aux webmasters. Ce sont les points qui me tiennent à coeur, ou les points que je me suis senti obligé de relever en voyant les sites internets faits par mes étudiants.
Aides | Projets WEB | La publicité |