Verwenden von HTML-Steuerelementen für das Erstellen von ansprechenden Apps im Metro-Stil

Entwicklerblog für Windows 8-Apps

Ein Einblick in die Entwicklung von Apps im Metro-Stil – präsentiert vom Windows 8-Entwicklerteam

Verwenden von HTML-Steuerelementen für das Erstellen von ansprechenden Apps im Metro-Stil

Rate This
  • Comments 0

Unter Windows 8 können Sie Apps im Metro-Stil mit HTML erstellen. Möglicherweise wussten Sie jedoch noch nicht, dass die neue Benutzeroberfläche von Windows 8 automatisch zum Tragen kommt, wenn Sie direkt HTML-Steuerelemente einsetzen. Wir haben uns ausgiebig mit HTML beschäftigt, damit Sie leistungsstarke Apps mit Fingereingabefunktionen schaffen können, ohne dabei auf die Flexibilität von HTML zu verzichten. Auf diese Weise möchten wir Sie beim schnellen und effizienten Entwickeln überzeugender Apps unterstützen.

Insbesondere soll es weiterhin möglich sein, die Vorteile häufig verwendeter HTML-Steuerelemente wie <button> zu nutzen, damit Sie beim Erstellen von Windows 8-Benutzeroberflächen auf vorhandene Kenntnisse zurückgreifen können. Dies wird unter Windows 8 mithilfe neuer Implementierungen der standardmäßigen HTML-Steuerelemente ermöglicht, in denen die Windows 8-Benutzeroberfläche bereits integriert ist. Diese Standardsteuerelemente weisen das neue Erscheinungsbild von Windows 8 auf und bieten neben hervorragenden Fingereingabefunktionen auch umfassende Unterstützung in den Bereichen Lokalisierung und Globalisierung. Mithilfe dieser standardmäßigen HTML-Steuerelemente können Sie ansprechende Apps im Metro-Stil erstellen, die Ihre Kunden begeistern werden. Die Flexibilität, die Sie von HTML gewohnt sind, wird unterdessen beibehalten.

Das Windows 8-Team möchte es Ihnen so einfach wie möglich machen, hervorragende Apps für Ihre Benutzer zu entwickeln. Als Fallbeispiel nehmen wir uns eines der einfachsten Steuerelemente vor, das Schaltflächenelement <button>. In diesem Beitrag wird erläutert, wie das neue <button>-Element von Windows 8 zur Produktivitätssteigerung betragen kann. Die folgenden Tipps und Tricks sollen Ihnen dazu verhelfen, den HTML-Code für Windows 8 optimal zu nutzen und damit einzigartige Apps im Metro-Stil zu erstellen.

Windows 8-Schaltflächen

Wenn Sie sich einige unserer Vorträge und Entwurfsrichtlinien angesehen haben, sind Ihnen die folgenden Richtlinien für die Gestaltung von Apps im Metro-Stil bereits bekannt:

  1. Erscheinungsbild des Metro-Stils
  2. Entwurf für Fingereingabe
  3. Beachtung grundlegender Elemente im Code (z. B. Globalisierung und Barrierefreiheit)
  4. Schnelle und flüssige Anzeige

Dank der für Windows 8 aktualisierten HTML-Steuerelemente können Sie diese Entwurfsrichtlinien problemlos umsetzen. Denn es ist unser Ziel, Sie auf die Erfolgsspur zu bringen:

Erfolgsspur: Im Gegensatz zum Ersteigen eines Berggipfels oder zu einer Fahrt durch die Wüste, wo der Erfolg von vielen Unannehmlichkeiten und Überraschungen abhängig ist, möchten wir unsere Kunden einfach auf eine Spur bringen, auf der sie dank unserer Plattform und Frameworks direkt Erfolge erzielen können. Wir scheitern nur daran, es einfach Ihnen einfach zu machen, in Schwierigkeiten zu geraten.

– Rico Mariani, Partner Architect für Internet Explorer

Sehen wir uns also an, wie Ihre Apps durch die Verwendung des <button>-Elements auf der Erfolgsspur landen und die Merkmale großartiger Apps im Metro-Stil automatisch mit sich bringen.

Erscheinungsbild des Metro-Stils

Wir haben uns vorgenommen, Ihnen das Entwickeln einer Benutzeroberfläche im Metro-Stil zu erleichtern und dennoch die Flexibilität und Leistung zu bieten, mit der Sie das Aussehen Ihrer App individuell anpassen können. Wenn Sie bereits versucht haben, mithilfe der VS-Vorlagen eine Windows 8-App mit JavaScript und HTML zu erstellen, wird Ihnen aufgefallen sein, dass alle standardmäßigen HTML-Steuerelemente wie z. B. <button> automatisch im Metro-Stil dargestellt werden:

<button>Windows 8 Rocks!</button>

 

Standardschaltfläche in Internet Explorer 10
Abbildung 1: Standardschaltfläche in Internet Explorer 10
Schaltfläche in Windows 8-Apps im Metro-Stil

