Tip:
Highlight text to annotate it
X
Unsere Idee war es,
ein Web Magazin, kurz Webzine, zu erstellen
auf dem verschiedene Inhalte
gebündelt dargestellt werden können.
Genauer gesagt, wollten wir ein Konzept
bzw. einen Prototypen entwerfen,
bei dem wir die Möglichkeiten
von HTML5, CSS3 und JavaScript nutzen,
um eine möglichst gute User Experience zu bieten
und damit das surfen auf der Seite
so angenehm wie möglich zu machen.
Das Layout der Seite
sollte sich dementsprechend auch
für die verschiedenen Endgeräte anpassen,
um diese User Experience durchweg bieten zu können
Für die Inhalte haben wir uns bei der HdM bedient,
da diese zwar verschiedene Inhalte
von unterschiedlichen Quellen bietet,
aber es noch keine Möglichkeit gibt,
sich die vielzähligen Beiträge und Artikel
von Stufe, Horads & Co.
auf einer Seite darstellen zu lassen.
In der Desktop Version des HdM Webzine
werden die Inhalte in zwei Spalten angeordnet,
nachdem sie mit Hilfe von jQuery und AJAX
aus einer XML-Datei geladen werden.
Die einzelnen Artikel
sind mit einem Vorschaubild,
Überschrift, Teaser sowie Datum und Autor versehen
Dazu hat jeder Artikel noch ein farbiges Label,
welches dessen Quelle anzeigt.
Die Artikelansicht wurde mit dem sogenannten
"jQuery Isotope" Plug-In realisiert,
welches quasi den Kern der Webseite darstellt.
Klickt man auf einen Artikel,
wird dieser in einer sogenannten Lightbox angezeigt,
eine Ebene über der eigentlichen Webseite.
Hier wird dann der gesamte Artikel angezeigt,
nachdem dieser der Lightbox quasi übergeben wurde.
Für jeden Artikel gibt es des Weiteren
eine eigene Navigation,
die die Artikel spezifischen Funktionen und Informationen
zugänglich machen soll.
Die Einbindung von Video- und Audiodateien
erfolgte mittels HTML5, von lokalen Videodateien
und über die Einbindung von YouTube und SoundCloud.
Für jeden Artikel gibt es in der XML-Datei ein "media"-Tag,
welches die Art des Inhalts beschreibt
und der dann dementsprechend geladen wird.
Über die Top-Navigation der Seite
lassen sich die Artikel nach ihrer Herkunft filtern,
wie z.B. HdM News, Stufe oder Horads.
Ein kleines Schmankerl ist das Logo der Seite,
welches sich farblich dem ausgewählten Filter anpasst.
Hier wurde z.B. mit CSS3 gearbeitet.
Für die optimale Darstellung
auch auf Tablets und Smartphones
wird mittels Media Queries
das Layout an die jeweilige Auflösung
des Endgerätes angepasst.
Dies ist möglich,
da wir für Tablet horizontal, Tablet vertikal und Smartphone
eigene CSS-Dateien angelegt haben.
So wird die Lightbox auf dem Tablet
etwas anders dargestellt
und für Smartphones ist die Navigation
über ein Dropdown Menü zu erreichen
und die Größe der Flächen
ist für die Bedienung mit Touch optimiert
Zuletzt noch kurz etwas zu unserer Vorgehensweise:
Wir haben uns dazu entschieden,
erst die Desktop Version zu erstellen
und dann für mobil anzupassen,
da wir uns vor Allem erstmal
mit den Technologien vertraut machen wollten
und so mehr Spielraum hatten.
Für das Design und die Bedienung der Webseite
haben wir uns an erfolgreichen Plattformen und Webpräsenzen
wie z.B. Facebook und Pinterest orientiert,
da sich hier bestimmte Lösungen
schon durchgesetzt und bewährt haben.
Nachdem die ersten Entwürfe und Prototypen fertig waren,
haben wir die Darstellung der Übersicht
mittels dem Plug-In jQuery Isotope
und die Artikelansicht
mittels einer Lightbox implementiert.
Da sich hieraus neue Möglichkeiten ergaben,
wie z.B. die Artikelnavigation mittels jQuery UI Tabs,
wurde das Design kontinuierlich angepasst
und weiterentwickelt.
Zuletzt haben wir den fertigen Prototyp für Desktop
dann für die mobilen Endgeräte angepasst.
Das HdM Webzine Team bestand aus
Boris Boyarskiy, Dennis Raith, Nils Nowak und Fabian Luft.
Gemanaged wurde es von dem Master Studenten Philipp Krähmer,
betreut und geleitet von Herrn Prof. Zimmermann.