blog

Vestiges d’un CSS Guru

Catégorie : Astuces

Billet

Administrer ses serveurs avec Twitter

Twitter sert à tout et à rien. Parmi toutes les utilisations (f)utiles que l’on peut en faire, en voici une assez curieuse (et peu recommandable): administrer ses serveurs en twittant des messages.

Avec Twitter et du Python, vous pouvez ainsi contrôler à distance (et sans SSH direct) vos serveurs, et vos amis peuvent faire de même. L’auteur n’y trouve lui-même pas grand intérêt mais voulait partager cette méthode.

Billet

Emuler IE7 avec IE8

Si vous n’avez pas eu la chance de tester la compatibilité de votre site avec le tout récent Internet Explorer 8, ne vous inquiétez pas! Rajoutez cette ligne de code sur tout votre site et il sera compatible IE7:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Merci à David Walsh pour cette astuce.

Billet

Sunday Morning : un traducteur en jQuery

sunday-morning

jQuery + Google Translation = Sunday Morning

Avec ce plugin, vous pouvez offrir à vos visiteurs un traducteur très simple et très léger qui utilise Google comme traducteur. Plusieurs langues sont disponibles. Vous pouvez customiser le délai d’affichage, les coordonnées de la bulle, l’élément déclencheur…

sunday-morning-languages1

Un bookmarklet très utile

Vous pouvez créer un bookmarklet qui permet d’avoir les mêmes fonctionnalités sur n’importe quel site. Lorsque vous visitez une page en langue étrangère, cliquez sur le bookmarklet puis double-cliquez sur le(s) mot(s) à traduire et une bulle s’affiche. En créant le bookmarklet, vous pouvez choisir la langue et l’interface.

sunday-morning-nytimes
Billet

jQuery gestures : dessinez pour naviguer

jQuery gestures est un plugin qui permet de naviguer en dessinant avec la souris.

D’abord, activez le plugin (en cliquant sur le lien ou en maintenant la touche Ctrl enfoncée pendant que vous dessinez).

1. Image suivante

Cliquez, déplacez vous vers la droite, puis relâchez. Hop! Vous êtes sur l’image suivante.

jquery-gesture-01

2. Ouvrir la page Flickr

Vers le bas, puis vers la gauche, et la page Flickr s’ouvre.

jquery-gesture-03

3. Afficher/masquer l’aide

Bas, haut, droite bas (on dirait un cheat code). Et ça forme un “h”. J’adore.

jquery-gesture-02

Je trouve cette utilisation de jQuery particulièrement intéressante. Il faut voir maintenant si on peut le mettre en pratique à d’autres fins.

Billet

Readability : un outil pour rendre le web plus lisible

readability

C’est quoi ?

Si vous trouvez que le web est difficile à lire, que ce soit à cause de la taille, la police, les couleurs, les marges… voici un outil qui peut vous faciliter la vie. Readability est un bookmarklet qui transforme n’importe quelle page web en un texte bien présenté.

Exemple

Exemple avec un article de A List Apart :

readability-alistapart

Readability enlève tout le contenu annexe, contextuellement (navigation) et visuellement (images), pour ne laisser que l’essentiel de la page : le corps du texte.

Prendre A List Apart n’est peut-être pas particulièrement pertinent car la présentation du site est déjà excellente en soi, mais j’ai pris cet exemple parce que le contenu y est long et intéressant, et c’est la cible de l’outil Readibility.

Stylez et bookmarklettez

Vous pouvez choisir le style de vos pages, en jouant sur la typographie, les couleurs, la taille et les marges. Puis vous drag-droppez le bookmarklet pour l’utiliser dès que vous visitez une page au contenu intéressant mais mal présenté.

readability-styles

Instapaper-like

Ca me rappelle forcément Instapaper, cet outil qui, en un clic, sauvegarde une version texte de la page pour la rendre disponible par la suite, sur le site, et en offline sur l’iPhone. Un must (gratuit qui plus est).

Billet

Ouvrir des liens non cliquables

Ça ne vous arrive jamais de lire un article très intéressant sur un site, où l’auteur copie-colle des url dans son texte sans qu’elles soient cliquables ? Ma phrase n’étant pas très explicite, je vous offre un exemple :

http://www.monsupersite.com

Vous voudriez cliquer sur ce lien qui a la syntaxe et l’apparence d’un lien mais qui n’est malheureusement pas cliquable. Il faut sélectionner fastidieusement le lien, le copier, ouvrir un nouvel onglet, coller et appuyer sur Entrée. Rhaaa!

Deux solutions :

  • modifier ces liens non cliquables en liens cliquables sur tous les sites de l’Alpha à l’Omega
  • télécharger l’addon Text Link pour Firefox qui rend ces liens accessibles en double-cliquant dessus

Personnellement, j’ai choisi mon camp. J’ai déjà modifié 8432 liens.

Billet

Pdfgeni : trouvez des pdf gratuits en ligne

Parmi les moteurs de recherche spécialisés qui foisonnent sur le web, en voici un qui peut intéresser les web designers : Pdfgeni.com

C’est un moteur de recherche de pdf. Il permet notamment de trouver des E-books (l’équivalent d’un livre en ligne). Il est par conséquent très facile de trouver des documents concernant un domaine particulier. Même si il peut chercher dans n’importe quel domaine, Pdfgeni s’avère très pratique pour fournir des pdf concernant le web. Par exemple on peut chercher :

Ce ne sont ici que 3 exemples pour trouver de très bons documents. Libre à vous de chercher dans d’autres domaines que le web!

Billet

Tout le codex WordPress en une seule page

N’ayant actuellement pas internet chez moi mais voulant tout de même finir mon futur thème WordPress, j’ai cherché à obtenir une version complète et transportable du Codex WordPress. J’ai finalement trouvé par hasard ce guide complet des template tags de WP.

En désactivant le JavaScript (merci Web Developer), on obtient la même page avec tous les blocs entièrement déroulé. Ensuite, un screenshot de la page entière (merci Pearl Crescent) permet d’obtenir tout le codex WordPress en une seule image.

Billet

Laissez tomber la barre de recherche Firefox

Je suis un grand fan de la barre de recherche Firefox.

Barre de recherche Firefox

Très pratique et très simple d’accès (Ctrl+K), elle permet de gagner beaucoup de temps. Bon nombre de sites proposent d’installer le module de recherche pour leur site. C’est d’ailleurs une des premières choses que je vérifie lorsque je découvre un nouveau site. Non seulement c’est bénéfique pour l’utilisateur mais ça permet au site en question de fidéliser l’internaute en lui facilitant l’accès.

Malheureusement, tous les sites ne proposent pas ce module de recherche.
Lire la suite →

Billet

Launchy : le meilleur raccourci du monde

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

Launchy, keystroke launcher

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.