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

Overblog version iPhone

Hadrien — Tue, 12 Aug 2008 15:17:00 +0200

En ce moment, pendant que tout le monde est en vacances, je bosse sur les versions mobiles de Overblog. Et je suis fier de vous présenter la version iPhone :

Overblog version iPhone

Je suis très content de mon travail, et on pourra aussi féliciter Xylpho, notre graphiste, qui a fait aussi du bon boulot

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 !

PS : DaScritch nous indique que ça marche aussi de la même façon sur Firefox 3 :D

Orange et ses technos propriétaires

Hadrien — Wed, 30 Jul 2008 14:45:00 +0200

Quand on veut faire un site "wap" chez Orange, il faut utiliser le format "OML/WML". Mais pourquoi pas XHTML simplement ?? Ben parceque Orange distribue des navigateurs spécifiques sur leurs téléphones qui comprennent ce langage XML propre à Orange : OML. C'est censé être un langage plus léger et compatible que le XHTML (sic). Donc, je lis la doc d'Orange à ce sujet. Et c'est là qu'on tombe sur un passage fortemment hillarant :

L’encodage des caractères spéciaux doit être obligatoirement accompagné de l’utilisation de l’ISO-8859-1 sur l’ensemble des services :

L’encodage ISO-8859-1 est compris de tous les protocoles réseaux et langages de développement et ne nécessite pas de conversion. C’est une méthode d’encodage par défaut sur la plupart des outils de développement (langages, base de données etc…).

Les caractères non encodés ne sont pas compris de certains navigateurs de terminaux. Les dysfonctionnements dûs à un problème d’encodage peuvent aller d’un non affichage du caractère jusqu’au plantage du terminal. Ces dysfonctionnements dépendent des terminaux.

L’UTF-8 reste inadapté avec l’utilisation de fichiers tels que le XML, et de certains serveurs qui ne prennent pas forcément l’Unicode en charge ce qui ne facilite pas le développement des services.

De plus la contrainte de mise en place est négligeable au vue du gain de compatibilité que cette méthode engendre.

En utilisant l’encodage ISO-8859-1, l’obtention d’un affichage correct du service sur l’ensemble des terminaux est garantie.

En 2008, Orange oblige à coder en ISO plutôt qu'en UTF-8 pour des raisons de compatibilité. Elle est bien bonne.

Alt-I dans l'actu Overblog

Hadrien — Tue, 22 Jul 2008 12:19:00 +0200

Les travaux sur Open OB avancent : Alt-I a réussi à faire partie de l'actualité du portail Overblog :

Plus que quelques temps avant de pouvoir vous inscrire à votre tour

PS : Et dans la liste de tag aussi : Tag Apple

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