KultureGeek Tutoriels Tutoriel : Créer une tuile Windows 8 pour son site avec notifications

Tutoriel : Créer une tuile Windows 8 pour son site avec notifications

2 min.
2 Jan. 2014 • 20:28
10

Dans l’interface Modern UI de Windows 8, les tuiles remplacent désormais les icônes pour le lancement des programmes mais aussi l’affichage rapide d’informations. Comme sur iOS ou Android, vous pouvez également épingler un site web sur l’écran d’accueil pour accéder rapidement à vos sites favoris:

site epingle windows 8

Tuiles iPhoneAddict et KultureGeek

Microsoft offre la possibilité avec Windows 8.1 de personnaliser cette tuile avec une image (différente selon sa taille), la couleur de fond et un titre par défaut que l’utilisateur pourra changer au moment d’épingler le site. Il est également possible d’ajouter un système de notifications pour indiquer les dernières nouveautés sur le site en question.

Pour le mettre en place sur votre site, il suffit de placer ces balises dans le header :

Nom de la tuile :

<meta name="application-name" content="KultureGeek" />

Couleur de fond de la tuile :

<meta name="msapplication-TileColor" content="#009900" />

Image de la tuile au format png 70×70 :

<meta name="msapplication-square70x70logo" content="https://monsite.com/msapp-70x70.png" />

Image de la tuile au format png 150×150 :

<meta name="msapplication-square150x150logo" content="https://monsite.com/msapp-150x150.png" />

Image de la tuile au format png 300×150 :

<meta name="msapplication-wide310x150logo" content="https://monsite.com/msapp-300x150.png" />

Image de la tuile au format png 300×310 :

<meta name="msapplication-square310x310logo" content="https://monsite.com/msapp-300x310.png" />

Ajouter les notifications (Optionnel – fréquence par défaut à 30 mn) :

<meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml; polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml" />

Il n’y a rien à toucher dans cette balise, par contre il faudra placer le fichier browserconfig.xml à la racine de votre site (fichier disponible sur ce lien). N’oubliez pas de remplacer, avant l’upload du fichier browserconfig sur votre serveur, les « VOTRE_LIEN_RSS » par le lien vers votre flux RSS.

L’utilisateur pourra à tout moment désactiver les notification sur ses tuiles.

Voici ce que cela donne :

Tuile kg-2

Grand Tuile avec Notifications

Tuile kg-5

Grand Tuile sans Notifications

Tuile kg

Tuile large sans Notifications

Tuile kg-3

Tuile Moyenne sans Notifications

Tuile kg-4

Petite Tuile (pas notifications possibles)

 

Pour les utilisateurs n’ayant pas fait la mise à jour vers Windows 8.1, voici une dernière balise. Elle est seulement compatible avec Windows 8.0.

Image de la tuile au format png 144×144 :

<meta name="msapplication-TileImage" content="https://monsite.com/mstile-144x144.png" />

Signaler une erreur dans le texte

Les sujets liés à ces tags pourraient vous interesser

Lisez aussi ces autres articles !

Pas d'articles en relation.

