Smart Libraries: Wie smart müssen Bibliotheken sein?

Beitragsbild Smart Libraries – Wie smart müssen Bibliotheken sein?

 

Bibliotheken sind weit mehr als reine Aufbewahrungsorte für Medien aller Art. In diesem Beitrag zeigen wir, inwieweit sich Bibliotheken im Sinne von Smart Libraries weiterentwickelt haben und welchen Nutzen Kund*innen davon haben.

Struktur des Beitrages:

Was ist Smart?

Der deutsche Duden führt für das Wort „Smart“ die Begriffe gewitzt und clever.[4] So wird das Wort “Smart” derzeit viel im Zusammenhang mit intelligenten und computergesteuerten Systemen benutzt. Es bestehen bereits sowohl Wörter wie Smarte Technologien als auch Smartphones, Smart Homes und Smart Cities. Doch unter Smart Libraries kann sich kaum jemand etwas vorstellen.

Um eine Vorstellung von einer Smart Library zu bekommen, schauen wir uns zuerst ein Modell von einer Smart City an:

Smart City Wheel

Boyd Cohen beschäftigt sich mit den Themen nachhaltige und intelligente Entwicklung von Städten und ist der Begründer des Smart City Wheel. Laut Cohen gliedert sich eine smarte Stadt in sechs Themenfelder: Mobilität, Bevölkerung, Umwelt, Regierung, Wirtschaft und Lebensraum.

Eine intelligente, smarte Mobilität legt den Schwerpunkt darauf, den Verkehr in den Städten billiger, schneller und umweltfreundlicher zu machen. Die Ziele sind zum einen die Steigerung der Effizienz und eine Verbesserung des Verkehres, der durch die Stadt führt und zum anderen wird gezielt in eine innovative Verkehrspolitik investiert. Folglich müssen neue Verkehrsträger gewonnen werden. Desweiteren muss der Personen- und Warentransport gefördert und die Belastung der Umwelt reduziert werden.

Für eine smarte Bevölkerung stehen die Auswahl des Berufes, die Chancen auf dem Arbeitsmarkt, die Berufsausbildung und auch lebenslanges Lernen für alle Altersgruppen im Vordergrund. Abgesehen davon sind sind wichtige Punkte die Integration, die persönliche Weiterentwicklung, die Steigerung des Wohlstands und die Stärkung der Gemeinschaft.

Das Thema smarte Umwelt beschäftigt sich mit einer grünen und umweltbewussten Stadt. Wichtige Punkte sind hierbei die Reduzierung der CO2-Emissionen, die Reduzierung von Müll und die Verwendung von erneuerbaren Energien. Die Regierung in einer smarten City setzt sich für die Zusammenarbeit und Interaktionen zwischen den Bürgern, den Unternehmen und der Verwaltung ein.

Das Ziel einer smarten Wirtschaft ist das innovative und nachhaltige Wachstum der Wirtschaft in einer Stadt. Die Attraktivität einer Stadt muss gesteigert werden, um neue Unternehmen, Geschäfte und Investoren dazu zu gewinnen und dadurch wiederum neue Arbeitsplätze zu schaffen. Ein smarter Lebensraum bietet den Menschen ein gut ausgebautes Gesundheitssystem und die Einbindung von allen Alters- und Bevölkerungsgruppen. Neue Technologien ermöglichen Sicherheit. Ein weiterer Aspekt ist ein breites Freizeit- und Kulturangebot zur Selbstverwirklichung und Stärkung der sozialen Kontakte.[1]

Quelle: Smart City Wheel · Projects · Smart City Hub

Wie finden Bibliotheken nun ihren Platz in einer Smart City und werden Smart Libraries? In ihrem Buch „Smart Libraries. Konzepte, Methoden und Strategien“ stellen die beiden Herausgeberinnen Linda Freyberg und Sabine Wolf eine Smart Map für Bibliotheken vor und geben Bibliotheken, die smarter werden möchten, neue Ideen mit auf den Weg. [8]

Smart Libraries – Wie sieht’s in der Praxis aus?

Die Umsetzungen von neuen, smarten Ideen sind von Bibliothek zu Bibliothek unterschiedlich. Einige Bibliotheken setzen den Fokus auf Nachhaltigkeit, die durch neue Technik erreicht werden kann. Die Universität Hildesheim ist mit ihrer Smart Library bereits 2012 gestartet. Das Energiemanagement der Universitätsbibliothek wird mit einem “Smart-Home-System” gesteuert. Dieses System beinhaltet zum Beispiel Sensoren, die den Lichteinfall in einem Raum registrieren und den Beleuchtungsbedarf selbständig regeln. [7]

Auch die Bibliothek der technischen Universität (DTU) in Dänemark zeigt in dem folgenden Video, wie eine Smart Library aussehen kann:

In dem Video wird gezeigt, wie in der Bibliothek neue Technik eingesetzt wird. Sensoren gestalten die Arbeitsumgebung für die Student*innen, indem die Raumwärme oder die Beleuchtung der Anzahl der Personen im Raum angepasst wird. Eine App hilft den Student*innen das gesuchten Buch in dem Regal zu finden. Zusammen gefasst versteht sich die DTU als eine Umgebung, in der neue Technologien ausprobiert werden können.[3]

Die Teilhabe von Kunden*innen und das selbstständige Arbeiten wollen Makerspaces in Bibliotheken fördern. Ein Beispiel ist die Hoeb4U der Bücherhallen Hamburg oder der Makerspace der Sächsischen Landesbibliothek – Staats- und Universitätsbibliothek Dresden. In der Hoeb4U können nicht nur ein Häkelset oder Bastelmaterialien ausgeliehen werden, sondern es finden auch Veranstaltungen vor Ort statt.[2] In Dresden liegt der Fokus auf Technik, so kann ein 3D- Drucker oder eine Kamera ausgeliehen und vor Ort ausprobiert werden. Zugleich bekommen Nutzer*innen von Fachpersonal oder anderen Nutzer*innen Hilfe bei der Benutzung der Makerspaces.[6]

Fazit

Bibliotheken entwickeln sich ständig weiter und haben dabei die Bedürfnisse der Kund*innen fest im Blick. Der Anspruch an eine Bibliothek hat sich gewandelt. Einerseits möchten Kund*innen das Medienangebot einer Bibliothek nutzen, andererseits auch das Angebot an Veranstaltungen wahrnehmen und sich mit anderen Kund*innen austauschen und treffen. Die Kennzeichen einer Smart City spielen dabei eine wichtige Rolle: gemeinsam genutzte Räume senken die CO2 Emission und es findet ein Austausch zwischen unterschiedlichen Gruppen der Bevölkerung statt. Kund*innen haben die Möglichkeit sich aktiv einzubringen und durch niedrigschwellige Angebote werden Teilhabe und Inklusion gefördert.

Letztendlich stellt sich die Frage: Ist eine Bibliothek nicht von Anfang bereits eine Smart Library? Im Laufe ihrer Geschichte musste sie sich immer wieder an die Bedürfnisse ihrer Kund*innen anpassen und sich verändern – lange bevor das Wort Smart in Mode kam.

Verwendete Quellen

1bee smart city (2020): smart city indicators. Online unter https://hub.beesmart.city/en/smart-city-indicators [Abruf am 18.01.2021]

2Büchrhallen Hamburg (2021): Jugendbibliothek Hoeb4U.Konzept. Online unter: https://www.buecherhallen.de/hoeb4u-konzept.html [Abruf am 15.01.2021]

3DTUdk(2018):DTU Smart Library-What is it? [Video]. Online unter: https://www.youtube.com/watch?v=qEc7_8xpdj4 [Abruf am 15.01.2021]

4Duden (2020): Wörterbuch. Online unter https://www.duden.de/rechtschreibung/smart [Abruf am 15.01.2021]

5Smart City Hub Switzerland (o. J.): Smart City Wheel. Online unter https://www.smartcityhub.ch/smart_city_wheel.120en.html [Abruf am 18.01.2021]

6SLUB Dresden (2021): SLUB Makerspace. Online unter https://www.slub-dresden.de/mitmachen/slub-makerspace/ [Abruf am 18.01.2021]

7Universität Hildesheim (2012): “Smart Library” – Energieverbrauch senken durch intelligente Steuerungssysteme. Ein Vorhaben im Rahmen der “Sustainable University Hildesheim. Zuletzt aktualisiert am 25.08.2020. Online unter https://www.uni-hildesheim.de/bibliothek/smart-library/. [Abruf am 14.01.2021]

8Wolf, Sabine (2019): Definition einer Smart Library und Erläuterung der Smart Map. Ein State -of-the-Art Ansatz. In: Freyberg, Linda; Wolf, Sabine (Hg.): Smart Libraries. Konzepte,Methoden und Strategien. Wiesbaden: b.i.t. Verlag gmbh (b.i.t. online innovativ, Bd. 76), S. 21-26


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Wintersemester 2020/21, Prof. Dr.-Ing. Steinberg) entstanden. Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

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

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

Autor: Jannis Fortmann

Link zum Spiel
Zip 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 die Probe gestellt wird. Das Konzept des Spiels ist angelehnt an einen Intelligenztest für Schimpansen, bei dem deren Arbeitsgedächtnis getestet wird. Bei diesem werden aufeinanderfolgende Zahlen auf einem Bildschirm abgebildet, diese zahlen müssen dann in der richtigen Reihenfolge gedrückt werden. Nachdem die erste Zahl gedrückt wurde, werden alle anderen hinter identisch aussehenden Feldern versteckt.

Mein Spiel „forty in 49“ funktioniert nach einem ähnlichen Prinzip. Anstatt einer bestimmten Reihenfolge geht es hierbei aber um die Position der Felder. In einem Raster sind 7×7 Felder angeordnet,. Zu Beginn des Spiels verschwinden 40 der 49 Felder für wenige Sekunden. Der Spieler muss sich die Position der übrigen 9 Felder (Bomben) merken und diese vermeiden. Das Ziel ist es, möglichst viele der 40 Felder anzuklicken. Klickt man auf eine Bombe, ist das Spiel vorbei.

Animationen

Die Animationen erfüllen sowohl funktionale als visuelle Zwecke.

Um die Orientierung zu vereinfachen, werden Felder größer und ändern ihre Farbe, wenn der Mauszeiger darüber hovert. Wird ein Feld angeklickt, wird es entweder grün und verschwindet in einer rotierenden Animation, oder es wird rot und dreht sich langsam um 180° um die y-Achse und um 45° um die z-Achse. Dadurch wird dem Spieler visuell verdeutlicht, ob er richtig lag. Um das Ganze auditiv zu unterstützen, gibt es für den Klick auf die zwei Arten von Feldern jeweils einen Soundeffekt.

Ist das Spiel vorbei (alle richtigen Felder oder eine Bombe wurden geklickt), erscheint eine Karte mit der Punktzahl. Sie bewegt sich von unten nach oben und landet mittig über dem Spielfeld. Außerdem gibt es natürlich die fade-out/fade-in Animation am Anfang, ohne die das Spiel überhaupt nicht möglich wäre.


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang,  Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Design Thinking: Volle Kreativität voraus

Beitragsbild Design Thinking

Oder: It’s not about the design, it’s about the thinking!

Autorin: Katharina Kroupa 


„Man kann über Design Thinking noch so viel Positives erzählen, die Arbeitsweise und ihre Wirkung erklären: Um sie wirklich zu verstehen, muss man sie selber hautnah miterlebt haben.“

 Marcel Plaum, VP Terminal Development Fraport

Na, macht dich das neugierig zu erfahren, was Design Thinking ist? Du hast den Begriff nun schon öfter gehört, aber noch keine Idee, was dahinter alles steckt?

Dann bist du hier genau richtig! Ich bringe dir in diesem Beitrag die Innovationsmethode Design Thinking näher. Was dich alles erwartet im Überblick:

 

Grundsätze des Design Thinkings

Stell dir vor, du arbeitest – sagen wir mal – in einer großen Bibliothek. Ihr stellt Nutzer:innen Medien zur Verfügung, bietet diverse Dienstleistungen an und außerdem kann man bei euch auch vor Ort arbeiten. Eure Bibliothek wird als Lernort grundsätzlich gern genutzt, aber ihr merkt, dass es Verbesserungspotenzial gibt. Euer Gebäude ist schon älter, ebenso die Einrichtung und ihr möchtet den Lernraum für eure Nutzer:innen attraktiver gestalten. Und so bildet sich ein Team aus Mitarbeiter:innen, die sich beratschlagen, was einen modernen Lernraum ausmacht. Eine Kollegin schlägt vor, weitere Computer zur Nutzung anzuschaffen, ein anderer ist der Meinung, dass voll ausgestattete Gruppenarbeitsräume her müssen. Und so suchen Bibliotheksmitarbeiter:innen untereinander nach geeigneten Lösungen.

Doch wofür eigentlich? – Na für ein neues Raumkonzept! – Okay…

Aber für wen eigentlich? – Na für die ganzen Benutzer:innen der Bibliothek!

– Ahaaa..! Aber wäre es da nicht sinnvoll, diese Personen erstmal nach ihrer Meinung zu fragen und sie miteinzubeziehen, wenn man doch für genau diese eine Lösung sucht?

Und damit sind wir beim ersten Grundsatz der Design Thinking Methode, der in jeder Phase des Innovationsprozesses zentral ist: Der Mensch als Inspirationsquelle.

Der Gedanke des Design Thinking ist, dass ein Produkt oder eine Dienstleistung dann richtig gut werden kann, wenn die Bedürfnisse der Zielgruppe richtig ermittelt und bedient werden. Dazu wird diese Zielgruppe aktiv in den Innovationsprozess miteingezogen.[1] Wie das geschieht, erfährst du in weiter unten im Beitrag.

Ein weiterer Grundsatz der Methode ist das Bilden und Zusammenarbeiten innerhalb multidisziplärer Teams. Die Idee hierhinter ist, dass Menschen verschiedener Disziplinen bzw. Fachrichtungen, ihre unterschiedlichen Erfahrungen in den Ideenprozess einbringen und so gemeinsam eine (bessere) Lösung für das Problem finden können. Diversität in Geschlecht, Alter, Fachrichtung ist hier zielführend. Meist bestehen diese Teams aus 4-6 Teilnehmer:innen, den sogenannten Design Thinkers. Noch unerfahrene Teams werden dazu von ein bis zwei Moderator:innen beim Prozess unterstützt.[2]

