Grafik/Layout

Zum Beginn der Entwicklung einer Website wird meist ein grafischer Entwurf angefertigt. Grafiksoftware für Linux gibt es für alle Bedürfnisse. Vom Pixelgrafik-Editor bis zur komplexen 3D Software ist alles vertreten, was ein Webdesigner benötigt.

• Gimp
  Pixelgrafik-Editor, der vom Funktionsumfang in Sachen Webdesign fast an Photoshop heran kommtund auch Photoshop-Dateien (.psd) öffnen kann.
• Inkscape
  Vektorgrafik-Editor mit sehr intuitiv bedienbarer Oberfläche. Besonders praktisch:Die Open Clip Art Library ist bereits im Programm integriert.
• Blender
  Professionelle 3D-Modelling und Rendering Software.

Alle, die auf Photoshop nicht verzichten können, haben die Möglichkeit es über die Windows Laufzeitumgebung Wine (Siehe Wine) zu betreiben. Photoshop CS2 läuft fast ohne Einschränkungen. An der Unterstützung für CS3 wird momentan gearbeitet.

Coding

Für Linux gibt es sowohl die große mächtige IDE mit vielen Features, als auch den kleinen, schnellen Editor für jeweils spezielle Einsatzzwecke.

• Geany
  Sehr schlanker und schneller, erweiterbarer Texteditor, der neben Syntaxhervorhebungauch eine Codevervollständigung für HTML/CSS bietet.
• Komodo Edit
  Codeeditor mit hervorragender Codevervollstädigung für viele Sprachen. Bietet eine gute Projektverwaltung und unterstützt Erweiterungen im Firefox-Add-on Format (.xpi).
• Aptana Studio
  Mächtige IDE,die mit zahlreichen Erweiterungen an die eigenen Bedürfnisse angepasst werden kann.

Allen, die nach dieser Auswahl noch keinen passenden Quelltexteditor gefunden haben, sei die Liste der Webeditoren für Ubuntu empfohlen.

Browser

Von Linux werden die meisten populären Browser nativ unterstützt. Neben Firefox, Opera und Google Chrome kann man mit dem Paket IEs 4 Linux sogar den Internet Explorer bis einschließlich Version 7 unter Linux starten. Leider gibt es noch keine Lösung für den IE8, was den Einsatz einer eines virtuell betriebenen Windows nötig macht (Siehe Virtualbox).

Tools

• Wine
  Windows Laufzeitumgebung, die das Ausführen von Windows-Software ermöglicht und sie nahtlos ins System integriert. Funktioniert leider nicht bei allen Programmen.
• Virtualbox
  Falls man ein Programm benötigt, für das es keine Linux-Alternative gibt und es auch nicht über Wine läuft, kann man mit Virtualbox ein Zweitbetriebssystem aufsetzen. Dieses Betriebssystem läuft dann parallel zu Linux und kann die gewünschten Programme ausführen.
• Filezilla
  Leicht zu bedienendes FTP-Programm, das unter Anderem auch SFTP unterstützt. FTP als Ordner einbinden.
• In Nautilus, dem Standard-Dateimanager von Ubuntu, ist es auch möglich einen Server direkt per FTP ins Dateisystem einzubinden. Nachdem man ftp://Benutzername@Serveradresse.de in die Adresszeile eingetragen, und mit dem FTP Passwort bestätigt hat, erscheint der Webserver wie ein normaler Ordner im Dateisystem.

Fazit

Ein Linux-System bietet, Anpassungsfähigkeit vorausgesetzt, alles was man als Webworker benötigt. Zudem ist es kostenlos und kann ohne Gefahr für ein bereits installiertes Betriebssystem via Live-CD ausprobiert werden. Früher noch als Nerdsysteme bezeichnet, sind viele Distributionen heute in puncto Benutzerfreundlichkeit und User-Interface auf dem gleichen Level wie die Marktführer der kommerziellen Produkte. Es lohnt sich also einen Blick über den Tellerrand zu werfen.

Weiterführende Links:

• Peter Kröner: Linux für Webworker
• Dead-Pixel Weblog: Webseiten in allen Browsern testen

• Firefox Add-ons für besseres Webdesign (9)
• Webseiten in allen Browsern testen (4)
• Twitter Clients für Ubuntu (2)
• Bald ganz frisch: Ubuntu 9.04 – Jaunty Jackalope (1)

Wie man mit seinem Blog etwas Geld zum Hostingkostenausgleich verdienen kann, habe ich schon beschrieben. Allerdings muss ich da Google Adsense wohl wieder ausklammern, weil es sich nach diesen ernüchternden Zahlen absolut nicht lohnt.

