Halbverschlafen um 9.30 Uhr im Kongresszentrum-Nord angekommen, wurde mal direkt in voller Müdigkeit fotografiert und die Fotos wurden direkt bei Flickr hochgeladen. Frisch gestärkt von angebotenem Frühstück, ging es direkt zur Einführungsveranstaltung, wo einem schon das eine oder andere bekannte Gesicht über den Weg lief. Nach der unvermeidlichen Vorstellungsrunde, inklusive einiger Leute, die das Wort “Tag” ziemlich missverstanden haben ging es los zu der ersten Sessionrunde.

Die von mir besuchten Sessions waren fast alle sehr interessant und inspirierend. Einige der beim Designcamp gehaltenen Sessions wurden gestreamt und können bei Make.tv angeschaut werden. Schade, dass die Session zur Interface-Entwicklung für das Android-Handy von Google einen so schlechten Ton hat, die war nämlich wirklich klasse.

Mein Highlight waren allerdings nicht die Sessions, sondern die vielen Leute, mit denen man diskutieren konnte. Das Netzwerken auf dieser Veranstaltung war super produktiv und inspirierend. Meine Twitter-Following-Liste platzt jedenfalls jetzt aus allen Nähten. Sehr förderlich, um wirklich neue Leute kennenzulernen, war auch die DCC09-Party im Keller eines Secondhand Ladens im Herzen von Köln. Allerdings fand ich es ein wenig seltsam, dass der Besitzer extra Models engagiert hatte, um allen seine Ware angemessen zu präsentieren.

Insgesamt wurden meine Erwartungen an das Designcamp weit übertroffen. Die Organisation war wirklich toll und entspannt. Dank der Sponsoren war auch so manches Extra möglich (warmes Mittagessen, Party, Poster von eBoy usw.), die das Ganze noch angenehmer machten. Bei den Sessions hätte ich mehr Design erwartet und weniger Technik. Blöd fand ich, dass einige wenige die Sessions zu reinen Werbezwecken nutzten. Die Adobe Catalyst Session war eine reine Werbeshow. Der Introfilm beeindruckte, der Vortrag bestach durch Halbwahrheiten (Flash funktioniert angeblich auf 98,5% aller Endgeräte, die Handys wurden wohl vergessen.) und hochgelobte Software, die noch nicht mal den Release erreicht hat. Insgesamt überwog allerdings der positive Eindruck und ich werde beim nächsten Designcamp sicher wieder dabei sein.

• Designcamp in Köln (24. – 25.01.2009) (1)
• Fucamp – ein Barcamp im Schwarzwald (2)
• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)
• Dieses Design ist zu Klischee-zweinullig! (9)

• Rückblick: Designcamp Köln 2009 (1)
• Fucamp – ein Barcamp im Schwarzwald (2)
• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)
• Dieses Design ist zu Klischee-zweinullig! (9)

Momentan bin ich noch dabei alles leer zu machen. Unnötige Template Dateien, wie z.B. 404 Fehlerseite, Archive usw. wurden einfach gelöscht. Zum korrekten Betrieb eines WordPress Templates sind nämlich nur header, footer, sidebar, comments, und index.php nötig. Die Funktionalität ist dann allerdings sehr eingeschränkt. Inhaltsseiten und einzelne Blogseiten sind in meiner momentanen Konfiguration so nicht möglich. Für das grobe Layout sind sie aber auch noch nicht erforderlich. In meiner CSS-Datei steht bis jetzt nur der Eric Meyer CSS Reset, der das Standard-CSS des Browsers zurücksetzt, damit man mit dem Design auch wirklich von Null beginnen kann.

Die Dateien bearbeite ich grundsätzlich direkt auf dem Server. Nein ich benutze nicht die Editierfunktion von WordPress, da müsste ich jedesmal die Editierseite neu laden. Mein Weg geht über mein FTP-Programm Filezilla, in dem man die Seiten vom Server direkt im Editor seiner Wahl laden kann. Existiert lokal eine aktuellere Version der Datei als auf dem Server, so wird die alte Datei auf dem Server direkt durch die neue ersetzt.

Der nächste Schritt wird das Anlegen einer groben Inhaltsstruktur sein. Eventuell werde ich dann auch noch etwas mit Farben experimentieren. Die ersten grafischen Entwürfe stehen, wurden aber schon wieder mehrfach umgeworfen. Der eine zu detaillos, der andere nicht professionell genug. Es gibt für mich immer etwas dran auszusetzen. Deswegen dauert das Redesign bei meinen eigenen Seiten auch immer so lange. Alles wird 1000 mal beleuchtet, optimiert, wieder verworfen und so weiter.

• Dieses Design ist zu Klischee-zweinullig! (9)
• Wordpress und das PHP Memory Limit (7)
• CSS Naked Day 2009 (0)
• Ein paar Links (4)

• Streifen
• Runde Ecken
• Glossy Header
• Seltsamer Button mit Zacken

Nein, es wirkt auch nicht sehr rund und kommt wenig durchdacht rüber. Liegt wohl daran, dass ich ewig dran rumgebastelt hab. Da verliert man irgendwann den Fokus fürs Ganze. Auch die Code Basis des Designs basiert noch auf einem uralten WordPress Template, dass vor Divitis nur so strotzt. Also kann die Devise nur sein, von Null anzufangen.

Ein neues Design muss her und ja, Gedanken hab ich mir schon einige darüber gemacht. Bis es allerdings soweit ist wird noch eine Weile vergehen.

Ihr seid dran

Um diese Seite so gut wie möglich zu machen, mache ich jetzt trotz allem was total 2nulliges ;-), ich binde den Nutzer mit in die Neugestaltung der Seite und ihr sorgt für Nutzergenerierten Content. Nehmt euch kurz Zeit um folgende Fragen zu beantworten

• Was fehlt dem aktuellen Design?
• Wo sollte man nachbessern?
• Was darf auf keinen Fall wegfallen?
• Was ist gelungen?
• Was ist absolut überflüssig?
• Sonstige Anregungen, Anmerkungen, Kritik?

Ich bitte um euer konstruktives Feedback im Kommentarbereich!

• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)
• Redesign Teil3: Experimente mit Struktur und Farben (5)
• (X)HTML Tags und ihre semantische Bedeutung Teil 1: Einführung (2)
• Wordpress und das PHP Memory Limit (7)

Im Moment denke ich, wie wohl jeder Designer von Zeit zu Zeit, über einen Relaunch des Blogs nach, da es so vieles gibt, das man verbessern und erweitern könnte. Das fängt beim Layout an, das meiner Meinung nach etwas magaziniger werden könnte, geht über den umfassenden Einbau Microformats bis hin zu einer kompletten Neustrukturierung des Quellcodes, der wesentlich sauberer sein könnte. Außerdem ist mir das Layout zu Web2nullig geworden und es könnte etwas gesetzter und mit etwas weniger “Bonbon” Style daher kommen. Allerdings habe ich dann auch wieder Bedenken, meine “Marke”, sofern man das auf meinem Level so nennen kann, kaputt zu machen. Evtl. wird mir diese Umfrage mehr Aufschluss darüber geben, was ein Blog wirklich braucht. Bis dahin bleibt wohl noch alles beim alten.

• Tutorial: MySpace Layout ändern (update) (62)
• MySpace: Layout ändern für Musiker! (update) (15)
• Tschüss Google Adsense (5)
• Redesign Teil3: Experimente mit Struktur und Farben (5)

Teile der Serie:

1. Einführung
2. Neutrale Elemente <div> und <span>

So wie es in der deutschen Grammatik Verben und Nomen gibt, so hat auch HTML Elemente, die für bestimmte Bereiche benutzt werden. In dieser Serie geht es mir hauptsächlich um die Auszeichnungen von Text, da man beim Einbinden eines Bildes, oder Videos semantisch gesehen nicht viel falsch machen kann. Da man ja heutzutage jedes HTML Element per CSS formatieren kann, darf auch das browserspezifische Aussehen eines Elements (fett, groß, klein) nicht mehr Grund für den Einsatz eben dieses Elements sein, sondern nur dessen Bedeutung im Kontext des Inhalts der Seite.

Beispiele zum Verständnis

Um zu verdeutlichen, was Semantik bei HTML überhaupt bedeutet hier ein Beispiel:

Auszeichnung einer Überschrift (böse)

<div class="ersteueberschrift">Überschrift</div>

Auszeichnung einer Überschrift (gut)

<h1>Überschrift</h1>

Warum Semantik?

Manch einer wird sagen, wir brauchen uns doch nicht zu kümmern, mit welchem Element ich meinen Inhalt auszeichne, hauptsache es sieht im Browser richtig aus. Falsch!
Semantisch korrekter Code hat viele Vorteile. Hier mal eine (vielleicht unvollständige) Liste:

1. Lesbarkeit / Wartbarkeit des Codes
   Man kann auf den ersten Blick sehen, welches Element wofür steht und so den Code bei einer Änderung schneller durchschauen und ggf. ändern.
2. Barrierearmut
   Semantisch korrekter Code wird bspw. in einem Screenreader wesentlich verständlicher wiedergegeben als z.B. ein Tabellellayout
3. Suchmaschinenoptimierung / Maschinenlesbarkeit
   Dadurch, dass der Code durch die korrekte Semantik maschinenlesbar wird, sind auch die Ergebnisse der Suchmaschinen besser. Durch die semantische Struktur wird auch die Struktur des Inhalts für die Suchmaschine erkennbar und kann somit die Relevanz aller Teile des Inhalts bestimmen (eine Überschrift wird stärker gewertet als ein Absatz.
4. Wiederverwendbarkeit des Codes
   Der Code kann, da man mittlerweile alleine durch CSS das Design ändern kann, bei einem Redesign leicht wieder benutzt werden.

Mehr Semantik für alle!

Richtige Semantik verbietet Layouttabellen und das font-Tag! Für Webdesigner der “alten Schule” ist ab sofort Umdenken angesagt, denn semantisch korrekter Code hat nur Vorteile und ist auch leichter zu schreiben, lesen und warten. In den folgenden Teilen der Serie werde ich nun einige HTML Elemente und ihren richtigen Platz zeigen, wo man sie einsetzen sollte und wo lieber nicht.

• (X)HTML Tags und ihre semantische Bedeutung: Teil 2 neutrale Elemente div und span (0)
• Dieses Design ist zu Klischee-zweinullig! (9)
• Do you speak semantic and valid (X)HTML ? (9)
• Redesign Teil3: Experimente mit Struktur und Farben (5)

Technikwürze

Mein aktueller Lieblingspodcast ist Technikwürze, der sich mit Themen wie Webdesign, Webstandards und barrierefreien Webseiten beschäftigt. David Maciejewski, Mitglied der Webkrauts, macht den Podcast mittlerweile schon 113 Folgen lang und hat immer wieder interessante Gäste zu verschiedenen Themen.

Radio 4 SEO

Wer sich für Suchmaschinenoptimierung interessiert und außerdem französischen Hip Hop mag ist bei Radio 4 SEO genau richtig. Falls man die Musik nicht mag kann man sie natürlich überspringen. Der SEOnaut macht den Podcast regelmäßig und immer wieder gut. Manchmal für Anfänger teils zu technisch und schwierig zu verstehen, aber mittlerweile besinnt er sich eines Besseren und hat einige Folgen für Normalsterbliche gemacht und darin auch die SEO Basics erklärt.

Chaosradio

Das Chaosradio kommt monatlich auf Radio Fritz und wird als Podcast aufgezeichnet. Gemacht wird der Podcast von Mitgliedern des Chaos Computer Clubs und er behandelt unterschiedliche Themen zum digitalen Alltag, wie z.B. Datenschutz bei Social Networks, oder Chipkarten.

Sehr nerdig und nichts für Normalos ist das Chaosradio Express, was sich meist unterschiedlichen Programmierthemen widmet, das ganze aber auf Profi Niveau.

Boagworld

Paul Boag und Marcus Lillington sprechen bei Boagworld regelmäßig über wirklich interessante Themen rund um Webdesign.  British English in seiner schönsten Form, interessante Themen und Gäste und der unvermeidliche Witz zum Schluss, machen diesen Podcast zu einem wirklich hörenswerten Stück Audioweb.

Jetzt seid ihr dran! Schreibt euren Lieblingspodcast zum Thema Webdesign, Netzkultur, Internet in die Kommentare. Ich bin wirklich gespannt, was es da draußen noch so gibt, was von mir bisher unentdeckt geblieben ist.

• Petition gegen Internetzensur unterstützen! (0)
• Rückblick: Designcamp Köln 2009 (1)
• Designcamp in Köln (24. – 25.01.2009) (1)
• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)

Ich bin gespannt, welche Fehler ich eurer Meinung nach gemacht habe und will daran natürlich meine Fähigkeiten verbessern.

• Redesign Teil4: Es wird ein Relaunch (3)
• Rückblick: Designcamp Köln 2009 (1)
• Designcamp in Köln (24. – 25.01.2009) (1)
• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)

Ein Bookmarklet ist ein kleines in JavaScript geschriebenes Makro, das als Bookmark abgespeichert wird und dadurch die Funktionen des Browsers erweitert.

^Wikipedia

• Firefox Add-ons für besseres Webdesign (9)
• Rückblick: Designcamp Köln 2009 (1)
• Designcamp in Köln (24. – 25.01.2009) (1)
• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)

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)

Gefunden bei F-LOG-GE

• Rückblick: Designcamp Köln 2009 (1)
• Designcamp in Köln (24. – 25.01.2009) (1)
• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)
• Dieses Design ist zu Klischee-zweinullig! (9)

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)