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

Angemeldete StundenInnen

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

  • Aigner Patrick
  • Bachmann Nina
  • Bantschow Nina
  • Baumann Christian
  • Baumann Eva
  • Baumann Richard
  • Becker Evgeny
  • Biberger Regina
  • Brand Teresa
  • Breuer Carola
  • Burkhardt Micha
  • Deisenhofer Rhea
  • Eichenauer Maika
  • Eichhorn Luise
  • Erb Jana
  • Erber Chantal
  • Ferreira Daniel
  • Glatzeder Fabian
  • Haller Theresa
  • Hatz Theresa
  • Heinrichmeyer Amelie
  • Henrichs Lea
  • Herbst Laura
  • Illi Caroline
  • Ispiroğlu Burak
  • Jettke Cornelis
  • Kawan Stephanie
  • Kral Natalie
  • Koenen Marco
  • König Julia
  • Lang Franziska
  • Lindt Julia
  • Lekavski Anja
  • Lorenz Sophia
  • Maieli Pamela
  • Moll Moritz
  • Müller Nele
  • Münster Claus
  • Rainer Florian
  • Römer Marie
  • Rehm Amelie
  • Rether Stephan
  • Schauer André
  • Schneider Felix
  • Schneider Julia
  • Schnell Sophie
  • Schweitl Orion
  • Steib Elisabeth
  • Voormann Maximilian

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

Gruppe 1 (9:00 – 10:30)

  • Aigner Patrick
  • Bachmann Nina
  • Bantschow Nina
  • Baumann Christian
  • Baumann Eva
  • Baumann Richard
  • Becker Evgeny
  • Biberger Regina
  • Brand Teresa
  • Breuer Carola
  • Burkhardt Micha
  • Deisenhofer Rhea
  • Eichenauer Maika
  • Eichhorn Luise
  • Erb Jana
  • Erber Chantal
  • Ferreira Daniel
  • Glatzeder Fabian
  • Haller Theresa
  • Hatz Theresa
  • Heinrichmeyer Amelie

Gruppe 2 (10:45 – 12:15)

  • Henrichs Lea
  • Herbst Laura
  • Illi Caroline
  • Ispiroğlu Burak
  • Jettke Cornelis
  • Kawan Stephanie
  • Kral Natalie
  • Koenen Marco
  • König Julia
  • Lang Franziska
  • Lindt Julia
  • Lekavski Anja
  • Lorenz Sophia
  • Maieli Pamela
  • Moll Moritz
  • Müller Nele
  • Münster Claus
  • Rainer Florian
  • Römer Marie
  • Rehm Amelie
  • Rether Stephan
  • Schauer André
  • Schneider Felix
  • Schneider Julia
  • Schnell Sophie
  • Schweitl Orion
  • Steib Elisabeth
  • Voormann Maximilian

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. Tragt die Adresse bis spätestens 31.1.12 // 24 Uhr im GoogleDoc ein, 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 …

Ihr könnt Euch aber auch gerne einen eigenen Webspace mieten – müsst mir dann aber die entsprechend URL zukommen lassen, dass ich mir Eure Sachen ansehen kann …

Eure Daten bitte folgendermaßen ablegen:





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