Geckozone: Un bon site en français sur Firefox et toutes ses extensions

geckozone

Ca fait un peu bizarre dans un blog dont de si nombreux articles parlent de Firefox et de ses extensions, de ne pas avoir encore présenté Geckozone. C’est pourtant une mine d’or en terme de renseignements, et qui plus est en français. N’hésitez pas à y faire un tour ;)

Si vous souhaitez réaliser votre propre feuille de style CSS

css

Nous avons présenté dans deux précédents articles les feuilles de style CSS, et leur utilisation conjointe avec l’extension Firefox Stylish. Voici maintenant quelques conseils si vous souhaitez vous lancer dans la création de votre propre feuille de style CSS pour un site donné.

a) Récupérez la feuille de style CSS du style Web en question.

  1. Affichez le code source de la page (combinaison de touches ctrl+U), et recherchez l’emplacement de la feuille de style CSS. Pour ce faire, faites la combinaison de touches ctrl+F et recherchez la chaine de caractères “.css“.
  2. Vous obtenez alors soit une adresse internet entière, par exemple dans le cadre de mon blog, vous allez tomber sur http://s3.wordpress.com/wp-content/themes/pub/garland/style.css?m=1233010721b.
  3. Sinon vous pouvez tomber sur une adresse relative (qui ne commence pas par http:// mais par /quelquechose). Auquel cas vous pourrez généralement reconstituer l’url entière de la feuille de css en accolant l’adresse realtive à l’adresse globale du site pour obtenir une adresse du style http://www.monsite.com/quelquechose.
  4. Enregistrez le contenu texte de la feuille de style que vous obtenez sous un nom quelconque par exemple CssPersonaliséMonSitePointCom.css (en n’oubliant pas le plus important, l’extension .css).

b) Modifiez là à votre convenance en vous inspirant de l’existant.

  1. D’abord il y a des choses complètement évidentes. Par exemple l’attribut background-color de la balise body désigne évidemment la couleur d’arrière plan du site. Allez sur code-couleur.com, choisissez une nouvelle couleur qui vous convient mieux, et remplacez le code hexadécimal de la feuille de style par celui que vous donne le site pour la nouvelle couleur choisie.
  2. Ensuite comparez à grand renfort de ctrl+F quelles sont les correspondances des balises moins évidentes. Dans ce cadre l’utilisation de Firebug vous sera sans doute d’un grand secours tant pour établir les correspondances que pour avoir un petit aperçu de ce que vos changements vont donner.

c) Testez votre feuille de style sur le site concerné:

  1. Repérez l’icone de Stylish en bas à droite du navigateur (elle ressemble à une feuille blanche avec un pinceau) et son nom apparait lorsque vous passez la souris dessus. Sinon vérifiez que vous avez bien installé Stylish.
  2. Cliquez dessus, passez la souris sur “Ecrire un style“, faites votre choix dans le menu déroulant. Puis copiez collez votre feuille de style dans le cadre qui s’affiche en laissant en tête le code par défaut.
  3. Validez, raffraichissez la page, et profitez :) .

Je précise que je n’ai pas encore testé d’écrire ma propre feuille CSS dans ce cadre là. Si jamais le besoin s’en fait sentir, ou si l’un d’entre vous trouve quelque chose de pas clair et me le demande, j’éditerai pour expliquer commen pallier aux difficultés rencontrées éventuelles. Ceci dit tout me parait assez clair, et pour les anglophones, l‘aide de Stylish est très bien faite.

Explorez, débuggez, et améliorez votre compréhension des pages Web avec Firebug

firebug

