Menü

Matthias Edler-Golla für:
Hochschule München, Fakultät für Design

Sommersemester 09 | Web Design

Lehrbeauftragter

Matthias Edler-Golla
Wachenfeld & Golla
meg@wachenfeld-golla.de
08031.249 222


Semesterthema: Pro Bono 2.0

Erstellen einer Website

  • für einen wohltätigen Verein
  • für ein Open-Source-Projekt
  • …

Die Website soll Elemente des Web 2.0 enthalten

  • Blogs
  • Kommentare
  • RSS-Feeds
  • …

Teilnehmerliste

  • Sabine Reiterberger
  • Barbara von Minden

…

Teilnahmebedingung

  • grundlegende Kenntnisse von HTML/CSS
    • entsprechend der Lehrinhalte des Kurses im Wintersemester
    • es ist nicht zwingend erforderlich, dass man am Kurs im Wintersemester teilgenommen hat – es müssen jedoch die benötigten Grundkenntnisse vorhanden sein!

Empfehlung

folgende Dienste/Service sind zentral für das Verständnis, was "Web 2.0" bedeutet – und am besten zu verstehen, wenn man es ausprobiert!

Ziel der Veranstaltung

Erstellen von einfachen bis mittel-komplexen, web-standard-konformen Websites

Teamarbeit

die Projekte können in Teams von maximal 3 Personen bearbeitet werden – bitte mit mir abstimmen!

Unterrichtszeiten

jeweils Donnerstag 17.30 bis 20.00 im Raum M014 (3 Semesterwochenstunden)

Referate

Jede(r) StudentIn muß im Sommersemester ein kurzes Referat (~5 -10 min, incl. Beamer-Präsentation) halten; dieses wird bewertet! Sobald ich weiss, wieviele Leute am Kurs teilnehmen, erstelle ich eine entsprechende Liste, wo sich jedeR eintragen kann/muss.

Wer kein Referat hält, muss dies in schriftlicher Form bis spätestens zur Abschluss-Präsentation nachliefern…

mögliche Referatsthemen

  • Barack Obama und sein erfolgreicher (Online-)Wahlkampf
  • http://twitter.com //was ist das, was macht man dort?
  • http://facebook.com //was ist das, was macht man dort?
  • http://digg.com //was ist das, was macht man dort?
  • http://friendfeed.com //was ist das, was macht man dort?
  • http://37signals //die Firma und ihre Produkte
  • Getting Real: (http://gettingreal.37signals.com/): Zusammenfassung dieses Buches
  • the mobile web: Erklärung es Begriffes; Konsequenzen für Webdesigner
  • the long tail: was bedeutet dieser Begriff?
  • Adobe Air: Was ist das? Welche interessanten Anwendungen gibt es dazu?
  • cloud computing: Was ist das? Was hat das mit Web 2.0 zu tun?
  • meine Lieblings-Web2.0-Website; Vorstellen und erklären, warum diese gut ist
  • offenes Thema im Bereich Web 2.0 – bitte mit mir abstimmen!
  • Themen-spezifisches Referat (je nach Thema)
    • passend zur gewählten Website…

Prüfungsmodus Schlussprojekt

  • umfangreiche Website (mind. 15 Seiten)
  • muss via Content Management System gepflegt werden können
  • Web Standard Conform
  • sollte Elemente des Web 2.0 enthalten…
  • Seiten müssen "valid" sein (xHTML & CSS)

abzugeben

  • auf CD-ROM
    • mind. 5 Screenshots mit typischen Screens
    • Projektbeschreibung/Styleguide (ca. 10 Seiten) als Acrobat-Datei
    • URL der Website
  • auf Papier
    • Projektbeschreibung/Styleguide farbig ausgedruckt

Beurteilung

50% Konzept & Design des Schlussprojekts
20% html/css des Schlussprojekts
20% Einsatz des Content Management Systems
10% Präsentation des Schlussprojekts

Vorlesungen

Im Anschluss an die Vorlesungen besprechen/diskutieren wir Eure Projekte…

Vorlesung 1 (Semesterthema & Web 2.0) 19.03.09

  • Aufgaben-Überblick (Semester);
  • Bewertungskriterien Abschlusspräsentation;
  • webZwoNull

kein Unterricht am 26.03.09

Vorlesung 2 (Einführung in Javascript & jQuery) 02.04.09

  • Was ist Javascript?
  • Was sind Javascript-Libraries?
  • Wie bindet man diese ein?
  • einige Beispiele, was man mit jQuery machen kann

kein Unterricht am 09.04.09

Vorlesung 3 (MAMP/WAMP & pmWiki) 16.04.09

(aufgrund der geringen Anwesenheit fallen die anderen Termine aus!)

Projektbesprechung 23.04.09

Projektbesprechung 30.04.09

Projektbesprechung 14.05.09

Projektbesprechung 04.06.09

Projektbesprechung 25.06.09

Abschlusspräsentation 16.07.09, 17:00 bis 19:30

empfehlenswerte Programme Macintosh

zum Erstellen von HTML, CSS und Javascript…

  • Textwrangler kostenloser, umfangreicher Texteditor
  • BBEdit der große Bruder vom Textwrangler, kann einiges mehr, muss gekauft werden
  • Textmate ebenfalls ein Texteditor, sehr mächtig und bei Entwicklern beliebt, muss gekauft werden
  • CSSEdit Editor speziell für CSS; eines meiner Lieblings-tools! (ca. € 30.-)
  • Coda Editor für HTML, CSS, Javascript, PHP…; klasse Benutzeroberfläche, für das, was er kann, sehr günstig (ca. $ 99.-)
  • aptana kostenloser, sehr mächtiger Editor für HTML, CSS, Javascript, PHP…
  • Freeruler, praktisches, schwebendes Lineal
  • Smallscreen, simuliert kleinere Bildschirme

empfehlenswerte Programme Windows

zum Erstellen von HTML, CSS und Javascript…

  • pspad kostenloser, guter Editor für HTML, CSS, Javascript, PHP…
  • aptana kostenloser, sehr mächtiger Editor für HTML, CSS, Javascript, PHP…

Buchenpfehlungen

Webdesign

MÜNZ, Stefan (2004): HTML-Handbuch, Studienausgabe; ISBN 978-3772370069
ZELDMAN, Jeffrey (2006): Designing with Webstandards; ISBN 978-0321385550
KRUG, Stephe (2005): Don't Make Me Think! A Common Sense Approach to Web Usability; ISBN 0321344758
CLARKE, Andy (2006): Transcending CSS: The Fine Art of Web Design; ISBN 0321410971
CEDERHOLM, Dan (2007): Bulletproof Web Design; ISBN 978-0321509024
MEYER, ERIC (2006): CSS: The Definitive Guide; ISBN 978-0596527334

Web 2.0

PALFREY, John & GASSER, Urs (2008): Born Digital: Understanding the First Generation of Digital Natives; ISBN 0465005152
RIGBY BEN (2008): Mobilizing Generation 2.0: A Practical Guide to Using Web2.0 Technologies to Recruit, Organize and Engage Youth; ISBN 0470227443

empfehlenswerte Websites

http://de.selfhtml.org/navigation/quickbar/index.htm (Online-Nachschlagwerk für alle xHTML-, CSS-, Javascript-Begriffe)
http://www.cssbeauty.com/ (Tips rund ums Webdesign)
http://www.alistapart.com/ (Hochwertige Tutorials rund um HTML/CSS/Javascript und Webdesign allgemein)

http://37signals.com/
http://www.digitalnative.org/