Kategorien
Webstandards

Webseiten verlinken (Update)

Wie verlinke ich auf andere Webseiten? Am besten mit dem a-Element. Es ist zwar auch mit JavaScript möglich, aber da lassen wir lieber mal die Finger davon, weil nicht jeder JavaScript aktiviert hat und Google da auch nichts von hat.

Die Zieladresse geben wir mit dem href-Attribut an, das sieht dann so aus: <a href="http://pixelscheucher.de"></a>.

Link-Beschreibung

Mit dem title-Attribut können wir eine kurze Beschreibung hinzufügen, die wird meistens angezeigt, wenn man den Mauszeiger ein wenig über dem Link stehen lässt. Beispiel: <a href="http://pixelscheucher.de" title="Michels Weblog"></a>.

Linktext

Zwischen <a> und </a> schreiben wir den Text der als Link zu sehen sein soll. Bitte dabei drauf achten, dass der Linktext auch soweit wie möglich selbsterklärend bleibt, wenn man sich nur die Links anzeigen/vorlesen lässt. Man kann auch Bilder statt Text einfügen, dabei aber auch auf verständliche alt– und title-Attribute im <img>-Element nicht verzichten. Der Vollständigkeit halber sollte ich noch erwähnen, dass man früher den störenden Linkrahmen um das Bild mit border="0" los wurde. Bitte macht sowas mit CSS, lasst aber trotzdem deutlich werden, dass es sich um einen Link handelt.

Sprachen

Wenn man möchte kann man mittels @hreflang@ auch noch angeben, in welcher Sprache die verlinkte Seite geschrieben ist. Viele Browser senden beim Aufruf einer Webseite eine Zeile Code mit, die dem Webserver sagt, welche Sprache bevorzugt wird. Ist der Webserver entsprechend eingestellt, liefert er an ›deutsche‹ Browser deutschen Text, an ›englische‹ Browser englischen Text. Darum sollte man das hreflang-Attribut öfter mal überprüfen. Auch eine spezielle Stylezuweisung, beispielsweise ein kleines Fähnchen für englischsprachige Links kann sehr nützlich sein und wird mittels a[hreflang='Sprachkürzel'] { Style-Anweisung } eingebunden. Nachtrag vom 28.06.2006: Keine Flaggen benutzen, siehe Sprachwechsel und Flaggen.

Auch der Link selber kann natürlich in einer anderen Sprache geschrieben sein, als die ganze Website (<html lang=“de”>). Deshalb kann das a-Element auch ein lang-Attribut mit entsprechendem Sprachkürzel besitzen.

Neues Fenster? Nein, danke!

Noch eine Bitte: lasst die Finger vom target-Attribut. Lasst den Besucher selber entscheiden ob er die Webseite in einem neuen Fenster öffnen will oder nicht. Gerade bei alten PCs dauert es gerne länger, bis das neue Fenster geöffnet ist, hab’ da Erfahrungen im Praktikum gesammelt.

Kategorien
Browser

Firefox-Erweiterung ScreenGrab

Eine richtig nützliche Firefox-Erweiterung stellt ScreenGrab dar. Mit dieser Erweiterung sind Screenshots des Browserfensters und des Browserviewports möglich. Das ist nichts neues, das geht auch manuell.

Wirklich punkten kann die Erweiterung aber deshalb, dass sie sogar Screenshots der kompletten Seite machen kann, auch wenn diese 7× gescrollt werden müsste.

Zu finden ist die Funktion nach der Installation (Firefox neu starten nicht vergessenb) dann direkt nach einen Mausklick mit der rechten Maustaste in das Dokument:

Die Bilder werden im PNG-Format gespeichert. Seht selbst.

Nötig sind ein aktueller Firefox (> 1.0+, > 1.5b) und Java.

Kategorien
Webstandards

Vor- und Nachteile von semantischen HTML-Code + CSS

Immer mehr Seiten verwenden sauber strukturiertes, semantisch korrektes Markup. Man verwendet die Tags, die am ehesten das beschreiben, was der Inhalt darstellen soll. Überschriften werden in die Tags h1-@h6@ eingetragen, Menüs werden mit Listen erstellt. Die Formatierung erfolgt ausschließlich mit CSS (Trennung von Design und Inhalt).

Hier ein paar Vor- aber auch Nachteile (meistens für die Neueinsteiger) bei Verwendung von sauberem HTML + CSS:

