Daniel Glazman, co-président du groupe de travail CSS au W3C, développeur de logiciels d'édition web, du Composer de la suite web Mozilla à la fin des années 90 jusqu'à BlueGriffon aujourd'hui, a publié un billet plutôt alarmant.

Avec la mise en place de la bibliothèque, j'ai cherché la meilleure manière de présenter les données descriptives d'un ouvrage dans un document web. Sans avoir trouver de solution idéale, voici quelques ressources intéressantes.

Quel est l'avantage/inconvénient d'un langage de structuration comme le HTML ou un langage de présentation comme le CSS, par rapport à des langages de programmation comme le php ou le java ?

J'avais repris le développement de mon objet javascript de constuction d'échelle géologique il y a quelques mois. Il me restait encore à définir le code HTML de rendu ainsi que la mise en forme. Une petite heure de brainstorming et code plus tard, j'arrive enfin au bout du chemin...

Le navigateur Opera me surprend souvent par ses implémentations des standards web ; généralement en avance par rapports aux autres constructeurs ; toujours respectueux des dits standards. D'où mon étonnement lorsque j'ai corrigé dans ma librairie javascript un bug qui le touchait et relatif à l'écoute des événements de l'objet XMLHttpRequest...

Evolution de l'implémentation de la « syntaxe module » dans la librairie javascript rnb-js.

Le bling-bling sévit partout, y-compris dans le développement web. Exemple : les items de liste du pied-de-page du blog {Sciences²} (dont la lecture est par ailleurs fortement recommandée). Autant j'aime l'effet rendu, autant la manière de l'obtenir me laisse, comment dire, perplexe...

Un petit bout de code html/css/javascript tout simple pour filtrer l'affichage des items d'une liste à partir d'une valeur tapée dans un champ. A étendre pour appliquer à des besoins plus sépcifiques.

Deuxième (et dernier ?) rapport d'étape de la reconstruction de la librairie javascript rnb-js. Au menu : les composants en tant que modules et la surcharge du prototype des objets natifs.

En programmation, on doit toujours garder en tête les moyens d'améliorer les preformances de son code : chercher l'algorithme le plus efficace, éviter d'accéder trop souvent au DOM (en javascript), utiliser les méthodes natives des objets quand elles sont disponibles, garder des données en « cache » quand elles doivent être réutilisées, etc. Mais la quête de performance peut parfois se heurter à d'autres principes de programmation, comme la factorisation du code. Petit exemple pratique...

Petit mémo sur les favicons, ces petites images symbolisant un site web et qui apparaissent dans les navigateurs web au niveau de la barre d'adresse ou des onglets par exemple.

Il est assez courant de rencontrer des propriétés publiques en lecture seule quand on manipule des objets DOM en javascript par exemple. Voici une piste, sans doute pas toute neuve, pour disposer de ce type d'accès à une donnée en PHP.

On a beau défendre les recommandations W3C pour tout ce qui est languages web, il y a des fois où des implémentations propriétaires sont bien utiles. Exmple avec la propriété CSS background-position.

L'en-tête HTTP « Accept » est une information envoyée par un logiciel effectuant une requête sur un serveur (typiquement : votre navigateur web qui demande d'afficher la page d'un site) et qui signifie à ce dernier le type de contenu qu'il accepte de recevoir. Et il est parfois nécessaire de décortiquer en détail cette information...

Durant les premières années de développement, la librairie javascript rnb-js se basait essentiellement sur la détection des navigateurs pour implémenter une action ou un comportement. Depuis plusieurs mois, j'applique plutôt une technique fortement recommandée : la détection de fonctionnalités.

Opera me surprendra toujours : souvent à la pointe de la technologie, il a plutôt bonne presse dans la communauté des développeurs web mais je l'utilise rarement ; trop rarement. Et c'est un tort, car en corrigeant un bug qui empêchait l'exécution du javascript, j'ai découvert qu'il était toujours plus en pointe que les autres, notamment dans la gestion des événements personnalisés.

