The trashiest blog in the World...

Aller au contenu | Aller au menu | Aller à la recherche

WebLand

Le plat pays qui est le mien... Bloguons un peu sur le web et ses standards :-)

Fil des billets - Fil des commentaires

dimanche 4 septembre 2011

Galette : la cuisine continue !

Tout est dans le titre. Merci de m'avoir lu.

Non, mais je plaisante ; je vais développer un peu tout de même ;-)
Je ne sais trop par où commencer...

cooking_galette.jpg

Design

Le design de Galette a pas mal changé depuis que je suis aux commandes ; et je me suis décidé récemment à laisser tomber le rendu XHTML (et les nombreux problèmes qu'il a pu engendrer sur Galette) pour HTML5. J'ai ainsi pu utiliser les nouveautés de HTML5, notamment en ce qui concerne la gestion des formulaires (champs requis, ...).

Pour vous donner une idée, voici un aperçu avant (0.63.3)/après (0.7) des pages d'authentification et d'enregistrement : Login Galette 0.63.3 vs 0.7

Enregistrement Galette 0.63.3 vs 0.7

Vous pouvez souhaiter voir la comparaison complète pour la page d'enregistrement.

L'actuel thème de Galette est compatible avec la majorité des navigateurs récents (Firefox, Chromium, Epiphany, Internet Explorer 9, ...).

Fonctionnalités

L'un des ajouts les plus récents concerne la mise en place d'un historique des E-Mailings envoyés aux adhérents, et la possibilité de les réutiliser comme modèle :-) Le travail est encore en cours, il n'est actuellement pas encore possible de modifier les destinataires par exemple... Pas très pratique me direz-vous, et vous aurez raison ; mais c'est en bonne voie ;-)

Une autre modification relativement importante concerne la gestion des transactions. Il est désormais possible, depuis une transaction, d'adjoindre une contribution existante (en profitant pleinement des possibilités de la liste des contributions) ou d'en créer une nouvelle. Jusque maintenant, on pouvait uniquement créer une nouvelle contribution juste après la saisie d'une nouvelle transaction, sans ajouts ultérieur possibles.

Documentation

Outre quelques ajustements du côté de la documentation d'installation, deux choses à noter :

  • le début de rédaction d'une documentation utilisateur (sont traités les champs dynamiques, la traduction de libellés, et le textes des courriels envoyés),
  • la refonte de la page d'accueil pour la rendre un peu plus sympathique :-p

Nouvelle page d'accueil de la documentation Galette

Base de données

Courant juillet, je me suis rendu compte que le framework de bases de données que j'avais choisi il y a quelques années, MDB2, n'était plus vraiment actif. En effet, la dernière version stable (2.4.1) date de 2007 ; et la dernière version de développement (2.5beta) de 2010. MDB2-2.4.1 n'est pas compatible PHP 5.3, je me suis donc décidé à passer en 2.5.0b3 (beta). Oui mais voilà : toutes les requêtes préparées de Galette échouaient, et silencieusement ; ce qui a rapidement causé des bogues très difficiles à tracer et à résoudre..

La coupe était pleine !

Ayant récemment découvert le fait que la partie Db du Zend Framework était utilisable sans avoir recours à l'intégralité du framework lui-même ; mon choix était fait. Une branche a été créée pour effectuer la migration. 2 semaines et demie et environ 180 commits plus tard ; la branche était mergée avec le trunk : Galette est désormais gérée par Zend.

J'ai profité de cette migration pour définitivement exclure les bouts de code qui utilisaient encore et toujours Adodb ; et aussi pour passer certains aspects du logiciel en POO.

Il s'agit d'une modification fort importante, qui a nécessité de récrire une grande partie du code existant ; bien qu'invisible pour l'utilisateur final.

Tester !

Si vous souhaitez tester Galette, j'ai récemment mis en place une archive mise à jour quotidiennement depuis le dépôt SVN :
http://download.tuxfamily.org/galette/galette-0.7-dev.tar.bz2

Cette fois, je peux vous dire merci de m'avoir lu, sans avoir à me reprendre :-p

Bon appétit !

dimanche 17 juillet 2011

Galette : version de développement et documentation

Depuis quelques années, je suis le mainteneur de Galette, un logiciel libre de gestion d'adhérents et de cotisations en ligne à destination des associations.

Beaucoup de travail a été effectué sur le logiciel, mais de gros chantiers ont été entamés, et pas mal de péripéties (pas forcément en rapport) ont fait que les versions stables du projet n'avancent pas des masses (j'avais notamment cessé tout développement sur le projet pendant 15 mois, pour ne reprendre que récemment) :-(

Version de développement de Galette

De nombreuses fonctionnalités ont dores et déjà été ajoutées, notamment un système de plugins qui devrait à terme permettre de proposer de nouveau une version de Galette pour les associations sportives, ou encore les associations automobiles !

Cette version de développement devrait être aujourd'hui relativement utilisable, j'ai récemment corrigé pas mal de bogues qui ont été mis en évidence par les tests qu' a effectués Roland, un gentil utilisateur de Galette... Seulement voilà, la seule solution pour tester la version de développement de Galette, c'est de la récupérer via le dépôt SVN... Je dis « relativement utilisable », car je n'ai pas l'occasion de tester l'intégralité des fonctionnalités régulièrement, et il m'est impossible de savoir ce que ça peut donner chez divers hébergeurs ; des bogues peuvent donc subsister.

J'ai donc mis en place récemment un système de « nigthly » ; qui met à disposition quotidiennement (à 0h30) cette version de développement sous forme d'archive à télécharger ; disponible à l'adresse :
http://download.tuxfamily.org/galette/galette-0.7-dev.tar.bz2

Pour les utilisateurs de Fedora, j'ai également mis à disposition un RPM de Galette 0.7 via mon dépôt personnel que je vous conseille d'utiliser au lieu de l'archive quotidienne, les problématiques de droits et de contextes SELinux étant intégrées directement dans le RPM ;-)

Les RPM sont disponibles pour Fedora 14 et Fedora 15 actuellement, je n'ai pas prévu pour le moment de fournir des paquets pour RHEL/CentOS.

Notez qu'il y a une petite modification à apporter au fichier de configuration apache fournit par le paquet ; il s'agit de déclarer votre fuseau horaire. Pour ce faire, dans le fichier /etc/httpd/conf.d/galette.conf, ajoutez simplement la directive php_value date.timezone Europe/Paris (où Europe/Paris correspond à votre fuseau horaire) dans la section Directory /usr/share/galette :

<Directory /usr/share/galette>
    Options None
    AllowOverride Limit Options FileInfo

    Order Deny,Allow
    Allow from all

    php_value date.timezone Europe/Paris
</Directory>

Nouvelle documentation

Une toute nouvelle documentation a également vu le jour :
http://galette.tuxfamily.org/documentation/

Cette nouvelle mouture de la documentation ne concerne que Galette 0.7, et n'est disponible (pour le moment) qu'en français. Cette documentation est axée sur trois grandes parties :

Actuellement, le manuel de l'utilisateur est très peu avancé, c'est une tâche qui demande elle aussi beaucoup de temps, et je n'en ai que trop peu... À votre bon coeur ! :-)

Cette documentation est rédigée avec Sphinx (le système de documentation utilisant reStructuredText et utilisé -entre autres - pour la documentation du projet Python), elle est hébergée sur un dépôt GIT chez Tuxfamily. Pour en savoir plus sur la nouvelle documentation de Galette... ;)

vendredi 20 mai 2011

HTML5 et CSS3 pour le blog de Zia

Voilà un peu plus de 3 ans maintenant que le blog de Zia est en ligne, le thème datait de la même époque.

J'ai récemment fait l'acquisition de l'excellent ouvrage CSS avancées vers HTML5 et CSS3 de Raphaël Goetter) - ouvrage que je vous recommande vivement.

J'avais déjà revu mon site personnel suite un article paru sur Alsacréations (du même auteur, d'ailleurs ; et avec un s à Alsacréations ;-)) ; j'ai décidé de tester de nouveau les possibilités de CSS3 pour effectuer une refonte complète du blog de ma fille.

