Utilisation de superpositions d’image sur une icône personnalisées dans des sites épinglés
Dans cette tâche, vous allez apprendre à créer, définir et effacer des superpositions d’image sur une icône pour informer l’utilisateur de l’activité du site épinglé.
Remarque Pour afficher une superposition d’image sur une icône, il faut que les boutons de la barre des tâches utilisent le paramètre par défaut de grandes icônes. Les petites icônes de la barre des tâches ne prennent pas en charge les superpositions d’image sur une icône. En outre, les superpositions d’image sur une icône ne sont visibles que lorsque la fenêtre du site épinglé est en cours d’exécution. L’icône est supprimée du bouton de la barre des tâches lorsque la fenêtre du site épinglé est fermée.
Remarque Pour plus d’informations sur les notifications dans Windows 8, voir Notifications de site épinglé dans Windows 8.
- Méthodes utilisées dans cette tâche
- Création de superpositions d’image sur une icône
- Utilisation d’icônes pour communiquer des informations
- Configuration de la superposition d’image sur une icône
- Suppression de la superposition d’image sur une icône
- Synthèse de tous les éléments
- Autres exemples
- Rubriques associées
Méthodes utilisées dans cette tâche
Les méthodes suivantes sont présentées dans cette rubrique :
msSiteModeSetIconOverlay(bstrIconUrl, bstrDescription)
La méthode window.external.msSiteModeSetIconOverlay vous permet d’ajouter une superposition d’image sur une icône de 16 x 16 pixels sur le bouton du site épinglé dans la barre des tâches, dans le but de communiquer des alertes, des notifications et l’état de l’application aux utilisateurs.
msSiteModeClearIconOverlay()
La méthode window.external.msSiteModeClearIconOverlay supprime la superposition d’image sur une icône du bouton de la barre des tâches.
Création de superpositions d’image sur une icône
Une icône de superposition est un petit graphisme de 16 x 16 pixels qui s’affiche au-dessus de l’icône du bouton de la barre des tâches. Vous connaissez probablement déjà les superpositions d’image sur une icône. La petite flèche qui distingue les raccourcis Bureau des fichiers et le bouclier sur les icônes des applications qui requièrent des privilèges d’administrateur en sont deux exemples courants. Sur la barre des tâches, les superpositions d’image sur une icône ont une signification légèrement différente. On peut les considérer comme des icônes de "notification", parce qu’elles notifient l’utilisateur de l’activité de votre application.
Vous pouvez créer des icônes pour la superposition d’image sur une icône à l’aide de X-Icon Editor, de la même manière que vous l’avez fait pour l’icône de site dans la rubrique Personnalisation de l’icône de site. X-Icon Editor est une application gratuite (basée sur HTML5 Canvas) qui vous permet de créer des icônes haute résolution directement dans le navigateur. Vous pouvez importer une variété d’images dans l’éditeur et les convertir rapidement en icônes. Par exemple, les superpositions d’image sur une icône de 16 x 16 pixels suivantes ont été créées à partir d’images.
Pour commencer, vous avez uniquement besoin d’une image carrée —simple ou complexe— qui correspond au style de votre site Web. Après avoir importé l’image dans X-Icon Editor, veillez à supprimer la couleur d’arrière-plan. Pour ce faire, utilisez l’outil Eraser (Gomme) pour gommer l’arrière-plan, ou l’outil Paint Can (Pot de peinture) pour remplir la zone d’arrière-plan avec une couleur transparente. Pour un meilleur rendu, commencez par modifier l’icône de 64 x 64 pixels, puis copiez l’image dans la version 32 x 32, etc. Avant d’exporter l’icône, effacez les versions dont vous n’avez pas besoin pour réduire la taille du fichier.
Utilisation d’icônes pour communiquer des informations
Pensez à faire des icônes aussi intuitives que possible pour vos utilisateurs. Les icônes de notification peuvent communiquer des informations sur l’état de l’application, telles que le nombre de messages reçus, comme le montre les superpositions d’image sur une icône numériques suivantes.
Il existe toutefois des limites à l’utilisation des icônes numériques. Afficher un seul chiffre ne pose aucun problème, mais les nombres plus importants peuvent être difficiles à lire. En outre, chaque nombre nécessite sa propre icône, ce qui suppose des efforts de création et de gestion et fait augmenter de manière significative le nombre de demandes de fichier envoyées au site. Si vous créez des superpositions d’image sur une icône numériques, envisagez d’inclure un symbole générique pour les nombres sortant de la plage fournie, comme l’étoile jaune à l’image précédente.
Vous pouvez également créer des icônes numériques dans X-Icon Editor. Tout d’abord, commencez avec une image d’arrière-plan suffisamment grande pour contenir un chiffre large, comme 5 ou 8. Ensuite, appliquez un chiffre et exportez l’icône. Pour créer l’icône suivante, il vous suffit de cliquer sur la flèche Undo (Annuler) pour supprimer le chiffre avant d’appliquer le chiffre suivant dans l’ordre.
Remarque Faites preuve de créativité ! Donnez un sens supplémentaire à votre application grâce à vos icônes.
Configuration de la superposition d’image sur une icône
Vous pouvez afficher une icône de superposition en utilisant la méthode msSiteModeSetIconOverlay, comme le montre l’exemple de code suivant.
function setOverlayIcon(iconUri, descText)
{
try {
if (window.external.msIsSiteMode()) {
window.external.msSiteModeSetIconOverlay(iconUri, descText);
}
}
catch (e) {
// Fail silently.
}
}
Remarque Le paramètre bstrDescription fournit une description accessible des informations transmises par la superposition d’image sur une icône. Choisissez un texte qui peut être lu par les lecteurs d’écran.
Cet appel remplace la précédente superposition d’image sur une icône, le cas échéant. Si le bouton de la barre des tâches est regroupé avec d’autres boutons, la pile n’affiche que la superposition d’image sur une icône la plus récente.
Suppression de la superposition d’image sur une icône
Pour supprimer la superposition d’image sur une icône, appelez la méthode msSiteModeClearIconOverlay, comme le montre l’exemple suivant.
function clearOverlayIcon()
{
try {
if (window.external.msIsSiteMode()) {
window.external.msSiteModeClearIconOverlay();
}
}
catch (e) {
// Fail silently.
}
}
Synthèse de tous les éléments
L’exemple d’application TweetFeed affiche jusqu’à cinq tweets récents en fonction de la chaîne de recherche spécifiée, et utilise des superpositions d’image sur une icône pour informer l’utilisateur des dernières activités. Par exemple, la loupe apparaît lorsque l’application recherche de nouveaux tweets.
Le script suivant, légèrement modifié à partir de l’exemple TweetFeed d’origine, montre une manière d’encapsuler le code de la superposition d’image sur une icône dans une seule fonction. Ce code reprend les fonctions définies précédemment dans cette tâche.
var states = { CLEAR: 0, COMPLETE: 1, ERROR: 2, SEARCH: 3 };
var messages = [ "Waiting...",
"Searching tweets...",
"Found a tweet!",
"Oops! Twitter error." ];
function setStatus(status)
{
switch (status) {
case states.CLEAR:
clearOverlayIcon();
break;
case states.COMPLETE:
if (unreadTweetCounter == 0) {
clearOverlayIcon();
}
else {
setOverlayIcon('Images/num_' + unreadTweetCounter + '.ico',
messages[2]);
}
break;
case states.ERROR:
if (unreadTweetCounter == 0) {
setOverlayIcon('Images/error.ico', messages[3]);
setTimeout("setStatus(states.CLEAR)", 2000);
}
break;
case states.SEARCH:
setOverlayIcon('Images/search.ico', messages[1]);
break;
}
}
Parfois, il faut plus qu’une superposition d’image sur une icône pour attirer l’attention de l’utilisateur. Dans la tâche Clignotement du bouton du site épinglé dans la barre des tâches, vous apprendrez à faire clignoter le bouton de la barre des tâches pour signaler une notification plus urgente.
Autres exemples
Notifications Facebook
L’image suivante présente la manière dont Facebook utilise les notifications pour alerter l’utilisateur d’une nouvelle activité :
La superposition d’image rouge et blanche sur l’icône s’applique lorsque l’utilisateur reçoit un message, lorsqu’un message est publié sur son mur ou lorsqu’un autre utilisateur a commenté son message.
Rubriques associées
- Tâches
- Personnalisation de l’icône du site
- Clignotement du bouton du site épinglé dans la barre des tâches
- Étude conceptuelle
- Comment fournir des notifications
- Introduction aux sites épinglés
