Hermann Buhl (1924–1957).

via CF

Cette photo fait partie d’un set que j’ai réalisé lors d’une sortie à Puurs, dans la salle d’escalade Klimax. Par les températures estivales qu’on connait, c’est un vrai bonheur

IE6, IE7, IE8 ne supportent pas plus de 31 fichiers CSS liés dans une page html (que se soit par tag <link rel="stylesheet" ...> ou CSS @import).

Toutes les CSS venant après la 31ème seront simplement ignorées !

Ok, ça n’est pas idéal, d’un point de vue performance, de splitter ses CSS mais des fois nous n’avons pas le choix. (Ex : Développement Drupal avec quelques modules rajoutant chacun sa propre CSS).

La solution pour Drupal :

Un module existe (il ne loade pas de CSS propre) : IE CSS Optimizer concatène les CSS trouvées dans les répertoires /modules/ d’un projet Drupal une fois configuré et activé.

Et si je n’emploie pas Drupal ? :

Comme Microsoft le suggère [1] :

To work around this limitation, combine multiple classes into a single style tag.

Pour contourner cette limitation, combinez les différentes classes dans un seul tag style.

Le plus simple est de vérifier si les CSS liées sont vraiment nécessaires et en supprimer si besoin. D’autres solutions de concaténation existent (voir la librairie Minify)

Liens relatifs :

• Testcase des différentes solutions envisageables
• Drupal IE CSS Optimizer Module
• via John Albin
• [1] : Résolution proposée par Microsoft

CTRL+Shift+F2: Accéder au Menu Pomme

Un autre raccourci clavier peut-être intéressant pour ceux qui ne sont pas fans des Spaces et de Expose

CTRL+Shift+F4: Cycle parmis les différentes applications ouvertes