Maintenant que nous avons commencé à nous intéresser au contenu des pages Web, il est temps de vous présenter cette petite merveille qu’est l’extension Firebug de Firefox. Elle a plusieurs fonctionnalités intéressantes.

  • D’abord elle permet de savoir instantanément quelle section du code correspond à quelle partie de la page, car en passant le curseur sur telle out telle section du code, le morceau correspondant de la page web est bleuté.
  • Ensuite elle organise le code de façon agréable et intuitive par section que l’on peut développer ou réduire en cliquant sur la croix correspondante si le besoin s’en fait sentir.
  • Par ailleurs pour chaque section du code html, il est possible d’observer le code de présentation CSS qui lui est associé.
  • Enfin elle permet d’éditer la page Web à sa sauce et d’observer instantanément le résultat. A noter que dans ce cas là, les changements ne sont pas enregistrés et que dés que l’on rafraichira la page elle retrouvera sa présentation d’origine.
  • Et plein d’autres fonctionnalités utiles que je ne détaillerai pas plus avant car elle correspondent à un usage plus avancé..

Changez la présentation des sites Web que vous visitez

google_dark_blue

Je ne sais pas si ça vous est déjà arrivé en allant sur un site internet de vous dire quelque chose comme “Sympa ce site! Mais quel dommage que sa présentation soit si moche!“. Sachez alors que vous avez une autre alternative que de choisir entre supporter le visuel désagréable du site et ne plus aller dessus. En effet, il existe une petite extension de Firefox qui s’appelle Stylish, et qui va vous permettre de remplacer la feuille de style CSS fournie par le site Web par une feuille de style plus à votre gout.

Pour ce faire, vous avez plusieurs possibilités:

  1. Regarder sur userstyles.org si quelqu’un n’a pas déjà développé une feuille de style plus sympathique pour le site Web en question, pour cela repérez l’icone de Stylish en bas à droite du navigateur (elle ressemble à une feuille blanche avec un pinceau) et son nom apparait lorsque vous passez la souris dessus. Cliquez alors dessus, puis cliquez sur “Trouver des styles pour cette page“. Un fois que vous avez trouvé votre bonheur, il doit y avoir quelque part sur la page un bouton “load in Stylish” qui vous permettra de profiter du script :) .
  2. Demander sur le forum de userstyles.org si quelqu’un n’aurait pas la gentillesse de bien vouloir vous en créer une (par contre il faut savoir parler anglais),
  3. Apprendre un minimum de langage CSS, ce qui n’est pas dur du tout, pour refaire le design du site en question à votre sauce, en vous aidant des conseils disponibles sur le forum. Vous pouvez à ce sujet consulter mon billet Si vous souhaitez réaliser votre propre feuille de style CSS ;) .

Par exemple pour des gens qui comme moi vont souvent sur internet la nuit, les pages Web écrites comme dans les livres en noir sur blanc, ça pique un peu les yeux à la longue. C’est pourquoi, nous avons tendance à rechercher des choses écrites plutot en couleur claire sur fond foncé, qui fatiguent bien moins les yeux. Je reviendrai dans un article ultérieur sur toutes les manières de transformer l’affichage de son ordinateur dans ce but, mais vous avez déjà un aperçu dans l’illustration de ce billet de l’un des résultats de cette démarche avec l’aide du script Stylish Google Web Search – dark blue redesign.

Apprenez la dactylographie avec Firefox!

dactylo

Alors voici deux sympathiques extensions que je n’ai pas testées, mais que je vous signale, car je suis tombé dessus totalement par hasard, et qu’au vu du nombre de téléchargement et de la note des critiques, elles doivent vraiment pouvoir rendre service à tous ceux qui n’ont jamais appris à taper au clavier.

La première, Addictive Typing Lessons, vous apprendra la frappe au clavier, et la seconde, Numpad Typing Drills, vous enseignera l’usage du clavier numérique. Voila, bon courage pour devenir des futurs pros de la dactylo, et je rappelle une fois de plus pour tous ceux qui sont novice dans l’installation d’extensions Firefox qu’ils peuvent suivre ce Tutoriel ;) .

Petits jeux dans Firefox…

Mozteroids

Mozteroids

Bon ça n’est pas révolutionnaire, mais si vous cherchez un moyen agréable de passer le temps avec Firefox entre deux pannes de connexion par exemple, vous pouvez ajouter des petits jeux sous forme d’extensions. Je n’ai pas eu le temps d’en tester plus que quelques uns, mais je vous en ai sélectionné une liste parmi ceux qui avaient l’air intéressants (cliquez sur l’image pour aller sur la page dédiée à l’extension):

Xultris

Xultris

Pacman

Pacman

Numbers Madnss

Numbers Madnss

Clines

Clines

Red vs Blue

Red vs Blue

Froggr

Froggr

Snake

Snake

PingPong

PingPong

Xoom

Xoom

Cette liste n’est probablement pas exhaustive. A ceux qui me demanderaient pourquoi il y a si peu de jeux, je dirais qu’à la base Firefox n’est pas fait pour ça, et que ce n’est sans doute ni la manière la plus simple, ni la plus optimisée de faire un jeu. Je rappelle pour tous ceux qui sont novices dans l’installation d’extensions Firefox qu’ils peuvent suivre ce Tutoriel ;) .

Pour mieux vous y retrouver dans vos dizaines d’onglets: le combo gagnant

FaviconizeTab vous permet de réduire la taille des onglets, Tab Popup vous permet d'avoir un popup d'aperçu de ceux ci lorsque la souris passe dessus.

FaviconizeTab vous permet de réduire la taille des onglets, Tab Popup vous permet d'avoir un popup d'aperçu de ceux ci lorsque la souris passe dessus.

Eh non je ne suis pas mort, mais j’ai simplement eu énormément de boulot ces derniers temps, ce qui m’a tenu loin de mon blog. Aujourd’hui je vais vous parler de deux petites extensions Firefox dont la combinaison peut s’avérer particulièrement utile si vous aimez avoir des dizaines d’onglets ouverts à la fois.

FaviconizeTab vous permettra de réduire largeur de vos onglets en en cachant le titre, et en n’affichant que la petite image, d’où un gain de place appréciable, vu que le nombre d’onglets qui vont tenir dans la largeur de l’écran est du coup multiplié par 3 ou 4. Sympa me direz vous, sauf que l’image ne permet pas toujours de savoir exactement ce que contient l’onglet…

C’est là qu’intervient Tab Popup. Lorsque vous passez la souris au dessus d’un onglet autre que celui en cours, cette extension affiche une petite image popup de son contenu.

La combinaison de ces deux extensions ravira donc tous ceux qui aiment ouvrir des dizaines d’onglets simultanément. Personnellement je n’en suis pas trop fan, car je considère que trop d’onglets consomment trop de ressources, et en général, je me débrouille sans. Mais je connais pas mal de gens à qui ça pourra  être utile ;) .

Voila, et je rappelle une fois de plus pour tous ceux qui sont novice dans l’installation d’extensions Firefox qu’ils peuvent suivre ce Tutoriel ;) .

Un portail recensant tous mes tutoriels sur firefox.

firefox-rediscover-the-web2

Les plus observateurs l’auront sans doute remarqué, j’ai publié depuis aujourd’hui une nouvelle page statique qui est en fait un index de tous les articles que j’ai écris sur Firefox. Comme leur nombre  commençait à être conséquent, au point que moi même, je ne me rappelai pas toujours d’avoir traité tel ou tel sujet, je me suis dit que si je commençais à m’y perdre, a fortiori ça ne devait pas être du gâteau pour mes visiteurs. D’où l’idée d’une page portail classifiant tous mes articles par catégories avec chaque fois le lien pointant vers la page correspondante.

Cette page continuera à s’étoffer au fur et à mesure que je continuerai de publier de nouveaux articles sur le sujet.  Pour y accéder, cliquez sur le lien “Portail Firefox” tout en haut à droite ;) .

Je profite de cet article de news pour vous remercier de votre fidélité, car le nombre de visites journalières moyen a plus que doublé en seulement deux semaines. Sans vouloir forcément chercher à faire du chiffre, ça montre que mon travail vous sert, ce qui est bon pour le moral et m’encourage à continuer :) .

Foxmarks: Pour avoir les mêmes marque-pages sur tous les ordinateurs.

foxmarks-1

Voici une deuxième extension absolument indispensable pour tous ceux qui travaillent sur des ordinateurs différents et on leur compte personnel sur chacun. Chaque fois que vous modifiez vos marque-pages, cette extension qui tourne en fond sauvegarde le changement sur son serveur. Et chaque fois que vous vous connectez sur un autre ordinateur, foxmarks télécharge la liste des derniers changements et les applique sans que vous n’ayez rien à faire. Ainsi vous pouvez bookmarquer quelque chose au bureau, et le retrouver dans vos favoris le soir en allumant votre ordinateur familial. La procédure d’installation est archi simple, et pour une fois, je vais suivre à la lettre mon propre tutoriel, avec moultes captures d’écran explicatives.

1) Installation de l’extension:

Tout d’abord, appliquez le tutoriel, pour afficher l’écran dont vous voyez une illustration ci-dessus. Cliquez sur Ajouter à Firefox. Au bout de quelques secondes, l’écran suivant s’affiche:

foxmarks-2

Attendez 5 secondes que le bouton Installer ne soit plus grisé puis cliquez dessus pour installer l’extension. La fenêtre affiche alors que l’installation est en cours:

foxmarks-3

Puis un message vous demandant de redémarrer Firfox s’affiche. Cliquez sur le bouton “Redémarer Firefox” pour redémarer.

foxmarks-4

Ensuite de quoi Firefox redémarre. Après avoir redémarré, il vous affiche ceci:

foxmarks-5

Puis quelques secondes après, l’écran suivant apparait:

foxmarks-6

C’est l’assistant de l’extension qui va vous aider à vous créer un compte Foxmark (la première fois que vous l’installez sur un ordinateur), ou à paramêtrer votre compte (les fois suivantes). Cliquez sur le bouton Suivant. Deux possibilités se présentent alors:

  • Soit c’est la toute première fois que vous installez l’extension sur un ordinateur => Allez au paragraphe n°2.
  • Soit vous avez déjà installé l’extension au moins une fois sur un ordinateur et vous voulez maintenant paramétrer foxmarks sur d’autres ordinateurs pour qu’ils aient les mêmes marque pages => Allez au paragraphe n°3.

2) Cas de la toute première installation

Répondez non à la question et cliquez sur “Suivant“.

foxmarks-7

L’assistant vous propose alors de vous créer un nouveau compte (ne vous inquiétez pas, c’est totalement gratuit). Au niveau de l’adresse email, vous n’êtes pas obligés d’en fournir une valide, mais je vous le recommande. D’abord parce qu’ils sont très discrets, ils n’envoient jamais aucun email, ensuite parce que ça permet de récupérer son mot de passe en cas de perte, et enfin parce que ça permet d’accéder à son compte en ligne, où des backups totaux sont fait de manière régulière (au moins un par semaine), ce qui permet de récupérer rapidement tous ses marque-pages à partir d’une sauvegarde précédente en cas de fausse manœuvre. Au niveau du mot de passe, si votre compte sur votre ordinateur est déjà protégé par un mot de passe de session, je vous conseille de cocher la case “Se souvenir de mon mot de passe“. Ça vous évitera d’avoir à le retaper des tonnes de fois par la suite, et puis ça ne mange pas de pain. En outre, ça peut se reparamètrer ultérieurement à partir du menu options de Foxmarks.

foxmarks-8

Après avoir cliqué sur Suivant, un écran de confirmation s’affiche. Vous pouvez aller consulter votre boite mail maintenant ou ultérieurement, comme vous préférez. Cliquez de nouveau sur Suivant.

foxmarks-9

