Best Of

Launchy : le meilleur raccourci du monde

17 Jul

( Cela fait longtemps que je voulais poster cet article pour vous parler d’un logiciel que j’utilise depuis 1 an environ et qui est une vraie perle. Attention, vous risquez de devenir accro! )

Un problème incessant que l’on rencontre fatalement lorsqu’on utilise un ordinateur tous les jours est la prolifération des raccourcis en tout genre. Je parle ici des icônes de raccourcis que l’on trouve notamment sur le Bureau mais aussi dans la barre de Lancement rapide ou bien dans le menu Démarrer. Elles sont pratiques pour atteindre rapidement un dossier, un fichier ou même une URL. L’utilisation la plus fréquente reste celle de lancer un programme.

Mais voilà, étant victime de son succès, ces raccourcis se multiplient au rythme des installations de programme, et le Bureau devient une mosaique illisible d’icônes en tout genre. Et le temps passé à trouver une icône accroît exponentiellement. Il y a des solutions “artisanales” comme par exemple ranger par dossiers et sous-dossiers le menu Démarrer, ou organiser dans l’espace les icônes du Bureau. Mais à terme, il y aura des limites, et la mise en place même de cette organisation est coûteuse en temps et en effort.

Voici donc la solution : Launchy.

Il s’agit en fait d’un lanceur d’applications (mais pas seulement), tout léger et tout simple. Il démarre en même temps que Windows (sans que vous le voyez) et pour le lancer, il suffit de faire Alt + Espace, et il apparaîtra.

Son interface consiste en :

une zone de saisie
une icône (associée à un texte)
un menu déroulant (qui apparaît dans certains cas)

Comment ça marche ?

Après l’avoir lancé, vous tapez le nom du logiciel que vous voulez lancer, et vous faites “Entrée”. Et voilà!

Où va-t-il chercher ?

Par défaut, Launchy indexe les fichiers .ink (raccourcis) existants dans le menu Démarrer, et aussi les favoris internet (Firefox et IE). Donc en tapant un mot, il cherchera dans ses endroits là. Vous pouvez bien sûr lui demander d’indexer d’autres fichiers (mp3, doc, pdf…) et d’autres dossiers. Il suffit de le configurer dans les options.

Favori sous Launchy

Configuration de l'indexation

Le menu déroulant

Si au moment de taper le nom de votre programme ce dernier n’apparaît pas, attendez 2 sec et un menu déroulant apparaîtra. Choisissez le bon raccourci et faites Entrée.

Menu déroulant Launchy

Launchy apprend tout seul !

Vous aurez remarqué que si vous ne tapez qu’une seule lettre, Launchy vous propose déjà une liste de raccourcis. Sachez que si vous voulez par exemple d’associer la rechercher “f” au logiciel Firefox mais qu’en tapant “f” Launchy vous propose d’abord le logiciel Flash, et bien choisissez Firefox dans le menu déroulant et la prochaine fois que vous taperez “f”, Launchy vous proposera directement Firefox !

Changer un raccourci dans Launchy

Bien sûr, cette astuce marche aussi pour les requêtes de plus d’une lettre. Mais il est pratique (car encore plus rapide) de faire des raccourcis d’une seule lettre. Pour ma part, ça donne :

f pour Firefox
p pour Photoshop
i pour Illustrator
+ pour Notepad++
w pour Winamp…

Avantages

gratuit
open source
léger
(ultra) rapide
joli (différents skins sont disponibles)
recherche très facile (vous pouvez même trouver des logiciels dont vous aviez oublié l’existence sur votre pc…)
apprentissage

Inconvénients

addictif (vous essaierez de faire Alt + Espace sur n’importe quel pc)
bureau tout vide
plus d’excuse lorsque vous ne trouverez pas le bon logiciel

Il y aura éventuellement un temps d’adaptation mais il est vraiment très court. Je ne peux plus me passer de ce logiciel qui s’avère être celui que j’utilise le plus.

Le web design ce n’est pas que du graphisme

Billet

10 Jun

Après une année (ou presque) passée dans le monde professionnel du web design en tant que novice encore en rodage, je me pose encore la question : c’est quoi être web designer ? J’utilise cette dénomination parce que c’était celle de la formation que j’ai suivie, et qu’elle correspond aux 2 principaux aspects de mon travail : intégration et graphisme.

