Kurs 1a, Webseitengestaltung für KompoZer 0.8b1

Übung 13, Validierung

Die für diese Aufgabe verwendeten badges sind in dieser Spalte verkleinert enthalten:

KompoZer-Link
HTML-Validierung
CSS-Valisierung
Validome-Link

Die Verkleinerungen hier übernehmen ihre Größe von Inline- Styles, die per Dialog 'Grafik- Eigenschaften' (Öffnen per Doppel- klick auf die Grafik) im Register 'Größe' beliebig einstellbar sind.
Ist bekannt, welchen Weg durch die Website ein Besucher nehmen wird, kann die Ladezeit umfangreicher Grafiken vorverlegt und der Besucher mit schnellem Bildaufbau verwöhnt werden.
Hierzu das Laden der Grafik in die Zeit legen, wo der Besucher mit Lesen aufgehalten wird. Auf der Leseseite wird die Grafik mit der Größe 1x1px eingebunden. Damit ist sie unsichtbar nach dem Laden vorhanden.
Beim Aufrufen der Seite mit der vollen Anzeige des Bildes, wird dieses sofort angezeigt. Die Zeit zum Betrachten kann dann schon wieder mit dem nächsten, 1x1px großen Bild genutzt werden.

Das Ganze ist aber eher eine Kunst aus vergangenen Tagen mit langsamem Internet. Bedenklich ist dabei heute, dass der Besucher vielleicht über sein Mobilphone auf die Seite gelangt oder mit einem USB-Stick und Flatrate ins Internet geht. Da wird der Besucher bei ungenutzten großen Bildern unnötig zur Kasse gebeten oder eventuell nach Überschreiten eines festen Daten-Volumens auf 56kbit/s runtergetaktet.
Ausserdem gibt es Situationen, wo CSS vom Besucherbrowser nicht ausgewertet wird. Dann erscheint das Bild in voller Schönheit und sinnlos, weil unpassend zu früh.

Ziel der Übung 13:

Vor einer Veröffentlichung einer Seite sollte auch das Korrekturlesen nicht vergessen werden. Am Ende wird dokumentiert, dass die Seite auch standardkonform ist, also validen Code enthält.

Vorgehensweise:

Die Seite wird nicht mehr viel verändert, nur überprüft. Nach dem Testen erhält die Seite badges, über die ein Besucher die Konformität selbst abfragen kann.

Aufträge:

a) a) Diese Datei wird als "ziel13.html" gesichert. Der Titel wird "Ziel 13" lauten und der Autor bist du.

| Menü 'Format' | 'Seitentitel und -einstellungen' | Dialog 'Seiteneigenschaften', 'Titel:' Ziel 13, 'Autor:' Dein Name | OK | Menü 'Datei' | 'Speichern unter' "ziel13.html" |

b) Unter 'Extras' findet sich im KompoZer-Menü 'Quelltext säubern'. Von den dort angebotenen Problemlösern soll das Ersetzen einer lokalen Adresse getestet werden.

Lokal bedeutet, die Adresse der Seite bezeichnet eine Datei auf der Festplatte.
Die Adressen von aufzurufenden Seiten können absolut und relativ angegeben werden. Enthält die lokale Adresse die Bezeichnung des Festplattenverzeichnisses und die Laufwerksangabe, dann ist das eine absolute Adresse. Es ist egal, wo die Seite mit der Adresse sich befindet, die Zielseite wird unabhängig vom Speicherplatz der Startseite gefunden.
Eine relative Adresse geht vom Speicherplatz der Seite, die die Adressangabe enthält aus. Es ist nicht egal, wo sich die Seite mit der Adresse befindet, die Adresse der Zielseite wird wie ein Weg aus Blickrichtung der Startseite beschrieben. Befindet sich die Zielseite im gleichen Verzeichnis wie die Startseite, gibt es gar keinen Weg, die relative Adresse nennt dannnur den Dateinamen der Zielseite.