Nun meine Frage an euch: hat jemand von euch eine Website, die mit Google Adsense gut funktioniert und eine hohe Klickrate hat, oder seid ihr damit auch eher erfolglos?

• Geld verdienen mit Blogs (9)
• Verlosung: 75€ Google AdWords Gutschein (3)
• Google Wave Einladungen zu verschenken! (14)
• Wollt ihr ein Redesign im Entstehen beobachten? (10)

Layout

Wer in letzter Zeit mal den Stand des Redesigns betrachtet hat, konnte einiges an Veränderungen sehen. Weitere Experimente mit Farben, Hintergrundbildern und der Aufteilung später sehe ich nun Langsam in welche Richtung es gehen wird. CSS3 wird eine Rolle spielen. Besonders angetan hat es mir die Eigenschaft (-moz-)box-shadow:, die mit im Firefox sogar als Schatten nach innen genutzt werden kann, wenn man den Befehl inset hinzufügt. Die Browserunterstützung für solche Eigenschaften ist leider noch sehr Gering, allerdings macht ihr Einsatz auch nichts kaputt.

Inhalt

Die meisten Inhalte der statischen Seiten sind nicht mehr aktuell und lassen sich auch nicht  aktualisieren ohne den ganzen Text neu zu schreiben. Auch der Bereich “Musik” hat nicht mehr viel mit dem Blog zu tun und wird mit dem Relaunch vom Netz genommen. Eventuell wird “Musik” auf einer neuen, persönlichen Seite, Platz finden. Das Portfolio hat sich natürlich um einiges erweitert. Es muss auch noch um den Bereich Print ergänzt werden. Für die Startseite muss was her das kracht und auch nach Portfolio aussieht, ohne das/den Blog zu sehr in den Hintergrund zu drängen.

Es wird sich demnächst also einiges hier ändern, und trotzdem vieles beim alten bleiben. Wie das bei eigenen Projekten so ist, wird es noch eine Weile dauern, bis alles fertig ist. Dafür wird dann aber alles umso toller / zugänglicher / schöner / semantischer / usw.</eigenlob>

• Redesign Teil3: Experimente mit Struktur und Farben (5)
• Beginn des Redesigns (3)
• Wollt ihr ein Redesign im Entstehen beobachten? (10)
• Relaunch von www.nocovers.de (13)

Das Problem

Nach vollzogenem Upgrade, konnten nicht mehr alle Plugins aktiviert werden. Besonders WP-Related-Posts scheint besonders hungrig zu sein. Die “Plugin automatisch updaten” Funktion, bricht zwischendurch ab und bereichert den Error.log um eine weitere Meldung folgender Art:

Allowed memory size of 33554432 bytes exhausted

Mit 32MB braucht man WordPress scheinbar also nicht mehr zu kommen. Die Zeiten als WordPress ein schlankes schnelles Blogsystem war, sind offensichtlich vorbei, was mich auch über einen Systemwechsel nachdenken lässt. Zum Beispiel Habari sieht schick aus und rennt auch ganz gut, würde sich also als Nachfolger eignen. Nun bleiben mir also mehrere Möglichkeiten.

Lösungsansätze

1. Blogsystem wechseln
   Wahrscheinlich mittelmäßiger bis viel Aufwand
2. Memory Upgrade beim Provider
   Von 32 auf 64MB, für 0,95€ pro Monat, ziemlich saftig!
3. Providerwechsel
   Sehr aufwendig und langwierig.

Bleibt die Frage an euch: Sind 32MB Memory-Limit heutzutage noch angemessen, oder sollte ich mich nach mehr umschauen?

Update (12.06.2009)

Nach einem Upgrade auf 40MB geht es wieder reibungslos.

• Wordpress Plugin Tweetbacks 1.4.4 verursacht Performance Probleme (1)
• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)
• Dieses Design ist zu Klischee-zweinullig! (9)
• Kommentarspam vermeiden in Wordpress (0)

Originalartikel vom 24. März 2008, Update am 28. Mai 2009

Webdeveloper Toolbar

Die Webdeveloper Toolbar ist die Allzweckwaffe unter den Firefox Add-ons. Die Toolbar nistet sich unterhalb der Lesezeichen-Symbolleiste ein und kann mittels Symbol in der Navigationsleiste ein- und ausgeblendet werden. Mit ihrer Hilfe kann man beispielsweise bestimmte Elemente der Webseite ausblenden, sie umranden lassen, sich den Quelltext anzeigen lassen, oder sich Informationen zu einzelnen Seitenelementen anzeigen lassen. Die Möglichkeiten der Toolbar sind so weitreichend, dass alle hier aufzuzählen den Rahmen sprengen würde.