Die einzelnen Mitglieder multidisziplinärer Teams entwickeln gemeinsam Ideen.
Quelle: giphy

Da bei diesem Zusammenspiel unterschiedlicher Personen schnell das Ziel – nämlich das Finden einer zielgruppenorientierten Lösung – aus den Augen verloren werden kann, ist es wichtig, dabei einem strukturierten Prozess zu folgen.[3] Das bringt uns zum nächsten Inhaltspunkt dieses Beitrags.

Wie läuft der Prozess der Methode ab?

Der Prozess des Design Thinking besteht aus aufeinander folgenden Phasen. Die Phasen bauen aufeinander auf. Erst, wenn eine Phase abgeschlossen ist, kann mit den dabei entstandenen Ergebnissen in der nächsten Phase weitergearbeitet werden.

In allen Phasen ist die Zielgruppe im Fokus. Innerhalb der ersten drei Phasen (Verstehen, Beobachten, Point of View) empathisiert das Team mit der Zielgruppe. Es versucht das zentrale Problem zu verstehen und zu definieren. In den darauffolgenden Phasen (Ideation, Prototyping, Testen) werden Ideen zur Problemlösung gesammelt und konkretisiert. Prototypen werden erstellt und aus Nutzersicht oder von tatsächlichen Nutzer:innen getestet.

Klicke auf die Info-Buttons der verschiedenen Phasen, um Einzelheiten zu erfahren:

Im besten Fall wird dieser Prozess einmal vom Anfang bis zur Entscheidung durchlaufen. Fallen den Testnutzer:innen in der Testphase allerdings Schwachstellen auf oder sie sind in sonst einer Weise nicht zufrieden mit der Lösung, müssen vorherige Phasen wiederholt werden. Beispielsweise werden in der Ideation-Phase dann noch einmal diverse Ideen gesammelt. Daraus werden dann wieder vereinzelte Lösungsansätze ausgewählt, sodass aus diesen nachfolgend ein Protoyp entwickelt wird. Oder die testende Zielgruppe fühlt sich insgesamt noch nicht ausreichend verstanden. Dann beginnt der Prozess erneut beim Verstehen.[4]

Das wird so lange wiederholt bis sich das Team Schritt für Schritt der idealen Lösung angenähert hat. Diesen Vorgang nennt man Iteration. Demnach wird der Prozess des Design Thinking auch als iterativer Prozess bezeichnet.[5]

Welche Voraussetzungen und Tools unterstützen den Innovationsprozess?

Aus dem vorherigen Abschnitt kennst du nun die einzelnen Phasen des Design Thinking Prozesses. Aber wie oder wodurch kann dieser Prozess unterstützt werden? Und wie fördert man die Kreativität am besten?

Die folgenden Abschnitte geben Einblick über die Voraussetzungen für einen gelungenen Innovationsprozess sowie Beispiele für nutzbare Tools zur Kreativitätsförderung[6]:

Wieso sich Design Thinking in jedem Lebensbereich lohnt

Die Methode findet Anwendung in verschiedenen Bereichen und zu verschiedenen Themen. Beispielhaft werden nachfolgend ihr Nutzen und ihre Anwendbarkeit in einer Tabelle dargstellt:

Nutzen Anwendbarkeit
nachhaltige Teamentwicklung Aufbau von Kundenverständnis
effizientere Innovationsprozesse durch schnelles Feedback Gestaltung neuer Produkte und Dienstleistungen
Kundenloyalität steigern durch Integration Optimierung von Organisationsprozessen
geringe Kosten Erstellen von Marketingkampagnen
Tabelle: Nutzen und Anwendbarkeit von Design Thinking

Als Innovationsmethode definiert sich Design Thinking unter anderem über seine Anwender:innen. Da diese und ihre Probleme sehr unterschiedlich sein können, eignet sie sich für das Finden von Lösung in jedem Lebens(Problem-)bereich.

Wie Bosch Design Thinking für User Experience nutzt

Auch bekannte Firmen nutzen mittlerweile die Design Thinking Technik zur Lösung verschiedenster Probleme oder zur Entwicklung neuer Produkte.

Eine davon ist Bosch. Das Unternehmen nutzt die Technik für eine enge Zusammenarbeit mit ihrer Zielgruppe. Im nachfolgenden Video geben Bosch-Mitarbeiter Einblick darin, wie die Methode in der Firma umgesetzt wird.

Youtube-Video: Design-Thinking bei Bosch – Zwischen Post-Its, Lego und Fritz-Kola[7]

FazitIts’s not about the design

it’s about the thinking!

Die Angst vor Fehlern bringt Menschen dazu, die Risiken im Fokus zu haben – nicht die Möglichkeiten!

Aber aus Fehlern lernt man. Design Thinking gibt den Raum für diese offene Denkweise in einem geführten Prozess. Jeder Prozess-Teil führt zu klaren Ergebnissen, mit denen der nächste Prozess-Schritt beginnt.

Obwohl jede Design Thinking Aktivität darauf ausgerichtet ist, die Erfahrungen der Mitmenschen zu verstehen, verändert sie auch die Erfahrungen und Denkweisen der Innovatoren.


Quellen:

DGO (2017): Der Design Thinking Prozess. In 6 Schritten zum Produkt. Online unter: https://blog.dgq.de/der-design-thinking-prozess-in-6-schritten-zum-produkt/ [Abruf am 31.01.2021]

FAZ (2018): Design-Thinking bei Bosch: Zwischen Post-Its, Lego und Fritz-Kola. Youtube. Online unter: https://www.youtube.com/watch?v=F184mC8K2HI&feature=youtu.be

Kreutzer, Ralf T. (2018): Toolbox für Marketing und Management. Kreativkonzepte, Analysewerkzeuge, Prognoseinstrumente. Berlin: Springer. DOI: doi.org/10.1007/978-3-658-21881-2

Plattner, H.; Meinel, C. u. Weinberg, U. (2009): Design Thinking. Innovation lernen, Ideenwelten öffnen. München: mi.

Schallmo, Daniel (2017): Design Thinking erfolgreich anwenden. So entwickeln Sie in 7 Phasen kundenorientierte Produkte und Dienstleistungen. Wiesbaden: Springer Gabler. DOI: doi.org/10.1007/978-3-658-12523-3


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Wintersemester 2020/21, Prof. Dr.-Ing. Steinberg) entstanden. Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

DOI: Ein digitaler Objektidentifizierer

Beitragsbild DOI

Autorin: Sabine Volkmer


In diesem Beitrag geht es hauptsächlich um die Frage:
Was ist ein digitaler Objektidentifizierer und wozu ist er gut?

Inhalt:

Offenbar muss heutzutage fast alles mit Hilfe einer Identifikationsnummer zugeordnet werden. Selbst der Mensch. Jeder kennt z. B. mehr oder weniger auswendig seine eigene, ihm individuell zugewiesene Steuer-, Matrikel- oder Personalausweisnummer. Im Bibliothekswesen und im speziellen bei den Büchern nennt sich diese ISBN (International Standard Book Number) und bei den Zeitschriften ISSN (International Standard Serial Number). Jeder, der sich auch nur sporadisch in Bibliotheken aufhält, hat diese gesehen. Jedoch weiß keiner so genau wie der DOI aufgebaut ist. Der DOI – ausgeschrieben als digitaler Objektidentifizierer verhält sich ähnlich wie eine ISBN/ISSN, weil er statt einem Buch oder einer Zeitschrift ein digitales Objekt eindeutig identifiziert.

Dieser Blogbeitrag handelt von der Geburtsstätte der DOI in den Registrierungsagenturen bis zum Zielobjekt – dem digitalen Objekt. Die drei Buchstaben „D-O-I“ stehen für „Digital Object Identifier“ (Digitaler Objektidentifizierer). Diese Identifikationsnummer gehört jeweils zu einem digitalen Objekt. Dies können u.a. Texte oder digitale Forschungsdaten sein. Aber wozu ist eine Zuordnung überhaupt nötig und warum werden DOIs für das wissenschaftliche Arbeiten so dringend gebraucht?

Studierende wissen, dass alle von ihm zitierten Stellen sich auch im Literaturverzeichnis wieder gefunden werden müssen. Da im wissenschaftlichen Bereich dauerhafte Zitatensicherheit gefordert ist und DOIs sich nicht wie URLs verändern, werden diese anstelle von URLs für Literaturverzeichnisse gemeinhin empfohlen. So können Belege auch nach Jahren überprüft werden, weil auf digitale Objekte nachhaltig und eindeutig zugegriffen werden kann. Jedoch ist dies nicht immer der Fall. So gesehen wird eine DOI für die Identifizierung von physischen, digitalen oder anderen Objekten benutzt und führt den Nutzer direkt zum endgültigen Speicherort des bezeichneten Objektes.

DOI-Vergabe

Es haben jedoch noch nicht alle akademischen Texte eine DOI Nummer auch erhalten und erst seit dem Jahre 2000 werden DOIs für Onlineartikel aus wissenschaftlichen Fachzeitschriften vergeben.[1]EBooks haben ebenfalls in den meisten Fällen eine DOI. Auch verwenden viele wissenschaftliche Verlage DOIs zur persistenten Adressierung ihrer Artikel.[2] Persistenz bedeutet in diesem Fall, dass das digitale Objekt überall wiedergefunden werden kann. Doch wie werden diese nun vergeben? Wird da gewürfelt oder einfach wilde Zahlenreihen ausgelost?

Die Vergabe von DOIs werden von einer amerikanischen Non-Profit-Gesellschaft betrieben. Inzwischen beträgt die Zahl der vergebenen DOIs mehrere Millionen. Die oberste Organisation der DOI ist die „International DOI Foundation“ (IDF). Diese vergibt Lizenzen an über 10 weltweite DOI-Registrierungsagenturen, von denen DOIs erworben werden können. Die wichtigsten Hauptagenturen sind: „Crossref“, „mEDRA“, „Datacite“ (scientific data sets). Von „DataCite“ wird der DOI-Registrierungsservice für Forschungsdaten zur Verfügung gestellt.[3] Die Verteilung der DOIs erfolgt ausschließlich durch die DOI-Registrierungsagenturen, die eine Lizenz von der IDF erworben haben. Somit kann sichergestellt werden, dass Standards von der IDF, eingehalten werden.

Innovation in Bibliotheken: Deichman Bibliothek Oslo

Beitragsbild Innovation in Bibliotheken

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 ihren Mitmenschen wieder näher zu kommen. Auch wenn die Corona Pandemie uns sicherlich in Hinblick auf Digitalisierung in (Hoch-) Schulen und am Arbeitsplatz große Schritte nach vorn gebracht hat, vermissen und beklagen wir doch, wie sehr uns die sozialen Kontakte fehlen.

Wie aber kann öffentlicher Raum so gestaltet werden, dass Menschen hier Zeit verbringen wollen? Es sind dabei insbesondere die Biblio Tøyen und die 2020 neu eröffnete Bjørvika Bibliothek zu nennen. Sie zeigen uns zwei zukunftsweisende Wege wie das Bibliothekswesen aussehen kann.

Deichman Biblio Tøyen

Die eigentlich in einem Problemviertel liegende Jugendbibliothek Biblio Tøyen steht dem Neubau im entstehenden neuen Kulturhafen Oslos in nichts nach. In Zusammenarbeit mit jungen Osloern und dem niederländischen Architekten/Creative Guide Aat Vos wurde die Bibliothek neu eingerichtet und umgestaltet.[11] Die Idee hinter der Umgestaltung bestand darin, ein Kulturhaus zu schaffen, das Jugendlichen ihren Bezug zur Realität nicht verlieren lässt. Denn durch die immer schneller werdenden Modernisierungen und die rasante Entwicklung der Gesellschaft kann ein solcher öffentlicher Rückzugsort für Jugendliche einen Ankerplatz bieten.[11]

So entstanden in alten, ausrangierten Kleinlastern und Seilbahnkabinen kleine Oasen der Ruhe und Orte zum Lesen. Ebenso Nester aus Kissen oder umfunktionierte Schubkarren dienen als Plätze zum Entspannen oder zum Lesen. Des Weiteren verleihen die vielen schwebende Elemente diesem Ort eine unglaubliche Leichtigkeit.[8][11]

Eltern und Erwachsenen ist der Zugang ausdrücklich nicht erlaubt, sodass die 10- bis 15-Jährigen hier ihre ganz eigenen Erfahrungen mit ihrer Freiheit, Umgebung und eben den Büchern machen können. Diese dadurch entstehende Wohnzimmeratmosphäre dient der Inspiration und lässt seine jugendlichen Besucher viel Freiraum. Dies wird zudem dadurch unterstützt, dass die Räumlichkeiten der Biblio Tøyen auch ohne Bibliothekspersonal zugänglich sind. [8]

Begib Dich auf einen kleinen Rundgang durch die Biblio Tøyen.[6]

Tutorial: Ein Memory-Spiel

Beitragsbild Tutorial: Memory-Spiel

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 läuft folgendermaßen ab: Der Start des Spieles muss durch das Klicken eines Buttons ausgelöst werden. Danach hat man 30 Sekunden Zeit, um das Spiel zu gewinnen. Wenn man es nicht schafft, bricht das Spiel nach 30 Sekunden ab und man hat somit verloren.

Inhaltsverzeichnis

Aufbau

Das Spiel besteht aus drei Ebenen: 1. Startbildschirm 2. Spiel 3. Endbildschirm: gewonnen oder verloren

Für die Einfachheit und Übersichtlichkeit besteht das Spiel aus zwei HTML-Dateien. Die Datei game_start.html beinhaltet die erste Ebene. Die Datei game.html die Ebenen zwei und drei.

Startbildschirm

Hier erscheinen nacheinander ein Button, der zum Spiel weiterführen soll, ein Austronaut und ein Raumschiff. Im Hintergrund bewegen sich von oben nach unten und von unten nach oben kleine Punkte, die Sterne repräsentieren sollen. Der Button hat einen Hover-Effekt: Wenn man über ihn mit der Maus fährt, verändert sich der Text und die Farbe .

