Glabageddon - Ecrasez-les tous !


A propos de ce site

HTML et CSS

J'ai pris le parti de construire ce site avec uniquement du html4 et des css (cascade style sheets : feuilles de style en cascade). Toutes les pages sont en html 4.01 strict, validées par la w3c (http://validator.w3.org)
L'utilisation d'une css qui contient les règles d'affichage (la forme), alors que le contenu réel du site se trouve dans les fichiers HTML (le fond) a l'énorme avantage de permettre la modification de l'apparence de certains paragraphes en changeant uniquement leur règle d'affichage dans le fichier css, ces modifications se répercutant alors dans tous les fichiers HTML s'y référant.

Vous aurez remarqué que chaque page du site a la même structure :

 ___________________________________________________
|   Bande  titre : Glabageddon - Ecrasez les tous   |
|---------------------------------------------------|
|      | en option : un menu local (liens int. page)|
| menu |             TITRE DE LA PAGE               |
|      |                                            | 
| géné-|                                            | 
| ral  |                                            | 
|      |                                            | 
|      |                                            | 
|      |                                            | 
|      |               Corps                        | 
|      |                                            | 
|      |                                            | 
|      |                                            | 
|      |                                            | 
|      |                                            | 
|      |                                            | 
|      |                                            | 
|      |                                            | 
|      |                                            | 
|      |                                            | 
|      |                                            | 
|---------------------------------------------------| 
| menu |                                            | 
| gén. | bandeau du bas : menu local (liens int.)   | 
| bas  |                  ou rubrique voir aussi    |
 ---------------------------------------------------
  

L'"originalité" étant de réserver une bande gauche sur toute la hauteur de la page pour le menu général, les deux dernières options étant déportées en bas de page ; le tout SANS utiliser de tableau ni de frame. La gestion en est facile : un simple copier-coller de quelques lignes suffit pour remodeler le menu, ce qui aurait été ingérable en utilisant un tableau contenant toutes les information de la page (ce qui en soit est source de multitudes de difficultés), le menu général étant un tableau contenu dans une cellule, le corps dans une autre, ce qui devient vite très lourd et inextricable.

SSI

Les SSI (Server Side Include) sont des directives apparaissant dans un texte html en commentaire, reconnues et décodées à la volée par le serveur hébergeant les pages html, ces directives étant remplacées par du bon code html valide.

Intérêts

Inconvénients

Pour un site n'existant pas encore, il est vraiment très intéressant de l'écrire en utilisant des ssi ; on peut par exemple inclure, avec une seule ligne ssi, le menu général qui se retrouvera sur toutes les pages du site. Il suffira ensuite de modifier UN SEUL fichier, pour que le nouveau menu s'affiche actualisé dans toutes les pages !!!

En ce qui concerne le "basculement" d'un site existant, voici comment je m'y suis pris :


Pour en savoir (beaucoup) plus sur les SSI :

Accessibilité

L'accessibilité d'un site n'est pas une affaire de goût personnel ou de considérations purement subjectives, mais définie par la W3C ici http://www.w3.org/TR/WAI-WEBCONTENT réglementée par 14 directives déclinée en 65 règles, ayant une priorité de 1 à 3 ; un site respectant toutes les règles de priorité 1 pouvant recevoir un label de conformité "A", celui respectant toutes les règles un label "AAA".

Pour ce site je me suis contenté de suivre quelques règles simples qui lui assurent une bonne accessibilité :

  1. Toutes les pages sont écrites en html (4.01 strict) seul. Les dites pages sont ensuite visualisées avec un bête navigateur -netscape 4 par exemple- afin de vérifiée leur lisibilité. Pas de css, javascript ou autre saupoudrage : HTML seul
  2. Ecriture de css afin de présenter plus joliment les choses, placer les éléments, etc...
  3. Eventuellement modifier légèrement le html de base avec span, p et div associés à class ou id pour pouvoir cibler quelques éléments avec une css spécialisée.
  4. Ne pas oublier de passer aux validateurs html et css

Voilà c'est pas compliqué !

Ah, ce n'est pas tout ! Voici quelques règles auxquelles il ne faut pas déroger pendant la frappe au km du html :

Exemples

Barre de navigation

Les barres de navigation s'écrivent très simplement ; par exemple pour ce qui concerne cette page :

 
<div class="menulocal">
<p class="menu6">
  <a href="#html_css">HTML et CSS</a>
  <a href="#ssi">SSI</a>
  <a href="#accessibilite">Accessibilité</a>
  <a href="#nav">Navigateurs</a>
  <a href="#etatlieux">Etat des lieux</a>
  <a href="#insultron">Insultron</a>
</p>
</div>
  

C'est la classe css "menulocal" qui va s'occuper de placer et mettre en forme les liens dans une barre de navigation. Non seulement le html est très simple (à écrire et à maintenir) mais il est "lisible" par un navigateur sans css.

Menus