Html Validator

Der Html Validator ist ein Tool, dass in der Statusleiste ganz unten rechts die Fehler und Warnungen zum Quelltext der Seite anzeigt. Klickt man doppelt auf die Anzeige öffnet sich ein neues Fenster in dem der Quelltext und eventuelle Fehler in der Validierung angezeigt werden. Mit einem Klick auf den jeweiligen Fehler gelangt man im Quelltext direkt zur fehlerhaften Stelle und es wird eine Erklärung des Fehlers angezeigt.
Funktioniert leider nicht unter Ubuntu 8 Bereinigte Ubuntu Version von Html Validator

Colorzilla

Colorzilla ist ein kleines Add-on welches einem, von der Statusleiste ausgewählt, die Möglichkeit gibt von jedem beliebigen Element der gerade besuchten Website die Farbe zu bestimmen und den zugehörigen Farbcode als Hexadezimal- oder RGB-Code anzeigen zu lassen.

Dust-me selectors

Dust-me selectors hilft einem dabei nicht mehr verwendete CSS-Klassen und ids zu finden um sie aus dem CSS-Code entfernen zu können. Das Tool setzt sich in der Statusleiste fest, von wo aus man es starten kann um durch die Webseiten zu navigieren, die durchsucht werden sollen. Die ungenutzten CSS Bestandteile werden abschließend in einem extra Fenster angezeigt.

Quick Java

Das Add-on Quick Java lässt einen auf Mausklick Java und Javascript ein und ausschalten. Das ist sehr praktisch, wenn man die Funktionalität einer Seite ohne Javascript, oder Java testen möchte um keine Nutzer auszuschließen, die es deaktiviert haben.

Firebug

Das mächtigste der hier vorgestellten Tools ist Firebug. Nach der Installation nistet es sich in der Statusleiste, in Form eines kleinen Käfers, ein und kann auf Klick aktiviert werden. Mit Firebug ist es unter anderem möglich, einzelne HTML Elemente und die darauf wirkenden CSS Regeln zu erkennen, zu ändern und JavaScript zu debuggen. Die Möglichkeiten sind hierbei so zahlreich, dass sie hier den Rahmen sprengen würden. Die große Besonderheit von Firebug ist, dass es selbst auch noch erweiterbar ist.

Pixel perfect

Eine der Erweiterungen für Firebug ist Pixel perfect. Das Add-on macht es möglich, den grafischen Entwurf einer Website halbtransparent über den Viewport des Browserfensters zu legen. An diesem Overlay können anschließend die Elemente der Website pixelgenau nach Vorlage ausgerichtet werden.

YSlow

YSlow, ebenfalls eine Erweiterung für Firebug, analysiert die Performance von Websites und deckt eventuelle Bremsen auf. Es zählt HTTP-Requests, analysiert Dateigrößen und benotet anschließend die Performance der Seite. Seit der neuesten Version ist auch das Bildoptimierungstool Smush.it enthalten, das die Dateigröße von Bildern unter Umständen drastisch verringern kann.

Firediff

Firediff merkt sich Änderungen, die mit Firebug am Code vorgenommen wurden und zeigt diese auf Wunsch an. Das ist vor allem dann praktisch, wenn man Firebug nicht nur zur Überprüfung des Codes, sondern auch zur Entwicklung einsetzt und die Änderungen in den Originalcode übernehmen will.

Das unvermeidliche Fazit

Wie eingangs erwähnt kann Firefox zum mächtigen Entwicklertool werden. Man muss allerdings aufpassen es nicht zu überladen, da mit jedem Add-on die Performance des Browsers beeinträchtigt wird.

• Webdesign mit Linux – Software für Webworker (6)
• Wordpress Plugin Tweetbacks 1.4.4 verursacht Performance Probleme (1)
• Wollt ihr ein Redesign im Entstehen beobachten? (10)
• Webseiten in allen Browsern testen (4)

Ein großes Lob jetzt schon mal an die Organisatoren, die es neben einem Shuttleservice (Bahnhof – Fucamp) sogar geschafft haben kostenlose Hotelbetten zu organisieren. Wem kein Hotelbett mehr zur Verfügung steht, der hat auch die Möglichkeit mit Schlafsack und Isomatte kostenlos in der Universität zu übernachten. Wenn die Organisation jetzt noch so gut klappt, wie das Angebot reichhaltig ist, wird dieses Wochenende eine gute Zeit für alle Beteiligten. Ich freu mich wie ein kleines Kind!

• Rückblick: Designcamp Köln 2009 (1)
• Designcamp in Köln (24. – 25.01.2009) (1)

