Konzeption und Entwicklung einer mobilen Web-Applikation aus dem XML-Datenexport eines Redaktionssystems

Größe: px

Ab Seite anzeigen:

Download "Konzeption und Entwicklung einer mobilen Web-Applikation aus dem XML-Datenexport eines Redaktionssystems"

Petra Ilse Frank
vor 8 Jahren
Abrufe

1 Konzeption und Entwicklung einer mobilen Web-Applikation aus dem XML-Datenexport eines Redaktionssystems Thomas Hennig Wiesbaden 1

2 Gliederung 1 Einleitung 2 Anforderungen 3 Funktionsprinzip 4 Analyse der XML-Strukturen 5 XSL-Stylesheet 6 XML-Ausgabedokument 7 jquery Mobile 8 Anwendungen 9 Web-Applikation 10 Zusammenfassung 11 Ausblick 12 Weiterführende Links 2

XSL-Stylesheet 6 XML-Ausgabedokument 7 jquery Mobile 8

3 1 Einleitung Katalogpreisliste Einmal jährlich erscheint eine gedruckte Variante Pumpen und Armaturen Abbildung von Produktdaten Aktualisierung und Wartung im Schema ST4 Redaktionssystem 3

4 1 Einleitung Unterteilung der Produkte Ebene 1: Anwendungsbereich Ebene 2: Anwendungsart Ebene 3: Produkte Seitenaufbau Produktname Produktbild Zwischenabschnitte Unterüberschriften Absätze Listen Tabellen 4

Produkte Seitenaufbau Produktname Produktbild

5 2 Anforderungen Datenexport aus Redaktionssystem Möglichkeit der Abbildung von Produktdaten in einer mobilen Anwendung Datenexport: keine manuellen Eingriffe in den Datenbestand Analyse der XML-Strukturen Erzeugung eines Ausgabedokuments für den Datenaustausch Umsetzung der Web-Applikation (Prototyp) für mobile Endgeräte 5

in den Datenbestand Analyse der XML-Strukturen Erzeugung eines Ausgabedokuments

6 3 Funktionsprinzip 6

7 4 Analyse der XML-Strukturen Allgemeiner Aufbau 7

8 4 Analyse der XML-Strukturen Aufbau des Projektknotens 8

9 4 Analyse der XML-Strukturen Kapitelknoten 9

10 4 Analyse der XML-Strukturen Textknoten 10

11 4 Analyse der XML-Strukturen Bildknoten 11

12 4 Analyse der XML-Strukturen Variablenknoten 12

13 5 XSL-Stylesheet Transformation des XML-Quelldokuments mit Hilfe des XSLT-Prozessors in ein neues XML- Ausgabedokument Erzeugung einer XML-Struktur zur Verarbeitung in der Web-Applikation Verringerung von Komplexität und Datengröße 13

Ausgabedokument Erzeugung einer XML-Struktur zur

14 6 XML-Ausgabedokument 14

15 7 jquery Mobile 15

16 7 jquery Mobile 16

17 8 Anwendungen Native Applikation Plattformabhängig Hohe Kosten und hoher Zeitaufwand Zugriff auf Hardwarefunktionen Müssen installiert werden Geschwindigkeitsvorteil für 3D-Anwendungen Web-Applikation Plattformunabhängig Aufruf über den Web-Browser Entwicklung entfällt für mehrere Geräte und Betriebssysteme Einsparung von Kosten und Zeit Webentwickler kann auf vorhandene Kenntnisse zurückgreifen Aussehen und Bedienoberfläche JavaScript-Framework Hybride Applikation Vereinen der Vorteile einer Web-Applikation und einer nativen Applikation Native Applikation: Hardwarefunktionen, Web-Applikation: Inhalte im Web-Browser 17

Betriebssysteme Einsparung von Kosten und Zeit Webentwickler kann auf vorhandene Kenntnisse zurückgreifen Aussehen und Bedienoberfläche JavaScript-Framework

18 9 Web-Applikation Web-Technologien Ajax CSS HTML5 Application Cache LocalStorage jquery jquery Mobile XML 18

19 9 Web-Applikation Seitenaufbau Jede Seite besteht aus einer HTML-Datei Unterteilung der Seitenbereiche HTML5 Spezifikation: Nicht standardisierte Attribute beginnen mit einem data- Verarbeitung und Einbinden der Inhalte mit jquery und jquery Mobile 19

Spezifikation: Nicht standardisierte Attribute beginnen mit

20 9 Web-Applikation Anpassungen im <head>-bereich Einbindung der Bibliotheken im <head>-bereich der Seite Einstellungen für die Geräteauflösungen Ausblenden der Statuszeile im Browser und Aufruf über ein Icon Angabe des Pfads für eine Icon-Grafik mit Glanzeffekt ohne Glanzeffekt SplashScreen 20

Geräteauflösungen Ausblenden der Statuszeile im Browser und Aufruf über

21 9 Web-Applikation Anpassungen am Design 21

22 9 Web-Applikation Manifest-Datei.htaccess (AddType text/cache-manifest.manifest) Speicherung der kompletten Anwendungen im Application Cache Internetverbindung bei erstmaligem Aufruf und Aktualisierungen Danach Verwendung der Anwendung im Offlinemodus Entlastung von Web-Server, Datenvolumens und Geschwindigkeitszuwachs der Anwendung 22

23 10 Zusammenfassung Es konnte bewiesen werden, dass es möglich ist, Informationen aus einem Datenexport in einer mobilen Anwendung abzubilden. Überführung der Daten in eine neue XML- Struktur Verarbeitung der Informationen in der Web- Applikation Funktionsfähiger Prototyp lauffähig auf Smartphone, Tablet- und Desktop-PC Anwendungsbereiche Entwässerung / Schmutzwasser Hebeanlagen / Pumpschächte Hauswasserversorgung / Schwimmbad Regenwassernutzung Inline-Pumpen Überwachung Absperrventile Regel- und Messventile Rückschlagarmaturen und Schmutzfänger Absperrklappen Plattformen: Browser: ios, Android, Windows Phone Internet Explorer, Firefox, Chrome, Safari, Opera 23

24 11 Ausblick XSL-Stylesheet Ausbau der Inhaltsausgabe Anpassungen für das XML-Ausgabedokument in Richtung HTML-Strukturierung Web-Applikation Steigerung der Geschwindigkeit Zukünftige Aktualisierungen der JavaScript-Bibliotheken Aktualisierung der Web-Applikation beim ersten Aufruf Alphabetische Sortierung der Produkte im Menüpunkt Baureihe Erhöhung der Benutzerfreundlichkeit durch aufklappende Menüs in den Produktdetailseiten 24

25 12 Weiterführende Links jquery: jquery Mobile: Abschlussarbeit: 25

Ähnliche Dokumente

HTML5- Apps. für iphone und Android. HTML5, CSS3 und jquery Mobile: Design, Programmierung und Veröffentlichung plattformübergreifender Apps

HTML5- Apps. für iphone und Android. HTML5, CSS3 und jquery Mobile: Design, Programmierung und Veröffentlichung plattformübergreifender Apps Markus Spiering / Sven Haiges / Rene Scholze HTML5- Apps für iphone und Android HTML5, CSS3 und jquery Mobile: Design, Programmierung und Veröffentlichung plattformübergreifender Apps 5 Inhaltsverzeichnis