XML-Ecke

Struktur in den Content!

Von der Website zur Web App

Web App im Firefox OS Simulator

Web App im Firefox OS Simulator

Mozilla hat ein Mantra: Wer eine Website gestalten kann, ist auch ein App-Entwickler. Das Open-Source-Projekt will so auch das mobile Web wieder offen machen, es aus den “walled gardens” der Android- und iOS-Welten herausführen. Dieser Blog Post will Anspruch und Wirklichkeit miteinander vergleichen.

Für Apps mit hohen Anforderungen an die Prozessorleistung sind die nativen Apps für ein bestimmtes mobiles Betriebssystem zurzeit noch deutlich leistungsfähiger. Viele Apps aber bereiten lediglich Informationen für die Nutzung auf mobilen Geräten auf – Informationen, wie sie von Websites bislang meist für die Verwendung im Browser und auf Desktop-Geräten bereitgestellt werden. Solche Angebote lassen sich sinnvoll auch als Web-App bereitstellen. Der Vorteil gegenüber der Darstellung im mobilen Browser: Die App kann direkt auf Smartphone-Funktionen wie Kamera oder Geolokalisierung zugreifen und für die Anwendung nutzbar machen.

Das Mozilla-Projekt hat einen relativ einfachen Workflow für die Entwicklung von Web Apps eingerichtet. Eine zentrale Rolle spielt dabei eine einfache JSON-Datei – das Datenaustauschformat der JavaScript Object Notation stellt ähnlich wie XML strukturierte Daten für die Nutzung von Webanwendungen bereit. Bei einer Web-App heißt das App Manifest. Diese JSON-Datei wird mit der Endung .webapp abgespeichert und enthält einige zentrale Daten der App:

{
  "name": "meine App",
  "description": "bei meiner App geht es um das hier...",
  "launch_path": "/index.html",
  "icons": {
    "60": "/images/icon-60.png",
    "64": "/images/icon-64.png",
    "128": "/images/icon-128.png"
  },
  "developer": {
    "name": "mein name",
    "url": "http://meine_website.de"
  },
  "default_locale": "de"
}

Wichtig ist der vollständige Pfad zur Datei mit dem Einstieg zu den Inhalten der Web-Anwendung – es genügt nicht, hier nur das Root-Verzeichnis anzugeben, wie es im Mozilla-Dokument zum Web Manifest angegeben ist.

Das App Manifest von Mozilla ähnelt dem Manifest der Google Extensions, das ebenfalls elementare Daten einer Webanwendung im JSON-Format festhält. Wünschenswert wäre da eine baldige Standardisierung.

Das App Manifest wird auf den Server hochgeladen, ins gleiche Verzeichnis, in dem auch die Daten der Website liegen. Da das App Manifest im Root-Verzeichnis der Website liegt, kann angenommen werden, dass beide vom gleichen Web-Entwickler stammen, was die Sicherheit erhöhen soll. Die App will mit einem Icon auf dem Smartphone-Desktop gestartet werden – mit Blick auf unterschiedliche Systeme kann man hier png-Bildchen in verschiedenen Auflösungen gestalten und im Web Manifest angeben. Eine Anleitung dazu gibt es auch von Mozilla.

Schließlich muss auf dem Server noch eine .htaccess-Datei erstellt oder ergänzt werden, damit der Browser weiß, was er mit dieser merkwürdigen Datei mit der Endung webapp anfangen soll:

AddType application/x-web-app-manifest+json .webapp

Nun kann das App Manifest in einem Validator überprüft werden. Wenn bei dieser Prüfung keine Fehler beanstandet werden, ist die Entwicklung der Web App theoretisch schon abgeschlossen:

Der Firefox OS Validator testet das Web Manifest

Der Firefox OS Validator testet das Web Manifest