Der Text der Petition

Wir fordern, daß der Deutsche Bundestag die Änderung des Telemediengesetzes nach dem Gesetzentwurf des Bundeskabinetts vom 22.4.09 ablehnt. Wir halten das geplante Vorgehen, Internetseiten vom BKA indizieren & von den Providern sperren zu lassen, für undurchsichtig & unkontrollierbar, da die “Sperrlisten” weder einsehbar sind noch genau festgelegt ist, nach welchen Kriterien Webseiten auf die Liste gesetzt werden. Wir sehen darin eine Gefährdung des Grundrechtes auf Informationsfreiheit.

Die Begründung

Das vornehmliche Ziel – Kinder zu schützen und sowohl ihren Mißbrauch, als auch die Verbreitung von Kinderpornografie, zu verhindern stellen wir dabei absolut nicht in Frage – im Gegenteil, es ist in unser aller Interesse. Dass die im Vorhaben vorgesehenen Maßnahmen dafür denkbar ungeeignet sind, wurde an vielen Stellen offengelegt und von Experten aus den unterschiedlichsten Bereichen mehrfach bestätigt. Eine Sperrung von Internetseiten hat so gut wie keinen nachweisbaren Einfluß auf die körperliche und seelische Unversehrtheit mißbrauchter Kinder.

Bisher haben sich 21226 (Stand 05.05.2009, 16:53 Uhr) Menschen beteiligt. Die Petition läuft noch bis zum 16.06.2009 und muss bis dahin mindestens 50.000 Mitzeichner finden, um im Petitionsausschuss besprochen zu werden. Der aktuelle Stand der Petition kann über @mitzeichner bei Twitter mitverfolgt werden. Ein einen faden Beigeschmack bekommt das Ganze durch die Möglichkeit die komplette Mitzeichnerliste als CSV-Datei runtergeladen werden kann. Diese enthält neben den Namen der Mitzeichner, auch deren Bundesland.

• Lohnenswerte Podcasts für Webworker (2)
• Praktikumsplatz gesucht! (0)
• Studio / Internet (1)
• Newskraft.de – ein Phantomreferrer? (4)

Die Zahl der verfügbaren Programme ist mittlerweile unüberschaubar geworden. Für Linux, speziell Ubuntu ist es allerdings nicht so leicht einen fähigen Client zu finden, der das System nicht zu sehr belastet. Begonnen habe ich mit Twitterfox, bin dann aufgrund der überpluginisierung meines Firefox auf twhirl umgestiegen. Twhirl basiert auf Adobe AIR, was auch immer parallel zu jeder damit laufenden Applikation aktiviert sein muss. Auch eine unnötige Bremse, die sich bei mir extrem bemerkbar machte. Also wieder weg damit und die ganze Liste der nativen Clients für Linux durchgemacht. Das einzige, was mir halbwegs gefiel und auch momentan den beta Status noch nicht verlassen hat war Choqok. Coole kleine Twitterapplikation mit immer mal wieder neuen Features. Allerdings verschluckte Choqok oft Tweets, oder konnte die aktuellen nicht mehr abrufen.

Nun bin ich wieder bei Twitterfox gelandet. Warum? Klein, schnell, funktional und zuverlässig! Ende der Ansage :-)

Nachtrag (28.04.2009)

Qwit scheint ganz cool zu sein. Das User Interface lässt zwar noch etwas zu wünschen übrig, aber es kann recht viel und das auch scheinbar recht zuverlässig. Es wird sich im Langzeittest noch beweisen müssen. Dank an dieser Stelle an @kabarakh

• Bald ganz frisch: Ubuntu 9.04 – Jaunty Jackalope (1)
• Ubuntu 8.10 kommt (2)
• Kostenloses Ubuntu Videotraining (0)
• Hass auf Ubuntu… (8)

Zeit sich Zeit zu nehmen, und den eigenen Lesern zu zeigen, welch tolle Blogs da draußen sind, den Horizont etwas zu erweitern, und miteinander zu kuscheln.

Die Vernetzung der Blogs hat wirklich abgenommen in letzter Zeit. Daher ist diese Aktion nur richtig und notwendig und kommt keine Sekunde zu früh.

Ein paar schöne Blogs zum lesen und gernhaben

Webzeugkoffer.de

Björn Seibert schreibt in regelmäßigen Abständen über “Webdesign und so.” Lehrreich und unterhaltsam.

Praegnanz.de

Gerrit van Aaken hat eine unterhaltsame Schreibe und berichtet viel über Typografie und seine Arbeit als Webdesigner.

CSS-Petals.net

Blog von Tobias Baldauf über Webdesign, politisches und persönliches. Lesenswert.

So, das sind also die Blogs, die ich meinen werten Lesern empfehlen möchte. Ich hoffe der eine oder andere wird dort mal vorbeischauen. Ich habe nicht viel zu den jeweiligen Blogs geschrieben, weil sie absolut für sich selbst sprechen.

• Keine Ähnlichen Beiträge vorhanden.

Ein solches Layout birgt Herausforderungen, denen ich bisher noch nicht so oft begegnet bin. Deshalb ist das auch ein Grund es mal zu versuchen. Vor allem muss der grafische Entwurf des neuen Designs auch flexibel funktionieren. Noch kurz Fakten: ich habe mich bei der Breite des Wrappers für 60em = 960px (bei der Standardschriftgröße von 16px) entschieden, was momentan dem Standard entspricht und auch mit gängigen Grids funktioniert. Eine feine empfehlenswerte Sache ist in diesem Zusammenhan der px-to-em calculator.

Es bleibt spannend <– blöde Floskel! Spannend ist vor allem, wann ich wieder Zeit finden werde, inspiriert und kreativ an meinem grafischen Entwurf weiter zu Arbeiten. Es fühlt sich aber seltsamerweise gut an, HTML und Screendesign gleichzeitig zu bearbeiten, da sich das auch gegenseitig beeingflusst. Das ist so völlig anders als die Arbeit in der Agentur, wo man meist mit dem HTML erst beginnt, sobald das Screendesign fertig ist.

• Beginn des Redesigns (3)
• Dieses Design ist zu Klischee-zweinullig! (9)
• Redesign Teil4: Es wird ein Relaunch (3)
• CSS Naked Day 2009 (0)

Die Tatsache, dass es eben die statischen Seiten, und nicht die Blogartikel waren, die so langsam geladen wurden machte mich etwas stutzig. Die letzte Möglichkeit, die das Problem verursachen konnte, war ein Plugin. Da gerade kurz vor den Performanceproblemen auf die neue Version von Tweetbacks (1.4.4) geupdated hatte, hab ich spaßeshalber einfach mal das Plugin deinstalliert. Und siehe da, der Blog ist so schnell wie eh und je. Daher meine Empfehlung: Tweetbacks aus, oder nicht auf 1.4.4 updaten.

• Kommentarspam vermeiden in Wordpress (0)
• Wordpress und das PHP Memory Limit (7)
• Firefox Add-ons für besseres Webdesign (9)
• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (4)

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

Eine Kleinigkeit gibt es bei dem Theme-Wechsler noch zu beachten. Das verwendete Plugin setzt bei jedem Wechsel des Themes ein Cookie, welches sich das aktuelle Theme “merkt”. Soll heißen, wenn ihr in ein paar Tagen nochmal hierher kommt, wird das zuletzt ausgewählte Theme angezeigt.

Der Erste Schritt wird jetzt sein, das momentane Design von allem Müll zu befreien und mal komplett zu strippen. Soll heißen ich werde alle Layoutgrafiken, einen Teil des CSS und das gesamte Javascript einfach ohne Rücksicht auf Verluste rausschmeißen, egal wie wild das aussehen mag. Ziel ist es,  zu der Codebasis zu kommen, die wirklich notwendig ist.

• Ein paar Links (4)
• Redesign Teil3: Experimente mit Struktur und Farben (5)
• Redesign Teil4: Es wird ein Relaunch (3)
• CSS Naked Day 2009 (0)

Dafür spricht, dass man einen Einblick in die einzelnen Schritte meines Redesigns bekommen könnte. Das könnte für den einen oder anderen recht interessant sein. Das neue Design würde dadurch auch  besser werden, euer Feedback vorausgesetzt.

Dagegen spricht, dass die User dieser Website ein gewisses Layout gewöhnt sind und ich so manchen mit einer unfertigen Version wohl eher erschrecken würde, als ihn neugierig zu machen. Stammbesucher könnten bei dieser Aktion verloren gehen und vermutlich nie wieder auftauchen.

Jetzt seid ihr gefragt. Schreibt eure Meinung zu meinem Vorhaben. Ist das völliger Unsinn, den ich bleiben lassen sollte, oder eher eine gute Idee? Keine Angst, ich habe nicht vor, Baustellengrafiken einzubauen. Die Inhalte bleiben während des Prozesses zugänglich.

• Webdesign mit Linux – Software für Webworker (6)
• Tschüss Google Adsense (5)
• Redesign Teil4: Es wird ein Relaunch (3)
• Firefox Add-ons für besseres Webdesign (9)

Wer noch nicht weiß, wer die Webkrauts sind, sollte sich schleunigst mal das Mission Statement auf der Website durchlesen.

