Clearideaz, le portfolio d'Olivier Gorzalka, webdesigner sur Lille, Nord-Pas de Calais

webdesigner et intégrateur XHTML / CSS

Archive pour janvier 2008

Les PNG animés supportés sur Gran Paradisio

Sur Ajaxian, j’ai pu apprendre que les APNG (images au format PNG animés) seront supportés par le futur navigateur de Mozilla, Firefox 3. On se passionne alors de tout les côtés pour ce format d’image. Des discussions pleines de passions fleurissent sur les forums mais sans vouloir gâcher le plaisir, les concepteurs de site ne pourront l’utiliser et ce, pour plusieurs raisons :

  • Ce format n’est supporté que par Opera 9.5 et donc bientot par Firefox 3 :
    Il est évident qu’ignorer les navigateurs tels que Safari, Konqueror, Nautilus et surtout Internet Explorer serait totalement insensé. Pourquoi utiliser l’APNG alors que le PNG est déjà très mal implanté sur Internet Explorer ?
  • Un format beaucoup trop lourd
    Par curiosité, j’ai visité des sites présentant des PNG animés. C’est amusant mais quand on s’intéresse au poids des images, ça l’est tout de suite beaucoup moins. Sur le site AnimatedPng, j’ai pu trouver une petite image animée de 1 Mo, énorme non ?
  • S’il fallait faire un choix, ce ne serait, pour ma part, pas celui de l’APNG
    Honnêtement, l’APNG n’est pas la solution à retenir si l’on souhaite réaliser une animation. Le Flash est beaucoup plus approprié. Certains pourront me dire : tout le monde n’a pas Flash Player. Certes, il y en a d’autres qui n’ont pas Javascript, ou d’autres qui surfent avec un navigateur web datant de la guerre 14-18 (hmmm…) ou encore d’autres qui n’ont pas de sèche-cheveux dans leur salle de bain. Et puis, en réalité, on se ferme à beaucoup plus de monde en utilisant l’APNG.
  • L’APNG c’est encore une invention de geek
    Là je suis à court d’argument :)

En définitive, je pense que l’APNG n’aura pas un grand avenir sur le web étant donné les avantages limités face à d’autres techniques d’animations. Applaudissons tout de même Mozilla : intégrer ce nouveau format dans un navigateur est une vraie révolution (niark…).

Rendre son site accessible

Sur le web, les sites respectant les règles de validités W3C fleurissent, mais pour ce qui est des sites accessibles, les progrès sont lents.

Que faut-il faire exactement pour rendre son site accessible?

Nous allons voir brièvement une liste d’éléments à intégrer dans le code XHTML pour permettre à son site de respecter les contraintes d’accessibilité.

Bien organiser son document XHTML

Un document accessible se doit de respecter une certaine logique. On ne doit surtout pas organiser son contenu en fonction de l’apparence graphique du site. C’est la méthode qui était utilisée lorsque l’on construisait des structures graphique à l’aide de tableau. Il faut veiller à ce que le document soit lisible sans la présence de feuilles CSS. On respecte impérativement l’ordre logique des balises (<h1>, <h2>, etc…). Le titre du site et de la page consultée doit se trouver en haut du document suivi du menu principal. On passe ensuite au contenu et enfin le pied de page.

Veiller à ce que le titre de la page change

Cela parait peut être anecdotique mais la balise <title> est très importante pour les personnes ayant des déficiences visuelles. Cela leur permet de mieux se repérer dans les différentes pages du site internet. Si vous laissez le même titre pour chaque page, il sera complètement perdu. Et puis, prendre la peine de mettre des beaux <title> en fonction du contenu, ça fait déjà plus sérieux ;)

Lire la suite

Dean Edwards a refait des siennes

Actuellement très occupé sur divers projets web, je n’ai pas eu beaucoup de temps à accorder à mon blog. Je voulais juste vous signaler que Dean Edwards venait de publier une nouvelle classe javascript permettant de pallier les faiblesses de IE 6 mais également de IE 7. Elle ne pèse que 38 Ko et n’utilise aucun module complémentaire. En réalité, il a implémenté les nouvelles possibilités que devrait offrir IE 8, le navigateur qui intégrera (théoriquement) CSS 3.

Je précise que cette classe js est en cours développement et qu’elle contient encore quelques bugs. Pour l’avoir déjà utilisé, je peux déjà vous  en citer quelques uns :

  • Difficulté à gérer les classes pouvant posséder plusieurs propriétés (ex : #accueil .conteneur {}, #article .conteneur {})
  • Certaines propriétés telle que la pseudo-classe :first-child ne fonctionnent pas si on utilise une feuille de style externe

La classe est à télécharger sur la page de Projet Google de Dean Edwards