Abbildung 2: Schaltfläche in Windows-Apps im Metro-Stil

Was geschieht dabei hinter den Kulissen? Für Windows 8 wurden an dieser Stelle die folgenden beiden Verbesserungen vorgenommen: Zum einen wurden die Formatierungsmöglichkeiten für HTML-Steuerelemente wie <button> verbessert, damit Sie beim Bereitstellen von Grafiken für unterschiedliche Komponenten und visueller Zustände der Steuerelemente mit CSS flexibler sind als je zuvor. Zum anderen wurden für alle HTML-Steuerelemente Standardgrafiken im Metro-Stil bereitgestellt. Diese können über zwei vorgefertigte Standardformatvorlagen aus der Windows-Bibliothek für JavaScript (WinJS) abgerufen werden und sind standardmäßig in sämtlichen VS-Vorlagen enthalten.

Neue Infrastruktur der HTML-Steuerelemente

Wir haben den Aufbau von Steuerelementen von Grund auf überarbeitet, um Ihnen mehr Flexibilität beim Formatieren zu bieten. Tatsächlich wurden die gleichen verbesserten Stilelemente für die Definition des Standarderscheinungsbilds sämtlicher HTML-Steuerelemente in Windows 8 übernommen.

In den meisten Browsern werden die Steuerelemente auf Grundlage zuvor erstellter Bilder gerendert. Sobald ein Stil auf ein Steuerelement angewendet wird, wird das hardcodierte Bild vom Browser verworfen und das Steuerelement erneut in einer einfachen Basisformat gerendert. Anschließend wird der gewünschte Stil darüber gelegt.

Am Beispiel des <button>-Elements sehen Sie, dass zwar nur eine Hintergrundfarbe angewendet wurde, die zweite Schaltfläche jedoch mit einem 3D-Effekt versehen ist. Der 3D-Rand ist Bestandteil des Basisformats:

<button>Normal</button>

<button style="background-color: red;">Styled</button>

Schaltflächenstil

Abbildung 1: Herkömmliche und formatierte Schaltflächen in Internet Explorer

Das Standardformat eines hardcodierten Bilds bringt stilistische Einschränkungen mit sich. Ein Stil kann nicht einfach auf einen der neuen Stile gelegt werden, und es ist nicht sofort zu erkennen, wie sich ein Stil auf eine zuvor erstellte Bitmap auswirkt. Deshalb wird die ursprüngliche Formatierung von HTML-Steuerelementen über hardcodierte Bilder unter Windows 8 nicht mehr unterstützt. Alle HTML-Steuerelemente wurden von Grund auf überarbeitet, damit sie mit CSS anhand von Vektorgrundtypen gerendert und anschließend direkt mit einem individuellen Stil versehen werden können.

Außerdem haben Sie nun Zugriff auf das „Innenleben“ der Steuerelemente. Bei einem Steuerelement wie dem Kontrollkästchen können Sie das innere Häkchen mithilfe der -ms-check-Pseudoelemente auswählen und dessen Stil dann getrennt vom Kästchen festlegen.

input[type=checkbox]::-ms-check
{
background-image: url("myCheckMark.svg");
}

Eine vollständige Liste der Elemente, die den HTML-Steuerelementen hinzugefügt wurden, finden Sie unter Schnellstart: Formatieren von Steuerelementen (Apps im Metro-Stil mit JavaScript und HTML).

Wenn Sie sich etwas eingehender mit den CSS-Formatierungen beschäftigen, können Sie einige interessante Stile für Steuerelemente nutzen, die zuvor nicht möglich waren.

Kontrollkästchen
Abbildung 2: Beispiele für formatierte Kontrollkästchen

Weitere Informationen finden Sie im Beispiel zu häufig verwendeten HTMS-Steuerelementen und im Artikel Schnellstart: Formatieren von Steuerelementen.

Ein weiterer Vorteil des Erstellens aller Steuerelemente aus CSS-Grundtypen besteht in der optimalen Skalierung. Dies ist ein besonders wichtiger Punkt, da Windows 8 ein umfangreiches Spektrum an Geräten unterstützt und die Steuerelemente für alle Bildschirmauflösungen und DPIs skalierbar sein müssen.

Mithilfe der CSS-Grundtypen werden die Steuerelemente für alle Bildschirmauflösungen und DPIs automatisch richtig skaliert und klar angezeigt.

Kleine, mittlere und große Vektorschaltfläche

Abbildung 3: Mit CSS erstellte Bilder werden in jeder Auflösung optimal angezeigt.

Wenn Sie sich also dazu entscheiden, Ihre Steuerelemente individuell anzupassen, sollten Sie Vektortechnologien wie CSS-Grundtypen oder SVG verwenden. Bei der Verwendung von Rastergrafiken werden die Steuerelemente nach dem Skalieren verpixelt angezeigt, sodass Ihre App nicht auf jedem Windows 8-Gerät optimal dargestellt wird.

