Les plugins Firefox indispensables au développement web

Bienvenue sur le Journal du Blog, vous pouvez vous abonner au flux RSS. Merci pour votre visite!

Note de l’équipe du Journal du Blog : Dans le cadre de notre concours d’articles, Zara vous propose sa sélection de plugins indispensables au développement web pour Firefox.

Aujourd’hui, je voudrais vous présenter trois plugins Firefox qui me semblent indispensables dès lorsqu’on rentre dans le HTML/CSS pour modifier le thème de son blog.

1. Firebug

Firebug est un outil qui vous permet, entre autres, d’inspecter et d’éditer le HTML d’une page, d’explorer les feuilles CSS d’un site, de débugger le javascript, …

Il suffit de faire clic droit > Inspect Element sur un endroit de la page à analyser pour faire apparaitre une fenêtre affichant le HTML et le CSS de la partie inspectée (sur l’image suivante j’ai cliqué sur le logo du Journal du Blog) :

Vous pouvez voir sur l’image ci-dessus que s’affiche à gauche le HTML de la page, les lignes surlignées en bleu correspondant à la partie inspectée (à savoir le logo), et à droite s’affiche le CSS appelé par le HTML de ces lignes surlignées. Grâce à Firebug, vous pouvez accéder en un clic au HTML et au CSS d’un élément !

Vous pouvez également lancer l’outil Firebug en cliquant sur F12, puis cliquer sur le bouton Inspecter, et parcourir la page web : tous les éléments composant celle-ci seront mis en valeur par un cadre bleu, et vous avez le HTML et le CSS qui y correspond qui s’affichent à la volée dans la fenêtre de Firebug :

Le HTML et le CSS qui s’affichent dans la fenêtre Firebug sont par ailleurs modifiables. Ainsi, vous pouvez voir en direct quelles conséquences ont certains changements dans le HTML/CSS de votre thème. Sur l’image suivante, vous pouvez voir que je me suis amusée à remplacer le terme “Actualités” par “Test” dans le menu, et à changer la couleur de ce menu en rose :

Ces modifications ne sont pas sauvegardées, au rechargement de la page elles disparaissent. Par ailleurs, elles n’affectent que la page en cours affichée dans votre Firefox : les autres utilisateurs qui sont sur le site que vous inspectez avec Firebug ne peuvent voir les tests que vous faites.

Ce plugin dispose d’autres fonctionnalités (affiche la taille des boites CSS, permet de débugger le javascript, affiche le temps de chargement des différents éléments, …), je vous laisse les découvrir via le site officiel de Firebug.

Si je devais ne garder qu’une seule extension Firefox, ce serait celle-là ! Elle me permet de débugger rapidement des sites, et de gagner beaucoup de temps lorsque je souhaite modifier mon thème !

–> Télécharger ce plugin

2. Web Developer Toolbar

La Web Developer Toolbar ajoute un menu et une barre d’outil au navigateur avec de nombreux outils de développement web, par exemple :

• désactiver le cache, le javascript, …
• désactiver/effacer/supprimer les cookies
• désactiver les CSS, afficher un CSS en particulier
• désactiver les images, entourer les images, afficher la taille des images, …
• afficher la taille des blocs, le détail des liens, les informations de tableaux, …
• afficher un outil de mesure
• entourer les titres, les liens, les tableaux, les éléments de type block, …
• redimensionner la fenêtre
• valider le CSS, le HTML, …
• …

Ce plugin est un véritable couteau-suisse du développeur web et s’avère également très utile lors d’une retouche de thème.

–> Télécharger ce plugin

–> Site officiel de Web Developer Toolbar

3. Colorzilla

Ce petit plugin vous permet de retrouver le code couleur (RGB ou hexadécimal) de n’importe quelle couleur qui s’affiche dans votre Firefox, que ce soit dans du texte ou dans une image, et de copier ce code pour l’utiliser dans un CSS par exemple.

–> Télécharger Colorzilla

–> Site officiel de Colorzilla

Je vous ai présenté les trois outils dont je me sers le plus, mais pour en découvrir d’autres, je vous conseille la présentation détaillée de nombreux plugins Firefox pour le développement web par Framasoft.

Bloguer depuis un mobile

Note de l’équipe du Journal du Blog : Dans le cadre de notre concours d’articles, Zara vous propose de rendre compatible votre blog Wordpress sur les mobiles (deuxième partie).

Hier nous avons vu comment améliorer la navigation sur votre blog depuis les mobiles pour vos lecteurs. Mais si vous avez déjà essayé de blogger depuis votre mobile, vous avez pu vous rendre compte que l’interface de l’administration de Wordpress n’est pas du tout adaptée pour les mobiles, ce qui rend vraiment difficile le blogging. Des solutions s’offrent cependant à vous :

• blogger par mail : alternative simple et efficace proposée par Wordpress (dans votre administration wordpress, allez dans Réglages > Ecriture, section “Envoi d’articles par e-mail”, consultez l’article dédié à ce sujet dans le codex Wordpress pour plus d’informations)
• utiliser l’application Wordpress pour IPhone
• installer le super plugin WPhone, qui rend l’interface de votre administration Wordpress compatible mobile (et pas seulement IPhone)

