Web-Science-Labor der Hochschule Hannover
Am Freitag, 11. Oktober 2019 ist es soweit:
Unsere Veranstaltung “InfoInMotion2019: Information in Transformation” findet im DesignCenter auf der Expo Plaza 2 statt. Auch das WebLab ist dabei und stellt einige seiner besten, studentischen Arbeiten vor.
Mehr zu InfoInMotion2019 samt Online-Anmeldung und Programm finden Sie auf der Website des Studiengangs Informationsmanagement.
Wir freuen uns auf ihren Besuch!
🙂
Im Rahmen des 100jährigen Bauhaus Jubiläums 2019 sind Anja Preusse und Sarah Gehrmann vom WebLab an der Konzeption und Realisation von multimedialen Angeboten für die Sonderausstellung Ausdruckstanz und Bauhausbühne im August Kestner Museum beteiligt. In Kooperation mit der Abteilung Design und Medien und dem August Kestner Museum hat das WebLab ein kleines interaktives Spiel als Progressive Web App (PWA) mit HTML5 und JavaScript entwickelt, bei dem Tänzerinnen unterschiedliche Bauhaus-Kostüme angezogen werden können:
Amy Linh Hoang hat ihre Bachelorarbeit mit dem Titel „Konzeption und Realisierung eines interaktiven Storytelling anlässlich des Bauhausjubiläums“ bereits 2018 abgeschlossen und ein sehenswertes, interaktives Storytelling mit dem Titel „Oscar Schlemmers Weg zum Bauhaus“ mittels JavaScript, CSS3 und HTML5 erstellt.
Im Sommersemester 2018 sind über eine Lehrkooperation zwischen den Abteilungen Design und Medien und Information und Kommunikation der Fakultät 3 im Rahmen des Kurses „Entwicklung von Multimediasystemen 2“ (Leitung Alexandra Panzert und Viktor Eisenstadt) weitere digitale und interaktive Angebote zum Thema Bauhaus entstanden wie z.B. die Folgenden:
Modulverantwortliche und Initiatorin der WebLab-Bauhaus-Kooperation ist Prof. Steinberg.
Autor: Arlind Ukaj
Die fertige Arbeit finden sie hier.
Als Grundkonzept dient ein One-Pager, die Seitenbesucher mit intuitiven Mitteln durch die Seite zu führen. Thematisch informiert die Seite über die wichtigsten Personen und Bauwerke des Bauhauses.
Das Template der Seite ist eine komplette Eigenkreation und inspiriert sich anderen Bauhaus Webseiten sowie Anlehnung an den Bauhausstiles mit den Farben Weiß und Grau. Dabei vereinfacht die Farbwahl die Kombination der einzelnen Elemente. Um den Fokus auf den Inhalt zu legen, wurden Schriftfarben und Arten ebenfalls schlicht gehalten und die Contentboxen lediglich mit Schattierungen und Außenlinien vom Rest der Seite abgehoben. Etwas auffälliger hingegen sind die Bilder und die Hover Effekten der Seite.
Im oberen linken Bereich der Seite wurde ein Hamburger Menü eingebunden. Neben einem Hover Effekt leitet das Menü zu den verschiedenen Textblöcken weiter. Bei Klick auf ein Thema springt die Seite automatisch zu dem jeweiligen Block.
Beim Aufruf der Seite baut sich die Überschrift aus einzelnen Buchstaben zusammen. Sie fliegen von verschiedenen Positionen auf ihren Platz. Die Animation soll die Aufmerksamkeit auf den Inhalt der Seite lenken.
Am unteren Ende der Seite verbirgt sich ebenfalls eine kleine Animation. Hier sind Verknüpfungen zu Social Media Accounts des Bauhaus Archivs Berlin gelistet. Beim Anwählen der jeweiligen Social Media Plattformen gibt verfärben sich die Symbole in die jeweilige Farbe der verknüpften Seite.
Um auch mobil gut auszusehen und den heutigen Standards des responsiven Designs gerecht zu werden, wurden alle Elemente der Seite an verschiedene Browser/Displaygrößen angepasst. Der Hintergrund der Navigation wechselt von transparent zu einem dunklerem Grau, um sich so über die restlichen Elemente zu legen und der Vermischung des Textes entgegenzuwirken. Die Überschriften ändern ihren Abstand zum oberen Bildschirmrand und werden so ungehindert angezeigt. Boxen und Bilder, die den Content der Seite darstellen, passen ihre Höhen und Breiten an.
Autoren: Amelie Andresen & Artjom Arustamov
Die fertige Arbeit finden sie hier.
Die Seite zum „Bauhaus-Ereignisse 1919 – 1933“ kann in drei Teilbereiche aufgeteilt werden:
Der Aufbau der Seite besteht aus nur einer HTML-Seite, die den gesamten Inhalt darstellt. Der „One Pager“ wird in diesem Fall vertikal aufgebaut und grenzt die drei Bereiche mit grafischen Elementen voneinander ab. Die Navigation erfolgt entweder durch Klicken auf den Menüpunkt im Header, hierbei wird direkt zum gewählten Bereich im Zeitstrahl gesprungen, oder durch eigenständiges Herunterscrollen. Anders als bei Webseiten mit Unterseiten wird die Struktur über sogenannten Sektionen und Sprungmarken erreicht, die über die Navigationsleiste bedient werden können.
Für eine besucherfreundliche Seite wurde ein “Scroll-to-top-button” eingeführt, der es ermöglicht, längere Bereiche der Seite zu überspringen. In der rechten unteren Seite des Browsers erscheint ein Button, sobald min. 300 Pixel nach unten gescrollt wurden. Ein Klick auf den Button und der Seitenbesucher wird per animiertem Scrolling zurück ans obere Seitenende geleitet.
Als kleines Extra verfügt die Seite über ein Favicon. Zu erkennen ist dieses Tab-Fenster des Browsers. Ein Favicon ist ein sehr kleines Logo, welches normalerweise eine Größe von 16×16 Pixel besitzt. Dazu dient das Favicon meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen.
Footer und Slider der Seite sind responsiv gestalltet.
Um die Menge der Daten und Texte darzustellen, die von Design-Studenten bereitgestellt wurden, schien eine vertikale Timeline am sinnvollsten, um das Konzept des „One-Pager´s“ nicht zu verletzen. Des Weiteren mussten die vorhandenen Bilder ebenfalls sinnvoll eingebaut werden. Letztendlich geschah dies in Form eines Sliders im oberen Bereich der Seite und mit einer Animation der Direktorenbilder im Footer.
Die Realisierung des One-Pagers über sogenannte Sections, einer Art Anker innerhalb einer HTML-Seite.
<body>
<section id="start"> </section>
<nav role='navigation'>
<ul>
<li><a href="#start" class="active">Start</a></li>
<li><a href="#weimar">Bauhaus Weimarer Zeit</a></li>
<li><a href="#dessau">Bauhaus Dessauer Zeit</a></li>
<li><a href="#berlin">Bauhaus Berlin</a></li>
<li><a href="#direktoren">Direktoren</a></li>
</ul>
</nav>
<div class="css-slider">
<h1 class="title">Bauhaus-Ereignisse 1919 - 1933</h1>
</div>
</br>
<h2>
<img src="css/bauhaus.gif">
<section id="weimar">Bauhaus Weimarer Zeit (1919 - 1925) </section>
</h2>
<section class="timeline">
<ul>
<li>
<div>
<time>1919</time> Gründung des Staatlichen Bauhauses durch Walter Gropius am 1. April 1919 in Weimar.
</br>Johannes Itten wird zum Meister berufen und Leiter des Vorkurses den er selbst als Einführungssemester entwickelt hat.
</div>
</li>
.css-slider h1 {
font-size: 5.5vw;
color: #fff;
text-align: center;
}
.css-slider {
overflow: hidden;
padding: 10% 0 15%;
position: relative;
margin: 48px auto 0;
max-width: 100%;
}
.css-slider:before,
.css-slider:after {
content: "";
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.css-slider:before {
width: 500%;
background: url("dessau.jpg") no-repeat,
url("weimar.jpg") no-repeat,
url("sw.jpg") no-repeat,
url("100.jpg") repeat-x;
background-position: 75% top, 50% top, 25% top, 0% top;
background-size: 20% auto;
animation: slide 20s ease-in-out infinite;
}
.css-slider:after {
right: 0;
background:rgba(0, 0, 0, .25);
}
$.fn.pageScroller = function( options ){
var settings = $.extend({
nav: $(this),
links: $(this).find('a'),
navActiveClass: 'active',
scrollContainer: $('html, body'),
scrollSpeed: 1500,
section: $('section'),
navHeight: $(this).outerHeight()
}, options);
| Element | Bemerkung |
|---|---|
| Scroll-to-top-Button | JS-Datei verändert und Design selber angepasst. Die Kommentare auf der Webseite benutzt. |
| Timeline | Die Timeline dient lediglich Impuls. Wir haben zusätzlich zu diesem Template einen Header und Footer konfiguriert. Innerhalb der Timeline wurden die Epochen als animierte Elemente innerhalbs eines One-Pagers runter gebrochen. |
| Bilder | genutzte Bilder |
| Ajax | genutztes Frameworks |
Amy Linh Hoang hat ihre sehr gute Bachelorarbeit im Studiengang Informationsmanagement mit dem Titel „Konzeption und Realisierung eines interaktiven Storytelling anlässlich des Bauhausjubiläums“ abgeschlossen und ein sehenswertes, interaktives Storytelling mittels JavaScript, CSS3 und HTML5 erstellt. Der Titel des Storytellings lautet „Oscar Schlemmers Weg zum Bauhaus„. Amys Bachelorarbeit ist als Kooperation der Abteilungen „Information und Kommunikation“ und „Design und Medien“ entstanden. Anlass für ihr interaktives Storytelling ist das Bauhaus100 Jubiläum 2019, zu dem es neben weiteren interaktiven Angeboten gesammelt bereitgestellt wird.
Hier geht’s zu Amys Storytelling.
Viel Spaß beim Anschauen!