Eine der dringensten Fragen, die Entwicklungsprofis aus Großunternehmen an uns Evangelisten im Rahmen von Windows 8 Events herantragen, ist die der App-Verteilung: Der allgemeine Consumer erhält seine Apps ausschließlich aus dem Windows Marketplace, wo Apps durch Microsoft geprüft und zertifiziert werden. Ähnlich wie auf anderen Plattformen kann die App dort verkauft werden – Microsoft behält dann einen Prozentsatz des Erlöses zur Refinanzierung der Marketplace-Infrastruktur ein. Wer sich jedoch um die Abwicklung von Kundendaten selbst kümmern möchte, kann das gerne tun – in diesem Fall würde der Entwickler die App kostenfrei im Marketplace einstellen und mit Accounts arbeiten, um Nutzer zur Zahlung zu zwingen.

Es ist jedoch offensichtlich, dass einzelne Anwendungen innerhalb des Unternehmens bleiben sollten – und ohne Marketplace auf tausenden Unternehmensrechner installiert werden müssen. Ein neuer Blog Post auf MSDN beschreibt recht detailliert, wie dieser Prozess funktioniert – und wie IT-Admins in der Lage sind, App Packages ohne den Markeplace auf Geräten im Unternehmen zu deployen. Fakt ist: Es geht.

Wir Microsoft Evangelisten touren gerade durch Deutschland, um Entwicklern vorzuführen und zu vermitteln, wie die Entwicklung einer Metro App für Windows 8 in der Praxis aussieht. Dafür bauen wir eine Beispiel-Applikation Schritt für Schritt und können so im Detail auf altbekannte und neue APIs eingehen. Die Sessions sind kostenfrei und laufen noch einige Wochen — mehr Informationen darüber findet man unter www.devcamps.ms. Wer sich für die Materialien interessiert, findet diese für HTML5/JS hier und für C#/XAML hier. Ein wichtiger Hinweis jedoch: Diese Links haben ein Mindesthaltbarkeitsdatum bis zum 28. April, danach können die Materialien jederzweit wieder offline genommen werden.

Mit dem nahenden Windows 8 gibt es seitens Microsoft ein stärkeres Investment in die Cloud Storage-Lösung SkyDrive, die jetzt nicht nur mit einer ganzen Palette an neuen Apps aufwartet, sondern auch ein neues Preismodell beinhaltet. Die Apps erweitern den Funktionsumfang dramatisch und sind für Windows und Windows Phone sowie OS X und iOS verfügbar. Anwender dürften sich darüber freuen, dass auch endlich eine Integration in den Explorer vorhanden ist. Was das Preismodell betrifft, so hatte man nun ausreichend Zeit, festzustellen, was der durchschnittliche Nutzer benötigt. Auch wenn die Zahl krum sein mag: Anscheinend benötigen mehr als 99 Prozent aller Nutzer weniger als sieben Gigabyte, weshalb SkyDrive in Zukunft kostenfrei sieben Gigabyte anbieten wird. Fairerweise waren es in den vergangenen Monaten jedoch 25 Gigabyte, die angeboten wurden – diese werden Nutzern nicht weggenommen. Wer mehr als vier Gigabyte Daten auf seinem Account hat, wurde automatisch für einen kostenfreien 25-Account angemeldet, der auch in Zukunft über 25 GB verfügen wird. Wer bereits einen Account hat, aber weniger Daten gespeichert hat, kann sich hier ebenfalls für einen kostenfreien 25-Account anmelden.

Links zu den neuen Apps sowie eine Übersicht über das Preismodell finden sich auf diesem Blogeintrag.

Herzlichen Dank noch mal an alle Teilnahmer des Windows 8 Camps in Köln — ich und ganz Microsoft freut sich über das Interesse am kommenden Betriebssystem. Die heute verwendeten Folien können Sie hier im PDF-Format herunterladen, benötigen aber zur Öffnung das während des Camps erwähnte Passwort.

