Alt-I, des informations alternatives

Ça y est, j'ai trouvé une idée de billet. Il s'agit d'une astuce pour intégrer HooSeek dans la barre de recherche de Safari. Car ce n'est pas aussi simple que dans Firefox…

Pour cela, il vous faut Inquisitor, plugin de Safari, gratuit depuis qu'il a été racheté par Yahoo qui rajoute des options à la recherche dans Safari (suggestions, etc).

Après l'avoir installé, allez dans ses préférences (+,, onglet Search), puis cliquez sur changez les sites…. Cliquez sur +, puis sur nouveau raccourcis de recherche personnel…. Enfin, remplissez les champs avec :

• Site name : HooSeek
• URL : http://www.hooseek.com/web?recherche=%@&moteur=y&lang=
• Shortcut : appuyez simplement sur entrée pour que vos recherches s'exécutent sur ce moteur par défaut.

Et voilà, c'est fini. Dorénavant, toute vos recherches se feront sur HooSeek et reverseront de l'argent à vos associations préférées :D

…c'est fantastique. Je parle de web dev pour Safari Mobile, pas du SDK Cocoa touch.

Quand on dev du web de façon classique, c'est à dire en privilégiant IE, puis Firefox, et éventuellement si on a le temps, Safari et Opéra, on est obligé d'utiliser les même technos de 5 ans d'âge, de passer du temps à faire des version différentes pour IE qui ne respecte rien, même pas ses propres standards proprios. Obligé de faire des design laids, car IE6 ne sait pas gérer le PNG24, impossible de s'amuser avec les fantastiques CSS3 que seul Safari gère pour le moment.

L'iPhone utilise donc Safari, le navigateur le plus en avance technologiquement. En plus des CSS3, il inclue des propriétés CSS (propriétaires, ok, mais proposées au W3C pour compléter CSS3) très pratiques qui permettent de gagner un temps fou pour faire des choses, qui nécessitent l'utilisation de grosses librairies Javascript pompant la CPU sur les autres navigateurs.

Parmi celles-ci, on trouve -webkit-transition-property et -webkit-transition-duration. Ces deux propriétés CSS permettent de réaliser des transitions en une seule ligne de code JS. Sur les autres navigateurs, il faut définir des intervalles qui vont éxécuter les étapes de l'animation toute les 10 millisecondes, procédé chiant à coder (heureusement il y a des librairies qui aident à faire ça facilement). Avec Safari, il suffit de préciser dans la feuille de style quelle est la propriété qui devra produire une animation et sa durée. Ensuite, dès que cette propriété est modifiée par javascript (par changement de la variable style ou par changement de classe), la propriété subira une transition d'une fluidité parfaite.

Exemple : CSS :

.panel {
	width: 100px;
	-webkit-transition-property: width;
	-webkit-transition-duration: 1s;
}

XHTML :

<div class="panel" id="panel">
	kikoo
</div>

Javascript :

document.getElementById('panel').style.width = '500px';

Le conteneur va s'agrandir progressivement de 100px à 500px en 1 seconde, avec une parfaite fluidité.

Pour conclure, c'est vraiment très agréable de pouvoir utiliser les dernières technologies web sans se prendre la tête en voyant un résultat tel qu'on l'a imaginé dès le premier jet, sans retouche. Si Safari était le navigateur le plus utilisé, le métier de web développeur serait tellement beau…

Plus d'infos et des exemples