Catégorie: Web flux

Notes (117)

Tern Eclipse IDE

La dernière version d'Eclipse, Néon, souffre de nombreux bugs dans sa gestion du javascript à tel point qu'il était devenu plus facile d'éditer mes fichiers dans un simple éditeur de texte comme Gedit. Je me suis donc mis en quête d'un remplaçant. Rapide revue d'effectif et solution envisagée.

PHP : petits soucis avec parse_url

Attention à certains petits soucis quand on veut récupérer le chemin (path) d'une url à partir de la variable globale $_SERVER['REQUEST_URI'] et de la fonction parse_url.

Le blocage des cookies

Une nouvelle mode qui éclot un peu partout sur les sites web, c'est de prévenir les utilisateurs que l'on enregistre des cookies. Le but affiché : plus de transparence et d'honnêteté. Le but (sûrement) recherché : forcer ceux qui comme moi bloquent les cookies par défaut à ne plus les bloquer.

Variables CSS

Un petit point sur les variables CSS, qui sont « officiellement » devenues un brouillon de travail au W3C en avril dernier.

Accordéon en CSS

Petite expérimentation toute simple sur la manière d'obtenir un effet accordéon en css uniquement.

Transition CSS

Petite expérimentation sur la gestion des transitions CSS d'un élément, avec identification de la fin de toutes les transitions.

Opera : combien de transitions ?

Alors que je cherchais à simplifier l'objet javascript qui me sert à gérer les animations, je me suis retrouver face à un problème dont je n'ai pas encore trouver la solution : comment savoir, sous Opera, quand une transition CSS est terminée ?

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.

Open Web

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.

Opera et XMLHttpRequest

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

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

Filtrer une liste

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.

Benchmarks javacript

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

Favicons

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.

php : propriété publique en lecture seule

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.

CSS : background position

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.

En-tête HTTP Accept en PHP

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

Détection de fonctionnalités

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 ne cesse de m'étonner

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.

Les CSS d'abord, le javascript ensuite

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

Console for everybody

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 :

Le javascript m'emmerde !

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

Couleur des bordures et propriétés raccourci

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.

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.

Enfin une bonne nouvelle pour la vidéo sur le web ?!

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.

Pourquoi je reste sous Firefox (que je ne passerai pas sur Google Chrome)

Avec un remarquable billet, Alexis Kauffman, président de Framasoft, vient d'illustrer une tendance que j'ai aussi constaté ces dernières semaines, à travers mes lectures ou par certains usages au niveau professionnel : la possible érosion des utilisateurs du navigateur web Firefox au profit de Google Chrome. Voilà donc pourquoi je resterai sous Firefox :

Pseudo-éléments des images

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.

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.

ParentNode : IE et les autres

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.

Border-radius ou dessiner des cercles en CSS

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.

Négation en CSS

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.

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.

Insérer une balise style en javascript

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.

Include en javascript

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.

News web en vrac

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.

Sur Framasoft : Ajax, qu'est-ce que c'est ?

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 !

Comment lutter contre la Div mania

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.

Références (1) : le sélecteur universel

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.

CSS 3 et liens externes

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

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.

Articles (30)

Select : gérer la sélection multiple

L'élément HTML select manque cruellement de fonctionnalités à partir du moment où l'on active la sélection multiple et que l'on souhaite par exemple limiter le nombre de sélection ou connaître l'ordre des sélections… Voilà donc quelques pistes de réflexions / expérimentations.

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.

Evénément change des éléments select

Analyse et tentative de d'harmonisation du comportement d'un élément select et de l'émission de l'événement change lors de la navigation au clavier sous différents navigateurs web. Où l'on voit que l'action la plus généralement adoptée n'est pas forcément la plus pertinente, surtout quand elle ne suis pas les recommendations W3C...

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.

Programmation d'événements en PHP

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

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.

Organiser un projet CSS

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.

Récupérer les enfants d'un noeud DOM

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.

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

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.

Enfants et descendants en CSS

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.

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.

Des styles en fonction du navigateur

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 ?!

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 (11)

rnb-php

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.

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.

rnb-css

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