Romain.info

Inspiration

Il serait malhonnête de prétendre que le layout de ce site est sorti tout droit de mon esprit pétillant à l'imagination sans bornes. Bien au contraire, je suis loin d'avoir le moindre talent graphique. Par contre, en piochant un peu ici et un peu là, en dépiotant les sources de diverses pages HTML, je me suis concocté un petit cocktail bien à moi.

Rendons à César ce qui lui appartient. Pour commencer j'ai été vraiment impressionné par la page d'accueil du créateur de CSSEdit (un logiciel pour faciliter l'élaboration de CSS). Vous devinerez sans peine ce qui m'a plu chez lui. Mais là où son design échoue littéralement avec Explorer 5.5 et 6.0 sous windows 2000 (et pas avec Mozilla 1.3 en revanche), j'ai réussi à régler ces problèmes de "compatibilité" entre un Explorer qui est plein de bugs et un Mozilla qui est plein de bonnes choses.

Et puis, il y a eu ma découverte de ce merveilleux petit menu uniquement conçu en CSS et créé par SimpleBits. Je l'ai à peine modifié pour m'en servir. J'ai hésité à me servir de ce menu en CSS de chez Clagnut, je le trouvais trop compliqué. Quant à ce modèle ultra efficace de chez Kalsey Consulting Group, je l'utilise déjà ailleurs.. Une fois décidé, il m'a juste fallu trouver un moyen pour que le lien actif se démarque des autres, et c'est en PHP que j'ai trouvé le salut.

HTML / PHP

Mes pages sauf (la page d'accueil) sont toutes bâties sur le même principe :

<?php 
			

			$titre="le titre";
			

			$description="les mots clefs";
			

			include ('../inc/entete.inc');
			

			include ('../inc/menu.inc');?>
			

			</div>
			

			

			<div class="centre">
			

			<p>Le contenu ici
			

			</div>
			

			

			<?php
			

			include ('../inc/pied.inc');
			

			?>

En définissant cette page, je précise ainsi avec la variable $titre quel sera le titre de cette page (qui apparaît à deux endroit si vous regardez bien), et j'en fais de même avec la variable $description qui contient elle les mots clefs qu'on peut apercevoir dans le tag <meta name="keywords" content="html, css, javascript, uniformite"> dans la section <head> de la source HTML de cette page.

Ensuite j'insère des composants que toutes ces pages ont en commun, à savoir l'entête (include ('../inc/entete.inc');), le menu (include ('../inc/menu.inc');), et le pied de page (include ('../inc/pied.inc');).

Cela me laisse au milieu un espace où j'insère le contenu spécifique à chaque page. Avantage principal, la modification d'un seul fichier (entete, menu ou pied) sera répercutée sur toutes les pages automatiquement.

Comme je le disais la page d'accueil (blog) est différente. Je ne rentrerai pas ici dans l'explication de ce qu'elle contient, moi-même je ne comprends pas tout, mais je me félicite que cela fonctionne. Son but est principalement de faire cohabiter un contenu mis à jour via Blogger, ainsi que les archives qui sont générées automatiquement, cela de manière transparente, en y intégrant un outil de recherche redoutablement rapide et efficace, et en utilisant PHP et XML.

Pour ceux qui seraient malgré tout intéressés à comprendre son fonctionnement, je vous réfère à mes sources : How to manage your site with Blogger, PHP, and XML. Je l'ai utilisé tel quel et cela fonctionne à merveille tel qu'illustré sur le présent site.

CSS

Le fichier CSS de ce site Internet permet de contrôler l'apparence de chaque page. Sans interprétation du fichier CSS par votre navigateur (c'est probablement le cas si vous utilisez Netscape 4 et consorts), voici à quoi cette présente page ressemble. Avouons que les feuilles de style rendent la vie plus agréable...

Je ne vais pas commencer à expliquer ici ce qu'elle contient et pourquoi je l'ai faite de la sorte. Ceux qui sont intéressés sont invités à m'écrire pour poser leurs questions. En revanche, je peux d'ores et déjà vous informer des différents bugs que j'ai rencontré, liés aux fureteurs, et si j'ai pu les contourner vous apprendrez comment.

Bugs IE/MAC

Les liens contenus dans un élement qui contient l'attribut : position: fixed; n'ont aucun effet visuel.: Le lien est toujours fonctionnel, mais les propriétés : hover, active, et visited ne sont pas honorées. C'est un bug connu d'Explorer 5 sur Macintosh.; Incontournable.
Mauvaise prise en charge de la transparence des images .PNG: Je ne blâme pas totalement Explorer ici. Je ne comprends pas tout aux canaux alpha des fichier .PNG, mais le fait est que sous Explorer, vous ne remarquerez pas que le fond de la barre de navigation est en fait semi-transparent, et qu'on distingue donc partiellement le contenu de la page lorsqu'il défile derrière celle ci. Et visuellement vous manquez un effet assez chouette je trouve. Le bug a déjà été remarqué ailleurs.

Bug IE/PC

IE ne comprend pas l'attribut : position:fixed

C'est un bug connu d'Explorer sous Windows. Tout élément qui a cet attribut se comporte comme n'importe quel autre élément de la page, et disparait donc de cette dernière dès qu'on en fait défiler le contenu. Gênant quand, comme ici, il s'agit de la barre de navigation du site.

Gênant, mais contournable. Pour commencer il faut ruser avec Explorer 5. Pour que notre élément (en l'occurence la barre de menu ici) reste en place lorsqu'on fait défiler notre page. Il faut qu'Explorer place cette barre de défilement verticale, non pas sur tout le document, mais uniquement sur la partie que nous souhaitons voir défiler. C'est à dire, du bas de notre barre de navigation jusqu'en bas de la page. On va donc définir une classe (div.contenu) qui va contenir tout ce qu'on souhaite voir défiler, et qui va se comporter différemment du reste du document..

body

  {

  overflow-y: hidden;

  margin: 0;

  padding: 0;

  }

div.contenu

  {

  height: 90%;

  overflow: auto;

  }

En fait, j'ai modifié une valeur par rapport à mon modèle, afin que la barre de défilement ainsi que le contenu de la page soient visibles dans leur intégralité. Au lieu d'avoir height= 100% j'ai indiqué 90%. La raison est toute simple. Sans cette précision, la barre de défilement ne s'affichait pas dans son intégralité puisqu'il manquait en bas les 80 pixels occupés par la barre de menu. Du coup, comme il manquait 80 pixels de document en bas, en affichant la barre de défilement sur seulement 90% du contenu de la page, cela règle le problème et ça ne se remarque (presque) pas. Dans les faits, si vous agrandissez la page, vous constaterez que la barre de défilement ne se rend pas jusqu'au bas de la page. C'est un petit compromis esthétique.

Nous avons sauvé cette mini feuille de style dans un nouveau document nommée : romain_ie5_pc.css pour la circonstance. Maintenant, nous voulons qu'IE sous windows aille lire ce fichier, et uniquement IE sous windows, parce que les autres fureteurs réagissent différemment. Il faudrait donc qu'il ne soit accédé en lecture que si le fureteur est une variante d'IE sous windows. Mais est-ce que c'est possible facilement ça ? Hé oui, grâce au "conditional comments". Ce petit hack permet de ne rendre certains éléments d'une page HTML ou CSS lisible qu'à IE sous windows. Dans notre page HTML, il a prit cette forme :

<!--[if IE]>

<link rel="stylesheet"

type="text/css"

href="romain_ie5_pc.css"

media="all">

<![endif]-->

En l'appelant après notre feuille de style principale, nous nous assurons qu'IE sous windows utilisera les dernières valeurs de notre feuille de style en écrasant celles qu'il avait lu précédemment.

Uniformité

J'ai fait tout ce qui était en mon pouvoir pour m'assurer que ce site aurait le même aspect quelle que soit la configuration que vous utilisiez. Et j'ai ratissé large. Il y a une foultitudes de petites différences cependant, les voici ici relevées en fonction de chaque fureteur testé (merci à Browsercam au passage) :

Fureteur : AOL
OS : windows 2000
Version : 7.0
Bug : Assez peu en fait. La barre de menu est partiellement occultée ce qui masque le titre su site et de la page. La barre de menu n'est pas transparente, ce qui implique que la transparence des fichiers.png n'est pas prise en compte.

Fureteur : Camino
OS : Macintosh
Version : 0.7
Bug : Aucun !

Fureteur : Internet Explorer
OS : windows 98
Version : 4.0
Bug : Mon dieu, par quoi commencer... Les dimensions des cadres ne sont pas respectées, l'attribut position: fixed n'est pas reconnu et comme cette version est antérieur à la version 5, le hack utilisé et expliqué plus haut est inefficace. De toute façon plus personne ne devrait utiliser ce vieux truc...

Fureteur : Internet Explorer
OS : windows 2000
Version : 5.0
Bug : Inutilisable, rien ne s'affiche sur la page à part le menu, et encore il est occulté en grande partie ! Désolé pour les 0,5% d'utilisateurs concernés, il est temps de mettre votre fureteur à jour.

Fureteur : Internet Explorer
OS : Macintosh
Version : 5.2
Bug : Deux bugs esthétiques. La barre de menu n'est pas semi transparente, car les .PNG ne sont donc pas correctement honorés (à moins que cela ne vienne de ma feuille de style ?). Du fait que la barre de menu à une image en fond d'écran, le menu n'est pas réactif lorsque la souris presse un lien, ou le survole.

Fureteur : Internet Explorer
OS : windows 2000
Version : 5.5
Bug : La barre de menu est partiellement occultée (un classique avec Explorer sous windows), et la transparence des fichiers .PNG n'est pas gérable lorsqu'ils sont intégrés (comme ici) dans les CSS.

Fureteur : Internet Explorer
OS : windows 2000
Version : 6.0
Bug : Exactement les mêmes bugs que la version 5.5, on se demande quelle est l'amélioration apportée à cette version...

Fureteur : Konqueror
OS : Linux
Version : 3.0.5
Bug : En vrac : encodage utf-8 non géré, ce qui fait qu'aucun caractère accentué n'est reconnu, transparence des .PNG non gérée, taille des pointillée impressionnante..., espace inutile entre les éléments de la barre de navigation, gros caractères du titre du site tous moches et crénelés.

Fureteur : Mozilla
OS : Linux
Version : 1.1
Bug : la barre de menu est tellement transparente qu'on ne distingue plus rien quand quelque chose passe derrière, car le cela se surimprime avec ce qu'elle contient.

Fureteur : Mozilla
OS : Macintosh
Version : 1.1
Bug : Aucun ! Apparemment la version 1.1 n'est pas la même sous Linux et sous Macintosh...

Fureteur : Mozilla
OS : windows 2000
Version : 1.1
Bug : Aucun ! Seul la version sous Linux de Mozilla semble avoir un problème.

Fureteur : Mozilla
OS : Linux
Version : 1.3
Bug : Même problème que la version 1.1 de Mozilla sous Linux...

Fureteur : Mozilla
OS : windows 2000
Version : 1.3
Bug : Aucun !

Fureteur : Netscape
OS : windows 2000
Version : 4.7.8
Bug : Ne gère pas les CSS

Fureteur : Netscape
OS : Linux
Version : 4.8
Bug : Ne gère pas les CSS...

Fureteur : Netscape
OS : Macintosh
Version : 4.8
Bug : Ne gère pas les CSS...

Fureteur : Netscape
OS : windows 2000
Version : 6.2
Bug : Aucun !

Fureteur : Netscape
OS : Linux
Version : 7.0
Bug : Aucun !

Fureteur : Netscape
OS : Macintosh
Version : 7.0
Bug : Aucun ! (si ce n'est que l'attribut active des liens de la CSS n'est semble t-il pas honoré)

Fureteur : Netscape
OS : windows 2000
Version : 7.0
Bug : Aucun !

Fureteur : Opera
OS : Macintosh
Version : 6.0
Bug : Plein ! La largeur des cadres n'est pas respectée, l'espacement entre les <div> non plus, à l'inverse il y a trop de marges hautes et basses dans la barre de menu, l'attribut active de ce dernier n'est pas visible, la marge inférieure sous l'onglet du menu qui est actif n'apparaît pas, la barre de menu est opaque et non transparente alors que le titre bien est transparent (?!)...

Fureteur : Opera
OS : windows 2000
Version : 6.0.5
Bug : Plein (mais pas nécessairement les mêmes que pour la version sous Macintosh) ! Le fond du cadre de la barre de navigation est complètement transparent ce qui rend cette dernière illisible par moment, espacement entre les <div> non respecté, largeur des cadres autour des images non plus, marges hautes et basses trop larges dans la barre de menu...

Fureteur : Safari
OS : Macintosh OS X (uniquement)
Version :
Bug : Aucun ! Ça aurait été surprenant, c'est sur ce fureteur que j'ai développé le présent site. Il est tellement proche des standards qu'il est une excellente référence.

Ancien design

Pour ceux qui voudraient voir à quoi ressemblait ce site avant et de quoi il avait l'air selon les fureteurs, voici un espace qui va vous intéresser. Sinon, pour les autres, ce ne sont rien que des vieilleries qui ne méritent pas d'être dépoussiérées.

Fureteur : Safari
OS : Mac OS 10.2.3
Version : 1.0 Beta (v51)
Commentaire : Excellent rendu de la feuille de style, n'intègre pas encore toutes les subtilités telle que les attributs <abbr> et <acronym>.

Fureteur : Navigator/Chimera
OS : Mac OS 10.2.3
Version : 0.6 Révision : 2002122004
Commentaire : Excellent rendu de la feuille des style, police un peu petite à l'écran parfois. Bug visuel lors du défilement de la page, le menu de droite semble apparaître plusieurs fois. Esthétiquement gênant, mais pas de perte de fonctionnalité.

Fureteur : Explorer
OS : Mac OS 10.2.3
Version : 5.2.2 (5010.1)
Commentaire : Excellent rendu de la feuille des style, bien plus respectueux de ces dernières que ne peuvent l'être les versions pour Windows, police de caractère un peu trop grosse à l'écran cependant. Aucune modification de la couleur des liens du menu de gauche au passage de la souris ou en cliquant dessus.

Fureteur : Explorer
OS : Windows 98
Version : inconnue
Commentaire : On remarquera dans le premier paragraphe que l'attribut <abbr> n'est pas interprété. Le terme "CSS" devrait apparaître souligné et la définition de cette abbréviation est sensée apparaître lorsqu'on passe la souris au dessus de ce terme. Merci à Bernard pour cette copie d'écran.

Fureteur : Galeon
OS : Mandrake 8.2
Version : 1.2.5, thème 'Aquatic'.
Commentaire : Galeon est un autre fureteur basé sur le noyau Gecko (moteur de rendu développé par Mozilla), comme peut l'être Safari sur Mac OS 10. Et sans grande surprise, en étant basé sur le même noyau, on constate le même rendu. Ici l'originalité -si on peut dire- vient du fait que c'est la première copie d'écran obtenue provenant de Linux. Il n'y a aucun problème de rendu sur les page qu'on ne pourrait constater avec un autre moteur Gecko. Merci à Gregory pour ces copies d'écrans.