Portfolio – Seite 2

31. Januar 20185. Oktober 2021

BestOf studentischer Arbeiten

In diesem Portfolio-Bereich findet Ihr studentische Arbeiten aus dem Studiengang Informationsmanagement und berufsbgleoitend, die besonders gut gelungen sind. Hier veröffentlichen wir sehr gute Ergebnisse aus Lehrveranstaltungen und herausragende Bachelorarbeiten.

Bislang findet ihr hier Arbeiten aus dem Kompetenzfeld Web Information Management mit Schwerpunkt auf interaktive Medien und Webentwicklung. Wir hoffen, dass wir in Zukunft auch Arbeiten aus anderen Kompetenzfeldern und Schwerpunkten hier veröffentlichen dürfen.

X-Ploration: Data Mining und Sentimentanalyse mit Hugging Face

Veröffentlicht: 20. September 2023

Autor: Oguzhan-Burak Bozkurt Durch den kontinuierlichen und raschen Fortschritt in jüngster Zeit auf den Gebieten von Big Data und KI-Technologien sind heutzutage insbesondere Teilbereiche des Informationsmanagements gefragter als je zuvor. Die Rolle des Informationsmanagers und Data Scientists besteht darin, Methoden zur Erfassung und Verarbeitung von Informationen aus unterschiedlichen Datenquellen anzuwenden. Zudem ist er befähigt, Entscheidungen …

„X-Ploration: Data Mining und Sentimentanalyse mit Hugging Face“ weiterlesen

Die KI DeepNash meistert Stratego

Veröffentlicht: 14. Juli 2023

Autor*innen: Jessica Arnold und Jan Heinemeyer DeepNash ist die neue KI der Firma Deepmind, die erstmals in der Lage ist das Brettspiel Stratego trotz unvollständiger Informationen zu meistern. Inhalt Die neue KI DeepNash Während die künstliche Intelligenz „AlphaZero“ Schach und „MuZero“ als Nachfolger verschiedene Spiele der Spielkonsole Atari meisterte, veröffentlichte die Firma Deepmind die nächste …

„Die KI DeepNash meistert Stratego“ weiterlesen

Methoden zur Verbesserung der User Experience am Beispiel des Kano-Modells

Veröffentlicht: 13. Juli 2023

Autorinnen: Jennifer Tews und Katharina Trommer Die Kundschaft ist König – doch was erwartet sie eigentlich? Was erwarten Kund:innen von einem Produkt oder einer Dienstleistung und womit lassen sie sich begeistern? Für Unternehmen oder Dienstleister ist es wichtig, die Bedürfnisse seiner Kund:innen sowie deren Ansprüche und Wünsche zu kennen und im besten Fall zu erfüllen. …

„Methoden zur Verbesserung der User Experience am Beispiel des Kano-Modells“ weiterlesen

Über der Einsatz von KI zur Musikkomposition: Der nächste Tsch(AI)kowski?

Veröffentlicht: 12. Juli 2023

Autor: Hendrik Kuck Komponieren mithilfe von Künstlicher Intelligenz? Zukunftsmusik oder bereits Alltag in der Musikbranche? Wie funktioniert so etwas? Und wer profitiert davon? Mögliche Antworten liefert der folgende Artikel zum Thema „Künstliche Intelligenz in der Musikkomposition“. Inhaltsverzeichnis KI in der heutigen Musikproduktion Künstliche Intelligenz nimmt in unserer Gesellschaft eine immer zentralere Rolle ein. Sie …

„Über der Einsatz von KI zur Musikkomposition: Der nächste Tsch(AI)kowski?“ weiterlesen

Text-zu-Bildysnthese: Ist das nächste Kunstwerk nur noch einen Prompt entfernt?

Veröffentlicht: 7. Juli 2023

Autorin: Annika Bleich Ein Prompt ist eine Texteingabe bestehend aus wenigen Stichworten. Sie dient der KI eines Bildgenerators als Grundlage für das Erzeugen von Bildern und ermöglicht es jeder Person, auch dir, die eigenen kreativen Ideen in Bildern umzusetzen. Aber können einzelne Stichworte wirklich das Potenzial eines Kunstwerks innehaben? Inhalt Einführung Sei PromptkünstlerIn Wie funktioniert …

„Text-zu-Bildysnthese: Ist das nächste Kunstwerk nur noch einen Prompt entfernt?“ weiterlesen

Künstliche Intelligenz in Filmen

Veröffentlicht: 16. Juni 2023

Autor*innen: Angelique Pál und Dennis Schmidt Wie wird die zukünftige Welt aussehen? Das ist eine Frage mit der die Menschheit sich oft auseinandersetzt und die auch in Filmen immer wieder aufgegriffen wird. Häufig spielt dabei Künstliche Intelligenz in Filmen eine Rolle. In vielen Fällen werden Maschinen dargestellt, welche mit Künstlicher Intelligenz oder kurz KI ausgestattet, …

„Künstliche Intelligenz in Filmen“ weiterlesen

Stricken und Programmieren: von 1 links/1 rechts zu 1010

Veröffentlicht: 10. Mai 2023

Autorin: Lena-Marie Hoppe Crafting meets Coding Wenn Stricken und Programmieren im selben Satz erwähnt werden, dann meist zur Verbildlichung von Gegensätzen: Tradition trifft auf Moderne, analog trifft auf digital, belächelnswertes DIY-Hobby trifft auf zukunftsorientierten Skill. Es mag widersprüchlich erscheinen, doch die Jahrhunderte alte Handarbeitstechnik und Programmiersprachen haben mehr gemein, als es auf den ersten Blick …

„Stricken und Programmieren: von 1 links/1 rechts zu 1010“ weiterlesen

Wie werde ich ein Citizen Scientist? – Der Leitfaden für Einsteiger

Veröffentlicht: 10. Mai 2023

Autor*innen: Mandy Tanneberger und Andreas Schlüter Lesezeit: 6 Minuten Sie interessieren sich für Citizen Science, wissen aber nicht wie Sie anfangen können? Keine Angst! Dieser Leitfaden soll Ihnen den Einstieg erleichtern. Das erwartet Sie in diesem Blogbeitrag Was ist Citizen Science überhaupt? Wer kann ein Citizen Scientist werden? Wie kann ich als Citizen Scientist aktiv …

„Wie werde ich ein Citizen Scientist? – Der Leitfaden für Einsteiger“ weiterlesen

Projektarbeit: H5P für interaktive Lernressourcen

Veröffentlicht: 27. Januar 2023

Autor:innen: Katharina Deymann, Alisa Held, Katharina Kroupa, Yannick Pollmann, Friederike Roth, Luise Scheiding, Nathan Scheulen, Madeleine Schütz und Marieke Tödter In ihrer Projektarbeit haben sich neun Studierende des 6. Semesters im Studiengang Informationsmanagement berufsbegleitend damit befasst, wie bestehende Lernressourcen didaktisch sinnvoll mit H5P angereichert werden können. Insgesamt wurden der Projektgruppe digitale Lerninhalte aus sechs unterschiedlichen …

„Projektarbeit: H5P für interaktive Lernressourcen “ weiterlesen

Ins Stammbuch geschrieben: Kodiert mit der Auszeichnungssprache TEI

Veröffentlicht: 12. Juli 2022

Autorin: Janica Kuhr Wie kodiere ich einen Stammbucheintrag mit XML-TEI und welchen Nutzen hat die Anwendung dieser Mark-Up-Language bei der Erschließung des Eintrags für die Forschung? Mit diesen Fragen befasst sich dieser Beitrag. Inhalt Was ist ein Stammbuch? Was ist TEI? Kodierung des „Werther-Stammbuchs“ mit TEI Kodierung des Stammbucheintrags von Christian Albrecht von Kielmannsegg Auszeichnung …

„Ins Stammbuch geschrieben: Kodiert mit der Auszeichnungssprache TEI“ weiterlesen

0 Kommentare

Urheberrecht im Kontext von Fan Fictions und RPGs

Veröffentlicht: 8. Juli 2022

Autor: Simon Kugler Wie Fan Fictions entstanden und warum sie gegen das Urheberrecht verstoßen Wie Fan-Fiction-Autoren und RPG-Betreiber mit der geltenden Rechtslage umgehen Wie sich die Fan-Fiction-Kultur professionalisiert und was aus dieser Entwicklung erwächst Abschnitt 1 – Der ReichenbaChfall Altes Konzept – modernes Phänomen Das Weitererzählen, Verändern oder Umformen bestehender Erzählungen hat eine lange Historie …