Unscharfe, kleine RasterschaltflächeAbbildung 4: Das minimierte Bild wird unscharf angezeigt.
Große, verpixelte Rasterschaltfläche

Abbildung 5: Das vergrößerte Bild wird verpixelt angezeigt.

Weitere Informationen zum Skalieren finden Sie im Scaling SDK sample.

Für Internet Explorer 10 und HTML für Windows 8 wird dieselbe HTML-Plattform verwendet. Dies bedeutet, dass alle HTML-Steuerelemente für Internet Explorer 10 ebenfalls unter Verwendung von CSS und Webseiten erstellt werden, damit sie auch unter Windows 8 für unterschiedliche Bildschirmauflösungen und DPIs scharf angezeigt werden.

Metro-Stil als Standardformat

Das neue Erscheinungsbild des Metro-Stils wird für alle Elemente über eine CSS-Formatvorlage bereitgestellt. Wir möchten transparent machen, wie der neue Metro-Stil in Windows 8 implementiert wird und Ihnen damit die Integration einer individuellen Note ermöglichen, z. B. das Anpassen der Steuerelementfarben an das Markenfarbschema Ihrer App. Nutzen Sie diese Flexibilität zu Ihrem Vorteil. Im Theme roller SDK sample erfahren Sie, wie Sie die Farben der Steuerelemente ganz einfach anpassen können.

Um das Standarderscheinungsbild festzulegen, müssen Sie nur eine der beiden Standardformatvorlagen auswählen. Diese unterscheiden sich ausschließlich hinsichtlich des zugrundeliegenden Farbschemas. Die Vorlage „ui-dark.css“ enthält Steuerelementfarben, die am besten für dunkle Hintergründe geeignet sind, und „ui-light.css“ enthält entsprechende Farben für helle Hintergründe. Für Apps, mit denen hauptsächlich Bilder oder Videos angezeigt werden, empfiehlt sich die dunkle Formatvorlage. In Apps mit großen Textanteilen sollte die helle Formatvorlage verwendet werden. (Wenn Sie ein benutzerdefiniertes Farbschema verwenden, wählen Sie die Formatvorlage aus, die am besten zum Erscheinungsbild Ihrer App passt.) Um zunächst ein Farbschema für die App auszuwählen, weisen Sie Ihrem Projekt einfach eine der Formatvorlagen zu. Der entsprechende HTML-Code sieht wie folgt aus:

<head>

<!-- Dark Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet">

<!-- or Light Style Sheet reference -->

<link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet">

<!—Other header content -->

</head>

Die einfachste Methode, sich mit dem Anwenden und Erstellen eines über das Standardformat hinausgehenden Stils vertraut zu machen, besteht darin, die CSS-Standardformatvorlage zu öffnen und die unterschiedlichen CSS-Formate durchzugehen.

Auf das ursprüngliche Schaltflächenbeispiel bezogen erhalten Sie mit derselben Codezeile wie für die App im Metro-Stil das folgende Ergebnis:

CSS-Schaltfläche

Abbildung 6: Herkömmliche und formatierte Schaltflächen

In Apps im Metro-Stil werden nun ausschließlich die von Ihnen angewendeten Stile überschrieben. Sie können Ihre App also ganz einfach mit den Gestaltungselementen Ihrer Marke versehen und gleichzeitig das Erscheinungsbild des Metro-Stils beibehalten.

Wie Sie sehen, gestaltet sich das Formatieren der Steuerelemente nun wesentlich einfacher, und die Elemente werden bei verschiedenen Bildschirmauflösungen und DPIs automatisch skaliert und scharf angezeigt. Auf diese Weise möchten wir Ihnen die Arbeit am gewünschten Erscheinungsbild Ihrer App erleichtern und gleichzeitig das Erscheinungsbild des Metro-Stils gewährleisten.

Entwurf für Fingereingabe

Um Sie beim Entwickeln ansprechender Apps zu unterstützen, war es unser Ziel, das Erstellen von Benutzeroberflächen, die sowohl auf die Fingereingabe als auch die Verwendung von Maus und Tastatur ausgerichtet sind, einfach zu gestalten. Gleichzeitig sollen den Benutzern gewohnte Interaktionsmöglichkeiten zur Verfügung gestellt werden, die im gesamten System einheitlich funktionieren.

Die HTML-Steuerelemente verfügen bereits über eine gute Tastatur- und Mausunterstützung. Da es sich bei der Fingereingabe um einen neuen Interaktionsmodus handelt, musste diese für alle HTML-Steuerelemente besser unterstützt werden. Damit Sie Ihren Code optimal auf die Fingereingabe ausrichten können, sollten Sie zunächst ein Verständnis für die damit einhergehenden Herausforderung entwickeln.

Fingereingabe ist unpräzise

Die Eingabe mit dem Finger ist im Vergleich zum pixelgenauen Mauszeiger eher unpräzise.

