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.
Inhaltsverzeichnis
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
Zielsetzung & Themen
Diese Bachelorarbeit befasst sich mit der Entwicklung von reagierenden Webanwendungen (Responsive Web Applications) unter Berücksichtigung moderner technischer Anforderungen. Das primäre Ziel ist es, zukunftssichere Herangehensweisen zu erarbeiten, um Webanwendungen unabhängig von der Art des Endgerätes oder der Softwareumgebung optimal und benutzerfreundlich darzustellen.
- Herausforderungen und Problematiken bei der plattformunabhängigen Webentwicklung.
- Vergleich von Vorgehensmethoden wie "Mobile First" und "Progressive Enhancement".
- Einsatz unterstützender JavaScript-Frameworks wie jQuery und Modernizr.
- Praktische Umsetzung anhand eines konkreten Anwendungsbeispiels.
- Ausblick auf zukünftige Entwicklungen im Bereich Webtechnologien und neue Geräteklassen.
Auszug aus dem Buch
3.3 Anforderungen und Problemstellen
„Responsive“ bedeutet für eine Webapplikation, dass diese reagierend auf Hard und Software des verwendeten Devices ein optimiertes Ergebnis liefert. Dass das Web aufgrund seiner Vielseitigkeit und Flexibilität dabei eine Besonderheit ist, beschreibt Van Gemert (2013) mit den Worten:
“The Web has always been a weird, borderless, flexible medium. In the last couple of years, we've started to realize that designing for this medium is fundamentally different from the design work we've done previously. The fixed dimensions and singular ways of interacting that formed the basis of all types of media that we've worked with for centuries just don't work on the Web. This truly is a unique medium.“
Jede Benutzung einer Applikation kann mit einer Menge an Umgebungsvariablen beschrieben werden. Eine der entscheidenden Variablen ist die Bildschirmauflösung. Es gibt aber auch andere Parameter, wie z.B. den verwendeten Browser. Je nach Applikation kann es erforderlich sein, dass z.B. auch Microsoft Internet Explorer in der Version 8 oder älter unterstützt werden soll. Solche Anforderungen stellen Hindernisse für die Entwickler dar, da die Unterstützung moderner Technologien wie CSS3 oft nicht gegeben ist. Ein großes Problem für reagierende Webanwendungen ist dabei, dass media queries erst mit CSS3 eingeführt wurden und somit von älteren Browsern nicht unterstützt werden (Murphy, Clark, Studholme & Manian, 2012).
Zusammenfassung der Kapitel
1 Einleitung: Beschreibt die Motivation zur Entwicklung reagierender Webanwendungen vor dem Hintergrund der wachsenden Gerätevielfalt und definiert die Zielsetzung sowie den strukturellen Aufbau der Arbeit.
2 Grundlagen und Begriffsbestimmungen: Führt in die grundlegenden Webtechnologien wie HTML, DOM, CSS und JavaScript ein, die für das Verständnis der späteren Kapitel notwendig sind.
3 Entwicklung von Responsive Web Applications: Behandelt die spezifischen Anforderungen, Vorgehensmethoden wie "Mobile First" und den Einsatz unterstützender Frameworks bei der Konzeption reagierender Anwendungen.
4 Anwendungsbeispiel Steyrling: Veranschaulicht die theoretischen Konzepte anhand eines konkreten Praxisbeispiels, der Website der Forstverwaltung Steyrling, und diskutiert auftretende Probleme bei der Implementierung.
5 Zukunftsausblick: Erörtert zukünftige Entwicklungen im Web, neue Endgeräte im Kontext des "Internet of Things" sowie die Rolle von HTML5-Betriebssystemen.
Schlüsselwörter
Responsive Web Design, Webanwendungen, HTML5, CSS3, JavaScript, jQuery, Modernizr, Mobile First, Progressive Enhancement, Browserkompatibilität, Media Queries, Benutzererlebnis, Webtechnologien, Interface, Responsive Web Applications
Häufig gestellte Fragen
Worum geht es in dieser Bachelorarbeit grundsätzlich?
Die Arbeit thematisiert die Herausforderungen und Lösungen bei der Erstellung von reagierenden Webanwendungen, die sich dynamisch an unterschiedliche Endgeräte anpassen.
Welche zentralen Themenfelder werden behandelt?
Zentrale Themen sind die Grundlagen moderner Webtechnologien, Methoden zur flexiblen Webentwicklung (z.B. Mobile First), der Einsatz von Frameworks und die praktische Implementierung an einem Beispielprojekt.
Was ist das primäre Ziel der Arbeit?
Das Ziel ist die Erörterung zukunftssicherer Herangehensweisen, um ein bestmögliches Nutzererlebnis unabhängig vom verwendeten Endgerät zu gewährleisten.
Welche wissenschaftlichen Methoden kommen zum Einsatz?
Die Arbeit basiert auf einer fundierten Literaturrecherche und wird durch die praktische Anwendung und Dokumentation an einem konkreten Beispielprojekt, der Website der Forstverwaltung Steyrling, ergänzt.
Was wird im Hauptteil der Arbeit behandelt?
Der Hauptteil gliedert sich in die theoretischen Grundlagen, die Analyse von Entwicklungsmethoden und unterstützenden Frameworks sowie die detaillierte Betrachtung eines Praxisbeispiels inklusive der Problembewältigung.
Welche Schlüsselwörter charakterisieren die Arbeit?
Die Arbeit lässt sich durch Begriffe wie Responsive Web Design, Mobile First, Progressive Enhancement, Webtechnologien und browserübergreifende Kompatibilität charakterisieren.
Warum wird im Anwendungsbeispiel besonders auf Bilder eingegangen?
Bilder stellen in reagierenden Designs eine besondere Herausforderung dar, da sie einerseits korrekt skaliert werden müssen, ohne die Performance zu beeinträchtigen oder verzerrt dargestellt zu werden.
Welche Rolle spielt das Modernizr Framework in diesem Kontext?
Modernizr unterstützt die Methode des Progressive Enhancement, indem es Browser-Funktionen abfragt und so dabei hilft, Anwendungen trotz unterschiedlicher Browser-Fähigkeiten funktionsfähig zu halten.
Warum wird "Gracefull Degradation" für dieses Projekt nicht empfohlen?
Die Methode ist instabil, da die Anzahl der benötigten "Fall-backs" für ältere Browser bei neuen Geräten unvorhersehbar ist, weshalb der Ansatz des "Progressive Enhancement" bevorzugt wird.
- Citar trabajo
- Matthias Neuwersch (Autor), 2014, Responsive Web. Entwicklung von reagierenden Webanwendungen, Múnich, GRIN Verlag, https://www.grin.com/document/276830