• Webkrauts Adventskalender 2008 (5)

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)

• CSS Naked Day 2009 (0)
• Mein erster Artikel bei den Webkrauts: On-site SEO (0)

Angenommen man hat folgenden Code:

ol li:first-line {
font-weight:bold;
}

Der Firefox 3 und Safari 3.1 (Windows) stellen die vorangestellte Zahl so dar, als ob keine Formatierung vorhanden wäre. Die Internet Explorer 6 und 7, sowie der Opera 9.5 stellen die Zahl fett dar. Was ist nun richtig, bzw. wie lautet der vorgegebene Standard dafür? Ich habe mich auf den Seiten des W3C umgesehen, aber diesbezüglich keine Spezifikation finden können. Sofern das hier ein absoluter Hardcore Standards Liebhaber lesen sollte, der eine Antwort weiß, soll es mich wissen lassen. Ich bin nach wie vor der Meinung, dass in diesem Spezialfall die IEs und Opera recht haben und aus meiner Sicht korrekterweise die Zahl mitformatieren.

• CSS Naked Day 2009 (0)
• Ein paar Links (4)
• Redesign Teil3: Experimente mit Struktur und Farben (5)
• Redesign Teil2: CSS Reset, Besinnung auf das Wesentliche (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)

Liste der Browser auf verschiedenen Betriebssystemen

Browser die die Renderingengine von anderen benutzen (z.B. Google Chrome von Safari, Iceweasel die von Firefox) werden nicht extra aufgeführt. Die Browser werden nur bei den Betriebssystemen aufgelistet für die es eine explizite Version gibt. Diverse Hacks und Emulatoren werden weiter unten besprochen.

Verfügbar für Windows, Mac OS X und Linux

• Mozilla Firefox (Gecko Engine)
• Opera (Presto Engine)

Verfügbar für Windows (ab XP) und Mac OS X

• Safari (Webkit [KHTML] Engine)

Verfügbar nur für Linux

• Konqueror
  Kann vernachlässigt werden, da Safari auf der KHTML Engine von Konqueror basiert.

Verfügbar nur für Windows

• Internet Explorer (Trident/MSHTML verschiedene Versionen)

Alle Browser auf einem System?!

Es gibt mehrere Möglichkeiten alle dieser Browser auf einem der Systeme zu verwenden.

Windows

Auf Windows ist es am einfachsten alle Browser zu installieren. Den Internet Explorer in verschiedenen Versionen kann man mit Multiple IEs (Versionen 3-6, 7 sollte auf dem System Standard sein) gleichzeitig installieren. Eine weitere Möglichkeit ist der IETester der momentan die Versionen 5.5, 6, 7 und 8 beta2 des Internet Explorers in einem Programm installiert. Für Safari, Opera und Firefox sind native Versionen vorhanden.

Mac OS X

Für Macs verfügbar sind momentan natürlich Safari, Firefox und Opera. Damit fehlen nur noch die verschiedenen Internetexplorer Versionen. Dies kann man sich mittels Parallels und einer darin installieren Windows (XP oder Vista) Version auf den Mac holen. Das kostet allerdings einen guten Batzen Geld, da sowohl Parallels als auch Windows Investitionen nicht frei erhältlich sind. (Naiver Gedanke eines Linux Jüngers ;-).
Manuela Hoffmann stellt in ihrem Blog auch eine Möglichkeit wie man Internetexplorer auf dem Mac installieren kann vor, ganz ohne Parallels.

Linux (Beispiel Ubuntu)

Nativ für Linux sind Firefox, Opera und Konqueror erhältlich, der in unserem Fall Safari ersetzt. Für die verschiedenen Internet Explorer gibt es verschiedene Wege. Man kann sein Glück mit Wine versuchen und IETester, oder Multiple IEs darüber installieren. Wine ist eine Open Source Implementierung der Windows API für Linux. Nicht alles läuft darüber reibungslos. Der IETester hat laut Wine Website ein “Bronze” Rating, die Multiple IEs habe ich bis jetzt im Verzeichnis nicht finden können.

Die besser Variante ist die Installation eines Windows XP oder Vista in einer virtuellen Maschine, wie z.B. der Virtual Box und darin IETester oder Multiple IEs. Allerdings ist auch das wieder mit Kosten verbunden. Jeder muss selbst wissen, ob er bereit ist für seine Tests Geld auszugeben. Allerdings sollte man falls man nicht selbst noch ein altes XP rumliegen hat einfach mal seinen Nachbarn, oder in der Familie rumfragen, wo man sicher fündig wird.

Screenreader

