HTML Tabellen übersichtlich gestalten mit jQuery

Wie jeder weiss, sind derzeit <code><tables/></code> nicht mehr angemessen. Dennoch gibt es Fälle, wo man auf Tabellen nicht ganz verzichten kann, letztlich wenn es sich schlicht und einfach um komplexe Daten handelt, oder wenn auch wie in einigen Fällen, dass HTML aus einer Maschine gedrückt wird, die Tabellen bevorzugt.

Nun kann es halt sein, dass man um eine HTML Tabelle nicht mehr herum kommt.

Mittels jQuery, ein gutes kompaktes Javascript Framework, und ein wenig CSS Angaben, kann man dann seiner nicht formatierten Tabelle eine gute Übersicht verleihen.

Hierzu benötigen wir zunächst das jQuery Plugin, um auf dieses Framework zuzugreifen.

Auf www.jquery.com kann man sich dieses herunterladen und in den Header, also zwischen <code><head></code> und <code></head></code> deines Dokumentes einbinden.

<code>
<script src=”DEINE_URL_JQUERY” type=”text/javascript”></script>
</code>

Damit wir nun unserer HTML Tabelle eigene Klassen hinzufügen können, müssen wir das Skript nach erfolgreichen Laden deiner Webseite initialisieren; Das bedeutet, dass alle Elemente vorhanden sein müssen, damit man auch diese Elemente über Javascript über die Dokumenten Struktur(DOM) ansprechen kann.

Dazu benötigen wir den folgenden Standard Aufruf:
<code>
<script type=“text/javascript“>
// Wenn das Dokument vollständig geladen wurde, wird die Funktion <code>$(document).ready(function()</code> ausgeführt:

$(document).ready(function(){
// Dem 1. tr aus dem table wird die Klasse ‚head’ zugewiesen
   $(„table tr:first“).addClass(„head“);
// Hier wird allen geraden Zeilen die Klasse ‘odd’ zugewiesen
   $(„table tr:even:not(.head)“).addClass(„odd“);
});

</script>
</code>

An dieser Stelle fügt dann das Javascript mittels DOM (Document Object Model) Manipulation dem HTML Element <code><table></code> Informationen hinzu.
In unserem Falle eine CSS Klasse dem Table Header (<code>$(„table tr:first“).addClass(„head“);</code>) und allen anderen geraden Zeilen(2,4,6,…) dieses hier: <code>$(„table tr:even:not(.head)“).addClass(„odd“);</code>

Nun hat man also seiner Tabelle Style Klassen hinzugefügt, welche man anschliessend mit untenstehendem Code formatieren kann:

