MM-SYS-2: Bauhaus-Ereignisse 1919-1933

Autoren: Amelie Andresen & Artjom Arustamov

Die fertige Arbeit finden sie hier.

Konzept

Die Seite zum „Bauhaus-Ereignisse 1919 – 1933“ kann in drei Teilbereiche aufgeteilt werden:

Header mit integriertem Slider und Navigation
Die Hauptseite mit dem vertikalem Zeitstrahl
Footer mit den Direktoren

One Pager

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.

Scroll-to-top

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.

Favicon

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/Slider

Footer und Slider der Seite sind responsiv gestalltet.

Vorgehenweise

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.

Realisierung

One Pager

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>

Slider

Zeile 290
- Dauer des ganzen Sliders 20 Sekunden
- fünf Sekunden pro Bild
Zeile 285 – 288
- enthält die Bilder
- Startbild die Eigenschaft“repeat”
Zeile 276:
- Funktion des Z-index: hält Slider in einer der hinteren Ebenen, wäre dieser höher, wäre die Navigation nicht mehr sichtbar
- Navigation im Browser “fest”, höchste Z-Index von allen Elementen der Navigation

.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);
  
}

JS-Erläuterungen

Zeile 5
- Sections, die als Links mit “#” versehen sind
Zeile 7
- Container, zu dem man scrollen will
Zeile 8
- Scroll Speed in Millisekunden
Zeile 10
- Höhe der Navigation

$.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);

Quellen

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