Der Unterschied lässt sich auf deiner Festplatte mit KompoZer leicht zeigen.

b) Der oberste Link "Diese Seite" verweist auf ein nicht existierendes Ziel. Dieses Ziel ist der äußere Rahmen mit dem ID-Selektor #rahmen. Mit dem Eintragen dieses Zieles kann im Dialog KompoZer die Adresse relativ oder absolut angeben.

| Geteilte Ansicht | In der Navigation den obersten Link doppelklicken | Dialog 'Link-Eigenschaften | Linkadresse #rahmen in der Auswahlliste auswählen. (Damit steht die relative Adresse in der Eingabezeile des Dialogs) | Das Häkchen darunter bei 'URL relativ  zur Seitenadresse' entfernen. (Jetzt steht die absolute Adresse in der Eingabezeile) | Das Häkchen wieder setzen. (Die relative Adresse ist jetzt komplettiert mit dem Dateinamen mit "ziel13.html#rahmen" auch für alle anderen Seiten im gleichen Speicherort als relative Adresse und Sprungziel verwendbar) | Abschließend das Häkchen wieder entfernen, um absolut zu adressieren | OK |

Die absolute Adresse mit "file///......." gilt für den lokalen Speicherort auf der Festplatte. Die absolute Adresse dieser Übung 13 im Internet ist http://www.elew.de/kurs1a/uebung13.html. In der Startseite zu diesem Kurs ist diese Adresse aber relativ angegeben. Startseite "index.html" und "uebung13.html" liegen beim Provider im selben Verzeichnis. Daher lautet die relative Adresse dieser Übung nur "uebung13.html".

c) Bleibt die absolute Adresse so wie jetzt beim Hochladen ins Internet erhalten, kann der Browser eines Besuchers den Sprung nicht ausführen, es kommt zu einem Fehler. Deshalb wird die absolute Adresse von KompoZer jetzt bereinigt.

| Linksklicken auf den obersten Link des Navi für die Anzeige der absoluten Adresse im Quelltext unten | Menü 'Extras' | Dialog 'Quelltext säubern' | Häkchen bei 'Lokale URLs mit relativen URLS ersetzen' setzen | Schaltfläche 'Säubern'  (Unter 'Bericht' sollte nun im Dialog eine 1 stehen, denn eine lokale URL wurde ersetzt) | 'Schließen |

d) Das nächste Untermenü nach 'Quelltext säubern' ist im selben Menü 'Extras' das 'Quelltext überprüfen'. Dies kann angewendet werden, wenn KompoZer eine Internetadresse mit auf den Weg geben kann. Ist die geladene Seite nur auf der Festplatte vorhanden, funktioniert das nicht. Wird aber eine Webseite mit KompoZer geladen oder hochgeladen, dann wird bei dieser Quelltextprüfung der Markup Validation Service vom W3C  Konsortium aufgerufen. Das geschieht auch am Ende dieser Übung mit Hilfe eines badges zum Anklicken. Zum Probieren mit KompoZer eine der anderen Übungen aud dem Internet laden und deren Quelltext überprüfen.

e) Unten in der Fußleiste "Sockel" soll der Text durch vier benutzerfreundliche, weil anklickbare badges ersetzt werden. Zuerst erhalten sie ihre Originalgröße zurück.

| Doppelklick auf die Grafik neben dem Text "KompoZer-Link" in der rechten Spalte oben | Dialog 'Grafik-Eigenschaften' | Register 'Größe' | Häkchen bei 'Originalgröße' | OK | Diese Prozedur bei den drei anderen badges darunter wiederholen |

In der Quelltext-Teilansicht ist die Größenangabe als Inline-Style zu sehen. KompoZer fügt das immer wieder an, wenn die Grafik im Dialog behandelt wird. Dieser Inline-Style hat den Vorteil, dass die Grafik nur in dieser Größe dargestellt wird. Soll die Grafik sich in Grenzen anpassen oder wird <img> durch CSS formatiert, darf das Löschen dieses Inline-Styles nicht vergessen werden.