L’écran suivant s’affiche alors. En ce qui me concerne, je réponds chaque fois non, tout simplement parce que même si mes sessions sur chaque ordinateur auquel j’ai accès sont protégées par un mot de passe de session, certaines sont moins accessibles à des tiers que d’autres, et que je n’enregistre pas les même mots de passe en fonction de l’ordinateur concerné. Cependant je vous laisse découvrir par vous même ce qui se passe si on répond oui, de toute manière vu la manière dont ils se sont donnés la peine de bien présenter les choses pour que ce soit facile d’accès, ça ne doit pas être bien sorcier :) .

foxmarks-10

Après avoir cliqué sur Suivant, l’écran suivant s’affiche:

foxmarks-11

Cliquez à nouveau sur Suivant :) . La synchronisation de vos marque-pages débute alors. Attendez quelques instants.

foxmarks-121

Passez au paragraphe 4 ;) .

3) Si vous vous êtes déjà créé un compte sur Foxmarks:

Dans ce cas répondez oui à la question et cliquez sur Suivant.

foxmarks-15

Un écran s’affiche alors pour vous demander vos identifiants Foxmarks:

foxmarks-16

Renseignez les et cliquez à nouveau sur Suivant. Un écran de confirmation s’affiche alors. Cliquez à nouveau sur Suivant.

foxmarks-171

L’écran suivant s’affiche alors. En ce qui me concerne, je réponds chaque fois non, tout simplement parce que même si mes sessions sur chaque ordinateur auquel j’ai accès sont protégées par un mot de passe de session, certaines sont moins accessibles à des tiers que d’autres, et que je n’enregistre pas les même mots de passe en fonction de l’ordinateur concerné. Cependant je vous laisse découvrir par vous même ce qui se passe si on répond oui, de toute manière vu la manière dont ils se sont donnés la peine de bien présenter les choses pour que ce soit facile d’accès, ça ne doit pas être bien sorcier :) .

foxmarks-10

Après avoir cliqué sur Suivant, vous arrivez sur à l’écran suivant qui vous demande comment vous voulez procéder. En ce qui me concerne, je choisi systématiquement de conserver les données du serveur et de supprimer celles de l’ordinateur, vu que les seuls marque-pages qui sont présents sur un nouvel ordinateur où je me connecte sont soit déjà dans les favoris du serveur, soit sans intérêt. Cependant les deux autres possibilités vous seront peut être utiles, si le nouvel ordinateur sur lequel vous venez d’installer foxmarks, présente son lot de marque-pages originaux. Le troisième cas est très similaire à celui que nous allons voir. Dans le premier cas, un menu intermédiaire vous demandera si vous voulez synchroniser le serveur avec l’ordinateur ou l’inverse. Ça peut paraitre bonnet blanc et blanc bonnet, mais ce qui change, c’est la manière dont l’ensemble de vos marque-pages se présentera à l’issue de la synchronisation. De toute manière, c’est très bien expliqué, vous verrez ;) . Dans le cader de ce tutoriel, nous allons suivre la voie du milieu.

foxmarks-19

A l’écran suivant, un avertissement s’affiche:

foxmarks-20

Cliquez alors sur suivant pour démarrer la synchronisation de vos marque-pages. Patientez pendant que Foxmarks l’effectue:

foxmarks-21

Une fois l’opération terminée, passez au 4).

4) Fin de l’installation et Conclusion:

A l’issue de l’installation, la page de conclusion suivante s’affiche. Désormais vous n’aurez plus à vous préoccuper de rien pour cet ordinateur. Cliquez sur Terminer.

foxmarks-13

Une page Web se charge alors dans un nouvel onglet de Firefox, qui vous indique le nombre de marques-pages synchronisés avec succès. Dans le cadre de cet exemple, j’ai utilisé un compte invité de mon ordinateur, c’est pour cela qu’il y en a si peu. En pratique le nombre total de mes marque pages est d’environ un millier, c’est pour ça que je suis bien content d’avoir Foxmark pour me les synchroniser d’un ordinateur à l’autre ;) .

