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

Un intérêt à Twitter

Hadrien — Sun, 17 Aug 2008 22:55:00 +0200

Yeah ! Après deux jours d'utilisation intensive de Twitter, j'ai enfin trouvé un intérêt à l'outil ! Il faut le voir comme un indicateur de statut autonome. Sur IM (MSN, jabber, AIM, Skype, etc), on peut indiquer son statut ("AWK", "dors", "mange un blinis", "fait caca", "joue de la cornemuse en caleçon sur le balcon"…) afin d'indiquer à ses interlocuteurs ce qu'on fait. Le problème, c'est que, selon les logiciels clients, c'est chiant à modifier, c'est différent selon les logiciels, et plus on a de logiciels différent, plus on en a à modifier à la fois. De plus, il faut forcément être connecté aux réseaux d'instant messaging précités pour que notre statut soit connu.

Avec Twitter, je peux changer mon statut depuis mon iPhone, n'importe où. Donc, si je vais voir la belle famille, sur le trajet, je peux l'indiquer. Ensuite, on passe à table, je peux l'indiquer aussi :D Et plus aucun secret sur le moment où je vais faire un tour aux toilettes ! Bon, bien sur à condition que le réseau soit accessible, parceque dans la belle famille, c'est la campagne, et Orange a du mal à capter.

Bref, revenons aux choses sérieuses. Si vous êtes sur Mac, comme moi, vous utilisez sûrement AdiumX pour chatter. Si ce n'est pas le cas, il faudra m'expliquer car il n'y a pas mieux. Avec le script suivant, on peut placer automatiquement sa dernière entrée Twitter dans AdiumX. Dans une conversation, ou, plus interressant, dans le statut utilisateur. En renseignant ce champ de la sorte :

mon statut sur tout mes services de messageries instantanées reprendront automatiquement mon dernier Twit envoyé. La classe non ?

Twitter victim

Hadrien — Fri, 15 Aug 2008 19:52:00 +0200

Suite aux pressions morales de Laurent, j'ai (enfin…) créé mon compte Twitter. Je vais l'utiliser pendant 2 ou 3 jours, puis ça va tomber dans l'oubli comme la plupart des services 2.0 qu'on me force à utiliser :p M'enfin, peut être pas, le client iPhone est particulièrement bien foutu et agréable. J'y trouverais peut-être la motivation nécessaire pour l'utiliser pendant au moins deux semaines :p

Alors pour ceux que ma vie intéresse, vous pouvez la "follower" ici. N'hésitez pas à donner le votre en commentaire afin qu'on se follow tous gaiments \o/

PS : Ouf sauvé ! Le client iPhone Twitxr arrive bientôt :D ! Je pourrais enfin envoyer de vraies photos comme quand j'étais en 1.4 jailbreaké

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

Coder pour l'iPhone

Hadrien — Fri, 01 Aug 2008 21:09:00 +0200

…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

Nol edge

Hadrien — Thu, 24 Jul 2008 13:02:00 +0200

Numerama nous apprends la sortie d'un (énième) nouveau service de Google : Knol.

Knol serait la version capitaliste de Wikipédia (communiste) : chaque auteur étant identifié et maître de ses articles. Lui seul déciderait quelles modifications seraient applicables. Mais surtout, Google rémunérera l'auteur des articles par le biais des revenus publicitaires placés sur la page. Encore plus fort, Google fait jouer la concurrence en autorisant plusieurs auteurs à parler d'un même sujet, celui qui sera le moins critiqué et le plus à jour aura évidemment le plus de visites et le plus de revenus.

On peut se poser toute les questions éthiques qu'on veut à propos de ce service, pour le moment, la plus importante qui me vient à l'esprit est : Pourquoi n'ont ils pas fait une version internationale ???