Robert Schoblick
Multimedial lehren und lernen
Digitale Lerninhalte erstellen mit H5P
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
368
8.4.4 Das -Element
369
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
376
8.4.5 Das
377
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
© 2009-2024 ciando GmbH