tipps - Einträge für November 2008

  • November, 2008
  • Navigieren mit Tabs, statt mit der Maus ::: Tab-Parade

    • Tastaturausschnitt
    Bis zum 25.11. läuft noch die Tabparade, Eva Papst erinnert in ihrem Artikel daran, dass einige Webautoren leider die Besucher vergessen, die nicht per Maus navigieren. Sie regt zurecht an, dass Autoren sich zumindest ab und zu mal auf ihren eigenen Seiten nur mittels Tastatur bewegen sollten, um zu sehen, inwieweit, die eigenen Seiten dafür geeignet sind.

    Sprunglinks

    Sicherlich ist auch dieses Blog noch nicht der Idealfall, aber zumindest gibt es hier Sprunglinks, mit denen per Tastatur direkt zur Navigation oder zum Inhalt gesprungen werden kann. Probiert es doch mal ohne Maus aus... Inwieweit weitere Angebote wie Tastaturkürzel oder eine angepasste Tab-Reihenfolge sinnvoll sind, ist strittig. Denn die verschiedenen Systeme gehen damit derart unterschiedlich um, dass es nahezu unmöglich ist, etwas so zu verwenden, dass es in jedem Fall hilft und in keinem Fall schadet. Mehr dazu, was man trotzdem tun und beachten kann, siehe den Artikel ein Herz für Tastaturnutzer bei einfach für alle. Manches lässt sich sehr einfach und schnell umsetzen. Für vieles im Bereich besser nutzbare Seiten gibt es keine einfachen, automatisierbaren Tests. Hilfreich ist jedoch in jedem Fall mit einem Layout zu beginnen, welches sich an Webstandards hält. Sprunglinks sind ein weiterer Schritt in Richtung von barrierearmen Seiten, die von möglichst vielen genutzt werden können.
  • Professionell mit Open-Source-Werkzeugen wie GIMP arbeiten

    Es gibt ja immer mal wieder die Diskusssionen, dass man mit Open-Source-Programmen nicht professionell arbeiten könne. Gerade im Bereich der Bildbearbeitung wird das ja recht massiv behauptet. Via Karl-Tux-Stadt gibts dafür mal wieder einen Gegenbeweis. In den Niederlanden gab es einen Wettbewerb für den Entwurf einer 5 Euro-Gedenkmünze. Vorgabe dabei war, dass auf der einen Seite die Königin abgebildet ist, andererseits war das Thema Architektur. Den Wettbewerb hat Stani Michiels gewonnen, der für seinen Entwurf GIMP, Inkscape, und sein eigenes Programm Phatch nutzte, also ausschließlich Open-Source-Software. Phatch, schaue ich mir sicher nochmal genauer an, es sah auf den ersten Blick sehr spannend aus. Der Belgier beschreibt Schritt für Schritt in seinem Blog pythonide wie die Münze entstand und was er sich dabei überlegt hat. Einen deutschsprachigen Artikel mit Bildern gibts bei Anneke. Stani erklärt, wie er das Bild der Königin aus den Namen wichtiger niederländischer Architekten erstellte. Er beschreibt, wie er die Auswahl traf, welche Architekten in welcher Reihenfolge erwähnt werden. Nicht chronologisch, nicht alphabetisch, nicht nach Büchern, sondern durch Suchmaschinenergebnisse, sortiert wurden die Architekten nach der Anzahl Treffer in Suchmaschinen. Die Rückseite der Münze besteht aus Büchern von oder über die wichtigen Architekten. Stani verfolgte außerdem das Ziel die Niederlande und die Hauptstädte der jeweiligen Provinzen mit in seinem Entwurf zu verarbeiten. Die Auswahl der Bücher lässt in der Mitte Platz, um die Niederlande zu formen, an den Stellen der Hauptstädte sind Vögel. Mich haben sein Entwurf und insbesondere seine Erklärungen beeindruckt. Ein Designer, der Hintergrund, Optisches und neue Medien insbesondere auch noch Open-Source so perfekt miteinander verbindet, das kannte ich noch nicht. Schaut euch seinen Bericht selbst an, auch dann wenn ihr sonst nicht gern englische Artikel lest, allein schon die Bilder des Entwurfs sind sehenswert.
  • WordPress und Plugins : nicht immer problemlos...

    Ich bin ja schon immer sehr vorsichtig, was Plugins angeht. So praktisch es einerseits ist, dass es nahezu jedes Feature als Plugin gibt, so schwierig kann andererseits die Fehlersuche werden, wenn mal was nicht klappt. Bei Prinzzess gab es kürzlich ein Problem, als die Seiten zwar am Anfang brav:

    <meta name="robots" content="index,follow" />

    auslieferten, jedoch weiter unten im Header das Ganze überschrieben wurde:

    <meta name="robots" content="noindex,nofollow" />

    Damit wären die Seiten relativ bald nicht mehr von Suchmaschinen indiziert worden. Wer jedoch gefunden werden möchte, sollte das natürlich vermeiden. Entdeckt hat es zufällig Michael, vielen bekannt von greensmilies, der jedoch auch noch das Blog niedermeyer betreibt. Mir fiel direkt der Beitrag auf, weil sich Prinzzess fragte, ob ihr Blog wohl gehackt wurde. Ein erster Blick in Quelltext schien kein Problem zu zeigen, denn da war ja ein index, follow. Doch bei genauerem Suchen, sah ich dann, dass es überschrieben wurde.

    WordPress Seitenaufbau

    Nach einigen Installationen, Versuchen, Themes erstellen usw. habe ich gelernt, dass WordPress im Grunde sehr einfach aufgebaut ist. Der Hauptteil, der vom Theme kommt steht meist am Anfang, dann kommen die jeweiligen Einschübe der Plugins, da die sich ja nur an fest definierten Stellen anhängen können. Die Zeile mit noindex, nofollow, stand im Quelltext direkt nach der Einbindung des Stylesheets des Hangman-Plugins, erst kurz danach folgten weitere Einschübe anderer Plugins. Bei Prinzzess liefen zu diesem Zeitpunkt immerhin 61 Plugins, deshalb ist der Quelltext nicht ganz trivial zu lesen. Michael bekam von ihr Zugang und konnte schließlich bestätigen, dass es tatsächlich an dem Plugin lag. Nach einer Überarbeitung konnte es wieder aktiviert werden und verhindert nun nicht mehr, dass die Seiten indiziert werden.

    Plugins vorsichtig nutzen

    Für mich war dieser Vorfall ein weiterer Hinweis, dass es gut ist, vorsichtig mit Plugins umzugehen. Insbesondere, wenn viele Plugins eingesetzt werden, können auch Seiteneffekte entstehen, weil sich Plugins nicht vertragen. In unserem Mitarbeiterblog, welches nicht für die Öffentlichkeit sichtbar ist, bin ich etwas experimentierfreudiger, habe jedoch auch schon öfter Probleme festgestellt. Insbesondere, die sehr praktischen und einfach einzusetzenden Widgets, verursachen immer mal wieder Fehler. In manch einer Situation ziehe ich Anpassungen am Theme vor, auf manches nette Feature, verzichte ich ganz bewusst. Nach meiner Erfahrung, sind insbesondere Plugins und Eigenschaften, die mittels JavaScript realisiert wurden, häufig eine Fehlerquelle. Nein, ich glaube nicht, dass JavaScript böse ist, allerdings bin ich sicher, dass es leider viele gibt, die mit JavaScript nicht sorgfältig umgehen. Ich kenne kaum eine Seite, die JavaScript einsetzt, bei der nicht zumindest einige Warnungen ausgegeben werden, selbst gemeldete Fehler kommen regelmäßig vor. Bei JavaScript ist das Problem ähnlich, wie bei PHP, vieles funktioniert noch, obwohl es nicht korrekt genutzt wird. Im Web können sich Fehlerquellen so immens häufen, denn verziehen werden zunächst: Fehler im HTML, im CSS, im PHP und im JavaScript. Dass es da, ab und an auch mal richtig knallt, ist kein Wunder. Nicht selten werden ganze Systeme, wie z.B. WordPress genutzt, in denen, oft auch noch veraltete Versionen laufen, zuweilen kombiniert mit noch älteren oder ganz neuen Plugins. Im Grunde ist es eher erstaunlich wie häufig solche Kombinationen noch einen lauffähigen Webauftritt ergeben.

    Meine Lösung

    Ich werde weiterhin versuchen, so wenig Plugins wie möglich einzusetzen, mir sind die zur Zeit meist etwa 15-20 genutzten Plugins pro Blog im Grunde schon zuviel. Bei manchen kommt da ja noch Google Analytics hinzu, mehrere eingebundene Links und Bilder, wie z.B. zu Blogverzeichnissen oder geschaltete Werbeanzeigen. Insbesondere bei der Ladezeit einer Seite, macht es sich dann doch bemerkbar, was alles Zeit braucht, bevor die Seite vollständig angezeigt wird.
  • Kommentarspam : follow und nofollow : Pagerank : Trackbacks ohne Link...

    In meinem anderen Blog habe ich schon mal ausgeführt was ich davon halte, wenn jemand meint, er könne hier Links sammeln. Gerne bekommt jede/r der/die hier kommentiert den Link zur eigenen Seite, wenn der Kommentar ein zum Thema passender Kommentar ist. Alle Links in den Kommentaren stehen hier auch absichtlich und bewusst auf follow, siehe auch den Artikel Links oder nicht... Für mich ist die Grundlage des Internets die Linkstruktur und die Möglichkeit dadurch weitere Informationen zu bekommen. Deshalb halte ich nichts von nofollow.

    Mehr lesen

  • Progressive Enhancement ::: CSS 3 einerseits jedoch IE 6 andererseits

    Progressive Enhancement? im Deutschen könnte man stufenweise Verbesserung oder Erweiterung des Layouts dazu sagen. Hinter diesem Begriff verbirgt sich ein Konzept sich beim Design nicht mehr an den ältesten Browsern zu orientieren und nur zu nutzen, was auch diese umsetzen, sondern Stück für Stück auch kleine Extras für moderne Browser einzubauen. Einen guten Artikel mit Beispielen dazu gibts bei Dieter.

    PNG-Transparenz und hover einsetzen

    • Firefox Standardansicht
    • winkt mittels hover im Firefox
    • IE 6 graue Kästen statt Transparenz
    In den Sonnenseiten der Webkrauts berichtet Nicolai Schwarz über eine Spielerei bei Qwitter mit den CSS-Sprites. Wie in den Abbildungen des Firefox zu sehen ist, winkt das Männchen. Realisiert wird das schlicht mittels eines Hover-Effekts durch CSS-Sprites, wie es beispielsweise im Artikel von Stefan David beschrieben wird. Eine schöne und einfach ohne JavaScript umzusetzende Spielerei. Die Designer von Qwitter beschlossen, dass sie sich nicht die Mühe machen mit zusätzlichem Aufwand einen ähnlichen Effekt im IE6 zu erzielen. Wie auf dem Screenshot des IE 6 zu erkennen ist, haben die Bilder des Gesichts, des Arms und des Logos PNG-Transparenzanteile, die dieser nur als grauen Hintergrund darstellt. Der Hovereffekt klappt hier ebenfalls nicht, denn der IE 6 akzeptiert hover ausschließlich für Links. Klar, kann man darüber diskutieren, dass die Nutzer des IE 6 hier nicht dasselbe geliefert bekommen. Allerdings wäre es in diesem alten Browser (so grade eben aus diesem Jahrtausend) nur mit sehr viel mehr Aufwand und nicht ohne JavaScript lösbar. Für einen netten, aber inhaltlich nicht notwendigen Effekt ist solch ein Aufwand wohl kaum gerechtfertigt. Die meisten Webentwickler verwenden seit Jahren mehr Zeit für die Anpassungen an den IE 6, als für jeden anderen Browser. Fast alle anderen Browser orientieren sich an den Webstandards und benötigen nur selten einmal spezielle Anpassungen. Insbesondere der IE 6 ist jedoch deutlich aufwändiger von vielen Designideen zu überzeugen, siehe auch den Beitrag Webstandards oder Internet Explorer.

    Webseiten für den IE 6

    Manch eine Webseite für speziell für den IE 6 erstellt und funktioniert auf keinem anderen Browser richtig. Leider ist es je nach Webauftritt jedoch noch immer eine große Zahl an Besuchern, die den IE 6 nutzen.

    Warum nutzen immernoch so viele den IE6?

    Wie schon im Artikel über das Metatag für den IE 8 beschrieben, viele Entwickler schrieben ihre Webapplikationen lange Zeit ausschließlich für den Marktführer, also über einige Jahre speziell für den IE 6. Da dieser sicher kaum an Standards hält funktionieren viele Anwendungen ausschließlich mit dem IE 6 oder mit einem Nachfolger, der sich so verhält, als sei er ein IE 6. Applikationen sind teuer, daher benutzen noch viele Firmen den IE 6, um die darauf angepassten Programme nutzen zu können. Hinzu kommen all die Besucher, die eine ältere Windowsversion, wie Windows 2000 nutzen, denn für dieses Betriebssystem wurde leider keine Version, des deutlich standardkonformeren IE 7 angeboten.

    Warum sollte man den IE 6 überhaupt noch berücksichtigen?

    Klare Sache, wegen seines Marktanteils. Inzwischen ist er zwar weit davon entfernt noch Marktführer zu sein, wie das lange der Fall war. Einen großen Teil hat der IE 7 übernommen, jedoch auch seit Einführung des Firefox (Hinweis an die Jüngeren: ja, es gab eine Zeit mit Internet und ohne den Firefox;-) ) verlor der Internet Explorer deutlich an Bedeutung. Inzwischen werden viele Diskussionen geführt, was man tun könnte, um den IE 6 endlich loszuwerden. Manch einer hat die Nase voll und liefert zumindest bei eigenen Seiten für den IE 6 nur noch den reinen Text aus. Andere passen ihr Layout teilweise an und liefern an den IE 6 mit einem Hinweis auf den Firefox-Download aus. Für Kundenseiten bleibt den meisten bislang kaum etwas anderes übrig, als das jeweilige Layout weitgehend auch für den IE 6 anzupassen. Rund 20% Besucher, die nach wie vor den IE 6 nutzen, sind auf manchen Seiten keine Seltenheit.

    Lösung durch Progressive Enhancement

    Aus obigen Gründen, ist es meist nicht möglich völlig auf die Darstellung im IE 6 zu verzichten. Statt jedoch bei Layoutentwürfen nur darüber nachzudenken, wie etwas auch im IE 6 umgesetzt werden kann, bietet es sich an schrittweise vorzugehen. Schritt- oder stufenweise ist es wie im genannten Beispiel durchaus möglich bereits zusätzliche Verbesserungen und Erweiterungen einzuführen, ohne dass der IE 6 völlig vernachlässigt wird. In CSS 3 gibt es einige interessante Eigenschaften (runde Ecken usw.) und bezogen auf den IE 6 stehen auch in CSS 2 noch viele ungenutzte Möglichkeiten offen. Meines Erachtens ist das der optimale Weg, um einerseits zusätzliche, neue und interessante Varianten zu nutzen, jedoch andererseits nicht diejenigen Besucher zu ignorieren, die halt einen sehr alten Browser nutzen. Wer mehr darüber wissen will, sollte sich das Buch Transcending CSS anschauen, besser beschreibt es zur Zeit meines Erachtens niemand, wie man auf diesem Weg neue Ideen umsetzen kann.href="http://miradlo.net/bloggt/index.php?3206-s"">CSS 3 gibt es einige interessante Eigenschaften (runde Ecken usw.) und bezogen auf den IE 6 stehen auch in CSS 2 noch viele ungenutzte Möglichkeiten offen. Meines Erachtens ist das der optimale Weg, um einerseits zusätzliche, neue und interessante Varianten zu nutzen, jedoch andererseits nicht diejenigen Besucher zu ignorieren, die halt einen sehr alten Browser nutzen. Wer mehr darüber wissen will, sollte sich das Buch Transcending CSS anschauen, besser beschreibt es zur Zeit meines Erachtens niemand, wie man auf diesem Weg neue Ideen umsetzen kann.

Seite 1 von 1, insgesamt 5 Einträge