Hilfe:Erste Schritte/Schritt 4: Unterschied zwischen den Versionen

Aktuelle Version vom 30. August 2020, 20:41 Uhr

Nun erfolgt der Schritt 4 – Bilder und Videos einbinden

Voraussetzung: Ich bin angemeldet (siehe Schritt 1)

Info

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-Deutsch Lernen 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.

1. Bilder einfügen

Üben - Ein Bild aus Wikimedia Commons einfügen

Die Bilder auf der Seite von Wikimedia Commons können direkt hier im Wiki angezeigt werden.

Gehe auf die Seite von Wikimedia Commons http://commons.wikimedia.org/wiki/Hauptseite
Suche ein Bild (Beispiel Katze) und verlinke es hier.
Beispiel:

Im Virtuell-Editor 1:

Kopiere die File-Benennung des Bildes:

File:Felis silvestris - July 2007-1.jpg

Gehe auf <Einfügen> und dann auf <Medien>.

Im Virtuell-Editor 2:

Füge jetzt die kopierte File-Benennung des Bildes in das Suchfeld ein. Es könnte auch nach einem Wort wie "cat" ("Katze" funktioniert aktuell nicht) gesucht werden.
Wähle das Bild aus.

Im Virtuell-Editor 2:

Klicke auf <Dieses Bild weiterverwenden>.
und danach auf einfügen.

Ergebnis: Das Bild wird als "Mini"-Bild eingefügt.

Alternativ kannst du die auf Wikimedia Commons erhaltene File-Benennung des Bildes über „Quelltext bearbeiten“:

[[File:Felis silvestris - July 2007-1.jpg]]

„Quelltext bearbeiten“: Größe des Bildes anpassen.

[[File:Felis silvestris - July 2007-1.jpg|300px]]

Merke

<px> steht für Pixel.

200px – Das Bild wird kleiner.
600px – Das Bild wird größer.

Merke

Vergiss nicht, deine Seite zu speichern.

2. Ein Video aus YouTube einfügen

Üben - Ein Video aus YouTube einfügen

Suche auf YouTube ein passendes Video! https://www.youtube.com/
Kopiere den hinteren Teil der URL. Du findest diese unter <Teilen>.

https://youtu.be/lJnQChnv1T4

3. Bearbeite die Seite und füge das Video ein.

„Quelltext bearbeiten“: YouTube-Videos einbinden

