Le métro de NY en HTML5 !

En HTML5 (et surtout javascript, comme à chaque fois que l’on parle HTML5…), et en son & lumière avec Firefox ou Chrome  http://www.mta.me/ pour les autres… :

Conductor: www.mta.me from Alexander Chen on Vimeo.

Les vrais standards CSS – Partie I : la guerre des normes

Introduction : De l’utilité du Doctype.

Choisir un bon doctype influera énormément sur votre perte de cheveux en venir, lorsque vous essaierez d’aligner une image de fond à droite sur IE5/Win alors qu’elle part de 2 pixels à gauche sur Firefox et qu’elle n’apparaît qu’à moitié dans IE/MAC…
Il y a tout un tas d’articles sur le Web traitant de la définition du doctype et de leur écriture.
Le meilleur (compromis) actuellement semble être :

DOCTYPE html PUBLIC « -//W3C//DTD XHTML 1.0 Transitional//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd »

Il permet assez de souplesse tout en obligeant une certaine rigueur dans la structure et il me semble que c’est celui qui donne le résultat le moins hétéroclite d’un navigateur à l’autre.

» De l’utilité du doctype
» Les différents doctypes

La problématique : les standards ne sont pas standardisés.
Sous ce titre barbare se cache une réalité : IE5, IE6 et IE7 windows (bravo), IE5 MAC, Firefox, Opera ne réagisse pas de la même façon lorsque l’on pousse dans leur derniers retranchements le XHTML et/ou CSS. Suis-je obligé d’évoquer Safari ?…

Lire la suite

XUL Partie I : Le point

Introduction
Pour rappel, XUL est une surcharge du langage XML soutenu par Mozilla qui en gros, peut s’utiliser comme du XHTML.
Un langage extrêmement digeste avec lequel on peut interfacer des composants séduisants (barre de progression, glisser-déposer…)
Pas forcément orienter Web, pour le moment…
Lire la suite

Remplacement de texte par de l’image

Voici plusieurs techniques pour insérer une typographie riche – i.e. remplacer du texte par une image, tout en respectant l’accessibilité et l’indexation par les moteurs de recherches : bluffant !

» /!\ problèmes d’accessbilité avec ces techniques et là.
» La technique ultime.

» Une technique en php… prometteur mais… je ne suis pas arrivé à faire tourner….

» Surtout pour les titres, en css brut.

» Solution simple et compatible.

» pas mal du tout.

» En javascript.
Il s’agit ici plus d’un detect pour savoir si le navigateur autorise l’affichage d’image.

Des effets CSS

» Opacity et transparence.

» Apparition de l’image en fade.

» Un faux loader… par exemple pour le chargement d’une image.

» Rendre les liens ‘visited’ plus sexy.

» Des info-bulles

» Effet sur un logo.

» De l’ombrage, aussi chez sixApart

» un rollover sur une partie d’une image.

» Généré des dégradés php et css.

» Un rating… très en vogue.

Et qu’ça bouge !

» Excellent article sur le drag’n drop en DHTML.

» Puis la notion de tri arriva.

» Puis on en fit des frameworks JavaScript intégrant AJAX : rico et script.aculo.us.

» Moo fx : sans ajax donc plus léger

Pocket Design

» Mobile Web Design.

» Rendre son site visible par les mobiles.

Tout ce qu’il faut prendre en considération pour la conception et l’intégration sous PDA et autres. L’auteur dévoile un argument pour développer avec Opera auquel je n’aurais pas pensé…