Menü

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

Web Design Wintersemester 08/09

Lehrbeauftrager

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

Ziel der Veranstaltung

  • Erstellen von einfachen bis mittel-komplexen Websites mit Hilfe vom HTML und CSS
  • Mediengerechte Gestaltung (Web ≠ Print)

Aufteilung in 2 Gruppen

bei der ersten Vorlesung werden die StudentInnen in 2 Gruppen aufgeteilt, so dass jeder/jede an einem Rechner arbeiten kann…

Unterrichtszeiten

jeweils Donnerstag 12.30 bis 15.00 im Raum M012 (3 Semesterwochenstunden)

Vorlesungen

für beide Gruppen gleichzeitig!

  1. 09.10.08 Aufgaben-Überblick (Semester); Bewertungskriterien Abschlusspräsentation; Grundlagen XHTML
  2. 30.10.08 Barrierefreiheit, Suchmaschinen, Grundlagen CSS
  3. 20.11.08 CSS: Selektoren
  4. 11.12.08 Layout mit CSS
  5. 15.01.09 Interaktives CSS
  6. 05.02.09 Abschlusspräsentation

Übungstermine Gruppe A

  1. 16.10.08
  2. 06.11.08
  3. 27.11.08
  4. 18.12.08
  5. 22.01.09

Übungstermine Gruppe B

  1. 23.10.08
  2. 13.11.08
  3. 04.12.08
  4. 08.01.09
  5. 29.01.09

Fertigstellung Übungsaufgaben

  • die Übungsaufgaben müssen jeweils bis zur nächsten Vorlesung fertiggestellt werden!
  • alle eigenen Übungsaufgaben müssen bis zur Abschlusspräsentation eine gemeinsame Startseite haben
    • auch bei dieser wird eine gute Gestaltung bewertet!

Prüfungsmodus

  • Übungsaufgaben
    • mit einer gemeinsamen Startseite, von der aus alle Übungen verlinkt sind.
  • Schlussprojekt: (Thema frei, kann auch das eigene Portfolio sein)
    • muss ein einfaches Kontakt-Formular enthalten
    • muss einfaches Print-Stylesheet enthalten
    • Seiten müssen "valid" sein (xHTML & CSS)

Beurteilung

35% html/css des Schlussprojekts
25% Konzept & Design des Schlussprojekts
10% Präsentation des Schlussprojekts
15% Übungsaufgaben
15% laufende Bewertungen während des Unterrichts

Zeitplan im Detail

Vorlesung 1 (xHTML) 09.10.08

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

Vorlesung 2 (CSS Grundlagen) 30.10.08

Vorlesung 3 (CSS Selektoren) 20.11.08

  • CSS Selektoren im Detail;
    • selbstdefinierte Klassen
    • selbstdefinierte IDs
    • Document Object Model (DOM)
    • Auswahl via Attribute
  • Übungsaufgaben 3 zu den CSS-Selektoren.
    • Bitte herunterladen und in der angegebenen Reihenfolge erarbeiten!
    • Detaillierte Angaben, was zu machen ist, befindet sich jeweils im entsprechenden Verzeichnis der zip-Datei…

Vorlesung 4 (Layout via CSS) 11.12.08

  • CSS Layouts im Detail;
    • reset.css
    • relative & absolutes positionieren
    • floating & clearing
    • print-stylesheets
  • Übungsaufgaben 4 zu den CSS-Selektoren.
    • Bitte herunterladen und in der angegebenen Reihenfolge erarbeiten!
    • Detaillierte Angaben, was zu machen ist, befindet sich jeweils im entsprechenden Verzeichnis der zip-Datei…

Vorlesung 5 (interaktives CSS) 08.01.09 Termin geändert!!

  • interaktives CSS, detailliert:
    • Warum Interaktion via CSS?
    • "hover" als Auslöser
    • Image Replacement
    • Flash Image Replacement
    • Rollover-Effekte via CSS (Sprite-Technik)
    • Conditional Comments für Internet Explorer
    • Pulldown-Menüs
    • Bildergalerie mit Lightbox
    • die Übungen sind diesmal direkt im Skript enthalten!

Abschlusspräsentation 05.02.09, 12:30 bis 15:00

mehr Details dazu findet ihr hier

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

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

empfehlenswerte Websites

http://de.selfhtml.org/navigation/quickbar/index.htm (Online-Nachschlagwerk für alle xHTML-, CSS-, Javascript-Begriffe)
http://www.csszengarden.com/ (Showcase, was mit CSS möglich ist)
http://www.alistapart.com/ (Hochwertige Tutorials rund um HTML/CSS/Javascript und Webdesign allgemein)