Lack of Inspiration

Ce que nous allons voir aujourd'hui, c'est comment, grâce aux CSS3, créer des bulles de dialogues style bande dessinée. Je vais vous décrire pas à pas, comment arriver à ces résultats : Speech Bubble & Thought Bubble, en utilisant différents aspects des CSS.

Tout d'abord, nous allons créer notre base :

<!-- notre bulle -->
<div id="bubble">

  <!-- le texte qui apparaitra dans la bulle -->
  <span id="text">
    I never really was on your side.
  </span>

  <!-- 2 spans qui nous serviront à créer la flèche pointant vers notre personnage -->
  <span id="arrow_border"></span>
  <span id="arrow_inner"></span>

</div>

<!-- notre personnage -->
<img src="spy.png" id="spy" alt="spy" />

Ajoutons à cela un petit peu de mise en forme grossière, grâce à quelques règles CSS :

#bubble{
  position: relative;
  right:50px;
  background-color:white;
  text-align:center;
  width:200px;
  height:80px;
  border:2px solid #555555;
}

L'attribut position:relative va nous servir à positionner correctement notre bulle par rapport au personnage, c'est donc à vous de mettre les bonnes valeurs en fonction du personnage et de la mise en page que vous avez choisis.
On rajoute un fond blanc pour le fond de notre bulle, on centre le texte, on fixe les dimensions de notre bulle (là aussi laissées à votre appréciation en fonction du texte) et on lui applique une bordure de 2 pixels.
Jusque-là, ça ne ressemble pas vraiment à une bulle de BD, je vous l'accorde, mais à un simple rectangle avec du texte à l'intérieur.

« Arrondir les angles »

Commençons par arrondir notre bulle, histoire de lui donner un style un peu plus « BDisé ». Pour cela, nous allons nous servir de la propriété CSS3 border-radius. Cette propriété sert à arrondir les angles d'un bloc. Elle n'est pas implémentée sur tous les navigateurs et certains utilisent des propriétés spécifiques pour l'utiliser.
Dans notre cas, voici comment nous allons l'utiliser :

#bubble{
  /* ... */
  /* propriété CSS3 (fonctionne sous Opera) */
  border-top-right-radius:80px 40px;
  border-top-left-radius:80px 40px;
  border-bottom-right-radius:80px 40px;
  border-bottom-left-radius:80px 40px;
  /* implémentation Firefox */
  -moz-border-radius-topright:80px 40px;
  -moz-border-radius-topleft:80px 40px;
  -moz-border-radius-bottomright:80px 40px;
  -moz-border-radius-bottomleft:80px 40px;
  /* implémentation Chrome, Safari, ... */
  -webkit-border-top-right-radius:80px 40px;
  -webkit-border-top-left-radius:80px 40px;
  -webkit-border-bottom-right-radius:80px 40px;
  -webkit-border-bottom-left-radius:80px 40px;
}

Pour expliquer brièvement ce que nous faisons, voici une petite illustration pour la la première : border-top-right-radius:80px 40px;
La première valeur va définir le rayon de l'arrondi pour la bordure du haut (top), et la seconde, pour la bordure de droite (right), comme ceci :

A vous de jouer avec les valeurs pour obtenir la forme que vous souhaitez. Tout ce qu'il faut, c'est conserver un morceau de bordure droit pour, comme nous allons le voir, placer notre flèche.

Attention : là où les navigateurs basés sur Webkit n'utilisent que le préfixe -webkit, l'implémentation de border-radius par Firefox, en plus d'utiliser le préfixe -moz, diffère aussi dans l'écriture des paramètres (cf. code ci-dessus) !

« On ne montre pas du doigt ! »

Mettre des bulles avec du texte, c'est bien, mais pointer vers le personnage censé dire le texte, c'est mieux !
Nous allons donc voir comment rajouter la petite flèche à notre bulle, permettant de pointer vers le personnage de notre souhait. Pour cela, je vais vous montrer une technique assez particulière et peu connue, mais pourtant très puissante !

Pour créer notre flèche, nous allons utiliser des blocs de dimensions... 0*0 pixels !
Pour bien comprendre la technique que nous allons utiliser, il y a deux points importants à comprendre.

Premièrement, les dimensions réelles d'un bloc sont définies par : le contenu + le padding + les bordures !
Prenons l'exemple de notre bulle. J'avais fixé la hauteur à 80 pixels, mais rajouté une bordure de 2 pixels. Résultat, la hauteur réelle de notre bloc est donc de : 80 pixels + 2 pixels en haut + 2 pixels en bas = 84 pixels !

Le deuxième point concerne le fonctionnement même des bordures. Une bordure part en fait du centre du bloc (quand il est vide), pour aller jusqu'aux extrémités. Prenons l'exemple d'un bloc vide, auquel nous rajoutons des bordures très épaisses :

<span style="display:block;
             width:0;
             height:0;
             line-height:0;
             border-top:30px solid green;
             border-right:30px solid yellow;
             border-bottom:30px solid red;
             border-left:30px solid blue;">
</span>

Le résultat obtenu sera le suivant :


Essayez de modifier la largeur d'une des bordures pour voir l'effet produit, c'est le meilleur moyen de comprendre le fonctionnement assez particulier des bordures. Toucher à une bordure va affecter la forme d'une autre !

Vous l'aurez compris, c'est donc en jouant avec ces valeurs que nous allons créer notre flèche. Vous allez aussi comprendre pourquoi j'ai utilisé deux spans dans mon code arrow_inner et arrow_border. En effet, vu que nous utilisons les bordures pour créer notre flèche, on ne va pas pouvoir ajouter une bordure... à une bordure, pour créer le contour de notre flèche (dans la continuité du contour de notre bulle) ! Pour palier à ce problème, nous allons simplement superposer deux blocs : un de la couleur de la bordure, sur lequel viendra se coller (légèrement décalé) un de la couleur de fond de la bulle.

Voici le code que j'utilise :

#arrow_border{
  width:0;
  height:0;
  line-height:0;
  border-bottom:30px solid transparent;
  border-left:30px solid transparent;
  border-right:30px solid #555555; /* couleur de la bordure de la bulle */
}
#arrow_inner{
  width:0;
  height:0;
  line-height:0;
  border-bottom:30px solid transparent;
  border-left:30px solid transparent;
  border-right:30px solid white; /* couleur du fond de la bulle */
}

Note : cette technique fonctionne également pour IE dans ses versions 7 et 8 !

Cela dit, ce bout de CSS ne fait pas tout. Il faut maintenant positionner correctement notre flèche (arrow_inner + arrow_border). C'est pour cela que je vous avais demandé au début de garder (si possible) un morceau de bordure rectiligne.

Dans mon cas, j'utilise ce positionnement (en absolute, car les spans sont contenus dans le div de la bulle) :

#arrow_border{
  /* ... */
  position:absolute;
  bottom:-30px;
  right:65px;
}
/*
 *  le span qui va se superposer doit être légèrement décalé pour laisser donner l'impression d'une bordure
 */
#arrow_inner{
  /* ... */
  position:absolute;
  bottom:-25px;
  right:67px;
}

Et voilà, avec quelques ajustements, vous obtenez normalement une jolie bulle de bande dessinée !
Oui, mais... la police ne fait pas vraiment BD, elle !

« 22, v'là les flics ! Euh... la police ! »

Pour personnaliser notre police de caractères selon nos envies et pour faire en sorte qu'elle s'affiche correctement même si le visiteur n'a pas la police installée sur son ordinateur, nous allons utiliser une propriété CSS2, qui... (j'espère que vous êtes assis) est supportée par IE (premier « BOUM ») depuis sa version 5 (deuxième « BOUM ») !

Il s'agit de la propriété @font-face, qui permet de « créer » une police personnalisée utilisable en CSS.
Avant de commencer, il faut déjà trouver la police qui convient. Personnellement, je l'ai trouvée sur Blambot, il s'agit de la police Crime Fighter.

Cela dit, la police fournie est au format TTF (TrueType). Sauf que pour pouvoir l'utiliser avec @font-face, il faut qu'elle soit au format .otf (OpenType) ou .eot (Embedded OpenType, dans le cas d'Internet Explorer). Je vous redirige donc vers un petit outil online très bien conçu permettant de convertir vos polices : @Font-Face Generator.
Passez en mode Expert et dans la zone Font Formats, ne cochez que les cases : EOT et OpenType.
Récupérez les fichiers votrepolice.otf et votrepolice.eot, et placez-les dans le répertoire de votre projet.

L'utilisation est très simple, pour créer notre police utilisable en CSS, voici le code à rajouter :

@font-face{
  font-family: ComicFighter; /* le nom que vous voulez */
  src: url('ComicFighter.otf'); /* lien vers votre fichier .otf */
  src: url('ComicFighter.eot')9; /* hack CSS permettant d'utiliser cette police pour IE uniquement */
}

Les fichiers .otf et .eot seront stockés directement sur votre FTP, donc nul besoin que l'utilisateur ait la police installée sur son ordinateur pour qu'elle s'affiche correctement.

Vous pouvez ensuite utiliser directement la police avec le nom que vous avez spécifié, comme n'importe quelle autre police, sur votre texte :

#text{
  font-family: ComicFighter, Georgia; /* on spécifie une autre police standard, au cas où... */
  font-weight:bold;
  font-size:11pt;

  position:relative;
  top:26px;
}

Note : j'applique ici la propriété position:relative, histoire de bien positionner le texte à l'intérieur de la bulle. L'utilisation des padding auraient pour effet de casser la mise en forme.

Et voilà ! Si tout s'est bien passé jusque là, vous devriez obtenir une belle bulle de dialogue comme on en trouve dans les BD !

Si vous avez compris le principe pour créer une Speech Bubble, vous pouvez très simplement créer d'autres types de bulles, comme la Thought Bubble (jetez un œil au code source) !

Derrière ce magnifique jeu de mots très recherché se cache (double jeu de mots !!) en fait une petite mise à jour apportée à ma pseudo-lib Tweets.

Vous l'avez peut-être remarqué, mais le chargement des pages de mon site se fait désormais bien plus rapidement. C'est grâce au système de cache que j'ai implémenté à Tweets.

Vous pouvez désormais spécifier une durée pendant laquelle vos tweets seront mis en cache. Cela permet de soulager le traitement et d'éviter de faire un appel au fichier XML situé sur Twitter à chaque chargement de page.

L'utilisation est simple, par défaut, le cache dure 5 minutes. Vous pouvez en changer la valeur directement dans la lib, ou en passant par la méthode qui va bien :

var $c_lifetime = 5; // durée en minutes
// ou
$tw = new Tweets('delphiki', false);
$tw->set_cache_lifetime(10);

Note : Si la valeur est inférieure ou égale à 0, la mise en cache sera désactivée.

Vous pouvez aussi spécifier le dossier de cache que vous désirez. Par défaut, le dossier tw_cache est créé.
Là aussi, vous pouvez le modifier directement dans la lib ou avec la bonne méthode :

var $c_path = './tw_cache/';
// ou
$tw = new Tweets('delphiki', false);
$tw->set_cache_path('./mon_super_dossier_cache/');

Si vous modifiez le nom et que le dossier n'existe pas, il est créé automatiquement.

Note : si cURL n'arrive pas à joindre Twitter et que la "date d'expiration" de votre cache est dépassée, le cache est conservé.

Pour télécharger la lib, c'est par là : tweets.zip (2.2 ko)

Voilà pour les petites news, j'espère que ça vous sera utile. ;)

@ la prochaine

J'ai modifié la "lib" Tweets pour ajouter l'accès aux informations concernant l'utilisateur.

Une petite liste des informations auxquelles vous pouvez accéder :

$tw->user->id; // id de l'utilisateur
$tw->user->screen_name; // pseudo de l'utilisateur (l'alias $tw->username est conservé)
$tw->user->name; // nom "réel" de l'utilisateur
$tw->user->location; // localisation
$tw->user->description; // description
$tw->user->profile_image; // url de l'avatar
$tw->user->website; // site web
$tw->user->followers_count; // nombre de followers
$tw->user->following_count; // nombre de personnes suivies par l'utilisateur
$tw->user->registration_date; // date d'inscription
$tw->user->f_registration_date; // date d'inscription formatée
$tw->user->statuses_count; // nombre de tweets total de l'utilisateur

Pour télécharger la lib, c'est toujours la même adresse : tweets.zip

Enjoy :)

Après vous avoir montré comment poster des messages sur votre compte Twitter relativement simplement, l'intérêt serait aussi de pouvoir afficher ces derniers sur votre site !

J'ai donc créé une petite classe qui va vous permettre de vous simplifier les choses.

Pour la télécharger, c'est par ici : tweets.zip
Attention : cette classe nécessite PHP >= 5.2.0 et la bibliothèque cURL !

L'utilisation est relativement simple. Voici un petit exemple (c'est le code qui me sert à afficher mes Tweets dans le menu) :

include('tweets.inc.php');
// on créé une nouvelle instance, avec en paramètre, le nom d'utilisateur Twitter
// et en deuxième paramètre optionnel, l'affichage en UTF8 ou ISO (true = UTF8)
$tw = new Tweets('delphiki', false);

