Clochix

Aller au contenu | Aller au menu | Aller à la recherche

mardi 26 août 2008

Sélectionner des éléments en JavaScript

Jusqu'à présent, les possibilités de sélectionner directement des élément d'une page web en JavaScript étaient plutôt limitées. On ne disposait que de:

Et c'est tout. Pour tout le reste, il fallait soit se promener dans le document avec les fonctions de parcours d'arbre du DOM (père, fils, frères), soit utiliser XPath, qui est plus lourd et moins simple à appréhender.

Heureusement, the times they are a-changin', et le W3C travaille en ce moment à l'élaboration d'une spécification permettant de sélectionner des éléments au moyen des sélecteurs CSS, c'est à dire de la syntaxe utilisée pour déterminer à quels éléments s'applique un style[1]. Cette spécification crée deux nouvelles fonctions, applicables soit à l'ensemble du document, soit à un seul élément. La première, querySelector(), ramène le première élément correspondant au sélecteur, dans le document ou parmi les descendants de l'élément à laquelle elle est appliquée. La seconde, querySelectorAll(), ramène tous les éléments. Il devient ainsi aisé de sélectionner des éléments en utilisant de nombreux critères.

WebKit implémente déjà cette interface depuis quelques mois, elle a atterri il y a quelques jours dans Firefox 3.1, Opera est OK aussi et, oh mon Richard, ça sera même dans IE 8, je n'en reviens pas !!! (je n'ai par contre pas trouvé l'info pour W3)

- Oui mais, mes utilisateurs n'utilisent pas de navigateurs modernes, qu'est que je peux faire ?
- changez d'utilisateurs ! A défaut, la plupart des bibliothèques et des frameworks javascript implémentent des fonctions similaires... non, oubliez toutes les librairies et les framework JavaScript, tout cela c'était avant John Resig, John Resig, l'homme qui ne dort jamais, qui le vendredi participe au commit du nouveau compilateur JavaScript à la volée de Firefox, le lundi livre une nouvelle version de l'indispensable Firebug, et entre les deux, s'ennuyant sans doute un peu, écrit Sizzle une nouvelle librairie de quelques centaines de lignes qui implémente le querySelectorAll dans tous les navigateurs qui ne le possèdent pas, et avec des performances laissant sur place toutes les précédentes implémentations. Si la programmation était discipline olympique, John mériterait assurément plus d'une médaille, mais heureusement nous n'en sommes pas encore là ;-)

Notes

[1] cf mon rappel sur tous les sélecteurs CSS disponibles

samedi 23 août 2008

TraceMonkey va encore accélérer JavaScript dans Firefox !

Jeter un oeil à ses feeds avant d'aller se coucher peut aider à faire de beaux rêves (mais pas à se coucher tôt :-S). Car en ce moment, les annonces de nouveautés dans le prochain Firefox 3.1 se bousculent, toutes plus excitantes les unes que les autres.

Dernière en date et encore toute chaude: SpiderMonkey, le moteur javascript qui équipe entre autres Firefox, vient de se voir ajouter un mécanisme de compilation à la volée, nom de code TraceMonkey, qui va faire faire un bond aux performances de JavaScript, les rapprochant de celles d'un langage compilé plus que d'un langage interprété.

Toutes les explications dans les billets publiés par quelques-uns des développeurs:

Outre les améliorations de performance des applications web existante, cette avancée ouvre également de nouvelles perspectives, dont les billets précédents donnent un aperçu:

  • la réalisation en JavaScript d'applications demandant beaucoup de ressources, comme par exemple la manipulation d'image
  • l'apparition de nouvelles applications utilisant Canvas
  • l'apparition de nouvelles applications pour les périphériques mobiles. Javascript pourrait bien devenir le langage par excellence pour développer sur ces plate-formes.

Longtemps un peu méprisé, JavaScript est aujourd'hui le langage qui monte, même si on peut regretter que des considérations politiques ralentissent ses évolutions[1]

