MySpace brachte jüngst die Version 2.0 ihres Layouts heraus. 2.0 klingt sehr buzzwordig und soll wohl einen großen Fortschritt ankündigen. Neue Version des Layouts heißt, die Codebasis von MySpace Seiten ändert sich. Das neue Layout bringt auch einen neuen Editor mit, der es einfacher machen soll, das Layout an die persönlichen Wünsche anzupassen. Bis jetzt kommen nur “normale” MySpace Seiten in den Genuss, das 2.0 Layout nutzen zu können. Musikerseiten sind davon ausgenommen.

Der neue Editor

Er kommt gut bedienbar und flott daher. Eine Bedienungsleiste wird am oberen Bildrand fix eingeblendet. Darunter befindet sich eine Live-Ansicht des aktuellen Layouts.

Menüpunkt “Aussehen”

Hier hat man einige weitere Untermenüs zur Auswahl. Man kann vorgefertigte Designs auswählen, oder das Layout und dessen Breite ändern (1,2,3-Spalten usw.). Im Menüpunkt “Erweitertes Bearbeiten” ist es möglich Hintergrund, Schrift und Abstände der einzelnen Bereiche zu definieren. Eigene CSS Angaben können ebenso eingefügt werden und müssen nicht mehr direkt in den Inhalten eingefügt werden.

Menüpunkt “Module”

Die verfügbaren MySpace Module können hier ein- und ausgeschaltet werden. Das ist ein großer Fortschritt gegenüber der alten Vorgehensweise, wo man einzelne Bereiche der Seite nur durch wilde CSS-Hacks ausblenden konnte.

Der Code dahinter

Das HTML von MySpace ändert sich mit dem neuen Layout dramatisch. Unglaublicherweise ist keine einzige Layouttabelle mehr zu finden. Allerdings leidet das neue Layout an schwerer Divitis.
<div class="moduleBodyEnd"></div></div></div></div></div>
<div class="moduleBottom"><div><div></div></div></div></div>

Positiv hervorzuheben ist, dass der Code annähernd semantisch ist, leider aber fernab vom validieren. Vor allem großgeschriebene HTML Tags, fehlende Anführungszeichen bei Attributen und nicht maskierte & Zeichen machen die vielen Fehler aus. Hätte man hier sauber gearbeitet und nicht totalen Schrott als Vorlage genommen, könnte die Seite jetzt validieren. Als Doctype wird beim neuen Layout immerhin XHTML 1.0 transitional verwendet.

Der große Wurf…

…ist MySpace mit dem neuen Code leider nicht gelungen. Man hat zwar die Inhalte von den Tabellenfesseln befreit, jedoch hat man es auch im Jahr 2008 nicht geschafft annähernd validen Code zu schreiben.Auch die Tatsache, dass das neue Layout nicht für Musikerseiten verfügbar ist, nervt. Es ist ein Schritt in die richtige Richtung, allerdings ist nicht zu erwarten, dass der nächste schneller als in 5 Jahren kommt.

• Sinn und Unsinn von Social Networks im Internet (1)
• MySpace Forum nun mit eigener TLD (0)
• MySpace – Forum (1)
• Tutorial: MySpace Layout ändern (update) (62)

Der Nutzen von Social-Networks für Privatleute

Zum Beispiel bei www.wer-kennt-wen.de, oder www.studivz.net ist es möglich schon totgeglaubte Menschen, mit denen man schon lange keinen Kontakt mehr hat wiederzufinden. Meiner Erfahrung nach merkt man meistens auch schnell wieder, warum man so lange keinen Kontakt hatte ;-). Nur in wenigen Einzelfällen waren es Leute zu denen ich jetzt wieder regelmäßig Kontakt habe.

Nachrichten schreiben über ein Soziales Netzwerk?

E-Mail geht doch viel einfacher und ohne, dass ich mir Werbung anschauen muss, oder? Also ich ziehe E-Mails den Nachrichtendiensten der Social-Networks vor.

Fotoalben?

Eine komfortable Möglichkeit für Laien ohne eigene Website Fotos mit den Freunden zu teilen. Ist, wie ich finde eine gute Sache, beschert dem Social-Network einen großen Teil des Contents, der die User anzieht.

Gruppen?

Sicherlich sinnvoll, wenn es darum geht eine Diskussionsplattform für ein bestimmtes Thema einfach und schnell einzurichten. Allerdings dienen viele Gruppen weniger dem Austausch als viel mehr der Selbstdarstellung, (“Ich renn beim Zähneputzen in der Gegend rum!”, “Ich komm schon voll zum Vorglühen” um nur ein paar wenige zu nennen) oder kommen einem Tagging des eigenen Lebens gleich. Genau dieser Umstand macht die Gruppen zum idealen Ziel für Marktforscher und nicht umsonst gibt es im Studivz sehr viele offizielle Gruppen, die sich bestimmten Marken widmen.

