Webseiten wie native Apps gestalten

10 Tipps & Tricks zur Gestaltung von Web-Apps
Kommentare

 Dank verbesserter Webtechnologien wie HTML5 und mächtigen JavaScript-Frameworks wie jQuery können Webseiten heute so gestaltet werden, dass sie sich von nativen Apps kaum noch unterscheiden. Um Webseiten „App-like“ zu gestalten, kann man verschiedene Tools und Tricks nutzen. Dieser Artikel stellt zehn Tipps und Tricks zur Gestaltung vo Web-Apps vor. 

Wollte man früher eigene Apps für ein Smartphone oder Tablet entwickeln, kam man lange Zeit nicht an nativen Apps vorbei, das heißt an der die Entwicklung von Apps für ein bestimmtes Gerät, zum Beispiel das iPhone. Bei Apple kann man nur mit Mac-Computern und der Programmiersprache Objective C entwickeln, um Apps für das iPhone, iPad oder den iPod zu entwickeln. Andere Smartphonebetriebssysteme wie Android oder Windows Phone benötigen andere Entwicklungstools und -sprachen. Möchte man also eine App für alle diese Plattformen entwickeln, ist man gezwungen, die gleiche App für die unterschiedlichen Plattformen und Geräte individuell zu entwickeln. Mit neuen verbesserten Webtechnologien ist es heute möglich, Webseiten zu entwickeln, die wie native Apps aussehen und sich auch so bedienen lassen. Das hat den Vorteil, dass Webseiten geräte- und plattformunabhängig funktionieren. Um jedoch eine Webseite adäquat zu gestalten, sodass sie nicht wie eine ordinäre Webseite, sondern „App-like“ aussieht, kann man verschiedene Tipps, Tricks und Tools verwenden. Im Folgenden sind zehn Punkte aufgeführt, die man für seine eigene Web-App berücksichtigen kann. Obwohl HMTL und JavaScript im Allgemeinen plattformunabhängig sind, kann es trotzdem je nach Browser zu unterschiedlichen Darstellungen und zu anderem Verhalten kommen. Die nachfolgenden Beispiele wurden auf einem iPhone 4S getestet, sollten allerdings auch auf Android oder Windows Phones funktionieren.

Bei der Entwicklung von mobilen Anwendungen in Form von Web-Apps gibt es zwei grundsätzliche Vorgehensweisen: Bei der ersten Variante wird die Web-App mit nativem HTML5 entwickelt und mithilfe eigener CSS-Klassen und JavaScript so angepasst, dass sie gut auf einem mobilen Gerät genutzt werden kann. Um die Webseite allerdings mehr wie eine native App wirken zu lassen, müssen umfangreiche CSS-Style-Anpassungen und die Unterstützung von Touch-Gesten implementiert werden. Um diesen initialen Aufwand für Basisfunktionen des User Interface und der Steuerung durch Touch-Gesten zu minimieren, bieten Frameworks wie jQuery Mobile vorgefertigte Styles mit Themes, diverse Touch-optimierte Steuerelemente und fertige Funktionen für Dialoge, Übergänge oder eine Eventsteuerung. Nachfolgend sind zwei Beispiele für Funktionen eines solchen Frameworks aufgeführt, die das Prinzip von jQuery Mobile verdeutlichen.