Thème Zia (0.0.2) Thème Zia (0.0.3)

Ce résultat est valide HTML5, probablement pas CSS (grâce notamment à l'utilisation des préfixes -moz et -webkit :-p), et est certainement perfectible... Un petit « bémol » pour Dotclear : la zone de recherche ne peut pas être modifiée via le système de templates, il faut visiblement ouvrir le capot pour ce faire :'(
J'ai également constaté une chose qui m'a paru étrange : le texte alternatif des images n'est pas affiché sur les navigateurs Webkit il semblerait. J'ai pu observer ce comportement avec les navigateurs Epiphany et Midori...

Côté compatibilité navigateurs, le site fonctionne de façon équivalente sous Epiphany (et autres navigateurs à base Webkit) et IE9. Sous Firefox 4, on obtient en prime un dégradé sur le menu principal :-) Le site est lisible sous IE8, mais la perte des arrondis et couleurs transparentes se fait cruellement sentir. J'ai décidé d'abandonner complètement le support IE7 et IE6 pour ce thème ; laissons les vieilleries mourir en paix ;-) Pas de version mobiles pour le moment, je n'ai pas encore lu ce chapitre :-D

Merci à Pingou, Remi, number81, MrTom et ma petite femme pour leur aide et leurs conseils :-)

Petite note complémentaire : c'est la première fois que j'utilise la toute nouvelle interface d'administration apportée par Dotclear 2.3.0 ; ça change et c'est agréable :) Bravo !

jeudi 25 mars 2010

Relooking en masse...

Voilà quelque temps, suite à un article lu sur Alsacréations sur l'utilisation de HTML5 et de CSS3, je me suis décidé à faire et à mettre en ligne mon site perso (adresse qui auparavant ne faisait que lister les sites hébergés sur ce domaine) basé sur ces technologies.

Les éléments CSS3 utilisés (notamment les couleurs transparentes, arrondis et ombrages) fonctionnent parfaitement sous :

  • Firefox 3.6
  • Epiphany
  • Arora

Et donc probablement avec la majorité des navigateurs basés sur Gecko ou Webkit. Comme d'habitude, Internet Explorer est à la traîne, mais le rendu reste tout de même correct (bien que moins joli) sous IE 7 et 8. IE6 quant à lui n'est simplement pas supporté, n'en ayant pas sous la main, je ne sais même pas à quoi ça peut ressembler avec cette antiquité :-D

Un petit coup de frénésie, et désormais le thème du site est également appliqué à :

Le thème est sous licence Creative Commons - Paternité - Pas de modification.

C'est tout de même bien plus agréable quand tout se « ressemble » :-p

samedi 20 mars 2010

HTML5 et XSL...

Suite à la récente mise en ligne de la nouvelle version de mon site perso, j'avais décidé d'utiliser également ce thème pour mon Curriculum Vitae.

Mon site perso et mon cv sont désormais tous deux en HTML5, et basés sur le même thème :-)

Côté technique, j'ai utilisé Smarty pour mon site perso, aucun souci. Pour mon CV, j'ai utilisé XSLT, et c'est là que j'ai eu un petit problème... En effet, la déclaration doctype HTML5 est la suivante :

<!DOCTYPE html>

Super... Sauf que, en XSL, pour générer un doctype, il faut avoir recours à l'un ou l'autre (ou les deux en même temps) des attributs doctype-public et doctype-system de la balise xsl:output. Pour une déclaration XHTML 1.1, on aurait donc :

<xsl:output method="xml" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" encoding="UTF-8" indent="yes" omit-xml-declaration="yes"  />

Et en sortie :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Si les attributs doctype-public et doctype-system sont tous deux absents, aucune déclaration de doctype ne sera rendue en sortie. On peut envisager de mettre une valeur vide, mais en sortie, on aura "" (alors que dans le cas de HTML5 ; on ne veut rien !).

Les spécifications actuelles de HTML5 fournissent une alternative via la DOCTYPE legacy string) :

The DOCTYPE legacy string should not be used unless the document is generated from a system that cannot output the shorter string.

