Lade Inhalt...

Responsive Web. Entwicklung von reagierenden Webanwendungen

Bachelorarbeit 2014 45 Seiten

Informatik - Programmierung

Leseprobe

Inhaltsverzeichnis

Erklärung.

Kurzfassun

Abstract

1 Einleitung
1.1 Motivation
1.2 Ziele
1.3 Aufbau der Arbeit

2 Grundlagen und Begriffsbestimmungen
2.1 Web Technologien
2.1.1 HTML
2.1.2 DOM
2.1.3 CSS
2.1.4 Media Types, Media Groups und Media Queries
2.1.5 JavaScript
2.2 Browser

3 Entwicklung von Responsive Web Applications
3.1 Responsive Web Design
3.2 Responsive Web Applications
3.3 Anforderungen und Problemstellen
3.4 Vorgehensmethoden bei der Entwicklung
3.4.1 Mobile First
3.4.2 Progressive Enhancement und Gracefull Degradation
3.5 Unterstützende Frameworks
3.5.1 jQuery
3.5.2 Modernizr

4 Anwendungsbeispiel Steyrling
4.1 Anforderungen
4.2 Verhalten der Bilder
4.3 Das Reagieren auf Umgebugsvariablen
4.4 Ergebnis

5 Zukunftsausblick
5.1 Entwicklung der Webtechnologien
5.2 Neue Devices
5.3 HTML5 Betriebssysteme

Literaturverzeichnis

Erklärung

Ich erkläre eidesstattlich, dass ich die vorliegende Arbeit selbstständig und ohne fremde Hilfe verfasst, andere als die angegebenen Quellen nicht benutzt und die den benutzten Quellen entnommenen Stellen als solche gekennzeichnet habe. Die Arbeit wurde bisher in gleicher oder ähnlicher Form keiner anderen Prüfungsbehörde vorgelegt.

Datum, Unterschrift

Kurzfassung

Kein Kommunikationsmedium wächst so schnell wie das Internet. Entsprechend rasant wächst auch die Anzahl an unterschiedlichen webtauglichen Devices. Dazu zählen Desktop Computer und Tablets gleichermaßen wie Autos, Smartfridges und viele weitere Geräte. Webentwickler stehen nun vor der Herausforderung, Responsive Web Applications zu erstellen, die auf allen verfügbaren Geräten funktionieren und angepasst dargestellt werden. Die erfolgreiche Entwicklung von reagierenden Webanwendungen verlangt Denkmuster, die von gleichbleibenden Geräteeigenschaften gelöst sind. Entwickler sollten bereits bei der Konzeption vom kleinsten gemeinsamen Nenner ausgehen. Der Fokus auf die relevantesten Inhalte erleichtert die Umsetzung für Devices mit kleinen Displays. Gleichzeitig erscheint die Anwendung durch dieses Vorgehen auf Geräten mit größeren Displays aufgeräumt reduziert und wertet das Nutzererlebnis durch bessere Performance auf. Die Flexibilität einer Anwendung wächst mit der Reduktion der in der Entwicklung getroffenen Vorannahmen über den Nutzungskontext. Abhängig vom verwendeten Gerät sollen Responsive Web Applications anstreben, die gewünschten Inhalte optimal zu präsentieren, um so ein bestmögliches Nutzererlebnis zu bieten. In dieser Arbeit werden der Entwicklungsprozess einer reagierenden Webanwendung sowie auftretende Probleme und Lösungen veranschaulicht.

Abstract

The internet is growing faster than any other communication medium. Corresponding to that, the amount of different web capable devices on the market, including desktop computers and tablets as well as cars, smartfridges and many other devices, is growing rapidly. Webdevelopers are now facing the challenge to develop Responsive Web Applications running and being displayed adjusted on any available device. Successful Responsive Web Application development requires patterns, which are independent from the actual device characteristics. Therefore, developers should agree on the least common denominator and focus on providing content for devices with a small-sized display or restrained resources in a first step. By using this approach, the application offers a tidy, reduced look for devices with larger displays. Additionally, user experience is improved by increased performance at the same time. To increase its flexibility, an applications behavior should depend rather on the characteristics of the device than on assumptions made during the process of development. Responsive Web Applications aim to present the desired content in an optimal way, depending on the used device, in order to provide the best possible user experience. This paper shows the development process of a Responsive Web Application together with occurring problems and solutions.