Mon premier test de vidéo sur ce site était imparfait : si les films étaient correctement affichés localement, ils n'étaient pas visibles sur le site en ligne. La faute au type MIME...

Quand on construit des applications ou des sites web, on associe toujours très étroitement CSS et javascript, a tel point qu'on oublie parfois que la présentation graphique peut être utile en dehors même de son utilisation dans un objet javascript...

L'élément head d'une page web n'est généralement pas affiché par les navigateurs web. Rien ne nous empêche cependant de modifier ce comportement par défaut.

Quelques liens qui trainent encore dans mes notes, du leadership de Firefox en Europe à une rétrospective 2010 orienté web.

Une petite fournée de news web, avec quelques liens parmi les dizaines qui traînent encore dans mes notes.

L'extension Firebug pour Firefox a révolutionné le développement en javascript, à tel point qu'on se demande aujourd'hui comment nos prédécesseurs ont pu faire sans lui. Le revers de la médaille, c'est qu'on peut oublier qu'il n'est pas toujours présent, y compris sous Firefox ; l'utilisation de la console pour débuguer peut donc parfois entrainer des… bugs. Karl Dubost signale une solution pour éviter pareille erreur. Voilà pour ma part la méthode que j'utilise depuis plusieurs années dans ma librairie javascript rnb :

Curieux cri du coeur pour quelqu'un dont le boulot, c'est d'écrire du javascript. En fait, ce n'est pas le langage en lui-même qui insupporte (quoique certaines « subtilités » donnent envie de se taper la tête contre les murs), plutôt son utilisation de plus en plus outrancière...

Dans la série enfonçage de porte ouverte ou « ça paraît évident mais ça va mieux en le disant », une petite subtilité dans la définition des bordures d'éléments en CSS, plus particulièrement leur couleur.

Des gus du CERN inventant le web aux gouvernants d'aujourd'hui qui cherchent à le brider en passant par l'utilisation abusive du terme « HTML 5 ».

Les nouvelle spécifications web (HTML 5 , DOM 3, CSS 3) sont de plus en plus implémentées dans les navigateurs web, à des degrés divers certes mais de manière suffisante pour pouvoir déjà être utilisées dans nos documents. Sauf qu'il faut encore et toujours faire attention : Le « browser implementation sniffing » n'est pas mort.

Des emails à la lutte contre les spammeurs et à la protection de la vie privée, du partage sur le réseau aux luttes qu'il reste encore à mener.

Quelques news et références web plus ou moins récentes...

Depuis plusieurs mois, un embroglio sans nom secoue le petit monde du web. La cause ? La vidéo embarqué et les luttes d'influences pour savoir quel codec vidéo doit / peut devenir standard ; dans un coin le monde du libre, dans l'autre le format le plus utilisé mais propriétaire. Google va sans doute mettre fin au débat en annonçant qu'il plaçait sous licence libre son propre codec vidéo : VP8.

Les pseudo-éléments :before et :after permettent de définir des boîtes de contenu avant et après l'élément HTML qui les porte. Alors qu'il est maintenant possible de leur appliquer de nombreuses règles de stylisation, leur utilisation n'est pas totalement standardisée (je ne parle pas des navigateurs qui ne les gèrent pas). C'est le cas des images.

Il existe plusieurs manières d'appliquer des styles aux éléments d'un document web à travers la notion de « sélecteurs ». On use (et abuse) souvent de deux d'entre eux, les sélecteurs de classes et les sélecteurs d'ID, mais pourrions-nous nous en passer ?

A quoi voit-on que le HTML 5, malgré tous ces défauts, est tout de même un language qui facilite la vie des développeurs ? Quand on s'apperçoit que des techniques que l'on utilise depuis des années sont dorénavant intégrées aux spécifications. Petit exemple avec la manipulation de l'attribut class.

Le web d'aujourd'hui, c'est ça : des Ogres (Google et Apple) cherchant à contrôler chaque jour un peu plus ce que l'on fait de nos vies numériques et des Hommes qui, seuls ou en groupe, préfèrent emprunter une autre voie.