Wer seine Seiten auf die Funktionalität und Zugänglichkeit in Screenreadern überprüfen will, muss sich nicht gleich eine kostepflichtige Software wie Jaws besorgen. Für den Firefox gibt es das plattformübergreifende open source Add-on Firevox,mit dem sich Webseiten vorlesen lassen. Leider gibt es Firevox meines Wissens nach nur in Englisch, doch zum testen reicht das völlig aus. Wer es ganz ohne Installation will, sollte sich Web Anywhere anschauen. Web Anywhere ist ein online Screenreader, der die eingegebene Seite in einen Frame lädt und dann direkt vorliest. Die Software ist noch im Alpha Stadium, funktioniert aber schon ganz annehmbar. Wie Firevox, ist Web Anywhere nur auf Englisch.

Unterschiede

Trotz gleicher Basis Engine kann es sein, dass die Anzeige des gleichen Browsers auf unterschiedlichen Betriebssystemen nicht zu 100% gleich sind. Auch Versionsunterschiede (z.B. zwischen Firefox 2 und 3) sind noch zu beachten. Leider entspricht die Darstellung des IETester und Multiple IEs auch nicht vollständig dem Original. Unterschiede im gleichen Browser, gleicher Version, liegen höchstwahrscheinlich an den unterschiedlichen installierten Schriften auf den jeweiligen Systemen.

Danke an Daniel Hepper für die Anmerkung zu den Unterschieden.

Wenn nichts mehr hilft…

…dann hilft browsershots.org. Dieser Dienst stellt nach Eingabe einer URL Screenshots aller nur erdenklichen Browser in vielen verschiedenen Versionen auf verschiedenen Betriebssystemen zur Verfügung. Die kostenlose Version des Dienstes erfordert keinerlei Registrierung und gibt es auch auf Deutsch. Man kann abgesehen von vielen Browsern auch Auflösungen der Bildschirme/Farbtiefe und Technologien (JavaScript/Java/Flash) wählen, nach denen die Screenshots erzeugt werden sollen. Leider kann bei Screenshots die Funktion der Seite nicht überprüft werden und die Erstellung der Screenshots dauert je nach Browser relativ lange, was aber auch die einzigen Wermutstropfen des großartigen Dienstes sind.

• Webdesign mit Linux – Software für Webworker (6)
• Firefox Add-ons für besseres Webdesign (9)
• Twitter Clients für Ubuntu (2)
• Bald ganz frisch: Ubuntu 9.04 – Jaunty Jackalope (1)

Das Problem

Ich wollte in einer Reihe von abwechselnden <a> und <div> Elementen bei mouseover auf dem <a> das  folgende <div> Element einblenden und bei mouseout wieder ausblenden. Standardmäßg ist das <div> bereits ausgeblendet.

Folgende HTML-Struktur liegt zugrunde:

<a href="#1">link</a>
<div class="box">erste box</div>
<a href="#2">link2</a>
<div class="box">2te Box</div>
<a href="#3">link3</a>
<div class="box">3te box</div>

Die Lösung

Nach einigem Rumprobieren und nicht zuletzt durch die Hilfe von Christian kam ich auf folgenden jquery Code, der sich nach einem <a> das jeweils nächste <div> sucht und es bei einem Event (in meinem Falle mouseover und mouseout) entsprechend verändert.

$(document).ready(function(){
/* Blendet alle <div> Elemente aus */
$("div").hide();
/* Nach jedem <a> wird das folgende <div> wieder sichtbar */
$("a").mouseover(function(){
$(this).next("div").show();
return false;
});
/* Nachdem der Mauszeiger das <a> verlässt wird das <div> wieder unsichtbar */
$("a").mouseout(function(){
$(this).next("div").hide();
return false;
});
});

Allgemein zu jquery

Die für dieses Beispiel genutzte jquery Version ist die momentan aktuelle 1.2.6. Da ich nicht davon ausgehen kann, dass jeder der das hier liest, schonmal mit jquery gearbeitet hat, hier noch ein paar Hinweise.

Für das korrekte Funktionieren muss…

• das jquery Framework im Head per <script> eingebunden sein.
• der Beispielcode entweder im HTML in einem <script> Element  stehen, oder ausgelagert als .js Datei eingebunden sein.

Hier findet ihr eine Demo des Scripts

• jquery Anfänger Screencasts (10)
• Ein paar Links (4)
• Beginn des Redesigns (3)

Warum ich das hier blogge? Ich beschäftige mich in letzter Zeit hobbymäßig mit SEO und da ist das Pagerank Update immer wieder eine spannende Geschichte. Was lernen wir daraus? Der Google Pagerank ist und bleibt ein Mysterium, dass man nicht so einfach verstehen kann, da immer wieder daran rumgeschraubt wird.

