Intel Ultrabook AppLab in Berlin

Heute war ein Ultrabook AppLab in Berlin, zu welchem ich von Intel eingeladen wurde.

Eine ganze Reihe an Sprechern erklärte die neuen Features der Ultrabooks der nächsten Generation und wie diese von Entwicklern verwendet werden können.

Intel Ultrabook AppLab Berlin

Aber auch eine Sprecher von Microsoft sprach über das neuen Windows-UI-Design von Windows 8.

Und der wichtigste Teil:

Intel Ultrabook AppLab Berlin: Buffet

Wir mussten nicht verhungern und es gab genug Zeit, um sich mit anderen Entwicklern zu unterhalten. ;-)

Waren Sie auch auf diesem AppLab?

Ultimate Coder Challenge: Vokabel-Training

Wie in meinem Blog-Artikel von vergangener Woche angekündigt, werde ich dieses Mal mit dem wichtigsten Teil eines Vokabel-Trainers fortfahren: Dem Vokabel-Training selbst.

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:

Screenshot des Vokabel-Trainers: Training

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:

Screenshot des Vokabel-Trainers: Training Schreiben

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

Screenshot des Vokabel-Trainers: Training richtig

oder falsch

Screenshot des Vokabel-Trainers: Training 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 ;-) ):

Screenshot des Vokabel-Trainers: Training Statistik

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!

Windows 8 Hackathon zur App-Entwicklung

Letzte Nacht hat Microsoft einen Windows 8 Hackathon hier in München organisiert.

Windows 8 Hackathon zur App-Entwicklung

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.

Windows 8 Hackathon zur App-Entwicklung: Essen

… und es gab auch genug zu essen. ;-)

Waren Sie auch schon bei einem Entwickler-Hackathon?

Ultimate Coder Challenge: Funktionalität hinzufügen

In meinem Artikel von letzter Woche schrieb ich über die vorbereitenden Arbeiten, die erforderlich waren, um meinen Vokabel-Trainer in eine App im Metro-Stil – oh, ich meine moderner UI-Stil oder Windows-8-Stil oder wie auch immer das nun genannt werden soll ;-) – für Windows 8 zu verwandeln.

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:

Screenshot des Fehlers beim Versuch das Visual Studio zu starten

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:

Screenshot des Vokabel-Trainers: App-Bar

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:

Screenshot des Vokabel-Trainers: Wörterbuch bearbeiten

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:

Screenshot des Vokabel-Trainers: Wörterbuch bearbeiten App-Bar

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

Screenshot des Vokabel-Trainers: Wort bearbeiten

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!

Ultimate Coder Challenge: Vorbereitende Arbeiten

Nachdem ich in meinem Artikel von letzter Woche erklärt habe, was ich machen werde, starten wir dieses Mal mit ein paar “echten” Arbeiten am Produkt.

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:

Screenshot der Ausnahmen beim Versuch die Beispiel-App auszuführen

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!

Screenshot der Ausnahme beim Versuch die Beispiel-App ohne Internetverbindung auszuführen

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:

Screenshot der Beispiel-App

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:

Screenshot des Vokabel-Trainers: Erster Eindruck

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)):

Screenshot des Vokabel-Trainers: App-Bar

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!

Ultimate Coder Challenge: Erste Schritte

Freue mich ein Teilnehmer der Ultimate Coder Challenge (Englisch) zu sein!

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.

Pre-Production Ivy Bridge Ultrabook

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:

Screenshot der alten Version des Vokabel-Trainers: Lektionsverwaltung

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:

Screenshot der alten Version des Vokabel-Trainers: Vokabel-Training

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

Screenshot der alten Version des Vokabel-Trainers: Wörter-Kartenspiel

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.

Intel Ultrabook MeetUp in München

Heute war ein Intel Ultrabook MeetUp in München an einer netten Location, Café Keksdose. War also dieses Mal kein so weiter Weg für mich. ;-)

Intel Ultrabook MeetUp München

Neben leckeren Snacks war es super Entwickler aus dem ganzen Land zu treffen.

Intel Ultrabook MeetUp München (Ultrabooks)

Aber wir durften auch die neuesten Intel Ultrabooks bestaunen und etwas damit rumspielen.

Waren auch Sie bei dieser Veranstaltung?

WordPress Multisite: Benutzer basierend auf ihrer Browser-Sprache weiterleiten

Seit ich den Artikel über den Multisite Language Switcher geschrieben habe, erhalte ich viele Fragen wie ich die Hauptseite “/” in meiner WordPress-Multisite-Konfiguration deaktiviert habe.

Die Antwort ist simpel: Ich habe sie nicht deaktiviert, sondern lediglich eine eigene, kleine Theme erstellt, welche sicher stellt, dass jeder Benutzer, der auf die Hauptseite “/” zugreift, auf die korrekte URL – in meinem Fall “/en/” oder “/de/” – weitergeleitet wird.

Der folgende Quelltext ist nicht vollständig von mir. Ich erinnere mich, dass ich einfach im Internet nach einer guten Lösung gesucht und diese nach meinen Bedürfnissen angepasst habe, aber das ist schon eine ganze Weile her. Daher weiß ich nicht mehr woher Teile des Quelltexts ursprünglich herstammen.