Memory-Spiel Bild 1
Abbildung 1: Startansicht

Memory-Spiel

Das eigentliche Spiel befindet sich im rechten Drittel des Bildschirms und besteht aus zwölf Karten, welche in drei Reihen gestapelt sind. Links vom Spiel sieht man den Astronauten und eine Sprechblase. Über den Astronaut schwebt ein Button, mit dem das Spiel neu gestartet werden kann. Beim Klicken auf die Karten, erscheint zusätzlicher Text in der Sprechblase. Nach ein paar Sekunden verschwindet dieser.

Memory-Spiel Bild 2
Abbildung 2: Spiel

Gewonnen – Endbildschirm

Wenn man innerhalb der 30 Sekunden alle Paare gefunden hat, verschwinden die Sprechblase und die Karten. Stattdessen blendet das Programm Konfetti und Überschrift “6/6! Gut gemacht gemacht!” ein. Im Hintergrund wird einmalig Triumpfsound “Ta-Da” abgespielt.

Memory-Spiel Bild 3
Abbildung 3: Spiel gewonnen

Verloren – Endbildschirm

Wenn 30 Sekunden verstrichen sind und nicht alle Paare gefunden wurden, dann bricht das Spiel ab und statt der Sprechblase und der Karten erscheint die Überschrift “Verloren” und in der Sprechblase steht jetzt “Schande!”. Der Astronaut fängt zu weinen an.

Memory-Spiel Bild 4
Abbildung 4: Spiel verloren

Erläuterung des Codes

Erste Ebene

HTML und javascript

Für die Erzeugung bestimmter Animationen lohnt es sich auf JS-Bibliotheken zurückzugreifen. In diesem Projekt wurde GSAP eingesetzt. Bei GSAP handelt es sich um eine JS-Bibliothek für zeitleistenbasierte Animationen . Die GSAP Funktionen lassen sich über CDN laden, indem man ihn im Head-Bereich einbindet.

Der CDN für allgemeine Funktionen reicht aber nicht aus, um Bewegung entlang eines vorgeschriebenen Pfades zu erzeugen. Der Code muss zusätzlich mit dem Plugin für GSAP-MotionPath ergänzt werden.

  <head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Memory game done with javascript and css animation">
    <meta name="keywords" content="game, interactive, avascript, css, html">
    <title>Memory Game</title>
	<link rel="stylesheet" href="styles_start.css"> <!-- Nur für game_start -->
	<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script> <!-- Polyfill -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script> <!-- Core Green Sock-->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/MotionPathPlugin.min.js"></script> <!--Plugin für MotionPath von Green Sock-->
  </head>

Der HTML-Grundgerüst der ersten Ebene ist simpel aufgebaut. Es wurden nacheinander Elemente eingefügt, die in bestimmten Reihenfolge sichtbar werden sollten.

	<div class="sternenhimmel-bild">	
		<!-- Sterne, die sich von unten nach oben und umgekehrt bewegen, insperiert von https://www.youtube.com/watch?v=aywzn9cf-_U  -->
				<div id="stars"></div>
				<div id="stars2"></div>
				
				<div id="stars_2"></div>
				<div id="stars2_2"></div>	
			<img id="astro" src="Bilder/astro.png">
		
			<div>
				<a href="game.html"><button id="button1"></button></a>
			</div>
			
			<img id="spaceship" src="Bilder/futurama.png">
	</div>

Auf der ersten Ebene befindet sich der Javascript-Code in der HTML-Datei . Dank GSAP kann man den Code für die schwebende Bewegung des Astronauten kurz halten. Mit GSAP wird auch das Erscheinen des Buttons animiert. Man darf nicht vergessen den MotionPathPlugin zu registrieren, sonst wird motionPath nicht ausgeführt. Mit gsap.timeline() geben wir die Reihenfolge der Animationen vor. Zuerst soll der Button und dann der Astronaut erscheinen. Der Astronaut soll daraufhin im Kreis um den Button schweben und dann stehen bleiben.

		<script>
				//Plugin registrieren
				gsap.registerPlugin(MotionPathPlugin);
				
				//#astro 
				gsap.timeline().from('#button1', {opacy: 0.05, scale: 0, rotation: 10, ease:'back', duration: 1.5, })
							   .from("#astro", {duration: 2, x: 200, opacity: 0, scale: 0.5, rotation: 10})
							   .to("#astro", {
							  duration: 13, 
							  motionPath:{
							  path: [{x:220, y:440, scale:0.5, rotation:10}, {x:780, y:240,scale: 0.7, rotation:-30}, {x:470, y:10, scale:1, rotation:5}]
							  }
							});

				MotionPathHelper.create("#astro")
		</script>
CSS

Der Inhalt des Buttons wurde mit dem Pseudoelement ::after eingefügt. Das Ziel war es, den Text beim Hovern über den Button zu ändern. Beim Hovern sollen auch die Hindergrundfarbe und der Schatten sich verändern. Da :hover::after nur den Inhalt (also Text) ansteuert, muss man noch einmal :hover benutzen.

#button1 {
	display:inline-block;
	box-sizing: border-box;
	min-width: 11em;
	border-width: 4px;
	border-radius: 20px;
	background-color: rgba(204, 102, 255, 0.55);
	border-color: rgba(239, 204, 255);
	text-align: center;
	font-size: 31px;
	padding: 25px;
	position: absolute;
	top: 53%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3), 0 6px 20px 0 rgba(0,0,0,0.29);
}

#button1::after{
    content:'Eine Runde spielen?';
}
#button1:hover::after{
    content:"Los geht's!";
}

#button1:hover {
    background-color: rgba(251, 41, 253, 0.9);
    cursor: pointer;
      box-shadow: 0 8px 70px 0 rgba(255,250,250,0.3), 0 8px 70px 0 rgba(255,250,250,0.3),  0 8px 70px 0 rgba(255,250,250,0.3), 0 8px 70px 0 rgba(255,250,250,0.3);
    transition: background-color 2s ease-out;
}

Um den Hintergrund dynamischer wirken zu lassen, werden zwei Sterne-Animationen hinzugefügt. Die Idee der Erstellung der Sterne mit box-shadow und sie dann in Bewegung zu setzten stammt von diesem Youtube-Video . Im Spiel bewegen sich die Sterne sowohl von oben nach unten als auch von untern nach oben. Ermöglicht wird es durch zwei Keyframes.

/* von unten nach oben */
#stars {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background:transparent;
	animation: animStar 50s linear infinite;
	box-shadow: 789px 1341px #fff, 
				364px 52px #fff, 
				353px 596px #fff,
				1412px 376px #fff, 
				451px 625px #fff, 
				521px 1931px #fff, 
				1087px 1871px #fff,
				36px 1546px #fff, 
				132px 934px #fff, 
				1698px 901px #fff, 
				1418px 664px #fff,
				1448px 1157px #fff,
				1084px 232px #fff, 
				347px 1776px #fff, 
				1222px 343px #fff; /* 15*/
}

#stars2 {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background:#bb33ff;
	animation: animStar 100s linear infinite;	 
	box-shadow: 1448px 320px #00ffff, 
				1775px 1663px #00ffff, 
				332px 1364px #00ffff,
				878px 340px #00ffff, 
				569px 1832px #00ffff,
				1422px 1684px #00ffff, 
				1946px 1907px #00ffff,
				121px 979px #00ffff, 
				1044px 1069px #00ffff, 
				463px 381px #00ffff, 
				
				423px 112px #ffffb3,
				523px 1179px #ffffb3, 
				779px 654px #ffffb3,
				1398px 694px #ffffb3, 
				1085px 1464px #ffffb3;
}

@keyframes animStar{
	from {
		transform: translateY(0px);
	}
	to {
		transform: translateY(-1000px);
	}
}


/* von oben nach unten*/

#stars_2 {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background:transparent;
	animation: animStar_2 50s linear infinite;
	box-shadow: 779px 1331px #fff, 
				324px 42px #fff, 
				303px 586px #fff,
				1312px 276px #fff, 
				451px 625px #fff, 
				521px 1931px #fff, 
				1087px 1871px #fff,
				36px 1546px #fff, 
				132px 934px #fff, 
				1698px 901px #fff, 
				1418px 664px #fff,
				1448px 1157px #fff,
				1084px 232px #fff, 
				347px 1776px #fff, 
				1722px 243px #fff; /* 15*/
}

#stars2_2 {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background:#bb33ff;
	animation: animStar_2 100s linear infinite; 
	box-shadow: 1448px 320px #9acd32, 
				1775px 1663px #9acd32, 
				332px 1364px #9acd32,
				878px 340px #9acd32, 
				569px 1832px #9acd32,
				1422px 1684px #9acd32, 
				1946px 1907px #9acd32,
				121px 979px #9acd32, 
				1044px 1069px #9acd32, 
				463px 381px #9acd32, 
				
				423px 112px #ffffb3,
				523px 1179px #ffffb3, 
				779px 654px #ffffb3,
				1398px 694px #ffffb3, 
				1085px 1464px #ffffb3;
}

@keyframes animStar_2{
	from {
		transform: translateY(-1000px);
	}
	to {
		transform: translateY(1000px);
	}
}

Die Animation des Raumschiff ist ähnlich wie bei den Sternen umgesetzt. Die Keyframes teilen wir dieses Mal in Prozente ein.

#spaceship{
	animation-delay: 4s;
	animation: futurama 10s linear forwards;
}

@keyframes futurama{
	0% {
		max-width: 1%; 
		transform: translateX(-20em);
	}
	25% {
		max-width: 4%; 
	}
	100% {
		transform: translateX(-10em);
		max-width: 14%; 
	}
}

Zweite Ebene

HTML

Für die zweite Ebene, also für die Datei game.html , fügen wir im Head-Bereich zusätzlich zu GSAP ein Script von LottieFiles hinzu . Dieser ermöglicht später eine Lottie-Animation zu starten.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script> <!--Green Sock-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/MotionPathPlugin.min.js"></script> <!--Green Sock-->		 

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <!-- Lottiefiles-->

Der HTML-Code ist auch hier unkompliziert gestaltet. Der Div mit der class=”grid” ist der wichtigste Bestandteil dieses HTML-Codes. Über ihn erzeugt die app.js-Datei die Memory-Karten .

Bei der Lottie-Animation handelt es sich um eine Konfetti-Animation, die nur beim Gewinnen des Spiels über Javascript aktiviert wird. Sie ist in der HTML-Datei über den <lottie-player>-Tag eingebunden und über CSS angepasst.

<!-- Memory-Spiel -->
    <div class="grid"></div> <!-- Memorykarten werden über app.js erzeugt -->   

    <img id="gameAstro" src="Bilder/astro.png"/>        <!-- Astronaut -->
    <img id='Traene' src='Bilder/water.svg'> <!-- erscheint, wenn verloren -->
    <div id="score" >
        <h3>
            Du hast 30 Sekunden Zeit <br/> 
            Dein Score:<span id="result"></span>
        </h3>
        <p id="message"></p>
    </div>


<!--Spiel gewonnen-->
<lottie-player src="https://assets6.lottiefiles.com/packages/lf20_u4yrau.json" id='confetti' background="transparent"  speed="1.15"    loop  autoplay></lottie-player>
<div id='gewonnen'><h1>6/6! Gut gemacht!</h1></div>


<!--Spiel verloren-->    
<div id="Schande"><p>Schade!</p></div>
<div id='verloren'><h1>Verloren</h1></div>


<!-- "Neues Spiel"  Button -->  
<a href="javascript:location.reload()"><div id="nochMal">Neues Spiel</div></a>
Javascript

Der grundlegende JS-Code für das Memory-Spiel stammt aus diesem YouTube-Video. Der Code wurde modifiziert und an eigene Bedürfnisse angepasst.

Das Programm führt folgende Schritte aus: createBoard() kreiert innerhalb des .grid-Divs Child-Elemete, die für die Erstellung der Karten benötigt werden. Timer löst nach 30 Sekunden die Funktion verloren() aus, die die Elemente .grid und und scoreDiv entfernt und stattdessen andere Elemente aktiviert. Die Funktion checkForMatches() erfüllt gleich mehrere Aufgaben: Sie vergleicht die angeklickten Karten und je nach Auswahl gibt einen Text in der Sprechblase aus. Wenn sie feststellt, dass alle Paare gefunden wurden, löscht bzw. deaktiviert sie bestimmte Elemente und blendet neue ein. Die flipCard()-Funktion sorgt dafür, dass die Karten “umgedreht” werden und man das verborgene Bild sieht. Es können nur zwei Karten gleichzeitig umgedreht werden.

