Menü

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

Web Design, Wintersemester 12/13

Kursleiter

Matthias Edler-Golla
matthias.edler-golla@hm.edu

Ziel der Veranstaltung

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

Computer

Wer die Möglichkeit hat, seinen eigenen Laptop mitzubringen (und mit diesem möglichst auch noch online gehen zu können), soll diesen bitte mitnehmen …

Ein Großteil der für diesen Kurs benötigter Software ist kostenlos und für Mac/Windows/Linux erhältlich

Unterrichtszeiten

jeweils Donnerstag 9.00 bis 12.15 im Raum M014 Maclabor (4 Semesterwochenstunden)

Vorlesungen

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

  1. 11.10.12 Grundlagen Webdesign & HTML & CSS; Aufgaben-Überblick (Semester); Bewertungskriterien Abschlusspräsentation;  → Skript
  2. 18.10.12 Starthilfe beim Schreiben von HTML & CSS → Skript
  3. 25.10.12 HTML Listen & Tabellen; Semantic Web & weitere HTML5-Tags; Bildoptimierung für das Web; CSS: Breite & Höhe; Links, Border & Background-Images → Skript
  4. 08.11.12 15.11.12 typ. Interface-Elemente; Formelemente in HTML5; Klassen & ID; CSS-Box-Modell; „reset.css“ verschoben wegen Exkursion KD, 3.Sem. nach Wien … → Skript
  5. 22.11.12 Site-weite Navigation: Konventionen; CSS: Floats und Positionierungen; HTML5 Einbinden von Sounds & Movies; CSS: Parent/Child-Beziehungen; → Skript
  6. 06.12.12 Web-Typografie, Zeilenabstand & Zeilenlänge, Mehrspaltiger Text via CSS3, Web Fonts & Web Font Dienste, Printstylesheets, Ideen für das Abschlussprojekt → Skript
  7. 13.12.12 Abgabe des Adventskalenders; Auswahl via Attribut, Raster & Weißraum; CSS: Image Replacement, Sprites und interaktives CSS, Spez. CSS-Anweisungen für die Internet Explorer, … → Skript
  8. 10.01.13 Die wichtigsten Neuerungen in CSS3 und kurze Einführung in Javascript und jQuery → Skript

Achtung: Termine & Inhalte können sich noch ändern!

Prüfungen/Abgaben

  1. 13.12.11 Präsentation/Abgabe des Adventskalenders
  2. 24.01.12 Abschlusspräsentation 31.01.12 Abgabe aller Übungen/Kalender/Schlussprojekt via GoogleDoc

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 Print-Stylesheet enthalten
    • Mindestens 4 HTML-Seiten …
    • Seiten müssen "valid" sein (HTML5

Beurteilung

30% Übungsaufgaben
25% Adventskalender
25% HTML/CSS des Schlussprojekts
20% Konzept & Design des Schlussprojekts

empfehlenswerte Programme Macintosh

zum Erstellen von HTML, CSS und Javascript…

  • Textwrangler kostenloser, umfangreicher Texteditor
  • Smultron, sehr günstiger (€ 3,99.–) Text-Editor mit Syntax-Highlighting
  • Textmate ebenfalls ein Texteditor, sehr mächtig und bei Entwicklern beliebt, muss gekauft werden
  • Sublime Text, toller Text-Editor mit vielen interessanten Features; kann kostenlos getestet werden, muss dann aber auch gekauft werden … (ca. $ 59.-)
  • Coda Editor für HTML, CSS, Javascript, PHP…; klasse Benutzeroberfläche, mein Lieblingstool für HTML/CSS/Javascript (ca. $ 75.-)
  • aptana kostenloser, sehr mächtiger Editor für HTML, CSS, Javascript, PHP…
  • xScope, xScope is a powerful set of tools that are ideal for measuring, aligning and inspecting on-screen graphics and layouts

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…

FTP-Programme

Zum Hochladen Eurer Dateien benötigt Ihr ein spezielles Programm – ich empfehle folgende:

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
FREEMAN & FREEMANN (2006): HTML mit CSS und XHTML von Kopf bis Fuß ISBN 978-3897214538;

empfehlenswerte Websites

http://www.dontfeartheinternet.com/ (nett gemachte Video-Tutorials über Webdesign, HTML & CSS)
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)
http://interact.webstandards.org/curriculum/front-end-development/web-design-1/?overview (Interact, Webdesign 1)
http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/ (The Web Standards Curriculum; Opera Developer Community)
http://designingfortheweb.co.uk/book/ (Kostenlose Online-Version eines hervorragenden Buches für Designer von Mark Boulton…)

Kostenloses Web-Hosting

… leider immer mit viel Werbung verbunden …

Guter Provider (benutzen wir selbst)

…€ 1,90.– pro Monat Hosting-Gebühren, zuverlässig, Öko-Strom …

http://www.hetzner.de/hosting/produkte_webspace/level1