2. Historisch-Kulturwissenschaftliche Informationsverarbeitung, Universität zu Köln
IT-Zertifikat der Phil.-Fak.: Tools & Methods in Digital Humanities - Mobile Webentwicklung
Jan G. Wieners, MA - jan.wieners@uni-koeln.de
2
Aufgabe 1 – Startseite der Web App
Erstellen Sie mit jQuery Mobile eine Single Page Web App, die auf ihrer Startseite zehn
Inhalte Ihrer Wahl (zehn Schriftstellerinnen/Schriftsteller, zehn Philosophinnen/Philosophen,
zehn Superheldinnen/Superhelden, Urlaubsziele, Filme, o.ä.) in der folgenden Form anbietet:
Im Kopfbereich (header) Ihrer App ist angegeben, womit sich Ihre App beschäftigt (nicht
dargestellt ist auf dem wiedergegebenen Screenshot die Kopfzeile mit der Bezeichnung
Philosophen). Der Inhaltsbereich der Seite ist als unsortierte Liste realisiert, deren einzelne
Einträge manuell nach Anfangsbuchstaben sortiert sind. Trennende Listenelemente erhöhen
die Übersichtlichkeit der Startseite. Im fixiert dargestellten Fußbereich geben Sie bitte Ihren
Namen an.
Tipps: data-role, header, content, footer, listview, list-divider, data-transition, data-position.
3. Historisch-Kulturwissenschaftliche Informationsverarbeitung, Universität zu Köln
IT-Zertifikat der Phil.-Fak.: Tools & Methods in Digital Humanities - Mobile Webentwicklung
Jan G. Wieners, MA - jan.wieners@uni-koeln.de
3
Aufgabe 2 – Detailseite(n)
Per Klick auf ein Listenelement öffnet sich eine Detailseite, die im Kopfbereich den Namen
des verlinkten Philosophen, Urlaubszieles, Filmes, o.ä. darstellt und im Inhaltsbereich über
das entsprechende Thema informiert. Über den fixierten Fußbereich lässt sich die Startseite
erreichen. Animieren Sie die Seitenübergänge von der Start- zur Detailseite und von der
Detailseite zurück zur Startseite – kennengelernt haben wir Seitenübergänge wie slide,
slideup, pop, fade, etc.:
Aufgabe 3 - Filterung
Ergänzen Sie die Startseite Ihrer Web App um ein Eingabefeld, das es ermöglicht, die
Listeneinträge zu filtern:
Tipp: data-filter.
4. Historisch-Kulturwissenschaftliche Informationsverarbeitung, Universität zu Köln
IT-Zertifikat der Phil.-Fak.: Tools & Methods in Digital Humanities - Mobile Webentwicklung
Jan G. Wieners, MA - jan.wieners@uni-koeln.de
4
Aufgabe 4 – Gestenerkennung und Animationen
Laden Sie die JavaScript-Bibliothek hammer.js von der Projekthomepage
http://hammerjs.github.io herunter. Erstellen Sie ein neues HTML-Dokument und binden Sie
sowohl hammer.js als auch jQuery ein.
Erstellen Sie drei Div-Container in unterschiedlichen Farben, so dass Ihre Website so (oder so
ähnlich) ausschaut (der dritte Div-Container wird versteckt, wenn die Seite vollständig
geladen wurde):
Implementieren Sie die Funktionalität der Div-Container mit hammer.js und jQuery:
1. Wird die blaue Box zweimal schnell mit der linken Mousetaste angeklickt – oder auf
einem Gerät mit Touchinterface zweimal angetippt –, so wird die blaue Box zunächst
größer und anschließend wieder kleiner. Tipp: doubletap (hammer.js), animate
(jQuery).
2. Wird die rote Box nach rechts gezogen (swipe), so wird unter der roten Box eine
grüne Box langsam eingeblendet: