.png "Les dossiers MSDN") |
Internet Explorer 8 : Introduction aux Accelerators |
.jpg "Boulanger Romuald") |
Boulanger Romuald Dirigeant, UCAYA |
Objectif : Création et mise à disposition d’un Accelerator pour faciliter l’accès à un service en ligne.
Pré requis:
- Niveau : débutant
Introduction
Les Accelerators permettent à un utilisateur d’enrichir le clic droit de son navigateur afin de lui ajouter des fonctionnalités d’accès rapide à des services en ligne comme Live Maps, Live Translator ou encore Gmail et surtout d’éviter les nombreux copier-coller de texte que l’on peut faire entre sites web.
Rechercher des vidéos sur « L’info en vidéo » de France Télévision
Le site web http://info.francetv.fr permet de visualiser toutes les vidéos du groupe France Télévision. Il permet d’effectuer une recherche sur des mots-clés afin d’accéder directement aux vidéos du sujet qui nous intéresse.
Nous allons donc créer un Accelerator permettant d’accéder directement à ce site avec la recherche lancée automatiquement.
.jpg "L’info en vidéo")
Figure 1 – http://info.francetv.fr
Principe de fonctionnement
Mise à disposition du lien d’installation de l’Accelerator soit sur votre site, blog ou encore dans la galerie d’Internet Explorer :
.jpg "Rechercher sur L'info en vidéo")
Figure 2 – Lien d’installation
Une fois installé celui-ci est disponible sur le clic droit :
Nous avons sélectionné le texte « US Open » sur la page web en cours.
.jpg "Menu contextuel d’IE8")
Figure 3 – Menu contextuel d’IE8
Le clic sur « Rechercher avec l’info en vidéo » va ouvrir un nouvel onglet dans IE8 avec l’url cible de notre Accelerator.
Comme sur la figure 3, il est possible d’afficher un aperçu sur notre Accelerator.
Implémentation
Un fichier XML va définir notre Accelerator selon une structure précise.
Pour l’aperçu nous avons utilisé une page PHP.
Structure
Code du fichier accelerator-search.xml
<? xml version = "1.0" encoding="UTF-8"?>
< os:openServiceDescription xmlns:os = "https://www.microsoft.com/schemas/openservicedescription/1.0" >
< os:homepageUrl > http://info.francetv.fr</os:homepageUrl>
<os:display>
<os:name>Rechercher avec L'info en vidéo</os:name>
<os:icon>http://info.francetv.fr/player-video/ie8-activities/favicon.ico </os:icon>
</ os:display >
< os:activity category = "Search">
< os:activityAction context = "selection">
< os:preview action = "http://info.francetv.fr/player-video/ie8-activities/accelerator-search-preview.php?search={selection}" />
< os:execute action = "http://info.francetv.fr/player-video/index-fr.php?search={selection}" />
</ os:activityAction >
</ os:activity >
</ os:openServiceDescription >
<openServiceDescription/> est le nœud racine.
<homepageUrl/> défini l’url du site sur lequel interagit notre Accelerator (Obligatoire)
<display> va contenir les informations de présentation (Obligatoire)
<name/> nom de l’Accelerator (Obligatoire)
<icon/> icone de l’Accelerator dans le menu (Facultatif)
<description/> texte affiché sur la fenêtre de gestion des Accelerators (Facultatif)
<activity> va contenir les actions (Obligatoire)
Ce nœud dispose d’un attribut « category » qui va permettre de définir la catégorie de notre Accelerator.
<activityAction> sont les nœuds qui définissent les actions effectuées (Obligatoire)
Ce nœud dispose d’un attribut « context » qui va permettre d’effectuer une action différente selon le contexte de l’utilisateur (document, selection, link)
<execute/> action effectuée lors du clic sur le menu (Obligatoire)
Ce nœud dispose des attributs suivants :
action modèle de l’url de l’envoi http
method méthode http (get ou post)
<preview/> aperçu affiché lors de l’accès sur le menu (Facultatif)
Ce nœud dispose des mêmes attributs que le nœud « execute»
Les textes entre « {} » sont les variables fourni es par Internet Explorer. Plusieurs variables sont disponibles selon le contexte de l’Accelerator. Ici nous utilisons la variable « {selection} » qui correspond au texte sélectionné par l’utilisateur.
Installation
Pour l’installation il faut utiliser la méthode Javascript « window.external.addService » fournie par Internet Explorer avec comme paramètre l’url du fichier xml de l’Accelerator :
< a href = "javascript:window.external.addService('http://info.francetv.fr/player-video/ie8-activities/accelerator-search.xml');" >Installer</a>
Vidéo associée :
Internet Explorer 8 - Introduction aux accelerators
.jpg)