Vous l'avez peut-être remarqué, ce site a subis deux grands changements : un changement d'hébergeur et d'adresse, et un changement de thème.

Changement d'hébergement

Ce site est maintenant hébergé par 1&1, avec comme nom de domaine filyb.info. L'url d'accès direct au blog est filyb.info/dotclear. Le domaine possède également trois sous-domaines : jepense.filyb.info pour le blog Je pense dont j'ai déjà parlé, fsg3.filyb.info pour le wiki de fsg3 (le sous domaine est en cours d'enregistrement, il devrait être disponible d'ici peu) et arbre.filyb.info, pour un projet d'arbre généalogique dont je reparlerai plus tard.

Les flux RSS et ATOM (disponibles en bas à gauche) : RSS, RSS commentaires, ATOM et ATOM commentaires.

Sinon l'architecture du site n'a pas été fondamentalement changée, si ce n'est une redirection de la racine du serveur vers la page d'accueil bien plus efficace, et une page d'accueil remaniée, affichant notamment les derniers billets du blog.

Il s'agit du troisième changement d'hébergement de ce blog, et donc du quatrième site. Celui-ci devrait rester à la même adresse au moins trois ans, puisque c'est la durée de l'offre gratuite (maintenant terminée) d'hébergement de 1&1, et j'espère que le nom de domaine suivra si le blog doit encore changer d'adresse, plus tard...

Le seul problème demeure la redirection depuis thesa.serveurperso.com, car les redirections via un fichier .htaccess ne fonctionnent pas (problème de configuration du serveur ?) et j'ai donc placé quelques redirections php, mais c'est pas top.

Le nouveau thème

C'est à mon avis la principale nouveauté. Ce thème se nomme FilywintuL (ne me demandez pas pourquoi) et est donc le nouveau thème par défaut du blog. S'il ne vous plaît pas, vous pouvez toujours changer et utiliser les précédents avec les liens en bas de la page.

Ce thème est basé sur la photo Colonne Cathredal de Rodolfo Cartas, image sous contrat Creative Commons BY-SA (j'ai au passage découvert le site openphoto sur lequel on trouve pas mal de photos sous licences Creative Commons intéressantes).

Je précise à tout ceux à qui ça pourrait venir à l'idée : si j'ai pris une image de cathédrale, c'est pour l'architecture gothique, les lignes de l'images (c'est ça que je recherchait pour correspondre au décalage et à la superposition par transparence), et les couleurs, et non pour faire passer un quelconque message symbolique, je ne suis pas croyant. Et d'abord, je fais ce que je veux sur mon blog à moi.

La police des titres est Morpheus, une très belle police qui va bien avec l'architecture gothique, et qui est téléchargeable gratuitement. Cependant, le site est visible sans, mais ça rajoute un plus de l'avoir.

Petite nouveauté : certaines parties de la barre de gauche sont affichables/masquables. Elle sont signalées par un icône correspondant (sous les navigateurs capables d'afficher cet icône).

C'est de plus un thème liquide, ce qui signifie qu'il s'adapte tant aux basses qu'aux hautes résolutions (il passe très bien en 800*600, qui est ma résolution), et la police peut être agrandie sans problèmes.

Compatibilité du thème avec différents navigateurs

  • Mozilla Firefox 1.5 :

    capture d'écran du site sous Firefox

    Ce thème a été conçu sous Mozilla Firefox, et c'est dans ce navigateur qu'il s'affiche le mieux, à cause l'utilisation de la propriété css propriétaire -moz-border-radius (qui permet de faire des coins arrondis, faute de border-radius des css3 qui n'est pas implantée), notamment en bas de la barre de gauche. Les feuilles de styles ne sont donc pas valides (mais il n'y a aucune perte importante pour un navigateur autre que Mozilla Firefox supportant correctement les standards du W3C).

  • Konqueror 3.5 (passe le test acid2)

    Capture d'écran du site sous konqueror

    Konqueror, le navigateur censé être le plus conforme aux standards de ceux que j'ai (puisqu'il passe le test acid2) m'a tout de même présenté quelques très petits problèmes par rapport à Firefox : il affichait des rectangles derrières certains liens. Cela s'explique par la méthode que j'utilise pour afficher des images derrières les liens :

    Pour les liens externes, j'ai créé une règle css qui affiche une image derrière les liens commençant par http, et qui affiche l'image avec a[href^="http"]:after {content:url(...);}. Pour les urls commençant par http://filyb.info, qui ne devaient par êtres considérées comme des liens externes, j'avais ajouté : a[href^="http://filyb.info"]:after {content:"";}. Et là Konqueror affichait un rectangle. La solution consiste à ajouter entre les deux : a[href^="http://filyb.info"]:after {content:" ";} (un espace dans content). Les liens concernés seront suivis d'un espace sous konqueror, ce qui est quasiment invisible, et l'affichage sous Firefox ne change pas.

    Sinon, outre les bords arrondis, Konqueror affiche le champs de recherche d'une façon plus applicative, et sans l'image de fond. Cela n'est strictement pas gênant. Considérant que les moteurs html de safari et konqueror sont très proches, je suppose que le site s'affiche sous safari de la même façon que sous konqueror. Si vous trouvez un bug sous Safari, dites-le moi !

  • Opera 8.5

    Capture d'écran du site sous Opera

    Opera gère nettement moins bien les standards que les précédents navigateurs, notamment les sélecteurs css qui permettent d'afficher des images derrières les liens. Celles-ci ne sont donc pas disponibles sous opera. Sinon, j'ai eu quelques problèmes au niveau de la gestion de l'empilement des cadres (cadre de texte sous l'image en haut à gauche, liens non cliquables à cause de chevauchements de cadres, etc.). Tout cela c'est résolu à l'aide de propriétés z-index correctement placées.

  • Internet Explorer 6.0

    Capture d'écran du site sous Internet Explorer

    (Note aux utilisateurs de linux : ce site fait planter Internet Explorer non-émulé avec wine. Je vous conseille donc un des navigateurs ci-dessus :-) )

    Comme d'habitude, le site web, est franchement moins beau sous IE, même si il reste tout à fait lisible. Ma plus grande surprise fu qu'il affiche la transparence en blanc, ce qui finalement n'est pas plus mal (j'avais pensé à un damier en gif, mais finalement ça reste blanc). Le seul problème fut un bug Peekaboo, expliqué et solutionné en détail ici. Le bug faisait que les titres de billets n'étaient affichés qu'au passage de la souris, ce qui est gênant pour la lecture. Un ajout d'une propriété line-height a fixé cela, sauf que quand on passe la souris sur un titre de billet dans la zone transparent, le blanc disparaît pour laisser place au ciel. Cela ne gène pas la navigation, donc tant pis.

    Mais si vous voulez afficher ce site le mieux possible, disposer de toutes les fonctionnalités (transparence, images derrières les icônes), utilisez Mozilla Firefox, Konqueror ou Safari, voir Opera !

Bugs connus : il reste encore quelques problèmes, notamment la couleur des polices dans le calendrier sur la page d'accueil, des cadres autour des albums jamendo, et un texte qui déborde d'un cadre dans l'affichage des galeries. Cela sera réglé ultérieurement, si j'en ai envie.

Et merci au bouquin le zen des css, un aide précieuse pour faire tout cela...