Intégration : l’écriture du code (X)HTML et des feuilles de styles (CSS) associées.
Graphisme : création de visuels, animés ou non, sous Photoshop, Illustrator, Flash…

A ce stade, j’ai d’ores et déjà inclus autre chose que du graphisme dans la notion de “web design” : l’intégration. En effet, coder c’est du web design aussi, et correspond en l’occurrence à la moitié de mon travail.
Cela peut prêter à confusion. On se dit “design = graphisme” et donc que le “web design” se résumerait au “graphisme sur le web”. Mais “to design”, c’est concevoir, penser, réaliser les sites web. Comme le résume très bien l’article Wikipedia :

Le web design désigne la conception de l’interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation d’un site web.

Lire la suite →

Mein Führer, I can walk !

Billet

22 May

L’autre soir, envie de regarder un film. Je regarde dans les dvd que j’ai. Tiens, “Dr Strangelove“. Ca faisait longtemps. Le revoir a conforté son statut de chef d’oeuvre. Pour ceux qui ne connaîtraient pas, voici l’histoire en bref : un général américain parano et patriote, à la tête d’une base américaine, lance une attaque nucléaire contre la Russie, sans aucune concertation. Le président des Etats-Unis, alerté, rassemble l’état-major militaire pour résoudre en urgence ce problème. Entre-temps, les bombardiers américains filent droit sur le territoire russe. Commence alors le compte à rebours…

Dr Strangelove est un film sur la guerre, mais plus particulièrement une comédie sur la guerre. On assiste à un véritable de théâtre de l’absurde, totalement ancré dans son temps. Malgré cet humour noir très présent, le discours du film reste très sérieux. Ceci vient surtout de la précision historique que Kubrick a apporté au scénario, entre le processus d’attaque ou la réunion des dirigeants. Peter Sellers, qui joue ici 3 rôles (bien) différents, est flamboyant.

Il faut voir l’histoire comme un problème évident de communication (l’annonce ou non de l’existence du “doomsday device”) où la stratégie illogique de suicide indirect est le principal moteur. La population n’est pas vu comme des humains mais comme des chiffres, qui ne représentent que des paramètres dans les décisions de guerre, et permettent ainsi à une minorité d’assouvir ses désirs personnels. L’humour omniprésent illustre cette grande farce qui même si elle fait sourire, condamne allègrement le raisonnement délirant de la classe dominante.

Je ne saurais en dire davantage. Il vaut mieux le voir (si ce n’est déjà fait) pour en tirer toutes les leçons. Et éclater de rire.

Firefox 3 sera le meilleur navigateur internet ?

Billet

19 Mar

Quelques jours après la sortie de la version beta d’Internet Explorer 8, Mozilla a sorti une version beta de Firefox 3. Qu’en est-il de cette nouvelle version du navigateur favori des web designers ? Quelles sont les nouveautés ? Mais surtout : est-ce que les gros défauts de Firefox 2 (notamment l’utilisation de mémoire) ont été gommés ?

Interface

L’interface de Firefox m’a toujours plu, car elle est sobre mais fonctionnelle. La version 3 apporte son lot de nouveautés, plus ou moins intéressantes.

Bouton “Précédent” grossi

Ca saute aux yeux. Personnellement, j’utilise plutôt le raccourci clavier mais pour les fans de la souris, c’est un détail très pratique, conséquence de l’utilisation plus importante de ce bouton par rapport au bouton “Suivant”.

Barre d’adresses enrichie

Sous FF2, elle offrait déjà l’url et le titre de la page. De plus, elle mettait en premier les sites les plus visités. Avec FF3 s’ajoutent la favicon et une icône si elle est dans les favoris, avec en prime un design plus pratique pour bookmarker directement un site.

Gestion des favoris

Elle s’est bien développée. Les favoris seront gérés comme une mini-base de données, avec moteur de recherche, historique, gestion des tags… Les plugins de favoris ne seront plus nécessaires.

Performances

Mémoire

C’est le gros point noir de Firefox 2 : il utilise énormément de mémoire, sans compter celle que les plugins utilisent. Les développeurs ont beaucoup travaillés dessus. Stuart Parmenter, un développeur de Mozilla, explique comment ils sont arrivés petit à petit à gagner en performances. Le test consistait à ouvrir 29 pages dans 30 fenêtres, et ceci, 11 fois d’affilée, en fermant au fur et à mesure les fenêtres pour en garder 30 ouvertes à chaque instant. A la fin, une seule fenêtre restait ouverte pour voir si les navigateurs (ici FF2, FF3 Beta et IE7) récupéraient de la mémoire.

