Web

Cortado-Projektbericht

Making of a HTML5 Cloud Desktop

16.01.2012
Von   


Carsten Mickeleit ist Gründer und Vorstandsvorsitzender der Cortado Holding AG mit seinen Unternehmen ThinPrint GmbH, Teamplace GmbH und Cortado Mobile Solutions GmbH. Seit Gründung seines ersten Unternehmens 1990 - der Carano GmbH - ist er am IT-Markt aktiv, seit 1996 insbesondere im Virtualisierungs/Cloud Computing und seit 2001 im Enterprise Mobility Bereich.

Ist die Zeit reif?

HTML5-Unterstützung im Firefox: Drag and Drop auf dem Cortado Cloud Desktop.
HTML5-Unterstützung im Firefox: Drag and Drop auf dem Cortado Cloud Desktop.
Foto: Cortado AG

Zwar ist HTML5 in aller Munde, aber der Standard noch lange nicht festgelegt. In einer Presseinformation im vergangenen Mai verkündete das World Wide Web Consortium W3C, dass es sich 2014 als Ziel für die Fertigstellung gesetzt habe. Wer jetzt mit der HTML5-Entwicklung startet, wird noch einige "Spezialbehandlungen" implementieren und seinen Kunden bestimmte Browser-Versionen empfehlen müssen. Bei IE6 bis 8 geht gar nichts; der Internet Explorer 9, der schon sehr viel für HTML5 verspricht, hinkt aktuell noch hinter seinen Marktbegleitern hinterher. Man darf gespannt sein, was der Internet Explorer 10 bieten wird. Erste Erfahrungen mit der Windows 8 Beta stimmen bereits sehr positiv in dieser Richtung. Wem es auf Geschwindigkeit ankommt, sollte auf Googles Browser Chrome zurückgreifen. Selbst auf einem schnellen Mac kann er gegenüber dem Safari deutlich punkten.

Es geht!

Trotz der Schwierigkeiten gerade im IE-Umfeld ist eines ganz klar: Mit HTML5 kann man bereits jetzt ausgereifte Lösungen erstellen. Und wer heute bereits erste HTML5- Erfahrungen sammelt, wird in Kürze die Nase vorn haben. Für professionelle Entwickler ist es letztendlich ein Muss, solche Erfahrungen zu sammeln. Nach allem, was sich derzeit abzeichnet, wird die Nachfrage nach HTML5-Know-how in den kommenden Monante massiv steigen.

Eingesetzte Tools

Im folgenden möchte ich kurz die Tools vorstellen, die während der Entwicklung des Cloud Desktops zum Einsatz kamen. Ein wichtiges Hilfsmittel zur HTML5-Entwicklung stellte die JavaScript-Bibliothek "Modernizr" dar. Diese prüft die Verfügbarkeit von HTML5-Features im verwendeten Browser und bietet im Falle eines nicht unterstützten Features alternative Darstellungen an. Ein Beispiel dafür ist der Drag-and-Drop-Upload, der von Internet Explorer und Safari jedoch nicht unterstützt wird (hier kommt der herkömmliche Upload-Dilaog via Explorer zum Einsatz).

Einen guten Überblick gibt die Featureliste von Modernizr. Aber aufgepasst! Jeder Automatismus hat auch seine Grenzen. So wollten wir testen, inwieweit unser HTML5-Cloud-Desktop bereits auf Windows Phone 7.5 angezeigt werden kann. Das Ergebnis: gar nicht. Letztendlich stellte sich aber heraus, dass der Modernizr Windows Phone noch nicht kannte und deshalb unser Desktop nicht sichtbar war. Neben dem Modernizr hat sich im Rahmen des Projektes auch gezeigt, das JQuery wichtiger ist denn je, um beispielsweise browserübergreifendes Drag-and-Drop zu ermöglichen.

Auf dem Event Google I/O 2010 erhielten wir dann noch den Tipp zu Aptana, das sich als sehr funktional erwiesen hat. Unsere Entwickler nehmen das Aptana Eclipse Plugin, unsere Designer das Aptana Studio.

Design und Usability

So sah der Logout-Dialog in der alten Version aus...
So sah der Logout-Dialog in der alten Version aus...
Foto: Cortado AG

Der Anspruch des Cloud-Desktops könnte somit für ein HTML5-Projekt kaum höher gesetzt werden. Unser Ziel war es, dem Anwender eine vollständige Desktop-Experience zu bieten, der Cloud-Desktop soll die ideale Plattform sein, um den Trends von ByoD und Consumerization zu entsprechen und das auf allen Plattformen, die durch unsere nativen Clients nicht bereits abgedeckt werden.

... und so in der finalen Fassung mit HTML5.
... und so in der finalen Fassung mit HTML5.
Foto: Cortado AG

Doch nützt das beste Design nichts, wenn der Anwender es nicht bedienen kann. Deshalb ging der HTML5-Cloud-Desktop erst einmal in die interne Betaversion, um das Feedback der ersten Anwender einzuholen. Ergebnis der ersten Feedbackrunde: der Logout-Dialog, den wir selbst noch sinnvoll und schön fanden, verschwand.