Ce dernier raccourci clavier est aux fenêtres de différentes applications ce que Command+` est aux différentes fenêtre d’une même application.

traceroute <host|ip>

et surtout pour annuler la requête, sur OSX c’est :

ctrl+z et pas command+z ni esc

Quand j’insiste sur la consistance c’est vraiment pas pour rien…

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

Je me suis dit que faire sa déclaration en ligne serait assez pratique et rapide.

Mais non, sur MacOSX et Firefox 3.0.11, le site taxonweb.be ne marche pas avec le lecteur de carte eID.

Procédure d’installation du lecteur de Carte

1. Installer le lecteur de carte (en choisissant votre OS)
2. Redémarrer votre ordi

Tout ça se fait normalement sans problème.

Par contre une fois qu’on veut se remplir sa déclaration en ligne sur Taxonweb.be, avec Firefox, tout se complique.

Un petit tour sur Twitter, ne me renseigne pas énormément. Une recherche dans les FAQ de taxonweb.be ne m’aide pas vraiment.

Une recherche approfondie dans Google me dirige sur un forum d’expats.

Enfin, j’ai l’info qu’il me faut: un pdf de ~350Kb explicant, pas à pas, la procédure pour activer les modules de sécurité pour Taxonweb sur Firefox.

Donc, un gros mauvais point pour Taxonweb pour:

• Faire un site non compatible avec les différents navigateurs (et platformes)
• Bien cacher les informations nécessaires à l’installation/configuration

Je n’ose même pas imaginer un malvoyant essayant de remplir sa déclaration avec Lynx…

Merci à Google pour les infos

Et là dessus, je retourne à ma déclaration, en espérant que cela puisse servir à d’autres.

Ces adresses web abbréviées sont incluses dans le code source de la page d’une photo (récente) mais ne sont pas facile à copier/coller.

Voici donc le bookmarklet permettant de faciliter la copie des short URI flic.kr

Flic.kr

Je rappelle : un bookmarklet est une micro application JavaScript qui s’installe en glissant un lien dans ses bookmarks.

Pour les curieux, voici le code :

void((function(){
	var a=document.getElementsByTagName("link");
	for (var i=0,j=a.length;i<j;i++){
		if(a[i].href.indexOf(('flic.kr'))>-1){
			prompt("copy...",a[i].href);
		}
	}
})())

Je me dis que ça pourrait aider du monde d’avoir une compilation des méthodes pour retrouver les versions des Frameworks JavaScript.

Vous n’avez qu’à entrer les lignes suivantes dans une console firebug ou en faire un alerte JavaScript.

jQuery

jQuery.fn.jquery;
//returns jQuery version number ie: "1.2.6"

Prototype JS

Prototype.Version;
//returns Prototype version number ie: "1.5.2_pre0"

Mootools

MooTools.version;
//returns MooTools version number ie: "1.2.0"

ExtJS

Ext.version;
//returns ExtJS version number ie: "2.2.1"

Yahoo! User Interface Library (YUI)

YUI v2

YAHOO.VERSION;
//returns YUI version number ie: "2.5.2"

YUI v3

YUI().Env.meta.version;
//returns YUI version number ie: "3.0.0pr2"

Dojo Toolkit

dojo.version;
/*
returns an object representing DOJO version number ie: "1.3.0 (16807)" major=1 minor=3 patch=0 revision=16807
with major, minor, patch and revision properties
dojo.version.major, dojo.version.minor, etc
*/

Si vous employez d’autres Frameworks JavaScript, n’hésitez pas à laisser un commentaire, je mettrai cette liste à jour.

Internet Explorer et le vertical-align

En cause, Internet Explorer dans les versions 6 et 7 (je ne parle même pas des versions antécédantes) ne supportent pas correctement la propriété CSS display:table-cell.

En effet, le seul moyen correct de centrer verticalement un élément est de faire en sorte que l’élément parent se comporte comme une cellule de tableau (d’où des réactions folkloriques).

Le display:table-cell a été introduit dans Internet Explorer 8. Avant ça, toutes les solutions avaient leurs revers : line-height qui ne permet pas d’avoir des espacements de lignes correct, hauteur des éléments impérativement fixe, hacks CSS mystérieux (dont on ne connaîtra pas le comportement dans les futurs navigateurs).

Bref, rien qui ne me satisfait pleinement.

CSS vertical-align:middle;

Dans Firefox 2 (pc), Firefox 3 (pc/mac), Chrome 1.0.154, Safari (4 pc, 3.2.1 mac), Opera 9.64 (pc/mac), Camino, Shira, IE8, le code suivant est bien rendu.

Le code HTML

<div class="v">
	<div>Ce texte devrait être centré verticalement</div>
</div>

Le code CSS

<style type="text/css">
.v {
	display:table-cell;
	vertical-align:middle;
	/*les 3 lignes suivantes ne sont pas nécessaires*/
	background:#900;
	height:250px;
	width:150px;
}
.v div {
	/*non nécessaire, juste de la décoration pour mieux visualiser*/
	background:#090;
}
</style>

Par contre dans IE 6 et 7, l’alignement vertical n’est pas pris en compte et la boîte de texte reste en haut de la boîte bleue.

Expressions CSS à la rescousse

Encore une fois, les expressions CSS d’Internet Explorer – qui, je sais, ne sont pas recommandées pour des raisons de performances et qui ont été supprimées d’IE8 – peuvent nous être bien utiles.

Code

<!--[if lt IE 8]>
<style type="text/css">
.v {
	position:relative;
	width:expression(this.childNodes[0].offsetWidth+"px");
}
.v div {
	position:absolute;
	top:50%;
	margin-top:expression(-this.offsetHeight/2);
}
</style>
<![endif]-->

Le contenu sera positionné en absolu, à cinquante pourcent du top, par rapport à son conteneur. Il aura aussi une marge négative de la moitié de sa hauteur.

Comme, le contenu est placé en absolu, il sort du flux de la page. Sa largeur est donc reportée sur le conteneur.

Remarques et limitations :

• voir la démo
• Les commentaires conditionnels sont employés pour cibler les version d’Internet Explorer inférieures à 8.
• Les expressions css ne sont pas exécutées si le navigateur à le JavaScript désactivé.
• Les impacts de preformance sont à tenir en compte : les expressions CSS sont recalculées à chaque changement de propriétés CSS dans la page (redimensionnement du navigateur etc,…)
• Le comportement d’un élément en display:table-cell est différent de celui d’un display:block. S’il doit prendre la largeur d’un conteneur, il faudra spécifier celle-ci.

Le navigateur mobile que je préfère est Iris de Torch Mobile, basé sur le moteur Webkit (le même moteur que l’iPhone). J’attends impatiemment Mozilla Fennec ou une version stable et gratuite d’Opera Mobile.

Grâce à Iris, je peux suivre mes réseaux sociaux d’où que je puisse me trouver.

L’un d’entre eux (Facebook) a bien intégré la possibilité de pouvoir appeler directement numéro de téléphone sur une page html.

Exemple 1 : Facebook Mobile

Je me rends sur le profil d’un compte de test Facebook qui contient un numéro de téléphone défini, je clique sur le numéro, et la communication téléphonique s’initialise !

Exemple 2 : les pages .tel

Le TLD .tel vient d’être libéré et donc tout le monde peut, dès à présent, enregistrer son domaine .tel.

Qu’offre un domaine .tel ?

“.tel est un service permettant aux particuliers et aux entreprises de stocker et de gérer toutes leurs coordonnées et leurs mots-clés, directement dans le DNS, sans avoir à concevoir, héberger ni gérer de site Web.”

En théorie, c’est alléchant. Via mon navigateur mobile (et pourquoi pas associé avec un code QR ?), je saisis l’adresse .tel d’une personne/entreprise et je pourrais être à même de lui téléphoner directement.

Je me rends sur une page .tel, je clique sur le numéro de téléphone et j’ai une erreur “l’url n’emploie pas un protocole reconnu” !!!

Le code pour téléphoner d’une page html depuis un mobile.

Le pseudo-protocole callto:

Il est employé par beaucoup (Skype, NetMeeting, …) mais n’est pas enregistré. En fait, il est “Une réinvention de la roue“.

Comme ce protocole n’est pas défini, les développeurs de navigateurs sont libres de faire un peu ce qu’ils veulent.

C’est le protocole qu’utilisent les pages .tel :

<a class="data" title="callto:+12125551234" href="callto:+12125551234">+12125551234</a>

Ce code marche bien pour les navigateurs ayant Skype ou NetMeeting, mais sur une page vue sur un mobile…

Solution : servir un contenu différent pour les navigateurs mobiles et desktop

Le standard existants: le protocole tel:

La RFC3966, intitulée “The tel URI for Telephone Numbers” (ou l’URI tel pour les numéros téléphoniques) nous éclaire.

Le protocole a employer est tel:. Il sera suivi du numéro de téléphone (avec quelques contraintes).

C’est le code employé par la version iPhone de Facebook :

<a class="listButton" href="tel:+320123456789">Call +320123456789</a>

Le protocole tel: permet donc de passer un coup de fil rapidement et sans problèmes !

Ce qu’il manque dans IE8 :

C’est un grand pas en avant vers les standards web, mais pas encore parfait. Pour moi, il manque l’implémentation de certaines propriétés CSS 3 qui pourraient enfin faciliter la vie des développeurs, à savoir :

• multiple background, pour avoir plusieurs images de fond sur un seul élément
• border radius, pour faire des coins arrondis (sans image) sur un éléments
• svg, canvas, video,…

Ce que IE8 corrige :

Par contre IE8 supporte enfin les data URI, qui permettent d’éviter des requêtes http sur des petites image.

IE8 corrige aussi un bug étrange sur le caractère “Euro” en fonte grasse qui n’apparaît que sur IE7.

IE6 : affichage correct.

IE7 : la fonte affichée n’est pas la bonne, la Verdana est remplacée par de la Times New Roman.

IE8 : affichage correct

La liste des propriétés CSS supportées (ou pas) est éloquente.

Mises à jour.

J’espère vraiment qu’on ne devra pas pas attendre deux ans avant la prochaine mise à jour (pour l’implémentation des recommandations CSS3) et que le système de mise à jours se rapprochera de ce qui se fait sur Firefox, Chrome ou Opera. À savoir : des mises à jour fréquentes et automatiques !

Quelles sont vos raisons ?

IE6 reste encore bien implanté pour un navigateur qui date quand même de 2001, je donnerai mes chiffres plus tard.

Certainement la faute aux infrastructures IT qui ne veulent pas mettre à jour leurs parcs informatiques. Personnellement, je n’ai rien contre ce navigateur (je préfère son interface à celle de ses successeurs et puis, j’ai fini par bien connaître ses bugs).

Je serais juste curieux de connaître vos raisons de rester avec un si vieux navigateur alors que d’autres beaucoup plus performants (et pas gourmants en ressources quoi qu’on en dise) sont disponibles au téléchargement : Firefox, Chrome, Opera, IE8.

De même, il y a encore pas mal de vieilles versions de navigateurs qui sont installées (FF1.5, FF2, IE5.2 mac), qui sont tout aussi obsolètes que IE6, pourquoi ne les mettez-vous pas à jour ?

J’ai profité des conseils avisés de Steve Souders et d’Éric Daspet dans quelques projets réalisés chez Emakina.

Un d’entre eux, le site smart.brusselsairlines.com, permettait aux participants de recevoir une réduction augmentant avec le nombre de participants (revenez-y de temps pour les prochaines promotions).

La mesure des visites du sites est gérée par une société externe EStat. Et, bien que je leur ai demandé de la documentation sur l’implémentation de leur script de tracking, on emploie toujours le vieux bout de code qui date de la première version du site.

Hors, le script de tracking est appelé via HTTPS. Vous voyez où je veux en venir.

Mesure des connections avec HTTPS.

Résultats de la requête #5 :

Analyse :

Sur un total de 1023 ms, 505 ms – soit presque 50% du temps de la requête – sont consacrées à la négociation SSL pour des données ne nécéssitant pas l’emploi du SSL…

N’ayant pas eu la documentation du fournisseur de service EStat, je me suis permis de tester la technique pour supprimer le protocole https lors de l’appel à la ressource.

J’ai donc refait le test en faisant un requête vers le même fichier JS, mais sans passer par HTTPS.

Mesure des connections sans HTTPS.

Résultats de la requête #5 :

Verdict :

Le résultat est flagrant : 378 ms contre 1023, il n’y a pas photo.

Quand vous devez reprendre un vieux site et l’optimiser pour, entre autre, des raisons de performance, n’oubliez pas de tenir compte des ressources externes en https !

Et en plus si le fournisseur de service ne vous fourni pas de documentation, et n’active pas le Keep-Alive sur ses serveurs, vous pouvez vivement envisager de changer de prestataire ! À bon entendeur…

Alerte de sécurité sur IE < 8.

Security Information

This page contains both secure and unsecure items.

Do you want to display the nonsecure items?

[Yes] [No] [More Info]

Ou en français :

Information sur la sécurité

Cette page contient des éléments sécurisés et non sécurisés.

Souhaitez-vous afficher les éléments non sécurisés ?

[Oui] [Non] [Plus d’infos]

Alerte de sécurité sur IE8b2.

A l’heure actuelle, la version finale d’IE8 n’est pas encore sortie. J’ai donc fait des tests sur la version bêta 2.

Security Warning

Do you want to view only the webpage content that was delivered securely?

This webpage contains content that will not be delivered usin a secure HTTPS connection, which could compromise the security of the entire webpage.

[More Info] [Yes] [No]

Notez la tournure de la phrase qui est completement l’inverse du message de sécurité des versions précédantes…

Examples d’alerte de sécurité.

Démonstration.

J’ai mis en place une page démontrant cette popup de sécurité. Je sais que le certificat n’est pas valable pour le domain, d’où la première alerte.

Cette page est servie via le protocole sécurisé https et contient un lien vers une image servie via http.

Sur Internet Explorer, vous devriez avoir le message d’alerte ci-dessus.

Code.

<div>
<img src="//noscript.be/demo/https-mixed-content-warning/404.jpg" alt="Un chat dans un pc démonté" title="src: //www.catswhocode.com/blog/404" />
</div>

Supprimer l’alerte de sécurité une fois pour toute.

Il y a plusieurs solutions pour cela. Dont une consiste à changer les paramètres d’IE.

Je me vois mal conseiller à mes clients de changer leurs paramètres.

La seule solution est d’employer correctement le Common Internet Scheme Syntax, en supprimant le protocole.

Démonstration.

Dans cet exemple, le protocole https du lien vers l’image à simplement été supprimé.

Le message de sécurité n’apparaît plus.

Code.

<div>
<img src="//noscript.be/demo/https-mixed-content-warning/404.jpg" alt="Un chat dans un pc démonté" title="src: //www.catswhocode.com/blog/404" />
</div>

Notez que la même technique est d’application pour les fichiers .swf que vous pourriez avoir dans vos pages sécurisées.

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" id="myMovieName">
<PARAM NAME=movie VALUE="myFlashMovie.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf"quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="//www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

code vu sur la base de connaissance Macromedia

J’ai enlevé le protocole http de l’attribut codebase du tag object.

Maintenant, ceux qui utilisent encore Internet Explorer (et qui devraient vraiment essayer un meilleur browser) n’ont plus de raisons de se plaindre de ces messages d’alerte !

Un namespace, une petite expression régulières et on obtient ceci :

var YT=(function(){
	return {
		getId:function(u){
			var a=u.match(/(\/vi\/|v=)([^&]+)/);
			return (a&&a[a.length-1]);
		}
	};
})();
prompt("VideoId",YT.getId("//www.youtube.com/watch?v=_TiQCJXpbKg&fmt=6"));

Cette version ne se base pas sur la longueur de l’id vu que les id’s sont susceptibles de changer…

Si ça peut servir à quelqu’un d’autre…

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 {
			////code.google.com/apis/ajax/documentation/#ClientLocation
			if (typeof(google)==u){
				var jsapi=document.createElement("script");
				jsapi.src="//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

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	//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

Une version plus grande est disponible sur mon compte Flickr. Réalisé avec Wordle.

Je viens donc de mettre en ligne une petite vidéo expliquant comment employer mon extension WP Microsummary Comments Track.

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.

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

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.

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

Appelée Adobe Dude, et une fois installée sur votre ordi (win/mac/linux – c’est l’avantage de AIR), elle vous permettra de suivre tout l’Euro 2008 de partout (au boulot par exemple).

Jusque là c’est bien, mais il y a mieux :

• de superbes vidéos (existe aussi en modèle homme)
• possibilité d’ajouter vos propres flux RSS
• possibilité de créer vos propres playlist de musique.

Bon, il faut installer AIR, mais franchement ca vaut la peine, j’adore !

Liens relatifs :

• Adobe Dude
• Twitter, parfait pour de la veille.
• Le tout frais Plurk, parfait pour perdre son temps

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…