Dabei handelt es sich um ein JavaScript, das standardmäßig auch die komplette IP-Adresse der Besucher an Google übermittelt.

Mindestens ein Gericht und die obersten Datenschützer sind der Auffassung, dass es sich bei IP-Adressen um personenbezogene Daten handelt, die nicht ohne Erlaubnis des Betroffenen erhoben und gespeichert werden dürfen.

Google hat inzwischen darauf insoweit reagiert, dass

• Webseitenbetreiber, den JavaScript-Code von Google Analytics so abändern können (Anonymisierung der IP), dass er nur noch einen Teil der IP-Adresse übermittelt (IP-Verkürzung), und
• Nutzer der Browser Internet Explorer (7 und 8), Google Chrome (4.x und höher) und Mozilla Firefox (3.5 und höher) das Deaktivierungs-Add-on für Browser von Google Analytics (BETA) installieren können, welches die Übermittlung der eigenen Daten von Google Analytics an Google unterbindet.

Mit jedem Browser kannst Du verhindern, dass Du als Besucher auf Webseiten mit Google Analytics erfasst wirst, indem Du in dem Browser JavaScript deaktivierst (Anleitung für Firefox, Internet Explorer und Opera). Das ist allerdings nur ein bedingt geeigneter Weg, da viele Webdienste aktiviertes JavaScript für deren Nutzung zwingend voraussetzen.

Als Nutzer des Browsers Firefox gibt es aber noch eine weitere, einfache Möglichkeiten Google Analytics zu blockieren, die ich Dir hier kurz vorstellen möchte. Sie hat zudem den Vorteil, dass sie nicht von Google ist.

Für den Firefox ist – wie bereits beim Blockieren von Facebook (siehe hierzu meinen Blogbeitrag mit dem Titel “Facebook blockieren“) – auch diese Lösung mit Adblock Plus realisiert (Quelle: Webseite “Wie schütze ich meine Nutzungsdaten vor Google Analytics?” des Unabhängigen Landeszentrums für Datenschutz Schleswig-Holstein). Machen wir uns ans Werk!

• Als erstes brauchst Du das Firefox-Addon Adblock Plus, sofern Du es nicht bereits installiert hast.
• Nach der Installation und dem Neustart des Browsers besuche die Subdomain EasyList von Adblockplus.org und ergänze Adblock Plus um die Filterlisten EasyList und EasyPrivacy durch Klick auf den Link “Add to ABP“.
• Das war es schon!

Für die Browser Google Chrome und Safari trage ich dagegen manuell in die Blacklist von Adblock Folgendes ein (Quelle: “Update meiner Adblock Plus Filterliste” auf mitternachtshacking.de):

