Mirmo Dynamics - Tag - interfaces utilisateurs

Ergonomie d'un blog

Geoffrey — Tue, 06 Feb 2007 10:27:00 +0100

Petite étude rapide sur l'ergonomie des blogs, chez Biologeek. Le panel représentatif est peut-être un peu faible, mais l'analyse compense :-)

Linux + gVim + Rox-filer = Mon IDE.

Geoffrey — Tue, 28 Nov 2006 22:39:00 +0100

Une des questions cruciales qui se pose à tout développeur à au moins un moment de sa vie (souvent plusieurs en fait) est le choix d'un environnement de développement. J'en ai testé pas mal, plus ou moins longtemps, et bien que je ne sois jamais complètement satisfait, l'idée de perdre du temps à développer le mien m'indispose. J'ai donc opté pour l'environnement qui me va le mieux: Linux + gVim + Rox-filer.

Note: je ne couvre pas ici les fonctionnalités de débuging avancé, que je n'utilise pas encore, mais pour lesquelles j'ai déjà en tête des solutions qui me conviendront bien mieux que les outils intégrés à un quelconque IDE (je pense fortement à Xdebug).

Comment définir un IDE ?

Commençons par le début: qu'est-ce qu'un IDE ? Acronyme de Integrated Development Environment, le terme peut prendre pas mal de signification selon la personne à laquelle on s'adresse. Pour certains, le plus c'est le mieux, alors que pour d'autre, le moins c'est le pas plus mal finalement. On pourra citer quelques exemples connus d'IDE full-featured, tels que les incournables Zend Studio, Eclipse et autres phpEdit, mais ce n'est pas le but de cet article. Ici, je vais vous expliquer pourquoi et comment j'utilise quotidiennement gVim et Rox-filer, et le tout sous Ubuntu.

Revenons en à nos moutons, un environnement de développement, c'est constitué de quelques briques primordiales:

Un éditeur de code
Un navigateur de fichier
Un truc qui fait tourner tout ça

Peu importe qu'ils soient intégrés ou non, finalement. Personnellement, je suis un fervent adepte du précepte une tâche, un outil, donc je preferre qu'ils soient dissociés.

L'éditeur de code: gVim

