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 </body> :

   <script type="text/javascript">
   //<![CDATA[
       //change sites internal links to class "snap_nopreview"
       var links = document.getElementsByTagName('a');
       for (var l = 0; l < links.length; l++) {
           if(links[l].href.match(/^http:\/\/www\.nyrodev\.info/)){
               links[l].className += " snap_nopreview";
           }
       }
   //]]>
   </script>

   Bien sûr, changer l'adresse du site

Cette semaine, un élève apprenait à quelqu'un une technique de multiplication qu'il avait vu sur Koreus. La voici :

Etonnant, non ?

Et puis je me suis demandé comment cela pouvait bien marcher. J'ai donc observer ce qu'on faisait vraiment, en comptant les intersections. On ne fait rien d'autre que faire des multiplications de tous les chiffres du 1er terme avec tous les chiffres du second terme, puis on additionne ce que l'on trouve, en faisant bien attention de n'additionner que ceux qui donnent les mêmes puissances de 10. (C'est d'ailleurs pour ça qu'on fait le repport du 1 avec le 8 dans l'exemple ci dessus)

Mais avec cette technique, on s'aperçoit très vite que c'est beaucoup plus embêttant dès qu'on a des chiffres plus grands que 5. Ma curiosité m'a poussé à chercher une autre méthode, basée sur le même principe, mais se dégageant de cet aspect 'graphique'. J'ai réussi à la mettre au point assez vite, par analogie avec celle présentée plus haut.

Enfin, mon âme de surfeur m'a entraîné à chercher si cette technique était présentée ailleurs. Bien entendu, j'ai commencé par Wikipédia. Et là, j'ai donc retrouvé la méthode que j'avais mise au point juste avant, expliqué de façon très clair : Multiplication par Jalousies. La méthode de la vidéo n'est qu'une mise en page sympathique de cette technique. Et puis encore tout plein d'autres, avec chacune leurs défauts et leurs qualités.

Laquelle préférez-vous ? La bonne vieille méthode ou une de celles-ci ? Personnelement, celle par jalousie me convient tout à fait.

Maintenant, on peut se demander pourquoi à l'école on nous a enseigné une méthode plutôt qu'une autre. La solution que je préssens pour le moment est le fait qu'elle est plus facilement explicable en terme mathématique et logique que les autres, car simplement en colonne, et pas d'histoire de diagonale. Allez expliquer à un enfant qu'il faut additionner les chiffres en diagonale (qui plus est sur la gauche) pour trouvé les chiffres un par un... Vous voyez d'autres explications ?

Prenez :

