Sportverein der Sparkasse KölnBonn 13.08.2007 Autor / Thema der Präsentation Sportverein der Sparkasse KölnBonn Schulungsunterlagen

Agenda Benutzerrollen und ihre Bedeutung Anmelden Beiträge Kalender Medien Seiten Fotogalerien Videos PDF-Datei mit Google Viewer einbetten Beispiel

Benutzerrollen und ihre Bedeutung Administrator Der Administrator darf alles. Es gibt keine Einschränkung. Das Portal des Sportvereins wird vom Betreiber administriert. Redakteur – Editor Ein Redakteur kann Artikel schreiben, die eigenen und die Artikel der anderen Autoren bearbeiten, veröffentlichen und löschen. Auch statische Seiten dürfen Redakteure anlegen und bearbeiten. Im Portal des Sportvereins ist diese Rolle speziell geschulten Mitarbeiterinnen zugeordnet. Autor – Author Autoren dürfen eigene Beiträge schreiben und veröffentlichen oder eigene Artikel zur Überprüfung speichern. Im Portal des SK Sportvereins ist diese Rolle den Spartenleitern zugeordnet. Mitarbeiter – Contributor Der Mitarbeiter darf zwar Beiträge schreiben, darf diese aber nicht veröffentlichen. Artikel eines Mitarbeiters werden zur Überprüfung gespeichert und müssen von einem Redakteur veröffentlicht werden. Im Portal des Sportvereins wird diese Rolle vorerst nicht vergeben. Abonnent – Subscriber Ein Abonnent kann Kommentare lesen und schreiben. Er hat ein eigenes Profil und darf dieses bearbeiten. Im Portal des Sportvereins wird diese Rolle den registrierten Mitgliedern zugewiesen.

URL: http://www.sk-sportverein.de/admin Anmelden (1/2) URL: http://www.sk-sportverein.de/admin

URL: http://www.sk-sportverein.de Anmelden (2/2) URL: http://www.sk-sportverein.de 5

Beiträge (1/14) Mit Beiträgen kann ein Spartenleiter die Aktivitäten innerhalb der Sparte dokumentieren. Typische Beiträge sind: Berichte von Veranstaltungen Erfolge Downloads Beiträge werden durch Fotos aufgewertet.

Beiträge (2/14) 7

Beiträge (3/14) Einrichtung der Beitragsseite: Unter Optionen können Komponenten der Seite ein- und ausgeblendet werden. Zu empfehlen ist die Konfiguration wie abgebildet. 8

Beiträge (4/14) Beiträge werden in 3 Schritten erstellt: Beitragstitel festlegen Beitragstext erfassen Kategorie(n) zuordnen Optionale Schritte: Schlagworte erfassen Beitragsbild festleben Kommentare erlauben/verbieten Veröffentlichen in der Zukunft 9

Beiträge (5/14) Schritte 1 und 2: Beitragstitel und Inhalt des Beitrags erfassen. 10

Beiträge (6/14) 11

Beiträge (7/14) Schritt 3: Kategorie(n) festlegen, unter der/denen ein Beitrag veröffentlicht werden soll. 12

Beiträge (8/14) Schritt 4: Schlagworte erfassen. 13

Beiträge (9/14) Schritt 5: Beitragsbild festlegen. 14

Beiträge (10/14) Schritt 6: Kommentare erlauben/verbieten. 15

Schritt 7: Veröffentlichen in der Zukunft Beiträge (11/14) Schritt 7: Veröffentlichen in der Zukunft 16

Beiträge (12/14) 17

Beiträge (13/14) Auf alte Arbeitsstände des Beitrags kann zurückgesprungen werden. 18

Beiträge (14/14) 19

Kalender (1/13) 20

Kalender (2/13) 21

Kalender (3/13) 22

Kalender (4/13) 23

Kalender (5/13) 24

Kalender (6/13) 25

Kalender (7/13) 26

Kalender (8/13) 27

Kalender (9/13) 28

Kalender (10/13) 29

Kalender (11/13) 30

Kalender (12/13) 31

Kalender (13/13) 32

Medien (1/7) In der Rubrik „Medien“ werden ausschließlich Dokumente (Pdf, Word, Excel, PowerPoint, …) und die Grafiken des Portals gespeichert. Bitte hier keine Fotos von Veranstaltungen o.ä. speichern. Fotos aus den Sparten werden unter der Rubrik „Gallery“ gespeichert. 33

Medien (2/7) Dokumente werden in 3 Schritten in einen Beitrag eingebunden: Dokument auf den Server hochladen. Beitrag erstellen und Dokument aus der Mediathek auswählen. Verknüpfung (Link) im Dokument nachbearbeiten (optional). 34

