Kategorie: Allgemein

Immer beliebter wird in letzter Zeit die CSS-Regel position: fixed;. Damit kann man bestimmte Bereiche im Dokument an ihren Positionen »festpinnen«. Das dies keine Frames in ihrem Sinne sind, wird dadurch klar, dass man mit dieser Möglichkeit kein anderes Dokument in das aktive einfügen kann. Sie haben ihnen aber gemeinsam, dass man damit bestimmte Bereiche immer an gleicher Position lassen kann, wie zum Beispiel Navigationsmenüs.

Zum 1. Mal aufgefallen ist sie mir schon vor 2 Jahren bei Michael Preidels Navigationsleiste. Hier schimmert unter der Navigation der Text durch, wenn man die Seite scrollt. Sehr schön gemacht.

Zwischendurch ist sie mir immer wieder mal aufgefallen. Jonathan Snook lässt sein Kommentarformular an einem festen Platz stehen, siehe Einzelansicht einer seiner Beiträge.

Und auch Martin Labuschin macht in seinem Design davon Gebrauch.

Dass diese Eigenschaft nicht so weit vertreten ist, liegt mit Sicherheit daran, dass der Internet Explorer dies bis zur 7. Version nicht darstellen konnte. Die aktuelle Version hingegen hat damit keine Probleme. Für die früheren Versionen gibt es dafür aber Workaround, leider oft mit JavaScript:

• position: fixed for Internet Explorer,
• position: fixed für IE/Win 6.
• Probleme beschreibt der Artikel Probleme mit Ankern und position:fixed (feste CSS-Positionierung).

Was ein Nachteil werden könnte sind Werbebanner die immer an gleicher Stelle stehen und damit den Leser stark beeinträchtigen. Ich hoffe, es wird damit nicht allzuviel Unfug betrieben.

Ich plane dies in Zukunft auch einzubauen. Ich verspreche mir davon einen großen Nutzen, wenn bestimmte Bereiche immer eingeblendet sind, oftmals erspart man dem Besucher damit das Scrollen. Dadurch, dass der IE7 als Auto-Update auf den Rechner kommt, können auch immer mehr Leute davon Gebrauch machen.

Die Suchmaschinenbetreiber von Google, Yahoo! und Microsoft haben sich auf einen gemeinsamen Standard für Sitemaps geeinigt. Gemeint sind damit XML-Dateien, die die Struktur einer Internet-Präsenz aufzeigen um es den Suchmaschinen leichter zu machen diese zu indexieren.

Die Struktur dieser XML-Datei besteht im wesentlichen aus folgenden XML-Tags: <urlset>, <url>, <loc>, <lastmod>, <changefreq>, <priority>. Mehr dazu in der Dokumentation.

Um so eine Sitemap-Datei mit WordPress zu erstellen, nutzt man am besten das Plugin Google Sitemap Generator. Und für Textpattern sollte man auf das Plugin asy_sitemap setzen.

In der Essener Zeche Zollverein findet derzeit die Entry 2006 statt. Was dort genau ausgestellt wird, weiß ich auch nicht, dürfte aber sehr sehr sehr designlastig sein. Da aber mein Nebenjob-Arbeitgeber (die EVAG) dort auch einen Stand für ihr Corporate Design hat und die Zeche Zollverein auf jeden Fall einen Besuch wert ist, mach ich einfach mal ein wenig Werbung dafür ;)

Die ENTRY2006 findet auf dem Gelände des Weltkulturerbes Zollverein statt, ehemals größte Steinkohlenförderanlage Europas. Im Mittelpunkt der ENTRY2006 steht das Thema Design – als Herzstück der Kreativwirtschaft und als Wettbewerbs- und Innovationsfaktor der Zukunft.

Entry 2006

Wenn ich noch jemanden finde der mit mir mir dahin geht, werde ich der Ausstellung mal einen Besuch abstatten, sind ja auch nur 5,50 €. Im Red Dot Design Museum nebenan war ich mit meiner Klasse ja schon vor 3 Wochen mit unserem Produkt-Design-Lehrer.

