Tag: html

Notes (30)

Un élément HTML 5 dialog

Un nouvel élément HTML 5, dialog, est en cours de définition ; il correspond exactement à un objet de ma librairie javascript (FloatPane) et à ce qui se fait par ailleurs couramment dans les interfaces graphiques : une fenêtre de dialogue.

Effet de vague sur une liste d'items

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...

Traversée aléatoire des éléments

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.

Sélecteurs, identifiants et classes

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 ?

HTML5 pour les développeurs

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.

Bug sur les champs texte dans Firefox

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.

Evolution du code

La dernière phase de mise à jour du site touche à sa fin avec le remaniement de la maquette. De petites modifications dans la forme mais aussi dans la structure des pages.

Menus de navigation : sémantique, structure, implémentation ?

Parmi les thèmes en vogue, la structure à donner à un menu de navigation fait régulièrement couler beaucoup d'encre, et donne lieu à des solutions aussi diverses qu'inventives : listes ordonnées, listes de définition, paragraphes… Tout ou presque est mis à contribution dans la recherche d'une structure que l'on voudrait à la fois valide, sémantique, accessible, belle et ergonomique.

Laurent Denis, « Menus de navigation (1) : sémantique, structure, implémentation ? », Blog & Blues, 06 novembre 2004.

Des identifiants en moins

Poursuite du nettoyage du code des pages du site, avec la suppression d'identifiants inutiles. Si le gain en taille est anecdotique, cela simplifie tout de même la lecture des sources.

Des corrections nécessaires

Commençons donc par le commencement: le petit lifting subie par le site. En dehors de l'envie de changer, une nouvelle maquette s'avérait nécessaire pour plusieurs raisons.

Articles (18)

HTML : details

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.

Objet javascript vs DOM

Pour créer un comportement graphique qui n'existe pas nativement dans un document web, on peut soit écrire un objet javascript dédié, soit se reposer sur les objets DOM disponibles. Comparaison des 2 techniques.

Click sur des labels

La délégation d'écoute d'événements est très préciseuse en javascript mais, dans certains cas, elle peut engendrer des comportements particuliers. C'est le cas si l'élément sur lequel on écoute les événements « click » possède un label.

HTML : citations et références

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.

Position absolue et taille des éléments HTML

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...

Omacronides 5

Après des mois passés à tripatouliier le code (et donc, comme d'habitude,sans écrire grand chose), voilà enfin une nouvelle évolution du site. Outre les habituelles corrections de bugs et évolutions mineures, deux changements majeurs : le pasage au HTML 5 et la gestion de données au format JSON.

Dimensions des tableaux HTML

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.

Mettre en forme une balise select

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.

HTML : footnotes

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 ? Et comment les présenter ?

Projets (2)

Simple Slides

SimpleSlides est un projet tout simple, un POC pour illuster la manière dont on peut réaliser rapidement une visionneuses d'images avec du HTML, un peu de CSS et de javascript. Sa seule ambition est d'éventuellement servir de base à des projets plus aboutits et complets.