Wenige Wochen nach Veröffentlichung der Consumer Preview von Windows 8 und größerer Verfügbarkeit von Informationen rund um die nächste große Version des Betriebssystems erhalte ich von vielen iOS– und Web-Entwicklern Anfragen, wie eine App-Portierung bestehender iOS– oder Web-Apps aussehen könnte. Auch Windows Phone-Entwickler, die schon mit der Metro Designsprache vertraut sind, würden gerne schon mal loslegen. Wer gezielte Informationen zur Portierung sucht, findet bei dev.windows.com bereits umfangreiche Guides in englischer Sprache:

• Guide: iPad App to Metro Style App
• Guide: Website to Metro Style App (Fokus auf UX/UI)
• Migrating a Web App to Metro Style app (Fokus auf Entwicklung)
• Migrating a Windows Phone 7 App to Metro Style app (XAML)
• Migrating a Windows Phone 7 App to Metro Style app (JavaScript)

   

Der Multimediatreff ist bei umtriebigen Technologiefreunden bereits als großartige Konferenz mit wechselnden Themen bekannt und in der 30. Ausgabe am 25. und 26. Mai im Kölner Mediapark kümmert man sich um Mobile Apps. Am ersten Tag stehen Vorträge rund um iOS, Andoid und Windows Phone auf dem Programm, inklusive traditioneller Pizzaschlacht, Networking und gewohnt spannenden Gesprächen.

Besonders hinweisen möchte ich auf den Windows Phone Workshop am zweiten Tag, in dem wir zusammen mit Nokia nicht nur stolze 150 Telefone für Entwickler mitbringen, sondern auch einen umfangreichen Kickstart in die Windows Phone-Entwicklung geben – inklusive einem Blick unter die Haube. Die Anmeldung für den ersten Tag kostet 69 Euro, der zweite Workshoptag ist komplett kostenfrei.

Während HTML5 mit IndexedDB einen Standard in Vorbereitung hat, der eine Datenbank-ähnliche Speicherung ermöglichen soll, war Alon Zakai mit SQL.js fleißig und hat eine SQLite-Variante geschaffen, die komplett in JS läuft. Eine Demo-Seite zeigt das Skript im Einsatz, die Nutzung könnte simpler nicht sein – mit einem einfachen Befehl kann eine Datenbank angelegt werden, ein weiterer Befehl nicht SQL-Befehle entgegen.

SQL.js wurde via Emscripten von C nach JavaScript portiert, weshalb hinter Performance und Nutzen das ein oder andere Fragenzeichen setzen darf – man kann sich aber mit Leichtigkeit Projekte vorstellen, für die SQL.js durchaus geeignet wäre.

Nicht nur die CeBit rückt immer näher, auch die Consumer Preview von Windows 8 wird in den kommenden Tagen erscheinen. Ein wunderbarer Zeitpunkt, Werbung für einen umfangreichen Windows 8-Workshop zu machen, den ich zusammen mit meinem Kollegen Gunter Logemann im Rahmen der CeBit anbieten werde.

In insgesamt fünf Sessions á verdaulicher 30 Minuten stellen wir die Grundkonzepte der Technik und des Designs sowie eine Einführung in die Entwicklung vor – ein praktischer Kickstart für alle Devs, die sich fit für Windows 8 machen wollen.

Der Workshop wird insgesamt neun Mal angeboten – jeweils täglich von 9:30 – 12:00 Uhr sowie von 13:30 bis 16:00 Uhr (nur am Donnerstag sind wir auf den Vormittag beschränkt). Das Angebot ist kostenfrei, das notwendige CeBit-Ticket gibt es direkt kostenlos dazu. Das Platzkontingent ist begrenzt, wer Interesse hat, sollte nicht lange fackeln. Hier geht es direkt zur Anmeldung.

Google Wave war offensichtlich kein Erfolg, eine Funktion sorgte aber bei zahlreichen Entwicklern für Beeindruckung: Anstelle eines Submit-Buttons konnten sämtliche Anwender zusammen in einem Textfeld tippen und gleichzeitig live sehen, was die anderen Anwender treiben. Kurz: Live Concurrency mit JavaScript.

Joseph Gentle, einer der Google Wave-Entwickler, hat mit ShareJS nun eine Bibliothek veröffentlicht, mit der diese Live Concurrency realisiert werden kann. Wo in vielen Anwendungen bislang ein Submit-Button die einzige Möglichkeit war, die Daten an den Server und somit an andere Teilnehmer zu senden, kann mit ShareJS jedes eingegebene Zeichen direkt übertragen werden. Wer sich noch an Etherpad (hier ein Nachfolger) erinnert, welches ein ähnliches Konzept verfolgte, wird beeindruckt sein, dass mit ShareJS dieselbe Funktionalität mit nur vier Zeilen Code realisiert werden kann.

Da ShareJS auch mit anderen Objekten, also beispielsweise einfachen JSON-Arrays, zusammenarbeitet, lassen sich mit ShareJS auch abgefahrene Demos realisieren – als Beispiel wird ein Hexagon-Spiel gezeigt, in dem der Spielstand über einfache Arrays übertragen wird.

Eine wirklich gute Tat für alle Entwickler, die gerade eine App für Windows Phone oder gar schon Windows 8 entwickeln: Ein Designer, der unter dem Pseudonym Templarian auftritt, hat ganze 437 Icons im Metro-Design veröffentlicht. Die Icons wurden unter der Creative Commons 3.0-Lizenz veröffentlicht und können ohne Autorennennung und sogar für kommerzielle Produkte verwendet werden. Grafiken in der Windows Phone-AppBar-Größe 48x48 Pixel sind bereits enthalten, andere Zwecke wie beispielsweise Windows 8 können von den mitgelieferten Vektor-Dateien gebrauch machen. Designer, die ihre eigenen Icons gerne mit anderen teilen würden, sind aufgerufen, diese einfach beizusteuern. Umso größer das Paket wird, umso sinnvoller ist es für alle. Wer die Icons massiv einsetzt, sollte anstandshalber Gebrauch von dem Donate-Button machen und dem guten Mann einen Kaffee ausgeben.

Hier mal ein Framework, das für Staunen in der .NET-Community sorgen dürfte: Das Team um IL2JS hat es geschafft, eine .NET Virtual Machine in JavaScript zu entwickeln. Diese erlaubt nach Einbindung Entwicklern, .NET-Code (also etwa in C#) auf HTML-Seiten zu verwenden. Im Klartext: Wer JavaScript doof findet, kann auf seinen Webseiten stattdessen .NET verwenden. Über die Sinnhaftigkeit einer solchen Aktion kann ein anderes mal gestritten werden, denn das Gelingen dieses Vorhabens ist beeindruckend.

Die Nutzung ist vergleichsweise simpel: Oben wird .NET-Code reingekippt, IL2JS erzeugt aus den .NET DLL-Dateien automatisch HTML-, CSS– und JS-Dateien. Obwohl man sich auf C# konzentriert, können auch andere .NET-Sprachen verwendet werden ((J#, VB.NET, Boo, Nemerle, etc.). Auf JS-Seite holt sich das Projekt Unterstützung von Prototype.js, was in IL2JS-Projekte eingebunden werden muss. Unterstützt werden sämtliche größeren Browser und Render-Engines, Probleme gibt es nur mit Versionen älter als Firefox 3, IE7 oder Opera 9.6.

Source Code soll schon bald als Open Source veröffentlicht werden, die Zuweisung einer Lizenz steht noch aus. Interessant ist das Projekt allemal, auch wenn ich den Einsatz nicht unbedingt empfehlen mag. Mehr Informationen nebst Starter Kit und Tutorials finden sich direkt auf der Projekthomepage.

Freunde, Webdesinger, Entwickler – lasst uns feiern. Wer den neusten Zahlen von Net Applications trauen möchte, kann sich darüber freuen, dass nun weniger als ein Prozent aller US-Internetnutzer auf den Internet Explorer 6 setzen. Damit reihen sich die Vereinigten Staaten in den stolzen Elite-Kreis, der bislang aus Österreich, Polen, Schweden, Dänemark, Finnland und Norwegen bestand. Ebenfalls hinzugekommen sind Tschechische Republik, Mexiko, Ukraine, Portugal und die Philippinen. Ja, die Skandinavier waren mal wieder in einem internationalen Rating besser als wir. Im Dezember 2011 hatte der IE6 so also einen weltweiten Marktanteil von 7,7 Prozent. Meiner Meinung nach ausreichend wenig, um das Ding in Zukunft einfach zu ignorieren – wer heute eine Webseite entwickelt, sollte sich keine Gedanken mehr darum machen, wie die Seite im alten Internet Explorer aussieht (es sei denn, in der eigenen Zielgruppe ist der Marktanteil deutlich höher).

Wer noch irgendjemanden kennt, der auf das Ding setzt, kann die gute Tat des Tages vollbringen und auf IE9 hinweisen (oder einen anderen Browser). Wer einfach mal in die Zukunft schnuppern mag, kann auch die aktuellen Previews von IE10 antesten, die gibt es momentan aber nur in Verbindung mit der Preview von Windows 8.

Wer das Internet lieb hat, ist vermutlich SOPA-Gegner. Wer das nun auch nach außen hin zeigen und auf die Problematik aufmerksam machen möchte, kann ein kleines Skript namens SOPA-Blackout auf seiner Webseite einbinden: Es schwärzt die komplette Seite und stellt einen Informationstext zu SOPA dar; nach einem Klick wird der angezeigte Layer unsichtbar geschaltet und die eigentliche Seite sichtbar.

Kaum ein Gesetzesentwurf hat so viel Internet-Entrüstung ausgelöst wie die Anti-Piraterie-Legislatur SOPA: Der Stop Online Piracy Act es amerikanischen Copyright-Inhabern ermöglichen, die Verbreitung urheberrechtlich geschützter Inhalte wirksam zu behinden. Zum Ärger zahlreicher Internet-Nutzer soll SOPA im Fall der Fälle recht tief in die Struktu des Internets eingreifen: Sollte der Entwurf Gesetz werden, könnten laut US-Recht nicht nur Domains gesperrt werden, die Urheberrechtsverletzungen begehen, sondern auch Unternehmen, die irgendwie mit dieser Seite koopierieren — etwa durch das Anbieten eines Bezahlsystems oder der Auflistung in einer eignene Suchmaschine. Dieser Theorie zufolge wären Seiten wie YouTube, Wikipedia und Facebook vor ein ernstes Problem gestellt, weshalb die Liste der Gegner des Entwurfes immer länger wird: Google, Facebook und Twitter gehören zu den prominenten Gegnern. Mehr Informationen findet man in einem schön geschriebenen Artikel der FAZ.

Bild: kalexanderson

Wer schon immer mal einen Blick hinter die Kulissen einer Analyse von schadhaftem JavaScript-Code werfen wollte, findet bei PandaSecurity einen hervorragend geschriebenen Artikel, der sämtliche Schritte aufzeigt: Wie die bösen Buben einer automatischen Erkennung entgehen, indem sie Funktionen in Kleinstarbeit zusammensetzen lassen oder wie so ein Script passend zur Software des Opfers den richtigen Exploit auswählt. Ein spannender Artikel, der für jeden JavaScript-Entwickler interessant sein dürfte.

Webdesigner verbringen ihr täglich Brot damit, funktionierende bis großartige Webseiten zu entwickeln — immer öfter auch Applikationen, die sich lediglich im Browser verstecken, mit einer einfachen Seite nichts mehr gemein haben. Es ist also nicht weiter überraschend, dass sich im Netz zahlreiche Web Apps finden, die die Entwicklung einer Webseite oder einer Applikation vom Konzept bis zum Launch unterstützen. Hier eine kleine Auflistung:

Typographie

• Samuel L Lipsum — Schon wegen des Namens ein Liebling
• Lipsum  - Der Klassiker der Lorem Ipsum-Generatoren
• Fillerati - Wem Lorem Ipsum nicht gefällt, findet hier englischen Blindtext aus Literatur
• CSS Typeset — Ein WYSIWYG-Editor für Typographie, der den passenden CSS-Code mitgeneriert
• Awesome Fontstacks — Erstellt vollautomatisch FontStacks mit passendem CSS — für ausgefallene und auch auf älteren Browsern funktionierende Typographie
• Typechart - Eine Art Katalog für Schriftarten mit CSS-Auswahl

CSS

• Sprite Generator — Erstellt automatisch schnell ladende Sprites mit dazugehörigem CSS
• Spritebox - Erstellt ebenfalls Sprites
• SpriteCow - Ebenfalls Sprites
• CSS3Playground — Mit einfachen Reglern mit CSS3-Features spielen
• GoldenRatioCalculator — Berechnet automatisch den goldenen Schnitt für vorgegebene Werte
• CSS Scrubber - Minimiert CSS-Dateigröße, indem unnötige und doppelte Einträge entfernt werden

Grids & Frameworks

• 960 -  Der Klassiker unter den Grids
• 978 - Rivale/Nachfolger zu 960
• 1140 - Grid-System für Webseiten, die sich an Auflösungen jenseits 1280px Breite richten
• HTML5Boilerplate - Der Standard, um bei HTML5-Entwicklung für Webseiten direkt loszulegen
• BlueprintCSS - Ein weiterer Klassiker unter den Frameworks
• Zurb Grid Builder — Erstellt Grids “on the fly”
• GridCalc - Berchnet Grid-Größen mit Schriftgrößen
• Gridinator - Erstellt ebenfalls Grids “on the fly”

Farben

• ColorLovers - Beeindruckend schöne Paletten
• GradientGenerator - Erstellt CSS-Farbverläufe, auf Wunsch auch sehr komplexe
• Kuler - Der Web-Farb-Profi von Adobe
• Color Palette Generator — Bild rein, Palette raus
• ColorSchemeDesigner - Gestaltet interaktiv Paletten
• 0to255 - Wer ein bisschen Farbauswahl braucht, findet hier Hilfe

Auch gut

• LoremPixel — Erstellt schnell und einfach Platzhalter-Bilder

• Gridinator - Erstellt ebenfalls Grids “on the fly”

Im ersten Teil dieser zweiteiligen Serie haben wir uns die HTML5-Features angesehen, die die Entwicklung von Formularen dramatisch vereinfachen. Vertreten waren diverse Input Types, Platzhalter, Validierung und Autovervollständigung. Im zweiten Teil wollen wir einen Schritt weiter gehen und uns um zwei wichtige Dinge kümmern: Erstens soll ein HTML5-Formular bei fehlendem Support diverser HTML5-Features trotzdem vollständig funktionieren. Zweitens wollen wir uns in die Browser-seitige Validierung einklinken und selbst den Ton angeben, was bei falschen oder richtigen Eingaben zu tun ist.

HTML5-Support mit Modernizr antesten und fehlenden Support nachrüsten

Die in HTML5 für Formulare enthaltenen Funktionen sind nicht vollständig neu, man hat lediglich auf eigene JS-Frameworks wie jQuery zurückgegriffen, um die ein oder andere coole Funktion zu verwenden. Es gibt gute Gründe, ein Formular mit HTML5 zu entwickeln, jedoch möchten wir, dass derartige Formulare auch in älteren Browsern vollständig funktionieren. Wir greifen deshalb auf Modernizr zurück: Das Framework gibt uns einen Werkzeugkasten, mit dem wir die Verfügbarkeit nahezu aller HTML5-Features antesten können. Sollte etwas fehlen, kann JS-Code ausgeführt werden — in unserem Fall werden wir ein so genanntes Polyfill (JS-seitige Nachrüstung des fehlenden Supports) oder ein Fallback (Formular-Realisierung mit jQuery) verwenden, falls etwas fehlt.

Fehlenden Support nachrüsten

Input Types sind zum Glück von Haus aus auch für ältere Browser verständlich — Browser, die für den Type “Datum” keinen Minikalender mitbringen, zeigen ein einfaches Textfeld an, das eine Datumseingabe akzeptiert. Wir können mit Modernizr leider noch nicht überprüfen, ob ein solcher Datepicker angezeigt wird.

Anders sieht es bei der Validierung aus. Wir können mit Modernizr überprüfen, ob die einzelnen Validierungstypen bekannt sind und im Zweifelsfall eigenes JavaScript ausführen. Zunächst muss das Skript im HTML-Head eingefügt werden. Dann können wir feststellen, ob der Browser des Besuchers z.B. die Typen url und email unterstützt. Falls ja, dann laden wir bingo.js — falls nicht, nutzen wir einen Polyfill. Für Formulare gibt es momentan eine größere Auswahl an Polyfill-Bibliotheken. Recht ausgereift ist etwa die Webshims Library, die auf jQuery zurückgreift. Ähnlich ist das Vorgehen auch für weitere Formular-HTML5-Funktionen, also etwa Platzhalter oder Autovervollständigung. Für das untenstehende Beispiel müssen jQuery, Webshims und Modernizr eingebunden werden, jeweils über deren Skriptdateien.

Modernizr.load({
  test: Modernirz.url && Modernirz.email,
  yep : 'bingo.js',
  nope: function () {
	$.webshims.polyfill('forms');
  }
});

Validierung beeinflussen

Fangen wir mit einer Frage an, die vielen Webdisgnern auf der Zunge liegen dürfte: Wie lassen sich die nun durch den Browser dargestellten Fehlermeldungen, die bei einer inkorrekten Formular-Eingabe angezeigt werden, anpassen? Die Antwort ist simpel: Obwohl WebKit (Chrome, Safari) einige CSS-Klassen bereitstellt (und Firefox immerhin für den Inhalt einer Fehlerbox) kann man nur davon abraten, die Meldungen anzupassen. Es ist der Benutzerfreundlichkeit zutragend, dass Fehlermeldungen über alle Seiten hinweg gleich aussehen — bislang geschieht die Formularüberprüfung über Seiten hinweg ganz nach Gusto des jweiligen Designers. Doch ich schweife ab: Mit dem “Constraint Validation API” können wir programmatisch Informationen über die Validität abfragen und entsprechend reagieren. Eine volle Liste der bisher verfügbaren API-Features findet sich direkt bei W3C. In einem einfachen Beispiel möchte ich anstelle der vom Browser beigesteuerten Fehlermeldungen Hilfestellungen geben, falls der in einem Alters-Feld eingetragene Wert zu klein ist. Dafür benutze ich “element.validity.rangeUnderflow” — ist dieser Wert “true”, dann ist der eingegebene Wert kleiner als die von mir verlangerte 16.

function check(input) {
if(input.validity.rangeUnderflow){
input.setCustomValidity("Entschuldigung, aber'" + input.value + "'ist für die Registrierung auf dieser Seite zu jung. Du kannst jedoch einen Elternteil bitten, sich für dich anzumelden.");
}
else {
input.setCustomValidity("");
}
}

Ähnlich kann man auch mit anderen Fehlermeldungstypen verfahren (etwa validity.valueMissing, validity.tooLong oder validity.patternMismatch).

Update

Alexander Tarkas, der Kopf hinter Webshims, war noch so nett, mir einen Tipp in Reaktion auf diesen kurzen Post zu schicken: Wer wirklich nur den Polyfill durchführen und nicht noch zusätzlich eigene JavaScript-Abschnitte ausführen möchte, kann auf eine deutlich kürzere Schreibweise zurückgreifen und nur $.webshims.polyfill(‘forms’); verwenden. Zusätzlich erlaubt Webshims auch, die im zweiten Abschnitt geschriebene Validierungs-Erweiterung direkt für alle Browser, also auch für nicht-HTML5-Browser, zu schreiben. Dafür verwendet man anstelle der if-Abfrage für input.validity.rangeUnderflow von einfach $.prop(input, ‘validity’).rangeUnderflow. Herlichen Dank an Alexander!

PhoneGap ist ein Open-Source-Framework, welches die Entwicklung von Apps für Smartphones auf Basis von HTML5 und JavaScript erlaubt — mit nativer Unterstützung der sieben größten Plattformen, sodass im Gegensatz zu simplen Web Apps über iOS, Windows Phone und Android hinweg auf Kamera, GPS, Kontakte, Speicher, Notifications und vieles mehr zugegriffen werden kann. Der kürzlich von Adobe aufgekaufte Hersteller Nitobi schließt so eine Lücke zwischen nativer Entwicklung und Entwicklung mit HTML5, da der Zugriff auf tiefer im System verankerte Dinge wie Sensoren, Systemdaten oder Benutzerdaten bislang für WebApps, die letztendlich im Browser des Geräts laufen mussten, unmöglich war. PhoneGap ermöglicht so auch eine breite Verfügbarkeit einer App auf zahlreichen Plattformen: Die eigentliche App wird einmal geschrieben und kann dank Wrapper nativ für iOS, Android, Windows Phone, Blackberry, Symbian und WebOS realisiert werden.

Seit dem heutigen 19. Dezember ist die Version 1.3 verfügbar, die gerade den Support von nativen Funktionen massiv erweitert — auch für das Windows Phone, auf dem man über Plugins jetzt auch auf sonst eher entfernte Dinge wie Facebook, Bing oder Twitter zugreifen kann. Mit dem neusten Update ist PhoneGap die vermutlich beste Lösung, um plattformübergreifend Apps zu entwickeln.

Wie sieht die Entwicklung konkret aus?

PhoneGap integriert sich als Addon in bestehende Entwicklungsumgebungen, wo sich als Template bzw. Projektvorlagen dann “PhoneGap-Apps” wiederfinden. Diese enthalten bereits das Framework und sind voll einsatzbereit. Diese Projekte (egal, ob man in XCode, Visual Studio oder Eclipse entwickelt) enthalten einen Ordner namens “WWW” — dort kommt dann die eigene App rein. Klingt simpel, ist simpel — über diese Lösung werden die Apps direkt von den Entwicklungsumgebung der einzelnen Hersteller kompiliert, was allerlei Vorteile hat. Einziger Nachteil: Wer seine App für alle Plattformen bereitstellen möchte (und mal im Ernst, warum sollte man das nicht tun), muss zunächst sämtliche Umgebungen installieren. Was kein großes Problem ist, immerhin bieten alle Hersteller ihre Lösungen kostenfrei an - so etwa Apple, Google oder auch Microsoft.

Kickstart

Nicht viele Worte, direkt loslegen? Kein Problem.

1. Du brauchst die Entwicklungsumgebung deiner Wahl (iOS, Android, Blackberry, Windows Phone).
2. Ebenfalls notwendig: PhoneGap
3. Eine Kurzanleitung erklärt die wenigen Schritte zum Template, dessen WWW-Ordner nur noch gefüllt werden muss (iOS, Android, Blackberry, Windows Phone)
4. HTML5-App entwickeln, kompilieren und in App Stores & Marketplaces einstellen

HTML5 bringt eine ganze Reihe an Features mit, die eine Entwicklung von guten Formularen massiv erleichtern, aber gleichzeitig für eine bessere User Experience sorgen. Falls vom Browser unterstützt, können bislang mit JS-Frameworks wie jQuery durchgeführte Aktionen wie Formularüberprüfung, Autovervollständigung, Platzhalter und Feldtypen mit deutlich weniger Code und Overhead realisiert werden. Dieser kurze Artikel und erste Teil zeigt in einfachen Code-Blöcken, wie Formularaktivitäten simpel aktiviert und durchgeführt werden können.

Input Types: Telefonnummer, E-Mail-Adresse oder Datum?

HTML5 unterstützt Input Types, die dem Browser die Information übermitteln, welche Art von Eingabe man erwartet. Verfügbar sind email, url, number, range, date, search, tel und color. Während einige der Typen bereits eine eigene Validierung mitbringen (z.B. email), kann grundsätzlich auch noch ein Pattern angegeben werden, über das in Form von regulären Ausdrücken die Validierung geschieht. Die Nutzung ist beeindruckend einfach — das untenstehende Beispiel hat bereits eine komplette Validierung.

<input type="<span class=" />email" name="email" /> value="Abschicken">

Mit Pattern ist die Validierung ähnlich simpel, in diesem Fall möchte ich nur zwei Buchstaben zulassen:

<input type="<span class=" />text" name="text" pattern="[A-z]{2}">
<input type="<span class=" />submit" value="Abschicken">

Hinzu kommt, dass auf lange Sicht der Browser auch entsprechende Unterstützung in der Eingabe gewährleistet. So bietet Vorreiter Opera für den Input Type “date” bereits einen eigenen Datepicker sowie für den Typ “color” ein aus Photoshop & Co bekanntes Colorwheel an — dies sorgt dafür, dass Anwender in Zukunft ein konsistenteres Interface vorfinden können. Gleiches gilt für die Validierung selbst: Für Anwender, die einen Browser benutzen, sehen Fehlermeldungen und visuelle Hinweise für eine falsche Eingabe über Seiten hinewg gleich aus.

Ebenfalls praktisch: Manche Browser, darunter die aktuelle Preview des IE10 oder Mobile Safari auf dem iPhone passen die Tastatur automatisch der gewünschten Eingabe an. Wenn als Type “tel” vorgegeben wurde, schaltet die Touch-Tastatur automatisch auf die Telefontastatur.

Wer Flexibilität wünscht, kann sich mittels JS übrigens in den kompletten Validierungsprozess einklinken, der standardmäßig bei Drücken des “Submit” ausgeführt wird. Über das DOM steht die Validity-API zur Verfügung, die auch ausführlich Infos gibt — so lassen sich Fehlermeldungen anpassen, Gründe für die scheiternde Validierung abfragen (zu lang, zu kurz, falsche Zeichen?) oder die Überprüfung zu einem beliebigen Zeitpunkt starten. Wie man dort zaubert, werde ich nächste Woche auf diesem Blog zeigen.

Platzhalter, Autofokus & Autoverfollständigung

Bei einem Platzhalter kann man viel falsch machen: Man sollte ihn bei Auswahl eines Feldes nicht manuell löschen müssen, aber er sollte bei Verlassen des Feldes ohne Eingabe wieder auftauchen. Ideal wäre es, wenn er subtil im Hintergrund sichtbar ist, um den Nutzer zu führen. In HTML5 gibt es nun das placeholder-Attribut, welches je nach Browser genau diese Aufgabe übernimmt.

<input type="<span class=" />text" name="text" placeholder="Platzhalter">

Ähnlich komplex ist die Realisierung von Autovervollständigungs-Mechanismen in JavaScript. jQuery & Co haben es einfacher gemacht, aber die HTML5-Lösung ist an Eleganz nicht zu übertreffen: Man legt lediglich eine Liste mit Optionen an und gibt diese Liste einem Input-Feld als Attribut mit:

<input type="<span class=" />text" list="msproducts" autocomplete="on" name="text">
<datalist span="" class="hiddenSpellError" pre="datalist ">id="msproducts"></datalist>
value="Windows 95">
value="Windows 98">
value="Windows 2000">
value="Windows ME">
value="Windows XP">
value="Windows Vista">
value="Windows 7">
value="Windows 8">
value="Flight Simulator">
value="Kinect">
</datalist>

Ebenfalls bislang nur in JavaScript möglich war es, beim Laden einer Seite den Fokus automatisch auf eine Eingabefeld zu legen. Auch hier ist die HTML5-Lösung simpel:

<input type="<span class=" />text" name="text" autofocus>

Ab dem 22. hier auf dieser Seite: Wir klinken uns in die HTML5-Validierung und arbeiten mit Polyfills. Dabei überprüfen wir mithilfe eines Frameworks, welche Features vom aktuellen Browser unterstützt werden — und falls etwas fehlt, helfen wir mit weiteren JS-Bibliotheken nach, um Features doch noch zu aktivieren.