Multimedial lehren und lernen (eBook)

Inhalt 6
Vorwort 16
1 Digitalisierungsziele in der Bildung 20
1.1 Qualitätsverbesserung versus Rationalisierung 20
1.2 Irrglaube: Kampf gegen den Lehrermangel 21
1.3 Erfahrungen in Lockdown-Zeiten 24
1.3.1 Kontrollphilosophie im Unterricht 24
1.3.2 Soziales Leben oder pure „Druckbetankung“? 25
1.4 Mehrwegeausbildung und Lernkanäle 27
1.5 Effizienz des Lernens 28
1.5.1 Selektion durch Belastung? 28
1.5.2 Beschleunigung des Lernerfolgs 29
1.6 Geografische Unabhängigkeit 30
2 Das H5P-Projekt 34
2.1 Die Idee hinter H5P 34
2.2 Offene Quellen 35
2.3 Open Educational Resources (OER) 38
2.4 Pro und contra H5P 39
3 H5P in der Praxis 42
3.1 H5P ausprobieren 43
3.1.1 Editor in H5P.org 46
3.2 H5P-Inhalte in Moodle verknüpfen 55
3.2.1 Verlinkung von H5P im Moodle-Editor 56
3.2.2 H5P-Import im Moodle-Editor 61
3.2.3 H5P in beliebiger Webseite? 65
3.2.4 Das H5P-Editor-Plugin 66
3.2.4.1 Installation des H5P-Plugins in Moodle 67
3.2.4.2 H5P-Aktivität: Inhalte in Moodle erstellen 75
3.2.4.3 H5P-Benutzerrechte in Moodle 80
3.3 Bewertungen in Moodle 81
4 H5P-Inhaltstypen 86
4.1 Accordion 94
4.2 Advent Calendar 95
4.3 Agamotto 99
4.4 Arithmetic Quiz 103
4.5 Audio 106
4.6 Audio Recorder 107
4.7 Branching Scenario 109
4.8 Chart 114
4.9 Collage 115
4.10 Column 117
4.11 Course Presentation 119
4.12 Dialog Cards 122
4.13 Dictation 125
4.14 Documentation Tool 129
4.15 Drag and Drop 131
4.16 Drag the Words 136
4.17 Essay 140
4.18 Fill in the Blanks 144
4.19 Find Multiple Hotspots 148
4.20 Find the Hotspot 152
4.21 Find the Words 154
4.22 Flash Cards 158
4.23 Guess the Answer 161
4.24 Iframe Embedder 163
4.25 Image Hotspots 165
4.26 Image Juxtaposition 168
4.27 Image Pairing 171
4.28 Image Sequencing 177
4.29 Image Slider 180
4.30 Interactive Book 182
4.31 Interactive Video 189
4.31.1 Mögliche Probleme mit Interactive Video 189
4.31.2 Video hochladen und konfigurieren 191
4.31.3 Interaktivität hinzufügen 195
4.31.4 Abschlusstest/Zusammenfassung 196
4.31.5 Interactive Video aus Sicht der Lernenden 198
4.32 KewAr Code 203
4.33 Mark the Words 205
4.34 Memory Game 208
4.35 Multiple Choice 212
4.36 Personality Quiz 217
4.37 Quiz (Question Set) 222
4.38 Single Choice Set 228
4.39 Speak the Words/Speak the Words Set 230
4.40 Summary 234
4.41 Timeline 238
4.42 True/False Question 242
4.43 Virtual Tour 360° 244
5 Digitale Fotos für H5P-Inhalte 254
5.1 Größen und Auflösungen 254
5.2 Bildbearbeitung mit GIMP 262
5.2.1 Bildbereiche ausschneiden 263
5.2.2 Ebenen 267
5.2.3 Transparenz 270
5.3 360°-Fotografie 272
6 Lernvideos erstellen 274
6.1 Planung eines Lehrvideos – das eigene Drehbuch 275
6.2 Was bei einem Videodreh bevorsteht 275
6.2.1 Dauer des Videos planen 276
6.2.2 Zeit und Kosten der Herstellung 278
6.2.3 Zielgruppe 278
6.2.4 Drehbuch und Storyboard 279
6.2.4.1 Das Drehbuch 280
6.2.4.2 Das Storyboard 283
6.2.5 Casting und Kooperationen 283
6.2.6 Location-Planung 285
6.2.7 Musik und Rechte 286
6.3 Aufnahmetechnik 287
6.3.1 Aufnahme-Hardware 288
6.3.1.1 Mikrofone 288
6.3.2 Kameras 291
6.3.2.1 Das Smartphone als Aufnahmegerät 291
6.3.2.2 Laptop-Kamera 292
6.3.2.3 USB-Webcam 293
6.3.2.4 Drohnen 293
6.3.2.5 360°- und 720°-Kamera 293
6.3.2.6 Stethoskop-Kamera 296
6.3.2.7 Action-Cam/Dashcam 298
6.3.2.8 Digitale Foto-Kamera 298
6.3.2.9 Camcorder 298
6.3.3 Aufnahme-„Handwerk“ 299
6.3.3.1 Ruhe und Bewegung 299
6.3.3.2 Licht und Schatten 299
6.3.3.3 Sprecherblickrichtung 300
6.3.3.4 Der „Goldene Schnitt“ 301
6.3.3.5 Richtige Kleidung: Streifen und Karos? 302
6.3.3.6 Hintergründe 302
6.3.3.7 Innen- und Außenaufnahme 303
6.4 Animationen und Erklärvideos 304
6.4.1 Videoexport aus Präsentationen 304
6.4.2 Bildschirmaufnahmen 308
6.4.2.1 TechSmith Camtasia 308
6.4.2.2 Screencast O Matic 309
6.4.3 Animierte Erklärvideos 311
6.5 Videoschnitt 315
6.5.1 Videosequenzen schneiden 315
6.5.2 Achtung: Speichergröße! 318
7 Rechtliches 322
7.1 Urheberrecht und Nutzungsrecht 323
7.1.1 Urheber 323
7.1.2 Vervielfältigungs- und Verbreitungsrecht 323
7.1.3 Gesetzlich erlaubte Nutzung im Unterricht 324
7.1.3.1 Änderung eines Werks 325
7.1.3.2 Quellennachweis 326
7.1.4 Erlöschen des Urheberrechts 326
7.1.5 Angemessene Vergütung 326
7.2 Persönlichkeitsrecht 327
7.2.1 Recht am eigenen Bild 327
7.2.2 Sonderfall „Gruppenbilder“ 328
7.2.3 Publikation in sozialen Netzwerken 329
7.2.3.1 Posting 329
7.2.3.2 Teilen und Verlinken 330
7.2.3.3 Veränderung von Werken in sozialen Netzen 330
7.2.3.4 Liken ohne Risiko? 331
7.2.4 Kinderfotos 331
7.2.5 Creative Common, GNU und Public Domain 332
7.2.5.1 GPL – GNU General Public License 332
7.2.5.2 Public Domain – gemeinfrei 332
7.2.5.3 Creative Common (CC) 333
7.2.5.4 Open Educational Resources (OER) 334
7.2.6 Problemfall: Verwaiste Werke 336
7.3 Datenschutz 337
7.3.1 Datenschutz in den letzten Jahrzehnten 337
7.3.2 Datenschutz ist Menschenrecht 338
7.3.3 Datenschutzgrundverordnung (DSGVO) 338
7.3.3.1 Grundsätze zur Verarbeitung personenbezogener Daten 339
7.3.3.2 Rechte der betroffenen Personen 341
7.3.3.3 Administrative Vorgaben 342
7.3.3.4 Internationale Datenübermittlung 343
7.3.3.5 Sanktionen 344
7.3.4 Datenschutzverletzung durch die „Hintertür“ 344
8 Workshop: HTML5 346
8.1 Grundsyntax 346
8.1.1 Standardelemente 347
8.1.1.1 Absätze 347
8.1.1.2 Überschriften 348
8.1.1.3 Listen und Aufzählungen 348
8.1.1.4 Container-Elemente 351
8.2 Bilder in HTML5 353
8.2.1 Barrierefreiheit 354
8.2.2 Bildgrößen und Verzerrungen 354
8.2.3 Responsives Design 356
8.2.4 Imagemaps 358
8.2.5 Die erste HTML5-Seite 359
8.3 Multimediales HTML5 361
8.3.1 Video in HTML 361
8.3.2 Audio in HTML 363
8.3.3 Kurzexkurs: SVG-Vektorgrafik 363
8.4 HTML-Formulare 367
8.4.1 Das Formular-Element 367
8.4.1.1 Was das Formular tun soll 367
8.4.1.2 Attribut „method“ (GET und POST) 368
8.4.2 Das Label-Element 368
8.4.3 Das < textarea>
8.4.4 Das < input>
8.4.4.1 Formularfelder für Text 369
8.4.4.2 Formularfelder für Zeiten 371
8.4.4.3 Formularfelder für numerische Werte 372
8.4.4.4 Checkboxen 372
8.4.4.5 Radiobutton 373
8.4.4.6 Datei-Upload 374
8.4.4.7 Listen mit dem Element < select>
8.4.5 Das < button>
8.5 Tabellen 379
8.5.1 Tabellen-Grundelemente 379
8.5.2 Tabellen-Über-/Unterschriften 380
8.5.3 Zellen verbinden 381
9 Exkurs: CSS-Grundlagen 384
9.1 Zusammenspiel von HTML und CSS 385
9.1.1 Externe Formatdatei 385
9.1.2 Format-Code im HTML-Kopf 386
9.1.3 Direkte Formate mit einem Attribut 386
9.1.4 Kombinationen sind möglich 387
9.2 CSS-Selektoren 387
9.2.1 Selektoren für Elemente, Klassen, IDs 388
9.2.1.1 Typenselektoren 388
9.2.1.2 Klassenselektoren 389
9.2.1.3 ID-Selektoren 390
9.2.1.4 Hierarchien der Selektoren 391
9.2.1.5 Kombinationen von Selektoren 394
9.2.2 Pseudoklassen 399
9.2.3 Dynamische Pseudoklassen 402
9.2.4 Pseudoelemente 405
9.3 Einfache CSS-Formate 407
9.3.1 Farben und Hintergründe 407
9.3.2 Textformate 411
9.3.2.1 Schriftgröße 411
9.3.2.2 Schriftdekorationen 411
9.3.2.3 Weitere Schriftattribute 412
9.3.2.4 Text-Transformationen 412
9.3.2.5 Schattierung 413
9.3.2.6 Schriftart 414
9.3.3 Boxmodell 415
9.3.3.1 Elementgrößen 416
9.3.3.2 Innenabstand (Padding) 416
9.3.3.3 Rahmen und Begrenzungen (Border) 417
9.3.3.4 Außenabstände (margin) 418
9.3.3.5 Inline-, Block- und Inline-Block-Elemente 420
9.4 Wichtige CSS-Eigenschaften 421
9.4.1 Eigenschaft „float“ 421
9.4.2 Eigenschaft „position“ 425
9.4.2.1 position: absolute 425
9.4.2.2 position: relative 428
9.4.3 Eigenschaft „display“ 430
9.4.4 Die visibility-Eigenschaft 431
10 Exkurs: JavaScript 434
10.1 Grundlegendes 435
10.1.1 JavaScript in HTML einbinden 435
10.1.2 JavaScript ist casesensitiv 436
10.1.3 Zeilenabschluss mit Semikolon 437
10.1.4 Kommentare in JavaScript 438
10.1.5 Variable und Variablentypen? 438
10.2 Einfache JavaScript-Ausgaben 441
10.2.1 Dialogboxen mit JavaScript 441
10.2.1.1 Einfaches JavaScript-Popup (alert-Box) 441
10.2.1.2 Bestätigungs-Dialog (confirm-Box) 443
10.2.1.3 Eingabe-Dialog (prompt-Box) 443
10.2.2 JavaScript baut ganze Webseiten 444
10.2.3 Konsole als Entwicklerhilfe 447
10.2.4 Gezielte Ausgabe in HTML-Dokumenten 449
10.3 Das Document Object Model (DOM) 453
10.3.1 Das window-Objekt 453
10.3.1.1 window.screen 456
10.3.1.2 window.history 457
10.3.1.3 window.document 458
10.3.2 Das (HTML-)Document Object Model (DOM) 460
10.3.2.1 Die Methode getElementById und innerHTML 460
10.3.2.2 Methoden zum Adressieren von Elementen 461
10.3.11.9 Eigenschaften von HTML-Elementen 463
10.4 Variablen und Konstanten 463
10.4.1 Datentypen 464
10.4.2 Typensicherheit 465
10.4.3 Datentypen und Typensicherheit 465
10.4.4 Deklarationen und Gültigkeitsbereiche 467
10.4.4.1 Variablendeklaration mit var 467
10.4.4.2 Konstanten-Deklarationen mit const 471
10.4.4.3 Lokale Variablen mit let 472
10.4.5 Datentyp einer Variablen ermitteln 474
10.5 Kontrollstrukturen 475
10.5.1 Operatoren 475
10.5.1.1 Arithmetische Operatoren 476
10.5.1.2 Zuweisungsoperatoren 478
10.5.1.3 Verknüpfungen 479
10.5.1.4 Logische Operatoren 480
10.5.1.5 Vergleichsoperatoren 481
10.5.1.6 Bedingungsoperator 482
10.5.2 Verzweigungen 483
10.5.2.1 Einfache „if“-Abfrage 483
10.5.2.2 Verzweigung mit zwei Möglichkeiten „if“ – „else“ 485
10.5.2.3 Verzweigungen mit „n“ Möglichkeiten: „if“ – „else if“ – „else“ 486
10.5.2.4 Verzweigungen mit „n“ Möglichkeiten: „switch“ – „case“ 487
10.5.3 Schleifen 491
10.5.3.1 while-Schleife 492
10.5.3.2 do-while-Schleife 494
10.5.3.3 Zählschleife – for 495
10.5.3.4 Schleifen für Arrays und Objekte 496
10.6 Funktionen 500
10.6.1 Eigene Funktionen 501
10.6.2 Feste JavaScript-Funktionen 503
10.7 Objekte 505
10.7.1 Eigenschaften und Methoden 505
10.7.2 Ein Objekt erzeugen 505
10.7.3 Eigenschaften und Methoden nutzen 507
10.7.4 Wo bleiben die Klassen? 507
10.7.5 Objekte instanzieren 508
10.7.6 Fest definierte JavaScript-Objekte 509
10.8 Ereignisse auswerten 510
11 Kurzeinführung in PHP 514
11.1 XAMPP als Testumgebung 514
11.2 PHP-Grundstruktur 519
11.3 Variablen, Konstanten, Datentypen 520
11.3.1 Variablen und Datentypen 521
11.3.2 Datentypen 522
11.3.3 Konstanten 525
11.3.4 Zeichenketten (Strings) 525
11.3.5 Verwendung von Operatoren 526
11.3.5.1 Arithmetische Operatoren 526
11.3.5.2 Zuweisungsoperatoren 527
11.3.5.3 Prioritäten bei Rechenoperation 528
11.3.5.4 Inkrement- und Dekrement-Operatoren 528
11.3.5.5 Vergleichsoperatoren und logische Operatoren 529
11.4 Schleifen und Verzweigungen 530
11.4.1 if und else 531
11.4.2 if oder „?“? 532
11.4.3 switch und case 533
11.4.4 while-Schleife 534
11.4.5 do .?.?. while-Schleife 536
11.4.6 for 537
11.4.7 foreach 538
11.4.8 break und continue in Schleifen 539
11.4.9 Verschachtelungen von Schleifen 540
11.5 PHP-Funktion 540
11.5.1 Einsatz einer Funktion 541
11.5.2 Eigene Funktionen 542
11.5.3 Variablen in Funktionen 544
11.5.3.1 Lokale Variablen 544
11.5.3.2 Globale Variablen 545
11.5.4 Funktionen in separaten Bibliotheken 547
11.5.5 Funktionsaufruf aus einem String 547
11.5.6 Anonyme Funktionen 548
11.6 Formulare mit PHP 549
11.7 Cookie-Management mit PHP 553
11.7.1 Ein Cookie mit PHP setzen 554
11.7.2 Cookies löschen 557
11.8 Objektorientierte Programmierung 558
11.8.1 Klassen und Objekte 559
11.8.2 Eigenschaften von Klassen 560
11.8.3 Methoden von Klassen 563
11.8.4 Vererbung 570
Index 576