CSS Beispiele:
<code>
tr.odd td {
background:#e4e4e4;}
tr.head td {
background:#666;
color:#fff;}
</code>
Somit sind wir in der Lage einen Tabellenkopf zu formatieren und jeder geraden Zeile der Tabelle z.B. eine andere Farbe zuzuweisen, um diese dann für die Lesbarkeit übersichtlicher zu gestalten.

Viel Spass dabei, wünscht Euch das CSS-Info Team

Mehr Infos gibt es in unserem CSS-Forum

Wie behandle ich den Internet Explorer 6 als Standard Browser?

„Schön ist es ja nicht…“, denkt man sich, wenn man sich sein neues erstelltes Design im Internet Explorer 6 ansieht!

Dies dachte sich bestimmt auch Dean Edwards, und entwickelte somit eine kleine Javascript Bibliothek, um den IE6 das gleiche Verhalten wie einem modernen Browser zu verleihen.

Das Skript bringt den IE5/6 auf das Niveau vom Internet Explorer 7 und schafft ein sorgefreies Aufrufen deiner Seite im IE6 (im Regelfall). Es korrigiert die Darstellung von floating Elemente und stellt ebenfalls transparente PNG Bilddateien dar.

Das CSS-Info Team nutzt diesen ebenfalls und ist recht begeistert davon!

Was haltet ihr davon?

URL:  http://code.google.com/p/ie7-js/

Viel Spass dabei, wünscht Euch das CSS-Info Team

Mehr Infos gibt es in unserem CSS-Forum

google PageRank update 2009 doch erst am 2. April

Ende März 2009 vermuteten wir ein google PageRank update, welches dann aber erst zum 2. April stattgefunden hat

Am 29. März gab es einige Verwirrung. Bei den eigenen Projekten hatten  keine wesentlichen Änderungen stattgefunden. Lediglich einige Unterseiten hatte (plötzlich) einen PageRank erhalten. Jedoch sind einige Seiten auch leer ausgegangen (oder befinden sich gerade in der Updatephase?). Und eine mittlerweile geparkte Domain hat einen PageRank 2 von 1 erhalten. Hier hatten wir einen Link von einer PR3 Seite gesetzt und in der Parkaktion vergessen ihn wieder rauszunehmen.

Da keine wesentlichen Veränderungen in den Verlinkungen stattgefunden haben, hatten wir diesmal keine wesentlichen Veränderungen der eigenen Projekte erwartet. Jedoch wurden auch wenige „natürliche“ Vererbungen auf Unterseiten festgestellt. Update: Mittlerweile sind die Vererbungen da.

Das Update schien am 29. März im Gange zu sein, die Anzeigen sprangen bei diversen Projekten noch hin und her.

update 30. März 2009:
Bei den meisten Projekten haben sich nach detailierter Prüfung gar keine Änderungen ergeben, auch nicht bei den Unterseiten, bei denen wir eine (natürliche) Veränderung erwartet hatten! Hier im Blog habe ein paar Kategorien Ihren PageRank verloren, während andere Ihren PR behalten haben. Lediglich eine Unterseite ist im PageRank von 2 auf 3 gestiegen. Die Seiten bei denen heute Morgen noch ein PR n/a angezeigt wurden, haben jetzt wieder Ihren PR1 oder 2 (wie vorher). Eine Unterseiten Prüfung mit dem PR Tool für Unterseiten hatte am 29. März zu drei unterschiedlichen Ergebnissen geführt.

update 02. April 2009: Das tatsächliche update fand am 2. April 2009 statt.

Firefox überholt Internet Explorer (knapp)

Firefox hat es nach einer starken Aufholjagd in den letzten 6 Monaten geschafft und ist mit dem Internet Exporer in Deutschland gleichgezogen und ihn sogar diesmal knapp geschlagen!

Noch im Oktober 2008 stand der Internet Explorer aus dem Hause Microsoft an der Spitze der Auswertung von ca. 100.000 Besuchern im Zeitraum August 2008 bis Oktober 2008. Mit 58,43% hatte der Internet Explorer noch 20% Vorsprung zum Firefox (36,74%).

Im Dezember 2008 verbesserte sich die Statistik bereits massiv zu Gunsten des Firefox Browsers. 40.000 Besucher im Dezember wurden ausgewertet, 48,80% nutzen den Internet Explorer und bereits 45,20% den Firefox. Die Browser zogen fast gleich.

Nun ist eine neue Statistik erstellt mit den Ergebnissen von 01.01.2009 – 28.02.2009

Verteilung Firefox / Internet Explorer in Deutschland seit 1. Januar 2009*:

Firefox (alle Versionen) 46,90%
Internet Explorer (alle Versionen): 46,53%
Rest ca. 6,57%

Auffällig ist auch, dass die restlichen Browser, insbesondere Safari und Opera weiter zulegen konnten. Wenn auch nur mit geringem Marktanteil. Der Browser google Chrome spielt weiterhin kaum eine Rolle. Der neue Internet Explorer 8 hat sich in der Statistik ebenso wenig wiedergespiegelt. Ob Microsoft damit den Siegeszug von Firefox aufhalten kann ist somit fraglich.

* gewertet wurden 155.466 Besucher auf drei unterschiedlichen Webseiten (und Seitentypen):

www.bonsound.de – Musikmagazin
www.wandartisten.de – WebShop
www.chatiquette.de – Informationsseite

Nach den letzten PageRank update (31.12.2008) alles anders

Der letzte google PageRank update zu Silvester brachte in den meisten Fällen das was erwartet wurde. Zumindest bei meinen Projekten.

Was mir nach 3 Tagen genauer Prüfung der Unterseiten nun doch aufgefallen ist:

Irgendwie war dieser PageRank update anders als sonst. Die Startseiten haben allen Ihren PageRank erhalten wie geplant, berechnet oder erhofft (bei mir zumindest).

Aber bei den Unterseiten gabe es das Phänomen, dass bei ein paar Seiten der PageRank völlig verschwunden ist. Von 3 auf Nichts (also nicht null, sondern tatsächlich Nichts). Andere Seiten verstummten von Null auf Nichts, oder sind bei Nichts geblieben obwohl sehr Interessant, oft von anderen Blogs verlinkt, teilweise seit Monaten mit 4er PR ohne NoFollow.

Das betrifft nur wenige Seiten und bei mir auch nur Unterseiten, dennoch sehr ungewöhnlich! Auch handelt es sich um Seiten völlig unterschiedlicher Projekte und Strukturen. Betroffen sind also Unterseiten von reinen HTML Seiten, von einem WebShop, PHP Verzeichnisse und WordPress Unterseiten.

Natürlich wurde die Seiten weder umbenannt noch gab es sonstige technische Änderungen. Auch andere Unterseiten der gleichen Projekte haben Ihren PageRank erhöht oder gehalten. Völlig Crazy dieses Update.

Wer hat ähnliches bemerkt?

google PageRank Update 31. Dezember 2008

Heute Nacht (31.12.2008) hat google wieder einen „offiziellen“ PageRank update gestartet. Im Augenblick (8.00 Uhr) läuft der Update noch für die Unterseiten.

Neben den ungewöhnlichen bzw. außerordentlichen PageRank Updates im Oktober 2008, war dies nun wieder ein Update, welches alle Seiten mit einbezogen hatte.

Veränderungen des eigenen PageRank kann man mit Hilfe von diversen Erweiterungen für die gängigen Browser einfach sehen. Um eine schnelle Übersicht über alle Veränderungen der Unterseiten (bis zu 300 Seiten auf einmal) zu sehen, empfiehlt sich das hier vorgestellte PageRank Check Tool für Unterseiten.

Spannende Veränderungen in der Webszene habe ich noch nicht gesehen, bei den Communities in Deutschland gab es auch kaum Veränderungen (wer-kennt-wen ist auf PageRank 6 gestiegen).

Natürlich konnte ich in der Kuürze der Zeit noch nicht alle interessanten Seiten checken.

Für diesen Blog und die Seite hp-profi.de gab es folgende Veränderungen:

blog.hp-profi.de hat jetzt einen PageRank von 3 (von 0)
www.hp-profi.de hat jetzt einen PageRank von 3 (von 1)

Da wir teilweise die Unterseiten von hp-profi.de direkt von extern verlinkt haben, werden sich auch für die Unterseiten gleich neue PageRanks ergeben. Diese werden aber erst wenn der PageRang update fertig ist sichtbar sein. Wie üblich wird bei vielen Unterseiten in der Updateühase gar kein PageRank angezeigt.

Ungewöhnliche PageRank – Veränderungen an unseren anderen Projekten haben wir nicht festgestellt. Die beobachteten Seiten und Projekte sind im Allgemeinen wie vorhergesehen im PageRank gestiegen:

www.bonsound.de hat jetzt einen PageRank 4
www.ralf69er.de hat jetzt einen PageRank 4
www.hierbleibich.de hat jetzt einen PageRank 4
usw.

Ich wünsche allen Lesern, Bloggern und Webmastern

einen Guten Rutsch in Neue Jahr!

Firefox zieht (fast) gleich mit Internet Explorer

Noch im Oktober stand der Internet Explorer aus dem Hause Microsoft an der Spitze der Auswertung von ca. 100.000 Besuchern im Zeitraum August 2008 bis Oktober 2008. Mit 58,43% hatte der Internet Explorer noch 20% Vorsprung zum Firefox (36,74%).

Im Dezember 2008 sieht die Verteilung schon ganz anders aus. Firefox hat nicht nur weiter aufgeholt, er legt auch an Geschwindigkeit zu und hat mit dem Internet Explorer in Deutschland das erste Mal fast gleichgezogen.

Ich habe wieder völlig verschiedene Projekte mit hohem Traffic und google Analytics Werten herangezogen. Daraus ergibt sich folgende Verteilung.

Verteilung Firefox / Internet Explorer in Deutschland im Dezember 2008*:

Internet Explorer (alle Versionen): 48,80%
Firefox (alle Versionen) 45,20%
Rest ca. 6,0%

Man kann davon ausgehen, dass in 2009 der Firefox den Internet Explorer deutlich überholen wird. In einem Monat werde ich die nächte Statistik veröffentlichen und vermute die Kehrwende bereits im Januar. Ob Microsoft mit dem Internet Explorer 8 wieder Boden gutmachen wird, kann bezweifelt werden. Für den „Browserkrieg“ wird es ein spannendes Jahr.

*Ausgewertet wurden ca. 40.000 Besucher im Zeitraum 1. Dezember bis 30 Dezember 2008.

Dabei handelt es sich um völlig unterschiedliche Projekte und damit auch völlig unterschiedliche Besucherstrukturen.

Es handelt sich jedoch fast ausschließlich um Besucher aus Deutschland.Herangezogen wurde die Daten folgender Webseiten:

www.bonsound.de (Musikblog)
www.chatiquette.de (Information)
www.wandartisten.de (Webshop)
www.wildefreunde.de (Business-Seite)
www.hierbleibich.de (Webblog Community)
www.hp-profi.de (Infoseite für Webmaster)

Wie kann man den eigenen PageRank auf Unterseiten vererben

Den eigenen (sichtbaren) PageRank kann man sich mit Hilfe der google Toolbar oder anderen kleinen Helferlein und Online-Tools jederzeit anzeigen lassen. Zur Überprüfung der PageRank Verteilung auf den Unterseiten (bis 300 Seiten auf einmal!), kann man sich ebenfalls mit einem tollen Tool aus Rußland anzeigen lassen.

Aber wie funktioniert eigentlich die Verteilung des eigenen PageRanks auf die Unterseiten und ist das überhaupt wichtig?

Wichtig ist die Verteilung des PageRank auf die Unterseiten nur dann, wenn man die Unterseiten bei google in den Suchergebnissen auch drin haben will. Manche Seiten will man ja gar nicht dort gelistet haben (z.B. Impressum, Datenschutzerklärung usw.). Diese Seiten kann man dann mit dem Meta NoIndex aus den Suchergebnissen verbannen und mit den Attribut NoFollow die PageRank-Vererbung stoppen. Das sollte man auch unbedingt tun, denn schließlich will man seinen PageRank ja nicht an Seiten vererben, die keinen Nutzen haben.

Alle anderen Seiten erhalten Ihren PageRank mit der internen Verlinkung automatisch. Hier kann man durch geschickte Verklinkung natürlich Seiten komplett ausschließen (siehe oben) oder aber die PageRank Verteilung steuern.

Beispiel:

Sie haben eine Webseite mit einem 4er PageRank.

Sie haben auf der Startseite 20 externe Links (das geht schneller als man denkt) und nur 10 interne Links. Von den Internen Links gibt wiederum jeweils 10 Links auf die dritte Ebene ihrer eigenen Seite und jeweils wieder 5 Links extern auf fremde Seiten. Auf der dritten Ebene haben sie wieder jeweils 3 externe Links.

Sie haben also auf Ihrer Webseite (111 Seiten inkl. Startseite)
110 interne Links (10x von der Startseite auf die Ebene 2 + 100x von Ebene 2 auf die Ebene 3)
und
370 externe Links (20x Startseite, 10×5 auf der Ebene 2 und 100×3 auf der Ebene 3).

Die PageRank Kraft Ihrer Seite reicht also nicht aus um alle 480 Seiten mit einen PageRank 3 zu vererben. Das wollen sie vermutlich auch gar nicht (zumindest nicht bei allen externen Links). Die eigenen Seiten sollen aber soviel PageRank wie möglich abbekommen. Es ist in diesem Fall also wichtig, externen Links so wenig PageRank wie möglich zu vererben (NoFollow). Dabei sollten sie aber beachten, dass auch Links zu Ihrer Seite mit dem NoFollow Attribut ausgestattet werden können. Wenn sie also Grundsätzlich alle externen Links mit einem NoFollow Attribut ausstatten, werden sie selbst weniger Backlinks mit PageRank erhalten. Bei Seiten, die Grundsätzlich keinen PageRank vererben (Social Bookmarks wie Mister Wong und Co), kann man aber mit gutem Gewissen eine NoFollow Attribut einbinden.

Die eigenen Seiten der dritten Ebene die einem wichtig sind, erben den PageRank von 3 nur dann, wenn sie direkt von der Startseite mit einem Link versorgt werden. Man sollte sich also Möglichkeiten bei der Erstellung der Webseite offen halten, auch direkt auf die dritte Ebene zu verlinken, wenn sich dort wichtige Informationen befinden, die bei google in der Suchmaschine gefunden werden sollen.

Damit der PageRank nicht komplett wegfliest, ist es auch wichtig, von allen Unterebene wieder Links zur Startseite und zu den Ebenen über der Unterebene anzubieten (der berühmte Home-Button). Auch diese internen Links sollten GRUNDSÄTZLICH mit einem sinnvollen title-Tag und Linktext ausgestattet sein.

Wer ein wenig mit der Verlinkung übt und Geduld hat, wird nach einigen Monaten das Prinzip verstehen und gut mit der neuen Erfahrung arbeiten können. Das Ganze ist natürlich mit einem enormen Aufwand verbunden, der sich nur dann lohnt, wenn man mit der Webseite auch konkrete Ziele verfolgt (z.B. um damit Geld zu verdienen).

Dabei sollte man allerdings auch berücksichtigen, dass die Webseite auch mit allen Maßnahmen noch für den Besucher Attraktiv bleiben muß! Sonst schreckt man die Besucher ab und erhält selbst keine Links mehr.

Eine nur auf google statt auf die Besucher optimierte Seite bringt also irgendwann auch keine Besucher mehr.

Über die Qualität von Links

Für SEOs ist es ein alter Hut: Nicht nur die Anzahl der Backlinks zur eigenen Homepage ist wichtig, sondern vor allem die Qualität. Die Qualität der Backlinks setzt sich aus mehreren Faktoren zusammen:

1. Der PageRank. Welchen PagerRank-Wert hat der Link? Von einer PageRank 5 Seite kann man natürlich einen höheren PageRank vererben, als von einer Seite mit einem geringeren PageRank. Allerdings ist für google auch wichtig, wie lange der Link gesetzt ist (der Einfluß eines Links auf den eigenen PageRank wirkt nur so lange der Link auch gesetzt ist. Verschwindet der Link, verschwindet die Kraft). Und es ist wichtig, wieviele Links auf der Linkseite existieren. Irgendwann ist auch die beste Linkkraft verloren. Dabei geht diese Linkskraft sowohl für interne als auch für externe Links verloren. Nehmen Sie zum Beispiel diesen Blog. Fast 100 Links gehen von der Startseite auf Unterseiten oder an externe Seiten (in den Beiträgen, der Linkliste, den Blogverzeichnissbuttons). Zählen Sie nach! Eine Vererbung der eigenen Linkkraft an diese vielen Seiten findet zwar statt, führt aber nur zu einem schwachen Ergebnis. Es ist also nicht nur wichtig, ob die verlinkende Seite einen PageRank hat, sondern auch, mit wievielen Links man sich diesen PageRank teilen muß.

2. Der Inhalt der verweisenden Seite. Wenn Sie einen WebShop für Brieftauben-Fußringe betreiben, ist es wichtig, von den wichtigen Homepages die sich mit Brieftauben beschäftigen verlinkt zu werden. Zumindest wenn sie bei google im Zusammenhang mit dem Suchbegriff Brieftauben gefunden werden wollen. Ein Link von einer Fan-Seite der Kölsch-Rock-Gruppe Brings, bringt da weniger. Oder eine Seo Seite wie diese.

3. Der Standort des Links. Grundsätzlich bewertet google Links im laufenden Text höher ein, als Links im Footer.

4. Der Link Text: Böser Fehler ist ein Link mit der Bezeichnung „hier„. Sie werden diesen Fehler auf vielen Webseiten finden. Besser ist da, wenn der zu verlinkte Inhalt beschrieben wird: Professionelles Webdesign.

5. Der Link Titel. Diesen title-attribut (a title=“text“) sieht man in der Regel, wenn man mit der Maus über einen Link fährt. Auch dieser Titel sollte in irgendeinem Zusammenhang mit dem Ziel stehen: Seo – Suchmaschinenoptimierung. Auch Links die von Bildern (Logos/ Bannern) kommen, sollte man einen title-attribut und vor allem einen ALT-Tag geben.

6. Link ohne NoFollow Attribut. Ein Link mit einem NoFollow Attribut ist für die Vererbung des PageRanks, bzw. als Linkkraft nichts Wert. Besucher kann man über solche Links allerdings schon erhalten.

Zusammenfassung: Suchen Sie Seiten die sich mit den Themen Ihrer eigenen Seite beschäftigen. Versuchen Sie von diesen Seiten einen Link zu erhalten. Bitten Sie darum, dass der Linktext zu Ihrer Seite passt und das der Link einen aussagekräftigen Titel erhält.

Weiviel Erfolg Sie mit Ihren Bemühungen haben, sehen sie am besten in den google tools „google analytics“ und „google webmaster tools

Problem mit 404 Fehlerseiten? Die Lösung.

404 Fehlermeldungen, bzw. die 404 Fehlerseiten werden dem Besucher einer Webseite dann angezeigt, wenn die aufgerufene URL nicht existiert und auch sonst keine Umleitung zu einer anderen Seite vorhanden ist. Das passiert durch Tippefehler (impresum.htm statt impressum.htm) oder Fehlerhafte Links (Impressum.htm statt impressum.htm) oder weil eine URL nicht mehr existiert. Tipp: Eine umgezogene URL sollte immer durch einen permanenten redirect (301) umgeleitet werden.

Eine 404 Fehlerseite wird in der Regel vom Webserver direkt ausgegeben und weist den Webseiten Besucher lediglich auf den Fehler hin, bietet aber keine Alternativen oder Lösungvorschläge an. Aus diesem Grund kann es passieren, dass der Besucher denkt, dass gesamte Angebot sei bereits vom Netz und er orientiert sich um. Das will ein Webmaster natürlich unbedingt vermeiden. Darum gibt es die Möglichkeit eigene 404 Fehlerseiten für eine Webseite zu erstellen. Und diese Möglichkeit sollte unbedingt genutzt werden.

Eine professionelle 404 Fehlerseite sollte sich immer an dem Design der Webseite orientieren und mindestens den Link zur Startseite enthalten. Auch eine schnelle Kontaktmöglichkeit zum Webmaster kann enthalten sein. Hier kann der Webmaster eine kleine Bitte an den Besucher formulieren, dass dieser sich kurz melden möchte, wenn er nicht durch eine selbst eingetippte URL auf die Fehlerseite gekommen ist, sondern durch eine defekten Link der Webseite (böser Fehler).

Hier mal ein Link zu einer professionellen 404 Fehlerseite.

Damit die 404 Fehlerseite aber auch angezeigt wird, muß dem Wevserver dies auch mitgeteilt werden. Dies geht z.B. bei Apache Webservern durch einen kleinen Eintrag in die .htaccess Datei. Aber Achtung, hier muß unbedingt darauf geachtet werden, dass der Eintrag keinen Fehler enthält und so z.B. googles Webmaster-Tool meckert.

Richtig:
ErrorDocument  404  /404.htm

Falsch:
ErrorDocument  404  http://www.hp-profi.de/404.htm

Beide Lösungen werden vom Browser des Besuchers als Umleitung zur 404.htm erkannt, google akzeptiert aber nur Lösung 1. Die Fehlerseite muß übrigens nicht 404.htm heißen, sie können den Namen beliebig wählen. 404 als Name der 404 Fehlerseite zu verwenden bietet sich jedoch an.

Weitere Tipps zur 404 Fehlerseite:

In der Regel will man einen 404 Fehlerseite ja nicht in den Index von google oder anderen Suchmaschinen aufgenommen haben. Dazu muß folgendes MetaTag im HEAD vorhanden sein:

<meta name=“robots“ content=“noindex, follow“>

Statt nur einen Link zur Startseite aufzuführen, können Sie auch Links zu anderen Bereichen Ihrer Webseite anbieten. Bei großen Webseiten auf Kategorien, bei kleinen Webseiten können Sie auch gleich die komplette Navigation auf die 404 Fehlerseite aufnehmen. Die Seite sollte aber unbedingt als 404 Fehlerseite erkennbar bleiben.

Die 404 Fehlerseite bei google Analytics oder anderen Webseitenstatistiken aufzunehmen ist allerdings wiederum ok, sie wollen ja wissen, wie häufig die Seite aufgerufen wird und was wohl der Grund dafür sein könnte.