Drücke die Tasten ◄ ► für weitere Artikel  

Web-Apps entwickeln mit HTML, CSS3 und JavaScript

Aus dem
t3n Magazin Nr. 26

12/2011 - 02/2012

Die Frage, ob man besser eine native App oder eine plattformunabhängige Web-App entwickeln sollte, wird aktuell rege diskutiert. Die Antwort darauf ist abhängig von der Komplexität und den Eigenschaften, die eine mobile Applikation aufweisen soll. Wir zeigen, was plattformunabhängige Web-Apps bereits können und welche Vor- und Nachteile sie gegenüber ihren nativen Geschwistern haben.

Web-Apps entwickeln mit HTML, CSS3 und JavaScript

 

tec web apps bild
Foto: kimberrywood/iStock
Eine Web-App ist eine Website, die für mobile Endgeräte aufbereitet wird und dank der kommenden Internet-Standards HTML5 und sowie der Skriptsprache Eigenschaften einer nativen App erhält. Sie wird gewöhnlich mit dem internen Browser geöffnet und auf dem Homescreen verknüpft.

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

dms de1420a307b4342fd911d5b7f1337275
Im Grunde ist eine Web-App nichts anderes als eine optimierte Webseite.

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 114x114 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

dms 5f884d2352a5b4ffdf32075586289f2c
Die Web-App unterscheidet sich auf dem Homescreen nicht von den nativen .

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

Autor:
58 Shares bis jetzt –Dankeschön!

Bewerten
VN:F [1.9.22_1171]
4 Antworten
  1. von sec0nd am 26.04.2012 (16:13Uhr)

    "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.

  2. von Erik am 26.04.2012 (16:25Uhr)

    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.

  3. von Jochen Seelig am 26.04.2012 (16:56Uhr)

    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

  4. von ursaberlin am 27.04.2012 (12:18Uhr)

    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.

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Apps
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung]

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und... » weiterlesen

Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration
Mehr Performance für deine Website mit CSS3, dank Hardware-Acceleration

Wir zeigen euch, wie ihr die Hardware-Acceleration mit CSS3 aktivieren könnt um eure Web-Projekte, zum Beispiel auf Smartphones, schneller laufen zu lassen. » weiterlesen

Ein Programm für Smartphone, Desktop und Xbox One: Microsoft stellt Universal Windows Apps vor
Ein Programm für Smartphone, Desktop und Xbox One: Microsoft stellt Universal Windows Apps vor

Auf ihrer Entwicklerkonferenz //build/ 2014 hat Microsoft Universal Windows Apps vorgestellt. Dank einer vereinheitlichen Windows-Runtime sollen Entwickler auf einfache Art und Weise Apps für die... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen