Je voulais revenir sur ce formidable outil, gratuit et open-source, qu’est Firebug. Cette petite extension de Firefox facilite grandement le débogages des pages web et préserve ainsi la santé nerveuse des développeurs surcafféinés.
Elle permet de visualiser « live » le code de la page, les scripts et styles rattachés à celle-ci, de consulter le DOM, de voir en direct le chargement de chaque élément…et même de modifier « à chaud » la mise en forme et le contenu de la page. Qui n’a pas rêvé après des heures de débogage d’un outil aussi efficace ?
![]()
Nous allons nous intéresser à la création des boutons façon « grunge » qui agrémentent le footer du blog.
Sur la première maquette du blog je voulais intégrer des boutons avec un effet de reflet, du classique, surtout pour les interfaces un peu futuristes mais je les trouvais un tantinet trop propres sur eux…ils manquaient un peu de caractère, j’ai donc réorienté le design vers quelques de chose de plus funky ( ou rocky puisque c’est du grunge ) pour contraster avec les parties lisses de l’interface.
![]()
Avec quelques lignes de jQuery on peut faire beaucoup ( « write less, do more… » ) comme un petit menu qui swing et tout ça sans vraiment se fatiguer…
Avant tout, une petite démo.
Nous commencerons par créer un ensemble d’éléments de type « block » ( qui porte la classe « item » ) pour contenir les sous-éléments de chaque item du menu. A l’intérieur un texte et un lien et un autre élément de type « block » ( classe « subitem » ) qui peut contenir un autre bouton, un lien, une information…A noter que ce bloc n’est pas visible : display:none.
Après maintes réflexions ( si si ça m’arrive… ) j’ai opté pour un blog plutôt qu’un site traditionnel avec les habituelles sections ( galerie, liens, tutos… ) et j’ai définitivement abandonné mon bon vieux nom de domaine release911. Le développement d’une V3 de Release était prévue mais je n’ai plus le temps, de prendre le temps justement, pour aller au bout. Les visuels étaient prêts ( certains sont visibles sur deviantart ), les idées ne manquaient pas mais les Km ( Kilomètres, pas Ko, non ce n’est pas une faute de frappe
) de codes nécessaires m’ont un peu freiné.
J’ai opté pour un blog propulsé par WordPress, une solution facile à maintenir et relativement facile à personnaliser. Le thème que j’ai créé reste fidèle au style que j’apprécie, un peu sombre, sobre, mais agrémenté de couleurs vives. Ainsi je pourrai publier toutes les petites portions de code ( PHP, jQuery, AS… ) et les petites astuces qui me servent régulièrement pour développer des sites…ce sera donc une sorte de pense-bête en ligne ouvert à tous. Il y aura peut-être également, à terme, quelques tutos Photoshop comme il y en avait sur Release mais les choses ayant vite évoluées sur le net il est maintenant plus difficile qu’il y a quelques années d’être pertinent en regard de sites comme Psdtuts.
Gardez la pêche et mangez des pixels ( ça ne fait pas grossir ).