f) Die vier badges werden in eine Reihe nebeneinander durch ein Leerzeichen getrennt in die Fußleiste ganz unten verlagert. Die Grafiken sind dann aus der rechten Spalte entfernt.

| Die Grafik neben dem Text KompoZer-Link anklicken | Menü 'Bearbeiten' | 'Ausschneiden' | Ganz unten auf der Seite vor das Wort "Mit" klicken | Menü 'Bearbeiten' | 'Einfügen | Leerzeichen rechts daneben setzen | Die restlichen drei badges auf die gleiche Art rechts daneben einfügen.

g) Der ganze Text in der Fußnote wird gelöscht. Es fehlen noch die Zieladressen für die badges. Hierfür enthält der Dialog 'Grafik-Eigenschaften' das Register 'Link'. Die vier Zieladressen sind die absoluten Adressen:

KompoZer:
http://www.kompozer.net/

W3C HTML 4.01:
http://validator.w3.org/check/referer

W3C CSS:
http://jigsaw.w3.org/css-validator/check/referer

und Validome HTML 4.01 in einer Zeile ohne Leerzeichen:
http://www.validome.org/lang/ge/get/
http://www.elew.de/kurs1a/ziel13.html

| Auf eine Grafik doppelklicken | Dialog 'Grafik-Eigenschaften' | Register 'Link' | Zieladresse eintragen | OK | Prozedur noch dreimal wiederholen |

Da in der allgemeinen Regel a ein display: block; steht, ordnen sich die badges untereinander an. Die Links gehen dadurch auch bis zum Zeilenumbruch, also über die ganze Breite. Gut zu sehen beim Hover-Effekt.

h) Die Übung soll nicht zu lang werden. Aus der allgemeinen Regel für a könnte eine Klasse für sich werden, die nur für die Navi gilt. Dann wären die badges den Effekt los. Stattdessen wird die allgemeine Regel überschrieben.

Für die badges gibt es im internen Stylesheet schon die Klassen a.imtext und a.imtext:hover. Bei a.imtext wird display: block; durch display: inline; ersetzt. Damit ist es möglich, den Zeilenumbruch zu vermeiden. Der Hover-Effekt wird auf weißen Hintergrund umgeändert. Muss nur noch die Klasse zugeordnet werden.

| Badge anklicken | In der Statuszeile <a> rechtsklicken | Kontextmenü 'Klassen' | Regel .imtext per Häkchen zuweisen | Prozedur noch dreimal wiederholen |

i) Wie zu sehen war, geht eine durch display: block; simulierte Schaltfäche über die ganze Breite. Dadurch kann die Navi auch eine variable Breite einnehmen und ein flüssiges Layout geht dann auch mit zwei Spalten. Eine kräftige Layoutänderung auf zwei Spalten soll mit wenigen CSS Änderungen erreicht werden.

Die linke Spalte erhält 15% der Bildbreite und kommt nach rechts.
Die rechte Spalte erhält 83% der Bildbreite und kommt nach links.

| CSS Editor | Regel #links | Register 'Allgemein' , float:left; zu float: right; und width: 6.6em; zu width: 15%; ändern | Regel #rechts | Register Allgemein , float: right; zu float: left; ändern und width: 16em zu width: 83%%; | OK |

j) Schlusskosmetik: Die Überschrift noch auf das Wort "Validierung" kürzen und in der Aussage, "die badges sind in dieser Spalte.."  das "sind" durch "waren" ersetzen.  Schließlich die Mitte komplett nach Erledigung der Aufträge löschen.

| In die Mitte, diesen Rest hier klicken | In der Stautszeile <div#mitte> linksklicken | [Entf] drücken zum Löschen.
Nicht vergesssen, die badges zu benutzen.

Mit KompoZer 0.8b1 mit den in 12 Übungen erworbenen Techniken erstellt.