Für die Webseiten wird natives HTML5 verwendet, das heißt, es werden die normalen Elemente wie Überschriften (z. B. h1, h2, h3), Abschnitte (div) und Steuerelemente (z. B. input, label) verwendet. Durch das Hinzufügen von verschiedenen Attributen erweitert jQuery jedoch das Aussehen und die Funktionalität. Durch das Data-Role-Attribut kann man spezifizieren, wie ein Element von jQuery Mobile verwendet wird. Bei dem in Listing 1 dargestellten HTML-Code bewirkt dieses Attribut, dass der Abschnitt mit dem Attributwert collapsible die einfache H3-Überschrift als einklappbaren Header rendert (Abb. 1). Beim Darauf-Touchen wird der nachfolgende Inhalt ein- beziehungsweise ausgeklappt. Das Attribut Data-Theme gibt an, welches Farbschema verwendet wird. Die zugehörige CSS-Klasse bietet bereits fertige CSS Themes, die natürlich individuell angepasst werden können. Mithilfe von ThemeRoller kann ein Theme mit wenig Aufwand erstellt werden. Im Bereich der Steuerelemente kann jQuery Mobile aus einem Select-Steuerelement mit wenigen Attributen ein sehr gutes Slider Control machen, das sehr gut über eine Touch-Oberfläche bedient werden kann. Den in Abbildung 2 dargestellten Slider kann man mit dem Quellcode aus Listing 2 nutzen. Das Basisframework von jQuery Mobile kann natürlich noch um eigene Ergänzungen erweitert werden, wie hier, wo eine Split-View-Darstellung implementiert wurde. jQuery Mobile ist geräte- und plattformunabhängig, das heißt, das Framework kann ebenso auf Android-, BlackBerry- oder Windows-Phone-7-Geräten verwendet werden. Das spart den initialen Aufwand für die Entwicklung von Basisfunktionen.

<div data-role="collapsible" data-theme="b"><h3>Überschrift</h3><div>content</div></div>

Abb. 1: Collapsible Header in jQuery Mobile

<div data-role="content">
    <div data-role="fieldcontain">
      <label for="slider">Einverständnis:</label>
      <select name="slider" id="slider" data-role="slider">
        <option value="off">Nein</option>
        <option value="on">Ja</option>
      </select> 
    </div>
</div>

Abb. 2: Ein mit jQuery Mobile gerendertes Slider Control

Bei iOS-Geräten wie iPhone, iPod oder iPad stört bei Web-Apps oft, dass die Browserzeile stets eingeblendet ist. Der mobile Safari-Browser bietet keinen Fullscreen-Modus. Mit dem folgenden Meta-Tag kann die Browserzeile entfernt werden:

<meta name="apple-mobile-web-app-capable" content="yes" />

Allerdings funktioniert das Entfernen der Browserzeile nur, wenn man die Webseite als Lesezeichen mit einem eigenen App-Symbol auf dem Home Screen speichert. Ruft man dann die Webseite über dieses Lesezeichen auf, ist die Browserzeile entfernt. Obwohl die Browserzeile entfernt werden kann, verbleibt beim mobilen Safari trotzdem die Statuszeile mit den Angaben zu Netzanbieter, Uhrzeit und Batteriestand des iOS-Geräts. Diese Statusleiste kann man zwar nicht entfernen, aber mit den folgenden Meta-Tags einfärben:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Für das Content-Attribut kann man die Werte default, black und black-translucent eintragen. Da diese Anpassungen nur funktionieren, wenn die App als Lesezeichen auf dem Homescreen gespeichert werden, hat man die Möglichkeit, ein eigenes Icon für die Web-App festzulegen. Um das Standardverhalten, das einen Screenshot der Webseite als Icon nutzt, zu umgehen, verwendet man die folgende Zeile:

<link rel="apple-touch-icon" href="/icon.png" />

Da die verwendeten Icon-Größen bei den verschiedenen iOS-Geräten unterschiedlich sind, empfiehlt es sich, Icons in unterschiedlicher Auflösung bereitzustellen. Die Größen der Icons können der nachfolgenden Auflistung entnommen werden:

  • iPhone 4(S): 114 x 114 Pixel
  • Älteres iPhone (3GS und früher): 57 x 57 Pixel
  • iPad: 72 x 72 Pixel

Um nun verschiedene Icons bereitzustellen, kann man sie wie folgt referenzieren:

<link rel="apple-touch-icon" href="icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="icon-iphone4.png" />

Der mobile Safari-Browser nutzt automatisch die für das verwendete iOS-Gerät korrekte Icon-Größe. Abbildung 3 zeigt, wie eine Webseite, die die oben genannten Metaeinstellungen verwendet, auf einem iPhone aussieht. Bei Geräten anderer Hersteller oder anderen Browsern sind solche Metaeinstellungen unter Umständen gar nicht erforderlich, weil der Fullscreen-Modus unterstützt oder die Browserzeilen automatisch ausgeblendet wird.

Abb. 3: Eine Web-App auf dem iPhone ohne Browserkopf- und Fußzeile

