Exotech.biz - Dév

Raphaël JS, une librairie Javascript vectorielle

Bastien Labelle — Sat, 05 Dec 2009 15:22:00 +0100

Raphael JS, c'est une librairie Javascript Open Source, qui permet de manipuler des objets SVG et facilite ainsi la manipulation d'objets vectoriels, comme on peut le voir dans la démo ci-dessous (cliquez sur l'image pour avoir un aperçu de ce que ça donne en live).

Le rendu est tout simplement bluffant, et la fluidité (du moins sous Firefox) est exceptionnelle, autant dire que cette librairie Javascript n'a absolument rien à envier à Flash.

On utilise malheureusement trop souvent le Flash pour afficher des données vectorielles. Google Analytics est l'exemple parfait, où les graphiques sont générés grâce à du Flash. Pourtant, on oublie très souvent qu'il existe des standards autour des données vectorielle, le SVG qui est notamment géré par Raphael JS. On l'a récemment vu assez souvent, couplé à du Javascript, cela peut donner de très belles choses, je pense notamment au Chrome Experiments, la galerie de démonstration de Javascript de Google pour son navigateur.

Espérons qu'à l'avenir, de plus en plus de solutions telles que Raphael JS soient implémentées, pour un web plus propre!

Un framework de CSS de haut niveau?

Bastien Labelle — Wed, 28 Jan 2009 08:00:00 +0100

Le CSS est une des technologies que j'apprécie le plus, car elle permet de séparer le fond (le HTML/XHTML) de la forme. Et il y a quelque chose que j'apprécie de plus en plus, ce sont les frameworks CSS. Un que j'aime beaucoup notamment est 960 Grid System, car il permet de faire du wireframing très rapidement. Ce n'est pas le seul, je sais qu'il en existe des dizaines, et chacun a ses avantages et ses inconvénients.

Je suis déjà en train de réfléchir à ma prochaine Webapp (yet another project with Cédric!!), pour laquelle je devrais développer une zone d'administration. Et j'étais en train de penser qu'il n'existe à ma connaissance aucun framework CSS de haut niveau. Par haut niveau, j'entends un framework CSS qui ne gère pas seulement le positionnement des éléments comme 960 Grid System, ou encore des composants comme SenCSS, un framework qui gère le design entier.

J'apprécie beaucoup l'administration automatique sous Django. Sous Django, toutes les interfaces d'administrations sont les mêmes. Bien évidemment, elles sont modifiables, mais l'administration de Django est tellement productive que je pense stupide et improductif de perdre du temps à la modifier, puisqu'elle est par défaut relativement bien. Mais Django est un framework Python, et ce dernier est un langage côté serveur.

Mais c'est Django qui m'inspire. Car quand on doit travailler dans un autre langage, avec un autre framework, il faut parfois développer soi-même ses propres CRUD. Existe-t-il un framework CSS (en fait un design CSS) open source qui permettent de générer des zones d'administrations rapidement? Car j'avoue avoir la flemme de tout faire moi-même. Soit mes interfaces d'administration n'ont aucun design, soit je perds un temps fou à les développer.

Un framework CSS de haut niveau permettrait de rationaliser et de normaliser le développement XHTML, et avec l'expérience et la réutilisation, de gagner en productivité.

Je ne sais pas si ce genre de chose existe, mais si ce n'est pas le cas, je risque fortement de songer à développer un framework CSS spécialement pour les zones d'admin!

Crédit Photo: Simon Pow

PS: En rédigeant ce billet et faisant des recherches, j'ai trouvé Schema (prononcez Skima!!), un framework CSS haut niveau, même s'il ne correspond pas vraiment à mon besoin. A creuser...

Mocha UI

Bastien Labelle — Thu, 06 Dec 2007 20:45:00 +0100

Je vous présente une petite library Javascript réalisée par Greg Houston, qui se nomme Mocha UI. Cette librairie permet de créer dynamiquement de petites fenêtres déplaçables, un peu à la manière de Protopage. Une option full screen est disponible, et les arrondis des fenêtres sont réglables. Mais ce qui est très fort c'est que Mocha UI n'utilise aucune image: tout est géré par l'élément Canvas. En parlant de cette balise, je tenais à signaler la petite erreur sur Wikipedia sur la page française de la balise Canvas: Canvas est une balise en vue d'être standard dans HTML5.

Mais oubliez vite cette petite digression technique, et allez plutôt voir de vous même de quoi Mocha UI est capable!

Note: Mocha UI fonctionne avec Mootools, (j'avais oublié de le préciser)

Fancy Form et la problématique des formulaires sexy

Bastien Labelle — Mon, 26 Nov 2007 08:00:00 +0100

En faisant quelques recherches sur les formulaires et leur présentation, je suis tombé par hasard sur Fancy Form. Il s'agit d'un petit script javascript qui permet de web2.0-ifier nos formulaires, en fait les radio buttons et les checkboxes (plus d'éléments sont prévus pour les prochaines versions), en les remplaçant par des icônes terriblement plus sexy, jolis et so web 2.0. La page de démonstration nous montre très clairement la différence avec un formulaire classique.

Si vous me connaissez un temps soit peu (Fred Roy, si tu passes par ici, tu es le bienvenu pour me corriger si jamais ça ne s'écrit pas comme ça), vous connaissez certainement mon goût pour les belles UI, et vous vous dites donc très certainement que je présente ce script car je trouve ça joli.

C'est vrai que le rendu des formulaires est vraiment très joli, et de très bon goût (les icônes Silk de Famfamfam.com y sont pour quelque chose). Cependant, je ne suis pas persuadé qu'il faille implanter de telles modifications dans les formulaires: ici, il on aborde plutôt la problématique de la gestion du changement. Je m'explique: la première fois que j'ai visité le site, j'ai trouvé le design agréable, mais je n'ai pas compris de suite (avant de lire) de quoi il s'agissait. Je n'ai reconnu ni checkboxes, ni radio buttons. A trop vouloir personnaliser certaines choses on perd l'utilisateur, c'est le cas avec ce script. J'aurais plus tendance à penser que les icônes des checkboxes sont des icônes de validation de formulaire en AJAX, et les radio buttons me font plus penser à des listes classiques.

Le choix des icônes, c'est donc très important, il faut toujours garder à l'oeil la sémantique de ceux qu'on choisit.

Note: Je ne suis peut-être aussi qu'un vieux crouton © conservateur...

Infos du net: l'exemple de migration à ne pas suivre!

Bastien Labelle — Fri, 05 Oct 2007 14:24:00 +0200

Vous le savez peut-être (ou pas), mais Infos du net a fusionné avec Best of Micro pour devenir Tom's Guide, et fait partie intégrante du mythique Tom's Hardware Group (ceux qui avaient le net il y a une douzaine d'années comprendront certainement pourquoi je dis mythique).

Sauf que depuis quelques jours, le flux RSS d'Infos du net que j'avais dans mon Netvibes ne marche plus. Le pire, c'est qu'il y a encore le lien sur le site, qui renvoie vers une 404...

Je me suis dit au début que ce n'était rien, que le site était HS, mais après plusieurs jours, je me suis quand même penché sur le problème, et j'ai découvert que le site avait changé, la réécriture sur les articles était OK, mais pas les flux RSS! Un bon exemple de ce qu'il ne faut pas faire!

Pourtant c'est pas compliqué d'écrire des règles de redirection... Il leur faudrait peut-être un expert en gestion du changement!

Note: du coup j'ai enlevé le flux de Netvibes, bien fait pour eux!

Widget ReInvigorate pour Dotclear 2 (et premier test de Snoop)

Bastien Labelle — Sat, 14 Jul 2007 02:38:00 +0200

J'ai enfin testé le client lourd de ReInvigorate, j'ai nommé Snoop. Franchement bluffant. C'est génial de pouvoir tracker les visiteurs en direct live!!!

J'en ai profité pour créer un widget pour Dotclear 2 afin de pouvoir exploiter Snoop. Il est basé sur le widget de Nicolas Mérouze (Boldr), et reprend son principe essentiel. J'avais déjà fait ce widget pour tester Reinvigorate sur mon ancien blog (orienté musique électronique). Aujourd'hui je le publie, il est en version 1.1. Il est spécifique à Dotclear 2, et le numéro de version est dû à la prise en compte l'évènement "nouveau commentaire". Vous le trouverez en annexe de ce billet.

Le blog du créateur de Pack-It ne marche pas actuellement, je ne peux donc vous fournir une version packagée (je n'ai pas installé Pack It dans mon Dotclear), je vous livre donc seulement une archive . Si un âme généreuse passe par ici, je suis preneur!

Pensez à me faire un feedback, si jamais vous l'utilisez!

Note: Je viens de noter que DC2B7 est sorti, ce plug-in étant juste une adaptation, quelqu'un saurai-t-il me dire si mon plug-in est compatible avec cette dernière version? (en tout cas, le mien marche avec les versions supérieures à DC2B4, à priori!)