IFD:WebApps

Werkmodul
Lehrperson: Michael Markert
Bewertung: 6 ECTS, 2 SWS
Termin: Mittwochs, 11:00 bis 12:30 Uhr
Ort: Bauhausstraße 11, LiNT Pool oder
Marienstraße 7b, Raum 104

Erster Termin und Kick-Off-Veranstaltung mit Platzvergabe im Kurs:
mit Aufgabenstellung am:
Mittwoch, den 13.10.2010, 11 Uhr (könnte etwas länger dauern)
in der Bauhausstr. 11, LiNT Pool
siehe auch #Anmeldung

Beschreibung

Das Werkmodul richtet sich an Studierende gestaltender Studiengänge (künstlerische Prüfung, kein wiss. Modul), die eine Idee (gerne auch Teilbereich eines größeren Projektes) aus den folgenden Bereichen umsetzen möchten:

• Netzkunst (Interaktion, generative Gestaltung)
• WebApps (Applikationen für mobile Endgeräte)
• Dynamische Webseiten (CMS, Blog, Social Media ...)

Eine Vielzahl neuer Technologien, die Verfügbarkeit von Open-Source Server-Anwendungen (Blogsoftware, Foren, Shopsysteme usw.) sowie eine unüberschaubare Vielfalt an unterschiedlichsten Endgeräten (neben dem Desktop auch Netbooks, Mobiltelefone, PDAs, Netpads, TV-Geräte...) erfordern vom Gestalter ein Verständnis der zugrundeliegenden Technologien, um den Herausforderungen an dynamisch erzeugte Inhalte und unterschiedliche Darstellung in Endgeräten gerecht zu werden.

Folgende Themen werden behandelt: - Einführung in die layoutbeschreibenden Formate HTML/CSS - Clientseitige Programmierung mit JavaScript - Einbinden von JS-Frameworks - Serverseitige Programmierung mit PHP Dabei steht nicht die Beherrschung komplexer proprietärer Anwendungsprogramme wie z.B. Dreamweaver im Vordergrund, sondern der Versuch, die Terminologie und Zusammenhänge soweit verständlich zu machen, dass die Teilnehmer anschließend mit jedem Programm ihrer Wahl arbeiten können. Ebenso wichtig ist die Fähigkeit, Dokumentationen verstehen und nutzen zu können.

Gut gestaltete Webinterfaces beziehen technische Möglichkeiten mit ein und erfordern Optimierung für Endgeräte. Das beginnt bei unterschiedlichen Displaygrössen, geht über prinzipielle Fragen der Interaktion und Präsentation und endet bei grundsätzlichen Fragen der Bedienbarkeit, z.B. bei Geräten mit Touchscreen (kein Rollover, große Schaltflächen etc).

Weitere Themen sind die Vorstellung von HTML5, CSS3 und JavaScript (Einführung in JS), hier insbesondere die Nutzung gängiger JavaScript Libraries wie z.B. jQuery.

English description

A bunch of new technologies, the availability of open-source server applications (blogs, forums or even shop systems). Designing for a the multitude of different terminals (eg. PCs, netbooks, mobile phones, netpads, TV-sets...) requires a deep understanding of the underlying technology. We will first look at the layout description formats HTML/CSS, then concentrate on the usage of programs on the server (PHP).

This course (in German language) is intended for students of all design oriented study programmes, who are planning to work on:

• Net Art (Interaction, Generative Design...)
• WebApps (applications for mobile devices...)
• Dynamic Web Content (CMS, Blog, Social Media...)

This elementary course is founding a basis for later advanced courses around web technologies, interactive systems and wireless communication (e.g. with mobile devices like the iPhone, Android or JAVA-enabled cell phones) and is open for all students from faculties M and G.

