Lignes Alternatives - charte graphique


Charte graphique ou "Faites le vous-même" Version 1.3 du 20/10/1999 Auteur : Jean-Marc B Cette page a pour but de vous expliquer comment mettre en page vous-même votre article et constitue un exemple réutilisable. Sommaire Avant propos Par où commencer? Il va falloir écrire... C'est bientôt fini? Un peu terne tout ça! Un peu de technique Avant propos Si vous lisez cette page, c'est que vous voulez mettre votre article en page vous-même. Il vous faudra alors télécharger les différentes pages types (un peu plus de 100Ko) puis aller les remplir avec votre prose selon les quelques règles ci-après rappelées. Pour ceusses que ça intéresse, j'ai mis des "caractéristiques techniques" plus complètes un peu plus bas. Quoi qu'il en soit, inutile de trop vous embêter avec ça, car la rédaction va de toute façon relire votre article et le corriger, le cas échéant, avant de le publier. Par où commencer? Le titre de la page est à modifier en fonction de l'article. Il faudrait que le nom de l'OS traité apparaisse (par exemple, Les outils bureautiques sous Linux), ainsi le référencement de la page aura plus de pertinence. Le titre de l'article et un éventuel sous-titre sont alors à placer. Si le titre est plutôt ésotérique, profitez du sous-titre pour préciser votre pensée. Inversement, si vous avez un titre sérieux, laissez vous aller avec le sous-titre. Ensuite, séparés du titre par une barre courte, viennent la version et la date (indispensables, certains articles étant amenés à être mis à jour), puis l'auteur avec un lien (éventuel) sur le pied de page et une (éventuelle) présentation. Ensuite, le bandeau, qui est une présentation succincte destinée à accrocher vos lecteurs (inutile de vous précisez que c'est un point à soigner particulièrement) est placé entre 2 séparateurs longs. Enfin, le sommaire (avec des liens vers les différents paragraphes de votre article), obligatoire si vous avez un texte long. Evidemment, si votre article tient sur 20 lignes, il n'est pas franchement indispensable... ;-) Je ne saurais que trop vous conseiller de vous limiter à 2 niveaux de titres (chapitres et sous-chapitres) pour ce sommaire afin d'éviter qu'il ne soit trop long. Par ailleurs, il sera mis en place des balises META pour les moteurs de recherche. La description de la page est laissée libre. Par contre, au niveau des mots-clés, nous utiliserons une liste du type: Lignes Alternatives, [1-3 mots-clés issus du titre de l'article], [système] (Amiga, BeOS ou Linux), [1-4 mots-clés secondaires] pour définir l'article (test, tutoriel, comparatif, etc.) et pour mieux préciser son contenu. Il va falloir écrire... Maintenant que nous avons la tête et le squelette, il faut le corps, i.e. l'article. A ce niveau, pas de remarque particulière. Je me permettrai néanmoins ces quelques rappels: les citations ou expressions particulières sont à mettre en italique et entre guillemets, les points importants sont à mettre en gras, les commandes informatiques et les chemins d'accès sont mieux rendus en police à chasse fixe (courrier), essayez d'éviter les textes en couleurs. C'est bientôt fini? Pour finir, si vous le souhaitez, vous pouvez ajouter votre présentation en pied de page. Ainsi, nos milliards de lecteurs (si pas plus) sauront qui vous êtes. Ce sera donc l'occasion de faire un peu de pub pour votre site ou votre boîte aux lettres. Attention: hors de question d'en profiter pour faire de la pub commerciale. En d'autres termes, vous faites des liens vers votre page et email personnels uniquement. Un peu terne tout ça! Nous avons maintenant, tous les textes mais ça manque passablement de couleurs. Or, comme vous l'avez peut-être remarqué, on a en plus essayé de faire joli et d'obtenir une page qui sera idéale sur un écran 800x600, milliers (ou millions) de couleurs. Il faudra donc penser à ajouter l'icône d'OS adéquate (boing.png pour l'Amiga, beos.png pour BeOS ou tux.png pour Linux) en haut à gauche du titre (du même coup, on la fait disparaitre de la barre de navigation latérale), et choisir l'image de fond en rapport avec votre article (bg_boing.png pour l'Amiga, bg_beos.png pour BeOS ou bg_tux.png* pour Linux).* Par ailleurs, utilisez donc le séparateur long ci dessous pour couper vos chapitres... et ce séparateur court pour couper vos sous-chapitres... et ce petit séparateur en fonction des besoins... Evidemment, si vous en avez un joli (créé par vous et en rapport avec l'article), n'hésitez pas à vous en servir à la place. Seule contrainte: pas plus de 600 pixels de large et en format PNG ou JPEG (pas de GIF!). Enfin, n'hésitez pas à agrémenter de dessins, schémas ou copies d'écrans pour améliorer l'esthétique et faciliter la lecture de votre article. La contrainte de 600 pixels de large au maximum reste valable. Par ailleurs, faites un bon traitement de votre image (ni trop lourde à charger, ni trop dégradée) et choisissez le bon format (PNG ou JPEG, pas de GIF) afin d'optimiser la page (si ce point vous pose problème, envoyez l'image brute à la rédaction qui se chargera du traitement). Ce site n'utilise pratiquement plus de GIF à cause du brevet que possède Unisys sur l'algorithme de compression utilisé. Le format préconisé pour les images indexées (i.e. avec palette) est désormais le PNG qui a bien plus de possibilités (cf. http://www.cdrom.com/pub/png/ pour plus de précisions sur ce format et ses nombreuses possibilités. Un peu de technique Les différentes pages de ce journal ont été créées sous éditeur de texte d'où une certaine facilité pour les relire. Voici quelques indications plus techniques pour vous aider à vous y retrouver dans la mise en page. Les pages sont faites en norme HTML 3.2 qui est un bon compromis entre possibilités pour le rédacteur et ouverture vers les browsers plus anciens. Nous utilisons des balises META pour l'indexation dans les moteurs de recherche. Dans le cas d'un article sur un soft de dessin (appelons le Croquis) sous Amiga, on aurait alors (ce n'est qu'un exemple): <META NAME="keywords" CONTENT="Lignes Alternatives,Croquis,Amiga,test,dessin,bitmap"> <META NAME="description" CONTENT="Test de Croquis, le logiciel de dessin bitmap sur Amiga."> La taille de police de base est 3, le fond est blanc, le texte est en noir et les couleurs de lien fixées; ces points ne doivent pas être modifiés. Par contre, vous pourrez changer l'image de fond pour la mettre en rapport avec votre article (bg_boing.png pour Amiga, bg_beos.png pour BeOS, bg_tux.png pour Linux): <BODY BACKGROUND="../pics/bg_linux.png" BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080" ALINK="#800080"> <BASEFONT SIZE=3> Le corps de la page est placé dans un tableau avec un bord à 0. Ce tableau sert à faire la mise en page et ne doit pas être modifié. La zone éditable (où vous mettrez votre article) est placée entre deux lignes de commentaires avec des étoiles. En entête de page, il faut insérer l'icône du système concerné (boing.png pour Amiga, beos.png pour BeOS, tux.png pour Linux) à gauche de l'image de titre. Elle va pointer sur le répertoire de l'OS: <A HREF="../linux/index.html"> <IMG SRC="../pics/linux.png" ALT="Linux" WIDTH="84" HEIGHT="100" BORDER="0"> </A> L'image "Lignes Alternatives", quant à elle, pointe toujours sur l'index du site. Comme l'icône du système a été placée tout en haut, il faut penser à la supprimer de la barre de navigation latérale un peu plus bas: <!-- <A HREF="../linux/index.html"><IMG SRC="../pics/linux.png" ALT="Linux" WIDTH="84" HEIGHT="100" BORDER="0"></A><BR> <IMG SRC="../pics/dot_trans.png" WIDTH="84" HEIGHT="10" BORDER="0"><BR> --> Les deux séparateurs (long et court) se placent centrés grâce aux commandes suivantes: <CENTER><IMG SRC="../pics/hr.jpg" WIDTH="500" HEIGHT="2" BORDER="0"></CENTER> <CENTER><IMG SRC="../pics/hr.jpg" WIDTH="200" HEIGHT="2" BORDER="0"></CENTER> Le long devrait être utilisé pour séparer les chapitres et le court est destiné aux sous-chapitres. Il vaut mieux centrer vos images: en effet, lorsqu'elles sont alignées à gauche ou à droite, le texte qui se positionnera par rapport à elles risque d'être mal rendu selon que l'écran est plus ou moins large. Quoi qu'il en soit, gardez à l'esprit que la mise en page doit être idéale en 800x600. Typographie en fonction de la zone ou du type d'information: titre de l'article: H1, centré sous-titre (s'il y en a un): taille de base, gras et italique, centré version-date/auteur: taille de base, auteur en gras, centré bandeau: taille de base +1, gras, aligné à gauche sommaire (éventuel): taille de base, gras ou italique au besoin titres des chapitres: H2, souligné, aligné à gauche (ou bien H3 si pas de sous-chapitres) titres des sous-chapitres: H3, souligné, aligné à gauche titres des paragraphes inférieurs: laissés au choix (mais taille inférieure ou égale à H3) lignes de commandes et chemins/répertoires: taille de base, police à chasse fixe TT citations ou expressions particulières: taille de base, italique (et guillemets) mise en valeur: taille de base, gras auteur (en bas de page): H3, italique Victor Hugo La présentation de l'auteur, c'est là... enfin ce sera là parce que dans le cas présent, c'est juste un exemple. Elle est bien entendu facultative. Email : victor.hugo@miserables.org Web : http://www.notre-dame-de-paris.fr

Index \| News \| Amiga \| BeOS \| Linux \| Liens (c)1999-2000, Lignes Alternatives