Skip to main content

Introduction à Visual Search

Boulanger Romuald

Boulanger Romuald

Dirigeant, UCAYA

http://www.ucaya.com

Création et mise à disposition d’un Visual Search pour la promotion de votre moteur de recherche.

Pré requis :

  • Niveau : débutant

Introduction

Les Visual Search permettent à un utilisateur d’enrichir le champ de recherche instantanée d’Internet Explorer avec différents moteurs de recherche tels Live, Google, Wikipédia  ou encore Facebook et d’afficher des suggestions structurées et illustrées.

Rechercher sur eBay

Prenons l’exemple du célèbre site eBay, un Visual Search est déjà mis à disposition sur « Internet Explorer Gallery ».

Principe de fonctionnement

Mise à disposition du lien d’installation soit sur votre site, blog ou encore dans la galerie d’Internet Explorer :

Figure 1 – Internet Explorer Gallery

Figure 1 – Internet Explorer Gallery

Une fois installé, celui-ci est disponible dans la liste de la barre de recherche :

Figure 2 – Barre de recherche d’IE8

Figure 2 – Barre de recherche d’IE8

La recherche va s’effectuer sur le Visual Search selectionné.

Ici nous recherchons « zune ». Le Visual Search d’eBay va nous proposer un résultat structuré en deux parties, la première correspondant aux différentes suggestions et la seconde aux résultats les plus populaires.

Figure 3 – Menu de recherche d’IE8

Figure 3 – Menu de recherche d’IE8

Implémentation

Un Visual Search est décrit par l’intermédiaire d’un fichier xml basé sur OpenSearch Description.

Ce fichier va permettre de spécifier les propriétés du Visual Search et de passer des paramètres à l’url qui retourne le résultat.

Le résultat des suggestions est structuré sous forme d’un fichier xml.

Fichier de description

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns=" http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>eBay</ShortName>
  <Url type="text/html" method="get" template="http://rover.ebay.com/rover/1/711-43047-14818-1/4?satitle={searchTerms}"/>
  <Image height="16" width="16" type="image/x-icon">http://ie8.ebay.com/resources/images/favicon.ico</Image>
  <Url type="application/x-suggestions+xml" method="get" template="http://ie8.ebay.com/open-search/output-xml.php?q={searchTerms}"/>
</OpenSearchDescription>

<OpenSearchDescription/> est le nœud racine.

<ShortName/> est le nom du Visual Search (Obligatoire)

<Url/> avec comme type "text/html" est l’url de recherche basic (Obligatoire)

<Image/> correspond à l’icône du Visual Search (Facultatif)

<Url/> avec comme type "application/x-suggestions+xml" est l’url de recherche des suggestions affichées dans le menu (Facultatif)

La variable {searchTerms} correspond  au texte tapé dans la barre de recherche.

Fichier de résulat

C'est l'url de type "application/x-suggestions+xml" qui va nous intéresser pour afficher les suggestions.

L'url peut être une page aspx, php ou encore un webservice mais qui doit retourner comme résultat un fichier xml structuré.

<SearchSuggestion xmlns="http://opensearch.org/searchsuggest2" version="2">
	<Query>zune</Query>
	<Section title="eBay popular suggestions">
		<Item>
			<Text>zune 30gb</Text>
			<Url>http://rover.ebay.com/rover/1/711...</Url>
		</Item>
		<Item>
			<Text>zune 120gb</Text>
			<Url>http://rover.ebay.com/rover/1/711-...</Url>
		</Item>
		<Item>
			<Text>zune 80gb</Text>
			<Url>http://rover.ebay.com/rover/1/711-43047-14...</Url>
		</Item>		
		<Separator title="Popular matches"/>
		<Item>
			<Text>AV CABLE+CAR+WALL CHARGER+USB...</Text>
			<Url>http://rover.ebay.com/rover/1/711-...</Url>
			<Description>$8.99 (Buy It Now)</Description>
			<Image source=" http://...image.jpg alt="AV CABLE+CAR+…" width="48" height="48" align="top"/>
		</Item>
		<Item>
			<Text>ZUNE 80 GB DIGITAL MEDIA PLAYER 2ND GEN…</Text>
			<Url>http://rover.ebay.com/rover/1/...</Url>
			<Description>$202.50 (19 bids)</Description>
			<Image source="http://...image.jpg" alt="ZUNE 80 GB DIGITAL …" width="48" height="48" align="top"/>
		</Item>
	</Section>
</SearchSuggestion>

<SearchSuggestion/> est le nœud racine.

<Query/> correspond au texte recherché.

<Section/> va contenir les éléments.

Ce nœud dispose d’un attribut « title » pour personnaliser le texte d’entête du menu.

<Item> nœud corrspondant aux différentes suggestions.

               <Text/> Texte affiché.

               <Url/> Url envoyée lorsque l’on clique sur l’element.

               <Description/> Information supplémentaire affichée en grisée sous le Texte.

               <Image/> Vignette de l’élément pour illustrer la suggestion.

<Separator/> permet d’afficher un séparateur entre des éléments.

Ce nœud dispose d’un attribut « title » pour afficher un titre en plus du trait de séparation.

Installation

Pour l’installation, il faut utiliser la méthode Javascript  « window.external.addSearchProvider » fournie par Internet Explorer, avec en paramètre l’url du fichier xml de description :

<a href="javascript:window.external.addSearchProvider('http://www.nomdedomaine.com/provider.xml');">Installer</a>

Références