Egal, hier jedenfalls der Quelltext der Datei index.php, so wie ich sie aktuell in meiner Weiterleitungs-Theme für diese WordPress-Seite verwende:

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Redirect
 */

/**
 * Browser-Sprache ermitteln.
 *
 * @param array $allowed_languages Ein Datenfeld der Sprachen, die auf der Seite zur Verfügung stehen.
 * @param string $default_language Die zu verwendende Standardsprache, wenn keine ermittelt werden konnte.
 * @param string $lang_variable Benutzerdefinierte Sprachenunterstützung. Wenn nicht übergeben wird specified $_SERVER['HTTP_ACCEPT_LANGUAGE'] verwendet.
 * @param string $strict_mode Wenn true (Standard) wird der gesamte Sprachencode ("en-us") verwendet und nicht nur der linke Teil ("en").
 * @return string Die ermittelte Browser-Sprache.
 */
function get_lang_from_browser($allowed_languages, $default_language, $lang_variable = NULL, $strict_mode = TRUE) {
    // $_SERVER['HTTP_ACCEPT_LANGUAGE'] verwenden, wenn keine Sprachvariable mitgegeben wurde
    if (NULL === $lang_variable)
        $lang_variable = $_SERVER['HTTP_ACCEPT_LANGUAGE'];

    // Wurde irgendwelche Information mitgeschickt?
    if (empty($lang_variable))
        return $default_language;

    // Den Header auftrennen
    $accepted_languages = preg_split('/,\s*/', $lang_variable);

    // Die Standardwerte einstellen
    $current_lang = $default_language;
    $current_q    = 0;
    // Nun alle mitgegebenen Sprachen abarbeiten
    foreach ($accepted_languages as $accepted_language) {
        // Alle Infos dieser Sprache rausholen
        $res = preg_match(
            '/^([a-z]{1,8}(?:-[a-z]{1,8})*)'.
            '(?:;\s*q=(0(?:\.[0-9]{1,3})?|1(?:\.0{1,3})?))?$/i',
            $accepted_language,
            $matches
        );

        if (!$res)
            continue;

        // Sprachcode holen und dann sofort in die Einzelteile trennen
        $lang_code = explode('-', $matches[1]);

        // Wurde eine Qualität mitgegeben?
        if (isset($matches[2]))
            $lang_quality = (float)$matches[2];
        else
            $lang_quality = 1.0;

        // Bis der Sprachcode leer ist...
        while (count($lang_code)) {
            // Prüfen, ob der Sprachcode angeboten wird
            if (in_array(strtolower(join('-', $lang_code)), $allowed_languages)) {
                // Qualität prüfen
                if ($lang_quality > $current_q) {
                    $current_lang = strtolower(join('-', $lang_code));
                    $current_q = $lang_quality;
                    break;
                }
            }
            // Wenn wir im strengen Modus sind, die Sprache nicht versuchen zu minimalisieren
            if ($strict_mode)
                break;

            // Den rechtesten Teil des Sprachcodes abschneiden
            array_pop($lang_code);
        }
    }

    return $current_lang;
}

$allowed_langs = array('en', 'de');
$lang = get_lang_from_browser($allowed_langs, 'en', NULL, FALSE);
header('Location: http://' . $_SERVER['HTTP_HOST'] . "/$lang/");

exit();
?>

Sie müssen also lediglich ein neues Theme-Verzeichnis anlegen und den obigen PHP-Quelltext (wenn nötig natürlich noch die erlaubten Sprachen anpassen) in eine Datei namens index.php kopieren.

Danach ist nur noch zusätzlich eine Dummy-Datei style.css mit einigen Infos zum Theme zu erstellen. Ansonsten wird WordPress Ihre Theme nicht erkennen:

/*
Theme Name: Redirect
Theme URI: http://wordpress.org/extend/themes/redirect
Author: AB-WebLog.com
Author URI: http://www.ab-weblog.com
Description: Redirects
Version: 1.0
Tags: redirect
*/

Das war’s: Nachdem Sie diese neue Theme für Ihre Hauptseite “/” ausgewählt haben, wir automatisch jeder Benutzer auf die korrekte Spracheversion basierend auf den Browser-Spracheinstellungen weiter geleitet.

Verwenden auch Sie den Multisite Language Switcher für Ihren Blog?

Spartakiade-Konferenz in Berlin

Ich wurde eingeladen bei der Spartakiade-Konferenz in Berlin als Trainer teilzunehmen.

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!

Windows 8 App Excellence Lab

Heute habe ich an einem Windows 8 App Excellence Lab bei Microsoft in Unterschleißheim nähe München teilgenommen.

Es war sehr interessant mit einem Microsoft-Entwickler über die Anforderungen zu sprechen, die von einer Metry-Style-App für den Windows-8-App-Store erfüllt sein müssen. Es gibt sehr hohe Standards, insbesondere hinsichtlich des Look & Feels der Anwendung.

Zur Zeit möchte ich besonders einen HTML5-basierte Vokabeltrainer fit für Windows 8 machen. Als Ergebnis dieses App Excellence Lab habe ich ein Token erhalten, welches ich für die Registrierung im Windows-8-App-Store vor der offiziellen Start verwenden kann. Zudem ist mit dem Token die Registrierung für zwei Jahre kostenlos.

Haben Sie auch an einem Windows 8 App Excellence Lab teilgenommen?