Taxonweb sur Firefox et MacOSX

J'étais occupé à préparer ma déclaration d'impôts (à rentrer pour le 30 juin 09 au plus tard).

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.

Flic.kr Short URI Bookmarklet

Sur Twitter, on voit apparaître un nouveau type de Short URI associées à Flickr.

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);
		}
	}
})())

Retrouver la version d’un Framework JavaScript

Après avoir passé quelques temps à débugger le code d'un collègue, j'ai eu l'heureuse surprise de me rendre compte qu'une ancienne version d'un Framework était employée. Elle ne comprennait pas les dernières méthodes utilisées maintenant.

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.

CSS: vertical-align:middle pour Internet Explorer 6 et 7

Depuis la fin des mises en pages en tableaux html, centrage vertical d'un élément dans son conteneur a toujours posé des problèmes.

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.

Appeler un numéro d’une page html depuis son mobile.

J'ai récemment fait l'acquisition d'un HTC Touch HD avec lequel je m'amuse un petit peu.

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 !