Windows est chaud à nouveau; non seulement en raison de ses récents dévoilements de produits, mais également en raison de son orientation frappante dans le langage de conception et l'interface.
Vous connaissez peut-être déjà l'écran de démarrage de Windows Phone, sur lequel s'affichent ce que l'on appelle des vignettes.
"Une mosaïque est une image qui représente votre application sur l'écran de démarrage." - msdn
Ces vignettes s'apparentent aux icônes sous iOS ou Android, sauf qu'elles peuvent être redimensionnées pour afficher différents états de l'application et qu'elles donnent même un aperçu des mises à jour des notifications au lieu d'être simplement des icônes statiques..
Voici un exemple de l'application officielle Poki; une belle application client de poche pour Windows.
Les sites Web peuvent adopter des vignettes de la même manière que les icônes Apple Touch. Lorsque vous créez un signet (ou épinglez) un site Web sur l'écran d'accueil dans iOS, l'icône du site Web s'affiche, le cas échéant. De même, sous Windows, les utilisateurs peuvent ajouter un site Web à l'écran de démarrage. Alors, pourquoi ne pas ajouter des tuiles à vos sites Web? En fin de compte, l’une de nos responsabilités en tant que développeurs Web consiste à optimiser les sites Web pour les utilisateurs, quelle que soit la plate-forme qu’ils utilisent..
Dans ce tutoriel, nous allons voir comment ajouter des tuiles pour les sites Web..
Création d'icônes
Par défaut, lorsque les images désignées pour les mosaïques ne sont pas fournies, Windows extraira l'image du favicon. Cependant, étant donné qu'un favicon est généralement réglé sur une très petite taille (généralement 32 pixels ou un carré de 64 pixels), l'image peut devenir floue..
Nous allons concevoir des icônes spécifiques à la tâche, et nous pouvons le faire avec n'importe quelle application graphique de notre choix (Photoshop, Sketch, MS Paint, etc.). Il existe actuellement quelques outils qui automatisent la création d'icônes pour plusieurs plates-formes (iOS, Android, Windows et Chrome) en même temps, telles que cette tâche Grunt Favicon. Néanmoins, je préfère avoir plus de contrôle sur la présentation de chaque icône dans chaque plate-forme..
Les seules dimensions à prendre en compte, dans ce cas, sont les dimensions d'image requises. Dans ce cas, quatre tailles différentes:
70x70
150x150
310x150
310x310
comme suit:
Enregistrez chacune de ces icônes avec un arrière-plan transparent (nous verrons pourquoi nous n’avons pas besoin de cet arrière-plan prochainement), en leur attribuant des noms appropriés..
Méta
Maintenant, pour les référencer dans la page Web. Si vous avez déjà optimisé votre site Web pour les appareils iOS, vous serez familiarisé avec le apple-touch-icon balise de lien. De même, Microsoft a introduit un ensemble de nouvelles balises méta propriétaires, nommées msapplication- *, comme suit:
Ces balises meta serviront les icônes lorsque chaque taille est la plus appropriée. Notez que le msapplication-square310x310logo (la plus grande taille de mosaïque) peut apparaître uniquement sur les appareils dotés d'écrans plus grands tels que le Surface Pro ou le Lumia 1020. Les téléphones tels que Lumia 620 ou 520 ne verront probablement pas la mosaïque de cette taille..
Après avoir trié notre balisage, nos icônes devraient apparaître dans une vignette Windows lorsqu’elles ont été enregistrées dans l’écran de démarrage:
Comportement par défaut
Comme vous pouvez le voir ci-dessus, notre icône est blanche et la couleur de la tuile est noire. Nous pouvons également voir le mot «Acme» dans le coin inférieur gauche de la tuile..
Windows a utilisé la couleur de thème de l'utilisateur en tant qu'arrière-plan de la mosaïque, en montrant toutes les zones transparentes. Windows a également pris le titre de notre site Web, «Acme», comme nom de la tuile..
Aucun de ceux-ci n'est idéal cependant; la couleur d'arrière-plan peut ne pas fonctionner du tout avec notre icône, et peut-être que le titre de la page Web est trop long pour l'espace prévu sur la vignette. Ainsi, en plus de fournir les icônes, nous devrions également spécifier la couleur de la tuile et le nom du site Web..
Carreaux Couleur et Nom
Nous spécifions la couleur et le nom de la tuile à travers msapplication-TileColor et Nom de l'application balises META, comme suit:
Malheureusement, nous ne pouvons définir que la couleur des carreaux au format HEX; très peu de mots-clés de couleur sont pris en charge. J'espère que cela pourra être amélioré à la prochaine itération, peut-être dans le nouveau navigateur (nom de code Spartan), avec davantage de formats de couleurs compatibles, tels que RGBA ou HSLA, pour tirer parti des effets transparents..
Dans la deuxième balise Meta, nous avons défini le nom de la mosaïque sur «Acme Corp.». Windows la prend donc pour le nom de la mosaïque au lieu du </code>. Après avoir ré-épinglé le site Web, nous devrions maintenant avoir la mosaïque avec la nouvelle couleur et le nouveau nom spécifiés..</p><img src="//accentsconagua.com/img/images_12/how-to-add-windows-tiles-to-your-website.png"><h2>Nettoyer le mess</h2><p>Maintenant, nous avons ajouté une liste de balises méta dans la page <code><head></code> afficher nos tuiles dans Windows. Avec eux, vous pouvez également avoir des tags pour afficher les icônes pour favicon, iOS, Android et Firefox, auquel cas votre site Web <code><head></code> élément commence probablement à regarder un vrai gâchis!</p><p>Heureusement, Microsoft nous a donné le moyen de concaténer ces balises de tuiles dans un seul fichier au format XML..</p><p>Commencez par créer un nouveau fichier nommé <code>tile.xml</code>. Ajoutez ensuite la structure formatée XML suivante: l'équivalent de la spécification que nous avons déjà définie avec nos balises méta.</p><pre><?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="images/tiles/acme-tile-small.png"/> <square150x150logo src="images/tiles/acme-tile-medium.png"/> <wide310x150logo src="images/tiles/acme-tile-wide.png"/> <square310x310logo src="images/tiles/acme-tile-large.png"/> <TileColor># 83d3c9</TileColor> </tile> </msapplication> </browserconfig></pre><p>Maintenant, supprimez les balises META de la <code><head></code> (à l'exception du <code>Nom de l'application</code>) et les remplacer par les suivantes <code>msapplication-config</code> pointant vers le fichier XML:</p><pre><meta name="msapplication-config" content="tile.xml" /></pre><p>Cela nous donnera le même résultat que celui présenté dans la capture d’écran précédente, tout en gardant notre balisage de document plus propre..</p><h2>Conclusion</h2><p>Dans ce didacticiel, nous avons ajouté la prise en charge des tuiles Windows sur notre site Web, qui se chargera de la présentation des tuiles lorsque les utilisateurs verrouillent notre site Web sur les écrans de démarrage de Windows.. </p><p>N'oubliez pas: en tant que développeurs Web, nous devons nous assurer que les utilisateurs bénéficient d'une expérience optimale, quelle que soit la plate-forme qu'ils utilisent..</p><h3>Lectures complémentaires</h3><ul> <li>Ce que tout le monde devrait savoir sur la conception d'applications pour Windows 8</li> <li>Instructions de conception de mosaïque pour Windows Phone</li> <li>Microsoft Design Language</li> </ul>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/webdesign">Création de sites web</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/design/how-to-add-wings-to-a-photo-in-adobe-photoshop.html">Comment ajouter des ailes à une photo dans Adobe Photoshop</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_5/how-to-add-wings-to-a-photo-in-adobe-photoshop_39.jpg');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/music/how-to-add-width-depth-and-space-to-vocals-using-subtle-reverb-and-delays.html">Comment ajouter de la largeur, de la profondeur et de l'espace aux voix à l'aide de reverb et de retards subtils</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_8/how-to-add-width-depth-and-space-to-vocals-using-subtle-reverb-and-delays.jpg');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Chercher...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Accentsconagua