Abbildungsverzeichnis

Abbildung 1 - Ergebnis von Codebeispiel

Abbildung 2 - Darstellung des Praxisbeispiels auf Apple iMac, iPad und iPhone

Abbildung 3 - Unversitäts Website

Abbildung 4 - Bilderübersicht Variante 1

Abbildung 5 - Bilderübersicht Variante 2

Abbildung 6 - Bilderübersicht Variante 3

Abbildung 7 - Bilderübersicht Variante 1 auf einem Smartphone

Abbildung 8 - background-image: cover

Abbildung 9 - background-image: contain

1 Einleitung

Im Folgenden werden die Motivation und die Ziele der vorliegenden Arbeit erläutert sowie ein Überblick über den Aufbau der Arbeit gegeben.

1.1 Motivation

Wir sind in einer Zeit angekommen, in der Internet bereits allgegenwärtig und für fast jeden frei verfügbar ist. Die Vielfalt an Geräten und Maschinen mit Netzanbindung reicht von Kühlschränken über Autos bis hin zu Uhren, sodass man in der Webprogrammierung nicht länger nur an Desktop Computer, Tablets und Smartphones denken darf. Es ist nicht mehr möglich, für alle unterschiedlichen Ausgabegeräte (Devices) eine individuelle Ausgabe zu programmieren, wie es im Web noch vor wenigen Jahren der Fall war. Der Aufwand wäre in Anbetracht der heutigen Vielfalt an unterschiedlichen Geräten und dem stetigen Wachstum dieser Vielfalt unangemessen hoch. Das Ziel von reagierenden Webapplikationen (Responsive Web Applications) ist es, den Nutzern unabhängig von Endgerät und Softwareumgebung das bestmögliche Nutzererlebnis zu bieten (Fridaus, 2013). Mit der Verwendung unterschiedlicher Devices entstehen auch unterschiedliche Bedienmuster und Bedienintentionen, auf die es einzugehen gilt. Für Webentwickler bedeutet dieser Trend eine Veränderung der bisherigen Arbeitsweise. An sie werden neue Anforderungen gestellt - sowohl die Konzeption als auch die Entwicklung werden komplexer.

1.2 Ziele

Diese Arbeit behandelt Probleme, Lösungen, Vorgehensmethoden und Zukunftsaussichten um die Thematik der Entwicklung von reagierenden Webanwendungen mit dem Ziel, zukunftssichere Herangehensweisen an die Problematik zu erörtern. Im Zuge meines Berufspraktikums bei der Werbeagentur „ABM“ in Traun war es unter anderem meine Aufgabe, Responsive Websites zu erstellen. Die Website der Forstverwaltung Steyrling - Schaumburg Lippe (www.fv-schaumburg-lippe.at) dient für diese Arbeit als praktisches Beispiel.

1.3 Aufbau der Arbeit

Das zweite Kapitel dient zur Einführung in die Grundlagen, die zum Verständnis der weiteren Kapitel vorausgesetzt werden. Im dritten Kapitel werden die Anforderungen an reagierende Webanwendungen, Probleme und Grenzen der Plattformunabhängigkeit, die Entwicklung solcher Applikationen sowie unterstützende Frameworks behandelt. Im vierten Kapitel werden Inhalte daraus anhand eines Praxisbeispiels näher betrachtet. Im fünften und letzten Kapitel werden Zukunftsaussichten als Ankerpunkte für weiterführende Arbeiten bereitgestellt.

2 Grundlagen und Begriffsbestimmungen

Das folgende Kapitel dient zur Einführung in die Grundlagen der Thematik sowie zur Erläuterung verwendeter Begriffe. Diese sind zum Verständnis der behandelten Themen notwendig. Hierin gesetzte Schwerpunkte werden als Basiswissen vorausgesetzt und in den weiteren Kapiteln nicht näher erläutert.

2.1 Web Technologien

