blog

Vestiges d’un CSS Guru

Catégorie : Astuces

Billet

Sortie de Colorzilla 2.0, avec son générateur de palette de couleurs

Ce matin en ouvrant mon navigateur préféré, une mise à jour de Colorzilla était disponible. Vous connaissez sans doute cette extension Firefox qui permet d’avoir un outil “pipette” dans votre navigateur. Ainsi, en naviguant sur un site, il suffit de cliquer sur l’icône Colorzilla et de placer le curseur sur un pixel d’un élément de la page pour connaître ses codes couleurs (RVB et Hexadécimal).

Souvent, lors d’une mise à jour, une page du site de l’extension s’ouvre pour vous décrire les maj installées. En général, je zappe rapidement cette page, pensant qu’il n’y a qu’une liste de bugfix sans intérêt pour ma part. Mais là, j’ai bien fait de lire les nouveautés.

Aujourd’hui, la version 2.0 de Colorilla est sortie. Quoi de neuf ? Et bien 2 fonctions bien pratiques :

  • Webpage DOM Color Analyzer
    En un clic, vous obtenez une palette de couleurs du site sur lequel vous êtes. Mais le must, c’est qu’il dresse la liste des éléments qui utilisent les couleurs en question. Il y a même la possibilité de sauvegarder la palette ou d’obtenir un permalien vers celle-ci. Voici un exemple avec mon blog :
    Webpage DOM Color Analyzer
    Un excellent outil pour obtenir les couleurs d’un site que vous appréciez.
  • Online Palette Viewer
    En complément de l’outil précédent, Colorzilla permet de visualiser, sauvegarder et partager les palettes de couleurs proposées par les utilisateurs. Par exemple, voici la palette du site du W3C. Vous remarquerez l’outil “pipette” en bas à gauche de la page, même si vous n’avez pas installé l’extension.

La version 2.0 porte plutôt bien son nom, avec son lot de fonctionnalités de partage très intéressantes, sans oublier la simplicité et l’efficacité du générateur de palettes.

Billet

30 excellents pdf pour web designer

Je suis tombé sur un post de Positive Space qui recense 30 Essential PDF Documents Every Designer Should Download. Cette liste très bien fournie aborde des thèmes aussi variés que WordPress, la notion de design, les CSS dans les newsletter, le Web 2.0, la typographie, le statut de freelancer… On peut utiliser ces documents comme des guides, car leur avantage est d’adopter une vision très générale et synthétique d’un thème. Voici quelques-uns de mes préférés.

Yahoo! Design Pattern Library

Yahoo Design Pattern Library

Yahoo! possède déjà de très bonnes ressources pour les développeurs en tout genre. Le pdf de Design Pattern Library est quant à lui un résumé des différents éléments graphiques que l’on peut être amené à implémenter dans un site, que ce soit des onglets, des calendriers, des formulaires… Il y a aussi des informations utiles pour créer un site selon un système de grille, ainsi que des informations sur les supports mobiles (dont l’iPhone).

WordPress Help Sheet

Mémo WordPress

Ce mémo pour WordPress est indispensable à tous ceux qui comme moi aiment créer des thèmes WordPress à partir de rien. Il recense toutes les fonctions que l’on peut appeler, en y juxtaposant une description concise et précise. Il existe bien sûr le Codex WordPress, la source principale, mais ce mémo a pour avantage de donner une vision globale de ce que l’on peut faire, et de trouver facilement une solution face à un problème donné. Si vous voulez aller plus loin, il existe aussi le Advanced WordPress Help Sheet, qui lui se focalise sur des cas particuliers faisant appels à plusieurs fonctions.

Destroy the “Web 2.0 Look”

Destroy the Web 2.0 look

Ce qui me plaît dans cette charge contre le look Web 2.0 c’est que l’auteur (Elliot Jay Stocks) évalue exactement les raisons de la prolifération du soi-disant style “Web 2.0” et caricature les gens qui ne comprennent pas ce que c’est, que ce soit les clients ou bien (et c’est pire) les designers eux-même. Le Web 2.0 n’est pas un design mais un concept. Malheureusement, ce terme a généré une vague sur laquelle bon nombre de gens surfent allègrement en se posant comme des designers 2.0 et considérant que l’Ajax est une technologie 2.0 (alors que ce n’est pas la technologie qui a changé entre le 1.0 et le 2.0, mais l’utilisation que l’on en fait). Le document fait bien remarquer que bon nombre de web designers n’ont pas suivi cette tendance de “look 2.0”, voyant bien que ce n’est qu’un feu de paille bien superficiel.

Billet

Synchroniser ses favoris Firefox sur plusieurs ordinateurs avec Foxmarks

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 :

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.

Billet

Forcer tous les liens à s’ouvrir dans la même page Firefox

Browser Link ExcerptCa ne vous arrive jamais de naviguer sur un site et vous retrouver avec une popup ou une nouvelle fenêtre qui s’affiche alors que rien n’indiquait que ça allait se passer? Et quand bien même vous essayer d’éviter ce désagrément il est alors impossible d’afficher la page sans passer par une popup (ou une nouvelle fenêtre) ?

Il y avait jadis une option dans Firefox qui permettait d’obliger les liens qui ouvraient une nouvelle fenêtre à s’afficher dans un nouvel onglet. L’option était facilement accessible dans Firefox et ressemblait à ça.
Lire la suite →