En français, grossièrement : à n'utiliser que s'il est impossible au système de générer une chaîne plus courte. C'est mon cas ! Super ! J'achète ! :-D
Dans la XSL, on pourra donc mettre :

<xsl:output method="xml" doctype-system="about:legacy-compat" encoding="UTF-8" indent="yes" omit-xml-declaration="yes"  />

Et ainsi obtenir en sortie :

<!DOCTYPE html SYSTEM "about:legacy-compat">

Et voilà qui m'a sauvé la mise, j'ai du mal à voir comment j'aurai pu utiliser une feuille de style CSS commune sur une page en XHTML 1 et une autre en HTML5 ;-)

samedi 16 mai 2009

Décret sur l'accessibilité des sites publics : enfin !

Le décret sur l'accessibilité des sites publics a enfin été signé et publié au Journal Officiel !!

Depuis 2005, et l'adoption de la loi loi n°2005-102 du 11 février 2005 pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées, de nombreuses personnes dans les milieux du web appelaient de leurs vœux le décret correspondant.

En effet, cette loi sans décret n'obligeait personne à effectivement adopter une logique d'accessibilité dans les sites webs des services publics. Bien que certains aient déjà sauté le pas, que ce soit par décision de « responsables informatique » ou de développeurs sensibles à ce genre de sujets, d'autres - principalement pour éviter de dépenser trois sous qui pour une fois auraient été dépensés de façon fort utile - prenaient pour excuse l'absence de décret pour ne pas rendre leur site conforme aux différentes normes (X)HTML.

Désormais, c'est chose faite, et j'espère que l'accès et l'ergonomie presque pitoyable que nous devons aujourd'hui endurer sur certains sites gagnera un peu en qualité !

Je vous accorde que le respect de standards n'est pas forcément un gage de qualité et encore moins d'ergonomie, mais on a bien le droit de rêver un peu, non ?

dimanche 22 février 2009

Changement de décor

Depuis quelque temps, je m'étais promis de faire la mise à jour de ce blog vers la dernière version SVN de DotClear...

Je n'avais malheureusement pas eu le temps de m'en charger, mais c'est désormais chose faite !

Du coup, je me suis retrouvé avec quelques coquilles dans l'ancien thème que je me suis empressé de corriger. Ce faisant, je me suis dit que ce thème commençait à dater un peu (il était basé sur le design de Fedora Core 6, sortie en octobre 2006).

Je me suis donc attaché ce jour à la mise en place d'un nouveau design pour ce blog, toujours dans le thème du libre bien évidemment (hé oui, on aime les pingouins !) :-)

mardi 6 janvier 2009

Épiphanie 2009 : Galette 0.63 sort du four !!!

Bonjour à tous,

L'équipe de Galette est heureuse de vous faire part de la sortie de Galette 0.63 !

