Malheureusement, la plupart de ces logiciels ne font pas d'économie d'octets !! Si cela ne pose pas de problème dans Internet, il faut limiter la dimension des fichiers au strict nécessaire dans HamNET (en attendant les THD !)
Il n'est évidemment
pas question de transporter, sur le réseau HamNET (tout au moins
pour le moment !), des pages WEB comportant de grandes images en
2 millions de couleurs, des sons, des vidéos, ou des RealAudio !
Les pages WEB-HamNET doivent être dépouillées le plus possible de tout
superflu inutile. Il faut malgré tout rendre la page attrayante ! il
est donc nécessaire de jouer avec toutes les possibilités d'HTML pour
rendre une page WEB-HamNET agréable à regarder, avec le moins d'octets
possible !!!
Nota :
Un des gros problèmes de certains sites sur Internet, est l'abus des "dernières technologies" (JAVA, CORBA, XML SCHOCKWAVE, etc...) qui permettent de créer facilement des effets spéciaux qui sont peut être spectaculaires, mais n'apportent aucune information utile; bien souvent, vous n'y trouverez que des liens vers d'autres sites !
HamNET,
par nécessité, pourrait être une contre-mesure à cet excès ...!
Le but de cet article est la création d'un modèle de page WEB HamNET.
Une page WEB est écrite en langage HTML. Il ne s'agit pas, à proprement parler, d'un véritable langage comme le FORTRAN, le BASIC ou le C++, mais plutôt d'une sorte de feuille de style, comme on en trouve dans les traitements de texte. (WORD... etc...)
HTML = Hyper Texte Markup Language
La page est écrite en caractères standards (ASCII), et la mise en forme du texte est effectuée par des commandes spécifiques encadrées par des caractères ASCII "<" et ">"
Ces balises appellées TAG en anglais, permettent, en particulier, de choisir des types de caractères (avec divers attributs : type, dimension, couleur, etc...) et de les positionner à un endroit défini sur l'écran...
De même il est possible d'incorporer des images et des sons passés à la moulinette !!!
Une caractéristique essentielle de HTML est la création d'hyper-liens, c'est à dire des mots, des phrases, ou des images qui sont liés à un point d'entrée d'une information. Celle-ci peut être un autre paragraphe de la même page, ou une autre page du même site... ou sur un site distant. Malheureusement cette dernière fonction n'est guère utilisable sur HamNET pour toutes les raisons que vous savez déjà !
On
démarre !
Nous commençons donc par le TAG de départ qui est <HTML>.
Cette balise informe le "navigateur" qu'il doit lire du langage HTML
(il le savait déjà !).
Ensuite on place diverses informations dans l'entête <HEAD>,
qui n'apparaissent pas à l'écran, mais qui peuvent être lues par
les robots de recherche.
Sur HamNET
c'est inutile, bien sûr ! mais pour rester "standard" nous mettrons
tout de même un titre :
<HEAD>
<TITLE> LA PAGE DE F9XYZ </TITLE>
</HEAD>
Comme on le voit dans cet exemple, un TAG de début : <TITLE>
...se termine par un TAG de fin : </TITLE>
La partie qui sera affichée commence par : <BODY>
ici la partie UTILE...
... qui sera terminée par </BODY>
Puis la FIN
de page par </HTML>
Avant de continuer, il faut savoir ce que l'on veut écrire !! il est donc nécessaire, au préalable, de faire un plan de mise en page.
La première chose à faire est de choisir sa "feuille de papier".
Sur Internet il est possible d'utiliser des fonds d'écran très élaborés mais gourmands en octets... ce sont des images de type GIF ou JPG qui sont placées les unes à coté des autres, pour remplir toute la surface de l'écran. (il y a certains "fonds" économiques... c'est le cas de celui de cette page : 970 octets !)
Avec HamNET, nous éviterons tout de même cette méthode pour le moment, et nous prendons une couleur de type "windows" uniforme.
Les couleurs agréables sont de teinte "pastel" :
JAUNE CLAIR ----> ||||||||||||||||||||||||||||||||
VERT..CLAIR ----> ||||||||||||||||||||||||||||||||
BLEU..CLAIR ----> ||||||||||||||||||||||||||||||||
Les couleurs sont données par la commande :
<BODY TEXT="#000000" BGCOLOR="#FFFFE8" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000">
- BODY TEXT donne la couleur des caractères du texte
- BGCOLOR est la couleur de fond d'écran
- LINK donne la couleur des hyperliens
- VLINK donne la couleur des hyperliens déjà visités
- ALINK donne la couleur de la liaison active. (cette commande n'est reconnue que par Netscape)
Les couleurs :
- Les deux premiers caractères (à gauche) donne le niveau de ROUGE
- Les deux caractères suivants donnent le niveau de VERT
- Les deux derniers caractères donnent le niveau de BLEU
black, gray, silver, white, yellow, red, fuchia, purple, teal, navy, blue, aqua, lime, green, olive, maroon.
C'est vous qui voyez !
| WHITE |
| CADETBLUE |
| GREEN |
| LIME |
| NAVY |
| OLIVE |
| PURPLE |
| RED |
| SILVER |
| TEAL |
| BLACK |
| BLUE |
| FUSCHIA |
| GRAY |
| YELLOW |
| AQUAMARINE |
| GOLD |
| HOTPINK |
| CHOCOLATE |
| DARKSLATEBLUE |
| MAROON |
| AQUA |
| DARKKHAKI |
Maintenant
que nous savons choisir une couleur, nous allons écrire le titre de
la page.
Il serait possible de choisir un type de fonte dans la liste des fontes
Windows ... pour le moment nous gardons le type de fonte "par défaut".
Ce titre doit être au centre de la ligne et pour cela nous l'encadrons
entre les tags <CENTER> et </CENTER>
Il nous faut choisir une dimension :
Ce choix peut s'effectuer de deux manières : soit par les tags <Hx>
et </Hx>
Soit par la commande : <FONT SIZE="x"> </FONT>
Dans le premier cas nous aurons la ligne :
<CENTER>
<H2> LA PAGE DE F9XYZ </H2>
</CENTER>
Ce qui donnera :
LA PAGE DE F9XYZ
"H1" est la plus grande dimension... "H6" la plus petite ...
La deuxième méthode :
<CENTER> <FONT SIZE="5"> LA PAGE DE F9XYZ </FONT> </CENTER>
Ce qui donnera :
Dans ce deuxième cas la valeur du chiffre (ici "5') est proportionnel
à la dimension...
Ce formatage en dimensions n'utilise que quelques caractères ASCII
supplémentaires. La première méthode est un tout petit peu plus économique
!
Puisque nous avons appris le "code des couleurs", nous allons mettre
ce titre en BLEU : La ligne ce commande sera :
<CENTER><H2><FONT COLOR="#0000FF"> LA PAGE DE F9XYZ
</FONT></H2> </CENTER>
Ce qui donne :
LA PAGE DE F9XYZ
Les détracteurs de HTML (en packet-Radio) vous
dirons qu'il a fallu 46 caractères ASCII de plus pour écrire ce titre
en grands caractères, en bleu et au centre ! c'est vrai... mais cela
ne vaut-il pas le coup ?
Les séparateurs :
Dans les pages WEB-Internet, les séparateurs sont généralement des
images GIF. C'est le cas du "tiret" précédent. Mais ces images, même
si elles ne représentent qu'un simple tiret, peuvent faire quelques
centaines d'octets !
Pa exemple, le séparateur suivant créé avec Paint-Shop, n'occupe que
215 octets ... (ce qui est négligeable sur Internet, mais peut demander
parfois plusieurs secondes de temps de chargement, sur HamNet ! )
Le plus simple est donc d'utiliser le tag : <HR>
on obtient alors :
Il est aussi possible de programmer la longeur et la largeur relatives de ce trait :
<HR SIZE="10" WIDTH="50%" ALIGN="CENTER">
Le trait fait 10 lignes d'epaisseur et 50% de la largeur de la page.
Une autre astuce économique est de placer une suite de = et de centrer ce séparateur ...
Ce qui donne :
Le texte de l'article sera écrit à la suite. HTML ne reconnait pas les caractères de la touche "ENTREE".
Il faut donc rajouter manuellement le tag : <BR>, lorsque l'on veut faire un retour au début de ligne.
Par contre il est tout à fait possible de taper "au kilomètre" ! le retour se fera automatiquement.
Il y bien la solution d'encadrer le texte par les tags <PRE> et </PRE>
Le texte inclus est alors pré-formaté en conservant les espaces | | et les sauts de ligne du texte source, par contre la police est "non-proportionnelle" .
Les TAGs ( en rouge ) qui apparaissent dans cet exemple ( pour la compréhension) ne sont que dans le "source" et n'apparaissent évidemment pas dans le texte affiché !
Comment fonctionne une station PACKET? <BR>
<BR>
Il n'est pas question ici d'expliquer tous les détails qui président au fonctionnement d'une station packet, il existe sur le sujet une bibliographie <U>volumineuse </U> mais seulement d'en brosser un tableau grossier et rapide "dans les grandes lignes".
<BR>
Le but de la chose étant de transmettre des données alphanumériques (du texte, des programmes, des images numérisées, ...) d'une station à une autre par radio, il est raisonnable de s'attendre à ce que la station packet soit constituée d'un côté d'un <I>terminal </I> jouant le rôle d'interface avec l'OM, et d'un autre côté, d'un émetteur récepteur suivi d'une antenne pour transmettre et recevoir ces données.
<CENTER> ========*======= </CENTER>
<BR>
<BR>
Bien entendu, il ne suffit pas d'un ordinateur et d'un transceiver pour "faire" du packet-radio les signaux binaires délivrés par le port série de l'ordinateur doivent étre transformés en <FONT COLOR="#0000FF"> MODULATION </FONT> afin que la succession de 0 et de 1 que constitue ces signaux puisse se traduire sur l'air par un signal radio <B>intelligible</B>. C'est le MODEM (MOdulateur-DEModulateur) qui réalise cette opération.
<BR>
Voilà basiquement tous les ingrédients d'une station packet. Il y manque toutefois une chose très importante sans laquelle la station ne fonctionnera jamais :
<BR>
Comme on peut le voir dans cet exemple, il est possible de mettre un mot en italique en l'encadrant par les tags <I> et </I> ,de le souligner avec : <U> et </U> ou de le mettre en gras avec : <B> et </B>, soit 7 caractères de plus pour chaque mot ... relativement négligeable !
Le "coloriage" est un peu plus gourmand : 29 caractères ...
En conlusion :
Il ne faut pas abuser des "formatages", car il nécessitent des caractères supplémentaires, qui devront passer par l'étroit goulet des "links" HamNET !!! Malgré tout, cela rend un texte beaucoup plus agréable, et lisible.
Un des principaux attraits de HTML est la possibilité d'inserrer des images dans la page de texte.
Si cela ne pose que peu de problèmes sur Internet, en raison de la vitesse (relative) de transfert, il n'en est évidemment pas de même sur les liens lents d' HamNet : les images sont généralement assez gourmandes en octets !
Il est donc nécessaire de bien "formater" ces images pour les rendre les plus légères possible ...
Il y a deux "formats" d'image utilisés généralement dans les pages WEB : GIF et JPEG
Pour plus d'informations sur le codage des images vous pouvez aller faire un tour dans le répertoire :
HamNet : d' AX25 à TCP/IP ( page d'accueil)
Le format GIF a été créé par Compuserve en 1987 basé sur l'algorithme de compression LZW. (Maintenant de la propriété d' UNISYS.)
Ce format est particulièrement intéressant pour les pages WEB, car il se charge étape par étape, ce qui permet d'arrêter l'affichage avant le chargement complet, si l'utilisateur le désire.
Ce format permet également un chargement de plusieurs images, ce qui permet de créer une animation.
Le nombre de couleurs est limité à 256 (8bits), généralement bien suffisant sur le WEB ... Il est même possible de réduire ce nombre à 16 ... dans le cas d'un logo par exemple, ce qui réduit d'autant le volume du fichier.
Le format GIF sera donc utilisé pour les petites images ne comportant pas trop de nuances, pour les icônes, les "titres", les "séparateurs"... enfin, la majorité des images sur le WEB !
Le "propriétaire" de ce format, UNISYS, envisage de demander une contribution à certains utilisateurs de ce codage, ce qui porterait, sans aucun doute, un coup fatal au format GIF !!! à suivre ...
Le format JPEG (JPG) a été développé par le Joint Photographic
Expert Group, basé sur une compression d'image par un algorithme
spécifique, qui accepte une certaine perte d'informations. Par contre,
le nombre de couleurs est de 65536 ... (16 bits). Ce format sera donc
utilisé pour les images "photographiques" qui demandent un grand nombre
de nuances : un paysage par exemple.
Ces images, bien que comprimées, risquent d'être encore trop encombrantes pour le réseau HamNet, il est alors possible d'utiliser un logiciel d'optimisation qui permet de réduire la dimension du fichier, tout en concervant une qualité d'image acceptable.
Vous trouverez ce logiciel sur le site de : xat.com
Dans tous les cas, que ce soit le format GIF, JPG ou autre ... il faut s'arranger pour limiter le volume du fichier à une dizaine de Ko au maximum (surtout s'il y a plusieurs images dans la même page !)
Ce coucher de soleil sur l'Ile de la Réunion, au format JPG, ne fait que
6 Ko ... L'organigramme de droite, au format GIF fait également un tout petit plus que 6Ko ...
C'est tout de même plus "parlant" qu'une longue explication !
Il est parfois difficile de choisir un format. Il faut alors faire une sauvegarde dans les deux, et vérifier quels sont les poids des fichiers obtenus.
Comment créer des images pour HamNET?
Pour insérer une image dans une page, il suffit d'entrer le tag : .<IMG
SCR="image.gif">
< ou ... <IMG SCR="img/image.gif"> si les images sont dans
le répertoire "IMG".
Il est également possible d'entrer des renseignements supplémentaires
pour placer l'image :
à droite : 
<IMG SCR="img/eyes.gif" ALIGN=RIGHT>
... ou à gauche : <IMG SCR="img/eyes.gif"
ALIGN=LEFT>
Pour les autres commandes (BORDER, WIDTH, HEIGHT, HSPACE, VSPACE, etc...)
il vaut mieux consulter la documentation HTML...
La meilleure solution pour placer les images et les textes au bon endroit dans la page, est de créer un tableau. Celui-ci sera composé de lignes et de colonnes qui produiront des cases, dans lesquelles il sera possible de placer les éléments choisis.
|
|
|
|
 |