Abbildung 7: Die Abbildung zeigt, dass der Finger eines Erwachsenen durchschnittlich etwa 11 mm breit ist, während die Breite eines Babyfingers 8 mm beträgt. Einige Basketballspieler haben sogar Finger mit einer Breite von mehr als 19 mm.

Finger_Größe

Um die Präzision beim Tippen mit den Fingern zu verbessern, wurden der HTML-Plattform unter Windows 8 folgende Features hinzugefügt:

  • An die Fingereingabe angepasste Steuerelementgröße

Die Größe der HTML-Steuerelemente wird im Metro-Stil standardmäßig an die durchschnittliche Fingergröße angepasst. Hierdurch können sich die Benutzer sicher sein, die gewünschten Steuerelemente zu treffen. Eine Größe von 7 x 7 mm ist eine geeignete Mindestgröße, wenn eine unerwünschte Berührung mit ein oder zwei Gesten bzw. innerhalb von fünf Sekunden korrigiert werden kann. In der Standardformatvorlage weisen alle Steuerelemente für Schaltflächen eine Mindesthöhe und - breite auf, die einen Mindestbereich von 7 x 7 mm ergeben. Beispiel für die Werte aus der Standardformatvorlage:

button, input[type=button], input[type=reset], input[type=submit] 
{
min-height: 32px;
min-width: 90px;
}
  • Neuzuweisung von Fingereingaben

Das System kann mithilfe des Windows 8-Fingereingabeziels das Steuerelement finden, das am nächsten an der Kontaktgeometrie liegt. Anschließend wird der Berührungspunkt diesem Element neu zugewiesen.

  • Vereindeutigung der Fingereingabe

Mit dem Modul zur Vereindeutigung der Fingereingabe wurden dem System einige Methoden hinzugefügt, anhand derer ermittelt werden kann, welches Ziel gemeint ist, wenn der Finger des Benutzers mehr als ein Steuerelement berührt.

Feedback bei fehlendem Ziel

Bei Verwendung einer Maus können Benutzer den Cursor auf das Ziel ausrichten, überprüfen, ob es sich genau um den gewünschten Punkt handelt und anschließend darauf klicken. Bei einem Touchscreen müssen die Finger jedoch über den Bildschirm gehalten werden, und nichts deutet darauf hin, ob es sich tatsächlich um das gewünschte Eingabeziel handelt. Bei einer Berührung des Bildschirms wird direkt das berührte Steuerelement aktiviert. Bei der Maus heißt es also „Auf die Plätze, fertig, los“. Bei der Fingereingabe geht es dagegen sofort los. Da nicht wirklich gezielt werden kann, ist die Fehlerquote bei der Fingereingabe wesentlich höher.

Um den Benutzern eine präzise Fingereingabe zu ermöglichen, wurde für Windows 8 ein Satz interaktiver visueller Zustände für die Steuerelemente definiert, mit denen darauf hingewiesen wird, ob ein Aufruf eines Steuerelements bevorsteht. Beispielsweise werden dieselben visuellen Signale angezeigt, wenn ein Steuerelement aktiviert wird, um dessen Art anzugeben, und wenn die Aktivierung abgebrochen wird, falls der Benutzer es sich anders überlegt. Diese visuellen Signale wurden unter Windows 8 über die Standardformatvorlage direkt in die Steuerelemente integriert. Dabei wurden den Interaktionszuständen der Fingereingabe die CSS-Zustände zugeordnet. Hier finden Sie ein Beispiel der CSS-Zuordnung für <button>:

CSS-Zuordnung der Interaktionszustände der FingereingabeAbbildung 8: CSS-Zuordnung der Interaktionszustände der Fingereingabe

Werfen wir einen Blick auf den Satz der Interaktionszustände und die Integration der entsprechenden visuellen Signale in die Steuerelemente.

Gedrückt

Bei gedrückten Steuerelementen gibt es nun auffälliges visuelles Feedback, damit sich der Benutzer sicher sein kann, welche Schaltfläche vom System als Ziel erkannt wird.

Gedrückte Schaltfläche

Abbildung 9: Gedrückte Schaltfläche

Wenn der Benutzer auf eine Schaltfläche drückt, werden sowohl der :hover- als auch der :active-Pseudozustand von CSS auf die Schaltfläche angewendet. Das visuelle Signal wird durch die folgende Anpassung der Hintergrund- und der Schriftfarbe in CSS bereitgestellt:

button:hover:active {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}

Wir haben der gedrückten Schaltfläche sowohl :hover als auch :active und nicht nur einfach :active zugeordnet, um ein Programmiermodell verwenden zu können, das dem der Maus ähnelt. Dadurch können Sie für beide Eingabetypen einfach den gleichen Code verwenden. Beim Klicken auf eine Schaltfläche mit der Maus befindet sich diese in der Regel bereits über der Schaltfläche und ist somit im :hover-Zustand. Der :active-Zustand wird hinzugefügt, wenn Sie mit der Maus auf die Schaltfläche klicken.