• Neues Google Pagerank Update bestraft Linkverkäufer (0)
• Pagerank von Google (0)
• Tschüss Google Adsense (5)
• Verlosung: 75€ Google AdWords Gutschein (3)

Teile der Serie:

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

Das <div> Element

Das <div> (div = division = Bereich) Tag steht semantisch gesehen für einen allgemeinen Bereich, der mit CSS formatiert werden kann. Ein <div> erzeugt, sofern nicht durch eine CSS Angabe verhindert, einen neuen Absatz und ist daher Teil der Blockelemente in HTML. Es darf aber auch andere Blockelemente umschließen. (Erklärung Inline/Block auf Selfhtml).
<div> Elemente werden oft zur Strukturierung und Ausrichtung der groben Seitenbereiche (Rahmen/Kopf/Inhalt/Fuß/Sidebar) eingesetzt.

Einsatzbeispiel <div>

<div class="rahmen">
<div class="header">Inhalt des Kopfes</div>
<div class="content">Eigentlicher Inhalt</div>
<div class="sidebar">Inhalt der Sidebar</div>
<div class="footer">Inhalt des Footers</div>
</div>

Die hier vergebenen Klassen wie z.B. header können per CSS formatiert werden.

Das <span> Element

Das <span> (span = Spanne, Bereich) Element bezeichnet einen allgemeinen inline Bereich, was heißt, dass mit <span> einzelne Teile eines Textes innerhalb eines Blockelements, wie z.B. <p> nochmal extra (mit CSS) formatiert werden können. Ein inline Element wie <span> erzeugt keinen neuen Absatz und kann somit innerhalb von Texten, oder auch für einzelne Buchstaben eingesetzt werden.

Einsatzbeispiel <span>

<span style="color:red">Roter</span> Text,
<span style="color:blue">blauer</span> Text,
<span style="color:green">grüner</span> Text.

Das obige Beispiel sieht folgendermaßen aus:Roter Text, blauer Text, grüner Text.

Im nächsten Teil der Serie werde ich mich mit sematischen Hervorhebungen für Texte beschäftigen.

Diese Serie wird nicht fortgesetzt. Die im Netz frei verfügbaren Referenzen zu HTML sind erschöpfend und eine weitere würde nur Verwirrung stiften. Wer weiterführende Informationen zu HTML-Elementen sucht, dem sei Michael Jendryschiks “Einführung in XHTML und CSS empfohlen.”

• (X)HTML Tags und ihre semantische Bedeutung Teil 1: Einführung (2)
• Do you speak semantic and valid (X)HTML ? (9)
• Redesign Teil3: Experimente mit Struktur und Farben (5)
• jquery Anfänger Screencasts (10)

Nachtrag: Hab ich eben ganz vergessen zu schreiben. Die einfache Bedienung liegt vor allem an meinem Firefox Add-on Twitterfox.

• Twitter Clients für Ubuntu (2)
• Sinn und Unsinn von Social Networks im Internet (1)
• Was bringt mir Social Bookmarking… (1)
• Anmeldungs- und Passwort-dschungel (7)

Verschwörungstheorien

Wenn man ein Anhänger von Verschwörungstheorien ist, könnte man vermuten, dass ein diverses Social-Network dahinter steckt, welches schon seit einiger Zeit mehr oder minder versucht sich die Webmontags-Communitiy einzuverleiben. Der Liebhaber von Verschwörungstheorien, den ich hier meine würde dies Aktion damit begründen, dass ein Anhänger dieses Social Networks damit versucht zu zeigen, wie doof eine offene Plattform ist und wie toll das eigene geschlossene System. Seit einiger Zeit tobt nun schon die Diskussion, ob die Webmontags-Community in dieses Social Network umziehen möchte, aber bislang haben sich die meisten, die ich kenne dagegen ausgesprochen und diese Maßnahme könnte ein Schritt sein die Leute zum Umdenken zu bewegen. Aber das ist ausdrücklich alles nur Vermutung.

Egal ob es der Kindergarten ist, oder eine böse Taktik einer Internetplattform: Lasst den Scheiß!

• Neue Seite: Archive (0)
• Familiäre Atmosphäre beim Webmontag in Mannheim (5)
• Webmontag in Mannheim (0)
• Relaunch von www.nocovers.de (13)

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)

• Keine Ähnlichen Beiträge vorhanden.

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)

• Mal kurz zum Hype um das iPhone 3G (12)
• Porn Movie (3)
• Kostenloses Ubuntu Videotraining (0)
• Super Mario Melodie auf Glasflaschen! (0)