Un petit utilitaire que j'utilise depuis près d'un an dans ma bibliothèque javascript et qui permet d'assurer une pseudo-internationalisation des messages d'objets.

Du neuf avec HTML 5, Firefox 3.5, la vidéo sur le web et les moteurs de rendu javascript ; du vieux avec - toujours et hélas - Internet Explorer 6.

Internet Explorer ne cessera jamais de m'étonner. Alors qu'on croit avoir fait plus ou moins le tour de toutes les tracasseries les plus évidentes et les plus courantes, que ce soit en css, en javascript ou en html, v'la ti pas qu'on peut encore tomber de sa chaise en déboguant du javascript au boulot. Ou pourquoi un élément fraîchement créé possède un noeud parent alors qu'il n'a encore été inséré nulle part.

L'astuce est déjà ancienne mais il est peut-être utile de rappeler ce qu'on peut faire depuis un moment déjà avec des navigateurs web modernes et quelques règles CSS : arrondir les coins des bordures d'un élément pour créer des cercles.

Le HTML5, dont la publication finale est prévue en septembre 2010, pourrait offrir un mécanisme pour numéroter les listes à puces ordonnées en ordre inversé. Voici comment obtenir la même chose en HTML 4.01/XHTML 1 avec un peu de javascript.

Les feuilles de styles en cascade permettent beaucoup de choses, notamment avec les navigateurs web qui implémentent correctement les spécifications du W3C. Néanmoins, il est parfois difficile - mais pas impossible - d'appliquer une série de règles par la négative (appliquer les styles sauf dans certains cas précis). Les CSS de niveau 3 offriront enfin un outil pour le faire.

Ce n'est pas la première fois que je rencontre ce bug mais je m'étais jusqu'alors arrangé pour le contourner : le contenu par défaut d'un champ texte peut parfois disparaître sous Firefox 1.5.* et 2.*. Comme il m'a fallu cette fois-ci absolument le corriger au boulot, voici les solutions auxquelles je suis parvenu.

Imaginons : vous devez insérer un élément ou fragment de document lambda dans un document web via le DOM. Cet élément doit obéir à certaines règles CSS et, comme il n'a aucune raison d'être dans le dit document si la gestion du javascript est désactivée, vous insérez ces règles elles-aussi en manipulant le DOM. L'opération serait finalement triviale s'il n'y avait Internet Explorer.

Pas grand chose sur ce site ces dernières semaines ; j'y reviendrai plus tard. En attendant, voici quelques lectures très instructives.

Cela a pris plus de temps que prévu, mais on voit finalement le bout du tunnel : après la page d'accueil, c'est finalement l'ensemble du site Framasoft qui a fait peau neuve cette nuit, non sans difficultés d'ailleurs.

Une poignée de nouvelles autour du web, certaines avec pas mal de retard.

Après quelques mois de latence, nous voilà replongés dans la réécriture des squelettes du site Framasoft, et plus particulièrement dans celle de la page d'accueil.

Quelques news web en vrac, du projet de loi DADVSI au brevetage en règle de tout ce qui bouge sur le net.

A partir d'aujourd'hui et jusqu'à la fin du mois, j'entame le travail de refonte des squelettes du site Framasoft.

Voici un outil qui pourrait être utile à beaucoup de gens : une collection de scripts javascript pour corriger les textes tapés dans des formulaires web.

Voici une fonction javascript, NavTab, pour présenter le contenu d'une page web sous forme d'onglets, inspiré par le DomTab de Chris Heilmann.

Du nouveau dans la gestion du javascript, avec la découverte d'une astuce qui répond parfaitement aux besoins de ce site : appeler un fichier javascript à la manière des « include » PHP.

Du nouveau sur les notes de bas de page dans les documents web: d'un côté une solution javascript qui reprend le concept d'Andreas Bovens, de l'autre un outil surpuissant très séduisant.

Quelques liens en vrac sur le développement web, de l'utilisation intempestive des listes de définition à la définition de quelques balises html.

En publiant sur le web, on s'expose à toutes sortes de mésaventures : piratage, plagiat, dénigrement, etc. Une de ces calamités, le « hotlinking », consiste à afficher sur un site des images mises en ligne par d'autres via un lien direct.

Ajax, c'est la nouvelle mode dans certains milieux du développement web, une révolution en marche. Pourtant, à y regarder de plus près, le principe ne fait que reprendre des technologies déjà existantes: du javascript, du XML, du DOM. Pire : certains « font de l'Ajax » depuis plusieurs années sans même le savoir !

Les standards de publication web du W3C semblent peu à peu s'installer dans les esprits, que ce soit au niveau des professionnels que chez les simples webmasters publiant un site personnel. Cependant, le résultat peut parfois sembler ambigu quand il conduit à remplacer les lignes et les colonnes des tableaux - pensées pour ranger et hiérarchiser des données et non pour construire la maquette d'une page - par une multitude de conteneurs div.

C'est une question qui me turlupine depuis un moment : comment présenter les notes de bas de page dans un document web de façon à ce qu'elles soient aisément consultables à l'écran, tout en respectant la construction logique du texte ?

L'un des arguments souvent avancé pour convaincre les internautes d'adopter un navigateur web comme Firefox/Mozilla ou Opera en lieu et place d'Internet Explorer, c'est leur meilleur gestion des standards web du W3C. Mais qu'en est-il vraiment ?

