Workshops
Der schnelle Projekt-Blog für Musikprojekte kostenlos mit wordpress.com
21. Februar 2013
Susanne Baron, Hagen Kohn & Matthias Krebs
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Was ist DigiMediaL_musik?
/ 2
www.digimedial.de
www.digimedial.de/blog
www.digimedial.de/club
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Workshop-Agenda: Der schnelle Projekt-Blog für Musikprojekte
Einstieg: Überblick und Motivation
Vorstellungsrunde & Gruppenbildung
1. Anmelden & Konfigurieren 30 Min.
– Artikel verfassen
– Darstellung anpassen
Intermezzo: Worüber bloggen? 10 Min.
2. Seiten, Links und Erweiterungen (Widgets) 30 Min.
Intermezzo: Aktives Vernetzen 10 Min.
3. Multimediale Inhalte einbinden 30 Min.
Fazit & Abschlussdiskussion 15 Min.
/ 3
Pause
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
WORDPRESS NUR EIN BLOG-TOOL?
KEINESWEGS!
Motivation und Überblick
/ 4
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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“
/ 5
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Was ist ein Blog?
/ 6
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Blog meets Music: WordPress Seiten erfolgreicher Musiker
/ 7
http://www.rollingstones.com/
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Blog meets Music: WordPress Seiten erfolgreicher Musiker
/ 8
http://www.rammstein.de/
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Blog meets Music: WordPress Seiten erfolgreicher Musiker
/ 9
http://music.iamlights.com/
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Blog meets Music: WordPress Seiten
/ 10
http://www.what-club.de/
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Blog meets Music: WordPress Seiten
/ 11
http://www.blog.digimedial.de
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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.
/ 12
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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
/ 13
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
• Name, Musikprojekt
• Welche Vorkenntnisse hast du zum Thema Wordpress?
• Was wollt ihr aus dem DigiMediaL_musik Workshop mitnehmen?
Vorstellungsrunde
/ 14
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
WORDPRESS.COM VERSUS .ORG Bevor es los geht… kurz zur Erläuterung…
/ 15
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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
/ 16
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
wordpress.com <--> wordpress.org
Wordpress.com
• Blog bei wordpress.com anmelden,
Blogdomain eintragen
(projektname.wordpress.com),
losbloggen
/ 17
Wordpress.org
• Etwas aufwändiger (Installation, Kosten
für Webspace) aber mehr Möglichkeiten
• Inhalte „gehören“ einem selbst!
A B
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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.
/ 18
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
HANDS-ON Die folgenden Folien bilden einen Leitbogen für die selbständige Gruppenarbeit.
/ 19
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Arbeitsweise
/ 20
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
1. ANMELDUNG, ARTIKEL, DARSTELLUNG
Es geht los…
/ 21
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Kapitel 1: Was soll in diesem Kapitel gemacht werden?
/ 22
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.)
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Anmelden bei www.wordpress.com
Anmelden
/ 23
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Anmeldeformular
/ 24
Email angeben, die von
hier erreicht werden kann
Blogadresse: Verfügbarkeit
wird automatisch geprüft
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Aktivierung des Wordpress-Blogs
WP verschickt Bestätigungs-Mail zur Aktivierung des Accounts. Login erfolgt automatisch.
/ 25
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Späteres Login über www.wordpress.com
/ 26
Login
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Dashboard-Ansicht
Das Dashboard ist die „Rückansicht“ des Blogs. Hier werden neue Artikel geschrieben, alle
Einstellungen vorgenommen und Statistiken über die Besucher dargestellt.
/ 27
Wechsel zum
„Frontend“
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Neuen Blog-Artikel anlegen
/ 28
Tags (Schlagwörter)
Titel
Text Veröffentlichen
erweitertes Menü anzeigen
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.
Hier einen
neuen Artikel
erstellen
Nachdem der Artikel
veröffentlicht wurde,
wechseln Sie ins
„Frontend“
Textlinks einfügen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 29
Wechsel in die Dashboard-Ansicht Ihres Blogs („Backend“)
Seitenbereich
mit „Widgets“
= Module für
Funktionen in
der Seitenleiste
Seitenkopf
Textkörper
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Website-Titel ändern/ allgemeine Einstellungen
/ 30
Blogtitel,
Zeitzone
etc.
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Darstellung anpassen
/ 31
Einstellungen
(Design)
Theme auswählen
Hier das neue Theme
aktivieren
Suchen Sie den Punkt „Design“ in der Navigationsleiste.
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Weitere Anpassung der Darstellung
/ 32
Individueller Seitenkopf („Header“)
Widget = kleine Anwendung, die einen dynamischen Inhalt auf der Seite darstellt
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Blog löschen
/ 33
In der Toolbar hier klicken
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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.)
Kapitel 1 - Checkliste: Was sollte in diesem Kapitel gemacht werden?
/ 34
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
INTERMEZZO: WORÜBER BLOGGEN
UND WIE?
/ 35
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Worüber bloggen und wie?
• Veranstaltungen, Auftritte, Konzertmitschnitte, Tourneen…
• Hintergrundberichte (Personen der Band, Probenarbeit, Tour-Geschichten…)
• Persönliche Eindrücke der Musiker, Besucher, Kinder/Jugendlichen etc.
(eigene Blogbeiträge, Interviews, Fotos, Videos…)
• Ankündigungen, Neuigkeiten, Dokumentation
• Werke besprechen, Theorie erläutern, Technik erklären, Besonderheiten
• Allgemeine Diskussionen zum Thema / zur Aussage
• Transparenz! Verfasser der Beiträge namentlich nennen.
Keine „admin“-Artikel!
• Bloggen = Dialog (Kommentarfunktion)
• Fotos + Videos einbinden, das macht Blogeinträge lebendiger!
• Keine PR-Texte, Pressemitteilungen, unkommentierten Imagebroschüren oder
Programmflyer, keine wissenschaftlichen Abhandlungen
/ 36
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Worüber bloggen und wie?
Eigene Notizen:
- Jobs, Aufträge
- Touren, Bandinfos,
-- Songs, Videos
- Termine
/ 37
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
2. WIDGETS, SEITEN UND LINKS Nächste Stufe…
/ 38
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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.)
Kapitel 2: Was soll in diesem Kapitel gemacht werden?
/ 39
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Block 2: Was soll in diesem Kapitel gemacht werden?
/ 40
Seiten
Links
Widgets
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Wie füge ich Widgets hinzu?
/ 41
Drag and drop:
gewünschtes Widget in die Sidebar ziehen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Twitter-Widget
/ 42
Backend
Frontend
Tweets eines beliebigen Twitter-Accounts können in die Sidebar eingebunden werden
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Bilder aus Flickr einbinden
/ 43
RSS-URL des Flickr-Streams
kopieren und im Widget einfügen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Bilder aus Flickr einbinden
/ 44
Darstellung im Frontend
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
RSS-Widget einfügen
/ 45
klicken Sie mit der rechten Maustaste auf das RSS-
Symbol, dann „Link-Adresse kopieren“
Suchen Sie sich eine Seite mit interessanten Inhalten, die RSS-Feeds (automatisches Abonnement der
Neuigkeiten einer Website) unterstützt.
So kann das RSS-Symbol aussehen
URL hier einfügen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
RSS-Widget einfügen
/ 46
So werden die
RSS-Feeds im
Frontend
angezeigt und
automatisch
aktualisiert
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Profilbild via Gravatar
• http://de.gravatar.com/
„Globally recognized Avatar“ erlaubt es, einer Email-Adresse ein
bestimmtes Avatar-Bild zuzuordnen und universal zu verwenden.
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Gravatar Widget aktivieren
/ 48
Verbindung zu einem bei Gravatar gespeicherten Bild
Anzeige in der Sidebar
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Links bearbeiten und hinzufügen
/ 49
Hier können neue Links
hinzugefügt werden Hier können Links bearbeitet und
gelöscht werden
Hier löschen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Anzeige der Links in der Sidebar
/ 50
Links („Blogroll“)
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Anlegen von Seiten (1)
/ 51
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
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Anlegen von Seiten (2)
/ 52
Beliebige Seite als
„Startseite“ festlegen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Sharing: Verknüpfen von sozialen Netzwerken
/ 53
Soziale Netzwerke
verknüpfen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Sharing: Verknüpfen von sozialen Netzwerken
/ 54
Beim Veröffentlichen eines Artikels
können nun zusätzliche Social-Web-
Kanäle ausgewählt werden.
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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.)
Kapitel 2 - Checkliste: Was sollte in diesem Kapitel gemacht werden?
/ 55
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
INTERMEZZO: AKTIVES VERNETZEN
/ 56
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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…)
/ 57
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Vernetzt euch!
/ 58
• Gegenseitiges Kommentieren und Antworten
• Verlinken der Blogs über die „Blogroll“
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 59
Lesezeichen im Browser
Abo in Reader (Google,
Netzvibes, …)
RSS-Feeds anderer Blogs/ Websites abonnieren
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 60
Blog als „Content Pool“
Vernetzen: Beispiel Theatercamp (1)
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Blogparade
zum Generieren
von „Hype“
Verweise auf Bild und Video-
Material (YouTube/ Flickr) auf
der FB-Page
/ 61
Vernetzen: Beispiel Theatercamp (2)
Tweet/ Re-Tweet:
alle Beteiligten nutzen ihre Netzwerke!
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
3. VIDEOS, FOTOS UND CO. Dritte Stufe…
/ 62
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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
/ 63
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
In einen Artikel können multimediale Inhalte „eingebettet“ werden.
Im Unterschied zum Hochladen handelt es sich hier um eine Verknüpfung.
Das Prinzip
/ 64
URL des Mediums in das Textfeld einfügen,
speichern – fertig!
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Einbetten von Videos (YouTube)
/ 65
„Teilen“ klicken
URL kopieren und in den
Blogbeitrag einfügen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Einbetten von Videos (Vimeo)
/ 66
URL kopieren und in
Blogbeitrag einfügen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Einbetten von Fotos (Flickr)
/ 67
Code kopieren und in den
Blogbeitrag einfügen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Alternative: Hochladen von Fotos/PDF/Videos in deine Mediathek
/ 68
Symbol klicken
Bilddatei aus lokalem Ordner
auswählen
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Extra: Einbetten von Soundcloud
/ 69
Player-Code im Textfeld einer neuen
Blog-Seite einfügen
Neue Seite in meinem Blog
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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
/ 70
1. 2. 3.
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
FAZIT UND ABSCHLUSSDISKUSSION
/ 71
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Wie weit seid ihr mit eurem WordPress-Blog?
Was sind eure nächsten Schritte?
Euer Fazit
/ 72
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
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/
/ 73
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Creative-Commons-Lizenz für diese Vortragsfolien
/ 74
Was sind Creative-Commons-Lizenzen? http://de.creativecommons.org/was-ist-cc/
DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de
Wir freuen uns auf Ihre Fragen und Hinweise.
Projektseiten:
• http://www.digimedial.udk-berlin.de
• http://blog.digimedial.de NEU
• http://facebook.com/digimedial
• http://twitter.com/digimedial
• http://youtube.com/digimedial
• http://slideshare.net/digimedial
Referent
Hagen Kohn
Vioworld GmbH
http://hagenkohn.com/
Matthias Krebs
Wissenschaftlicher Mitarbeiter
Projektentwicklung DigiMediaL_musik
Susanne Baron
Wissenschaftliche Mitarbeiterin / Social Media
DigiMediaL_musik
Top Related