Aufgabenstellung Interaktion

Transkript

1 Aufgabenstellung Interaktion Zum Kursablauf Der erste Teil beinhaltet einen spielerischen Design- und Programmierworkshop begleitet von Theorie- und Praxisinputs. Im zweiten Teil wird eine Webseite konzipiert, entworfen und übergabereif dokumentiert. Abschliessend im dritten Teil wird dieser Entwurf von einem/einer anderen Studierenden programmiert. 1) Workshop /8.30h Aus dem Vorwort und dem 1.Kapitel von «Georges Perec, Anton Voyls, Fortgang» wählen die Studierenden nun eine längere Textpassage. (Texte werden beim Kickoff als PDF und rtf bereitgestellt). Im folgenden Workshop experimentieren die Studierenden mit HTML und CSS, entwickeln mit InDesign und Dreamweaver webbasierende, interaktive Typo- Umsetzungen ihrer Textpassage und präsentieren am Browser mit ihrem Laptop und Beamer mind. 3-6 Varianten davon am Vormittag dem ab 8.30h. 2) Konzeption & Design /12h Basierend auf einer Variante des vorangehenden Workshops entwerfen die Studierenden ein Erscheinungsbild für einen Desktop bzw. Tabletcomputer. Zum Text hinzu kommen mindestens folgende Navigationselemente: Link zur vorangehenden und folgenden Textpassage (bzw. Studierendenarbeit), Link zur Startseite, Link zum Autor (Georges Perec), Link zum Endprodukt (pdf) inkl. Credits (Gestaltung) und als -Link Credits zum Autor (Programmierung). Als Endprodukt resultieren Wireframes und Designvorgaben (als PDF) zur Weitergabe an den Programmierer. 3) Programmierung 27.3./13.30h 1.4./12h 2) wird nun von einer/einem anderen Studierenden gemäss Vorgaben gecoded. Präsentations Workshop 1.4./ ab13h 4) Präsentation 2.4./8.30h Die Ergebnisse von 2+3) werden jeweils von den Zweierteams (Desiger/in & Programmierer/in.) am Beamer gezeigt. Die Projekte müssen als Online-Fassung gezeigt werden. 1

2 Endprodukt Das Endprodukt ist eine interaktive Webseite. Alle Studierendenprojekte sind u. a. in der Reihenfolge des Haupttextes miteinander verlinkt. Vervollständigt mit Links zu weiteren, während des Unterrichtes entstandenen digitalen Produkten. STARTSEITE Aufgabenstellung + Dokumentation des Typoteiles Dokumentation des Typoteiles 1. Student/-in STARTSEITE Neben den hier dargestellten sind natürlich noch unzählige weitere Varianten des Verlinkens möglich und erwünscht. Z. B. innerhalb der Einzelarbeiten aber auch von Arbeit zu Arbeit Link zu den Arbeiten des vergangenen Studienahres: 2

3 Zwischenergebnis 1) Workshop /8.30h Mindestens 3-6 interaktive Typo-Umsetzungen der Textpassage, präsentiert auf Safari mit Laptop und Beamer, optimiert für eine Auflösung von 1024 Pixeln in der Breite. Umgesetzt ausschliesslich mit Schrift basierend auf HTML5 und CSS3. Interaktivität ist ein wichtiger Faktor der Benutzerführung und der User-Experience und darf durchaus auch Interpretations-Spielräume eröffnen. An ts, Montag, Anfang April, nachts, fang Anfang von April, nachts, von Sonntag auf Montag, folgt Dynamitan- Apri von Sonntag Sonntag Dynamitan- Dyna- auf folgt Mon- folgt l, ntag, schlag auf Dynamitanschlag, fünfundzwan- ach schlag auf auf Dynamitanschlag, fünfundzwan- 3

4 Zwischenergebnis & Deliverables 2) Konzeption & Design /12h Ein Konzept und Erscheinungsbild für eine interaktive Website* basierend auf einem Entwurf oder Entwurfsvarianten aus dem Workshop. Optimiert für Mac OSX und Safari, bei einem 1024px breiten Viewport. Abgabe via ** dieses Entwurfes als PDF-Dokument inkl. Wireframes, Sitemap, möglichst präzise kommentierte Designvorgaben, Vorgaben zum Benennen der Dokumente, allen benötigten Ressourcen (z. B. den Schriften und dem Text) usw. (alles was ein Programmierer benötigt um einen html-prototypen umzusetzen. Bitte benennt auch die PDF-Dokumente eindeutig, und internetkonform mit: der zweistelligen Nummer des Textabschnittes, eurem Vornamen und Nachnamen und dem Inhalt. Z. B: 01-vorname-nachname-design.pdf Folgende Navigationselemente müssen bei der Gestaltung berücksichtigt werden: Link zur vorangehenden und folgenden Textpassage (bzw. Studierendenarbeit), Link zur Startseite, Link zum Autor (Georges Perec auf Wikipedia), Link zum Endprodukt Teilaufgabe 2 (also zum pdf, bzw. Deliverable Teilaufgabe 2) inkl. Credits (Gestaltung) und als -Link Credits zum Autor (Programmierung). * Eine Website, was oft irreführend mit Webseite übersetzt wird, muss selbstverständlich nicht nur aus einer Seite bestehen. Sie kann verschiedenen Elementen beinhalten, welche in sich eine Einheit bilden und miteinander verknüpft sind. ** an die oder den Studierenden, welche das Projekt nun programmiert und CC an Urs Unternährer und René Gisler urs.unternaehrer@velvet.ch und rene.gisler@hslu.ch Schriften dürfen frei gewählt werden, wobei bewusst mit Lesbarkeit und User-Experience umgegangen werden soll. Insbesondere die vorgeschriebenen Navigationselemente und die Credits müssen grundlegende Kriterien der Lesbarkeit erfüllen. 4

5 Zwischenergebnis 3) Programmierung 27.3./13.30h 1.4./12h HTML-Prototyp gemäss Konzeption & Design 2) zur vorangehenden Passage... Anfang April, nachts, von Sonntag auf Montag, folgt Dynamitanschlag auf Dynamitanschlag, fünfundzwanzig an Zahl. Dann flog man Luftangriff um Luftangriff auf n Turm von Orly. Kurz darauf stand das Alhambra in Brand, das Institut Français raucht, das Hospital Saint-Louis flammt auf. Vom Anton Voyls Fortgang (Startseite) von Georges Perec (externer Link) Design (Link zum pdf) der/des Studierenden xy Programmierung von yz ( -Link) zur folgenden Passage 4) Präsentation 2.4./8.30h Die Ergebnisse von 2+3) werden jeweils in Zweierteams (Desiger/in & Programmierer/in.) am Beamer gezeigt, wobei der Schwerpunkt der Präsentation auf dem HTML-Prototyp liegt. Die Projekte müssen als Online-Fassung gezeigt werden. Pro Projekt steht Minuten zur Verfügung (eigentliche Präsentation + Diskussion, Fragen und Feedback) Die Reihenfolge der Präsentationen wird von den Studierenden am Vortag der Präsentation festgelegt und mit allen Studierenden und Dozierenden bis spätestens Mittwochabend via kommuniziert. 5) Dokumentation Zusätzlich zur herkömlichen Doku wird Teil 3) des Interaktionsprojektes filmisch dokumentiert. (Via Quicktimes Bildschirmaufnahmetool) 5