Ein wesentlicher Punkt, wie man Web-Apps so gestaltet, dass sie wie native Apps wirken, ist die Menüführung beziehungsweise Navigation zu verschiedenen Seiten der App. Statt wie bei herkömmlichen Webseiten einfache Hyperlinks anzuzeigen und zu nutzen, sollten bei einer App-like-Webseite eher Navigationsbuttons und beim Aufruf einer anderen Webseite eine Transition wie Flip, Slide oder Fade verwendet werden. Aufgrund der beschränkten Bildschirmfläche ist die Verwendung von Modaldialogen sinnvoll. Bei Modaldialogen befindet sich das Dialogfenster im Vordergrund, während das aufrufende Fenster ausgegraut und nicht anklickbar im Hintergrund bleibt. Diese Effekte kann man entweder mit CSS und JavaScript selbst entwickeln oder bei jQuery Mobile einfach nachnutzen. Die nachfolgende Zeile zeigt einen Aufruf einer anderen Webseite unter Verwendung eines Transition-Effekts:

<a href="andereseite.html" data-transition="pop">I'll pop</a>

Das Attribut Data-Transition erweitert einen einfachen Hyperlink um eine Transition. Mögliche Werte sind unter anderem slide, pop, Fade oder flip. Der Modaldialog, der in Abbildung 4 gezeigt ist, wird mit der folgenden Zeile aufgerufen:

<a href="dialog.html" data-rel="dialog" data-transition="pop">Öffne Dialog</a>

Abb. 4: Aufgerufenes Dialogfenster (aus der jQuery-Mobile-Docs-und-Demo-Sektion)

Zur Navigation innerhalb der App kann man eine platzsparende, ausblendbare Navigation Bar verwenden. jQuery Mobile bietet hier zum Beispiel eine Header oder Footer Bar, in die man eine Navigation Bar integrieren kann. Listing 3 definiert eine Header Bar mit einem Options-Button und einer Navigationsleiste. Durch die in Listing 3 verwendeten Data-Role-Attribute header und navbar werden die jeweiligen div-Abschnitte entsprechend gerendert (Abb. 5). Der Hyperlink zur options.html-Seite wird durch das Attribut data-icon um ein Icon ergänzt und als Button dargestellt. Ob jQuery Mobile Framework oder nicht, die Beschränkungen des bei Smartphones oft kleinen Bildschirms sollten bei der Gestaltung der Webseite berücksichtigt werden. Überflüssige oder ergänzende Inhalte sollten gegebenenfalls in eigene Seiten oder Dialoge ausgelagert werden.

<div data-role="header" data-position="inline">
    <h1>I'm a header</h1>
    <a href="options.html" data-icon="gear" class="ui-btn-right">Options</a>
    <div data-role="navbar">
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </div>
</div>

Abb. 5: Header Bar mit integrierter Navigationsleiste

Aufmacherbild: Hand holding creative idea with cloud of colorful application icon, Business software and social media networking service concept, isolated on white background von Shutterstock / Urheberrecht: My Life Graphic

[ header = Offline-Caching, Speichern von Daten, Geolocation ]

Bei mobilen Anwendungen ist Performance ein wesentliches Kriterium, um Akzeptanz und Erfolg einer App zu steigern. Da Web-Apps beziehungsweise Webseiten grundsätzlich eine Datenverbindung benötigen, um Daten mit dem Webserver oder einem Backend-System auszutauschen, sollte der Datenverkehr für mobile Web-Apps optimiert werden. Denn bei Webseiten werden nicht nur die reinen inhaltlichen Daten, sondern auch die Webseiten, zugehörige Styles, JavaScript-Bibliotheken, Bilder und sonstige Ressourcen beim Zugriff auf die Webseite übertragen. Um zu verhindern, dass diese Dateien unnötig oft übertragen werden, können sie auf dem mobilen Endgerät gecached werden, sodass sogar eine Art Offlinemodus implementiert werden kann. Um das Offline-Caching zu ermöglichen, müssen zwei Voraussetzungen auf dem Webserver eingerichtet werden:

  • AppCache-Manifest-Datei
  • IIS MimeType

