Leon Rostek vom WebLab hat in Zusammenarbeit mit Prof. Schult eine mobile App für die Biennale in Venedig entwickelt.
Anfänglich beinhaltete die interaktive Karte alle Nationenpavillons der Architektur-Biennale 2018, die von Mai bis November in Venedig stattfand.
Dieser Prototyp wird aktuell von von Studierenden des Studiengangs Informationsmanagement an die Kunst-Biennale 2019 angepasst und steht jetzt mit aktuellen Ausstellungsdaten bereit. Weitere Infos dazu finden Sie in unserem Beitrag zur Biennale Map Venice App.
Die kostenlose App ist für Android und iOS erhältlich.
Weitere Einzelheiten zu der Biennale-App finden Sie unter http://biennale-app.com.
Als fortlaufendes WebLab-Projekt veröffentlichen wir hier Tutorials zum Thema Webentwicklung. Einige Tutorials werden vom WebLab-Team erstellt, andere entstehen im Rahmen von Lehrveranstaltungen durch Studierende des Studiengangs Informationsmanagement (auch berufsbegleitend).
Wir freuen uns auf Ihre Vorschläge für neue Tutorials!
Im kommenden Wintersemester 2018/19 werden zwei unserer Lehrveranstaltungen im Studiengang Informationsmanagement (auch berufsbegleitend) tatkräftig durch unsere studentischen Hilfskräfte vom WebLab unterstützt.
Sowohl bei „Grundlegende Webtechniken 1“ (WWW1) als auch bei „Entwicklung von Multimediasystemen 1“ (MM-SYS-1) sind jeweils zwei Tutor*innen dabei.
Bei WWW1 helfen euch Sarah und Anja gern während Sprechstunden weiter, wenn es um Fragen rundum HTML5 und CSS3 geht. Bei MM-SYS-1 werden Thorsten und Leon euch bei der Entwicklung mit JavaScript und der Umsetzung von Progressive Web Apps unterstützen.
Wir freuen uns auf September! Aber erst einmal noch sonnige Semesterferien!
Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.
Login Kalender
Autoren: Melis Rufaioglu und Diana Hamasur
Konzept:
Das Konzept wurde anhand der alltäglichen Aktivität eines digitalen Kalenders erstellt. Da immer mehr Nutzer zu der digitalen Variante greifen, weil diese einfacher zu bedienen ist.
Die Funktionen des digitalen Kalenders bestehen aus einem Sign in und aus einem Logout Button. Auf der Startseite sieht der Benutzer die Felder „Benutzer- und Passwort“. Diese haben jedoch in der Demo keine besondere Funktion, jedoch sind sie im alltäglichen Leben als Zugangsfelder gedacht. Die Felder können aber müssen in der Demo nicht ausgefüllt werden. Als Test kann etwas eingegeben werden, ob es funktioniert.
Aus Stilgründen steht unter dem Sign in Button noch ein Hinweis auf eine Registrierung, welche jedoch keine weitere Funktion hat. Wird auf den Sign in Button geklickt, erscheint ein sich drehender Kreis mit Punkten. Daraufhin wird die Maske kurz in der Farbe des Buttons erscheinen und führt dann zu dem eigentlichen Kalender.
Bei dem Öffnen des Kalenders scheint kurz das Benutzerbild hervor, die Linien der Lupe kreisen einmal um die Lupe herum und unten rechts erscheint der Log-out Button. Auf dieser Seite wird ein Benutzerbild mit einer Notifikation angezeigt. Da drüber befindet sich ein kurzer Satz, der beliebig sein kann.
Oben links befindet sich ein „Menü“ Icon, rechts eine Lupe. Diese beiden haben keine weiteren Funktionen. Unter dem Benutzerbild stehen der aktuelle Monat und eine Kalenderwoche. Anschließend werden die entsprechenden To-Do´s angezeigt. Wenn der Log-out Button gedrückt wird, springt dieser in die Mitte des Fensters und übernimmt kurz das ganze Feld in seiner eigenen Farbe.
Anschließend wird wieder auf die Startseite zurückgeführt und es erscheint ein Haken, dieser steht für ein erfolgreiches Logout.
Technische Umsetzung
Der digitale Kalender mit einem Sign in und Logout System wurde mithilfe von Elementen aus HTML5, CSS3 und Javascript entwickelt. Darüber hinaus wurden Librarys von JQuery oder CSS bezüglich der Funktion und der visuellen Darstellung als Hilfe genommen. Das JQuery ist eingebunden und die ready Funktion ist befüllt. Diese Funktion ist dafür da, dass der Inhalt erst geladen wird, wenn die Seite vollständig geladen ist.
Die Plattformen wie „Codepen“, „Selfhtml“ und „W3Schools“ haben an der Entwicklung und Konzeption sowie der Inspiration weitergeholfen.
Die Icons „Benutzer“ und „Passwort“ wurden gestaltet und in die richtige Position gebracht. Der Button „Sign in“ wurde ebenfalls positioniert und animiert. Das ganze wird mit der ripple Funktion ausgeführt.
Um ein besseres technisches Verständnis dafür zu entwickeln, sind die hinterlegten Kommentare im Quellcode hilfreich.
Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.
Klausuren Countdown
Autor: Matthias Olbrisch
Die Idee
Die Idee der Webapplikation ist es dem Studenten eine App zu liefern, die ihm die Möglichkeit bietet, den Lernfortschritt bzw. den Lernstand bis zu einem Klausurtermin zu überwachen. Der Fokus lag hierbei nicht auf einem besonders aufwendigen Design, sondern auf der Funktionalität der Web Applikation.
Wie funktioniert das Ganze ?
Die einzige Eingabe, die ein Student dazu zu tätigen hat, ist die der Eingabe des Klausurensdatums in das dafür vorgesehene Feld unter der Frage „Wann ist deine Klausur?“ und die Bestätigung über den „Bestätigen“ Button.
Abbildung 1 – Wann ist deine Klausur?
Danach generiert sich unter der Aussage „Wie viel Zeit du noch hast!“ ein Countdown, der die verbleibenden Tage bis zur Klausur berechnet und live herunterzählt.
Abbildung 2 – Wie viel Zeit du noch hast!
Der Code für den Countdown behandelt zwei Problemstellungen. In der Funktion time_remaining(startTime) wird die im Eingabefeld vom Nutzer eingegebene Zeit in Millisekunden von der Startzeit abgezogen, daher wird im anschließenden Verlauf von Millisekunden auf Sekunden, Minuten, Stunden usw. gerechnet. Schließlich gibt der Operator „math.floor“ den größten Integer zurück, der bei der Berechnung der Sekunden, Minuten usw. entsteht.
Abbildung 3 – Codeausschnitt
Die Funktion SubmitDate update nun die Countdown Daten mittels z. B. days_span.innerhtml=t.days; die Countdown – Werte. Schließlich würde der definierte Countdown nach dessen logischem Ende noch in den Minus Bereich laufen. Dies wird mittels der bedingten Funktion verhindert.
Abbildung 4 – Codeausschnitt
Bei mehr als 7 Tagen wird der Status „Alles Okay“ ausgegeben, bei weniger als 7 Tagen wird vermeldet, dass man „Nur noch eine Woche“ zur Vorbereitung hat. Unter oder bei 4 Tagen Restlaufzeit wird „Jetzt aber!!“ ausgeliefert und am letzten Tag wird angekündigt, dass man „Morgen“ die Klausur schreibt. Am Prüfungstag wird „Viel Glück und Erfolg“ gewünscht.
Abbildung 5 – Alles okay
Der entsprechende Code verdeutlicht, dass sofern 8 Tage oder mehr Vorbereitungszeit bleiben, „Alles okay“ ist. Dazu wird am Beginn die restliche Tageszahl über console.log(days) ausgelesen. Die unterschiedlichen Status werden über if – else Bedingungen formuliert.
Abbildung 6 – Codeausschnitt
Zusätzlich zu diesen Statusmeldungen, wird ein Kreis gezeigt, der anhand des vorhandenen Puffers den Fortschritt des Lernens veranschaulicht darstellen soll. Dazu wächst er in den letzten 7 Tagen der Klausurvorbereitung um je 100/7 % pro Tag. Bis er schließlich voll ist. Dauert es noch länger als 7 Tage, wird der Kreis nicht angezeigt.
Abbildung 7 – Codeausschnitt
Das Ergebnis:
Umsetzung
Die Applikation wurde mithilfe von Elementen aus HTML 5, CSS 3, Javascript sowie jQuery entwickelt. Unterstützung habe ich bei den Plattformen „codepen.io“ und „W3schools“ gefunden.
Weiterentwicklung eines Virtuellen Rundgangs der Expo Plaza: Konzeption und Implementierung von detaillierten Zusatzinformationen zur Expo Plaza bzw. zum Studiengang Informationsmanagement. Verwendete Techniken/Tools sind WebGL, Panotour und Videostitching mit PTGui.
Podcasts für den Studiengang Informationsmanagement: Konzeption und Umsetzung von Podcasts (Videocasts?) für die Website des Studiengangs Informationsmanagement. Es sollen regelmässig spannende Inhalte auf der IM-Website veröffentlicht werden. Wie kann das längerfristig funktionieren?
Gamification auf der WebLab-Website: Da zurzeit zwei Bachelorarbeiten zu Gamification laufen, sprechen sie Frau Steinberg bitte direkt an. Eine Idee ist z.B. ein WordPress-Plugin oder eine PHP-Anwendung für Highscore-Listen aus BestOf-Beiträgen.
Progressive Web App für Ersis: Konzeption und Implementierung einer PWA für die Orientierungsphase im Studiengang Informationsmanagement. React JS ist zurzeit der Favorit. für die Umsetzung.
Falls ihr eigene Ideen aus Bereichen wie Webentwicklung, Multimedia, Social Media, SEO oder Ähnliche habt, meldet euch gern.
Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.
Technisches Konzept für ein radiales Menü
Autor: Julian Hundertmark
Als Ziel gesetzt wurde ein Menü mit verschiedenen Funktionalitäten und Animationen welches als individualisierbare Grundlage für weitere Nutzer zur Verfügung gestellt werden soll. Hierzu soll es leicht in eine bestehende Seite integrierbar, intuitiv und vielseitig einsetzbar sein.
Begonnen wurde damit, ein bereits vorhandenes Menü als Grundlage einzubauen. Dieses wurde nachfolgend sowohl in der Funktion als auch im Design und Animation abgeändert und erweitert.
Das Menü lässt sich mithilfe einer Javascriptfunktion aktivieren. Dies triggert die Menüknöpfe welche animiert in den Vordergrund verschoben werden und wodurch diese nun anwählbar sind. Weitere Javascriptfunktionen wurden als Beispielfunktionen hinzugefügt. So lässt sich exemplarisch die Schriftgröße der Webseite oder auch die Hintergrundfarbe per Mausklick verändern. Zusätzlich wurde das Menü in einem ziehbaren Div-Container eingegliedert sodass es für Nutzer frei auf der Webseite zu bewegen ist. Diese zweckmäßige Annehmlichkeit soll die Usabillity der Menüs erhöhen. Auch die animierten Tooltips sollen zukünftigen Nutzern weitere Möglichkeiten geben das Menü intuitiv auf einer eigenen Seite anzubieten. So könnte das Menü auf One-Pagern eine alternative Steuer- und Anpassungsmöglichkeit bieten. Die Möglichkeiten weiterer Veränderungen und Individualisierung in Form von weiteren Funktionen bietet sich an.
Auch das Design des Menüs lässt sich leicht den Funktionalitäten anpassen. So können wie bereits durch meinen Entwurf gezeigt Knöpfe hinzugefügt oder entfernt werden. So habe ich die Positionen einzelner Knöpfe wieder in eine Symmetrische Position gebracht und Hover-Effekte nachgebaut.
Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet.
Die besten Videos stellen wir euch hier in den nächsten Wochen nach und nach vor.
Was ist Informationsmanagement?
Autoren: Mareike Schulte, Sven Bessel
Kurzbeschreibung
In unserem Studium Informationsmanagement hörten wir folgenden Satz in verschiedene Varianten immer wieder:
„Die richtige Information zum richtigen Zeitpunkt in der richtigen Form und für die richtige Zielgruppe.“
Dieser Satz beschreibt kurz und knapp die Bedeutung von Informationsmanagement. Daher kam uns die Idee, diesen Satz als Grundlage für unsere Animation zu nehmen. Dabei sollten die einzelnen Elemente des Satzes visuell dargestellt werden. Bei der Erstellung des Skripts entschieden wir uns dafür die Animation inhaltlich auszuschmücken. Daher fügten wir eine Sequenz ein, in der auf humorvolle Art der Mangel an Informationen mit traurigen Menschen und schlechtem Wetter gezeigt wird. Der Erhalt von Informationen führt im Gegenzug zu fröhlichen Menschen und gutem Wetter. Zum Schluss fügten wir noch einen Aufruf zum Studieren unseres Studiengangs hinzu.
Wir entschieden uns bewusst gegen Software für Erklärvideos und für die eigene Herstellung aller Elemente. Nach den ersten Versuchen mit der Legetechnik entschieden wir uns für eine andere Vorgehensweise, da wir mit dem Ergebnis nicht zufrieden waren.
Die Zeichnungen wurden komplett als Vektorgrafiken in Adobe Photoshop erstellt und anschließend mit Keyframes in Adobe Premiere Pro animiert. Die Animation setzt sich aus einer Mischung von nicht bewegten und mit Keyframes animierten Bildern zusammen, welche auf verschiedenen Ebenen liegen. Die zeitliche Abfolge und die Menge der Keyframes haben wir nach Bedarf angepasst. Den eingesprochenen Text haben wir mit Audacity aufgenommen und anschließend in Adobe Premiere Pro importiert und passend zum Video zurechtgeschnitten.
Die Soundeffekte haben wir aus dem Internet heruntergeladen, alle sind Creative Commons lizensiert. Diese haben wir ebenfalls in Adobe Premiere Pro importiert und passend zurechtgeschnitten. Die Reduzierung des Hintergrundrauschens und die Erstellung des Vorspanns erfolgten nachträglich mit iMovie für Mac.
Das Ergebnis ist ein kleiner unterhaltsamer Werbefilm zum Thema Informationsmanagement und dem Studiengang an der HsH.
Hier findet ihr Tutorials zu Webentwicklung mit HTML5, CSS3 und JavaScript sowie zu weiteren Themen, die im Studiengang Informationsmanagement oder auch sonst immer mal wieder interessant sein können.
Nach und nach ergänzen wir hier neue Tutorials, die entweder von Studierenden im Rahmen von Lehrveranstaltungen oder vom WebLab-Team erstellt werden.