Si vous désirez un menu général, tout aussi simplement écrit en html, mais qui s'affiche à un endroit fixe de l'écran, même en cas de scrolling, un peu comme une frame, allez voir cet exemple : www.w3.org/Style/Examples/007/. Je m'en suis très fortement inspiré pour mes propres menus (j'ai tout pompé quoi), mais ai du renoncé à la fixité du menu, IE5 digérant très très mal un tel affichage.

J'ai testé les pages de ce site avec les navigateurs suivants (win9.x) :

Je n'y ai pas vu d'anomalies flagrantes (n'hésitez pas à m'en signaler). Envoyez-moi vos observations et conseils, j'en ferai bon usage.

Internet Explorer 5

Tout juste passable, IE5 a parfois des comportements imprévisibles avec les css de placement comme avec l'attribut float et surtout display:fixed.
IE6 est à peine meilleur pour ce qui concerne les css2.

Opera 5

Disponible ici : www.opera.com
Opera 5 est maintenant complètement gratuit, moyennant l'affichage d'un petit carré publicitaire. En version enregistrée, la pub disparait.
Ces principales forces : il est très léger, très rapide, respectueux des normes de la W3C, a un bon support des css, et une prévisualisation avant impression très utile.
Les specs de Opera : http://www.opera.com/docs/specs/
Opera en est à la version 6.04 en français.
Opera 6 n'apporte pas grand chose de nouveau, si ce n'est qu'il est plus lent (?)

Mozilla

Mozilla est le projet ouvert qui réécrit Netscape à partir de zéro. Le dernier Netscape 6 qui en est issu en est une belle illustration, même s'il souffre de bugs dus à une sortie précipitée. Netscape 6 devrait plutôt s'appeler Mozilla 0.x, car il n'est pas le successeur de Netscape 4.x et ne supporte pas les technologies propriétaires hors-norme de celui-ci.
Mozilla peut donc être identifié à Netscape 6 ; cependant Mozilla est en avance sur ce dernier, moins bogué, et diffuse des informations et binaires chaque jour : http://mozillazine-fr.org/quoideneuf.phtml
Mozilla est la référence pour ce qui est du support des css.

Il n'y a aucune raison de se priver de ces deux derniers navigateurs qui sont de plus respectueux des lieux où on les installe.
Netscape 6.2 est basé sur la version 0.9.4 de Mozilla ; le produit est beaucoup plus abouti que le 6.0. La version 7 basée sur Mozilla 1 devrait sortir fin août 2002.
Si vous n'êtes pas anglophobe, vous préférerez Mozilla 1, plus rapide, plus léger, débarrassé des aoleries et plus fini. (La version française est en cours de traduction).

Netscape 4.x

Vous utilisez Netscape 4. ? Aïe, aïe, aïe ! Ce navigateur, très vieux maintenant, est archi bugué en ce qui concerne les css. C'est vraiment le dernier de la classe. Les liens des menus des pages de ce site ne sont même pas cliquables ! Ici pas d'alternative : désactiver les css.

Etat des lieux

Le site s'est bien rempli !

Ci-dessous, je ne passe en revue que les pages nettement incomplètes ; pour les ajouts récents, allez voir les news du sommaire.

Que cela ne vous empêche pas de m'envoyer vos articles ou commentaire pour une page quelconque !

Soluces

Beaucoup est fait.
Il n'y a que la soluce de la mission 5M2 à écrire.

Route des extras

La route des extras permet, sans trop s'éloigner du chemin "naturel" de cueillir au passage les extras du parcours, que ce soit pour une mission ou une course.
Beaucoup à écrire : seules (et toutes) les routes des extras du premier monde "Hollowood" et du troisième "Les Docks" sont disponibles.
Voir en exemple Route des extras 1M1.

Voitures (Cars)

La liste complète est donnée, avec un descriptif des caractéristiques et une photo.
Faudrait tester ces voitures pour ajouter un commentaire.

Trucs (tips)

Je suis preneur de tous les trucs, dans l'esprit de ceux figurant dans cette page.

Triche (cheat)

Il y a beaucoup de codes triche à essayer. Avis aux expérimentateurs !

Clichés (Screenshots)

Voir le commentaire se trouvant sur cette page Paparazzi pas très remplie. Envoyez-moi vos photos

Polémique

Voir le commentaire se trouvant sur cette page. Envoyez-moi vos analyses.

Liens (Links)

En travaux actuellement (complètement oublié !)


Ça y est, vous êtes décidé à participer à cette grande aventure, vous voulez voir votre glorieux nom en signature d'un article sur ce site : envoyez-moi vos textes, graphiques voire même une page toute prête.
Je me réserve le droit de modifier les textes (orthographe, grammaire, etc) en accord avec l'auteur.

Merci par avance.
Je vous embrasse (virtuellement) partout.

Insultes

C'est un scandale !
Vous ne trouvez plus vos mots tant ce site vous dégoûte, par sa présentation, le sujet traité, l'incompétence glagrante de son Webmaster ; vous en bafouillez, ivre de rage, il vous faut exprimer votre nausée en m'envoyant une lettre d'insultes !

Pas de problème, cette adresse est pour vous : http://richard.geneva-link.ch/insultron.html.

Joyeuses pâques !


glab