Die Web-App soll ähnlich wie eine native App bedient werden, also auf dem mobilen Gerät nicht im Browser-Fenster erscheinen, sondern als eigenständige Anwendung. Dafür sorgt die Web Runtime von Mozilla. Die Funktionen dieser API können entweder in den HTML-Code der beim Start aufgerufenen Webseite eingefügt werden – oder der Web-Designer überlässt das einer Plattform wie Github oder dem Firefox Marketplace. Die Web Runtime installiert das Icon auf den Desktop des Betriebssystems, startet von dort aus die App in einem rahmenlosen Fenster und sorgt dafür, dass Hardware-Funktionen wie die Kamera von der App adressiert werden können. Die Web Runtime ist Bestandteil der Browser-Rendering-Technik Gecko und soll in einer künftigen Version des Firefox-Browsers mit integriert werden.

Damit die App auf Funktionen des Smartphones zugreifen kann, hat Mozilla eine WebAPI bereitgestellt: Dazu gehören eine Vielzahl von JavaScript-Funktionen wie der Zugriff auf Uhrzeit, Geolokalisierung oder Kontakte. Für die volle Einbindung der App ins Smartphone gibt es außerdem die WebActivities – hier fordert die App vom Anwender eine Entscheidung zur ergänzenden Nutzung einer anderen App. Zum Beispiel will die WebActivity “pick” ein Foto haben – der Anwender kann nun entscheiden, ob er ein Foto aus der Sammlung gespeicherter Bilder nimmt oder mit der Kamera ein neues Foto aufnimmt. Um etwa die Geodaten vom Smartphone auszulesen, ruft eine JavaScript-Anweisung die Methode getCurrentPosition() auf, was nur wenige Codezeilen erfordert:

?View Code JAVASCRIPT
var geolocation = document.querySelector("#geolocation"),
            geolocationDisplay = document.querySelector("#geolocation-display");
        if (geolocation && geolocationDisplay) {
            geolocation.onclick = function () {
                navigator.geolocation.getCurrentPosition(function (position) {
                    geolocationDisplay.innerHTML = "<strong>Latitude:</strong> " + position.coords.latitude + ", <strong>Longitude:</strong> " + position.coords.longitude;
                    geolocationDisplay.style.display = "block";
                },
                function (position) {
                    geolocationDisplay.innerHTML = "Failed to get your current location";
                    geolocationDisplay.style.display = "block";
                });
            };
        }

Für die Offline-Nutzung einer Web App kann ein AppCache in die index.html eingebunden werden. Ein Cache Manifest listet die URLs der Dateien auf, die offline bereitgestellt werden sollen. Diese Technik nutzt die Fähigkeiten von HTML5 für das Application Caching.

Das Verhalten der App im Firefox OS von Mozilla kann man im Firefox-Browser mit Hilfe eines Simulators testen. Dieses virtuelle Firefox-Smartphone muss zunächst mit der Maus “entriegelt” werden: Dazu schiebt man den Pfeil nach oben und klickt dann rechts auf das Schloss-Symbol. Mit gedrückter Maustaste kann man nun zwischen den verschiedenen Desktops hin und her blättern und einige der installierten Apps starten. Wenn man dem Simulator die URL der Datei mit dem Web Manifest mitgeteilt hat, wird auch diese App installiert und kann nun in ihrem Verhalten getestet werden.

Dabei zeigt sich, dass der Weg von der Website zur Web App in der Praxis doch etwas länger ist als zunächst gedacht. Beim Versuch, meine mit Joomla 2.5 gestaltete Website www.miramis.de zur App zu machen, zeigt sich, dass sich diese nicht automatisch an das mobile Display anpasst – obwohl ich dafür ein responsives Template nutze. Auf einem iPhone oder einem Android-Smartphone wird so dafür gesorgt, dass die Darstellung der Joomla-Website optimal an das mobile Display angepasst wird. Dieselbe Website in Verbindung mit einem Web Manifest wird im Firefox OS Simulator aber in der großen Desktop-Auflösung dargestellt. Hier ist also die Nutzung eines mobilen Frameworks wie JQuery mobile der sinnvollere Weg – wie das dann im Firefox OS Simulator aussieht, zeigt der Screenshot ganz oben.

Mit JQuery mobile entwickelte Web-Anwendungen unterstützen denn auch die ganze Vielfalt von mobilen Plattformen – von Android über iOS bis Blackberry 10 und Windows Phone. Eine Web App für Firefox OS aber kann das Versprechen einer plattformübergreifenden Nutzung bislang noch nicht einlösen: Sie kann zurzeit nur mit Firefox OS, mit dem Firefox-Browser für Android und mit Firefox-Testversionen Nightly und Aurora gestartet werden. Der Ansatz von Mozilla ist interessant und zukunftsfähig. So hoffe ich, dass er in diesem Jahr zügig weiterentwickelt wird – in Richtung Standardisierung beim Web Manifest und in Richtung einer breiten Plattformunterstützung im Sinne eines rundum offenen Webs.

Posted in Im Lauf der Zeit | Tagged , , , , | Leave a comment

Mobile World Congress 2013: Alle sprechen über HTML5

Der Star in Barcelona war diesmal kein Smartphone und kein Tablet, sondern der Webstandard HTML5. Das begann schon am Vorabend der Messe, als Mozilla seine Smartphones mit Firefox OS vorstellt, eins von Alcatel und eins von ZTE, im überfüllten Gaudí-Saal des Hotel Arts bedrängt von den Fotografen.

mwc_13_3

Firefox OS ist eigentlich gar kein neues Betriebssystem – das Web ist die Plattform. So lautete die Botschaft von Mozilla, die CEO Gary Kovacs mit Seitenhieben auf die kommerzielle Konkurrenz spickte: “Das Internet sollte nie von irgendwelchen Firmen kontrolliert werden!”

mwc_13_4

Interessant war der interne Wettbewerb der Web-Systeme. Auf einem Podium kamen Mitchell Baker von der Mozilla Foundation, Jolla-Chef Marc Dillon und Ubuntu-Gründer  Mark Shuttleworth zusammen. Einig waren sich die drei, wie toll HTML5 ist – etwa Shuttleworth: “HTML5 ist die Zukunft, ist die entscheidende Plattform für Entwickler.” Marc Dillon warb für den MeeGo-Nachfolger Sailfish und attackierte iOS und Android: “We have to tell the people: Get out of the walled gardens, do different things!” HTML5-Apps seien ein entscheidender Schlüssel, um für Vielfalt zu sorgen.

Allerdings ist da auch nicht alles eitel Sonnenschein: Shuttleworth wies darauf hin, dass HTML5 mehr fragmentiert sei, als wir das gerne hätten. Firefox setzt für die Darstellung von Web-Inhalten die Rendering-Engine Gecko ein, während Ubuntu und Sailfish auf Webkit setzen. “Wie läuft denn eine App auf der Basis von Webkit unter Firefox OS?” fragte der Ubuntu-Gründer, mühte sich aber ansonsten um Harmonie: “Ich denke, wir können beide erfolgreich sein”, sagte er zu Baker auf seiner Linken.

mwc_13_1

Am letzten Tag stieg dann tatsächlich noch ein Hackathon auf dem Mobile World Congress. Hier rief der Mozilla-Entwickler Christian Heilmann das Ende des HTML5-Hypes aus. Eine zeitlang sei HTML5 ja als Heilsversprechen für fast alle Leiden betrachtet worden: “Wenn dein Haustier krank ist, mach dir keine Sorgen, HTML5 kann es heilen.” Jede Technologie mache einen solchen Hype-Zyklus durch, aber jetzt “haben wir den Hype hinter uns und angefangen, Sachen zu bauen”.

mwc_13_2

Tatsächlich seien HTML5-Apps schon weiter verbreitet als man denke, denn “viele Apps in den Stores sind einfach HTML5-Apps, die mit Phonegap in native Apps konvertiert worden sind”. In Barcelona präsentierten sich auch andere Anbieter von Lösungen, mit denen sich HTML5-Anwendungen in iOS- oder Android-Apps verwandeln lassen, für Spiele etwa das spanisch-kalifornische Team von Ludei mit dem Slogan: “Wir lieben HTML5-Spiele”.

Heilmann rief dazu auf, beim Design von HTML5-Apps kreativ zu sein und sich nicht an dem gängigen Look and Feel von nativen Apps zu orientieren. Der Erfolg einer Anwendung entscheide sich nicht am ersten Eindruck, sondern daran, wie die App dann tatsächlich genutzt werde.