{{#ev:youtube|lJnQChnv1T4}}

{{#ev:youtube|Teil der YouTube-URL}}

Hinter #ev: fügt man die Plattform ein (youtube, vimeo oder soundcloud) sowie nach einer Pipe (|) die ID des Videos bzw. der Audiodatei.

Info - Weitere Anpassungen

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.

Erste Schritte

@@ Zeile 1: / Zeile 1: @@
-{{:Erste Schritte/Navigation}}
+{{Navigation verstecken|{{Erste Schritte/Navigation}}|Erste Schritte einblenden|Erste Schritte ausblenden}}
+{{Box|Nun erfolgt der Schritt 4 – Bilder und Videos einbinden|
+'''Voraussetzung: Ich bin angemeldet (siehe [[../Schritt 1|Schritt 1]])'''
+|Hervorhebung2}}
-Nun erfolgt der Schritt 4 – Bilder und Videos einbinden<br />
-Voraussetzung: Ich bin angemeldet (siehe Schritt 1)<br />
+{{Box|Info|
+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-Deutsch Lernen und der  [https://commons.wikimedia.org/wiki/Hauptseite 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.
+|Kurzinfo}}
+== 1. Bilder  einfügen ==
+{{Box|Üben - Ein Bild aus Wikimedia Commons einfügen|
+Die Bilder auf der Seite von Wikimedia Commons können direkt hier im Wiki angezeigt werden.
+# Gehe auf die Seite von Wikimedia Commons http://commons.wikimedia.org/wiki/Hauptseite
+# Suche ein Bild (Beispiel Katze) und verlinke es hier.
+# Beispiel:
+|Üben}}
+Im Virtuell-Editor 1:<br />
+<div class="grid">
+ <div class="width-1-2">
+#Kopiere die File-Benennung des Bildes:
+<pre>File:Felis silvestris - July 2007-1.jpg</pre>
+#Gehe auf <Einfügen> und dann auf <Medien>.
+</div>
+ <div class="width-1-2">
+[[Datei:Bildschirmfoto 2020-08-26 um 16.53.27.png|rahmenlos|150px]]
+</div>
+</div>
-== 1.1 Ein Bild aus Wikimedia Commons einfügen ==
-Die Bilder auf der Seite von Wikimedia Commons können direkt im DaF-Wiki angezeigt werden. Folgende Anleitung beschreibt, wie:<br />
-# Gehe auf die Seite von Wikimedia Commons http://commons.wikimedia.org/wiki/Hauptseite
-# Suche ein Bild: (Beispiel Katze)
-# Kopiere die File-Benennung des Bildes wie in der folgenden Beschreibung:
-: [[File:Felis silvestris - July 2007-1.jpg|150px]]<br />
- File:Felis silvestris - July 2007-1.jpg<br />
-. Klicke auf <Bearbeiten>.<br />
+Im Virtuell-Editor 2:<br />
-[[Datei:Bearbeiten.jpg|Bearbeiten.jpg]]
+<div class="grid">
-. Es öffnet sich das schon bekannte Editorfenster:<br />
+ <div class="width-1-2">
-. Klicke auf <Erweitert> und es öffnet sich folgendes Unterfenster:<br />
+#Füge jetzt die kopierte File-Benennung des Bildes in das Suchfeld ein. Es könnte auch nach einem Wort wie "cat" ("Katze" funktioniert aktuell nicht) gesucht werden.
-[[Datei:Wiki-Editor.jpg|Wiki-Editor "Erweitert"]]<br />
+#Wähle das Bild aus.
+</div>
+ <div class="width-1-2">
+[[Datei:Bildschirmfoto 2020-08-26 um 16.57.57.png|rahmenlos]]
+</div>
+</div>
-. Klicke auf das Symbol für <Eingebettete Datei>
-[[Datei:Symbol Eingebettete Datei.jpg|Symbol Eingebettete Datei]]<br />
-. Füge die Angaben ein.<br />
-[[Datei:Editor Eingebettete Datei Inhalt.jpg]]<br />
-. Klicke <Einfügen>.<br />
+Im Virtuell-Editor 2:<br />
+<div class="grid">
+ <div class="width-1-2">
+#Klicke auf <Dieses Bild weiterverwenden>.
+#und danach auf einfügen.
+</div>
+ <div class="width-1-2">
+[[Datei:Bildschirmfoto 2020-08-26 um 17.06.02.png|rahmenlos]]<br />
+Ergebnis: Das Bild wird als "Mini"-Bild eingefügt.
+[[Datei:Felis silvestris - July 2007-1.jpg|mini]]
+</div>
+</div>
-. Jetzt die <Seite speichern>. Ergebnis:<br />
-[[File:Felis silvestris - July 2007-1.jpg|thumb]]<br />
-== 1.2 Ein aus Wikimedia Commons eingefügtes Bild in Ausrichtung, Format und Größe ändern ==
-=== 1.2.1 Während des Einfügens - Ausrichtung: ===
-[[Datei:Editor Eingebettete Datei Ausrichtung.jpg|thumb|Bild ausrichten]]
-=== 1.2.2 Während des Einfügens - Format: ===
-[[Datei:Editor Eingebettete Datei Format.jpg]]
-=== 1.2.3 Während des Einfügens - Größe: ===
-Die Größe der Bilder, die aus Wikimedia Commons eingefügt werden, muss per Hand verändert werden.
-Beispiel:<br />
-<nowiki>[[Datei:Felis silvestris - July 2007-1.jpg|400px]]</nowiki> <br />
+Alternativ kannst du die auf  [https://commons.wikimedia.org/wiki/Hauptseite Wikimedia Commons] erhaltene File-Benennung des Bildes über
+„Quelltext bearbeiten“:
+<div class="grid">
+ <div class="width-1-2">
+<pre>[[File:Felis silvestris - July 2007-1.jpg]]</pre>
+</div>
+ <div class="width-1-2">
+[[File:Felis silvestris - July 2007-1.jpg]]
+</div>
+</div>
-<px> steht für Pixel. <br />
+„Quelltext bearbeiten“: Größe des Bildes anpassen.
+<div class="grid">
+ <div class="width-1-2">
+<pre>[[File:Felis silvestris - July 2007-1.jpg|300px]]</pre>
+</div>
+ <div class="width-1-2">
+[[File:Felis silvestris - July 2007-1.jpg|300px]]
+</div>
+</div>
+{{Box|Merke|
+<px> steht für Pixel.
 * 200px – Das Bild wird kleiner.
-* 600px – Das Bild wird größer.<br />
+* 600px – Das Bild wird größer.
+|Merksatz}}
-Ein Bild mit allen Angaben:<br />
+{{Box|Merke|
+Vergiss nicht, deine Seite zu speichern.
+|Merksatz}}
-<nowiki>[[Datei:Felis silvestris - July 2007-1.jpg|350px|links|DaF-Wiki Katze]]</nowiki><br />
-Größe – Ausrichtung - Beschreibung<br />
-Speichern nicht vergessen!
+==2. Ein Video aus YouTube einfügen==
+{{Box|Üben - Ein Video aus YouTube einfügen |
+# Suche auf YouTube ein passendes Video!  https://www.youtube.com/
+# Kopiere den hinteren Teil der URL. Du findest diese unter <Teilen>.
+<pre>https://youtu.be/lJnQChnv1T4</pre>
+. Bearbeite die Seite und füge das Video ein.<br />
+|Üben}}
-{| class="wikitable "
-! Aufgabe
-! Was tun?
-! So schreibt man es:
-! Ergebnis
-|-
-| Bild aus [http://commons.wikimedia.org/wiki/Hauptseite Wikimedia Commons]
-einfügen<br />
-und verlinken<br />
-<br />
-'''Beispiel: Katze'''
-| 1.	Bild finden<br />
-.	anklicken<br />
-.	Namen der Datei kopieren:<br />
-'''File:Felis silvestris - July 2007-1.jpg'''<br />
-.Im DSD-Wiki einfügen
-| Markiere: <nowiki>File:Felis silvestris - July 2007-1.jpg</nowiki>
+„Quelltext bearbeiten“: YouTube-Videos einbinden
-→ und '''klicke''' auf [[Bild:Button link.png]] <br />
+<div class="grid">
-'''Ergebnis:''' <nowiki>[[File:Felis silvestris - July 2007-1.jpg]]</nowiki> <br />
+ <div class="width-1-2">
-Das Bild ist leider zu '''groß''' für das Wiki. <br />
+<pre>{{#ev:youtube|lJnQChnv1T4}}</pre>
-Mit dem Wert: '''80px''' verändern Sie die Größe - So:<br />
+<pre>{{#ev:youtube|Teil der YouTube-URL}}</pre>
-<nowiki>[[File:Felis silvestris - July 2007-1.jpg|80px]]</nowiki> <br />
+</div>
-Sie könne für "80" auch andere Zahlen eintragen. Probieren Sie etwas!
+ <div class="width-1-2">
+{{#ev:youtube|lJnQChnv1T4}}
-| [[File:Felis silvestris - July 2007-1.jpg|80px]]
+</div>
-|}
+</div>
-*Zusätzliches Arbeitsblatt: {{pdf|Bilder_von_InstantCommons.pdf‎|Bilder im Wiki einfügen und bearbeiten}}
-== Ein passendes Video finden und einbinden! ==
+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.
+{{Box|Info - Weitere Anpassungen |
+Zusätzlich können Parameter zur Breite (in Pixel) und zur Ausrichtung (left, center oder right) eingegeben werden:
-Suchen Sie auf YouTube ein passendes Video!   http://de.youtube.com/
+<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.
+|Kurzinfo}}
-{| class="wikitable "
-! Video-Adresse
-! Was tun?
-! So schreibt man es im Wiki:
-! Ergebnis
-|-
-| http://www.youtube.com/watch?v=3jjufIV8CpI
-| <nowiki>{{#ev:youtube|Teil der YouTube-URL}}</nowiki>
-http://wikis.zum.de/dsd/images/0/0b/Youtube2.jpg
-|    <nowiki>{{#ev:youtube|3jjufIV8CpI}}  </nowiki>
-| {{#ev:youtube|3jjufIV8CpI}}
-|}
+{{#ev:youtube|lJnQChnv1T4|800|center}}
-'''Und jetzt kommt das [[Erste_Schritte/Schritt_5|Quiz]]!'''
-== Tutorial als PDF ==
+<br>
-[[Datei:Schritt 4.pdf|Schritt 1: Erste Schritte im Wiki]]
+<br>
-[[Kategorie:Erste Schritte]]
+{{Erste Schritte/Navigation}}

Suche

Hilfe:Erste Schritte/Schritt 4: Unterschied zwischen den Versionen

Aktuelle Version vom 30. August 2020, 20:41 Uhr

1. Bilder einfügen

2. Ein Video aus YouTube einfügen

Navigation

Starten

Hilfen

⧼advertisement⧽

Suche

Hilfe:Erste Schritte/Schritt 4: Unterschied zwischen den Versionen

Aktuelle Version vom 30. August 2020, 20:41 Uhr

1. Bilder einfügen

2. Ein Video aus YouTube einfügen

Navigation

⧼advertisement⧽

⧼timis-pagehighlighted⧽

⧼timis-pagenamespaces⧽

⧼timis-pagetranslate⧽

Seitenwerkzeuge

Seitenwerkzeuge