Cet encodage permet de réduire drastiquement le poid des fichiers transférés entre le serveur web et votre navigateur.

Point de vue technique :

L'addon Content Encoding Detector soumet l'url de la page que vous visitez au service JSON-HEAD de Simon Willison.

Si le serveur retourne l'http_header "Content-Encoding", l'icône de status Firefox est mise à jour pour refléter l'encodage.

L'addon est en cours de validation mais vous pouvez déjà le télécharger à sa page Mozilla Addons.

tag: ContentEncoding

© Marin for Gatellier.be, 2009. | Permalink | One comment | Add to del.icio.us
Post tags: addon, ContentEncoding, ContentEncodingDetector, ContentEncodingV04b, Firefox, gzip, performance

Status actuel de la géolocalisation :

• Le Groupe de Travail du W3C sur la géolocalisation est en place depuis peu, avec pour but de mettre sur pied des recommandations pour la fin de l'année.
• Firefox 3.1 promet l'implémentation d'une API de géolocalisation (pas encore de tests concluants sur la v3.1b2).
• Une série de providers (tels MaxMind) fournissent des services de conversion d'adresse ip vers un pays ou une adresse
• L'extension Firefox Loki permet une localisation précise sur base de la triangulation des signaux des routeurs wifi alentours.
• L'extension Firefox Geode promet d'employer les futures spécifications (navigator.geolocation.getCurrentPosition())
• Google Gears a aussi une API de géolocalisation
• Google JSAPI (qui permet d'ajouter dans vos sites les librairies JavaScript les plus employées) a des méthodes pour retrouver la position du visiteur.
• BrightKite permet de Twitter et géotagguer directement les photos prises avec son iPhone

Geotag bookmarklet

Via les spécifications disponibles et méthodes les plus faciles, je viens donc d'écrire un bookmarklet qui rajoute votre position géographique dans n'importe quel page web.

GeoTag Bookmarket

Pour l'installer, il suffit de glisser déposer le lien ci-dessus dans votre barre de favoris.

En cliquant dessus, le bookmarket rajoutera votre position (s'il la trouve) au premier champ textarea de la page que vous visitez. Parfait pour Twitter.com

Le script de mon Geotag bookmarklet

var GT=(function(){
	var P=4,u="undefined",d=document;
	var format=function(n,c){
		var m=Math.pow(10,c);
		return Math.round(n*m)/m;
	};
	var addMarker=function (p){
		var t=d.getElementsByTagName("textarea")[0];
		if(t.value.indexOf("#geo")<0){t.value+="#geo:"+format(p.latitude,P)+","+format(p.longitude,P);}
	};
	this.getLocation=function(){
		var p=google.loader.ClientLocation;
		if (p!==null){addMarker(p);}
	};
	this.tag=function(){
		if(typeof(navigator.geolocation)!=u){
			//https://developer.mozilla.org/En/Using_geolocation || geode
			navigator.geolocation.getCurrentPosition(function(p){addMarker(p);});
		} else {
			//http://code.google.com/apis/ajax/documentation/#ClientLocation
			if (typeof(google)==u){
				var jsapi=document.createElement("script");
				jsapi.src="http://www.google.com/jsapi?callback=GT.getLocation";
				d.getElementsByTagName("body")[0].appendChild(jsapi);
			}
		}
	};
	return {tag:tag,getLocation:getLocation};
})();
GT.tag();

Mon script vérifie si l'objet navigator.geolocation existe (donc, si c'est FF3.1b2 ou si Firefox a l'addon Geode installé), sinon, il utilisera les méthodes fournies par le JSAPI de Google.

Bugs connus :

• Si vous passez par un server proxi pour vous connecter à internet ou si simplement les services de géolocalisation ne reconnaissent pas, aucun tag ne sera affiché.
• Internet Explorer 6 ne supporte pas les longs bookmarklets, je vous recommande donc d'installer un autre navigateur.
• La géolocalisation avec Firefox 3.1 beta 2 ne marche pas encore super bien.
• Je limite la précision à quatre décimales.
• J'emploie le système de géotagging employé BrightKite (par soucis de brièveté pour le status Twitter #geo:<lat>,<long>) et pas celui recommandé par Flickr (geo:lat=<lat>,geo:lon=<long>)

Liens relatifs :

• Le script de Dion Almaer qui emploie aussi Google Gears (via Ajaxians)
• 6 technologies de 2008 que vous devez utiliser maintenant (dont la géolocalisation) sur Wired
• Exemple de Tweet géotaggué via BrightKite

© Marin for Gatellier.be, 2009. | Permalink | 3 comments | Add to del.icio.us
Post tags: Firefox, gears, geode, geolocalisation, geolocation, geotagging, google api, Twitter

Prérequis

Quelques ingrédients sont nécessaires pour avoir une signature automatique :

• Un navigateur internet (Firefox/Safari/Chrome/Opera/IE)
• L'addon GreaseMonkey pour Firefox ou équivalent :
  • GreaseMetal pour Chrome
  • SIMBL et GreaseKit pour Safari MacOSX
  • gm4ie pour Internet Explorer
  • rien de spécial pour Opera, on peut directement exécuter des userscripts
• Un fichier JavaScript.

Amicalement, Greasemonkey

Greasemonkey est une extension qui vous permet d'écrire des scripts pour modifier les pages que vous visitez.

Voici le script :

//<![CDATA[
// ==UserScript==
// @name		Amicalement Greasemonkey
// @author		Marin Gatellier
// @namespace	http://www.gatellier.be/blog/
// @description	Ads your signature into textareas
// @include		*
// ==/UserScript==
(function(){
	var t=document.getElementsByTagName("TEXTAREA");
	var signature="\n\nAmicalement,\nGreasemonkey";
	for (var i=0,j=t.length;i<j;i++){
		if (t[i].value.indexOf(signature)<0){
			t[i].value=t[i].value+signature;
		}
	}
})()
//]]>

Vous devez évidemment modifier la variable signature (ligne 10) avec votre propre signature.

Petites astuces :

\n

représente une nouvelle ligne

\t

représente un tab

\\

représente un backslash

Une fois installé, ce petit script ajoutera automatiquement votre signature à chaque textearea de chaque site web (peut être customisé par site)

Installer le script Amicalement Greasemonkey

© Marin for Gatellier.be, 2008. | Permalink | 4 comments | Add to del.icio.us
Post tags: greasemonkey signature

Ce plugin, une fois correctement installé, vous permettra de suivre, dans un LiveBookmark Firefox, le nombre de commentaires approuvés, en attente et marqués comme spam par votre WordPress.

Le tout sous forme d'un LiveBookmark sur Firefox 2+.

Télécharger WP Microsummary Comments Track

Le plugin se trouve désormais sur le site de plugins WordPress.

Il existe aussi une version SVN pour les mises à jour via Subversion.

Installation

1. Télécharger l'archive
2. Extraire tout le répertoire `wp-microsummary-comments-track`dans votre dossier de plugins `/wp-content/plugins/`.
3. Activer le plugin WP Microsummary Comments Track dans votre page de gestion de plugins.
4. Bookmarker en tant que LiveTitle votre page de gestion de commentaires `/wp-admin/edit-comments.php` dans Firefox.

Activer le plugin dans Firefox

L'emploi des microsummaries n'est pas super évident de prime-abord. J'ai mis à votre disposition une vidéo expliquant comment les activer dans Firefox.

N'hésitez pas à me faire part de vos remarques et commentaires.

© Marin for Gatellier.be, 2008. | Permalink | 7 comments | Add to del.icio.us
Post tags: Admin, Comments, Firefox, Microsummary, Plugin, wordpress, wp-microsummary-comments-track

Cette nouvelle version apporte plein de changements sous le capot mais aussi une nouvelle icône de status qui me chipote un peu.

La nouvelle icône de status de Firebug, qui reprend le logo Firebug, passe vraiment inaperçue. Elle manque vraiment de contraste par rapport aux autres icônes qu'on pourrait avoir dans la barre de status.

La nouvelle icône de status Firebug passe inaperçue.

La bonne nouvelle c'est que, vu l'architecture des Addons Firefox, l'ancienne icône peut être facilement rétablie.

Localisation du fichier CSS de Firebug.

Pour ce faire, il faut trouver et éditer la CSS qui gère la présentation de Firebug.
Sur Windows, par défaut, elle se trouve dans le répertoire :

C:\Documents and Settings\User\Application Data\Mozilla\Firefox​\Profiles\la1xxvhe.default\extensions\firebug@software.joehewitt.com​\skin\classic\firebug.css

Les parties en italiques sont des parties qui différeront sur votre PC.

Sur MacOS, il faut chercher un petit peu, l'explication se trouve sur le site de support Mozilla.

Edition du fichier CSS.

Pour rétablir l'ancienne icône de Firebug, j'ai simplement quitté Firefox puis remplacé les lignes suivantes dans le fichier CSS :

#fbStatusIcon {
    list-style-image: url(chrome://firebug/skin/firebug-gray-16.png);
}
#fbStatusIcon[jsd="on"] {
    list-style-image: url(chrome://firebug/skin/firebug16.png);
}
#fbStatusIcon[net="on"] {
    list-style-image: url(chrome://firebug/skin/firebug16.png);
}
#fbStatusIcon[errors="on"] {
    list-style-image: url(chrome://firebug/skin/firebug16.png);
}

par :

#fbStatusIcon {
    list-style-image: url(chrome://firebug/skin/disabledIcon.png);
}
#fbStatusIcon[jsd="on"] {
    list-style-image: url(chrome://firebug/skin/okIcon-sm.png);
}
#fbStatusIcon[net="on"] {
    list-style-image: url(chrome://firebug/skin/okIcon-sm.png);
}
#fbStatusIcon[errors="on"] {
    list-style-image: url(chrome://firebug/skin/okIcon-sm.png);
}

Et hop, une fois Firefox redémarré, l'ancienne icône, beaucoup plus visible, est restaurée.

Liens relatifs :

• Get Firebug
• Ranger les icônes de sa barre de status

© Marin for Gatellier.be, 2008. | Permalink | 4 comments | Add to del.icio.us
Post tags: firebug, firefox 3, fix, status icon

Bug de rendu de background-images

Je suis tombé aujourd'hui sur un bug mystérieux de background-image mal rendue. L'image de fond des list-items est évidemment la même, le premier rendu étant le bon. Le bug est connu (depuis au moins le mois d'avril) et devrait être corrigé dans la prochaine version de Firefox.

Taux de pénétration de Firefox 3 - suite

Semaine 2 - les navigateurs visitant ce blog :

Navigateurs 25/06/2008 - 1/07/2008

Pénétration Firefox 25/06/2008 - 1/07/2008

Pénétration Internet Explorer 25/06/2008 - 1/07/2008

Analyse :

Je sais très bien que les données récoltées sur deux semaines et sur un blog technologique ne sont pas du tout représentatives.

Néanmoins, la majorité des visiteurs de ce blog emploient à présent Firefox 3 (29,4%) suivi de très près par les versions de Firefox 2 (26,4%) puis IE7 (25,3%) et enfin IE6 (12,1%).

Par rapport à la semaine dernière, l'avancée est belle !

Semaine 2 - les navigateurs visitant un site tout public :

Navigateurs 25/06/2008 - 1/07/2008

Pénétration Firefox 25/06/2008 - 1/07/2008

Pénétration Internet Explorer 25/06/2008 - 1/07/2008

Analyse :

Entre ces deux semaines, sur un site grand public sur lequel je ne peux malheureusement pas donner plus d'infos, pas des masses d'évolutions sur les répartitions des browsers.

Par contre, dans l'ensemble des visites sur Firefox, on voit une avancée notoire de la part de marché de la version 3 (de 8,9% à 26,7% - et ce au détriment de Firefox 2). Pas mal non plus !

Merci encore à Chacsam, Gaetano Laurent pour leurs statistiques.

Autres nouvelles du monde des navigateurs :

Mise à jour pour Firefox 2 :

La branche 2 de Firefox est passée en version 2.0.0.15 suite à des failles de sécurité. Je vous recommande donc vivement de mettre à jour si vous êtes toujours sur Firefox 2.

Opera Dragonfly est disponible en alpha 2 :

Le développement du firebug-like d'Opera (très prometteur) avance à grand pas.

Trop d'internautes emploient un navigateur non sécurisé :

Selon ZDNet, seulement 52% des utilisateurs d'Internet Explorer seulement ont optés pour IE7, le reste étant squatté par des anciennes versions (brrr).

Pour moi, un nombre tellement important d'utilisateurs d'anciennes versions ne peut s'expliquer que par du code non standard, d'intranets et autres applications internet développés il y a un bout de temps forçant les sociétés à garder une version obsolète d'Internet Explorer.

Une initiative est née pour sauver les développeurs.

© Marin for Gatellier.be, 2008. | Permalink | One comment | Add to del.icio.us
Post tags: browser, Firefox, firefox3, IE, Opera, penetration rate, stats

En sept jours, on a eu le temps de s'habituer aux nouveautés apportées à Firefox :

Quelques changements de Firefox 3 cosmétiques et fonctionnels :

• la "AwesomeBar"
• l'option de sauvegarde de session
• le gestionnaire de signets
• le gestionnaire de téléchargement

Quelques changements de Firefox 3 sous le capot :

• des API microformats,
• quelques éléments de HTML5,
• l'implémentation de JavaScript 1.8,
• des améliorations DOM et
• surtout des améliorations CSS

display:inline-block dans Firefox 2 et 3

Firefox 3 supporte enfin les propriétés d'affichage: display:inline-block et display:inline-table.

Pour nous, intégrateurs, ça veut dire qu'enfin, on pourra mettre se passer des propriétés fokloriques display:-moz-inline-box et display:-moz-inline-block pour avoir le même rendu.

Mais ce n'est pas encore pour tout de suite tant que le taux de pénétration ne sera pas encore suffisant.
En attendant, on n'oubliera pas de tester ses pages sur les différentes versions des navigateurs (en employant Firefox Portable).

On écrira du code compatible:

<style type="text/css">
.element {
	display:inline-block !important;
	display:-moz-inline-box;
}
</style>

En attendant, nous pouvons aussi faire du prosélitisme pour Firefox 3.

Taux de pénétration de Firefox 3

Je pense que le but de la tentative de record du monde était surtout de faire changer beaucoup de monde de Firefox 2 à Firefox 3 et donc d'augmenter le taux de pénétration.

Pour faire avancer la cause, je vous propose d'afficher les taux de pénétration des différents navigateurs visitant mon blog ainsi qu'un site "grand public" et de pouvoir les comparer de semaine en semaine. Et d'ainsi avoir une vue plus personnelle du taux de pénétration de Firefox 3

Semaine 1 - les navigateurs visitant ce blog :

Navigateurs 17/06/2008 - 24/06/2008

Pénétration Firefox 17/06/2008 - 24/06/2008

Pénétration Internet Explorer 17/06/2008 - 24/06/2008

Semaine 1 - les navigateurs visitant un site tout public :

Navigateurs 17/06/2008 - 24/06/2008

Pénétration Firefox 17/06/2008 - 24/06/2008

Pénétration Internet Explorer 17/06/2008 - 24/06/2008

A vous de jouer !

Je vous propose de participer à mon projet et de vous aussi afficher les statistiques des visites de vos site/blogs.

Et pour nous faire gagner du temps, allez chez vos parents, frère(s), sœur(s), voisin(s), connaissance(s) et faites leur connaître Firefox 3 ou tout autre navigateur respectant les standards du web.

Liens relatifs :

• Statistiques heure par heure depuis le lancement de Firefox 3
• Le blog Firefox Metrics tout sur le taux d'adoption
• Le groupe Firefox Stats

© Marin for Gatellier.be, 2008. | Permalink | 11 comments | Add to del.icio.us
Post tags:

Ma version: Firefox 2.0.0.14 (2008040413)

Operating System: WINNT (x86-msvc)

• Adblock Plus 0.5.11.4
  Firefox 0.7 - 3.*
  Filters ads from web-pages. Now with whitelisting and synchronization.
• Better Flickr 0.2.1
  Firefox 0.8 - 3.0
  Enhances Flickr with Greasemonkey user scripts.
• BetterPrivacy 1.14
  Firefox 1.5 - 3.0.*
  Super-Cookie Safeguard
• Bloglines Toolkit 1.6.8
  Firefox 1.5 - 2.0+
  Browser utilities for use with Bloglines
• Colour Contrast Analyser 0.96
  Firefox 0.7 - 3.*
  Examines the colour contrast of elements in the DOM.
• Context Search 0.4.1
  Firefox 2.0a2 - 3.0b3pre
  Expands the context menu's 'Search for' item into a list of search engines.
• del.icio.us Complete 1.3
  Firefox 0.8 - 2.0.*
  del.icio.us is a social bookmarks manager. It allows you to easily add sites you like to your personal collection of links, to categorize those sites with keywords, and to share your collection not only between your own browsers and machines, but also with others.
• DevBoi 0.5.1
  Firefox 1.5 - 2.5
  Adds a sidebar with web-development references.
• DevBoi PHP Package 0.1.0
  Firefox 1.5 - 2.5
  Adds PHP reference to DevBoi
• DevBoi: Prototype JS Reference (1.5.1) 0.0.3
  Firefox 1.5 - 3.0
  Adds Prototype JavaScript Library reference to DevBoi
• DOM Inspector 1.8.1.14
  Firefox 2.0.0.14 - 2.0.0.14
  Inspects the structure and properties of a window and its contents.
• Dublin Core Viewer 0.5
  Firefox 1.5 - 3.0a1
  Displays Dublin Core Metadata embedded into the <head> section of an XHTML Web page using the <meta> and <link> elements.
• Dust-Me Selectors 2.0
  Firefox 1.5 - 2.0.0.*
  Finds unused CSS selectors
• Extension List Dumper 1.13.1
  Firefox 1.5 - 3.0b5
  Dumps a list of the installed extensions.
• Fangs 1.0.3
  Firefox 1.0 - 2.0+
  Renders a text version of a web page similar to screen reader output.
• Firebug 1.05
  Firefox 1.5 - 2.0.0.*
  Web Development Evolved
• Firecookie 0.0.6
  Firefox 2.0 - 3.0b5pre
  Cookie manager for Firebug. Firebug has to be installed in order to use this extension.
• Firefox Accessibility Extension 1.4.0.4
  Firefox 1.5 - 3.0b5pre
  Adds tools for accessible navigation and the development of accessible web content.
• Firefox Throttle 1.00
  Firefox 1.5 - 2.0.0.*
  Bandwidth utilization throttling plug-in for Firefox.
• Geo 0.8
  Firefox 1.5 - 3.0.*
  Opens useful sites for pages geographically marked with ICBM or geo.position META tags.
• Gmail Notifier 0.6.3.3
  Firefox 1.5 - 3.0
  A notifier for Gmail accounts.
• Go Up 1.0
  Firefox 1.5 - 2.0.0.*
  Easily navigate 'up' a level in a web site
• Google Gears 0.3.14.2
  Firefox 1.5 - 2.0.*
  These are the gears that power the tubes!
• Google Notebook 1.0.0.20
  Firefox 1.5 - 3.0.*
  Allows notetaking while browsing
• Google Pagerank Status 0.9.8
  Firefox 1.5 - 2.0+
  Display the Google PageRank in your browser's status bar.
• Greasemonkey 0.7.20080121.0
  Firefox 1.5 - 3.0b5
  A User Script Manager for Firefox
• How'd I Get Here 0.1.2
  Firefox 1.5 - 2.0.0.*
  Helps you remember how you first discovered a site.
• Html Validator 0.8.4.0
  Firefox 1.0 - 2.0.0.*
  Adds HTML validation to the View Page Source of the browser. The validation is done by Tidy from W3c.
• IE View 1.3.7
  Firefox 1.0 - 3.0.*
  Open pages in IE via Firefox menus
• JavaScript Debugger 0.9.87.3
  Firefox 0.9 - 3.0pre
  JavaScript debugger and profiler
• keyconfig 20060828.1
  Firefox 1.5.0.6 - 2.0.0.14
  Rebind your keys.
• KGen 0.3
  Firefox 1.0 - 3.0.*
  Display strongest keywords of a webpage
• LinkChecker 0.6.2
  Firefox 1.5 - 3.0b5
  Check the validity of links on any webpage.
• Linky 2.7.1
  Firefox 0.7 - 2.0+
  Open/download/validate links and pictures in tabs or windows
• Live HTTP Headers 0.14
  Firefox 0.8 - 3.0.*
  View HTTP headers of a page and while browsing.
• Longdesc 0.6
  Firefox 1.5 - 3.0.*
  Makes an image's longdesc link attribute accessible via context menu.
• Mobile Barcoder 0.1.4
  Firefox 1.0 - 3.0b4
  Generate on-the-fly barcodes to zap with your mobile device
• ocawatoolbar 1.1.6.2
  Firefox 1.5 - 2.1
  Check accessibility of your web site.
• Operator 0.9.3
  Firefox 2.0 - 3.0.*
  The Semantic Web in Action
• OperaView 0.6.1
  Firefox 1.0 - 3.0.*
  Open pages in Opera from Firefox, Mozilla, Flock and Netscape 8 context menus.
• pageaddict 0.4
  Firefox 1.5 - 3.0b4pre
  Monitor your internet addiction
• PicLens 1.6.4.3021
  Firefox 2.0 - 2.0.0.*
  Discover More
• SecurePassword Generator 0.5.1
  Firefox 0.7 - 2.*
  Creates a toolbar icon and dialog which helps to create secure passwords.
• Stylish 0.5.7
  Firefox 1.5 - 3.0.*
  Customize the look of websites and of the user interface.
• Tab Clicking Options 0.6.9
  Firefox 1.0 - 3.0.*
  Assign tab related actions to clicking events on a tab or the tabbar
• Tails Export 0.3.2
  Firefox 1.5 - 2.0.0.*
  Extension for Showing and Exporting Microformats.
• Tamper Data 10.0.4
  Firefox 2.0 - 3.0.*
  View and modify HTTP/HTTPS headers etc. Track and time requests.
• Unicode converter/Input Tool 2.099
  Firefox 1.5 - 3.0b2
  Converts character references, etc. into Unicode and back
• User Agent Switcher 0.6.11
  Firefox 1.0 - 3.0.*
  Adds a menu and a toolbar button to switch the user agent of the browser.
• View Cookies 1.6
  Firefox 1.0 - 2.0.0.*
  View cookies of the current web page.
• View Dependencies 0.3.2.2
  Firefox 1.0 - 2.0.0.*
  Adds a tab listing dependencies and their sizes in the Page Info window.
• ViewSourceWith 0.1.1
  Firefox 1.5 - 3.0.*
  View page source with external application
• Web Developer 1.1.6
  Firefox 1.0 - 3.0.*
  Adds a menu and a toolbar with various web developer tools.
• XHTML Mobile Profile 0.5.3
  Firefox 1.0 - 3.0b5
  Allows XHTML Mobile Profile to be displayed in the browser.
• YSlow 0.9.5b1
  Firefox 1.5 - 3.0b5
  Make your pages faster with Yahoo!'s performance lint tool.

Je teste aussi évidemment mon code sur IE 6, 7, 8 (et des fois sur 5.5), Opera 9.27, 9.5b, FF 3RC1, Safari etc...

© Marin for Gatellier.be, 2008. | Permalink | 7 comments | Add to del.icio.us
Post tags: addons, emakina, extensions, Firefox, integrator

Format XML OpenSearch

Les définitions des différents éléments composant un XML OpenSearch nous aident à composer notre propre plugin de recherche.
Pour une installation standard de Firefox, vous trouverez les plugins déjà installés dans le répertoire C:\Program Files\Mozilla Firefox\searchplugins. Normalement ce répertoire ne contient que des fichiers .xml qui sont les définitions des plugins. Prenons-en un, le fichier amazon.xml

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>Amazon.com</ShortName>
<Description>Amazon.com Search</Description>
<InputEncoding>ISO-8859-1</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoA...=</Image>
<Url type="text/html" method="GET" template="http://www.amazon.com/exec/obidos/external-search/">
	<Param name="field-keywords" value="{searchTerms}"/>
	<Param name="mode" value="blended"/>
	<Param name="tag" value="mozilla-20"/>
	<Param name="sourceid" value="Mozilla-search"/>
</Url>
<SearchForm>http://www.amazon.com/</SearchForm>
</SearchPlugin>

SearchPlugin

Définition du namespace des différents nodes du fichier xml (dans ce cas-ci, on parle de la définition de Firefox)

ShortName

Nom du plugin de recherche

Description

Description du plugin de recherche

InputEncoding

Encodage des caractères du formulaire

Image

Définition de l’icône qui sera ajoutée dans l’interface de recherche encodée en Base64

Url

Contient les différents attributs du formulaire de recherche

type

Format dans lequel les données sont envoyées au serveur

method

GET ou POST méthode d’envoi des données au serveur

template

C’est l’ACTION du formulaire de recherche

Param

Les différents champs qui sont passées au formulaire. Le champ sur lequel se fait la requête doit avoir la value="{searchTerms}". C’est les termes qui seront entrés dans le formulaire de recherche de Firefox

SearchForm

C’est le lien vers les soumissions de formulaires vides iront.

Analyse d’un formulaire à convertir en plugin.

Pour un premier exemple, je me suis basé sur la page d’accueil de Tutmaks.com (excellente ressource de tutoriels). Le moteur de recherche du site ne fonctionnant pour l’instant que sur des pages /index.php et pas sur les pages de détail /story.php.

A l’aide de l’Inspector de Firebug, j’ai facilement repéré que le nom du champ du formulaire était “search” l’action est vide (d’où l’erreur ci-dessus).

<InputEncoding>ISO-8859-1</InputEncoding>
<Url type="text/html" method="GET" template="http://tutmarks.com/index.php">
	<Param name="search" value="{searchTerms}"/>
</Url>

Pour un second exemple, j’ai pris la recherche inversée de numéros de téléphone sur 1307.be.

Il y a plusieurs champs cachés dans ce formulaire-ci. J’ai repris les nom et valeurs de ces champs en tant que Param de mon XML

<InputEncoding>ISO-8859-1</InputEncoding>
<Url type="text/html" method="POST" template="http://1307.be/fr/servlets/ReverseServlet">
	<Param name="number" value="{searchTerms}"/>
	<Param name="iso_language" value="fr"/>
	<Param name="template" value="1x07be"/>
</Url>

Ajout de l’icône du plugin de recherche.

J’ai repris les favicônes des sites repectifs. Je les ai enregistrées sur mon ordinateur et je les ai converties en base64 avec cet outil. De ce fait, les images sont transformées en code et sont plus facilement transportable d’un environnement à un autre (les images sont incluses dans le fichier XML sous forme de code).

La documentation OpenSearch précise qu’on peut aussi mettre une url vers une icône de favori ou autre image.

<Image height="16" width="16" type="image/x-icon"><br />
http://example.com/favicon.ico<br />
</Image><br />

Code à rajouter dans les pages html.

Pour que le plugin soit à la disposition de tout le monde, il faut l’insérer dans les pages de votre site.

Cela se fait aisément en ajoutant une balise link real="search" dans le header de la page html.

<link rel="search" type="application/opensearchdescription+xml" title="Tutmarks.com" href="/chemin-vers/définition.xml">

Ajouter les plugins créés à Firefox 2.

Quand un plugin de recherche a été trouvé par Firefox, l’icône de la liste des moteurs de recherche prend un fond bleuté.

En cliquant sur cette icône, on peut voir la liste des plugins de recherche. Dans le bas du menu, on peut rajouter les différents plugins de recherches.

L’ordre des moteurs de recherche peut être modifié et on peut aussi en supprimer via l’interface de gestion des plugins de recherche

Le plugin de recherche Tutmarks pour Firefox 2 prêt à l’usage.

Liens relatifs

• l’organisation OpenSearch
• Documentation sur le site Mozilla des plugin OpenSearch
• Tutorial pour les extensions Firefox avant la version 2
• Encoder et décoder en Base64 en ligne

© Marin for Gatellier.be, 2006. | Permalink | 17 comments | Add to del.icio.us
Post tags:

about:config, la base de registre de FireFox

En entrant about:config dans la barre d'adresse de FireFox, vous arrivez dans l'espace de configuration de FireFox. J'avoue, l'interface est un peu austère.

Cette interface présente toutefois champs permettant de faciliter les recherches.
Quatre colonnes sont présentes: Preference Name, Status, Type et Value.

La colonne Preference Name reprend les différentes propriétés des différents éléments de Firefox de manière assez compréhensible. Préférences d'accessibilité, du browser, des extensions,...

La colonne Status nous dit si la valeur a été modifiée (soit par une extension, soit par une préférence, soit a la main dans la console de configuration). Dans ce cas, la ligne sera en corps gras et la valeur sera user set. Dans le cas contraire, le corps sera normal et la valeur default

La colonne Type reprend le type de donnée que la propriété peut avoir. Boolean pour une valeur vraie ou fausse, Integer pour un nombre entier et String pour toute valeur texte.

Enfin la colonne Value qui contient les valeurs des différentes propriétés. C'est cette colonne qui nous intéresse. Vous pouvez changer ces valeurs la double-cliquant. Pour les types Integer et String un boîte de dialogue apparaitra et vous pourrez entrer une nouvelle valeur. Pour le type Boolean, le double-clic changera la valeur de vrai à faux et vice-versa.

Alors comment on réactive les anciennes extensions ?

Il faut simplement trouver la clef extensions.disabledObsolete et changer sa value à false pour ne pas désactiver les extensions obsolètes (qui sont prévues pour des versions précédentes de Firefox).

D'autres entrées sont très intéressantes entre autre la collection browser.tabs qui contient différentes options de configuration par rapport aux tabs/onglets.

Pour que tout ces changements soient effectifs, redémarrez Firefox.

A vous de jouer mais, attention, vous modifiez ces valeurs à vos risques et périls!

Liens relatifs:

• Comment mettre à jour une extension Firefox
• Extension del.icio.us pour Firefox 2
• Extension bloglines pour Firefox 2
• Téléchargez d'urgence Firefox 2

© Marin for Gatellier.be, 2006. | Permalink | 3 comments | Add to del.icio.us
Post tags:

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags:

On a vu récemment que sous Firefox, il était très facile de tracer les requêtes Ajax avec l'extension Firebug.

Et pour Internet Explorer?

Il existe une application multi platforme (Win/MacOS/Linux) qui permet de renifler tout le traffic passant par les navigateurs. Le nom de ce bonheur pour les développeurs: Charles

Une fois installé et activé, Charles se comporte comme un serveur proxy et enregistre les différentes requêtes HTTP

L'analyse des données de la partie droite de l'écran permet de retrouver une foule d'informations sur la ressource demandée. Dans ce cas-ci, il s'agissait d'un flux RSS.

L'onglet Général nous indique tout ce qui est relatif au fichier demandé lui-même (taille, vitesse de téléchargement, etc), l'onglet Request reprend ce que le browser a demandé au serveur, et l'onglet Response reprend ce que le serveur a répondu.

Exactement ce qu'on cherche pour déboguer nos applications Ajax.

Comme ce programme se comporte comme un proxy, il capture tous le traffic, même les requêtes qui sont faites par des fichier .swf tels des diaporamas ou des applications FlashComm

Quand je vous disais que c'était le bonheur !

Disponible sur le site du développeur, la version d'essais est tout à fait fonctionnelle sauf qu'elle s'arrête après trente minutes (assez pour certains). Sinon, l'application coûte US$50,-. Pas si cher que ça.

Liens relatifs

• Charles Web Debugging Proxy
• Déboguer grâce à Firebug

© Marin for Gatellier.be, 2006. | Permalink | 6 comments | Add to del.icio.us
Post tags:

Je suis presque tombé de ma chaise. Je ne connaissais pas la moitié des capacités de cette merveilleuse extension de débogage pour FireFox, que j'emploie quand même depuis un bout de temps (v0.2 si les souvenirs sont bons).

Avant, je ne l'employais que pour tracer mes appels Ajax et les réponses du serveur et tester des variables et fonctions, le tout dans la console.

Je n'avais pas vraiment vu la puissance du débogueur.

Une petit explication s'impose.

Pour que Firebug s'arrête à chaque erreur, il faut que l'option soit activée. (onglet "Debugger", menu "Options").

Je pensais que toutes les options étaient regroupées à un seul endroit. Soit, je m'encroûte, soit l'interface n'est pas super parlante.

Bon maintenant regardons tout ce que l'on peut faire avec ce débogueur.

Le principe est le suivant : on appelle des méthodes de l'objet console en lui passant des paramètres.

console.log("message" [,objects])
console.debug("message" [,objects])
console.info("message" [,objects])
console.warn("message" [,objects])
console.error("message" [,objects])
etc...

La liste complète des méthodes de Firebug est bien évidemment disponible en ligne.

Vraiment bien fait ces petites méthodes (surtout celles qui permettent d'évaluer le temps qu'un javascript met).

Adopté par toute l'équipe des intégrateurs, et certains développeurs. Merci Joe Hewitt !

Liens relatifs :

• Firebug, l'extension de débogage pour Firefox
• Le blog du développeur de l'extension Firefox
• La vidéo explicative - qui m'a révélé le potentiel de Firebug
• Un autre article intéressant sur Firebug

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags:

Liens relatifs

• les raccourcis clavier pour Internet Explorer 7
• les raccourcis clavier pour Firefox
• les raccourcis clavier pour MacOS X
• les raccourcis clavier pour lancer des applications
• via: msfw

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags:

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags:

Icônes ajoutées dans la barre d'outils par Gmail Skins

Tout cela est possible (et bien plus encore: voir la liste des possibilités) sur Firefox grâce à l'extension Gmail Skins.

Choix de ses photos Picasa web album dans Gmail

Une fois installée, vous verrez une option supplémentaire dans Gmail: en haut a droite: le lien « Settings » puis le dernier Tab « Gmail Skins ».

Configurez à votre guise ! Encore une extension adoptée.

PS : Il me reste encore assez d'invitations Gmail. Qui en veut ?

Lien relatifs :

• Télécharger l'extension Gmail Skins
• Télécharger Firefox (lien sponsorisé)
• Télécharger Picasa (lien sponsorisé)
• Voir mon Picasa web album

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags:

"Voilà, j'ai une liste de plusieurs centaines de liens vers des sites dont je souhaite connaître le Pagerank Plutôt que cliquer sur tous ces liens successivement (!) je suis à la recherche d'une petite combine, script ou autre qui me donnerait l'info rapidement."

Qu'est ce que le Pagerank?

Le Pagerank est un des outils dont Google se sert pour calculer la valeur d'un site et donc sa pertinence.

En quelques mots, Pagerank attribue une cote à votre page en fonction des liens qui pointent vers votre page.

Attention, le Pagerank n'est qu'un des paramètres dont Google se sert, pour un référencement optimal, il faut veiller à respecter quelques autres règles (sémantique, friendly urls,...).

Un site pour afficher les pageranks des liens de vos pages

Webmastereyes.com est la réponse à la question posée par JhiJ. Ce site vous permet de soumettre une adresse de page. Il rajoutera une image pagerank après chaque lien de votre page:

Pour afficher le pagerank de toutes les pages de son propre site, il suffira de faire pointer Webmastereyes vers la page "plan du site" de votre site. Et voila!

Liens relatifs:

• Webmastereyes.com
• L'article Wikipedia sur le Pagerank (en français)
• Liste de diffusion Cybercafe21
• Une extension Firefox pour afficher votre pagerank

© Marin for Gatellier.be, 2006. | Permalink | 5 comments | Add to del.icio.us
Post tags:

Cet outil permet de tester une page dans tous les browsers installés sur votre ordinateur en un raccourci clavier et un click de souris (tout comme les extensions IEView et OperaView pour Firefox et FirefoxView pour Internet Explorer).

De plus, il vous donne aussi des options de navigation interne dans un site (tout comme GOUP).

Vous choisissez vous-même votre racourci clavier et même les browsers que vous voulez (par exemple: les versions standalone d'Internet Explorer).

Vous découvrirez à l'usage l'ensemble des racourcis clavier.

Il ne me reste qu'à supporter le développeur danois en lui envoyant une carte postale. Pour un tel outil, je pense aussi à le remercier en lui faisant un transfer Paypal.

Liens:

• Télécharger Optool
• via: DownloadSquad.com

© Marin for Gatellier.be, 2006. | Permalink | One comment | Add to del.icio.us
Post tags:

La fin de l'année passée a été fournie en mises-à-jour de quelques de mes logiciels employés:

• le 29 novembre 2005: Firefox 1.5 est sorti
• le 31 décembre 2005: WordPress 2.0 est sorti

Comme j'ai pas mal de boulot, la mise-à-jour de WordPress attendra un petit peu.

Par contre, comme j'emploie tout le temps Firefox et que sa mise-à-jour a changé quelque peu la gestion d'extension, j'ai été un peu embêté de voir qu'une de mes extension préférée ne fonctionnait plus: l'extension GOUP.

Cette extension permet, à l'instar du bouton "navigate to parent directory" de la barre d'outils Google pour MS Internet Explorer, de remonter automatiquement d'un niveau sur un site web lorsque l'on clique sur son icône. Très pratique lors d'erreurs 404 et/ou pour visiter les blogs.

J'ai donc effectué une petite recherche sur le web pour voir comment on pourrait modifier une extension Firefox: je suis tombé sur ce site explicatif: Roachfiend.com.

Rien de plus simple à partir de ce lien.

Le fichier xpi que l'on peut télécharger est en peut être ouvert avec avec Winzip ou Winrar. C'est une archive contenant un fichier install.rdf, contenant lui-même les informations concerant l'installation de l'extension, et un folder contenant lui meme une archive .jar, qui contient toutes les informations concernant le fonctionnement de cette extension.

Le problème se situait dans l'id de l'extension:

Clav n'avait pas spécifié un guid valide d'où l'erreur affichée lors de l'installation de l'extension:

Toujours en suivant le site Roachfiend.com, j'ai trouvé un générateur de guid et j'ai corrigé l'extension erronnée.

Après avoir archivé les fichiers modifiés, j'ai enfin pu installer cette extension que je mets à votre disposition !

Cet article vous a plu? Réagissez

© Marin for Gatellier.be, 2006. | Permalink | 3 comments | Add to del.icio.us
Post tags:

1. téléchargez une extension Firefox (par ex.: GeoURL) et sauvegardez la sur votre disque dur.
2. lancez Flocker et glissez-déposez l'extension dans la fenêtre Flocker
3. vous obtenez une nouvelle extension (+_flock.xpi) que vous pouvez installer dans Flock
4. relancez Flock

Apparemment, ca ne marche que pour les extensions les plus récentes. Mais quelle symplicité

(1) Le site est un peu surchargé pour le moment; mais bonne nouvelle, grâce à google vous y quand même avez accès

© Marin for Gatellier.be, 2005. | Permalink | No comment | Add to del.icio.us
Post tags: