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)

  • Amelie Heinrichmeyer
  • Annemarie Otten
  • Caroline Düsterhöft
  • Denise Aebischer Trebo
  • Florian Fluck
  • Katharina Ganzer
  • Jana Spädtke
  • Jonas Bachmann
  • Julia Emslander
  • Julia Molina Romero
  • Julian Schmidt
  • Kai Meyer
  • Katrina Günther
  • Kerstin Jakob
  • Kristin Abraham
  • Maika Eichenauer
  • Markus Erhart
  • Maximilian Bildhauer
  • Melanie Pohl
  • Rita Kocherscheidt
  • Severin Iberl
  • Silke Schröder
  • Stephanie Rieß
  • Susanne Arndt
  • Tatjana Heinz

Gruppe B (von 10.45 bis 12.15)

  • Alexandra Andreasova
  • Anna Eginger
  • Anna Rüde
  • Antonia Schmid
  • David Reichart
  • Elvira Bernhardt
  • Janina Kaphahn
  • Jasmin Hyla
  • Karin Fischnaller
  • Laura Sirch
  • Lisa Gürtner
  • Lucas Gebhardt-Seele
  • Maika Eichenauer
  • Markus Erhart
  • Maria Grimm
  • Maximilian Schachtner
  • Mehreme Rahmani
  • Moriz Oberberger
  • Nadine Stöhr
  • Natascha Baumhauer
  • Philipp Polder
  • Regina Biberger
  • Sandra Spiegelsberger
  • Sascha Wellm
  • Sophie Kindermann
  • Verena Eccardt
  • Veronika Gruhl

Angemeldete StundenInnen

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

  • Florian Fluck
  • Alexandra Andreasova
  • Kerstin Jakob
  • Markus Erhart
  • Melanie Pohl
  • Amelie Heinrichmeyer
  • Maika Eichenauer
  • Rita Kocherscheidt
  • Katrina Günther
  • Silke Schröder
  • Stephanie Rieß
  • Maximilian Bildhauer
  • Laura Sirch
  • Tatjana Heinz
  • Mehreme Rahmani
  • Susanne Arndt
  • Annemarie Otten
  • Jana Spädtke
  • Denise Aebischer Trebo
  • Julian Schmidt
  • Julia Emslander
  • Jonas Bachmann
  • Caroline Düsterhöft
  • Elvira Bernhardt
  • Kai Meyer
  • Maika Eichenauer
  • Sascha Wellm
  • Maximilian Schachtner
  • Nadine Stöhr
  • Anna Eginger
  • Maria Grimm
  • Jasmin Hyla
  • Antonia Schmid
  • Regina Biberger
  • Kristin Abraham
  • Anna Rüde
  • Lisa Gürtner
  • David Reichart
  • Natascha Baumhauer
  • Sandra Spiegelsberger
  • Karin Fischnaller
  • Philipp Polder
  • Moriz Oberberger
  • Janina Kaphahn
  • Verena Eccardt
  • Veronika Gruhl
  • Sophie Kindermann
  • Lucas Gebhardt-Seele
  • Severin Iberl
  • Katharina Ganzer
  • Julia Molina Romero
  • Botho Willer

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


Ablageort

Bitte legt Adventskalender, Übungen und Schlussprojekt bei Eurer eigenen Dropbox an folgender Stelle

  1. im Public-Ordner Eurer Dropbox
  2. in diesem Ordner die Ordner "Adventskalender", "Uebungen" und "Schlussprojekt" anlegen
  3. nicht vergessen: alle benötigten Bilder, CSS-Dateien usw. dort ablegen!
  4. Schickt mir via eMail die Adresse, damit ich mir die Sachen ansehen kann
  5. Unbedingt die Adresse (URL) noch mal auf einem anderen Rechner testen als auf dem man entwickelt hat: Gehen alle Links, sind Bilder und CSS-Dateien richtig verknüpft, funktioniert alles …

Eure Daten bitte folgendermaßen ablegen:




Nur die Arbeiten, die am 26.1.11, 12.00 auf dem Dropbox-Server zum Kopieren bereit liegen, werden bewertet!


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