Menü

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

Web Design Wintersemester 09/10

Lehrbeauftragter

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)

Unterrichtszeiten

jeweils Donnerstag 10.00 bis 13.15 im Raum M013 (4 Semesterwochenstunden)

Vorlesungen

für beide Gruppen gleichzeitig! In Anschluss daran bleibt Zeit, zum Vortrag und den jeweiligen Übungen Fragen zu stellen…

  1. 08.10.09 Aufgaben-Überblick (Semester); Bewertungskriterien Abschlusspräsentation; Grundlagen XHTML
  2. 29.10.09 Barrierefreiheit, Suchmaschinen, Grundlagen CSS
  3. 19.11.09 schriftliche Prüfung xhtml & CSS: Selektoren
  4. 10.12.09 Layout mit CSS
  5. 14.01.10 schriftliche Prüfung CSS & Interaktives CSS
  6. 28.01.10 Abschlusspräsentation

Aufteilung in 2 Gruppen

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

  • Gruppe A dann jeweils von 10.00 bis 11.30
  • Gruppe B von 11.45 bis 13.15

Übungstermine

  1. 15.10.09
  2. 22.10.09
  3. 05.11.09
  4. 12.11.09 keine Übungen! -> World Usability Day
  5. 26.11.09
  6. 03.12.09
  7. 17.12.09
  8. 07.01.10
  9. 21.01.10

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 z.B. auch das eigene Portfolio sein)
    • muss ein einfaches Kontakt-Formular enthalten
    • muss einfaches Print-Stylesheet enthalten
    • Seiten müssen "valid" sein (xHTML & CSS)

Beurteilung

30% Übungsaufgaben
35% html/css des Schlussprojekts
20% Konzept & Design des Schlussprojekts
10% Schriftliche Tests zu HTML & CSS
5% Laufende Bewertung während des Unterrichts

Zeitplan im Detail

Vorlesung 1 (xHTML) 08.10.09

  • Aufgaben-Überblick (Semester);
  • Bewertungskriterien Abschlusspräsentation;
  • Grundlagen xHTML
  • Folien der 1. Vorlesung
    • Übungsaufgaben zu xHTML – bitte herunterladen und in der angegebenen Reihenfolge erarbeiten!

Vorlesung 2 (CSS Grundlagen) 29.10.09

Vorlesung 3 (CSS Selektoren) 19.11.09

  • schriftliche Prüfung xhtml
  • 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 (Layouts) 10.12.09

  • von der Skizze zur Website;
  • CSS Layouts im Detail;
    • reset.css
    • relative & absolutes positionieren
    • floating & clearing
    • print-stylesheets
  • Übungsaufgaben 4 zu den CSS-Layouts.
    • 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) 14.01.10

  • schriftliche Prüfung CSS
  • interaktives CSS, detailliert:
    • Warum Interaktion via CSS?
    • "hover" als Auslöser
    • Image Replacement
    • Rollover-Effekte via CSS (Sprite-Technik)
    • Conditional Comments für Internet Explorer
    • Pulldown-Menüs
    • Web Typografie

Abschlusspräsentation 28.01.10, 10:00 bis 13:15

  • beide Gruppen zusammen
  • jede(R) präsentiert seine/ihre Abschlussarbeit am Beamer
    • ca. 5 min
    • Anmerkungen zur Gestaltung
    • Hinweis auf Besonderheiten im HTML/CSS

Ablageort

Bitte legt Übungen und Schlussprojekt an folgender Stelle ab:

  1. auf "Eurem" Server: FB12_Users/WEBDESIGN_Edler-Golla_2010
  2. dort bitte jeweils einen eigenen Ordner pro StudentIn (Musterfrau_Vorname)
  3. in diesem Ordner einen Ordner "Uebungen" und einen Ordner "Schlussprojekt"
  4. nicht vergessen: alle benötigten Bilder, CSS-Dateien usw. dort ablegen!

Eure Daten bitte hier ablegen:



Nur die Arbeiten, die am 28.1. auf dem Server zum Kopieren bereit liegen, werden bewertet!

Was wird bewertet

  • alle Übungsaufgaben
    • alle Übungsaufgaben müssen eine gemeinsame Startseite haben
    • auch bei dieser wird eine gute Gestaltung bewertet!
  • Schlussprojekt: (Thema frei, kann auch das eigene Portfolio sein)
    • muss aus mindestens 3 html-Seiten bestehen
    • muss ein einfaches Kontakt-Formular enthalten
    • muss ein einfaches Print-Stylesheet enthalten
    • Seiten müssen "valid" sein (xHTML & CSS)

Zur Prüfung angemeldet

Wer nicht auf der Liste ist, möge sich bitte gleich um 10.00 bei mir melden!

Website tatsächlich online stellen

Damit Eure Website tatsächlich online gehen kann, müßt Ihr noch folgendes machen:

  1. Provider suchen: Gibt es wie Sand am Meer und in sehr unterschiedlicher Qualität! Wir sind seit 15 Jahren mit http://hetzner sehr zufrieden…
  2. Domain-Namen überlegen und prüfen, ob dieser noch verfügbar ist. Dazu bieten viele Provider direkt auf deren Website ein Suchfeld an ("Domainabfrage"), wie z.B. Hetzner
  3. Gewünschtes Paket auswählen: Wieviel Speicher braucht man? Benötigt man PHP – oder gar eine Datenbank? – Für Sites, wie von Euch in meinem Kurs präsentiert, reichen locker kleine Hosting-Pakete für ca. € 2.-/Monat
  4. Domainname zusammen mit Hosting-Paket beim Provider bestellen und auf dessen eMail warten – darin sind meist die Zugangsdaten enthalten…
  5. FTP-Programm besorgen – kostenlos: filezilla (mac/win) oder cyberduck (nur mac)
  6. Zugangsdaten der Domain im FTP-Programm eingeben und mit dem Server verbinden (Hier die Hilfe dazu von Cyberduck)
  7. Alle benötigten Dateien in der gleichen Datei-Struktur hochladen, wie auf der eigenen Festplatte
  8. Site testen: Funktionieren die Links? Schauen die Seiten so aus, wie auf der eigenen Festplatte? Sind alle Bilder sichtbar? (…)

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)