document.addEventListener('DOMContentLoaded', () => {

  //Kartenauswahl
  
  const cardArray = [
    {
      name: 'mond',
	  img: 'Bilder/mond.svg'
    },
    {
      name: 'alien',
	  img: 'Bilder/alien.svg'
    },
    {
      name: 'ufo',
	  img: 'Bilder/ufo.svg'
    },
    {
      name: 'rocket',
	  img: 'Bilder/rocket.svg'
    },
    {
      name: 'space',
      img: 'Bilder/space.svg'
    },
    {
      name: 'sun',
      img: 'Bilder/sun.svg'
    },
    {
      name: 'mond',
      img: 'Bilder/mond.svg'
    },
    {
      name: 'alien',
      img: 'Bilder/alien.svg'
    },
    {
      name: 'ufo',
      img: 'Bilder/ufo.svg'
    },
    {
      name: 'rocket',
      img: 'Bilder/rocket.svg'
    },
    {
      name: 'space',
      img: 'Bilder/space.svg'
    },
    {
      name: 'sun',
      img: 'Bilder/sun.svg'
    }
  ];

  cardArray.sort( () => 0.5 - Math.random());
  

  const grid = document.querySelector('.grid');
  const resultDisplay = document.querySelector('#result');
  const wordCloud = document.querySelector('#message');
  const scoreDiv = document.querySelector('#score');
  const gameAstro = document.querySelector('#gameAstro');
  
  let cardsChosen = [];
  let cardsChosenId = [];
  let cardsWon = [];
  
  //create your board

  function createBoard() {
    for (let i = 0; i < cardArray.length; i++) {
	const cardDiv = document.createElement('div') //Um die karten herum einen Div erstellen
	cardDiv.setAttribute('class', 'imgDiv') //Um die karten herum einen Div erstellen
	
    const card = document.createElement('img')
	card.setAttribute('class', 'Spielbilder')
    card.setAttribute('src', 'Bilder/logo.svg')
    card.setAttribute('data-id', i)
    card.addEventListener('click', flipCard)
	  
	grid.appendChild(cardDiv).appendChild(card) //Um die Karten herum einen Div erstellen
    }
  };
  
    
  //Timer. Falls das Spiel mach 30 Sekunden nicht gewonnen wurde, wird das Spiel abgebrochen
  	var timer = setTimeout( function(){verloren();}, 30000);
	function verloren(){
	  grid.remove()
	  scoreDiv.remove()
	  gameAstro.style.marginTop = '17em'
	  gameAstro.style.marginLeft = '7em'
	  gameAstro.style.width = '10em'
	  
	  document.querySelector('#verloren').style.display = 'block'
	  document.querySelector('#Schande').style.display = 'block'
	    
	  gsap.timeline().from("#gameAstro", {duration: 2, y: 200, opacity: 0, scale: 0, rotation: 180, ease:'back'});
	  
	  document.querySelector('#Traene').style.display = 'block'
	};
  

  //check for matches
  function checkForMatch() {
    const cards = document.querySelectorAll('img')
    const optionOneId = cardsChosenId[0]
    const optionTwoId = cardsChosenId[1]
	
    
    if(optionOneId == optionTwoId) {
      cards[optionOneId].setAttribute('src', 'Bilder/logo.svg')
      cards[optionTwoId].setAttribute('src', 'Bilder/logo.svg')
	  wordCloud.textContent = 'Du hast die gleiche Karte angeklickt!'
	  setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
    }
    else if (cardsChosen[0] === cardsChosen[1]) {
	  wordCloud.textContent = 'Du hast ein Paar gefunden!'
	  setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
      cards[optionOneId].removeAttribute('src', 'Bilder/logo.svg')
      cards[optionTwoId].removeAttribute('src', 'Bilder/logo.svg')
      cards[optionOneId].removeEventListener('click', flipCard)
      cards[optionTwoId].removeEventListener('click', flipCard)
      cardsWon.push(cardsChosen)
    } else {
      cards[optionOneId].setAttribute('src', 'Bilder/logo.svg')
      cards[optionTwoId].setAttribute('src', 'Bilder/logo.svg')
	  wordCloud.textContent = 'Schade, versuch es noch mal'
	  setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
    }
    cardsChosen = []
    cardsChosenId = []
    resultDisplay.textContent = cardsWon.length
	var audio = new Audio('ta-da.mp3');
    if  (cardsWon.length === cardArray.length/2) {
      //Falls das Spiel innerhalb von 30 Sekunden gewonnen:
	  clearTimeout(timer)  //Timer aussetzen, damit das Spiel nicht abgebrochen wird
      audio.play();
	  grid.remove()
	  scoreDiv.remove()
	  gameAstro.style.marginTop = '17em'
	  gameAstro.style.marginLeft = '7em'
	  gameAstro.style.width = '10em'
	  
	  document.querySelector('img#gameAstro').style.animationName = 'none' //Animation entfernen, damit GreenSock-Animation abgespilt werden kann
	  document.querySelector('#gewonnen').style.display = 'block'
	  document.querySelector('#confetti').style.display = 'block'
	  
	  //Freudiges Springen
	  gsap.timeline().from("#gameAstro", {duration: 2, y: 200, opacity: 0, scale: 0, rotation: 180, ease:'back'})
					.to('#gameAstro', { duration: .25, y: -50,  repeat: -1, yoyo: true, ease: "sine.inOut", autoRound: false}); 
    }
  };

  //flip your card
  function flipCard() {
	
    let cardId = this.getAttribute('data-id')
    cardsChosen.push(cardArray[cardId].name)
    cardsChosenId.push(cardId)
    this.setAttribute('src', cardArray[cardId].img)
    if (cardsChosen.length === 2) {
      setTimeout(checkForMatch, 300)
    }
  };

	createBoard();
});
css

Das Aussehen der Karten wird über die Klassen .grid , .imgDiv und .Spielbilder bestimmt. Die Klasse .grid ist für die Verteilung der Karten auf dem Bildschirm zuständig. Hier empfielt es sich, die Einstellung display:flex zu wählen. Es ist der leichteste Weg ist, die Karten zu positionieren. Für die richtige Reihung der Karten ist es wichtig, dass die Breite des .grid-Containers und die Breite der einzelnen Karten, die von .imgDiv gesteuert werden, auf einander abgestimmt sind.

/* Während des Spiels*/

.grid{
	display: flex;
	flex-wrap: wrap;
	width: 30em;
	margin-right: 5em;
	margin-top: 3em;
	float:right;

}

.imgDiv {
	background-color: rgba(204, 102, 255, 0.55);
	border-radius: .25em;
	width:7em;
	height:12em;
	margin:.25em;
	box-shadow: rgba(50, 50, 93, 0.65) 0px 50px 100px -20px, rgba(0, 0, 0, 0.6) 0px 30px 60px -30px, rgba(10, 37, 64, 0.65) 0px -2px 6px 0px inset;	
}
.imgDiv:hover {
	box-shadow: rgba(153, 255, 102, 0.65) 0px 50px 100px -20px, rgba(0, 0, 0, 0.6) 0px 30px 60px -30px, rgba(153, 255, 102, 0.65) 0px -2px 6px 0px inset;	
}
img.Spielbilder { 
	max-height:100%; 
	max-width:100%;
	padding:1em;
}

Dritte Ebene

Die einzelnen Elemente der dritten Ebene werden je nach Ergebnis des Spieles durch den JS-Code aktiviert. Aus diesem Grund sind sie alle mit display:none versehen. Der JS-Code verändert sie dann mit document.querySelector zu display:block.

/* Spiel gewonnen*/
h1 {
	font-size: 5em;
}

#gewonnen {
     animation: Schweben 5s linear easy-in;
    display: none;
    position: absolute;
    left: 53em;
    top: 20em;
    z-index: 10;
}
#confetti{
	display: none;
	width:75em;
	height: auto;
	float: right;
}
/* Spiel verloren*/
#verloren {
	display: none;
	animation: Schweben 6s linear infinite;
    position: absolute;
    left: 53em;
    top: 20em;
    z-index: 10;
	float:left;
}
#Schande {
	display: none;
	animation: Schweben 13s linear infinite;
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 69% 75%, 5% 100%, 27% 76%, 0% 75%);
	width: 16em;
	height:9em;
	margin-top: 13em;
	margin-left:4em;
	padding: 1em;
	float: left;	
	background-color: rgba(204, 102, 255, 0.55);
}
#Schande p {
	font-size: 2em;
	text-align: center;
}

#Traene {
	display: none;
	width: 0em;
	position:absolute;
    left: 12.5em;
	top: 22em;
	z-index: 15;
	animation: traene 3s linear infinite;
	transition: ease-in;
	animation-delay: 3s;
}
@keyframes traene{
	from {
		transform: translateY(0em);
		width: 0.5em;
	}
	to {
		transform: translateY(13em);
		width: 3em;

	}
	to {
		transform: translateY(15em);
	}
	to {
		transform: translateY(16em);
		opacity: 60%;
	}
	to {
		transform: translateY(17em);
		opacity: 7%;
	}
}

Sowohl in der zweiten als auch in der dritten Ebene werden alle sichtbaren Elemente (bis auf die Memory-Karten) mit einer Schwebeanimation versehen, um den Eindruck zu vermitteln, dass die Objekte wie im echten Weltall schweben.

/*Alles soll schweben*/
@keyframes Schweben {
	0% {

		transform: translatey(0px);
	}
	25%{
		transform: translatex(-5px);
	}
	50% {

		transform: translatey(-10px);
	}
	100% {

		transform: translatey(0px);
	}

}

Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang,  Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Tutorial: Ein Tag mit Bobby

Beitragsbild Tutorial zur Animation: Ein Tag mit Bobby

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 kann.

Inhaltsverzeichnis

Das Konzept

Die Animation ist ein Storytelling, bei dem der User mit Hilfe von Buttonklicks durch die einzelnen Szenen geleitet wird.  Dieser begleitet den Hauptcharakter Bobby durch den Tag und führt verschiedene Anweisungen durch, die Bobby in der Sprechblase gibt. Diese können durch einen Buttonklick realisiert werden. Sobald der User auf einen Button klickt, wird entweder die Szene gewechselt oder ein visueller Effekt erzeugt.

Das Ziel ist es mit dem User eine Interaktion zu starten, wobei dieser den Ablauf der Animation lenkt. Der User wird zu Beginn auch direkt von Bobby mit dem Namen angesprochen und aufgefordert mit ihm den Tag zu verbringen.

Die Idee eine Animation mit Hund(en) zu erstellen, kommt von der persönlichen Liebe zu Tieren und insbesondere zu Hunden. Die kindliche und amüsante Darstellung soll den User animieren und erfreuen. Die Hintergrundmusik sorgt für eine zusätzliche entspannte Atmosphäre, die die Stimmung der Animation unterstützt. Der User kann sich somit entspannen, zurücklehnen und die Animation genießen.

Aufbau

Die Animation ist in vier Szenen aufgeteilt:

  1. Start-Szene (div class=“ story_start_scene“)
  2. Bobby im Wohnzimmer (div-class= „dog_in_livingroom_scene“)
  3. Bobby im Park (div class=”background_image_park_day”)
  4. Schluss-Szene bei der Bobby im Park nachts ist (div class=”dog_in_park_night”)

Start Szene

Bei der Start Szene sieht man den schlafenden Bobby auf einem Teppich ohne jeglichen Hintergrund, das sich zu den restlichen Szenen unterscheidet. Der Grund dafür ist, dass man zum einen den beweglichen und farbwechselnden Hintergrund auf sich wirken lassen kann und zum anderen sollte es schlicht gehalten werden, damit der Wechsel zu den Hauptszenen spannender gestaltet wird. Zudem soll der Fokus zu Beginn auf dem Hauptcharakter liegen. Mit dem Buttonklick auf „Aufwecken“ startet die ganze Animation.

Start Szene

Zweite Szene

In der zweiten Szene befindet sich Bobby im Wohnzimmer, wo er zuvor auf dem Teppich geschlafen hat. Der User hat ihn aufgeweckt und nun fragt Bobby ihn nach seinem Namen. Die Abfrage passiert zwischen der ersten und der zweiten Szene, die mit Hilfe von JavaScript erzeugt wurde. Je nachdem welchen Namen der User eingibt, erscheint dieser in dem Begrüßungstext in der Sprechblase. Hier wird der User aufgefordert die Anweisungen von Bobby durchzuführen. In dieser Szene soll der User mit Bobby in den Park gehen.

Zweite Szene
Zweite Szene

Dritte Szene

Die dritte Szene spielt sich im Park tagsüber ab in den mehrere Aktionen passieren. Zu Beginn sieht man den Park, in dem sich ein Grill und Bobby befinden. Bobby weist darauf hin, dass es vom Grill sehr gut riecht und er gerne einen Hot Dog haben möchte. Dieser Bitte kann der User nachgehen, indem er auf den langsam erscheinenden Button „Hot Dog geben“ klicken kann. Sobald dies gemacht wurde, erscheint ein animierter Hot Dog, der vom Grill aus zu Bobby in einer 360 Grad Drehung geworfen wird. Daraufhin bedankt sich Bobby und gibt den nächsten Hinweis, dass er seinen Freund Bello sieht und mit ihm Ball spielen möchte.

Dritte Szene
Dritte Szene

Auch hier kann der User der Anweisung nachgehen, indem er auf den nächsterscheinenden Button „Mit Bello spielen“ klickt. Hier erfolgt die nächste Animation, bei der sich Bello und Bobby den Ball zu werfen. Dabei springen beide versetzt hoch und werfen den Ball mit ihrem Kopf einander zu. Nun erscheint der fünfte Button „Weiter“, der den User darauf hinweist, dass danach die nächste Szene erscheint.

Vierte Szene

Vierte Szene
Vierte Szene

Die vierte und letzte Szene findet in dem selben Park statt. Jedoch ist es schon spät geworden und Bobby ist müde. Er macht vor Freude Rückwärtssaltos und bedankt sich für den großartigen Tag, den er mit dem User erlebt hat. Auch hier weist Bobby daraufhin, dass er müde und erschöpft ist. Hier ist es Zeit sich von Bobby zu verabschieden und ihm eine Gute Nacht zu wünschen.

Letzte Szene
Letzte Szene

Mit dem Buttonklick kann man dies tun, wobei das Bild von Bobby in den ursprünglich schlafenden Zustand zurückgebracht wird. Es taucht ein Eyecatcher auf, der zoomt und sich hin und her in verschiedene Winkel dreht. Dies ist der Abschluss der Animation, der durch den animierten Text „Gute Nacht, Bobby“ kenntlich gemacht wird. Der letzte Button unterscheidet sich in der Erscheinungsweise von allen anderen, denn dieser macht auf sich Aufmerksam, indem sich dieser hin und her bewegt und dabei vertikal spiegelt. Der Grund für diese Erscheinungsweise ist das Aufmerksam machen, dass ab hier keine neue Szene erscheint, sondern alles nochmal vom Anfang beginnt. Somit ermöglicht dieser Button die Animation nochmal neu zu starten

Der Code

Für die Animationen wurden HTML5, CSS3 sowie JavaScript und jQuery benutzt. HTML5 wurde für das Grundgerüst und Aufbau, CSS3 für die Animation sowie das Styling und JavaScript bzw. jQuery für das Auslösen/Verstecken verschiedener Animationsobjekte benutzt.

Allgemeine Einstellungen

In der ID „animation_start“ in HTML5 spielt sich die gesamte Animation ab. Die jeweiligen Szenen sind in einzelne div-classes unterteilt in denen die dazugehörigen Objekte enthalten sind. Die div-classes sind nach den Szenarien benannt, das das Erkennen der Inhalte vereinfacht.