|
|
La case n° 1 peut contenir une image et la case n°2 un commentaire par exemple... les bordures des cases peuvent être supprimées : (border=0)
le code HTML des 3 premières case sera le suivant :
| <TABLE width="75%" border="1" align="center" > <TR> <TD> <CENTER> case n°1 </CENTER> </TD> < TD><CENTER> case n°2 .</CENTER> </TD> <TD><CENTER> case n°3 .</CENTER> </TD> </TR> </TABLE> |
Pour créer des tableaux, il est tout de même plus pratique d'utiliser un logiciel d'édition HTML comme FrontPage, WebExpert, Dreamweaver... etc...
Un autre élément permet d'améliorer la présentation et la gestion des pages HTML sans trop augmenter la dimension du fichier : c'est JavaScript.
JavaScript est un langage de programmation développé par Netscape en 1995. Le nom de JavaScript a été choisi en raison de sa relation avec le langage JAVA développé par SUN-microsystems. Bien que ces deux langages portent des noms proches, ils sont très différents dans leur conception. JAVA est un langage compilé qui produit un code pour machine virtuelle (fichiers de classes) qui permet ensuite de fonctionner sur plusieurs types de machines : (PC, Mac, machines UNIX... ) et créer des applications complètes. JavaScript est un langage interprété qui est exécuté lignes par lignes par le navigateur.
Le logo de JAVA est une tasse de café ! ceci vient du fait que JAVA est une ile d'indonésie productrice de café... et en argot américain, le café se dit "java".
Pour
en savoir un peu plus sur JavaScript :
Où charger son site HamWeb ?
Si votre station est aussi un "serveur",
le site web sera chargé dans un répertoire du disque
de votre machine.
Pour une station "cliente" il faut faire héberger
son site, par un serveur du réseau HamNet local.
Il faut donc prendre contact avec le SysOp du serveur pour qu'il vous ouvre un répertoire avec autorisation d'écriture et création de sous-répertoires.
Généralement, les fichiers html sont dans le répertoire "racine" du site et les images sont chargées dans un sous-répertoire "img" (par exemple ! ).
La page d'accueil, qui est la première page de votre site, aura pour nom : index.htm
Le chargement se fera avec un utilitaire FTP (voir
les logiciels d'exploitations dans la page d'accueil)
ATTENTION :
Si votre serveur est sous UNIX (linux)
il vaut mieux mettre tous les noms de fichiers et de répertoires en
minuscules, car les OS UNIX font la différence
entre Img et img).
...Retour
à la page d'accueil