|
|
| Zeile 1: |
Zeile 1: |
| Einer der großen Vorteile des ZUM-Unterrichten-Wiki sind die zahllosen Möglichkeiten Medien und interaktive Übungen in die Lernpfade einzubinden.
| |
|
| |
|
| {{Box|Empfehlung|In dem grau hinterlegtem Feld steht jeweils in der linken Spalte der Quellcode, den man zum Einbinden der einzelnen Medien benötigt.<br>
| |
| Füge diesen mit copy&paste auf deiner Seite ein und passe die entsprechende Parameter und Texte an.||3=Hervorhebung1}}
| |
|
| |
| == Bilder ==
| |
| Zum Einfügen von Bildern gibt es mehrere Möglichkeiten:
| |
| [[Datei:Bilder einfügen Fahrrad.png|left|489px|Bilder einfügen - Fahrrad]]
| |
| '''1.''' Bilder aus dem Archiv der [https://de.wikipedia.org/wiki/MediaWiki Wikimedia Commons] und des {{SITENAME}}-Wikis suchen:<br>Über das Bedienelement "Einfügen" können Sie Medien (u.a. Bilder) im Archiv der Wikimedia Commons und des {{SITENAME}}-Wikis suchen und direkt in Ihren Lernpfad einfügen. Es müssen keine weiteren Angaben gemacht werden.
| |
|
| |
| {{clear}}
| |
| [[Datei:Bilder einfügen - eigene Bilder hochladen.png|left|489px|Bilder einfügen - eigene Bilder hochladen]]
| |
| '''2.''' '''Eigene Bilder''' hochladen:<br>Über das Bedienelement "Einfügen" können auch eigene Bilder aus ihren Dateien hoch geladen werden. Als Standardlizenz ist die Lizenz CC-by-SA 4.0 ausgewählt. Bitte beachten Sie die Nutzungsbedingungen und Lizenzrichtlinien des ZUM-Unterrichten-Wikis.
| |
|
| |
| {{clear}}
| |
| [[Datei:Dateien hochladen Upload-Assistent.png|left|Dateien hochladen Upload-Assistent]]
| |
| '''3.''' Den '''[[Spezial:Hochladeassistent|Upload-Assistenten]]''' nutzen, um Dateien hochzuladen:<br>An jeder Seite ist unten rechts ein Schraubenschlüssel (wenn man angemeldeter Nutzer ist). Dort gibt es den Punkt "Datei hochladen". Bei dieser Schrittfolge können unterschiedliche Lizenzen ausgewählt werden.
| |
|
| |
| Am Ende des Upload-Dialogs kann man die URL-Angabe des Bilds kopieren und in die Seite einfügen.
| |
|
| |
| {{clear}}
| |
| == Video- und Audio-Einbindung - YouTube, Vimeo und SoundCloud ==
| |
| <pre>
| |
| {{#ev:youtube|lJnQChnv1T4}}
| |
| </pre>
| |
|
| |
|
| |
| Hinter <code>#ev:</code> fügt man die Plattform ein (youtube, vimeo oder soundcloud) sowie nach einer Pipe (|) die ID des Videos bzw. der Audiodatei.
| |
|
| |
| Zusätzlich können Parameter zur Breite (in Pixel) und zur Ausrichtung (left, center oder right) eingegeben werden:
| |
|
| |
| <pre>
| |
| {{#ev:youtube|lJnQChnv1T4|800|center}}
| |
| </pre>
| |
|
| |
|
| |
| Empfohlen ist eine Breite von 800 Pixeln bei YouTube und 960 Pixeln bei Vimeo Videos, zudem eine mittige Ausrichtung (center) - damit ist eine gute Darstellung auf allen Displaygrößen gewährt.
| |
|
| |
| '''Wichtig:''' Bitte Videos nicht mehr mit der Syntax <nowiki>{{#evu:URL}}</nowiki> einbinden, da so keine datenschutzkonforme Einbindung gesichert ist.
| |
|
| |
|
| |
| {{#ev:youtube|lJnQChnv1T4|800|center}}
| |
|
| |
| === Video Start und Ende setzen ===
| |
| Bei vielen Videodiensten kann auch der Start und Endzeitpunkt des Videos gewählt werden. Dazu müssen zusätzliche Parameter mitgegeben werden. Diese variieren je nach Dienst. Bei Youtube verwendet man die Parameter <code>start</code> und <code>end</code>. Diese müssen der Einbettungsfunktion (''#ev'') mitgegeben werden als <code>urlargs</code> Parameter. Um Fehler zu vermeiden, verwenden wir die Einbettungsfunktion ''#evt''. Bei dieser werden alle Parameter benannt. (Bei der Einbettungsfunktion ''#ev'' sind die urlargs der 7. Parameter)
| |
|
| |
| <pre>{{#evt:
| |
| service=youtube
| |
| |id=lJnQChnv1T4
| |
| |urlargs=start=300&end=388
| |
| |dimensions=200
| |
| |alignment=center
| |
| }}</pre>
| |
| oder mit ''#ev''
| |
| <pre>{{#ev:youtube|lJnQChnv1T4|200|center|||start=300&end=388}}</pre>
| |
|
| |
| {{#evt:
| |
| service=youtube
| |
| |id=lJnQChnv1T4
| |
| |urlargs=start=300&end=388
| |
| |dimensions=200
| |
| |alignment=center
| |
| }}
| |
|
| |
| === Videos in Spalten ===
| |
|
| |
| Soll ein Video in einem 2-Spalten Layout eingebunden werden, empfiehlt sich eine Breite von 460 Pixeln. Außerdem sollte es ebenfalls mittig ausgerichtet sein, damit es auf kleinen Displays gut angezeigt wird.
| |
|
| |
| <pre>
| |
| {{2Spalten
| |
| |
| |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
| |
| |
| |
| {{#ev:youtube|lJnQChnv1T4|460|center}}
| |
| }}
| |
| </pre>
| |
|
| |
|
| |
| {{2Spalten
| |
| |
| |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
| |
| |
| |
| {{#ev:youtube|lJnQChnv1T4|460|center}}
| |
| }}
| |
|
| |
| == Interaktive Übungen ==
| |
| Für die meisten dieser Apps gibt es Vorlagen, die Sie bequem kopieren können. Zusätzlich muss für die jeweilige Anwendung dann nur die spezifische Material-ID angepasst werden.
| |
|
| |
| === H5P ===
| |
| [https://h5p.org/ '''H5P'''] ist eine freie Software zum Erstellen von interaktiven Inhalten für das Web. Beliebte Übungen sind z.B. Videos oder Präsentationen mit eingebetteten Quiz-Aufgaben, Zeitstrahlen, Memory-Spiel.
| |
|
| |
| '''[https://apps.zum.de ZUM-Apps]''' ist ein kostenloser Online-Speicher der Zentrale für Unterrichtsmedien im Internet für die Erprobung und Erstellung interaktiver ''' H5P'''-Apps. Diese Übungen können mit einer Zeile Markup in Wikiseiten eingebunden werden:
| |
| <div class="grid">
| |
| <div class="width-1-2">
| |
| [[Datei:H5P Material-ID.png|300px|Screenshot einer H5p-Formulars zum Einbetten]]
| |
| <div class="pseudo-pre" style="padding: 10px; background: #f5f5f5; font: 14px / 18px 'Courier', monospace;
| |
| color: #444;">{{h5p-zum|id=<span style="background:yellow;">11078</span>|height=200px}}</div>
| |
|
| |
| Alle Übungen, die auf [https://apps.zum.de/ apps.zum.de] erstellt wurden, können hier eingebunden werden.
| |
| </div>
| |
| <div class="width-1-2">
| |
| {{h5p-zum|id=11078|height=200px}}
| |
| </div>
| |
| </div>
| |
|
| |
| [[Hilfe:ZUM-Apps_in_ZUM-Unterrichten_einbinden|Mehr Beispiele zu h5p]]
| |
|
| |
| === Geogebra ===
| |
| '''[[GeoGebra]]''' ist eine dynamische Mathematik-Software, die Geometrie, Algebra und Analysis verbindet.
| |
|
| |
| <div class="grid">
| |
| <div class="width-1-2">
| |
| <div class="pseudo-pre" style="padding: 10px; background: #f5f5f5; font: 14px / 18px 'Courier', monospace;
| |
| color: #444;"><ggb_applet id="<span style="background:yellow;">jhAvTrGx</span>" width="400" height="310" /></div>
| |
| Jedes [https://www.geogebra.org Geogebra-Applet] hat eine ''Material-ID'', die am Ende des Weblinks steht. Diese Material-ID wird nach ''id="....."'' eingesetzt (hier: jhAvTrGx).
| |
|
| |
| Die Parameter ''width'' und ''height'' müssen entsprechend angepasst werden.
| |
| </div>
| |
| <div class="width-1-2">
| |
| <center><ggb_applet id="jhAvTrGx" width="400" height="310" /></center>
| |
| </div>
| |
| </div>
| |
|
| |
|
| |
| === LearningApps ===
| |
| '''LearningApps''' sind interaktive Übungen, die auf der Website [https://learningapps.org/ LearningApps.org] kostenlos und einfach erstellt werden sowie entweder dort genutzt oder in eigene Seiten, z.B. in den Wikis auf ZUM.de, eingebunden werden können. Dazu kann die [[Vorlage:LearningApp]] verwendet werden.
| |
|
| |
| <div class="grid">
| |
| <div class="width-1-2">
| |
| <div class="pseudo-pre" style="padding: 10px; background: #f5f5f5; font: 14px / 18px 'Courier', monospace;
| |
| color: #444;">{{LearningApp|app=<span style="background:yellow;">py7d7b0x501</span>|width=100%|height=400px}}</div>
| |
| Jede [https://learningapps.org/ Learning-App] hat eine Material-ID, die am Ende des Weblinks steht.
| |
|
| |
| Die Parameter ''width'' und ''height'' sind optional und müssen in % bzw. px angegeben werden.
| |
| Wird nichts eingegeben, wird als Vorgabewert eine Breite von 100% und eine Höhe von 400px verwendet.
| |
| </div>
| |
| <div class="width-1-2">
| |
| {{LearningApp|app=py7d7b0x501|width=100%|height=400px}}
| |
| </div>
| |
| </div>
| |
|
| |
| == Padlet, Mentimeter, Quizlet und AnswerGarden ==
| |
| In einen Lernpfad können auch Padlets, Mentimeter, Quizlet und AnswerGarden eingebunden werden.
| |
|
| |
| <div class="grid">
| |
| <div class="width-1-2">
| |
| <pre>
| |
| {{Padlet|id=…|width=100%|height=600px}}
| |
|
| |
| {{Mentimeter|id=…|width=800px}}
| |
|
| |
| {{Quizlet|id=…}}
| |
|
| |
| {{AnswerGarden|id=…}}
| |
| </pre></div>
| |
|
| |
| <div class="width-1-2">
| |
| </div>
| |
| </div>
| |
|
| |
| === R-Quiz ===
| |
| Sie können in Ihrem Lernpfad auch direkt Quizze erstellen. Das '''R-Quiz''' von Felix Riesterer ermöglicht es, verschiedene interaktive Übungen zu erstellen. Die Übungen können in verschiedenen Sprachen erstellt und auch ausgedruckt werden.
| |
|
| |
| *[[Hilfe:R-Quiz]]
| |
|
| |
| Kopieren Sie den Quelltext der verschiedenen Quizze und ersetzen die vorgegebenen Beispiele durch eigene Inhalte.
| |
|
| |
| Diese Quizze können als Differenzierungsaufgabe auch von den Schülerinnen und Schülern erstellt werden.
| |
|
| |
| <div class="grid">
| |
| <div class="width-1-2">
| |
| <pre><div class="lueckentext-quiz">
| |
| Beim ''Erweitern'' und Kürzen muss man Zähler und ''Nenner'' mit der gleichen Zahl multiplizieren bzw. dividieren.
| |
| </div></pre>
| |
| </div>
| |
| <div class="width-1-2">
| |
| <div class="lueckentext-quiz">Beim ''Erweitern'' und Kürzen muss man Zähler und ''Nenner'' mit der gleichen Zahl multiplizieren bzw. dividieren.</div>
| |
| </div>
| |
| </div>
| |
|
| |
| {{clear}}
| |
|
| |
|
| |
| <div class="grid">
| |
| <div class="width-1-2">
| |
| <pre><div class="zuordnungs-quiz">
| |
|
| |
| {|
| |
| | Adjektive || schön || klein|| gelb
| |
| |-
| |
| | Verben || gehen || schwimmen|| lachen
| |
| |-
| |
| | Nomen || Haus || Glück || Sonne
| |
| |}
| |
|
| |
| </div></pre>
| |
|
| |
| </div>
| |
| <div class="width-1-2">
| |
| <div class="zuordnungs-quiz">
| |
|
| |
| {|
| |
| | Adjektive || schön || klein|| gelb
| |
| |-
| |
| | Verben || gehen || schwimmen|| lachen
| |
| |-
| |
| | Nomen || Haus || Glück || Sonne
| |
| |}
| |
|
| |
| </div>
| |
| </div>
| |
| </div>
| |
|
| |
| Es ist empfehlenswert, interaktive Übungen mit dem R-Quiz zu erstellen. Diese sind Teil der Wikiseite und können im Bedarfsfall zukünftig korrigiert, verändert und erweitert werden.
| |
|
| |
| === Quiz-Erweiterung ===
| |
| diese Quiz-Erweiterung ist heute eher unüblich:
| |
|
| |
| <div class="grid">
| |
| <div class="width-1-2">
| |
| <pre><quiz>...</quiz></pre>
| |
| </div>
| |
| <div class="width-1-2">
| |
| <quiz>...</quiz>
| |
| </div>
| |
| </div>
| |
|
| |
| == Galerien ==
| |
| <source lang="html">
| |
| <gallery mode="packed" heights="200" style="text-align:center">
| |
| File:2009 Lagerfeuer.JPG|Holz brennt
| |
| Datei:Pilot light flames.jpg|Gas als Brennstoff
| |
| File:A flame.JPG|Spiritus wird als flüssiger Brennstoff genutzt.
| |
| Datei:Magnesium ribbon burning.jpg|Magnesium brennt mit hellem Licht, aber ohne eine Flamme!
| |
| </gallery></source>
| |
| Das Media-Wiki bietet in der neuesten Version [[mediawikiwiki:Help:Images/de#Gallery_syntax|neue Funktionen für Galerien]] an. Hier ein Beispiel für eine Galerie im Modus ''"packed"''
| |
|
| |
| <gallery mode="packed" heights="200" style="text-align:center">
| |
| File:2009 Lagerfeuer.JPG|Holz brennt
| |
| Datei:Pilot light flames.jpg|Gas als Brennstoff
| |
| File:A flame.JPG|Spiritus wird als flüssiger Brennstoff genutzt.
| |
| Datei:Magnesium ribbon burning.jpg|Magnesium brennt mit hellem Licht, aber ohne eine Flamme!
| |
| </gallery>
| |
|
| |
|
| |
| <pre><gallery widths="300" heights="230" style="text-align:center">
| |
| Datei:Thermite mix.jpg|Die Bahnmitarbeiter nutzen fertige Gemische.
| |
| Datei:Velp-thermitewelding-1.jpg|In einem Reaktionsgefäß wird das flüssige Eisen erzeugt.
| |
| Datei:Railphoto.jpg|Nach dem Entfernen der Gussform glüht das Eisen noch.
| |
| Datei:Geschweisster schienenstoss.jpeg|Nach dem Erkalten des Eisen wird die Oberfläche geglättet.
| |
| </gallery></pre>
| |
| Mehr Informationen auf dieser [https://de.wikipedia.org/wiki/Hilfe:Galerie#gallery-Tag Hilfe-Seite].
| |
|
| |
| <gallery widths="300" heights="230" style="text-align:center">
| |
| Datei:Thermite mix.jpg|Die Bahnmitarbeiter nutzen fertige Gemische.
| |
| Datei:Velp-thermitewelding-1.jpg|In einem Reaktionsgefäß wird das flüssige Eisen erzeugt.
| |
| Datei:Railphoto.jpg|Nach dem Entfernen der Gussform glüht das Eisen noch.
| |
| Datei:Geschweisster schienenstoss.jpeg|Nach dem Erkalten des Eisen wird die Oberfläche geglättet.
| |
| </gallery>
| |
|
| |
|
| |
|
| |
|
| |
| <code>style="text-align:center"</code> im <code>gallery</code>-Tag führt zu einer zentrierten Gallerie und zentriertem Beschreibungs-Text
| |
|
| |
| __NOCACHE__
| |
| {{Hilfe Navigation}}
| |
|
| |
| [[Kategorie:Hilfe]]
| |