<div id="animation_start"class="whole_animation"> <!--ID der gesamten Animation-->
      <div class="story_start_scene"><!--Erste Szene: Startbildschrim-->
         <img src="sleeping_dog.png" id="sleep"/>
         <img src="carpet.png" id="carpet"/>
       </div>
    
       <div class="dog_in_livingroom_scene"> <!---Zweite Szene: Bobby im Wohnzimmer Szene samt Begrüßung-->
          <div class="living_room_background">
            <img src="room.png" class="backgroundimage_livingroom" style="visibility: hidden;"/>
           </div> 
           <div class="dog_character">
             <img src="standing_dog.png" id="hello_dog" style="visibility: hidden;"/>
             <img src="sprechblase.png" id="speak1" style="visibility: hidden;"/> 
             <p id="welcome_text" style="visibility: hidden;">Hallo! Ich bin Bobby. Lass uns den Tag zusammen verbringen.</p>
           </div>
       </div>

       <div class="dog_in_park_day"> <!--Dritte Szene: Bobby im Park Szene mit dazugehörigen Objekten-->
           <div class="background_image_park_day">
             <img src="meadow_at_day.png" class="backgroundimage_park_day" style="visibility: hidden;"/>        
           </div>
           <div class="park_items">
             <img src="grill.png" id="bbq" style="visibility: hidden;"/>
             <img src="food.png" id="hot_dog" style="visibility: hidden;"/>
             <img src="standing_dog2.png" id="dog_at_park" style="visibility: hidden;"/>
             <img src="sprechblase2.png" id="speak2" style="visibility: hidden;"/>
             <p id="hot_dog_text" style="visibility: hidden;">Das riecht aber toll! Kannst du mir einen Hot Dog geben?</p>
             <p id="thank_you_hot_dog_text" style="visibility: hidden;">Danke! Ouh Schau! Da ist Bello. Ich möchte mit ihm Ball spielen.</p>
             <img src="playing_dog_brown.png" id="bello" style="visibility: hidden;"/>
             <img src="playing_dog_grey.png" id="bobby" style= "visibility: hidden;"/>
             <img src="ball.png" id="toy" style="visibility: hidden;"/>    
           </div> 
       </div>

       <div class="dog_in_park_night"><!--Abschlussszene: Bobby im Park nachts.--> 
           <div class="background_image_park_night">
             <img src="meadow_at_night.png" id="backgroundimage2" style="visibility: hidden;"/> 
             <img src="dog_by_night.png" id="night_dog" style="visibility: hidden;"/>
             <img src="sprechblase3.png" id="speak4" style="visibility: hidden;"/>
             <img src="sleeping_dog2.png" id="tired" style="visibility: hidden;"/>  
             <p id="thank_you_for_the_day" style="visibility: hidden;">Danke dir für den schönen Tag! Ich bin jetzt aber müde.</p>
             <p id="good_night_bobby" style="visibility: hidden;">Gute Nacht, Bobby</p>
           </div>
       </div>
 </div><!--Ende der "animation_start"-->

In der aside-class wurden alle Buttons und der Titel der der Animation eingetragen, da diese Inhalte sich immer an der selben Position befinden.

<body>
  <!--Alle Elemente sind auf "visibility:hidden" gesetzt, die über JavaScript aktiviert werden, wenn man auf einen Button klickt-->
  <script src="animation_functions.js"></script> <!--Einbindung der JavaScript Datei-->
  <aside class="title_and_buttons"> <!--Übergreifende Class für alle Buttons und Titel der Animation (h1) damit die Position die selbe bleibt-->
    <h1> Ein Tag mit Bobby</h1>
    <button id="button_aufwecken">
       <a class="button_1">Aufwecken</a>
    </button>
    <button id="button_park" style="visibility: hidden;">
      <a class="button_2">Lass uns in den Park gehen</a>
   </button>
   <button id="button_hot_dog" style="visibility: hidden;">
      <a class="button_3">Hot Dog geben </a>
    </button>
    <button id="button_play" style="visibility: hidden;">
      <a class="button_4">Mit Bello spielen</a>
    </button>
    <button id="button_next" style="visibility: hidden;">
     <a class="button_5">Weiter</a>
   </button>
   <button id="button_good_night" style="visibility: hidden;">
     <a class="button_6">Gute Nacht!</a>
  </button>
   <button id="button_reload" style="visibility: hidden;">
     <a class="button_7">Neustart</a>
 </button>
</aside> 

Auffallend im Code ist, dass alle Objekte nicht sichtbar sind (visibility: hidden). Diese werden zu dem Zeitpunkt wann die jeweiligen Objekte zu sehen sein sollen mit Hilfe von jQuery sichtbar gemacht. Die allgemeine Position aller Elemente ist in der ID „animation“ sowie dessen class „whole_animation“ zu sehen. So entsteht ein Rahmen für die verschiedenen Bilder, das die Zentrierung der Szenen möglich macht. Die gewählte Größe und Position erstellt eine Box, wo sich die Animation abspielt. Dies soll ein Gefühl erzeugen, als würde man in einem Kino vor einer Leinwand sitzen.

#animation { /*Ausrichtung der gesamten Animation*/
  align-items: center;
  min-height: 100%;
  position: absolute;
}

.whole_animation {
  max-width: 900px;
  margin: 0em auto 0;
  text-align: center;
  max-height:800px;  
  overflow: hidden;
}
  
.title_and_buttons { /*Ausrichtung aller Buttons und der h1*/
  max-width: 900px;
  text-align: center;
  margin: 1em auto; 
  padding:1px;
}
   
h1 {
  color: white;
  font-size: 1.7rem;
}

Im Body ist die Animation des ineinanderfließenden Hintergrundes zu sehen. Die keyframes bringen diese Animation zum Laufen. Zunächst muss man drei Farben definieren, die man in dem Übergang haben möchte. Des Weiteren war es wichtig die Dauer und Länge zu definieren. In diesem Fall sollte der gesamte Übergang 13 Sekunden dauern und unbegrenzt durchlaufen.

body {
  font-family: "Comic sans MS"; 
  background-size: cover; 
  justify-content:center;
  background-position: center;
  background: -webkit-linear-gradient(132deg, #FC415A, #591BC5, #4a8ead); 
  background-size: 400% 400%;
  align-items: center;
  min-height: 100%;
  overflow:hidden;
  -webkit-animation: moving_background 13s ease infinite;
  animation: moving_background 13s ease infinite;
}

@-webkit-keyframes moving_background {  /*Animation des Backgrounds, der in Dauerschleife die Farben wechselt*/
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%; /*Inspired by https://www.sliderrevolution.com/resources/css-animated-background/*/
  }
  100% {
      background-position: 0% 50%;
  }
}

Die Buttons

Die Buttons haben wie schon zuvor erwähnt den funktionalen Zweck den User durch die Szenen zu geleiten und verschiedene Animationen hervorzurufen. Somit sind diese essenziel für das Abspielen der Animation. Aus diesem Grund werden diese oberhalb der Animationsbox dargestellt, damit die Aufmerksamkeit des Users zu den bestimmten Zeitpunkten darauf gelenkt wird.

Die Buttons haben alle den selben Stil, jedoch haben alle verschiedene Dauer und Art und Weise der Animation. Daher wurde jeder einzelne Button in CSS3 angelegt. Das Aussehen der Buttons ist Oval und hat drei Farbverläufe, das in zarten und hellen Farben gehalten ist, um mit dem Hintergrund zu harmonieren. Beim Hovern erfolgt ein Spiegeleffekt bei dem die Farben von rechts nach links ineinander laufen. Durch das bewegte Gelb wir ein Relief- bzw. Spiegeleffekt erzeugt. Die transition ermöglicht dies.

#button_aufwecken { /*Design und Animation der Buttons. Alle haben die gleiche Einstellung nur andere Animationsangaben. Daher jeden Button einzeln angelegt, anstatt die zusammenzufassen*/
  border-radius: 50%;
  align-items: center;
  font-size: 15px;
  display: flex;
  margin: auto;
  background-image: linear-gradient(135deg, #ee9ca7 0%, #fbed96 51%, #ee9ca7 100%);  /*Inspired by https://blog.avada.io/css/button-hover-effects/*/
  background-size: 200% auto;
  box-shadow: #a05a9c 0px 0px 5px;
  -webkit-animation: push_buttom 3s infinite;
  animation: push_button 3s infinite;
  outline: none;
}


@-webkit-keyframes push_button {                       /*Inspired by https://css-tricks.com/css-animation-libraries/*/
  0% {
    box-shadow: 0px 0px 4px rgb(255,250,250);
  }
          
  
  50% {
    box-shadow: 0px 0px 23px rgb(255,250,250);
  
  }
  100% {
    box-shadow: 0px 0px 12px rgb(255,250,250);
  }
}

@keyframes push_button {                       
0% {
  box-shadow: 0px 0px 4px rgb(255,250,250);
}
        

50% {
  box-shadow: 0px 0px 23px rgb(255,250,250);

}
100% {
  box-shadow: 0px 0px 12px rgb(255,250,250);
 }
} 

#button_aufwecken:hover {
  background-position: right center;
  transition: all 0.5s ease-out;
  }
      
.button_1{
  flex: 1 auto;
  margin:5px;
  padding:10px 25px;
  text-align:center;
  transition: all 0.5s ease-out;
  cursor:pointer;
  background-size: 200% auto;
  font-family: "Comic sans MS";
}

Animierte Objekte

Alle benutzen Bilder, bis auf die Hintergrundbilder der Szenen, haben einen funktionalen Zweck. Alle Bilder sind PNG Dateien und von Pixabay. Durch die position: relativ war es einfach alle Objekte in einer Szene zu platzieren. Ausgerichtet und an den gewünschten Platz gebracht wurde mit bottom, top, left, right und margin.  Keyframes erzeugen die Animationen der Objekte. Die nachfolgenden Abschnitte beschreiben die einzelnen animierten Objekte.

Text in Sprechblase

Der sprechende Text, den Bobby in der Sprechblase sagt zoomt rein und raus und wechselt dabei zwischen drei Farben. So sollte die Aufmerksamkeit auf den Text gelenkt werden, damit der User den Anweisungen folgen kann. Dazu wird die animation-timing-function auf ease gesetzt. Zudem soll der Zoomeffekt in Dauerschleife ablaufen. Daher der Wert infinite. Durch scale() konnte die Größe der Transformation des Textes eingerichtet werden. Color sorgt für den Farbverlauf, der sich über die verschiedenen Sequenzen (0%, 50%, 100%) ändert.

#welcome_text { /*Annimation für Text in der Sprechblase. Wird in jeder Szene eingesetzt*/
  position: relative;
  bottom: 392px;
  left: 475px;
  z-index: 4;
  font-size: 10px;
  box-sizing: border-box;  
  overflow: hidden;
  border-width: 20px;
  border: 1px hidden;
  width: 135px;

  -webkit-animation: typing_hello 1.5s ease infinite; 
  -webkit-animation-delay: 0s;
  -webkit-animation-play-state: paused;
  -webkit-animation-fill-mode: forwards;

  animation: typing_hello 1.5s ease infinite;
  animation-delay: 0s;
  animation-fill-mode: forwards;
  animation-play-state: paused;     
}

  @-webkit-keyframes typing_hello {
   0% {
    transform: 
       scale(0.7, 0.7);
       color:rgb(116, 9, 107)
  }
   50% {
    transform: 
       scale(0.9, 0.9);
       color:rgb(85, 25, 134)
  }
   100% {
    transform: 
      scale(0.7, 0.7);
      color:rgb(73, 41, 214)
  }
}

Fliegender Hot Dog

Für die Animation des fliegenden Hot Dogs wurden in den keyframes die Werte translateX(), translateY() und rotate() verwendet. Die beiden ersten Werte sorgen für die Verschiebung auf der X- und Y-Aschse, wobei ein negativer translateY() Wert das Objekt nach oben versetzt. Daher ist bei 50%, das der höchste Punkt der Flugbahn sein soll, ein negativer Wert von -80px. rotate() sorgt für die Rotation des Objektes. Hierbei müssen Gradzahlen eingetragen werden.

#hot_dog { /*Animation des fliegenden Hot-Dogs*/
  width: 47px;
  z-index: 2;
  position: relative;
  bottom: 300px;
  right: 225px;

  -webkit-animation-name: flying_hot_dog;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-play-state: paused;
  
  animation-name: flying_hot_dog; 
  animation-duration: 2s;
  animation-fill-mode:forwards;
  animation-delay: 0s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-play-state: paused;
}
 
  @-webkit-keyframes flying_hot_dog {
    from  { transform: translateX(0px) translateY(20px)  rotate(0deg) }
    50%   { transform: translateX(220px) translateY(-80px) rotate(180deg) }
    to    { transform: translateX(440px) translateY(95px)rotate(360deg) }
  }

  @keyframes flying_hot_dog {
    from  { transform: translateX(0px) translateY(20px)  rotate(0deg) }
    50%   { transform: translateX(220px) translateY(-80px) rotate(180deg) }
    to    { transform: translateX(440px) translateY(95px)rotate(360deg) }
  }

Bello und Bobby beim Ballspielen

Die Animation der zwei spielenden Hunde war am schwierigsten zu gestalten, da hier der Zeitfaktor eine große Rolle spielt, damit alles synchron abläuft. Zunächst die Gestaltung der beiden springenden Hunde. Hierbei muss man die Sequenzen (0%-100%) der bottom-Wert ändern. Je größer der Wert, desto höher steigen die Objekte auf. Die ease-out Eigenschaft sorgt dafür, dass das Ende der Sequenz langsamer abläuft. So kommt der fließende Sprung zustande. Beide Hunde haben die selben Animationseigenschaften. Der Unterschied liegt im animation-delay. Bello fängt eine Sekunde später an zu springen als Bobby. So entsteht der abwechselnde Sprung.

#bello { /*Ab hier folgt die Animation der zwei mit dem Ball spielenden Hunde*/
  width: 90px;
  z-index: 3;
  position: relative;
  bottom: 430px;

  -webkit-animation: move_bello 2s infinite;
  -webkit-animation-delay: 1s;

  animation: move_bello 2s infinite;
  animation-delay: 1s;
}

