lundi 28 septembre 2009

Des pages HTML poids-plume



A l’époque glorieuse de l’apparition des premiers sites Internet, il vous est probablement arrivé de pester contre la lenteur d’affichage de certaines pages à l’architecture massive lestée par des arrière-plans graphiques aux effets douteux et aux justifications de textes et de tableaux en dépit du bon sens. Les éditeurs de sites ont beaucoup progressé dans leurs techniques d’édification des pages.

Pour ceux qui se lancent dans l’aventure, il est bon de comprendre que les internautes n’ont pas tous les mêmes résolutions d’écran et des débits réseau identiques aux vôtres. Les rapidités d’affichage de vos pages et leurs présentations sur leurs écrans ne seront pas comparables. Le grand principe de départ est de choisir, avant de créer une page, une largeur compromis et d'utiliser les méthodes d’affichage les plus rapides possibles. Actuellement une résolution d’écran de 1024x768 pixels est possible sur la plupart des machines de vos visiteurs. Ainsi, choisir une largeur de feuille de lecture entre 800 et 1024 pixels est un bon principe pour éviter que le visiteur jongle avec la barre de défilement horizontale pour sa consultation. Les largeur et hauteur du fond d'écran, elles, s’adapteront aux moniteurs des visiteurs sans anomalies si vous avez choisi de proposer un fond monochrome. Par contre, si vous voulez agrémenter vos pages d’un motif ou d’une texture de fond personnalisés, il vous faut connaître quelques principes de base et quelques ficelles.


Principes de base :

1 - Les tableaux sont la cheville ouvrière des pages HTML bien faites. Il faut impérativement les centrer horizontalement pour que votre espace de rédaction soit affiché lui aussi centré horizontalement sur l'écran du visiteur quelle que soit sa résolution.

2 – Si vous n’insérez pas vos blocs de textes dans les cellules des tableaux, leurs présentations vont varier en largeur et hauteur selon les résolutions d’écrans des visiteurs: c’est moche, surtout si ces textes habillent des d’images qui vont se dénuder ou s'emmitoufler selon les cas !

3 – N’utilisez pas d'arrière-plans faits d’images JPEG de grande taille, répétées ou non. Le résultat, en plus d’être souvent affreux, allonge considérablement les affichages et amènent des défilements verticaux épileptogènes !

Oui... mais je veux quand même un fond de page sortant de l’ordinaire et créer un défilant central aux angles arrondis (par exemple) et avec des hyperliens affichés dans des boutons de navigation originaux que je veux loger où bon me semble sur ma page. Il existe effectivement quelques trucs.

Les trucs :

1 - Il faut commencer par vous confectionner un kit de textures à partir d'images GIF ou PNG de très petite taille. Ces formats d’images permettent les transparences de fond nécessaires aux effets que vous avez souhaité produire pour me contrarier. A noter que le format GIF permet d'obtenir des fichiers de tailles inférieures à celles du format PNG mais ont des palettes de couleurs limitées. Le travail va se faire dans un logiciel de conception graphique. Vous y créez d’abord les formes géométriques à l’identique de celles que vous voulez afficher sur vos pages. Bien entendu, vous n’allez pas les insérer directement dans les cellules de vos tableaux, en tant que fond ou image, sinon, le problème évoqué plus haut persiste. Voir le kit exemple utilisé pour mon didacticiel: image du haut de billet à agrandir.

2 – Pour créer les effets de coins arrondis de haut et bas de page ou pour certains de ses secteurs, vous ne faites qu’une découpe de faible hauteur (le rayon de l'arrondi dans cet exemple) des haut et bas des formes créées plus tôt pour les inclure ensuite dans les cellules ad hoc du tableau canevas.

3 – Vos textures seront réalisées uniquement à base d'une ligne horizontale ou verticale d’une épaisseur de quelques pixels (un pixel suffit souvent), permettant des ouvertures de pages éclairs. Elles sont découpées dans les formes créées dans votre éditeur graphique ou simplement obtenues en redimensionnant votre image aux largeurs ou hauteurs évoquées. Ces « lignes » seront répétées horizontalement ou verticalement en le spécifiant dans votre éditeur HTML, recréant ainsi les effets de textures des fonds initiaux à répartir correctement sur les fonds des cellules concernées du tableau canevas. Voir l'image du tableau exemple ci-dessus que vous pouvez agrandir.

Un exemple valant mieux qu’un long discours, qui plus est assez confus, partez vers ce lien où je présente deux créations personnelles employant ces méthodes, mini diaporama HTML et page style blog dont les rapidités d’ouverture ne sont grevées que par le temps d’affichage des images JPG crées en même temps dans mon éditeur graphique. C'est vrai, pendant que j'y étais !

Lien vers l'exemple style acier
Lien vers l'exemple style marbre

NB: Vous pouvez enregistrer mes pages dans vos navigateurs pour vous en servir, mieux comprendre la technique dans un éditeur ou les adapter à vos besoins. L'image 2 du premier exemple est le fond d'écran du moment du portable de la Mansarde: précision d'une importance capitale...

3 commentaires:

  1. Comment fait-on pour obtenir des fonds transparents pour les images au format GIF? A chaque fois j'obtiens un fond de couleur...

    RépondreSupprimer
  2. Laurent> votre logiciel de dessin propose sans doute de sauver votre œuvre avec une transparence d'index ou de choisir la couleur de transparence de sauvegarde. La meilleure technique consiste à travailler vos dessins sur un fond de couleur uniforme proche de celui de votre page pour ne pas avoir de surprises avec des pixels de frange de dessins inesthétiques qui tranchent sur des fonds d'une autre couleur. Les fonds de page étant souvent blancs, ce sont les pixels foncés qui sont incriminée. Ensuite demander une transparence d'index ou choisissez la couleur de fond comme étant celle de transparence. Attention avec cette dernière méthode, si des points du dessin ont exactement la même couleur, ils vont disparaître aussi. L'outil gomme est royal pour enlever d'éventuels pixels parasites.

    RépondreSupprimer
  3. Merci pour ces explications pour obtenir des fonds transparents. Ballot de créer des arrondis sur fond opaques et qui plus est de couleur différente de la page. Effectivement, la gomme est utile pour ébarber les contours et obtenir un rendu propre.

    RépondreSupprimer

Commentaire de :