Innovation in Bibliotheken: Deichman Bibliothek Oslo

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]

Seiten: 1 2 3 4

26. November 202115. Juni 2023

Makerspaces: Eine Aufgabe für Öffentliche Bibliotheken?

Autorin: Janina Gerten

Ob das Konzept des Makerspace in das Aufgabenportfolio von Öffentlichen Bibliotheken passt, darüber herrschen unterschiedliche Meinungen. Was ein Makerspace überhaupt ist und welchen Mehrwert er Öffentlichen Bibliotheken bieten kann, soll anhand der „MachBar“ der Stadtbibliothek Duisburg in diesem Artikel verdeutlicht werden.

Inhalt

„Öffentliche Bibliotheken waren in früheren Zeiten Ausleihstationen für Bücher und audiovisuelle Medien. Dieses Rollenverständnis hat sich in den vergangenen zwanzig Jahren erheblich verändert. Zum einen haben das Internet und der starke Ausbau der digital verfügbaren Medien das Spektrum der Nutzung, einschließlich der Erschließung von Informationen und Wissen, qualitativ erweitert.“

Dr. Jan-Pieter Barbian, Direktor der Stadtbibliothek Duisburg

Maker und Makerspaces

Die sogenannte Maker-Bewegung, deren Anfänge bereits 25 Jahre zurück liegt, bildet den Ursprung der heutigen Makerspaces. Der Grundgedanke des Teilens stand bereits damals im Vordergrund. Diese Philosophie greifen Makerspaces wieder auf, indem sie einen öffentlich zugänglichen Raum schaffen und entsprechende Ressourcen zur Verfügung stellen. Hier können Menschen zusammenkommen, um etwas zu „machen“ und ihre Ideen mithilfe von analogen sowie digitalen Werkzeugen umzusetzen.⁵Ebenfalls der Aspekt der Nachhaltigkeit spielt dabei eine wichtige Rolle, da oftmals gebrauchte Materialien wiederverwendet und so Ressourcen geschont werden. Dabei geht es jedoch nicht nur um die gemeinschaftliche Nutzung von Ressourcen, sondern auch um den Austausch von Wissen, Kompetenzen und Ideen sowie gemeinsam Neues auszuprobieren und zu entwickeln.⁴ Die Stadtbibliothek Duisburg hat es für sich wie folgt definiert:

„Die MachBar soll dem gemeinsamen Arbeiten in einer kreativen Umgebung dienen und Hemmschwellen gegenüber neuen Technologien abbauen. Dafür stellen wir unseren Nutzerinnen und Nutzern in einem offenen Raum eine moderne technische Ausstattung zur Verfügung. Sie können neue Techniken ausprobieren, eigene Projekte verwirklichen, Erfahrungen austauschen und Gleichgesinnte treffen.“

Seiten: 1 2 3

18. November 202115. Juni 2023

Tutorial: Ein 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.

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

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.

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.

17. November 202115. Juni 2023

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
Aufbau
Der Code
JavaScript/jQuery
Besonderheiten
Schwierigkeiten

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:

Start-Szene (div class=“ story_start_scene“)
Bobby im Wohnzimmer (div-class= „dog_in_livingroom_scene“)
Bobby im Park (div class=“background_image_park_day“)
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.

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.

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.

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

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.

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.

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.

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.
Die Hintergrundmusik wird manchmal in Google Chrome nicht abgespielt. Daher wird empfohlen sich die Animation in Microsoft Edge anzuschauen.

15. Juli 202115. Juli 2021

Die Keywordrecherche: Der Grundstein des Online Marketings

Autor*in: Linda Khorami

Am Anfang steht die Keywordrecherche. Ob Blog, Onlineshop oder Unternehmenswebsite, die Onlinepräsenz spielt heutzutage eine immer größere Rolle und ist nicht mehr wegzudenken. ^[1] Du möchtest auch mit deiner Präsenz im Netz überzeugen und so viele Menschen wie möglich erreichen? Dann ist die Keywordrecherche genau das Richtige für dich! Finde heraus, worum es sich hierbei handelt und wieso sie so wichtig ist.

Keyword Recherche Titelbild — Quelle: Search Engine Land

Auf diese Infos kannst du dich freuen:

Was ist ein Keyword?

Im Vordergrund der Recherche stehen sogenannte Keywords, aber was genau ist ein Keyword?

Im Deutschen steht der Begriff Keyword für Such- und Schlüsselbegriff sowie Schlag- und Schlüsselwort und wird bei der Recherche im Internet in das Suchfeld einer Suchmaschine eingegeben. ^[2] Damit die passenden Ergebnisse für deine Suchanfrage rausgefiltert werden, gleicht die Suchmaschine die eingegebenen Keywords mit den Seiten aus dem Index ab. ^[3]

Arten von Keywords

Bevor du dich mit der Recherche befasst, ist es wichtig, zwischen den verschiedenen Arten und Nutzerintentionen von Keywords unterscheiden zu können. Im Folgenden findest du die wichtigsten Varianten. ^[4]

Fokus Keyword

Das Fokus Keyword wird von dir definiert und ist der Hauptbegriff, für den deine jeweilige Seite in den Suchergebnissen ranken soll. ^[5]

Nischen Keyword

Von einem Nischen Keyword ist die Rede, wenn ein Suchbegriff ein niedrigeres Suchvolumen, aber auch wenig Wettbewerb hat. Neben dem Fokus Keyword werden auch Nischenkeywords verwendet, da es hier einfacher ist mit diesen Suchbegriffen zu ranken. ^[6]

Brand Keyword

Von einem Brand Keyword ist die Rede, wenn du mit deiner Suchanfrage nach einer bestimmten Marke suchst. ^[7]

Google-Suche: Vans — Bildschirmfoto – Brand Keyword

Informationsorientiertes Keyword

Wenn nach einer bestimmten Information gesucht wird, werden informationsorientierte Keywords verwendet. ^[8]

Google-Suche: Was ist ein Podcast? — Bildschirmfoto – Informationsorientiertes Keyword

Navigationsorientiertes Keyword

Keywords sind navigationsorientiert, wenn du mit deiner Anfrage gezielt nach einer Seite suchst. ^[9]

Google-Suche: Vans.de — Bildschirmfoto – Navigationsorientiertes Keyword

Transaktionsorientiertes Keyword

Wie der Name bereits verrät, sind transaktionsorientierte Keywords Suchbegriffe, die das Durchführen einer Transaktion zum Ziel haben. ^[10]

Google-Suche: Schuhe kaufen — Bildschirmfoto – Transaktionsorientiertes Keyword

Compound Keyword

Ein Compound Keyword ist gemeint, wenn du mit deiner Eingabe mehrere Nutzerintentionen erfüllst. Schauen wir uns folgende Suchanfrage an:

Google-Suche: Vans old skool kaufen — Bildschirmfoto – Compound Keyword

Hier suchen wir nicht nur nach einer bestimmten Marke (Brand Keyword), sondern auch nach einer Möglichkeit, den Schuh zu kaufen (transaktionsorientiertes Keyword). ^[11]

Keywords und ihre Wortlänge

Keywords können zudem auch in ihrer Wortanzahl unterschieden werden. Hierbei unterscheiden wir zwischen Short-, Mid- und Long Tail Keywords.

Short Tail Keyword

Das Short Tail Keyword besteht lediglich aus ein oder zwei Suchbegriffen. Diese haben in der Regel ein hohes Suchvolumen. Aufgrund der Wortanzahl handelt es sich bei den Suchergebnissen eher um unspezifische Treffer. ^[12]

Mid Tail Keyword

Eine weitere Variante ist das Mid Tail Keyword, welches aus 2 bis 3 Wörtern bestehen kann. Hiermit können Suchergebnisse bereits etwas konkretisiert werden. ^[13]

Long Tail Keyword

Beim Long Tail Keyword handelt es sich um die spezifischste Suchanfrage. Hier werden Phrasen mit mehreren Wörtern verwendet. ^[14]

Was ist eine Keywordrecherche?

Bei der Keywordrecherche handelt es sich um eine Methode, mit der du herausfinden kannst, welche Suchanfragen für dich, deinen Kunden oder für deine Zielgruppe wichtig sein können. Zu beachten ist hier, welche Keywords am meisten gesucht werden und welche Nutzerintention diese haben, denn anhand dieser Informationen kannst du deine Website sinnvoll optimieren und weiter ausbauen. Die Keywordrecherche ist der erste und wichtigste Schritt für dein Optimierungsvorhaben und sollte daher fester Bestandteil deiner Arbeit sein. ^[15]

Dabei kann dir die Recherche helfen

Die Recherche von Keywords ist für den Erfolg einer Website von großer Bedeutung und daher ein fester Bestandteil des Online-Marketings. Du fragst dich trotzdem wieso du dich an einer Recherche versuchen solltest? Hier findest du meine Top 4 Gründe:

1. Do it for the Blog!

Mit Hilfe der Recherche kann auch die Themenfindung für deinen Blog deutlich vereinfacht werden. Mit der Keywordrecherche kannst du herausfinden wonach deine Zielgruppe am meisten sucht. Schreibe deinen Blogbeitrag und pflege dabei Keywords ein. Starte mit dem Fokus Keyword und füge anschließend passende Nischenkeywords hinzu.

Achtung: Keywords sollten nicht nur verwendet werden, weil sie ein hohes Suchvolumen haben. Die Chancen auf ein gutes Ranking sind hier eher gering, da auch weitere Einflussfaktoren wie der Wettbewerb eine Rolle spielen. Trau dich ruhig Keywords mit etwas weniger Suchvolumen zu nutzen. Eine weitere Alternative wären Long Tail Keywords.^[16]

2. Werde dir über den Markt bewusst

Die Keywordrecherche hilft dir dabei den Markt besser kennenzulernen und zu verstehen, denn durch diese Methode können unter anderem Probleme und Ängste deiner Kunden offengelegt, neue Kunden dazugewonnen, Mitbewerber analysiert oder neue Märkte erschlossen werden.^[17]

3. Für mehr Buzz: Advertising in Suchmaschinen

Falls du Interesse an der Suchmaschinenwerbung (SEA) hast, wird dir die Recherche auch hier helfen, eine erfolgreiche Ads Kampagne auf die Beine zu stellen. Kampagnen mit den richtigen Keywords haben eine größere Reichweite und bringen dir zudem mehr Traffic.^[18]

4. Gib deiner Seite den letzten Schliff

Unabhängig davon, ob du einen Blog, Onlineshop oder einer Unternehmensseite führst, durch die Recherche kannst du wertvolle Erkenntnisse gewinnen, um deine Seite zu optimieren. Je besser deine Inhalte sind, desto wahrscheinlicher ist es, dass deine Seite gefunden wird!

Tipp: Setzte dich mit deinen Produkten oder deinen Dienstleistungen auseinander und schaue welche Suchbegriffe genutzt werden. Hier ist dein Verstand gefragt! ^[19]

Do it yourself!

Du bist neugierig geworden? Dann probier es einfach mal aus! Einen genauen Leitfaden findest du in diesem Video.

Hier findest du eine Übersicht der verwendeten Online-Tools aus dem Video sowie einige Alternativen:

Fazit

Die Keywordrecherche ist ein unverzichtbares Werkzeug im Online-Marketing und ist das A und O, wenn du deine Seite optimieren möchtest. Schöpfe das volle Potenzial deiner Seite aus, schreibe relevante Blogbeiträge, lerne den Markt und deine Kunden besser kennen oder plane eine erfolgreiche Ads Kampagne. Mit dieser Methode gelingt es dir bestimmt!

Quellen

¹ vgl. cituro: Warum es so wichtig ist, online präsent zu sein. Online unter https://www.cituro.com/blog/online-auftritt [Abruf am 01.06.2020]

² vgl. Seo-Küche: Was ist ein Keyword. Online unter https://www.seo-kueche.de/lexikon/keyword/ [Abruf am 15.05.2020]

³ vgl. Ryte Wiki: Keyword. Online unter https://de.ryte.com/wiki/Keyword [Abruf am 15.05.2020]

⁴vgl. Seo-Küche: Was ist ein Keyword. Online unter https://www.seo-kueche.de/lexikon/keyword/ [Abruf am 15.05.2020]

⁵ vgl. ebd.

⁶ vgl. ebd.

⁷ vgl. Ryte Wiki: Keyword. Online unter https://de.ryte.com/wiki/Keyword [Abruf am 15.05.2020]

⁸ vgl. aufgesang(2020):Übersicht: Suchintention, Search Intent & Nutzerintention (Premium). Online unter https://www.sem-deutschland.de/blog/keywords-suchintention/ [Abruf am 15.05.2020]

⁹ vgl. ebd.

¹⁰ vgl. ebd.

¹¹ vgl. ebd.

¹²vgl. Alpar, Andre; Koczy, Markus; Metzen; Maik (2015): SEO – Strategie, Taktik und Technik: Online-Marketing mittels effektiver Suchmaschinenoptimierung S. 142

¹³vgl. ebd. S. 143

¹⁴ vgl. ebd. S. 143

¹⁵ vgl. SEMrush: Keyword-Recherche für SEO 2020 – der große Leitfaden. Online unter https://de.semrush.com/blog/keyword-recherche-seo-2020-leitfaden/#header2 [Abruf am 20.05.2020]

¹⁶ vgl. Blogmojo: Keywordrecherche. Online unter https://www.blogmojo.de/keyword-recherche/ [Abruf am 20.05.2020]

¹⁷ vgl. ebd

¹⁸ vgl. ebd

¹⁹ vgl. ebd

Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

25. März 202126. November 2021

Bibliotheken im digitalen Wandel: Von der Buchkarte zum digitalen Nutzerkonto

Autorinnen: Anna Pläp und Tamara Schaufler

Bibliotheken befinden sich im digitalen Wandel – in aktuellen Zeiten von Corona mehr denn je. Dass viele Publikationen online verfügbar sind, wir unsere Medien am Verbuchungsautomaten selbst ausleihen können und diese über das Internet mit ein paar Klicks verlängern, ist für viele Bibliotheksnutzer:innen der ganz normale Alltag. So wird der digitale Wandel in Bibliotheken meist mit Zukunftsvisionen verbunden. Doch wie viel Digitalisierung von Bibliotheksdiensten gab es in den vergangenen Jahr(zehnt)en bereits, und wie sah es eigentlich früher aus? ^[1]

Inhaltsverzeichnis

Buchkarten und Katalogkarteien – konventionelle Ausleihverfahren

Manch eine:r erinnert sich noch daran: bevor digitale Ausleihsysteme Einzug in die Bibliothekswelt erhalten haben, gestaltete sich das Ausleihverfahren analog. Dies war zum Teil mit erheblichem Aufwand verbunden.