Graphique performances Firefox 3

On voit que IE7 n’arrive pas à récupérer de la mémoire, même en laissant une seule fenêtre ouverte. Et on voit que le maximum qu’atteint FF3 est moins grand que ce que FF2 obtient au final.

N’oublions pas Safari et l’excellent Opera, qui ont été testés dans cet article et dont résulte ce graphique. Firefox 3 reste le plus performant.

Javascript

Le Javascript est omniprésent (notamment avec l’AJAX) que ses performances sont primordiales aussi. Là aussi, FF3 est le plus rapide.

Utilisation

Un navigateur se doit aussi de respecter l’internaute, et d’améliorer son expérience.

Sécurité

Ce n’est pas le point faible de FF2 mais mieux vaut prévenir que guérir. FF3 inclura un outil pour avoir directement des informations sur les sites qu’on visite, et aura un outil anti-phishing plus performant.

Standards du Web

En tant que web designer, cela nous intéresse. Au test Acid 3 (plus bas dans la page), FF3 s’en sort remarquablement.

Firefox semble devancer largement ses concurrents, et on espère que les plugins seront rapidement mis à jour, parce que c’est pour moi le point fort de Firefox.

MAJ : Safari est lui aussi en phase de beta test mais n’était pas inclus dans les résultats ci-dessus, faute de tests. Plus d’informations dans les commentaires ci-dessous.

Synchroniser ses favoris Firefox sur plusieurs ordinateurs avec Foxmarks

Billet

2 Mar

UPDATE : Foxmarks s’appelle désormais XMarks

UPDATE 2 : XMarks n’existe plus ! Il faut utiliser Firefox Sync.

Il y a quelques mois je cherchais un outil pour synchroniser mes bookmarks Firefox entre mon pc à la maison et celui au travail. Je voulais que chaque ajout, modification ou suppression sur un ordinateur se répercute sur l’autre. J’avais alors testé 4 outils :

Foxmarks Bookmark Synchronizer, mais le serveur du site était inlassablement saturé, donc je ne pouvais pas uploader mes favoris.
Box.net Bookmarks Synchronizer, qui semblait marcher car j’avais réussi à uploader facilement mes bookmarks, mais il fut impossible de les récupérer sur l’autre ordinateur.
Bookmark Sync and Sort, qui n’a pas réussi à se connecter à mon ftp (je n’ai pas cherché plus loin).
Delicious Bookmarks, du fameux site.

Je me retrouvais donc à utiliser le plugin de del.icio.us mais vraiment par défaut d’avoir mieux. Parce que del.icio.us fonctionne avec des tags, et en uploadant mes favoris, cela a généré automatiquement des tags à gogo, ce qui a foutu un bordel pas possible au final. Il y avait notamment le tag “barre personnelle” sur tous mes favoris… Génial…

La semaine dernière, je me dis que j’allais retenter le plugin Foxmarks, et j’arrive enfin à me connecter! J’installe le module sur les deux pc. Résultat : la synchronisation marche parfaitement.

Foxmarks

La démarche à suivre est très simple:

Il vous faut un compte sur Foxmarks (gratuit)
La première synchro demande soit de garder les favoris du serveur et ceux du pc, soit l’un des deux
Une icône en bas à droite de la fenêtre Firefox affiche le statut de Foxmarks (“prêt”, “en cours de synchronisation”, “nouveaux favoris à synchroniser”, “un problème est survenu”…)
Je vous conseille d’activer la synchronisation automatique, qui permet de récupérer au démarrage et “silencieusement” les derniers favoris du serveur
Ensuite, activez aussi la synchro à la fermeture (et de décocher la case “d’abord demander”), histoire de ne rien perdre en partant.

Finies les sessions de copier-coller de favoris. Foxmarks marche exactement comme je le voulais.

5 bonnes pratiques CSS

Billet

31 Jan

En attendant le prochain bdbx (déjà prêt), je vous propose 5 bonnes pratiques en CSS. A force de bosser des feuilles de style, il m’arrive de ne plus faire quelques erreurs même si je n’arrive pas encore à toujours trouver la solution optimale directement. Ici, je ne parlerai pas de pratiques basiques plutôt évidentes (comme par exemple d’utiliser un maximum les notations raccourcies), mais d’autres plus subtiles auxquelles je ne pensais pas auparavant.