@-webkit-keyframes move_bello {
  from { bottom: 477px; animation-timing-function: ease-out; }
  50% { bottom: 570px; animation-timing-function: ease-out; }
   to { bottom: 477px; }
}

@keyframes move_bello {
  from { bottom: 477px; animation-timing-function: ease-out; }
  50% { bottom: 570px; animation-timing-function: ease-out; }
   to { bottom: 477px; }
}

#bobby {
  width: 90px;
  z-index: 3;
  position: relative;
  left: 200px;
  bottom: 430px;

  -webkit-animation: move_bobby 2s infinite;
  animation: move_bobby 2s infinite;;
}

@-webkit-keyframes move_bobby {
  from {  bottom: 477px; animation-timing-function: ease-out; }
    50% { bottom: 570px; animation-timing-function: ease-out; }
     to { bottom: 477px; }
}

Die Animation des Balls wurde nach dem selben Konzept wie die des Hot Dogs gestaltet. Hier bestand die Schwierigkeit mit der Positionierung und der Dauer des fliegenden Balls. Es musste alles auf die beiden springenden Hunde angepasst werden, sodass der Effekt eines Kopfballs entsteht.

Saltomachender Bobby

In der letzten Szene macht Bobby ein Rückwärtssalto. Dieser Effekt wurde mit den gleichen Eigenschaften wie bei dem fliegenden Hot Dog und Ball animiert. Da der Charakter sich auf einer Stelle bewegt und nur hochspringt und dreht, bleibt der translateX()vWert bei 0px. Dem entsprechend muss der translateY() und rotate() angepasst werden.

#night_dog {
  width: 80px;
  position: relative;
  right: 380px;
  bottom: 1039px;
  -webkit-animation: salto_dog 2s infinite;
  -webkit-animation-timing-function: linear;
  animation: salto_dog 2s infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes salto_dog {  /*Animation von Bobby, der eine Rückwärtsrolle macht*/
  from  { transform: translateX(0px) translateY(0px)  rotate(0deg) }
  50%   { transform: translateX(0px) translateY(-80px) rotate(-180deg) }
  to    { transform: translateX(0px) translateY(0px)rotate(-360deg) }
}

Buttons

#button_reload {
border-radius: 50%;
align-items: center;
font-size: 15px;
display: flex;
margin: auto;
background-image: linear-gradient(135deg, #ee9ca7 0%, #fbed96 51%, #ee9ca7 100%); /*https://blog.avada.io/css/button-hover-effects/*/
background-size: 200% auto;
box-shadow: #a05a9c 0px 0px 5px; 
margin-top: -50px;
}

#button_reload {
-webkit-animation-name: button_load;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
-webkit-animation-play-state: paused;
-webkit-animation-direction: alternate-reverse;

animation-name: button_load; 
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count:infinite;
animation-play-state: paused;
animation-direction: alternate-reverse;
}

@-webkit-keyframes button_load {
  from  { transform: translateX(-20px) scaleX(1.0)}
  to    { transform: translateX(20px) scaleX(-1.0)}
} 

Die Buttons wurden im vorherigen Kapitel schon beschrieben. Nun wird näher auf die animierenden Effekte eingegangen. Der Effekt des Einblendens wurde durch die opacity Eigenschaft erzeugt, der von 0 auf 1 steigt und durch die animation-duration in die Länge gezogen wird. Der erste und letzte Button haben jedoch ein paar zusätzliche Effekte. Beim ersten Button „Aufwecken“ leuchtet der Button-Hintergrund in Weiß. Durch den versetzten box-shadow und der Dauerschleife (infinite) wird das pulsierende Leuchten erzeugt (siehe Bild ). Der letzte Button „Neustart“ dreht und bewegt sich von links nach rechts und rückwärtsrum, während sich dieser vertikal spiegelt. Die animation-direction: alternate-reverse gibt an, dass die Animation sich vor- und zurückspielen soll. Animation-timing-function sorgt für den linearen. also gleichbleibenden/flüssigen Ablauf. translateX() sorgt dafür, dass sich der Button von links nach rechts bewegt. scaleX() hingegen sorgt für die Spiegelung, wobei der negative Wert die Spiegelung an der X-Achse erzeugt.

Gute Nacht, Bobby Schrift

Der Abschließende Text „Gute Nacht, Bobby“ wurde mit einer Zoom-, Leucht- und Rotations-Funktion gestaltet. Wie schon zuvor erwähnt erzeugt scale() den Zoomeffekt. Für das Textleuchten ist text-shadow zuständig. rotate() sorgt für die Drehung des Textes. Der Unterschied bei dieser Textanimation liegt in der animation-timing-function. Hierbei setzt man cubic-bezier () ein um, einen Verzerrungseffekt zu erstellen.

#good_night_bobby{ /*Verabschiedung durch "Gute Nacht" Text Animation*/
  position: relative;
  bottom: 1500px;
  font-size: 30px;
  color: white;
  -webkit-animation: push_good_night 3s infinite;
  animation: push_good_night 3s infinite;
  animation-timing-function: cubic-bezier(.1,0,.7,1);
  outline: none;
}

  @-webkit-keyframes push_good_night {
   0% {
    transform: scale(1);
    text-shadow: 2px 3px 6px rgb(3, 246, 255);
  }
   20% {
    transform: scale(1.1) rotate(2deg);
  }                                                  
   40% {
    transform: scale(.97);
  }
   50% {
    text-shadow: 6px 6px 8px rgb(19, 236, 184);
 }
   60% {
    transform: scale(.99) rotate(-2deg);
 }
   80% {
    transform: scale(1.05);
 }
   100% {
    transform: scale(1);
    text-shadow: 2px 3px 6px rgb(135, 222, 241);
 }
 }

  @keyframes push_good_night {
   0% {
    transform: scale(1);
    text-shadow: 2px 3px 6px rgb(3, 246, 255);
  }
   20% {
   transform: scale(1.1) rotate(2deg);
  }                                                  
   40% {
   transform: scale(.97);
  }
   50% {
   text-shadow: 6px 6px 8px rgb(19, 236, 184);
}
   60% {
   transform: scale(.99) rotate(-2deg);
}
   80% {
   transform: scale(1.05);
}
   100% {
   transform: scale(1);
   text-shadow: 2px 3px 6px rgb(135, 222, 241);
}
}

JavaScript/jQuery

var name = "Snoopy" /*Variable für die Namensabfrage für die Begrüßung von Bobby*/

