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?

www.digimedial.de

www.digimedial.de/blog

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.

WORDPRESS NUR EIN BLOG-TOOL?

KEINESWEGS!

Motivation und Überblick

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

• Name, Musikprojekt

• Welche Vorkenntnisse hast du zum Thema Wordpress?

• Was wollt ihr aus dem DigiMediaL_musik Workshop mitnehmen?

Vorstellungsrunde

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

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

Wordpress.com

• Blog bei wordpress.com anmelden,

Blogdomain eintragen

(projektname.wordpress.com),

losbloggen

Wordpress.org

• Etwas aufwändiger (Installation, Kosten

für Webspace) aber mehr Möglichkeiten

• Inhalte „gehören“ einem selbst!

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.

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

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

1. ANMELDUNG, ARTIKEL, DARSTELLUNG

Es geht los…

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

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.

1. 2. 3.

Späteres Login über www.wordpress.com

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

Tags (Schlagwörter)

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

Blogtitel,

Zeitzone

1. 2. 3.

Darstellung anpassen

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

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.

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?

1. 2. 3.

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

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

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?

1. 2. 3.

Block 2: Was soll in diesem Kapitel gemacht werden?

Seiten

Widgets

1. 2. 3.

Wie füge ich Widgets hinzu?

Drag and drop:

gewünschtes Widget in die Sidebar ziehen

1. 2. 3.

Twitter-Widget

Backend

Frontend

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

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

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

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.

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

hinzugefügt werden Hier können Links bearbeitet und

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.

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?

1. 2. 3.

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“

Lesezeichen im Browser

Abo in Reader (Google,

Netzvibes, …)

RSS-Feeds anderer Blogs/ Websites abonnieren

Blog als „Content Pool“

Vernetzen: Beispiel Theatercamp (1)

Blogparade

zum Generieren

von „Hype“

Verweise auf Bild und Video-

Material (YouTube/ Flickr) auf

der FB-Page

Vernetzen: Beispiel Theatercamp (2)

Tweet/ Re-Tweet:

alle Beteiligten nutzen ihre Netzwerke!

3. VIDEOS, FOTOS UND CO. Dritte Stufe…

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.

In einen Artikel können multimediale Inhalte „eingebettet“ werden.

Im Unterschied zum Hochladen handelt es sich hier um eine Verknüpfung.

Das Prinzip

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

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

1. 2. 3.

FAZIT UND ABSCHLUSSDISKUSSION

Wie weit seid ihr mit eurem WordPress-Blog?

Was sind eure nächsten Schritte?

Euer Fazit

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.

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

kohnhagen@googlemail.com

http://hagenkohn.com/

Matthias Krebs

Wissenschaftlicher Mitarbeiter

Projektentwicklung DigiMediaL_musik

krebs@digimedial.de

Susanne Baron

Wissenschaftliche Mitarbeiterin / Social Media

DigiMediaL_musik

baron@digimedial.de

DigiMediaL_musik Wordpress als Musiker-Webseite

Education

Webseite WMF, Riess, KELOmat

Tutorial zum benutzen der Webseite

Anleitung Webseite Grüne IN

> AUF DER WEBSEITE > IM PERSÖNLICHEN

KÜSPERT & KOLLEGEN - wernerkuespert.de und Hardy 2017.pdf · Die Musiker 4 Die Musiker Die Musiker KÜSPERT & KOLLEGEN StummFilmLiveJazz Reeds: Till Martin Schlagzeug: Bastian Jütte

Ausschreibung Relaunch der Webseite der Initiative ... · Seite 1 von 14 Ausschreibung Relaunch der Webseite der Initiative kulturelle Integration Objekt: Relaunch der Webseite der

Willkommen auf meiner Webseite

Der Musiker

Übersicht zu Inhalten der PUNKT-Ausgaben seit 2009 · Follow me – Positionierung im digitalen Musikbusiness: Projekt DigiMediaL_musik (Universität der Künste Berlin) Pflege hat

0710 Die Webseite

Liebe junge Musikerinnen und Musiker,

Flyer - Musiker ohne Grenzen e.V

Erstellen einer Webseite mit Jimdo · 2017-02-20 · VHSBE Crashkurs Jimdo Webseiten 2 . Wählen Sie welche Art von Webseite Sie erstellen wollen. Klicken Sie auf „Webseite“

Das lateinische imperfekt webseite

App oder mobile Webseite?

Nicolai Schwarz: Die moderne Webseite

Webseite medi v3

DigiMediaL_musik - Creative Commons für Musiker

EASYRIDE- Webseite

azubi@Min Präsentation - Webseite