Menü

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

Web Design, Wintersemester 13/14


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:

  • ohne Dreamweaver und Co.
  • direkt im Source-Code
  • Web Standard konform
  • 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. 10.10.13 Grundlagen Webdesign & HTML & CSS; Aufgaben-Überblick (Semester); Bewertungskriterien Abschlusspräsentation;  → Skript
  2. 17.10.13 Starthilfe beim Schreiben von HTML & CSS → Skript
  3. 24.10.13 HTML Listen & Tabellen; Semantic Web & weitere HTML5-Tags; Bildoptimierung für das Web; CSS: Breite & Höhe; Links, Border & Background-Images → Skript
  4. 07.11.13 typ. Interface-Elemente; Formelemente in HTML5; Klassen & ID; CSS-Box-Modell; „reset.css“ → Skript
  5. 21.11.13 Site-weite Navigation: Konventionen; CSS: Floats und Positionierungen; HTML5 Einbinden von Sounds & Movies; CSS: Parent/Child-Beziehungen; → Skript
  6. 05.12.13 Präsentation des Adventskalenders; Web-Typografie, Zeilenabstand & Zeilenlänge, Mehrspaltiger Text via CSS3, Web Fonts & Web Font Dienste, Printstylesheets, Ideen für das Abschlussprojekt → Skript
  7. 12.12.13 Auswahl via Attribut, Raster & Weißraum; CSS: Image Replacement, Sprites und interaktives CSS, Spez. CSS-Anweisungen für die Internet Explorer, … → Skript
  8. 09.01.14 Die wichtigsten Neuerungen in CSS3 und kurze Einführung in Javascript und jQuery → Skript

kein Unterricht

an folgenden Tagen fällt der Unterricht aus:

  1. 14.11.13 Fakultäts-interne Klausur

Prüfungen/Abgaben

  1. 05.12.13 Präsentation des Adventskalenders
  2. 30.01.12 Abgabe aller Übungen/Kalender/Schlussprojekt

Angemeldete StundenInnen

  • Bantschow Katharina
  • Bauer Elena
  • Bauer Steffi
  • Baumann Daniela
  • Blum Jana
  • Burnuthian Veronica
  • Büttner Christin
  • Canary Abigail
  • Chan-Mi Shin
  • Eichenauer Maika
  • Flemmer Felix
  • Fluck Florian
  • Fong Keenan
  • Fuchsberger Simon
  • Gnauck Florian
  • Goedecke Sophia
  • Gryczka Anne
  • Hauser Jakob
  • Heimerl David
  • Heinz Tatjana
  • Hockemeyer Leonore
  • Kreile Sarah
  • Kurz Philipp
  • Lechner Nora
  • Lechner Marie
  • Mair Frederik
  • Malek Daria
  • Marchner Simon
  • Molina Julia
  • Parnitzke Daniel
  • Rebele Annalena
  • Rehm Karolin
  • Reiser Lisa-Marie
  • Ritter Lena
  • Rittinger Eddy
  • Ritzer Petra
  • Rixner Thomas
  • Rühl Rebecca
  • Scholder Felix
  • Schumacher Martin
  • Semmelroth Tom
  • Simml Nikolaus
  • Singh Sandra
  • Spiegl Svenja
  • Stadler Georg
  • Stübler Janina
  • Voormann Ruscha
  • Voormann Maximilian
  • Wahler Sonja

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)

  • Bauer Elena
  • Bauer Steffi
  • Baumann Daniela
  • Chan-Mi Shin
  • Fluck Florian
  • Fong Keenan
  • Goedecke Sophia
  • Hauser Jakob
  • Heinz Tatjana
  • Hockemeyer Leonore
  • Kreile Sarah
  • Kurz Philipp
  • Lechner Marie
  • Mair Frederik
  • Malek Daria
  • Marchner Simon
  • Parnitzke Daniel
  • Rebele Annalena
  • Rehm Karolin
  • Rittinger Eddy
  • Ritzer Petra
  • Simml Nikolaus
  • Singh Sandra
  • Spiegl Svenja
  • Wahler Sonja

Gruppe 2 (10:45 – 12:15)

  • Bantschow Katharina
  • Blum Jana
  • Burnuthian Veronica
  • Büttner Christin
  • Canary Abigail
  • Eichenauer Maika
  • Flemmer Felix
  • Fuchsberger Simon
  • Gryczka Anne
  • Heimerl David
  • Lechner Nora
  • Molina Julia
  • Reiser Lisa-Marie
  • Ritter Lena
  • Rixner Thomas
  • Rühl Rebecca
  • Scholder Felix
  • Schumacher Martin
  • Semmelroth Tom
  • Stadler Georg
  • Stübler Janina
  • Voormann Maximilian
  • Voormann Ruscha

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. 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…

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