DigiMediaL_musik Wordpress als Musiker-Webseite

Workshops
Der schnelle Projekt-Blog für Musikprojekte
kostenlos mit wordpress.com
21. Februar 2013
Susanne Baron, Hagen Kohn & Matthias Krebs

Was ist DigiMediaL_musik?

www.digimedial.de
www.digimedial.de/club
www.digimedial.de/blog

DigiMediaL_musik 2013 | www.digimedial.udk-berlin.de / 2

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.
Pause
Intermezzo: Aktives Vernetzen 10 Min.

3. Multimediale Inhalte einbinden 30 Min.

Fazit & Abschlussdiskussion 15 Min.


Motivation und Überblick

WORDPRESS NUR EIN BLOG-TOOL?
KEINESWEGS!


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“


Was ist ein Blog?


Blog meets Music: WordPress Seiten erfolgreicher Musiker

http://www.rollingstones.com/


http://www.rammstein.de/


http://music.iamlights.com/

Blog meets Music: WordPress Seiten

http://www.what-club.de/

Blog meets Music: WordPress Seiten

http://www.blog.digimedial.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.


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


Vorstellungsrunde

• Name, Musikprojekt

• Welche Vorkenntnisse hast du zum Thema Wordpress?

• Was wollt ihr aus dem DigiMediaL_musik Workshop mitnehmen?


Bevor es los geht… kurz zur Erläuterung…

WORDPRESS.COM VERSUS .ORG


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


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

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.


Die folgenden Folien bilden einen Leitbogen für die selbständige Gruppenarbeit.

HANDS-ON


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

Es geht los…

1. ANMELDUNG, ARTIKEL, DARSTELLUNG


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


1. 2. 3.

Anmelden bei www.wordpress.com

Anmelden


1. 2. 3.

Anmeldeformular

Blogadresse: Verfügbarkeit
wird automatisch geprüft

Email angeben, die von
hier erreicht werden kann


1. 2. 3.

Aktivierung des Wordpress-Blogs

WP verschickt Bestätigungs-Mail zur Aktivierung des Accounts. Login erfolgt automatisch.


1. 2. 3.

Späteres Login über www.wordpress.com

Login


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“


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)


1. 2. 3.

Wechsel in die Dashboard-Ansicht Ihres Blogs („Backend“)

Seitenkopf

Textkörper

Seitenbereich
mit „Widgets“
= Module für
Funktionen in
der Seitenleiste


1. 2. 3.

Website-Titel ändern/ allgemeine Einstellungen

Blogtitel,
Zeitzone
etc.


1. 2. 3.

Darstellung anpassen
Suchen Sie den Punkt „Design“ in der Navigationsleiste.
Hier das neue Theme
aktivieren

Theme auswählen
Einstellungen
(Design)


1. 2. 3.

Weitere Anpassung der Darstellung

Individueller Seitenkopf („Header“)

Widget = kleine Anwendung, die einen dynamischen Inhalt auf der Seite darstellt

1. 2. 3.

Blog löschen

In der Toolbar hier klicken


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


INTERMEZZO: WORÜBER BLOGGEN
UND WIE?


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


Worüber bloggen und wie?

Eigene Notizen:

- Jobs,Aufträge
- Touren, Bandinfos,
-- Songs, Videos
- Termine


Nächste Stufe…

2. WIDGETS, SEITEN UND LINKS


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


1. 2. 3.

Block 2: Was soll in diesem Kapitel gemacht werden?

Widgets
Seiten

Links


1. 2. 3.

Wie füge ich Widgets hinzu?

Drag and drop:
gewünschtes Widget in die Sidebar ziehen


1. 2. 3.

Twitter-Widget
Tweets eines beliebigen Twitter-Accounts können in die Sidebar eingebunden werden

Backend

Frontend


1. 2. 3.

Bilder aus Flickr einbinden

RSS-URL des Flickr-Streams
kopieren und im Widget einfügen


1. 2. 3.

Bilder aus Flickr einbinden

Darstellung im Frontend


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


1. 2. 3.

RSS-Widget einfügen

So werden die
RSS-Feeds im
Frontend
angezeigt und
automatisch
aktualisiert


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

1. 2. 3.

Gravatar Widget aktivieren

Verbindung zu einem bei Gravatar gespeicherten Bild

Anzeige in der Sidebar


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


1. 2. 3.

Anzeige der Links in der Sidebar

Links („Blogroll“)


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


1. 2. 3.

Anlegen von Seiten (2)

Beliebige Seite als
„Startseite“ festlegen


1. 2. 3.

Sharing: Verknüpfen von sozialen Netzwerken

Soziale Netzwerke
verknüpfen


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.


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


INTERMEZZO: AKTIVES VERNETZEN


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


Vernetzt euch!
• Gegenseitiges Kommentieren und Antworten
• Verlinken der Blogs über die „Blogroll“


RSS-Feeds anderer Blogs/ Websites abonnieren

Abo in Reader (Google,
Netzvibes, …)

Lesezeichen im Browser


Vernetzen: Beispiel Theatercamp (1)

Blog als „Content Pool“


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


Dritte Stufe…

3. VIDEOS, FOTOS UND CO.


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


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!


1. 2. 3.

Einbetten von Videos (YouTube)

„Teilen“ klicken

URL kopieren und in den
Blogbeitrag einfügen


1. 2. 3.

Einbetten von Videos (Vimeo) URL kopieren und in


1. 2. 3.

Einbetten von Fotos (Flickr)

Code kopieren und in den


1. 2. 3.

Alternative: Hochladen von Fotos/PDF/Videos in deine Mediathek

Symbol klicken

Bilddatei aus lokalem Ordner
auswählen


1. 2. 3.

Extra: Einbetten von Soundcloud

Neue Seite in meinem Blog

Player-Code im Textfeld einer neuen
Blog-Seite einfügen


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


FAZIT UND ABSCHLUSSDISKUSSION


Euer Fazit

Wie weit seid ihr mit eurem WordPress-Blog?

Was sind eure nächsten Schritte?


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/

Creative-Commons-Lizenz für diese Vortragsfolien

Was sind Creative-Commons-Lizenzen? http://de.creativecommons.org/was-ist-cc/


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

DigiMediaL_musik Wordpress als Musiker-Webseite

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (6)

Similar a DigiMediaL_musik Wordpress als Musiker-Webseite

Similar a DigiMediaL_musik Wordpress als Musiker-Webseite (20)

Más de DigiMediaL_musik

Más de DigiMediaL_musik (20)

DigiMediaL_musik Wordpress als Musiker-Webseite