IT-Zertifikat der Phil.-Fak.
Tools & Methods in Digital Humanities - Mobile Webentwicklung
Abschlussprojekt Sommersemester...
Historisch-Kulturwissenschaftliche Informationsverarbeitung, Universität zu Köln
IT-Zertifikat der Phil.-Fak.: Tools & Met...
Historisch-Kulturwissenschaftliche Informationsverarbeitung, Universität zu Köln
IT-Zertifikat der Phil.-Fak.: Tools & Met...
Historisch-Kulturwissenschaftliche Informationsverarbeitung, Universität zu Köln
IT-Zertifikat der Phil.-Fak.: Tools & Met...
Upcoming SlideShare
Loading in …5
×

IT-Zertifikat der Phil.-Fak. Tools & Methods in Digital Humanities - Mobile Webentwicklung -- Abschlussprojekt Sommersemester 2014

395
-1

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
395
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

IT-Zertifikat der Phil.-Fak. Tools & Methods in Digital Humanities - Mobile Webentwicklung -- Abschlussprojekt Sommersemester 2014

  1. 1. IT-Zertifikat der Phil.-Fak. Tools & Methods in Digital Humanities - Mobile Webentwicklung Abschlussprojekt Sommersemester 2014
  2. 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. 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. 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:

×