Blog de Mouafik Amine

Bon et bien voilà, ceux qui me suivent sur Twitter l’ont peut-être aperçu, mais je me suis dernièrement taper un petit Coding Trip; j’ai eu l’envie de tester ces petites choses dont j’entendais parler ces derniers temps : l’HTML5, le CSS3, Twitter et son API etc.
De là est né zeFame.fr, un site pas du tout sérieux qui traite de l’actualité people avec au moins 24h de retard. Bref, j’avais le domaine donc j’ai trouvé une thématique en adéquation avec, voilà tout.
Passons maintenant à la partie intéressante.

» La touche de CSS3

Ce que vous pouvez remarquer, si vous surfez avec un navigateur compatible, ce sont tout d’abord les bords arrondis du pseudo-design. Rien de bien compliqué en fait, pas de PNG transparents ou autre astuce nécessitant du javascript mais tout simplement une utilisation là de la propriété border-radius ! Rentranscrits en CSS3, cela donne :

-moz-border-radius:10px 30px 10px 20px;
-webkit-border-radius:10px 30px 10px 20px;
border-radius:10px 30px 10px 20px;

Comme le CSS3 n’est pas encore officiel, chaque navigateur compliant utilise sa propre propriété. Dès lors, on a -moz-border-radius pour Firefox, SeaMonkey et les dérivés Mozilla, puis -webkit-border-radius pour Chrome, Safari et tous les browser basés sur Webkit. A noter que Webkit n’accepte pas l’écriture shorthands. Il vous faudra donc définir, si différents, distinctement les 4 arrondis. Concernant Opéra et Internet Explorer, ils restent sur la touche.
Voilà pour ce qui est des bords arrondis.

Vient ensuite l’ombre portée. Plutôt chiant et lourd à réaliser en full PNG transparent, l’effet d’ombre portée sur le corps entier est ici généré via la propriété box-shadow :

-moz-box-shadow:1px 1px 10px #000;
-webkit-box-shadow:1px 1px 10px #000;
box-shadow:1px 1px 10px #000;

De la même manière, on retrouve les propriétés propres à chaque navigateur, ainsi que la propriété standard box-shadow qui, cette-fois, est utile à Opera. En effet, à défaut d’avoir intégrer la propriété border-radius vue précédemment, Opera s’est décidé à implémenter box-shadow et ce directement dans sa forme standard – donc pas de -o-box-shadow ou autre dérive. C’est d’ailleurs pour ca que j’ai laisser la propriété border-radius tout court au dessus – sinon oui, elle est inutile.

Niveau CSS3, je n’ai pas plus forcé sur zeFame, même si le CSS3 offre bien plus que ces deux propriétés. Pour une liste plus complète, je vous redirige vers ces différents articles :

- Liste des propriétés CSS3 déjà implémentées
- Plus de 30 tutoriaux sur le CSS3

» La touche d’API

Cela faisait bien longtemps que je voulais tester l’API Twitter et bien voilà, c’est fait ! En l’occurence, sur zeFame, je n’ai eu besoin que de récupérer des tweets : rien de bien compliqué. Je me suis donc rendu sur Twitter Search et ai commencé à regarder comment est construit le flux XML des résultats de recherche afin de coder ma petite fonction get_status_with() :

function get_status_with($hashtag) {
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, "http://search.twitter.com/search.atom?q=from%3AzeFame+%23$hashtag");
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    $src = curl_exec($c);
    curl_close($c);
    preg_match('/<content type=\"html\">(.*)<\/content>/', $src, $m);
    $status = html_entity_decode($m[1]);
    return(utf8_encode($status));
}

Laissez moi vous expliquer le code un peu plus en détail. Avec curl, on récupère le contenu de notre flux. Là, le flux est basé sur les tweets du compte @zeFame, d’où le « from:zeFame » dans la requête, ainsi que sur un hashtag. En effet, sur zeFame.fr je récupère à chaque fois le dernier tweet correspondant à un hashtag, hashtag correspondant à une catégorie sur le site. Une fois le flux récuperer, j’effectue une petite recherche dedans via preg_match() et récupère le tweet qui se trouve dans la balise <content/>. Tout simplement.
En modifiant un petit peu mon code vous pourrez vous en servir pour récupérer les tweets que vous voulez. Si vous ne voulez pas vous contentez du dernier tweet, regardez du côté de preg_match_all.

» La touche d’Ajax

Et pour finaliser le tout, une petite touche d’Ajax avec mon framework préféré – Mootools – que j’aime par sa simplicité, même si vous allez sans doute me vantrer les mérites de jQuery, je sais :p J’ai commencé à dev. sur Mootools et personne ne m’a pour l’instant décider à changer de framework, vous pouvez toujours tenter, on ne sait jamais. En tout les cas, voici comment faire en quelques lignes pour faire une simple requête ajax et mettre à jour le contenu d’un div voulu – ici le div porte l’id « content » :

new Ajax(url, {
		method: 'get',
		onComplete: fn,
		update: $('content')
		}).request();

Je suppose que vous aurez compris ce que represente la variable url, mais la variable fn peut vous intriguer. Elle me sert en fait à apeller la fonction me permettant de faire l’effet de flash lorsque l’on change de catégorie. Cela se fait super simplement avec Mootools :

var fn = function() {
	var fx = new Fx.Style('content', 'background-color', {
		duration: 800,
		transition: Fx.Transitions.Quad.easeOut
	}).start('#EEE', '#212121');
}

Et voilà, vous avez une navigation avec chargement des pages en Ajax et un petit effet qui change de l’habituel ajax-loader tournant que l’on voit un peu partout.
Voilà comment en environ 1h de coding tranquillou-pépère on peut réaliser un petit truc sympathique pour s’amuser et réviser ses classiques

Allez, à bientôt pour un prochain article dans la catégorie Coding, catégorie tout juste inauguré par ce poste !
T’chô

Bonus :
Les sources de zeFame sont disponible au téléchargement. Cela a été fait super rapidement mais si jamais vous avez des remarques, si vous remarquez une faille ou autre, n’hésitez pas à me faire un feedback !