5. Was ist ein Blog?
Eigentlich: dynamische Website mit Fokus auf das „Social Web“ (regelmäßig neue und
multimediale Inhalte; Kommentarfunktion)
Wandel: Grenzen zwischen Website und Blog verschwimmen immer mehr
Ergebnis: eine individuelle, professionelle & kostengünstige „Web-Präsenz“
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 5
6. Was ist ein Blog?
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 6
12. Warum WordPress für meine Musiker-Website nutzen?
WordPress = Content Management System (CMS) für Blogs/Websites
Vorteile:
• Das Aussehen ist vielfältig: hunderte kostenloser sowie auch professioneller Design-
Layouts (= Themes)
• leicht konfigurierbar ohne Programmierkenntnisse
• frei erhältliche Erweiterungen (Plugins, Widgets) zur Individualisierung
(z.B. Musikplayer, Fotoshow)
Ergebnis: ansprechende und stets aktuelle Präsentation als Künstler im Web mit Texten,
Fotos, Musik, Videos, Linksammlungen etc.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 12
13. Ziele des Workshops
• Jeder Teilnehmer geht mit einer WordPress-Projektseite nach Hause
(Musiker, Band, Event, Venue etc.).
• Kenntnisse zu Gestaltung/Layout & Funktionen von WordPress
• eigenständiges Weiterarbeiten an der Website
• Know-how, wie die WordPress-Seite über die Präsentation hinaus zur
Vernetzung genutzt werden kann
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 13
14. Vorstellungsrunde
• Name, Musikprojekt
• Welche Vorkenntnisse hast du zum Thema Wordpress?
• Was wollt ihr aus dem DigiMediaL_musik Workshop mitnehmen?
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 14
15. Bevor es los geht… kurz zur Erläuterung…
WORDPRESS.COM VERSUS .ORG
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 15
16. Das eigene Wordpress-Blog starten
A: Gehostetes Blog bei Wordpress.com http://de.wordpress.com:
• anmelden, Blogdomain eintragen (projektname.wordpress.com), losbloggen
B: Wordpress Software auf der eigenen Domain (http://wordpress.org):
• Domain auswählen (Name)
• Provider wählen (Paket: PHP + MySQL Datenbank)+ Domain registrieren bzw.
Subdomain anlegen
• auf http://wordpress-deutschland.org gehen und Wordpress auf den Rechner
laden (Download Button) + entpacken (Zip-Datei)
• FTP-Client installieren + Dateien hochladen
• Theme wählen (Theme-Kataloge), evtl. anpassen
• Einstellungen machen + losbloggen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 16
17. wordpress.com <--> wordpress.org
A B
Wordpress.com Wordpress.org
• Blog bei wordpress.com anmelden, • Etwas aufwändiger (Installation, Kosten
Blogdomain eintragen für Webspace) aber mehr Möglichkeiten
(projektname.wordpress.com), • Inhalte „gehören“ einem selbst!
losbloggen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 17
18. Frontend <--> Backend
In webbasierten Redaktions- und Blogsystemen mit getrennten Nutzeroberflächen für die
reguläre Nutzung (lesen, kommentieren) und für die Redaktion (veröffentlichen) werden
diese mit Frontend ('Vorderseite') und Backend (‚Rückseite') bezeichnet.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 18
19. Die folgenden Folien bilden einen Leitbogen für die selbständige Gruppenarbeit.
HANDS-ON
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 19
20. Arbeitsweise
Grundidee: Jeder Teilnehmer findet seinen eigenen Lösungsweg
• Selbstständiges Arbeiten in Gruppen
• Leitbogen ist das vorliegende Skript
• Untergliedert in drei Kapitel
• Am Ende jedes Kapitels Checkliste u. Erfahrungsaustausch/Fragen im
Plenum
• Intermezzo-Teile
• Schwierigkeiten während der Bearbeitung der Kapitel werden in der Gruppe
gelöst
• Notizen im Skript festhalten
• Fazit und Abschlussdiskussion am Veranstaltungsende
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 20
21. Es geht los…
1. ANMELDUNG, ARTIKEL, DARSTELLUNG
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 21
22. 1. 2. 3.
Kapitel 1: Was soll in diesem Kapitel gemacht werden?
Anmeldung und Registrierung eines neuen Blogs bei www.wordpress.com
Einen kurzen Artikel verfassen
Allgemeine Einstellungen zum Blog vornehmen
Anpassen des graphischen Darstellen (Themes) &
Anpassen des Headers (Kopfzeile)
(Wissen, wo man den Blog auch wieder löschen könnte.)
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 22
24. 1. 2. 3.
Anmeldeformular
Blogadresse: Verfügbarkeit
wird automatisch geprüft
Email angeben, die von
hier erreicht werden kann
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 24
25. 1. 2. 3.
Aktivierung des Wordpress-Blogs
WP verschickt Bestätigungs-Mail zur Aktivierung des Accounts. Login erfolgt automatisch.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 25
27. 1. 2. 3.
Dashboard-Ansicht
Das Dashboard ist die „Rückansicht“ des Blogs. Hier werden neue Artikel geschrieben, alle
Einstellungen vorgenommen und Statistiken über die Besucher dargestellt.
Wechsel zum
„Frontend“
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 27
28. 1. 2. 3.
Neuen Blog-Artikel anlegen
In Blogs wird unterschieden zwischen Artikeln und Seiten. Artikel sind dynamisch, d.h. neue Artikel
werden automatisch übereinander nach ihrem Erstellungsdatum angeordnet (geeignet z.B. für Newseinträge
auf der Startseite). Seiten sind dagegen statische Menüpunkte. Zunächst soll ein kurzer Artikel verfasst werden.
Titel
Hier einen
neuen Artikel
erstellen Textlinks einfügen Text Veröffentlichen
erweitertes Menü anzeigen
Nachdem der Artikel
veröffentlicht wurde,
wechseln Sie ins
„Frontend“
Tags (Schlagwörter)
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 28
29. 1. 2. 3.
Wechsel in die Dashboard-Ansicht Ihres Blogs („Backend“)
Seitenkopf
Textkörper
Seitenbereich
mit „Widgets“
= Module für
Funktionen in
der Seitenleiste
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 29
31. 1. 2. 3.
Darstellung anpassen
Suchen Sie den Punkt „Design“ in der Navigationsleiste.
Hier das neue Theme
aktivieren
Theme auswählen
Einstellungen
(Design)
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 31
32. 1. 2. 3.
Weitere Anpassung der Darstellung
Individueller Seitenkopf („Header“)
Widget = kleine Anwendung, die einen dynamischen Inhalt auf der Seite darstellt
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 32
33. 1. 2. 3.
Blog löschen
In der Toolbar hier klicken
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 33
34. 1. 2. 3.
Kapitel 1 - Checkliste: Was sollte in diesem Kapitel gemacht werden?
Anmeldung und Registrierung eines neuen Blogs bei www.wordpress.com
Einen kurzen Artikel verfassen
Allgemeine Einstellungen zum Blog vornehmen
Anpassen des graphischen Darstellen (Themes) &
Anpassen des Headers (Kopfzeile)
(Wissen, wo man den Blog auch wieder löschen könnte.)
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 34
39. 1. 2. 3.
Kapitel 2: Was soll in diesem Kapitel gemacht werden?
Widgets hinzufügen (z.B. Facebook, Twitter, Flickr, RSS-Feed)
Links hinzufügen (z.B. befreundeter Musiker)
Anlegen weiterer Seiten (Menüpunkte)
Verknüpfung des Blog mit sozialen Netzwerken (automatisches Teilen neuer
Beiträge auf Facebook & Co.)
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 39
40. 1. 2. 3.
Block 2: Was soll in diesem Kapitel gemacht werden?
Widgets
Seiten
Links
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 40
41. 1. 2. 3.
Wie füge ich Widgets hinzu?
Drag and drop:
gewünschtes Widget in die Sidebar ziehen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 41
42. 1. 2. 3.
Twitter-Widget
Tweets eines beliebigen Twitter-Accounts können in die Sidebar eingebunden werden
Backend
Frontend
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 42
43. 1. 2. 3.
Bilder aus Flickr einbinden
RSS-URL des Flickr-Streams
kopieren und im Widget einfügen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 43
44. 1. 2. 3.
Bilder aus Flickr einbinden
Darstellung im Frontend
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 44
45. 1. 2. 3.
RSS-Widget einfügen So kann das RSS-Symbol aussehen
Suchen Sie sich eine Seite mit interessanten Inhalten, die RSS-Feeds (automatisches Abonnement der
Neuigkeiten einer Website) unterstützt.
klicken Sie mit der rechten Maustaste auf das RSS-
Symbol, dann „Link-Adresse kopieren“
URL hier einfügen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 45
46. 1. 2. 3.
RSS-Widget einfügen
So werden die
RSS-Feeds im
Frontend
angezeigt und
automatisch
aktualisiert
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 46
47. 1. 2. 3.
Profilbild via Gravatar
„Globally recognized Avatar“ erlaubt es, einer Email-Adresse ein
• http://de.gravatar.com/ bestimmtes Avatar-Bild zuzuordnen und universal zu verwenden.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
48. 1. 2. 3.
Gravatar Widget aktivieren
Verbindung zu einem bei Gravatar gespeicherten Bild
Anzeige in der Sidebar
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 48
49. 1. 2. 3.
Links bearbeiten und hinzufügen
Hier können neue Links Hier können Links bearbeitet und
hinzugefügt werden gelöscht werden
Hier löschen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 49
50. 1. 2. 3.
Anzeige der Links in der Sidebar
Links („Blogroll“)
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 50
51. 1. 2. 3.
Anlegen von Seiten (1)
Diese funktionieren wie die Hauptrubriken einer Website und bieten sich an, um Projekte, Infos und
multimediale Inhalte vorzustellen, z.B. „Über mich“, „Fotos“, „Videos“, „Kontakt“ etc.
Hier eine neue
Seite erstellen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 51
52. 1. 2. 3.
Anlegen von Seiten (2)
Beliebige Seite als
„Startseite“ festlegen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 52
54. 1. 2. 3.
Sharing: Verknüpfen von sozialen Netzwerken
Beim Veröffentlichen eines Artikels
können nun zusätzliche Social-Web-
Kanäle ausgewählt werden.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 54
55. 1. 2. 3.
Kapitel 2 - Checkliste: Was sollte in diesem Kapitel gemacht werden?
Widgets hinzufügen (z.B. Facebook, Twitter, Flickr, RSS-Feed)
Links hinzufügen (z.B. befreundeter Musiker)
Anlegen weiterer Seiten (Menüpunkte)
Verknüpfung des Blog mit sozialen Netzwerken (automatisches Teilen neuer
Beiträge auf Facebook & Co.)
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 55
57. Gemeinsam seid ihr stark!
• Gegenseitiges Kommentieren = Feedback, Anregungen, Diskussionen
• Wechselseitige Verlinkung (via Blogroll) = Empfehlung
• Abonnieren anderer Blogs über RSS (z.B in den Google Reader) =
Relevante Inhalte kommen automatisch zu mir.
• Suchmaschinen bevorzugen Blogs aufgrund der vielen Backlinks über
Kommentare und Links sowie der aktuellen (dynamischen) Inhalte!
• Social-Web-Strategie entwickeln!
Verknüpfung des Blogs mit FB, Twitter, YouTube, Soundcloud…)
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 57
58. Vernetzt euch!
• Gegenseitiges Kommentieren und Antworten
• Verlinken der Blogs über die „Blogroll“
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 58
61. Vernetzen: Beispiel Theatercamp (2)
Blogparade
zum Generieren
von „Hype“
Tweet/ Re-Tweet:
alle Beteiligten nutzen ihre Netzwerke!
Verweise auf Bild und Video-
Material (YouTube/ Flickr) auf
der FB-Page
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 61
63. 1. 2. 3.
Kapitel 3: Worum geht es in diesem Kapitel ?
Einfache Integration von Videos (YouTube/ Vimeo), Fotos (Flickr) oder Songs
(z.B. via Soundcloud.com)
Weitere Mediendateien wie Bilder, Videos, PDF-Dateien direkt vom Computer
über die Mediathek hochladen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 63
64. 1. 2. 3.
Das Prinzip
In einen Artikel können multimediale Inhalte „eingebettet“ werden.
Im Unterschied zum Hochladen handelt es sich hier um eine Verknüpfung.
URL des Mediums in das Textfeld einfügen,
speichern – fertig!
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 64
65. 1. 2. 3.
Einbetten von Videos (YouTube)
„Teilen“ klicken
URL kopieren und in den
Blogbeitrag einfügen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 65
66. 1. 2. 3.
Einbetten von Videos (Vimeo) URL kopieren und in
Blogbeitrag einfügen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 66
67. 1. 2. 3.
Einbetten von Fotos (Flickr)
Code kopieren und in den
Blogbeitrag einfügen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 67
68. 1. 2. 3.
Alternative: Hochladen von Fotos/PDF/Videos in deine Mediathek
Symbol klicken
Bilddatei aus lokalem Ordner
auswählen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 68
69. 1. 2. 3.
Extra: Einbetten von Soundcloud
Neue Seite in meinem Blog
Player-Code im Textfeld einer neuen
Blog-Seite einfügen
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 69
70. 1. 2. 3.
Kapitel 3 – Checkliste: Was sollte in diesem Kapitel gemacht werden?
Integration von Videos (YouTube/ Vimeo), Fotos (Flickr) oder Songs (z.B. via
Soundcloud.com)
Hochladen weiterer Mediendateien wie Bilder, Videos, PDF-Dateien direkt
vom Computer über die Mediathek
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 70
72. Euer Fazit
Wie weit seid ihr mit eurem WordPress-Blog?
Was sind eure nächsten Schritte?
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 72
73. Technische Fragen
Eigene Domain weiterleiten auf Wordpress.com:
• Das lässt sich beim jeweiligen Webspace-Provider einstellen
• Es gibt dazu zahlreiche Hilfe-Foren, z.B.
http://www.homepage-forum.de/showthread.php?t=32624
Wie ziehe ich meinen Wordpress.com-Blog um auf meinen eigenen
Webspace mit selbst installiertem Wordpress.org?
• http://de.forums.wordpress.com/topic/blog-von-wordpresscom-auf-
wordpressorg-umziehen
Eine Domain, mehrere Blogs: WP- Multisite:
• http://gerhardmaecht.wordpress.com/2012/02/06/wordpress-multisite-
einrichten/
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 73
74. Creative-Commons-Lizenz für diese Vortragsfolien
Was sind Creative-Commons-Lizenzen? http://de.creativecommons.org/was-ist-cc/
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 74
75. Wir freuen uns auf Ihre Fragen und Hinweise.
Referent
Susanne Baron Hagen Kohn
Wissenschaftliche Mitarbeiterin / Social Media Vioworld GmbH
DigiMediaL_musik
kohnhagen@googlemail.com
baron@digimedial.de http://hagenkohn.com/
Projektseiten:
• http://www.digimedial.udk-berlin.de
• http://blog.digimedial.de NEU
• http://facebook.com/digimedial Matthias Krebs
Wissenschaftlicher Mitarbeiter
• http://twitter.com/digimedial Projektentwicklung DigiMediaL_musik
• http://youtube.com/digimedial krebs@digimedial.de
• http://slideshare.net/digimedial
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de