foxmarks-14

Et voila la fin de ce long tutoriel, j’espère qu’il vous a plu et que vous n’avez pas mis trop longtemps à charger la page avec toutes ces images. rassurez -vous, ça ne sera pas le cas tous les jours :) .

DownThemAll: Pour télécharger plus rapidement et efficacement.

dta_6002

Les semaines passent, et je me rend soudain compte que je ne vous ai toujours pas présenté certaines des extensions Firefox les plus intéressantes. Au premier rang de celles-ci figure DownThemAll. Cette petite merveille n’est rien de moins qu’un gestionnaire et accélérateur de téléchargement totalement intégré à Firefox. Elle accélère les téléchargements de manière parfois spectaculaire, et c’est encore plus vrai pour ceux qui ont encore Firefox 2. Par ailleurs elle permet de télécharger aussi bien via http,  ftp, ou torrent (J’expliquerai dans des articles ultérieurs ce que signifient ces termes). Et puis il y a tout un tas d’autres fonctionnalités agréables, pour ne citer qu’un exemple, la reprise des téléchargements qui ont planté au milieu pour cause de panne de connexion ou autre…

Son mode d’utilisation est hyper simple: après l’avoir ajoutée (cf ce tuto), chaque fois que vous voudrez opérer un nouveau téléchargement, vous aurez le choix entre “ouvrir avec…“, “enregistrer le fichier” (comme d’habitude), ou “DownThemAll“, et à partir du premier téléchargement avec DownThemAll, “DTA one click“, qui vous permet d’opérer le téléchargement avec DownThemAll dans le même dossier et avec les mêmes options que la fois d’avant.  Voici une capture d’écran dans le cadre du téléchargement de Netbeans 6.5:

dta_netbeans_choixaction

Sélectionnez alors DownThemAll (Et non pas Enregistrer comme c’est coché par défaut sur la capture d’écran). Vous obtenez un menu du type suivant:

dta_netbeans_choixdirectory

Ne vous laissez pas effrayer par tous les champs paramétrables. La seule chose que vous ayez à remplir, c’est la ligne correspondant à “Enregistrer les fichiers dans” si elle est vide ou si l’emplacement par défaut ne vous convient pas. Pour cela, cliquez sur la petite icône de droite représentant un dossier. Une fenêtre s’ouvre qui vous demande de sélectionner le dossier où vous souhaiter sauvegarder le fichier que vous allez télécharger. Faites le, et validez. Puis cliquez sur “Démarrer!”. Le téléchargement se lance alors.

dta_netbeans_encours2_600

Bien sûr les vitesses que vous pouvez voir sur les captures d’écran ne sont pas caractéristiques de l’extension, mais de la vitesse de ma connexion au moment où j’ai pris les captures. Le téléchargement va se poursuivre à l’arrière plan jusqu’à ce qu’il arrive à son terme, après quoi un bip sonore vous indiquera qu’il est terminé.

Quelques remarques:

  • Tout d’abord, sachez que vous pouvez bien sûr lancer plusieurs téléchargements en parallèle. Voici par exemple une des captures d’écran illustrant la page de présentation de l’extension.

dta_examples

  • Ensuite, sachez qu’il y a une foultitude de choses paramétrables. Comme je l’ai déjà dit, vous n’êtes absolument pas obligés de les connaitre dans une utilisation standard de l’extension. Cependant il est bon de savoir qu’elles existent, ça peut vous rendre service un jour. Se reporter à ce sujet à mes articles Introduction aux checksum (MD5, SHA1, etc), et Introduction aux diverses solutions de téléchargement de fichiers :) .
  • Enfin sachez qu’il existe quelques rares cas dans lesquels l’utilisation de downThemAll n’est pas conseillée. Par exemple les sites sur lesquels il faut payer pour avoir le droit d’en télécharger plus rapidement le contenu, car ils mettent en place des sécurités qui empêchent DownThemAll de fonctionner correctement.