Die AppCache-Manifest-Datei gibt an, welche Dateien und Ressourcen gecached werden und welche immer vom Webserver geladen werden müssen. Listing 4 zeigt eine solche Manifest-Datei. Für diese Manifest-Datei gibt es die folgenden Schlüsselwörter:

CACHE MANIFEST
CACHE:
index.html
css/core.css
scripts/myscripts.js
images/title.png

NETWORK:
http://mysharepoint/_vti_bin/ListData.svc
http://api.twitter.com

FALLBACK:
http://www.entwickler.de
img/placeholder.png
  • CACHE MANIFEST: steht immer am Anfang der Datei und kennzeichnet die Manifest-Datei.
  • CACHE: Alle hier aufgeführten Dateien werden auf dem Client für den Offlinezugriff gecached.
  • NETWORK: Die hier aufgeführten Ressourcen benötigen Internetzugriff und werden nie gecached.
  • FALLBACK: Hier können Ersatzbilder definiert werden, falls eine Onlineverbindung für die angegebene Seite nicht zur Verfügung steht.

Damit die Browser die AppCache-Manifest-Datei mit der Endung .appcache auch interpretieren, muss der MIME-Typ text/cache-manifest hinzugefügt werden. Im IIS-Manager sollte der MIME-Typ also wie in Abbildung 6 eingerichtet werden.

Abb. 6: AppCache-Manifest-MIME-Typ im IIS-Manager

Ein neues Feature von HTML5 ist Data Storage, also die Persistierung von Daten auf den mobilen Endgeräten. Dabei bietet HTML5 verschiedene Möglichkeiten der Persistierung an:

  • Application Cache: Mit diesem Cache können Webseiten und Ressourcendateien auf den Endgeräten gecached werden. Dieser Cache eignet sich allerdings nicht für Inhaltsdaten, da sich diese zu schnell ändern.
  • SessionStorage: erlaubt die Speicherung von Daten in einer Sessionvariablen. Die Daten gehen verloren, wenn das Browserfenster geschlossen wird.
  • LocalStorage: erlaubt die permanente Speicherung von Daten.
  • Web SQL Database: Nutzung einer SQL-Datenbank zur Speicherung der Daten.
  • Indexed DB: eine Datenbank, die eine Mischung aus SQL-Datenbank und dem Key-Value-Verhalten des LocalStorage darstellt.

Die Verwendung des Application Cache ist im vorhergehenden Abschnitt beschrieben worden. Den SessionStorage zu verwenden, ist denkbar einfach: Zum Speichern eines Werts werden im Grunde Key-Value-Paare gespeichert, zum Beispiel folgendermaßen:

sessionStorage['key']=value;

Zum Auslesen wird einfach der Wert aus dem SessionStorage ausgelesen:

var value = sessionStorage['key'];

Der Zugriff auf den LocalStorage erfolgt über das Objekt window.localStorage über die Methoden getItem(‚key‘) und setItem(‚key‘,value). Die umfangreichste Art, Daten zu speichern, ist das Nutzen der SQL-Datenbank auf dem Clientgerät. Im Gegensatz zum LocalStorage oder Application Cache ist die SQL-Datenbank viel flexibler, denn LocalStorage und SessionStorage können lediglich Key-Value-Paare als Zeichenketten speichern, was bei komplexen Datentypen Serialisierung und Deserialisierung erfordert. Bei der SQL-Tabelle hingegen sind die bekannten Funktionen und Datentypen für mehrere Spalten verwendbar. Abfragen auf SQL-Tabellen beschränken sich nicht nur auf das Auslesen einzelner Werte, sondern können durch die bekannten Select-Abfragen individuelle Datensätze auslesen. Die Indexed DB ist nicht vergleichbar mit einer SQL-Datenbank. Sie ist ein Object Store, in dem Objekte verwaltet werden können und über einen Index auffindbar sind.

Das Geolocation API von HTML5 erlaubt es, die aktuelle Position des Anwenders auszulesen und zum Beispiel in einem Google-Maps-Fenster in der eigenen Web-App zu verwenden. Voraussetzung ist natürlich, dass das benutzte Endgerät über die Möglichkeit verfügt, den eigenen Standort zu ermitteln. Viele Mobilfunkgeräte und Smartphones haben GPS, sodass man den eigenen Standort in seiner Anwendung verwenden kann. Listing 5, das aus einem Beispiel von HMTL5Rocks.com stammt, zeigt, wie man mit wenigen Zeilen HTML und JavaScript den eigenen Standort in einem Google-Maps-Fenster anzeigt.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body style="font: 75% Lucida Grande, Trebuchet MS;margin:0">
    <div id="content" style="height: 450px"></div>
    <script>
      var initialLocation;
      var map;
      var infowindow = new google.maps.InfoWindow();
      var mapOptions = {
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, onError);
        // also monitor position as it changes
        navigator.geolocation.watchPosition(showPosition);
      } else {
        onError();
      }

      function showPosition(position) {
        map = new google.maps.Map(document.getElementById("content"), mapOptions);

        var lat = position.coords.latitude;
        var lng = position.coords.longitude;

        initialLocation = new google.maps.LatLng(lat, lng);
        map.setCenter(initialLocation);
        infowindow.setContent(lat + " " + lng);
        infowindow.setPosition(initialLocation);
        infowindow.open(map);
      }

      function onError() {
        if (navigator.geolocation) {
          initialLocation = newyork;
          contentString = "Error: The Geolocation service failed.";
        } else {
          initialLocation = siberia;
          contentString = "Error: Your browser doesn't support geolocation. Are you in Siberia?";
        }
        mapOptions.zoom = 4;
        map = new google.maps.Map(document.getElementById("content"), mapOptions);
        map.setCenter(initialLocation);
        infowindow.setContent(contentString);
        infowindow.setPosition(initialLocation);
        infowindow.open(map);
      }
    </script>
</body>
</html>

Das navigator-Objekt ermöglicht das Auslesen der Geolocation. Durch den Aufruf navigator.geolocation.getcurrentPosition(); wird die Geolocation an die ShowPosition-Funktion übergeben, in der die Werte für Längen und Breitengrad als Ausgangspunkt für das Google-Maps-Fenster genutzt werden. Das navigator-Objekt ermöglicht es ebenfalls, die Geolocation der Funktion watchPosition zu überwachen, sodass sich die eingetragene Position verändert, falls man sich bewegt. Anhand dieses kurzen Beispiels kann man das Potenzial des Geolocation API erkennen. In Kombination mit den bekannten Funktionen des Google Maps API, beispielsweise Routen, Point-of-Interests, verschiedene Kartenansichten und -Controls, können Webseiten entwickelt werden, die in puncto Geolocation den nativen Apps kaum nachstehen.

[ header = Datenverbindung, „Pull to Refresh“, Orientation, Multimediainhalte]

Das Abrufen und Senden von Daten benötigen viele Apps, Web-App oder native App, um mit einem Backend-System Daten auszutauschen. Durch dynamische Daten sind Apps viel flexibler und „lebendiger“ als statische Apps. In Web-Apps können solche Daten über Web Services, REST, spezielle Client-APIs oder direkten Zugriff via HTTP-Protokoll ausgetauscht werden. Die Daten können zur Erweiterung oder Manipulation der HTML-Seite genutzt werden. In Listing 6 ist ein Beispiel beschrieben, in dem beim Laden einer HMTL-Seite ein Web Service eines Microsoft-SharePoint-Servers aufgerufen wird. Die Methode GetListItems liefert einen Datensatz von mehreren Listeneinträgen inklusive verschiedener Metadaten zurück. Das zurückgegebene SOAP XML in dem xData.responseXML wird durchiteriert und in Form einer mit Metadaten angereicherten Hyperlinkliste in das Document Object Model (DOM) hinzugefügt. Die Ausgabe zeigt Hyperlinks zu Projektseiten in einem Projektportal. Die Hyperlinktitel beziehungsweise der Tooltipp enthalten den Kundennamen, Projektnamen und eine Beschreibung. Ähnliche Ergebnisse lassen sich auch durch das Aufrufen eines REST URL in Listing 7 erreichen, aber die zurückgelieferten Ergebnisse werden im viel leichter handhabbaren JSON-Format zurückgegeben.

<script type="text/javascript">
//Benötigt die Javascript Bibliothek SPServices von Codeplex
    $(document).ready(function() {
      $().SPServices({
        operation: "GetListItems",
        async: false,
        listName: "Projektliste",
        CAMLQuery: "<Query><Where><And>"
          + "<Eq><FieldRef Name='Practice' /><Value Type='Choice'>WAS - Web Application Solutions</Value></Eq>"
          + "<Eq><FieldRef Name='ProjectStatus' /><Value Type='Text'>Aktiv</Value></Eq>" + "</And></Where></Query>",
        CAMLViewFields: "<ViewFields></ViewFields>",
        CAMLRowLimit: 0,
        completefunc: function(xData, status) {
          if (status == "error") {
            var errHtml = $().SPServices.SPDebugXMLHttpResult({ node: xData.responseXML });
            $("#WSError").html(errHtml);
          }

          $(xData.responseXML).find("z\:row").each(function(){
            var ID  = $(this).attr('ows_ID'); 
            var title = $(this).attr('ows_Title'); 
            var url = $(this).attr('ows_ProjectUrl').split(",")[0]; 
            var phase = $(this).attr('ows_Phase0'); 
            var desc = $(this).attr('ows_ProjectDescription'); 
            var customer = $(this).attr('ows_CustomerName'); 

            $("#WSOutputX").append("<a href='" + url + "' target=_blank title='" + phase + "rn" + desc + "'>" + customer + " - " + title + "</a><br>");
          });
        } 
      });
    });
</script>
<div id="WSError" style="color:red"></div>
<div id="WSOutputX"></div>
$.ajax({ 
        url: "http://yourserver/_vti_bin/ListData.svc/Projektliste", 
        type:'GET', 
        dataType: 'JSON', 
        cache:false,
        crossDomain:true, 
        success:function(json) { alert ("Erfolgt"); 
        }, error:function(){ 
            alert("Fehler"); 
        } 
    }); 

Eine intuitive Geste zum Aktualisieren von Daten in einer App ist die Geste „Pull to Refresh“, bei der man einen bestimmten Bereich mit dem Finger nach unten ziehen muss, um das Aktualisieren von Daten zu veranlassen. Natürlich würde ein einfacher Button dieselbe Funktion erfüllen, allerdings ist diese Geste inzwischen sehr verbreitet, zum Beispiel in der Facebook- oder XING-App, und sind insbesondere bei Listenansichten intuitiv und platzsparend. Eine „Pull to Refresh“-Funktion kann man mithilfe von JavaScript auch für die eigene Web-App implementieren. Neben weiteren Features wie Zoom, Carousel oder benutzerdefinierten Scrollbars bietet das Framework IScroll4 diese „Pull to Refresh“-Funktion. Anhand des auf der Webseite gezeigten Beispiels kann man die Funktion leicht in seine eigene Web-App übernehmen. Auch die Webseite von Wayne Pan stellt eine JavaScript-basierte Lösung vor. Abbildung 7 zeigt das Beispiel auf einem iPhone.

Abb. 7: „Pull to Refresh“-Beispiel

Ein Feature von Smartphones und Tablets ist die Drehung des Bildschirminhalts, wenn das Endgerät gekippt wird. Native Apps wie der mobile Safari-Browser oder die Note-App bieten beim Kippen des Geräts eine breitere Tastatur für die Eingabe von Daten. Die Mail-App auf dem iPad hat, wenn man es horizontal hält, eine Split-View-Ansicht mit den E-Mails und Postfächern auf der linken Seite und dem Inhaltsbereich auf der rechten Seite. Hält man das iPad vertikal, verschwindet der Postfach- und E-Mail-Bereich hinter einem Menübutton, der das Menü gegebenenfalls wieder einblendet. Dieses Verhalten kann man auch in eigenen Web-Apps implementieren, indem man die Orientation des Geräts ausliest und darauf reagiert. Für die verschiedenen Browser und Geräte gilt, dass sie bezüglich der Erkennung der Orientierung nicht einheitlich funktionieren, da noch nicht alle Browser Properties wie window.orientation unterstützen. Es gibt zwei Ansätze zum Umgang mit der Orientation. In Listing 9 ist zum einen der EventListener für das orientationchange-Event beispielhaft in der Methode onOrientationChange() implementiert. Die andere Möglichkeit besteht darin, beim Laden der Seite die Breite des Bildschirms auszuwerten, um so zu erkennen, ob das Gerät horizontal oder vertikal gehalten wird. Die Funktion checkOrientation() zeigt eine beispielhafte Umsetzung.

