In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Web Basics
Im Kurs ging es darum die Auszeichnungssprache HTML (besonders HTML5) und deren Layout und Formatierungssprache CSS (CSS3) zu erlernen. Es sollte eine grundlegende Auseinandersetzung mit den gestalterischen Möglichkeiten des Hypertext Markups erfolgen. In verschiedenen aufeinander aufbauenden Aufgaben wurden die Möglichkeiten von Layout, Markup , Typo, Zeichnen, Animation, Dialog und Interaktion ohne bzw. mit minimalem Einsatz von Javascript erprobt.
©Anette Giesa
Zum experimentieren mit Schrift eine Site erstellen: - mit verschiedenen Fonts, Font Größen und Stilen, Farben ... - Type, ID und Klassen Selectors verwenden - gerne mit Pseudo Elementen wie p:first-letter .... - etc…
Umsetzung http://interface.fh-potsdam.de/Users/web_basics/Anette_Giesa/schrift/schrift.html
©Anette Giesa
Divs und Positionierung üben. d.h. ein Bild „malen“, das sich zueinander fixiert verhält, aber im Browserfenster relativ zur Breite und Höhe.
Umsetzung Zur optimalen Darstellung bitte mit Safari öffnen! http://interface.fh-potsdam.de/Users/web_basics/Anette_Giesa/positionierung/wal.html
©Anette Giesa
Umsetzung Zur optimalen Darstellung bitte in Safari oder Chrome öffnen! http://interface.fh-potsdam.de/Users/web_basics/Anette_Giesa/responsive/responsive.html
©Anette Giesa
Erstellne eines Adventskalenders z.B. mit Hover-effekten, transitions und transforms.
Umsetzung http://interface.fh-potsdam.de/Users/web_basics/Anette_Giesa/adventskalender/adventskalender.html
©Anette Giesa
Das Endprojekt: - kann alle der besprochenen Techniken enthalten (Responsive, Animation...) - soll den Umfang einer Hausaufgabe überschreiten! - nach Möglichkeit eine gestalterische Aussage machen - soll am liebsten selbstrefferentiell, d.h. nicht angewandt sein - und prozedural, bzw. interaktiv sein
Umsetzung Da ich die möglichkeit mit CSS3 animieren zu könne sehr faszinierend finde, habe ich mich dazu entschieden die verschiedenen Animationseffekte, bzw. Transforms und Transitions auszutesten und diese dann in einer mit javascript realisierten viergeteilten parallel scrollenden Seite einzugliedern.
Zur optimalen Darstellung bitte mit Chrome öffnen! http://interface.fh-potsdam.de/Users/web_basics/Anette_Giesa/Endprojekt/index1.html http://interface.fh-potsdam.de/Users/web_basics/Anette_Giesa/Endprojekt/index2.html
Ein Projekt von
Anette Giesa
Fachgruppe
InterfacedesignArt des Projekts
Studienarbeit im ersten Studienabschnitt
Betreuung
Entstehungszeitraum
Wintersemester 2011 / 2012