Le TFL (Transport For London) est l’organisme qui s’occupe entre autre de la sécurité routière chez nos amis anglais. Ces derniers ont décidé de ne pas choquer les gens pour leur dernière campagne de prévention. Leur objectif est de rappeler aux gens que sur la route il y a des voitures mais également des piétons et des vélos.

Cette vidéo virale surnommée « Qui a tué Lord Smith ? » qui me fait penser à un Cluedo vous demande d’être attentif afin de cerner les 21 erreurs (changement de détail pendant la scène).

La morale étant que nous ne sommes jamais assez attentif… En effet, cette vidéo test nous demande de relever le défi des 21 erreurs, nos sens sont donc en éveil et nous faisons attention à chaque détail. C’est surement comme cela que nous devrions être dès lors que nous prenons le volant…

Et voici leur ancienne première vidéo toujours axé sur l’attention, qui vous demande de compter le nombre de passes que fait l’équipe blanche

Il existe une panacée de petits softs ou plugins qui savent générer des miniatures de fichiers d’images non gérés nativement par Windows, mais dès le départ j’avais décidé de ne retenir que le meilleur à savoir Kasalong Thumbnail. En effet, d’autres solutions similaires manquaient de stabilité, de compatibilité et les résultats étaient assez aléatoire.

Seulement ce temps est révolu et aujourd’hui une nouvelle solution existe, et c’est un projet d’actualité !
Je veux parler de SageThumbs, basé sur la librairie GFL SDK de Pierre-Emmanuel Gougelet, qui est le créateur du fameux XnView.

Affichage parfait de tous les formats d'images testés

Ce dernier a effectué un parcours sans faute sur mes différents tests, s’implémente parfaitement dans l’explorateur Windows et prends en charge pas moins de 162 formats d’images à l’heure où j’écris ces lignes !

Quelques petites options bonus

SageThumbs s’implémente parfaitement au menu contextuel de l’explorateur Windows, avec au programme des options classiques mais efficaces qui peuvent éviter une installation d’un logiciel tiers pour les besoins quotidiens :

Diverses options dans le menu contextuel

• Prévisualisation rapide de la photo
• Conversion rapide dans les formats .jpg, .gif, .bmp ou encore .png
• Envoi rapide de l’image par e-mail
• Un clic droit sur une image permet de la copier dans le presse-papier
• Réglages de la taille des images de prévisualisation
• Un survol de la souris sur une photo affiche une info-bulle contenant diverses informations (type d’image, dimensions, résolution, compression, taille, date de modification, etc…)

Paramétrages de SageThumbs

Enfin, SageThumbs est disponible en français et est un logiciel libre sous licence GNU GPL v2 !

OS: Windows 2000/XP/2003/Vista/2008/7 (32/64-bit)

Lien

Site officiel : SageThumbs

Lors de la création de sites web, il nous arrive très souvent d’inviter un internaute à insérer ses coordonnées personnelles dont son adresse postale.
Cette fois, plutôt que d’utiliser un champs classique, nous allons utiliser un widget jQuery UI surnommé jQuery address picker.

Ce plugin fonctionne de deux façons différentes selon les besoins :

Autocomplétion d’un simple champs de texte input

Autocomplétion d'un champs adresse avec jQuery Adress Picker

Un simple champs de texte input qui est devenu bien plus ergonomique pour vos visiteurs et peut dans certains cas éviter des erreurs !
Ce n’est pas arrivé pour ma part, mais évidemment si aucune proposition de Google Maps ne convient il est possible de continuer à écrire son texte comme un champs classique !

La même chose mais à l’aide d’une map Google

Autocomplétion du champs avec une map Google

Selon les cas, il arrive que Google Maps ne positionne pas le pointeur comme il faut ou manque de précision. C’est là que ce widget est également intéressant, il nous permet de faire un drag & drop du pointeur afin de le placer au bon endroit et récupérer au passage les bonnes coordonnées GPS.

Utilisation du plugin

$(function() {
 
    var addresspickerMap = $( "#addresspicker_map" ).addresspicker({
        elements: {
            map: "#map",
            lat: "#lat",
            lng: "#lng",
            locality: '#locality',
            country: '#country'
        }
    });
    var gmarker = addresspickerMap.addresspicker( "marker");
    gmarker.setVisible(true);
    addresspickerMap.addresspicker( "updatePosition");
 
});

Il ne reste plus qu’à mettre en corrélation les éléments HTML avec le plugin. Donc à partir de là selon les besoins, on peut récupérer la longitude/latitude en hidden, ou encore gérer ou non l’auto-positionnement sur la map.

DEMO EN LIGNE

TELECHARGER

ou bien (si le lien est cassé)

