Menü

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

Web Design, Wintersemester 20/21

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, Muse und Co.
  • direkt im Source-Code
  • Web Standard konform
  • Mediengerechte Gestaltung (Web ≠ Print)

Zoom-Raum für den Kurs

hm-edu.zoom.us/my/megolla
Meeting ID: 953 689 2018
Password: 470116


Unterrichtstermine & Skripte

Achtung: Termin & Inhalt kann sich noch ändern!

  1. 08.10.20 Grundlagen Webdesign & HTML; Aufgaben-Überblick (Semester); Bewertungskriterien → Script
  2. 15.10.20 Grundlagen CSS, Grafikformate fürs Web → Script
  3. 22.10.20 Semantic Web, CSS für Links, Rahmen und Hintergründe → Script
  4. 29.10.20 keine Vorlesung, Einzel-Feedback zu den Übungen
  5. 05.11.20 Sketch, Figma, CSS Selektoren, CSS Box Model, Padding & Margin, Integration von Audio & Video
  6. 12.11.20 DOM, Desktop-Layouts via Floats & Grid-Layout
  7. 19.11.20 Positionieren von Elementen, Media-Queries, CSS-Variablen
  8. 26.11.20 keine Vorlesung, Einzel-Feedback zu den Übungen
  9. 03.12.20 Interaction, Webfonts, Webtypografie
  10. 10.12.20 keine Vorlesung, Zwischenpräsentation
  11. 17.12.20 Responsive Typo, Responsive Images, Transitions & Javascript
  12. 07.01.21 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
  13. 14.01.21 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
  14. 21.01.21 Abschlusspräsentation
  1. 15.10.20 Grundlagen CSS, Grafikformate fürs Web; → Script
  2. 22.10.20 Semantic Web, CSS für Links, Rahmen und Hintergründe → Script
  3. 29.10.20 keine Vorlesung, Einzel-Feedback zu den Übungen
  4. 05.11.20 Sketch, Figma, CSS Selektoren, CSS Box Model, Padding & Margin, Integration von Audio & Video → Script
  5. 12.11.20 DOM, Desktop-Layouts via Floats & Grid-Layout → Script
  6. 19.11.20 Positionieren von Elementen, Media-Queries, CSS-Variablen → Script
  7. 26.11.20 keine Vorlesung, Einzel-Feedback zu den Übungen
  8. 03.12.20 Interaction, Webfonts, Webtypografie → Script
  9. 10.12.20 keine Vorlesung, Zwischenpräsentation
  10. 17.12.20 Responsive Typo, Responsive Images, Transitions & Javascript → Script

Prüfungen/Abgaben

  • 10.12.20 Zwischenpräsentation: Layout des eigenen Portfolios
  • 21.01.21 Abschlusspräsentation: Abgabe aller Übungen sowie des Semesterprojektes, Präsentation des eigenen Online-Portfolios;

Angemeldete Student*innen

alle angemeldeten Studierenden haben einen eigenen Webspace auf dem FK12-Server


Unterrichtszeiten

jeweils donnerstags 9:00 bis 12:15 via Zoom:

https://hm-edu.zoom.us/my/megolla
Meeting ID: 953 689 2018
Password: 470116


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, Figma oder Adobe XD)
33% HTML/CSS des eigenen Portfolios


Benötigte Software

Ein Großteil der für diesen Kurs benötigter Software ist kostenlos und für Mac/Windows/Linux erhältlich

Macintosh

Zum Konzipieren/Gestalten/Erstellen von (Website-)Layouts:

zum Erstellen von HTML, CSS und Javascript:

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

Browser

  • Mozilla Firefox, mein Lieblings-Browser (open source), u.a. super tauglich, um Websites zu testen
  • Google Chrome, auch sehr guter Browser, trackt leider alles…

Windows

Zum Konzipieren/Gestalten/Erstellen von (Website-)Layouts:

zum Erstellen von HTML, CSS und Javascript:

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

Browser

  • Mozilla Firefox, mein Lieblings-Browser (open source), u.a. super tauglich, um Websites zu testen
  • Google Chrome, auch sehr guter Browser, trackt leider alles…

FTP-Programme

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

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

Buchenpfehlungen

  • MÜNZ, Stefan & Gull Clemens (2014): HTML5 Handbuch; ISBN 978-3645603454
  • ZELDMAN, Jeffrey, Marcotte Ethan (2009): Designing with Web Standards; ASIN B00LXNO9EG
  • FREEMAN & FREEMANN (2013): HTML und CSS von Kopf bis Fuß; ISDN 978-3-86899-934-1
  • 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
  • CLARKE, Andy (2019): Art Direction for the Web; ISBN: 978-3-945749-77-7
  • MEYER, Eric (2017): CSS: The Definitive Guide, 4th Edition; http://shop.oreilly.com/product/0636920012726.do
  • KEITH, Jeremy (2016): Resilient Web Design; https://resilientwebdesign.com/


Guter Provider (benutzen wir selbst)

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

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