$(document).ready(function(){
/*Funktion, bei der bei einem Buttonklick bestimmte Objekte sichtbar oder ausgeblendet werden*/
$("#button_aufwecken").on("click", function() {  /*Button "Aufwecken"*/
    $(".story_start_scene").css({"visibility": "hidden"});
    $(".backgroundimage_livingroom").css({"visibility": "visible"}); 
    $("#hello_dog").css({"visibility": "visible"});
    $("#speak1").css({"visibility": "visible"});
    $("#button_park").css({"visibility": "visible"});
    $("#button_aufwecken").css({"visibility": "hidden"})
    $("#welcome_text").css({"visibility": "visible"});
    $("#name_text").css({"visibility": "visible"});
    $("form").css({"visibility": "visible"});
    
    $("#button_park").css({"-webkit-animation-play-state": "running"}); /*Animationen, die pausiert werden, werden hierbei zum Abspielen gebracht*/
    $("#welcome_text").css({"-webkit-animation-play-state": "running"});

    name = prompt("Bitte gib deinen Namen ein", "Snoopy");     /*Namensabfrage. Inspired by https://www.w3schools.com/jsref/met_win_prompt.asp*/
    console.log(name);

    if (name != null) {                                                                    
        document.getElementById("welcome_text").innerHTML =
        "Hallo " + name + "! Ich bin Bobby. Lass uns den Tag zusammen verbringen.";
      }

});

Um die Übergänge zwischen den einzelnen Szenen und Animationen möglich zu machen, wurde jQuery eingesetzt. Durch den Buttonklick werden Objekte, die in HTML5 auf „hidden“ gesetzt sind, sichtbar gemacht. Dafür nutzt man die $(“#button”).on(“click”, function() {}}); . Diese zeigt welche Objekte beim Buttonklick gezeigt werden und welche verschwinden sollen. Die Namensabfrage zwischen der ersten und der zweiten Szene erfolgte über JavaScript mit der promt() Methode.

Bobby JS
Bobby JS

Hierbei wurde eine Variable erstellt, das einen default Wert liefert, der in der promp() Abfrage und if-loop eingefügt ist. Es öffnet sich ein Pop-up Fenster bei dem die Aufforderung „Bitte gib deinen Namen ein“ und dem default Wert „Snoopy“ steht. Diese wurden zuvor definiert. Wenn der User seinen Namen eintippt, nimmt die p id=“welcome_text“ diesen entgegen und Bobby begrüßt den User mit „Hallo [Username]! Ich bin Bobby. Lass und den Tag zusammen verbringen“. Falls das Eingabefeld leer bleibt, begrüßt Bobby den User mit dem Namen null. Durch diese Funktion wird eine Bindung zum User aufgebaut.

Die Animationen, die mit Hilfe von transitions und keyframes in CSS3 erstellt wurden, wurden bei webkit-animation-play-state auf paused gesetzt. Der Grund dafür ist, dass bestimmte Funktionen wie animation-delay oder animation-duration ab der Start Szene anfangen zu zählen. Das war aber nicht die Intention. Es sollten alle Abläufe erst nach einem Buttonklick starten. So war das Problem z.B. bei dem zweiten Button „Lass und in den Park gehen“. Dieser wird nach 3 Sekunden eingeblendet. Wäre -webkit-animation-play-state auf running gesetzt, so hätte das Einblenden des Buttons nach 3 Sekunden nicht funktioniert, wenn man sich länger als 3 Sekunden in der Start Szene befunden hätte. Der Button wäre dann beim Szenenwechsel schon da und der Einblende Effekt wäre nicht sichtbar. Damit die einzelnen Animationen erst beim Buttonklick abspielen, muss man diese über jQuery bei -webkit-animation-play-state auf running setzen.

$("#hot_dog_text").css({"-webkit-animation-play-state": "running"});
$("#button_hot_dog").css({"-webkit-animation-play-state": "running"});

Besonderheiten

Eine Besonderheit ist die im Hintergrund eingesetzte Musik, um die Animation spannender zu gestalten und den User in eine angenehme Stimmung zu versetzen. Des Weiteren wurden so gut wie alle benutzen Objekte animiert. Es wurde versucht jedes Animationselement individuell zu gestalten, um verschiedene visuelle Effekte zu erzeugen. Die letzte Besonderheit ist, dass der letzte Button einen Neustart der Animation ermöglicht, falls man erneut das Story Telling durchspielen möchte.

Schwierigkeiten

Beim Erstellen der Animation traten zwei Probleme auf.

  1. Der animierte Sprechtext sollte ursprünglich abgetippt werden. Dafür wurde die step() Methode verwendet. Leider konnte ein Zeilenumbruch für die Animation nicht erstellt werden, da ansonsten der “abgetippte Text” nicht korrekt funktioniert hat wie er es sollte. Dieser hätte in die Sprechblase passen müssen. Daher wurde eine alternative Darstellung des Textes eingebaut.
  2. Die Hintergrundmusik wird manchmal in Google Chrome nicht abgespielt. Daher wird empfohlen sich die Animation in Microsoft Edge anzuschauen.

Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang,  Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Moderne Lernraumgestaltung in Universitätsbliotheken

Beitragsbild Moderne Lernraumgestaltung in Universitätsbibliotheken

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 entstehen.

Gleichzeitig steigt die Nachfrage nach Lern- und Arbeitsraum, da Studium und Arbeitswelt zunehmend virtuell und somit zeitlich und räumlich flexibler werden.[1] Auch wenn es angesichts dieser Ortsunabhängigkeit zunächst paradox erscheint, gewinnen öffentliche Lernräume am Campus im Gegensatz zum heimischen Schreibtisch an Bedeutung. Studierende suchen Lernorte gern gemeinsam als Gruppe auf. [2]

Gruppenarbeit
Quelle: https://unsplash.com/@priscilladupreez

Bibliotheken können auf diesen Trend reagieren, indem sie Lernumgebungen und Serviceleistungen zur Verfügung stellen, die moderne Arbeitsweisen ermöglichen. Dabei müssen grundlegende Bedingungen für eine gute Lernumgebung beachtet werden. Darüber hinaus sollten Bibliotheken neue Ideen und Konzepte wagen. Sie dürfen attraktiv sein, überraschen und im Gedächtnis bleiben!

Dieser Beitrag stellt, neben grundlegenden gestalterischen Aspekten für Lernräume, zwei für Bibliotheken vielversprechende Ideen zum Thema modernes Lernen vor.

Inhalt

Was macht attraktiven Lernraum aus?

Ansprechenden Lernraum zeichnet vor allem eines aus: die Bedürfnisse der Nutzer*innen stehen im Mittelpunkt!

Weil die Bereitstellung geeigneter Möbel, Beleuchtung, Hard- und Software sowie WLAN dabei genauso wichtig ist, wie eine angenehme Atmosphäre, entwickeln sich moderne Bibliotheken zu einer Art Mischform aus öffentlichem Arbeitsraum und Wohnzimmer.[3] Neben dieser essentiellen Ausstattung benötigt es eine lernfördernde Umgebung. So kann ein Angebot unterschiedlicher Lernräume und -szenarien verschiedene Bedürfnisse bedienen. Neben Einzelarbeitsplätzen und Gruppenräumen verschiedener Größe und Ausstattung, ist funktionales und anpassungsfähiges Mobiliar essentiell. Es sollte dauerhaft haltbar sein und es ermöglichen, die Lernumgebung leicht an den eigenen Bedarf anzupassen. So können rollbare Wände, Tische und Whiteboards einen Gruppenraum im Raum schaffen, wenn er benötigt wird.

Darüber hinaus sollte der Lernort Bibliothek leicht zugänglich sein und eine einfache, eigenständige Orientierung im Raum ermöglichen. Zudem darf der „Wohlfühlfaktor“ nicht außer Acht gelassen werden. Eine inspirierende und motivierende Gestaltung der Räume fördert die Aufenthaltsqualität und regt gleichermaßen zum Lernen und zur Kommunikation an.[4] Für beide Zwecke können eigens gestaltete Zonen eingerichtet werden.

Hunt Library, NC State University, Lounge
Quelle: https://www.flickr.com/photos/paytonc/8758631495/ (CC BY 2.0)

Bibliotheken sollten modern und attraktiv gestaltet sein, um ihren Nutzer*innen positiv in Erinnerung zu bleiben. So werden sie zu einem Ort, den sie gern aufsuchen.

Lernerfolge durch Bewegung fördern

Zur Gestaltung erholsamer Lernpausen bieten viele moderne Bibliotheken bereits Zonen mit gemütlichen Sitzgruppen an, die zum Entspannen und zur Kommunikation einladen sollen. Pausen sind dabei besonders wichtig für die Konzentration und den Lernerfolg.[5] Diese Art der Pausengestaltung wird gern angenommen, sollte aber möglichst durch weitere Angebote ergänzt werden. Denn je angenehmer die Unterbrechung des Lernprozesses gestaltet ist, desto wahrscheinlicher ist es, dass er nicht wieder aufgenommen wird. Vielmehr zeigt sich, dass Pausen umso effektiver sind, je mehr sie sich in ihrer Tätigkeit vom Lernen unterscheiden.[6] Zudem ist bekannt, dass die durchschnittliche Dauer sitzender Tätigkeiten insbesondere bei Studierenden besonders hoch ist.[7]

Konzentration, Pause, Lernen
Quelle: https://unsplash.com/@punttim

In Bewegung kommen

Bibliotheken können die Konzentration und somit die Effizienz ihrer Nutzer*innen unterstützen, indem sie ihnen Angebote zur aktiven Pausengestaltung bieten. Stromerzeugende Tischräder können einen Beitrag zur Gesundheitsförderung der Studierenden leisten und haben zudem einen Nachhaltigkeitsaspekt. Die Möglichkeit, eine Lernpause nicht nur in Bewegung zu verbringen, sondern gleichzeitig das eigene Endgerät durch Muskelkraft mit Strom zu versorgen, macht den Bibliotheksbesuch zu einem Erlebnis. Diese Innovation kann ein positives Image der Bibliothek unterstützen.

Die Philologische Bibliothek der Freien Universität Berlin hat für Ihre Nutzer*innen ein Schreibtischfahrrad installiert, das für eine aktive Pause genutzt werden kann. Darüber hinaus erlaubt es das Arbeiten am Schreibtisch bei gleichzeitiger Bewegung: [8]

Praktischer Wissenserwerb

Wollen Bibliotheken sich auch in Zukunft als physische Orte legitimieren, benötigen sie neue Serviceleistungen rund um Wissensaneignung und -vermittlung, die nicht ausschließlich bestandsbezogen sind. Eine für wissenschaftliche Bibliotheken vielversprechende, jedoch in Deutschland bisher selten realisierte Idee, ist das Einrichten von Makerspaces. Dabei handelt es sich um Orte für praktischen und innovativen Wissenserwerb. Zunächst sind sie offene Werkstätten, die neben geeigneten Räumlichkeiten auch Geräte wie 3D-Drucker, CNC-Fräsen, Plotter oder Kleingeräte zur Produktion von Modellen und Gegenständen bieten. Insbesondere sind sie aber Orte der persönlichen Begegnung von Menschen mit unterschiedlichen Kompetenzen und Interessen. Computerspezialist*innen, Designer*innen und Bastler*innen profitieren vom gemeinsamen Wissens- und Erfahrungsaustausch. Wichtig ist, dass Bibliotheken darauf achten, diese Community in die Unternehmung Makerspace aktiv einzubinden und entsprechende Veranstaltungen und Serviceleistungen anzubieten, um einen beliebten Ort produktiver Kreativität zu schaffen.

Makerspace
Quelle: https://unsplash.com/@darya_tryfanava

Die Vorteile

Vielerorts gibt es bereits kommerzielle Makerspace-Angebote. Was sind also die Vorteile für Bibliotheksnutzerinnen? Und was hat letztlich die Bibliothek davon? Makerspaces sind als Angebot einer wissenschaftlichen Bibliothek besonders niedrigschwellig. Der Zugang ist kostenfrei oder kostengünstig. Zudem sind Universitätsbibliotheken eine für die meisten Studierenden bereits bekannte Institution. Im Gegensatz zu den innerhalb der Universität vorhandenen Werkstätten, ist sie fakultätsübergreifend. Sie richtet sich also an Studierende verschiedener Studiengänge und kann der Ort sein, an dem Netzwerke geknüpft und gemeinsame Ideen realisiert werden. Studierende, die die Bibliothek bislang nicht nutzten, können durch das Angebot eines Macerspace wohlmöglich als Nutzerinnen gewonnen werden.

Herausforderungen

Natürlich gibt es auch ein paar Herausforderungen zu beachten: Werkstätten gehen mit einem gewissen Geräuschpegel und einem regen Publikumsverkehr einher. Es muss also ein geeigneter Ort gefunden werden, damit der reguläre Bibliotheksbetrieb nicht beeinträchtigt wird. Zudem wird engagiertes Personal benötigt, das bereit ist, sich eigens in den Betrieb des Makerspace einführen zu lassen und selbst Arbeitsschutzunterweisungen und Geräteeinführungen für Nutzer*innen anzubieten. In den Stellenplänen von Bibliotheken ist diese zusätzliche Arbeit bislang nicht berücksichtigt. [9]

“Wissen kommt von Machen!” – Der Makerspace der SLUB Dresden

Die SLUB Dresden (Sächsische Landesbibliothek – Staats- und Universitätsbibliothek) hat sich diesen Herausforderungen gestellt. Ihr Makerspace hat sich mit Hilfe engagierter Mitarbeiter*innen, einem breiten Netzwerk und interessierten Nutzer*innen aus einem zunächst befristeten Projekt zu einer festen Bereicherung des Bibliotheksbetriebs entwickelt[10]:

Fazit

Bibliotheken waren, sind und bleiben Orte des Wissens. Sie verlieren nicht an Bedeutung, müssen ihr Angebot allerdings kreativ und engagiert erweitern, um attraktiv zu bleiben.

Bibliothek, Bücher, Lesen
Bibliotheken sind Orte des Wissens. Es braucht nicht nur Raum für Bücher, sondern auch für Menschen. Quelle: https://unsplash.com/@osac

Denn die Art, wie wir Wissen aufnehmen und weitergeben, verändert sich mit fortschreitender Digitalisierung. Diese Entwicklung können Bibliotheken nutzen und sich als innovative Orte positionieren, die Nutzer*innen einbeziehen und moderne Arbeitsweisen ermöglichen. Dafür sind sie besonders geeignet, denn sie sind öffentliche, niedrigschwellige Räume, an denen fachübergreifende Netzwerke entstehen können.

Es gibt verschiedene Herangehensweisen zur Gestaltung moderner Lernräume. Dieser Herausforderung begegnen Bibliotheken am besten, indem sie ihre Nutzer*innen und deren Bedürfnisse in den Fokus stellen. Sie bevorzugen einen inspirierenden, motivierenden Lernraum mit hoher Aufenthaltsqualität, an dem sie konzentriert arbeiten und ihr Wissen mit anderen teilen können.

Quellen

[1] Glitsch, Silke u.a. (2017): Arbeitsplatz- und Lernortentwicklung an der Niedersächsischen Staats- und Universitätsbibliothek Göttingen. In: Umlauf, Konrad u.a. (Hg.): Strategien für die Bibliothek als Ort. Festschrift für Petra Hauke. Berlin/Boston: De Gruyter Saur, S. 95-110

[2] Semar, Wolfgang (2014): Digitale Veränderungsprozesse: Konsequenzen für das Lern- und Kommunikationsverhalten. In: Eigenbrodt, Olaf (Hg.): Formierungen von Wissensräumen. Optionen des Zugangs zu Information und Bildung. Berlin/Boston : De Gruyter Saur (Age of Access? Grundfragen der Informationsgesellschaft, Bd. 3), S. 11-20

[3], [5] und [8]Wagner, Janet (2020): Bewegung fördert Lernen. Neue Angebote am Lernort Bibliothek dargestellt am Beispiel der Philologischen Bibliothek der Freien Universität Berlin. Bachelorarbeit. Fachhochschule Potsdam, Fachbereich Informationswissenschaften, Studiengang Bibliotheksmanagement. Potsdam

[4] Stankovic, Marina u.a. (2016): Bibliothek als architektonische Aufgabe. Von der Entwicklung der Gebäudetypologie und der Verschiebung der Schwerpunkte in der Bibliotheksarchitektur. In: Hauke, Petra (Hg.): Praxishandbuch Bibliotheksbau. Planung, Gestaltung, Betrieb. Berlin/Boston : De Gruyter Saur, S. 3-16

[6] Metzig, Werner u.a. (2020): Lernen zu lernen. Lernstrategien wirkungsvoll einsetzen. 10., überarbeitete und erweiterte Auflage. Berlin : Springer

[7] Statista (2016): Durchschnittliche Dauer von sitzenden Tätigkeiten von Personen nach Bildungsgrad. Online unter https://de.statista.com/statistik/daten/studie/588185/umfrage/durchschnittliche-dauer-von-sitzenden-taetigkeiten-von-personen-in-deutschland-nach-bildungsgrad/ [Abruf am 20.01.2021]

[9] Bonte, Achim (2017): Vorstoß in neue Wissensräume. Makerspaces im Leistungsangebot wissenschaftlicher Bibliotheken. In: Umlauf, Konrad u.a. (Hg.): Strategien für die Bibliothek als Ort. Festschrift für Petra Hauke. Berlin/Boston: De Gruyter Saur, S. 85-94

[10] Dobeleit, Daniela u.a. (2020): Steuerung und Evaluation. Geräteführerscheine am SLUB Makerspace in Dresden. In: Heinzel, Viktoria (Hg.): Lernwelt Makerspace. Perspektiven im öffentlichen und wissenschaftlichen Kontext. Berln/Boston : De Gruyter Saur, (Lernwelten), S. 101-112


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Wintersemester 2020/21, Prof. Dr.-Ing. Steinberg) entstanden. Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

Mehr Interaktivität im Kurs Content Management über h5p

h5p für CM

In den letzten Corona-Semestern konnten viele Kurse nur online angeboten werden. Dadurch sind auch im Kurs Content Management in den Studiengängen Informationsmanagement und Informationsmanagement berufsbegleitend einige Screencasts entstanden.

In einem nächsten Schritt haben wir die Screencast-Videos mit Interaktionselementen wie Wiederholungsfragen, Links, Inhaltsübersichten, Checklisten oder kleinen Quizzes über h5p ergänzt:

Inhaltsverzeichnis im Screencast-Video über h5p

Checklist mit h5p
Checkliste über h5p: Wie gut ist Ihr WordPress-Beitrag?

Im aktuellen Wintersemester 21/22 setzen wir die um h5p erweiterten Screencasts für Content Management das erste Mal aktiv in der Lehre ein und sind gespannt auf die Rückmeldung der Studierenden.

Stud.IP und h5p

Bisher fehlte uns eine zentrale Möglichkeiten der Bereitstellung von h5p-Lernmodulen, da unser Moodle diese Funktionalität nicht bietet. Die Erstellung und Bereitstellung von h5p über WordPress funktioniert zwar gut, aber ist etwas weit weg von unseren Lehrinhalten über separat notwendige WordPress-Installationen. Daher freuen wir uns über den Testbetrieb von Stud.IP seit diesem Semester an der Fakultät 3. In Stud.IP ist jetzt direkt in Veranstaltungen die Erstellung und Einbindung von h5p Lernmodulen möglich – ohne Medienbruch durch den Sprung zu einer separaten WordPress-Installation:

h5p Lernmodule in Stud.IP Veranstaltung

Austausch und Kompatibilität von h5p Lernmodulen

Die Kompatibilität und die Standardisierung von h5p Lernmodulen ist besonders hilfreich, wenn man die Lernmodule nachträglich auf verschiedene Arten bereitstellen möchte. Unabhängig davon, in welcher Umgebung h5p Lernmodule erstellt wurden (WordPress, Stud.IP, …), können sie jederzeit per Download und erneuten Upload in ein anderes System plattformübergreifend bereit gestellt und ausgetauscht werden.

Weitere h5p Lernmodule aus Studierendenprojekt

Studierende im Studiengang Informationsmanagement – berufsbegleitend widmeten sich in einem Studierendenprojekt unter Anleitung von Monika Steinberg der Konzeption und Umsetzung von h5p Lernmodulen zu bestehenden Lehrinhalten.

Im Ergebnis entstand eine Liste von möglichen h5p-Elementen und deren Anwendung sowie ein bunter Mix an Beispielen für deren Einsatz. Mehr dazu in einem Beitrag im QpLuS-IM-Blog:
h5p für interaktive Lernressourcen: Ergebnisse eines Studierendenprojekts

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

Nachhaltigkeit in Bibliotheken

 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 ist die Thematik zuletzt deutlich greifbarer geworden und findet bereits vermehrt Einzug in diversen Bibliotheken. Was genau es mit den Nachhaltigkeitszielen auf sich hat, was sie für Bibliotheken bedeuten und wie Institutionen schon mit geringem Aufwand einen Beitrag leisten können, wird im folgenden Artikel kurz vorgestellt.

Inhalt

  1. In 17 Zielen die Welt verändern – die Nachhaltigkeitsziele der Agenda 2030
  2. Relevanz und Potenzial der Ziele für Bibliotheken
  3. Vorteile eines Engagements für mehr Nachhaltigkeit
  4. Biblio2030 – Inspiration, Unterstützung, Austausch für Bibliotheken
  5. Einstiegsprojekte für den ersten Schritt in Richtung nachhaltige Bibliothek
  6. Weitere Inspirationsquellen und Hilfsmittel

In 17 Zielen die Welt verändern – die Nachhaltigkeitsziele der Agenda 2030


Ja, wir könnten jetzt was gegen den Klimawandel tun, aber wenn wir dann in 50 Jahren feststellen würden, dass sich alle Wissenschaftler doch vertan haben und es gar keine Klimaerwärmung gibt, dann hätten wir völlig ohne Grund dafür gesorgt, dass man selbst in den Städten die Luft wieder atmen kann, dass die Flüsse nicht mehr giftig sind, dass Autos weder Krach machen noch stinken und dass wir nicht mehr abhängig sind von Diktatoren und deren Ölvorkommen. Da würden wir uns schön ärgern.”

Marc-Uwe Kling, Auszug aus “Die Känguru-Apokryphen”


Die Ziele für nachhaltige Entwicklung wurden zuerst 2015 im Rahmen der „2030 Agenda“ festgelegt und dienen als Aufruf zum Handeln, um Armut zu beenden, den Planeten zu schützen und das Leben und die Perspektiven aller Menschen weltweit zu verbessern. Die Mitgliedsstaaten der Vereinten Nationen einigten sich dabei auf einen Katalog mit 17 übergeordneten Zielen aus den Bereichen der ökonomischen, ökologischen und sozialen Entwicklung, die innerhalb von 15 Jahren erreicht werden sollen. 1 2

Die Nachhaltigkeitsziele der Agenda 2030 in Kachelansicht
Ziele für nachhaltige Entwicklung (© UN Sustainable Development Goals)

Da dafür nur noch knappe 10 Jahre bleiben, rief der UN-Generalsekretär 2019 alle Bereiche der Gesellschaft dazu auf, sich für ein „Jahrzehnt des Handelns“ auf folgenden drei Ebenen zu mobilisieren:

 

Die Nachhaltigkeitsziele der Agenda 2030 und ihre Umsetzung in der Deutschen Nachhaltigkeitsstrategie

Relevanz und Potenzial der Nachhaltigkeitsziele der Agenda 2030 für Bibliotheken


“Die größte Gefahr für unseren Planeten ist der Glaube, dass jemand anderes ihn rettet.”

Robert Swan


Inwiefern spielen nun die zuvor genannten Agenda 2030 Ziele eine konkrete Rolle in und für Bibliotheken? Auf diese Frage gibt es erst einmal mehr als nur eine (gute) Antwort. Abgesehen vom universalen Appell des UN-Generalsekretärs hat sich auch Deutschland als Mitgliedstaat der UN konkret dazu verpflichtet, an ihrer Umsetzung mitzuwirken. Da scheint es nur konsequent, dass deutsche Institutionen wie Bibliotheken diese Ziele ebenso verfolgen. Sie können als zentrale öffentliche Einrichtungen für Zugang zu Information und Bildung einen wichtigen Beitrag zum Erfolg der 2030-Agenda leisten und in diesem Sinne zu einer nachhaltigen Entwicklung der Gesellschaft beitragen. 2

Ebenso werden das wachsende Interesse und Bewusstsein für die Thematik im Bibliothekswesen generell immer sichtbarer. Dies äußert sich neben den konkreten Initiativen einzelner Bibliotheken vor allem in strukturellen Neuerungen wie z.B. dem Aufstieg der IFLA-Interessensgruppe ENSULIB (Environment, Sustainability and Libraries) zur offiziellen IFLA-Sektion, der Einführung des Green Library Awards oder der Gründung des Netzwerk Grüne Bibliothek.
Im Kontext der Nachhaltigkeitsziele geht es oft vorrangig darum, auf welche Weise einzelne Institutionen zu ihrer Umsetzung beitragen können. Insbesondere Bibliotheken können nicht nur vieles zur Erreichung der Ziele beitragen, sie können auch selbst von diesem Prozess profitieren. 3 4 5

Tatsächlich kann das Engagement in Sachen Nachhaltigkeit ebenso nicht zu unterschätzende positive Nebeneffekte für Bibliotheken haben. Wird dieses Engagement auch gut wahrnehmbar kommuniziert, können sich infolgedessen zahlreiche positive Auswirkungen ergeben:
die Verbesserung in der öffentlichen Wahrnehmung, Vernetzung und Kooperationen mit Einrichtungen vor Ort, überregionale Vernetzung und Austausch mit anderen Bibliotheken, ebenso wie eine Grundlage für erfolgreiche Lobbyarbeit etc. – um nur ein paar zu nennen.

“Macht doch alles nur mehr Arbeit?” Vorteile eines Engagements im Sinne der Nachhaltigkeitsziele der Agenda 2030


„Das Beste, was der Stadtbibliothek seit langem passiert ist“

Mitarbeiterin der Stadtbibliothek Heilbronn über das Nachhaltigkeitsprojekt “Treffpunkt Deutsch”


Der 2016 entstandene „Treffpunkt Deutsch“ der Stadtbibliothek Heilbronn hatte beispielsweise zum Ziel, freiwillige Mentor_innen und Menschen, die Deutsch lernen möchten, zusammenzubringen. Dies hat er auch sehr erfolgreich geschafft, darüber hinaus aber auch einen lebendigen Treffpunkt für Interessierte, einen Ort für regen Kulturaustausch und nicht zuletzt ein neues Stück Heimat geschaffen. Das zeigt, dass Projekte im Sinne der Nachhaltigkeitsziele auch dabei helfen können, das Potenzial der eigenen Einrichtung neu zu evaluieren. 6

“Treffpunkt Deutsch” der Stadtbibliothek Heilbronn (© Stadtbibliothek Heilbronn)

Grundsätzlich sind Bibliotheken durch Ihre Angebote und Dienstleistungen bereits in ihrem Kern nachhaltige Organisationen, werden aber selten primär als solche wahrgenommen. Diese Eigenschaft kann jedoch im Rahmen des Engagements im Sinne der Agenda 2030 besonders gut sichtbar gemacht und verstärkt werden. Ein Hinweis darauf, dass Bibliotheken und ihr Potenzial noch viel zu wenig im politischen Bewusstsein verankert sind, zeigt unter anderem eine Stellungnahme des Deutschen Bibliotheksverbandes (dbv). Anlässlich des Neuauflagenentwurfs der Deutschen Nachhaltigkeitsstrategie, in dem Bibliotheken keine Erwähnung fanden, macht der dbv darin gezielt darauf aufmerksam, dass Bibliotheken bei der Umsetzung der Agenda-Ziele eine wichtige Rolle spielen können. Diese Aussage wird durch konkrete Beispiele für viele der 17 Nachhaltigkeitsziele veranschaulicht (siehe hierzu interaktive Grafik). 7 8

Biblio2030 – Inspiration, Unterstützung und Austausch für Bibliotheken

Nachhaltigkeit kann in Bibliotheken auf viele verschiedene Weisen umgesetzt werden – so viele, dass es zunächst sogar überfordernd wirken kann. Unterstützung und Orientierung bietet dabei unter anderem das Projekt Biblio2030. Die vom dbv betreute Webseite versammelt in ihrer Beispielsammlung hierzu diverse Best Practice Beispiele aus Nachhaltigkeitsprojekten von deutschsprachigen Bibliotheken jeder Ausrichtung und Größe. Dazu gibt es dort auch ein Upload-Portal, um eigene Projekte der Sammlung hinzuzufügen. Als kleinen Einblick in die Projektvielfalt im Folgenden eine Auswahl zu einigen Zielen9:

 

Auf der Biblio2030-Seite haben Bibliotheken außerdem Zugriff auf zahlreiche Materialien zum Download bzw. zur Bestellung, um auf die Agenda2030 und ihre Projekte aufmerksam zu machen. 10

Die Nachhaltigkeitsziele der Agenda 2030 - Beispiel für Nutzung der Biblio2030-Materialien Bücherei Geldern
Beispiel für Nutzung der Biblio2030-Materialien (© Bücherei Geldern)

Man muss nicht gleich die Welt retten – Kleine Einstiegsprojekte für einen ersten Schritt in Richtung nachhaltige Bibliothek

Auch wenn Biblio2030 und ähnliche Plattformen dafür sorgen, dass man nicht immer gleich das Rad neu erfinden muss, stehen nicht jeder Bibliothek die Ressourcen für umfassendere Projekte wie die Einrichtung von Makerspaces, Repaircafés oder ähnlichem zur Verfügung. Denn aller Anfang ist bekanntlich schwer – womit soll man beginnen und mit welchen Mitteln das Ganze umsetzen?

Im Folgenden dazu einige Beispiele, die auch mit geringen Ressourcen in der eigenen Bibliothek umgesetzt werden können:

Schwer zu tragen? Plastiktüten wiederverwenden!
Oft werden Plastiktüten nach ihrer Verwendung weggeworfen. In der Stadtbücherei Walldorf gibt es daher ein Fach, in dem Tüten gesammelt und für andere zur Nutzung weitergegeben werden.

Ganz auf Plastiktüten verzichten – Die Bio-Baumwoll-LeseStoffTasche zum Ausleihen!
Für die robusten Stofftaschen aus Bio-Baumwolle der Volksbücherei Fürth sind auch die größten Bücherstapel kein Problem. Turnbeutel und Tragetasche gibt es für je 2€ Leihgebühr – wenn die Tasche nicht mehr benötigt wird, kann sie wieder abgegeben werden und man bekommt die 2€ zurück.

Bio-Baumwoll-LeseStoffTasche © Städtische Volksbücherei Fürth

Wer frisst hier den Strom? Energiesparpakete verleihen!
In vielen Haushalten lässt sich einiges an Strom sparen, Elektrogeräte verbrauchen nämlich nicht nur in Benutzung, sondern auch im „Stand-by-Modus“ viel Energie. Wie viel genau, das kann man mit dem Energiesparpaket testen, dass Bibliotheken kostenlos beim Umweltbundesamt anfordern können.

Was grünt und blüht denn da? Saattauschbörse in der Bibliothek!
Saatgut aller Art kann in der Stadtbibliothek Alzenau abgegeben oder entdeckt werden – egal ob Blumen, Gemüse, Obst, Sprossen oder Kräuter, alles findet einen Platz in der Saatgut-Tauschbörse. Die Bibliothek stellt dazu auch vorgebastelte Tütchen bereit, die mit Sortennamen, Säh- und Erntezeitraum beschriftet werden können.

Babysteps in Richtung „Bibliothek der Dinge“ – Regenschirme zum Ausleihen!
Heute muss man nicht mehr alles besitzen, am besten sogar mehrfach. Wenn es regnet, geht man als Bibliothekskunde fix in die nächstgelegene Mülheimer Bibliothek und leiht sich kostenfrei einen Regenschirm aus!

Weitere Inspirationsquellen und Hilfsmittel

Mit den zuvor genannten Beispielen sollte ein erster Schritt in Richtung Nachhaltigkeit für alle möglich sein. Für Interessierte hier abschließend noch eine Liste mit weiteren Anlaufstellen für Informationen, Hilfestellung und Inspiration:

 Die Agenda 2030 und die Bibliothekswelt
Themenseite des Deutschen Bibliotheksverbands

 Bibliotheken und Nachhaltigkeit
Best Practice-Broschüre des Deutschen Bibliotheksverbands

Netzwerk Grüne Bibliothek
Initiative zur Vernetzung von Institutionen und zur Bündelung von Informationen über gezielten Einsatz für die 17 Nachhaltigkeitsziele in Bibliotheken

 17 Ziele als Herausforderung und Chance für Bibliotheken
Online-Seminar im Rahmen von #vBIB20

IFLA Library Map of the World
Interaktive Weltkarte, die u.a. Informationen über das Erreichen der Nachhaltigkeitsziele in Bibliotheken weltweit verzeichnet

Quellen

1 United Nations (2020): The Sustainable Development Agenda. Online unter https://www.un.org/sustainabledevelopment/development-agenda/ [Abruf am 31.01.2021]

2 Deutscher Bibliotheksverband e.V. (dbv) (2020): Die 2030 Agenda für weltweite Entwicklung. Online unter https://www.bibliotheksverband.de/dbv/themen/agenda-2030.html [Abruf am 31.01.2021]

3 International Federation of Library Associations (IFLA) (2020): ENSULIB granted permission in becoming an IFLA Section. Online unter https://www.ifla.org/node/93187 [Abruf am 31.01.2021]

4 International Federation of Library Associations (IFLA) (2021): IFLA Green Library Award. Online unter https://www.ifla.org/node/10159 [Abruf am 31.01.2021]

5 Netzwerk Grüne Bibliothek (2021): Herzlich willkommen im Netzwerk Grüne Bibliothek. Online unter https://www.netzwerk-gruene-bibliothek.de/ [Abruf am 31.01.2021]

6 Deutscher Bibliotheksverband e.V. (dbv): Treffpunkt Deutsch in der Heilbronner Stadtbibliothek. Online unter https://www.biblio2030.de/treffpunkt-deutsch-stadtbibliothek-heilbronn/ [Abruf am 31.01.2021]

7 Deutscher Bibliotheksverband e.V. (dbv) (2016): Deutsche Nachhaltigkeitsstrategie der Bundesregierung-der Beitrag der Bibliotheken zur Umsetzung der Agenda 2030 der Vereinten Nationen.Stellungnahme des Deutschen Bibliotheksverbandes (dbv). Online unter https://www.bibliotheksverband.de/fileadmin/user_upload/DBV/positionen/2016_07_31_Stellungnahme_Nachhaltigkeit_endg.pdf [Abruf am 31.01.2021]

8 Die Bundesregierung (2016): Deutsche Nachhaltigkeitsstrategie. Neuauflage 2016. Online unter https://www.bundesregierung.de/resource/blob/975274/214552/bc6c3313d40dd1da060732d16310677a/2016-05-31-download-nachhaltigkeitsstrategie-entwurf-data.pdf?download=1 [Abruf am 31.01.2021]

9 Deutscher Bibliotheksverband e.V. (dbv): Beispiele für nachhaltige Bibliotheksarbeit. Online unter https://www.biblio2030.de/beispielsammlung/ [Abruf am 31.01.2021]

10 Deutscher Bibliotheksverband e.V. (dbv): Materialien. Online unter https://www.biblio2030.de/materialien/ [Abruf am 31.01.2021]