BestOf: Funktionale Animationen (Multimediasysteme II / Medienintergration SoSe 2017)

Im Rahmen der Kurse Entwicklung von Multimediasystemen II und Medienintegration (Studiengang Informationsmanagement, Prof. Dr.-Ing. Steinberg) im Sommersemester 2017 entstanden einige funktionale Animationen durch die Studierenden. Anforderung an die Arbeiten war, keine rein dekorativen Animationen zu erstellen, sondern sich kleinen, abgeschlossenen, funktionalen Aspekten der Nutzerinteraktion zu widmen.

Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Ein paar der besten Arbeiten findet ihr hier:

Um zur Animation bei CodePen zu kommen, einfach auf das Bild klicken.

WebLab-Projekt: Interaktives Memory-Spiel für IM-Studiengang

WebLab-HsH_Interaktives_Memory_Spiel

Im Rahmen der Ideen-Expo wurde von der Hochschule ein Kartenspiel gedruckt, das an potentielle Studieninteressierte ausgehändigt werden soll. Damit dieses Kartenspiel jedoch nicht nur analog verfügbar ist, hat das WebLab der Hochschule Hannover eine digitale Version des Spiels mittels JavaScript entwickelt.

Als erstes haben wir eine vorläufige Spieloberfläche geschaffen, auf der momentan im oberen Bereich die Karten zu sehen sind und im unteren Bereich die Felder für die verschiedenen Kategorien angeordnet sind. Für die Karten haben wir ein vorläufiges Design entwickelt.

Als Kategorien für das untere Feld haben wir uns für “Programmiersprachen“,”Bibliotheken“,”Suchmaschinen” und “Expo Plaza” entschieden. Im Weiteren wurden noch mehr Karten entwickelt und ein Timer eingebaut, da der Spieler ja gegen die Zeit spielen soll.

Was nun entstanden ist, ist ein interaktives Memory-Spiel mit Timer und zahlreichen Animationen, die das Geschehen anschaulicher gestalten. Wir hoffen dadurch potentielle Studierende zu begeistern und dass diese genauso viel Spaß beim Spielen haben, wie wir beim Anfertigen dieses Projektes.

Zu dem Spiel gelangt ihr hier.

Viel Spaß!

Interaktives Storytelling: Studentischer Alltag

Interaktives Storytelling: Studentischer Alltag

Das von Birte Rohden und Julian Hundertmark erstellte Storytelling zeigt einen typischen Tagesablauf eines Informationsmanagement Studenten. Für die Umsetzung wurden HTML5, CSS3, Bootstrap, JavaScript (u.a. AngularJS), Adobe Photoshop und Windows Live Movie Maker benutzt.

Hier geht’s zum Storytelling:

Interaktives Storytelling: Studentischer Alltag

Im Kurs “Ausgewählte Fragen der Medieninformatik” sind im Wintersemester 2016/17 einige gute Arbeiten entstanden. Eine davon ist ein interaktives Storytelling zum studentischen Alltag im Studiengang Informationsmanagement an der Hochschule Hannover (Expo Plaza).

WiseMapping: Open-Source MindMapping

MindMaps mit WiseMapping

WiseMapping ist ein kostenfreier webbasierter Editor, mit dem Online Mindmaps erstellt werden können. Außer einer Registrierung auf der Seite wird nichts weiter benötigt. Auch die Benutzung ist ähnlich simpel. Neben der Möglichkeit ein neues Projekt anzulegen, können auch andere Maps importiert werden. Durch ein übersichtliches Interface sowie eine Übersicht der wichtigsten Tastenkürzel ist der Editor leicht und schnell verstehbar. Die erstellten Themen sind nach Belieben in Farbe und Form veränderbar. Zusätzlich sind Symbole, Notizen oder auch Links, die mit dem Thema in Verbindung stehen, verknüpfbar.

Die Mindmaps können mit anderen Personen geteilt und von mehreren bearbeitet werden. Eine weitere nützliche Funktion ist die History, die ältere Versionen der Map aufführt und wenn nötig, wiederherstellen kann. Fertige Arbeiten können u. a. als SVG, PNG, JPG und PDF exportiert werden.

Hier könnt ihr WiseMapping ausprobieren.

MindMap mit WiseMapping
MindMap mit WiseMapping: Beispiel für eine mit WiseMapping erstellte MindMap über die Hochschule Hannover

Interaktive Infografik: Was macht eigentlich ein Informationsmanager?

Infografik zu Informationsmanagement an der Hochschule Hannover

Im Projekt “Infografiken” (Sommersemester 2016) haben Joana Hollasch und Johannes Burchert eine interaktive Infografik mit HTML5, CSS3 und JavaScript zu den verschiedenen Bereichen erstellt, mit denen sich ein Informationsmanager im Studium und später im Berufsalltag beschäftigt.

