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

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

Was ist DigiMediaL_musik?

/ 2

www.digimedial.de

www.digimedial.de/blog

www.digimedial.de/club

http://www.digimedial.udk-berlin.de/



http://www.digimedial.de/

http://www.digimedial.de/blog

http://www.digimedial.de/club


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





WORDPRESS NUR EIN BLOG-TOOL?

KEINESWEGS!

Motivation und Überblick

/ 4





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





Was ist ein Blog?

/ 6





Blog meets Music: WordPress Seiten erfolgreicher Musiker

/ 7

http://www.rollingstones.com/





http://www.rammstein.de/




/ 8









/ 9

http://music.iamlights.com/








Blog meets Music: WordPress Seiten

/ 10

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








Blog meets Music: WordPress Seiten

/ 11

http://www.blog.digimedial.de




http://www.blog.digimedial.de/


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.

/ 12





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





• Name, Musikprojekt

• Welche Vorkenntnisse hast du zum Thema Wordpress?

• Was wollt ihr aus dem DigiMediaL_musik Workshop mitnehmen?

Vorstellungsrunde

/ 14





WORDPRESS.COM VERSUS .ORG Bevor es los geht… kurz zur Erläuterung…

/ 15





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




http://de.wordpress.com/

http://wordpress.org/

http://wordpress-deutschland.org/




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





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





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

/ 19





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





1. ANMELDUNG, ARTIKEL, DARSTELLUNG

Es geht los…

/ 21





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.




http://www.wordpress.com/


Anmelden bei www.wordpress.com

Anmelden

/ 23

1. 2. 3.




http://de.wordpress.com/


Anmeldeformular

/ 24

Email angeben, die von

hier erreicht werden kann

Blogadresse: Verfügbarkeit

wird automatisch geprüft

1. 2. 3.





Aktivierung des Wordpress-Blogs

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

/ 25

1. 2. 3.





Späteres Login über www.wordpress.com

/ 26

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.

/ 27

Wechsel zum

„Frontend“

1. 2. 3.





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.





Website-Titel ändern/ allgemeine Einstellungen

/ 30

Blogtitel,

Zeitzone

etc.

1. 2. 3.





Darstellung anpassen

/ 31

Einstellungen

(Design)

Theme auswählen

Hier das neue Theme

aktivieren

Suchen Sie den Punkt „Design“ in der Navigationsleiste.

1. 2. 3.





Weitere Anpassung der Darstellung

/ 32

Individueller Seitenkopf („Header“)

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

1. 2. 3.





Blog löschen

/ 33

In der Toolbar hier klicken

1. 2. 3.





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.




http://www.wordpress.com/


INTERMEZZO: WORÜBER BLOGGEN

UND WIE?

/ 35





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





Worüber bloggen und wie?

Eigene Notizen:

- Jobs, Aufträge

- Touren, Bandinfos,

-- Songs, Videos

- Termine

/ 37





2. WIDGETS, SEITEN UND LINKS Nächste Stufe…

/ 38





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.





Block 2: Was soll in diesem Kapitel gemacht werden?

/ 40

Seiten

Links

Widgets

1. 2. 3.





Wie füge ich Widgets hinzu?

/ 41

Drag and drop:

gewünschtes Widget in die Sidebar ziehen

1. 2. 3.





Twitter-Widget

/ 42

Backend

Frontend

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

1. 2. 3.





Bilder aus Flickr einbinden

/ 43

RSS-URL des Flickr-Streams

kopieren und im Widget einfügen

1. 2. 3.





Bilder aus Flickr einbinden

/ 44

Darstellung im Frontend

1. 2. 3.





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.





RSS-Widget einfügen

/ 46

So werden die

RSS-Feeds im

Frontend

angezeigt und

automatisch

aktualisiert

1. 2. 3.





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.




http://de.gravatar.com/

http://de.gravatar.com/


Gravatar Widget aktivieren

/ 48

Verbindung zu einem bei Gravatar gespeicherten Bild

Anzeige in der Sidebar

1. 2. 3.





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.





Anzeige der Links in der Sidebar

/ 50

Links („Blogroll“)

1. 2. 3.





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.





Anlegen von Seiten (2)

/ 52

Beliebige Seite als

„Startseite“ festlegen

1. 2. 3.





Sharing: Verknüpfen von sozialen Netzwerken

/ 53

Soziale Netzwerke

verknüpfen

1. 2. 3.





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.





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.





INTERMEZZO: AKTIVES VERNETZEN

/ 56





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





Vernetzt euch!

/ 58

• Gegenseitiges Kommentieren und Antworten

• Verlinken der Blogs über die „Blogroll“





Lesezeichen im Browser

Abo in Reader (Google,

Netzvibes, …)

RSS-Feeds anderer Blogs/ Websites abonnieren





Blog als „Content Pool“

Vernetzen: Beispiel Theatercamp (1)




http://timel-ne.de/theatercamp/


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!





3. VIDEOS, FOTOS UND CO. Dritte Stufe…

/ 62





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.




http://soundcloud.com/


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.





Einbetten von Videos (YouTube)

/ 65

„Teilen“ klicken

URL kopieren und in den

Blogbeitrag einfügen

1. 2. 3.





Einbetten von Videos (Vimeo)

/ 66

URL kopieren und in


1. 2. 3.





Einbetten von Fotos (Flickr)

/ 67

Code kopieren und in den


1. 2. 3.





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

/ 68

Symbol klicken

Bilddatei aus lokalem Ordner

auswählen

1. 2. 3.





Extra: Einbetten von Soundcloud

/ 69

Player-Code im Textfeld einer neuen

Blog-Seite einfügen

Neue Seite in meinem Blog

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

/ 70

1. 2. 3.




http://soundcloud.com/


FAZIT UND ABSCHLUSSDISKUSSION

/ 71





Wie weit seid ihr mit eurem WordPress-Blog?

Was sind eure nächsten Schritte?

Euer Fazit

/ 72





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







http://de.forums.wordpress.com/topic/blog-von-wordpresscom-auf-wordpressorg-umziehen












Creative-Commons-Lizenz für diese Vortragsfolien

/ 74

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




http://de.creativecommons.org/was-ist-cc/






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

[email protected]

http://hagenkohn.com/

Matthias Krebs

Wissenschaftlicher Mitarbeiter

Projektentwicklung DigiMediaL_musik

[email protected]

Susanne Baron

Wissenschaftliche Mitarbeiterin / Social Media

DigiMediaL_musik

[email protected]




http://twitter.com/digimedial




http://blog.digimedial.de/

http://facebook.com/digimedial

http://facebook.com/digimedial

http://twitter.com/digimedial

http://youtube.com/digimedial

http://slideshare.net/digimedial

mailto:[email protected]

http://hagenkohn.com/



Education

DigiMediaL_musik Wordpress als Musiker-Webseite