.google-analytics.com/* (Google Analytics)
*/__utm.js
*/__utm.gif?*
*/urchin.js
*/ga.js
*/__ga.js
||ajax.googleapis.com/ajax/libs/jquery/*
||ajax.googleapis.com/ajax/libs/jqueryui/*

Solltest Du Betreiber einer dynamischen Website sein, kannst Du übrigens statt auf Google Analytics auch auf selbstgehostete und kostenlose Webanalyse-Tools zurückgreifen. Ich persönlich nutze chCounter. Eine beliebte Alternative ist auch Piwik.

Kommentare

• 9. August 2010, Gerald Brozek (hyperkontext) schreibt: Dieter, es gibt noch eine einfache Möglichkeit: Das No-Scipt Addon für Firefox. http://noscript.net/ Selbst wenn ich alle JS-Scripts weiter per Default zulassen würde, kann ich per Mausklick einfach angeben, das Analytics-JS generell nicht zu laden. Nur zur Vollständigkeit.
• 9. August 2010, Dieter schreibt: @Gerald Ich hatte NoScript ausprobiert und fand das standardmäßige Blockieren aller JavaScripts nervig. Das wollte ich meinen Lesern nicht empfehlen. Ich finde den Ansatz bei Adblock Plus besser, bei dem Du ganz gezielt bestimmte JavaScripts blocken kannst. Für bestimmte Bereiche mittels Listen, die man abonnieren kann und regelmäßig aktualisiert werden und konkret im Einzelfall mit einer selbst festgelegten Filterregel. Gleichwohl hast Du völlig Recht, dass zur Vollständigkeit für den Firefox auch noch NoScript genannt werden sollte. Danke dafür!
• 26. August 2010, Stefan M. schreibt: Ich nutze Adblock Plus inkl. EasyFilter schon länger, aber auch NoScript. Es ist einfach für die immer wieder besuchten Webseiten eine Ausnahme unter NoScript einzurichten und die Restlichen darf er gerne blockieren.
• 26. August 2010, Dieter schreibt: @Stefan Das Lästige ist, dass ich bei meinen Streifzügen durch das Web mit Noscript viele Ausnahmen festlegen müsste. Das wäre mir zu lästig. Unter Sicherheitsaspekten ist Dein Vorgehen definitiv besser.
• 27. August 2010, Stefan M. schreibt: Wenn man das Plugin installiert ist alles blokiert. Voraus eingestellte vertrauenswürdige JS Ausnahmen hat es nicht. Das ist so und doof. Nach 2-3 Wochen hat sich das aber eingependelt und man gewöhnt sich daran. Bei CookieSafe ist genau das Gleiche. Geht man mal auf eine neue Page und braucht das Zeugs, heisst es zuerst KlickWahn zum freischalten.
• 27. August 2010, Dieter schreibt: @Stefan Danke für den ergänzenden Hinweis auf das Firefox Addon CookieSafe. Dieses und das Firefox Addon Google Monster hatte ich bisher nicht ausprobiert. Damit kann ich aber beispielsweise als Ausgangsbasis lediglich Cookies von Drittseiten standardmäßig unterbinden. Müsste sich dann nicht der Klickwahn in Grenzen halten und das Sicherheitsniveau trotzdem etwas gesteigert werden? Ich werde es mal ausprobieren. Nachtrag vom 29.11.2011: Das Firefox Addon wurde vom Autor aus dem Addon-Verzeichnis entfernt.
• 8. September 2011, Google +1 blockieren | Webseiten-Infos.de schreibt: [...] Analytics und Facebook blockieren solltest und wie es geht (siehe hierzu meine Blogbeiträge “Google Analytics blockieren” und “Facebook [...]

Ähnliche Beiträge

• Google +1 blockieren
• Video: Willkommen bei Facebook
• Basisnavigation: Reihenfolge der Links
• Facebook blockieren
• Google Webmaster Zentrale Blog

Permalink | 7 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Adblock, Adblock Plus, Firefox, Firefox-Addon, Google Analytics, Google Chrome, IP-Adresse, JavaScript, Safari

Erschreckend finde ich, dass viele WordPress-Plugins für einen solchen Retweet-Button keinen validen Code erzeugen.

So störte mich beispielsweise an dem beliebten WordPress-Plugin TweetMeme, dass der Button mit einem iFrame erzeugt wird. Da ich hier als Doctype XHTML 1.0 Strict einsetze, kam das Plugin schon mal überhaupt nicht in Betracht. Aber auch der JavaScript-Code von TweetMeme zum manuellen Einbau in eine Webseite erzeugt einen iFrame. Da kann ein Button für mich noch so toll (trendy) aussehen, das ist für mich ein absoluter Ausschlussgrund (No Go).

Auch versuchte ich mich an dem Tutorial “ReTweet-Button als Traffic-Quelle – Fehlerfreier valider Ansatz“, das auf dem englischsprachigen Tutorial “Easy Retweet Button” von John Resig und seinem zugehörigen JavaScript basiert. Das funktionierte in meinem Testblog zwar grundsätzlich, aber ich hatte folgende Probleme damit:

• Ich konnte es nicht optimal positionieren und
• bei deaktiviertem JavaScript kam es zu unschönen Darstellungsproblemen.

Viel versprechend sah dagegen das WordPress-Plugin Topsy Retweet Button aus. Darauf war ich durch die Blogbeiträge “Topsy Button versus Tweetmeme Button” von Ann Smarty (englischsprachig) und “Twitter mit dem eigenen Blog verknüpfen – Topsy oder Tweetmeme” sowie “Retweet Buttons in WordPress: Der Tweetmeme Button ist wieder zurück” von Thomas Homberger aufmerksam geworden.

Der damit erstellte Code war valide. Ich vermisste lediglich die Möglichkeiten den Button in der rechten Spalte (Sidebar) positionieren zu können. Erfreulicherweise gibt es wie bei TweetMeme auch von Topsy eine Anleitung für den manuellen Einbau des Retweet-Buttons auf einer Website. Ergänzend zu dieser englischsprachigen Anleitung “Topsy Retweet Button for Web Sites” hier die Code-Schnippsel, die ich auf Webseiten-Infos.de eingebaut habe:

1. Da ich den Retweet-Button nur bei den Blogbeiträgen (single.php) angezeigt haben will, brauche ich auch nur dort den Code. Deshalb setze ich den entsprechenden Conditional Tag von WordPress im Kopfbereich, d.h. zwischen head und /head ein:

   1 2 3

   <?php if(is_single()){?> <script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script> <?php } ?>

2. Den Code zur Platzierung des Retweet-Buttons platzierte ich an der von mir gewünschten Stelle in der rechten Spalte (Sidebar). Damit es auch bei einer kleinen Bildschirmdarstellung von 800 Pixel (px) keine Platzprobleme gibt, habe ich den Container (div) mit dem JavaScript-Code unterhalb des Twitter-Vögelchens eingefügt. Anschließend verschob ich den Retweet-Button mit einem negativen margin-top nach oben. Solltest Du die Sidebar (sidebar.php) nicht nur für die Blogbeiträge (single.php) verwenden, dann empfehle ich Dir auch hier den oben angeführten Conditional Tag einzusetzen. Damit es zu keinem Validierungsfehler kommt, beendete ich die oberhalb noch offene Liste (/ul) und unterhalb öffnete ich wieder eine Liste (ul). Der bei mir eingesetzte Code sieht wie folgt aus:

   1 2 3

   <div class="topsy_widget_data transparenz" title="Webseite bei Twitter empfehlen (Retweet)"> <script type="text/javascript">topsyWidgetPreload({ "url": "<?php the_permalink() ?>", "title": "<?php the_title(); ?>", "theme": "jade", "nick": "WebseitenInfos" }); topsy_tweet_text = "Tweet"; topsy_retweet_text ="Retweet"; topsy_style = "big"; topsy_streaming = "on"; </script> </div>

3. Dem aufmerksamen Leser dürften folgende Änderungen gegenüber dem Originalskript von Topsy auffallen:
   1. Die zusätzliche CSS-Klasse transparenz. Sie verhindert, dass die grüne Hintergrundfarbe bei Links erscheint, wenn Du mit dem Mauszeiger über dem Retweet-Button bist.
   2. Die Ergänzung des Containers (div) um das title-Attribut. Dadurch wird die Kurzinfo (der Tooltip) “Webseite bei Twitter empfehlen (Retweet)” angezeigt, wenn Du mit dem Mauszeiger über dem Retweet-Button bist.
   3. Die Ergänzung des JavaScript-Codes um folgende Variablen: topsy_tweet_text = “Tweet”; topsy_retweet_text = “Retweet“; topsy_style = “big”; topsy_streaming = “on”;. topsy_tweet_text = “Tweet” sollte den Text Tweet im Retweet-Button mit einem großen T schreiben. Tut es aber nicht. Warum weiß ich leider nicht. Vielleicht hat je einer der Leser hier eine Antwort oder gar Lösung dafür. topsy_retweet_text = “Retweet” soll dafür sorgen, dass der Anfangsbuchstabe R im Retweet groß geschrieben wird und das funktioniert. topsy_style = “big” sorgt dafür, dass der große Retweet-Button angezeigt wird. Und topsy_streaming = “on” soll für ein automatisches Aktualisieren der Retweet-Zahl sorgen, wenn sich diese erhöht.
4. Kommen wir zum entfernten Inline-CSS. Das habe ich abgewandelt und in die CSS-Datei des von mir hier eingesetzten WordPress-Theme YAML Green integriert. Dort steht jetzt bei mir am Ende zusätzlich:

   1 2 3 4

   .topsy_widget_data { float: right; margin-top: -6.2em; }

Ergänzend noch folgende Hinweise:

• Das manuelle Topsy-Javascript ist gegenüber dem Code für das WordPress-Plugin bereits aktualisiert und verbessert worden.
• Das manuelle Javascript wird von einem Topsy-Server bereit gestellt. Insoweit besteht eine Abhängigkeit von einem externen Server.
• Allerdings scheint sich die Webseite auch bei Störungen oder Verzögerungen des Topsy-Servers ohne Probleme aufzubauen. Lediglich die Anzahl der Retweets verzögert sich dann oder fehlt ganz.
• Im Gegensatz zu den Lösungen von TweetMeme und John Resig benötigst Du hier keine Anmeldung bei einem anderen Webdienst (TweetMeme, bit.ly etc), damit die Retweets gezählt werden.

Sollten noch Fragen zu diesem manuellen Einbau des Retweet-Buttons bestehen, versuche ich diese gerne zu beantworten.

Nutze einfach die Kommentarfunktion.

Kommentare

• 7. Juni 2010, Fritz schreibt: und wo isser nu (der Button)?
• 7. Juni 2010, Dieter schreibt: @Fritz Bei mir (PC als auch Smartphone) erscheint der Retweet-Button rechts neben dem blauen Twitter-Vögelchen in der rechten Spalte (Sidebar). Bei Dir nicht? Dann solltest Du mal JavaScript zulassen. :lachtot:
• 18. Juni 2010, Kimi schreibt: Sehr interessanter Artikel, ich werde es probieren, danke :) Aber nicht heute, morgen komme ich wieder :)
• 18. Juni 2010, Dieter schreibt: @Kimi Zum Ausprobieren verwende ich inzwischen immer meine Testinstallation. Dadurch kann ich in Ruhe alles Einbauen. Wenn es dann klappt übernehme ich es für die im Betrieb befindliche WordPress-Installation. Freue mich, wenn Du wieder kommst. ;-)
• 19. Juni 2010, Kimi schreibt: Ja, ich probiere auch immer alles lokal im WordPress Blog aus :)
• 19. Juni 2010, Dieter schreibt: @Kimi Ich habe inzwischen lokal und auf dem Webspace ein Testblog. Grund: Manche WordPress-Plugins funktionieren lokal nicht und um die Kompatibilität mit einer neuen WordPress-Version testen zu können, muss ich das dann auf dem Webspace machen.
• 20. Juni 2010, Kimi schreibt: @Dieter, ich hab das gemerkt wegen der robots.txt. Ich probiere lokal und auch WordPress im Free Webhosting.

Ähnliche Beiträge

• Google +1 blockieren
• Valide Videos in Webseite einbinden
• Suchen statt Finden!
• Facebook blockieren
• Das neue Logo ist da!

Permalink | 7 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: JavaScript, Retweet, Retweet-Button, Topsy, TweetMeme, Twitter, Valider Code, WordPress, WordPress-Plugin

Heutzutage können moderne Browser so etwas mit Hilfe der CSS3-Eigenschaft Transition darstellen.

Hierauf bin ich über den Artikel “Sexy Interactions with CSS Transitions” auf carsonified.com gestoßen (CSS-Datei für die Beispiele). Dort werden vier verschiedene Beispiele vorgeführt. Hier auf der Website Webseiten-Infos.de habe ich gleich mal die Beispiele 1 und 3 eingebaut.

Moderner Browser heißt in diesem Fall:

• Safari Version 3.1.2 oder höher
• Google Chrome
• Opera Version 10.5 oder höher
• Firefox 3.7 alpha oder höher (also aktuell leider noch keine finale Version)

Beispiel 1 (Wechsel der Hintergrundfarbe) habe ich bei mir nicht mit Zitat-Boxen, sondern Eingabefeldern, sprich den Formularfeldern input[type=text] und textarea des Kontaktformulars sowie des Kommentarformulars realisiert. Der CSS-Code dafür in meiner CSS-Datei sieht auszugsweise wie folgt aus:

Dem aufmerksamen Beobachter wird auffallen, dass auch der in meinem Blogbeitrag “Aktive Eingabefelder visuell hervorheben” beschriebene breitere Rand von dem fließenden Übergang betroffen ist. Ein netter Nebeneffekt.

Beim Beispiel 3 (Wechsel der Vorder- und Hintergrundfarbe bei Links) habe ich den CSS-Code mit dem Präfix -o für den Opera herausgenommen. Grund: Der Farbwechsel von weiß nach grün sah dort unschön aus, weil dazwischen kurz rot aufflackerte. Zudem sprang dann die horizontale Navigation, wenn die Maus darüber war (Hover-Effekt). Der CSS-Code dafür sieht in meiner CSS-Datei auszugsweise wie folgt aus:

Richtig interessant wird diese CSS-Eigenschaft Transition, wenn sie auch von der finalen Version des Firefox und dem Internet Explorer (IE) unterstützt wird und die Unterstützung vom Opera auch bei transition-duration ohne Aufflackern funktioniert.

CSS3 ist die Zukunft.

Wie findest Du diese Spielerei?

Völlig überflüssig oder wie ich als Start in eine einfachere Zukunft für die Gestaltung von Webseiten?

Kommentare

• 16. Mai 2010, Tweets die Fließende Farbübergänge mit CSS3 | Webseiten-Infos.de erwähnt -- Topsy.com schreibt: [...] Dieser Eintrag wurde auf Twitter von Dieter Welzel erwähnt. Dieter Welzel sagte: Fließende Farbübergänge mit CSS3 http://tinyurl.com/365ua4e [...]

Ähnliche Beiträge

• CSS3-Adventskalender
• Runde Navigationselemente ohne Grafiken
• Runde Ecken für Google Chrome 4
• Browser Opera 10 ist veröffentlicht
• Opera 10.5 mit runden Ecken und Schatteneffekt

Permalink | Ein Kommentar | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Browser, CSS3, Hintergrundfarbe, JavaScript, moderne Browser, transition, Webdesign, Webseite, Website

Da ich damals die Funktion mit einer if-Abfrage in die Template-Datei comments.php eingebunden hatte, gab es beim Deaktivieren des Plugins keine Probleme.

Aber warum habe ich diese Funktion deaktiviert?

Drei Gründe:

1. Die Vorschau flackerte bei viel Text und es war dann nur noch schwer möglich den Mauszeiger (Cursor) an das Ende des Kommentarfeldes zu setzen.
2. Die Kommentarvorschau ist zwar nett (nice to have), aber keine zwingend erforderliche Funktionalität. Die Implementierung der Kommentarvorschau führte nicht zu einer auffälligen Änderung bei der Anzahl oder Qualität der Kommentare auf Webseiten-Infos.de.
3. Gewichtiger und ausschlaggebend war für mich aber, dass das Plugin die Ladezeit der Webseiten mit Kommentarfeld um über eine halbe Sekunde verlängerte. Ursächlich hierfür war das zusätzlich zu ladende JavaScript. Das stellte ich mit dem Addon Firebug für den Browser Firefox fest. Ich hatte zwar im JavaScript die Kommentare und überflüssigen Leerzeichen entfernt, aber die Ladezeit verkürzte sich dadurch leider nicht nennenswert.

Wie auch immer, nun ist die Kommentarfunktion wieder weg und Webseiten-Infos.de ist noch besser für einen möglichen Bonus bei den Suchergebnissen mit der neuen Google Caffeine Suchmaschine gerüstet.

Mag sein, dass ich den Eindruck eines Geschwindigkeitssüchtigen vermittle, aber Geschwindigkeit zählt (speed matters). Dies zeigt auch die Einführung von Website-Leistung unter Google Labs in den Google Webmaster Tools (siehe hierzu auch die Blogbeiträge “Wie schnell ist meine Site?” und “Anzeige der Website-Performance in den Webmaster-Tools” bei der Google Webmaster-Zentrale).

Findest Du auch das Geschwindigkeit (so) wichtig ist?

Was tust Du, damit Deine Webseiten schneller laden?

Kommentare

• 18. Dezember 2009, Micha schreibt: Kurze Ladezeiten sind schon wichtig. Ich habe grade heute das Redesign von wpengineer.com hochgeladen. Dabei habe ich HTML Markup reduziert, CCS Bilder zu sinnvollen Sprite-Gruppen zusammengefasst. Natürlich läuft dort mein Stylesheetkompressor, der 4 CSS Dateien mit 35k zu einer mit 21k macht. Leider wirken sich die Avatare und auch die Buysellads negativ aus, aber ein ganz nacktiges Blog wollte ich nicht haben und 300$ im Monat sind mir doch etwas wichtiger als die Ladezeit ;) .
• 19. Dezember 2009, Dieter schreibt: Lieber Micha, das Redesign von wpengineer.com gefällt mir gut. Der Wiedererkennungswert ist erhalten geblieben. Zudem habe ich den Eindruck, dass die Seiten nun noch übersichtlicher geworden sind. Irritiert hat mich allerdings, dass das Logo nicht (mehr?) mit der Startseite verlinkt ist. Ist für mich ein Quasi-Standard, den ich gewohnt bin. Hast Du den Whitespace-Anteil (leicht) erhöht und/oder das Design simplified? Deine Maßnahmen zur Geschwindigkeitsoptimierung sind erkennbar erfolgreich (laut Firebug braucht die Startseite bei mir mit DSL 6000 nur rd. 1,5 Sekunden und laut websiteoptimization.com gibt es nur 12 HTTP-Requests). Aus meiner Sicht hast Du schon fast alle wesentlichen Optimierungsmaßnahmen für die Ladezeit von WordPress-basierte Websites im Einsatz. Trotz Avatare (Gravatare) und Buysellads lädt die Startseite von wpengineer.com erfreulich schnell. Eine WordPress-spezifische Beschleunigungsempfehlung wird es noch in einem meiner nächsten Blogbeiträge geben. Soviel sei schon mal verraten: Sie zielt auf die Reduzierung der Wartezeit für die Antwort des Servers (response time). Da besteht nach meiner Einschätzung voraussichtlich noch eine Optimierungsmöglichkeit für wpengineer.com (derzeit rd. 0,8 Sekunden). Auf Deinen Stylesheet-Kompressor, der ja in Deinem Premium-Theme zu Ehren kommen soll, bin ich genauso wie auf das Premium-Theme selbst schon sehr gespannt. Beste Grüße Dieter
• 19. Dezember 2009, Micha schreibt: Ja, das Logo :) Ich wollte das Logo als Image loswerden, damit bei abgeschalteten Stylesheets die Grafik nicht zu sehen ist. Der Whitespace-Anteil wurde erhöht, vorher war es ein bischen eng, vor allem in der Sidebar. Die Kommentare muß ich noch mal überarbeiten. Irgendwie gefällt mir das noch nicht so richtig...
• 19. Dezember 2009, Dieter schreibt: Das Logo als Hintergrund-Grafik? Dann klappt das Verlinken natürlich nicht mehr. Andererseits wird man Grafiken, auch Hintergrund-Grafiken, doch mit Grafiken ausblenden / nicht laden los. :confused: Ich hatte anfangs auf Webseiten-Infos.de sogar mal das Logo entfernt gehabt (siehe meine Blogbeiträge "Wo ist das Logo?" und "Das neue Logo ist da!"). Ute hatte mich dann aber davon überzeugt, doch wieder ein Logo einzubauen. Ja, Whitespace (Typografischer Weißraum, Leerraum) ist wohl ein, wenn nicht das mächtigste Mittel zur Gestaltung einer Website. Richtig dosiert profitiert davon jede Webseite. In der Sidebar von wpengineer.com würde ich mal mit einem noch leicht größeren vertikalen Abstand zwischen den Listenpunkten experimentieren und den Abstand von Zeilen bei mehrzeiligen Listenpunkten testweise leicht verringern. Ich muss zu meiner Schande eingestehen, dass ich auf die Schnelle mit Firebug keine entsprechenden CSS-Anweisungen gezaubert bekommen habe.
• 19. Dezember 2009, Micha schreibt: So Dieter, jetzt kannst du wieder wie gewohnt auf die Grafik klicken um zur Homepage zu gelangen. Ich wollte sie nicht loswerden im Sinne von nicht mehr laden. Ich wollte sie nur als Hintergrundbild um sie im print und bei abgeschalteten Stylesheets nicht mehr angezeigt haben.
• 19. Dezember 2009, Dieter schreibt: Micha: Danke! :-D So ist es für mich wieder vertraut. Der Mensch ist halt ein Gewohnheitstier. ;-) Ausblenden für das Drucken per CSS geht doch aber auch mit normalen Grafiken. Ist hier auf Webseiten-Infos.de im Stylesheet mit @media print {#header img {display: none}} realisiert. Nicht mehr Anzeigen bei abgeschalteten Stylesheets funktioniert allerdings wirklich nur mit Hintergrund-Grafiken. Wie hast Du denn das Logo als Hintergrund-Grafik anklickbar gemacht?
• 19. Dezember 2009, Micha schreibt: Nur ein Anker um den leeren Span, der die Hintergrundgrafik hält.
• 19. Dezember 2009, Dieter schreibt: Wow, den Kniff kannte ich noch nicht! Danke für die Erläuterung!
• 4. März 2010, Ulf. Mehr oder minder täglich Privatkram. schreibt: Ich HASSE diese idiotische Linkvorschau bei WordPress!... Hasst Ihr sie auch so sehr, diese aufpoppenden Vorschaufensterchen für Links, die den eigentlichen Text verdecken und schlecht lesbar machen? Meint Ihr auch, dieser Mist gehört abgeschafft? Wozu soll......

Ähnliche Beiträge

• Kommentarvorschau auf Webseiten-Infos.de
• Neues Fenster für alle Seiten?
• Update auf Firefox 3.6.3 empfohlen!
• Mail-Abos für Kommentare sind weg!
• Firefox 3.5 steht zum Download bereit

Permalink | 9 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: comments.php, Google Webmaster Tools, JavaScript, Kommentarfunktion, Kommentarvorschau, Ladezeit, Live Comment Preview, PHP, Plugins, Webseiten, WordPress

Möglich macht dies das JavaScript sorttable. Aufmerksam darauf bin ich über den Blogbeitrag “HTML-Tabellen erstellen und verwalten” von Thomas Scholz aka toscho geworden. Danke dafür!

Wie funktioniert das Ganze?

Hier die einfache Einbauanleitung in drei Schritten:

1. Lade das JavaScript sorttable.js herunter und in das Verzeichnis auf Deinen Webspace, wo sich die Webseite befindet.
2. Füge das JavaScript in Deine Webseite(n) ein, etwa indem Du folgenden Link in den Kopf (Header) einträgst:

   1	<script src="sorttable.js" type="text/javascript"></script>

3. Kennzeichne Deine Tabelle als sortierbar, indem Du ihr die Klasse “sortable” zuweist:

   1	<table class="sortable">

Beachte bitte, dass das JavaScript sorttable (mit 2 T) heißt, aber die Klasse, welche der Tabelle hinzugefügt werden muss, sortable (mit 1 T).

Das war es schon.

Wundere Dich nicht, wenn Du im Quelltext (Quältext) von Webseiten-Infos.de keinen Hinweis auf die JavaScript-Datei mit dem Namen sorttable.js findest. Ich habe um die Zahl der HTTP-Anfragen (HTTP-Requests) klein zu halten, den Code des JavaScripts in die Datei script_quicktags-c-2009-11-09.js eingefügt.

Mittels Mausklick auf Überschriften kannst Du das Sortieren von Tabellendaten bisher bei folgenden Tabellen testen und sehen:

• Ladezeit von Webseiten-Infos.de (Tabellen 3, 5 und 6)
• Sicherheitslücken: Internet Explorer besonders gefährdet (Tabellen 1 und 2)

Das JavaScript scheint übrigens mit allen modernen Browsern zu funktionieren.

Wie findest Du diese Sortiermöglichkeit?

Kommentare

• 10. November 2009, Dejo schreibt: Cool, gleich mal ausprobieren!
• 10. November 2009, Dieter schreibt: Und am Besten bloggst Du auch darüber!

Ähnliche Beiträge

• Plugin für ToDo-Liste im Administrationsbereich
• Google PageRank-Update April 2009

Permalink | 2 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: JavaScript, Quelltext, sortieren, Tabelle, Überschrift, Webseite, Webseiten

In meinem Addon Web Developer für den Firefox kann ich den Webdienst WebSiteOptimization.com direkt – über das Menü Extras > Geschwindigkeitsreport anzeigen – für die geöffnete Seite im Browserfenster aufrufen.

Damit der Webdienst seine Arbeit verrichtet, sind noch Buchstaben und Zahlen als Spamschutz einzugeben. Danach fängt WebSiteOptimization an die Webseite zu analysieren und gibt das Ergebnis im Browserfenster aus.

Die Ergebnisse für die Startseite von Webseiten-Infos.de sind alle im grünen Bereich. Darauf bin ich stolz.

Grund: Ich nahm einige Optimierungen für die Ladegeschwindigkeit vor. Insbesondere

• habe ich die Größe der Grafikdateien (hauptsächlich mit smash.it) minimiert,
• setze ich CSS-Sprites ein,
• habe ich die JavaScripte zu einem Skript sowie die CSS-Dateien zu einer CSS-Datei sowie einer weiteren für den Internet Explorer bis einschließlich Version 7 zusammengefasst und
• komprimiere ich die Dateien mit GZIP.

Hier mal das gekürzte Ergebnis des Geschwindigkeitsberichts von Websiteoptimization.com für Webseiten-Infos.de (Stand: 9. September 2009).

Es handelt sich hierbei um meine freie Übersetzung aus dem Englischen.

Diagnose

* Hinweise (zur Tabelle 5: Downloadzeiten):

• Diese Zeiten zum Herunterladen (Downloadzeiten) für ISDN und T1 basieren auf einer vollen Bandbreite.
• Die Modemverbindungen (56Kbps oder weniger) sind um einen Paketverlustfaktor von 0,7 korrigiert.
• Alle Zeiten zum Herunterladen (Downloadzeiten) beinhalten eine Verzögerung von durchschnittlich 0,2 Sekunden je Objekt aufgrund von Wartezeiten für den Datenverkehr.
• Mit insgesamt 9 Objekten für diese Webseite summiert sich das zu einer Verzögerungszeit von 1,8 Sekunden auf.
• Nehme zur Kenntnis, dass diese Berechnung der Zeit zum Herunterladen (Downloadzeit) nicht die Verzögerung aufgrund von XHTML-Parsing und -Rendering berücksichtigt.

# Gratulation. Diese Website benutzt HTTP-Kompression, auch als GZIP bekannt. Die hier aufgeführten Dateigrößen in Bytes sind für die komprimierten Dateien, die vom Server an den Browser gesandt wurden.

* Alternative CSS-Dateien können in der (X)HTML-Datei verlinkt sein, werden aber derzeit nicht geladen. Sie sind deshalb nicht in die Gesamtgröße der Webseite einbezogen.

Analyse und Empfehlungen

• Gesamtzahl HTML – Gratulation, die Anzahl der HTML-Dateien auf dieser Webseite (einschließlich der zentralen HTML-Datei) ist 1. Die meisten Browser können Multithreading. Das Minimieren der HTTP-Anfragen ist der Schlüssel für die Websiteoptimierung.
• Gesamtzahl Objekte – Gratulation, die Gesamtzahl der Objekte auf dieser Webseite (einschließlich HTML) ist 9. Das können die meisten Browser in einer akzeptablen Zeit mit Multithreading verarbeiten. Das Minimieren der HTTP-Anfragen ist der Schlüssel zum Minimierung des Objekt-Overheads (siehe Schaubild (Figure) II-3: Relative distribution of latency components showing that object overhead dominates web page latency in Website Optimization Secrets für mehr Details wie der Objekt-Overhead die Wartezeit auf die Webseite beherrscht.
• Gesamtzahl Bilder – Gratulation, die Gesamtzahl der Bilder auf dieser Webseite ist 5. Die meisten Browser können mehrere Anfragen senden. Das kann die Anzeige von mehreren Bildern beschleunigen.
• Gesamtzahl CSS – Gratulation, die Gesamtzahl an externen CSS-Dateien auf dieser Webseite ist 2. Weil externe CSS-Dateien im Kopfbereich (HEAD) Deines (X)HTML-Dokuments stehen müssen, werden sie geladen bevor irgendein BODY-Inhalt angezeigt wird. Wenngleich sie gecached werden, verlangsamen CSS-Dateien das anfängliche Anzeigen Deiner Webseite. Erinnere Dich daran CSS-Dateien im HEAD und JavaScript-Dateien am Ende des BODY zu platzieren, damit eine schnelle Anzeige erfolgt.
• Gesamtgröße – Gratulation, die Gesamtgröße dieser Webseite beträgt 30.638 Bytes. Diese Webseite sollte in 7,91 Sekunden mit einem 56Kbps Modem laden. Basierend auf dieser derzeitigen durchschnittlichen Größe und diesem Aufbau der Webseiten (average web page) sollte Deine Webseite in weniger als 20 Sekunden mit einem 56Kbps Modem laden und den Fortschritt beim Laden anzeigen. Idealerweise sollte Deine Seite in 3 bis 4 Sekunden mit einer Breitbandverbindung laden und das HTML in 8 bis 12 Sekunden mit einem Modem. Natürlich gibt es immer die Möglichkeit von weiteren Verbesserungen.
• Gesamtzahl Skripte – Gratulation, die Gesamtzahl der externe Skriptdateien auf dieser Seit ist 1. Externe Skripte werden weniger zuverlässig zwischengespeichert (gecached) als CSS-Dateien. Berücksichtige das beim Zusammenfassen von JavaScript-Dateien zu einer Datei um die Anzahl der HTTP-Anfragen zu minimieren (minimize HTTP requests) oder bette sie in Hochgeschwindigkeitsseiten ein. Das Platzieren externe JavaScript-Dateien am Fußende des BODY und CSS-Dateien in den Kopfbereich (HEAD) ermöglicht das schrittweise Anzeigen von XHTML-Webseiten.
• HTML Größe – Gratulation, die Gesamtgröße dieser (X)HTML-Datei beträgt 7.523 Bytes. Das ist weniger als 50 kB. In der Annahme, dass Du für Deine Bilder HEIGHT und WIDTH angegeben hast, erlaubt diese Größe das Anzeigen des Inhalts in weniger als 10 Sekunden. Das ist die durchschnittliche Zeit, die Besucher bereit sind auf die Anzeige einer Seite ohne Rückmeldung zu warten.
• Bildergröße – Gratulation, die Gesamtgröße der Bilder ist 11.233 Bytes. Das ist weniger als 50 kB. Selbst mit einer 50 kB großen Seite würde diese Webseite mit einer Verbindung mittels eines 56Kbps Modem in weniger als 20 Sekunden geladen. Idealerweise sollte jedes Bild weniger als 1.160 Bytes benötigen, so dass es einfach in ein TCP-IP Paket passt.
• Skriptgröße – Gratulation, die Gesamtgröße aller externer Skripte beträgt 4.295 Bytes. Das ist weniger als 8 kB.
• CSS Größe – Gratulation, die Gesamtgröße Deines externen CSS ist 7.587 Bytes. Das ist weniger als 8 kB.
• Multimedia Größe – Gratulation, die Gesamtgröße aller externer Multimedia-Datein ist 0 Bytes. Das ist weniger als 10 kB.

Zum Schluss noch vorsorglich folgende ergänzende Hinweise:

• Für die CSS- und JavaScript-Datei habe ich eine Versionierung eingeführt. Inzwischen sind neuere Versionen dieser beiden Dateien im Einsatz. Insbesondere die JavaScript-Datei ist durch das Hinzufügen eines weiteren JavaScripts sowie die Erweiterung eines bestehenden JavaScripts größer geworden. Gleichwohl sind weiterhin alle Ergebnisse im grünen Bereich.
• Ich habe die JavaScript-Datei nicht am Ende des BODY platziert, da diese dann nicht mehr funktioniert. Vielmehr habe ich nur darauf geachtet, dass zuerst die CSS-Datei(en) geladen werden.
• Zum Thema “Die Ladezeit verringern” habe ich einen längeren Artikel in Arbeit, auf den ich hier hinweisen werde, sobald er fertig und online ist.

Kommentare

• 29. November 2011, Performance-Messung mit GTmetrix | Webseiten-Infos.de schreibt: [...] hierzu meine Blogbeiträge “Ladezeit von Webseiten-Infos.de” und “Geschwindigkeitsmessung mit Pingdom [...]

Ähnliche Beiträge

• Externe Dienste in Webseiten vermeiden
• Tabellendaten sortieren
• Ladezeit als Google-Rankingfaktor
• Wo ist das Logo?
• Performance-Messung mit GTmetrix

Permalink | Ein Kommentar | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Bilder, CSS, CSS-Sprites, Geschwindigkeit, GZIP, JavaScript, Ladezeit, Webseiten, Webseitenoptimierung

Aber das ist noch nicht alles!

Zusätzlich schrieb er das JavaScript so, dass

1. die Checkbox mit der Frage “Fremde Seiten in neuem Fenster?” nicht erscheint, wenn der Besucher der Seite JavaScript deaktiviert hat, und
2. auch ein Anklicken des Textes zu einem Häckchen in der Checkbox führt.

Zu 1.: Tricky! Das Formular mit der Checkbox und Frage wird nun nicht mehr einfach nur als (X)HTML-Code, sondern als JavaScript-Code eingebunden. Kein JavaScript, kein Formular. So werden Besucher, bei deren Browser JavaScript deaktiviert ist oder deren Ausgabegerät (z.B. Screenreader) kein JavaScript unterstützt, erst gar nicht mit einer Funktion konfrontiert, die in der konkreten Situation nicht verfügbar ist.

Zu 2.: Dadurch, dass die Frage dem Formularelement label zugewiesen ist, funktioniert das Häckchen setzen oder entfernen auch über das Anklicken des Textes.

Tatsächlich konnte ich die Erweiterung des JavaScripts einfach mit Kopieren und Einfügen (Copy & Paste) des Codes aus dem Artikel von Fritz Weisshart realisieren.

Lediglich der Internet Explorer 6 (IE6) scheint mal wieder aus der Reihe zu tanzen. Er behält das Häckchen nicht. Dieser veraltete Browser verhält sich leider nicht standardkonform. Wieder ein Grund mehr, diesen Browser durch einen modernen Browser oder neuere Version des Internet Explorers zu ersetzen.

Ganz herzlichen Dank an Fritz Weisshart für den gelungenen Artikel mit Einbauanleitung.

Leider kann ich nicht an dem A-Tag´09 (Fachkonferenz “Barrierefreies Internet”) teilnehmen und seinen dortigen Vortrag “Böses Javascript – gutes Javascript” hören. Aber erfreulicherweise hat er dazu auf seiner Website den Artikel ““Böses” JavaScript – “Gutes” JavaScript?” freigeschaltet.

Kommentare

• 23. September 2009, Fritz schreibt: Hallo Dieter, freut mich, dass ich helfen konnte. Deine Aversion gegen den IE6 teile ich sehr wohl. Kann es sein, dass du ihm diesmal Unrecht tust? Er merkt sich das Häkchen nämlich sehr wohl. Zumindest solange du innerhalb des Blogs bleibst. Beim Wechsel zu Startseite & Co. klappt das hier leider nicht. Aber daran ist Der IE unschuldig. ;-)
• 23. September 2009, Fritz schreibt: Hallo Dieter, das obige Problem kannst eventuell per JavaScript lösen. Bitte ändere das Script, von dem das cookie gesetzt wird, wie folgt: document.cookie='extern=externoeffnen; path =/';
• 24. September 2009, Dieter schreibt: Hallo Fritz, da ich keine Originalinstallation des IE6 habe, verwende ich verschiedene Software-Pakete, die mehrere IE-Versionen zur Verfügung stellen (siehe hierzu den Blogbeitrag "Webdesign mit verschiedenen IE-Versionen testen"). Das Problem tritt weiterhin vollständig mit dem IE6 von Multiple IE auf. Nachdem ich Deinen Änderungsvorschlag befolgt habe, bin ich auf die Idee gekommen, die Funktionsfähigkeit des Skripts auch mit dem IE6 des IETesters und der Internet Explorer Collection zu testen. Dort klappt es wunderbar. Das Problem liegt anscheinend bei dem Software-Paket Multiple IE. Ich habe also in der Tat diesmal dem IE6 unrecht getan. :ups: Ganz herzlichen Dank für das Überprüfen und die Codekorrektur. :hurra: Ich streiche gleich den Absatz zum IE6 im Blogbeitrag.
• 2. Oktober 2009, SEOux Indianer schreibt: Hi, die Blog Startseite /blog/ ist komplett auf noindex und nofollow gestellt. Absicht?
• 2. Oktober 2009, Dieter schreibt: Hi SEOux Indianer, gut beobachtet. Und um Deine Frage zu beantworten: Ja, um doppelten Inhalt (double content) zu vermeiden. Die Seite /blog/ zeigt den neuesten Blogbeitrag als Archivseite, die allerdings schon den Volltext einschließlich Kommentarfeld anzeigt. Ein Mausklick auf den Titel des jeweiligen Blogbeitrags zeigt dann den (echten) Blogbeitrag ohne noindex und nofollow.
• 13. Oktober 2009, Thomas Scholz schreibt: Wie kommst du darauf, daß jemand, der einen Screenreader benutzt, auch Javascript abschaltet? Beides hat nichts miteinander zu tun. Der Screenreader liest einfach vor, was der Browser rendert. Sinnvoll ist diese Einstellung auch für sehende Nutzer nur dann, wenn du Links auf andere Webseiten auch irgendwie kennzeichnest. Sonst verringerst du die Vorhersagbarkeit ohne Not.
• 13. Oktober 2009, Dieter schreibt: @Thomas Weiß nicht mehr wie ich auf den unzutreffenden Gedanken gekommen bin, dass jemand, der einen Screenreader benutzt, kein JavaScript hat. Habe es gleichwohl mal mit dem Firefox Addon FireVox getestet und dann die entsprechende Textpassage gestrichen. Die Links im Text auf andere Webseiten sind im Text mit den Icons Erdkugel, W für Wikipedia bzw. einem pdf-Icon gekennzeichnet. Besuchte Links erhalten dagegen - unabhängig davon ob sie intern oder extern sind - einen Haken. Damit sind bereits besuchte Links leider nicht mehr eindeutig unterscheidbar. Damit habe ich für bereits besuchte Links, das von Dir beschriebene Problem der Vorhersagbarkeit. Das steht in Konflikt mit meiner Zielsetzung durch ein anderes Icon für besuchte Links diese nicht nur farblich von nicht besuchten Links für den Besucher unterscheidbar zu machen. Mal schauen, ob ich verschiedene Icons für besuchte Links von externen und internen Seiten verwenden kann oder sonst wie löse. Danke für Deine beiden berechtigten Hinweise. :) Dein Kommentar war wieder äußerst hilfreich. :freu2:
• 13. Oktober 2009, Thomas Scholz schreibt: Ich halte die Unterscheidung zwischen »externen« und »internen« Links generell für fragwürdig; deine Probleme beim Kennzeichnen unterstreichen das nur. In den Kommentaren beispielsweise, die ich beim Schreiben des letzten Beitrags vor Augen hatte, triffst du sie ja nicht. Für den Leser ist dieser Unterschied unwichtig: Er interessiert sich für den Inhalt, nicht für den Standort. Oh, und ich habe die Kuller nicht als Weltkugel identifiziert.
• 13. Oktober 2009, Dieter schreibt: @Thomas Die Unterscheidung interne und externe Links ist in der Tat fragwürdig. Sie resultiert aus der ebenfalls fragwürdigen Alternative Links in einem externen Fenster zu öffnen. Es ist aber nur ein Alternativangebot, das Gewohnheiten von Benutzern wie meiner Freundin berücksichtigt. Sie ist es gewohnt, dass sich externe Links in einem neuen Fenster öffnen. Wie das mit der Maus zu bewerkstelligen ist, hat sie genauso wie ich nicht parat. Standardmäßig sieht das für die Kennzeichnung von Links hier eingesetzte WordPress-Plugin Link Indication die Einbeziehung von Kommentaren übrigens vor. Ich habe diese Einstellung lediglich geändert, weil ich es nicht hinbekam die Kommentar-Permalinks etc davon auszunehmen. Da werde ich mich wohl noch einmal mit beschäftigen müssen. Auch wenn ich Deine Auffassung teile, dass der Leser sich für den Inhalt und nicht den Standort interessiert, so kann der Standort gleichwohl wichtig und bedeutend sein (vertrauenswürdig?). Die Weltkugel ist doch soooo schön. Wie konntest Du die nicht erkennen? :roll:
• 13. Oktober 2009, Fritz schreibt: @Dieter und @Thomas Ich halte die Unterscheidung zwischen »externen« und »internen« Links gar nicht für fragwürdig. Es gibt Leute, die interessieren sich sehr wohl dafür, ob ein Link auf eine dritte (fremde) Site führt, oder innerhalb der gerade besuchten Site bleibt. Mit neuem Fenster hat das erst mal nichts zu tun. Und wem das egal ist, der kann ja einfach das entsprechende Kennzeichen ignorieren - oder erst gar nicht nachfragen, was die schöne Weltkugel bedeutet. ;-)
• 13. Oktober 2009, Thomas Scholz schreibt: Ich habe jetzt eine Weile herumgesucht und auf Twitter nachgefragt, konnte aber keine einzige Studie dazu finden, ob die Leser sich für den Unterschied interessieren. Offenbar hält niemand die Frage für wichtig genug. Hinzu kommt, daß diese Unterscheidung oft gar nicht so genau zu treffen ist: Wenn ich von meinem Hauptblog zu meinem Operablog linke, dann ist dieser Link »interner« als der von meinem Githubprofil zu einem anderen. Im ersten Fall liegen nämlich die Texte und das Aussehen größtenteils in meiner Hand, im zweiten nicht. Wenn der Grad meiner Kontrolle nicht das Kriterium für die »Externalität« ist – welcher dann? Die Domain kann es nicht sein; das illustriert der zweite Fall. Und wenn ich schon an so einfachen Punkten ins Zweifeln gerate – wie will dann ein Leser, der weder meine Schlußfolgerungen kennt, noch zwingend die Bilder sieht, erraten, welcher Link »nach außen« führt und welcher nicht? Mein Verdacht: Diese Differenz existiert eigentlich nicht, und sie ist auch nicht der wirkliche Grund für die Kennzeichnung. Das eigentliche Motiv für die technische Implementation ist der Spieltrieb, das berühmte »weil es geht«. ;) Über die Weltkugel habe ich auch ein Weilchen nachgedacht. Ich erkenne eine Weltkugel an Afrika. Wenn der Kontinent deutlich zu sehen ist, dann vermute ich eine Weltkarte, sonst nicht. Zwar sind auch Weltkugeln möglich, auf denen Afrika nicht oder »verzerrt« zu sehen ist, aber die entsprechen eben nicht meiner Sehgewohnheit. Ich finde dieses Symbol auch ein bißchen … schräg. Ehe du mich darauf hingewiesen hast, wußte ich nicht, daß deine Website auf einem anderen Planeten gehostet wird. ;) Ein Pfeil in eine Box hinein und einer aus ihr heraus bildeten das, was du im Sinn hast, vermutlich besser ab. Zumindest solltest du das Symbol, für das du dich entscheidest, neben die Checkbox mit dem Text setzen, damit man sich das Raten erspart. Und da ich einmal im Pedantenmodus bin (ich hör gleich auf ;)): Was machen denn Besucher, die nicht den IE 6 benutzen? Die wollen sicher kein neues Fenster, sondern schlimmstenfalls einen neuen Tab. Dein Text behauptet aber, daß du diesen Wunsch nicht respektieren wirst. Daß du das nicht kannst, weiß der normale Leser ja nicht. Wo ist denn hier die Vorschau? Hm …
• 13. Oktober 2009, Dieter schreibt: @Fritz

  Ich halte die Unterscheidung zwischen »externen« und »internen« Links gar nicht für fragwürdig. Es gibt Leute, die interessieren sich sehr wohl dafür, ob ein Link auf eine dritte (fremde) Site führt, oder innerhalb der gerade besuchten Site bleibt.

  Mit dem Beispiel Vertrauenswürdigkeit am Ende meines Kommentars hatte ich das "fragwürdig" insoweit eingeschränkt. ;-)

  Und wem das egal ist, der kann ja einfach das entsprechende Kennzeichen ignorieren

  Das hatte ich mit dem Ausdruck "Alternativangebot" zum Ausdruck bringen wollen. Danke für die Klarstellung.

  – oder erst gar nicht nachfragen, was die schöne Weltkugel bedeutet. ;-)

  Anscheinend konnte Thomas die schöne Weltkugel nicht ohne Hinweis als solche ausmachen. Darüber hinaus teile ich seine Auffassung, dass für externe Links ein wegführender Pfeil besser wäre. Das Symbol dürfte dafür eher geläufig sein und sich damit als Quasi-Standard etablieren. Ich beabsichtige deshalb die schöne Weltkugel durch einen wegführenden Pfeil zu ersetzen.
• 13. Oktober 2009, Dieter schreibt: @Thomas Die Unterscheidung zwischen internen und externen Links ist zumindest technisch möglich und kann neben dem Seitenbetreiber auch Besucher interessieren. Bloß, weil es keine Studien darüber zu geben scheint, muss die unterschiedliche Kennzeichnung von internen und externen Links nicht überflüssig sein. So gibt es durchaus Nutzer, die es gewohnt sind und deshalb auch erwarten, dass sich externe Links in neuen Fenstern oder Tabs ;-) öffnen. Das mag nicht dem XHTML-Standard strict entsprechen, der target="_blank" nicht erlaubt, ändert aber nichts an durch Erfahrung geprägte Erwartungshaltungen. Für einen solchen Fall halte ich das Angebot der Checkbox "Fremde Seite in neuem Fenster" und die optische Unterscheidung von internen und externen Links für sinnvoll. Über einen Spieltrieb verfüge ich definitiv. Das hast Du gut beobachtet. Hier setze ich ihn jedoch nicht als Selbstzweck ein, sondern für den o.g. Zweck. In der Tat sollte ich aber nicht den Besuchern verraten, dass diese Website auf einem anderen Planeten gehostet ist. ;-) Ich beabsichtige das deshalb möglichst bald zu verschleiern und stattdessen den Quasi-Standard eines herauszeigenden Pfeils (externe Links) oder eines in einer Box befindlichen Pfeils (interne Links) zu verwenden. ;-) Dein Vorschlag, das Icon ebenfalls neben der Checkbox anzuzeigen, ist genial. Und auch Dein Hinweis "Fenster oder Tab" ist ausgesprochen hilfreich. :freu2: Kommen wir zu Deiner Frage:

  Wo ist denn hier die Vorschau? Hm …

  Meinst Du damit eine Vorschaufunktion für Kommentare? So eine schöne wie auf Deiner Seite? Dann verrate mir bitte wie Du sie realisiert hast. Hast Du ein Plugin eingesetzt? Falls ja, welches? Dann prüfe ich gerne dessen Einsatz auch hier. :-) PS: Ich liebe Deinen Pedantenmodus. Keine Sorge, ich bin nicht masochistisch veranlagt. Du bringst da einfach die Probleme so schön auf den Punkt. ;-)
• 13. Oktober 2009, Seouxindianer schreibt: Oh, das erklärt das noindex. Verwehrst Du Suchmaschinen aber nicht auch den Zugriff auf die einzelnen Artikel, wenn Du für die gesamte page nofollow verwendest?
• 13. Oktober 2009, Thomas Scholz schreibt: @Dieter: Wie sähe in den beiden von mir genannten Fällen die Unterscheidung zwischen »intern« und »extern« aus? Das Problem kann man sogar auf nur einen Fall reduzieren: Wenn ich in meinem Operablog Links setze. Sind Links auf meine anderen Websites »intern« und solche auf andere Operablogs »extern«? Oder umgekehrt?

  Bloß, weil es keine Studien darüber zu geben scheint, muss die unterschiedliche Kennzeichnung von internen und externen Links nicht überflüssig sein.

  Das habe ich auch nicht geschrieben. Ich habe das nur als weiteres Indiz dafür genommen, daß die Frage danach irrelevant ist. Bei der angeblichen »Nutzergewohnheit« möchte ich dir entschieden widersprechen, bis du mir deine Vermutung mit Fakten unterlegst. Ich erlebe das anders. Google, Yahoo, Wikipedia – keine dieser Websites versucht, Links auf andere in der Voreinstellung in einer separaten Instanz zu öffnen. Das ist üblich. Ausnahmen sind Webapplikationen, deren Bedienung an eine Session gebunden ist: Twitter oder Gmail etwa. Wenn man verallgemeinern möchte, dann eher so: Alle mit target=_blank versehenen Links führen auf Websites, auf die der »Aufreißer« glücklicherweise keinen Einfluß hat. Daraus folgt aber nicht, daß Links auf andere Websites üblicherweise in einem neuen Fenster geöffnet werden. Nebenbei bemerkt: Ich finde es ein bißchen kurios, daß du plötzlich »das Übliche« als Argument für eine gestalterische Entscheidung heranziehst. Neben dem logischen Problem (»üblich« ist nicht gleich »gut«) wendest du dich doch mit deiner übergroßen Schrift genau gegen eine Konvention. Hier sähe ich meine voreingestellten 16px lieber als deine 19px. Das finde ich viel wichtiger als die Fensterfrage. ;) Jetzt hast du auf jeder einzelnen Seite eine Option, das 90% deiner Leser nicht brauchen … Meine Kommentarvorschau arbeitet mit dem Plugin »Live Comment Preview«. Ich habe darin nur überflüssiges Markup und die flackernde Gravatarvorschau entfernt; das kannst du sicher leicht selber nachvollziehen.
• 13. Oktober 2009, Thomas Scholz schreibt: Ich finde es übrigens sehr verwirrend, daß du das Element CODE unangekündigt in PRE verwandelst – selbst wenn es mitten im Satz steht und keinen Zeilenumbruch enthält.
• 14. Oktober 2009, Dieter schreibt: @Seouxindianer Ja, ich könnte und sollte wohl besser die Seiten von nofollow auf follow umstellen. Allerdings gibt es bei mir keine Crawling-Probleme deshalb, weil ich auf jeder Seite ganz oben auch den Link zur Sitemap habe. Und die Sitemap verlinkt auf die Seiten mit den "echten" Blogbeiträgen. :-) Jetzt habe ich mir gerade irgendwie das Template für die Blogseite "zerschossen". Muss ich erst einmal das Problem beheben.
• 14. Oktober 2009, Dieter schreibt: Blogseite funktioniert wieder und nun kann ich mich den offenen Kommentaren widmen. ;-) Das Problem mit der "statischen" Seite Blog war kurios. Sie ließ zwar das Template blog.php auswählen und speichern, aber verwendete es nicht mehr. :schockiert: :confused: :irre: Vielmehr wurde stattdessen das Standardtemplate (wahrscheinlich page.php) abgearbeitet. Wie auch immer. Nachdem ich die Template-Datei blog.php in blogliste.php umbenannt hatte und auch den Template Name entsprechend geändert, ging es wieder problemlos. :hurra:
• 14. Oktober 2009, Dieter schreibt: @toscho Ich fange mal von hinten an. ;-) Bin schwer erkältet und gehe gleich wieder ins Bett. Zudem kann ich dazu kurz und schnell antworten. Wo wandele ich denn ein Element code in pre um? Das target=_blank in Deinem Kommentar? Dann ist das Plugin CodeColorer wohl der Schuldige. Hast Du eine bessere Alternative als Vorschlag? Danke für den Hinweis auf das Plugin Live Comment Preview. Ich habe es hier eingebaut. Lediglich der große Textabstand zum Rand nach oben und links stört mich noch. Hast Du einen Hinweis für mich, wo ich den verringern kann? Zum eigentlichen Thema komme ich dann morgen. Gut Nächtle.
• 14. Oktober 2009, Thomas Scholz schreibt: Ich benutze HTML Purified; das kann zwischen code und pre unterscheiden. Die Ausgabe der Kommentarvorschau kannst du mit CSS beeinflussen. Wie das bei dir im einzelnen auszusehen hat, kann ich jetzt nicht sagen. Bei mir haben sich übrigens Leser beschwert, die eine langsame Internetverbindung haben: Der Gravatar wurde immer wieder neu geladen, deshalb habe ich das entfernt. Wenn du daran herumschraubst, dann schreib dick »Vorschau« über die Vorschau. Sicher ist sicher. :) Aber laß dir Zeit; kurier dich erstmal aus.
• 15. Oktober 2009, Dieter schreibt: @Thomas Fange langsam an und habe erst einmal die Kommentarvorschau eingerichtet und einen Blogbeitrag dazu geschrieben. Vielen Dank für den Tipp! In die Kommentarvorschau habe ich einfach Kommentarvorschau geschrieben. Ich hoffe, das reicht. Auf das eigentliche Thema komme ich noch zurück. ;-)
• 18. Oktober 2009, Dieter schreibt: @Thomas Wieder von hinten nach vorne. ;-) HTML Purified scheint eine interessante Alternative auch unter sicherheitstechnischen Gesichtspunkten zu sein. Bis auf die automatische Veränderungen von pre zu code bin ich mit Codecolorer sehr zufrieden. Deshalb gedenke ich nur umzusteigen, wenn es Kompatibilitätsprobleme mit Codecolorer geben sollte. Zur Schriftgröße hier: Ich wusste nicht, dass ich hier 19 px einsetze. Ich verwende grundsätzlich em und %. ;-) Ja, die Schriftgröße beim Text liegt über dem Durchschnitt. Insbesondere folgende Gründe waren für mich ausschlaggebend: - Ich wollte die Bedeutung des eigentlichen Textes im Vergleich zu den Inhalten der Sidebar unterstreichen. Deshalb ist die Schrift in der Sidebar kleiner als im Text. - Die Laufweite des Fließtextes sollte eine gute Lesbarkeit ermöglichen und deshalb weniger als 80 Zeichen pro Zeile betragen. - Es gibt leider immer noch den benutzerunfreundlichen Trend zu kleiner Schrift. Es gibt eine beachtliche Zahl an Internetnutzern mit Sehschwäche, für die eine größere Schrift leichter zu lesen ist. Nur so am Rande: Ich habe leider auch schon eine Altersfehlsichtigkeit. Ist denn die Schriftgröße für Dich nur unüblich oder empfindest Du sie als störend? Würde mich mal interessieren. Bezüglich der Weltkugel hast Du mich überzeugt. Ihr ist der avisierte Pfeil gefolgt. An der Überarbeitung der Icons für die Sprite-Datei und den Einbau in den Kommentaren arbeite ich noch; steht aber auf meiner ToDo-Liste weit oben. Fritz und ich haben auf unseren Seiten übrigens Deine Idee mit dem Icon im Text bei der Checkbox aufgegriffen. Danke dafür! Im Übrigen glaube ich nicht, dass überhaupt 10% der Besucher die Checkbox nutzen. Gleichwohl werde ich mal dieses Alternativangebot belassen. Mal schauen, vielleicht mache ich mal meine erste Umfrage zu diesem Thema. Noch auf einen früheren Vorschlag von Dir zur Verringerung des Grundrauschens: Ich halte ein gewisses Maß an Redundanz um Maus- und Tastaturbenutzer zu bedienen hin und wieder für vertretbar. Deshalb habe ich auch die internen Links "nach unten" und "nach oben" bisher belassen. Die Schlagwortwolke habe ich aber aus der mittleren Subcolumn herausgenommen und lediglich noch mit einem Link im Fußbereich (Footer) bedacht. Damit habe ich zumindest auf der Startseite nun wieder unter 100 Links. Das soll wohl auch unter SEO-Gesichtspunkten sinnvoll sein.
• 18. Oktober 2009, Thomas Scholz schreibt: Ja, mich stört die Schrift. Sie ist bei mir auch größer als bei dir, weil du das Problem der Mindestschriftgröße vergessen hast und schon für body auf 75% gehst, die mein Browser gar nicht erreichen darf. Ich brauche meistens genau 16px. Ich bin etwas kurzsichtig, meine Brille hat also verkleinernde Zerstreuungslinsen. Deshalb ist meine Mindestschriftgröße 14px. Und ich lese normalerweise sehr schnell, indem ich mehrere Zeilen auf einmal erfasse, deshalb sollte die Schrift nicht übermäßig groß sein. Aber hier bekomme ich die falsche Größe, gerade weil ich mir die richtige eingestellt habe.

  Mal schauen, vielleicht mache ich mal meine erste Umfrage zu diesem Thema.

  Wozu? Das ist sehr viel unzuverlässiger als einfach die Cookies zu zählen.
• 18. Oktober 2009, Dieter schreibt: @Thomas Danke für Deine ausführliche Antwort und den Screenshot. Das wusste ich nicht, dass es auf Webseiten-Infos.de das Problem mit der Mindestschriftgröße gibt. Umstellung auf px kommt wohl wegen der Probleme beim IE6 nicht in Frage. Bisher kommen immer noch (!) etwa 20% der Besucher auf Webseiten-Infos.de mit diesem Browser vorbei. Übrigens immer noch über 50% der IE-Besucher. :irre: Verstehe ich Deinen Artikel richtig, dass die zweite Lösungsmöglichkeit mit 100.01% als Standard-Schriftgröße und dann davon jeweils em das Mindestschriftgrößen-Problem mildern oder gar lösen würde? :hilfe: Falls ja, würde ich mal versuchen das entsprechend zu ändern. Bezüglich der Checkbox für externe Links hatte ich an Cookie zählen nicht gedacht, weil ich bisher nicht wusste, dass ich das machen könnte. Stellt sich für mich aber immer noch die Frage wie? Dabei besteht die Restriktion, dass ich nicht programmieren kann. :sad2: Dein Screenshot hat mir übrigens mal wieder gezeigt, dass der Opera text-align:bottom für die Grafik völlig anders darstellt. Habe nun mit margin-bottom:-2px eine hoffentlich bessere Lösung. ;-)
• 18. Oktober 2009, Thomas Scholz schreibt: Naja, Cookies könntest du einfach zählen, indem du prüfst, ob das Cookie »extern« existiert. Dann setzt du in einer Textdatei einen Wert eins hoch. Sonst setzt du einen zweiten Wert eins hoch. Nach einer Weile siehst du mal rein und vergleichst die beiden Werte. Vorher solltest du aber noch die Funktion so reparieren, daß man beim Herausnehmen des Hakens das Cookie auch wieder verliert. Im Moment kann ich den Haken nur auf einer Seite entfernen; auf der nächsten oder beim reload ist er wieder drin, obwohl ich das ausdrücklich nicht will. Das verdirbt die Statistik natürlich. ;) Und ja, wenn du bei body nicht unter 100% gehst, vermeidest du das Problem. Bedenke auch, daß manche Leute Mindest- und Normalschriftgröße auf den selben Wert setzen. Sobald man irgendwo unter 100% geht, verdoppelt sich der Testaufwand. Bei Inlinegrafiken habe ich mit prozentualem vertical-align bisher die besten Ergebnisse erzielt. Das ist aber immer knifflig.
• 19. Oktober 2009, Dieter schreibt: @Thomas Naja, einfach ist das Cookies zählen also ohne Programmierkenntnisse anscheinend nicht. Den Fehler mit dem wieder gesetzten Haken konnte ich reproduzieren. Werde mal Fritz darauf aufmerksam machen, da es auch bei seiner Website auftritt. Er hat das JavaScript ergänzt. Ich hoffe, er kann den Fehler fixen. Die Schriftgrößenanpassung ist auf meiner ToDo-Liste mit hoher Priorität. Allerdings bin ich die nächsten Tage auf Reisen und habe danach Besuch, so dass es leider noch ein paar Wochen dauern wird. Bitte um Nachsicht. Danke für den Tipp mit prozentualem vertikal-align. Kannte ich noch nicht. Werde ich mal bei Gelegenheit ausprobieren oder testen.
• 20. Oktober 2009, Fritz schreibt: @Dieter > Ich hoffe, er kann den Fehler fixen. Ist gefixt. Danke für den Bug
• 20. Oktober 2009, Dieter schreibt: @Fritz

  Ist gefixt. Danke für den Bug

  Herzlichen Dank für das Fixen. Werde es aber erst nach Rückkehr aus Basel testen können. Gebe dann Rückmeldung
• 23. Oktober 2009, Dieter schreibt: @Fritz Habe Deinen Fix auch auf Webseiten-Infos.de übernommen. Problem scheint behoben zu sein. Herzlichen Dank! :hurra:
• 5. November 2009, Dieter schreibt: Entsprechend dem hilfreichen Hnweis von toscho hat body seit heute nun "fontsize: 100.01%". Ich hoffe, damit zumindest das Problem mit einer vom Nutzer gewählten Mindestschriftgröße bei seinem Browser in den Griff bekommen zu haben. Für Hinweise, wo mir das noch nicht gelungen ist, bin ich jederzeit dankbar. Gerne können mir dazu benutzereigene Stylesheets für diverse Browser zum Selbsttesten zugemailt werden. Mit benutzereigenen Stylesheets habe ich zwar noch keine Erfahrungen, aber das würde ich gerne ändern.

Ähnliche Beiträge

• Externe Links in neuem Fenster öffnen?
• Layout von Webseiten-Infos.de geändert
• Kommentarvorschau auf Webseiten-Infos.de
• Und der Gewinner des Buches ist…
• WordPress-Plugin PDA & iPhone in Deutsch

Permalink | 30 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Benutzerfreundlichkeit, Checkbox, externe Links, JavaScript, neues Fenster, W3C-konform, Webseiten, Website, Webstandards, WordPress, Zugänglichkeit

Grund: Das Logo ist für einen schönen fließenden Farbverlauf und gleichzeitig Alpha-Transparenz des Hintergrunds im PNG 32-Format abgespeichert. Beim Internet Explorer 6 (IE6) und kleiner führt das aber zu Darstellungsproblemen (hier: schwarzer Hintergrund).

Nun dachte ich mir, wenn ich in einem bedingten Kommentar (Conditional Comment) die CSS-Regel  schreibe, dann kann ich da stattdessen auch ein JavaScript reinpacken, das dem Internet Explorer (IE) die Alpha-Transparenz des Hintergrunds beim Logo beibringt.

Folgende JavaScripte testete ich in diesem Zusammenhang:

1. Supersleight
   Funktionierte zwar, aber führte dazu, dass die Tab-Navigation völlig verschoben wurde.
2. PNGfix
   Funktionierte auf Webseiten-Infos.de irgendwie nicht richtig. Der Hintergrund des Logos blieb grau und der Rahmen der Brotkrümelnavigation (breadcrumb navigation) wurde verschoben.
3. Unit PNG Fix
   Funktioniert immerhin im Internet Explorer 6 (IE6) einwandfrei und anscheinend ohne Nebenwirkung.
   Beim Internet Explorer 5.5 und 5.0 (IE 5.5 und 5.0) wird dagegen der Hintergrund des Logos grau dargestellt.

Gleichwohl habe ich Unit PNG Fix als Ersatz für display: none eingebaut, denn nur noch knapp über 1% der Besucher von Webseiten-Infos.de benutzten den Internet Explorer 5.5 oder 5.0 (IE 5.5 oder 5.0). Tendenz erfreulicherweise weiter fallend.

Das JavaScript Unit PNG Fix habe ich wie folgt in den Kopfbereich (Header) der Webseiten eingebunden (Auszug des relevanten Codes):

Und den Pfad für die dafür erforderliche Grafik clear.gif habe ich im JavaScript entsprechend angepasst.

Sofern Nutzer des Internet Explorers 6 (IE6) JavaScript deaktivieren, funktioniert die Alpha-Transparenz natürlich nicht und sehen sie ebenfalls einen grauen Hintergrund beim Logo.

Solltest Du Nebenwirkungen feststellen, wäre ich für einen entsprechenden Hinweis dankbar.

Kommentare

• 24. Februar 2010, Stefan schreibt: Da hattest Du aber Glück. Bei mir zerhaut das Script das ganze Design... Ich bin grade mal am gucken, woran es liegt...
• 25. Februar 2010, Dieter schreibt: @Stefan Das dürfte sehr wahrscheinlich ein CSS-Konflikt sein. Ich kommentiere zur Fehlerbehebung (zum Debugging) dann Teile des CSS aus und aktiviere wieder etappenweise. Hilfreich beim Debugging im Firefox ist auch das Addon Firebug.

Ähnliche Beiträge

• Web 2.0-Grafiken online erstellen
• Und der Gewinner des Buches ist…
• Danke für Eure Kommentare
• Bilder mit smush.it verkleinern
• Wo ist das Logo?

Permalink | 2 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Alpha-Transparenz, Conditional Comments, Internet Explorer 6, JavaScript, Logo, PNG, Unit PNG Fix

Dazu musste ich unter anderem das nicht mehr erlaubte Attribut target aus dem Quelltext (Quältext) entfernen.

Für das Abo(nnieren) des E-Mail-Newsletters mittels Feedburner hatte ich folgendes JavaScript zusätzlich eingebunden, so dass sich für den Fall aktivierten JavaScripts ein Popup-Fenster auch ohne target=”popupwindow” beim Hyperlink öffnete:

Leider wird die E-Mail-Adresse aber nur mit zusätzlichem target=”popupwindow” auch an das Popup übergeben.

Das heißt, wenn Du bei aktiviertem JavaScript Deine E-Mail-Adresse in das Eingabefeld eingegeben hattest, Du diese dann im Popup noch einmal eintragen musstest.

Das macht keinen Sinn, sondern stellt neben dem immer nicht ganz unproblematischen Popup-Fenster mit dem Erfordernis einer zweifachen Eingabe der E-Mail-Adresse eine für mich inakzeptable Barriere dar.

Deshalb habe ich das oben aufgeführte JavaScript entfernt. Nun wird für die Registrierung des E-Mail-Newsletters über Feedburner zwar die Seite verlassen, aber dafür wird die E-Mail-Adresse aus dem Eingabefeld direkt übernommen.

Hier noch der aktuelle Code des Formulars für das Abo(nnieren) meines E-Mail-Newsletters mittels Feedburner:

Interessehalber wüsste ich aber schon gerne, ob jemand einen JavaScript-Code kennt, der unter Beachtung von XHTML 1.0 strict ein Popup-Fenster öffnet, das die E-Mail-Adresse schon enthält (korrekt an Feedburner übergibt).

Oder geht das gar nicht?

Ähnliche Beiträge

• Und der Gewinner des Buches ist…
• E-Mail-Newsletter abonnieren
• Kein E-Mail-Newsletter mehr!
• Danke für Eure Kommentare
• PNG-Logo auch für den IE 6

Permalink | Kein Kommentar | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Attribut, Benutzerfreundlichkeit, E-Mail-Newsletter, Feedburner, JavaScript, popupwindow, RSS-Feeds, target, Zugänglichkeit

Leider kann man dieses title-Attribut nicht einfach mit Cascading Style Sheets (CSS) gestalten.

Mithilfe eines JavaScripts geht es aber doch, sofern der Besucher einen Browser verwendet der JavaScript unterstützt und es aktiviert ist.

Das Ergebnis: CSS-Tooltips.

Auf die Idee meine Tooltips entsprechend aufzupeppen, brachten mich übrigens die gelungenen Webseiten von Thomas Scholz (aka Toscho) und Gabi mit ihrem BLOGhäuschen, die solche CSS-Tooltips einsetzen. Danke!

Realisiert habe ich die CSS-Tooltips mit Fancy Tooltips. Dort gibt es die Dateien einschließlich des WordPress-Plugins zum Herunterladen (Download).

Ich habe es jedoch vorgezogen, den CSS-Code in meine CSS-Datei und den JavaScript-Code in ein bereits bestehendes JavaScript zu integrieren. Der Vorteil ist, dass dann keine zusätzlichen HTTP-Anfragen (HTTP-Requests) benötigt werden und die Seiten sich dadurch weiterhin schnell laden und aufbauen.

Wie findet Ihr die CSS-Tooltips? Gut oder eine überflüssige Spielerei?

Kommentare

• 17. Juli 2009, Ute schreibt: Ich mag die hübschen Tooltipps, :hurra: auch wenn ich selbst bisher noch immer den Standard nutze... :roll:
• 18. Juli 2009, Kurz und gut XXII Linktippsmiradlo bloggt   schreibt: [...] Statt langweiliger Standardtooltipps wie hier, lassen die sich auch aufmotzen, Dieter schreibt über die JS-Tooltipps [...]
• 18. Juli 2009, Dieter schreibt: @Ute Danke für Deine Rückmeldung. Freut mich, dass Du sie magst. Der Einbau war übrigens einfacher als ich vermutet hatte. :-)

Ähnliche Beiträge

• Hinweise für Kommentare

Permalink | 3 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: CSS, Fancy Tooltips, JavaScript, Plugin, Plugins, Tooltips, WordPress

Die wichtigsten Neuerungen und Verbesserungen sind in dem Artikel “Google Chrome 2 legt an Tempo zu” bei golem.de genannt, der auch ein englischsprachiges Video dazu enthält:

• Vollbildmodus für Webseiten (etwa bei Präsentationen)
• automatisches Ausfüllen von Webformularen
• JavaScript-Engine soll noch schneller sein
• innerhalb eines leeren Tabs können die Vorschaubilder nun bei Bedarf gelöscht werden
• Tabs sollen sich so aus einem Fenster herausziehen lassen, dass sie nebeneinander angeordnet werden
• mehr als 300 Programmfehler sollen beseitigt worden sein

Wer bereits Google Chrome verwendet, bekommt die neue Version direkt über die Update-Funktion des Browsers.

Leider weiterhin noch kaum vorhanden sind Erweiterungen (Addons) für diesen Browser. Aber auch diesbezüglich hat Google schon angekündigt den Browser nachzurüsten.

Mit seiner Personalisierbarkeit und Erweiterbarkeit hat für mich der Browser Firefox noch immer die Nase klar vorne.

Ähnliche Beiträge

• Google Chrome 4.0 veröffentlicht
• Browser Safari 4 wurde veröffentlicht
• Runde Ecken für Google Chrome 4
• Erweiterungen für Browser
• Google Wave: Eine Killer-Anwendung?

Permalink | Kein Kommentar | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Addon, Browser, Firefox, Formular, Google Chrome, JavaScript

1. Mangelhafte Unterstützung von Webstandards
2. Viele und gravierende Sicherheitslücken
3. Wie mit dem Internet Explorer 6 und seinen Nutzern umgehen?
4. Linktipps

1. Mangelhafte Unterstützung von Webstandards

Webdesigner schimpfen und fluchen über den Internet Explorer 6 (IE6), weil er

• immer noch sehr verbreitet ist und
• ihnen wegen seiner mangelhaften Unterstützung von Webstandards kräftig Mehrarbeit beschert.

Manche Darstellungsprobleme lassen sich nur mit zusätzlichem Markup und / oder CSS-Hacks etwa mittels Conditional Comments in den Griff bekommen, andere sogar nur mit JavaScript. Ist JavaScript deaktiviert, dann bedarf es einer weiteren Rückfall-Lösung (Fallback-Lösung), damit es nicht zu Zugänglichkeitsproblemen kommt. Hier kann das CSS-Framework YAML punkten, das die meisten Bugs des Internet Explorers abfängt.

2. Viele und gravierende Sicherheitslücken

Darüber hinaus ist den Nutzern des Internet Explorers 6 auch unter Sicherheitsaspekten ein Update dieses Browsers oder noch besser Wechsel zu einem anderen modernen Browser dringend zu empfehlen. Als Alternativen kommen beispielsweise in Betracht:

• Firefox
• Opera
• Flock
• K-Meleon
• Seamonkey
• Safari
• Google Chrome

Aus diesen Gründen sehen auf dieser Website Nutzer des Internet Explorers folgenden Hinweis zu Beginn am Ende jeder Seite:

Diese Webseite sieht mit einem modernen Browser besser aus. Warum solltest Du und wie kannst Du wechseln?

Warum solltest Du und wie kannst Du vom Internet Explorer zu einem modernen Browser wechseln?

Insbesondere aus Sicherheitsgründen, aber auch aus anderen Gründen, empfehle ich Dir einen anderen Browser als den Internet Explorer zu verwenden. Hier ein paar kostenlose Alternativen: Firefox, Opera, Flock, K-Meleon, Seamonkey, Safari, Google Chrome

3. Wie mit dem Internet Explorer 6 und seinen Nutzern umgehen?

Aktuell laufen verstärkt Diskussionen im Web, ob

• der Internet Explorer 6 künftig noch unterstützt werden sollte und gegebenenfalls wie,
• Einblendungen auf Webseiten, den Internet Explorer (6) upzudaten oder zu wechseln, sinnvoll sind.

Meine persönliche Meinung als jemand, der nicht seinen Lebensunterhalt mit dem Planen, Erstellen und / oder Pflegen von Webseiten verdienen muss, sondern das nur als Hobby betreibt:

• Solange der Internet Explorer 6 eine zu berücksichtigende Verbreitung hat, die ich für mich persönlich bei einem Anteil von über 1% der Besucher sehe, werde ich diesen Browser auch weiterhin unterstützen. Allerdings werde ich im Sinne einer stufenweisen Verbesserung (eines progressiven Enhancements) Besuchern mit modernen Browsern ein besseres Webdesign bieten können und auch bieten.
• Meine Websites www.webseiten-infos.de und www.dieter-welzel.de enthalten Einblendungen für Nutzer des Internet Explorers, die ihnen empfehlen auf einen modernen Browser zu wechseln. Ich bin mir bewusst, dass das den einen oder anderen Nutzer des Internet Explorers nerven kann. Gleichwohl halte ich das für sinnvoll, damit diese Besucher auf die Probleme durch und mit dem alten Internet Explorer aufmerksam gemacht werden.

4. Linktipps

Hier für interessierte Leser ein paar Links zu diesem Thema, die einen Einblick in die kontroverse Diskussion geben:

• Browser-Update.org vom 26. März 2009
• Hold on and stand still – das Leben mit dem IE6 vom 6. März 2009 (sehr lesenswert!)
• Microsoft hält den IE6 am Leben vom 6. März 2009
• Browser in Zeiten wie diesen … vom 6. März 2009
• Warum ich Anti-IE6-Aktionen befürworte vom 28. Februar 2009 (sehr lesenswert!)
• Adieu IE6. Schleppende Ablösung. vom 26. Februar
• Sterbehilfe für Internet Explorer 6 vom 21. Februar 2009
• Zombies leben länger vom 21. Februar 2009
• Revolte gegen den Internet Explorer 6 vom 20. Februar 2009
• Der Zombiebrowser vom 20. Februar 2009
• und wieder der IE6… vom 20. Februar 2009
• Tragen wir den IE6 zu Grabe! vom 20. Februar 2009
• Shall we support IE6 or not? – Die ewig leidige Geschichte mit dem IE6 vom 20. Februar 2009
• Den Teufelskreis brechen vom 20. Februar 2009
• Degradation Without Grace vom 20. Februar 2009
• Der Kampf gegen den IE6 vom 19. oder 20. Februar 2009
• Finnische Webmaster gegen veraltete Browser vom 19. Februar 2009
• Der IE6 soll sterben vom 19. Februar 2009
• Webmaster-Aufstand gegen alte Internet Explorer vom 19. Februar 2009
• Abschied vom IE6 vom 15. Oktober 2008
• IE Death March vom 20. August 2008

Kommentare

• 24. Februar 2009, BlogSchafftWissen - WissenSchaftsBlog schreibt: IE6: Aufstand, Sterbehilfe und Todesmarsch... Wer es leid ist, für lebende Fossilien wie den Microsoft Internet Explorer 6 ständig Workarounds zu bemühen, und sich tagtäglich damit herumzuärgern, selbst für einfachste CSS-Layouts wieder auf Tabellen zurückgreifen zu müssen, dem wird die In...
• 28. März 2009, fuenfwerken lab » IE 6 Kampagne schreibt: [...] > Warum der Internet Explorer 6 weg muss! [...]
• 24. August 2010, Raphael schreibt: Gute Gedanken, die mir aus der Seele sprechen. Denn wenn ich zusammenrechne, wie viel Zeit ich für die Adaptionen von Webseiten verschwendet habe, nur damit die IE6 sie auch darstellen kann, dann wird mir schlecht. Also habe ich für mich persönlich vor kurzem beschlossen die IE6-Adaptionen einfach nicht mehr zu machen. OK, einige der von mir gemachten Sites sind dann zwar nicht für 100% der Surfer zugänglich, aber was solls. Den Aufwand zahlt mir kein Kunde und wer mit dem IE6 heute noch durchs Web tuckert ist selbst schuld. Aber wahrscheinlich wird es noch in 10 Jahren immer noch User geben, die ihn verwenden. ;)
• 24. August 2010, Dieter schreibt: @Raphael Wenn das HTML-Grundgerüst (Markup) ordentlich ist, dann kannst Du den IE6 und älter auch einfach gar kein CSS geben. Das geht, indem Du konsequent CSS über eigene CSS-Dateien einbindest und diese mittels Conditional Comment vor dem IE6 und älter versteckst. Dann sehen die Webseiten im IE6 und älter zwar bescheiden aus, aber sind trotzdem zugänglich. Das werde ich übrigens beim Relaunch meiner beiden weiteren Websites jurafernstudium.de und dieter-welzel.de so machen. :-)
• 29. November 2011, Hinweis zum Internet Explorer bei WordPress | Webseiten-Infos.de schreibt: [...] habe ich auch bereits in dem Blogbeitrag “Warum der Internet Explorer 6 weg muss!” [...]

Ähnliche Beiträge

• BSI warnt vor Internet Explorer
• Sicherheitslücken: Internet Explorer besonders gefährdet
• Hinweis zum Internet Explorer bei WordPress
• Sicherheitslücke war lange bekannt
• Der Internet Explorer 8 ist veröffentlicht

Permalink | 5 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Conditional Comments, Internet Explorer 6, JavaScript, progressives Enhancement, Sicherheitslücken, Webstandards

Bei einer Webseite weißt Du nicht, wer sich Deine Inhalte ansieht und liest. Deshalb solltest Du beim Abfassen der Inhalte von einem Besucher ohne Vorkenntnisse ausgehen.

Aus diesem Grunde solltest Du auch Abkürzungen möglichst immer zusammen mit der ausgeschriebenen Form verwenden und nicht nur beim ersten Auftreten.
Denn: Du weißt als Verfasser nicht, ab welcher Stelle der Besucher einen Text liest.

Sofern Du die ausgeschriebene Form etwa aus Gründen der besseren Lesbarkeit nicht zusammen mit der Abkürzung verwendest, solltest Du folgende Auszeichnungen vornehmen:

Abkürzungen, bei denen jeder Buchstabe einzeln ausgesprochen wird, sind mit dem Tag <abbr> unter Verwendung des title-Attributs und gegebenenfalls mit Universalattribut für die Sprache auszuzeichnen.
Beispiele für Pkw und CSS:

Abkürzungen, die wie ein Wort ausgesprochen werden, sind dagegen mit dem Tag <acronym> unter Verwendung des title-Attributs und gegebenenfalls mit Universalattribut für die Sprache auszuzeichnen.
Beispiele für TÜV und UNO:

Leider kennt der Internet Explorer (IE) bis einschließlich der noch verbreiteten Version 6 den Tag <abbr> nicht. Es gibt aber eine einfache Lösung, das für den Internet Explorer 5 bis 6, sofern JavaScript (JS) aktiviert ist, zu beheben. Dazu muss der Header der (X)HTML-Datei um folgendes JavaScript-Snippet (siehe auch den Artikel “JavaScript, abbr and Internet Explorer” ) in einem Conditional Comment (CC) ergänzt werden:

Die Gestaltung von abbr und acronym mit Cascading Style Sheets (CSS) erfolgt typischerweise wie folgt:

Anmerkungen zur Verbesserungen des Blogbeitrags sowie Diskussionen zu diesem Thema mittels Kommentar sind jederzeit willkommen.

Kommentare

• 10. Februar 2009, Ute schreibt: Hm, nach meinem Kenntnisstand entfällt acronym bei HTML 5 W3C HTML 5 abbr es wird in Zukunft als acronym nicht mehr geben, weil es schwer einzusetzen war, von Browsern nicht gut unterstützt wurde usw. Deshalb hätte dein Beitrag wohl einige Jahre früher kommen müssen, damit es sich ausgewirkt hätte. Den Einsatz von solchen Attributen bekannter zu machen und sie zu nutzen ist sinnvoll. Da frage ich mich gerade, gibts ein WordPress-Plugin, welches vordefinierte Abkürzungen durch ausgezeichnete mit Titel usw. ersetzt? Übrigens, ob man aktuell berücksichtigt, dass HTML 5 ohne acronym auskommen wird, darüber herrscht noch keine Einigkeit, siehe z.B. die Kommentare bei efa PS: Ich glaube nicht, dass der Zusatz des Akzeptierens der Datenschutzerklärung genügt. Von anderen Formularen ausgehend, denke ich es müsste zumindest eine wählbare Checkbox sein, die im Zweifel das Versenden verhindert. Aber auch hier ist die Diskussion ja fleißig im Gange...
• 10. Februar 2009, Dieter schreibt:

  Hm, nach meinem Kenntnisstand entfällt acronym bei HTML 5 W3C HTML 5 abbr es wird in Zukunft als acronym nicht mehr geben, weil es schwer einzusetzen war, von Browsern nicht gut unterstützt wurde usw.

  Das habe ich auch gelesen. ;-) Die Mühlen des W3C mahlen aber bekanntlich langsam. Und: Selbst nach Verabschiedung von HTML 5 dürften noch einmal einige Jahre ins Land gehen bis sich vielleicht HTML 5 als Standard durchsetzt. Deshalb war ich im Blogbeitrag bewusst nicht auf den voraussichtlichen Wegfall von acronym in HTML 5 eingegangen.

  Da frage ich mich gerade, gibts ein WordPress-Plugin, welches vordefinierte Abkürzungen durch ausgezeichnete mit Titel usw. ersetzt?

  Ja, gibt es, aber überzeugte mich nicht, weshalb ich es nicht verwende: WP - Abbreviation Replacer (Plugin)

  PS: Ich glaube nicht, dass der Zusatz des Akzeptierens der Datenschutzerklärung genügt. Von anderen Formularen ausgehend, denke ich es müsste zumindest eine wählbare Checkbox sein, die im Zweifel das Versenden verhindert. Aber auch hier ist die Diskussion ja fleißig im Gange…

  Danke für den Hinweis. Wo hast Du denn diese Diskussion entdeckt? Ich bin zwar kein Jurist, aber eine Checkbox für die Datenschutzerklärung halte ich definitiv für Überzogen. Wohin soll das führen? Eine Checkbox für den Zugang zu jeder Website die Google Analytics einsetzt?
• 10. Februar 2009, Ute schreibt:

  Ja, gibt es, aber überzeugte mich nicht, weshalb ich es nicht verwende: WP - Abbreviation Replacer (Plugin)

  Was war das Problem?

  Wo hast Du denn diese Diskussion entdeckt?

  Ups, erwischt, ich habe es vor einigen Wochen in unterschiedlichen Varianten gelesen. Es ging blogübergreifend und in den Kommentaren.

  Checkbox für die Datenschutzerklärung halte ich definitiv für Überzogen.

  Ob das sinnvoll ist, ist eine ganz andere Frage. Ich halte einiges für Unsinn, was trotzdem Pflicht ist... Ich schließe es aus rein logischen Gründen, weil ich glaube ein Richter würde es ähnlich bewerten wie AGB: AGB sind im Netz nur dann gültig, wenn ich sie bewusst wählen muss, es darf nicht sein, dass sie z.B. vorausgewählt sind. Ich selbst habe gerade beschlossen, es gar nicht zu reinzuschreiben. Meine Orientierung sind z.B. das lawblog und zwei, drei andere. Wenn die bloggenden Juristen etwas nutzen, ohne Absicherung, dann halte ich die Chance für hoch, dass es nicht sein muss. Kunden würde ich jedoch darauf aufmerksam machen. Im Zweifel denke ich ganz oder gar nicht. Aber noch gibt es keine Urteile, und selbst wenn, dann gibt es ja immer noch verschiedene Gerichte. Zu Themen im Netz dauert es ja meist länger, bis sich eine überwiegende einheitliche Rechtssprechung durchsetzt.
• 10. Februar 2009, Dieter schreibt:

  Ja, gibt es, aber überzeugte mich nicht, weshalb ich es nicht verwende: WP - Abbreviation Replacer (Plugin) Was war das Problem?

  Die Liste der Abkürzungen in dem Plugin steht im Quellcode und müsste man händisch anpassen. Außerdem verwende ich oft die Langform und die Abkürzung zusammen. Ich weiß allerdings nicht, ob das vom Plugin erkannt würde. Falls nein, was ich vermute, dann würde das Plugin den abbr-Tag einbauen, obwohl er überflüssig ist!

  Wo hast Du denn diese Diskussion entdeckt? Ups, erwischt, ich habe es vor einigen Wochen in unterschiedlichen Varianten gelesen. Es ging blogübergreifend und in den Kommentaren.

  Cool: Dabei habe ich einen Kommentar von mir bei Dr. Web entdeckt. ;-) Diese Diskussion in Blogs bezüglich Akismet kannte ich größtenteils bereits. Eine begründete Forderung nach der Checkbox für die Datenschutzerklärung konnte ich da nicht finden.

  Ich schließe es aus rein logischen Gründen, weil ich glaube ein Richter würde es ähnlich bewerten wie AGB: AGB sind im Netz nur dann gültig, wenn ich sie bewusst wählen muss, es darf nicht sein, dass sie z.B. vorausgewählt sind.

  Das sehe ich anders. AGB muss der Vertragspartner (!) zur Kenntnis genommen und akzeptiert haben, damit sie Bestandteil eines Vertrages werden können. Die Abgabe einer Kommentars in einem Blog ist dagegen im Regelfall nicht auf den Abschluss eines Vertrages gerichtet. Vielmehr dient die dortige Kommentarfunktion dazu, dass Seitenbesucher ihre Meinung äußern können bzw. in Diskussion mit dem Seitenbetreiber und anderen Besucher treten können (Interaktion).
• 13. Februar 2009, Ute schreibt:

  Plugin den abbr-Tag einbauen, obwohl er überflüssig ist!

  Stimmt, das ist nicht sehr geschickt. Allerdings ist es auch nicht ganz einfach da eine Lösung zu finden.

  AGB muss der Vertragspartner (!) zur Kenntnis genommen und akzeptiert haben, damit sie Bestandteil eines Vertrages werden können.

  Du gehst da mit nachvollziehbarer Logik dran. Ich habe bisher selten den Eindruck, dass das zu Themen im Web auch die Gerichte tun. ;-) Meist werden da Lösungen gefordert, die 150% von den Webseitenbetreibern fordern und -50% eigene Hirnleistung von den Besuchern...
• 13. Februar 2009, Dieter schreibt:

  Allerdings ist es auch nicht ganz einfach da eine Lösung zu finden.

  Statt einer automatischen Plugin-Lösung wäre da nach meiner Auffassung eine Erweiterung des visuellen Editors für die Tags abbr und acronym sinnvoller.

  Du gehst da mit nachvollziehbarer Logik dran. Ich habe bisher selten den Eindruck, dass das zu Themen im Web auch die Gerichte tun.

  Ok, viele Gerichtsentscheidungen in Sachen Internet vermitteln einem schon den Eindruck, dass die entsprechenden Richter keine oder kaum Ahnung vom Web haben. Bei einem so neuartigen und innovativem Medium immer auf dem Laufenden zu sein, ist halt nicht einfach. Dazu kommt noch, dass unsere Rechtsvorschriften oft die Besonderheiten des Internets noch nicht oder noch nicht hinreichend wiederspiegeln.

  Meist werden da Lösungen gefordert, die 150% von den Webseitenbetreibern fordern und -50% eigene Hirnleistung von den Besuchern…

  Naja, verwundert mich nicht. Gerichtsentscheidungen werden von Richtern gefällt, Richter sind regelmäßig keine Webseitenbetreiber, aber eher schon mal Besucher und der Mensch geht zu 99% von sich aus. :lol:
• 13. Februar 2009, Ute schreibt:

  der Mensch geht zu 99% von sich aus. :lol:

  ;-) ...das sowieso. Ansonsten denke ich, _die_ Garantie, dass alles abmahnfrei ist, gibts sowieso nicht, so schnell kann man gar nicht reagieren. Bei Barcamp-Sessions von Juristen habe ich jedoch gelernt, dass es meist auch nach einer Abmahnung noch Wege gibt sich zu wehren. Falls es zu einer solchen käme, würde ich mich sofort an einen Juristen wenden, der selbst viel im Netz unterwegs ist.
• 13. Februar 2009, Dieter schreibt:

  es meist auch nach einer Abmahnung noch Wege gibt sich zu wehren. Falls es zu einer solchen käme, würde ich mich sofort an einen Juristen wenden, der selbst viel im Netz unterwegs ist.

  Jepp! Ich versuche auch möglichst keinen Grund für eine Abmahnung zu bieten. Sollte ich aber doch mal eine Abmahnung erhalten, werde ich erst mal einen Anwalt mit einschlägiger Erfahrung konsultieren. Habe schon bestimmte Anwälte im Auge. :!:
• 8. Juli 2011, Klaus schreibt: Ich bin durch Zufall auf diesen Artikel gestoßen und habe dazu noch eine Anmerkung. In einem Text sollte man wegen der Übersichtlichkeit ein Akronym nur einmal mit einer gestrichelten Linie kennzeichnen. Ich habe dazu auf meiner Website unter http://www.klamonfra.de/gestaltung.php#wedesignerakronym einen entsprechenden Artikel verfasst. Der Unterschied wird halt durch verschiedene Klassen im CSS geschrieben und im Text entsprechend ausgewiesen. Mit Linie: acronym { cursor: help; text-decoration: none; border-bottom: 1px dotted #c93; } Ohne Linie: acronym.standard { cursor: help; border: none; } Vielleicht ist das ja für den ein oder anderen Leser noch interessant. Herzliche Grüße Klaus
• 14. Juli 2011, Dieter schreibt: Hsllo Klaus, ich persönlich bin der Auffassung, dass es bei Texten, die möglicherweise vom Leser nicht vollständig gelesen werden, es sinnvoll ist das Akronym immer hervorzuheben. Da Besucher im Web häufig Texte nur scannen statt komplett zu lesen, würde ich das als Regelfall unterstellen. *Besserwisser-Modus an* Kleine Anmerkung zu Deinem verlinkten Artikel: CSS wird nicht programmiert, sondern einfach nur geschrieben, denn CSS ist keine Programmiersprache. *Besserwisser-Modus aus* Gruß zurück Dieter
• 20. Juli 2011, Klaus schreibt: Hallo Dieter, bei längeren Textpassagen gebe ich Dir Recht. Da sollte man dann die unterstrichelte Kennzeichnung öfter wiederholen. Ich finde es halt bei kurzen Texten störend, wenn andauernd irgendwelche Wörter unterstrichen sind. Es macht aus meiner Sicht das Lesen etwas unruhig. Aber es ist, wie so vieles im Leben, Geschmacksache. Danke für Deinen "Besserwisser-Modus", werde ich bei mir ändern. Herzliche Grüße Klaus
• 21. Juli 2011, Dieter schreibt: Hallo Klaus, ja, das Lesen wird durch gestrichelt unterstrichene Abkürzungen unruhiger. Wenn man jedoch die gleiche Farbe wie die Schriftfarbe nimmt, ist die Unruhe minimiert. ;-) Letztendlich ist das aber immer auch eine subjektive Wahrnehmung. Der eine stört sich daran, der andere nicht. Gruß Dieter
• 3. Dezember 2011, Der BITV-Selbsttest mit Fragebogen | Webseiten-Infos.de schreibt: [...] des Artikels “Was macht eine gute Webpräsenz aus?” sowie die Blogbeiträge “Abkürzungen auf Webseiten“, “Skiplinks und Anker einsetzen“, “Zugänglichkeit ohne Accesskeys“, [...]

Ähnliche Beiträge

• Plugin FV Code Highlighter
• Der BITV-Selbsttest mit Fragebogen

Permalink | 13 Kommentare | Seite speichern bei Twitter | Mister Wong | del.icio.us | Y!GG | Linkarena
Schlagwörter: Abbr, Abkürzungen, Acronym, Internet Explorer 6, JavaScript, Zugänglichkeit