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)

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 (7)
• Firefox Add-ons für besseres Webdesign (9)
• Twitter Clients für Ubuntu (2)
• Bald ganz frisch: Ubuntu 9.04 – Jaunty Jackalope (1)

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)

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)

Bezahlte Beiträge

Der Anbieter Trigami vermittelt Blogeinträge gegen Bezahlung. Je nach Aufwand und Reichweite des Blogs wird die Vergütung berechnet. Allerdings lohnt es sich meist nicht besonders (10-12 Euro pro Eintrag bis zu 350 Zeichen). Neuerdings kann man bei den meisten Angeboten für Rezensionen den Preis selbst festlegen und hoffen, dass er vom Anbieter akzeptiert wird.

Kontextsensitive Werbung

Bei der Kontextsensitiven Werbung werden bestimmte Bereiche der Website mit einem Werbecode (meist Javascript) versehen. Danach werden die einzelnen Seiten der Website auf ihren Inhalt untersucht und dann anhand der ausgelesenen Keywords passende Anzeigen eingeblendet, zumindest in der Theorie. Manchmal verirrt sich auch die eine oder andere nicht passende Anzeige auf den Werbebereich. Meist kann man mit Hilfe eines Anzeigenfilters bestimmte Anzeigen verbieten.

Der bekannteste Anbieter kontextsensitiver Werbung ist Google Adsense. Die normalen Klickraten liegen bei 1-3 Klicks pro 100 Anzeigen. Leider sind die Preise pro Klick meist sehr gering (1-30 Cent), sodass sich Google Adsense wohl nur bei hochspezialisierten Fachblogs lohnt.

Linkverkauf

Die Links werden je nach Anbieter und Weblog-System entweder dynamisch per Plugin, oder selbst in HTML eingebunden. Je nach Pagerank Werbeplatz und Anzahl der geschalteten Anzeigen bekommt man pro Link einen bestimmten Preis. Dies kann bei mehreren Links und einem mittleren Pagerank (3-4) durchaus lohnend sein (Beispielsweise 5 Links für jeweils 10 Euro im Monat bei einem Pagerank von 4).
Die bekanntesten Anbieter die Linkverkauf anbieten sind Linklift und Teliad

Direktes Marketing

Beim direkten Marketing verkauft man Werbeplätze direkt an die Werbenden. Dies kann geschehen, indem man potentielle Werbende direkt kontaktiert und ihnen ein Angebot macht, oder eben von ihnen kontaktiert wird. Dies dürfte wohl die lohnendste Methode sein mit Blogs Geld zu verdienen, da niemand “mitverdient” und somit der gesamte Gewinn beim Blogbetreiber ankommt.

• Tschüss Google Adsense (5)
• Wollt ihr ein Redesign im Entstehen beobachten? (10)
• In Karlsruhe angekommen, oder auch nicht… (2)
• Wordpress 2.5 Release verschoben (0)

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)

Hinweis: Dies ist eine von trigami vermittelte Auftragsarbeit, für welche ich ein Honorar erhalte. Konkret heisst das: Ich werde dafür honoriert, dass ich über ein Produkt oder eine Dienstleistung schreibe (und nicht dafür, dass ich positiv darüber schreibe). (Mehr Informationen)

Shortview ist ein neues Soziales Netzwerk aus dem Hause Web.de welches ich im Rahmen eines Trigami-Reviews mal etwas näher unter die Lupe genommen habe.
Zum Einstieg hier mal die Einschätzung der Betreiber zu ihrem neuen Portal:

Wir haben sehr viel Energie in dieses innovative Konzept gesteckt und glauben, ein wirklich neues Community-Portal geschaffen zu haben, daß sich deutlich von StudiVZ, Lokalisten, Facebook und Co. abgrenzt.
…
Der Ansatz Menschen schnell und einfach primär über ihre Interessen zusammenzuführen ist aus unserer Sicht neu und einzigartig. Im Vordergrund steht nicht zwingend das “Was bin ich, was hab ich, darum bin ich cool” sondern vielmehr “Was interessiert mich” und “Was kann ich beitragen, wie kann ich mein Wissen sinnvoll an andere vermitteln”.
Natürlich geht es auch um Spaß und Freude, ganz klar.

Allgemein:

Da ich das Studivz (ein Soziales Netzwerk für Studenten, welches mittlerweile in Deutschland mehrere Millionen Nutzer hat) recht gut kenne, werde ich Shortview in meinem Review mit dem Studivz vergleichen, soweit das möglich ist.

Zuerst mal zum allgemeinen Layout. Als ich die Startseite zum ersten Mal sah, fiel mir direkt auf, dass der Name “Shortview” für mich keine direkt erkennbare Aussage über das Portal macht und sich eigentlich nur schick anhört. Das Logo ist Web 2.0 typisch und nichts besonderes, aber zweifelsohne schicker als das vom Studivz.

Drinnen:

