Déclaration des métadonnées d’un site épinglé

L’exemple d’application Lecteur de podcast Channel9 utilise les métadonnées de la page Web pour effectuer les tâches suivantes :

  • définir la page de démarrage du site épinglé ;
  • spécifier le texte des info-bulles qui apparaît lorsque vous pointez avec votre souris sur le bouton du site épinglé dans la barre des tâches et sur le Bureau ;
  • contenir la taille initiale de la fenêtre de navigation ;
  • personnaliser la couleur des boutons Précédent et Suivant dans la fenêtre de navigation du site épinglé ;
  • ajouter des tâches statiques à la liste de raccourcis.

Les caractéristiques du site épinglé, telles que les boutons et la taille de la fenêtre, sont définies par des métadonnées.

Cette tâche décrit les métadonnées de site de base qui personnalisent votre site épinglé. En association avec la tâche suivante, Ajout de tâches à une liste de raccourcis, vous découvrez comment utiliser les métadonnées pour définir un site épinglé de base.

Métadonnées d’installation

Les éléments meta suivants contrôlent la façon dont le raccourci vers le site épinglé est créé dans le menu Démarrer et dans la barre des tâches Windows 7. Tous ces éléments sont facultatifs, mais vivement recommandés pour obtenir plus de contrôle sur le début de la page, son nom, une meilleure accessibilité ou reconnaissance, ainsi qu’une taille personnalisée au démarrage.

Les éléments des métadonnées d’installation sont uniquement utilisés lorsque l’utilisateur épingle le site. Après cela, les modifications apportées à ces valeurs n’ont aucun impact sur le site épinglé. C’est pourquoi les éléments meta suivants sont parfois appelés données d’installation :

Si vous voulez permettre aux utilisateurs d’épingler d’autres pages Web à votre domaine, ajoutez les métadonnées d’installation aux en-têtes sur toutes les pages applicables.

Remarque  Windows Internet Explorer 9 et versions ultérieures lisent le reste des métadonnées depuis l’URL de démarrage du site épinglé lors du lancement du site.

application-name

La métadonnée "application-name" définit le nom de l’instance d’application du site épinglé. Il s’agit du nom qui apparaît sous forme d’info-bulle lorsque le pointeur de la souris est placé sur le bouton du site épinglé dans la barre des tâches de Windows 7. Le nom de l’application est également ajouté au titre de la fenêtre de l’instance d’application du site épinglé.


<meta name="application-name" content="Channel 9 Audio Player" />


En l’absence de cet élément, le titre (title) du document est utilisé.

msapplication-tooltip

La métadonnée "msapplication-tooltip" fournit le texte de l’info-bulle supplémentaire qui apparaît lorsque vous placez le pointeur de la souris sur le raccourci du site épinglé dans le menu Démarrer de Windows ou sur le Bureau.


<meta name="msapplication-tooltip" content="Channel 9 Podcasts" />


msapplication-starturl

La métadonnée "msapplication-starturl" contient l’URL racine de l’application. L’URL de démarrage peut être complète ou relative au document actif. Seuls les protocoles HTTP et HTTPS sont autorisés. En l’absence de cet élément, l’adresse de la page actuelle est utilisée.


<meta name="msapplication-starturl" content="./" />


La métadonnée "msapplication-starturl" crée un point d’entrée commun vers votre site Web. Lorsqu’elle est présente, le site épinglé lance l’URL de démarrage au lieu de la page qui a été déposée à l’origine dans la barre des tâches. Surtout, les métadonnées d’exécution déclarées dans la page de démarrage redéfinissent la couleur des boutons de navigation et les tâches statiques de la liste de raccourcis à chaque lancement du site. (Pour plus d’informations, voir la section Métadonnées d’exécution.)

Comme exemple d’utilisation de "msapplication-starturl", imaginez un site qui offre plusieurs types d’émulateurs de calculatrices : le premier affichant une disposition standard, le deuxième une disposition scientifique et le troisième doté de fonctions statistiques. Sans URL de démarrage, l’utilisateur risque de n’épingler que la calculatrice scientifique à la barre des tâches sans jamais bénéficier d’un accès facile aux autres calculatrices de la collection. En ajoutant une URL de démarrage, le développeur du site peut déclarer un point d’entrée commun pour le site.


<meta name="msapplication-starturl" content="./CalculatorHome.html" />


En ajoutant des métadonnées d’installation aux pages de l’émulateur, le développeur du site contrôle la manière dont les utilisateurs accèdent au site. Puis, en ajoutant des métadonnées de liste de raccourcis à la page de démarrage, le développeur peut plus facilement contrôler la manière dont les utilisateurs sélectionnent le style de calculatrice à utiliser. Pour plus d’informations, voir Ajout de tâches à une liste de raccourcis.

Gestion des redirections de serveur

