dimanche 8 avril 2012

Projet 'infusion'


'projet infusion' aka 'a teapot a day'

Une image par jour - Explication du procédé :

Le code fonctionne de la façon suivante : c'est un mélange de javascript qui va chercher sur l'ordinateur la date du jour et d'images stockées en ligne sur dropbox (nécessite la création d'un compte gratuit). Tu auras besoin de 366 images de taille égale (par exemple 170x170px), nommées de la façon suivante :
  1. img1-1.jpg  (pour le premier janvier)
  2. img2-1.jpg (pour le 2 janvier)
  3. ...
  4. img31-12.jpg (pour le 31 décembre)
Les mettre en ligne sur dropbox dans un répertoire public partagé appelé teapots (par exemple).

<SCRIPT LANGUAGE="JavaScript">
<!-- // début du script
 // code by Matt
 var dt = new Date();
 var jour = dt.getDate();
 var mois = dt.getMonth() + 1;
 var msg="<img src=http://adresse du dossier dropbox/teapots/img"+jour+"-"+mois+".jpg>";
 document.write(msg);
<!-- end -->
</SCRIPT>

La démo test installée fonctionne du 8 au 31 avril (img8-4.jpg, img9-4.jpg, ... img31-4.jpg).
UPDATE : prolongation sur mai et juin

Tu n'est pas obligée d'attendre le jour d'après pour vérifier, tu n'as qu'à changer la date de ton ordinateur à la date de demain (ou plus tard) pour changer la photo de la théière.

L'intérêt de procédé est que tu peux à volonté changer tes photos dans ton dossier dropbox et facilement les renommer. Tu peux commencer par faire une série d'une semaine (7 images) ou d'un mois (29 à 31 images) sans avoir à faire toute l'année d'un seul coup). Pourquoi utiliser dropbox ? L'intéret est de conserver une adresse http constante pour l'ensemble des images et les images seront plus facile à gérer (modifier , effacer, renommer, etc.).

Ajouter une légende

Récapitulatif en 10 étapes :
  1. Prendre les dimensions sur le site pour la taille du gadget souhaitée
  2. Recadrer / réduire les images à la même taille (par exemple 170x170px)
  3. Renommer ses images img1-1.jpg, img2-1.jpg, img3-1.jpg, ... , img29-12.jpg, img30-12.jpg, img31-12.jpg 
  4. Créer un compte gratuit sur dropbox
  5. Créer un dossier 'teapots' dans le dossier 'Public' et partager ce dossier
  6. Copier le code présent dans l'encadré et le coller dans un gadget "HTML/Javascript"
  7. Remplacer dans le code l'adresse du dossier dropbox/teapots/ par celui de ton dossier teapots sur dropbox. Dans cet exemple le chemin du dossier est  http://dl.dropbox.com/u/3774870/teapots/
  8. Cliquer sur 'Enregistrer'
  9. Cliquer sur 'Afficher le blog'
  10. Enjoy