Pour le dernier article avant le week-end, je te propose de découvrir un jeu fait en JQuery et utilisant le PHP. Le jeu un simple « Memory« . Il faut retrouver le plus rapidement possible (et avec le moins de tentatives possibles). Une fois de plus la puissance de JQuery est démontrée, en fait il y a plein de jeux qui peuvent être faits avec JQuery.

C’est également un bon moyen de faire découvrir JQuery au tout petit !

Le site de la digital agency work at play m’a, je dois l’avouer, assez scotché. Déjà le design avec les photos en fond et (presque) en plein écran et les à-plats de couleur sont très réussis. Les photos simples des locaux en noir & blanc sont sympas. La charte graphique globale est chaleureuse avec des couleurs très « web 2.0″.

Autre point positif du site, l’utilisation de JQuery ! Tout le contenu du site est sur la même avec le contenu du site qui slide. J’ai pu noter l’utilisation des plugins Draggable (attaché à JQueryUI), Dialog (également compris dans JQueryUI) ou encore Flip (qui donne un effet de rotation 3d sur un bloc).

Tutorial bien sympa trouvé sur le blog 9lessons : « Twitter like Search with jQuery and Ajax » (« recherche à la twitter avec JQuery et Ajax »). Ce tuto permet donc de créer un formulaire de recherche tout en Ajax. Les résultats sont donc affichés directement sur la même page que le formulaire.

Une démo est disponible directement sur le blog 9lessons.
Voir la démo

A noter que l’on également télécharger les scripts expliqués dans le tutorial. On y retrouve le JQuery, le PHP, l’HTML et même un peu de CSS. Le tuto est bien complet, l’effet de recherche en Ajax est toujours classe. J’espère juste pour toi que tu comprends l’anglais…

Plusieurs mois après la mise en ligne de PHP fonctions, la bibliothèque de fonctions PHP, quelques fonctions PHP se dégagent par leur utilité et leur spécificité. Voici 3 fonctions choisies pour toi :

• get_last_tweets() par Adrian Gaudebert.

  Récupère les derniers statuts d’un compte Twitter. Parfait pour créer un mashup Twitter ou juste afficher ses derniers tweets sur son blog.

• getTinyUrl() (par moi-même)

  Permet de raccourcir une URL en utilisant l’API de Tinyurl. Très utile pour proposer des liens « partager sur Twitter » sans dépasser les 140 caractères !

• La Classe Miniature par PaHtP

  Cette classe (malheureusement en PHP 4, mais facilement adaptable à PHP 5) permet de créer la miniature d’une image avec un redimensionnement proportionnel.

Plugin JQuery que j’ai découvert hier soir : JQuery Editable. Plugin au concept très simple mais qui, bien utilisé, peut être très pratique. En effet, il permet de remplacer un texte en un champ de saisie (input, select ou textarea) en cliquant simplement sur le texte à éditer.

Il gère parfaitement les callbacks (fonction à appeler à la fin de l’execution) à l’envoi des données (à gérer pourquoi pas en Ajax ). Pratique pour faire de l’admin d’un site directement sur le site lui-même (et non pas dans une admin séparée).

Pour le développement d’un site que j’ai en cours, j’ai dû intégrer directement les Gravatars aux membres postant des commentaires. J’ai été tout bonnement étonné de la simplicité à mettre en place en PHP. Tout ça est en complément de tous les plugins et intégration native sur les CMS et plateformes de blog (Drupal, Joomla, Dotclear ou Wordpress).

Pour rappel, un Gravatar (Globally Recognized Avatar) est une image qui vous suit sur tous les sites qui proposent leur intégration. Par exemple sur le blogs Wordpress, quand un commentaire est laché, l’adresse email est demandé et à partir de cet adresse email, Gravatar retourne l’avatar de l’utilisateur. C’est aussi simple que ça.

C’est parfaitement intégrable sur tous les sites. Aucune inscription n’est nécessaire !

Voici comment le mettre en place en PHP :

1
2
3
4
5
6

$email = "arnaud-k@machin.com"; // l'adresse email de l'utilisateur
$default = "http://www.machin.com/avatar-par-defaut.jpg"; // l'url de l'image à afficher par défaut si l'utilisateur n'a pas de Gravatar
$size = 40; // la taille pour l'affichage du gravatar (celui-ci sera carré)
 
// on construit ensuite l'url du Gravatar
$gravatar = "http://www.gravatar.com/avatar.php?gravatar_id=".md5( strtolower($email) )."&default=".urlencode($default)."&size=".$size;

Il n’y a plus qu’à afficher le Gravatar en html :

<img src="<?php echo $gravatar ?/>" alt="nom du membre" />

