Benutzer-Werkzeuge

Webseiten-Werkzeuge


arbeitsmethoden:formatieren-im-unterrichtswiki

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
arbeitsmethoden:formatieren-im-unterrichtswiki [14.03.2014 (10:51)] – [Abbildungen auf der Seite anordnen] kaltarbeitsmethoden:formatieren-im-unterrichtswiki [06.08.2020 (11:28)] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 ====== Formatieren im Unterrichtswiki ====== ====== Formatieren im Unterrichtswiki ======
  
-Das hier ist ein **Wiki** ([[arbeitsmethoden:was-ist-ein-wiki]]). Man formatiert Textfügt Abbildungen ein etc. indem man einfache Formatierungszeichen verwendet (die so genannte »Wiki-Syntax«)+Auf dieser Seite findest Du umfangreiche Anleitungenwie man mit Unterrichtswiki arbeiten kann. Die wichtigsten Inhalte sind in Form kurzer Erklärvideos dargestellt, die schriftlichen Informationen ergänzen und vertiefen diese Inhalte
  
-Die Software, mit der ich dieses Wiki betreibe, heißt [[http://dokuwiki.org|DokuWiki]]. Das ist wichtig zu wissen, weil sich die genaue Schreibweise für Überschriften etc. meist zwischen den einzelnen Wiki-Programmen unterscheidet. Falls Du also mal mit einer anderen Wiki-Software arbeitest, wird Dir vieles bekannt vorkommen, einige Details können aber verschieden sein.  +Die Software, mit der diese Plattform betrieben wird, heißt [[http://dokuwiki.org|DokuWiki]]. Das ist wichtig zu wissen, weil sich die genaue Schreibweise für Überschriften etc. meist zwischen den einzelnen Wiki-Programmen unterscheidet. Falls Du also mal mit einer anderen Wiki-Software arbeitest, wird Dir vieles bekannt vorkommen, einige Details können aber verschieden sein.  
  
-Hier sollen die wichtigsten Zeichen vorgestellt werden. Eine komplette Übersicht findet sich in der Bearbeitungsansicht oberhalb des Texteingabefeldes unter dem Link **[[wiki:syntax]]**.  
  
 ===== Seiten bearbeiten ===== ===== Seiten bearbeiten =====
 +
 +{{youtube>8bRjMCKWMBE?640x360}}
  
 {{ bearbeiten-button.jpg?nolink}} Wenn Du Bearbeitungsrechte für einen Bereich meines Wikis hast, siehst Du rechts auf der Seite einen Button mit einem Bleistift. Dieser bedeutet »Bearbeiten«.  {{ bearbeiten-button.jpg?nolink}} Wenn Du Bearbeitungsrechte für einen Bereich meines Wikis hast, siehst Du rechts auf der Seite einen Button mit einem Bleistift. Dieser bedeutet »Bearbeiten«. 
Zeile 57: Zeile 58:
 Er hat eigentlich keine inhaltliche Bedeutung, nur eine Formale.  Er hat eigentlich keine inhaltliche Bedeutung, nur eine Formale. 
  
-===== Buttons zur Eingabe von Zeichen =====+===== Buttons zur Eingabe von Formatierungszeichen =====
  
 Oberhalb des Texteingabefeldes steht eine Reihe von Buttons zur Verfügung, mit denen man die häufigsten Formatierungszeichen eingeben kann. Die einzelnen Symbole sind [[http://www.dokuwiki.org/toolbar|hier erkärt.]] Oberhalb des Texteingabefeldes steht eine Reihe von Buttons zur Verfügung, mit denen man die häufigsten Formatierungszeichen eingeben kann. Die einzelnen Symbole sind [[http://www.dokuwiki.org/toolbar|hier erkärt.]]
Zeile 67: Zeile 68:
  
 Viele Zeichen müssen **vor** und **nach** einem Textelement platziert werden. Bei Formatierungen wie **fett**, //kursiv// oder auch bei Überschriften kann man zunächst Text markieren. Wenn man dann den entsprechenden Button drückt, werden die Zeichen automatisch vor und nach dem markierten Text eingefügt. Bei anderen Zeichen wie z.B. Listen funktioniert das ähnlich. **Probiere es am besten mal aus.** Viele Zeichen müssen **vor** und **nach** einem Textelement platziert werden. Bei Formatierungen wie **fett**, //kursiv// oder auch bei Überschriften kann man zunächst Text markieren. Wenn man dann den entsprechenden Button drückt, werden die Zeichen automatisch vor und nach dem markierten Text eingefügt. Bei anderen Zeichen wie z.B. Listen funktioniert das ähnlich. **Probiere es am besten mal aus.**
 +
 +===== Listen =====
 +
 +Man kann leicht sowohl **Punktlisten** als auch **nummerierte Listen** erzeugen indem man einen dieser beiden Buttons klickt {{dokuwiki-listen.jpg?nolink}}. 
 +
 +Alternativ kann man Listen auch per Tastatur starten: 
 +
 +  - Die automatische Listenformatierung wird dadurch aktiviert, dass man zunächst vom Anfang einer Zeile **zwei Leerschaltungen <key>Leertaste</key> <key>Leertaste</key> einrückt**. 
 +  - Anschließend folgt 
 +    - <key><nowiki>*</nowiki></key> <key>Leertaste</key> »Text« für eine Punktliste oder 
 +    - <key><nowiki>-</nowiki></key> <key>Leertaste</key> »Text« für eine nummerierte Liste. 
 +
 +Insgesamt also z.B. <key>Leertaste</key> <key>Leertaste</key> <key><nowiki>*</nowiki></key> <key>Leertaste</key>»Text« 
 +
 +In einer neuen Zeile wird automatisch das zuletzt verwendete Listenzeichen vorangestellt. Möchte man die Liste beenden, drückt man erneut <key>Enter</key>
  
 ===== Überschriften ===== ===== Überschriften =====
 +
 +{{youtube>ai-MyX6Myjk?640x360}}
  
   * Überschriften werden durch Gleichzeichen <nowiki>(=)</nowiki> markiert.    * Überschriften werden durch Gleichzeichen <nowiki>(=)</nowiki> markiert. 
Zeile 87: Zeile 105:
 Probiere die einzelnen Buttons einfach mal aus.  Probiere die einzelnen Buttons einfach mal aus. 
  
-===== Listen =====+===== Strukturierung von Seiten durch hierarchische Überschriften =====
  
-Man kann leicht sowohl **Punktlisten** als auch **nummerierte Listen** erzeugen indem man einen dieser beiden Buttons klickt {{dokuwiki-listen.jpg?nolink}}+<note tip>Strukturiere  Seiten im Wiki im Sinne eine **hierarchischen Gliederung**. Erstelle entsprechende Überschriften, um die Struktur deutlich zu machen.</note>
  
-Alternativ kann man Listen auch per Tastatur starten: +  * Beginne **jede** Seite mit einer Überschrift der höchsten Gliederungsebene (s.o.). Das ist wichtig, weil diese Überschrift im gesamten System als Seitenname angezeigt wird.  
 +  * Benutzen Sie die verschiedenen Überschriften-Buttons, um die weiteren Inhalte der Seite zu strukturieren.  
 +  * Ab einer gewissen Anzahl Überschriften, wird **automatisch** ein **Inhaltsverzeichnis** der Seite angezeigt. 
  
-  - Die automatische Listenformatierung wird dadurch aktiviert, dass man zunächst vom Anfang einer Zeile **zwei Leerschaltungen <key>Leertaste</key> <key>Leertaste</key> einrückt**.  
-  - Anschließend folgt  
-    - <key><nowiki>*</nowiki></key> <key>Leertaste</key> »Text« für eine Punktliste oder  
-    - <key><nowiki>-</nowiki></key> <key>Leertaste</key> »Text« für eine nummerierte Liste.  
  
-Insgesamt also z.B. <key>Leertaste</key> <key>Leertaste</key> <key><nowiki>*</nowiki></key> <key>Leertaste</key>»Text«  
  
-In einer neuen Zeile wird automatisch das zuletzt verwendete Listenzeichen vorangestellt. Möchte man die Liste beenden, drückt man erneut <key>Enter</key> 
  
 +===== Links =====
  
-===== Tabellen ===== +{{youtube>b5opT3aj2u8?640x360}}
-Man kann im Unterrichtswiki einfache Tabellen wie die Folgende anlegen.+
  
-^ Spaltenkopf 1     ^ Spaltenkopf      ^ Spaltenkopf 3      ^ +Im Wiki werden zwei Arten von Links unterschieden:  
-| Reihe 1, Spalte 1 | Reihe 1, Spalte 2  | Reihe 1, Spalte 3  | +  - Links ins öffentliche Web (externe Links) – Button und 
-| Reihe 1, Spalte 1 | Eine Spalte, die zwei andere überspannt (doppelten Strich beachten|| +  - Links innerhalb des Wikis (interne Links– Button 1. \\ {{link-buttons.jpg?nolink}}
-| Reihe 1, Spalte 1 | Reihe 3, Spalte 2  | Reihe 3, Spalte 3  |+
  
-  * Normale Zeilen beginnen mit ''|'' (Windows: <key>Alt Gr</key> + <key>%%<%%</key>, Mac: <key>⌥</key> + <key>7</key>+Die grundlegende Schreibweise für beide Linkarten ist gleich: <nowiki>[[doppelte eckige Klammern]]</nowikizeigen andass ein Link gesetzt werden soll.
-  * Spaltenköpfe mit ''^'' (die Taste links von der <key>1</key>)+
  
-  ^ Spaltenkopf 1     ^ Spaltenkopf 2      ^ Spaltenkopf 3      ^ +==== Externe Links ==== 
-  | Reihe 1, Spalte 1 | Reihe 1, Spalte  | Reihe 1Spalte 3  | +Ein Klick auf den Button für externe Links (siehe oben: 2)setzt den markierten Text in doppelte eckige Klammern. Innerhalb der Klammern fügt man zunächst die URL der zu verlinkenden Seite eindann einen senkrechten Strich (Windows: <key>Alt Gr</key> + <key><nowiki><</nowiki></key>Mac: <key>Alt</key> + <key>Shift</key> + <key>7</key>), dann den zu verlinkenden Text.
-  | Reihe 1Spalte 1 | Eine Spaltedie zwei andere überspannt (doppelten Strich beachten|| +
-  | Reihe 1, Spalte 1 | Reihe 3, Spalte 2  | Reihe 3Spalte 3  |+
  
-Um zwei Zellen horizontal miteinander zu verbinden, muss die zweite jeweils komplett leer sein (das erkennt man im Beispiel oben daran, dass die beiden ''|'' am Ende der zweiten Zeile direkt nebeneinander stehen.+Ein Link auf die KGN-Website würde also folgendermaßen aussehen: 
  
-Man //kann// die senkrechten Striche schön untereinander ausrichten, muss das aber nicht tun+|<100% 50%>| 
 +^ Schreibweise ^ Ergebnis ^ 
 +| ''<nowiki>[[http://www.kreisgymnasium-neuenburg.de|Kreisgymnasium Neuenburg]]</nowiki>'' | [[http://www.kreisgymnasium-neuenburg.de|Kreisgymnasium Neuenburg]] |
  
-<note important>**Wichtig** istdass **jede Zeile aus gleich vielen Spalten** bestehtda sonst die Struktur der Tabelle durcheinander kommt.</note> +==== Interne Links ==== 
 +Ein Klick auf den Button für interne Links (siehe oben: 1) öffnet ein kleines Fensterin dem man die Seite auswählen kannauf die man verlinken möchte
  
-Es gibt noch mehr MöglichkeitenTabellen zu formatieren. Du findest die komplette Übersicht auf der Seite [[wiki:syntax#tables|Formatting Syntax]]. +  * Entweder man tippt einige Buchstaben des Seitennamens in das Suchfeldum die Auswahl einzuschränken 
-===== Dateien und Abbildungen =====+  * oder man klickt die einzelnen Namensräume (»Ordner«) durch und wählt so die gewünschte Seite aus. 
  
-Man kann im Wiki auch Dateien hochladen und verlinken sowie Abbildungen anzeigen Durch einen Klick auf den **Upload-Button** {{upload-button.jpg?nolink|}} öffnet sich ein neues Fenster.+Das Ergebnis ist wieder ein Link in doppelten eckigen Klammern wie bei externen LinksAllerdings ist der Teil, bei dem oben die URL stand, dieses Mal anders gestaltet
  
-{{upload-fenster.jpg?nolink}}+|<100% 50%>| 
 +^ Schreibweise ^ Ergebnis ^ 
 +| ''<nowiki>[[:unterricht:nwt9ac:start]]</nowiki>'' | [[:unterricht:nwt9ac:start]] |
  
-Es sind **drei Schritte** nötig: +Der obige Link zeigt auf die Seite »start«, die im Namensraum (»Bereich«) ''nwt9ac'' liegt, der wiederum innerhalb des Namensraums ''unterricht'' liegt.  Diese Auswahl entspricht also dem Auswählen einer Datei innerhalb einer verschachtelten Ordnerstruktur. Der Text des Links stammt von der ersten Überschrift dieser Startseite und wird automatisch gesetzt. 
  
-  - **Upload** der Datei oder der Abbildung\\ Im **rechten oberen Bereich (rot)** kann man eine oder mehrere Dateien auf der Festplatte für den Upload auswählen und hochladen. +Möchte man einen eigenen Linktext schreiben, kann man diesen (wie bei externen Linkshinter einem senkrechten Strich einfügen
-  - **Auswählen** der Datei oder Abbildung.\\ Im **rechten unteren Bereich (blau)** sind die bereits vorhandenen Dateien zu sehen. Durch **Klicken auf den Dateinamen oder das angezeigte Vorschaubild** kann eine Datei ausgewählt werden. +
-  - {{ :arbeitsmethoden:bild-einfuegen.jpg?nolink|}} Festlegen einiger **Einstellungen und Einfügen** in die Wiki-Seite. Die folgende Abbildung zeigt die Einstellungen, die in den meisten Fällen sinnvoll ist.  Probiere die anderen aber ruhig auch mal aus. +
  
 +|<100% 50%>|
 +^ Schreibweise ^ Ergebnis ^
 +| ''<nowiki>[[:unterricht:nwt9ac:start|Startseite für die 9ac]]</nowiki>'' | [[:unterricht:nwt9ac:start|Startseite für die 9ac]] |
  
-<note tip>Grafikdateien werden nach dem Einfügen direkt als Abbildungen angezeigt, andere Dateiarten (z.B. ''.pdf'', ''.doc'' oder ''.ppt'') werden als Download-Links dargestellt. </note> 
  
-**Im linken Bereich des Upload-Fensters** kann man festlegen, in welchen Namensraum (entspricht etwa einem Ordner) der Software die Datei gespeichert werden soll. //Hier kann man praktisch immer die Voreinstellung unangetastet lassen.// Dieser Speicherort hat auch nichts damit zu tun, auf welcher Intranet-Seite die Datei verwendet werden kann. +{{youtube>D5Ci1PGVShg?640x360}}
  
-==== Abbildungen auf der Seite anordnen ==== 
-Es gibt verschiedene Möglichkeiten, die Position einer Abbildung auf der Seite zu kontrollieren. Wie das geht, erklärt der erste Abschnitt dieser Seite: **[[abb-fortgeschritten]]**. 
 ===== Erzeugen neuer Seiten ===== ===== Erzeugen neuer Seiten =====
 +
 +{{youtube>UJPpJeBlkOA?640x360}}
  
 <note tip>**Eine neue Seite** kann dadurch erzeugt werden, dass man zunächst einen **Link erzeugt, der auf die neue Seite »zeigt«**.</note>  <note tip>**Eine neue Seite** kann dadurch erzeugt werden, dass man zunächst einen **Link erzeugt, der auf die neue Seite »zeigt«**.</note> 
Zeile 161: Zeile 176:
  
  
-===== Links ===== +===== Dateien und Abbildungen =====
-Im Wiki werden zwei Arten von Links unterschieden:  +
-  - Links ins öffentliche Web (externe Links) – Button 2 und +
-  - Links innerhalb des Wikis (interne Links) – Button 1. +
  
-{{link-buttons.jpg?nolink}}+{{youtube>Or0wH50lExo?640x360}}
  
-Die grundlegende Schreibweise für beide Linkarten ist gleich: <nowiki>[[doppelte eckige Klammern]]</nowiki> zeigen an, dass ein Link gesetzt werden soll.+Man kann im Wiki auch Dateien hochladen und verlinken sowie Abbildungen anzeigen.  Durch einen Klick auf den **Upload-Button** {{upload-button.jpg?nolink|}} öffnet sich ein neues Fenster.
  
-==== Externe Links ==== +{{upload-fenster.jpg?nolink}}
-Ein Klick auf den Button für externe Links (siehe oben: 2), setzt den markierten Text in doppelte eckige Klammern. Innerhalb der Klammern fügt man zunächst die URL der zu verlinkenden Seite ein, dann einen senkrechten Strich (Windows: <key>Alt Gr</key> + <key><nowiki><</nowiki></key>, Mac: <key>Alt</key> + <key>Shift</key> + <key>7</key>), dann den zu verlinkenden Text.+
  
-Ein Link auf die KGN-Website würde also folgendermaßen aussehen+Es sind **drei Schritte** nötig
  
-|<100% 50%>| +  - **Upload** der Datei oder der Abbildung\\ Im **rechten oberen Bereich (rot)** kann man eine oder mehrere Dateien auf der Festplatte für den Upload auswählen und hochladen. 
-^ Schreibweise ^ Ergebnis ^ +  - **Auswählen** der Datei oder Abbildung.\\ Im **rechten unteren Bereich (blau)** sind die bereits vorhandenen Dateien zu sehen. Durch **Klicken auf den Dateinamen oder das angezeigte Vorschaubild** kann eine Datei ausgewählt werden. 
-| ''<nowiki>[[http://www.kreisgymnasium-neuenburg.de|Kreisgymnasium Neuenburg]]</nowiki>'' | [[http://www.kreisgymnasium-neuenburg.de|Kreisgymnasium Neuenburg]] |+  Festlegen einiger **Einstellungen und Einfügen** in die Wiki-SeiteDie folgende Abbildung zeigt die Einstellungen, die in den meisten Fällen sinnvoll ist Probiere die anderen aber ruhig auch mal aus. \\  {{:arbeitsmethoden:bild-einfuegen.jpg?nolink|}}
  
-==== Interne Links ==== 
-Ein Klick auf den Button für interne Links (siehe oben: 1) öffnet ein kleines Fenster, in dem man die Seite auswählen kann, auf die man verlinken möchte.  
  
-  * Entweder man tippt einige Buchstaben des Seitennamens in das Suchfeldum die Auswahl einzuschränken +<note tip>Grafikdateien werden nach dem Einfügen direkt als Abbildungen angezeigtandere Dateiarten (z.B. ''.pdf'', ''.doc'' oder ''.ppt''werden als Download-Links dargestellt</note>
-  * oder man klickt die einzelnen Namensräume (»Ordner«durch und wählt so die gewünschte Seite aus+
  
-Das Ergebnis ist wieder ein Link in doppelten eckigen Klammern wie bei externen Links. Allerdings ist der Teil, bei dem oben die URL standdieses Mal anders gestaltet+**Im linken Bereich des Upload-Fensters** kann man festlegen, in welchen Namensraum (entspricht etwa einem Ordner) der Software die Datei gespeichert werden soll. //Hier kann man praktisch immer die Voreinstellung unangetastet lassen.// Dieser Speicherort hat auch nichts damit zu tunauf welcher Intranet-Seite die Datei verwendet werden kann 
 +==== Fortgeschrittene Funktionen im Zusammenhang mit Abbildungen ====
  
-|<100% 50%>| +Es gibt verschiedene weitere Möglichkeiten, mit Abbildung zu arbeiten: 
-^ Schreibweise ^ Ergebnis ^ +  * Ausdruck zum Einfügen von Abbildungen verstehen 
-| ''<nowiki>[[:unterricht:nwt9ac:start]]</nowiki>'' | [[:unterricht:nwt9ac:start]] |+  * Position der Abbildung auf der Seite kontrollieren 
 +  * Darstellungsgröße festlegen 
 +  * Bildunterschrift einfügen
  
-Der obige Link zeigt auf die Seite »start«, die im Namensraum (»Bereich«) ''nwt9ac'' liegt, der wiederum innerhalb des Namensraums ''unterricht'' liegt.  Diese Auswahl entspricht also dem Auswählen einer Datei innerhalb einer verschachtelten Ordnerstruktur. Der Text des Links stammt von der ersten Überschrift dieser Startseite und wird automatisch gesetzt+Diese Funktionen werden auf dieser Seite erklärt: **[[abb-fortgeschritten]]**
  
-Möchte man einen eigenen Linktext schreiben, kann man diesen (wie bei externen Links) hinter einem senkrechten Strich einfügen:  
  
-|<100% 50%>| 
-^ Schreibweise ^ Ergebnis ^ 
-| ''<nowiki>[[:unterricht:nwt9ac:start|Startseite für die 9ac]]</nowiki>'' | [[:unterricht:nwt9ac:start|Startseite für die 9ac]] | 
  
 +===== Tabellen =====
  
-===== Strukturierung von Seiten durch hierarchische Überschriften =====+{{youtube>-3Hfbu3rIGs?640x360}}
  
-<note tip>Strukturiere  Seiten im Wiki im Sinne eine **hierarchischen Gliederung**. Erstelle entsprechende Überschriften, um die Struktur deutlich zu machen.</note>+Man kann im Unterrichtswiki einfache Tabellen wie die Folgende anlegen.
  
-  Beginne **jede** Seite mit einer Überschrift der höchsten Gliederungsebene (s.o.). Das ist wichtigweil diese Überschrift im gesamten System als Seitenname angezeigt wird +^ Spaltenkopf 1     ^ Spaltenkopf 2      ^ Spaltenkopf 3      ^ 
-  * Benutzen Sie die verschiedenen Überschriften-Buttons, um die weiteren Inhalte der Seite zu strukturieren.  +| Reihe 1, Spalte 1 | Reihe 1, Spalte 2  | Reihe 1, Spalte 3  | 
-  * Ab einer gewissen Anzahl Überschriftenwird **automatisch** ein **Inhaltsverzeichnis** der Seite angezeigt+| Reihe 1, Spalte 1 | Eine Spalte, die zwei andere überspannt (doppelten Strich beachten) || 
 +| Reihe 1, Spalte 1 | Reihe 3, Spalte 2  | Reihe 3, Spalte 3  | 
 + 
 +  Normale Zeilen beginnen mit ''|'' (Windows: <key>Alt Gr</key> + <key>%%<%%</key>, Mac: <key>⌥</key> + <key>7</key>
 +  * Spaltenköpfe mit ''^'' (die Taste links von der <key>1</key>).  
 + 
 +  ^ Spaltenkopf 1     ^ Spaltenkopf 2      ^ Spaltenkopf 3      ^ 
 +  | Reihe 1, Spalte 1 | Reihe 1, Spalte 2  | Reihe 1, Spalte 3  | 
 +  | Reihe 1, Spalte 1 | Eine Spalte, die zwei andere überspannt (doppelten Strich beachten) || 
 +  | Reihe 1, Spalte 1 | Reihe 3, Spalte 2  | Reihe 3, Spalte 3  | 
 + 
 +Um zwei Zellen horizontal miteinander zu verbinden, muss die zweite jeweils komplett leer sein (das erkennt man im Beispiel oben daran, dass die beiden ''|'' am Ende der zweiten Zeile direkt nebeneinander stehen. 
 + 
 +Man //kann// die senkrechten Striche schön untereinander ausrichten, muss das aber nicht tun.  
 + 
 +<note important>**Wichtig** ist, dass **jede Zeile aus gleich vielen Spalten** besteht, da sonst die Struktur der Tabelle durcheinander kommt.</note>  
 + 
 +Es gibt noch mehr Möglichkeiten, Tabellen zu formatierenDu findest die komplette Übersicht auf der Seite [[wiki:syntax#tables|Formatting Syntax]]. 
 + 
 +===== Einbinden externer Elemente ===== 
 +==== Karten aus Google Maps ==== 
 + 
 +Man wählt in Google Maps den **Kartenausschnitt**, die **Kartenansicht** (Karte, Satellit, Geländeund den **Maßstab**, den man haben möchte 
 + 
 +Anschließend klickt man das links oben auf das Menü-Icon. \\ {{karte-einbinden-01.jpg?nolink|}} 
 + 
 +In der sich öffnenden **Seitenleiste** wählt man ''Karte teilen und einbetten''. \\ {{karte-einbinden-02.jpg?nolink|}} 
 + 
 +Nun wählt man die gewünschte **Kartengröße** (»Groß« ist meist sinnvollaber das hängt im Detail von der gewünschten Verwendung ab) und **kopiert** den angezeigten **Einbettungscode**. Man muss darauf achten, dass man den //gesamten// Inhalte des Textfeldes mit dem Code markiert, bevor man ihn kopiert\\ {{karte-einbinden-03.jpg?nolink|}} 
 + 
 +Der Einbettungscode hat folgendes Format (scrolle des Feld mal ganz nach rechts, um auch das Ende des Ausdrucks zu sehen):  
 + 
 +  <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d258919.00732841948!2d-111.4377858!3d56.7947008!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x53b03aeeff1a4459%3A0x5c8133330dca74b7!2sFort+McMurray%2C+Alberta%2C+Kanada!5e1!3m2!1sde!2sde!4v1416726289971" width="800" height="600" frameborder="0" style="border:0"></iframe> 
 +   
 +Das ist ein [[http://www.htmldog.com/guides/html/|HTML]] Element, das einen so genannten [[http://www.w3schools.com/tags/tag_iframe.asp|Inline-Frame (iframe)]] einbettet. Damit holt man sich den Inhalte einer anderen Website wie in einem »Fensterrahmen« auf die eigene Webseite. Um den ''iframe'' in Wiki-Schreibweise darzustellenmuss man ihn etwas »umbauen«.  
 + 
 +Die Wiki-Schreibweise dafür sieht so aus:  
 + 
 +  {{url>https://… 800px,600px noscroll noborder}} 
 + 
 +Hier fügt man nun drei Dinge ein: den Inhalt von ''src'', ''width'' und ''height''
 + 
 +  - ''src'' (engl. //source//, »Quelle«) gibt die URL der Webseite an, die eingebunden werden soll. Man kopiert den gesamten Ausdruck der nach ''src'' **zwischen** den Anführungszeichen steht (also //nicht// die Anführungszeichen mit kopieren) und fügt ihn direkt nach dem ''>'' Zeichen ein (ohne Leerschaltung dazwischen).  
 +  - ''width'' und ''height'' definieren die Größe des ''iframe'' in Pixeln (Bildpunkten des Bildschirms). Den Wert für ''width'' fügt man an erster Stelle im obigen Wiki-Ausdruck ein, den Wert für ''height'' an zweiter Stelle. Die Einheit ''px'' muss dabei angegeben werden. 
 +  - Den Rest des Wiki-Ausdrucks lässt man stehen (''noscroll'' bedeutet, dass der ''iframe'' nicht scrollen soll, ''noborder'' bedeutet, dass er keinen Rand haben soll).  
 + 
 +Der gesamte Wiki-Ausdruck würde also im Beispiel so aussehen (wieder ganz nach rechts scrollen) … 
 + 
 +  {{url>https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d258919.00732841948!2d-111.4377858!3d56.7947008!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x53b03aeeff1a4459%3A0x5c8133330dca74b7!2sFort+McMurray%2C+Alberta%2C+Kanada!5e1!3m2!1sde!2sde!4v1416726289971 800px,600px noscroll noborder}} 
 + 
 +… und die eingebettete Karte so: 
 + 
 +{{url>https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d258919.00732841948!2d-111.4377858!3d56.7947008!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x53b03aeeff1a4459%3A0x5c8133330dca74b7!2sFort+McMurray%2C+Alberta%2C+Kanada!5e1!3m2!1sde!2sde!4v1416726289971 800px,600px noscroll noborder}} 
 + 
 +==== Videos von YouTube etc. ==== 
 + 
 +  - Um ein Video einzubinden, kopiert man zunächst die URL der Video-Seite, z.B. ''%%https://www.youtube.com/watch?v=WwBVG0Si7rs%%'' 
 +  - Im Wiki klickt man auf den Video-Button in der Symbolleiste \\ {{video-einbinden-01.jpg?nolink|}} 
 +  - Im sich öffnenden Fenster fügt man die zuvor kopierte URL ein und klickt ''OK''.  
 +  - Der eingefügte Wiki-Ausdruck sieht so aus: ''%%{{youtube>WwBVG0Si7rs?medium}}%%'' 
 +  - Meist empfiehlt es sich, im nun eingefügten Ausdruck die Größenangabe ''medium'' durch ''large'' zu ersetzen, damit das Video angemessen groß dargestellt wird.  
 + 
 +Das Ergebnis sieht dann so aus: {{youtube>WwBVG0Si7rs?large}}
  
 ===== Weiterführende Hinweise ===== ===== Weiterführende Hinweise =====
  
   * Wer sich dafür interessiert, vertiefe sich in die [[http://www.dokuwiki.org/syntax|Syntax des DokuWikis]].   * Wer sich dafür interessiert, vertiefe sich in die [[http://www.dokuwiki.org/syntax|Syntax des DokuWikis]].
- 
arbeitsmethoden/formatieren-im-unterrichtswiki.1394790694.txt.gz · Zuletzt geändert: 06.08.2020 (10:37) (Externe Bearbeitung)

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki