Windows ist wieder heiß; Nicht nur wegen der jüngsten Produktveröffentlichungen, sondern auch wegen seiner auffälligen Richtung in Designsprache und Benutzeroberfläche.
Sie sind möglicherweise bereits mit dem Startbildschirm unter Windows Phone vertraut, auf dem sogenannte Kacheln angezeigt werden.
„Eine Kachel ist ein Bild, das Ihre App auf dem Startbildschirm darstellt.“ - msdn
Diese Kacheln ähneln den Symbolen in iOS oder Android, außer dass sie in der Größe verändert werden können, um verschiedene Status der App anzuzeigen, und sie zeigen sogar einen Hinweis auf Benachrichtigungsaktualisierungen, anstatt nur statische Symbole zu sein.
Hier ist ein Beispiel aus der offiziellen Poki-App. eine schöne Pocket Client App für Windows.
Websites können Kacheln auf dieselbe Weise wie Apple-Touch-Symbole übernehmen. Wenn Sie eine Website mit einem Lesezeichen (oder einem Pin) auf dem Startbildschirm in iOS versehen, wird das Website-Symbol angezeigt, sofern vorhanden. Ebenso können Benutzer in Windows eine Website auf dem Startbildschirm mit einem Lesezeichen versehen. Warum sollten Sie Ihren Websites also keine Kacheln hinzufügen? Letztendlich gehört es zu unseren Aufgaben als Webentwickler, Websites für Benutzer unabhängig von der verwendeten Plattform zu optimieren.
In diesem Lernprogramm erfahren Sie, wie Sie Kacheln für Websites hinzufügen.
Icons erstellen
Wenn keine festgelegten Bilder für Kacheln angegeben werden, greift Windows das Bild standardmäßig aus dem Favicon. Da ein Favicon jedoch normalerweise auf eine sehr kleine Größe (normalerweise 32px oder 64px Quadrat) eingestellt ist, kann das Bild unscharf werden.
Wir werden für die Aufgabe spezifische Icons entwerfen, und wir können dies mit jeder von uns ausgewählten Grafikanwendung (Photoshop, Sketch, MS Paint usw.) tun. Es gibt tatsächlich einige Tools, die die Erstellung von Symbolen für mehrere Plattformen (iOS, Android, Windows und Chrome) auf einmal automatisieren, wie z. B. diese Grunt Favicon-Aufgabe. Ich ziehe es jedoch vor, mehr Kontrolle darüber zu haben, wie jedes Symbol auf jeder Plattform dargestellt wird.
In diesem Fall müssen nur die erforderlichen Bildabmessungen beachtet werden. In diesem Fall gibt es vier verschiedene Größen:
70 x 70
150 x 150
310 x 150
310 x 310
wie folgt:
Speichern Sie jedes dieser Symbole mit einem transparenten Hintergrund (wir werden sehen, warum wir den Hintergrund nicht in Kürze benötigen), und geben Sie ihnen geeignete Namen.
Meta
Nun können Sie sie innerhalb der Webseite referenzieren. Wenn Sie Ihre Website bereits für iOS-Geräte optimiert haben, sind Sie mit der Apple-Touch-Symbol Link-Tag In ähnlicher Weise hat Microsoft eine Reihe neuer proprietärer Meta-Tags eingeführt, die den Namen haben msapplication- *, wie folgt:
Diese Meta-Tags dienen den Symbolen, wenn jede Größe am besten geeignet ist. Notiere dass der msapplication-square310x310logo (Die größte Kachelgröße) wird möglicherweise nur auf Geräten mit größeren Bildschirmen wie dem Surface Pro oder Lumia 1020 angezeigt. Bei Mobiltelefonen wie Lumia 620 oder 520 wird die Kachel dieser Größe wahrscheinlich nicht angezeigt.
Nachdem wir unser Markup aussortiert haben, sollten unsere Symbole in einer Windows-Kachel erscheinen, wenn sie auf dem Startbildschirm gespeichert werden:
Standardverhalten
Wie Sie oben sehen können, ist unser Symbol weiß und die Kachelfarbe schwarz und wir können auch das Wort „Acme“ links unten auf der Kachel sehen.
Windows hat die Designfarbe des Benutzers als Hintergrund der Kachel verwendet, um alle transparenten Bereiche anzuzeigen. Windows hat auch unseren Website-Titel "Acme" als Fliesennamen verwendet.
Keines davon ist jedoch ideal; Die Hintergrundfarbe funktioniert möglicherweise nicht mit unserem Symbol, und der Webseitentitel ist möglicherweise zu lang für den Platz auf der Kachel. Neben der Bereitstellung der Symbole sollten wir auch die Kachelfarbe und den Namen der Website angeben.
Fliesenfarbe und Name
Wir geben die Farbe und den Namen der Kachel durch msapplication-TileColor und Anwendungsname Metatags wie folgt:
Leider können wir die Kachelfarbe nur im HEX-Format einstellen. Sehr wenige Farbschlüsselwörter werden unterstützt. Ich hoffe, dass dies in der nächsten Iteration verbessert werden kann, vielleicht im neuen Browser (Codename Spartan), wobei mehr unterstützende Farbformate wie RGBA oder HSLA verwendet werden, um transparente Effekte zu nutzen.
Innerhalb des zweiten Meta-Tags setzen wir den Kachelnamen auf "Acme Corp.", sodass Windows den Kachelnamen anstelle von den Namen verwendet </code>. Nach dem erneuten Fixieren der Website sollten wir nun die Kachel mit der neuen Farbe und dem angegebenen Namen haben.</p><img src="//accentsconagua.com/img/images_12/how-to-add-windows-tiles-to-your-website.png"><h2>Das Chaos aufräumen</h2><p>Jetzt haben wir eine Liste von Meta-Tags auf der Seite hinzugefügt <code><head></code> um unsere Kacheln in Windows anzuzeigen. Sie können auch Tags haben, um Symbole für Favicon, iOS, Android und Firefox anzuzeigen, in diesem Fall Ihre Website <code><head></code> Element fängt wahrscheinlich an, ein echtes Chaos auszusehen!</p><p>Glücklicherweise hat Microsoft uns eine Möglichkeit gegeben, diese Tiles-Tags zu einer einzigen Datei im XML-Format zu verketten.</p><p>Beginnen Sie mit dem Erstellen einer neuen Datei mit dem Namen <code>tile.xml</code>. Fügen Sie dann die folgende XML-formatierte Struktur hinzu. Dies entspricht der Spezifikation, die wir bereits mit unseren Meta-Tags festgelegt haben.</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>Entfernen Sie jetzt die Meta-Tags aus der <code><head></code> (außer der <code>Anwendungsname</code>), und ersetzen Sie sie durch Folgendes <code>msapplication-config</code> Verweis auf die XML-Datei:</p><pre><meta name="msapplication-config" content="tile.xml" /></pre><p>Auf diese Weise erhalten Sie dasselbe Ergebnis wie in der vorherigen Abbildung, während unsere Dokumentmarkierung sauberer bleibt.</p><h2>Fazit</h2><p>In diesem Lernprogramm haben wir die Unterstützung für Windows-Kacheln für unsere Website hinzugefügt, die die Präsentation der Kacheln übernimmt, wenn Benutzer unsere Website auf den Windows-Startbildschirmen festsetzen. </p><p>Denken Sie daran: Als Webentwickler müssen wir sicherstellen, dass die Benutzer unabhängig von der Plattform, die sie verwenden, ein optimales Erlebnis erhalten.</p><h3>Lesen Sie weiter</h3><ul> <li>Was jeder über App Design für Windows 8 wissen sollte</li> <li>Richtlinien zur Gestaltung von Fliesen für 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">Web-Design</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">Hinzufügen von Flügeln zu einem Foto in 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">Hinzufügen von Breite, Tiefe und Abstand zu Vocals mit subtilem Reverb und Verzögerungen</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="/">accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer.
</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="Suche...">
<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