Erstellen von HTML5-Anwendungen
Erstellen von mobilen Anwendungen mit HTML5
Letzten Monat habe ich CSS3-Medienabfragen vorgestellt (msdn.microsoft.com/magazine/hh882445). Dabei handelt es sich um ein neues Modul, mit dem Sie Seitenformate auf der Basis von bedingten Regeln anpassen können. Zwar besitzen Medienabfragen breite Anwendungsmöglichkeiten für sämtliche Arten von Geräten, aber sie werden oft im Zusammenhang mit der Erstellung von Websites für Mobilgeräte und mobilen Anwendungen genannt. Daher befasste sich die Einführung in Medienabfragen im vorherigen Artikel mit der Erstellung von Anwendungen für Tablets und mobile Geräte.
Bedenkt man, wie schwierig das Erstellen von Websites für mobile Geräte und Anwendungen sein kann, wundert es nicht, dass Medienabfragen so gut angekommen sind. Vergleicht man sie mit weniger beliebten Alternativen wie Browserweichen (mitunter auch Geräteerkennung genannt) und angesichts der Tatsache, dass die Erstellung mobiler Anwendungen plattformabhängig ist, scheinen Medienabfragen ein Geschenk des Himmels zu sein. Sie sind auch in der Tat brillante Module, und ich habe letzten Monat darüber berichtet, damit Sie Medienabfragen heute hoffentlich schon nutzen.
Reaktionsfähiges Webdesign – Mehr Infos
Doch damit nicht genug: CSS-Medienabfragen sind hervorragend, keine Frage, aber sie sind nur eins der Tools, die Sie zum Erstellen erstklassiger mobiler Webanwendungen benötigen. Letzten Monat habe ich den Begriff „reaktionsfähiges Webdesign“ erwähnt, einen Ausdruck, den Ethan Marcotte in seinem wegweisenden Artikel zu diesem Thema prägte (bit.ly/9AMjxh). Marcotte konzentriert sich hauptsächlich auf Medienabfragen, aber er weist auch auf zwei andere wesentliche Methoden hin: flexible Raster („Fluid Grids“) und flexible Bilder. Medienabfragen sind der Motor hinter reaktionsfähigen und anpassungsfähigen Websites, aber sie sind nur wirksam, wenn auch das Websitedesign reaktions- und anpassungsfähig ist. In diesem Monat stelle ich Ihnen einige Gedanken rund um diese anderen beiden Säulen des reaktionsfähigen Webdesigns vor. Ich beginne mit einer Übersicht über ein paar ganz neue CSS Layout-Module und erläutere dann einige Techniken, mit denen Sie auch Nicht-Text-Elemente, wie Bilder oder eingebettete Videos, adaptiv machen können. Unter anderem gehe ich auch auf Frameworks und Bibliotheken ein, die Ihnen beim Umsetzen dieser Verfahren helfen. Außerdem bespreche ich ein paar beliebte Frameworks zum Erstellen mobiler Webanwendungen und schließe mit einer kurzen Erläuterung zur Erstellung von systemeigenen Anwendungen mittels HTML5 ab. Am Ende dieses Artikels sollten Sie über eine solide Basis für die Implementierung von reaktionsfähigem Webdesign in Ihren Anwendungen verfügen.
Flexible Raster und Layouts
Die Methode, Raster für typografische Designs zu verwenden, gibt es in seiner Grundform schon seit Jahrhunderten, sogar schon vor der Erfindung von beweglichen Lettern. Anhand dieser zweidimensionalen Struktur mit sich kreuzenden vertikalen und horizontalen Achsen kann ein Designer Elemente in einem Layout optisch ansprechend ausrichten (siehe Abbildung 1). Im Laufe der letzten Jahre haben Webdesigner angefangen, viele dieser Prinzipien digital umzusetzen, und eine Reihe beliebter Frameworks, wie das 960 Grid System (960.gs) und das Semantic Grid System (semantic.gs), sorgen dafür, dass Rasterlayouts heutzutage für alle zugänglich sind.
.jpg)
Abbildung 1 – Typografisches Raster
Allerdings besitzt die direkte Anwendung eines typografischen Rasters im Web eine bedeutende Schwachstelle: Drucklayouts sind fixiert, Weblayouts hingegen nicht. Außerdem sind viele Rasterimplementierungen nicht furchtbar semantisch und benötigen zusätzliches Markup, um das Raster zu definieren. Dabei werden auf den HTML-Seiten Darstellung und Inhalt miteinander vermischt.
Damit sind wir beim Wort „flexibel“ des flexiblen Rasters von Marcotte. Wirklich reaktionsfähig ist ein Raster (oder Layout) nur, wenn es an wandelnde Bedingungen angepasst werden kann. Wie ich bereits letzten Monat erklärt habe, helfen Medienabfragen, die Regeln für das Umpositionieren von Elementen zu definieren. Doch dies funktioniert nur, wenn diese Elemente zunächst in einem flexiblen Container definiert werden. Die zuvor erwähnten Tools (wie auch zahlreiche andere) gehen diese Aufgabe entweder mit einer systemeigenen Lösung an (Semantic Grid) oder durch Verwenden einer ergänzenden Bibliothek (Adapt.js für das 960er Raster –adapt.960.gs. Allerdings gibt es auch neue CSS-Module, die bei der Erstellung flexibler Layouts helfen.
Sie merken sicher, dass ich mir erlaube, Marcottes Begriff der flexiblen Raster auf den Begriff „flexible Layouts“ auszuweiten. Der Grund dafür ist, dass einige der neuen CSS-Module zwar nicht auf einem Raster basieren, Sie aber dennoch dabei unterstützen können, flexible und anpassungsfähige Container zu erstellen.
Schauen wir uns zunächst CSS3 Flexbox (Flexible Box Layout Module) an, ein Konzept, das unter bit.ly/yguOHU weiter erläutert wird. Flexbox soll Ihnen dabei behilflich sein, Layoutcontainer für Elemente zu erstellen, die untergeordnete Elemente automatisch in horizontaler oder vertikaler Richtung positionieren und den Abstand automatisch festlegen. (Damit ist es mit „ul li { float: right; }“ vorbei!) Dieses Modul wird (mit anbieterspezifischen Präfixen) in der Vorschau der Internet Explorer 10-Plattform sowie unter Firefox, Chrome, Safari, iOS Safari und Android unterstützt. Weitere Informationen finden Sie unter caniuse.com/flexbox.
Wenden wir als Erstes Flexbox auf die im letzten Monat vorgestellte Fotogalerie an. Das Ergebnis des CSS-Codes in Abbildung 2 sehen Sie, zu Illustrationszwecken optisch ein bisschen aufgewertet, in Abbildung 3. Beachten Sie, dass im CSS-Code in Abbildung 2 nur das Anbieterpräfix „-ms-“ verwendet wird. Im online verfügbaren Beispielcode (archive.msdn.microsoft.com/mag201205HTML5) habe ich auch die anderen Anbieterpräfixe integriert (-webkit, -moz, -o), was Sie für Ihre Websites ebenso tun sollten.
Abbildung 2 – CSS für die Verwendung des Flexbox-Moduls
ul.thumbnails {
width: 100%;
background: #ababab;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center;
}
ul.thumbnails li {
-ms-box-flex: 1;
}
.jpg)
Abbildung 3 – Bilder der Fotogalerie nach Anwendung von Flexbox
Das ist natürlich alles sehr schön, sieht aber letztendlich aus, wie was wir schon hatten. Um die FLEXibilität von FLEXbox zu demonstrieren, ändern Sie die Größe des Browserfensters oder öffnen Sie die Seite in einem Emulator für Mobilgeräte oder auf einem Gerät. In diesem Beispiel sind keine Medienabfragen definiert, und trotzdem ist das Layout etwas flexibler. Wenn Sie die beiden Module kombinieren, können Sie flexible Container erstellen, die beim Ausrichten und Verlagern von Elementen sowie beim Festlegen des Abstands zwischen Elementen reaktiv vorgehen. Sie können beispielsweise eine Medienabfrageregel für Bildschirme mit weniger als 480 Pixel erstellen, eine vertikale Feldausrichtung festlegen und voilà – schon haben Sie den Anfang für ein mobiles Layout gemacht.
Das CSS-Raster-Layout (auch CSS Grid genannt, mehr dazu unter bit.ly/ylx7Gq) ist eine neue Spezifikation, die im April 2011 bei der CSS-Arbeitsgruppe des World Wide Web Consortium (W3C) eingereicht wurde und zurzeit ausschließlich für Internet Explorer 10 Consumer Preview implementiert wird. Hiermit soll eine fundierte, systemeigene Rasterunterstützung innerhalb des Browsers gewährt werden. Für Entwickler und Designer resultiert das in einem funktionsreichen typografischen Raster ohne Tabellenlayout oder semantisch neutrales Markup.
Mit dem CSS-Raster können Sie ein Seitenlayout mit vordefinierten Zeilen und Spalten definieren und Regeln aufstellen, die den Inhaltsfluss für Elemente angeben. Als Erstes wird ein Rastercontainer definiert, der das Raster („grid“) als Anzeigeeigenschaft für ausgewählte Elemente angibt:
body {
display: -ms-grid; // A vendor prefix is required.
}
Ich entscheide mich hier für das Textkörperelement, weshalb mein Raster dann das gesamte Dokument ausfüllt. Dies ist nicht obligatorisch, und ich könnte auch einfach ein Raster in einem kleineren Bereich auf der Seite anlegen oder sogar mehrere Raster auf einer einzigen Seite definieren. Wenn ich das Raster definiert habe, muss ich die Zeilen- und Spaltengröße bestimmen:
body {
display: -ms-grid;
-ms-grid-rows: 50px 30% 20% auto;
-ms-grid-columns: 75px 25px 2fr 1fr;
}
In diesem Fall gebe ich ein Raster mit vier Spalten und vier Zeilen an. Für einige lege ich eine absolute Größe fest (zum Beispiel 50 px und 75 px) und für andere eine Größe relativ zum Fenster (30 %, 20 %) und automatisch in Abhängigkeit von der Inhaltsbreite („auto“). Außerdem verwende ich die neue Einheit „fraction“ (fr), die in der CSS-Rasterspezifikation als Bruchteil des verfügbaren Platzes definiert ist. Bruchwerte werden berechnet, nachdem feste Werte zugewiesen wurden, die dann zu gleichen Teilen auf alle mit diesen Werten definierten Zeilen und Spalten aufgeteilt werden. Für mein Beispiel bedeutet dies Folgendes: Nachdem 100 Pixel für die erste und zweite Spalte reserviert wurden, wird der dritten Spalte zwei Drittel des verbleibenden Platzes zugeteilt und Spalte Vier erhält ein Drittel.
Nun da das Raster definiert ist, können untergeordnete Elemente problemlos innerhalb des Rasters positioniert werden, indem die Zeilen- und Spaltenwerte folgendermaßen zugewiesen werden:
#main {
-ms-grid-row: 2;
-ms-grid-column: 2;
-ms-grid-row-span: 2;
-ms-grid-row-align: center;
}
Hier platziere ich mein Hauptaufteilungselement („main“) in der zweiten Zeile und Spalte im Raster. Das Element erstreckt sich über zwei Zeilen, und ich zentriere den Inhalt im Container. Auf der Microsoft Internet Explorer-Testdemoseite wird mithilfe der CSS-Rasterlayoutimplementierung eine genaue Implementierung der beliebten Grid-Systemwebsite thegridsystem.org erstellt. Werfen Sie unter bit.ly/gEkZkE mal einen Blick darauf!
Wenn Sie schon einmal etwas Ähnliches mit Markup und CSS2.1 versucht haben, kennen Sie die Flexibilität eines CSS-Rasters ja bereits. Und in Kombination mit Medienabfragen können Sie mit dem CSS-Raster anpassungsfähige Layouts erstellen, die mit weniger Regeländerungen einfach zu optimieren sind, wenn Benutzer Gerätegröße und -ausrichtung anpassen.
Als letzte Layoutspezifikation möchte ich das CSS-Layoutmodul mit mehreren Spalten vorstellen, das Sie unter bit.ly/yYEdts einsehen können. Das Modul hat den Status „Candidate Recommendation“ (Empfehlungskandidat) (bit.ly/x5IbJv) und wird in zahlreichen Browsern unterstützt, unter anderem ist die Unterstützung für Internet Explorer 10 geplant. Es sieht ganz so aus, als könne man mit dem mehrspaltigen Modul Spalten auf einer Seite anordnen, ohne sie manuell positionieren zu müssen oder float-Elemente zu verwenden. Sie müssen lediglich die Eigenschaft „column-width“ (gegebenenfalls mit Präfixen) auf einen Container anwenden, zum Beispiel so:
article {
width: 960px;
column-width: 240px;
}
Mit dieser Regel werden Artikelelemente in Spalten mit 240 Pixeln aufgeteilt, wobei so viele Spalten erstellt werden, wie der Container zulässt. (In diesem Fall füllen vier 240-Pixel-Spalten den 960-Pixel-Container.) Ich könnte mit der Eigenschaft „column-count“ auch eine feste Anzahl von Spalten definieren. In diesem Fall würden die Spaltenbreiten gleichmäßig auf die Containerbreite aufgeteilt.
Wie bei Flexbox und Rastermodulen können Sie durch Kombinieren von Modul und Medienabfragen schnell einfache und anpassungsfähige Regeln definieren, die eine optimale Benutzerfreundlichkeit für mobile Anwender versprechen.
Die drei beschriebenen Module haben vieles gemeinsam, und jedes besitzt Features, mit denen Sie die Art von flexiblen Layouts erstellen können, die für wahrhaft reaktionsfähige Websites ein Muss sind. Ich möchte Sie dazu ermuntern, die einzelnen Module zu recherchieren und auszuprobieren, damit Sie für jede Layoutherausforderung das richtige Modul auswählen können,
Schauen Sie sich auch die neuen Frameworks an, die diese Spezifikationen nutzen. Die Verwendung eins dieser Frameworks kann Ihnen bei der Erstellung flexibler Layouts für Ihre eigenen Websites einen schönen Vorsprung verschaffen. Zwei wichtige Frameworks sind Skeleton (getSkeleton.com) und Bootstrap (http://twitter.github.com/bootstrap), ein komplettes Website-Starterkit von Twitter. Ich habe erst kürzlich mit Skeleton eine eigene Website erstellt (siehe html5tx.com).
Reaktionsfähige Medien
Der Knackpunkt beim reaktionsfähigen Webdesign (insbesondere für Mobilgeräte) sind die Medien. Beginnen wir mit den Bildern. Eine der einfachsten Methoden der Bildgestaltung, um Bilder reaktionsfähiger zu machen, besteht in der Integration des folgenden Codes in Stylesheets:
img {
max-width: 100%;
}
Mit dieser Regel werden Bilder immer skaliert (nach oben oder unten), damit sie in den übergeordneten Container des Bilds passen. Und wenn Containerelemente reaktionsfähig sind (vielleicht unter Verwendung eines der oben beschriebenen Verfahrens), sind es die Bilder ebenfalls.
Die Herausforderung bei dieser Methode ist, dass die Bilder auf der Website groß genug sein müssen, dass sie auf jede möglicherweise erforderliche Größe skaliert werden können. Die Rohbilder auf der von mir verwendeten Fotogalerie-Website sind relativ groß und können daher verkleinert oder vergrößert werden.
Die Verwendung riesiger Bilder mit veränderbarer Größe stellt jedoch ein immenses Problem in Bezug auf die Auslastung von Mobilgeräten dar und führt daher möglicherweise zu Einbußen bei der Geräteleistung. Selbst wenn Sie ein großes Bild verkleinern, damit es in ein 320 x 240-Fenster passt, wird das komplette Bild auf das Gerät übertragen. So senden Sie möglicherweise ein 2 MB großes Foto, wenn das Gerät lediglich Fotos in einer Größe von 10 KB benötigt. In einer mobilen Welt spielt die Bandbreite immer noch eine große Rolle. Daher muss die Strategie bezüglich der Gerätebreite durch andere Ansätze ersetzt werden.
Für dieses Problem gibt es leider immer noch keine einfache Lösung, und das W3C bietet noch keine offizielle Unterstützung für einen bestimmten Ansatz. Es gibt eine Reihe von Methoden für die Verarbeitung von reaktionsfähigen Bildern, aber alle fallen in eine von zwei Kategorien: Sie bewältigen das Problem entweder auf dem Server oder auf dem Client. Viele serverseitigen Ansätze, wie der unter bit.ly/rQG0Kw beschriebene, stützen sich auf die Verwendung von Platzhalterbildern im 1 x 1-Pixel-Format, Clientcookies und Serverumschreibungsregeln, um das richtige Bild auf dem entsprechenden Gerät bereitzustellen. Clientseitige Ansätze (siehe zum Beispiel bit.ly/tIdNYh) nutzen oft JavaScript ,<noscript>-Fallbacks, bedingte Kommentare und einige interessante CSS-basierte Tricks. Bei beiden Ansätzen fühlt man sich an Hacking erinnert (was es ja letztendlich auch ist), aber es sind die besten Lösungen, die bisher in Anbetracht der Einschränkungen durch das <img>-Tag gefunden werden konnten. Fürs Erste sollten Sie sich beide Ansätze anschauen und sich entscheiden, welcher für Ihre Anwendungen funktioniert.
Langfristig gesehen gibt es jedoch Hoffnung. In einem Artikel über die HTML5-Semantik in der Zeitschrift Smashing Magazine (bit.ly/rRZ5Bl) setzt sich Bruce Lawson von Opera für die Verwendung eines <picture>-Elements ein, das sich ähnlich wie <audio>- und <video>-Tags verhält und durch das Entwickler Zugang zu mehreren untergeordneten <source>-Elementen innerhalb des übergeordneten <picture>-Elements erhalten würden. In Kombination mit Inlinemedienabfragen könnte ein neues <picture>-Element endlich eine stabile Lösung für reaktionsfähige Bilder darstellen:
<picture alt="cat gallery">
<source src="nyan-high.png" media="min-width:800px" />
<source src="nyan-med.png" media="min-width:480px" />
<source src="nyan-low.png" />
<!-- fallback for unsupporting browsers -->
<img src="nyan-med.png" alt="cat gallery" />
</picture>
Obwohl sich diese Lösung großer Beliebtheit erfreut und eine entsprechende W3C Community-Gruppe gebildet wurde (bit.ly/AEjoNt), gibt es meines Wissens keine offizielle Arbeitsgruppe zu diesem Thema. Vielleicht erscheint dieses Element ja zusammen mit HTML6.
Es bestehen ähnliche Herausforderungen für das Hinzufügen reaktionsfähiger Videoinhalte in Websites und Anwendungen, wobei es für Videos stabilere HTML5-basierte Lösungen gibt als für Bilder. Zunächst einmal ist das für Medienabfragen optimierte <source>-Element (wie beim zuvor beschriebenen fiktiven <picture>-Element dargestellt) für <video> gültig, wie Sie hier sehen:
<video>
<source src="nyan-mashup-high.webm" media="min-width:800px" />
<source src="nyan-mashup-med.webm" media="min-width:480px" />
<source src="nyan-mashup-low.webm" />
<!-- Insert Silverlight or Flash Fallback here -->
</video>
Wenn Sie das Video über Ihre eigenen Server bereitstellen oder einen Dienst mit mehreren Einbettungsversionen verwenden, kann ich diese Syntax wärmstens empfehlen, da sie sicherstellt, dass die Benutzer letztendlich ein für Geräte geeignetes Video erhalten.
Zwar hilft diese Lösung Benutzern, Bandbreite zu sparen, aber Sie müssen sich genau wie bei Bildern trotzdem noch überlegen, wie Sie die Größe der eingebetteten Videoelemente ändern. Mit Medienabfragen ist es einfach, Videoelemente auf der Basis unterschiedlicher Bildschirmgrößen anzupassen, aber wenn Sie eine automatisiertere Lösung suchen, sollten Sie sich FitVids.js ansehen (fitvidsjs.com), ein jQuery-Plug-In, das Videoelemente automatisch flexibel und reaktionsfähig macht. Denken Sie jedoch daran, dass eine Lösung mit einem jQuery-Plug-In nur für Benutzer funktioniert, die JavaScript aktiviert haben.
Erstellen von mobilen Webanwendungen mittels HTML5-Frameworks
Nun, da wir uns mit den anderen beiden Säulen des reaktionsfähigen Webdesigns, flexiblem Layout und flexiblen Bildern beschäftigt haben, wenden wir uns Situationen zu, in denen Sie nicht nur Websites oder Apps erstellen, die auch für mobile Geräte geeignet sind, sondern sich gezielt an Benutzer von Mobilgeräten wenden.
In der Entwicklungspraxis sind herkömmliche Desktop- (oder Client-) und Webmodelle einem dritten Anwendungstyp gewichen. Diese werden oftmals als native oder systemeigene Anwendungen bezeichnet, da sie sich auf einem bestimmten Gerät befinden (zum Beispiel einem Windows Phone oder iPad), und sie werden unter Verwendung gerätespezifischer Frameworks entwickelt (iOS und Android) und über den App Store oder Marketplace installiert.
So funktionsreich und stabil diese Frameworks auch sind, möchten Webentwickler ihre mobilen Webanwendungen doch mitunter ähnlich systemeigen wirken lassen. Solche Anwendungen sind immer noch auf Servern gespeichert und können auch anders als über den App Store oder Marketplace eines Geräts bereitgestellt werden.
Obwohl Sie diese Arten von Anwendungen auch manuell erstellen können, übernehmen für gewöhnlich Frameworks diese Aufgabe. Eine beliebte Lösung für mobile Webanwendungen ist jQuery Mobile (jquerymobile.com), ein mobiles Entwicklungsframework, das ein HTML5-basiertes Benutzeroberflächensystem für beinahe jede mobile Plattform bietet. Abbildung 4 zeigt ein mobiles Anwendungsbeispiel für OpenTable.com, das über eine jQuery-Benutzeroberfläche erstellt wurde.
.jpg)
Abbildung 4 – Beispiel für einen mit jQuery Mobile erstellten Bildschirm für ein Mobilgerät
Eine andere oft verwendete Option zum Erstellen systemeigen wirkender mobiler Anwendungen ist Kendo UI Mobile (kendoui.com), ein HTML5/JavaScript/CSS-Framework von Telerik Inc. Mit Kendo UI können Sie mobile Anwendungen erstellen, die auf iOS- und Android-basierten Geräten komplett nativ aussehen – und das mit einer einzigen Codebasis. Abbildung 5 und Abbildung 6 zeigen dieses Feature in Aktion. Schauen Sie es sich unter bit.ly/wBgFBj doch selber einmal an.
.jpg)
Abbildung 5 – Eine Kendo UI Mobile-Demoanwendung auf einem iOS-basierten Gerät
.jpg)
Abbildung 6 – Beispiel für eine Kendo UI Mobile-Anwendung auf einem Android-basierten Gerät
Erstellen von systemeigenen Anwendungen mit HTML5
Webanwendungen ein systemeigenes Gefühl zu verleihen bringt nicht nur Ihre Fähigkeiten als Webentwickler zum Vorschein, sondern Sie erstellen so auch Anwendungen, die den Erwartungen von Benutzern mobiler Geräte entsprechen. Allerdings stoßen diese Anwendungen bei der Nutzung systemeigener Sensoren und APIs auf diesen Geräten auch irgendwann an ihre Grenzen. Während manche Features, wie Geolocation, über Browser auf Mobilgeräten zur Verfügung stehen, ist dies bei vielen anderen, wie Beschleunigungsmessern oder Videos, nicht der Fall. Für den Zugriff auf diese Features sind systemeigene Anwendungen immer noch die beste Option.
Erfreulich ist jedoch, dass aufgrund der Beliebtheit der Webprogrammierung HTML5, JavaScript und CSS sozusagen systemeigen geworden sind. Beliebte Frameworks wie PhoneGap (phonegap.com) und Titanium Appcelerator (appcelerator.com) sorgen dafür, dass Sie HTML5 und JavaScript zum Erstellen systemeigener Anwendungen für iOS, Android und Windows Phone nutzen und dazu noch Zugriff auf Geräte-APIs bereitstellen können. Und nicht zu vergessen: Mobile Entwicklungsframeworks wie jQuery Mobile und Kendo UI Mobile funktionieren in diesen Umgebungen ebenso gut wie im Browser. Abbildung 7 zeigt eine systemeigene iOS-Anwendung, die mit PhoneGap und Kendo UI erstellt wurde. Weitere Informationen finden Sie im Blogbeitrag unter bit.ly/zpIAPY.
.jpg)
Abbildung 7 – Mit HTML, JavaScript und CSS erstellte iOS-Anwendung
Microsoft hat ein neues Zeitalter der systemeigenen Webentwicklung eingeläutet, indem nun die Erstellung von Windows 8-Anwendungen unter Verwendung von HTML5, JavaScript und CSS offiziell unterstützt wird, ohne dass zusätzliche Abstraktionen oder Frameworks erforderlich sind. Unter dev.windows.com können Sie sich die Windows 8 Consumer Preview wie auch die neuen Entwicklertools für diese Plattformen selber anschauen.
Wenn es um mobile Webanwendungen geht, haben Sie die Wahl! Wenn Sie im Bereich Webprogrammierung arbeiten und systemeigene Anwendungen samt „Augmented Reality“-Features erstellen möchten, wäre vielleicht Windows 8 oder ein Framework wie PhoneGap oder Titanium Appcelerator etwas für Sie. Wenn Sie einfach nur eine systemeigene Wirkung erzielen möchten, sollten Sie einen Blick auf jQuery UI und Kendo UI Mobile werfen. Und falls Sie eine einzelne Website bzw. Anwendung erstellen möchten, die auf zahlreiche Geräte und Umgebungen reagiert, dann probieren Sie am besten die reaktionsfähigen Strategien aus, die ich im letzten Artikel erläutert habe. Zweifellos stellen Mobilgeräte derzeit eine der wichtigsten Entwicklungsplattformen dar. Egal für welche Strategie oder Plattform Sie sich entscheiden, sollten Mobilgeräte Ihre oberste Priorität bei der Entwicklung sein.
Brandon Satrom ist Produktmanager für Kendo UI (kendoui.com), einem Toolset für HTML5-Umgebungen und mobile Geräte von Telerik Inc. Sie können ihm auf Twitter unter twitter.com/brandonsatrom folgen. Momentan ist er damit beschäftigt, zusammen mit Chris Sells das Buch „Building Metro Style Apps for Windows 8 in JavaScript“ zu verfassen.
Unser Dank gilt den folgenden technischen Experten für die Durchsicht dieses Artikels: Jon Box, Burke Holland und Clark Sell