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 !

Je profite de ce dimanche peu ensoleillé pour mettre à jour mon p’tit blog et pour vous parler de ma semaine cinéma. Et cette semaine, le film que j’attendais c’était G.I. Joe, le réveil du Cobra !
J’avais vu la bande annonce en allant voir Transformers 2 il me semble et je m’étais juré d’aller le voir. Voilà qui est fait !

Avant tout, G.I. Joe se veut être l’un des blockbusters de l’été ! Avec au casting Sienna Miller, Channing Tatum, Marlon Wayans et Dennis Quaid, sans oublier Mr. Eko, G.I. Joe et l’un de ses films frais, avec des stars connues mais pas trop, des effets spéciaux à vous couper le souffle et une pointe d’humour – compter sur le frère Wayans pour ça : bref, tous les ingrédients sont là pour vous laisser scotché à votre siège pendant les 2h que dure le film
Pour ce qui est de l’intrigue, je vous cite le synopsis d’Allociné :

Des montagnes de l’Asie centrale aux déserts d’Egypte, des rues de Paris au pôle Nord, les agents de l’équipe d’élite connue sous le nom de G.I. Joe mènent une lutte acharnée contre un ennemi redoutable. Disposant des toutes dernières technologies en matière de renseignement et de matériel militaire, ils combattent le puissant marchand d’armes Destro et la mystérieuse organisation terroriste nommée Cobra, qui cherchent à plonger le monde dans le chaos …

Par contre, vous risquez sans doute de rester sur votre faim une fois le film terminé, avec beaucoup de questions en tête etc. mais rassurez-vous, une suite et d’ores et déjà prévue ! Petite anecdote au passage, G.I. Joe a détrôné le film Blue Brothers dans le record du nombre de voiture détruites avec un compteur s’elevant à 112 ! Pas sûr qu’il faille s’en réjouir …

Un petit billet pour vous tenir au courant de l’agitation qui se déroule depuis ces derniers jours sur ma petite e-life, c’est-à-dire mon blog et ce qui l’entoure ainsi que mes projets.

Comme vous le savez maintenant, je suis en stage chez MediaEtudiant et travaille sur le site Mon-Instit, ce qui me prend à vrai dire pas mal de temps.
Cependant, sur mon temps libre, j’en profite pour effectuer quelques modifications sur le blog et sur mon portfolio qui, comme vous auriez pu le remarquer dans le header du blog, est passé du statut d’inaccessible au statut de ^WIP – work in progress. Vous n’y trouverez rien d’intéressant si ce n’est le squelette de mon portfolio en devenir (si je ne pète pas un câble d’ici là et ne me décide à tout refaire de zéro). Cependant, vous pouvez maintenant vous rendre sur la page A propos ainsi que sur la page Contact. De même, comme vous avez pu le voir sur la sidebar de droite, des travaux ont été effectués. Vous avez maintenant accès à 5 articles que j’ai choisi. Sans doute ferais-je dans les jours à venir des thumbnails pour tous mes articles et vous les proposerais ainsi en random – au hasard – mais pour l’instant, c’est du fixe. Aussi, j’ai implémenté un effet de slide pour l’affichage des catégories et des archives, ses informations étant nécessaires mais pas super esthétiques – je n’aime pas trop l’effet liste.

Voilà, voilà ! C’est un petit peu tout ce que j’avais à dire sur tous ces changements. Sans doute en aviez vous remarquer certains et pas d’autres, mais comme ça, c’est fait !