Menü

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

Web Design, Wintersemester 14/15

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)

Scripte

  1. 09.10.14 Grundlagen Webdesign & HTML & CSS; Aufgaben-Überblick (Semester); Bewertungskriterien Abschlusspräsentation; → Script
  2. 16.10.14 Starthilfe beim Schreiben von HTML & CSS → Script
  3. 23.10.14 Semantic Web & weitere HTML5-Tags; Bildoptimierung für das Web; CSS: Breite & Höhe; Links, Border & Background-Images → Script
  4. 06.11.14 Wireframing, CSS Selektoren, Integration von Audio & Video, CSS Box Model, Padding & Margin → Script
  5. 20.11.14 DOM, Desktop-Layouts via Floating und Positionieren → Script
  6. 04.12.14 Interaction, Media Queries, Webfonts, Verwalten des eigenen Webspace → Script
  7. 08.01.15 CSS3, Javascript-Basics, Einsatz von jQuery → Script

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)

Unterrichtszeiten für die Gruppen A & B

An Tagen, an denen Vorlesungen stattfinden, müssen beide Gruppen gleichzeitig zu Vorlesungsbeginn im Raum M014 sein!

Gemeinsame Anfangszeiten wegen Vorlesung:

23.10.14, 10:00 Uhr später wegen DOC. Release Party ab Abend davor
06.11.14, 09:00 Uhr
20.11.14, 09:00 Uhr
04.12.14, 09:00 Uhr
18.12.14, 09:00 Uhr
08.01.15, 09:00 Uhr
29.01.15, 09:00 Uhr Abschlusspräsentation

Gruppe A

30.10.14, 09:00 Uhr
13.11.14, 10:40 Uhr
27.11.14, 09:00 Uhr
11.12.14, 10:40 Uhr Zwischenpräsentation Gebrauchsanweisung
18.12.14, 09:00 Uhr
15.01.15, 09:00 Uhr
22.01.15, 10:40 Uhr

Gruppe B

30.10.14, 10:40 Uhr
13.11.14, 09:00 Uhr
27.11.14, 10:40 Uhr
11.12.14, 09:00 Uhr Zwischenpräsentation Gebrauchsanweisung
18.12.14, 10:40 Uhr
15.01.15, 10:40 Uhr
22.01.15, 09:00 Uhr

Prüfungen/Abgaben

… voraussichtlich …

11.12.14 Zwischenpräsentation
29.01.15 Abgabe aller Übungen sowie des Semesterprojektes

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.
  • Semesterprojekt: Gebrauchsanweisung
    • muss aus Text, Bildmaterial und einem kleinen „Gebrauchsanweisungs-Film“ bestehen
    • soll auf aktuellen Smartphones gut angesehen werden können
    • HTML-Code der Seite muss "valide" sein (HTML5)

Beurteilung

33% Übungsaufgaben
33% Konzept & Design des Schlussprojekts (Antetype)
33% HTML/CSS des „Gebrauchsanweisung“

empfehlenswerte Programme Macintosh

zum Erstellen von HTML, CSS und Javascript…

  • Brackets kostenloser, sehr innovativer Editor (verwenden wir im Unterricht)
  • 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 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…

  • Brackets kostenloser, sehr innovativer Editor (verwenden wir im Unterricht)
  • 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

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