Web-Science-Labor der Hochschule Hannover
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!
Bisher veröffentlichte Tutorials finden Sie hier.
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!
Euer WebLab-Team
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 nach und nach vor. Heute:
Autor: Lisa Heeg
Zeichen- und Malutensilien, Schere, Handykamera
Konzepterstellung zur Grundidee in Form des Storyboards, dabei auch:
Festlegen der Technik: Mix aus Legetechnik (gezeichnete Objekte nacheinander in die Szene gebracht, allerdings nicht gefilmt, sondern fotografiert, ohne sichtbare Hände) und Stop-Motion
Überlegungen zu Ton: Musik unterlegen und eigenen Kommentar
Ablauf: 7 Abschnitte: Einleitung, die 5 Funktionen (Identifikation als Student, Semesterticket, Kopierkarte, Bibliotheksausweis, Mensakarte), Abschluss
Zeichnen und Ausschneiden der benötigten Elemente für die Szenen
Legen der Szenen entsprechend des Storyboards und fotografieren
Gimp, Windows Movie Maker, Handymikrofon, Audacity, Recherche
Die fotografierten Szenen werden mit Gimp bearbeitet. Zum einen werden Helligkeit und Kontrast sowie zum Teil Größe der Objekte und des Hintergrundes optimiert. Zum anderen werden Stop-Motion-Effekte vorbereitet. Dazu wurden Position, Größe, Perspektive oder Farbe von Objekten verändert. Des Weiteren werden mit Gimp erstellte Elemente hinzugefügt (z.B. Text) oder einzelne Objekte kombiniert (Bild der CampusCard mit Gesicht der gezeichneten Studentin). Jede Veränderung wird in einem Einzelbild gespeichert.
Sämtliche Einzelbilder werden im Windows Movie Maker zu einem Video zusammengefügt. Dabei wird die Dauer der einzelnen Bilder festgelegt, z.B. besonders kurze Zeiten für Stop-Motion-Effekte. Es werden Animationen für Übergänge, sowie ein Intro und Abspann erstellt.
Für die Musik wird nach lizenzfreien Titeln im Internet gesucht, genutzt wird: „Happy Chloé“ von https://www.terrasound.de/lizenzfreie-musik-fuer-youtube-videos/ . Die Audiokommentare wurden mit dem Handymikrofon und einer App für „Sprachmemos“ selbst aufgezeichnet und mit Audacity geschnitten.
Windows Movie Maker
Zusammenführen der Videodatei mit den beiden Audiodateien. Dabei wird die Lautstärke der Musik angepasst, sodass der Audiokommentar gut zu hören ist und die einzelnen Audiokommentare bildgenau unter die einzelnen Szenen gelegt. Außerdem erfolgte eine nachträgliche Anpassung der Dauer der Einzelbilder, um sie auf den Audiokommentar optimal abzustimmen. Abschließend erfolgt das Rendering des Videos durch Export in das mp4-Format.
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 nach und nach vor. Heute:
Autoren: Charlotte Schröer, Franziska Altemeier
Ziel unserer Animation ist es, die Kompetenzfelder des Studiengangs Informationsmanagement an der Hochschule Hannover zu erläutern. Im Rahmen des neuen Curriculums wurden die sogenannten Kompetenzfelder eingeführt, von denen jeder Studierende zwei belegen muss. Gerade jetzt, wo die ersten Studierenden ihre Kompetenzfelder wählen müssen, macht ein Erklärvideo, das die Inhalte und Möglichkeiten der einzelnen Bereiche kurz und bündig erläutert, Sinn.
Welche Kompetenzen für welches Kompetenzfeld benötigt werden, was in welchem Feld gelernt werden kann, das soll in unserem Erklärvideo auf den Punkt gebracht werden.
Unser erster Arbeitsschritt nach der Entwicklung einer grundlegenden Idee war die Erstellung eines Storyboards. Dieses hat uns geholfen, die vielen Informationen, die uns zu unserem Thema zur Verfügung standen, zu reduzieren und Kernaussagen zu formulieren.
Anhand des Storyboards konnten wir unsere Informationen visualisieren, in sinnvolle Abschnitte aufteilen und eine grobe Reihenfolge festlegen.
Da wir unsere Animation in Form eines Erklärvideos umsetzen wollten, haben wir uns insbesondere die im Unterricht vorgestellte Software speziell für Erklärvideos hinsichtlich verschiedener Aspekte verglichen. Diese waren GoAnimate, VideoScribe und Powtoon.
GoAnimate bietet eine 14-tägige kostenfreie „trial period“ an. In dieser Zeit hat man den vollen Zugriff auf alle Angebote, die auch die Premium Version hätte, allerding mit dem Unterschied/der Einschränkung, dass alle Videos mit Wasserzeichen versehen sind und die erstellten Videos lediglich geteilt, nicht aber heruntergeladen werden können.
GoAnimate bietet insgesamt drei verschiedene Nutzungsmodelle, die alle kostenpflichtig sind. Wollen mehrere Personen Videos kreieren, ist man gezwungen, die kostenintensivste Version „GoTeam“ für $159 pro Monat zu nutzen.
Aufgrund der Preisregelung und der Tatsache, dass wir als zwei Personen an die „GoTeam“-version gebunden gewesen wären, war die Software für uns keine ernsthafte Option. Hätte man die 14-tägige „trial period“ nutzen wollen, wäre man zudem zeitlich sehr eingeschränkt gewesen, da man auf die Videos nur zugreifen kann, wenn man einen Account hat
Unsere zweite Option VideoScribe bietet ebenfalls eine Trial Version an, die jedoch nur sieben Tage gültig ist. Als einzelner Nutzer kann man verschiedene Zahlungspläne wählen. Man kann einmalig 480 Euro zahlen, ein Jahresplan, bei dem 132 Euro gezahlt werden und eine Zahlung per 20-Euro- Monatsraten. VideoScribe bietet außerdem Team-Lizenzen an, die preiswerteste Version liegt hier bei 115 Euro pro Nutzer. Aufgrund der Kosten war VideoScribe keine Option für uns, insbesondere da die kostenfreie Trial Version noch kürzer ist als bei GoAnimate.
Im Gegensatz zu VideoScribe und GoAnimate bietet Powtoon eine dauerhafte Gratis-Version. Diese hat ein paar Einschränkungen, so sind z.B. alle Videos mit Wasserzeichen versehen und auch die Bildqualität ist (beim Export zu Youtube) eingeschränkt. Die Arbeit fällt einem mit Powtoon auch als Laie nicht schwer, da alles sehr übersichtlich und verständlich aufgebaut ist und erklärt wird. Sehr positiv war vor allem, dass man bei Powtoon auch gut als Team arbeiten kann. So kann man beispielsweise ein Video an einen weiteren Powtoon-Nutzer schicken und so kollaborativ an einem Projekt arbeiten.
Bei der Erstellung von Videos bietet Powtoon viele Formen, Symbole und Styles, die auch in der freien Version implementiert sind. Außerdem können auch eigene Bilddateien eingefügt werden.
Des Weiteren ermöglicht Powtoon die Einbindung einer Audiospur. Für die Audiospur haben wir zunächst ein Skript erstellt. Dies haben wir anhand des Inhaltes der einzelnen Folien in Powtoon ausgerichtet. Powtoon arbeitet ähnlich wie Powerpoint mit Folien, sodass es möglich ist, für jede Folie eine eigene Audiodatei hinzuzufügen. Ein Schneiden der Audiospur entfällt.
Die Audioaufnahmen haben wir mit Hilfe der App MP3 recorder aufgenommen. Wir haben uns für diese App entschieden, da sie die Audiodateien im mp3 Format abspeichert und einen Export zu Google Drive ermöglicht. Über Google Drive haben wir die Aufnahmen anschließend gespeichert und bei Powtoon hochgeladen. Die Lautstärkeeinstellungen der Audiodateien können dann direkt beim Voiceover in Powtoon angepasst werden.
Insgesamt hat sich Powtoon als sehr nützlich und für unsere Anforderungen passend herausgestellt. Die Gratis-Version bietet umfangreiche Features. Insbesondere die Möglichkeit, kollaborativ an dem Video arbeiten zu können, war sehr hilfreich. Leider müssen in der Gratis-Version Abstriche bei der Qualität hinsichtlich des Youtube-Exports gemacht werden.
Das fertige Produkt, unser Video „Kompetenzfelder im Studiengang IM“, könnt ihr hier anschauen.
Außerdem findet ihr hier unser Storyboard:
Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.
Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.
Autoren: Melis Rufaioglu und Diana Hamasur
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.
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.
Quellen:
Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.
Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.
Autor: Matthias Olbrisch
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.
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.
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.
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.
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.
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.
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.
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.
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.
Dateienliste: hier
Zum besseren Verständnis ist der Code mit ausführlichen Kommentaren versehen.
Alina Finger hat in ihrer Bachelorarbeit im Studiengang Informationsmanagement (Hochschule Hannover) am Beispiel der Expo Plaza gezeigt, wie anschaulich ein virtueller Rundgang einen ersten Eindruck eines Ortes oder eines Gebäudes vermitteln kann. Insbesondere für die Erstorientierung an unbekannten Orten oder um sich einfach erst einmal umzuschauen sind virtuelle Rundgänge eine gute Idee.
Alina hat bei ihrem virtuellen Rundgang mit Kolor Panotour Pro, PTGui Pro für Videostitching sowie einer Canon 6D Kamera samt Fisheye Objektiv, Leveler, Stativ und Rotator gearbeitet. Das Equipment wurde vom WebLab bereitgestellt und kann gern für weitere virtuelle Rundgänge ausgeliehen werden. Einzelheiten zur Kamera-Ausrüstung und nötigen Arbeitsschritten finden Sie hier in Alinas Bachelorarbeit.
Viel Spaß beim Erkunden der Expo Plaza!
Hier findet ihr ein paar Themen, die aktuell (Stand Mai 2018) noch frei sind für mögliche Bachelorarbeiten im Studiengang Informationsmanagement. Meldet euch einfach per Email bei Frau Steinberg, wenn ihr euch für eins der Themen interessiert:
Falls ihr eigene Ideen aus Bereichen wie Webentwicklung, Multimedia, Social Media, SEO oder Ähnliche habt, meldet euch gern.
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.
Autorinnen: Marit Kollorsz und Jana Hering
Im Rahmen einer Prüfungsleistung für das Fach „Entwicklung von Multimediasystemen 1“ entwickelten
wir ein Kurzvideo, inklusive dazugehörigem Storyboard. Nach einigen Ideen, wie Erklärvideo
oder Animation, entschieden wir uns letztendlich dazu, ein Stop-Motion Video über
den Studiengang „Informationsmanagement“ zu erstellen. Diesen können sich Studieninteressierte
oder Erstsemester als Informationsquelle zur Orientierung im Studium anschauen.
Die Idee dahinter ist, den Studiengang samt seinen Kompetenzbereichen und einigen ausschlaggebenden Vorlesungen, darzustellen. Da wir selbst bei der Recherche nach einem geeigneten
Studiengang relativ wenig über das Studium Informationsmanagement an der Hochschule
gefunden hatten, lag uns an dem Thema viel, eine optische und kompakte Darstellung
für die Öffentlichkeit zu schaffen.
Dazu haben wir uns entschieden, nachdem wir uns von der Seite „flaticon.com“ inspirieren
lassen haben, die Symbole selbst zu zeichnen und hinterher einzelne Bilder zu schießen, die
anschließend zu einem flüssigen Video zusammengeschnitten werden sollen.
Das Storyboard half uns dabei, eine grobe Struktur zu schaffen, die Symbole zu planen und auszuwählen, und zu guter Letzt den Text für die Audiodatei zu planen. Als Hilfe diente ein Stativ zur Fokussierung der Bilder, sowie ein weißer Tisch, um eine homogene Hintergrundatmosphäre zu schaffen.
Die Bilder selbst wurden mit einem Smartphone in der Größe 4400x3024px geschossen,
die Audiodatei entstand mit einer Memoapplikation auf dem Smartphone und wurde anschließend
in das richtige Format auf dem Computer umgewandelt.
Letztendlich hatten wir Bildmaterial von 73 einzelnen Bildern, in denen wir Bild für Bild die Symbole in Position gerückt haben, und eine Audiodatei von einer Minute und sechs Sekunden. Für den Schnitt des Videos benutzten wir das Videobearbeitungsprogramm von Adobe Premiere, das uns in der Vorlesung gezeigt
und nahegebracht wurde. Besonders schwierig war das Anpassen der Bilder an die gesprochene
Audiodatei, da jedes einzelne Bild an die entsprechende Stelle des Audios angeglichen
werden musste. Nach einigen Startschwierigkeiten mit der Anwendung und der Audiodatei,
gelang uns doch ein sehr flüssiger und technisch logischer Schnitt.
Das Video entstand auf Grundlage dieses Storyboards:
Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.
Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.
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.
Link zu Codepen : https://codepen.io/hundertj/pen/YxwmpJ