10 commentaires pour cet article :

  • Galo
    Merci pour l’astuce mais côté utilisateur -> comment fait on pour créer une tuile avec le site que l’on veut ? Je n’arrive pas à trouver la réponse sur internet !
    • Djib's
      Faute le faire depuis Internet explorer 11 (winfows 8.1) ->appuyez sur l’étoile puis sur l’épingle

      Voir : http://i.imgur.com/GiOu9Nj.jpg

      • Galo
        Bonjour,

        merci d’avir pris le temps de me répondre.

        Cependant, quand j’ouvre IE depuis les tuiles, cela m’ouvre l’application du côté bureau et donc je n’ai pas accès au menu (fond noir, écriture blanche) qui me permettrait d’appuyer sur les icônes que vous m’indiquez ! :(

      • Lecodeur
        Bonsoir, il faut IE soit le navigateur par défaut pour pouvoir l’utiliser en mode modern Ui.
        cordialement
  • Maheethan
    Bonjour, merci pour cet excellent tuto. Petite question : est-ce qu’il est possible de supprimer le nom sur la tuile ? Si on ne met rien dans la meta application-name, c’est la description qui est récupérée. J’ai essayé de le remplacer par un espace, mais là, ça m’affiche « Nouvelle fenêtre ».

    Certaines applications (Fresh Paint, VEVO) n’affichent pas leur nom. Est-ce qu’il est possible de faire la même chose avec un site web ?

    Par avance, merci !

    • Djib's
      Je ne sais pas, mais l’utilisateur à en tout cas la possibilité de laisse vide en effaçant le nom de l’application avant de l’épingler.
  • Maheethan
    Oui, merci, c’est effectivement la seule possibilité que j’avais trouvé! ;)
  • E1raX
    Bonjour
    Bravo pour ce tuto et merci, je viens de la mettre en place ce la fonctionne pour les tuiles mais le flux rss ne fonctionne pas, j’ai pourtant modifier les adresses dans le fichier
    par avance merci
  • Nona
    je viens de la mettre en place ce la fonctionne pour les tuiles mais le flux rss ne fonctionne pas

    J’ai le même problème que E1raX………….

    On m’a dit qu’il se pourrais que se soit la cause du site web gratuit avec qui je suis. ???

  • Micke
    bonjour, j essaye de personnaliser chacune de mes tuiles, plutôt en large (wide) et chaque fois que j essaye de mettre une image de ma bibliothèque personnel l image ne prend pas toute la tuile, elle reste centrer au milieu de celle ci, je modifie pourtant le format de mon image en png et la taille en 310x150px mais rien y fait, même quand je fait redimensionner.

    J’ai bien mon image mais qui reste centrer au milieu et qui ne prend pas toute la tuile.

    Comment faire pour régler ce petit soucis, sachant que je n’y connais pas grand chose en informatique.

    PS: je modifie la taille et le format de mes images avec le logiciel light image resizer 4.

    Une aide de votre part serai la bienvenue, merci.

Les derniers articles

Retroid-Pocket-Duo

Retroid Pocket Duo et Duo Lite : deux consoles Android à double écran pour le rétro-gaming

11 Sep. 2026 • 18:22
0 Jeux vidéo

Retroid dévoile enfin les Pocket Duo et Pocket Duo Lite, deux nouvelles consoles portables Android qui misent sur un format à clapet et deux...

french-days

🔥 [#FrenchDays] Les promos High-Tech du 11 septembre

11 Sep. 2026 • 17:54
0 Promos

Chaque jour nous dénichons pour vous des promos sur les produits High-Tech pour vous faire économiser le plus d’argent possible. Voici...

Cookies

Bannières de cookies sur les sites : l’Europe est invitée à y mettre fin

11 Sep. 2026 • 17:10
0 Internet

Une coalition de 19 organisations, entreprises et universitaires demande à l’Union européenne de supprimer les traditionnelles...

avion tout d’aeroport couché de soleil

La FAA lance SMART, un logiciel prédictif pour réduire les retards aériens

11 Sep. 2026 • 16:46
0 Logiciels

La Federal Aviation Administration commencera ce mois-ci le déploiement de SMART, un logiciel chargé d’améliorer la gestion des...

Des satellites de communication génériques en orbite basse au-dessus de l’Europe.

Eutelsat commande 229 satellites OneWeb supplémentaires pour renforcer son rival de Starlink

11 Sep. 2026 • 15:39
0 Internet

Eutelsat va commander 229 satellites supplémentaires à Airbus afin de prolonger et renforcer son réseau OneWeb jusqu’en 2034....

Les dernières actus Apple sur iPhoneAddict :

Comparateur

Recherchez le meilleur prix des produits Hi-tech

Recherche

Recherchez des articles sur le site