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

webdesigner et intégrateur XHTML / CSS

Internet Explorer reste la référence

3 commentaires

Des vaudoux s'en seraent pris à Internet ExplorerInternet Explorer fait l’objet de nombreuses critiques, on l’accuse de tous les maux, on le dénigre. Et pourtant, force est de constater que nous en sommes totalement dépendant lors du travail d’intégration web. Je suis souvent stupéfait des débats suscités par le navigateur. Je suis la plupart du temps amusé de lire par-ci par là des billets d’humeur d’intégrateurs se demandant sur leur blog si l’on doit continuer de développer pour Internet Explorer. D’autres vont jusqu’à affirmer qu’il ne faut plus prendre en compte Internet Explorer parce qu’il ne respecte pas les standards.

En règle générale, ces discussions ne mènent pas loin et suscitent beaucoup plus de réactions que de véritables réflexions sur la question de fond. Selon moi, elle ne devrait même pas se poser surtout si l’on doit réaliser un travail d’intégration sur un site de grande ampleur. S’il s’agit d’un site personnel ou expérimental, libre à celui qui le décide de ne développer que pour les navigateurs respectant les standards. Autrement, on ne peut pas priver les 70 % des personnes utilisant le navigateur de la firme de Redmond.

Lire la suite

Les PNG animés supportés sur Gran Paradisio

2 commentaires

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

1 commentaire

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

0 commentaire

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

Joyeux noël à tous

0 commentaire

Juste ce petit message pour vous souhaiter à tous de bonnes fêtes de fin d’année. J’en profite également pour faire état de mon étonnement concernant les services e-card sur le web. Il y a en réalité peu de services gratuits disponibles sur le net. Si j’ai un peu de temps, j’essaierais de mettre en place une interface dans la pure tradition web 2.0 qui permettra de planifier l’envoi d’e-cards gratuitement :) Joyeux réveillon !

(j’en profite également pour vous dire que le prochain navigateur de Microsoft, IE 8, passe sans problèmes le test Acid 2 et ça c’est une bonne nouvelle)

Ce qui énerve l’internaute

0 commentaire

Sur le web, si vous souhaitez fidéliser un visiteur, il va falloir éviter certaines pratiques. Ces conseils valent aussi bien pour un site personnel genre blog que pour un site commercial. Voici donc un bref résumé de ce qui énerve les internautes.

Les popups

Elles arrivent en tête de la liste. C’est un véritable fléau sur le web à tel point que les navigateurs ont du mettre en place des bloqueurs de popup. Mais les “ pollueur du web “ ont bien plus d’un tour dans leur sac et utilisent des techniques alternative pour pourrir votre écran de pub. La fabuleuse lightbox a par exemple été détournée de son utilisation pour servir de popup publicitaire sur certains sites douteux ;)

Lire la suite

La pseudo-classe :hover

1 commentaire

CSS a introduit des fonctionnalités très importantes pour le webdesign: les pseudo-éléments et les pseudo-classes.

Les pseudo-éléments sélectionnent une partie spécifique dans le Doctree (le formatage du document source) à partir des informations déjà données par ce dernier: nom, attribut… De fait, on peut appliquer un style sur une partie spécifique du document. Par exemple, avec le pseudo-élement :first-letter permet d’appliquer un style sur la première lettre d’un paragraphe. En combinant cette propriété avec le pseudo-classe :first-child, on peut alors créer une lettrine.

Les pseudo-classes, quant à eux, ciblent des éléments sans forcément prendre en compte les informations renvoyées par le Doctree. Elles ne se déduisent donc pas de ce dernier. (On notera toutefois deux exceptions: :first-child et :lang). Une propriété peut être générée dynamiquement par l’action de l’utilisateur sur le document.

La pseudo-classe qui nous intéresse dans le cas présent est :hover. Elle offre un certains nombre de possibilité que nous allons voir en détail en utilisant plusieurs exemples. Comme beaucoup de pseudo-classes et pseudo-éléments, elle connait des problèmes de compatibilités avec les navigateurs strictement inférieurs à IE 7. IE ne permet cette propriété que sur les balises de liens. Pour résoudre ces lacunes, on peut utiliser le hack JavaScript de Suckerfish pour implémenter la propriété :hover au vieux navigateurs IE.

Lire la suite

Améliorer Internet Explorer (toutes versions)

0 commentaire

Dean Edwards est un génie. Internet Explorer a toujours été réputé pour être un navigateur très en retard sur les autres. Un grand nombre de sélecteurs et de propriétés CSS ne fonctionnent tout simplement pas sous les versions inférieures à IE7. C’est là que Dean Edwards entre en jeu. Ce programmeur a conçu une véritable librairie permettant d’émuler par le biais de fonctions javascript, les fonctionnalités CSS 2 absentes de IE. A l’origine, son objectif était de contrer la pratique des hacks CSS qui rendent les feuilles de style invalides. Mais il ne s’est pas arrêté là en implémentant certains sélecteur CSS 3 dans le navigateur certifié Windaube. La dernière version sortie date de août 2005 donc je n’apporte pas une nouveauté, mais ce genre de trésor peut en intéresser un très grand nombre ;)

Vous pouvez télécharger l’ensemble des fichiers sur son site internet personnel.

Mon Top 5 Webdesign du moment

0 commentaire

Tout les mois, j’essaierai de tenir à jour une liste de design de sites qui me paraissent particulièrement intéressant tout en les commentant. En naviguant sur le web, je suis souvent interpellé par des types de mise en pages ou par la beauté graphique. Voici donc mon top 5 ;)

Team Viget Lab

VigetlabJ’ai été particulièrement séduit par la mise en page originale. Pour naviguer, il y a un défilement horizontal de la zone de contenu afin d’accéder aux autres rubriques. C’est assez original. Ceci est rendu possible grâce aux possibilités du Framework Jquery (mon chouchou) alliées au plugin Easing.

Certes, on pourra me faire remarquer que ce n’est pas très évolutif mais ici, on parle d’une vitrine montrant les possibilités de créations d’une équipe de designers :)

Lire la suite

Faire du buzz sur le web (dernière partie)

0 commentaire

Comme on a pu le voir, organiser un buzz pour une opération marketing peut se révéler très efficace. Toutefois, il faut en dégager quelques limites. Cette technique fait partie de ce que l’on appelle le marketing viral. Du fait de l’efficacité prouvée à maintes reprises, cette technique est souvent utilisée à tort et à travers.

Certaines opérations deviennent de véritables génératrices de spam et dans ce cas, on peut juger très clairement que l’opération est ratée. Cela peut même se traduire par un fiasco qui va casser votre image de marque. L’objectif est très clairement de se mettre les internautes dans la poche (pour être quelque peu cynique).

Lire la suite