„Urheberrecht im Kontext von Fan Fictions und RPGs“ weiterlesen

0 Kommentare

Crypto War 3.0 – Ist das nicht nur was für Nerds?

Veröffentlicht: 7. Juli 2022

Autor: Leopold Paris Das Thema im Rat der Europäischen Union Ende 2020 war „Verschlüsselung von online Kommunikation“. Der Rat der EU diskutiert, wie z. B. E-Mails, WhatsApp Nachrichten oder Snaps von einem internetfähigen Gerät zum anderen gelangen. Eine Geschichte über die Crypto Wars. „Da gibts doch nichts großes zu diskutieren“, würde jetzt manch einer sagen. …

„Crypto War 3.0 – Ist das nicht nur was für Nerds?“ weiterlesen

0 Kommentare

Was ist Flask?

Veröffentlicht: 7. Juli 2022

Autor: Esben Christian Pedersen Inhalt Was ist Flask überhaupt? Installation Hello World Routing and Views Template Engine Jinja Fazit Was ist Flask überhaupt? Flask ist ein WSGI Micro-Framework für Webapplikationen. Ursprünglich wurde Flask als Aprilscherz von Armin Ronacher im Jahr 2010 entwickelt. Auf Grund steigender Beliebtheit unter den Usern, gründete Armin Ronacher die „The Pallets …

„Was ist Flask?“ weiterlesen

0 Kommentare

Beitragsbild forty in 49 - ein Spiel für das Gedächtnis und das räumliche Vorstellungsvermögen

Forty in 49: Ein Spiel für Gedächtnis und räumliches Vorstellungsvermögen

Veröffentlicht: 14. Januar 2022

Autor: Jannis Fortmann Link zum SpielZip Datei zum Download Inhalt Von Anfang an war es mein Plan, ein simples und optisch ansprechendes kleines Spiel zu designen, bei dem Animationen sinnvoll zum Einsatz kommen. Nach ein paar verworfenen Ideen entschied ich mich für diese Variante, bei der die räumliche Wahrnehmung und das Gedächtnis des Spielers auf …

„Forty in 49: Ein Spiel für Gedächtnis und räumliches Vorstellungsvermögen“ weiterlesen

DOI: Ein digitaler Objektidentifizierer

Veröffentlicht: 6. Dezember 2021

Autorin: Sabine Volkmer In diesem Beitrag geht es hauptsächlich um die Frage: Was ist ein digitaler Objektidentifizierer und wozu ist er gut? Inhalt: DOI-Vergabe Aufbau eines digitalen Objektidentifizierers (DOI) Vom DOI zum Dokument weitere Informationen Quellenverzeichnis Wortsuchspiel Weitere Beiträge Offenbar muss heutzutage fast alles mit Hilfe einer Identifikationsnummer zugeordnet werden. Selbst der Mensch. Jeder kennt …

„DOI: Ein digitaler Objektidentifizierer“ weiterlesen

Innovation in Bibliotheken: Deichman Bibliothek Oslo

Veröffentlicht: 26. November 2021

Autorin: Merle Stegemeyer „Wir leben in einer postdigitalen Situation. Die Leute wollen sich wieder real begegnen, öffentliche Räume werden wieder wichtiger.“[4] – Reinert Mithassel, Leiter der Biblio Tøyen Reinert Mithassel, Leiter der Biblio Tøyen in Oslo, spricht damit wohl nicht nur die andauernde Corona Pandemie an, sondern äußert den Wunsch vieler Menschen ihrer Umgebung und …

„Innovation in Bibliotheken: Deichman Bibliothek Oslo“ weiterlesen

Makerspaces: Eine Aufgabe für Öffentliche Bibliotheken?

Veröffentlicht: 26. November 2021

Inhalt Maker und Makerspaces Ausstattung und Angebot Makerspaces als Aufgabe von Öffentlichen Bibliotheken Anmerkungen und Quellen „Öffentliche Bibliotheken waren in früheren Zeiten Ausleihstationen für Bücher und audiovisuelle Medien. Dieses Rollenverständnis hat sich in den vergangenen zwanzig Jahren erheblich verändert. Zum einen haben das Internet und der starke Ausbau der digital verfügbaren Medien das Spektrum der …

„Makerspaces: Eine Aufgabe für Öffentliche Bibliotheken?“ weiterlesen

Tutorial: Ein Memory-Spiel

Veröffentlicht: 18. November 2021

Autorin: Linda Görzen Memory-Spiel Konzept Ziel dieses Projektes war die Erstellung eines Spiels , das durch sämtliche Animationen bzw. Animationseffekte modern und dynamisch wirken sollte. Memory ist ein Spiel, das weltbekannt und nicht zu kompliziert zu programmieren ist. Im Internet gibt es sämtliche frei verfügbare Beispielcodes. Einer davon wurde in diesem Projekt verwendet. Der Spielvorgang …

„Tutorial: Ein Memory-Spiel“ weiterlesen

Beitragsbild Tutorial zur Animation: Ein Tag mit Bobby

Tutorial: Ein Tag mit Bobby

Veröffentlicht: 17. November 2021

Autor*in: Julia Solohub Animation anschauen Quellcode (Zip-Archiv zum Download) Dieser Beitrag ist ein Tutorial zu der Animation „Ein Tag mit Bobby“ bei dem auf die Details zum Code, Inhalt, Besonderheiten, das Konzept und Schwierigkeiten eingegangen wird. Die Bilder dienen zur Veranschaulichung und Nachvollziehbarkeit und sind anklickbar, sodass man diese in Vollbildmodus und besserer Auflösung betrachten …

„Tutorial: Ein Tag mit Bobby“ weiterlesen

Beitragsbild Moderne Lernraumgestaltung in Universitätsbibliotheken

Moderne Lernraumgestaltung in Universitätsbliotheken

Veröffentlicht: 16. November 2021

Autorin: Hjördis Helberg Warum sollten sich Bibliotheken jetzt mit dem Thema Lernraum beschäftigen? Die Nachfrage nach physisch vorhandenen Medien sinkt. Dies lässt sich anhand von Ausleihzahlen feststellen. Gerade in naturwissenschaftlichen und technischen Fachrichtungen werden zunehmend elektronische Ressourcen genutzt. Diese Entwicklung hat zur Folge, dass der Bestand in den Lesesälen dezimiert bzw. magaziniert wird und Freiflächen …

„Moderne Lernraumgestaltung in Universitätsbliotheken“ weiterlesen

Didaktische Typographie: Weißraum und seine Wirkung

Veröffentlicht: 12. November 2021

Autor*in: Leonie Thissen Ein Beitrag zur didaktischen Typographie Jede*r, der*die lesen kann, kennt den typographischen Weißraum. Und jede*r hat auch schon mal die Wirkung von zu viel oder zu wenig davon auf einer Seite oder in einem Text an sich erlebt. Was einem dabei wohl eher nicht bewusst wurde: dass diese Wirkung mit dem Weißraum …

„Didaktische Typographie: Weißraum und seine Wirkung“ weiterlesen

Libraries for Future – Nachhaltigkeit in Bibliotheken im Kontext der Agenda 2030

Veröffentlicht: 26. August 2021

Autorin: Ann-Kathrin Wallmann Nachhaltigkeit ist ein Begriff, der uns derzeit so gut wie überall begegnet – auch im Bibliothekswesen wird das Thema seit ein paar Jahren präsenter. Oft wird es jedoch als eher abstrakt wahrgenommen, was beim Versuch der konkreten Umsetzung zu Problemen führen kann. Durch die Konkretisierung in Form der Nachhaltigkeitsziele der Agenda 2030 …

„Libraries for Future – Nachhaltigkeit in Bibliotheken im Kontext der Agenda 2030“ weiterlesen

Bibliotheken im digitalen Wandel: Von der Buchkarte zum digitalen Nutzerkonto

Veröffentlicht: 25. März 2021

Autorinnen: Anna Pläp und Tamara Schaufler Bibliotheken befinden sich im digitalen Wandel – in aktuellen Zeiten von Corona mehr denn je. Dass viele Publikationen online verfügbar sind, wir unsere Medien am Verbuchungsautomaten selbst ausleihen können und diese über das Internet mit ein paar Klicks verlängern, ist für viele Bibliotheksnutzer:innen der ganz normale Alltag. So wird …

„Bibliotheken im digitalen Wandel: Von der Buchkarte zum digitalen Nutzerkonto“ weiterlesen

0 Kommentare

Tutorial: Prototype erstellen mit Figma – So funktioniert’s!

Veröffentlicht: 10. November 2020

Autor*in: Anna Selitski und Anna-Lisa Voigt Einen Prototype in dem Designertool Figma zu erstellen ist eine sehr schnelle und einfache Sache. Vielleicht kennst du auch die Bezeichnung Klickdummy für Prototype. Wenn du mal Screens für eine App oder eine Webseite erstellst, kannst du einfach mit einem Klickdummy die User Experience und die User Journey darstellen. …

„Tutorial: Prototype erstellen mit Figma – So funktioniert’s!“ weiterlesen

React & Angular im Vergleich – Was führt dich zum Erfolg?

Veröffentlicht: 3. November 2020

Autor*in: Melanie Hartkopf Ihr habt euch für die Webentwicklung entschieden – Glückwunsch. Ein Feld, so überlaufen wie kaum ein anderes. Hinter jeder Ecke wartet ein neues Projekt mit dem die Entwicklung einfacher, effektiver, schneller und sicherer sein soll. In dem Dschungel an Möglichkeiten ist es leicht, sich zu verirren. Deswegen stelle ich euch heute zwei …

„React & Angular im Vergleich – Was führt dich zum Erfolg?“ weiterlesen

BestOf Bachelor: Webseitenübergreifende Nutzerverfolgung ohne Verwendung von Cookies in der EU

Veröffentlicht: 16. Oktober 2020

Das Ziel dieser Arbeit ist, verschiedene Trackingtechnologien unter Berücksichtigung gegebener Rahmenbedingungen im Rechtsraum der Europäischen Union in ihrer Funktionsweise zu vergleichen und die nach derzeitigem Stand realistische Nachfolgetechnologie zum Tracking via Cookies zu benennen – Fingerprinting.

SEO: Unterschied zwischen Onpage- und Offpage Optimierung

Veröffentlicht: 7. September 2020

Autor*in: Julia Solohub SEO. Vielleicht bist auch du über diesen Begriff gestolpert, aber wusstest nie was er bedeutet. In diesem Beitrag versuche ich es dir mal zu erklären. Stell dir vor du würdest nach Informationen für deine Präsentation im Internet suchen. Wahrscheinlich suchst du dafür in Google so wie es die Mehrheit tut. Dazu gibst …

„SEO: Unterschied zwischen Onpage- und Offpage Optimierung“ weiterlesen

0 Kommentare

Bachelorarbeit von Lukas Fischer: Ein Festival-Plugin für WordPress

BestOf Bachelor: Ein WordPress-Plugin für den Vergleich von Veranstaltungen

Veröffentlicht: 4. September 2020

In der Bachelorarbeit von Lukas Fischer (2020) mit dem Titel „Konzeption und Anwendung eines WordPress-Plugins für den Vergleich von Veranstaltungen“ wird thematisiert, wie WordPress über ein selbstentwickeltes Plugin für den komfortablen Vergleich von Festivals eingesetzt werden kann. In seinem Abstract schreibt Lukas: „Plugins erweitern die Funktionalität von WordPress und helfen Webseitenbetreibern beim Hinzufügen neuer Elemente …

„BestOf Bachelor: Ein WordPress-Plugin für den Vergleich von Veranstaltungen“ weiterlesen

WebLab HsH: Data Mining und Warenkorbanalyse

Data Mining bei der Warenkorbanalyse

Veröffentlicht: 28. Februar 2020

Autori*nnen: Judith Hauschulz und Verena-Christin Schmidt Oder: Werden Windeln und Bier wirklich oft zusammen gekauft? Die Warenkorbanalyse gehört zum Data Mining und ist ein Anwendungs-gebiet der Assoziationsanalyse. Wenn du diese Begriffe hörst, ist dir wahrscheinlich klar, dass es um Daten geht. Aber das klingt nun vielleicht etwas trocken, deshalb fangen wir nochmal neu an: Du …

„Data Mining bei der Warenkorbanalyse“ weiterlesen

Aufgabentypen des Data Mining

Veröffentlicht: 28. Februar 2020

Autorin: Linda Görzen Dieser Beitrag im Überblick: Einführung: Data Mining – Was ist das? Klassifikation Regressionsanalyse Assoziationsanalyse Ausreißererkennung Clusteranalyse Fazit Einführung: Data Mining – Was ist das? ”Signals always point to something. In this sense, a signal is not a thing but a relationship. Data becomes useful knowledge of something that matters when it builds …

„Aufgabentypen des Data Mining“ weiterlesen

WebLab HsH: Bachelorarbeit von Sarah Büchting, 2019

BestOf Bachelor: Webbasierte Programmierplattformen für Kinder im Vergleich

Veröffentlicht: 19. Februar 2020

In der Bachelorarbeit von Sarah Büchting (2019) mit dem Titel „Webbasierte Programmierplattformen für Kinder im Vergleich“ wird thematisiert, wie Coding zu Zwecken der sich im Umbruch befindenden MINT-Bildung eingesetzt werden kann und welche Kompetenzen durch das Erlernen von Programmierfähigkeiten gefördert werden. Darüber hinaus wird ein Bezug zur Informatik als Herkunftswissenschaft des Coding hergestellt und die …

„BestOf Bachelor: Webbasierte Programmierplattformen für Kinder im Vergleich“ weiterlesen

BestOf Bachelor: Gamification-Plugins für WordPress

Veröffentlicht: 13. Mai 2019

Christoph Breitsprecher hat eine interessante Bachelorarbeit mit dem Titel „Evaluation von Gamification-Plugins für WordPress“ im Studiengang Informationsmanagement verfasst. Dabei hat er detailliert untersucht, welche Möglichkeiten WordPress in Form von Plugins bietet, einfache Gamification-Mechanismen wie Punktesysteme oder Bestenlisten in WordPress zu integrieren. Auch Grundlagen zu Gamification erklärt Christoph anschaulich. Mehr finden Sie in der Pdf-Version seiner …

„BestOf Bachelor: Gamification-Plugins für WordPress“ weiterlesen

MM-SYS-2: Der Architekturstil Bauhaus

Veröffentlicht: 28. Januar 2019

Autor: Arlind Ukaj Die fertige Arbeit finden sie hier. Konzept Als Grundkonzept dient ein One-Pager, die Seitenbesucher mit intuitiven Mitteln durch die Seite zu führen. Thematisch informiert die Seite über die wichtigsten Personen und Bauwerke des Bauhauses. Desgin Das Template der Seite ist eine komplette Eigenkreation und inspiriert sich anderen Bauhaus Webseiten sowie Anlehnung an …

„MM-SYS-2: Der Architekturstil Bauhaus“ weiterlesen

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

Veröffentlicht: 10. Januar 2019

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 …

„MM-SYS-2: Bauhaus-Ereignisse 1919-1933“ weiterlesen

Tutorial: Informativer OnePager für Austauschstudenten

Veröffentlicht: 22. Oktober 2018

Tutorial: Informativer OnePager für Austauschstudenten Autor: Cagla Bacaksiz Im Rahmen des Kurses „Entwicklungen von Multimediasystemen II“ sollte eine funktionale Web Animation konzipiert und technisch umgesetzt werden. Die Grundidee meiner Web Animation bestand darin, einen übersichtlichen One-Pager zu programmieren, welcher Informationen für ausländische Studenten bzw. Studieninteressierten beinhaltet. Da ich selber in diesem Semester im Austausch mit …

„Tutorial: Informativer OnePager für Austauschstudenten“ weiterlesen

BestOf Bachelor: Interaktives Storytelling zum Bauhaus100 Jubiläum

Veröffentlicht: 2. August 2018

Amy Linh Hoang hat ihre sehr gute Bachelorarbeit im Studiengang Informationsmanagement mit dem Titel „Konzeption und Realisierung eines interaktiven Storytelling anlässlich des Bauhausjubiläums“ abgeschlossen und ein sehenswertes, interaktives Storytelling mittels JavaScript, CSS3 und HTML5 erstellt. Der Titel des Storytellings lautet „Oscar Schlemmers Weg zum Bauhaus„. Amys Bachelorarbeit ist als Kooperation der Abteilungen „Information und Kommunikation“ und „Design …