Die Infografik zeigt, wie vielseitig die Aufgabenbereiche eines Informationsmanagers sind. Neben Informationswissenschaften, Informatik und Webentwicklung sind z.B. auch Bereiche wie Informationsrecht, Medienwissenschaften oder Kommunikation gefragt. Über die unterschiedlichen Größen der Themenrechtecke wird zusätzlich der prozentuale Anteil am Studium sichtbar. Bei Klick erhält man weitere Informationen zum ausgewählten Bereich.

Hier gelangt ihr zur Infografik für den Studiengang Informationsmanagement.

BestOf: WWW-Techniken I Wise 2016/17

Im Wintersemester 2016/17 fand für die Erstsemester des Studiengangs Informationsmanagement der Kurs WWW-Techniken I statt. Die Prüfungsleistung bestand darin, eine eigene Website mit HTML5 und CSS3 zu entwickeln und auf dem eigenen Hochschulwebspace zu veröffentlichen. Die Meisten haben im Rahmen des Kurses ihre erste Website überhaupt erstellt und waren absolute HTML-Newbies. Umso beeindruckender, dass so viele richtig gute Ergebnisse dabei sind.

Ein paar der besten Arbeiten findet ihr hier:
UPDATE 10.01.19:
Leider verlängern nicht alle Studierenden ihren Hochschul-Webspace, sodass einige Links inzwischen nicht mehr funktionieren 🙁

CSS3: Codesharing und gute Beispiele

Codepen.io für HTML5, CSS3 und JavaScript Beispiele

Insbesondere zu HTML5, CSS3 und JavaScript gibt es ja nicht gerade wenige Quellen im Web, die man als Beispiele, Inspiration oder Hilfe heranziehen kann.

Aber ist ein Beispiel, dass gefällt,  nur mit CSS3 umgesetzt oder ist auch JavaScript dabei? Klar kann man alles was man im Web so findet schlicht mit “Rechte Maus > Seitenquelltext anzeigen” oder mit den Webdeveloper Tools unterschiedlichster Browser genau unter die Lupe nehmen, aber das ist im Gegensatz zu so mancher Codesharing Community ziemlich umständlich.

Websites wie Codepen.io oder Cssdeck.com bieten umfangreiche Sammlungen an Code-Snippets und haben den großen Vorteil, dass man auf einen Blick sofort sieht, was es für ein Beispiel ist, welche Techniken verwendet werden und wie der Quellcode genau aussieht. Außerdem kann man das Snippet, dass einem gefällt, direkt online verändern, forken oder einfach nur liken.

Kennt ihr noch andere Codesharing Communities, die wir uns unbedingt mal anschauen sollten?

WebLab KickOff: Jetzt geht’s los!

Storytelling IM

Heute war das KickOff-Treffen zum neu gegründeten Web-Engineering-Labor (WebLab). Ziel des WebLabs ist die Bündelung und Weiterentwicklung von studentischen Arbeiten aus dem Bereich der Webentwicklung. Wir beginnen mit Ergebnissen aus dem Studiengang Informationsmanagement.

Von der Schublade ins Web
Bislang sind wunderbare Ergebnisse aus Kursen und Abschlussarbeiten leider oft einfach nur in Schubladen verschwunden, nachdem sie als Prüfungsleistung benotet wurden. Das soll jetzt geändert werden, indem diese Arbeiten weiter entwickelt und veröffentlicht werden.
Neben einander ein wenig Kennenlernen stand beim KickOff die Aufteilung in geplante Projekte auf dem Programm. Unter dem Oberthema Web-Engineering sind aktuell zum Beispiel Webanimationen, interaktive Infografiken, Storytelling, 3D Web, Online-Spieleentwicklung  und responsives Web-Publishing Arbeitsschwerpunkte. Dabei kommen überwiegend Techniken und Standards wie HTML5, JavaScript oder WebGL zum Einsatz.

Das WebLab-Team besteht aktuell aus einem Team von sieben Studierenden des Studiengangs Informationsmanagement unter der Leitung von Monika Steinberg.

Hallo WebLab-Website!

Hier entsteht zurzeit die Website für das Web-Engineering-Labor (WebLab), dass der Abteilung IK (Fakultät 3 – Medien, Information und Design, Hochschule Hannover) zugeordnet ist.

Ziel des WebLabs ist die Bündelung und Weiterentwicklung guter studentischer Ergebnisse aus Veranstaltungen, Projekten, Praktika und Abschlussarbeiten zum Thema Webentwicklung.
Wir beginnen mit Inhalten aus dem Studiengang Informationsmanagement, freuen uns aber über weitere interessierte Studiengänge.

Aus unserer Sicht besonders interessante Schwerpunkte sind aktuell 3D im Web, mobile Entwicklung, HTML5 und WebGL.

Wir freuen uns darauf, ihnen hier bald mehr von unserer Arbeit im WebLab vorzustellen!

Das WebLab-Team