Hilfe:Medien: Unterschied zwischen den Versionen

Aus ZUM Projektwiki
(Die Seite wurde neu angelegt: „__NOCACHE__ {{Hilfe Navigation}} == Bilder == Zum Einfügen von Bildern gibt es mehrere Möglichkeiten: * Einfügen im Visual Editor und bei Quelltextbea…“)
Markierung: 2017-Quelltext-Bearbeitung
 
Markierung: 2017-Quelltext-Bearbeitung
 
(55 dazwischenliegende Versionen von 3 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
__NOCACHE__
__NOCACHE__
{{Hilfe Navigation}}
{{Box|Beachte|
In dem grau hinterlegtem Feld steht jeweils in der linken Spalte der Quellcode, den man 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==
<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:
 
#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 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.]]
 
 
[[Datei:Lune of Hippocrates.svg|200px|center]]
</div>
</div>


== 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 des ZUM-Unterrichtens und der Wikimedia Commons 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 hoch geladen werden. Als Standardlizenz ist die Lizenz CC-by-SA 4.0 ausgewählt. Wenn eine andere Lizenz gewünscht ist, muss über den Uploadassistenten hoch geladen werden.
* 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.


==Geogebra==
==LearningApps==
<div class="grid">
<div class="grid">
  <div class="width-1-2">
  <div class="width-1-2">
<pre><ggb_applet id="jhAvTrGx" width="450" height="450" /></pre>
<pre>{{LearningApp|app=py7d7b0x501|width=100%|height=400px}}</pre>
Geogebra-Applets auf [https://www.geogebra.org GeoGebra] werden mit Hilfe eines Codes eingebunden, der die Material-ID enthält. Diesen Code erhält man direkt beim Applet unter '''Teilen ''' -->'''Einbetten'''. Man wählt dann '''Mediawiki''' und kopiert den Code auf die Wiki-Seite.
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.''


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.
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.
</div>
</div>
  <div class="width-1-2">
  <div class="width-1-2">
<ggb_applet id="jhAvTrGx" width="450" height="450" />
{{LearningApp|app=py7d7b0x501|width=100%|height=400px}}
</div>
</div>
</div>
</div>


== 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.
==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>


Zusätzlich können Parameter zur Breite (in Pixel) und zur Ausrichtung (left, center oder right) eingegeben werden:
<div class="width-1-2">
{{H5p|id=
61119|height=232}}
</div>
</div>


<pre>
==ZUM-Apps (H5P-zum)==
{{#ev:youtube|lJnQChnv1T4|800|center}}
<div class="grid">
</pre>
<div class="width-1-3">
<pre>{{H5p-zum|id=30|height=600}}</pre>
Jede [https://apps.zum.de/ '''H5p-zum-Übung'''] hat eine ''Material-ID'', die im Einbettungs-Link vor <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.


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.
Gute Erklärungen zu den im Moment über 40 interaktiven Inhalten finden sich [https://h5p.glitch.me/index.html hier].
</div>
<div class="width-2-3">
{{H5p-zum|id=30|height=600}}
</div>
</div>


'''Wichtig:''' Bitte Videos nicht mehr mit der Syntax <nowiki>{{#evu:URL}}</nowiki> einbinden, da so keine datenschutzkonforme Einbindung gesichert ist.
==Geogebra==
<div class="grid">
<div class="width-1-2">
<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 class="width-1-2">
<center><ggb_applet id="jhAvTrGx" width="400" height="310" /></center>
</div>
</div>


==Video- und Audio==
<div class="grid">
<div class="width-1-2">
<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}}
{{#ev:youtube|lJnQChnv1T4|800|center}}
 
</pre>
=== Video Start und Ende setzen ===
</div>
<div class="width-1-2">
{{#ev:youtube|lJnQChnv1T4|400|center}}
</div>
</div>
===Video Start und Ende setzen===
<div class="grid">
<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)
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)


Zeile 49: Zeile 114:
   |id=lJnQChnv1T4
   |id=lJnQChnv1T4
   |urlargs=start=300&end=388
   |urlargs=start=300&end=388
   |dimensions=200
   |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>
  {{#evt:
  <div class="width-1-2">
{{#evt:
   service=youtube
   service=youtube
   |id=lJnQChnv1T4
   |id=lJnQChnv1T4
   |urlargs=start=300&end=388
   |urlargs=start=300&end=388
   |dimensions=200
   |dimensions=400
   |alignment=center
   |alignment=center
   }}
   }}
</div>
</div>


=== Videos in Spalten ===
===Videos in Spalten===
 
{{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.
|
 
<pre>
<pre>
{{2Spalten
{{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.
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}}
{{#ev:youtube|lJnQChnv1T4|460|center}}
}}
}}
</pre>  
</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}}
{{#ev:youtube|lJnQChnv1T4|460|center}}
}}
}}


== Galerien ==
==Galerien==
Das Media-Wiki bietet in der neuesten Version neue Funktionen für Galerien an. Mehr dazu auf der Seite
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].
: → https://www.mediawiki.org/wiki/Help:Images/de#Gallery_syntax


: Hier ein Beispiel für eine Galerie im Modus "packed":


<gallery mode="packed" heights="200" style="text-align:center">
<syntaxhighlight lang="html">
File:2009 Lagerfeuer.JPG|Dass Holz brennt, ist für uns etwas ganz Normales.
<gallery>
Datei:Pilot light flames.jpg|Gas als Brennstoff für den Herd ist zwar nicht mehr so verbreitet, wird aber von Profis immer noch geschätzt.  
Rotkehlchen gr.jpg|Rotkehlchen
File:A flame.JPG|Spiritus wird als flüssiger Brennstoff genutzt.
Gaense2004.jpg|Gänse
Datei:Magnesium ribbon burning.jpg|Magnesium brennt mit hellem Licht, aber ohne eine Flamme!
Waran.jpg|Komodowaran
Cat outside.jpg|Hauskatze
Turtle mazunte oaxaca mexico claudio giovenzana 2010.jpg|Schildkröte
Carcharhinus melanopterus Luc Viatour.jpg|Hai
</gallery>
</gallery>
</syntaxhighlight>


 
<gallery>
Die alte Hilfe-Seite bietet immer noch Informationen:
Rotkehlchen gr.jpg|Rotkehlchen
: → https://de.wikipedia.org/wiki/Hilfe:Galerie#gallery-Tag
Gaense2004.jpg|Gänse
 
Waran.jpg|Komodowaran
: Hier ein Beispiel für eine Galerie in klassischem Aussehen:
Cat outside.jpg|Hauskatze
 
Turtle mazunte oaxaca mexico claudio giovenzana 2010.jpg|Schildkröte
<gallery widths="300" heights="230" style="text-align:center">
Carcharhinus melanopterus Luc Viatour.jpg|Hai
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>
</gallery>


<code>style="text-align:center"</code> im Galley-Tag führt zu einer zentrierten Gallerie und zentriertem Beschreibungs-Text
[[Kategorie:Hilfe]]
[[Kategorie:Hilfe]]

Aktuelle Version vom 4. November 2021, 20:10 Uhr


Beachte
In dem grau hinterlegtem Feld steht jeweils in der linken Spalte der Quellcode, den man 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.

Bilder

[[Datei:Lune of Hippocrates.svg|mini|Die Summe der Flächen der grauen Möndchen entspricht der Fläche des rechtwinkligen Dreiecks.]]

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

  1. 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.
  2. Außerdem können über dieses Menü Bilder auch hoch geladen werden. Als Standardlizenz ist die Lizenz CC-by-SA 4.0 ausgewählt.
  3. 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.
[[Datei:Lune of Hippocrates.svg|200px|center]]

Die Optionen left, right, center richten Bilder im Text nach links,rechts, bzw. zentriert aus.

Die Summe der Flächen der grauen Möndchen entspricht der Fläche des rechtwinkligen Dreiecks.


Lune of Hippocrates.svg


LearningApps

{{LearningApp|app=py7d7b0x501|width=100%|height=400px}}

Jede Learning-App hat eine Material-ID, die am Ende des Weblinks steht. Diese Material-ID wird nach app=..... eingesetzt.

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.

LearningApps sind interaktive Übungen, die auf der Website LearningApps.org einfach erstellt und in den Wikis auf ZUM.de, eingebunden werden können.


H5P

{{H5p|id=
61119|height=232}}

Jede H5P-Übung hat eine Material-ID, die im Weblink nach embed/ steht. Diese Material-ID wird nach id=..... eingesetzt.

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.

ZUM-Apps (H5P-zum)

{{H5p-zum|id=30|height=600}}

Jede H5p-zum-Übung hat eine Material-ID, die im Einbettungs-Link vor /embedsteht. Diese Material-ID wird nach id=..... eingesetzt.

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.

Gute Erklärungen zu den im Moment über 40 interaktiven Inhalten finden sich hier.

Geogebra

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

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.

GeoGebra

Video- und Audio

{{#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}}
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) 

{{#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}}
Video laden
YouTube

Videos in Spalten

{{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}}
}}
Video laden
YouTube

Galerien

Es werden automatisch so viele Bilder in der Größe eines Vorschaubildes 220px-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 Wikipedia. 


<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

Abgerufen von „https://projekte.zum.de/index.php?title=Hilfe:Medien&oldid=55280“