„BestOf Bachelor: Interaktives Storytelling zum Bauhaus100 Jubiläum“ weiterlesen

Bachelorarbeit von Alina Finger: Virtueller Rundgang für die Expo Plaza

BestOf Bachelor: Virtueller Rundgang für die Expo Plaza

Veröffentlicht: 29. Mai 2018

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 …

„BestOf Bachelor: Virtueller Rundgang für die Expo Plaza“ weiterlesen

Tutorial: Informationsmanager auf dem Arbeitsmarkt

Veröffentlicht: 21. November 2017

Eine Infografik als funktionale Animation erstellt im Rahmen des Moduls „Medienintegration“ im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg) Autor: Frieda Josi Tutorial: Einsatzzweck und Einordnung in Animationsart Diese Infografik mit dem Inhalt „Informationsmanager auf dem Arbeitsmarkt“ dient der effektiveren Informationsvermittlung für, beispielsweise, der Webseite des Studienganges Informationsmanagement der Hochschule Hannover. Mit …

„Tutorial: Informationsmanager auf dem Arbeitsmarkt“ weiterlesen

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

Veröffentlicht: 7. November 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 …

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

Infografik zu Informationsmanagement an der Hochschule Hannover

Interaktive Infografik: Was macht eigentlich ein Informationsmanager?

Veröffentlicht: 19. April 2017

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 …

„Interaktive Infografik: Was macht eigentlich ein Informationsmanager?“ weiterlesen

BestOf: WWW-Techniken I Wise 2016/17

Veröffentlicht: 7. April 2017

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 …

„BestOf: WWW-Techniken I Wise 2016/17“ weiterlesen

Beitragsbild: Photo by Jason Dent on Unsplash.

7. Dezember 201711. Juni 2020

Tutorial: Multiselect Dropdown Liste mit Semantic UI

Dropdown Multiselect List mit Semantic UI

Eine Multiselect Dropdown Liste

erstellt im Rahmen des Moduls „Medienintegration“ im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg)

Autor: Franziska Braun

Tutorial

Die Multiselect Dropdown-Listen werden in Online-Formularen (Bestellungen, Kontaktformulare) oder Online-Fragebögen verwendet. In diesem Beispiel können Lehrveranstaltungen ausgewählt werden. Die Anzahl ist auf maximal 3 Lehrveranstaltungen begrenzt.

Eine HTML Dropdown-Listen allein ist allerdings nicht nutzerfreundlich. Durch CSS und Javascript kann die Nutzerfreundlichkeit dieser einfachen Web-Komponente optimiert werden. Die verbesserte Nutzerfreundlichkeit der Web-Komponte in diesem Beispiel ist mittels CSS und Webanimation mithilfe der Semantic UI realisiert. Ziel ist die effektiviere Interaktion des Nutzer mit folgenden Web-Animationen:

Visuelles Feedback bei Nutzereingabe
Micro Interaktionen
Visuelle Zustandsübergänge

Da die realisierten Web-Animationen zur Verbesserung der Interaktion und zur User Experience dienen, sind sie als funktionale Animation einzuordnen.

HTML

HTML-Seite (index.html) beinhaltet die Dropdown-Liste, die mit den Tag <select> eingeleitet wird. Innerhalb dieses Tags sind die Auswahloptionen der Liste mit dem HTML Tag <option> festgelegt.
Außerdem sind in die HTML Seite innerhalb des HTML Tag <head> folgende externe CSS-Dateien mit dem Tag <link> eingebunden:

Darüber hinaus beinhaltet die HTML folgende externe Script-Bibliotheken, jeweils im Tag <script>:

Javascript

Die Javascript-Datei (index.js) dient zum Aufruf der Funktion multi-select für die Dropdown-Liste (siehe auch Multiple Selections). Die Funktion ist erweitert um {maxSelections: 3}, damit aus der Dropdown-Liste nur max. 3 Optionen ausgewählt werden können (siehe auch Maximum Selection).

CSS

Die CSS-Datei (index.css) beinhaltet Layoutänderungen, die für eine bessere Nutzerfreundlichkeit erachtet wurden. Als Farbschema sind zwei Material Farbcodes ausgewählt.

Bespiele für Änderungen:

Unnötige Farbeffekte von beispielweise :focus und :hover vereinheitlicht.

