IFD:WebApps

From Medien Wiki

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

Erster Termin und Kick-Off-Veranstaltung mit Platzvergabe im Kurs:
mit Aufgabenstellung am:
 Mittwoch, den 20.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 variety of new technologies, the availability of open-source server applications (blogs, forums or even shop systems) and a valid design for a multitude of different terminals (eg. PCs, netbooks, mobile phones, netpads, TV-sets...) require 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 will lay the foundations 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 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)
  • Name, Semester, Matrikel-Nummer, Prüfungsordnung (z.B. PV29), gültige E-Mail Adresse für die Antwort

Diese Liste dient nur der Orientierung. Wir legen bei der Auswahl der Bewerber Augenmerk auf folgende Punkte:

  • Motivation
  • Idee (interessantes Projekt)
  • Bereitschaft zum Erlernen von Programmiersprachen
  • Grafische und designerische Fähigkeiten
  • Künstlerische Fragestellung und/oder kommerzielles Potential

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 Projektmodulen 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.

Die Gesamtbewertung setzt sich zusammen aus:

  • 20% Anwesenheit, Mitarbeit
  • 20% begleitende Dokumentation, Zwischendokumentation/-abgabe
  • 60% Abgabe mit folgenden Kriterien:
    • Mediale Relevanz (Relevanz des Projekts im Bezug auf das Medium Internet, Bildschirm, mobil, digital etc...)
    • Kommunikationsziel (inhaltliche, grafische und repräsentative Umsetzung in Bezug auf den Zweck der Seite)
    • Interaktion / Interface
    • Barrierefreiheit (hierzu zählt auch die Anzeige auf unterschiedlichen Endgeräten), bzw. mindestens Bewusstsein über möglicherweise auftretende Probleme
    • Technische Umsetzung
    • Anwendung gelernter Inhalte und Hilfe zur Selbsthilfe
  • + 10% Wiki-Bonus (bitte bei Michael kurz Bescheid geben)

Hinweis: Manche der Kriterien können natürlich nur in Verbindung mit der begleitenden Dokumentation bewertet werden.


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:

Archiv

Laufende Dokumentation der Kursprojekte der vergangenen Semester:

Syllabus

Vorläufiger Terminplan

  1. 20.10. KICK-OFF Veranstaltung
  2. 27.10. HTML
  3. 03.11. CSS
  4. 10.11. CSS
  5. 17.11. JavaScript
  6. 24.11. JavaScript
  7. 01.12. JavaScript
  8. 08.12. Projektbesprechungen
  9. 15.12. Projektbesprechungen
  10. 05.01. jQuery, jQueryUI
  11. 12.01. AJAX
  12. 19.01. HTML5 & JavaScript, Canvas, processingjs
  13. 26.01. Zusammenfassung
  14. 02.02. Projektvorstellung (alle)
  15. 15.03. Abgabe der Projekte (Dokumentation im Wiki, Link zur Seite bzw. Code-Abgabe)

Links

Hauptthemen

Allgemeines

Siehe auch



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.

Retrieved from "https://www.uni-weimar.de/kunst-und-gestaltung/wiki/index.php?title=IFD:WebApps&oldid=35206"