• 8 tapis roulants
• 4 personnes habillés à la 70's
• une chanson rock sympa (quelqu'un connaît ?)

Ca vous donne une clip fait maison bien sympa :

Le principe est simple : on se trémousse devant sa webcam sur le son d'une musique entraînante. la vidéo est générée à la volée via Flash Média Server vraissemblablement, on renseigne 2/3 choses (login, mail et date de naissance) et la vidéo est prête à être sur le site. Juste une validation par Warner est nécessaire pour voir sa vidéo dans le classement.

Les bons points pour ce site :

• L'encodage en live depuis la webcam (on peut aussi envoyé ses vidéos directement)
• Plein d'outils permettant de faire la promo de sa vidéo sur son blog (cf plus bas)
• Un moyen assez sympa pour faire connaîte le film (Ou, parce que je vous ai pas dit, c'est pour un film)

Les mauvais points :

• Rechargement de la page à chaque fois : un élément en Ajax aurait été du plus bel effet, ou bien un appel via LocalConnection de Flash pour éviter cela
• Pas de français, va savoir pourquoi...
• Je trouve qu'on ne met pas assez en valeur, on se demande au début sur quoi on arrive (du moins, c'est mon cas)

A noter que le concept n'est pas nouveau, on l'avait déjà notamment sur toutouyoutour.net

Comme je n'ai pas pu résister, j'ai fait une petite vidéo pour le fun

Enfin, je vous en parlais plus haut, la promo sur son blog, on a notre disposition : l'inclusion du player swf :

Des images de 3 formats différents :

Google a crée en juin 2005 le protocole sitemap qui permet pour un site internet d'indiquer quelles sont l'importance de ses pages et de mieux référencé son site.

Dorénavent, Yahoo et Live Search vont supporté ce protocole pour améliorer le référencement sur ces moteurs de recherche.

Une bonne nouvelle donc, qui tend à la normalisation du référencement, et donc, qui simplifiera et uniformisera la procédure de référencement.

• Site Officiel de sitemap
• L'annonce de Google
• L'annonce de Yahoo
• L'annonce de Live Search
• La page de WebRank sur le sujet

Via WebRank

A l'heure où l'on veut des débits de plus en plus grands, pour transférer et transmettre des fichiers de plus en plus conséquent, une pétition voit le jour pour demander une réseau en fibre optique jusqu'à l'abonné. Les signatures seront regroupé et envoyé au conseil général des départements renseignés.

Donc je vous encourage à la signer, et à en parler autour de vous.

Voir le manifeste
Le site

Pour un site en construction, j'ai du mettre en place une infobulle sur des images.

J'ai d'abord commencé par chercher à droite à gauche ce qui se faisait, pour voir si je ne pouvais pas trouver un script à réutiliser tout simplement.

Après bien des tests, aucun ne fonctionnait dans mon cas, dans un site tout en Div/CSS.

Donc, j'ai commencé par rechercher comment déplacer une div par rapport à la souris. J'ai trouvé ce dont j'avais besoin sur Tout Javascript. Enfin presque : le seul soucis de ce code, c'est qu'il ne tient pas compte des barres de défilement; autrement dit, si vous descendez dans votre page, votre 'infobulle' changera de place, mais en haut, et donc vous ne la verrez pas. Voici donc le code modifié :

function mouseMove (evt) {
	var x = 0;
	var y = 0;
	var plusX = 0;
	var plusY = 0;
	if (document.layers) {
		x = evt.x;
		y = evt.y;
		plusX = window.pageXOffset;
		plusY = window.pageYOffset;
	} else	if (document.all) {
		x = event.clientX;
		y = event.clientY;
		plusX = document.body.scrollLeft;
		plusY = document.body.scrollTop;
	} else if (document.getElementById) {
		x = evt.clientX;
		y = evt.clientY;
		plusX = window.pageXOffset;
		plusY = window.pageYOffset;
	}
	document.getElementById("popBox").style.left = (x+plusX+15)+"px";
	document.getElementById("popBox").style.top = (y+plusY+5)+"px";
} 
if (document.layers)
	document.captureEvents(Event.MOUSEMOVE); 
if (document.layers || document.all) 
	document.onmousemove = mouseMove; 
if (document.addEventListener) 
	document.addEventListener('mousemove', mouseMove, true);

Vous l'aurez compris, j'ai placé juste derrière mon <body> une div vide avec comme id popBox, qui a comme attribut CSS position: absolute (et d'autres si vous en avez besoin...)

C'est quasiment fini. En effet, j'ai à ma disposition une div qui suit la souris tout le temps. Il ne me reste plus qu'à la cacher par défaut, et à l'afficher au survol des éléments qui doivent avoir une infobulle, et à y insérer le contenu que je veux. Dans mon cas, il s'agissait d'afficher un zoom sur une image au survol de sa vignette. J'ai donc décider d'afficher cette image dans une div invisible; de cette façon, le chargement de l'image commence avant que la personne passe dessus l'image. Et lorsque je dois afficher le contenu, je copie simplement le contenu de la div cachée dans ma div popbox. Le code :

function montre(id) {
 var elt = document.getElementById('popBox');
 elt.style.display = "block";
 elt.innerHTML = document.getElementById(id).innerHTML;
}
function cache() {
 var elt = document.getElementById('popBox');
 elt.style.display = "none";
}

La fonction montre est appellée sur le onMouseOver de l'image, avec en paramètre l'id de la div à recopier. La fonction cache est quant à elle appelée sur le onMouseOut de la même image.

Et voilà, une belle infobulle qui fonctionne super bien avec IE et FireFox.