Farbänderung des vorhandenen Font Awesome Icons fa-caret-down bei :hover.
.ui.selection.dropdown > .dropdown.icon:hover {color:#6b9b37;}

Einfügen des Font Awesome Icons fa-caret-up bei aktiver Dropdown-Liste.
.ui.active.selection.dropdown > .dropdown.icon, .ui.visible.selection.dropdown > .dropdown.icon::before {content: '\f0d8';color: #4b636e;}

Änderung der Farbe der ausgewählten Optionen (label) bei aktiver und inaktiver Dropdown-Liste.
.ui.visible.selection.dropdown > .label,.ui.selection.dropdown .label{background-color: #a7c0cd; color: #fff; box-shadow: 0 0 0 1px #4b636e inset;}

Änderung der Farbe des Delete Icons bei Mouse-Hover.
.ui.label > .delete.icon:hover {color: red;}

multiselect-dropdown-list-semantic-ui.zip

21. November 201711. Juni 2020

Tutorial: Informationsmanager auf dem Arbeitsmarkt

Eine Infografik als funktionale Animation

erstellt im Rahmen des Moduls „Medienintegration“ im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg)

Autor: Frieda Josi

Tutorial:

Einsatzzweck und Einordnung in Animationsart

Diese Infografik mit dem Inhalt „Informationsmanager auf dem Arbeitsmarkt“ dient der effektiveren Informationsvermittlung für, beispielsweise, der Webseite des Studienganges Informationsmanagement der Hochschule Hannover. Mit Hilfe der Animation wird das visuelle Erfassen der einzelnen Branchen, in denen Informationsmanager arbeiten, erleichtert. Die Daten, die für diese Infografik verwendet wurden, stammen aus der Absolventenbefragung 2016 von Prof. Dr. Jutta Bertram. Diese Infografik ist ein Kreisdiagramm und besteht aus Micro-Interaktionen wie z.B. Click, Hover und Mouse out und verschiedenen Übergängen (Transitions).

Verwendete Bibliotheken, APIs, weitere Ressourcen

HTML5
HTML5-Seite, die die benötigten Container und Texte (Beschriftungen der Branchen und der Prozentsätze) für die Infografik, bereitstellt.

CSS3
In der CSS3 Datei sind die animierten Übergänge: transition-delay, transform-origin, transition: opacity, transform:translate(), transition-duration, .button:hover für die Infografik und für den „Animation“- Button angelegt. Ebenso die Formatierungen für HTML-Seite, Texte, Button und Infografik.

JavaScript
In der JavaScript-Datei befinden sich die Funktionen für das Ausblenden der Infografik: .addEventListener(’click’, function(e) …) und das Einblenden der Infografik: setTimeout(function()).

Verwendete Vorlagen

Animationsvorlage
Die Vorlage zu dieser funktionalen Animation wurde von Joshua Dorenkamp auf codepen.io zur Verfügung gestellt. Für das Kreisdiagramm hat er acht Teile verwendet (siehe Abb.). Link zum Original

Buttonvorlage
Die Gestaltung des Buttons „Animation““wurde mit einer Vorlage von w3schools.com erstellt. Link zum Original.

Vorgenommene Anpassungen an der Grafik

Zu den acht vorhandenen Teilen des Kreisdiagrammes wurden noch weitere acht hinzugefügt.

Für jeden der 16 Teile in der CSS-Datei:

1. Je eine farbige Fläche und ihre Drehung:
.pie-1 {
stroke-dasharray: 0 628.32;
stroke-dashoffset: 488;
stroke: #AD538C;
-webkit-transition-delay: 25ms;
transition-delay: 25ms;}

2. Je eine Größe einer farbigen Fläche:
.animated .pie-1 {
stroke-dasharray: 134 628.32;}

3. Je eine Linie zu ihrer farbigen Fläche hin:
[class^=“line-„].line-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

4. Das Erscheinen der farbigen Fläche:
Wird unter „Änderungen der Grafik im Detail/Drehung“ aufgezeigt.

5. Das Erscheinen der Linie:
[class^=“line-„].line-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

6. Das Erscheinen der Beschriftung:
[class^=“text-„].text-1 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;}

7. Die Formatierung der Beschriftung:
.text-lbl {
font-size: 11px;}

Für jeden der 16 Teile in der HTML-Datei:

Je eine Prozentzahl (z.B. 20,50%) und je eine Beschriftung (z.B.Wissenschaftliche Bibliothek).
<svg viewbox=“0 0 650 500″>
<circle class=“outline“ r=“100″ cx=“210″ cy=“200″ />

<circle class=“pie-1″ r=“100″ cx=“210″ cy=“200″ />
<line class=“line-1″ x1=“165″ y1=“100″ x2=“144″ y2=“65″ />
<text class=“text-1 text-head“ x=“110″ y=“40″>20,50%</text>
<text class=“text-1 text-lbl“ x=“100″ y=“55″>Wissenschaftliche Bibliothek</text>

In der JavaScript-Datei wurden keine Änderungen vorgenommen.

Vorgenommene Anpassungen am Button

1. Formatierung des Buttons
.button {
background-color: white;
border: 2px solid #555555;
color: black;
padding: 7px 23px;
text-align: center;
text-decoration: none
display: inline-block;
font-size: 13px;
font-weight: bold;
margin: 0% 10%;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;}

2. Formatierung des Buttons bei Mouse over
.button:hover {
background-color: #555555;
color: white;}

Änderungen an der Grafik im Detail

Für die Fläche eines einzelnen Teils aus dem Kreisdiagramm:

Drehung:
.pie-1 {
stroke-dasharray: 0 628.32;
stroke-dashoffset: 488;
stroke: #AD538C;
-webkit-transition-delay: 25ms;
transition-delay: 25ms;}

Größe:
.animated .pie-1 {
stroke-dasharray: 134 628.32;}

Vergrößerung bei Mouse over:
[class^=“pie“]:hover
{stroke-width: 70;
border-radius: 4px;}

Position:
Die Position wird bestimmt durch die Angabe der Drehung in der Kreislinie. Siehe oben unter „Drehung“ (stroke-dashoffset: 488; /*Abstand des dasharray Musters*/).

Für die Linie einer Zuordnung von Beschriftung und farbiger Fläche im Kreisdiagramm:

Länge, Drehung und Position in der HTML-Datei:
<line class=“line-1″ x1=“165″ y1=“100″ x2=“144″ y2=“65″ />

Beschriftung und Prozentangabe im Kreisdiagramm:

Position in der HTML-Datei:
<text class=“text-1 text-head“ x=“110″ y=“40″>20,50%</text>
<text class=“text-1 text-lbl“ x=“100″ y=“55″>Wissenschaftliche Bibliothek</text>

JavaScript-Animation

Die JavaScript-Animationen wurden, aus dem Original von Joshua Dorenkamp, unverändert übernommen.

Animation, die beim Mausklick auf den Button „Animation“ ausgelöst wird:
var btn = document.getElementById(‚toggle‘); /* Button aus Zeile 14 index.html */
var wrap = document.getElementById(‚wrap‘); /* Kontainer für die Tortengrafik */
btn.addEventListener(‚click‘, function(e) /* Ereignisobjekt für Button „Animation“ und einem einfachen Klick darauf.*/
{
wrap.className = „“; /*Ausblenden der Tortengrafik, bei Klick auf Button „Animation“ */
setTimeout(function() {
wrap.className = „animated“;
},3000);
});
setTimeout(function() /*Einblenden der Tortengrafik, beim Laden der Datei und als zweites Ereignis nach dem Klick auf Button „Animation“ */
{
wrap.className = „animated“;
},1000);

Quelldateien Zip

Tutorial als PDF

Informationsmanager auf dem Arbeitsmarkt

Link zur Animation: hier

Zum Codepen

20. November 201711. Juni 2020

Stop-Motion: Post-Its und Gaming

Im Rahmen des Kurses „Entwicklung von Multimediasystemen I“ (Studiengang Informationsmanagement, Fakultät 3, Hochschule Hannover) erstellten Philipp Höltermann und Christian Koch ein Stop-Motion-Video. Das Video greift Videospielklassiker und Gaming-Neuheiten mittels Post-Its auf. Erstellt wurde das Video nach klassischer Stop-Motion-Technik mit Adobe Photoshop und Premiere.

17. November 201715. Juni 2023

Tutorial: Scroll Percent Display with liquid Animation

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.

Konzept und Quellcode mit Erläuterung von Scroll Percent Display with liquid Animation

Author: Lars Heinrich und Neele Lange

Einleitung

Mal ehrlich!? Schon mal auf einer Webseite gewesen und ihr musstet scrollen und scrollen und scrollen? Dabei habt ihr euch gefragt, wie weit denn noch? Wann kommt das Ende?

Um dieses kleine Problem mit einem Gimmick zu lösen, haben wir dieses Tutorial geschrieben.

Anmerkung: Diese Idee ist nicht in Stein gemeißelt. Sie kann beliebig erweitert, verbessert oder auch verändert werden.

Notwendige Dateien

Zuerst benötigt man die Grunddateien jeder Homepage. Dafür legt man sich folgende Dateien an.

index.html
style.css
script.js

zusätzlich

liquid.js

Erstellt diese Dateien einfach mit einem Editor eurer Wahl und speichert sie in einem separaten Ordner.

Libraries

Die Libraries beinhalten alle wichtigen Information, um die Liquid Animation herzustellen. Jquery und D3.js, sowie die liquid.js werden wir ganz einfach via API hinzufügen. Das hat den Vorteil, dass man immer die aktuellste Version hat.

HTML Datei vorbereiten

In der HTML Datei wird nun folgender Code eingefügt:

<html>
    <head>
        <meta charset="utf-8"> 
        <title> Hier kommt euer Titel hin</title>
      </head>
    <body>
      </body>
</html>

Nun ist das Grundgerüst der HTML Datei erstellt.

<html> Ist dabei der äußerste Gerüst und schließt alles andere ein

<head> ist der Kopf und umfasst neben dem Titel der Seite auch alle Scripte, die Stylesheets und Metadaten.

<body> ist das was der Nutzer am Ende sehen wird. Hier kommen alle Informationen hinein, welche später zu sehen sein sollen.

</html></head></body> schließen die jeweiligen Felder.

Verbindungen herstellen

Da wir eine Verbindung zu den jeweiligen Dateien und API´s benötigen, fügen wir folgendes im Headbereich ein:

<script src="script.js" type="text/javascript"></script>

Das verbindet die index.html Datei mit eurer script.js Datei

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>

<script src="https://gist.githubusercontent.com/brattonc/5e5ce9beee483220e2f6/raw/4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43/liquidFillGauge.js" language="JavaScript"></script>

<script src="liquid.js" type="text/javascript"></script>

Dieser Abschnitt stellt die Verbindung zu den notwendigen API´s her

<link rel="stylesheet" type="text/css" href="style.css">

und zu guter Letzt, ist auch die style.css Datei verbunden.

<body>

Die HTML Datei ist nun fast fertig. Zum Schluß wollen wir ja etwas sehen und müssen im Body noch unsere Prozent Anzeige hinzufügen.

Ihr vergibt euren <body> noch eine ID um später dem Script seine Aufgabe zuzuweisen zu können.

<body id="body">

Anschließend erstellt ihr einen DIV Container:

<div  class="box" >
    <svg id="fillgauge1" width="300%" height="300" ></svg>
</div>

Der <div> Container benötigt ein class, welches vom Stylesheet benötigt. *optional

Es ist auch ohne Div Container möglich, aber für die Übersicht praktischer.

Nach dem </div> muss man nur noch einmal das Script einbinden

<script src="script.js" type="text/javascript"></script>

Das bewirkt, dass das Script hier geladen wird. Ansonsten würde keine Anzeige entstehen.

Die HTML Datei ist fertig.

Komplette index.html Datei zur Übersicht:

<html>
    <head>
        <meta charset="utf-8"> 
        <title> Hier kommt euer Titel hin</title>

<script src="script.js" type="text/javascript"></script>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>

<script src="https://gist.githubusercontent.com/brattonc/5e5ce9beee483220e2f6/raw/4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43/liquidFillGauge.js" language="JavaScript"></script>

       

        <link rel="stylesheet" type="text/css" href=„style.css">
</head>

  <body id=„body">

     <div class="box" >
           <svg id="fillgauge1" width="300%" height="300" ></svg>
     </div>

     <script src="script.js" type="text/javascript"></script>
    
  </body> 
</html>

Anmerkung: Die „id“ und „class“ Bezeichnungen könnt ihr auch beliebig anders benennen, man muss nur darauf achten, diese auch im Script und im Stylesheet anzupassen.

Script Datei mit Inhalt füllen

Jetzt wird gecodet. Aber alles sehr einfach.

var x = 0;

var config0 = liquidFillGaugeDefaultSettings();
config0.circleColor = "silver"; //Außenringfarbe
config0.waveTextColor = "white"; //Textfarbe
config0.circleThickness = 0.05; //Dicke des Außerings
config0.textVertPosition = 0.2; //Position des Textes
config0.waveAnimateTime = 1000; //Wellenanimation

var gauge1 = loadLiquidFillGauge("fillgauge1", x, config0);

Der Code erstellt das eigentliche Liquid-Display.

var x erstellt eine Variable und erzeugt die erste Zahl, welche beim Laden angezeigt werden soll. Da man immer oben bei einer Homepage beginnt, soll hier die Zahl 0 angezeigt werden, denn schließlich haben wir ja noch gar nicht gescrollt.

var config0 lädt die folgenden Einstellungen, welche auch im Hauptscript liegen, die wir auch für unsere Webseite anpassen möchten. „ACHTUNG: niemals das Hauptscript* ändern, da sonst das ganze Script zerstört werden kann“.*Muss dann als Datei vorliegen.

var gauge1 erstellte die Animation. Darauf ist zu Achten, dass die Klammer folgende Werte enthällt.

(„ID“, Anfangswert, Konfiguration)

Scrollscript

document.getElementById("body").onscroll = function() {gauge1.update(NewValue2());};

Im Grunde ist dieser Code Abschnitt das Herzstück des Ganzen. Ohne diesen Abschnitt hätten wir keine Scrollfunktion.

Hier könnte man auch eine andere Funktion implementieren, wenn man die Liquid Animation nicht verwenden möchte.

Beim Scrollen aktivieren wir diesen Code, da wir zuvor dem Body die ID „body“ hinzugefügt haben. Beim Scrollen lösen wir die Function gauge1.update aus, die auf die NewValue2 Function zugreift.

Um beim Scrollen einen Wert zu erhalten benötigen wir diesen Codeabschnitt:

function NewValue2(){	
    
    var $window = $(window);
    var documentHeight = $("body").height();
    var windowHeight = $window.height();
    var scrollTop = $window.scrollTop();
    var scrollPercent = 2* ((scrollTop) / (windowHeight));
    
    if (Math.round(scrollPercent*100) >100)
        return 100;
    else
        return Math.round(scrollPercent*100)
}

Die Function NewValue2 erfasst die Höhe der Seite und berechnet den Abstand der Seite mit dem TOP der Seite. Var scrollPercent berechnet den Wert in Prozent.

Die untere if – else Schleife ist ein Hilfsmittel um immer nur maximal 100% angezeigt zu bekommen.

Achtung: Hier kann es zu Fehlern kommen, wenn eure Seite kürzer oder länger ist, als die Tutorial Seite. Ggf. muss man hier den Code anpassen.

Die Script Datei ist nun fertig erstellt.

Komplette script.js Datei zur Übersicht:

var x = 0;

var config0 = liquidFillGaugeDefaultSettings();
config0.circleColor = "silver"; //Außenringfarbe
config0.waveTextColor = "white"; //Textfarbe
config0.circleThickness = 0.05; //Dicke des Außerings
config0.textVertPosition = 0.2; //Position des Textes
config0.waveAnimateTime = 1000; //Wellenanimation

var gauge1 = loadLiquidFillGauge("fillgauge1", x, config0);

document.getElementById("body").onscroll = function() {gauge1.update(NewValue2());};

function NewValue2(){	
    
    var $window = $(window);
    var documentHeight = $("body").height();
    var windowHeight = $window.height();
    var scrollTop = $window.scrollTop();
    var scrollPercent = 2* ((scrollTop) / (windowHeight));
    
    if (Math.round(scrollPercent*100) >100)
        return 100;
    else
        return Math.round(scrollPercent*100)
        
        }

Stylen nicht vergessen

Ohne Style geht es nicht. Alle Einstellungen sind veränderbar und auf die eigenen Wünsche und Homepage leicht anzupassen. Also Mut zum ausprobieren.

Komplette style.css Datei zur Übersicht:

body {
    font-family: "Lato", sans-serif;
    background-color: #333;
    height: 200%;
}

.liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }

.box {
    	position: fixed;
    margin: 0 auto;
    	margin-top: 20%;
    width:300;
    	height: 300;
    color: "black";
    text-align: center;
}

Das Tutorial ist in der Funktion nun abgeschlossen.

GESCHAFFT!!!

Beispiel Dateien zum Download

Beispiel:

Beispiel ansehen

13. November 201715. Juni 2023

Tutorial: Interaktive Führung durch den Studiengang Informationsmanagement

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Interaktive Führung durch den Studiengang Informationsmanagement

Autor: Lena Meyer

Der Studiengang Informationsmanagement ist einzigartig und wird derzeit nur an der Hochschule Hannover gelehrt. Damit sich Studieninteressierte einen ersten Eindruck verschaffen können, wird die nachfolgende Website über eine Slideshow die Location der Fakultät kurz darstellen und über die interaktive Timeline einen Überblick zu den inhaltlichen Studienthemen geben.

Konzept

Die Website wurde zum Zweck der inhaltlichen und zugleich der visuellen Darstellung der Studieninhalte eines Informationsmanagers entwickelt. Sie soll den Nutzer interaktiv mithilfe von diversen funktionalen Animationselementen durch den Studiengang Informationsmanagement führen.

Aus Stilgründen wird die Website mit dem einfliegenden Text „Welcome“ gestartet. Dieser hat für den Nutzer jedoch keine weitere Funktion bzw. Bedeutung. Er dient ausschließlich der Gestaltung eines innovativen Layouts.

Die interaktive Navigation soll den Nutzer durch den Studienablauf eines Informationsmanagers führen. Über die farbliche Hervorhebung der Navigation-Tabs erhält der Nutzer die sofortige Rückmeldung an welchem Navigationspunkt er sich aktuell befindet.

Hinter dem Navigationspunkt „Location“ verbirgt sich eine Slideshow. Dadurch erhält der Studieninteressierte einen ersten Eindruck von dem Gebäude und dem dazugehörigen Campus der Hochschule Hannover. Aktuell befinden sich in der Slideshow drei Beispielbilder, diese können nach Belieben ausgetauscht oder ergänzt werden. Allerdings ist dies nur über den Quellcode möglich. Über die Pfeile Links und Rechts kann der Nutzer die Bilder anklicken. Dies gelingt zusätzlich durch das Klicken auf einer der drei im unteren Teil befindlichen Rechtecke. Über eine farbliche Hervorhebung der Rechtecke wird dem Nutzer jeweils signalisiert, welches Bild er zurzeit ausgewählt hat.

Der zweite Navigationspunkt ist die Timeline. Dahinter sollen sich die Studieninhalte innerhalb der insgesamt sieben Semester befinden. Dargestellt wird ein Zeitstrahl, der mit unterschiedlichen Daten versehen ist. Sobald der Nutzer auf eines der Daten klickt, erhält er eine kurze inhaltliche Darstellung der Themen des Semesters. Der Zeitstrahl wurde in einem Responsive Design entwickelt, über die Buttons links und rechts, lässt sich der Zeitstrahl dementsprechend verschieben. Abhängig des angeklickten Datums färbt sich zusätzlich der Zeitstrahl in der Farbe orange, dadurch wird dem Nutzer signalisiert, welches Datum er aktuell ausgewählt hat.

Der Navigationspunkt „Map“ beinhaltet eine Metrik, die aus drei unterschiedlichen Boxen besteht. Die Boxen sollen den Nutzer zum Klicken animieren. Nach dem Klick erhält der Nutzer eine Zusatzinformation, die ausschließlich beim Klick ersichtlich ist. Über das „X“, welches sich oben rechts befindet, kann die Box wieder geschlossen werden.

Der letzte Navigationspunkt ist das Impressum. Allerdings erreicht der Nutzer das Impressum nicht direkt durch das Klicken des Tabs. Er wird dazu animiert, auf den sich im unteren Bereich befindlichen „Scroll-Down Button“ zu klicken. Durch einen Anker gelangt er anschließend zum Inhalt des Impressums. Durch das Bouncen des Buttons, soll der Nutzer auf den Scroll-Down Button aufmerksam werden.