Webseiten-Validät zu testen war bisher immer sehr klickreich. Zum HTML testen musste der HTML-Validator genutzt werden, für CSS-Überpfungen der CSS-Validator. Das W3C hat bestimmt gemerkt, dass das auf Dauer etwas mühselig ist, und stellt nun alles auf einmal zur Verfügung. Es nennt sich Unicorn und testet das CSS und HTML gleichzeitig. Warum man dafür derzeit JavaScript benötigt, wird mir nicht ganz klar, aber es ist ja auch noch eine Alpha-Version.

A clear, simple, concise and complete assessment of the quality of a web page. Being able to get results of validation of HTML, checking of the style sheets, finding broken links, and more, much more, without having to visit ten different pages and services. That would be a rare sight, but it’s not a fantasy. We give you: The unicorn (public preview)

WC3 Weblog

Auf auf, testet eure Webseiten!

Im Nachhinein und Live-Betrieb meines neuen Layouts ist mir aufgefallen, dass ich für ein paar Elemente das Styling völlig vergessen habe. Dadurch kam ich auf die Idee, eine Liste zu mit den wohl meist gebrauchten Elementen zu schreiben.

Elemente zur Dokumentstrukturierung:

div im Zusammenspiel mit aussagekräftigen IDs wie zum Beispiel <div id="#content">

Überschriften zur Dokumentgliederung

h1, h2, h3, h4, h5, h6

Absätze

p

Links und verschiede Link-Zustände

a(:link), a:visited, a:focus, a:hover, a:active.
Diese Reihenfolge sollte man sich einprägen, beispielsweise durch den Satz Lord Vaders former handle, Anakin. Siehe auch Website in an hour von Andrew Krespanis.

hervorgehobene Textstellen

em, strong

Abkürzungen

abbr, acronym

ungeordnete Listen (Ulli)

ul, li

geordnete Listen (Olli)

ol, li

Definitionslisten

dl, dt, dd

Zitate

q, blockquote, cite

gelöschten und nachträglich eingefügten Text

del, ins

Tabellen

table, caption, thead, tfoot, tbody, tr, th, td

diverse Elemente zum Anzeigen von Code

code, pre*, var, kbd.
==* = mehr oder weniger =

weitere logische Textauszeichnungen

samp, dfn

Ich habe selber noch nicht alle Bestandteile in mein Stylesheet eingebaut, das wird sich aber sicherlich noch ändern, ein entsprechender Aufruf zur Cache-Aktualisierung wird dann auch folgen ;)

Nur, wenn sich kein passendes Element finden lässt, kann man außerdem auf das span-Element zurückgreifen, bei der Wahl eines Klassennamens ist es wichtig, die Funktion des Elements und nicht das Aussehen zu benutzen. Es kann ja immer mal passieren, dass .greenText plötzlich rot sein soll.

Im Hinblick auf XHTML 2 sei drauf hingewiesen, dass dort viele neue Elemente hinzukommen und Links nicht mehr zwingend mit dem <a>-Element ausgezeichnet werden müssen. Da XHTML 2 bisher nur als Entwurf fungiert, können sich selbst hier noch Änderungen ergeben.

Am Montag wurde die 1.000.000. .de-Internet-Adresse registriert, Besitzer ist nun eine Hüttenberger Case-Fabrik. Leider zeigt die Domain, dass Webstandards, semantischer Quellcode und Usability noch nicht soweit fortgeschritten sind wie .de-Domains.

Hier wurden Tabellen für’s Layout missbraucht, Überschriften kommen gar nicht zum Einsatz – nicht mal mit <b> gefettet, was allerdings auch kein guter Stil gewesen wäre – und statt des Linktext werden in der Navigation nur die Pfeile verlinkt. Der Validator spuckt 14 Fehler aus, der Großteil sind fehlende Alternativ-Texte für die Grafiken. Die Domain ist außerdem nicht ohne den Zusatz www. erreichbar.

Kuriositäten aus dem Quellcode sind unter anderem <div align="center"><center>, <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> übliche <font>-Elemente und Tabellen.

