Ich war eingeladen dort ein bisschen was zu meiner Erfahrung hinsichtlich der Migration einer HTML5-App zum Modern Style UI (ürsprünglich Metro) von Windows 8 zu erzählen. Hierbei habe ich als Beispiel mein Vokabel-Trainer-Projekt verwendet.

Ich wurde eingeladen dort heuten einen Vortrag über die Nutzung der neuesten Intel Ultrabook Features unter Windows 8 zu halten. Hierbei habe ich als Beispiel mein Vokabel-Trainer-Projekt verwendet.

Nach dem Vortrag nutzen einige Teilnehmer die Möglichkeit einen genaueren Blick auf das neue Intel Ultrabook zu werfen und Fragen zur Anwendungsentwicklung unter Windows 8 zu stellen.

Waren auch Sie bei der Developer Open Space?

Aber zunächst erweiterte ich die Hauptansicht mit einem Semantic Zoom. So sieht die normale Ansicht aus:

Und mit Semantic Zoom (herausgezoomt):

Falls viele Lektionen dargestellt werden sollen, bekommt der Benutzer auf diese Weise eine bessere Übersicht.

Aber nun zum interessanteren Teil: Das Wörter-Kartenspiel, welches ähnlich wie das Spiel Memory® von Ravensburger aussieht:

Es zeigt zunächst zugedeckte Spielkarten an. Nachdem der Benutzer eine Karte berührt bzw. darauf geklickt hat, wird diese aufgedeckt und ein Wort in einer der beiden Sprachen der aktuellen Lektion angezeigt. Der Benutzer muss dann das dazu passende übersetzte Wort finden.

Sollten zu viele Wörter in einer Lektion sein, um alle anzuzeigen, werden die Wörter automatisch zufällig ausgewählt.

Hier sieht man, wie es nun aussieht:

OK, das war der letzte Artikel in der Ultimate Coder Challenge von mir.

Natürlich gäbe es noch genug Ideen, was man dem Vokabel-Trainer hinzufügen könnte – vor allem die Online-Sychronisation sollte bald verfügbar sein –, aber in diesem Wettbewerb ist keine Zeit mehr dafür.

Zusammenfassend kann man sagen, dass es möglich ist eine HTML5-App in sechs Wochen in das neue Windows 8 UI Design zu überführen, aber es ist wirklich viel Arbeit. Auch, wenn Microsoft sagt, dass man mit HTML5 nur einmal entwickelt und danach auf verschiedenen Platformen veröffentlichen kann, so ist dies doch mehr eine Wunschvorstellung. In der Praxis muss man eine ganze Menge an Extra-Arbeit leisten, um das richtige Look & Feel für jede Platform zu bekommen – besonders für Windows 8.

Aber ich hoffe, Ihnen hat das Lesen meiner Artikel Spaß gemacht!

Dort durfte ich meinen Vokabel-Trainer an einem Stand von Intel im Bereich des technischen Showcases vorstellen.

Aber ich hatte auch Zeit, um einige Interface-Verbesserungen für den Vokabel-Trainer umzusetzen.

Zunächst habe ich die Wörterbuchansicht optimiert:

Es gibt keinen Grund die Flaggen für jedes einzelne Wort anzuzeigen. Das verschwendet nur Platz. So sieht es nun aus:

Nun werden die Flaggen nur noch einmal rechts oben auf dem Bildschirm angezeigt.

Zudem musste ich einen Weg finden, damit der Benutzer Verzeichnisse wieder löschen kann. Lektionen können durch Auswahl und danach Verwendung der Löschen-Schaltfläche in der Command-Bar gelöscht werden. Für Verzeichnisse ist dies nicht möglich, da diese nicht ausgewählt werden können.

Daher habe ich entschieden hierfür eine Art PopUp-Menü zu verwenden: Wenn ein Verzeichnisname berührt/angeklickt wird, soll eine Schaltfläche erscheinen, die es dem Benutzer ermöglicht dieses Verzeichnis zu löschen.

Nach einer Recherche fand ich heraus, dass dies mit einem Flyout möglich ist. Somit habe ich folgendes Quelltext-Stück eingefügt:

<div id="deleteFolderFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Delete folder flyout}">
    <button id="deleteFolder">Delete this folder with all lessons?</button>
</div>

Um das Flyout letztlich anzuzeigen, wenn der Verzeichnisname berührt/angeklickt wurde, musste ich eine JavaScript-Funktion beim OnClick-Ereignis aufrufen. Aber es ist offensichtlich nur möglich eine JavaScript-Funktion aufzurufen, wenn diese mit einem WinJS-Namespace zur Verfügung gestellt wird:

GroupedItems.ShowDeleteFolderFlyout(event)

Und hier ist die JavaScript-Funktion selbst samt der Namespace-Definition:

function showDeleteFolderFlyout(e) {
    var deleteFolderFlyout = document.getElementById("deleteFolderFlyout");
    deleteFolderFlyout.deleteFolderId = e.target.groupKey;
    deleteFolderFlyout.winControl.show(e.target, "right");
}

WinJS.Namespace.define('GroupedItems', {
    ShowDeleteFolderFlyout: showDeleteFolderFlyout
});

So sieht’s nun aus, wenn man einen Verzeichnisnamen berührt bzw. ihn anklickt:

Das war das Update für diese Woche wieder.

Lesen Sie nächsten Montag weiter!

Letzte Woche gab es noch eine ganz witzige Veranstaltung von Microsoft hier in München: Ein Windows 8 Hackathon zur App-Entwicklung.

Das war eine gute Gelegenheit ein paar Fragen an kompetente Microsoft-Entwickler zu richten und mit diesem App-Projekt weiter zu kommen.

Vergangene Woche habe ich das Vokabel-Training umgesetzt:

Nachdem der Benutzer auf eine Lektion geklickt hat, wird ein Wort zusammen mit dem erwähnten Info-Text zur Übersetzung angezeigt.

Wenn der Benutzer einen Tablett-PC ohne Tastatur hat, kommt automatisch eine virtuelle Tastatur zum Vorschein, nachdem das Textfeld den Fokus erhalten hat:

Mit dem Klick auf die Prüfen-Schaltfläche zeigt die App eine Nachricht an, ob die eingegebene Übersetzung richtig

oder falsch

war.

Zum Schluss, nachdem die Lektion abgeschlossen wurde, sieht der Benutzer noch wie viele Wörter richtig und wie viele falsch eingegeben wurden (mein Deutsch ist wohl schon ganz gut ):

Nun können die hinzugefügten Wörter auch trainiert werden, aber während der Arbeit daran sind mir bereits einige Ideen für Erweiterungen kommen: Beispielsweise wäre es möglich den Benutzer auswählen zu lassen, in welcher Richtung die Übersetzung trainiert werden soll. Auch wäre das Wörter-Kartenspiel, ähnlich wie bei dem alten Vokabel-Trainer, sicherlich ein nettes Feature.

Es ist also noch ausreichend zu tun, aber zunächst müssen noch einige Interface-Sachen ergänzt oder verbessert werden. Auch hierzu habe ich einige gute Ideen von den Microsoft-Jungs letzte Woche bekommen.

Nächste Woche werde ich bei der IDF in San Francisco sein.

Seien Sie also gespannt auf meinen nächsten Artikel in zwei Wochen wieder am Montag!

Das war die Art von Veranstaltung, die wirklich nur für Entwickler geeignet ist – das sieht man bereits an der Uhrzeit der Veranstaltung: Beginn um 18 Uhr, Ende um 4 Uhr.

Aber es hat Spaß gemacht dort etwas an meiner ersten App im Metro-Stil für Windows 8 in HTML5 zu arbeiten, besonders, da auch einige kompetente Microsoft-Entwickler für Fragen zur Verfügung standen.

… und es gab auch genug zu essen.

Waren Sie auch schon bei einem Entwickler-Hackathon?

Dieses Mal werden wir etwas richtige Funktionalität zu der App hinzufügen.

Aber bevor ich damit beginnen, möchte ich über ein neues Problem sprechen, auf welches ich während der Entwicklung stieß. Plötzlich startete das Visual Studio nicht mehr und zeigte folgende Fehlermeldung:

Er teilte mir mit:

The procedure entry point _Atomic_fetch_sub_4 could not be located in the dynamic link library C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe.

Wie bitte?
Eine immer noch laufende Instanz des Visual Studios funktionierte einwandfrei, aber ich konnte keine neue starten!

Die einzige Sache (neben der Entwicklung), die ich seit dem letzten Neustart gemacht habe, war die Installation einiger Windows-Live-Apps (um den Windows Live Writer zu bekommen). Ich suchte im Internet und, tatsächlich, das war das Problem. Offenbar gab es einige Inkompatibilitäten zwischen diesem und der installierten Version des Visual Studios. Aber, glücklicherweise, gab es bereits einen Bug-Fix von Microsoft.