Nun bin ich angemeldet und bin gerade dabei meine eigene Profilseite zu erstellen. Das geht eigentlich recht reibungslos, bis auf das ich erstaunt bin, dass man sein Profilbild nur als .jpg hochladen kann und keine weiteren Formate (.gif, png) angeboten werden. Da besteht noch Nachbesserungsbedarf!

Auf den Profilseiten muss man sich auch erst einmal zurechtfinden (wenn man das Studivz gewohnt ist), da in der mittleren Spalte des dreispaltigen Layouts nicht der Inhalt des Profils steht, wie man annehmen sollte, sondern die Interessengebiete aus denen man Gruppen auswählen kann, denen man beitritt. Ich finde, da müssten nicht alle Bereiche angezeigt werden, sondern nur die in denen man Mitglied ist.
Außerdem sollten die Interessen auf der Profilseite nicht so sehr in den Mittelpunkt gestellt werden, da auf der Profilseite ja eigentlich das Profil des Mitglieds im Mittelpunkt stehen sollte.

Besondere Features:

• Mit Freunden vernetzen:
  Das geht bei Shortview recht einfach. Namen in die Suchmaske eingeben, auf das Profil gehen und Einladung schicken. Eine besonders schicke Variante, neue Leute zu Shortview einzuladen ist die Möglichkeit sich über das Shortview Interface in seinen Web.de oder GMX.de Mailaccount einzuloggen und dann sein dort gespeichertes Adressbuch verwenden zu können. Das gefällt auf anhieb, aber wie wird denn mit den Login-Daten umgegangen, die dann ja zwangsläufig über den Shortview-Server laufen? Das ist noch fragwürdig und etwas dubios. Abgesehen vom Sicherheitsaspekt, ein Absoluter Pluspunkt gegebüber dem Studivz.
• Gruppen beitreten / gründen:
  Geht auch intuitiv und schnell, da die Gruppenvernetzung ja einer der Hauptbestandteile des Netzwerks ist.
• Infopanel:
  Eine Leiste die man optional einblenden kann. In ihr werden je nach Einstellung etwa der Onlinestatus der Freunde, oder die letzten Logins in der Community angezeigt. Diese Leiste wird per Javascript am unteren Bildrand eingeblendet und “fährt mit”, was sehr nervig werden kann. Diese Leiste wäre am linken oder rechten Bildrand besser aufgehoben!
• Fotoalben:
  Wieso steht dieses Feature bei den besondern? Weil es besonders umständlich zu bedienen ist! Man muss ein Album erstellen ihm einen Namen geben und kommt dann nur auf umständlichen Wegen zum eigentlichen Bildupload mit dem man dann immer nur ein Bild auf einmal hochladen kann. Total nervig: Das kann das Studivz eindeutig besser.
• Werbefrei:
  Zumindest bist jetzt. Aber ein kleiner Button im Footer kündigt an, dass etwas in der Richtung bald kommen soll. Eindeutiger Pluspunkt gegenüber dem Studivz. Falls die Werbung kommt, übertreibt es bitte nicht so wie das Studivz.

Datensicherheit:

Hier muss nocheinmal der Punkt mit dem E-Mail Login genannt werden. Legt bitte offen was mit den Daten passiert. Außerdem kann man in der Standardeinstellung die Profilseite einfach ohne eingeloggt zu sein öffentlich sehen, was dann Problematisch wird, sobald Datensammler unterwegs sein sollten. Es wäre wünschenswert hier die Standardeinstellung auf “nicht öffentlich” zu schalten.

Unter der Haube…

…läuft ein 1a klappriges uralt-Tabellenlayout ohne jegliche Semantik. Alles ist mit Tabellen strukturiert und es sind weder “h1″ – “h6″ zu finden noch irgend ein “em”, “p”, “strong” oder sonst ein semantisches Element. Wo mein Eindruck bis jetzt ganz gut war, ist das Portal bei dieser Disziplin gnadenlos durchgefallen, aber das kann man ja noch nachbessern. Eigentlich sollte man doch wissen, dass ein Tabellenlayout böse ist! Auch bei der Semantik sollte man schon wegen SEO gründen nicht sparen, wo es doch so einfach ist semantisch korrekten Code zu schreiben.

Fazit:

Shortview ist ein Portal mit Potential. Dazu muss aber an einigen Stellen noch nachgebessert werden. Das kann, wenn man dranbleibt auch gelingen.

• Sinn und Unsinn von Social Networks im Internet (1)
• So, mich gibts jetzt auch bei Twitter (0)
• Was bringt mir Social Bookmarking… (1)
• Anmeldungs- und Passwort-dschungel (7)

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)

Es ist OpenSource und steht unter der GPL-Lizenz und ist kostenlos nutzbar. Die aktuelle Version wurde im Mai 2006 veröffentlicht und hat die Versionsnummer 2.6.4 und kann unter http://www.websitebaker.org heruntergeladen werden.

Voraussetzungen:

Man benötigt Webspace mit PHP 4.1 oder höher und MySQL 3.2.3 oder höher.

Installation:

Die Dateien auf den Webspace hochladen und dann dem Installationsmenü folgen.

Bedienung:

Die Bedienung von WebsiteBaker erfolgt komplett online in der Administration und ist sehr einfach und intuitiv. Wer ein Textverarbetungsprogramm bedienen kann, wird es mit WebsiteBaker auch nicht schwer haben. Grund ist das schön übersichtlich und einfach gehaltene Backend.

Funktionen:

Mit Website Baker können kinderleicht Webseiten erstellt werden, die über eine übersichtliche Administration verwaltet werden. Dank vieler Erweiterungen, die an das System angepasst wurden, können auch dynamische Inhalte angeboten werden, wie zum Beispiel ein Gästebuch, Forum usw.

Die Ausgabe des Codes erfolgt nach Webstandards, soweit man ein Template gewählt hat, welches den Standards entspricht. Ebenso kann auch der Code aller Erweiterungen in der Administration verändert werden.

Erweiterungen:

Bei den Erweiterungen muss zwischen mitgelieferten und extra Erweiterungen unterschieden werden. Bereits mitgelieferte Erweiterungen sind eine u.a. Newsfunktion, ein HTML-Wysiwyg-Editor, ein Formulargenerator und eine Backup Funktion.
Weitere Erweiterungen lassen sich auf der offiziellen Website runterladen und stellen eine gute Ergänzung zu den bereits vorinstallierten dar.

Auszug aus den installierbaren Erweiterungen:

• Gästebuch
• Diverse Bildergalerien
• Forum
• Inline Wrapper (zum einbinden anderer Webseiten ohne Frames)
• Event Kalender
• Link Liste

Es gibt noch zahlreiche weitere Erweiterungen, diese Liste zählt nur die wichtigsten auf.

Die Installation neuer Erweiterungen läuft intuitiv und Problemlos unter dem Administrations Menü “Erweiterungen”. Hier können auch neue Sprachen oder Templates installiert werden.

Templates:

Sie werden wie oben beschrieben im Menü “Erweiterungen” installiert. 3 durchaus verwendbare Templates werden standardmäßig mit installiert. Weitere Templates können einfach auf der Website Baker Website runtergeladen werden, wo sich auch einige Perlen versteckt haben.

Wenn man eigene Templates erstellen will, sollte man sich das Tutorial dazu durchlesen und auch ein wenig PHP verstehen, sonst ist es sehr schwierig beispielsweise die Integration des Menüs zu verstehen. und sofern man keine komplizierte Navigation haben möchte ist es ohne weiteres möglich eins zu erstellen, Html und CSS Kenntnisse vorausgesetzt.

Sprachen:

Es sind Englisch, Schwedisch und Deutsch bei der Installation dabei und weiter Sprachen gibt es auf der Website.

Support:

Gibt es auf der offiziellen Website im Forum, in dem es auch einen deutschen Bereich gibt. Fragen werden wenn möglich immer recht schnell beantwortet.

Sicherheit:

Bis jetzt wurden laut dem Supportforum auf der offiziellen Website keine Sicherheitsprobleme mit der aktuellen Version entdeckt und Hacking erfolgte ausschließlich über den Server direkt. Auch sämtliche Erweiterungen wurden auf ihre Sicherheit hin überprüft.

Schwachpunkte:

Wenn man Website Baker mit großen, bekannten CMS vergleicht, fällt auf, dass weitaus nicht so viele Erweiterungen und Templates dafür zu finden sind. Es gibt auch außerhalb der Anbieterseite keine Community, die sich mit dem CMS befasst.

Diese Tatsache kann aber auch durchaus als Vorteil gesehen werden, da so sichergestellt ist, dass alle Erweiterungen der Sicherheitsprüfung der Programmierer unterliegen und somit perfekt an das System angepasst sind.

Stärken:

Hier als erstes zu nennen, die einfache Bedienung. Um ein Webprojekt erstellen zu können benötigt der Nutzer nur Rudimentäre Kenntnisse und die Administration erklärt sich selbst und ist sehr übersichtlich gehalten.
Eine weitere Stärke ist die einfache Installation von sämtlichen Add-ons, seien es Sprachen, Templates oder Erweiterungen.

Fazit:

Wer also ein CMS sucht das sehr einfach bedienbar ist und eine kleine, aber sehr funktionale Palette an Templates und Erweiterungen in kauf nehmen kann, ist mit Website Baker sicher an der richtigen Adresse. Für wen es etwas mehr sein darf, dem sei geraten sich nach Alternativen, wie etwa Joomla umzuschauen. Allerdings bringen solch komplexe Anwendungen auch eine saftige Einarbeitungszeit mit sich, die man sich mit Website Baker getrost sparen kann.

Update 07.09.2008:

Ich habe mit dem Gedanken gespielt ein Tutorial zu schreiben, wie man ein Layout in Websitebaker umsetzt, habe mir dann aber die offizielle Dokumentation dazu angeschaut und beschlossen, es zu lassen und euch darauf zu verweisen, weil die Anleitung echt gut ist. Falls dennoch Bedarf besteht, bitte kommentieren.

Website besuchen: http://www.websitebaker.org

• Keine Ähnlichen Beiträge vorhanden.