for($i = 0; $i < 3; $i++){
	echo '<p class="twitter_status">'.$tw->status($i)->parsed_text.'</p>';
	echo '<p class="twitter_date"><a href="http://twitter.com/'.$tw->username.'/status/'.$tw->status($i)->status_id.'">'.$tw->status($i)->formated_date.'</a> <img src="img/twitter_icon.png" style="position:relative; top:3px;" alt="twitter" /></p>';
}

Vous avez accès à différentes méthodes :

/**
 * Permet de changer le nom d'utilisateur
 * @param string $username Nom d'utilisateur Twitter
 */
$tw->set_username($username);

/**
 * Permet de modifier le formattage de la date par défaut ('d M Y, H:i:s')
 * @param string $format
 */
$tw->set_date_format($format);

/**
 * Active ou désactive la conversion UTF8 -> ISO-8859-1
 * @param bool $utf8
 */
$tw->set_utf8_display($utf8);

Et voici les différentes informations auxquelles vous pouvez accéder pour chaque « status » (= tweet) :

$tw->status($i)->text; // le message
$tw->status($i)->parsed_text; // le message parsé en html (ajoute les liens sur http://, @pseudo et #tag)
$tw->status($i)->date; // date du message
$tw->status($i)->formated_date; // date formatée selon le format spécifié
$tw->status($i)->status_id; // id du message
$tw->status($i)->source; // source du message (web ou nom de l'application : twhirl, etc.)
$tw->status($i)->reply_to; // pseudo de la personne à qui on répond via le message

Mise à jour du 23/07/2009 : Je viens de créer un petit script qui permet de récupérer plus facilement vos Access Tokens. Vous pouvez le téléchager ou bien utiliser la version en ligne.

S'il est bien un phénomène en vogue ces derniers temps sur la toile, c'est bien celui de Twitter. Le but n'est pas de débattre ici de son intérêt. Je pars du principe que si vous lisez cet article, c'est que vous utilisez ce service, et que vous voulez en tirer plus !

En effet, il peut être intéressant par exemple que lorsque que vous publiez un billet sur votre blog ou autre, un lien renvoyant vers ce dernier soit directement ajouté sur votre compte Twitter (ou un compte spécialement prévu à cet effet). Pour arriver à faire ça, nous allons utiliser l'API Twitter. Cependant, nous allons l'utiliser en collaboration avec OAuth, comme le recommande désormais Twitter :

Et comme la vie est bien faite, quelqu'un s'est déjà chargé de créer une lib qui permet d'utiliser plus facilement Twitter avec OAuth !
L'avantage (ou plutôt l'un des) de passer par OAuth, c'est que vous pouvez ainsi spécifier une application en particulier (que vous aurez créé vous-même) lors de vos Twitt', comme on peut le voir ici avec le twhirl :

Il a quelques pré-requis avant de se lancer dans le code :
- PHP 5
- la bibliothèque cURL (normalement présente chez la plupart des hébergeurs)