Abhängig vom Kontext gibt es unterschiedliche Definitionen für „Web Technologien“. Der Begriff umfasst sowohl Hardware- als auch Softwareaspekte. Eine sehr weit gefasste, allgemeine Definition liefert Strobel (2003, S. 25): „ Unter Web-Technologien können Techniken verstanden werden, die mit dem Internet zusammenarbeiten. “ Der Gültigkeitsbereich von Web Technologien für diese Arbeit beschränkt sich auf Technologien, die zur Erstellung von Applikationen, welche mit einem Webbrowser (siehe 2.2.) bedient werden, verwendet werden. Der Fokus der Auswahl liegt auf für reagierende Webanwendungen relevante Web Technologien, welche für das herangezogene Beispielprojekt (Die Website der Forstverwaltung Steyrling - Schaumburg Lippe) verwendet wurden. Es wird darauf hingewiesen, dass es weitere Web Technologien gibt, mit denen sich ähnliche Applikationen erstellen lassen, die aber im Folgenden nicht genannt werden.

2.1.1 HTML

HTML (HyperText Markup Language) ist eine textbasierte, rein deklarative Sprache, die zur Strukturierung von Hypertext, das ist ein Text der Informationen durch Hyperlinks (Querverweise) zwischen Hypertext-Knoten verknüpft, genutzt werden kann (Weiss, 2011). Deklarativ bedeutet, dass Elemente nur beschrieben werden, die Sprache aber keine Logik, bspw. zur automatisierten Generierung von Elementen, unterstützt. Jacobs, Le Hore und Ragett (1999) definieren HTML als die Muttersprache des World Wide Web:

„ To publish information for global distribution, one needs a universally

understood language, a kind of publishing mother tongue that all computers may potentially understand. The publishing language used by the World Wide Web is HTML (from HyperText Markup Language). “

HTML Dokumente bestimmen die Struktur und den Aufbau einer auf HTML basierenden Webanwendung, wie beispielsweise einer Website. Codebeispiel 1 zeigt, wie ein HTML5 Dokument aufgebaut ist. In Zeile 1 wird der Dokumenttyp deklariert. Im Anschluss folgt eine Reihe von Elementen, die geöffnet und wieder geschlossen werden. Sie können weitere Elemente oder Textknoten enthalten. Im Dokumentkopf, beginnend in Zeile 3 mit dem head-Element, werden Metadaten des Dokumentes, wie der Titel der Seite, definiert. Als Ergebnis wird der Titel bei der Ausführung im Browser angezeigt (siehe Abb.1). Mit Zeile 6 beginnt der Rumpf des Dokumentes. In den Zeilen 7 bis 9 wird ein paragraph- Element (<p>) angelegt, welches der eindeutigen ID „FirstParagraph“ sowie der Klasse „ObjectDescription“ (siehe 2.1.3.) zugeordnet ist.

Abbildung in dieser Leseprobe nicht enthalten

Codebeispiel 1 - HTML Beispielcode

Ruft man dieses HTML-Dokument in einem Browser auf, erhält man eine Ausgabe, wie sie in Abbildung 1 zu sehen ist.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 1 - Ergebnis von Codebeispiel 1

Seit dem 24. Dezember 1999 ist HTML 4.01 die aktuell gültige Spezifikation von HTML (Jacobs et al., 1999). Die derzeitige Candidate Recommendation

(Deutsch: Kandidat für Empfehlung) des World Wide Web Consortiums [W3C] für die nächste Generation von HTML (HTML51 ) - sie soll HTML 4.01, XHTML 1.0 und DOM HTML Level 2 ersetzen - wird nicht vor September 2014 zu einer Proposed Recommendation (Deutsch: Vorgeschlagene Empfehlung) deklariert werden ([W3C], 2013).

Die unterschiedlichen Browser unterstützen in ihrer aktuellsten Version jedoch bereits jetzt eine Vielzahl der Funktionalitäten von HTML5. Die wesentlichsten Neuerungen von HTML5 sind nach Pieters (2013) Multimedia-Elemente (Audio/Video), die direkt in Webapplikationen eingebunden werden können, das Canvas Element zur dynamischen Generierung von zweidimensionalen Formen über eine definierte Schnittstelle, die Attribute „draggable“ (Deutsch: ziehbar) und „dropzone“ (Deutsch: Abwurfzone) zur Verwendung von Drag & Drop, eine Möglichkeit zur lokalen Speicherung von Daten mittels LocalStorage sowie erweiterte Eingabefelder und Eingabevalidierung für Formulare. Durch diese Neuerungen wird HTML als Basis für Unterhaltungsplattformen und somit als Basis für reagierende Anwendungen immer geeigneter.

