Web-Apps entwickeln mit HTML, CSS3 und JavaScript

![More Application on Mobile [Konvertiert]](https://images.t3n.de/magazin/wp-content/uploads/2011/11/tec_web_apps_bild.jpg?class=content)
Foto: kimberrywood/iStock
Die Entwicklung kann dabei auf verschiedene Arten erfolgen: Entweder entwickelt man eine Web-App programmatisch und hat die volle Kontrolle über den Quellcode. Oder man verwendet Frameworks, die durch ihre vordefinierten Templates und Funktionen die Entwicklung erheblich erleichtern (können).
Web-App in Handarbeit
Ein Vorteil der Web-App-Programmierung ist der einfache Einstieg für Web-Entwickler, da sie keine neue Programmiersprache erlernen müssen, sondern ihr bisheriges Wissen in die Entwicklung einer mobilen Website einfließen lassen können. So sieht eine einfache App, die ein Bild und eine Überschrift anzeigt, kaum anders aus als eine herkömmliche HTML-Seite. Allerdings wird diese später auch offline verfügbar sein.
Only for iPhone
Ruft man diese Website mit dem iPhone (ab iOS 3.0) auf, so wird, während die Inhalte
der Startseite geladen werden, ein so genannter Splashscreen, also ein
Lade-Bild, angezeigt („apple-touch-startup-image“). Das Meta-Tag „viewport“
legt die Auflösung fest, mit der die Seite vom Browser gerendert werden
soll. Im Beispiel soll die Auflösung des Geräts verwendet werden. Zusätzlich
wird die initiale Skalierung der Seite festgelegt und ob der Inhalt der
Seite durch den User skaliert werden darf (etwa durch „Pinch to Zoom“).
Eine einfache Web-App
<?xml version=„1.0“ encoding=„utf-8“?> <!DOCTYPE html> <html manifest=„config/cache.manifest“> <head> <title>A simple Web-App</title> <meta name=„viewport“ content=„width=device-width, initial-scale=1.0, user-scalable=no“ /> <meta name=„apple-mobile-web-app-capable“ content=„yes“ /> <meta name=„apple-mobile-web-app-status-bar-style“ content=„black“ /> <link rel=„apple-touch-icon“ href=„images/icon.png“ /> <link rel=„apple-touch-startup-image“ href=„images/splashscreen.png“ /> <link rel=„stylesheet“ href=„css/simple.css“ type=„text/css“ media=„screen,mobile“ /> <script type=„text/javascript“ xsrc=„js/simple.js“></script> </head> <body> <header> <h1>Eine einfache Web-App</h1> </header> <section id=„content“> <img xsrc=„images/picture.jpg“ /> </section> </body> </html>
Listing 1
Die drei Meta-Tags in Listing 1 werden derzeit nur von iOS interpretiert. Alle anderen mobilen Betriebssysteme ignorieren diese Tags, sodass sich keine Komplikationen dadurch ergeben.
Setzt man das Attribut „content“ beim Meta-Tag „apple-mobile-web-app-capable“ auf „yes“, so wird die Web-App nach dem Aufruf über den Homescreen im Vollbild-Modus ohne Browser-Leiste angezeigt. „apple-mobile-web-app-status-bar-style“ definiert das Aussehen der Status-Leiste und kann einen der folgenden Werte annehmen:
- default (grau)
- black (schwarz)
- black-translucent (schwarz, transparent)
App-Icon
Um die Web-App mit dem Homescreen des iPhones zu verknüpfen, wird ein Icon in der Größe 114×114 Pixel im Format PNG benötigt. An dieser Stelle besteht die Möglichkeit, mehrere „apple-touch-icons“ mit unterschiedlichen Größen anzugeben. Für das Beispiel wird die Icon-Größe des iPhone 4 verwendet, da die älteren iPhones dieses Icon in einer akzeptablen Qualität herunterrechnen können.
Android unterstützt App-Icons ab Version 2.1, das passende Tag heißt „apple-touch-icon-precomposed“. Wird ausschließlich dieses Tag verwendet, stellt das iPhone das App-Icon allerdings ohne die Standard-Effekte wie abgerundete Ecken, Schattierungen und Reflexionen dar; das Icon gilt dann als „precomposed“.
Icon für Android
<link rel=„apple-touch-icon-precomposed“ href=„icon_android.png“ />
Listing 2
Offline arbeiten
Eine wichtige Eigenschaft von Web-Apps ist es, Inhalte auch offline verfügbar machen zu können. HTML5 stellt Webseiten dafür einen sogenannten Application Cache zur Verfügung, mit dessen Hilfe Inhalte auch ohne Netzverbindung verwendet werden können. Die Einbindung dieses Caches ist recht einfach, da es sich hierbei um ein Manifest handelt, das in Form einer Textdatei vorliegen muss.
Application-Cache-Manifest
CACHE MANIFEST # 2011-10-26 Version 1.0 CACHE: index.html css/simple.css js/simple.js images/splashscreen.png images/picture.jpg NETWORK: FALLBACK: *.html /offline.html
Listing 3
Im CACHE-Bereich des Manifests werden alle Ressourcen angegeben, die vom Browser zwischengespeichert werden sollen. Unter NETWORK werden alle Ressourcen aufgelistet, die nicht speicherbar sind. Dazu zählen etwa Schnittstellen wie jene der Twitter-API. Sollten bestimmte Resourcen nicht verfügbar sein, so können im FALLBACK-Bereich Alternativen festgelegt werden. Im Beispiel wird festgelegt, dass für jede nicht vorhandene HTML-Seite die Datei „offline.html“ angezeigt werden soll.
Der Application Cache wird durch das Attribut „manifest“, das den Pfad zum Manifest enthält, im HTML-Tag aktiviert. Damit der Browser das Cache-Manifest interpretieren kann, muss dieses mit dem MIME-Type „text/cache-manifest“ vom Server ausgeliefert werden.
Cache aktualisieren
Um den Cache einer Web-App zu aktualisieren, leert der Benutzer entweder den Browser-Cache oder der Inhalt des Cache-Manifests ändert sich. Es reicht also nicht aus, dass sich der Inhalt einer Datei ändert. Im Beispiel-Manifest wird deshalb ein Datum und eine Versionsnummer in Form eines Kommentars verwendet. Ändert sich eine Datei, reicht es, im Manifest das Datum und die Version anzupassen, um der Web-App Änderungen mitzuteilen.
Design, Layout und UX
Um der Web-App einen nativen App-Look zu verpassen, kommen diverse CSS3-Eigenschaften zum Einsatz. CSS3 erfährt eine breite Unterstützung unter den mobilen Browsern, daher stellt es für Web-App-Entwickler ein äußerst nützliches Werkzeug dar. Einige der Eigenschaften im Überblick:
- Eigene Schriftarten in eine Webseite zu integrieren ist eigentlich kein neues Feature von CSS3, denn „@font-face“ wurde bereits mit CSS2 eingeführt. In der neuen Version unterstützt „@font-face“ jedoch beliebige TrueType- oder OpenType-Schriftarten.
TrueType- und OpenType-Schriftarten mit CSS3
@font-face { font-family: Monospace; src: url('fonts/own_monospace.otf'); }
Listing 4
- Dank CSS3 können Texte und Boxen mit einem Schatten versehen werden, ohne dafür spezielle Grafiken laden zu müssen. Das Rendering der Schatten ist allerdings sehr rechenintensiv, daher sollte sparsam mit diesen optischen Elementen umgegangen werden.
Schatten mit CSS3
/* Die erzeugten Schatten sind nach oben und rechts je zwei Pixel breit. Der dritte * Parameter bestimmt den Blur-Effekt, der letzte die Farbe des Schattens. */ box-shadow: 2px 2px 2px #000; text-shadow: 2px 2px 2px #000;
Listing 5
- Auch abgerundete Kanten und Verläufe können mit CSS3-Bordmitteln realisiert werden. Aufgrund der neuen Tags sind auch hier die Grafiken überflüssig, was die Performance verbessert und damit die Ladezeit verkürzt.
Abgerundete Kanten mit CSS3
/* Vier Angaben im Uhrzeigersinn für jede Ecke */ border-radius: 5px 5px 5px 5px; /* Zwei Angaben, wodurch die untere linke Ecke den Wert der oberen linken und die * rechte untere Ecke den Wert der rechten oberen Ecke übernimmt */ border-radius: 5px 5px; /* Eine Angabe für alle vier Ecken */ border-radius: 5px;
Listing 6
Farbverläufe mit CSS3
/* Parameter eins legt fest, ob der Verlauf linear oder radial verläuft. * X- und Y-Koordinaten legen den Start- und Endpunkt (2. und 3. Parameter) fest. * Die beiden letzten Parameter schließlich definieren die beteiligten Farben. */ -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#0000FF);
Listing 7
Jetzt kommt Bewegung ins Spiel
Animationen und Transformationen zwischen zwei Seiten werden in nativen Apps sehr gerne verwendet und sind mit CSS3 auch innerhalb des Browsers möglich. Dieses Thema ist jedoch verhältnismäßig komplex und wird etwa von Rich Bradshaw [1] und im Webstandard-Blog [2] ausführlich behandelt.
Für jeden das richtige Stylesheet
Von vielen nativen Apps ist man gewohnt, dass sich das Aussehen der App an die Orientierung des Geräts anpasst. Seit iOS 4.0 verstehen iPhone, iPod Touch und das iPad das „orientation“-Attribut beim Einbinden der CSS-Dateien im Head-Bereich der Seite. Auch Android-Geräte verarbeiten dieses Attribut korrekt.
Orientierungs-abhängiges Einbinden der Stylesheets
<!-- Einbinden im Hochformat --> <link rel=„stylesheet“ href=„css/simple_portrait.css“ type=„text/css“ media=„screen and (orientation:portrait)“ /> <!-- Einbinden im Querformat --> <link rel=„stylesheet“ href=„css/simple_landscape.css“ type=„text/css“ media=„screen and (orientation:landscape)“ />
Listing 8
Es ist auch möglich, das Stylesheet von der Display-Größe, respektive der Breite, abhängig zu machen.
Breiten-abhängiges Einbinden der Stylesheets
<!-- Einbinden, wenn das Display schmaler als 480 Pixel ist --> <link rel=„stylesheet“ href=„simple_mobile.css“ type=„text/css“ media=„screen and (max-width: 480px)“ /> <!-- Einbinden, wenn das Display breiter als 480 Pixel ist --> <link rel=„stylesheet“ href=„simple_default.css“ type=„text/css“ media=„screen and (min-width: 481px)“ />
Listing 9
Berühren erlaubt
Was „touchbar“ sein soll, sollte eine gewisse Größe haben, damit es keine Rolle spielt, ob ein Benutzer große oder kleine Finger hat. Laut Apple hat ein „Tap“ eine Auflagefläche von 44×44 Pixeln. Daher sollten Icons und Buttons eine Mindest-Größe von 32×32 Pixeln haben, um inklusive Padding auf diese Größe zu kommen.
Es geht auch anders: Dank zahlreicher Frameworks muss man das Rad nicht ständig neu erfinden. Da sich die Frameworks in ihrer Handhabung nur mäßig voneinander unterscheiden, wird an dieser Stelle jedoch nicht auf alle eingegangen.
jQuery Mobile
jQuery Mobile basiert auf dem bekannten JavaScript-Framework jQuery. jQuery Mobile optimiert die Seiten für die verschiedenen Geräte und Betriebssysteme und kümmert sich um die Darstellung im Hoch- und Querformat.
Um das Framework mit all seinen Eigenschaften verwenden zu können, müssen sowohl jQuery als auch jQuery Mobile über die entsprechenden CSS-Dateien im HTML-Template eingebunden werden. Anschließend kann die Seite in Abschnitte eingeteilt und jedem Abschnitt können bestimmte Funktionen zugewiesen werden. Das folgende Beispiel enthält einen Header, eine horizontale Navigationsleiste, einen Inhaltsbereich und einen Footer mit zwei Buttons.
Der Nachteil bei der Verwendung von Frameworks liegt meistens in der
Größe. Initial werden alle Funktionen und Styles geladen, auch wenn
diese in der Web-App nicht verwendet werden. Bei jQuery Mobile beträgt
die Größe des Frameworks inklusive CSS aktuell rund 60 KByte; dafür
werden wiederum alle wichtigen mobilen Betriebssysteme unterstützt,
darunter iOS, Android, Windows Phone und BlackBerry.
jQuery Mobile verwenden
<!DOCTYPE html> <html> <head> <title>A much simpler Web-App</title> <meta name=„viewport“ content=„width=device-width, initial-scale=1.0, user-scalable=no“ /> <meta name=„apple-mobile-web-app-capable“ content=„yes“ /> <meta name=„apple-mobile-web-app-status-bar-style“ content=„black“ /> <link rel=„stylesheet“ href=„css/jquery.mobile-1.0rc2.css“ /> <link rel=„stylesheet“ href=„css/simple.css“ /> <script type=„text/javascript“ xsrc=„js/jquery-1.6.4.min.js“></script> <script type=„text/javascript“ xsrc=„js/jquery.mobile-1.0rc2.min.js“></script </head> <body> <div data-role=„page“> <div data-role=„header“> <h1>jQuery Mobile</h1> </div> <div data-role=„navbar“> <ul> <li><a href=„index.html“>Start</a></li> <li><a href=„contact.html“>Kontakt</a></li> </ul> </div> <div data-role=„content“> <img xsrc=„images/picture.jpg“ /> </div> <div data-role=„footer“> <a href=„index.html“ data-role=„button“ data-icon=„arrow-u“>Hoch</a> <a href=„index.html“ data-role=„button“ data-icon=„arrow-d“>Runter</a> </div> </div> </body> </html>
Listing 10
Geräte-spezifische Funktionen
Der Zugriff auf Geräte-spezifische Funktionen via Browser ist derzeit noch stark eingeschränkt. Durch HTML5 ist es zwar schon jetzt möglich, Daten in einer Datenbank abzulegen, die Koordinaten eines Benutzer durch die Geo-Location-Funktion zu bestimmen oder Videos direkt im Browser abzuspielen. Viele Funktionen, wie der Zugriff auf die Kontakte oder die integrierte Kamera, sind jedoch nativen Apps vorbehalten.
Hybrid-Apps
Um mit einer Web-App dennoch auf die Geräte-APIs zugreifen zu können,
muss aus einer Web-App eine sogenannte Hybrid-App gemacht werden. Das
ist nichts anderes, als eine Web-App, die in eine native App eingebettet
ist.
Eine solche Hybrid-App wird mithilfe eines Frameworks wie PhoneGap erstellt. PhoneGap ist ein JavaScript-Framework, das den Zugriff
auf Gerätefunktionen bereitstellt. PhoneGap benötigt zur Erstellung
einer Hybrid-App natürlich das jeweilige SDK des mobilen
Betriebssystems, unterstützt dafür aktuell auch alle gängigen Systeme – Android, BlackBerry, iOS und andere.
Framework | Anmerkungen |
jQTouch | jQuery-Erweiterung für Android und iOS |
jQuery Mobile | jQuery-Derivat für Android, iOS, BlackBerry etc. |
PhoneGap | Hybrid-App-Framework für Android, iOS, BlackBerry etc. |
Rhodes | App-Framework für Ruby on Rails und HTML5 |
Sencha Touch | Web-App-Framework für Android, iOS und BlackBerry |
Titanium Mobile | Hybrid-App-Framework für Android und iOS |
Vertriebsmöglichkeiten
Aktuell besteht die Möglichkeit, Web-Apps über den OpenAppMkt [3] anzubieten. Der Entwickler kann seine Web-App dort entweder kostenlos anbieten oder kommerziell vertreiben. Von den Verkaufserlösen behält der Anbieter der Plattform allerdings 20 Prozent ein.
Um seine Web-App kommerziell und/oder reichweitenstark zu vertreiben, muss man den Weg über die oben genannte Hybrid-App gehen. Allerdings sind die Nutzer bei Hybrid-Apps sehr kritisch; es gilt daher, darauf zu achten, dass die dahinter liegende Web-App bei Leistung und Usability mit einer nativen App konkurrieren kann.
Fazit
Dank HTML5 und CSS3 lassen sich bereits heute Web-Apps bauen, die mit ihren nativen Konkurrenten problemlos mithalten können. Es gibt Bereiche, in denen die nativen Apps noch unschlagbar sind, etwa bei 3D-Spielen. Durch den rasanten Fortschritt in der mobilen Welt und Techniken wie WebGL kann aber vielleicht schon bald auch dieser Bereich von den Web-Apps erobert werden.
Größtes Manko der Web-Apps ist momentan noch der Vertrieb, denn eine zentrale Plattform im Internet gibt es aktuell nicht. Dieser Nachteil lässt sich aber durch das Erstellen einer Hybrid-App wettmachen.
Ebenfalls für Web-Apps spricht die Wartung: Im Gegensatz zur nativen App können Änderungen direkt und ohne Review-Prozess durchgeführt und implementiert werden. Sogar bei Apple.
Es bleibt abzuwarten, ob sich Web-Apps tatsächlich bei den Nutzern durchsetzen. Für Entwickler sind sie in jedem Falle ein Gewinn. Und zahlreiche Firmen und Verlage sind bereits auf den Zug der plattformunabhängigen Anwendungen aufgesprungen.
„Dank HTML5 und CSS3 lassen sich bereits heute Web-Apps bauen, die mit ihren nativen Konkurrenten problemlos mithalten können.“
Dem kann ich leider nicht zustimmen. Selbst einfache Seitenübergänge, z. B. durch jQery mobile generiert, ruckeln vor sich hin. Und jqTouch legt beim Tap gewisse Denkpausen ein, bevor was passiert. Sitze gerade an einem Projekt und die Kiste läuft nur auf einem iPad 2 flüssig. iPhone 3/4 sind so lala. Ist leider (noch?) traurige Realität.
Javascript ist halt immer nur so schnell wie die Engine und die Hardware. Vielleicht ist das Geruckel in 2 Jahren mit Quadcore CPUs Geschichte. Aktuell ist es frustrierend.
Ich bin deswegen am Überlegen, ob ob ich mir nicht doch noch Objective-C antue.
Bald kommt Mozillas Boot to Gecko, und gut ist :)
Wir erwarten ja auch nicht dass Internetanwendungen für Windows, Linux und Applezeug extra angepasst werden. Stellt euch das mal vor: hey coole Webseite, leider hab ich keinen Windowsrechner, deswegen läufts bei mir nicht richtig (oder halt umgekehrt, egal…).
Ist vielleicht noch ein Weg dahin, aber der wird immer stärker gegangen werden, das ist halt der eigentliche Sinn der Idee vom Internet.
Passend zu diesem Thema veranstalten wir am 16.Mai ein Webinar über:
Mobiles Umdenken – HTML5-Apps für Businessanwendungen
Das Webinar wird präsentiert von Martin Schröder (Developer bei der Mayflower GmbH).
Bis dahin kann man sich schon einen Podcast über WebApps als Einstimmung anhören.
Link zum Podcast: http://blog.mayflower.de/archives/864-Mayflower-Podcast-004.html
Anmeldung für das Webinar: http://bit.ly/webinar-mobiles-umdenken
Viel Spaß mit dem Input!
Jochen
Schaut euch mal Enyo an. http://enyojs.com/ War früher die Basis von webOS und jetzt der erste Teil von Open webOS. Klasse JS Bibliothek um Cross-Plattform web apps zu bauen. Und mit Phonegap kombiniert auch mobile apps.
Danke für den informativen Artikel. In den letzten Jahren und Monaten haben sich die Möglichkeiten für die Entwicklung mit Plattform um einiges verbessert.
Zum Beispiel kann man jetzt auch die Offline Konsumierung von Inhalten ermöglichen. Das war lange Zeit nicht möglich.
Hier auch ein paar Informatien zum Thema: http://www.yuhiro.de/web-app-entwicklung-mit-html5/
Wir können nur hoffen, das sich HTML5, in den nächsten Jahren weiterentwickelt und man eventuell von den Nativen Programmierungen wegkommen. Woran derzeit natürlich noch nicht zu denken ist.
Vielen Dank für den interessanten Beitrag. Obwohl er schon etwas älter ist, ist das Thema weiterhin aktuell. Vor allem durch die Bekanntgabe von W3C im Oktober letzten Jahres, in der HTML5 nun offiziell zum Standard erklärt wurde. Wir sind ein Unternehmen, dass sich auf App-Entwicklung mit HTML5, CSS3 und JS spezialisiert hat und gehen dabei sogar noch ein bisschen weiter. Wir entwickeln Apps mit hybridem Ansatz. Der Vorteil ist hier die Möglichkeit der Speicherung von Daten, also dem offline-verfügbar-machen und der Nutzung von Hardware-Komponenten des mobilen Endgerätes, bei gleichbleibender Flexibilität der Anwendung auf den unterschiedlichen Geräten und Betriebssystemen.
Trotzdem haben Hybrid-Apps immer noch einen schlechten Ruf. Zu unrecht, wie ich finde. Warum, dass erklären wir einmal genauer in diesem Bericht:
http://www.flyacts.com/hybrid-app-2.0-status-quo-hybrider-entwicklungsansaetze
Ich hoffe ich kann euch damit ein wenig weiter helfen und freue mich sehr über Feedback.
Beste Grüße
Johanna