Solche Sachen kosten immer Zeit, aber was soll’s, alles ist noch beta.

Gut, nun machen wir mit der App weiter.

Am Ende meines letzten Artikels machte ich die Lektionen auswählbar und fügte die App-Bar hinzu:

Als nächster Schritt benötigt die Schaltfläche “Wörterbuch ändern” etwas Funktionalität. Dazu habe ich eine neue Seite erstellt, auf welcher jedes Wort des Wörterbuchs einer Lektion wieder in einem Grid, um im UI-Design zu bleiben, angezeigt wird:

Sie sehen, dass nicht nur die Wörter in beiden Sprache angezeigt werden, sondern auch ein kurzer Info-Test für jedes Wort. Wird ein neues Wort dem Wörterbuch hinzugefügt, kann der Benutzer so einen Info-Text eingeben, um einen Hinweis für die Übersetzung zu liefern. Im Beispiel habe ich diesen genutzt, um das Wort in den Kontext eines Satzes zu setzen. Dies in eine Hilfestellung für Anfänger und sollte auch den Lernerfolg erhöhen.

Um die Möglichkeit zu haben Wörter zu ändern oder zu löschen, können Wörter genauso wie die Lektionen auf der vorangegangenen Ansicht ausgewählt werden, was wieder eine App-Bar hervor bringt:

Nun kann der Benutzer ein bestehendes Wort ändern oder ein neues hinzufügen:

Zu diesem Zeitpunkt können bereits Wörter zu dem Wörterbuch hinzugefügt und somit Lektionen erstellt werden. Aber der wichtigste Teil fehlt noch: Das richtige Vokabel-Training.

Darum werde ich mich nächste Woche kümmern.

Lesen Sie also nächsten Montag weiter!

Die Portierung dieses Vokabel-Trainers wird meine erste App im Metro-Stil sein. Somit muss ich mich zunächst an die Entwicklung für Metro gewöhnen.

Als Ausgangspunkt verwendete ich den Beispiel-Quelltext einer App, die ich beim Microsoft App Excellence Lab erhalten hatte. Während ich jedoch versuchte dieses Beispielprojekt mit der neuesten Version vom Visual Studio auf dem neuen Intel Ultrabook, ausgestattet mit Windows 8, laufen zu lassen, flogen mir eine Menge Ausnahmen um die Ohren:

Nach einer kurzen Suche im Internet fand ich eine neue Version der Metro-Demo-Apps (Englisch). Ich entpackte die Dateien und führte die App mit dem Visual Studio Debugger aus – aber: Erneut eine Ausnahme, zumindest eine andere!

Er teilte mir mit:

0x800a138f - JavaScript runtime error: Unable to get property 'getNetworkConnectivityLevel' of undefined or null reference

Nach einem kurzen Blick, was die da eigentlich an dieser Quelltextstelle machen wollten, verstand ich, was das Problem war: Die App sollte für Push-Benachrichtigungen registriert werden, was aber aktuell nicht möglich war, da ich in einem netten, sonnigen Garten saß, der offenbar etwas zu weit von meiner WLAN-Verbindung im Büro entfernt war.

Ich bin nicht sicher, ob das die User Experience ist, die Microsoft erreichen möchte: Absturz, wenn es gerade keine Internetverbindung gibt.

Wie auch immer, darum werde ich mich später kümmern. Nun wollte ich mit der Analyse der Demo-App weiter machen und kommentierte daher diesen Quelltextteil einfach aus. Nachdem ich das getan hatte, funktionierte die App ohne Probleme:

Jetzt begann ich damit den Quelltext entsprechend anzupassen. Ich machte eine kleine Recherche wie ich den Data-Source-Provider der Beispiel-App abändern musste, dass er meine JSON-Speicherdatei mit all den Ordnern und Lektionen korrekt laden würde. Besonders dieses JavaScript-Promise-Konstrukt, welches für die asynchrone Programmierung verwendet wird, machte mich noch wahnsinnig. Daran musste ich mich erst gewöhnen. Aber schlussendlich bekam ich es zum Laufen.

Danach machte ich nur noch ein paar Anpassungen an dem UI, damit die Flaggen-Icons zusammen mit einem Info-Text über die angezeigte Lektion korrekt dargestellt wurden. Und hier ist das Ergebnis:

Als nächster Schritt wird die Funktionalität dahinter kommen: Lektionen hinzufügen, das Wörterbuch einer Lektion bearbeiten und Lektionen wieder löschen. Als Vorbereitung darauf machte ich die List-View-Elemente auswählbar und fügte einige Schaltflächen in der App-Bar hinzu (hierfür fand ich eine gute Anleitung (Englisch)):

Es gibt also noch viel zu tun, aber ich würde sagen, ich bin auf einem guten Weg.

Seien Sie also gespannt auf mehr in meinem nächsten Artikel am kommenden Montag und danke für’s Lesen!

Wir sind sechs Entwickler, die bei der Entwicklung einer App für die nächste Generation von Ultrabooks mit Windows 8 konkurrieren. Der Gewinner erhält 10.000 $!

Über mich

Ich bin eine Software-Berater und -Entwickler aus München und Autor der Endbenutzer-Produkte auf AB-Tools.com.

Viele dieser Endbenutzer-Apps wurden auch im Intel AppUp Store veröffentlicht und ich habe über AppUp Vorträge auf einigen Entwickler-Events wie der Europäische Software-Konferenz, MunichJS und MobileMonday gehalten.

Das Ultrabook

Intel hat uns Entwicklern freundlicherweise ein Pre-Production Ivy Bridge Ultrabook zur Verfügung gestellt – vielen Dank dafür! –, um unsere neu erstellte App mit all den Features der Ultrabooks der nächsten Generation testen zu können. Da Intel die Spezifikationen des Gerätes bereits in deren Blog-Artikel (Englisch) geschrieben hat, wiederhole ich diese hier nicht.

Natürlich habe ich das Ultrabook bereits ausführlich getestet: Es ist ein super Gerät, lediglich meine USB-3.0-Festplatte funktioniert aktuell nicht richtig mit selbigem, aber dies ist ein bekanntes Problem und wird hoffentlich mit einem Treiber-Update in der Zukunft korrigiert werden – aber egal, es ist ein Pro-Production-Gerät und da sind solch kleinere Probleme OK.

Der einzige echte Nachteil dieses Gerätes ist das spiegelnde Display, welches es sehr schwierig macht, an einem sonnigen Tag in München wie heute, draußen zu arbeiten: Ich verstehe nicht, warum Intel Entwicklern Geräte mit spiegelnden Displays zur Verfügung stellt. Wenn ein Entwickler auf einen Monitor schaut, möchte er Quelltext sehen und nicht sich selbst in einem Spiegel.

So, was entwickele ich nun?

Vor einiger Zeit habe ich einen HTML5 Vokabel-Trainer entwickelt. Obwohl dieser vollständig implementiert ist, samt eines Web-Synchronisations-Dienstes, sieht er nicht wirklich gut aus und ist insbesondere absolut nicht touch-geeignet:

Oben sehen Sie die Lektionsverwaltung: Hier können Sie neue Lektionen hinzufügen, diese in Verzeichnissen verwalten und Wörter zum Wörterbuch hinzufügen.

Darunter befindet sich ein Screenshot des Vokabel-Trainings selbst:

Und als Add-On ist ein Wörter-Kartenspiel enthalten, damit das Lernen mehr Spaß macht:

Unnötig zu sagen, dass keiner diesen Vokabel-Trainer ohne Maus verwenden möchte.

Daher werde ich diese HTML5-App während dieser Ultimate Coder Challenge in eine touch-geeignete Windows 8 App im Metro-Stil verwandeln.

Ich bin sehr gespannt auf den Fortgang dieses Wettbewerbs und werde Sie jeden Montag in meinem Blog auf dem Laufenden halten.

Dort werde ich eine Session über “Intel AppUp – Deine HTML5-/.NET-App im App-Store” anbieten:

Möchte man als Entwickler sein Produkt an die Frau oder den Mann bringen, so ist jeder neue Vertriebsweg willkommen. Einer davon ist der von Intel betriebene App-Store AppUp, der auf vielen heute verkauften Notebooks (z. B. von notebooksbilliger.de) bereits vorinstalliert ist. In dieser Session zeigt Andreas Breitschopp wie eine vorhandene HTML5- oder .NET-App fit für AppUp gemacht wird. Gerne dürfen die Teilnehmer auch eigene Produkte mitbringen, die dann gemeinsam zur Veröffentlichung auf AppUp vorbereitet werden.

Natürlich gibt es bei der Konferenz auch andere interessante Themen und die Teilnahme ist kostenlos.

Daher würde ich mich freuen auch Sie dort zu treffen!