window.addEventListener('orientationchange', onOrientationChange, false);
function onOrientationChange() {
if (orientation == 0) {
  //portraitMode
}
else if (orientation == 90) {
  //landscapeMode
}
else if (orientation == -90) {
  //landscapeMode
}
else if (orientation == 180) {
  //portraitMode
}
else {
}
}
function checkOrientation() { 
    deviceWidth = $('body').width(); 
    if (deviceWidth == '320') { 
          //portraitMode
    } 
    else if (deviceWidth == '480') { 
        //landscapeMode
    }
} 

HTML5 bietet eine einfache Integration von Multimediainhalten wie Sounds, Videos oder Animationen. In Webseiten wurden solche Inhalte bisher oft mit Flash realisiert und für mobile Endgeräte oftmals nicht implementiert. Das liegt zum einen am erhöhten Datenaufkommen und zum anderen an den verwendeten Codecs zum Abspielen der Multimediainhalte, iOS-Geräte können zum Beispiel kein Flash abspielen. In HTML5 kann man verschiedene Audio- und Videodateien unterschiedlicher Kodierung bereitstellen und HTML5 beziehungsweise der Browser wählt automatisch die optimale Einstellung. Mit dem neuen Video- und Audio-Tag können Abspielfenster innerhalb einer HTML5-Webseite konfiguriert werden. Listing 10 definiert eine Videoquelle sowie mehrere Buttons zur Steuerung des Videos. Mithilfe des Source-Elements können Videos mit unterschiedlicher Kodierung bereitgestellt werden. Die Buttons zur Steuerung des Videos rufen via JavaScript die Steuerungsfunktionen des Videoobjekts auf. Das Audioelement wird analog zum Videoelement verwendet. Des Weiteren gibt es verschiedene Elemente, um Grafiken in 2-D und 3-D zu rendern. Eine recht einfache Möglichkeit, um eine Form zu zeichnen, bietet Inline-SVG. Mit den folgenden Zeilen wird ein Rechteck mit abgerundeten Kanten gezeichnet:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <<ideo id="videocontrol" width="320" controls autobuffer>
       <source src="http://yourserver/filename.webm" type='video/webm; codecs="vp8, vorbis"' /> 
       <source src="http://yourserver/html5_misc/filename.mp4" type="video/mp4" /> 
       
<svg id="svg-area" width="838" height="140" viewBox="0 0 2000 380"> <rect x="100" y="20" rx="25" width="100" height="335" fill="#FAEBD7" stroke="purple" stroke-width="2" /> </svg> </svg>

Zusammenfassung

Die hier vorgestellten Tipps und Tricks sind nur ein kleiner Ausschnitt aus den zahlreichen Frameworks und Bibliotheken, die es ermöglichen, dass Webseiten wie Apps gestaltet werden können. Eine gute Quelle für native HTML5-Funktionen und Erläuterungen ist die Webseite HTML5Rocks.com, die sogar einen Playground zum direkten Ausprobieren und Ändern von Beispielen bereitstellt. Benötigt man für die Web-App unbedingt eine Funktion, die nur native Apps aufweisen, können Web-Apps auch in native Apps umgewandelt werden. PhoneGap ist ein bekannter Anbieter zur Umwandlung von Web-Apps zum Beispiel auf Grundlage von jQuery Mobile in native Apps. Mithilfe von PhoneGap können für eine Web-App einige native Funktionen, zum Beispiel Push Notifications, Kamerazugriff usw., nachgerüstet und resultierend in einer nativen App verwendet werden. Mit der Unterstützung für HTML5 und JavaScript für Windows-8-Apps gewinnt die Webtechnologie noch mehr Einfluss und wird zunehmend auch im „Nicht-Web“-Bereich verbreitet.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -