Alt-I, des informations alternatives - Informatique, Cultures alternatives et Geekeries saupoudrées d'Ajax. - Internet

Coder sur iPhone… encore :p

Hadrien — Fri, 08 Aug 2008 18:13:00 +0200

Regardez ce genre de design :

Pour un navigateur "ancien" (c'est à dire qui ne connaît pas CSS3), réaliser un cadre de ce genre, avec coins arrondis, dégradés, etc, est un très dur labeur. Ça se joue à coup de multiples <div /> imbriqués dont les background sont les coins de l'image savamment découpée, le tout en deux version : une pour IE, la seconde pour les autres… C'est à cause de ça que le web2.0 a beaucoup été designé (du verbe to design :p) à coup d'aplat de couleur.

Et bien avec Safari 3, finie l'usine à gaz ! Une propriété magique, propriétaire pour le moment, mais en cours de validation par le W3C fait des miracles. Il s'agit de -webkit-border-image.

Pour faire une bulle comme sur le screenshot, nous n'avons besoin que d'une image :

Et de la css suivante :

.bulle {
	border-width: 16px 8px 8px 8px;
	-webkit-border-image: url('bubbleWhite.png') 16 8 8 8;
}

Appliqué au XHTML suivant :

<div class="bulle">
	Je suis dans une bulle \o/
</div>

Et c'est tout. La bulle pourra s'agrandir en hauteur et en largeur sans aucun étirement ou décalage.

Comment cela fonctionne-t-il ?

On définit tout d'abord l'épaisseur de chaque bordure du cadre :
border-width: haut droite bas gauche;
Dans mon cas, la bordure du haut sera plus épaisse car il faut y faire rentrer la flèche de la bulle.

Ensuite, on indique quelles zones de l'image de fond seront appliquées dans les bordures :
-webkit-border-image: url('bubbleWhite.png') haut droite bas gauche;
On prends la zone de l'image de 0px du haut à 16px et on la met sur la bordure du haut, la zone de 0 pixel de droite à 8px et on la calle à droite, etc. Tout le reste fait partie du centre du contenant qui s'étirera selon le contenu. Tout ce qui est dans les bordure gardera sa taille initiale.

Les zones rouges sont les parties de l'images qui seront placées en tant que bordure, le reste sera étirée en tant que background :

C'est magnifique !

Cuil, une semaine plus tard

Hadrien — Sat, 02 Aug 2008 09:20:00 +0200

On a beaucoup parlé de cuil la semaine dernière, le moteur de recherche qui prétends vouloir détronner Google. Voici encore une preuve s'il en fallait que ce moteur est à chier. Voici ce que je vois dans mes stats : 7 backlink vers Alt-I depuis cette url :

http://www.cuil.com/search?q=bernard macabiau

Alors, en effet, j'ai parlé dans un billet de Bernard Macabiau. Sauf que sur les résultats de Cuil, ce n'est pas mon billet qui est linké, mais un proxy : http://archive.jcisio.com/nph-proxy.cgi/000000A/http/www.alti.info. Et qui plus est, qui ne fonctionne plus. Alors ils sont bien gentils chez Cuil avec leurs billiards de liens indexés, mais il faudrait déjà qu'ils commencent à bien classifier leurs résultats s'ils veulent pas passer pour des cons.

Extensions Firebug

Hadrien — Wed, 09 Jul 2008 13:46:00 +0200

Dascritch m'a indiqué ce matin un article très intéressant listant les meilleurs extensions pour Firebug. Pour rappel, Firebug est une extension Firefox incontournable pour tout développeur, facilitant grandement le debug dans le développement web.

On y retrouves des extensions très pratiques telles que :

Firecookie qui permet de lister tout les cookies de la page en cours et de les éditer
FirePHP, dont je parlais il y a peu, permet de logguer des informations dans la console Firebug à partir d'un script coté serveur, sans modifier le contenu de la réponse envoyée au navigateur. Les logs étant passés dans le header de la page. Nickel pour débugger de l'ajax.
RainbowForFirebug coloriera le code javascript dans votre console Firebug.
Jiffy calculera le temps d'éxécution de chacune de vos fonctions Javascript.

L'article en recense encore plein d'autres, mais c'était celles qui me paraissaient les plus intéressantes. Bon débug

Alti sur Over-blog… pour de vrai !

Hadrien — Fri, 04 Jul 2008 17:00:00 +0200

Ça y est, Alt-I est réellement sur Over-blog !

Vous pouvez constater par vous même

Certificat Download Day

Hadrien — Thu, 03 Jul 2008 08:41:00 +0200

Grâce à moi, Mozilla a battu un record de téléchargements en 24 heures (8 002 530). C'est pourquoi ils m'ont décerné personnellement ce certificat :

Merci.