Avec le support natif du son et de la vidéo, via les balises audio et video[2], l'implémentation de l'API Selectors (qui permet de sélectionner un nœud dans le DOM au moyen des sélecteurs CSS), le support accru de CSS3, et tout ce qui est encore dans les tuyaux, Firefox 3.1 s'annonce déjà comme une révolution bien plus importante que la faible incrémentation de son numéro de version ne pourrait le laisser penser. Et il devrait sortir avant la fin de l'année. Je ne comprend pas qu'il puisse encore rester des utilisateurs d'IE...

Notes

[1] cf mon billet sur Harmony. J'ai depuis découvert le wiki officiel où l'on peut suivre l'évolution de la spécification, les propositions d'évolutions, les comptes-rendus de réunion, etc. Passionnant

[2] voir par exemple une annonce ici et une analyse

mercredi 30 juillet 2008

Sélecteurs CSS 3 dans Firefox

Dans le flot continue de saloperies toutes plus déprimantes les unes que les autres qui déferlent sans trêve par tous les canaux surnagent quelques îlots de béatitude, quelques raisons d'espérer un avenir radieux. Le flux des commits dans le tronc de Firefox est de ceux-ci. Une première version alpha de Firefox 3.1 vient de sortir, et parmi les nouveautés signalées par Laurent, 2 ont particulièrement retenu mon attention: Firefox implémente à présent complètement un des modules de CSS3, les sélecteurs, et une API permettant de les utiliser pour sélectionner des éléments dans un document. L'occasion de revenir sur ce concept de sélecteurs en résumant (mal) la spec

Lire la suite...

lundi 14 juillet 2008

Créez vos prototypes d'interface dans Firefox avec Pencil

Je cherche depuis très longtemps un outil libre pour créer rapidement des prototypes d'interface ou de pages web à insérer dans un storyboard. J'ai essayé différents outils de dessins comme Dia ou de conception (Nvu), sans jamais en trouver qui me satisfasse vraiment.

Je découvre aujourd'hui un petit nouveau, Pencil, qui m'a l'air prometteur. Il permet de créer des pages, d'y insérer des composants et d'enregistrer le tout sous forme d'images PNG. Les composants fournis couvrent la majorité des besoins des interfaces classiques: zones de textes, images, champs de formulaire, etc. On peut modifier les propriétés des éléments, les re-dimentionner, les faire pivoter, soigner leur disposition (alignement, chevauchement, etc). Il est également possible d'insérer des annotations sur la page. Bref, tout ce qu'il faut pour décrire rapidement une interface en quelques clics.

A l'usage, Pencil se révèle à la fois simple et pratique. Il faudra bien sûr que je l'essaie sur de vrais projets, mais le premier contact est plutôt positif.

Techniquement, Pencil utilise le moteur de rendu Gecko, qui motorise Firefox. On peut donc l'installer comme une extension Firefox (un fichier xpi de moins de 400ko !), ou comme une application à part entière, qui s'exécute grâce à XULRunner. Bien que relativement jeune, le projet dispose d'une interface soignée et d'un site web avec quelques documentations.

Pencil est un projet libre (sous GPL v2), et les développeurs viennent de rendre le source accessible sur Google Code.

XUL, GPL, je crois bien que je vais l'adopter ;-) Hop, un petit exemple de l'interface:

Exemple de prototypage d'une page web avec Pencil

dimanche 13 juillet 2008

Firefox, même les chats l'adoptent

Un peu de guimauve pour changer, on en a bien besoin.

Une môman panda rouge s'est aperçu, mais un peu tard, de la plaie que c'était d'avoir des gosses. Passer des années à s'en occuper, les torcher, gérer les problèmes de piercing, de drogue, financer les dépassements de forfait et les réorientations successives à la fac... Elle a donc choisi d'émanciper ses 2 mômes dès la naissance et de les laisser vivre leur vie. L'un n'y a pas survécu, l'autre a été adoptée par une chatte qui venait d'avoir quatre chatons. Bel exemple de fraternité !

Je ne me lasse pas de regarder les photos (par exemple ici ou ) et surtout la vidéo[1] sur le site du zoo d'Artis, à Amsterdam.

Keski sont mignons :-)

(merci à Asa pour le lien)

Notes