TELECHARGER

Il n’est pas nouveau mais étant devenu accroc de ce service en ligne, je ne pouvais m’empêcher de créer un billet à son sujet..

TinEye est un puissant moteur de recherche d’images inversé. Vous devez simplement lui soumettre une image ou son URL, et il se chargera de trouver dans son immense base de donnée les documents où elle se trouve, que ce soit sur le Web ou dans des documents papier (journaux ou magazines).

La base de donnée est immense et s’agrandis chaque jour. A titre d’exemple, au moment ou j’écris ce billet en ce 17 mai 2009, la base propose 1,05 milliard d’images contre 487 millions à la même date l’année dernière !
(UPDATE 05/12/2011 : Aux dernières infos, la base proposait au 14 octobre 2011 environ 2,04 milliards d’images soit près du double un an après !)

TinEye vous retournera la liste des sites où se trouvent l’image en question, en vous proposant d’effectuer différents tris de résultats, soit par image la plus pertinente/ressemblante, ou soit par la taille de l’image (de la plus grande à la plus petite image trouvée par exemple).

L’algorythme de TinEye est puissant et contrairement à ce que l’on pourrait croire, il n’y a pas d’analyse du contenu de l’image ou autre reconnaissance faciale. En fait il se base sur l’analyse des pixels d’une image afin d’identifier une images et ses caractéristiques, ce qui permet au moteur de retrouver des images malgré le fait qu’elles aient été fortement redimensionnées ou altérées au niveau des couleurs.

En somme, le moteur TinEye est continuellement à la recherche de nouvelles images, et crée une signature numérique pour chacune de ses trouvailles avant de l’ajouter dans la base de données afin de finalement simplement comparer la signature de votre image à celles inclues déja dans la base.

A noter que TinEye s’intéresse également aux vidéos, et qu’il ne sera pas étonnant de voir fleurir un service dans le même genre très bientôt !

Enfin, je vais terminer ce billet en précisant qu’il existe un plugin pour Firefox ainsi qu’un plugin pour Internet Explorer, qui vous permettront de rechercher des images similaires en faisant un simple clic droit sur une image et de sélectionner « Search Image on TinEye » via le menu contextuel de votre navigateur préféré

Liens :

• Tester TinEye (site officiel)
• Installer le plugin pour Firefox
• Installer le plugin pour Internet Explorer

Aujourd’hui encore beaucoup de sites web ne se prennent pas la peine d’agrémenter visuellement leurs présentations d’images, illustrations, et autres galeries.
Je comprends que éditer chaque image une par une via Photoshop peut fatiguer à la longue, alors pour gagner du temps nous allons automatiser cela à l’aide du CSS.

Voici donc pour commencer 5 différentes façons simples d’ajouter un peu de saveur à vos images en les rendant plus attrayantes :

Un effet d’ombre portée

DEMO EN LIGNE
HTML

<img class="shadow" src="sample.jpg" alt="" />

CSS

img.shadow {
	background: url(shadow-1000x1000.gif) no-repeat right bottom;
	padding: 5px 10px 10px 5px;
}

Un effet de double bordure

DEMO EN LIGNE
HTML

<img class="double-border" src="sample.jpg" alt="" />

CSS

img.double-border {
	border: 5px solid #ddd;
	padding: 5px; /*Inner border size*/
	background: #fff; /*Inner border color*/
}

Un effet de cadre

DEMO EN LIGNE
HTML

<div class="frame-block">
	<span>&nbsp;</span>
	<img src="sample.jpg" alt="" />
</div>

CSS

.frame-block {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.frame-block span {
	background: url(frame.png) no-repeat center top;
	height:335px;
	width: 575px;
	display: block;
	position: absolute;
}

Un effet Watermark sur l’image

DEMO EN LIGNE
HTML

<div class="transp-block">
	<img class="transparent" src="sample.jpg" alt="" />
</div>

CSS

.transp-block {
	background: #000 url(watermark.jpg) no-repeat;
	width: 575px;
	height: 335px;
}
img.transparent {
	filter:alpha(opacity=75);
	opacity:.75;
}

Une description sur l’image (caption)

DEMO EN LIGNE
HTML

<div class="img-desc">
	<img src="sample.jpg" alt="" />
	<cite>Salone del mobile Milano, April 2008 - Peeta</cite>
</div>

CSS

.img-desc {
	position: relative;
	display: block;
	height:335px;
	width: 575px;
}
.img-desc cite {
	background: #111;
	filter:alpha(opacity=55);
	opacity:.55;
	color: #fff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 555px;
	padding: 10px;
	border-top: 1px solid #999;
}

Merci à SohTanaka pour l’astuce