Posted in Im Lauf der Zeit | Tagged | Leave a comment

Tim Berners-Lee: XML-Techologien sind zentrale Bausteine der Open Web Platform

Tim Berners-Lee auf der Campus Party in Berlin

Die Campus Party Europe hat sich ihr wichtigstes Highlight bis zum Schluss aufgehoben: Tim Berners-Lee, HTML- und HTTP-Pionier, warb auf dem alten Berliner Flughafen Tempelhof für die Open Web Platform und ging dabei auch auf die Rolle der XML-Bausteine ein: „Scalable Vector Graphics ermöglicht euch wirklich nette Dinge mit objektorientierten grafischen Animationen. Und dann ist da natürlich MathML, das wirklich einzigartig ist, um mathematische Dinge darzustellen.

Der grundlegende Baustein der Open Web Platform sei aber HTML5: Damit könne man all die Dinge tun, für die man bisher proprietäre Technologien wie Flash oder Silverlight verwendet habe. Mit HTML5 könne alles miteinander verbunden werden, Text, Video, animierte Grafiken mit Scalable Vector Graphics. „HTML5 ist der Schlüssel für die Open Web Platform.“

Berners-Lee rief dazu auf, keine nativen Apps für mobile Geräte zu programmieren, sondern ausschließlich Web Apps. „Mit Web Apps wird jede Webseite ein kleiner Computer. Webseiten können programmiert werden, Webseiten können miteinander sprechen und sind nicht einfach statische Dokumente.“ Wenn man aber Inhalte in eine native App für ein bestimmtes Betriebssystem packe, gebe es dafür keine URL, zu der man verlinken könne. „Sie ist nicht Teil des Web, nicht Teil des ganzen Diskurses der Menschheit.“

Zur Entwicklung von HTML und HTTP am europäischen Kernforschungszentrum CERN sagte Berners-Lee: „Ich bin kein Genie. Aber es stimmt: Das Web war ein guter Hack.“

Posted in Im Lauf der Zeit | Tagged , , , | Leave a comment

Firefox 11: Operation am offenen CSS

Firefox 11 CSS Editor

Mit der neuen Version des Mozilla Browsers bekommen Web-Designer einen nützlichen CSS-Editor in die Hand: Bei den Extras für Web-Entwickler findet sich der Eintrag Stil-Bearbeitung, mit dem sich ein zusätzliches Fenster für alle CSS-Anweisungen zu der gerade im Browser gezeigten Webseite öffnet. Angezeigt werden alle internen und externen Stylesheets mit der Anzahl der jeweils darin enthaltenen Regeln. In diesen kann man nun nach Belieben Änderungen vornehmen – das Ergebnis wird sofort im Browser angezeigt. Hier wurde etwa kurzerhand die Hintergrundfarbe von Grün in Orange geändert:

Firefox 11 CSS Editor Will man Änderungen dauerhaft behalten, kann man die aktualisierte CSS-Datei speichern, um sie dann auf den Server hochzuladen. “It’s a quick and easy way to iterate and test designs on a website”, erklärt das Mozilla-Projekt in einem Blog-Beitrag.

Ziemlich cool ist ein weiteres Tool, das die Struktur einer Website in einem 3D-Modell darstellt, das sich beliebig drehen, skalieren und von allen Seiten anschauen lässt:

Firefox Inspector

Dieser Page Inspector 3D wird ebenfalls über das Menü Extras, Web-Entwickler aufgerufen. Wählt man den Eintrag Untersuchen aus, finden sich unten rechts im Browserfenster drei Schaltflächen für 3D, HTML und Style. Wählt man 3D wird das DOM (Document Object Model) der Webseite dargestellt, in einem Canvas-Element mit HTML5, um das 3D-Rendering kümmert sich die JavaScript API WebGL. Klickt man auf einzelne Platten des Schichtenmodells wird am unteren Bildschirmrand angezeigt, um welchen Knoten in der DOM-Baumstruktur es sich dabei handelt.

Posted in Im Lauf der Zeit | Tagged , , | 1 Comment