Sportverein der Sparkasse KölnBonn

Schulungsunterlagen

2

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

3

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.

Anmelden (1/2)

4

URL: http://www.sk-sportverein.de/admin

Anmelden (2/2)

5

URL: http://www.sk-sportverein.de

Beiträge (1/14)

6

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)

8

Einrichtung der Beitragsseite: Unter Optionen können Komponenten der Seite ein- und ausgeblendet

werden. Zu empfehlen ist die Konfiguration wie abgebildet.

Beiträge (4/14)

Beiträge werden in 3 Schritten erstellt:

1. Beitragstitel festlegen

2. Beitragstext erfassen

3. Kategorie(n) zuordnen

Optionale Schritte: Schlagworte erfassen Beitragsbild festleben Kommentare erlauben/verbieten Veröffentlichen in der Zukunft

9

Beiträge (5/14)

10

Schritte 1 und 2: Beitragstitel und Inhalt des Beitrags erfassen.

Beiträge (6/14)

11

Beiträge (7/14)

12

Schritt 3: Kategorie(n) festlegen, unter der/denen ein Beitrag veröffentlicht werden soll.

Beiträge (8/14)

13

Schritt 4: Schlagworte erfassen.

Beiträge (9/14)

14

Schritt 5: Beitragsbild festlegen.

Beiträge (10/14)

15

Schritt 6: Kommentare erlauben/verbieten.

Beiträge (11/14)

16

Schritt 7: Veröffentlichen in der Zukunft

Beiträge (12/14)

17

Beiträge (13/14)

18

Auf alte Arbeitsstände des Beitrags kann zurückgesprungen werden.

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)

33

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.

Medien (2/7)

34

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

Medien (3/7)

35

Medien (4/7)

36

Medien (5/7)

37

Medien (6/7)

38

Medien (7/7)

39

original Link

bearbeiteter Link

Seiten (1/2)

40

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.

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.

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)

42

Fotos werden in 5 Schritten eingebunden.

1. Galerie mit dem Namen der eigenen Sparte auswählen.

2. Foto(s) auf dem Dateisystem des eigenen Rechners auswählen.

3. Fotos auf den Server laden.

4. ID des Foto notieren, das eingebunden werden soll.

5. Beitrag erstellen und Foto einbinden.

Fotos werden beim hochladen auf den Server

auf maximal 800 x 600 Pixel verkleinert.

Fotogalerien (2/8)

43

Schritte 1 bis 3

Fotogalerien (3/8)

44

Schritt 4: Galerie öffnen und ID des Fotos notieren.

Fotogalerien (4/8)

45

Hier steht die ID des Fotos und die Breite in Pixel

Alle Bilder der Galerie angezeigt.

Fotogalerien (5/8)

46

Hier steht die ID der Galerie

Alle Bilder der Galerie werden angezeigt.

Fotogalerien (6/8)

47

[nggallery id=1 template=caption images=12]

Fotogalerien (7/8)

48

Fotogalerien (8/8)

49

[imagebrowser id=1]

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)

51

Auf den YouTube Button klicken.

Popup-Fenster wird geöffnet.

Videos (3/5)

52

Wechsel in einen Browser, dort YouTube starten, Video aussuchen und URL kopieren.

Videos (4/5)

53

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.

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”).

55

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

56

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

57

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

58

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

59

6004/11/23

Beispiel (1/9)

Beitragsname: Beispiel

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 &amp; 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>

<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 Dokumenten als Links</span>

6104/11/23

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&amp;embedded=true" height="780" width="600"></iframe>

<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 Fotos</span>

6204/11/23

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>

Beispiel (4/9)

63

Beispiel (5/9)

64

Beispiel (6/9)

65

Beispiel (7/9)

66

Beispiel (8/9)

67

Beispiel (9/9)

68

6904/11/23

Vielen Dank für Ihre Aufmerksamkeit!

Fragen?