Das Firmenlogo als Tapete will mir auch nicht so gefallen, die Pfeile in der Navigation waren wohl beim Grafikprogramm dabei und das Logo selber ist auch ein wenig fransig. Dabei fällt mir noch auf, dass die Firma wohl »Hüttenberger Case-Fabrik cases« heißt.

Es mag sein, dass die Kosten für was besseres zu hoch waren. Trotzdem schade, dass bei so einer Jubiläums-Domain nicht was hochwertiges zu finden war. Hierbei geht es mir lediglich um den Stand im Netz und nicht darum eine meines Erachtens schlechte Website auseinander zu nehmen und zu verurteilen.

Update, 7. August 2006

Inzwischen benutzt man Frames und ein Flash-Menü, der Eingangstest ist als Grafik hinterlegt und das ohne Alternativtext.

Das W3C hat vorgestern die mittlerweise 8. Version des XHTML 2.0 Working Drafts veröffentlich. Wann die wohl mal fertig sind? Schließlich brauchen die Browser-Hersteller ja auch noch Zeit um, die Unterstützung dafür auszubauen, ein nicht weiter erwähnter dann vielleicht noch ein wenig mehr Zeit.

Unter anderen kommt folgendes auf uns zu:

• Das <nl>-Element kommt hinzu und fungiert als Navigationsliste. Gab es auch mal als <menu>-Element, wurde nur nie benutzt und ist eh deprecated.
• Jedes Element kann nun ein Link sein, damit sind Auszeichnungen wie <p href="ziel.htm">Ein wenig Text</p> möglich. Das <a>-Element bleibt aber weiterhin erhalten.
• Statt eines extra <img>-Elements kann man Elementen direkt ein src-Attribut mitgeben: <p src="statistik.jpg">Statistiken 2006</p> Werden keine Bilder im Browser angezeigt, kommt der Paragraphen-Text zum Vorschein. Kann man als bequeme Neuerung zum longdesc-Attribut nehmen, das selten bis kaum verwendet wird, weil man dafür extra ein eigenes Dokument anlegen muss und es so gut wie kein Browser unterstützte.
• Ein wenig Semantik kommt mit dem role-Attribut hinzu, das verschiedene Arten von Text auszeichen soll, beispielsweise Navigationslisten (eigentlich unnütz, siehe 1. Punkt), Notizen (role="note") und noch ein paar mehr.

Seit wann ist XHTML eigentlich mit ™ ausgestattet?

Der Internet Explorer 7 wird auf Windows-XP-Rechnern automatisch heruntergeladen sobald er fertig ist, das ist ja wunderbar. Zumindestens wird vorher gefragt ob er heruntergeladen und installiert werden soll, das ganze dann als kritisches Update. Das ist ein feiner Schachzug von Microsoft, dann sind die XP-Benutzer schon mal mit dem neuen Browser gewappnet. Vielleicht sind sie dann auch so genervt von ihm, dass sie nach Alternativen suchen, wenn der so kacka bleibt wie die aktuelle Beta-Version.

Und was heißt das? Die IE7-Benutzer werden kommen und sie werden sich wohl auch rasend schnell verbreiten. Das widerrum heißt, dass man sich sobald wie möglich mit dem können und nicht-können der neuen Version vertraut machen sollte, insbesondere in Sachen CSS und anderen Webstandards. Dieses sobald wie möglich sollte man allerdings nicht zu früh wahrnehmen, da es aktuell nur Betas gibt und sowas eh nie »wie in fertig ist«.

Was ein sehr interessanter Punkt bei der Sache ist, ist dieser:

Der Installationsvorgang des Internet Explorer 7 über die Update-Funktion soll aber keine Änderungen bei den Toolbars, der Startseite, den Sucheinstellungen, den Favoriten und dem Standardbrowser vornehmen. Benutzer sollen auch wieder zum Internet Explorer 6 zurückwechseln können.

Heise Newsticker

Dann bleiben die Leute wenigstens von diesem miesen Design verschont, das eigentlich kommen sollte und müssen sich nicht groooß umgewöhnen an den neuen Look. Frohes Webschaffen!