Technische Umsetzung

Die Website wurde mithilfe von Elementen aus HTML 5, CSS 3 und Javascript entwickelt. Zusätzlich wurden diverse Librarys von jquery oder css bezüglich der Funktion und der visuellen Darstellung hinzugezogen. Um welche Libraries es sich dabei handelt wird unter dem Punkt „Quellen“ aufgezeigt.

Plattformen, wie „W3schools“ oder „Codepen“ haben maßgeblich an der Entwicklung der Website mitgewirkt. Zum einen galten sie als Inspiration und zum anderen als technische Unterstützung bei der Umsetzung. Um welche Code Beispiele es sich dabei jeweils handelt, wird ebenfalls in den Quellen aufgeführt.

Zum vollständigen Nachvollzug des Aufbaus und der technischen Gestaltung der Website, ist der dazugehörige Quellcode mit zahlreichen Kommentaren ausgestattet. Dadurch kann ein noch besseres technisches Verständnis erzielt werden.

Die Website ist unter dem folgenden Link zu erreichen : Informationsmanagement.

Der dazugehörige Quellcode mitsamt des Konzepts und Screenshots ist unter dem folgenden Link zu erreichen: Informationsmanagement Quellcode.

Quellen

Libraries:

https://fonts.googleapis.com/css?family=Lato:400,700

https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

https://fonts.googleapis.com/css?family=Montserrat:400,700

https://code.jquery.com/jquery-3.2.1.min.js

http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js

Codepen:

http://codepen.io/hellaFont/pen/CdgAv

Stackoverflow:

http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-javascript

9. November 201715. Juni 2023

Tutorial: Ein Akkordeonmenü für die Fakultät III

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Ein Akkordeonmenü für die Fakultät III

Autoren: Svenja Hamacher und Alina Finger

Umsetzung: hier

Quellcode+Bild: multimediasysII

Konzept

Die Aufgabenstellung zur Entwicklung und Implementierung einer funktionalen Web Animation hat als Vorgabe, dass es keine rein dekorative Animation ohne Funktion sein durfte. Weiterhin sollte nach Möglichkeit das Thema Studium/ Informationsmanagement aufgegriffen werden.

Vor dem Hintergrund der Funktionalität fiel unsere Wahl recht schnell auf eine Abwandlung eines Akkordeonmenüs. Der Vorteil dieser Art von Menü ist, dass man viel Inhalt auf wenig Raum darstellen kann und somit detaillierte Inhalte zu unterschiedlichsten Themen abbildbar werden. Gerade Kontaktdetails haben dabei oft nur einen geringen Umfang, weswegen bei Fakultäten oft verschiedene Kontaktinformationen auf eine Seite geschrieben werden. Um also die Kontaktinformationen der Fakultät 3 übersichtlicher und schöner zu gestalten, entschlossen wir uns eine einfache Navigation mit JavaScript zu bauen, die den platzsparenden Gedanken des Akkordeonmenüs aufgreift. Derzeit gibt es mehrere Seiten, auf welchen verschiedene Kontakt- und Weginformationen zur Fakultät 3 und ihren Abteilungen „Design und Medien“ und „Information und Kommunikation“ zu finden sind.

Aus der bestehenden Webseite der Fakultät 3 konnten wir als wesentliche Kontaktinformationen den Anfahrtsweg, den Campusplan, die Raumverwaltung und Ausstellungsfläche, die Kontaktinformationen von DM und IK, sowie das Impressum entnehmen. Diese Informationen haben wir zum Großteil übernommen und umstrukturiert. Nur beim Anfahrtsweg haben wir die bestehenden Informationen komplett ersetzt. Für den Anfahrtsweg entschieden wir uns zum einen dazu, Google Maps direkt einzubinden, da so die Adresse, ein Grundriss des Expo Plazas und nahegelegene Bus- und Bahnhaltestellen ersichtlich werden. Zum anderen haben wir einen Button eingefügt, welcher direkt zur Google Maps Navigation weiterleitet und den Expo Plaza 12 als Zieladresse einstellt.

Die verschiedenen Inhalte sollen dabei durch Javascript aus- und eingeblendet werden, je nachdem welcher Reiter aktiviert wird. Durch diese Animation wird das ursprüngliche Ziel des Platzersparnisses erreicht. Als zusätzliche Animation werden die Bilder der Menüreiter animiert. Die Symbole verlassen dabei den Reiter und „fliegen“ in eine der Inhaltsboxen, wodurch der aktive Reiter zusätzlich zur farblichen Hervorhebung gekennzeichnet wird und der Benutzer sich besser orientieren kann. Als Grundlage für den Code wurde der Pen gewählt, welcher unter https://codepen.io/rss/pen/itjqC zu finden ist.

How To

Die Animation besteht aus drei Dateien. Im Folgenden wird beleuchtet, wie die HTML-, CSS- und JavaScript-Datei zusammenspielen, um die Animationen zu erzeugen.

In der HTML-Datei werden die Informationsinhalte gespeichert. Dabei wird jeder Menüreiter zunächst in einem Divcontainer gespeichert, welcher sowohl eine ID, als auch einen weiteren Divcontainer mit der Klasse des zugehörigen Icons enthält. Die verfügbaren Icons hängen dabei von dem Iconpaket ab, welches in der CSS Datei eingebunden wird und können daher beliebig verändert oder auch selbst gestaltet werden. Die ID des Divcontainers wird später in der JavaScript-Datei wichtig, da über diese ID die Animation, also das Ein- und Ausblenden der Inhalte, funktioniert. Dazu ist es eben falls wichtig, dass die Inhalte, welche beim aktivierten Reiter gezeigt werden sollen, von Divcontainer mit individueller ID umschlossen sind.

Standardmäßig ist in unserer Animation der erste Reiter, welcher die Anfahrt via Google Maps enthält, als „active“ gekennzeichnet. Bei einem Klick auf einen anderen Reiter werden folgende Prozesse in Bewegung gesetzt:

Mittels JQuerys .hide() Befehl werden zunächst alle Inhalte ausgeblendet
Allen Reitern wird der Status „active“ durch „removeClass(„active“)“ entfernt, damit wirklich nur der angeklickte Reiter am Ende „active“ ist
Der zum angeklickten Reiter passende Inhalt wird mittels seiner individuellen ID angesprochen und durch den .show() Befehl sichtbar gemacht.
Dem angeklickten Reiter wird durch .addClass(„active“) die Klasse „active“ hinzugefügt, wodurch die farbliche hervorhebung und etwaige Symbolanimationen aktiviert werden.

Diese vier Schritte sollten so schnell ablaufen, dass der Nutzer nur einen flüssigen Wechsel wahrnimmt. Durch diese vier Befehle wird verhindert, dass mehr als ein individueller Div-Container zurzeit angezeigt wird. Ohne JavaScript würden also alle Inhalte einfach untereinander in einzelnen Boxen angezeigt werden.

Die Animation der Icons im Reiter wird dabei nur indirekt durch JavaScript beeinflusst. Standardmäßig erhalten die Icons ihre Positionseigenschaften von der Klasse contactype. Sobald mittels JavaScript jedoch die Klasse „active“ an den jeweiligen Div vergeben wird, werden mittels CSS neue Positionseigenschaften für das Icon gültig. Durch Anpassen des jeweiligen CSS-Containers kann also bestimmt werden, wohin sich das Icon beim Anklicken bewegt, oder ob es (wie beim Reiter Anfahrt) einfach im Reiter stehen bleibt. So können auch, wie bei der Sprechblase des Reiters „Kontakt DM“, Drehungen und andere Transformationen des Symbols vorgenommen werden, was für den Benutzer interessant ist.

8. November 201715. Juni 2023

Tutorial: Ein responsives Menü mit jQuery für die HsH

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Ein responsives Menü mit jQuery für die HsH

Autor: Jan Jäger

Planung

Ziel des Projekts war ein kleines Menü für eine Homepage zu schaffen. Dieses sollte die folgende Funktionalität haben:

Ausklappen des Menüs
Hervorhebung der Menüpunkte
Änderung des Inhalts
responsives Design

Umsetzung

Ausklappen des Menüs

Das Menü ist standardmäßig versteckt. Eingeblendet wird es durch eine Schaltfläche. Hierfür wurde das aktuell populäre Hamburger-Menu-Icon (≡) verwendet.^[1] Zusätzlich lässt sich das Menü auf diese auch wieder ausblenden. Ansonsten wird das Menü ausgeblendet, sobald ein Menüpunkt angeklickt wird.

