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
Unterrichtszeiten
jeweils donnerstags 9:00 bis 12:15
Unterrichtstermine & Skripte
Achtung: Termin & Inhalt kann sich noch ändern!
- 07.10.21 Grundlagen Webdesign & HTML; Aufgaben-Überblick (Semester); Bewertungskriterien → Script
- 14.10.21 Grundlagen CSS, Grafikformate fürs Web → Script, Veranstaltung findet via Zoom statt!
- 21.10.21 Semantic Web, CSS für Links, Rahmen und Hintergründe → Script, Veranstaltung findet im großen Hörsaal statt, wird aber auch via Zoom übertragen
- 28.10.21 keine Vorlesung, Einzel-Feedback zu den Übungen
- 04.11.21 Sketch, Figma, XD, CSS Selektoren, CSS Box Model, Padding & Margin, Integration von Audio & Video → Script
- 11.11.21 DOM, Desktop-Layouts via Floats & Grid-Layout → Script
- 18.11.21 Positionieren von Elementen, Media-Queries, CSS-Variablen → Script
- 25.11.21 keine Vorlesung, Einzel-Feedback zu den Übungen
- 02.12.21 Interaction, Webfonts, Webtypografie → Script
- 09.12.21 keine Vorlesung, Zwischenpräsentation
- 16.12.21 Responsive Type, Responsive Images, Transitions & Javascript → Script
- 23.12.21 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
- 13.01.22 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
- 20.01.22 Zeit, um Übungen & Portfolio fertig zu machen, Einzel-Feedback
- 27.01.22 Abschlusspräsentation
Prüfungen/Abgaben
- 09.12.21 Zwischenpräsentation: Layout des eigenen Portfolios
- 27.01.22 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
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
- Visual Code Studio 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
- Visual Code Studio 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:
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