Hierzu gab es verschiedene Vorgehensweisen:

Die Buchkarte

Jedes ausleihbare Buch im Bestand der Bibliothek hatte eine Buchtasche an der vorderen oder hinteren Innenseite des Buchdeckels eingeklebt. Darin befand sich eine Buchkarte, auf der Signatur, Verfasser:in und Titel des Buches vermerkt waren. Ein Großteil der Karte war frei für die Eintragung der Nutzernummer und ggf. Fristdaten des Entleihenden. Wollte man es ausleihen, ging man zur Leihstelle der Bibliothek, wo durch eine:n Mitarbeiter:in die Nutzernummer und teilweise der Name der entleihenden Person auf die Buchkarte eingetragen wurde. Diese wurde anschließend nach Rückgabedatum in die sogenannte Fristkartei einsortiert. Auf dem Vorsatzblatt oder dem Rückcover des Buches gab es ein Fristblatt, worauf das Rückgabedatum gestempelt wurde. ^[2]

Für die Bibliotheksmitarbeiter:innen ergab sich somit der Aufwand, die Fristkartei regelmäßig manuell zu überprüfen. Waren Leihfristen überschritten, haben sie die Mahngebühren manuell erstellt. Verlängerungswünsche musste man als Kund:in für jedes Buch persönlich vortragen, um die Leihfrist anpassen zu lassen.

Leihscheine

Für die Ausleihe eines Buches hat der Entleihende einen Leihschein ausgefüllt. Dieser bestand in der Regel aus drei Teilen, in einigen Bibliotheken fand er zweiteilig Anwendung. Der erste Abschnitt (Stammabschnitt) enthielt die Daten des Bestellenden sowie Titel und Verfasser:in des Buches. Die beiden weiteren Abschnitte, der Kupon und der Löschabschnitt enthielten die Signatur des Buches und die Benutzernummer des Entleihenden. Bei zweiteiligem Leihschein entfiel der Löschabschnitt.

In der Leihstelle der Bibliothek gab es zwei Karteien: die Benutzerkartei und die Kuponkartei. Die Benutzerkartei war nach Namen oder Benutzernummer aufgestellt. Hier wurden der Stammabschnitt und der Löschabschnitt, gestempelt mit der Leihfrist, einsortiert. Die Kuponkartei war nach Signaturen aufgestellt, sodass anhand dieser festgestellt werden konnte, bei welchem Entleihenden sich ein bestimmtes Buch befindet.

Der Löschabschnitt kam bei der Rückgabe des Buches zum Einsatz. Anhand dieses Abschnitts wurde der Kupon aus der Kuponkartei gezogen. Den Stammabschnitt erhielt der Entleihende des Buches als Rückgabequittung.

Gab es keinen Löschabschnitt, wurde der Kupon anhand der Bücher selbst gezogen. Mitunter gab es keine Kuponkartei, folglich verblieb der Kupon als Repräsentant im Regal an der jeweiligen Stelle des Buches. ^[3]

Kartenkataloge

Erste Kartenkataloge (auch Zettelkataloge genannt) mit einfachsten Mitteln gab es bereits gegen Ende des 16. Jahrhunderts. Kartenkataloge, wie wir sie heute teilweise noch kennen, gab es seit Anfang der 1930er Jahre. ^[4]

Es gab teilweise mehrere Kartenschränke, in denen für jedes Buch im Bestand der Bibliothek eine Karte mit den bibliografischen Angaben lag. Diese wurde mit Hilfe einer Schreibmaschine angefertigt und teilweise handschriftlich ergänzt. Für die Recherche darin konnte nach Verfasser:in, Titel, Schlagwort, Standort (=Signatur) oder Regionen gesucht werden. Natürlich gab es für jede dieser Optionen einen eigenen Kartenschrank mit entsprechenden Karten. Für ein Buch gab es also mehrere Karten.

Viele Bibliotheken haben ihre Kartenkataloge digitalisiert, sodass darin weiterhin nach Altbestand gesucht werden kann. Zwar sind die Daten zum Teil in digitale Datenbanken eingespielt worden, aufgrund der Vielzahl an Datensätzen jedoch nicht immer vollständig. Beispiele (anklicken, um auf die entsprechende Website zu kommen):

Kartenkatalog der ZBW

Kartenkataloge des Hauses Berliner Stadtbibliothek

Seiten: 1 2

4. März 2021

Durch guten Content auf Platz 1 im Google-Ranking?

Autor*in: Vivien Hirschberger

Frage: Versteht Google meine Inhalte?
Antwort: Nein, noch nicht, aber das lässt sich ändern! Ich zeige dir wie.

Schritt für Schritt zum Ziel

Was ist das Ziel?
Warum sollte ich meine Inhalte für Google optimieren?
Bilder, Texte und Videos aus SEO-Sicht
Bilder optimieren
Suchmaschinenoptimierte Texte
Videos sind nicht gleich Videos
Content Marketing – eine moderne Disziplin

Was ist das Ziel?

Auf der Website befinden sich…
…Großartige, Originelle, Ordentliche, Greifbare, Leserliche Ergebnisse!

Und wie erreiche ich dieses?

Indem du deine Inhalte aus SEO-Sicht optimierst! Die nächsten Schritte erklären dir kurz und knapp, was du in Bezug auf deinen Content machen kannst, damit deine Website bei Google eine gute Bewertung erhält. Kommen wir zum Grundlegenden.

Warum sollte ich meine Inhalte für Google optimieren?

Durch Content an die Spitze — Der Weg zu einem besseren Ranking bei Google.

Zuallererst ist es wichtig, dass du den Grund für die Optimierung deiner Ergebnisse verstehst. Siehst du den freundlich lächelnden Smiley? Das bist du. Du hast eine Website, die mit Inhalten gefüllt werden muss. Der Begriff „Inhalt“ ist jedoch sehr breit aufgestellt. Also kommen wir zur ersten eigentlichen Frage – welche Inhalte gibt es?

Content über Content

Wie du sicher schon bemerkt hast, wird der Inhalt einer Website meistens auch „Content“ genannt. Hinter diesem Begriff verstecken sich allerhand Ergebnisse, die du auf deiner Website veröffentlichen kannst, um deine jeweilige Zielgruppe anzusprechen.

Jede dieser Inhaltsformen bringt besondere Anforderungen mit sich. Im nächsten Schritt erfährst du genauer, was du bei Bildern, Texten und Videos machen kannst, damit Google sagt: „Deine Website hat tolle Inhalte, sie bekommt den ersten Platz!“^[1]

Bilder, Texte und Videos aus SEO-Sicht

Selbstverständlich gibt es außer Bildern, Texten und Videos noch weitere Inhalte, die du auf deiner Website platzieren kannst. Bei jeglichem Content ist es allerdings wichtig, dass du darauf achtest, dass dieser den Nutzern einen Mehrwert bietet. Das erreichst du im Allgemeinen, wenn der Inhalt einzigartig und auf die jeweilige Zielgruppe ausgerichtet ist. Dabei soll er bestenfalls zu Interaktionen, wie dem Klicken auf Buttons, Teilen oder Liken von Beiträgen oder dem Ausfüllen des Kontaktformulars führen^[2]. Damit du dies in Bezug auf Texte, Bilder und Videos erreichst, gehe ich darauf nun detailliert ein.

Bilder optimieren

Es ist wichtig, dass du Bilder auf deiner Website nutzt, da diese zum einen die Optik deiner Seite sehr aufwerten, aber auch wichtige Informationen an den Nutzer bringen können. Das Ranking von bebilderten Websites ist einfach besser.

Dateiformat & Dateigröße anpassen

In Bezug auf die Ladezeit deiner Website rate ich dir, auf Dateigröße und dennoch gute Qualität der Bilder zu achten. Dazu solltest du hochauflösende Bilder ggf. komprimieren und gängige Dateiformate nutzen, wie:

Richtige Datei-Metadaten nutzen

Wie Google den Inhalt deines Bildes erkennt? Durch den Dateinamen! Deshalb bitte das Motiv immer als Name verwenden und nicht einen Platzhalter, wie „Bild1“. Trenne mehrere Wörter dabei mit Bindestrichen (keine Unterstriche verwenden!). Ein letzter Tipp zum Dateinamen – vermeide Großbuchstaben, Sonderzeichen und Umlaute.

Bei der Festlegung des Alt- und Title-Tags gibt es allerdings ebenfalls SEO-Möglichkeiten, du du nutzen solltest. Beim Title-Tag bitte den Dateinamen des Bildes verwenden, da Google dadurch einen Blick in den Bildinhalt erlangt. Den Title-Tag kann der Nutzer sehen, indem er mit der Maus über das Bild fährt.

Der Alt-Tag hingegen erscheint dem User, wenn das Bild nicht angezeigt werden kann. Zudem nutzen Programme diesen, um den Inhalt für Sehbehinderte zu umschreiben. Der Tag ist im Allgemeinen dazu da, das Bild thematisch zu beschreiben, sodass Google es einordnen kann. Dabei kannst du zum Beispiel Synonyme gut unterbringen.

Kontext & Thematik

Dein Bild sollte thematisch immer zum restlichen Inhalt deiner Website passen, da Google, wie zuvor erwähnt, den Bildinhalt erkennen kann und das bei dem Ranking der gesamten Seite berücksichtigt. Bei der Bildposition ist es von großer Bedeutung, dass sich das Bild immer auf den jeweiligen Text bezieht.

schummeln geht nicht

Da die Technologien von Google immer besser werden, kann die Suchmaschine mittlerweile, unabhängig von den Metadaten, grob erkennen, was sich auf deinem Bild befindet, sodass die Angabe falscher Metadaten sehr schädlich ist. Auch ist es besser, wenn du die Bilder selbst erstellst und keine Bilder nimmst, die schon sehr viel im Web herumschwirren. Lade jedes Bild aber bitte nur einmal, sonst handelt es sich um Duplicate-Content! Nichtsdestotrotz kannst du es mehrfach einbetten, wenn es passt“^[3].

Suchmaschinenoptimierte Texte

Texte als Form des Contents — Mit Texten nach oben klettern

Auch Texte beinhalten einige Aspekte, die du beachten und optimieren solltest, damit deine Website bei Google nach oben klettern kann.

Text ist Text

Egal ob es sich bei deinem Text um eine Produktbeschreibung, einen Blogbeitrag oder Ähnlichem handelt – jeder Text sollte für die Suchmaschine aufbereitet und von dieser verstanden werden, um dein Ranking zu verbessern.

Keywords sind King

Bitte nutze Keywords in deinen Texten. Normalerweise geschieht das fast automatisch, wenn du deinen schriftlichen Content an deiner Zielgruppe ausrichtest. Allerdings solltest du Aspekte, wie die Keyworddichte besonders beachten.

Die Keyworddichte beschreibt dabei das relative Verhältnis der Keywords zum restlichen Inhalt deines Textes. Diese sollte ca. 3-4% betragen. Da die Texte in der Regel aber für die Nutzer deiner Website geschrieben werden, ist es ratsam, das Schriftstück nicht zu überladen. Beachte dabei:

Keywords in allen Abschnitten & in den Überschriften verwenden
Synonyme von Keywords nutzen
Kein zwanghafter Einsatz der Keywords
Grammatikalische Anpassungen & Füllwörter sind erlaubt
Benutzerfreundlichkeit ist das A und O!

Auf den Aufbau kommt es an

Die Hierarchie der Überschriften

Deine Überschriften müssen logisch aufgebaut sein. Dabei gibt es immer nur eine als <h1> (HTML) ausgezeichnete Headline. Anschließend kann es mehrere <h2> geben. Werden Abschnitte darunter nochmals gegliedert, kommen <h3> Überschriften zum Einsatz.

Absätze – nicht nur schick, sondern auch praktisch

Absätze sind nützlich, wenn du die Strukturierung deines Textes und die Lesbarkeit für den Nutzer verbessern möchtest. Zudem kannst du sogenannte Sprungmarken einbinden, damit der User zu bestimmten Textstellen springen kann. Diese sind möglicherweise ebenfalls Teil des Google-Suchergebnisses – eine Win-win-Situation!

Specials – Ausklappbare Elemente, Schriftart & Schriftfarbe

Nutzer lieben ausklappbare Texte, denn sie ermöglichen eine schnelle Navigation und Übersicht deiner Website. Gerade auf den mobilen Endgeräten ist das von großer Bedeutung. Wichtige Inhalte sollten jedoch gut sichtbar sein. Bezüglich der Schriftart und -farbe musst du ein paar Sachen berücksichtigen:

Herkömmliche Browser müssen deine Schriftart darstellen können
Nutzer müssen deine Schrift gut lesen können
Schriftfarbe ungleich der Hintergrundfarbe verwenden
Technisch: Den Text nicht über „display:none“ verstecken

Die Länge ist alles (oder doch nicht?)

Bezüglich der Textlänge gibt es keine allgemeine Regel. Stattdessen musst du dich in deine Zielgruppe hineinversetzen und überlegen: „Warum sucht der Nutzer danach? Möchte er Informationen bekommen oder nur eine Transaktion abschließen?“ Denn dein Text sollte so lang wie nötig, aber so kurz wie möglich sein. Das heißt, du musst die Suchanfrage deines Nutzers bestmöglich beantworten, ohne den Text künstlich durch Phrasen etc. zu verlängern ^[4].

Videos sind nicht gleich Videos

Filme als Form des Contents — Das Ranking pushen durch Videos

Videos können dein Ranking ebenfalls pushen, wenn du weißt wie. Hier ein paar Tipps und Tricks!

Das passende Storytelling

Jedes Video sollte dem Nutzer einen Mehrwert bieten, also inhaltlich wertvoll und aussagekräftig sein. Gestalte die Erzählweise spannend, damit der User lange auf dem Video verweilt, was bei Google und YouTube stark ins Ranking mit einfließt.

Videos zum Mitmachen

Feedback von den Zuschauern in Form von Kommentaren, positiven Bewertungen und Aufrufen wird von Suchmaschinen stark berücksichtigt, weil es einen Einblick in die Qualität und Relevanz des Filmchens gibt. Nichtsdestotrotz musst du dein Video auch aus technischer Sicht etwas aufpeppen, damit es gefunden und thematisch eingestuft werden kann.

Auch hier kommen Keywords zum Einsatz

Bereits zu Beginn solltest du ein Hauptkeyword festlegen. Dies ist dann der zentrale Begriff mit dem du im Ranking gegen Andere antrittst. Der Begriff sollte das Videothema dabei bestmöglich aufgreifen. Tipp: Vergleiche die Synonyme des Begriffs und achte dabei auf ihre Suchbeliebtheit, bzw. das sogenannte Suchvolumen. Das kannst du beispielsweise mit dem Google Keyword-Planner kostenfrei herausfinden.