Probleme durch Social Networks

Social Networks sind nicht nur toll und bringen einem jede Menge Features, die man sonst nicht hätte, nein sie bringen auch einige Probleme mit sich, die man nicht gleich von Anfang an unbedingt als solche erkennt.

Datenschutz

Wenn man an einem sozialen Netzwerk im Internet teilnimmt, gibt man immer irgendwelche Daten über sich selbst preis. Meist tut man dies ohne daran zu denken, dass einem zum Beispiel die Fotos vom letzten Saufgelage beim nächsten Vorstellungsgespräch gezeigt werden könnten. Ich mache daher in meinen Profilen nur das für die Öffentlichkeit sichtbar, was sie auch sehen darf. Abgesehen von den Daten die ich selbst zugänglich mache, gibt es ja auch noch E-Mail Adresse, Name, Alter, IM-Adressen usw. die theoretisch auch für Werbezwecke genutzt werden könnten. Es steht zwar in jeden AGB, dass dies niemals gemacht würde, aber kann man sich darauf auch verlassen? Ich bin mir da nicht so sicher und empfehle daher so wenig wie möglich Angaben zu machen.

Kommerzieller Nutzen…

…für User

Sofern ich eine Band habe, die ihre Musik verbreiten möchte oder eine Firma die ein Produkt verkaufen will, ist es auf jeden Fall sinnvoll sich in online Netzwerken anzumelden. Dadurch kann eine große Reichweite und evtl. mehr Umsatz generiert werden. Beispielsweise gibt es kaum noch eine Band, die nicht bei MySpace vertreten ist. Eine hohe Vernetzung von zum Beispiel Bands aus dem gleichen Musikgenre kann dort sehr sinnvoll sein um neue Hörer für die eigene Musik zu gewinnen.

Bei Xing z.B. können die geschäftlichen Kontakte zu anderen Personen verwaltet werden, was vor allem für Selbständige, aber auch für Angestellte sinnvoll sein kann.

…für den Anbieter

Hier nehme ich mal das Beispiel Studivz. Zum Zeitpunkt meiner Anmeldung dort, gab es auf diesem Portal noch überhaupt keine Werbung. Je größer jedoch die Nutzerzahlen wurden, umso schlimmer wurde es mit der Werbung. Auch wenn gegenteiliges von offizieller Seite angekündigt war, ist das Studivz zu einer riesigen Werbeplattform geworden, auf der man der Werbung kaum noch entgehen kann. Und ich bin mir sicher: Zusammengenommen mit dem Schülervz und Meinvz macht der Konzern sicher Millionengewinne.

Welche Netzwerke gibt es?

Der Vollständigkeit halber hier noch eine kleine Liste der bekannteren Social Networks:

• MySpace
• Facebook
• Studivz
• Wer kennt wen
• Xing

• Shortview vs. Studivz (0)
• Das MySpace Profil 2.0 (2)
• So, mich gibts jetzt auch bei Twitter (0)
• Was bringt mir Social Bookmarking… (1)

• MySpace – Forum (1)
• Firefox Add-ons für besseres Webdesign (9)
• Das MySpace Profil 2.0 (2)
• Hilfe beim positionieren von Website Elementen (0)

Link:

• http://www.myspaceforum.de

• MySpace Forum nun mit eigener TLD (0)
• Das MySpace Profil 2.0 (2)
• Sinn und Unsinn von Social Networks im Internet (1)
• Tutorial: MySpace Layout ändern (update) (62)

Themen:

• Wie kann ich das Layout ändern
• Grundlagen
• Hintergrundfarbe ändern
• Hintergrundbild ändern
• Rahmen / Border
• Elemente ausblenden

UPDATE: Wichtig!
Auch wenn ich hier angegeben habe, wie es funktioniert, so ist es trotzdem verboten die Werbung der Seite auszublenden. MySpace behält sich in jedem Fall vor, ein Profil ohne Ankündigung zu löschen, falls man gegen diese Regel verstößt. Ich übernehme für etwaige Schäden keine Haftung. Hierzu ein Auszug der Bedingungen von MySpace was alles verboten ist:

…das Verdecken oder Verbergen der Werbebanner auf deiner persönlichen Profilseite oder einer anderen MySpace.com-Seite per HTML/CSS oder mit einer anderen Methode…

UPDATE 2:
Leider hatten sich bei der ersten Version in diesem Artikel einige Fehler eingeschlichen und hier angeführte Codebeispiele funktionierten nicht wie gewünscht. Das betraf vor allem alle Codebeispiele, bei denen ich per CSS IDs ansprechen wollte. Funktionieren kann es deshalb nicht, weil MySpace die “#” automatisch rausfiltert. Ich habe die Codebeispiele nach bestem Wissen bereinigt und verbessert, sodass jetzt alles funktionieren sollte. Danke an die kritischen Leser dieses Artikels mit deren Hilfe ich die Fehler entdeckt habe.

UPDATE 3:30.09.2007
Neue Rubrik “Rahmen” veröffentlicht. In diesem Unterpunkt gehe ich darauf ein, wie man einem Objekt bei MySpace einen Rahmen zuweisen kann.

UPDATE 4:07.12.2007
Achtung:
Fragen zum Thema MySpace bitte im MySpace Forum (www.myspaceforum.de) stellen.

Eins noch vorweg:
Dieses Tutorial richtet sich an Leute, die die Funktionsweise der Layoutänderungen auch verstehen wollen und wird keine reine Copy&Paste Tabelle.

Wo wird das Layout geändert?

Bevor es losgeht noch ein kleiner Tipp, wie man Probleme vermeiden kann. Alle Änderungen am Layout, die zuvor mit dem originalen Myspace Layout Editor vorgenommen wurden sollten gelöscht werden, da der dadurch eingefügte Code Einfluss auf den hier erkärten Code haben kann.
Sofern du einen normalen MySpace Account hast kannst du dies tun indem du dich in deinen MySpace Account einloggst, dann auf „Profil bearbeiten“ und dann auf „About me“ klickst. Unter dem Fenster erscheint ein kleiner Link „Bearbeiten“. Nachdem du ihn angeklickt hast, erscheint ein Formularfenster, in das du die persönlichen Informationen über dich schreiben kannst. In genau dieses Fenster kommt später auch der Code der im Folgenden erläutert wird. Bei einem Musik Account ist der Ablauf derselbe, mit dem Unterschied, dass die Eingaben unter dem Menüpunkt „Band Details“ – „Über die Band“ gemacht werden müssen. Abschließend müssen die Eingaben immer mit dem Button „Los“ abgeschickt werden, damit sie bei MySpace gespeichert werden.

Wie kann ich das Layout ändern?

Das Layout wird mit CSS (Cascading Stylesheets) so umformatiert wie man das möchte (Infos über CSS gibt’s bei Selfhtml). CSS ist eine Sprache mit der der Html Quelltext formatiert werden kann.

Wichtig:
Damit der Webbrowser erkennen kann, dass es sich bei den folgenden Angaben um CSS handelt, müssen folgende Angaben um den CSS Code gelegt werden:
<style type="text/css">
Hier kommt später dein Code hin.
</style>

Grundlagen

Jedes HTML-Element kann per CSS angesprochen und formatiert werden. Nehmen wir uns also mal das <body> Element vor, das quasi den Rahmen für alles auf der Seite bildet, was auch später im Browser angezeigt wird. Wenn ich also den Hintergrund ändern will, muss ich dem <body> per CSS eine neue Eigenschaft zuweisen.

Hintergrundfarbe ändern:
body {
background-color:rgb(0,0,0);
}
Das obige Beispiel würde den Hintergrund schwarz färben. Die Farbangabe wurde per RGB-Wert angegeben (Hexadezimal funktioniert nicht, weil MySpace bei den Eingaben automatisch die #-Rauten ausfiltert um eine Ansprache der IDs zu verbieten). Eine ausführliche Farbtabelle findest du auf http://www.uni-magdeburg.de/counter/rgb.txt.shtml

Hintergrundbild ändern:
body {
background-image: url(http://www.deinebildadresse.de);
}

So kann man das Hintergrundbild ändern. Allerdings musst du das Hintergrundbild auf einen Server legen und die Adresse dorthin angeben, damit es richtig angezeigt werden kann. Die mit background in CSS machbaren Formatierungen sind sehr umfangreich und vielfältig und würden hier den Rahmen sprengen. Wenn der Code allerdings wie oben angegeben notiert wird, wird das Bild sowohl horizontal als auch vertikal immer wieder nebeneinander angezeigt.

NEU – Rahmen/Border

Ich bin in den letzten Wochen oft gefragt worden, wie man den Elementen der MySpace Seite einen Rahmen zuweisen kann. Nun möchte ich euch hier erklären, wie das funktioniert. Die CSS-Eigenschaft “border” ist verantwortlich für die Rahmen, die man jedem beliebigen HTML Element, wie z.B. table, body, div, span usw. zuweisen kann. “border” funktioniert wie folgt:

Alle Seiten eines Objekts auf einmal formatieren:
table {
border: 1px solid black; }


Alle Seiten eines Objekts einzeln formatieren:
table {
border-top: 2px solid white;
border-right: 3px solid yellow;
border-bottom: 8px solid black;
border-left: 5px solid green; }


“border” alleine weist allen vier Seiten des Elements einen Rahmen zu, mit z.B. “border-left” kann man nur einer bestimmten Seite des Elements einen Rahmen geben. Die Angaben nach den Doppelpunkten geben an, was für einen Rahmen man möchte. In diesem Falle wäre das ein Rahmen mit der Stärke 1 Pixel, eine durchgehende Linie und in Schwarz um alle vier Seiten des Elements. Wie und welche Elemente man formatieren kann ist weiter oben beschrieben.

Man kann bei Rahmen 3 Dinge formatieren: Rahmendicke, Typ und Farbe. Die Rahmendicke wird in der Regel mit Pixelangaben (px) bestimmt, aber auch andere numerische Werte wie em oder % können benutzt werden. Beim Rahmentyp sind die Werte solid (durchgehende Linie), dotted (gepunktete Linie), dashed (gestrichelte Linie) üblich und werden am meisten genutzt. Die Rahmenfarbe kann bei MySpace entweder mit Farbnamen (black, white, yellow usw.) oder RGB, Werten angegeben werden.

Wichtig:
Hexadezimal scheidet aufgrund seiner Schreibweise (wie oben schon angeführt) mit der Raute (#) aus.

Da die CSS-Eigenschaft “border” sehr umfangreich ist und im Detail sehr komplex werden kann, habe ich hier wieder nur ein Blitzlicht auf die wichtigsten Aspekte geworfen und verweise für Leute, die sich mit dem Thema “border” näher beschäftigen wollen guten Gewissens auf SelfHTML.

Elemente ausblenden:

Um Elemente ausblenden zu können muss man ihnen lediglich die folgende CSS Formatierung geben:
Element, oder Klasse eines Elements {
display:none;
}

Erklärung:

• Eine Klasse beginnt mit einem Punkt z.B.: .navigationBar
• Wenn ein HTML-Element direkt angesprochehn werden soll, muss dieses einfach in CSS folgendermaßen notiert werden:
  Hier soll das “<p< ” Element angesprochen werden
  p { CSS Angaben } HTML-Elemente können auch verschachtelt werden, um nur bestimmte Unterlemente anzusprechen.
  Hier werden alle <p< Elemente, die innerhalb einer Tabelle liegen, angesprochen.table p { CSS Angaben}

Hier eine kleine unvollständige Liste der Elemente die bei MySpace beispielsweise ausgeblendet werden können.

• table tr td span form – Die MySpace Suchleiste inklusive Google-Logo
• table tr td span form img – Das Google Logo
• .navigationBar – Die MySpace Navigation
• table.friendsComments – Die Kommentare deiner Freunde

Ein Beispiel:

Dies würde die Suchleiste ausblenden.
table tr td span form {display:none;}

Unvollständig?

Natürlich kann man bei MySpace noch viel mehr am Layout ändern. Ich habe mich hier auf die am meisten gefragten Probleme konzentriert. Falls du findest, dass noch etwas Wichtiges fehlt was unbedingt erklärt werden muss, bitte nutze die Kommentarfunktion. Ich würde mich auch über Lob, Kritik und Anregungen zu diesem Artikel freuen.
Achtung:
Fragen zum Thema MySpace bitte im MySpace Forum (www.myspaceforum.de) stellen.


• MySpace: Layout ändern für Musiker! (update) (15)
• In Karlsruhe angekommen, oder auch nicht… (2)
• Redesign Teil3: Experimente mit Struktur und Farben (5)
• Rückblick: Designcamp Köln 2009 (1)

Leichter gesagt als getan…

Für die Band Satanic Voices habe ich natürlich einen Musik Account bei MySpace angelegt. Ich konnte keine Dokumentation finden, wie man bei Musik Accounts das Layout ändert. Also machte ich mich auf die Suche nach einem Tutorial, was auch erfolglos blieb. Die letzte Möglichkeit ist immer die Flucht nach Vorne: Ausprobieren

Und tatsächlich:
Wenn man im “Bandinfo” Fenster CSS-Angaben macht, werden diese auf das komplette Layout angewendet. Da nun fast jeder Bereich seine eigene Klasse oder ID hat, kann man beliebig Bereiche ausblenden oder den Hintergrund oder die Position verändern. Alles was man mit CSS halt so anstellen kann. Besonders klasse finde ich, dass man so auch ungewünschte Bereiche, wie das obere Banner, oder die Suchleiste ausblenden kann.

Liebes MySpace Team: Überarbeitet bitte nochmal eure Dokumentation, da es entweder nicht zu allen wichtigen Problemen Artikel gibt, oder sie sofern sie vorhanden sind, nur schwer zu finden sind!

UPDATE 04.07.2007 :
Ein ausführliches Tutorial ist ab sofort verfügbar.

• Tutorial: MySpace Layout ändern (update) (62)
• In Karlsruhe angekommen, oder auch nicht… (2)
• Redesign Teil3: Experimente mit Struktur und Farben (5)
• Rückblick: Designcamp Köln 2009 (1)