Hervorhebung der Menüpunkte

Als beispielhafte Menüpunkte wurden die fünf Fakultäten der Hochschule Hannover gewählt. Zusätzlich ist das ‚Dach‘ durch einen Klick auf den Schriftzug ‚Hochschule Hannover University of Applied Sciences and Arts‘ im Banner (wieder) erreichbar.

Die Hervorhebung der Menüpunkte geschieht bei mouseover. Ohne Mauszeiger, also beispielsweise auf Smartphones, ist dieser Effekt daher nicht zu sehen. Für die Hervorhebung selbst wurde die Opazität verwendet.^[2] Hierdurch kann ein Element trüb dargestellt werden.

Die Menüpunkte sind standardmäßig auf eine Opazität von 0.5 gestellt und werden bei mouseover auf 1.0 gesetzt und bei mouseout wieder auf 0.5 zurückgesetzt. Für das Banner sind die Werte genau umgekehrt gewählt.

Zusätzlich zur Opazität wurde überlegt auch noch die Größe der Menüpunkte zu ändern. Dies wirkte jedoch zu unruhig.

$("#fak3").mouseover(function() {
    $("#fak3").animate({
        padding: '10px',
        margin: '0px',
        opacity: '1.0'
    }, 500);
});

Änderung des Inhalts

Der Inhalt wird durch click auf einen Menüpunkt bzw. auf den oben erwähnten Schriftzug im Banner geändert. Geändert wird dann der Inhalt im content.^[3] Gleichzeitig wird das Menü wieder zugeklappt.

Zusätzlich zum Inhalt wird auch die Farbe des Banners geändert, um dem Nutzer zu veranschaulichen auf welcher Seite er sich aktuell befindet. (Hierzu mehr bei der Erläuterung zu den verwendeten Bibliotheken.)

Zu Anfang sollte auch der Inhaltsbereich beim Wechsel des Inhalts aus- und wieder eingeblendet werden. Dies wirkte jedoch insgesamt zu unruhig, da parallel bereits das Menü eingeklappt wird. Zudem hätte noch eine Möglichkeit gefunden werden müssen, eine Pause für den Wechsel des Inhalts einzufügen. Bei der getesteten Variante wurde der Inhalt bereits gewechselt, bevor der Inhaltsbereich komplett ausgeblendet wurde.

$("#content").slideUp(500);
// Code zum Wechseln des Inhalts
$("#content").slideDown(500);

Responsives Design

Die ganze Seite sowie speziell das Menü verhalten sich bei unterschiedlicher Seitenbreite quasi responsiv. Während dies für das Banner sowie den Inhaltsbereich noch vergleichsweise einfach war, weil diese direkt in Abhängigkeit der Elternelemente formatiert werden können, wurde sich vor allem auf das Menü konzentriert.

Üblich ist aktuell die Verwendung von Media Queries, also beispielsweise

@media (min-width: 900px) {
    /* anzupassende Elemente */
}

@media (min-width: 600px) {
    /* anzupassende Elemente */
}

@media (min-width: 300px) {
    /* anzupassende Elemente */
}

Dabei hätte in diesen Media Queries u.a. die Höhe und Breite der Menüpunkte in Abhängigkeit von der Seitenbreite gesetzt werden müssen. Dies hätte jedoch dazu geführt, dass das Menü nicht immer – wie gewünscht – die volle zur Verfügung stehende Breite einnimmt. Deswegen wurde bewusst der eher klassische Weg über JavaScript gewählt. Dies hatte dann auch noch den kleinen Nebeneffekt, dass das Menü durch die Neuberechnung bei Größenänderungen des Browserfensters quasi dynamisch seine Größe ändert. Im eigentlichen Sinne ist dies natürlich keine Animation.

Ursprünglich sollte auch noch die Schriftgröße dynamisch angepasst werden, damit die vollständige Beschriftung zu sehen ist.

if(pageWidth <= 480){
    $(".menu").css("fontSize", (pageWidth / 40) + "px");
}
else{
    $(".menu").css("fontSize", "15px");
}

Dies führte jedoch dazu, dass die Schrift im Menü im Vergleich zur Schrift in allen anderen Bereichen ziemlich klein gesetzt werden musste. Stattdessen wurde deswegen der Text mittels CSS ‚abgeschnitten‘.

overflow: hidden;

Code

HTML + CSS

Es wurde ein eigenes HTML-Grundgerüst geschrieben und dieses mit CSS angepasst.

JS

Es wurden zwei Bibliotheken verwendet und zusätzlich eigener Code geschrieben.

Bibliotheken

Zur Umsetzung des Projekts wurden die folgenden Bibliotheken verwendet:

Ursprünglich sollte nur jQuery verwendet werden. Die Farbänderung im Banner war damit jedoch nur abrupt möglich. Gewünscht war jedoch ein fließender Übergang, also von einer Farben zur nächsten.

Dies hätte zwar auch mit @keyframes in CSS erreicht werden können. Dies hätte jedoch zu einer Vermischung von Methoden geführt, da die @keyframes noch mittels JavaScript zum Banner hinzugefügt werden müssen. Außerdem wäre dies sehr umfangreich gewesen, da in Abhängigkeit der Anzahl der verwendeten Farben im Banner eine Vielzahl @keyframes benötigt worden wäre. Genauer gesagt hätte es bei Verwendung von n Farben n * (n - 1) = n² - n @keyframes benötigt, also bei den hier verwendeten 6 Farben 6 * (6 - 1) = 6 * 5 = 30 @keyframes.^[4] Zusätzlich hätte es auch noch eine Menge JavaScript-Code benötigt, um die @keyframes zum Banner hinzuzufügen. Es muss ja für die Auswahl des richtigen @keyframes sowohl die Ausgangs- als auch die gewünschte Zielfarbe bestimmt werden müssen. Zusätzlich müssen die @keyframes so eingestellt werden, dass die Animation am Ende automatisch stoppt und nicht immer wieder von vorne beginnt. Dazu bedarf es dem folgenden CSS-Code:

animation-fill-mode: forwards;

Eine eventuelle Erweiterung des Menüs wäre dadurch nur mit sehr viel Aufwand möglich. Insgesamt wurde diese Variante als zu umfangreich angesehen. Nach Rücksprache mit Frau Steinberg wurde dann letztlich auch noch jQuery UI eingebunden, das die gewünschte Funktionalität mitbringt. Hier bedarf es nur einer Zeile JavaScript-Code pro Zielfarbe, unabhängig von der Ausgangsfarbe.^[5] Um beispielsweise die Farbe des Banners in Richtung der Fakultät I zu ändern, muss nur die folgende Zeile JavaScript-Code eingefügt werden.

$("#header").animate({backgroundColor: "rgb(30,190,235)",}, 1000 );

Eigener Code

Am Ende wurde auch noch eigener JavaScript-Code geschrieben, um das Menü automatisch in abhängig von der Seitenbreite anzupassen. Dazu wurde zunächst eine globale Variable definiert, in die die Seitenbreite geschrieben wird. Mit dieser wird dann die selbst geschriebene Funktion menuWidth() aufgerufen, die die gewünschte Höhe und Breite der Elemente des Menüs berechnet und in diese schreibt. Bei Änderungen an der Seitenbreite, z.B. durch Größenänderung des Browserfensters, würde dies jedoch bestehen bleiben. Deswegen wurde zusätzlich ein EventListener definiert, der bei Änderungen der Seitenbreite diese abfragt und die Funktion menuWidth() erneut aufruft.

Ergebnis

See the Pen menu for HsH by Jan Jäger (@jaegerjan) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js

[1] Nähere Informationen z.B. in der Wikipedia: https://de.wikipedia.org/wiki/Hamburger-Men%C3%BC-Icon.

[2] Nähere Informationen z.B. in der Wikipedia: https://de.wikipedia.org/wiki/Opazit%C3%A4t.

[3] Um dies zu simulieren wird nur die Überschrift mit der ID greetings geändert. Prinzipiell müsste stattdessen Inhalt nachgeladen und in div-Element mit der ID content geschrieben werden.

[4] Es liegt quadratisches Wachstum vor.

[5] Es liegt lineares Wachstum vor.

7. November 201715. Juni 2023

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

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.

28. September 201711. Juni 2020

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

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ß!