Den richtigen Namen & Titel finden

Wie bei der Benennung anderer Inhalte ist es essenziell, dass sich der Name auf die Thematik des Videos bezieht und das Keyword enthält. Auch der Titel des Filmchens sollte das Hauptkeyword beherbergen, allerdings möglichst weit vorne, da es dann eine größere Relevanz hat. Beachte:

Der Titel sollte den Inhalt optimal benennen & Neugier wecken
Gestalte den Titel so kurz, wie möglich (max. 60 Zeichen)

Die Gestaltung der Description

Die Description, übersetzt Beschreibung, ist der begleitende Text deines Videos. Er ist am einfachsten zu indexieren und sollte aus mindestens 150-200 Zeichen bestehen. Nutze hier bitte ebenfalls Keywords! Die Reihenfolge spielt allerdings keine Rolle. Unterstütze dein Hauptkeyword durch Synonyme und Nebenkeywords, da es dadurch thematisch genauer eingeordnet werden kann.

Zusätzlich kannst du die Beschreibung dazu nutzen, um deine Ziele zu erreichen. So kannst du URLs in ihrer vollen Läge zu Beginn einbinden, damit die User diese möglichst anklicken. Auch Hashtags (#) können zum Beispiel bei YouTube eingebunden werden und dienen dann automatisch als Links zur Suchergebnisseite. Die Hashtagverwendung bringt folgende Tipps mit sich:

Die Hashtags müssen zum Inhalt passen
Nicht mehr als 15 Stück verwenden
Vor allem bei aktuellen Themen nutzen

Der erste Eindruck zählt – das Thumbnail

Das Vorschaubild muss so gestaltet sein, dass es den Nutzer neugierig auf den Inhalt des Videos macht. Dabei sollte es in Kombination mit dem Titel den Inhalt bzw. die Thematik ansprechend und bestmöglich veranschaulichen.

Videos überall

Internetseiten mit bewegtem Content erhalten bei Google eine größere Relevanz, als Seiten, die nur Text beinhalten. Deshalb bietet es sich an, eigene Videos auf der Website zu platzieren. YouTube kannst du in dem Fall gut als Hoster gebrauchen. Bestenfalls erscheinst du mit dem Video dadurch in den Google-Suchergebnissen mitsamt des Thumbnails. Folgendes kannst du zusätzlich machen:

Nutze zusätzliche Portale & Netzwerke, um Nutzer zu erreichen
Mache Werbung für dein Video über Social Media Kanäle

Es gibt auch die Möglichkeit des Erwerbs von Reichweite, indem du Geld investierst ^[5].

Content Marketing – eine moderne Disziplin

Die Contentoptimierung in Bezug auf Internetseiten ist mittlerweile ein großer Bestandteil im Arbeitsleben von vielen SEO-Spezialisten geworden. Zum Abschluss hast du hier einen kleinen Überblick, was hinter diesem riesigen Bereich genau steckt und warum das Content Marketing so wichtig ist.

Ein kleines Quiz – teste dich!

Viel Erfolg!

Ich hoffe, dass du mit Hilfe von diesem Beitrag deinem Traum, ganz oben in den Suchergebnissen bei Google zu sein, ein Stückchen näher gekommen bist. Natürlich gibt es keinen goldenen Weg, da sich Technologien fortwährend weiterentwickeln und verändern. Doch hab Geduld, die Arbeit lohnt sich!

Quellen

¹ Vgl. SEO-Küche: Was ist Content? Online unter https://www.seo-kueche.de/lexikon/content/ [Abruf 20.05.2020]

² Vgl. textbroker: Suchmaschinenoptimierung von Content. Online unter https://www.textbroker.de/suchmaschinenoptimierung-von-content [Abruf 20.05.2020]

³ Vgl. t3n (2017): Bilder-SEO: Mit optimierten Bildern das Google-Ranking pushen. Zuletzt aktualisiert am 12.09.2017. Online unter https://t3n.de/news/bilder-seo-optimierten-bildern-855423/ [Abruf am 20.05.2020]

⁴ Vgl. Dziki, Luisa (2018): How To: So schreibst du einen SEO-Text. Herausgegeben von: Seokratie GmbH. Zuletzt aktualisiert am 06.09.2018. Online unter https://www.seokratie.de/seo-texte-schreiben/ [Abruf am 27.05.2020]

⁵Vgl. how2 AG (2014): Videos selbst Optimieren: Die 10 wichtigsten Punkte für ein besseres Ranking auf Google und YouTube. Zuletzt aktualisiert am 07.09.2014. Online unter https://how2.expert/blog/erklaervideo-video-seo.html [Abruf am 27.05.2020]

Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

24. November 20205. Oktober 2021

Was sind interaktive Videos?

Autor: Serkan Sarica

Was ein Video ist muss ich dir wohl nicht mehr erklären. Bewegte Bilder gibt es durch die Erfindung des Fernsehers bereits viele Jahrzehnte. Videos sind hingegen erst durch das Internet sehr populär geworden. YouTube hat dabei selbstverständlich eine riesige Rolle gespielt.

Bewegte Bilder wurden zunächst live übertragen und durch Videos schließlich auch vorgefertigt aufgezeichnet. Die Technik hat sich durch höhere Auflösungen und bessere Farben etc. deutlich verbessert, aber gab es wirklich revolutionäre Veränderungen für den Zuschauer? Wir sitzen vor dem Bildschirm und gucken nur zu. An der Technik haben wir doch schon so viel getan, warum nicht auch dem Zuschauer neue Funktionen geben? Bist du auch davon gelangweilt die Geschehnisse einfach hinzunehmen? Dann sind interaktive Videos genau das Richtige für dich.

Überblick

Klick dich gern durch den Beitrag:

Was sind interaktive Videos?

Wenn dir jemand mehr Kontrolle geben will, würdest du es ablehnen?
Interaktive Videos animieren den Nutzern Interaktion durchzuführen und ermöglichen somit Kontrolle über den Inhalt. Somit werden diese Art von Videos nicht passiv konsumiert – ganz im Gegenteil: Du als Zuschauer nimmst eine aktive Rolle ein und beeinflusst den Inhalt. Obwohl diese Videos schon seit Jahren existieren, sind sie immer noch kaum verbreitet.^[1]

Einsatzmöglichkeiten

Diese Technik kann in vielen Bereichen eingesetzt werden.

Beispiele:

Lehre
Werbung
Entertainment

Vorteile von interaktiven Videos

Die Marketingagentur Room214 gibt mit ihrer Statistik an, dass die Click-Through-Rate bei interaktiven Videos bei 5-12 % liegt. Die üblichen Videos hingegen liegen bei nur 1-2 %. Außerdem wurden sie zu 90% vollständig angeschaut. Normale Videos wurden hingegen zu 50% – 85% komplett angeschaut. Ein weiterer Vorteil ist, dass die Anzahl der Aufrufe steigt. Dies kommt zustande, weil verschiedene Szenarien auswählbar sind und die Neugier der Zuschauer somit steigt. Sie wollen nämlich wissen, wie das Video ausgeht, wenn sie einen alternativen Pfad auswählen.

Einsatz in der Lehre

Die Technik hat vor allem in der Lehre sein Nutzen. Es ermöglicht über interaktive Punkte die Aufmerksamkeit zu fokussieren. Dadurch können die Inhalte des Videos vertieft werden.

„Diese interaktiven Punkte erlauben es, die Aufmerksamkeit der lernenden Person auf eine bestimmte Sequenz oder ein bestimmtes Detail des Videos zu lenken und tragen damit zum Verständnis des Videoinhalts bei. Auf diese Weise können die Lernenden das Maß an
Informationen regulieren und damit eine kognitive Überlastung vermeiden.“
Abb. 1.: Mehrwert von Videos und interaktiven Videos aus der Sicht von Lehrpersonen^[3]

Vor allem für Lernende mit wenig Vorstellungskraft ist diese Technik somit besonders hilfreich!

Beispiele

Honda Presents The Other Side

Beim folgenden Video handelt es sich um eine Werbung von Honda. In diesem Video kannst du parallel zwei Geschichten erleben. Per Mausklick oder R-Taste kannst du entscheiden, welche Story du sehen möchtest.

360° Video New Lipton Magnificent Matcha Tea Takes You Inside the Cup

In diesem Fall dachte sich Lipton „Warum nicht mit einem 360° Video unseren Tee vermarkten?“. Diese Technik ermöglicht dir das Video aus verschiedenen Perspektiven zu sehen. Außerdem kannst du entscheiden, was du dir genauer anschauen möchtest.

Star Wars: Welche Farbe hat dein Lichtschwert?

Star Wars Fans aufgepasst, denn dieses Beispiel ist etwas Besonderes! Hierbei handelt es sich um eine Reihe von Videos die zusammen eine Interaktive Geschichte bilden. Du kannst nämlich am Ende des Videos selbst wählen, wie die Geschichte weitergeht. Dafür wirst du zu einem nicht gelisteten Video weitergeleitet. Am Ende erfährst du welche Farbe dein Lichtschwert hat.

Fazit

Interaktive Videos sind die Weiterentwicklung von Web Videos. Auch wenn die Technik noch nicht sehr verbreitet ist, zeigt sie sehr viel Potential für die Zukunft. Immer mehr Streamingdienste bieten bereits interaktive Titel an, denn die Nachfrage steigt. Video ohne Interaktionen mit dem Zuschauer können in naher Zukunft deutlich an Beliebtheit verlieren. Anbieter wie auch Nutzer profitieren von dieser Technik. Die Nutzung macht nicht nur Spaß, sondern hat viele Vorteile für beide Seiten. Eins ist klar, interaktive Videos werden das Internet revolutionieren!

Quellen

¹ Pink University (2016): Interaktives Video in der Weiterbildung – Formate und Vorteile. Online unter https://www.pinkuniversity.de/blog/e-learning-interaktives-video-interaktives-schulungsvideo-in-der-weiterbildung/ [Abruf am 14.07.20]

Beitragsbild: Photo by Donovan Silva on Unsplash.

Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

Die besten Beiträge stellen wir Euch hier in den nächsten Wochen nach und nach vor.

10. November 20206. Oktober 2021

Rund um Informationsmanagement

In einigen Lehrveranstaltungen haben wir uns mit der medialen Aufbereitung von Inhalten rundum den Studiengang Informationsmanagement befasst.

Beiträge zu IM-Themen, Videos, was Informationsmanagement überhaupt ist, interaktive Storytellings zum studentischen Leben oder Infografiken mit JavaScript findet ihr hier in unserer bisherigen Sammlung.

Visuelle Magie auf Instagram: Canva und KI-generierte Posts im Rampenlicht

Veröffentlicht: 20. September 2023

Autorin: Anna Feldbarg Willkommen in einer digitalen Ära, die uns unendliche kreative Möglichkeiten bietet! Vor allem Instagram hat eine Bühne geschaffen, auf der wir unser künstlerisches Talent entfalten und fesselnde Geschichten erzählen können. Und das Beste daran ist: Als Foodblogger:in kannst du deine Rezepte jetzt noch lebendiger gestalten! Dank der Zusammenarbeit zwischen Canva1 – einer …

„Visuelle Magie auf Instagram: Canva und KI-generierte Posts im Rampenlicht“ weiterlesen

X-Ploration: Data Mining und Sentimentanalyse mit Hugging Face

Veröffentlicht: 20. September 2023

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

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

Energiesparen durch Smart Home?

Veröffentlicht: 19. Juli 2023

Autor*innen: Leoni Albert und Elias Huisl Aufgrund der aktuell steigenden Energiekosten wird das Thema „Energiesparen“ für Verbraucher*innen immer wichtiger.1 In dem folgenden Artikel untersuchen wir gemeinsam, ob Energiesparen durch Smart Home möglich ist und mit welchen Tools Sie Kosten sparen können. Inhaltsverzeichnis 4 smarte Möglichkeiten, mit denen Energie eingespart werden kann Ein Smart Home muss …

„Energiesparen durch Smart Home?“ weiterlesen

Künstliche Intelligenz in der Produktion von Filmen

Veröffentlicht: 18. Juli 2023

Autor*innen: Lukas Vojkovic und Ann-Christin Thoma Übersicht Intro Künstliche Intelligenz (KI) wird normalerweise damit in Verbindung gebracht, Menschen bei Aufgaben zu unterstützen, die durch Automatisierung besser erledigt werden können.Mit dem fortschreitenden technischen Wandel ist es der KI heutzutage aber nicht nur möglich, fortschriftliche visuelle Effekte in Filmen zu liefern oder den Videoschnitt zu erleichtern, sondern …

„Künstliche Intelligenz in der Produktion von Filmen“ weiterlesen

Interaktive Videos auf der Leinwand

Veröffentlicht: 17. Juli 2023

Autorinnen: Bonnie Huntemann und Nicole Hafner Ein neues Filmerlebnis? Die Filmindustrie und vor allem der Streaming-Anbieter Netflix haben in den letzten Jahren mit einem selbst produzierten Aufgebot an interaktiven Filmen eine Art Hype geschaffen. Ob mit der ganzen Familie auf der Couch oder alleine in den öffentlichen Verkehrsmitteln: Zuschauer*innen empfinden eine starke Bindung zum Geschehen …

„Interaktive Videos auf der Leinwand“ weiterlesen

Die KI DeepNash meistert Stratego

Veröffentlicht: 14. Juli 2023

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

„Die KI DeepNash meistert Stratego“ weiterlesen

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

Veröffentlicht: 13. Juli 2023

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

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

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

Veröffentlicht: 12. Juli 2023

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

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

Wie Streaming-Algorithmen die Musik verändern

Veröffentlicht: 11. Juli 2023

Autoren: Marian Berdyszak und Tom Kuhn Die weltweite Musikindustrie ist im Wandel. 2017 wurde erstmals mehr Geld durch Musikstreaming eingenommen als durch den Verkauf von CDs, Schallplatten & Co. Somit liegt auch der Fokus großer Plattenlabel auf dem digitalen Musikmarkt. Führt diese Änderung der Marktsituation auch zu einer Veränderung der Musik als solches? Inhaltsverzeichnis Wieviel …

„Wie Streaming-Algorithmen die Musik verändern“ weiterlesen

KI und die Sicherheit von Smart-Home-Systemen

Veröffentlicht: 10. Juli 2023

Autorin: Eliza SchnetzerKI KI Inhaltsverzeichniss Wie auch in vielen anderen Bereichen der Technik macht auch das Internet of Things (IoT) große Entwicklungsschritte. Dazu gehören auch sogenannte Smart-Home-Systeme, die eine immer weitere Verbreitung in deutschen Haushalten finden. Aus den vielseitigen Anwendungsbereichen ergeben sich neben komfortablen Alltagshilfen auch einige Fragen zur Sicherheit, gerade hinsichtlich Datenschutzes und Künstliche …

„KI und die Sicherheit von Smart-Home-Systemen“ weiterlesen

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

Veröffentlicht: 7. Juli 2023

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

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

Wie beeinflusst digitale Datenanalyse die Transparenz von Daten?

Veröffentlicht: 6. Juli 2023

Autorinnen: Luisa Rabbe und Emelie Rademacher Die zunehmend komplexe Gestaltung digitaler Angebote und Dienste in den letzten Jahren hat starke Konzentrationstendenzen in der Datenökonomie verursacht. Einige Großunternehmen sammeln beträchtliche Datenmengen, kombinieren diese und werten die neuen Daten aus.[1] Dadurch können anonymisierte Daten häufig re-identifiziert werden.[2] Was hat das nun mit digitaler Datenanalyse zu tun? In diesem …

„Wie beeinflusst digitale Datenanalyse die Transparenz von Daten?“ weiterlesen

E-Learning: Interaktive Videos in der Hochschullehre

Veröffentlicht: 5. Juli 2023

Autorinnen: Charlotte Böddicker und Kim Kirner Im Zuge der Corona-Pandemie hat das Thema E-Learning an Hochschulen weiter an Bedeutung gewonnen. Das erfordert von den Lehrenden die Weiterentwicklung alter und Umsetzung neuer digitaler Lehrmethoden. Eine Methode ist die Vermittlung von Lehrinhalten mithilfe interaktiver Videos. Doch wie setze ich diese ein und was sind überhaupt interaktive Videos? …

„E-Learning: Interaktive Videos in der Hochschullehre“ weiterlesen

Was hat User Experience mit SEO zu tun?

Veröffentlicht: 4. Juli 2023

Autor*innen: Robin Alo und Davud Kilic SEO ist undenkbar ohne User Experience! Warum? Das werden wir Ihnen in diesem Blogbeitrag aufklären. Viele glauben, dass SEO und User Experience zwei getrennte Dinge sind, jedoch haben sie viel mehr miteinander zu tun als man denkt. Vorerst wollen wir auf die Begrifflichkeiten SEO (Search Engine Optimization) und User Experience …

„Was hat User Experience mit SEO zu tun?“ weiterlesen

Becoming a Librarian: Der Studiengang „Informationsmanagement berufsbegleitend“ an der Hochschule Hannover

Veröffentlicht: 3. Juli 2023

Autorin: Daniela Tavano Trotz drohendem Fachkräftemangel gibt es nur wenige attraktive und berufsbegleitende Möglichkeiten sich als Fachangestellte(r) für Medien- und Informationsdienste im Bibliothekswesen bzw. Informationsmanagement weiterzubilden. Ein „normales“ Studium ist für FaMIs oft nicht umsetzbar, da ein fester Arbeitsplatz, familiäre Bindung oder finanzielle Gründe dem entgegen stehen.2 Zum Glück gibt es seit 2012 an der …

„Becoming a Librarian: Der Studiengang „Informationsmanagement berufsbegleitend“ an der Hochschule Hannover“ weiterlesen

Ist Python die Programmiersprache der Zukunft?

Veröffentlicht: 30. Juni 2023

Autor*innen: Ömer Topcu und Anela Iljijazi Python ist eine Programmiersprache, deren wichtigstes Merkmal die Einfachheit ist. Sie wird von einer aktiven Community auf der ganzen Welt entwickelt. Programmiersprachen sind für sich genommen vielfältig einsetzbar und werden gerade im Bereich der künstlichen Intelligenz häufig eingesetzt. Python hat Zukunft und hat sich dieses Jahr erneut vor Java …

„Ist Python die Programmiersprache der Zukunft?“ weiterlesen

KI im Arbeitsmarkt: Chance und Risiko zugleich

Veröffentlicht: 29. Juni 2023

Autoren: Dominik Hausfeld und Fynn Sylla Gliederung Was ist KI? KI (Künstliche Intelligenz) bezieht sich auf die Fähigkeit von Computer-Systemen, Aufgaben zu verstehen und durchzuführen, die normalerweise erfordern, dass ein Mensch Intelligenz besitzt, wie das Verstehen von Sprache, das Lösen von Problemen, das Lernen aus Erfahrungen und das Erkennen von Mustern. Es gibt verschiedene Arten …

„KI im Arbeitsmarkt: Chance und Risiko zugleich“ weiterlesen

Gather.Town: Online-Lernen mit einem Twist

Veröffentlicht: 28. Juni 2023

Autor*nnen: Rhian Krische und Eva Christina Wirsing Die COVID-19-Pandemie zwang Lehrkräfte, ihre Unterrichtsmethoden zu ändern. Da Massenlockdowns weltweit die Norm waren, gewannen Videokonferenzplattformen wie Zoom, BigBlueButton und Microsoft Teams plötzlich an Beliebtheit. Dies veränderte die Unterrichtsatmosphäre für viele Lehrkräfte und Studierende schlagartig und brachte eine Vielzahl neuer Herausforderungen mit sich. Diejenigen, die Online-Kurse und -Tutorien …

„Gather.Town: Online-Lernen mit einem Twist“ weiterlesen

OBS Studio: Was ist das und wofür?

Veröffentlicht: 27. Juni 2023

Autor: Nils Merlin Linde Inhaltsverzeichnis Was ist das? „OBS Studio“ kurz für „Open Broadcaster Software Studio“ ist eine kostenlose Recorder-Software mit der man Audio und Video aufnehmen und auch live ins Netz streamen kann. Die Open Access Software kann man beispielsweise für E-Learning, Online-Vorlesungen, Online-Konferenzen oder auch für das Erstellen von eigenen Videos benutzen, die …

„OBS Studio: Was ist das und wofür?“ weiterlesen

Bibliotheksservice der Zukunft – Roboter im Einsatz

Veröffentlicht: 26. Juni 2023

Autorinnen: Giulia Salamone und Elisabeth Greil Künstliche Intelligenz und Roboter sind seit langem schon in der Industrie im Einsatz. In Informationseinrichtungen wie Bibliotheken rückt die Künstliche Intelligenz somit nun immer mehr in den Fokus. Daraus resultierend werden humanoide Roboter in den Servicebereich von Bibliotheken integriert, wohingegen es eine Vielzahl an Einsatzmöglichkeiten für humanoide Roboter in …

„Bibliotheksservice der Zukunft – Roboter im Einsatz“ weiterlesen

Art empowered through digital transformation

Veröffentlicht: 24. Juni 2023

Authors: Linh Nguyen and Shion Kimu Did you ever wonder how fictional animated movies and arts are produced? With constant development of digital technologies, we are more and more mesmerized by their capabilities. Pictures and paintings are not no longer created only by colors and brushes anymore. Now they are being created by lines of …

„Art empowered through digital transformation“ weiterlesen

KI-Bots und Meinungsmache in Sozialen Medien

Veröffentlicht: 23. Juni 2023

Autor*in: DB Inhaltsverzeichnis Ein tragisches Beispiel In einem TikTok-Video berichtet eine etwa 30-jährige Frau von einem tragischen Vorfall. Ein 16 Jahre alter Junge namens Daniel engagierte sich ehrenamtlich in einer Flüchtlingsunterkunft. Als Daniel jedoch in Gegenwart der ukrainischen Flüchtlinge russisch sprach, wurden einige von ihnen aggressiv und schlugen den Jungen zusammen. Dieser starb an seinen …

„KI-Bots und Meinungsmache in Sozialen Medien“ weiterlesen

Einsatz von Schulclouds in Deutschland

Veröffentlicht: 22. Juni 2023

Autorinnen: Vanessa Block und Mareike Bolz Wir befinden uns im digitalen Zeitalter und die Digitalisierung in Schulen ist ein Thema, das bereits seit einigen Jahren sehr präsent ist. Die Coronapandemie hat gezeigt, wie schlecht Schulen teilweise ausgestattet sind, wenn es um die Bereitstellung einer digitalen Infrastruktur geht, doch spätestens seit der DigitalPakt Schule des Bundes …

„Einsatz von Schulclouds in Deutschland“ weiterlesen

Progressive Web Apps und SEO: PWA als Chance zur Verbesserung des Suchmaschinenrankings

Veröffentlicht: 21. Juni 2023

Autor: Hannes Dieterich Progressive Web Apps (PWA) sind Websites, die Eigenschaften nativer Apps mit sich bringen. Richtig eingesetzt bringt die immer noch recht neue Technologie einige Vorteile mit sich wie schnelle Ladezeiten, Offline-Funktionalität und eine bei Bedarf einfache Installation. Außerdem werden PWA wie „normale“ Websites über eine URL aufgerufen. Da Inhalte so für Suchmaschinen zugänglich …

„Progressive Web Apps und SEO: PWA als Chance zur Verbesserung des Suchmaschinenrankings“ weiterlesen

Menstruelle Überwachung durch FemTech-Apps – Wenn nicht nur Blut fließt

Veröffentlicht: 20. Juni 2023

Autorinnen: Michelle Gaßner und Mira Le Im Zeitalter der Selbstoptimierung gibt es unzählige Apps, die das Leben einfacher machen. Gesundheits-Apps werden genutzt, um zum Beispiel Kalorien zu zählen oder Sportübungen zu tracken, aber auch um mithilfe von Zyklus-Apps den Menstruationszyklus zu dokumentieren. Nutzende berichten, dass solche FemTech-Apps ein wertvolles Mittel sind, um mehr über sich …

„Menstruelle Überwachung durch FemTech-Apps – Wenn nicht nur Blut fließt“ weiterlesen

„Lass mich Dir helfen!“ – Faktoren zur Steigerung der Akzeptanz von Pflegerobotern bei Senioren

Veröffentlicht: 19. Juni 2023

Autorin: Tina Jahnert Pflegeroboter sollen zukünftig vermehrt in Altenheimen eingesetzt werden. Vielleicht denken Sie auch darüber nach? Erwarten Sie nicht nur Freudenschreie seitens der Senioren[1]. Wahrscheinlich werden Ihnen mindestens so viel Skepsis und Ängste wie Neugierde entgegenschlagen. Die gute Nachricht ist: Sie können ganz viel dafür tun, die Hemmschwelle für Ihre Bewohner zu senken und …

„„Lass mich Dir helfen!“ – Faktoren zur Steigerung der Akzeptanz von Pflegerobotern bei Senioren“ weiterlesen

Big Data und Datenschutz – Wunschdenken oder bereits Realität?

Veröffentlicht: 19. Juni 2023

Autor: Philippe Paszkier Wir alle kennen es, man spricht mit einem Freund oder Partner über irgendein Produkt o.ä. ohne dabei überhaupt das Handy entsperrt zu haben und dann möchte man etwas googeln und die Werbung handelt von dem eben besprochenen Thema. Ich meine klar, hat so seine Vorteile da weiter machen zu können, wo die …

„Big Data und Datenschutz – Wunschdenken oder bereits Realität?“ weiterlesen

Künstliche Intelligenz in Filmen

Veröffentlicht: 16. Juni 2023

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

„Künstliche Intelligenz in Filmen“ weiterlesen

Der Einsatz von Spracherkennungssoftware und ihre Grenzen in der Forensischen Linguistik

Veröffentlicht: 16. Juni 2023

Autorin: Kimberley Stips „Alexa, wer hat versucht, uns zu erpressen?“Ganz so leicht ist es dann doch nicht. Die Forensische Linguistik ist eine kriminalistische Hilfswissenschaft, die sich mit Sprache im gerichtlichen Kontext beschäftigt. Dazu zählen sowohl die vor Gericht verwendete Sprache wie auch beispielsweise die Autoren- und Sprechererkennung (Fobbe, S. 15 f.). Oder, um es mit …

„Der Einsatz von Spracherkennungssoftware und ihre Grenzen in der Forensischen Linguistik“ weiterlesen

Search Engine Optimization und was das mit verschiedenfarbigen Hüten zu tun hat

Veröffentlicht: 2. Juni 2023

Autorin: Magdalena Sinsel Im folgenden Artikel erfahren Sie, was Search Engine Optimization ist, warum das für jeden Host einer Website von Bedeutung ist und was das mit weißen, schwarzen und grauen Hüten zu tun hat. Viel Vergnügen! Inhaltsverzeichnis Was ist Search Engine Optimization? Search Engine Optimization, kurz SEO, umfasst alle Maßnahmen, die zu einem besseren …

„Search Engine Optimization und was das mit verschiedenfarbigen Hüten zu tun hat“ weiterlesen

Finden die Roboter den Weg in die Bibliothek? – Wir treffen unsere zukünftigen Chatbot-Kollegen

Veröffentlicht: 11. Mai 2023

Autor*innen: Laura Dembowski und Erit Grünefeld Wie oft unterhältst du dich im Alltag mit Robotern? Wenn du Siri oder den Assistenten von Google auf dem Handy benutzt, dann könnte es schon mehrmals am Tag sein. Seit ChatGPT im November letzten Jahres der breiten Öffentlichkeit zu Verfügung steht, ist das Thema Künstliche Intelligenz zudem wieder präsenter …

„Finden die Roboter den Weg in die Bibliothek? – Wir treffen unsere zukünftigen Chatbot-Kollegen“ weiterlesen

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

Veröffentlicht: 10. Mai 2023

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

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

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

Veröffentlicht: 10. Mai 2023

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

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

Der Mobility Compass: Auf dieses Tool haben wir gewartet!

Veröffentlicht: 9. März 2023

Die Teilnehmenden der Veranstaltung Recherche wissenschaftlicher Informationen durften bei einer Exkursion zur Technischen Informationsbibliothek (TIB) einen umfangreichen Einblick in den FID move erhaschen.

Projektarbeit: H5P für interaktive Lernressourcen

Veröffentlicht: 27. Januar 2023

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

„Projektarbeit: H5P für interaktive Lernressourcen “ weiterlesen

Die Nutzung von interaktiven Videos in Bibliotheken

Veröffentlicht: 1. Oktober 2022

Autorinnen: Tanja Hoogestraat und Heike Goebel Beim Surfen im Internet sind wir es gewohnt, eigenständig durch Klicken und Scrollen zu navigieren. Wir bestimmen selbst, welche Treffer bei einer Recherche relevant sind und welche Teile von Websites interessant erscheinen. Wenn jedoch ein Video aufgerufen wird, entwickeln wir uns häufig zu passiven Zuschauern. Bei interaktiven Videos ist …

„Die Nutzung von interaktiven Videos in Bibliotheken“ weiterlesen

Digitale Leseräume als neuer Ort des Zusammenkommens

Veröffentlicht: 29. September 2022

Inhalt Vom digitalen Lesesaal zum virtuellen BegegnungsortEin digitaler Raum mit WonderWas kann Wonder?Mit WorkAdventure einen Schritt weiter gehenWas kostet WorkAdventure?WorkAdventure in der BibliothekFazitQuellen und Verweise Die digitale Transformation ist ein stetiger Wandlungsprozess, die in allen Lebensbereichen stattfindet. Im öffentlichen Leben, im Beruf und im privaten Umfeld schreitet die Digitalisierung voran und macht damit auch vor …

„Digitale Leseräume als neuer Ort des Zusammenkommens“ weiterlesen

Höhepunkt mit Risiko: Security- und Datenschutzprobleme bei smarten Sex-Toys

Veröffentlicht: 28. September 2022

Autor:innen: Larissa Schmidt und Jonas Reinhard Der Anteil an Smarten Sexspielzeugen nimmt immer weiter zu, allerdings stellen Sicherheitslücken und mangelnde Datensparsamkeit bei den Geräten ein Problem dar. Im Jahr 2018 stellte Werner Schober in seinem Vortrag auf dem Chaos Communication Congress mit dem Titel Internet of Dongs – A long way to a vibrant Future …

„Höhepunkt mit Risiko: Security- und Datenschutzprobleme bei smarten Sex-Toys“ weiterlesen

Die Website ist die Bibliothek

Veröffentlicht: 28. September 2022

Autorinnen: Svenja Diste und Julia Rasek Inhaltsverzeichnis Retro ist wieder in? Nicht bei Websites. Schritt 1: Probleme der alten Website analysieren Schritt 2: Ziele und Zielgruppe Schritt 3: Struktur und Design Schritt 4: Inhalt Schritt 5: Auswertung und Ausblick Schlusswort Mehr zum Thema Quellen Retro ist wieder in? Nicht bei Websites. Welche Bibliothek kennt es nicht? …

„Die Website ist die Bibliothek“ weiterlesen

H5P in digitalen Lernplattformen

Veröffentlicht: 27. September 2022

Autorinnen: Lisa Sommer und Leonora Zullufi Im Gegensatz zum statischen Content wird bei interaktiven Inhalten der dynamische Content herangezogen. Das heißt, dass es nicht nur gewöhnliche Texte zum Lesen gibt oder Bilder nur betrachtet werden. Bei interaktiven Inhalten wird der Benutzer auch aktiv in das Geschehen eingebunden. Dadurch wird die Aufmerksamkeit erregt und gewonnen. Daher …

„H5P in digitalen Lernplattformen“ weiterlesen

WT.Social: Eine Alternative zu Facebook & Co.?

Veröffentlicht: 26. September 2022

Autorin: Maria H. Nguyen Thu Mit 2,9 Mrd. aktiven Nutzer*innen im Monat1 bestimmt Facebook die Informations- und Kommunikationswege. Kritiker werfen der Plattform seit längerem vor, die Privatsphäre von Benutzer*innen zu verletzen und nicht gegen Falschinformationen vorzugehen. Auf der Suche nach einer möglichen Alternative stolpert man über WT.Social, eine noch unbekannte Plattform von einem nicht unbekannten …

„WT.Social: Eine Alternative zu Facebook & Co.?“ weiterlesen

Die Zukunft des OPACs

Veröffentlicht: 26. September 2022

Autorinnen: Anke Engelke und Anna-Lena Lächelt Inhalt Entstehung des OPACs Usability eines modernen OPACs Visionen für die Zukunft Themenverwandte Blogs Quellen Bildquellen Entstehung des OPACs Ursprünglich wurden Bibliotheksbestände in Zettelkatalogen verzeichnet. Ein Zettelkatalog bestand aus vielen Katalogkarten (oder Zetteln), wobei auf jedem Zettel genau eine der in der jeweiligen Bibliothek vorhandenen Publikationen verzeichnet wurde. Die …

„Die Zukunft des OPACs“ weiterlesen

QpLuS-IM Projekt „Komm’Se digital lernen“ erfolgreich abgeschlossen

Veröffentlicht: 22. August 2022

Nach spannenden drei Jahren, die einige Überraschungen bereit hielten, haben wir unser Projekt QpLuS-IM nun beendet. Einzelheiten zu Ergebnissen und Erkenntnissen findet Ihr im Abschlussbericht des Projekts auf unserem QpLuS-IM Blog: Erfolgreicher Projektabschluss Auch eine News auf der HsH-Website fasst es gut zusammen: Erfolgreicher Projektabschluss des Q+ Projekts „Komm’Se digital lernen“ Herzlichen Dank an alle …

„QpLuS-IM Projekt „Komm’Se digital lernen“ erfolgreich abgeschlossen“ weiterlesen

Ins Stammbuch geschrieben: Kodiert mit der Auszeichnungssprache TEI

Veröffentlicht: 12. Juli 2022

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

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

0 Kommentare

Text und Data Mining in Bibliotheken?

Veröffentlicht: 11. Juli 2022

Autorin: Lene-Christine Brammer Bibliotheken haben den Auftrag, Medien und Informationen für Nutzerinnen und Nutzer aufzuarbeiten und bereitzustellen. Doch jedes Jahr werden mehrere Millionen Publikationen veröffentlicht. Die DNB allein verzeichnete den Zugang 2.352.693 neuer Einheiten im Jahre 2020[1]. Wer soll da den Überblick behalten? Text und Data Mining kann hier Abhilfe schaffen. Was ist Text und …

„Text und Data Mining in Bibliotheken?“ weiterlesen

Urheberrecht im Kontext von Fan Fictions und RPGs

Veröffentlicht: 8. Juli 2022

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

„Urheberrecht im Kontext von Fan Fictions und RPGs“ weiterlesen

0 Kommentare

Was hat User Experience mit SEO zu tun?

Veröffentlicht: 8. Juli 2022

Autor*in: Lea Weiß Beschäftigt man sich mit der Erstellung von Webseiten, begegnen einem früher oder später auch die Begriffe User Experience (UX) und Search Engine Optimization (SEO). Wenn Du diese Begriffe noch für komplettes Neuland hältst, bist Du hier genau richtig. Beleuchten wollen wir dabei die Kombination von User Experience und SEO. Nach einer kurzen …

„Was hat User Experience mit SEO zu tun?“ weiterlesen

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

Veröffentlicht: 7. Juli 2022

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

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

0 Kommentare

Was ist Flask?

Veröffentlicht: 7. Juli 2022

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

„Was ist Flask?“ weiterlesen

0 Kommentare

Scrollytelling: Geschichte eines Unternehmens

Veröffentlicht: 26. Januar 2022

Autorinnen: Maria Sael & Jeanice Noraman Link zur Animation Quellcode als zip-Download Inhalt Einleitung Konzept Aufbau Code HTML CSS JavaScript Anmerkung Quellen Einleitung Jedes Unternehmen hat eine Geschichte, diese wird häufig auf der Unternehmenswebsite dargestellt. Doch wie kann man sich als Unternehmen von anderen abheben und die (potenziellen) Kunden und User ansprechen? Eine Möglichkeit, um …

„Scrollytelling: Geschichte eines Unternehmens“ weiterlesen

Tutorial: Mini Game “Magic Garten” – Blumen pflanzen als interaktive Animation

Veröffentlicht: 24. Januar 2022

Autorinnen: Maria Olberg und Elisabeth Rutt In diesem Tutorial zeigen wir, wie man eine interaktive Animation entwickeln kann. Wir stellen dazu unsere Animation vor und gehen auf das Konzept, Techniken und Besonderheiten der Animation sowie Ausschnitte des Quellcodes ein. Link zur Animation ZIP-Ordner zum Downloaden Inhaltsverzeichnis Das Konzept unserer Animation Aufbau der Animation Der Quellcode …

„Tutorial: Mini Game “Magic Garten” – Blumen pflanzen als interaktive Animation“ weiterlesen

Beitragsbild Die Bibliothek in der Cloud

Die Bibliothek in der Cloud: Was bieten cloudbasierte Bibliothekssysteme?

Veröffentlicht: 21. Januar 2022

Autorin: Linda Groß Cloudbasierte Bibliothekssysteme gelten als die neue Generation von Bibliotheksverwaltungssystemen. Sie bieten eine innovative Möglichkeit, wie Bibliotheken ihre zahlreichen Daten verwalten und täglichen Geschäftsgänge möglichst einfach abwickeln können. Mittlerweile werden sie auch in Deutschland immer häufiger eingesetzt. So arbeiten die Berliner Universitätsbibliotheken bereits seit 2015 mit einer solchen Software.1 Auch in Nordrhein-Westfalen läuft …

„Die Bibliothek in der Cloud: Was bieten cloudbasierte Bibliothekssysteme?“ weiterlesen

Der Computer für alle

Veröffentlicht: 19. Januar 2022

Autor: Nils Dille Computer waren früher ernsthafte Geräte für ernsthafte Arbeit und demnach auch nicht sehr einfach zu bedienen oder zugänglich.6 Der 1981 erschienen IBM 5150 startete bei einem umgerechneten Preis von ca. 4.400$ und kam dabei nicht mal mit einem Diskettenlaufwerk. Laden und Speichern von Programmen und Daten war so nur über Audiokassetten möglich. …

„Der Computer für alle“ weiterlesen

0 Kommentare

Smart Libraries: Wie smart müssen Bibliotheken sein?

Veröffentlicht: 17. Januar 2022

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? Smart City Wheel Smart Libraries- Wie sieht’s in der Praxis aus? Fazit Was ist Smart? Der …

„Smart Libraries: Wie smart müssen Bibliotheken sein?“ weiterlesen

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

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

Veröffentlicht: 14. Januar 2022

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

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

Design Thinking: Volle Kreativität voraus

Veröffentlicht: 13. Dezember 2021

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: Volle Kreativität voraus“ weiterlesen

DOI: Ein digitaler Objektidentifizierer

Veröffentlicht: 6. Dezember 2021

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

„DOI: Ein digitaler Objektidentifizierer“ weiterlesen

Innovation in Bibliotheken: Deichman Bibliothek Oslo

Veröffentlicht: 26. November 2021

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

„Innovation in Bibliotheken: Deichman Bibliothek Oslo“ weiterlesen

Makerspaces: Eine Aufgabe für Öffentliche Bibliotheken?

Veröffentlicht: 26. November 2021

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

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

Tutorial: Ein Memory-Spiel

Veröffentlicht: 18. November 2021

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

„Tutorial: Ein Memory-Spiel“ weiterlesen

Tutorial: Ein Tag mit Bobby

Veröffentlicht: 17. November 2021

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

„Tutorial: Ein Tag mit Bobby“ weiterlesen

Beitragsbild Moderne Lernraumgestaltung in Universitätsbibliotheken

Moderne Lernraumgestaltung in Universitätsbliotheken

Veröffentlicht: 16. November 2021

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

„Moderne Lernraumgestaltung in Universitätsbliotheken“ weiterlesen

Didaktische Typographie: Weißraum und seine Wirkung

Veröffentlicht: 12. November 2021

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

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

Darf ich dieses Bild aus dem Web nutzen?

Veröffentlicht: 8. November 2021

Autorin: Dana Thoß Wer kennt es nicht? Die sozialen Netzwerke leben von den Bildern der jeweiligen Beiträge. Das Internet umfasst Millionen, wenn nicht Milliarden von Bildern zu den verschiedensten Themen und Produkten. Viele dieser Bilder sind lizenziert, bspw. mit einer Creative Commons (CC) Lizenz. In diesem Artikel werden Sie erfahren, was es mit den Creative …

„Darf ich dieses Bild aus dem Web nutzen?“ weiterlesen

Mehr Interaktivität im Kurs Content Management über h5p

Veröffentlicht: 5. Oktober 2021

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: Im aktuellen Wintersemester 21/22 setzen wir …

„Mehr Interaktivität im Kurs Content Management über h5p“ weiterlesen

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

Veröffentlicht: 26. August 2021

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

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

Die Keywordrecherche: Der Grundstein des Online Marketings

Veröffentlicht: 15. Juli 2021

Autor*in: Linda Khorami Am Anfang steht die Keywordrecherche. Ob Blog, Onlineshop oder Unternehmenswebsite, die Onlinepräsenz spielt heutzutage eine immer größere Rolle und ist nicht mehr wegzudenken. [1] Du möchtest auch mit deiner Präsenz im Netz überzeugen und so viele Menschen wie möglich erreichen? Dann ist die Keywordrecherche genau das Richtige für dich! Finde heraus, worum es …

„Die Keywordrecherche: Der Grundstein des Online Marketings“ weiterlesen

Bibliotheken im digitalen Wandel: Von der Buchkarte zum digitalen Nutzerkonto

Veröffentlicht: 25. März 2021

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

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

0 Kommentare

Durch guten Content auf Platz 1 im Google-Ranking?

Veröffentlicht: 4. März 2021

Autor*in: Vivien Hirschberger Frage: Versteht Google meine Inhalte? Antwort: Nein, noch nicht, aber das lässt sich ändern! Ich zeige dir wie. Schritt für Schritt zum Ziel Was ist das Ziel? Warum sollte ich meine Inhalte für Google optimieren? Bilder, Texte und Videos aus SEO-Sicht Bilder optimieren Suchmaschinenoptimierte Texte Videos sind nicht gleich Videos Content Marketing …

„Durch guten Content auf Platz 1 im Google-Ranking?“ weiterlesen

Was sind interaktive Videos?

Veröffentlicht: 24. November 2020

Autor: Serkan Sarica Was ein Video ist muss ich dir wohl nicht mehr erklären. Bewegte Bilder gibt es durch die Erfindung des Fernsehers bereits viele Jahrzehnte. Videos sind hingegen erst durch das Internet sehr populär geworden. YouTube hat dabei selbstverständlich eine riesige Rolle gespielt. Bewegte Bilder wurden zunächst live übertragen und durch Videos schließlich auch …

„Was sind interaktive Videos?“ weiterlesen

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

Veröffentlicht: 10. November 2020

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

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

Business Intelligence – Was ist das eigentlich?

Veröffentlicht: 7. November 2020

Autor*in: Nick Jäger Dir sagt es vielleicht nichts, aber Business Intelligence kann dich retten! Das Scenario Dein bester Freund/deine beste Freundin und du führen ein Unternehmen. Alles läuft gut. Der Umsatz stimmt, eure Angestellten sind klasse und du kannst sogar 3 mal im Jahr nach Malle fliegen. Doch dann kommt der Tag, an dem alles …

„Business Intelligence – Was ist das eigentlich?“ weiterlesen

Was sind Progressive Web Apps (PWAs)?

Veröffentlicht: 6. November 2020

Bestimmt bist du im Netz schon mal der Abkürzung PWA über den Weg gelaufen. Doch, wofür steht diese Abkürzung überhaupt? Was sind PWAs? Um es schnell auf den Punkt zu bringen: PWA steht für Progressive Web App. Jetzt bleibt nur noch die nächste Frage. Was sind Progressive Web Apps?

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

Veröffentlicht: 3. November 2020

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

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

Tutorial: Visual Graphic Novel Animation

Veröffentlicht: 26. Oktober 2020

Autori*n: Julia Karaschewski Vollansicht: Visual Graphic Novel Animation auf Codepen.io Quellcodeansicht: Visual Graphic Novel Animation auf Codepen.io ZIP-Datei zum Download (direkt von Codepen.io) Das Konzept Die Idee der Animation ist, ein erheiterndes, kleines Visual Graphic Novel zu erstellen, durch das der User mit visuellen Effekten durchgeführt wird. Das Ziel ist, den User von Anfang bis …

„Tutorial: Visual Graphic Novel Animation“ weiterlesen

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

Veröffentlicht: 16. Oktober 2020

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

SEO: Unterschied zwischen Onpage- und Offpage Optimierung

Veröffentlicht: 7. September 2020

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

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

0 Kommentare

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

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

Veröffentlicht: 4. September 2020

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

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

Videopodcast zu Online-Lehre im Corona-Modus

Neuer Videopodcast: Lernen und Lehren in Zeiten der Corona-Krise

Veröffentlicht: 13. Mai 2020

In unserem neuen Videopodcast zu Lernen und Lehren in Zeiten der Corona-Krise hat sich Gerrit Wucherpfennig vom QpLuS-IM-Projekt mit Studierenden des Studiengangs Informationsmanagement zu ihren bisherigen Erfahrungen in den letzten Wochen unterhalten. Wie erleben sie die Corona-Auswirkungen im Studium? Wie funktioniert die Lehre? Und wie kommen beide persönlich damit zurecht? Antworten findet ihr im folgenden …

„Neuer Videopodcast: Lernen und Lehren in Zeiten der Corona-Krise“ weiterlesen

WebLab HsH: Data Mining und Warenkorbanalyse

Data Mining bei der Warenkorbanalyse

Veröffentlicht: 28. Februar 2020

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

„Data Mining bei der Warenkorbanalyse“ weiterlesen

Aufgabentypen des Data Mining

Veröffentlicht: 28. Februar 2020

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

„Aufgabentypen des Data Mining“ weiterlesen

WebLab HsH: Bachelorabiet von Matthias Olbrisch, 2019

SneakPeak Bachelor: IT-Kompetenzen analysieren und klassifizieren

Veröffentlicht: 22. Februar 2020

In seiner Bachelorarbeit mit dem Titel “Analyse und Klassifikation der hannoverschen IT Kompetenzen in einer variablen Datenbasis“ schreibt Matthias Olbrisch (2019) in seinem Abstrakt: „Die allgemeine Digitalisierung und besonders die IT-Branche in Hannover, stellen Arbeitgeber*innen vor große Herausforderungen. Berufsbezeichnungen im IT-Sektor zeichnen sich im Gegensatz zu klassischen Berufsfeldern nicht dadurch aus, dass sie vereinheitlicht sind. …

„SneakPeak Bachelor: IT-Kompetenzen analysieren und klassifizieren“ weiterlesen

Videos rundum IM: Das Client-Server-Modell

Veröffentlicht: 21. Februar 2020

Das Client-Server-Modell Autor: Kirill Prokopov Inhalt: In der Animation erkläre ich die Rollen von Client und Server. Ebenso wird die Kommunikation zwischen beiden Geräten grob erläutert. Software: Verwendet habe ich hierzu die Software „Blender“ (für Animationen, das Compositing und Videoschnitt) und den freien Software Synthesizer „Synth1“ für das Einspielen von Audio. Die „Hauptdarsteller“ sind dabei …

„Videos rundum IM: Das Client-Server-Modell“ weiterlesen

SneakPeak Bachelor: Kochkurs nach Scrum-Prinzip

Veröffentlicht: 20. Februar 2020

Das Vermitteln von agilen Arbeitsmethoden ist für viele Menschen zwar interessant, jedoch sind Vorträge über solche Themen oftmals monoton und reizlos. Die Agile Kitchen GmbH hat sich einen individuellen Weg ausgedacht, um diese agilen Methoden auf unterhaltsame Weise zu vermitteln. Sie haben einen Kochkurs entwickelt, der nach dem Scrum-Prinzip funktioniert. Durch die metaphorische und praktische …

„SneakPeak Bachelor: Kochkurs nach Scrum-Prinzip“ weiterlesen

WebLab HsH: Bachelorarbeit von Sarah Büchting, 2019

BestOf Bachelor: Webbasierte Programmierplattformen für Kinder im Vergleich

Veröffentlicht: 19. Februar 2020

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

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

Progressive Web Apps für IM: Informationsmanagement-Info

Veröffentlicht: 19. Februar 2020

Informationsmanagement-Info als PWA Autoren: Laili Ghods, Cemre Toppuz und Ogulcan Aktas PWA: Informationsmanagment – Info Quellcode Ziel: Unsere PWA soll einige allgemeine Informationen über unseren Studiengang vorstellen. Dabei haben wir uns die Texte von der offiziellen Webseite des Studiengangs genommen: https://im.f3.hs-hannover.de/studium/ Anforderungen Die Progressive Web App soll folgende Anforderungen (Use-Cases) erfüllen: Navigation: Anforderung: Navigation Beschreibung: Dem Nutzer soll …

„Progressive Web Apps für IM: Informationsmanagement-Info“ weiterlesen

WebLab und QpLuS-IM: Unser neues Team

Veröffentlicht: 9. Oktober 2019

Seit Januar 2019 ist das WebLab Teil des QpLuS-IM-Projekts im Studiengang Informationsmanagement. Auch QpLuS-IM widmet sich dem Ausbau von Blended-Learning-Szenarien sowie mehr Selbststeuerungskompetenz durch digitales Lernen und führt so den WebLab-Ansatz wunderbar weiter, wie im Detail auf der QpLuS-IM-Projekt-Website zu lesen ist. Neues WebLab-Team Da sich Einige des ursprünglichen 2017er WebLab-Teams inzwischen leider (und auch …

„WebLab und QpLuS-IM: Unser neues Team“ weiterlesen

InfoInMotion2019: Das WebLab stellt sich vor

Veröffentlicht: 6. Oktober 2019

Am Freitag, 11. Oktober 2019 ist es soweit: Unsere Veranstaltung “InfoInMotion2019: Information in Transformation” findet im DesignCenter auf der Expo Plaza 2 statt. Auch das WebLab ist dabei und stellt einige seiner besten, studentischen Arbeiten vor. Mehr zu InfoInMotion2019 samt Online-Anmeldung und Programm finden Sie auf der Website des Studiengangs Informationsmanagement. Wir freuen uns auf ihren …

„InfoInMotion2019: Das WebLab stellt sich vor“ weiterlesen

Progressive Web Apps für IM: Interaktiver Stundenplan

Veröffentlicht: 24. Juni 2019

Interaktiver Stundenplan Autoren: Hozan Hassan, Frederik Pusch, Valentin Griese, Marcel Hemmer und Lukas Fischer PWA: Interaktiver Stundenplan Quellcode Idee/Zielsetzung: Die Progressive Web App (PWA) „Interaktiver Stundenplan“ zum Studiengang Informationsmanagement bietet eineÜbers icht über aller Kurse des BIM unterteilt in die jeweiligen Semester. Die Kurse sollen einfach per Drag and Drop in einen Stundenplan gezogen werden. …

„Progressive Web Apps für IM: Interaktiver Stundenplan“ weiterlesen

Progressive Web Apps für IM: Teilnehmerverzeichnis ‚Social Contact‘

Veröffentlicht: 3. Juni 2019

Social Contact Autoren: Matthias Galda, Catharina Ochsner, Anja Preuße, Sarah Gehrmann fertige PWA Quellcode Idee/Zielsetzung Zweck der Progressive Web Apps (PWA) soll es sein, die Kontaktdaten der Ansprechpartner aufzulisten, die an der Veranstaltung „InfoInMotion2019“ am 11. Oktober teilnehmen. Überlegungen Die Startseite enthält eine Lightbox. Darin soll der User Informationen über die Website und ihren Zweck …

„Progressive Web Apps für IM: Teilnehmerverzeichnis ‚Social Contact‘“ weiterlesen

WebLab-Projekt: Bauhaus100 Jubiläum 2019

Veröffentlicht: 24. Mai 2019

Im Rahmen des 100jährigen Bauhaus Jubiläums 2019 sind Anja Preusse und Sarah Gehrmann vom WebLab an der Konzeption und Realisation von multimedialen Angeboten für die Sonderausstellung Ausdruckstanz und Bauhausbühne im August Kestner Museum beteiligt. In Kooperation mit der Abteilung Design und Medien und dem August Kestner Museum hat das WebLab ein kleines interaktives Spiel als …

„WebLab-Projekt: Bauhaus100 Jubiläum 2019“ weiterlesen

Progressive Web Apps für IM: Geschichte des Studiengangs Informationsmanagement

Veröffentlicht: 16. Mai 2019

Geschichte des Studiengangs Informationsmanagement Autoren: Alina Balandis, Aline Brun, Rebecca Poets und Leonie Weber PWA: Geschichte des Studiengangs Informationsmanagement Quellcode Idee/Zielsetzung Die Progressive Web App (PWA) soll Interessierten die Geschichte des Studiengangs Informationsmanagement an der Hochschule Hannover näher bringen. Dabei kann zwischen drei Menüpunkten ausgewählt werden. Neben einem virtuellen Rundgang wird ebenfalls durch einen Zeitstrahl …

„Progressive Web Apps für IM: Geschichte des Studiengangs Informationsmanagement“ weiterlesen

QpLuS-IM-Projekt startet durch: Noch mehr Selbststeuerungskompetenz durch digitales Lernen

Veröffentlicht: 15. Mai 2019

Im Rahmen des QpLuS-IM-Projekts werden die Studierenden des Studiengangs Informationsmanagement (regulär und berufsbegleitend) bei ihrer Kompetenzentwicklung durch selbstgesteuertes Lernen in digitalen Lernszenarien unterstützt. Studierende produzieren z.B. selbst digitale Lernformate und veröffentlichen Online-Inhalte zu ihren Kursergebnissen, die von den Studierenden nachfolgender Jahrgänge als Best Practice-Beispiele zum selbstgesteuerten Lernen genutzt werden. Mit der Bereitstellung von geeigneten Selbstlernmaterialien und durch …

„QpLuS-IM-Projekt startet durch: Noch mehr Selbststeuerungskompetenz durch digitales Lernen“ weiterlesen

App „Biennale Map Venice“ jetzt für Android und iOS

Veröffentlicht: 14. Mai 2019

Studierende aus dem 6. Semester im Studiengang Informationsmanagement entwickeln zurzeit die App Biennale Map Venice im Rahmen eines Projekts weiter, damit sich Besucher auf der Biennale in Venedig besser zurecht finden und zum richtigen Zeitpunkt am richtigen Ort sind. Hauptentwickler der App ist Leon Rostek vom WebLab. Aline Brun hat als Korrespondentin vor Ort dafür …

„App „Biennale Map Venice“ jetzt für Android und iOS“ weiterlesen

BestOf Bachelor: Gamification-Plugins für WordPress

Veröffentlicht: 13. Mai 2019

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

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

Progressive Web Apps für IM: Fragebogen zur Auswahl des Studienschwerpunkts

Veröffentlicht: 10. April 2019

Fragebogen zur Auswahl des Studienschwerpunkts Autoren: Lukas Wojtke, Cedric Herrmann, Niklas Salge und Sharam Etemadi PWA-Fragebogen zur Auswahl des Studienschwerpunktes Grundidee Die ursprüngliche Idee war eine Art Umfrage mit anschließender Auswertung. Im Verlauf der weiteren Ausarbeitung des Projektes wandelte sich die Zielsetzung in einen Selbsttest, welcher nach Beendigung unverzüglich ausgewertet wird. Das Ziel des Fragebogens …

„Progressive Web Apps für IM: Fragebogen zur Auswahl des Studienschwerpunkts“ weiterlesen

MM-SYS-2: Der Architekturstil Bauhaus

Veröffentlicht: 28. Januar 2019

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

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

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

Veröffentlicht: 10. Januar 2019

Autoren: Amelie Andresen & Artjom Arustamov Die fertige Arbeit finden sie hier. Konzept Die Seite zum „Bauhaus-Ereignisse 1919 – 1933“ kann in drei Teilbereiche aufgeteilt werden: Header mit integriertem Slider und Navigation Die Hauptseite mit dem vertikalem Zeitstrahl Footer mit den Direktoren One Pager Der Aufbau der Seite besteht aus nur einer HTML-Seite, die den …

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

WebLab macht Q_pLuS

Veröffentlicht: 10. Dezember 2018

Wir freuen uns sehr, dass ein gemeinsamer Projektantrag für Qualität in der Lehre erfolgreich war! Das WebLab wird ab 2019 das durch das MWK geförderte Q-Plus-IM-Projekt fachlich und technisch im Bereich der Webtechnologien und Multimediaentwicklung unterstützen. Weitere Infos und Neuigkeiten zu QpLuS-IM finden Sie auf unserer Projektwebsite.

Tutorial: Wetter Szenarien

Veröffentlicht: 12. November 2018

Tutorial: Wetter Szenarien Autoren: Fabian Krampe und Michel Kühne Das Konzept Das Konzept hinter dem Projekt sah vor, eine Animation zu schaffen, welche dem Nutzer alle möglichen Wetter Szenarien zeigt. Die Animation wird hierbei im Hintergrund eines einfachen Preloaders geladen. Der programmierte Button ermöglicht es außerdem, die Animation zu „verstecken“ oder diese wieder anzeigen zu …

„Tutorial: Wetter Szenarien“ weiterlesen

Tutorial: Einen Preloader erstellen

Veröffentlicht: 5. November 2018

Tutorial: Einen Preloader erstellen Autoren: Straube und Wisnia Konzept Preloader sind Animationen, die während dem Ladevorgang einer Website angezeigt werden. Sie informieren den Nutzer über Ladeprozesse und befriedigen sein Bedürfnis zu wissen, was während der Interaktion mit einer Website im Hintergrund abläuft. Gleichzeitig überbrücken die Wartezeit. So sind sie zum einen unterhaltsam, zum andern verbessern …

„Tutorial: Einen Preloader erstellen“ weiterlesen

Tutorial: Multistep Login Formular

Veröffentlicht: 29. Oktober 2018

Tutorial: Multistep Login Formular Autor: Ilja Melnik Einleitung Bei dieser Prüfungsleistung handelt es sich um eine konzeptionelle Erstellung eines Multistep Formulars mit funktionalen Animationen. Für die Umsetzung wurden ausschließlich Html-5, Css3 und Javascript (JQuery) verwendet. Die Grundidee ist ein Formular mit visuellem Feedback und einer inhaltlichen Strukturierung. Dies wird primär mit drei funktionalen Animationen umgesetzt: …

„Tutorial: Multistep Login Formular“ weiterlesen

Tutorial: Informativer OnePager für Austauschstudenten

Veröffentlicht: 22. Oktober 2018

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

„Tutorial: Informativer OnePager für Austauschstudenten“ weiterlesen

Videos rundum IM: Vormerkung Stabi Bremen

Veröffentlicht: 15. Oktober 2018

Vormerkung Stabi Bremen Autoren: Tore Hoffmann und Jacob Radel Arbeitsschritte in der Produktion: Zur Ideenfindung zum Thema Vormerkung in einer Bibliothek wurde zunächst über Inhalte in einem Brainstorming nachgedacht. Die möglichen Tools wurden auf Ihre Animationsmöglichkeiten und allgemeine Tauglichkeit geprüft. Die Hintergrundmusik wurde aus Programm Powtoon verwendet. Um die Inhalte in das Video einfügen zu …

„Videos rundum IM: Vormerkung Stabi Bremen“ weiterlesen

Tutorial: Dynamische Notendarstellung

Veröffentlicht: 8. Oktober 2018

Dynamische Notendarstellung Autor: Jana Avemarg Design Die Grundlage bildet eine auf HTML5 basierte Single-Page Website (1). Diese bietet den Vorteil, dass die Navigation ohne Verzögerung ausgeführt, da sich der Besucher immer der gleichen Seite befindet, ohne es zu merken. Für eine schönere Darstellung wurde eine öffentlich verfügbare Schriftart von google (2) und ein Farbschema von coolors.co …

„Tutorial: Dynamische Notendarstellung“ weiterlesen

Videos rundum IM: Die Funktionen der CampusCard

Veröffentlicht: 1. Oktober 2018

Die Funktionen der CampusCard (für Studierende der HSH) Autoren: Sarah Büchting und Antje Pellowski Kurzbeschreibung In unserem Video beschreiben wir die Funktionen der Campuscard. Wir stellen Martina, eine Studierende der Hochschule Hannover vor und erklären anhand dieses Beispiels die Funktionen der CampusCard. Die Informationen dazu entnahmen wir der Homepage der Hochschule (https://www.hs-hannover.de/it/services/stud/fhhcard). Konzept Unser Video …

„Videos rundum IM: Die Funktionen der CampusCard“ weiterlesen

Videos rundum IM: Einführung Bachelor Informationsmanagement

Veröffentlicht: 27. August 2018

Einführung Bachelor Informationsmanagement Autoren: Anthony Stevenson und Florian Lindmüller Idee Unsere Idee war ein Animiertes Video zum Thema Informationsmanagement an der Hochschule Hannover zu gestalten. Dabei sollten alle vermittelnden Kern-Kompetenzen transparent gemacht, sowie ein keiner Ausblick in eine mögliche berufliche Zukunft gegeben werden. Zielsetzung Die Zielsetzung beinhaltete darauf aufbauend ein fertiges Vorstellungsvideo, dass man vor …

„Videos rundum IM: Einführung Bachelor Informationsmanagement“ weiterlesen

Videos rundum IM: Erklärvideo – Was sind Stakeholder?

Veröffentlicht: 20. August 2018

Erklärvideo – Was sind Stakeholder? Autoren: Rabea Langholz Idee/Zielsetzung Meine Idee und Zielsetzung war es einen studiengangsbezogenen Fachbegriff zu erklären. Ich habe mich deshalb für die Art eines Erklärvideos entschieden. Nachdem ich den Begriff „Stakeholder“ für mein Video ausgewählt hatte, begann ich mit der Recherche nach Informationen. Darauffolgend erstellte ich eine Mindmap, in der ich …

„Videos rundum IM: Erklärvideo – Was sind Stakeholder?“ weiterlesen

BestOf Bachelor: Interaktives Storytelling zum Bauhaus100 Jubiläum

Veröffentlicht: 2. August 2018

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

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

WebLab-Projekt: Konzeption und Entwicklung einer mobilen App für die Biennale

Veröffentlicht: 28. Juli 2018

Leon Rostek vom WebLab hat in Zusammenarbeit mit Prof. Schult eine mobile App für die Biennale in Venedig entwickelt. Anfänglich beinhaltete die interaktive Karte alle Nationenpavillons der Architektur-Biennale 2018, die von Mai bis November in Venedig stattfand. Dieser Prototyp wird aktuell von von Studierenden des Studiengangs Informationsmanagement an die Kunst-Biennale 2019 angepasst und steht jetzt mit …

„WebLab-Projekt: Konzeption und Entwicklung einer mobilen App für die Biennale“ weiterlesen

Tutorials zu Webentwicklung

Veröffentlicht: 28. Juli 2018

Als fortlaufendes WebLab-Projekt veröffentlichen wir hier Tutorials zum Thema Webentwicklung. Einige Tutorials werden vom WebLab-Team erstellt, andere entstehen im Rahmen von Lehrveranstaltungen durch Studierende des Studiengangs Informationsmanagement (auch berufsbegleitend). Wir freuen uns auf Ihre Vorschläge für neue Tutorials! Bisher veröffentlichte Tutorials finden Sie hier.

WiSe 18/19: WebLab-Tutoren sind bei Lehre dabei

Veröffentlicht: 27. Juli 2018

Im kommenden Wintersemester 2018/19 werden zwei unserer Lehrveranstaltungen im Studiengang Informationsmanagement (auch berufsbegleitend) tatkräftig durch unsere studentischen Hilfskräfte vom WebLab unterstützt. Sowohl bei „Grundlegende Webtechniken 1“ (WWW1) als auch bei „Entwicklung von Multimediasystemen 1“ (MM-SYS-1) sind jeweils zwei Tutor*innen dabei. Bei WWW1 helfen euch Sarah und Anja gern während Sprechstunden weiter, wenn es um Fragen …

„WiSe 18/19: WebLab-Tutoren sind bei Lehre dabei“ weiterlesen

Videos rundum IM: Funktionen der CampusCard der HsH

Veröffentlicht: 9. Juli 2018

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet. Die besten Videos …

„Videos rundum IM: Funktionen der CampusCard der HsH“ weiterlesen

Videos rundum IM: Kompetenzfelder im Studiengang IM

Veröffentlicht: 2. Juli 2018

„Videos rundum IM: Kompetenzfelder im Studiengang IM“ weiterlesen

Tutorial: Login Kalender

Veröffentlicht: 18. Juni 2018

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor. Login Kalender Autoren: Melis Rufaioglu …

„Tutorial: Login Kalender“ weiterlesen

Tutorial: Klausuren Countdown

Veröffentlicht: 11. Juni 2018

„Tutorial: Klausuren Countdown“ weiterlesen

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

BestOf Bachelor: Virtueller Rundgang für die Expo Plaza

Veröffentlicht: 29. Mai 2018

Alina Finger hat in ihrer Bachelorarbeit im Studiengang Informationsmanagement (Hochschule Hannover) am Beispiel der Expo Plaza gezeigt, wie anschaulich ein virtueller Rundgang einen ersten Eindruck eines Ortes oder eines Gebäudes vermitteln kann. Insbesondere für die Erstorientierung an unbekannten Orten oder um sich einfach erst einmal umzuschauen sind virtuelle Rundgänge eine gute Idee. Alina hat bei ihrem virtuellen Rundgang …

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

Freie Bachelorthemen: Das könntet ihr gerade bei uns machen

Veröffentlicht: 14. Mai 2018

Hier findet ihr ein paar Themen, die aktuell (Stand Mai 2018) noch frei sind für mögliche Bachelorarbeiten im Studiengang Informationsmanagement. Meldet euch einfach per Email bei Frau Steinberg, wenn ihr euch für eins der Themen interessiert: Weiterentwicklung eines Virtuellen Rundgangs der Expo Plaza: Konzeption und Implementierung von detaillierten Zusatzinformationen zur Expo Plaza bzw. zum Studiengang …

„Freie Bachelorthemen: Das könntet ihr gerade bei uns machen“ weiterlesen

Videos rundum IM: Was ist Informationsmanagement?

Veröffentlicht: 9. April 2018

„Videos rundum IM: Was ist Informationsmanagement?“ weiterlesen

Tutorial: Radiales Menü mit JavaScript

Veröffentlicht: 24. März 2018

„Tutorial: Radiales Menü mit JavaScript“ weiterlesen

Tutorial: Ein mobiles Hamburger Menü

Veröffentlicht: 23. März 2018

„Tutorial: Ein mobiles Hamburger Menü“ weiterlesen

Tutorial: Registrierungs- und Loginformular mit jQuery

Veröffentlicht: 22. März 2018

„Tutorial: Registrierungs- und Loginformular mit jQuery“ weiterlesen

Videos rundum IM: Was ist eigentlich die Fernleihe?

Veröffentlicht: 21. März 2018

„Videos rundum IM: Was ist eigentlich die Fernleihe?“ weiterlesen

Videos rundum IM: Was ist Informationsmanagement?

Veröffentlicht: 22. Februar 2018

„Videos rundum IM: Was ist Informationsmanagement?“ weiterlesen

Tutorials

Veröffentlicht: 31. Januar 2018

Hier findet ihr Tutorials zu Webentwicklung mit HTML5, CSS3 und JavaScript sowie zu weiteren Themen, die im Studiengang Informationsmanagement oder auch sonst immer mal wieder interessant sein können. Nach und nach ergänzen wir hier neue Tutorials, die entweder von Studierenden im Rahmen von Lehrveranstaltungen oder vom WebLab-Team erstellt werden.

WebLab-Portfolio: Rundum Informationsmanagement

Veröffentlicht: 31. Januar 2018

In einigen Lehrveranstaltungen haben wir uns mit der medialen Aufbereitung von Inhalten rundum den Studiengang Informationsmanagement befasst. Von Videos, was Informationsmanagement überhaupt ist oder den Kompetenzfeldern bis zu interaktiven Storytellings zum studentischen Leben oder Infografiken mit JavaScript findet ihr hier in unserer bisherigen Sammlung.

BestOf studentischer Arbeiten

Veröffentlicht: 31. Januar 2018

In diesem Portfolio-Bereich findet Ihr studentische Arbeiten aus dem Studiengang Informationsmanagement und berufsbgleoitend, die besonders gut gelungen sind. Hier veröffentlichen wir sehr gute Ergebnisse aus Lehrveranstaltungen und herausragende Bachelorarbeiten. Bislang findet ihr hier Arbeiten aus dem Kompetenzfeld Web Information Management mit Schwerpunkt auf interaktive Medien und Webentwicklung. Wir hoffen, dass wir in Zukunft auch Arbeiten …

„BestOf studentischer Arbeiten“ weiterlesen

Wunderbare Weihnachten und guten Rutsch ins neue Jahr!

Veröffentlicht: 23. Dezember 2017

Wir wünschen Ihnen entspannte und besinnliche Weihnachtsfeiertage, einen guten Endspurt und einen tollen Start ins neue Jahr 2018! Ihr WebLab-Team 🙂

Dropdown Multiselect List mit Semantic UI

Tutorial: Multiselect Dropdown Liste mit Semantic UI

Veröffentlicht: 7. Dezember 2017

Eine Multiselect Dropdown Liste erstellt im Rahmen des Moduls „Medienintegration“ im Masterstudium Informations- und Wissensmanagement (Hochschule Hannover, Dozent: Prof. Dr.-Ing. M. Steinberg) Autor: Franziska Braun Tutorial Die Multiselect Dropdown-Listen werden in Online-Formularen (Bestellungen, Kontaktformulare) oder Online-Fragebögen verwendet. In diesem Beispiel können Lehrveranstaltungen ausgewählt werden. Die Anzahl ist auf maximal 3 Lehrveranstaltungen begrenzt. Eine HTML Dropdown-Listen allein ist …

„Tutorial: Multiselect Dropdown Liste mit Semantic UI“ weiterlesen

Tutorial: Informationsmanager auf dem Arbeitsmarkt

Veröffentlicht: 21. November 2017

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

„Tutorial: Informationsmanager auf dem Arbeitsmarkt“ weiterlesen

Stop-Motion: Post-Its und Gaming

Veröffentlicht: 20. November 2017

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

Tutorial: Scroll Percent Display with liquid Animation

Veröffentlicht: 17. November 2017

„Tutorial: Scroll Percent Display with liquid Animation“ weiterlesen

Tutorial: Interaktive Führung durch den Studiengang Informationsmanagement

Veröffentlicht: 13. November 2017

„Tutorial: Interaktive Führung durch den Studiengang Informationsmanagement“ weiterlesen

Ein Akkordeonmenü für die Fakultät III, Hochschule Hannover, Expo Plaza

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

Veröffentlicht: 9. November 2017

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

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

Veröffentlicht: 8. November 2017

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

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

Veröffentlicht: 7. November 2017

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

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

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

Veröffentlicht: 28. September 2017

Im Rahmen der Ideen-Expo wurde von der Hochschule ein Kartenspiel gedruckt, das an potentielle Studieninteressierte ausgehändigt werden soll. Damit dieses Kartenspiel jedoch nicht nur analog verfügbar ist, hat das WebLab der Hochschule Hannover eine digitale Version des Spiels mittels JavaScript entwickelt. Als erstes haben wir eine vorläufige Spieloberfläche geschaffen, auf der momentan im oberen Bereich …

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

Tutorial: WWW-Techniken 1 – Wie bekomme ich meine Website ins Internet?

Veröffentlicht: 28. September 2017

Bevor Sie eine Website online stellen können, müssen Sie ein paar Vorbereitungen treffen: Beantragen Sie einen eigenen Webspace beim Webhosting-Team der Hochschule Hannover. beachten Sie hierbei, dass der dort gewählte Benutzername der erste Teil Ihres Domainnamens wird. Fassen Sie sich also möglichst kurz. Der Webspace ist nötig, damit Ihre Internetseite später rundum die Uhr öffentlich über …

„Tutorial: WWW-Techniken 1 – Wie bekomme ich meine Website ins Internet?“ weiterlesen

WebLab-Projekt: Portfolio zu studentischen Arbeiten

Veröffentlicht: 28. Juli 2017

In unserem Portfolio arbeiten wir fortlaufend daran, gute studentische Arbeiten aus verschiedenen Kursen im Studiengang Informationsmanagement hier aufzubereiten und zu veröffentlichen. Angefangen haben wir mit Inhalten aus den folgenden Kursen sowie sehr guten Bachelorarbeiten: Grundlegende Web-Techniken 1 Entwicklung von Multimediasystemen 1 und 2 Ausgewählten Fragen der Medieninformatik.

WebLab-Projekt: Online-Exponate für die Ideen Expo 2017

Veröffentlicht: 28. Juni 2017

Das WebLab hat ein Interaktives Storytelling zum studentischen Alltag und mehrere Videos aus der Kategorie Rundum IM als Exponate für die Ideen Expo 2017 aufbereitet und zur Verfügung gestellt. So konnten insbesondere Schüler*innen einen anschaulichen Einblick in den Bachelorstudiengang Informationsmanagement an der Hochschule Hannover gewinnen.

Videos rundum IM: Was ist Informationsmanagement?

Veröffentlicht: 4. Mai 2017

Was ist eigentlich Informationsmanagement? Diese Frage stellt sich mit Sicherheit jeder, der zum ersten Mal von dem Studiengang hört. Die Informationsmanagementstudentin Frieda Josi hat sich dieser Frage für die Prüfungsleistung des Moduls Wissensverarbeitung von Audio- und Bildinformationen angenommen und ein einminütiges Informationsvideo angefertigt, das sich mit der Definition, den Aufgaben und dem Einsatzgebiet von Informationsmanagement …

„Videos rundum IM: Was ist Informationsmanagement?“ weiterlesen

Infografik zu Informationsmanagement an der Hochschule Hannover

Interaktive Infografik: Was macht eigentlich ein Informationsmanager?

Veröffentlicht: 19. April 2017

Im Projekt „Infografiken“ (Sommersemester 2016) haben Joana Hollasch und Johannes Burchert eine interaktive Infografik mit HTML5, CSS3 und JavaScript zu den verschiedenen Bereichen erstellt, mit denen sich ein Informationsmanager im Studium und später im Berufsalltag beschäftigt. Die Infografik zeigt, wie vielseitig die Aufgabenbereiche eines Informationsmanagers sind. Neben Informationswissenschaften, Informatik und Webentwicklung sind z.B. auch Bereiche …

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

BestOf: WWW-Techniken I Wise 2016/17

Veröffentlicht: 7. April 2017

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

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

(Photo by Nong Vang on Unsplash)

10. November 202015. Juni 2023

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

Autor*in: Anna Selitski und Anna-Lisa Voigt

User Experience Scala — Von einer very bad zu einer exzellenten User Experience ©Olivier Le Moal – stock.adobe.com

Einen Prototype in dem Designertool Figma zu erstellen ist eine sehr schnelle und einfache Sache. Vielleicht kennst du auch die Bezeichnung Klickdummy für Prototype. Wenn du mal Screens für eine App oder eine Webseite erstellst, kannst du einfach mit einem Klickdummy die User Experience und die User Journey darstellen. Aber wie funktioniert das Erstellen von einem Prototype mit Figma? Und was sind Figma und die User Journey überhaupt? Das und weitere spannende Informationen zu diesem Thema zeigen wir dir in dem folgenden Beitrag!

Dieser Beitrag im Überblick:

Eine Einführung zu Figma
Fünf Gründe für Figma
Prototype, User Journey – Was genau ist das?
Tutorial: Wie erstelle ich einen Prototype in Figma?
Prototype erstellen – Alle Schritte auf einem Blick
Das Prototype-Testing mit Figma Mirror

Eine Einführung zu Figma

Fangen wir erst einmal mit Figma an. Figma ist ein Web-basiertes Programm, welches zum Designen von Screens für eine App oder Webseite gedacht ist. Vielleicht kennst du auch das Tool Sketch. Dort kannst du auch leicht und unkompliziert Designs erstellen, jedoch spätestens wenn man zu zweit an einem Projekt arbeitet, kann man sich dort schnell in die Quere kommen. Figma hingegen ermöglicht dir das Designen von Screens mit vier oder mehr Händen! Du fragst dich wie das gehen soll? In Figma können mehrere Designer gleichzeitig an ihrem eigenen Gerät und an derselben Datei arbeiten, ohne sich dabei zu stören.

Fünf Gründe für Figma^[1]

Fünf Gründe für Figma - Prototype erstellen — Das sind die wichtigsten fünf Gründe für Figma. ©Song_about_summer – stock.adobe.com

Das Interface von Figma:
Wer mit Figma arbeitet merkt schnell, dass das Interface dieses Tools von Designern für Designer entwickelt wurde. Aber auch für Anfänger ist das Bedienen der Software, nach ein paar Stunden Einarbeitung, kein großes Problem mehr. Die zahlreichen Shortcuts sind unserer Meinung nach unbezahlbar! Shortcuts? Das sind unzählige Tastenkombinationen für verschiedene Werkzeuge. Somit bleiben dir Klicks und Zeit erspart!
Schnell zum Ergebnis mit wenig Aufwand:
Wie schon erwähnt ist Figma ein nutzerfreundliches Tool und du kannst den Umgang mit dem Programm schnell lernen. Aber kennst du das Problem, wenn du in einer großen Gruppe arbeitest und du immer alles hin und her schicken musst, um auf dem aktuellsten Stand zu bleiben? Und dann musst du auf das Dokument deines Gruppenmitglieds warten, um mit deiner Arbeit anfangen zu können. Tja, bei Figma kommt sich bei einer Gruppenarbeit keiner mehr in die Quere, denn jeder kann an seinem Gerät in der gemeinsamen Datei arbeiten! Wir finden das großartig, denn so kann jeder die Schritte des anderen verfolgen und dementsprechend seine Arbeit anpassen. Somit musst du nicht mehr auf die anderen warten, bis du mit deiner Aufgabe anfangen kannst.
Verknüpfungen:
Jetzt fragst du dich sicherlich was Figma nicht kann? Figma ist ein Tool für die interaktive Gestaltung von Screens, hat aber auch seine Schwächen. Diese umgeht Figma mit Verknüpfungen zu anderen Tools, wie Sketch oder Photoshop. So kannst du ganz leicht Funktionen von anderen Programmen über Figma verwenden.
Für jeden und zu jeder Zeit verfügbar:
Du verspürst mitten in der Nacht den Drang, an deinen Screens weiterzuarbeiten, aber dein Gerät liegt auf der Arbeit? Mit Figma kannst zu jederzeit und überall auf deine Dateien zugreifen, solange du einen Internetzugang und deine Zugangsdaten hast.
Immer aktuell sein:
Das lästige Problem mit der Aktualität der Dateien ist mit Figma Geschichte. Kein ständiges Fragen mehr, welche Version die aktuellste ist, denn es gibt nur noch die eine Version, die online ist! Auch das selbstständige Speichern von Figma erleichtert deine Arbeit und Ergebnisse können nicht mehr verloren gehen. Perfekt, oder?!

Prototype, User Journey – Was genau ist das?

Ein Klickdummy wird für ein Projekt erarbeitet — Du kannst einen Prototype erstellen, um die Funktionen und den Sinn von Interaktionsmodulen deiner zukünftigen App zu zeigen. ©artursfoto – stock.adobe.com

Einen Prototype benötigst du dann, wenn du Funktionen und Sinn von bestimmten Buttons und Interaktionsmodulen zeigen möchtest. Du kannst einen Klickdummy auch für die Darstellung der User Journey, also der Weg, den der Nutzer in deiner App oder auf deiner Webseite beschreiten soll, zeigen^[2].
Sowas ist dann nützlich, wenn du zum Beispiel die Screens deinem Auftraggeber vorstellen möchtest. Mit einem Klickdummy kann sich der Auftraggeber besser vorstellen, welche Funktionen ein Button auslöst, wenn der Nutzer darauf klickt. Außerdem ist so ein Prototype auch dann sinnvoll, wenn du deine Logik der User Experience überprüfen möchtest. Denn es kann schon mal vorkommen, dass man zum Beispiel vergisst, einen Zurück-Button einzubauen und der Nutzer nicht mehr den Weg nach Hause – also zur Home Seite – findet.

Tutorial: Wie erstelle ich einen Prototype in Figma?

Jetzt fragst du dich wie das gehen soll? Kein Problem, zu Beginn musst du dafür die Figma Datei öffnen. Wenn du dort noch keine Screens angelegt hast, machst du das jetzt erst einmal. Du wirst die Screens benötigen, welche du anschließend miteinander zu einem Prototype verbinden möchtest.

Schritt 1:

Hast du die Screenshots angelegt? Falls du mit ja antwortest, klickst du einfach oben rechts auf das Symbol Prototype. Du weißt nicht genau wo? Siehst du den orangen Pfeil im Screenshot? Er zeigt dir genau den Bereich, den du auswählen solltest. Der Prototype Bereich öffnet sich anschließend nach der Auswahl rechts in Figma (Schritt 1).

Prototype erstellen — **Schritt 1**: Klicke oben rechts auf Prototype (zum Vergrößern anklicken) ©Voigt; Selitski

Schritt 2:

Jetzt klickst du auf das gewünschte Objekt, also die Stelle, wo der Nutzer hinklicken wird (Schritt 2).

Prototype erstellen über Figma — **Schritt 2**: Wähle das gewünschte Objekt aus (zum Vergrößern anklicken) ©Voigt; Selitski

Schritt 3:

Nun siehst du um das ausgewählte Objekt herum den Umriss eines blauen Vierecks. Klicke auf den Punkt, der sich auf der rechten Kante des Vierecks befindet und halte dabei deine Maustaste gedrückt. Ziehe nun deine Maus auf den nächsten Screen, der danach angezeigt werden soll. Jetzt kannst du einen blauen Pfeil sehen, der von dem ausgewählten Objekt auf den nächsten Screen zeigt (Schritt 3).

In dem von uns dargestellten Beispiel, wählten wir die App Kalender von dem Screen Startscreen aus. Die Kalenderapp soll sich nun bei einem Klick oder Touch mit dem Finger öffnen, dies zeigt jetzt der blaue Pfeil, welcher auf den nächsten Screen Kalender zeigt.

Auf diese Art und Weise kannst du nun weitere Screens mit den vorherigen verbinden und so die User Journey des Nutzers in deiner App oder Webseite darstellen. Genauso kannst du ganz schnell und einfach einen Prototype in Figma erstellen!

Schritt 4:

Pass dabei auf, dass du die richtigen Objekte mit den richtigen Screens zusammenführst. Sodass der Prototype die richtige, und von dir gewünschte, Reihenfolge anzeigt. Um die richtige Reihenfolge zu kontrollieren, kannst du dich an den blauen Pfeilen orientieren (Schritt 4).

In unserem Beispiel zeigen wir dir, dass wir vom Startscreen anfangen und auf das App-Symbol des Kalenders drücken. Daraufhin öffnet sich der Kalender, jetzt wollen wir einen Kalendereintrag hinzufügen. Dafür drücken wir auf das runde Plus-Icon und der Kalendereintrag öffnet sich.

Schritt 5:

Wenn du alle Schritte erfolgreich erledigt hast und die Pfeile soweit stimmen, ist es an der Zeit, den Klickdummy zu starten. Dafür klickst du einfach oben links, bei dem ersten Screen, auf das blaue Viereck mit dem weißen Dreieck (Schritt 5).

Daraufhin öffnet sich in einer neuen Datei der, von dir erstellte, Prototype. Jetzt kannst du auf die Objekte klicken, die du zuvor ausgewählt hast. Wenn daraufhin der nächste angezeigte Screen der Richtige ist, stimmt deine User Journey überein und der Prototype ist bereit für die Vorstellung bei deinem Auftraggeber!

Prototype erstellen – Alle Schritte auf einem Blick

Klicke auf Prototype oben rechts bei den Werkzeugtools.
Wähle das gewünschte Objekt, welches du in dem Prototype anklicken möchtest.
Klicke auf den Punkt innerhalb des blauen Vierecks und ziehe diesen zum gewünschten Screen.
Wiederhole jetzt die gleichen Schritte (Schritt 2) für die nächsten Screens.
Klicke oben rechts auf den Pfeil, um den Prototype zu starten.

Etwas hat nicht geklappt, oder hast du vielleicht einen Schritt vergessen? Keine Panik! Im folgenden Video Prototype / Klickdummy über Figma erstellen zeigen wir dir, die einzelnen Schritte per Desktopaufnahme.

Das Prototype-Testing mit Figma Mirror

Du kannst den Klickdummy und die User Journey auch mit der App Figma Mirror testen. Dies bringt dir den Vorteil, dass du deine erstellten Screens auch auf deinem Smartphone sehen kannst. So kannst du das Look and Feel deiner Screens auf deinem Smartphone bekommen. Auch die Größe von deinen Objekten und Texten kannst du so überprüfen.

Dafür brauchst du nur Figma Mirror aus dem Play Store oder dem App Store auf dein Smartphone/Tablet herunterladen. Anschließend meldest du dich mit deinen gewohnten Daten aus Figma an. Zu guter Letzt klickst du in deiner Arbeitsmappe auf den Startscreen deines Prototypes, dieser wird dir nun auf deinem Smartphone angezeigt. Jetzt kannst du auf deine ausgewählten Objekte tippen und so überprüfen, ob der darauffolgende Screen der Gewünschte ist und ob die User Journey mit der gezeigten Reihenfolge übereinstimmt.

Ein Tipp von uns: Wenn du die User Journey von einer App darstellen möchtest, nimm am besten dafür dein Smartphone. Möchtest du dir aber eine Webseite anschauen, welche noch nicht responsiv ist, verwende dafür lieber die App auf einem Tablet.

Viel Erfolg!

great user experience — Mit einer exzellenten User Experience hast du auch zufriedene Nutzer ©blacksalmon – stock.adobe.com

Wir hoffen, dass wir dir mit der Anleitung für die Erstellung eines Prototypes mit Figma helfen konnten und du damit deine User Journey darstellen kannst!

Quellen

Auf die [Hochzahl] klicken, um zum zugehörigen Absatz zurückzukehren.

¹ Vgl. Ornella (2018): Designen mit vier Händen: 5 Gründe warum du Figma brauchst. Online unter https://www.dieproduktmacher.com/blog/designen-mit-vier-haenden-5-gruende-warum-du-figma-brauchst [Abruf am 06.06.2020]

² Vgl. usability.de (o. J.): User Experience ganzheitlich verstehen und optimieren. Online unter https://www.usability.de/leistungen/methoden/user-journey-mapping.html [Abruf am 06.06.2020]

Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Content Management (Sommersemester 2020, Andre Kreutzmann) entstanden.

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