Tag : Programmation

Mes favoris de la section JavaScript :

• Eléments HTML déplaçables
• Ressources DHTML en tout genre
• 5 scripts utiles
• Prototype : une classe pour faire de jolis effets graphiques simplement
• Scriptaculous : une classe pour faire des effets graphiques et des éléments déplaçables
• SlideShow tout en douceur (dont j'ai déjà parlé)
• Comment créer un éditeur WYSIWYG
• Awards du Web 2.0

Et puis 4 sites de références de Javascript. Chacun ont leurs avantages et inconvénients. J'utilise ne priorité celle du W3C car elle est la plus simple à utilisé, mais après les autres se valent à peu de choses près.

• Référence du W3C
• Référence de Sun
• Référence de Mozilla (peut-être des éléments compatibles uniquement Gecko)
• Référence de JavaScript Kit

Tellement énervé de mettre cet iframe sur mon blog que j'ai regardé du côté de l'API PHP que FlickR.

Et tellement les exemples sont simples et clair que je n'ai pu m'en empécher...

Donc, pour commencer, je code PHP :

$set = $_GET['set'];

$params = array(
	'api_key'		=> 'YOUR_FLICKR_API_KEY',
	'method'		=> 'flickr.photosets.getPhotos',
	'photoset_id'		=> $set,
	'format'		=> 'php_serial',
);

$encoded_params = array();

foreach ($params as $k => $v){
	$encoded_params[] = urlencode($k).'='.urlencode($v);
}

function urlImg($farm, $server, $id, $secret) {
 return 'http://farm'.$farm.'.static.flickr.com/'.$server.'/'.$id.'_'.$secret.'.jpg';
}

$url = "http://api.flickr.com/services/rest/?".implode('&', $encoded_params);
$rsp = file_get_contents($url);
$rsp_obj = unserialize($rsp);

if ($rsp_obj['stat'] == 'ok') {
	$ret = "countArticle = 0;
	var mySlideData = new Array();";
	foreach($rsp_obj['photoset']['photo'] as $photo) {
		$url = urlImg($photo['farm'], $photo['server'], $photo['id'], $photo['secret']);
		$ret.= "mySlideData[countArticle++] = new Array('$url', '#', '".$photo['title']."', '');\n";
	}
	$ret.= "function startSlideshow() {
		var slideshow = new timedSlideShow($('mySlideshow'), mySlideData);
	}
	addLoadEvent(startSlideshow);";
	echo $ret;
} else {
	echo "Call failed!";
}
?>

(Oups, pas de commentaires...)

Et ensuite, il suffit de l'appeler comme un fichier source JavaScript, en donnant en paramètre le set_id que l'onveut afficher et l'id de la div dans laquelle on veut afficher le SlideShow. Enfin, il faut que tous les éléments nécessaires au Smooth SlideShow soient présents, et c'est tout bon...

Le résultat :

J'ai voulu tester FlickR.

Pour ce qui est du chargement, du tri des images, des tags etc... aucun soucis.

Masi ensuite, je me suis dit : tiens ça serait bien de pouvoir faire un slideShow comme je vous avais fait pour les photos de Lyon. Alors j'ai cherché sur le site. J'ai vite trouvé tous les services et la description des webServices (très claire) qui permettaient de récupérer les photos d'un utilisateur, d'un tag donné, d'un 'set' etc...

Alors j'ai commencé à chercher si ce que je voulais faire n'existait pas déjà. Je n'ai trouvé que FlickrShow qui marche sans problème, mais qui ne me convient pas car propose seulement un défilement manuel des images.

Alors je me suis dit : "Bon, ben on va mettre la main à la patte et on va faire un petit truc sympa qui utilisera le Smooth SlideShow de l'autre fois en récupérant les images via le webService, et tout ça, avec un joli JavaScript en Ajax."

J'ai vite trouvé l'ensemble des éléments dont j'avais besoin au niveau des webServices de FlickR, il ne me restait plus qu'à coder. J'ai donc commencer à faire une jolie classe qui allait appelerr avec un XMLHttpRequest le webService de FlickR et me rappatrié l'ensemble des images que j'aurai sélectionné (par tag par exemple).

Mais, j'ai appris quelque chose : en JavaScript, un XMLHttpRequest ne peut appeler des pages que sur le domaine sur lequel il est utilisé, pour des raisons de sécurité. Par exemple, depuis nyrodev.info je ne peux appeler que des fichiers qui sont sur nyrodev.info. Mes espoirs de réaliser mon SlideShow en JavaScript ce sont effondré.

Du coup, j'ai tout fermé et je me suis remis à mon projet Java, bien moins intéressant, mais qui doit être terminé pour mardi...

Quelques heures plus tard, me revoilà surmon blog pour écrire ce billet, et je me dis que c'est quand même dommage que vous ne puissiez pas voir les belles photos que j'avais mis pour tester. Alors j'ai cherché une solution de remplacement, beaucoup moins élégante, mais qui marche sans aucun problème : intégrer directement le swf de FlickR sur mon blog. La seule solution qui marche est de passer par une iframe qui appelle une page de FlickR. L'intégration directe du swf ne fonctionne pas, ils ont sans doute mis une vérification...

Et donc, vous l'attendez tous, le voici :

Et puis, pour en revenir à nos histoires, c'est possible que quand j'aurai un peu de temps, je ferai un script PHP qui générera du code JavaScript pour faire ce que je vous disai tout à l'heure.

Il arrive parfois qu'on est besoin de transférer énormément de données d'une base de donnée MySQL vers une autre (passage en production, changement de serveur...)

Or, ce qui arrive quelques fois dans ces cas-là, c'est que le fichier sql soit tellement gros qu'on ne peut pas l'envoyer via phpMyAdmin ou bien que le php mette trop de temps et arrive au timeout de la page... Bref, on n'y arrive pas. La solution utilisé quelques fois et le tranchage en parties du fichier sql et l'envoi par petits morceux : très laborieux.

La solution que je vous propose marche du tonnerre, mais uniquement si vous avez un accès SSH au serveur. Le principe est simple : vous allez envoyer votre fichier sql sur le serveur par FTP, puis l'exécuter directement avec la commande mysql. Et donc, voici ce que vous attendez tous, la commande à utiliser :

# mysql -h HOTE -u LOGIN --password=PASSE BASE < fichier.sql

Bien sûr, à vous de modifier HOTE, LOGIN, PASSE, BASE et fichier.sql selon ce que vous faites, mais ça, vous saurez le faire. J'ai déjà utiliser ce système sur Client Roi dans un script bash qui fait la mise à jour des données journalières. Et puis hier soir, c'était pour transférer la base de données des régions, départements, cantons et villes de France de mon EasyPhp vers le serveur de production.

Et si vous n'avez pas d'accès SSH, vous pouvez toujours créer un script PHP qui vous lira votre fichier.sql et vous exécutera N requêtes pas appel, mais c'est déjà plus contraignant...

Sur presse-citron, Eric vient de nous faire découvrir un système qui marche avec un seul appel à un javascript, qui fait les vignettes sur absolument tous les liens de la page.

L'inconvénient de ce système, c'est que les vignettes apparaissent même sur les liens du site sur lequel on a installé le script. Pas super...

Donc, j'ai essayé de modifier le script pour changer tout ça, je vais donc vous en expliquez le principe.

Attention, le fait de modifier le script est interdit dans la charte "Terms & Conditions" que vous devez signer pour accéder au script.

Donc, la méthode :

1. Vous inscrire sur cette page pour être identifié sur leur site (site, mail et c'est tout)
2. Récupérer l'url du script qui est donné dans le textarea et l'appeler directement dans le navigateur pour l'enregistrer dans un fichier .js
3. Ouvrir ce fichier js avec un éditeur texte et remplacez ceci :

   var _36=url.match(/^(http)s?:\/\/(^#*)/);var _37=document.location.href.match(/^(http|file)s?:\/\/(^#*)/);

   par :

   var _36=url.match(new RegExp("^(http)s?:\/\/(^#\/*)","i"));var _37=document.location.href.match(new RegExp("^(http|file)s?:\/\/(^#\/*)","i"));

4. Envoyez ce fichier .js sur votre site
5. Ajouter dans le head de votre page la ligne script pour appeler le .js

Et voilà.

En fait, ils ont déjà mis une vérification, mais qui ne regarde que si l'adresse pointée est la même que celle sur laquelle on est. J'ai juste fait pour que ça teste sur le nom de domaine.

En lisant le blog de Gérald qui a fait un trackback sur mon billet, je me suis aperçu que Snap avais mis en place une FAQ, dont une question pose le problème que j'ai résolu. La solution qu'il donne consiste à ajouter un bout de code en bas de votre vape, qui va mettre l'attribut class à snap_nopreview (en ajoutant aux classes déjà présentes s'il y en a). Ceci car dans le parcours des noeuds de lien du code, ils ne mettent un écouteur que sur les liens qui n'ont pas cette classe dans leur attribut. Je l'avais vu en lisant le code, mais pas penser à procéder de la sorte. Donc, la solution pour employer cette technique (ce qui fait qu'on reste dans le cadre des utilisations permises)

1. Mettre en place le script comme donné sur snap.com
2. Ajouter le code suivant tout en bas de votre page, juste avant le :
   Bien sûr, changer l'adresse du site