Clochix

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

mercredi 8 octobre 2008

La géolocalisation arrive dans Firefox !

Les Laboratoires Mozilla viennent d'annoncer Geode, une extension permettant à un site web de savoir où vous êtes, avec votre accord bien sûr. A défaut d'avoir pu la tester, voici une rapide présentation de ce que promet l'annonce.

Lire la suite...

mardi 30 septembre 2008

Quelques nouveautés de Firefox 3.1...

Si vous ressentez un petit coup de froid cette nuit, c'est normal, c'est à minuit qu'interviendra le gel du code précédant la sortie de la première béta de Firefox 3.1, Shiretoko pour les intimes. L'occasion de citer en vrac quelques unes de ses nouveautés dont je n'ai pas encore parlé...

Lire la suite...

dimanche 14 septembre 2008

Les transformations CSS3 seront aussi dans Firefox 3.1

A l'automne 2007, Apple a proposé de nouvelles propriétés CSS permettant d'effectuer des transformations (translations, rotations, redimensionnement) sur des éléments, et en a implémenté une partie dans Webkit. Certaines de ces nouvelles propriétés sont en train d'atterrir dans Firefox 3.1.

Lire la suite...

mardi 9 septembre 2008

Jouons avec HTML5, XBL et la sémantique

A chaque fois que j'écris W3C, j'ai le même problème: c'est un acronyme, donc il faut que je précise sa définition. Et puis un lien, c'est bien. Oui mais lequel ? Le site ? La description sur Wikipedia ? Et à chaque fois je me dis qu'il serait grand temps que des langages permettant de préciser la sémantique émergent vraiment. En attendant, j'ai joué avec HTML5 et XBL pour ajouter un peu de sémantique. Je sais qu'il y a déjà de nombreux moyens d'ajouter de la sémantique à un texte, les micro-formats, RDF, mais je voulais voir si certaine nouvelle fonctionnalité d'HTML5 était également exploitable. Réponse à la fin du billet.

Lire la suite...

samedi 6 septembre 2008

Le multithreading javascript arrive dans Firefox !

Jusqu'à présent, JavaScript ne savait faire qu'une seule chose à la fois, et un traitement long pouvait temporairement bloquer le navigateur. Les développeurs de Firefox ont commencé à intégrer une nouvelle spécification du group de travail sur HTML5, Web Worker, qui permet d'exécuter des traitements JavaScript en tâche de fond, parallèlement au traitement principal et donc sans incidence sur la réactivité du navigateur.

Lire la suite...

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

dimanche 10 août 2008

Au pixel près

J'ai découvert récemment Pixel Perfect, une extension pour firebug qui permet d'afficher une image au dessus d'une page web, par exemple pour comparer la page avec sa maquette. J'ai trouvé l'idée excellente, mais comme la route est toujours plus intéressante que l'arrivée, comme c'est toujours meilleur quand c'est fait à la maison[1], j'ai essayé d'écrire un équivalent sous forme de bookmarklet javascript[2].

Vous trouverez le résultat ici : https://labo.clochix.net/wiki/labs/.... Si vous l'utilisez, je vous conseille de compacter le script avant de le déposer sur un serveur. Ca ne fonctionnera que sous Firefox et n'a été testé qu'avec la version GNU/Linux d'icelui.

Ce script vous demande l'url d'une image, les coordonnées où l'afficher et l'opacité. Ces informations sont enregistrées dans la session Firefox pour que vous n'ayez pas à les ressaisir à chaque fois. Vous pouvez ensuite, au moyen de raccourcis clavier, déplacer l'image, la masquer, modifier sa taille et son opacité, etc. Simple mais pratique.

Si vous avez des idées d'améliorations, n'hésitez pas...

PS: au passage, ce script marque l'ouverture d'une forge de test basée sur Redmine, j'y reviendrai très bientôt

Notes

[1] sauf quand c'est moi qui cuisine

[2] une méthode pour exécuter un script dans une page en le stockant dans un marque-page, cf http://fr.wikipedia.org/wiki/Bookma...

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

mercredi 23 juillet 2008

Une gestion d'évènements pas à la hauteur DOM

Le DOM est une méthode pour représenter un document sous forme d'objets arborescents. Cette méthode est par exemple utilisée pour manipuler des documents XML ou des pages web en HTML. Plusieurs spécifications ont défini le modèle, des méthodes pour y accéder, le modifier, etc. L'une d'elles permet de gérer des évènements survenant sur les objets. Malheureusement, j'ai toujours trouvé cette spécification étonnamment incomplète. Elle présente à mon sens 2 lacunes:

  • elle ne permet pas de connaître les guetteurs associés à un événement
  • elle ne définit pas, ou mal, ce qui doit arriver à ces guetteurs lors de manipulations du document.

La méthode de gestion retenue est en effet de permettre d'attacher à chaque objet des guetteurs qui seront appelés quand surviendra un événement. Malheureusement, la spécification ne dit pas ce qui doit arriver à ces gestionnaires quand l'objet est déplacé, par exemple dans un autre document, ou dupliqué. Chaque implémentation de la spécification a donc dû décider de l'attitude à adopter dans ces cas. Dans le cas de Firefox, les guetteurs sont perdus en cas de déplacement du nœud dans un autre document (par exemple lorsqu'on essaie d'insérer dans une fenêtre popup des éléments générés dans la fenêtre mère), ou lorsqu'on le copie (la spécification indique effectivement quand un objet Node est recopié en utilisant la méthode cloneNode, les guetteurs EventListener attachés à l'objet Node source ne le sont pas sur l'objet Node copié, cf la définition des guetteurs.

Petit exemple: imaginons que l'on ait besoin de créer dynamiquement un formulaire permettant à l'utilisateur de saisir un nombre quelconque de réponses, chaque réponse étant l'objet d'une validation. Cela pourrait se coder ainsi:

<!-- Création du formulaire -->
<form id="my_form">
<input type="button" id="button_add" value="ajouter" />
</form>
<script type="text/javascript">
function init(){
  // on crée une ligne permettant la saisie
  var _div = document.createElement("div");
  var _input = document.createElement("input");
  _input.setAttribute("type", "text");
  // on attache un guetteur qui affiche la saisie quand le curseur quitte la zone
  _input.addEventListener('blur', function(){alert("la valeur saisie est : " + this.value);}, false);
  _div.appendChild(_input);
  // on insère la première ligne
  document.getElementById("my_form").appendChild(_div);
  // chaque pression sur le bouton insérera une nouvelle ligne
  document.getElementById("button_add").addEventListener('click', function(){document.getElementById("my_form").appendChild(_div)}, false);
}
</script>

Ce code ne fonctionnera pas. En cliquant sur le bouton "Ajouter", on insère bien une copie de la première ligne, mais le guetteur censé valider la saisie n'a pas été recopié par le cloneNode.

Cet exemple est bien sûr trivial, il suffirait, après le clonage, d'ajouter un nouveau guetteur sur le champs de saisie. Mais cela suppose de connaître tous les guetteurs qui ont été associés, potentiellement par d'autres portions de code, au fragment cloné. En l'absence d'interface pour connaître ces guetteurs. le problème est difficile à résoudre. C'est pour le contourner que je me suis enfin intéressé à XBL, dont je vous parlerai dans les prochains jours (ce billet ne servait qu'à liquider ce problème auquel je me suis heurté vainement pendant pas mal de temps en codant Couac )

(toute ceci ne concerne que Firefox. Il parait que les récentes versions du malware au 'e' bleuté dupliquent les guetteurs lors d'un cloneNode. Je n'ai pas été vérifier)

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

- page 1 de 2