Outre les ressources déjà référencées pour le style switcher, le menu déroulant, le design élastique et les fichiers javascript (galerie de photographies et mise en forme de la page d'accueil et des pages de section), outre les références générales sur les standards et les langages web (XHTML et CSS), il m'a semblé opportun de préciser ici d'autres documents utilisés lors de l'écriture du code des pages de ce site.

La présentation du site est actuellement gérée par des feuilles de styles en cascade de niveau 3. Cette troisième version des CSS en est encore au stade d'ébauche et à l'heure actuelle, seule les recommendations css 2 ont fait l'objet d'une publication officielle (une version révisée 2.1 devrait être diffusée dans peu de temps).

De nouveaux petits aménagements dans la maquette du site, minimes certes, mais qui m'ont indirectement amené à reconsidérer la gestion de la mise en forme par les feuilles de styles en cascade.

Travaillant principalement en javascript (pour le plaisir et au boulot) et en java (uniquement au boulot - faut pas déconner !), je suis habitué à la programation par gestion d'événements. Voici une solution que j'utilise en PHP pour retrouver un comportement comparable.

J'ai développé en 2007, au boulot, un composant javascript appelé « InfoBox » qui fait ce qui est aujourd'hui proposé par l'élément details dans les spécifications HTML 5 (et même un peu plus). Cet élément n'est encore implémenté que par très peu de navigateurs web. Voici quelques pistes pour l'utiliser / le simuler.

Petite introduction à l'utilisation de l'élément progress, apparu dans les recommendations HTML 5.

Petit memento sur l'utilisation des caractères unicodes dans différents langages de programmation / structuration / présentation. Un travail en construction...

Une série d'articles ces derniers jours m'a amené à aborder la question des citations dans un document web, et à expliquer les techniques que j'utilise depuis plusieurs années.

Quelques notes rapides et en vrac sur la façon dont je gère des projets CSS depuis quelques temps. Comme il n'existe pas vraiment de standards dans le domaine, il s'agit ici d'une simple habitude de travail.

Petite introduction à la manière dont on peut obtenir le centrage, à la fois vertical et horizontal, d'un élément HTML positionné en absolue.

Récupérer les enfants d'un noeud DOM est moins simple qu'il n'y paraît. Des solutions existent, et les récentes évolutions des spécifications W3C offrent de nouvelles perspectives mais un développeur web a encore besoin de créer ses propres outils. Petit tour de la question.

Travaillant principalement sur un produit permettant de construire des applications web, j'ai souvent dû expliquer à mes collègues issus du monde java le pourquoi du comment du positionnement et de la taille des éléments HTML en CSS. Ceci est un texte rédigé pour expliquer la chose...

Ayant de plus en plus de mal à faire fonctionner l'extension Firefox HTML Validator sous Linux, et parce qu'il faut bien tester un minimum la tenue de son code HTML 5, et qu'il n'est pas toujours possible d'utiliser un service en ligne, j'ai décidé d'installer en local un validateur HTML5. Voici comment faire.

Petite astuce CSS, toute simple et pas très neuve, pour obtenir des listes ordonnées hiérarchisées dont la numérotation reprend celle de l'item parent.

La présentation des tableaux en HTML peut parfois être irritante, surtout lorsque vous souhaitez leur donner une taille précise. Voici quelques petites astuces qui permettent de récupérer une largeur et une hauteur définie.

Et bien voilà : cela à pris plus de temps que prévu, tout n'est pas terminé, loin de là, mais nous lançons aujourd'hui une nouvelle page d'accueil de Framasoft, certains diraient en version « beta ».

Le langage CSS est plutôt simple et intuitif. Mais, en s'habituant à cette aisance d'utilisation, on en oublie parfois certaines de ses subtilités (en tout cas c'est mon cas). En voici une parmi d'autres : la présentation des « enfants » et des « descendants » d'un élément.

Troisième billet de la série sur le développement web local : comment analyser les statistiques de son site à partir des logs Apache que l'on a rapatrier sur son ordinateur.

Cette brève inaugure une série consacrée au développement web local, où comment construire et tester son site sur son ordinateur, puis le mettre en ligne le plus simplement du monde.

Le développement local d'un site dynamique nécessite la mise en place d'un serveur web, Apache en général. Voici quelques petits trucs qui pourront vous faciliter la vie sous Ubuntu/Linux.

Les feuilles de styles servent à mettre en forme n'importe quel élément d'une page web. Pourtant, une balise HTML pose problème : le champ de sélection select utilisable dans les formulaires. Voici quelques pistes pour contourner certaines limites dans le rendu des navigateurs web.

L'utilisation des feuilles de styles en cascade pour mettre en page son site web n'est pas toujours évident, non que cette technique soit compliquée mais parce que, malgré l'existence de normes communes, chaque navigateur n'en fait un peu qu'à sa tête. Heureusement, des solutions existent. Cependant, leur utilisation ne risque-t-elle pas d'entretenir le statu quo ?!

Internet, en tant que nouveau vecteur de contenu rédactionnel, nécessite de repenser des modèles d'édition créés pour d'autres supports. C'est le cas par exemple des « notes de bas de page » : ont-elles encore un sens dans une publication sur la toile mondiale ? Et comment les présenter ?

Une pratique assez courante sur la toile mondiale consiste à représenter des liens, des logiciels ou des fonctionnalités par des boutons. En voici quelque uns de mon crû.

Sur le modèle des pages « Ressources Mozilla » et « Charles Vess, ressources et références », voici une liste de liens qui vous aidera à découvrir les standards de publication sur internet.

Ce plugin pour le CMS PluXml permet d'utiliser WYMeditor pour éditer les articles.

PluXml-UrlRewriting est un bout de code écrit au boulot pour un projet particulier, base d'un plugin PluXml permettant de gérer des urls plus classiques que ce que propose le CMS par défaut.

rnb-php est un ensemble de scripts PHP développés depuis 2005 qui réunissent d'une part des fonctionnalités courantes de manipulations de données (dates, tableaux, requètes HTTP, ...) ainsi que des objets plus spécifiques de gestion de données.

Compilation des différents usages de classes et d'identifiants dans la mise ne forme et la caractérisation d'un document web.

Technique CSS pour présenter une liste de tâches dans une page web en simulant l'état coché (fait) et non coché (à faire).

La librairie javascript rnb regroupe une série de fonctions et d'objets, développés sur le site http://omacronides.com depuis 2004, afin de les intégrer dans une structure commune.

Petite technique CSS permettant de mettre en place un système de notation à base d'étoiles.

IMPORTANT : le projet étant devenu obsolète, il a été supprimé.