Pour ceux qui ne connaissent pas encore le projet, Galette (qui signifie Gestionnaire d'Adhérents en Ligne Extrêmement Tarabiscoté mais Tellement Efficace) est un projet libre sous licence GPL de gestion d'adhérents à destination des associations.

La liste des modifications pour cette nouvelle version est la suivante :

  • Ajout de la gestion de transactions,
  • Ajout de la gestion de champs dynamiques, pour ajouter des champs supplémentaires, ainsi que la possibilité de traduire les libellés de ces champs,
  • Les adhérents peuvent désormais s'inscrire eux-mêmes,
  • Utilisation du moteur de templates Smarty, pour lequel la ré-écriture de toutes les pages html au format XHTML a été nécessaire,
  • Passage de ADODB 4.7.1 à 4.9.2
  • Utilisation de gettext pour les traductions
  • Ajout de la traduction en Espagnol (la traduction n'est pas encore terminée)
  • Possibilité d'envoyer un logo personnalisé,
  • Ainsi que de nombreuses corrections de bogues.

Le programme d'installation livré permet la mise à jour depuis une version antérieure de Galette, la mise à jour en est fortement simplifiée.

Vous pouvez récupérer la dernière version à l'adresse : http://download.gna.org/galette/galette-0.63.tgz

Et voici quelques liens qui pourraient vous être utiles :

En cas de problème, vous pouvez rapporter les bogues via l'interface de Gna!

Si le projet vous intéresse, n'hésitez pas à rejoindre l'équipe de développement de Galette.

Un grand merci à toute l'équipe sans laquelle cette version n'aurait pas pu voir le jour, ainsi qu'à Tuxfamily (hébergement du site) et Gna! (dépôt du code source, interface de gestion des bogues et tâches, liste de discussions). Merci également à toutes les personnes qui ont testé et re-testé cette version et permis de corriger certains problèmes qui avaient échappé à l'attention de l'équipe :-)

La gentille équipe de développement de Galette.

EDIT
Un bogue a été trouvé lors de la mise à jour vers Galette 0.63 : http://galette.tuxfamily.org/fr/doku.php?id=documentation:knownbugs#mise_a_jour_vers_galette_0.63.

Epiphany 2009 : Galette 0.63 out of oven !!!

Hello everybody,

The Galette Team is glad to announce the release of Galette 0.63!

For those who don't know Galette yet, it is a Project to manage the members of your association. Galette is a Free software, licensed under the GPL licence. In French, Galette means Extremely Sophisticated but so Efficient On-Line Membership Manager (in French, a "Galette" is a sort of cake, usually French people eats the "Galette des rois" for the Epiphany).

Here are the updates for the new version:

  • Added transaction management,
  • Added dynamic fields management, to add more fields and to translate their labels easily,
  • Members can now self subscribe to your association,
  • Use of the Smarty template engine, for which the rewriting of all the html pages as compliant XHTML was necessary,
  • Update ADODB 4.7.1 to 4.9.2,
  • Use of gettext for translations,
  • Added Spanish translation (the translation is not yet over),
  • It is now possible to upload a personal logo,
  • So much bugs corrections.

The packaged installation program allows you to update your previous Galette version. The update is then much more easy to achieved.

You can now download the latest version from: http://download.gna.org/galette/galette-0.63.tgz

Here are some links that may be useful:

In case of problem, you can report bugs through the Gna! interface.

If you are interested in the projet, feel free to join Galette's development team!

I would like to thank all the development team, who made this 0.63 version possible, and I would like to thank Tuxfamily (web hosting service) as well as Gna! (source code repository, tasks, bugs and chat user interface). I also want to thank all the person who have tested this version again and again and which allowed us to correct some unexpected problems.

The very kind Galette Development Team.

EDIT
A bogue has been discovered upgrading to Galette 0.63 : http://galette.tuxfamily.org/en/doku.php?id=documentation:knownbugs#update_to_galette_0.63

jeudi 8 mai 2008

Pétition pour l’accessibilité numérique des services publics

Je vous parlais il y a quelque temps d'un exemple de sémantique à ne surtout pas suivre.

Le webmaster du site incriminé aurait du consulter le Référentiel Général d’Accessibilité pour les Administrations (RGAA), mais il semble que le site destiné à héberger ce dernier ne soit toujours pas en ligne...

L'absence de mise en ligne de la version finale de ce référentiel, ainsi que le manque d'application de nombreux sites web gouvernementaux a conduit divers acteurs de l'accessibilité sur le web à la création d'une pétition en ligne :
http://www.web-pour-tous.org/spip.php?page=petition-accessibilite

Un bon geste, signez-la ! :-)

mardi 29 avril 2008

Un exemple de sémantique web

...à ne surtout pas suivre !

Voici ce que j'ai pu voir aujourd'hui sur le net. Un site du gouvernement français, dont voici un aperçu avec la feuille de style CSS :

eco_stats.gouv.fr.small.jpg

Bon, rien de bien particulier me direz-vous, à raison. Cependant, lorsque l'on désactive les styles CSS, voici ce que l'on obtient :

eco_stats.gouv.fr.nocss.small.jpg

Il semble qu'il y aie un problème là...

Des captures plus grandes sont disponibles :

Qu'apporte donc le titre principal ? L'indication de menu principal ?
Pas grand chose :-/

Pis encore, le cas du Menu de droite, avec un joli titre de niveau 1 (pas visible sur les captures d'écran)... Celui là n'apparait pas avec les CSS, mais sans, il apparait bien entendu par défaut à gauche !

Ceci est un bon exemple de choses à ne pas faire. Les développeurs ont parfois besoin de pouvoir retrouver facilement les grandes parties du squelette de leur page, mais pour cela ils utilisent généralement des commentaires HTML, pas des titres de niveau 1.

On pourra noter aussi l'absence d'espaces entre les différentes entrées sous le menu principal (présentation etc).

Pour le reste, le site n'est bien entendu pas valide HTML 4.01 Transitional, tant qu'à faire...

Moi qui suis relativement attaché à la sémantique web, au respect des standards (X)HTML/CSS et à l'accessibilité... Me voilà servi :-)

mercredi 25 juillet 2007

Nouvelle version du validateur HTML du W3C

Arrivé au travail ce matin (un peu en retard à cause - comme souvent - de retards de train), quelle ne fut pas ma surprise en constatant que le site sur lequel je travaillais n'était plus valide XHTML 1.0 Strict...

En cause : la nouvelle version du validateur du W3C (0.8 - changelog), qui requiert désormais - entre autres - la déclaration du namespace XHTML :

<html xmlns="" xml:lang="fr">
...
</html>

Si, comme moi, vous utilisez des feuilles de style XSL pour le rendu de vos pages XHTML (via PHP pour mes sites persos, et Tomcat/Cocoon pour les sites 'pros'), cela ne suffira pas... En effet, l'ajout de l'attribut xmlns à la balise html pose un petit problème : certaines balises se voient attribuer un attribut xmlns vide, ce qui bien entendu n'est pas valide.
Pour contrer ce problème, il vous suffit d'ajout un attribut xmlns non préfixé lors de la déclaration de votre xsl:stylesheet :

<xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

J'ai trouvé cette astuce sur le site suivant : http://www.xmlplease.com/xhtmlxhtml, mais n'ai pas ajouté l'attribut xmlns:xhtml comme préconisé, Cocoon (ou SDX ?) n'était point trop d'accord :-)

Il faut cependant avouer que la nouvelle interface du validateur est plus agréable que l'ancienne, tout comme - à son époque - le validateur CSS...

Il ne me reste plus qu'à attendre que les paquetages w3c-html-validator pour la version 0.8 du validateur soient mises à jour pour mon pingouin préféré !

vendredi 27 octobre 2006

Utilisateur de IE, n'aie pas peur !

Je viens seulement de tester ce thème avec le tristement célèbre Internet Explorer...

Je vous avoue que ce n'est pas triste, le menu n'apparait simplement pas du tout...

Bon, j'ai beaucoup à faire en ce moment, et j'avoue délaisser fortement un peu les utilisateurs du système d'exploitation de Redmond. Qui a dit que j'étais sectaire ? Oui j'ai entendu, pas la peine de marmonner dans votre barbe :-p

Il faut que je résolve ce souci afin de proposer ce thème sur la liste des thèmes supportés par Dot Clear 2 (dont, soit dit au passage, je suis très content ; ça redonne envie de blogguer - souvent pour ne rien dire, comme c'est le cas ici, mais ça détend...)

lundi 1 mai 2006

Déçu par IE7... Étonnés ?

J'ai trouvé le moyen via un simple script DOS d'installer la Beta 2 de Internet Explorer sans que celle-ci ne remplace la version 6 sur un windows XP... Effectivement, cette manipulation fonctionne et le test du prochain IE a pu commencer...

Hé bien, je suis parfaitement déçu (comme je m'y étais attendu). Il semble que - hormis une interface utilisateur remaniée - les nouveautés ne soient pas bien neuves... Je m'explique : mon sentiment, après ce bref test de quelques sites (dont X-TnD notamment) ; c'est que les nouvelles fonctionnalités se bornent à prendre en charge ce qui déjà devrait l'être depuis un moment. Voici quelques une de ces fonctionnalités :

  • prise en charge (enfin !) de la couche alpha des png 24,
  • prise en charge de l'attribut fixed en css,
  • prise en charge des sélecteurs,
  • support du rss
  • onglets de navigation

Bien entendu, il ne s'agit pas là de la liste complète des nouvelles fonctionnalités de cette mouture, mais seulement des éléments que j'ai pu constater par moi même durant un bref test. Il apparaît également que certaines choses ne sont pas prises en compte, notamment les pseudo éléments before et after qui pourtant font partie de la spécification CSS 2.

Ajoutons à cela que pour X-TnD, un bloc div dont le CSS est #bloc{position:aboslute;right:2px;top:2px;} qui fonctionne parfaitement bien sous IE5, IE5.5, IE6, Opera, Konqueror et Firefox reste désepérément à gauche sous IE7...

Il est bien dommage que celui qui reste le plus utilisé des butineurs affiche encore et toujours un support aussi faible de la spécification CSS 2 alors que ses concurrents tels Opera et Firefox en ont déjà un support amélioré (Firefox 1.5 prend déjà en compte certaines spécificités de CSS 3).

Alors, chez Microsoft(c), poudre au yeux ou innovation ? Malheureusement, après avoir découvert cette version Beta, il me semble que la première proposition soit à retenir ; point d'innovation ici puisque même la navigation par onglets existe déjà dans la majorité des butineurs existants !

dimanche 23 avril 2006

Le casse tête Internet Explorer...

Quel concepteur de sites web - pour le peu qu'il souhaite que son site puisse correctement s'afficher sur plusieurs navigateurs sans perdre ses fonctionnalités ou son design - n'en est arrivé à maudire le tristement célèbre Internet Explorer ?

Je puis vous assurer que ce fut souvent mon cas :-) En effet, malgré l'omniprésence de ce butineur sur la toile (bien qu'il ne soit pas en majorité selon les statistiques du site x-tnd.be - détrôné par Firefox) je suis un fervent utilisateur de Linux. Ceux qui ont essayé me comprendront quand je dirai que d'installer IE dans un Linux n'est pas forcément une sinécure ; qui plus est il faut posséder une licence de windows pour ce faire en toute légalité...

Bref, je me suis orienté depuis longtemps vers Firefox bien plus souple et respectueux des standards. Or - contrairement à certains webmasters qui n'utilisent que IE et ne programment donc qu'en conséquence - j'ai toujours prodigué d'énormes efforts pour que chaque site puisse fonctionner sur le plus grand nombre de butineurs possibles. Actuellement, depuis les dernières mises à jour en date, x-tnd.be fonctionne de façon similaire sous Firefox (1.5), Internet Explorer (XP SP2), Opera (8.54) et même Konqueror (KDE 3.5 - Fedora 4 & Ubuntu 5.10).

Toutefois, il a été nécessaire de faire quelques sacrifices pour cette mouture. En effet, la feuille de style css ne pourra être validée depuis IE. La cause ? Un fichier htc qui permet d'étendre les fonctionnalités de IE et notamment lui ajouter la prise en compte de pseudo élément hover sur d'autres balises que le simple 'a'. Très intéressant, me direz-vous, mais le problème est que l'insertion d'un tel fichier requiert l'utilisation de la propriété behavior dans le CSS qui ne fait pas partie de la norme. En grugeant un peu, j'ai ajouté une feuille de style que seul IE pourra lire qui comporte cette seule et unique instruction, et c'est cette seule ligne empêchera la validation CSS avec ce navigateur.

Il existe plusieurs possibilités pour mettre en place un menu déroulant sur un site web :

  • recours au JavaScript : pratique, c'est une solution assez rapide à mettre en place dès lors que l'on possède le script qui fonctionne bien. Le problème de cette technique est que Javascript n'est pas activé chez tous les internautes (il m'arrive moi même de le désactiver de temps à autre) et que sur x-tnd la désactivation du Javascript et le positionnement absolu du fil de news sur la page d'accueil était du plus mauvais effet, le menu n'était plus intégralement accessible...
  • une technique en pur CSS basée sur les commentaires conditionnels. Cette technique est beaucoup plus lourde à mettre en place à et maintenir puisque deux fichiers CSS doivent être créés. De plus cette méthode ajoute pour la version IE des tableaux unicellulaires... C'est la sémantique qui en prend un coup ;-)
  • le recours à un fichier htc. Au risque de ne pas avoir une feuille de style 100% valide depuis Internet Explorer, c'est (après avoir testé les deux méthodes suscitées) ce sur quoi mon choix s'est porté.

Dans tous les cas, il reste fort souvent problématique de réaliser des sites webs compatibles avec IE, même si les difficultés s'amenuisent au fur et à mesure que votre expérience grandit ; je citerai à ce propos un passage en marge de l'excellent livre de Eric A. Meyer CSS par Eric Meyer (More Eric Meyer on CSS) : Vous vous demandez sûrement pourquoi le code fait référence au div de navigation par div#nav au lieu de #nav seulement. Cela évite un bogue dans IE/Win.[...]J'ignore pourquoi l'ajout du nom résoud le problème, mais ça marche.. Il restera toujours malheureusement des comportements de ce navigateurs inexplicables...

lundi 17 avril 2006

Xoops pas copain avec le W3C ?

Je viens de passer tout mon lundi (de Pâques en plus !) après-midi à valider le code HTML le site du projet Cantine...

Xoops est un projet intéressant, il est vrai que pour la mise à jour d'un site c'est très pratique. Mais il semble malheureusement que les programmeurs de chez xoops ne soient pas trop amis avec les règles du W3C. Même en laissant de côté les nombreuses tables qui n'ont pas forcément lieu d'être (certaines sont utilisées pour la mise en page, ce qui est - rapellons-le - fortement déconseillé), de nombreuses coquilles existent dans l'actuelle version stable :

  • beaucoup (voire énormément) d'attributs sans guillemets (method=post en lieu et place de method="post")
  • des attributs en majuscule (POST au lieu de post)
  • des attributs alt avec des guillemets simples et les apostrophes non gérées (alt='logo d'un site' devrait être alt="logo d'un site")
  • des balises input de type hidden qui se placent entre deux lignes de tableaux ([...]</tr><input type="hidden" /><tr>[...])
  • des attributs inexistants (MozOpacity ou opacity qui fonctionnent sur le navigateur mais n'existent pas dans la spécification W3C)
  • des attributs codés en HTML et pas en XHTML (<hr nowrap/> au lieu de <hr nowrap="nowrap"/>)
  • des balises non fermées (<img> <hr> <br>)
  • des éditeurs de texte dont l'utilisation des facilités produit un code invalide (du genre <code><pre>blah</pre></code>) ; du coup il faut entrer directement les <pre> à la main sans utiliser l'éditeur, ...

Bien entendu, le nombre de problèmes rencontrés est proportionnel au nombre de modules utilisés (pour ma part, j'en utilise très peu, heureusement, je serais encore en train de travailler à cette validation).

Bref, pas mal de soucis, dans un environnement qu'il faut comprendre... Les personnes non initiées à PHP ont relativement peu de chances d'avoir un site valide, déjà que le respect des normes n'est pas une évidence pour tout le monde, si en plus cela demande autant de temps que de mettre le site en place, beaucoup déclareront forfait !

Il ne reste qu'à espérer que pour leurs prochaines versions un effort dans ce sens pourra être noté...

mercredi 12 avril 2006

Version 3.0 du site... Work in (dumb) progress !

Cela fait déjà un moment que je pense à passer à une version 3 de X-TnD... Depuis l'été 2005 à vrai dire.

Cette tâche fut rendue complexe par mon (pseudo) employeur et ses (pseudos) super contrats... Mais j'ai quand même trouvé le temps de m'y consacrer ; un minimum certes, mais du temps quand même !

Je tiens d'ailleurs à ce sujet à remercier vivement Cynic qui m'ôte de la tête les soucis du côté Design en s'en occupant 8-). Ses maquettes sont prometteuses, qu'il va être joli tout plein X-TnD !

J'ai récemment ouvert un compte sur opquast (démarche qualitative) et me suis aperçu que certaines choses ne tournent pas rond côté CSS ; il va falloir y remédier. Maintenant que suis suis chômiste, je vais avoir un peu de temps libre et espère m'occuper de cela sous peu... Cynic : à ton clavier :-)