Certains perdent leurs moyens à la simple évocation de son nom, vim n'est pourtant rien de plus que le plus puissant des éditeurs de fichier aujourd'hui disponible dans le monde (un troll s'est malicieusement glissé dans cette affirmation, saurez-vous le retrouver ?). Ce qui déroute au premier abord dans vim, c'est finalement ce qui fait toute sa puissance: le mode commande. J'ai longtemps utilisé bluefish, et finalement las de ses quelques bugs bien énervants (wtf syntax color ?), j'ai décidé de faire le grand pas, et d'utiliser vim. J'avais bien sur déjà une expérience de cet éditeur, mais retenez bien que le meilleur moyen de maitriser un outil aussi puissant que vim, ce n'est pas de se jeter à corps perdu dans la doc, mais c'est d'investir du temps incrémentiellement: commencer à utiliser vim, et quand on souhaite faire quelque chose qu'on ne sait pas faire, lire la doc correspondante^[1]. Pour finir, j'ai traduit il y a quelque temps un excellent tutoriel sur vim: L'édition efficace avec vim, donc n'hésitez pas.

Un .vimrc qu'il est joli

Comme la plupart des applications *nix, vim autorise l'utilisation d'un fichier ~/.vimrc. S'il peut paraitre compliqué au premier abord d'élaborer un .vimrc efficace, il ne faut pas se décourager, car comme d'habitude, il y a tout ce qu'il faut sur le net. J'en veux pour preuve les excellents articles de Tobias Schlitt à ce sujet.

Pour info, quelques directives de configuration utiles qu'on peut trouver dans mon .vimrc:

" Supprime un buffer de la mémoire via le raccourci clavier Ctrl+W
noremap <C-W> :bdel!<CR>

" Active l'indentation automatique
set autoindent

" Active les plugins de type de fichier
filetype plugin on

" Active la coloration syntaxique
syntax on

" Thème de couleur pour gVim
colorscheme desert

" Utiliser des tabs de 4 caractères pour l'indentation
set noexpandtab tabstop=4 shiftwidth=4

" Activer la souris (molette, sélection, etc)
set mouse=a

" Afficher des infos dans la barre de status
set ruler
set laststatus=2

" Activer la numérotation des lignes
set number

" Utiliser la recherche incrémentielle
set incsearch

" Ne pas surligner les résultats de recherche
set nohlsearch

Quelques unes (beaucoup en fait) de ces directives sont tirées du .vimrc de Tobias.

Dernier détail pour les réfractaires de la ligne de commande, gVim s'execute en mode graphique, avec une interface GTK conviviale qui permet d'apprendre les raccourcis aisément, et qui gère la souris (défilement à la molette, etc, et d'ailleurs, même en console ça gère la souris, il suffit d'un :set mouse="a" pour l'activer).

Un ftplugin pour le PHP

Ce qu'on appelle ftplugin dans vim permet de configurer vim en fonction du type de fichier que l'on édite. Tobias fournit un ftplugin spécialisé dans l'édition du PHP plutôt bien foutu, qui gère la plupart des features convi-enabled des soit disants IDE évolués:

Complétion des fonctions
Complétion des mots-clés
Auto-fermeture des crochets, parenthèses, etc.
Auto-génération des docblocks PHPDoc
Vérification de syntaxe du fichier édité
Et d'autres trucs merveilleux !

La classe non ?

Un navigateur de fichier kirox (tm)

C'est pas moi qui le dit, en fait c'est comme le port-salut, rox-filer rox, c'est tout. Pour ceux que ma puissance de persuasion ne suffit pas, et bien rox-filer offre tout ce que vous pourriez attendre d'un gestionnaire de fichier moderne:

Navigation spatiale avec technologie oupas (tm)
Prévisualisation des images
Personnalisation (aisée !) des applications utilisées pour lancer les fichiers (en fonction du mimetype)
Navigation one-click (oupas (tm))
Navigation aisée au clavier
Monitorage des fichiers en cours d'utilisation (ils apparaissent en gras, ce qui est pratique).
Et j'en passe et des meilleurs.

Bref, il fait tout ce que ferait un filebrowser intégré, mais en mieux, puisqu'il est dédié dès le début à cette tache. Afin de le faire interragir au mieux avec gVim, j'utilise la Run action suivante sur le mimetype text/*:

gvim --servername ash0 --remote-silent-tab "$@"

Qui permet d'ouvrir le fichier dans un nouveau tab de vim, en créant une instance d'un server vim à la volée si il n'existe pas déjà (ici le server s'appelle ash0, mais vous pouvez bien évidemment en changer le nom).

Une distribution du bien: Ubuntu

Et parcequ'il faut bien faire tourner tout ça, j'utilise un système d'exploitation du bien (tm): GNU/Linux. Mais comme j'ai la flemme, j'utilise une configuration convi-enabled: Ubuntu. Pas besoin de s'étaler je pense, Ubuntu c'est bien, tout le monde en conviendra.

Un window-manager léger et puissant: fluxbox

Le choix du gestionnaire de fenêtre peut par contre préter a controverse. En effet, c'est ici avant tout une question de gout et de puissance de machine. J'ai personellement un penchant pour les logiciels puissants et légers. Là je vous vois venir avec vos gros sabots: tout le monde veut ce genre de logiciel. Et bien j'ai envie de répondre que non. La majorité des neo-geeks de la génération Ubuntu s'en donnent à coeur joie sous Gnome et/ou KDE, qui est loin de ce qu'il convient d'appeler un logiciel puissant et léger, sous prétexte que les autres WM (à part KDE), saitrocomplicai. Bon là ok, j'amalgame surement un peu (beaucoup même, tous les gens sous Gnome ne sont pas des neo-geek, et l'inverse également), mais il manquait un peu de trollitude dans cet article. Bref, quand on veut, on peut, et comme les gens ne switchent pas de Gnome à un WM plus puissant et plus léger, j'en conclus (peut-être à tord hein) qu'ils ne veulent pas.

Tout ça pour dire que j'utilise fluxbox, et ce depuis ma plus tendre enfance. Fluxbox est léger (osez prétendre le contraire...) et puissant: il permet:

de reconfigurer l'intégralité du comportement de vos fenêtres
une gestion fine et puissante des raccourcis claviers (j'ai pu reconfigurer les touches convi de mon clavier convi en quelques minutes dans mon .fluxbox/keys grâce à xev).
de controler facilement quelles applications se lancent au démarrage
de controler encore plus facilement sur quels bureaux se lancent les sus-citées applications

Par exemple, mon .fluxbox/startup démarre sur le premier bureau quelques terminaux, un gaim et un exaile; sur le deuxième bureau un firefox sur le troisième bureau: sylphee, et sur le quatrième bureau, un rox-filer. A coté de ça, je dispose de raccourcis claviers conviviaux pour lancer mes logiciels favoris: le terminal (Mod4^[2]+e), rox-filer (Mod4+r), etc. J'ai également à ma disposition des raccourcis claviers pour gérer mes fenêtres: maximiser (horizontalement (Ctrl+Alt+H), verticalement -Ctrl+Alt+V), ou les deux (Ctrl+Alt+M)), enrouler (Mod4+S), sticker (Ctrl+Alt+S), enlever les décorations (Ctrl+Alt+T), et j'en passe.

Enfin, et le plus important pour moi, fluxbox est non-intrusif. Par défaut, un bureau standard de mon fluxbox ne contient rien. Pas de barre des taches, pas d'icones, pas de menu, rien. Question de gout je vous l'accorde, mais là encore, notez que "c'est faisable": fluxbox ne vous impose rien, et surtout pas les choix discutables car subjectifs des développeurs.

Subversion en ligne de commande

Enfin, j'utilise le client subversion en ligne de commande. D'une part parceque je ne connais pas de client digne de ce nom en GTK (ma religion m'interdit d'utiliser Qt), d'autre part pour profiter pleinement de la puissance qu'offre un shell quand on sait un minimum s'en servir. Pouvoir passer mes commandes svn dans des awk, sed, et autres grep (surtout grep en fait), ça n'a pas de prix, et je pense vraiment qu'aucune interface graphique n'arrivera jamais à la cheville de la puissance d'un shell.

Deuxième avantage à utiliser svn en ligne de commande: le jour où je serais obligé de le faire, je saurais le faire.

Conclusion

Voilà, vous savez (presque) tout de mes habitudes de travail (il reste pas mal de domaines à couvrir quand même, je n'ai pas parlé par exemple de mes extensions firefox favorites, ni de mon utilisation intensive de trac, et encore moins des tests unitaires, peut-être une prochaine fois), et j'espère vous avoir donné l'envie de regarder d'un peu plus près ces outils à la réputation peut-être un peu geek, mais d'une puissance incomparable une fois maitrisés :-)

Notes

[1] :help commande est en général d'une grande utilité

[2] Le petit nom de la touche Windows

Ma première impression sur XGL

Geoffrey — Tue, 03 Oct 2006 17:08:00 +0200

Bon voilà, je viens de suivre ce howto, et ça marche très bien. Passé le stade mais où sont mes efferalgans ?, on arrive rapidement au stade mais où mon smecta ?, tellement c'est gerbant de fluidité. Bref, le desktop mappé sur un cube, c'est sympa, mais on lui preferrera de loin les effets moins psychédéliques tels que la vraie transparence et les animations des fenetres (et encore).

Submit par défaut dans un formulaire HTML

Geoffrey — Tue, 03 Oct 2006 02:08:00 +0200

Qu'on se le dise, dans un formulaire comprenant plusieurs input de type submit, il n'est pas possible de spécifier le bouton à actionner quand on appuie sur la touche entrée. Si l'on considère que les HIG de Gnome imposent d'avoir un bouton ok à droite du bouton annuler, on se retrouve avec une incompatibilité fondamentale, puisque l'action par défaut est rarement celle d'annuler la saisie que l'on vient de faire. Plusieurs solutions s'offrent dès lors à nous:

Ignorer les HIG, solution non acceptable dans mon cas (sous peine de lynchage généralisé)
Supprimer purement et simplement les boutons annuler, ce qui représente une perte de fonctionnalitées trop importante dans certains cas
Utiliser du JS, solution non acceptable vis à vis de mon challenge personnel (ne pas utiliser de JS avant que l'appli ne soit complètement fonctionnelle)
Tricher.

J'ai donc opté pour la 4ème solution, j'ai triché. J'ai placé mes input comme le souhaitait le navigateur (ok, puis cancel), et utilisé la directive CSS direction pour réorienter le tout, ce qui donne, pour le HTML:

<fieldset class="submit">
	<input type="submit" name="submit" id="ok" value="Ok" />
	<input type="submit" name="submit" id="cancel" value="Cancel" />
</fieldset>

Et pour la CSS:

fieldset.submit {
	direction: rtl;
}

Et le rendu final.

Problèmes connus:

~~Impossible d'utiliser de ponctuation dans les boutons (un point d'exclamation à la fin d'un bouton par exemple se retrouvera au début)~~ Un fieldset.submit input { direction: ltr; } est nécessaire pour bénéficier des ponctuations au bon endroit (merci Matt.Rixx)
Surement d'autres conséquences facheuses qui ne me sont pas encore tombées dessus :-)

Mais bon pour l'instant ça marche.

Empecher la sauvegarde d'un mot de passe

Geoffrey — Sun, 24 Sep 2006 22:22:00 +0200

Le titre n'est pas très explicite, malheureusement, j'ai du mal a réfléchir ce soir. Nous parlons ici de la sauvegarde d'un mot de passe par Firefox quand on valide un formulaire contenant un champs password. Je ne connais pas exactement les règles qui régissent ce comportement, mais quand on à un formulaire d'enregistrement, en général, cette fonctionnalitée est plus une gène qu'autre chose. Pour la désactiver, il suffit donc d'affecter un attribut autocomplete de valeur off à votre champs:

<input type="password" name="password" id="password" autocomplete="off" />

Je sais, ça fait beaucoup de password.