Picture Blind // Web Basics WS11/12

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.

Aufgabe 1 ~ Typo

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/

Aufgabe 2 ~ Verläufe und Formen

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/

Aufgabe 3 ~ Responsive Webdesign

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/

Aufgabe 4 ~ CSS3-Transitions, -Transformations, -Matrix

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/

Abschlussprojekt ~ Picture Blind

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: