Menü

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

Web Design Wintersemester 11/12


Lehrbeauftragter

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


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)

kein Unterricht

  1. 03.11.11 kein Unterricht
  2. 10.11.11 kein Unterricht, wegen World Usability Day, München

Sonder-Unterricht

  1. 18.11.11. 15.30 - 18.30; Ersatztermin für den 10.11.11

advent_blocker_advent.zip ← komplette Demo des Advent_Blockers 05b_layout_prinzip.zip ← Float-Übung für den 18.11.11

Vorlesungen

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

  1. 06.10.11 Grundlagen Webdesign & HTML & CSS; Aufgaben-Überblick (Semester); Bewertungskriterien Abschlusspräsentation;
  2. 13.10.11 HTML Listen & Tabellen; Semantic Web & weitere HTML5-Tags; Bildoptimierung für das Web; CSS: Breite & Höhe; Links, Border & Background-Images
  3. 27.10.11 typ. Interface-Elemente; Formelemente in HTML5; CSS-Box-Modell; „reset.css“
  4. 17.11.11 Site-weite Navigation: Konventionen; CSS: Floats und Positionierungen; HTML5 Einbinden von Sounds & Movies; CSS: Parent/Child-Beziehungen;
  5. 01.12.11 Abgabe des Adventskalenders; Web-Typografie, Zeilenabstand & Zeilenlänge, Mehrspaltiger Text via CSS3, Web Fonts & Web Font Dienste, Printstylesheets, Ideen für das Abschlussprojekt
  6. 15.12.11 Auswahl via Attribut, Raster & Weißraum; CSS: Image Replacement, Sprites und interaktives CSS, Spez. CSS-Anweisungen für die Internet Explorer, …
  7. 12.1.12 Die wichtigsten Neuerungen in CSS3 und kurze Einführung in Javascript und jQuery

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


Digitales Buch der Vorlesungen

Cover des Buches „Web Design Grundlagen“

Ich habe die Vorlesungen als ein digitales Buch zusammengefasst, das bei wd1.wachenfeld-golla.de heruntergeladen werden kann.


Prüfungen/Abgaben

  1. 01.12.11 Präsentation/Abgabe des Adventskalenders
  2. 26.01.12 Abschlusspräsentation

Aufteilung in 2 Gruppen

Die Aufteilung in 2 Gruppen gilt nur an den Tagen, an denen keine Vorlesung ist! An Vorlesungstagen beginnt für alle der Unterricht um 9.00! Bitte beachtet dazu den Punkt VORLESUNGEN (etwas oben in diesem Dokument)

Gruppe A (von 9.00 bis 10.30)


Angemeldete StundenInnen

bitte schickt mir in den nächsten Tage eine eMail, damit ich Euch hier in der Liste eintragen kann!


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
  • BBEdit der große Bruder vom Textwrangler, kann einiges mehr, muss gekauft werden
  • 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
  • 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…
  • 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 …

Unser Provider

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

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