Abbrechen

Wenn der Benutzer merkt, dass er die falsche Schaltfläche berührt hat, kann er den Vorgang abbrechen, indem er seinen Finger zur Seite zieht und aus dem Schaltflächenbereich hebt. So lange sich der Finger nicht auf der Schaltfläche befindet wird diese im Normalzustand angezeigt, um darauf hinzuweisen, dass die Interaktion abgebrochen wird.

Um das visuelle Signal für die Deaktivierung umzusetzen, wird der :active-Zustand für die Schaltfläche aufrechterhalten, während der :hover-Zustand außer Kraft gesetzt wird, nachdem der Benutzer seinen Finger von der Schaltfläche gezogen hat. Da es für den :active-Zustand keinen eigenen Stil gibt, wechselt das Steuerelement zurück in den Normalzustand, dessen Darstellung der Schaltfläche im Ruhezustand entspricht. Auf diese Weise erhält der Benutzer einen visuellen Hinweis auf den Abbruch der Aktion. Dies entspricht dem bereits vorhandenen Mausverhalten. In IE9 wurde dieses Verhalten durch einen Wechsel des privaten Bitmapdesigns erreicht. In IE10 wird die Veränderung mithilfe öffentlicher CSS-Zustände bewerkstelligt, sodass Sie beim Formatieren der Steuerelemente denselben Effekt erzielen können.

Beim Formatieren von Steuerelementen sollten Sie also darauf achten, nicht nur einfach den :active-Zustand für „Gedrückt“ festzulegen, da dieser Zustand das Abbruchverhalten kennzeichnet und deshalb denselben Stil wie der Normalzustand aufweisen muss. Der richtige Zustand für eine aktivierte Schaltfläche ist der :hover:active-Zustand.

Abbruch der Schaltflächenaktivierung

Abbildung 10: Abbruch der Schaltflächenaktivierung

Benutzer sollten sich keine Gedanken darüber machen müssen, an welcher Stelle sie ihren Finger heben, um nicht versehentlich ein anderes Steuerelement zu aktivieren. Beispiel: Die Schaltflächen „OK“ und „ABBRECHEN“ befinden sich in unmittelbarer Nähe. Wenn der Benutzer die Schaltfläche „OK“ nur versehentlich berührt hat und seinen Finger wegziehen möchte, sollte er sich keine Gedanken darüber machen müssen, dabei versehentlich die Schaltfläche „ABBRECHEN“ auszulösen. Daher darf für die Schaltfläche „ABBRECHEN“ in diesem Fall nicht der aktive Zustand ausgelöst werden.

Auf der HTML-Plattform ist dies standardmäßig implementiert, da <button> die Fingereingabe erfasst. Solange sich die Schaltfläche im gedrückten Zustand befindet, kann der Benutzer daher seinen Finger einfach wegziehen, ohne versehentlich ein anderes Element auszulösen.

Mehr als ein Klick

Durch die Fingereingabe können Benutzer jederzeit mehr als einen Zeiger auf dem Bildschirm nutzen. Dies wird allgemein als Mehrfingereingabe bezeichnet, und die Richtung und Geschwindigkeit der Fingereingabe (die Gesten) haben eine spezielle Bedeutung. Wenn ein Finger beispielsweise auf einer Seite des Bildschirms aufgesetzt und horizontal über den Bildschirm bewegt wird, spricht man von Streifen.

Mit der Mehrfingereingabe der HTML-Plattform unter Windows 8 darf nun mehr als ein Steuerelement gleichzeitig über den :active-Zustand verfügen. Wenn ein Benutzer also den Bildschirm berührt, kann er auch mehrere Steuerelemente gleichzeitig aktivieren. Ein einfaches Steuerelement, z. B. <button>, kann beispielsweise in Szenarien mit Tasten auf einer Tastatur-App oder Steuerelementen in einem Spiel verwendet werden.

Außerdem ermöglicht die Gestenerkennung, unterschiedliche Gesten zu erfassen und diesen eine Bedeutung für HTML-Steuerelemente zuzuweisen. Eine Streifbewegung über einer Schaltfläche kann beispielsweise schnell in ein Verschieben der Seite übersetzt werden. Eine Streifbewegung über einem Schieberegler, <input type=”range”>, wird dagegen als Eingabe für das Steuerelement interpretiert. So können Apps flüssig auf Fingerbewegungen reagieren, gleichgültig auf welchen Steuerelementen Sie dabei landen.

Indem alle HTML-Steuerelemente durch gute optische Indikatoren, integrierte Fingereingabeziel-Erweiterungen, Unterstützung der Mehrfingereingabe und flüssige Reaktion auf Fingerbewegungen standardmäßig eine hervorragende Touch-Funktionalität bieten, ist Ihre HTML-App im Metro-Stil automatisch für die Fingereingabe geeignet, wenn Sie die hier erörterten Steuerelemente verwenden und die genannten Tipps und Tricks nutzen.

