?php } elseif (is_day()) { ?> XHTML / CSS « Clearideaz

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

webdesigner et intégrateur XHTML / CSS

Archive pour la catégorie ‘XHTML / CSS’

Analyse de la nouvelle version de Duoh.com

Après un petit congé billet, je me redécide à écrire un billet à l’occasion de la publication récente de la nouvelle version du site Duoh. Pourquoi ce site ? Parce qu’il est un exemple d’innovation en matière de webdesign.

Trop de sites sont réalisés par des designers qui n’ont pas de réelle vision web et il ne faut en aucun cas les blâmer mais il serait grand temps d’avancer et de laisser le webdesign à des gens qui ont été formés pour ça et de ce fait, proposer enfin, de vrai formation dans ce domaine. Le webdesign répond à des contraintes d’ergonomie, d’accessibilité, de sémantique et d’intégration. L’art est secondaire (troll ?). La maquette web est au service du contenu et non pas l’inverse.

Lire la suite

Les hacks c’est pas bien !

La tentation de recourir à des hacks est grande lorsque l’on commence à se lancer dans l’intégration d’un site web. Lorsque l’on s’aperçoit que la page développée s’affiche différemment d’un navigateur à l’autre, on se dit très souvent que c’est le navigateur (Internet Explorer pour ne pas le citer) qui interprète le code ou la feuille de style n’importe comment.

Cette réaction est plus ou moins justifiée. Nous sommes tous conscients des lacunes du navigateur Microsoft et plus particulièrement des versions antérieures à la 7. Toutefois, ce n’est pas une raison pour charger sa feuille de style de propriétés invalides en prenant comme bouc émissaire le navigateur de Monsieur Redmond.

Une feuille de style doit, au même titre que le document XHTML, passer l’épreuve du validateur W3C. Ce n’est pas en insérant des « _width: » ou encore de « %margin: » dans votre CSS que vous pourrez vous vantez de faire un site au codage propre. J’irais même jusqu’à dire que les hacks sont bons pour les fainéants la plupart du temps.

Dernièrement, j’avais fais remarquer à un intégrateur remonté contre IE que notre boulot perdrait de l’intérêt sans ces soucis de compatibilité. Même si j’affirmais cela ironiquement, je trouve passionnant de découvrir pourquoi telle propriété ne fonctionne pas de la même manière d’un navigateur à l’autre et surtout, comment y remédier.

Lire la suite

Récit d’une création de site internet (2ème partie)

Après avoir achevé la maquette définitive du site, je suis ensuite passé au travail le plus intéressant, celui de l’intégration. J’ai commencé par comprendre mon document. Qu’est-ce que ma page raconte ? Qu’est-ce qu’elle laisse transparaitre. Je peux ainsi mettre des noms sur les différents éléments présents dans la page : menu général du haut, titre de niveau 1, menu latéral des rubriques… Cette étape va me permettre de visualiser les différentes balises les plus adaptées aux différentes parties du document et délimiter les différentes zones (header, footer…).

Lire la suite

Construire un document XHTML

xhtml, c'est chaud !!!Le XHTML (eXtended HyperText Markup Language) est, à l’instar du HTML, un langage de balisage. Sa syntaxe est basée sur la syntaxe du XML.

Il existe différentes versions du XHTML :

  • XHTML 1.0 Strict : Il ne gère que le contenu du document et non l’affichage. C’est le type de document à privilégier.
  • XHTML 1.0 Transitional : C’est la passerelle entre le HTML et le XHTML. Il permet l’utilisation de balises liées à l’affichage.
  • XHTML 1.0 Frameset : C’est le seul type de document qui autorise les frames. Logiquement, un document accessible ne doit pas inclure d’éléments frame donc à éviter…
  • XHTML 1.1 : C’est une évolution du XHTML 1.0 Strict avec quelques balises qui ont été implantés ou modifiés.

Lors de la construction d’un document XHTML, il est important d’avoir à l’esprit que ce n’est pas l’apparence du site qui engendre le balisage mais bien le contenu de ce document.

Pour l’élaboration d’un document type, nous prendrons le XHTML Strict 1.0 comme référence. Nous ne gérerons que le contenu. Exit les propriétés d’affichage tels que bgcolor, color ou encore size. Nous éviterons, de ce fait, de placer l’attribut (tout à fait valide) style= »" qui insère dans le document des propriétés CSS. Cela se fera dans une feuille de style externe. Le XHTML nécessite de se mettre en conformité avec certaines règles :

Lire la suite

Mon livre de chevet du moment

120225075168_transcendercss_tnActuellement je lis Transcender CSS, un livre d’Andy Clarke qui est l’un des designers web les plus doués. Il participe notamment au groupe de travail du W3C et à déjà publié des articles sur le fameux site A List Apart. C’est LE livre que j’attendais depuis longtemps. Cet ouvrage, très illustré (j’adore…), traite du webdesign à l’aide des feuilles de style CSS. Ma partie préférée concerne l’élaboration d’un design web à l’aide d’une grille (c’est d’ailleurs ce que j’ai utilisé pour le design de ce blog…). Andy Clarke évoque également les micro-formats, les règles de base d’accessibilité. Le point de vue de l’auteur est parfois discutable mais je pense que Transcender CSS peut être considéré comme une référence en terme de publication sur le graphisme web via CSS. Un livre à mettre donc entre toutes les mains des webdesigner.

La pseudo-classe :hover

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