[1] hélas à un format propriétaire :-(

mercredi 23 janvier 2008

Couac : site de test

Pour celles et ceux qui ne veulent ou ne peuvent pas installer Couac, j'ai mis en place un site de démo : https://couac.clochix.net.

Ce site me sert également à tester le nouveau service d'hébergement proposé par Gandi. La durée de vie de cette démo dépendra de son usage (je vais essayer de surveiller un peu le bouzin pour ne pas qu'il soit utilisé pour envoyer des spams) et de l'évolution de tarifs de Gandi (7€/mois c'est bien, si le prix final monte à 12€ je regarderai sans doute du côté de la concurrence).

Avertissement :

  • en utilisant ce service, tous les mots de passe de vos comptes passeront sur le serveur, ils sont donc susceptibles d'être interceptés par un être malveillant, moi (je m'engage évidemment à ne pas le faire, mais vous ne me connaissez pas donc ne pouvez guère me faire confiance) ou quelqu'un qui accéderait au serveur. A utiliser donc à vos risques et périls...
  • cette démo est branchée sur la branche de développement de l'application, donc susceptible de changer de jour en jour. Ne l'utilisez pas dans un contexte de production.

Au menu des dernières évolutions de Couac:

  • grâce à Goofy j'ai commencé à traduire l'interface en anglais. Je me heurte malheureusement à certaines limitations de la plate-forme Gecko auxquelles il faudra que je consacre un billet un de ces jours. Donc pour l'instant seule l'interface est partiellement traduite en anglais et français, tous les messages restent en français.
  • j'ai intégré des icônes du projet Tango pour égayer un peu l'interface
  • le client Jabber permet de se connecter à des serveurs qui utilisent le chiffrage SSL, par exemple GTalk
  • webmail : on peut à présent enregistrer localement un message au format définit par la RFC822 (fichiers .eml que l'on peut ouvrir avec d'autres logiciels), l'imprimer, les ouvrir dans un nouvel onglet (de l'appli), naviguer entre les messages avec les touches fléchées...
  • quelques émoticônes sont reconnus dans les conversations Jabber et les mail
  • le client MySQL permet l'insertion et la mise à jour de plusieurs lignes à la fois (c'est tout neuf et sans doute encore très instable). Les résultats peuvent être filtrés localement (cette nouvelle fonctionnalité de filtrage devrait être étendue à tous les arbres... un jour). Les requêtes et leur résultat peuvent être dupliqués dans un nouvel onglet
  • ...

Et Prism ? Euh, pour l'instant Couac se comporte assez bizarrement avec Prism, et pour tout dire n'est pas utilisable. Je n'ai pas encore eu le temps de creuser pour essayer de comprendre pourquoi, toute aide sera la bienvenue (de toute façon, pour l'instant Prism ne fonctionne pas avec les certificats auto-signés, donc vous ne pourrez pas utiliser le serveur de test avec Prism).

Tout cela est susceptible de changer, car je fourmille d'idées en ce moment, manque juste comme toujours le temps de les coder. Je relance donc un appel pour trouver :

  • de gentils mécènes prêts à m'entretenir
  • de gentils testeurs pour me signaler les problèmes et m'aider à améliorer ce machin
  • de gentils rédacteurs pour rédiger des documentations, des traductions, etc

mercredi 12 décembre 2007

Ya un Couac, ou la naissance d'une appli web

Ce blog est en sommeil depuis longtemps, par manque de temps pour m'en occuper. La faute au salariat et à ma plongée pendant quelques mois dans le codage d'une application web, Couac. Aujourd'hui, elle a atteint un niveau qui commence à la rendre utilisable, même si je butte sur une erreur de choix architectural qui risque de lui être fatale. Et comme je n'ai plus guère de temps pour m'en occuper, il est temps que je la rende publique, dans l'espoir qu'elle puisse servir et que d'autres contributions viennent l'améliorer.

Lire la suite...

mercredi 8 août 2007

Firefox 3 implémente les "cross site XMLHttpRequest" !

En parcourant la liste des évolutions de la dernière version de test de firefox (FF 3a7) j'ai eu la surprise de tomber sur cette note : Cross site XMLHttpRequest specification implemented. Firefox 3 pourra utiliser XMLHttpRequest pour envoyer des requêtes ailleurs que sur le site d'origine de la page !

Lire la suite...

page 3 de 3 -