Slik legger du til Windows-fliser til nettstedet ditt

Windows er varmt igjen; ikke bare på grunn av sine nylige produkter, men også på grunn av sin slående retning i designspråket og grensesnittet. 

Du kan allerede være kjent med Start-skjermen på Windows Phone, hvor den viser såkalte Tiles. 

"En flis er et bilde som representerer appen din på startskjermbildet." - msdn

Disse flisene er i likhet med ikonene i iOS eller Android, bortsett fra at de kan endres for å vise forskjellige tilstander til appen, og de viser til og med et glimt av varslingsoppdateringer i stedet for bare å være statiske ikoner. 

Her er et eksempel fra den offisielle Poki-appen; en vakker lomme klient app for Windows.

Nettsteder kan vedta fliser på samme måte som de gjør Apple touch-ikoner. Når du bokmerker (eller stikker) et nettsted til startskjermbildet i iOS, vil det vise nettstedikonet hvis det leveres. På samme måte, i Windows, kan brukere bokmerke et nettsted til startskjermbildet. Så hvorfor ikke legge til fliser på nettstedene dine? I siste instans er et av våre ansvar som webutviklere å optimalisere nettsteder for brukere uansett hvilken plattform de bruker.

I denne opplæringen skal vi se hvordan du legger til fliser for nettsteder.

Opprette ikoner

Som standard, når angitte bilder for fliser ikke er oppgitt, vil Windows fange bildet fra faviconet. Men siden et favicon vanligvis settes i svært liten størrelse (vanligvis 32px eller 64px kvadrat), kan bildet ende opp sløret.

Vi skal designe ikoner som er spesifikke for oppgaven, og vi kan gjøre det med et grafisk program som vi velger (Photoshop, Sketch, MS Paint, etc.). Det er faktisk noen få verktøy som automatiserer opprettelsen av ikoner for flere plattformer (iOS, Android, Windows og Chrome) samtidig, for eksempel denne Grunt Favicon-oppgaven. Likevel foretrekker jeg å ha mer kontroll over hvordan hvert ikon er presentert på hver plattform.

Det eneste du bryr deg om, er i dette tilfellet de nødvendige bildedimensjonene. I dette tilfellet er fire forskjellige størrelser: 

  • 70x70
  • 150x150
  • 310x150
  • 310x310

som følger:

Lagre hvert av disse ikonene med en gjennomsiktig bakgrunn (vi vil se hvorfor vi ikke trenger bakgrunnen kort tid), og gi dem passende navn.

Meta

Nå for å referere dem på nettsiden. Hvis du allerede har optimalisert nettstedet ditt for iOS-enheter, vil du bli kjent med eple-touch-ikonet linketikett. Tilsvarende har Microsoft introdusert et sett med nye proprietære metatags, navngitt msapplication- *, som følger:

   

Disse metatagger vil betjene ikonene når hver størrelse passer best. Legg merke til at msapplication-square310x310logo (den største flisestørrelsen) kan bare vises i enheter med større skjermer som Surface Pro eller Lumia 1020. Telefoner som Lumia 620 eller 520 vil sannsynligvis ikke se flisen av denne størrelsen. 

Etter å ha sortert ut merket vårt, bør vi se at våre ikoner vises i en Windows-fliser når de er lagret på startskjermbildet:

Standard oppførsel

Som du kan se over, er vårt ikon hvitt og flisens farge svart, og vi kan også se ordet "Acme" nederst til venstre på flisen.

Windows har brukt brukerens temafarge som bakgrunnen til flisen, som viser gjennom alle gjennomsiktige områder. Windows tok også vår nettside tittel, "Acme", som flisens navn. 

Ingen av disse er ideelle imidlertid; Bakgrunnsfargen kan ikke fungere med vårt ikon i det hele tatt, og kanskje er nettsidetiden alt for lang for plassen som er oppgitt på flisen. Så, i tillegg til å gi ikonene, bør vi også spesifisere flisens farge og nettstedets navn.

Fliser Farge og Navn

Vi angir flisens farge og navn gjennom msapplication-TileColor og Programnavn metakoder, som følger:

 

Dessverre kan vi bare sette flisfargen i HEX-format; svært få farge søkeord støttes. Jeg håper dette kan forbedres i neste iterasjon, kanskje i den nye nettleseren (kodenavnet Spartan), med flere støttende fargestandard som RGBA eller HSLA for å utnytte gjennomsiktige effekter.

Innenfor det andre metatagget satte vi flisernavnet til "Acme Corp.", så Windows vil ta det til flisens navn i stedet for </code>. Etter å ha stiftet nettsiden, bør vi nå ha flisene med den nye spesifiserte farge og navn.</p><img src="//accentsconagua.com/img/images_12/how-to-add-windows-tiles-to-your-website.png"><h2>Rengjøring av rotet</h2><p>Nå har vi lagt til en liste over metakoder på siden <code><head></code> å vise våre fliser i Windows. Sammen med dem kan du også ha tagger for å vise ikoner for favicon, iOS, Android og Firefox, i hvilket tilfelle nettstedet ditt <code><head></code> elementet begynner sannsynligvis å se et ekte rot!</p><p>Heldigvis har Microsoft gitt oss en måte å sammenkoble disse fliserne i en enkelt fil i XML-format.</p><p>Begynn med å opprette en ny fil som heter <code>tile.xml</code>. Deretter legger du til følgende XML-formatert struktur; tilsvarer spesifikasjonen som vi allerede har satt med våre metakoder.</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>Fjern nå metatagene fra <code><head></code> (bortsett fra <code>Programnavn</code>), og erstatt dem med følgende <code>msapplication-config</code> peker på XML-filen:</p><pre><meta name="msapplication-config" content="tile.xml" /></pre><p>Dette gir oss det samme resultatet som vist i forrige skjermbilde, samtidig som vi beholder dokumentrengjøringsrenser.</p><h2>Konklusjon</h2><p>I denne opplæringen lagde vi Windows-fliser til vår hjemmeside, som tar ansvar for flispresentasjonen når brukerne peker på nettstedet vårt på Windows Start-skjermer. </p><p>Husk: å være webutviklere må vi sikre at brukerne får en optimal opplevelse, uansett hvilken plattform de bruker.</p><h3>Videre lesning</h3><ul> <li>Hva alle burde vite om App Design for Windows 8</li> <li>Tile design retningslinjer for 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">Webdesign</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">Slik legger du vinger til et bilde i 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">Slik legger du til bredde, dybde og plass til vokaler ved hjelp av subtile reverb og forsinkelser</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="/">no.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessant informasjon og nyttige tips om programmering. Nettstedutvikling, webdesign og webutvikling. Photoshop opplæringsprogrammer. Opprettelse av dataspill og mobile applikasjoner. Bli en profesjonell programmerer fra grunnen av. </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="Søke..."> <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>