In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Der Kurs Web Basics im aus dem Fachbereich Interface Design der FH Potsdam gab eine praktische Einführung in die Grundlagen von HTML und CSS. Im Mittelpunkt standen die Neuerungen in HTML5 und CSS3. Die theoretischen Vorlesungen wurden durch kleinere Übungen und ein Abschlussprojekt ergänzt.
Die erste Aufgabe bestand darin, Text-Formatierungsmöglichkeiten mittels CSS auszuprobieren. Eine Übersicht der möglichen Textformatierungen hielt ich für eine sinnvolle Übung, mit einem zusätzlichen Lerneffekt für mich.
http://bjoern.pisces.uberspace.de/typoCss/
In der zweiten Aufgabe stand das neue CSS3-Feature der Verläufe im Mittelpunkt und die Möglichkeit, mit dem CSS-Attribut „border“ runde Formem zu erzeugen. Ein Braun-Gerät, in diesem Fall der Taschenrechner, eignete sich durch die Reduziertheit und die geometrischen Formen hervorragend für meine Vorlage. Nur das Logo ist ein Bild. Der Rest ist reines HTML/CSS.
http://bjoern.pisces.uberspace.de/calculator/
Das Thema dieser Aufgabe waren die sog. Media-Queries, mit denen man variable Seitenlayouts erstellen kann, in abhängigkeit von der Größe des Browserfensters oder Ausgabemediums.
http://bjoern.pisces.uberspace.de/responsive/
In der letzten Übung sollten die neuen CSS3-Attribute zur Animation und Transformation von HTML-Elementen explorativ erkundet werden.
http://bjoern.pisces.uberspace.de/weihnachtskalender/
Bei meinem Abschlussprojekt entschied ich mich nach einigen experimentellen Versuchen für eine „etwas andere“ Bildergalerie, da ich dort die beiden für mich spannensten CSS3-Neuerungen der Transformationen und Media-Queries sehr gut anwenden konnte. Dabei verwendete ich unter anderem folgende CSS3-Elemente:
Die Animationen habe ich mit jQuery und JavaScript realisiert.
http://bjoern.pisces.uberspace.de/pictureBlind/