Utilisation de superpositions d’icônes 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

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.

Étoile, cercle et pâquerette

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.

Icônes de superposition numériques, de 1 à 5 et plus

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.

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é :

Notification Facebook informant 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 connexes

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

 

 

Afficher:
© 2014 Microsoft