Vorteile

  • Einheitliche Layouts
  • Schnelle Layout-Änderungen
  • Schnellere Ladezeiten, da das Stylesheet nur einmal geladen wird und dann im Cache liegt
  • weniger Trafficverbrauch, weil Dateien meist sehr viel kleiner ausfallen, was weniger Server-Hardware-Verschleiß und Traffic-Überschreitungen verursacht, Modembenutzer freuen sich
  • unnötiges Markup im HTML-Code verschwindet, da keine verschachtelten Tabellen, &lt;font&gt;-Tags usw. verwendet werden müssen
  • Optimierung für verschiedene Geräte (Druck-Stylesheets, PDA-/Handy) möglich
  • logischer strukturierter Code hilft beim bearbeiten, weil es übersichtlicher ist
  • Lesezeichen/Favoriten zeigen auch wirklich auf die angezeigte Seite und nicht auf das Frameset – Anfängerfreundlich
  • barrierearm, wichtig bei Seiten die der BITV unterliegen oder unterliegen wollen

Nachteile

  • alte Browser verstehen keine oder nur teilweise Stylesheets, daher siehst da nicht hübsch aus – dafür wird die Struktur durch richtig angewendeten Code verdeutlicht
  • der Internet Explorer hat Fehler in der Berechnung von Größen, die mit sogenannten Hacks ausgemerzt werden müssen/können – nicht so schwer, ist man einmal im Thema hat man es bald raus
  • ggü. Frames: aufwendig wenn sich Navigationslinks ändern, kann man aber mit Includes (phase 5, Freeware [frühere Versionen auch für Firmen]) verwalten (daher auch die wichtigkeit von strukturiertem Code)
  • möglich, dass die Einarbeitung lange dauert, besonders mit den IEBugs
  • Man lernt den Internet Explorer zu hassen ;)
Kategorien
Netzwelt Webstandards

Webkrauts – Web Standards jetzt auch in deutsch

Die Webkrauts haben sich zusammen geschlossen, um in Deutschland – und auf deutsch (!) – über Webstandard basiertes Webdesign zu diskutieren, debattieren und Werbung dafür zu machen.

Nachdem es schon reichlich fremdsprachige Projekte ans Licht der Welt brachten, war die Zeit reif für ein deutschsprachiges Projekt (jaja, Wortwiederholung).

Ich frage mich aber gerade, ob ich mich dort anmelden würde und ob ich es überhaupt dürfte. Ich mach ja sowas nicht professionell, was aber eh ein dehnbarer Begriff ist, und professionalität ist nun mal Bedingung. Alternativ kann man auch mitmachen, wenn man Werbung für Standard basiertes Webdesign machen möchte. Ich würd mich in diese Gruppe einordnen. Sollte es einer von den Webkrauts lesen, was hier meine Gedanken dazu sind: kommentieren! ;)

Mehr noch bei ›Dr. Css‹ Björn Seibert

Kategorien
PHP

Alle GET-Variablen mit PHP auslesen

Wie man alle GET-Variablennamen und -werte auslesen und ausgeben kann, steht im phpforum.

foreach ($_GET as $key => $value )
{
echo "Name: ",$key,"   Wert :",$value;
}

oder

print_r($_GET);

Jetzt muss ich das nur ein wenig verfeinern weil nicht alle ausgegeben werden sollen.

Ich habe das gebraucht, um erstmal alle GET-Variablen zu sammeln, keine Sorge.

Kategorien
Typographie Webstandards

Schriftgrößen

Björn Seibert haut mal wieder geballtes Fachwissen in die Welt, diesmal geht es um Schriftgrößen.

Er geht darauf ein, dass noch oft gepredigt wird, fixe Schriftgrößenangaben zu verwenden obwohl diese im IE nicht vergrößert werden können und somit sehr benutzerunfreundlich sind.

Außerdem geht es um einen Fehler im IE 5.xx, der mit em-Größenangaben nicht zurecht kommt wenn man bespielsweise die Schriftgrad-Einstellung (Ansicht, Schriftgrad) ändert. Er empfielt Prozentwerte zu verwenden.

Viel Spaß beim lesen.

Kategorien
Software Webstandards

Hier gibts kein nofollow mehr

Hab jetzt endlich mal den Mist entfernt. Links von Kommentatoren hier dürfen nun also von Google verfolgt werden.

Hat das bisher jemandem vom kommentieren abgehalten? War hier jemand geil auf PageRank und hätte ihn nicht bekommen?

Zum Glück laufen hier nicht so viele Pokerspieler und Texaner auf. Noch!

Kategorien
Webstandards

W3C-Validator in neuem Outfit

Der HTML-Validator vom W3C ist seit heute im neuen Dress zu bewundern.

Von mir wahrgenommende Änderungen:

  • feste Breite
  • Die Fußzeile hat auch eine feste Breite, die sehr schmal ausfält
  • dicker, grüner, satter Balken bei erfolgreicher Validierung
  • Auch wenn die Seite valide ist, kann man Einstellungen ändern, war früher nicht so

Viel Spaß beim testen!