Medien (3/7) 35

Medien (4/7) 36

Medien (5/7) 37

Medien (6/7) 38

Medien (7/7) bearbeiteter Link original Link 39

Seiten (1/2) Seiten bilden das Skelett des gesamten Internetauftritts. Seiten können von Redakteuren bearbeitet werden. Spartenleiter besitzen die Rolle Autor, können aber beim Vorstand die Rolle Redakteur beantragen. Neue Seiten werden nur durch den Administrator angelegt. Jede Sparte hat eine eigene Seite. Der Inhalt der Seite wird vom Vorstand oder vom Spartenleiter gepflegt. Der rechte Seitenbereich, die sogenannte „Sidebar“, mit den Menüs: Sportarten Zukünftige Events Letzte Beiträge … ist statisch. 40

Seiten (2/2) Eine Seite besteht aus folgenden Teilen: Logo kurzer, textueller Vorstellung der Sparte Spartenleiter Trainingsort Trainingszeit Empfohlene Links auf externe Seiten (optional) Fotogalerie (optional) 41

Fotogalerien (1/8) Fotos werden in 5 Schritten eingebunden. Galerie mit dem Namen der eigenen Sparte auswählen. Foto(s) auf dem Dateisystem des eigenen Rechners auswählen. Fotos auf den Server laden. ID des Foto notieren, das eingebunden werden soll. Beitrag erstellen und Foto einbinden. Fotos werden beim hochladen auf den Server auf maximal 800 x 600 Pixel verkleinert. 42

Fotogalerien (2/8) Schritte 1 bis 3 43

Schritt 4: Galerie öffnen und ID des Fotos notieren. Fotogalerien (3/8) Schritt 4: Galerie öffnen und ID des Fotos notieren. 44

Fotogalerien (4/8) Hier steht die ID des Fotos und die Breite in Pixel Alle Bilder der Galerie angezeigt. 45

Fotogalerien (5/8) Hier steht die ID der Galerie Alle Bilder der Galerie werden angezeigt. 46

[nggallery id=1 template=caption images=12] Fotogalerien (6/8) [nggallery id=1 template=caption images=12] 47

Fotogalerien (7/8) 48

Fotogalerien (8/8) [imagebrowser id=1] 49

Videos (1/5) Videos werden in wenigen Schritten eingebunden: Beitrag erstellen. Wechseln zur visuellen Ansicht. Auf den YouTube Button klicken. Wechsel in einen Browser, dort YouTube starten, Video aussuchen und URL kopieren. Wechsel zurück nach WordPress Die URL im Popup-Fenster in das Eingabefeld „Link Sharing“ kopieren. Größe des Videos setzten: 640 x 390 Auf Button „Einfügen“ klicken. 50

Videos (2/5) Auf den YouTube Button klicken. Popup-Fenster wird geöffnet. 51

Videos (3/5) Wechsel in einen Browser, dort YouTube starten, Video aussuchen und URL kopieren. 52

Videos (4/5) Wechsel zurück nach WordPress Die URL im Popup-Fenster in das Eingabefeld „Link Sharing“ kopieren. Größe des Videos setzten: 640 x 390 Auf Button „Einfügen“ klicken. 53

Videos (5/5) Folgender Link wird in den Beitrag eingefügt: Das Ergebnis: 54

PDF-Datei mit Google Viewer einbetten (1/5) Aufrufen des Google Viewers. Eintragen der URL, unter der das PDF-Dokument auf dem Server liegt. Einen Link-Text eintragen. Link generieren und den “iframe-Code” in den Beitrag einfügen. Evtl. noch die Größenangaben im “iframe-Code” korrigieren (“width” und “height”).

PDF-Datei mit Google Viewer einbetten (2/5)

PDF-Datei mit Google Viewer einbetten (3/5)

PDF-Datei mit Google Viewer einbetten (4/5)

PDF-Datei mit Google Viewer einbetten (5/5)

Beispiel (1/9) Beitragsname: Beispiel 25.03.2017 Dies ist ein Beispiel-Beitrag der nicht zur Veröffentlichung vorgesehen ist. Bitte keine Änderungen vornehmen. Es werden die wichtigsten HTML-Tags für das Formatieren von Texten und das Einbinden von Dokumenten, Fotos und Videos aufgelistet. Die folgende rote Linie und die Überschrift werden in dieser Form auch auf den Seiten der Sparten verwendet. <hr style="width: 100%; border-width: 1px; border-style: solid; border-color: red; color: red;" noshade="noshade" width="100%" /> <span style="color: red; font-size: 20px;">Allgemeine Formatierung von Text</span> <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> <h4>Überschrift 4</h4> <h5>Überschrift 5</h5> Die Zeichenfolge & nbsp ; (ohne die beiden Leerzeichen) erzeugt einen Zeilenumbruch. Ein Text kann <strong>fett</strong> oder in <em>kursiv</em> oder <span style="text-decoration: underline;">unterstrichen </span>hervorgehoben werden. <ul> <li>Gliederung 1</li> <li>Gliederung 2</li> <li>Gliederung 3</li> </ul> <ol> <li>Aufzählung 1</li> <li>Aufzählung 2</li> <li>Aufzählung 3</li> </ol> <span style="color: red; font-size: 20px;">Einbinden von Dokumenten als Links</span> 25.03.2017

Beispiel (2/9) <strong>Hinweis:</strong> Bitte Beachten Sie, dass in der Pfadangabe die Jahreszahl und der Monat angepasst werden müssen: <em>http://www.sk-sportverein.de/wp-content/uploads/Jahr/Monat/Dateiname</em> 1. Pdf Dokument <a href="http://www.janwilbert.de/wp-content/uploads/2013/07/1915_Startliste_Sommerturnier.pdf" target="_blank"><img class="size-full wp-image-621 aligncenter" alt="acrobat_reader_50x50" src="http://www.janwilbert.de/wp-content/uploads/2013/06/acrobat_reader_50x50.gif" width="50" height="50" /></a> 2. Word Dokument <a href="http://www.janwilbert.de/wp-content/uploads/2013/06/1784_skifahrt2012.doc" target="_blank"><img class="size-full wp-image-861 aligncenter" alt="word" src="http://www.janwilbert.de/wp-content/uploads/2013/06/word.png" width="50" height="50" /></a> 3. Excel Dokument <a href="http://www.janwilbert.de/wp-content/uploads/2013/06/1901_Ergebnisse_Duesseldorf_2013.xls" target="_blank"><img class="size-full wp-image-859 aligncenter" alt="excel" src="http://www.janwilbert.de/wp-content/uploads/2013/06/excel.png" width="50" height="50" /></a> 4. PowerPoint Dokument <a href="http://www.janwilbert.de/wp-content/uploads/2013/06/1883_Präsentation_Duesseldorf.ppt" target="_blank"><img class="size-full wp-image-860 aligncenter" alt="powerpoint" src="http://www.janwilbert.de/wp-content/uploads/2013/06/powerpoint.png" width="50" height="50" /></a> <hr style="width: 100%; border-width: 1px; border-style: solid; border-color: red; color: red;" noshade="noshade" width="100%" /> <span style="color: red; font-size: 20px;">Einbinden von eingebetteten Dokumenten mit dem Google Viewer </span> <iframe style="border: none;" src="http://docs.google.com/viewer?url=http%3A%2F%2Fwww.janwilbert.de%2Fwp-content%2Fuploads%2F2013%2F06%2F343_Beitrittserkl%C3%A4rung_Sportverein.pdf&embedded=true" height="780" width="600"></iframe> <span style="color: red; font-size: 20px;">Einbinden von Fotos</span> 25.03.2017 61

Beispiel (3/9) <strong>Hinweis:</strong> Einzelne Fotos und Bildergalerien werden über sog. <em>shortcuts</em> eingebunden. Diese stehen zwischen den Zeichen [ und ] und zwar <strong>ohne</strong> Leerzeichen! 1. Anzeige eines einzelnen Fotos mit der ID=111 und der Weite von 400 pixeln. [singlepic id=111 w=400] 2. Galerieansicht der Galerie mit der ID=1 [nggallery id=1 template=galleryview] 3. Galerieansicht mit 12 Fotos [nggallery id=1 template=caption images=12] 5. Einzelansicht mit Bildinformationen [imagebrowser id=1] <hr style="width: 100%; border-width: 1px; border-style: solid; border-color: red; color: red;" noshade="noshade" width="100%" /> <span style="color: red; font-size: 20px;">Einbinden von Videos</span> <div class="youtube" style="width: 640; height: 390;"><object width="640" height="390" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/UNzjgQ3Zj2k?autoplay=0" /><embed width="640" height="390" type="application/x-shockwave-flash" src="http://www.youtube.com/v/UNzjgQ3Zj2k?autoplay=0" wmode="transparent" /></object></div> 25.03.2017 62

Beispiel (4/9) 63

Beispiel (5/9) 64

Beispiel (6/9)

Beispiel (7/9)

Beispiel (8/9)

Beispiel (9/9)

Autor / Thema der Präsentation 13.08.2007 Autor / Thema der Präsentation Vielen Dank für Ihre Aufmerksamkeit! Fragen? 25.03.2017