restore
Analoge CSS-Uhr mit JavaScript-Logik

Eine einfache analoge Uhr, realisiert mit HTML5, bestehend aus CSS3-Elementen. Die beispielhafte Zeiger-Logik wird mit JavaScript realisiert.

1
2
3
4
5
6
7
8
9
10
11
12
clock
Entwurf: Storyboard einer GUI für ein Shopsystem

Ein Storyboard einer grafischen Oberfläche für einen Online-Shop. Storyboards werden zur Visualisierung von Drehböchern för die Filmproduktion oder Werbespots und wie in diesem Fall, auch zur Skizzierung und Planung von grafischen Oberflächen för Webseiten. Die Bezeichnung för Menschen, die Storyboards kreieren, lautet Storyboard Artist. Storyboards sind Verwandt mit Comics und haben ihren Urspung bei Disney, wo sie erfunden wurden und bis heute verwendet werden. *Entwurf eines Graphical user interface (GUI) eines Online-Shop Systems.

Anwendung in der Softwareentwicklung

Der Einsatz der Storyboardtechnik ist mittlerweile eine der grundlegenden Visualisierungstechniken im Bereich Softwareentwicklung. Im Wesentlichen entspricht die Anwendung der MockUp-Technik, Papierprototypen und User Storys. Eingesetzt wird diese Technik, wie hier im Beispiel, zur Visualisierung von Benutzerschnittstellen und Oberflächen von Programmen, Apps und Webseiten. Je nach Komplexität der möglichen Aktionen, bildet das Storboard eine Folge von Bildern mit der kompletten Abfolge der auslösbaren Aktionen ab.

schedule
Um was geht es hier?

Bei der Uhr handelt es sich um eine SVG-Datei. Bei SVG-Dateien handelt es sich um die empfohlene Beschreibung zweidimensionaler Vektorgrafiken.

Eine weiße analoge Uhr, realisiert ohne Javascript. Die Zeiger bewegen sich.
Scalable Vector Graphics

SVG basiert auf XML und unterstützt Animationen (SMIL) und Manipulationen (SVG-DOM). Die Vorteile solcher Grafiken sind unter Anderem die Skalierbarkeit. Eine Grafik kann ohne Verlust (Verpixelung oder Unschärfe) scharf vergroessert und verkleidert werden.

clock
Darstellung einer Responsive Tabelle

Beispiel: Semesterplan / Stundenplan

Der tabellarische Stundenplan stellt auf mobilen Geräten und anderen kleinen Displays ein Problem dar. Eine verkleinernde Skalierung des Gesamtplans wüerde den Plan unlesbar erscheinen lassen. Diese Tabelle lässt sich nach rechts nund links wischen, sodass eine komfortablere Ansicht möglich ist.

Start - Ende Montag Dienstag Mittwoch Donnerstag Freitag
08:00 - 09:45
Medieninformatik
Itgenhorst
PC-Pool 1 0200105
- Moodle Kurs
IT-Sicherheit
Hörsaal 6 0102130
Dr. Hamburg
Lineare Algebra
Prof. Zimmer
Audimax 0100115
- Moodle-Kurs
10:00 - 11:30
Medieninformatik
Itgenhorst
PC-Pool 1 0200105
- Moodle Kurs
Visualisierung
Worszeck
PC-Pool3 0201530
- Moodle-Kurs
Lineare Algebra
Prof. Zimmer
Hörsaal 2 0100205
- Moodle-Kurs
12:15 - 13:45
Webentwicklung
Prof. Richter
Audimax 0100115
- Moodle-Kurs
Visualisierung
Worszeck
PC-Pool3 0201530
- Moodle-Kurs
Lineare Algebra
Prof. Zimmer
Hörsaal 2 0100205
- Moodle-Kurs
Algorithmen & Daten
Prof.Richter
Audimax 1000115
- Moodle-Kurs
14:00 - 15:30
Webentwicklung
Prof. Richter
Hörsaal 5 0102105
- Moodle-Kurs
Visualisierung
Worszeck
PC-Pool3 0201530
- Moodle-Kurs
Betriebssysteme
Mensa o. Bibliothek
Algorithmen & Daten
Prof. Richter
Hörsaal 1 0100215
- Moodle-Kurs
- Script
16:00 - 17:30
Algorithmen & Daten
Prof. Richter
Hörsaal 1 0100215
- Moodle-Kurs
- Script
17:45 - 19:15