Grundlagen: Globalisierung und Barrierefreiheit

Eine gute App sollte für so viele Benutzer wie möglich verfügbar sein. Dies bedeutet, dass die App global angepasst und barrierefrei gestaltet werden muss. Um Ihnen das Umsetzen dieser Ziele zu erleichtern, haben wie diese grundlegenden Komponenten in sämtliche HTML-Steuerelemente integriert.

Schriftartenunterstützung

Wir haben die richtige Schriftartenunterstützung direkt in die HTML-Steuerelemente integriert. Selbst wenn Sie nicht vorhaben, Ihre App zu lokalisieren, kann diese lokalisierten Text in jeder Sprache anzeigen, die von Windows 8 unterstützt wird. Dies ist besonders dann nützlich, wenn Ihre App Text anzeigen muss, der auf Eingaben von Benutzern beruht, z. B. in einem Textfeld-Steuerelement. Ihre App ist in der Lage, den Text richtig darzustellen, da wir bereits im Vorfeld sichergestellt haben, dass das Steuerelement eine Schriftart verwendet, von der die entsprechenden Zeichen unterstützt werden. Außerdem wird die bevorzugte Metro-Stil-Schriftart bereitgestellt, die ordnungsgemäß mit der lokalisierten Windows-Version übereinstimmt. Windows wählt die bevorzugte Metro-Stil-Schriftart für alle Sprachen aus. Kurz gesagt kommt die Schriftartenunterstützung nun ohne Vermutungen aus.

Wenn Sie sich dafür interessieren, wie dies umgesetzt wurde, können Sie ganz einfach erneut die Standardformatvorlage öffnen. Sie werden erkennen, dass für zahlreiche Sprachen automatisch eine Liste von Fallbackschriftarten festgelegt wurde. Im nächsten Beispiel, für Japanisch, lautet die erste ausgewählte Schriftart „Meiryo UI“. Wenn in Ihrer App jedoch Unicode-Zeichen enthalten sind, die von der Schriftart „Meiryo UI“ nicht abgedeckt werden, lautet die nächste Fallbackschriftart „Segoe UI“, wenn dies nicht ausreicht kommt „Ebrima“ zum Einsatz usw. Für die meisten Szenarien sind Ihre Zeichen daher in den vom Windows Metro-Stil bevorzugten Schriftarten enthalten. Selbst wenn keine Standardschriftart für eine bestimmte Sprache festgelegt ist, wird standardmäßig auf die Fallbackschriftart der Webplattform ausgewichen. So wird sichergestellt, dass den Benutzern nie Platzhalterzeichen in Steuerelementen angezeigt werden.

body:lang(ja), .win-type-xx-large:lang(ja), .win-type-x-large:lang(ja), .win-type-large:lang(ja), .win-type-medium:lang(ja), .win-type-small:lang(ja),

.win-type-x-small:lang(ja), .win-type-xx-small:lang(ja), input:lang(ja),textarea:lang(ja),

.win-textarea:lang(ja), button:lang(ja), select:lang(ja), option:lang(ja)
{
font-family: "Meiryo UI", "Segoe UI", "Ebrima", "Nirmala UI", "Gadugi", "Segoe UI Symbol", "Khmer UI", /* etc.*/
}

Außerdem können Sie im vorhergehenden Beispiel erkennen, das wir dies nicht nur für das <body>-Element oder nur die HTML-Steuerelemente hinzugefügt haben. Es ist außerdem eine Liste von typografischen Stilen verfügbar, die Sie auf Ihre App-Inhalte anwenden können – so erhalten Sie diese intelligente Schriftartenauswahl automatisch. Weitere Informationen finden Sie unter WinJS CSS classes for typography.

Auswählen der richtigen Ressourcen

Wir haben ein Ressourcenladeprogramm erstellt, mit dem Sie Ihre Apps einfacher lokalisieren können. Hiermit können die richtigen lokalisierten Zeichenfolgen für alle HTML-Steuerelemente Ihrer App geladen werden. Das Ressourcenladeprogramm stellt einen Fallbackmechanismus bereit, damit Sie sich keine Gedanken über die Sprachenmatrix machen müssen, die unterstützt werden soll. Sie können nun im HTML-Code deklarativ auf die Ressourcen verweisen, und das Ressourcenladeprogramm wählt automatisch die richtige Ressource für Sie aus.

<button data-win-res="{textContent: ‘string2’}">OK</button>

Integrierte Barrierefreiheit

Damit Ihre App ein breites Publikum erreicht, ist in alle HTML-Steuerelemente eine Barrierefreiheitsinfrastruktur integriert.

Erstens wurde Unterstützung für die Sprachausgabe integriert, da alle HTML-Steuerelemente über eine semantische Bedeutung verfügen. Der Zweck der Sprachausgabe besteht darin, die grafischen Elemente auf dem Bildschirm für Benutzer mit beeinträchtigter Sehkraft darzustellen und zu interpretieren. Für <button> informiert die Sprachausgabe den Benutzer beispielsweise darüber, dass die App eine Aktion erwartet, wohingegen dies bei einer ähnlich aussehenden Schaltfläche, die mithilfe von <div> erstellt wurde, nicht der Fall ist. Damit die Sprachausgabe ordnungsgemäß mit einem <div>-Element funktioniert, müssen Sie Ihre eigenen ARIA-Attribute hinzufügen.

Zweitens wurde sichergestellt, dass alle HTML-Steuerelemente weiterhin hohen Kontrast unterstützen. Hoher Kontrast ist für Personen mit eingeschränkter Sehkraft ausgelegt. Farbschemata mit hohem Kontrast können die Lesbarkeit des Bildschirms für Benutzer vereinfachen, indem der Bildschirmkontrast durch wechselnde Farbkombinationen gesteigert wird.

Diese Farben wurden in die Standardformatvorlage integriert, und die Steuerelemente wechseln automatisch zu Farben mit hohem Kontrast, wenn für die Windows-Anzeige Designs mit hohem Kontrast festgelegt sind. So ist Ihre App standardmäßig mit hohen Kontrasten kompatibel. Selbst wenn Sie die Farben der systeminternen Steuerelemente entworfen und aktualisiert haben, stellt Windows sicher, dass die richtigen Farben mit hohem Kontrast angezeigt werden, solange die verwendeten Selektoren über die selbe Spezifität verfügen. Weitere Informationen hierzu erhalten Sie in unserem BUILD-Gespräch Stand out in styling for your HTML app.

Die Umschaltung für hohe Kontraste wird erreicht, indem eine einfache Medienabfrage für den Hochkontrastmodus hinzugefügt und alle für die systeminternen Steuerelemente erforderlichen Farben in der Standardformatvorlage festgelegt werden. Wenn Sie wissen möchten, welche Farben dies sind, können Sie einfach die Standardformatvorlage öffnen und nachsehen.

@media (-ms-high-contrast) 
{
/* high contrast definition */
}

Wenn Sie die Schriftartenunterstützung, ein Ressourcenladeprogramm zur Auswahl der richtigen lokalisierten Ressourcen und die Barrierefreiheit integrieren, können Ihre Apps ganz einfach die große Mehrheit der Windows-Benutzer erreichen.

Schnelle und flüssige Apps

Um sicherzustellen, dass Ihre HTML-App eine hervorragende Leistung auf allen Windows 8-Geräten (einschließlich ARM) bietet, muss gesichert sein, dass die Grundbausteine Ihrer Apps, die Steuerelemente, eine ausgezeichnete Leistung bieten.

Unter Windows 8 ist ein HTML-Modul integriert, das zwei unterschiedliche Benutzeroberflächen (Metro-Stil und Desktop) sowie Apps im Metro-Stil unterstützt, die HTML5 und JavaScript verwenden. Das gemeinsame HTML-Modul bietet konsistent schnelle, sichere und leistungsstarke Unterstützung für Webstandards und das Webprogrammiermodell, für beide Browserbenutzeroberflächen und Apps im Metro-Stil. Dies bedeutet, dass HTML-Apps im Metro-Stil über sämtliche Leistungsvorteile von IE10 verfügen. Im Folgenden sind einige Highlights aufgeführt, die HTML-Steuerelemente betreffen:

  • Direct2D-Hardwarebeschleunigung

Da es sich bei den Steuerelementen um systemeigene Elemente der HTML-Plattform handelt, können die Vorteile der Direct2D-Hardwarebeschleunigung genutzt werden. So kann die GPU für alle Grafiken und den gesamten Text in Ihrer Windows 8-HTML-App eingesetzt werden. Die GPU kann auf spezielle Hardware zurückgreifen, um den Bildschirm effizient zu aktualisieren. Indem die GPU für das grafische Rendering eingesetzt wird, steht mehr CPU-Leistung für das Ausführen anderer Vorgänge zur Verfügung, z. B. für das „Just-in-time“ (JIT)-Kompilieren Ihres JavaScript-Codes, wodurch die Leistung Ihrer App weiter verbessert werden kann.

  • Unabhängige Fingereingabe

Einer der Bereiche, indem die Leistung der Webplattform verbessert wurde, ist das Verschieben und Vergrößern. Wir haben viel Arbeit investiert, um sicherzustellen, dass die Steuerelemente nahtlos mit den Optimierungen ineinandergreifen, die wir für Verschieben und Vergrößern vorgenommen haben. Wenn beispielsweise in einem Verschiebebereich ein Schaltflächen-Standardsteuerelement vorhanden ist und der Benutzer mit dem Verschieben beginnt, verarbeitet das System die Fingereingabeaktion im Verschiebebereich und auf der Schaltfläche parallel. Daher sind keine Verzögerungen aufgrund der Verarbeitung von zusätzlichen Steuerelementen für den Endbenutzer vorhanden, und das Verschieben erfolgt genau so schnell, als wäre an dieser Stelle keine Schaltfläche vorhanden. Indem wir diese komplexeren Implementierungen der Steuerelemente einsetzten, konnten wir sicherstellen, dass die Verwendung von Steuerelementen keine Verzögerungen nach sich zieht.

  • Fingereingabestabilität für Steuerelemente

Um eine gute Leistung bei der Fingereingabe sicherzustellen, haben wir Anpassungen am System vorgenommen, um es stabiler zu gestalten. Beispielsweise wurde in <button> eine Verzögerung für den Gedrückt-Zustand eingeführt, damit andere Fingereingabegesten, z. B. Tippen auf oder Streifen über <button>, zuerst verarbeitet werden können. So müssen die komplexen und CPU-intensiven Berechnungen für das übergeordnete Layout nicht sofort für alle Interaktionen ausgeführt werden. Wenn also ein Benutzer die Schaltfläche lediglich antippen möchte, führt dies dazu, dass die Schaltfläche schnell in den Gedrückt-Zustand hinein, wieder hinaus und anschließend in den Normalzustand wechselt, ohne dass die übergeordneten Container ihr Layout aktualisieren müssen. Mit kleinen Verbesserungen wie dieser wird die Gesamtstabilität von HTML-Apps verbessert.

Integrierte Tools

Neben den hier erörterten großartigen Plattformfeatures werden außerdem erstklassige Tools für die HTML-Steuerelemente bereitgestellt.

Nachfolgend sind einige der verbesserten Tools aus Visual Studio und Blend aufgeführt:

  • Sowohl Visual Studio als auch Blend bieten erstklassiges IntelliSense für HTML, CSS und JavaScript. Wenn Sie beispielsweise dabei sind, in Visual Studio eine Hintergrundfarbe auszuwählen, steht nicht nur textbasiertes IntelliSense, sondern auch eine Farbauswahl zur Verfügung.

Inlinefarbauswahl in BlendAbbildung 11: Inlinefarbauswahl in Blend

  • In Blend können Sie nun alle Steuerelemente per Drag & Drop von der Werkzeugleiste direkt auf die Entwurfsoberfläche ziehen. Außerdem können Sie die Steuerelemente nun direkt auf der Entwurfsoberfläche gestalten und Größenanpassungen vornehmen. So ist eine grafische Gestaltung der Steuerelemente in Ihrer App möglich.

Schaltfläche in der Blend-EntwurfsoberflächeAbbildung 12: Schaltfläche in der Blend-Entwurfsoberfläche

  • In Blend können Sie die Steuerelemente über den Formatvorlagenbereich anpassen.

Beispielsweise kann die integrierte Farbauswahl verwendet werden, um Hinter- und Vordergrundfarbe festzulegen.

Formatvorlagenbereich

Abbildung 13: Formatvorlagenbereich mit Farbauswahl in Blend

Außerdem können Sie kompliziertere Aktionen ausführen, etwa, indem Sie Übergänge für das Steuerelement festlegen.

Bereich„Übergangseigenschaften“ in BlendAbbildung 14: Bereich „Übergangseigenschaften“ in Blend

Weitere Informationen zu den durch die Tools bereitgestellten Funktionen finden Sie im Blog von Somasegar.

Zusammenfassung

In diesem Beitrag wurde das <button>-Steuerelement näher erläutert. Die großartigen Funktionen, die für <button> zur Verfügung stehen, sind auch für alle anderen systemeigenen HTML-Steuerelemente vorhanden.

Wir haben viel Aufwand in die Optimierung der HTML-Steuerelemente gesteckt, damit Sie problemlos Apps im Metro-Stil erstellen können. Diese Steuerelemente sind nun für unterschiedlichste Formfaktoren geeignet, verbessern die Benutzerfreundlichkeit und vergrößern die Reichweite Ihrer App. Einige der wichtigsten Apps, die mit der Release Preview veröffentlicht wurden, verwenden hauptsächlich HTML-Steuerelemente, z. B. der Windows 8 App Store und die Mail-, Kalender-, und Foto-Apps. Wenn Sie diese Steuerelemente verwenden, kann Ihre App das Erscheinungsbild des Metro-Stils nutzen, und Sie können sich auf die wesentlichen Inhalte Ihrer App konzentrieren.

Weitere Informationen finden Sie unter:

Hinzufügen von Steuerelementen und Inhalten

Richtlinien für die Gestaltung der Benutzererfahrung für Apps im Metro-Stil

SDK-Beispiele:

CSS styling: branding your app sample

HTML control sample

Zusätzliche Ressourcen werden in den BUILD-Vorträgen zu den Themen control und styling erläutert.

– Kathy Kam, Senior Program Manager, Windows


  • Loading...
Leave a Comment
  • Please add 7 and 3 and type the answer here:
  • Post