Menü

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

Web Design, Wintersemester 16/17

Kursleiter

Matthias Edler-Golla
matthias.edler-golla@hm.edu

Ziel der Veranstaltung

Erstellen von einfachen bis mittel-komplexen Websites mit Hilfe vom HTML, CSS und Javascript:

  • ohne Dreamweaver und Co.
  • direkt im Source-Code
  • Web Standard konform
  • Mediengerechte Gestaltung (Web ≠ Print)

Scripte

  1. 13.10.16 Grundlagen Webdesign & HTML; Aufgaben-Überblick (Semester); Bewertungskriterien; → Script
  2. 27.10.16 Grundlagen CSS, Grafikformate fürs Web; → Script
  3. 03.11.16 Semantic Web, CSS für Links, Rahmen und Hintergründe; → Script
  4. 10.11.16 CSS Selektoren, CSS Box Model, Padding & Margin, Integration von Audio, Video & Cansas → Script
  5. 24.11.16 DOM, Desktop-Layouts via Floating und Positionieren → Script
  6. 08.12.16 Interaction, Media Queries, Webfonts, Webtypografie → Script
  7. 21.12.16 Responsive Typo, Responsive Images, Transitions & Javascript → Script

Computer

Wer die Möglichkeit hat, seinen eigenen Laptop mitzubringen (und mit diesem auch online gehen kann), kann dies gerne machen …

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 M202a (für Vorträge und Präsentationen) und M014 (für die Übungen) (4 Semesterwochenstunden)

kein Unterricht

20.10.16 – an diesem Tag findet die push-conference statt!
17.11.16 – DGTF Tagung in Dessau

Prüfungen/Abgaben

15.12.16 Zwischenpräsentation;
19.01.17 26.01.17, 9:00 Uhr Abgabe aller Übungen sowie des Semesterprojektes, Präsentation des eigenen Online-Portfolios;

Fertigstellung Übungsaufgaben

  • die Übungsaufgaben sollten 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: eigenes Portfolio
    • muss aus Text & Bildmaterial 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 (erstellt mit Sketch bzw. Adobe Produkt)
33% HTML/CSS des eigenen Portfolios

empfehlenswerte Programme Macintosh

zum Erstellen von HTML, CSS und Javascript…

  • Brackets kostenloser, sehr innovativer Editor (verwenden wir im Unterricht)
  •  Atom kostenloser, sehr leistungsfähiger Editor
  • Coda Editor für HTML, CSS, Javascript, PHP…; klasse Benutzeroberfläche, mein Lieblingstool für HTML/CSS/Javascript (ca. $ 75.-)

empfehlenswerte Programme Windows

zum Erstellen von HTML, CSS und Javascript…

  • Brackets kostenloser, sehr innovativer Editor (verwenden wir im Unterricht)
  • Atom kostenloser, sehr leistungsfähiger Editor

FTP-Programme

Zum Hochladen Eurer Dateien benötigt Ihr ein spezielles Programm – ich empfehle folgende:

  • Cyberduck – kostenlos, nur für Macs und Windows
  • FileZilla – kostenlose, Windows, Macs & Linux
  • Transmit – kostenpflichtig, nur für Macs

Buchenpfehlungen

  • MÜNZ, Stefan & Gull Clemens (2014): HTML5 Handbuch; ISBN 978-3645603454
  • ZELDMAN, Jeffrey, Marcotte Ethan (2009): Designing with Web Standards; ASIN B00LXNO9EG
  • KRUG, Stephe (2014): Don't Make Me Think! A Common Sense Approach to Web Usability; ISBN 978-0321965516
  • CLARKE, Andy (2015): Hardboiled Web Design; ISBN 978-3-945749-37-1
  • MEYER, Eric (2016): CSS: The Definitive Guide ISBN 978-1-4493-9319-9

empfehlenswerte Websites

Guter Provider (benutzen wir selbst)

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

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