Tipps und Tricks
Diesen Artikel als PDF ansehen/downloadenCSS – (msc) Owen Briggs gebührt Respekt für seine unermüdliche Aufklärung in einer betrüblichen Affäre. Auf seiner Website (www.the-noodleincident.com/tutorials/typography) hat er annähernd dreihundert Screenshots zusammengetragen. Diese kleinen Bildschnipsel zeigen alle das gleiche: Browser interpretieren Angaben zu Schriftgrössen unterschiedlich; speziell wenn man mit relativen Angaben operiert (Prozent, em, etc.).
Herr Briggs untermauert, was jeder Webdesigner weiss: Browser interpretieren Schriftgrössen höchst unterschiedlich. Wie entrinnt man diesem Dilemma? Einige Vorschläge gibt es in der letzten Ausgabe des Publisher. Briggs rät von der em-Masseinheit ab: Schuld ist der Internet Explorer, der bei der Verkleinerung die Schrift zu klein macht. Stattdessen seien Prozentangaben ein guter Weg. Auch die relativen Grössenangaben finden Briggs Zustimmung: Also die HTML-Tags und und die CSS-Angaben {font-size: xx-large; } – wobei auch die Angaben small, x-small und xx-small, large und x-large zulässig sind.
CSS – (msc) «Immer mehr Webdokumente scheinen aus nichts anderem als einer Ansammlung von div-Elementen zu bestehen», schreibt Gez Lemon in seinem Artikel zu Web-Standards, und weist darauf hin, dass «in den meisten Fällen eine bessere Nutzung von CSS-Selektoren diese Masse von div-Elementen verhindern könnte».
Damit hat der Mann recht. CSS hält diverse Möglichkeiten bereit, mit denen sich div-Einkapselungen vermeiden lassen. Das macht dann nicht nur die HTML-Seiten schlanker, sondern auch das Layout der Site übersichtlicher. Es sei daher allen Webdesignern empfohlen, sich in einer ruhigen Minute einmal den Artikel von Herrn Lemon zu Gemüte zu führen: http://juicystudio.com/article/div-mania.php
Die deutsche Übersetzung von Eric Eggert gibt es hier: http://yatil.de/Artikel/der-div-wahnsinn
In CSS-Deklarationen ist es möglich, Elemente abhängig von ihren «Eltern» zu formatieren:
Box-Titel
Text
In diesem Beispiel wird eine Box definiert, die einen dunklen Hintergrund hat. Damit die Schrift lesbar bleibt, wird über einen div-Block die Schrift weiss gefärbt. Dabei geht es auch ganz ohne das zweite div-Element: In der Stildatei lässt sich nämlich festlegen, dass h3 und p mit weisser Schrift erscheinen, wenn sie innerhalb des sidebox-Elements auftreten. Das sieht dann so aus:
Nun «wissen» Titel und Text, dass sie in der Sidebox weiss zu sein haben, auch wenn sie in normalem Text schwarz erscheinen. Der HTML-Code wird entsprechend einfacher:
Text
Box-Titel
Es ist auch möglich, «Kinder» anhand ihrer Eltern auszuwählen:
p>strong {background-color:
blue;}
Dieses Beispiel formatiert strong-Elemente mit einem blauen Hintergrund, wenn sie als «Eltern» p haben: Also in normalen Abschnitten – in einer h1-Überschrift hat strong keinen blauen Hintergrund. So ist es möglich, strong-Elemente je nach Auftreten unterschiedlich zu formatieren, ohne dass div-Blöcke nötig wären.
JavaScript – (msc) In den Lesezeichen-Listen speichert man Lesezeichen, richtig? Richtig, aber nicht nur. Die Bookmarks nehmen auch so genannte «Bookmarklets» oder «Favelets» auf. Das sind kleine JavaScript-Schnipsel, über die sich eine geladene Seite manipulieren lässt. Über Bookmarklets startet man Suchanfragen zu einem markierten Begriff, schlägt das markierte Wort in einem Lexikon nach, ändert die Farben der geladenen Webseite, schickt diese zur W3C-Konformitätsprüfung, etc. Praktisch ist auch das Bookmarklet «BugMeNot» – es füllt bei Websites mit Registrierungszwang automatisch das Zugangsformular mit (fremden) Login-Daten.
Bookmarklets werden wie normale Links zu der Lesezeichen-Sammlung hinzugefügt. Sie erscheinen dort wie eine normale Webadresse und werden zum Gebrauch einfach angeklickt. Bei Firefox können die Bookmarklets auch über ein Schlüsselwort aufgerufen werden, das man im Lesezeichen-Manager bei den Eigenschaften vergibt.
Technisch gesehen sind Bookmarklets nichts anderes als etwas JavaScript-Code, der als Link verpackt ist. Das folgende Code-Beispiel ändert die Hintergrundfarbe der aktiven Seite, entsprechend der Angabe, die man in der Dialogbox macht:
Es ist somit für Webdesigner denkbar einfach, eigene Bookmarklets anzubieten: Man braucht einfach den JavaScript-Code mit javascript: anzuführen und in einen Link zu packen. Natürlich funktionieren diese auch im Direktaufruf. Diverse Websites liefern vorgefertigte Bookmarklets:
http://www.bookmarklets.com" target="_top">www.bookmarklets.com
www.stichpunkt.de/bookmarklets
http://aktuell.de.selfhtml.org/artikel/javascript/bookmarklets
HTML – (msc) Favicons ist ein Kunstwort aus Favorit und Icon, und entsprechend ist ein Favicon ein Icon für eine Website. Es erscheint in der Adressleiste des Browsers, im Seitenreiter und in der Lesezeichen-Sammlung. Entsprechend wichtig sind sie: Sie erleichtern es dem Surfer, eine gesuchte Site mit einem Blick zu lokalisieren.
Ein Favicon anzubieten, ist eine simple Sache. Man stellt ein Ikönchen auf dem Webserver bereit, die im Header ein jeder HTML-Datei verlinkt ist:
Das Icon selbst lässt sich in Photoshop gestalten. Es hat eine Grösse von 16 auf 16 Pixel; was die Kreativität etwas einschränkt. Für das Gestalten kann es hilfreich sein, mit einem Vielfachen von 16 zu operieren und das Icon mit 64 auf 64 Pixel zu gestalten. Es ist aber daran zu denken, dass das Icon erkennbar bleiben muss, wenn es am Schluss auf die 16 Pixel Seitenbreite reduziert wird. Ansonsten sind aber alle Gestaltungstricks erlaubt.
Ist die Arbeit abgeschlossen, speichern Sie das Icon im Format «BMP» (Dateityp «BMP (*.BMP;*.RLE;*.DIB)» in Photoshop). Als Endung verwenden Sie jedoch nicht «.bmp», sondern «.ico». Setzen Sie den Dateinamen im Dialog in "gerade" Anführungszeichen, damit Photoshop die unerwünschte Endung nicht eigenmächtig hinzufügt. Die Farbtiefe muss 24 bit sein.
Auf diesem Weg ist es nicht möglich, Symbole mit Transparenz zu speichern. Für elaboriertere Icons benötigen Sie das «ICO (Windows Icon) Format»-Plug-in für Photoshop, das im Publisher-Downloadbereich zu finden ist.
Falls das Icon nicht gleich erscheint: Beim Internet Explorer 6 ist es nötig, die Seite den Favoriten hinzuzufügen, damit das Icon verwendet wird. Bei Safari muss unter Umständen der Cache geleert werden.
HTML – (msc) Google, Yahoo und Microsoft haben sich auf ein gemeinsames Protokoll für Sitemaps geeinigt. Dieses erlaubt es Webseitenbetreibern, ihre Übersichtsseiten standardkonform zu gestalten. Suchmaschinen können so die Struktur einer Site auswerten und diese Informationen in die Suchergebnisse einfliessen lassen. Die Sitemap ist als XML-Datei konzipiert:
http://www.example.com/
2005-01-01
monthly
0.8
Das Schlüsselwort loc gibt die Adresse zu einer Seite an. Über changefreq gibt man die Änderungshäufigkeit an und priority gibt die Wichtigkeit einer Seite innerhalb der Site an – eins ist wichtig, null ist unwichtig.
Bei Google sieht man in der Resultateliste bei einzelnen Sites bereits die Auswirkungen des neuen Protokolls. Alle Details zum Sitemap-Format gibt es unter folgenden Adressen:
www.google.com/webmasters/tools/docs/de/protocol.html
Es gibt von Google ein Generator zum Erstellen einer Sitemap-Datei:
www.google.com/webmasters/tools/docs/de/sitemap-generator.html