SlideShare ist ein Scribd-Unternehmen logo
1 von 4
Downloaden Sie, um offline zu lesen
IT-Zertifikat der Phil.-Fak.
Tools & Methods in Digital Humanities - Mobile Webentwicklung
Abschlussprojekt Sommersemester 2014
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.
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.
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:

Weitere ähnliche Inhalte

Andere mochten auch

PRUEBAS DE FUNCIÓN RESPIRATORIA
PRUEBAS DE FUNCIÓN RESPIRATORIAPRUEBAS DE FUNCIÓN RESPIRATORIA
PRUEBAS DE FUNCIÓN RESPIRATORIAjvallejoherrador
 
Presentacion diseño...
Presentacion diseño...Presentacion diseño...
Presentacion diseño...Marksk8
 
Umfrage und Wirkung
Umfrage und WirkungUmfrage und Wirkung
Umfrage und WirkungSven Golob
 
Actividades Físico Deportivas
Actividades Físico DeportivasActividades Físico Deportivas
Actividades Físico Deportivasnaiparragirre
 
11 2007 Einkommensgerechtigkeit
11 2007 Einkommensgerechtigkeit11 2007 Einkommensgerechtigkeit
11 2007 EinkommensgerechtigkeitWerner Drizhal
 
Erfolgs und Wirkungsmessung von Regionalentwicklungsprozesse
Erfolgs  und Wirkungsmessung von RegionalentwicklungsprozesseErfolgs  und Wirkungsmessung von Regionalentwicklungsprozesse
Erfolgs und Wirkungsmessung von Regionalentwicklungsprozesseregiosuisse
 

Andere mochten auch (8)

PRUEBAS DE FUNCIÓN RESPIRATORIA
PRUEBAS DE FUNCIÓN RESPIRATORIAPRUEBAS DE FUNCIÓN RESPIRATORIA
PRUEBAS DE FUNCIÓN RESPIRATORIA
 
Ser y estar
Ser y estarSer y estar
Ser y estar
 
Fotoprotokoll 1
Fotoprotokoll 1Fotoprotokoll 1
Fotoprotokoll 1
 
Presentacion diseño...
Presentacion diseño...Presentacion diseño...
Presentacion diseño...
 
Umfrage und Wirkung
Umfrage und WirkungUmfrage und Wirkung
Umfrage und Wirkung
 
Actividades Físico Deportivas
Actividades Físico DeportivasActividades Físico Deportivas
Actividades Físico Deportivas
 
11 2007 Einkommensgerechtigkeit
11 2007 Einkommensgerechtigkeit11 2007 Einkommensgerechtigkeit
11 2007 Einkommensgerechtigkeit
 
Erfolgs und Wirkungsmessung von Regionalentwicklungsprozesse
Erfolgs  und Wirkungsmessung von RegionalentwicklungsprozesseErfolgs  und Wirkungsmessung von Regionalentwicklungsprozesse
Erfolgs und Wirkungsmessung von Regionalentwicklungsprozesse
 

Mehr von Institute for Digital Humanities, University of Cologne

Mehr von Institute for Digital Humanities, University of Cologne (20)

Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 17.04.2019 | ...
 
Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...
Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...
Augmented City –Street Art, Embodiment, Cultural Heritage & AR | 03.04.2019 |...
 
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...
Künstliche Intelligenz und visuelle Erzählungen: Comicanalyse | 03.04.2019 | ...
 
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
 
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
Transformation mittelhochdeutscher Erfahrungswelten – vom Text zum Computerga...
 
Bit sosem 2016-wieners-sitzung-13_ki-in-games
Bit sosem 2016-wieners-sitzung-13_ki-in-gamesBit sosem 2016-wieners-sitzung-13_ki-in-games
Bit sosem 2016-wieners-sitzung-13_ki-in-games
 
Bit sosem 2016-wieners-sitzung-12_bild-iv-computer-vision
Bit sosem 2016-wieners-sitzung-12_bild-iv-computer-visionBit sosem 2016-wieners-sitzung-12_bild-iv-computer-vision
Bit sosem 2016-wieners-sitzung-12_bild-iv-computer-vision
 
Bit sosem 2016-wieners-sitzung-11_bild-iii-filter
Bit sosem 2016-wieners-sitzung-11_bild-iii-filterBit sosem 2016-wieners-sitzung-11_bild-iii-filter
Bit sosem 2016-wieners-sitzung-11_bild-iii-filter
 
Bit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationen
Bit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationenBit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationen
Bit sosem 2016-wieners-sitzung-10_bild-ii-punktoperationen
 
Bit sosem 2016-wieners-sitzung-09_bild-i-kompression
Bit sosem 2016-wieners-sitzung-09_bild-i-kompressionBit sosem 2016-wieners-sitzung-09_bild-i-kompression
Bit sosem 2016-wieners-sitzung-09_bild-i-kompression
 
Bit sosem 2016-wieners-sitzung-08_semantic-web
Bit sosem 2016-wieners-sitzung-08_semantic-webBit sosem 2016-wieners-sitzung-08_semantic-web
Bit sosem 2016-wieners-sitzung-08_semantic-web
 
Bit sosem 2016-wieners-sitzung-07_rechnerkommunikation-ii
Bit sosem 2016-wieners-sitzung-07_rechnerkommunikation-iiBit sosem 2016-wieners-sitzung-07_rechnerkommunikation-ii
Bit sosem 2016-wieners-sitzung-07_rechnerkommunikation-ii
 
Bit sosem 2016-wieners-sitzung-06_rechnerkommunikation
Bit sosem 2016-wieners-sitzung-06_rechnerkommunikationBit sosem 2016-wieners-sitzung-06_rechnerkommunikation
Bit sosem 2016-wieners-sitzung-06_rechnerkommunikation
 
Bit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conway
Bit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conwayBit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conway
Bit sosem 2016-wieners-sitzung-05_zellulaere-automaten-conway
 
Bit sosem 2016-wieners-sitzung-04_theoretische-informatik
Bit sosem 2016-wieners-sitzung-04_theoretische-informatikBit sosem 2016-wieners-sitzung-04_theoretische-informatik
Bit sosem 2016-wieners-sitzung-04_theoretische-informatik
 
Bit sosem 2016-wieners-sitzung-03_algorithmen
Bit sosem 2016-wieners-sitzung-03_algorithmenBit sosem 2016-wieners-sitzung-03_algorithmen
Bit sosem 2016-wieners-sitzung-03_algorithmen
 
Bit sosem 2016-wieners-sitzung-02_datenstrukturen
Bit sosem 2016-wieners-sitzung-02_datenstrukturenBit sosem 2016-wieners-sitzung-02_datenstrukturen
Bit sosem 2016-wieners-sitzung-02_datenstrukturen
 
Bit sosem 2016-wieners-sitzung-01_auffrischung
Bit sosem 2016-wieners-sitzung-01_auffrischungBit sosem 2016-wieners-sitzung-01_auffrischung
Bit sosem 2016-wieners-sitzung-01_auffrischung
 
Bit sosem 2016-wieners-sitzung-00_themenueberblick
Bit sosem 2016-wieners-sitzung-00_themenueberblickBit sosem 2016-wieners-sitzung-00_themenueberblick
Bit sosem 2016-wieners-sitzung-00_themenueberblick
 
Bit wisem 2015-wieners-sitzung-13_Zusammenfassung II
Bit wisem 2015-wieners-sitzung-13_Zusammenfassung IIBit wisem 2015-wieners-sitzung-13_Zusammenfassung II
Bit wisem 2015-wieners-sitzung-13_Zusammenfassung II
 

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

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