To enroll, you have to come to the Kick-Off presentation and hand in a short concept of your idea (see #Anmeldung. The number of enrolled students for this course has a maximum of 20.

Themen

• Terminologie (Client, Server, kryptische Akronyme wie UDP und TCP... HTML is not a programming language...)
• Clientseitige Technologie wie HTML, CSS, JavaScript
• Serverseitige Technologie wie PHP, Installation von Open Source Anwendungen (z.B. Wordpress...) und Templateerstellung
• Entwicklung via XAMP (Lokaler Server für X-Apache-MySQL-PHP)
• Grundlegende Einführung in Programmiersprachen anhand von JavaScript und PHP
• Trennung von Funktion und Layout
• Fluide Designs für die unterschiedlichsten Endgeräte
• Kommunikationsstrategien für interaktive Systeme

Dieser Einführungskurs bildet eine elementare und wichtige Grundlage für spätere Aufbaukurse zu fortgeschrittenen Themen rund um Webtechnologien (direkt/indirekt), interaktive Systeme und drahtlose Kommunikation (z.B. mit mobilen Endgeräten wie dem iPhone, Android oder Java-fähigen-Handys).

Voraussetzungen

Aufgrund der eingereichten Konzepte wird dann bis zum 17.10. entschieden, wer in den Kurs kommt. Es werden keine Teilnehmer aufgenommen, die nicht bei der Kick-Off Veranstaltung waren.

Der Kurs kann mit 2 SWS kein umfassendes Wissen in allen speziellen Teilgebieten vermitteln, sondern soll einer schnellen Übersicht und groben Orientierung dienen. Deshalb ist die Bereitschaft der Teilnehmer, sich weitergehend und selbstständig (auch über die 2 SWS der Vorlesung hinaus!) in bestimmte Teilbereiche einzuarbeiten, von elementarer Voraussetzung!

Anmeldung

Aufgrund der zu erwartenden hohen Nachfrage, wird es eine Kick-Off Veranstaltung geben, die für alle Interessierten offen steht. Neben einer Vorstellung der Inhalte und Ziele, muss jeder am Ende der Einführungsveranstaltung ein Kurzkonzept seiner Arbeit einreichen, die er im Rahmen dieses Kurses umsetzen möchte!

Kurz-Konzept (max. 2 DIN-A4 Seiten):

• Kurzbeschreibung (worum geht es?)
• Ziel (was soll mit dem Projekt erreicht werden?)
• Inhalt (was wird kommuniziert?)
• Technik (welche Technik / Software / Sprache soll zum Einsatz kommen?)
• Layout-Scribbles (ca. 2 bis 10 kleine Layout-Scribbles, ca. 5 cm breit)

Die maximale Anzahl der Teilnehmer ist 20.

Leistungsnachweis

Zum Leistungsnachweis ist erforderlich:

• Regelmäßige(!) und aktive(!) Teilnahme
• Eigenständiges Arbeiten und selbstständiges Anwenden der im Kurs vermittelten Themen
• Bereitschaft zur Auseinandersetzung mit Programmierung und Quellcode
• Umsetzung einer Projektidee (Anwendung gelernter Inhalte am Beispiel, also z.B. (Wordpress-)Template, Netzkunst-Projekt, WebApp, mobile WebApp ...). Eine Verknüpfung mit netzbasierten Projekten ist möglich und erwünscht.
• Zwischenabgabe (Working Dummy)
• Endabgabe (Umsetzung)
• Kurzdokumentation im Medien-Wiki

Die Endabgabe wird laut Prüfungsordnung als "künstlerische Prüfung" vom Dozenten und einem Zweitprüfer bewertet.

Nicht ausreichend sind Abgaben, wie:

• reine HTML/CSS Seiten ohne Programmiereinsatz (also weder JavaScript noch PHP)
• reine Layouts oder Mockups

Zielgruppe

Bachelor-Studierende gestaltender Studiengänge sowie der Medieninformatik

Projekte

Laufende Dokumentation der Kursprojekte:

• Kursprojekte WS10

Archiv

Laufende Dokumentation der Kursprojekte der vergangenen Semester:

• Kursprojekte WS09

Syllabus

Vorläufiger Terminplan

1. 13.10. KICK-OFF Veranstaltung
2. 20.10.
3. 27.10.
4. 03.11.
5. 10.11.
6. 17.11.
7. 24.11.
8. 01.12.
9. 08.12.
10. 15.12.
11. 05.01.
12. 12.01.
13. 19.01.
14. 26.01.

Links

Hauptthemen

• HTML inkl. HTML5
• CSS inkl. CSS3
• JavaScript
• JavaScript Frameworks, Vorstellung von jQuery
• PHP
• PHP/MySQL Webapplications

Allgemeines

• Internet - Grundsätzliches, Terminologie
• Netzstrukturen
• Netzkunst
• SCC-Services der Bauhaus-Universität (z.B. HTML Webspace!)
• Suchmaschinenoptimierung
• MySQL
• How to search Google (or nearly any other search engine)
• Was ist ein Hacker?
• Hacker-Ethik - Die goldenen Regeln für Administratoren und Hacker
• Recht und Internet - Urheberrecht, Impressumspflicht usw...
• HTML Hell - You know you're in Design Hell when you see...

Siehe auch

• Web-Technologien - Lecture Notes (PDF) der Mediensysteme / Bauhaus Universität-Weimar

---

Diese Seite ist Teil der Werkmodule Grundlagen der Webprogrammierung und WebApps - Grundlagen Webprogrammierung von Michael Markert für Interface Design / Fakultät Medien an der Bauhaus-Universität Weimar.