Hilfe:Medien: Unterschied zwischen den Versionen

Aus ZUM Grundschullernportal
(Die Seite wurde neu angelegt: „__NOCACHE__ {{Box|Beachte| In dem grau hinterlegtem Feld steht jeweils in derr linken Spalte der Quellcode, den mam zum Einbinden der einzelnen Medien benö…“)
Markierung: 2017-Quelltext-Bearbeitung
 
(Code aufgeräumt)
Markierung: 2017-Quelltext-Bearbeitung
(3 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
__NOCACHE__
__NOCACHE__
{{Box|Beachte|
{{Hilfe_Navigation}}
In dem grau hinterlegtem Feld steht jeweils in derr linken Spalte der Quellcode, den mam zum Einbinden der einzelnen Medien benötigt.
 
Füge diesen mit copy&paste auf deiner Seite ein und passe die entsprechende Parameter und Texte an.
|Hervorhebung2}}
==Bilder==
==Bilder==
<div class="grid">
<div class="width-2-3"><pre>
[[Datei:Lune of Hippocrates.svg|mini|Die Summe der Flächen der grauen Möndchen entspricht der Fläche des rechtwinkligen Dreiecks.]]
</pre>
Zum Einfügen von Bildern gibt es mehrere Möglichkeiten:
Zum Einfügen von Bildern gibt es mehrere Möglichkeiten:
*Einfügen im '''Visual Editor''' und bei '''Quelltextbearbeitung''': über das Menü "Einfügen" können Medien (unter anderem Bilder) im Archiv der Wikimedia Commons und auch des Projektwikis gesucht und direkt eingebunden werden.  Dies ist die leichteste Art, weil keinerlei Zusatzinformationen zu den Bildern gegeben werden müssen.
*Außerdem können über dieses Menü Bilder auch hochgeladen werden. Als Standardlizenz ist die Lizenz CC-BY-SA 4.0 ausgewählt.
*'''Upload-Assistent''': 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.


#Einfügen im '''Visual Editor''' und bei '''Quelltextbearbeitung''': über das Menü "Einfügen" können Medien (unter anderem Bilder) im Archiv der Wikimedia Commons und auch des Projektwikis gesucht und direkt eingebunden werden.  Dies ist die leichteste Art, weil keinerlei Zusatzinformationen zu den Bildern gegeben werden müssen.
Mehr Informationen zum Einfügen und vor allem zum Formatieren (Beschriftung, Ausrichtung) der Bilder findet man in der [http://wikihilfe.zum.de/wiki/Bilder_einf%C3%BCgen Wiki-Hilfe der ZUM].
#Außerdem können über dieses Menü Bilder auch hoch geladen werden. Als Standardlizenz ist die Lizenz CC-by-SA 4.0 ausgewählt.
#'''Upload-Assistent''': 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.
<pre>[[Datei:Lune of Hippocrates.svg|200px|center]]</pre>
Die Optionen ''left, right, center'' richten Bilder im Text nach links,rechts, bzw. zentriert aus.
</div>
<div class="width-1-3">
[[Datei:Lune of Hippocrates.svg|mini|Die Summe der Flächen der grauen Möndchen entspricht der Fläche des rechtwinkligen Dreiecks.]]


===Galerien===
Mehrere Bilder können als Galerie angeordnet werden. Der folgende Code gibt eine Galerie mit Bildunterschriften aus:


[[Datei:Lune of Hippocrates.svg|200px|center]]
<syntaxhighlight lang="html">
</div>
<gallery>
</div>
Rotkehlchen gr.jpg|Rotkehlchen
Gaense2004.jpg|Gänse
Waran.jpg|Komodowaran
Cat outside.jpg|Hauskatze
Turtle mazunte oaxaca mexico claudio giovenzana 2010.jpg|Schildkröte
Carcharhinus melanopterus Luc Viatour.jpg|Hai
</gallery>
</syntaxhighlight>


<gallery>
Rotkehlchen gr.jpg|Rotkehlchen
Gaense2004.jpg|Gänse
Waran.jpg|Komodowaran
Cat outside.jpg|Hauskatze
Turtle mazunte oaxaca mexico claudio giovenzana 2010.jpg|Schildkröte
Carcharhinus melanopterus Luc Viatour.jpg|Hai
</gallery>


==LearningApps.org==
Für die Galeriefunktion stehen eine Vielzahl von Paramtern zu Verfügung, um die Darstellung anzupassen. Diese können auf den [https://www.mediawiki.org/wiki/Help:Images/de#Gallery_syntax Hilfeseiten des MediaWiki] eingesehen werden:
<div class="grid">
* <code>nolines</code> entfernt die Begrenzungslinien
<div class="width-1-2">
* <code>packed</code> bewirkt, dass Bilder dieselbe Höhe, aber unterschiedliche Breiten haben
<pre>{{LearningApp|app=py7d7b0x501|width=100%|height=400px}}</pre>
* <code>packed-overlay</code> zeigt die dem Bild überlagerte Beschriftung in einem halbtransparenten weißen Feld
Jede [https://learningapps.org/ '''Learning-App'''] hat eine ''Material-ID'', die am Ende des Weblinks steht. Diese Material-ID wird nach <code>app=.....</code> '' eingesetzt.''
* <code>packed-hover</code> zeigt die Beschriftung und das Kästchen nur beim Mouse-over
* <code>slideshow</code> erstellt eine Diashow der Bilder.


Die Parameter ''width'' und ''height'' sind optional und müssen in % bzw. px angegeben werden.  
==Geogebra==
Wird nichts eingegeben, wird als Vorgabewert eine Breite von 100% und eine Höhe von 400px verwendet.
Jedes  [https://www.geogebra.org Geogebra-Applet] hat eine ''Material-ID'', die am Ende des Weblinks steht. Diese Material-ID wird nach <code>id="....."</code> eingesetzt.


LearningApps sind interaktive Übungen, die auf der Website [https://learningapps.org/ LearningApps.org] einfach erstellt und in den Wikis auf ZUM.de, eingebunden werden können.
Die Parameter ''width'' und ''height'' müssen entsprechend angepasst werden.  
</div>
<div class="width-1-2">
{{LearningApp|app=py7d7b0x501|width=100%|height=400px}}
</div>
</div>
 
==H5P==
<div class="grid">
<div class="width-1-2">
<pre>{{H5p|id=
61119|height=232}}</pre>
Jede [https://h5p.org/ '''H5P-Übung'''] hat eine ''Material-ID'', die im Weblink nach <code>embed/ </code>steht. Diese Material-ID wird nach <code>id=.....</code> eingesetzt.
 
[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.
</div>


<div class="width-1-2">
{{H5p|id=
61119|height=232}}
</div>
</div>
==Geogebra==
<div class="grid">
<div class="grid">
  <div class="width-1-2">
  <div class="width-1-2">
'''Das schreibt man:'''
<pre><ggb_applet id="jhAvTrGx" width="400" height="310" /></pre>
<pre><ggb_applet id="jhAvTrGx" width="400" height="310" /></pre>
Jedes  [https://www.geogebra.org Geogebra-Applet] hat eine ''Material-ID'', die am Ende des Weblinks steht. Diese Material-ID wird nach <code>id="....."</code> eingesetzt.
Die Parameter ''width'' und ''height'' müssen entsprechend angepasst werden.
</div>
</div>
  <div class="width-1-2">
  <div class="width-1-2">
'''Das sieht man:'''
<center><ggb_applet id="jhAvTrGx" width="400" height="310" /></center>
<center><ggb_applet id="jhAvTrGx" width="400" height="310" /></center>
</div>
</div>
</div>
</div>


==Video- und Audio==
==Video- und Audio-Einbindung - YouTube, Vimeo und SoundCloud==
<div class="grid">
'''Das schreibt man:'''
<div class="width-1-2">
<pre>
<pre>
{{#ev:youtube|lJnQChnv1T4}}
{{#ev:youtube|lJnQChnv1T4}}
</pre>
</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.
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:
Zusätzlich können Parameter zur Breite (in Pixel) und zur Ausrichtung (left, center oder right) eingegeben werden:
Zeile 82: Zeile 67:
{{#ev:youtube|lJnQChnv1T4|800|center}}
{{#ev:youtube|lJnQChnv1T4|800|center}}
</pre>
</pre>
</div>
 
<div class="width-1-2">
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.
{{#ev:youtube|lJnQChnv1T4|400|center}}
 
</div>
{{Box|Wichtig|Bitte Videos nicht mehr mit der Syntax <nowiki>{{#evu:URL}}</nowiki> einbinden, da so keine datenschutzkonforme Einbindung gesichert ist.| Hervorhebung1}}
</div>
 
{{#ev:youtube|lJnQChnv1T4|800|center}}
 
===Video Start und Ende setzen===
===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)
<div class="grid">
<div class="grid">
  <div class="width-1-2">
  <div class="width-1-2">
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)
'''Das schreibt man:'''
 
<pre>{{#evt:
<pre>{{#evt:
   service=youtube
   service=youtube
Zeile 98: Zeile 86:
   |dimensions=400
   |dimensions=400
   |alignment=center
   |alignment=center
   }}</pre>
   }}
</pre>
 
oder mit ''#ev''
oder mit ''#ev''
<pre>{{#ev:youtube|lJnQChnv1T4|200|center|||start=300&end=388}}</pre>
<pre>{{#ev:youtube|lJnQChnv1T4|200|center|||start=300&end=388}}</pre>
</div>
</div>
  <div class="width-1-2">
  <div class="width-1-2">
{{#evt:
'''Das sieht man:'''
{{#evt:
   service=youtube
   service=youtube
   |id=lJnQChnv1T4
   |id=lJnQChnv1T4
   |urlargs=start=300&end=388
   |urlargs=start=300&end=388
   |dimensions=400
   |dimensions=200
   |alignment=center
   |alignment=center
   }}
   }}
</div>
</div>
</div>
</div>
===Videos in Spalten===
{{2Spalten
|
<pre>
{{2Spalten
|
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.
|
{{#ev:youtube|lJnQChnv1T4|460|center}}
}}
</pre>
|
{{#ev:youtube|lJnQChnv1T4|460|center}}
}}
==Galerien==
Es werden automatisch so viele Bilder in der Größe eines Vorschaubildes <code>220px</code>-Bildbreite dynamisch nebeneinandergesetzt, wie es die horizontale Bildschirmbreite zulässt. Die Anweisung jedes Bildes muss jeweils in einer eigenen Zeile stehen. Eine sehr ausführliche Hilfe findet sich in  [https://de.wikipedia.org/wiki/Hilfe:Galerie#Einbindung Wikipedia].
<syntaxhighlight lang="html">
<gallery>
Rotkehlchen gr.jpg|Rotkehlchen
Gaense2004.jpg|Gänse
Waran.jpg|Komodowaran
Cat outside.jpg|Hauskatze
Turtle mazunte oaxaca mexico claudio giovenzana 2010.jpg|Schildkröte
Carcharhinus melanopterus Luc Viatour.jpg|Hai
</gallery>
</syntaxhighlight>
<gallery>
Rotkehlchen gr.jpg|Rotkehlchen
Gaense2004.jpg|Gänse
Waran.jpg|Komodowaran
Cat outside.jpg|Hauskatze
Turtle mazunte oaxaca mexico claudio giovenzana 2010.jpg|Schildkröte
Carcharhinus melanopterus Luc Viatour.jpg|Hai
</gallery>
[[Kategorie:Hilfe]]

Version vom 9. April 2020, 08:37 Uhr



Hilfen im Grundschullernportal

Vorlagen

Multimedia

Hilfeseiten


Bilder

Zum Einfügen von Bildern gibt es mehrere Möglichkeiten:

  • Einfügen im Visual Editor und bei Quelltextbearbeitung: über das Menü "Einfügen" können Medien (unter anderem Bilder) im Archiv der Wikimedia Commons und auch des Projektwikis gesucht und direkt eingebunden werden. Dies ist die leichteste Art, weil keinerlei Zusatzinformationen zu den Bildern gegeben werden müssen.
  • Außerdem können über dieses Menü Bilder auch hochgeladen werden. Als Standardlizenz ist die Lizenz CC-BY-SA 4.0 ausgewählt.
  • Upload-Assistent: 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.

Mehr Informationen zum Einfügen und vor allem zum Formatieren (Beschriftung, Ausrichtung) der Bilder findet man in der Wiki-Hilfe der ZUM.

Galerien

Mehrere Bilder können als Galerie angeordnet werden. Der folgende Code gibt eine Galerie mit Bildunterschriften aus: 

<gallery>
 Rotkehlchen gr.jpg|Rotkehlchen
 Gaense2004.jpg|Gänse
 Waran.jpg|Komodowaran
 Cat outside.jpg|Hauskatze
 Turtle mazunte oaxaca mexico claudio giovenzana 2010.jpg|Schildkröte
 Carcharhinus melanopterus Luc Viatour.jpg|Hai
</gallery>
  • Rotkehlchen

    Rotkehlchen

  • Gänse

    Gänse

  • Komodowaran

    Komodowaran

  • Hauskatze

    Hauskatze

  • Schildkröte

    Schildkröte

  • Hai

    Hai

Für die Galeriefunktion stehen eine Vielzahl von Paramtern zu Verfügung, um die Darstellung anzupassen. Diese können auf den Hilfeseiten des MediaWiki eingesehen werden:

  • nolines entfernt die Begrenzungslinien
  • packed bewirkt, dass Bilder dieselbe Höhe, aber unterschiedliche Breiten haben
  • packed-overlay zeigt die dem Bild überlagerte Beschriftung in einem halbtransparenten weißen Feld
  • packed-hover zeigt die Beschriftung und das Kästchen nur beim Mouse-over
  • slideshow erstellt eine Diashow der Bilder.

Geogebra

Jedes Geogebra-Applet hat eine Material-ID, die am Ende des Weblinks steht. Diese Material-ID wird nach id="....." eingesetzt.

Die Parameter width und height müssen entsprechend angepasst werden.

Das schreibt man: 

<ggb_applet id="jhAvTrGx" width="400" height="310" />

Das sieht man:

GeoGebra

Video- und Audio-Einbindung - YouTube, Vimeo und SoundCloud

Das schreibt man: 

{{#ev:youtube|lJnQChnv1T4}}

Hinter #ev: 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: 

{{#ev:youtube|lJnQChnv1T4|800|center}}

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 {{#evu:URL}} einbinden, da so keine datenschutzkonforme Einbindung gesichert ist.


Video laden
YouTube

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 start und end. Diese müssen der Einbettungsfunktion (#ev) mitgegeben werden als urlargs 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)

Das schreibt man: 

{{#evt:
   service=youtube
   |id=lJnQChnv1T4
   |urlargs=start=300&end=388
   |dimensions=400
   |alignment=center
   }}

oder mit #ev 

{{#ev:youtube|lJnQChnv1T4|200|center|||start=300&end=388}}

Das sieht man:

Video laden
YouTube
Abgerufen von „https://grundschullernportal.zum.de/index.php?title=Hilfe:Medien&oldid=16456“