Ne pas utiliser de position:absolute sur un élément dont on ne connaît pas la hauteur
Bien notifier qu’un lien est en display:block
Ajouter un background-color avec le background-image
Utiliser le position:relative en dernier recours
Mettre un id au body

Lire la suite →

Prémices du HTML 5

Billet

22 Jan

Ca faisait quelques temps que je voulais en parler. Cela fait suite à cet article de “A List Apart” : A Preview of HTML 5, dont ce post est entièrement inspiré.

Voici donc des infos sur le HTML 5. Cela correspond aussi au XHTML 5 (à la différence que ce dernier est exprimé en XML, ce qui apporte son lots de variations), qui passerait de la version 1.1 à la version 5 (et coller à celle du HTML). Bien évidemment, tout ceci n’est pas encore clairement défini, ce sont juste des versions alpha (et encore) développées par le W3C et le WHATWG.

Structure d’une page

Pour l’instant, les balises existantes définissent des titres, des paragraphes, des liens, des emphases, des abbréviations… Mais lorsqu’il est question d’établir les grandes parties d’une page, on doit se tourner vers l’inévitable balise générique : <div> (qui amènera l’horrible expression “coder en div”), balise qui ne signifie et ne représente rien. Que ce soit le header, le footer ou la sidebar, n’ayant pas autre chose sous la main, on utilise des <div> par défaut, auxquelles on applique des id spécifiques.

Le HTML 5 corrigera tout ça. On aura droit à des nouvelles balises très utiles :

header
nav
article
section
aside
footer

La structure d’une page pourra ressembler à ceci :

<body>
  <header>Bienvenue</header>
  <nav>Accueil - A Propos - Contact</nav>
  <article>
    <section>
      Prémices du HTML 5
    </section>
  </article>
  <aside>Catégories</aside>
  <footer>bbxdesign 2008</footer>
</body>

Plus léger et plus lisible. Il faut noter que dans sa syntaxe, une balise <article> pourra regrouper plusieurs balises <section>, ces dernières correspondants à des sous-parties d’un article.

L’intérêt n’est pas seulement pour l’intégrateur du site, mais aussi au niveau des moteurs de recherches. A l’heure actuelle, un moteur ne peut en aucun cas savoir que différentes parties existent dans une page. Il ne peut pas hiérarchiser ou utiliser ces parties.
Ces véritables balises de page pourront le permettre. Ensuite, libre alors aux moteurs de les interpréter à leur façon.

Question accessibilité, ces balises seront très utiles. La page étant bien hiérarchisée, on pourra facilement naviguer et sauter des parties, aller d’une section à une autre… Il suffira d’adapter les outils à cette nouvelle structure.

Balises Multimédia Audio et Vidéo

Lorsqu’il s’agit d’audio ou de vidéo dans les pages web, on pense tout de suite et exclusivement au lecteur Flash. Il s’est imposé par sa légèreté, ses fonctionnalités (streaming, multimédia…), son design. C’est tout simplement le seul moyen de partager de l’audio et de la vidéo facilement, avec des unités de contrôle, et une grande rapidité.

HTML 5 proposera une alternative grâce à ses balises <video> et <audio>. Par exemple, pour la vidéo on pourra définir :

la source
les dimensions
l’image de preload
le type de fichier
des contrôles
…

Bref, ça sera le strict minimum, histoire d’avoir la possibilité de lire des fichiers multimédia sans passer par Flash (surtout lorsqu’on ne le maîtrise pas).

D’autres nouvelles balises

Un petit tour sur le site du W3C permet de connaître quelques autres nouvelles balises qui vont venir enrichir le panel :

<dialog> : pour une conversation
<meter> : pour des unités de mesure
<time> : pour l’heure
<datagrid> : une représentation intéractive d’une arborescence ou de données tabulaires
<output> : pour définir le résultat d’un processus, par exemple celui d’un script
…

La liste des balises (et des attributs) s’agrandit pour mieux nous aider en tant que développeurs (facilité, flexibilité, lisibilité) mais aussi en tant qu’utilisateurs (accessibilité, intéraction, simplicité).

Sources : A Preview of HTML 5 , HTML 5 differences from HTML 4

«1 23