Ce dernier plugin est vraiment très bien fait, facile à installer, et facilite grandement l’utilisation de l’administration de Wordpress depuis un mobile.

Voici la page d’écriture d’article de mon administration Wordpress sans WPhone :

Comme vous pouvez le voir, la mise en page est complètement cassée, et on ne peut même pas écrire d’article…

Voici la page d’accueil et la page d’écriture d’article de mon administration Wordpress avec WPhone :

Pour plus d’informations sur ce plugin, allez faire un tour sur le site officiel de WPhone.

Rendre compatible votre blog wordpress sur mobiles

Note de l’équipe du Journal du Blog : Dans le cadre de notre concours d’articles, Zara vous propose de rendre compatible votre blog Wordpress sur les mobiles.

La navigation web depuis un mobile se généralise, et de plus en plus de téléphones permettent de surfer sur Internet. J’aime pour ma part surfer sur mes blogs préférés durant mes voyages en transports en commun. Le problème, c’est que beaucoup d’entre eux ne proposent pas d’interface compatible mobile, ce qui entraine une mise en page complètement cassée sur mon BlackBerry, et un temps de chargement très long. Il est pourtant relativement simple de proposer à vos lecteurs une version mobile de votre Wordpress.

Nous vous avions déjà présenté sur le Journal du Blog des plugins permettant d’optimiser votre blog Wordpress pour l’IPhone. Mon propos sera plus large aujourd’hui, puisque je vous propose de voir comment rendre votre blog Wor dpress compatible avec tous les mobiles.

Pour ce faire, vous pouvez utiliser des plugins ou mettre en place une version mobile de votre blog manuellement. Dans les deux cas, le principe est le même : il s’agit de mettre en place un thème spécial mobile en parallèle du thème de votre blog, et de forcer les internautes provenant de mobiles à afficher le thème adapté.

Le plugin le plus célèbre pour rendre son blog compatible mobile pour vos lecteurs est le plugin Wordpress Mobile Edition d’Alex king. L’installation est très simple, de nombreux navigateurs mobiles sont pris en charge, la mise en page est bien adaptée aux mobiles. Par défaut, la page d’accueil proposée liste les derniers articles du blog, et les pages. La page d’article contient tout l’article et les commentaires laissés par vos lecteurs, avec la possibilité de laisser un commentaire.

Par exemple, voici ce que donne mon blog sous Opera Mini (navigateur web pour mobile) après avoir activé l’extension Wordpress Mobile Edition :

Page d’accueil

Page d’article

Page d’article - commentaires

Le site ready.mobi qui teste l’affichage de sites sur mobile donne une note de 3/5 pour mon blog quand ce plugin est activé, contre une note de 1/5 lorsqu’aucun plugin n’est activé pour améliorer la compatibilité de mon blog avec les navigateurs mobile.

Ce plugin présente cependant quelques inconvénients. Il n’est compatible que jusqu’à Wordpress 2.5 : il fonctionne tout de même correctement sur Wordpress 2.6, à l’exception de messages d’erreur qui apparaissent dans l’administration et l’impossibilité d’accéder aux options du plugin. Par ailleurs, je trouve l’affichage un peu trop épurée et il manque une navigation dans les articles plus anciens.

En ce qui me concerne, je préfère largement le plugin WP Viewmobile. En effet, contrairement au plugin précédent, celui-ci est compatible jusqu’à Wordpress 2.6, l’affichage est plus propre et plus complet, et surtout, mon blog obtient une meilleure note au test ready.mobi, c’est-à-dire 4/5.

Par défaut, la page d’accueil proposée liste les derniers articles du blog avec un extrait, propose une pagination pour accéder aux articles plus anciens, liste les pages, et propose une navigation par catégories et par archives. La page d’article contient tout l’article et les commentaires laissés par vos lecteurs - avec une alternance de couleurs qui permet une lecture plus aisée -, avec la possibilité de laisser un commentaire.

Voici un petit aperçu de ce que donne mon blog sous Opera Mini après avoir activée l’extension Viewmobile :

Page d’accueil - haut

Page d’accueil - bas

Page d’article

Page d’article - commentaires

Vous pouvez bien sur modifier les thèmes proposés par ces deux plugins, mais faites attention à ne pas faire de modifications allant à l’encontre de la compatibilité mobile ! Pour cela, aidez-vous des validateurs suivant pour vérifier la compatibilité mobile :

• ready.mobi : celui-ci note l’affichage de votre blog en testant divers critères, et vous donnant des astuces pour améliorer les critères que votre blog ne passe pas
  
• validateur mobile du W3C : celui-ci liste tous les problèmes que rencontre votre blog pour être considéré comme compatible mobile à 100%. Celui-ci est TRÈS strict et vous remontera des erreurs qui gènent pourtant très peu l’affichage sur mobile comme l’absence de contenu alt dans les balises images…

Vous pouvez également vérifier ce que cela donne sur les émulateurs de navigateurs mobiles que l’on peut trouver sur internet, comme celui d’Opera Mini.

Image de la page d’accueil: Shadowkris