In HTML werden die einzelnen Elemente einer Webanwendung, die in einer Baumstruktur abgebildet werden, deklariert. Dabei gibt es unterschiedliche Elementtypen. Zusätzlich können jedem Element eine eindeutige ID und beliebig viele Klassen zugewiesen werden. Auf die deklarierten HTML Elemente können andere Technologien über DOM zugreifen (World Wide Web Consortium DOM Interest Group [W3CDIG], 2005).

2.1.2 DOM

DOM ist (Document Object Model) „ a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents ” (W3CDIG, 2005). Über DOM ist es demnach möglich, HTML Elemente dynamisch hinzuzufügen, zu bearbeiten, oder zu entfernen. Der DOM-Baum ist eine Abbildung des gesamten HTML Dokumentes in Form einer Baumstruktur. Dabei werden Knoten über hierarchische Beziehungen (man spricht von „Verwandtschaft“) zueinander in

Verbindung gestellt. Diese Verwandtschaft ermöglicht die logische Vererbung von Eigenschaften und erweitert die Zugriffsselektion. Eigenschaften eines Elementes werden - je nach Typ - in klar definierten Regeln an dessen Kind Elemente kaskadierend weiter vererbt. Erst durch DOM ist es demnach möglich, HTML mit anderen Technologien zu verbinden. Nach der offiziellen Definition (W3CDIG, 2005) ist DOM plattform- und sprachneutral. Das bedeutet, dass unterschiedliche Technologien, die für reagierende Webapplikationen nötig sind, über DOM auf HTML Elemente zugreifen können und HTML somit als Basis für die Struktur und alle auszugebenden Inhalte verwendet wird. Diese Inhalte können dann zum Zeitpunkt der Ausgabe vom Browser aus dem HTML Dokument ausgelesen werden.

Trotz der Möglichkeit, in HTML Formatierungsangaben zu definieren, versuchen Entwickler den Inhalt vom Layout zu trennen. Zu diesem Zweck werden separat eingebundene Stylesheets verwendet.

2.1.3 CSS

CSS (Cascading Style Sheets) ist eine textbasierte, deklarative Sprache zur Definition von HTML Element-Eigenschaften wie zum Beispiel Größe, Farbe oder Positionierung. Anders als HTML ist CSS nicht hierarchisch gegliedert. In CSS werden hintereinander beliebig viele Formate definiert. Ein Format wird jeweils einem oder mehreren Selektoren zugewiesen. Diese Selektoren definieren über die Schnittstelle DOM eine Summe an HTML Elementen. Alle Elemente des HTML Dokumentes, die von einem Selektor definiert werden, übernehmen das dem Selektor zugewiesene Format unter Beachtung vordefinierter Prioritätsregeln. Wird einem Element kein Format direkt oder durch Vererbung zugewiesen, so wird der Initialwert dargestellt. Der Initialwert jeder Eigenschaft kann mit dem Keyword „initial“ explizit spezifiziert werden (Wium Lie 2005).

Selektoren können unter anderem auf Elementtypen, eindeutige IDs oder generalisierende Klassen verweisen. In Codebeispiel 2 soll die Verwendung von Selektoren verdeutlicht werden.

Abbildung in dieser Leseprobe nicht enthalten

Codebeispiel 2 - CSS Beispielcode

In Zeile 1 des Codebeispiels 2 wird ein Format mit einer Schriftgröße von 10pt deklariert. Alle Elemente vom Elementtyp „p“ (für „paragraph“) weisen ihrer Eigenschaft „font-size“ (Deutsch: Schriftgröße) den Wert „10pt“ zu.

In Zeile 3 wird ein Format mit der Schriftfarbe „blue“ (Deutsch: Blau) deklariert. Die Eigenschaft „color“ (Deutsch: Farbe) aller Elemente der Klasse „ObjectDescription“ erhält dadurch den Wert „blue“.

In Zeile 5 wird ein Format mit der Schriftfarbe „black“ (Deutsch: Schwarz) deklariert. Die Eigenschaft „color“ des Elementes mit der ID „FirstParagraph“ erhält dadurch den Wert „black“.

Selektoren haben unterschiedliche Gewichtungen. Im gezeigten Beispiel befindet sich jeweils ein Typen-, Klassen- und ein ID-Selektor. Die Gewichtung dieser

Selektoren ist (in selber Reihenfolge) 1, 10 und 100 (Mihawk, 2011).

Die Gewichtung bestimmt, welches Format Priorität hat, sollten - wie beim gezeigten Beispiel die Eigenschaft „color“ - Formatierungsüberschneidungen auftreten. Das Format der höchsten Gewichtung wird schlussendlich im Browser dargestellt. Dieses Verhalten kann zur Steuerung der Ausgabe je nach Ausgabegerät genutzt werden. So kann man allgemeingültige Regeln für Elementtypen festlegen, während man gleichzeitig spezifische Regeln für Klassen oder IDs definiert. Diese überschreiben gegebenenfalls die allgemeingültigen Regeln. Um dieses Verhalten für die Erstellung reagierender Webanwendungen verwenden zu können, müssen die überschreibenden Klassen und IDs je nach Ausgabegerät individuell definiert werden, da sonst für jedes Ausgabegerät dieselben Überschreibungen wirken würden. Mit media queries2 ist es möglich, auf unterschiedliche Parameter des Ausgabegerätes zu reagieren und dementsprechend die Formate der höher gewichteten Selektoren angepasst zu definieren (Simmons, 2013). Damit können in weiterer Folge für unterschiedliche Geräte unterschiedliche Darstellungen erzielt werden.

2.1.4 Media Types, Media Groups und Media Queries

Um die Ausgabe für verschiedene Ausgabemedien anzupassen, wurden bereits in CSS 2.1 unterschiedliche „media types“ definiert. CSS identifiziert dabei zehn Eigenschaften verschiedener Interaktionsmuster welche zusammen in vier „media groups“ gruppiert werden. Diese Eigenschaften beschreiben beispielsweise, ob der Inhalt eines Dokuments in alleinstehende Teile gebrochen werden muss (wie z.B. ausgedruckte Seiten) oder ob sie in einem Stück ohne theoretischem Limit (wie in einem Webbrowser mit Scrollbalken) präsentiert werden können. Jeder media type definiert spezifische Eigenschaften für jede einzelne der vier media groups. Daher sind verschiedene CSS Eigenschaften mit einem media type gekoppelt, sodass nicht jede Eigenschaft für jeden media type zugewiesen werden kann. Monochrome displays (Deutsch: schwarz-weiß oder schwarz-grün Monitore) als Beispiel haben keine Verwendung für die CSS Eigenschaft „color“. In CSS 2.1 sind neun media types definiert: braille, embossed, handheld, print, projection, screen, speech, tty und tv (Lewis & Moscowitz, 2009). Tabelle 1, entnommen aus der CSS2.1 Spezifikation3, zeigt die Verbindung zwischen den media groups und media types:

Abbildung in dieser Leseprobe nicht enthalten

Tabelle 1 - Beziehung zwischen media groups und media types

Media types werden über das media-Attribut in einem link- oder style-Element spezifiziert oder innerhalb eines Stylesheets durch die Verwendung von

„@media“ hinzugefügt. Eine vom media type abhängige Einbindung des

Stylesheets kann in der Praxis wie folgt aussehen:

Abbildung in dieser Leseprobe nicht enthalten

In Zeile 1 aus Codebeispiel 3 wird das Stylesheet „screen.css“ eingebunden, wenn das Ausgabegerät vom media type „screen“ ist. In Zeile 2 hingegen wird das Stylesheet „handheld.css“ eingebunden, wenn das Ausgabegerät vom media type „handheld“ ist. Nicht zuletzt weil moderne Smartphones teilweise schon Full HD Resolutionen (1920 x 1080 Pixel) unterstützen, definieren Hersteller ihre Geräte nicht mehr als „handheld“ sondern „screen“, was die Notwendigkeit einer Adaption oder Erweiterung der media types hervorrief.

Mit Version 3 von CSS werden media queries eingeführt. Sie sind eine Erweiterung der in CSS 2.1 definierten media types. Sklar (2011, S. 623) beschreibt die Erweiterung der media types in der fünften Edition seines Buches „Principles of Web Design“ als eine Kombination von media types und media features: „ A Media Query contains both a media type and optional expressions that check conditions called media features. The media features include characteristics such as the width or height of the destination device. ” Eine vom media query abhängige Einbindung des Stylesheets kann in der Praxis demnach wie folgt aussehen:

Einbindung im HTML Dokument:

Abbildung in dieser Leseprobe nicht enthalten

Codebeispiel 4 - Bedingte Einbindung von Stylesheets

In Codebeispiel 4 wird das Stylesheet “iPhone.css” eingebunden, wenn die max- device-width (maximale Bildschirmbreite des Devices) 480px nicht überschreitet. Das Schlüsselwort „only“ verhindert, dass ältere Browser, die media queries nicht unterstützen, das Stylesheet dennoch laden (Powers, 2011).

Mit Hilfe von media queries kann man die für die Webapplikation relevanten Eigenschaften des Ausgabemediums sehr detailliert abfragen und entsprechende Formate definieren. Media queries werden beim Laden des Stylesheets bearbeitet. Manchmal ist es aber nötig, auch zur Laufzeit Änderungen vorzunehmen oder Parameter des Ausgabegerätes abzufragen. Zu diesem Zweck gibt es JavaScript Bibliotheken wie bspw. enquire.js4, womit jederzeit im selben Stil wie bei media queries die benötigten Parameter abgefragt und dann Folgeoperationen eingeleitet werden können. Gleich wie im media- Attribut des link-Elementes aus Codebeispiel 4, werden in JavaScript im selben Stil die Parameter des Ausgabegerätes abgefragt (Goodman et al. 2010).

Codebeispiel 5 zeigt die Verwendung von media queries mithilfe von enquire.js:

Abbildung in dieser Leseprobe nicht enthalten

Codebeispiel 5 - Media queries in enquire.js

In Zeile 1 aus Codebeispiel 5 wird die Funktion „register“ aufgerufen und als Parameter das media query übergeben. Erfüllt das Ausgabegerät die gefragten Kriterien, also eine maximale Breite von 1024px, dann wird der Anweisungsblock (hier Zeile 3) ausgeführt.

2.1.5 JavaScript

JavaScript wurde zur dynamischen Veränderung des HTML Dokumentes entwickelt. Durch JavaScript werden Interaktionen und deren Auswertung ermöglicht. Im Hauptnutzungskontext werden HTML Elemente über die Schnittstelle DOM generiert, verändert oder nachgeladen. Nach demselben Prinzip wie in CSS werden auch in JavaScript Elemente mit dem Ziel, allen betroffenen HTML Elementen gewisse Operationen zuzuweisen, über Selektoren angesprochen. Für reagierende Webapplikationen kann es beispielsweise erforderlich sein, beim Verändern der Fenstergröße des Browsers (unter anderem mit der Funktion „verkleinern“ unter Microsoft Windows) die Größe eines ausgegebenen Bildes an die neue Fenstergröße anzupassen. Folgendes Codebeispiel demonstriert diesen Anwendungsfall mithilfe des JavaScript Frameworks jQuery (siehe 3.5.1.):

[...]


1 Die HTML5-Spezifikation finden Sie unter http://www.w3.org/TR/html5/.

2 Die Spezifikation für Media Queries finden Sie unter http://www.w3.org/TR/css3-mediaqueries/.

3 Zu finden unter http://www.w3.org/TR/CSS2/media.html#media-groups

4 Mehr Information unter http://wicky.nillia.ms/enquire.js/

Details

Seiten
45
Jahr
2014
ISBN (eBook)
9783656701781
ISBN (Buch)
9783656703280
Dateigröße
1.3 MB
Sprache
Deutsch
Katalognummer
v276830
Institution / Hochschule
Fachhochschule Oberösterreich Standort Hagenberg
Note
1,0
Schlagworte
responsive web javascript css html html5 mobile first smartphone entwicklung programmierung media query

Autor

Teilen

Zurück

Titel: Responsive Web. Entwicklung von reagierenden Webanwendungen