Entwicklung & Design

Web-Apps entwickeln mit HTML, CSS3 und JavaScript

Seite 2 / 2

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.

Mit jQuery Mobile erhält man bereits mit ein paar Zeilen Code imposante Ergebnisse.

Mit jQuery Mobile erhält man bereits mit ein paar Zeilen Code imposante Ergebnisse.

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.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

6 Kommentare
sec0nd
sec0nd

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

Antworten
Erik
Erik

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.

Antworten
Jochen Seelig

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

Antworten
ursaberlin
ursaberlin

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.

Antworten
YUHIRO.DE

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.

Antworten
Johanna.g
Johanna.g

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung