JOURNALING THE WEB

HfG Karlsruhe – Sommersemester 2017

Timetable

DI 25.4.

Morgen

10:00
Allgemeine Einführung


Nachmittag

Warum-Up-Übung

DI 9.5.

Morgen

10:00
Technische Einführung


Nachmittag

Warum Up Tec

DI 23.5.

Morgen

10:00
Plenum
Projektarbeit mit
Einzelgesprächen

Nachmittag

Projektarbeit mit
Einzelgesprächen

DI 6.6.

Morgen

10:00
Projektarbeit mit
Support

Nachmittag

Input
Projektarbeit mit
Support

DI 20.6.

Morgen

10:00
Plenum
Projektarbeit mit
Einzelgesprächen

Nachmittag

Projektarbeit mit
Einzelgesprächen

DI 4.7.

Morgen

10:00
Projektarbeit mit Support
Videodokumentation erstellen

Nachmittag

14:00 Präsentationen
15:30 Einzel-Feedbacks

Aufgabenstellung

Ein Journal kann vieles sein: ein persönliches Tagebuch, eine standardisierte Aufzeichnungsform von Ereignissen oder auch ein täglich erscheinendes Magazin. Gemeinsam haben die unterschiedlichen Formen, dass sie den Tag als zeitliches Mass nehmen und dadurch eine Archivfunktion erfüllen. 

Wir verwenden das Konstrukt Journal, um fluide Inhalte aus dem Internet aufzuzeichnen, zu archivieren und zu kategorisieren und dafür eine neue Form zu finden. In experimentellen Prozessen suchen wir nach möglichen Aussagen in den Datenbergen und komprimieren diese unter gestalterischen Gesichtspunkten zu persönlichen Statements.

Am Anfang stehen kurze technische Einführungen, die eine Übersicht über die Möglichkeiten der automatischen Datenspeicherung und -verarbeitung aus unterschiedlichen Internet-Kanälen geben. Am Schluss stehen persönliche Projekte, die aufzeichnen, was in einem spezifischen Bereich an einem Tag im Internet passiert.


23. MAI

Aufgabe bis 6.6.

PROJEKT:
– Ausgehend von den gestalterischen Skizzen grobes Gerüst in HTML bauen
– API's zusammentragen, testen, einbauen
– Erste Formatierungen mittels CSS

Links

PROJEKTE
Laika – Interactive Font reacting to its surroundings
Wind of Boston: Data Paintings
Data Installations
postcontio.us
Free Texts: Open Source Reading Rooms
Prison Map
Officer Involved
U.S. Gun Deaths in 2013
Fatal Migrations – Data
Fatal Migrations – Output
Best of Luck with the Wall
Drone Warfare – Data
dronestre.am – Drone Strike Real Time API
Drone Strike – Output 1
Drone Strike – Output 2
Mediengruppe Bitnik: Chat Bots
Twitter Bot Encyclopedia
Ted Davis: confaBOT
Esther Hunziker: Sites
Esther Hunziker: Dump
Grafik Kiosk
Trend Generator
Anonymous Press
Ted Davis: Ultrashorttube
Ted Davis: Flickr Glitching
Ted Davis: Hide and Div
Ted Davis: Charcollage
Basil.js InDesign Script Library
Ted Davis: Everythingyoudidhasalreadybeendone
Ted Davis: Everythingyoudidhasalreadybeendone

9. MAI

Aufgabe bis 23.5.

PROJEKT:
– Inhaltiches Konzept erarbeiten für das Projekt
– Stichworte: Aufzeichnen, archivieren, kontextualisieren, vergleichen
– API's zusammentragen und testen
TEC:
– «Beispiel Arrays» umsetzen

Methoden-Sammlung

Zusammenstellung der Methoden

Technische Einführung

MAMP

MAMP: PHP FEHLERMELDUNGEN ANZEIGEN

SNIPPETS FÜR BRACKETS

1. .zip herunterladen
2. Brackets öffnen
3. Datei > Erweiterungsverwaltung
4. .zip hierhin ziehen

HTML-TEMPLATE

HTML-Template-Ordner

PHP Übung 1

Output

PHP

PHP: Beispiel Funktionen

API

Beispiele
Beispiele-Ordner herunterladen

PHP Arrays

Beispiel Arrays
Beispiel herunterladen


25. APRIL

Aufgabe bis 9.5.

Ausgangslage

1 Bild und 1 Schlagzeile aus dem RSS-Feed

Aufgabe

Verwende entweder das Bild oder die Schlagzeile als Ausgangsmaterial und ergänze, erweitere, kontextualisiere dieses Element mit Hilfe einer pseudo-automatisierten Methode. Diese Methode sollte ein Programm selbstständig ausführen können. Entwicklte 32 unterschiedliche Methoden und setze die Resultate jeweils zusammen mit dem Ausgangsmaterial auf ein A4-Blatt.

Ansatzpunkte

Suchmaschinen, Bilder-Suchmaschinen, image recognition tools, image analyse tools, Meta-Daten, ...

Links

PROJEKTE
Basic RSS-Feed
Luca Schenardi: Meyer spricht von Grafiskaffee
Tweets from Tahrir
Philipp Adrian: #oneSecond
James Bridle: The Iraq War: A Historiography of Wikipedia Changelogs
The Enron email archive
Dieter Roth: Tränenmeer
Wolfgang Ploeger: Google Image Search
Jean Boîte: #artselfie
João Rocha et Marco Bohr: Kim Jong Il Looking at Things
King Zog: Google, Volume 1
Peter Radelfinder: Falsche Fährten
Archiv Peter Piller
Camera Restricta

ARCHIVING THE INTERNET
archive.org: The Internet Archive
The New Yorker: Can the Internet Be Archived?
The New Times: How an Archive of the Internet Could Change History
Fabrikzeitung: Digital Amnesia


Tec

MAMP
MAMP INSTALLIEREN
MIT MAMP ARBEITEN

BRACKETS
BRACKETS INSTALLIEREN

CODEACADEMY
Codecademy: HTML / CSS (bis und mit «8. Images»)
Codecademy: PHP (bis und mit «6. Loops: While and Do-While»)


Styling

CSS
CSS-Referenz
Viewport Units
Viewport mit Breakpoint Beispiel
Viewport sized Typography

FONTS
Webfont Converter
Eigene Schriften einbinden
Font-Styling

LESETEXT
Basics (by Information Architects) Standards (by Information Architects)

ANIMATIONEN
CSS-Keyframe-Animationen
CSS-Typografie-Animationen

PROBLEMS?

Ivan Weiss / Michael Kryenbühl

jk@hfg-karlsruhe.de