HTML Tabellen übersichtlich gestalten mit jQuery

hp-profi — Thu, 30 Apr 2009 09:16:37 +0000

Wie jeder weiss, sind derzeit 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 und deines Dokumentes einbinden.

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:

An dieser Stelle fügt dann das Javascript mittels DOM (Document Object Model) Manipulation dem HTML Element

Informationen hinzu.
In unserem Falle eine CSS Klasse dem Table Header ($(”table tr:first”).addClass(”head”);) und allen anderen geraden Zeilen(2,4,6,…) dieses hier: $(”table tr:even:not(.head)”).addClass(”odd”);

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

CSS Beispiele:
tr.odd td { background:#e4e4e4;} tr.head td { background:#666; color:#fff;}
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?

hp-profi — Thu, 30 Apr 2009 09:09:16 +0000

„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

Problem mit 404 Fehlerseiten? Die Lösung.

hp-profi — Sun, 09 Nov 2008 09:28:02 +0000

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:

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.

Firefox AddOn für Webmaster: HMTL Validator

hp-profi — Tue, 04 Nov 2008 06:21:08 +0000

Für Webmaster die die Qualität nicht nur Ihrer eigene Webseite checken wollen, bietet sich folgendes Tool an: Der HMTL Validator (basierend auf Tidy).

Mit diesem AddON erhält der Webmaster rechts unten in der Statusleiste des Browsers eine HTML-Check Anzeige mit der Information, wieviele html Fehler es nach w3c Standard es auf der gerade besuchten Seite gibt.

Die Meisten wird überraschen, wie wenig Seiten im Netz w3c conform sind. Allerdings wirken sich die allermeisten Fehler nicht auf die Darstellung der Webseite in jeden Browser aus. Wer trotzdem eine 100% Seite abliefern will, wird von dem PlugIn gleich gewarnt, wenn sich ein Fehler eingeschlichen hat. Natürlich kann man seine Webseite auch mit anderen Tools überprüfen. Mit dem AddON geschieht dies aber eben automatisch für alle Webseiten die man besucht.

Auch ist das ganz praktisch, wenn man zum Beispiel Eintragungen / Änderungen online (zB. in Wordpress) macht. Auch hier werden die eigenen oder auch fremden Fehler gleich angezeit. Wenn z.B. ein Blogger deines Blogs einen Blog-Eintrag mit HTML Code macht, dies aber verhuddelt, kann der Blogmaster eingreifen und die Fehler manuell korrigieren.

Das NoFollow Attribut in Hyperlinks

hp-profi — Wed, 29 Oct 2008 07:08:58 +0000

Das ursprünglich sinnvolle NoFollow Attribut eines Hyperlinks wurde 2005 von google eingeführt und wird von den anderen großen Suchmaschinen (z.B. Yahoo, MSN / Windows live) ebenfalls unterstützt.

Es sollte unter Anderem dazu dienen, Spam (zum Beispiel in einem Weblog) zu vermeiden. Da SEO-Spammer versuchen, durch häufige Platzierung von Links auf die von ihnen betriebenen Webseiten ihre Linkpopularität und ihren PageRank-Wert zu steigern. Das ist von dem Weblog Betreiber natürlich nicht erwünscht, da diese Kommentare in der Regel keinen sinnvollen Inhalt haben. Also kann man seinen Weblog z.B. so ausstatten, dass Kommentare austomatisch ein rel=”nofollow”-Attribut bekommen und damit die Seite für SEO-Spammer wertlos wird, da die so markierten Links sind aus Sicht der Suchmaschinen praktisch unsichtbar sind. Blogsysteme wie WordPress bieten hierzu direkt PlugIns an. Es gibt aber auch Plugins die die SEP Spamaktivitäten bestimmter Seiten erkennen und diese erst gar nicht zulassen. Noch besser als ein sinnloser Kommentar mit NoFollow Attribut ist gar kein Spam-Kommentar.

Man kann mit dem Attribut allerdings auch die PageRank Verteilung der eigenen Unterseiten steuern. Wenn man z.B. keinen PageRank Linkpower an das Impressum verlieren will, so stattet man den Link zum Impressum ebenfalls mit dem NoFollow Attribut aus. Auch die externen Links zu Social Bookmark Diensten wie Mister Wong oder delicious sollte man mit einem NoFollow Attribut austatten, da man seine PageRank-Kraft lieber für die eigenen Seiten verwendet sollte und diese Dienste ebenfalls alle Links zu Dir mit einem NoFollow austatten.

Wenn du einem Link mit einen NoFollow Attribut austatten willst, dann funktioniert das so:

rel=”nofollow”>google

CSS w3c conform

hp-profi — Thu, 23 Oct 2008 04:10:51 +0000

Wer Wert auf w3c konforme CSS legt, kann seine Stylesheets einfach online checken lassen.

w3c bietet die Möglichkeit eine bereits online gestellte Datei zu prüfen, eine CSS Datei hochzuladen oder die Codes einzugeben und zu prüfen. Das funktioniert auch mit HTML Dateien, die diese CSS Codes enthalten.

http://jigsaw.w3.org/css-validator/

Möglichkeiten in CSS

hp-profi — Thu, 23 Oct 2008 04:00:00 +0000

Die Formatierungssprache CSS (Cascading Style Sheets) bietet deutlich Möglichkeiten mehr als den meisten bekannt ist. Richtig kombiniert kann man mit “Angaben zu Farben und Schriften, Positionierung von Elemente und festlegen von Hintergrundbildern” Dinge realisieren, die man sonst eigentlich eher bei Javascript Lösungen sucht.

Eine wirklich exzellente Übersicht der Möglichkeiten bietet die Webseite http://www.cssplay.co.uk (mit dem schönen Titel: “Experiments with Cascading Style Sheets”).

Die Seite zeigt an Beispielen wie man einfache und aufwendige Menüs, Fotogalerien, Scrollboxen und ganze Seitenlayouts realisiert. Auf die Unterschiede der Darstellung verschiedener Browser wird dabei explizit eingegangen und Lösungsvorschläge angezeigt.

Dabei darf man sich als Laie diese Beispiele im Sourcecode ansehen und diesen unter Angabe des Programmierers auch für eigene Projekte verwenden. Gewerbliche Nutzung ist in der Regel mit einer Anfrage beim Programmierer verbunden. Der legt dann fest ob und zu welchem Preis (oder Link) man den Code auch in professionellen Homepageprojekten verwenden darf.

Wer sich die Möglichkeiten von CSS erkennen will, sollte sich alle Demos / Vorschläge in Ruhe anschauen.

Flash w3c conform

hp-profi — Sat, 18 Oct 2008 20:02:03 +0000

Wer kennt das Problem nicht. Auf einer Webseite wird ein kleines Flash eingebunden, und schon meckert der hmtl Checker jede Menge Fehler an. Das Problem sind die alten unterschiedlichen Interpretationen von Netscape und dem Internet Explorer.

Jetzt könnte man meinen, was interessiert mich der alte Netscape. Aber auch die modernen Browser wie FireFox, googles neuer Browser Chrome und Apple Safari haben diese Interpretation von Netscape übernommen.

Während Microsoft mit dem Flash als “Object” gut zurecht kommt, verlangt die Netscape ”scheinbar” das “embed” tag. Und damit das Flash in allen Browsern angezeigt wird, hat Adobe dem Code zum Aufruf des Flash gleich beide Methoden verpaßt. Und gleich noch ein paar Zusatzzeilen beigefügt, damit der Flashplayer auch immer schön auf dem neuesten Stand bleibt und ein Update bei Adobe durchgeführt wird.

Es gibt eine mittlerweile weit vereitete und anerkannte Lösung um das Problem zu umgehen. Wie das funktioniert und was der Programmierer beachten muß, findet man hier:

http://www.alistapart.com/stories/flashsatay

Der Text ist in englisch und auch nicht einfach zu verstehen (wenn man Laie ist). Aber es ist eben DIE Möglichkeit Flash auf Firefox und Internet Explorer ans Laufen zu bekommen und trotzdem mit der Webseite weiter W3C conform zu sein.

blog.hp-profi.de » Programmierung