Si votre URL de démarrage redirige vers une autre page Web, assurez-vous de déclarer toutes les métadonnées d’exécution dans la page Web servie au client. Si le serveur redirige vers un nouveau chemin d’accès, votre URL de démarrage doit inclure le chemin d’accès et une barre oblique de fin (/).

Par exemple, si "http://contoso.com/" redirige vers "http://www.contoso.com/Home/", alors l’URL de démarrage doit inclure le nouveau chemin d’accès et la barre oblique de fin, comme suit :


<meta name="msapplication-starturl" content="http://www.contoso.com/Home/" />
OR
<meta name="msapplication-starturl" content="/Home/" />


msapplication-window

La métadonnée "msapplication-window" définit la taille initiale de la fenêtre du site épinglé lorsque celui-ci est lancé pour la première fois. Toutefois, si l’utilisateur modifie la taille de la fenêtre, le site épinglé conserve les nouvelles dimensions lors des lancements ultérieurs.


<meta name="msapplication-window" content="width=1024;height=768" />


Le tableau suivant décrit les parties qui composent l’attribut content (contenu) de l’élément meta. Les deux parties sont requises et doivent être séparées par un point-virgule.

PartieDescription
widthLargeur de la fenêtre en pixels. La valeur minimale est 800.
heightHauteur de la fenêtre en pixels. La valeur minimale est 600.

 

Métadonnées d’exécution

À la différence des données d’installation, les métadonnées suivantes sont lues à chaque fois que l’utilisateur lance le site épinglé. C’est pourquoi les développeurs de sites peuvent les utiliser pour modifier l’expérience de l’utilisateur au fil du temps. Le meilleur moyen de contrôler les modifications apportées à ces données consiste à les définir dans l’URL de démarrage du site épinglé.

Remarque  Ces éléments sont également facultatifs.

msapplication-navbutton-color

La métadonnée "msapplication-navbutton-color" définit la couleur personnalisée des boutons Précédent et Suivant dans la fenêtre de navigation du site épinglé. Toute couleur nommée ou valeur de couleur hexadécimale est valide. Pour consulter la liste complète des noms de couleurs, voir Tableau des couleurs.


<meta name="msapplication-navbutton-color" content="#FF3300" />


Si cet élément meta est absent, la couleur par défaut est basée sur la palette de couleurs de l’icône du site (ou icône favorite). Pour découvrir comment sélectionner une icône personnalisée pour votre site, voir Personnalisation de l’icône du site.

msapplication-task

Comme les autres métadonnées du site, la définition des tâches statiques s’effectue à l’aide d’éléments meta. La tâche suivante, Ajout de tâches à une liste de raccourcis, explique comment procéder.

msapplication-task-separator

Insérez cet élément entre des tâches pour placer une ligne visible dans le menu de la liste de raccourcis. Si vous utilisez plusieurs séparateurs, vous devez déclarer content="[unique value]" pour rendre chaque séparateur unique.

Synthèse de tous les éléments

Voici les métadonnées de site épinglé de base utilisées par l’exemple d’application Lecteur de podcast Channel9.


<meta name="application-name" content="Channel 9 Audio Player" />
<meta name="msapplication-tooltip" content="Channel 9 Podcasts" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="#FF3300" />
<meta name="msapplication-starturl" content="./" />


Autres exemples

Pour vous donner un aperçu de la manière dont vous pouvez utiliser ces fonctionnalités basiques dans vos propres sites, consultez la section ci-après qui propose des exemples supplémentaires de sites Web intégrant des métadonnées de site épinglé afin d’améliorer l’expérience de l’utilisateur dans Internet Explorer 9.

Bing.com


<meta content="Bing" name="application-name" />
<meta content="Bing" name="msapplication-tooltip" />
<meta content="width=1024;height=768" name="msapplication-window" />
<meta content="/" name="msapplication-starturl" />


BeautyoftheWeb.com


<meta name="application-name" content="Beauty Of The Web" />
<meta name="msapplication-tooltip" content="Start the Beauty Of The Web" />
<meta name="msapplication-starturl" content="http://www.beautyoftheweb.com/" />
<meta name="msapplication-navbutton-color" content="#5f6dbd" />


Facebook.com


<meta name="application-name" content="Facebook"/>
<meta name="msapplication-tooltip" content="Start the Facebook App"/>
<meta name="msapplication-starturl" content="/"/>
<meta name="msapplication-window" content="width=800;height=600"/>


Rubriques connexes

Tâches
Ajout de tâches à une liste de raccourcis
Notifications de badge, directement sur votre site épinglé Windows 8
Personnalisation de l’icône du site
Fresh Tweets 2.0 - démonstration pour Windows 8
Effets visuels de haute qualité pour les sites épinglés dans Windows 8
Sites épinglés dans Windows 8
Étude conceptuelle
Comment créer un site épinglé de base
Introduction aux sites épinglés

 

 

Afficher:
© 2014 Microsoft