Pour pouvoir envoyer des messages sur votre compte Twitter via une application, il faut déjà que celle-ci existe (jusque là, rien d'anormal), mais aussi qu'elle soit autorisée !
Nous allons déjà commencer par créer (= enregistrer) l'application sur Twitter. Pour cela, suivez ce lien : https://twitter.com/oauth_clients et cliquez sur Register a new application.
Vous devriez normalement arriver sur cette page :

A vous de donner le nom que vous voulez à votre application (c'est lui qui apparaitra en dessous de vos messages). Les informations qui nous intéressent se situent dans le bas du formulaire, à partir de Application Type. Cochez tout comme sur l'image. Une chose que je ne peux pas deviner pour vous, c'est le champ Callback URL. Mettez juste l'adresse de votre site pour le moment, je reviendrai sur ce point par la suite.

Si tout s'est bien passé, vous devriez normalement avoir une confirmation que votre application a bien été créée et arriver sur cette page :

C'est là qu'il faut commencer à être attentif. Notez dans un coin les Consumer Key et Consumer Secret, ils vous seront utiles pour la suite ! Ce sont eux qui permettront d'identifier l'application sur Twitter.

La première étape est faite, mais il en reste quelques unes avant d'arriver à nos fins. Vous pouvez maintenant télécharger la lib twitteroauth, faite par Abraham Williams, dont je vous ai parlé précédement, en suivant ce lien. Vous vous retrouvez alors avec plusieurs fichiers :
- OAuth.php
- twitterOAuth.php
- example / index.php

Les deux premiers sont les fichiers de la lib. Le dernier, dans le dossier example, contient un fichier d'exemple d'utilisation. Ouvrez ce fichier. Commencez par renseigner les variables comme il faut (lignes 8 et 10) avec les codes que vous avez notés au préalable :

/* Consumer key from twitter */
$consumer_key = 'votre Consumer Key';
/* Consumer Secret from twitter */
$consumer_secret = 'votre Consumer Secret';

Modifiez aussi le chemin du require_once en début de page (en fonction de votre arborescence bien sûr) :

// require twitterOAuth lib
require_once('../twitterOAuth.php');

Enfin, une dernière petite modification à apporter, ajoutez ces lignes :

echo 'Votre Acces Token : '.$_SESSION['oauth_access_token'].' - ';
echo 'Votre Acces Token Secret : '.$_SESSION['oauth_access_token_secret'];

Juste après ceci (lignes 66-69) :

   /* Save the access tokens. Normally these would be saved in a database for future use. */
   $_SESSION['oauth_access_token'] = $tok['oauth_token'];
   $_SESSION['oauth_access_token_secret'] = $tok['oauth_token_secret'];
}

Maintenant que les modifications sont faites, nous allons passer aux explications !
En fait, tout est une histoire de tokens. Pour simplifier, des tokens sont des couples « clé / clé secrète ». Dans notre script, il y en a 3 différents :
- Consumer Key / Consumer Secret, vous savez déjà ce que c'est
- Request Key / Request Secret, qui permettent d'autoriser ou non une application à utiliser un compte
- Access Key / Access Secret, ce sont eux qui identifient un utilisateur

Voilà ce qu'il se passe :
1) à partir des Consumer Key et Consumer Secret, le script va demander à Twitter les tokens Request correspondants
2) à partir des tokens Request, une URL est générée
3) lorsque l'on suit ce lien, on est redirigé vers une page Twitter qui vous demande si vous autorisez l'application à se servir de votre compte
4) si vous autorisez l'application, vous êtes alors renvoyés vers votre script qui vous permettra d'obtenir vos tokens Access

Note : c'est à cette étape qu'intervient le champ Callback URL. Il faut que celui-ci corresponde à l'URL de ce script en particulier. Par exemple : http://www.domaine.com/twitter/examples/index.php
Attention cependant, ce script n'est pas le script que vous utiliserez au final, il ne vous servira normalement qu'une seule fois !

5) grâce aux tokens Consumer et Access, vous pouvez désormais poster des messages sur Twitter directement à partir de votre application.

Maintenant que le fonctionnement est expliqué, passons à la pratique !
Commencez par uploader vos 3 fichiers (OAuth.php, twitterOAuth.php et examples/index.php) sur votre site.
Retournez sur Twitter, à cette page pour être exact : https://twitter.com/oauth_clients
Editez votre application et mettez l'URL du fichier index.php dans le champ Callback URL.

Rendez vous ensuite à l'URL en question. Si tout se passe bien, vous devriez obtenir ceci :

Cliquez sur le lien (le troisième ;-)), vous allez être redirigé vers Twitter, qui va vous demander d'autoriser l'application à utiliser votre compte :

En cliquant sur Allow, vous allez être renvoyé vers votre script, et la page devrait normalement ressembler à quelque chose comme ça :

Et là, Ô Miracle, on obtient nos Access tokens en haut de page ! Enregistrez les quelque part (BDD, fichier de config, etc.) avec vos Consumer tokens.

Nous avons désormais tout ce qu'il nous faut pour poster des messages directement sur notre compte Twitter !
Pour cela rien de plus simple !
Munissez vous simplement des deux fichiers OAuth.php et twitterOAuth.php et deux vos deux couples de tokens Consumer et Access.

Et dans le script où vous désirez envoyez un message sur votre Twitter, cela tient en très peu de lignes (sans oublier d'inclure au préalable les 2 fichiers de la lib) :

$message = 'Un message depuis ma super application :)';

// on créé une connexion entre l'application et le compte Twitter
$to = new TwitterOAuth($consumer_key, $consumer_secret, $access_key, $access_secret);
// on envoie notre message :)
$to->OAuthRequest('https://twitter.com/statuses/update.xml',
	array('status' => $message),
	'POST');

Et voilà le résultat :

Cette introduction n'est faite que pour vous guider un peu, il s'agit là d'une utilisation très basique qui pourrait être rendue encore plus maniable. Je ne détaille absolument pas le code du fichier d'exemple de la lib twitterOAuth (ou de la lib elle même), mais en regardant par vous même, vous pourrez vite vous rendre compte des possibilités offertes. Mon seul but ici était de donner quelques éclaircissements concernant l'utilisation de l'API Twitter, et j'espère que c'est désormais chose faite. N'hésitez pas si vous avez des questions. :)