J’ai eu très récemment l’occasion de travailler sur l’API de Youtube. Cette API, évidemment fourni par Google, est très complète et peut permettre beaucoup d’interactions avec Youtube (recherche et visionnage de vidéos, upload, login, …). La documentation fourni par Google est, comment dire, un peu fouilli et pas très claire.

Je vais néanmoins te partager mes découvertes en proposant un tutorial pour rechercher des vidéos sur Youtube, afficher les résultats (sous forme de miniature) et lire les vidéos.

Demo Api Youtube

Comme d’hab, j’ai préparé une démo de ce tutorial (démo hébergée chez mon employeur car mon hébergement 1&1 n’est pas PHP 5). Comme c’est du PHP, j’ai également prévu le téléchargement des sources de la démo.

Tout d’abord il est absolument nécessaire d’avoir un serveur PHP 5.2 au minimum. Il faut également télécharger un standalone du framework PHP zend, GData qui contient les fichiers nécessaires au fonctionnement de l’API. Enfin pour juste effectuer des recherches et afficher des vidéos, il n’est pas nécessaire d’avoir une key pour l’API Youtube.

Dans le .zip de GData, il y a un dossier « librairy » dans lequel on retrouve un dossier « Zend », c’est celui-là qu’il faut uploader à la racine de ton site.

Jetons maintenant un oeil au code :

Le principe est le suivant : on fait une requête (en utlisant les objets mis à disposition par l’API) et on récupère et on traite les informations à partir du flux XML retourné (voir la liste des infos disponible).

1
2
3
4
5
6
7
8
9
10
11
12
13
14

require_once 'Zend/Gdata/YouTube.php'; // on charge la librairie YouTube
 
$yt = new Zend_Gdata_YouTube(); // on initialise l'objet Youtube
$yt->setMajorProtocolVersion(2);
$query = $yt->newVideoQuery();
$query->setOrderBy('relevance'); // les vidéos sont classées par pertinence
$query->setTime('all_time'); // on souhaite afficher les vidéos qui ont été ajoutées n'importe quand
$query->setVideoQuery("fat freddy's drop"); // on définit la recherche
 
// on récupère un flux XML avec la liste des vidéos
$flux = $yt->getVideoFeed($query->getQueryUrl(2));
 
// on affiche les miniatures 
get_results($flux);

La fonction get_results() est une fonction permettant de parcourir le flux XML des résultats pour le traitement des informations. Cette fonction appelle elle-même la fonction afficheMiniature() qui permet d’afficher les miniatures des vidéos. Ici, je stoppe le listing des résultats à 6, mais on peut en afficher jusqu’à 25.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/******** FONCTIONS POUR L'API YOUTUBE ********/
// On recupère l'url du player flash et une miniature de la video (format 120*90)
// et on affiche la miniature en mettant l'url du player en id (pour le récupérer avec JQuery après)
function afficheMiniature($video)
{
	$miniature = $video->getVideoThumbnails();
	echo '<img class="videoThumb" id="'. $video-/>getFlashPlayerUrl() .'" src="' . $miniature[0]['url'].'" alt="" />';
}
 
// fonction permettant de parcourir les vidéos provenant d'un flux
function get_results($videos)
{
	    $count = 1;
	    foreach ($videos as $video) {
		afficheMiniature($video);
		if($count==6)
			break;
		$count++;
	    }
}

Enfin, j’ai ajouté un petit code JQuery pour permettre l’affichage d’un seul player flash (s’il y en a plusieurs sur une page, celle-ci peut galérer un peu) et de changer la vidéo lorsque l’on clique sur une miniature. Par défaut (au chargement de la page) on affiche la première vidéo.

1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).ready( function () {
	/* ##########
		AFFICHAGE DYNAMIQUE DES VIDEOS
	########## */
	if($("#lectureVideo")) // afficher une video au chargement de la page si le div ayant pour id lectureVideo
	{
		var urlVideo = $("img.videoThumb:first").attr("id");
		$("#lectureVideo").html('<object width="360" height="300"><param name="movie" value="'+urlVideo+'&color1=0x2193bd&color2=0x2193bd"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+urlVideo+'&color1=0x2193bd&color2=0x2193bd" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="300"></embed></object>');
	}
	$("img.videoThumb").click( function() { // si on clique sur une miniature on affiche la vidéo dans le bloc ayant pour id "lectureVideo"
		$("#lectureVideo").html('<object width="360" height="300"><param name="movie" value="'+$(this).attr("id")+'&color1=0x2193bd&color2=0x2193bd"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+$(this).attr("id")+'&color1=0x2193bd&color2=0x2193bd" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="300"></embed></object>');
	});
});

Pour voir la structure HTML que j’ai utilisé, je t’invite à regarder le code de la démo (CTRL+U sous firefox). C’est à toi de jouer maintenant !

Toute la code officielle est disponible ici.