Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

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.

typo.pngtypo.png

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.

calculator.pngcalculator.png

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.

responsive.pngresponsive.png

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.

weihnachtskalender.pngweihnachtskalender.png

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:

  • Media-Queries
  • Matrix
  • @font-face
  • Pseudoklassen (z.B. :nth-child)

Die Animationen habe ich mit jQuery und JavaScript realisiert.

http://bjoern.pisces.uberspace.de/pictureBlind/

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto:

Entstehungszeitraum

Wintersemester 2011 / 2012