All in One ist ein Projekt zur Erkundung der Möglichkeiten von modularisiertem XHTML, das striktes XHTML 1.0 weiter entwickelt. Der Projektname All in One rührt daher, dass der Versuch unternommen wird, eine kleine Website im Umfang einer "Visitenkarte" mit nur einer einzigen HTML-Seite und ein paar Grafikdateien zu gestalten. Im Gegensatz zu verbreiteten Inhalten der "Visitenkarten" geht es hier nicht um "Ich über mich" sondern rekursiv um die Frage, wie man mit XHTML eine kleine Machbarkeitsstudie zu XHTML schaffen kann.
Die puristisch anmutende Navigation in diesem Angebot erfolgt stets über die links versteckte Menü-Leiste. Bewegt man den Mauszeiger über den Menürand, klappt die Leiste auf und offenbart die Links zur Auswahl der Themen. Wenn man in einem längeren Text nacht unten rollt, führt ein Mausklick auf diesen Rand automatisch zum Beginn der Seite.
Neben einigen Bemerkungen zu XHTML und zu den Zielen des Angebots, dienen die weiteren Seiten zur Erprobung der Einbettung von besonderen Objekten, die auch sonst auf Webseiten zu finden sind.
Wenn man auch Applets anzeigen will, ist es z.Zt. unmöglich, ohne Browserweichen ein XHTML-konformes Angebot zu schreiben, das wenigstens von den beiden meist genutzten Browserfamilien richtig dargestellt wird. All in One erfüllt diese Kriterien, aber das ging nicht ohne eigentlich unangemessene Tricks, nämlich der Nutzung der "Conditional comments", die nur der Internet Explorer ab Version 5 kennt.
Es gibt auch ein Problem mit externen Fenstern und mit Fremdseiten.
Nach den Vorstellungen des W3-Konsortiums (W3C) sollte man den Inhalt des eigenen Fensters ersetzen. Zu meinen Vorstellungen von Hypertexten passt es jedoch nicht ganz, wenn man kurz etwas nachschlagen will und dann im Ursprungstext wieder mühsam zu der verlorenen Stelle navigieren muss.
Zu allem Überfluss verhalten sich bei extern geöffneten Fenstern manche Versionen des IE "buggy": Im Ursprungsfenster werden u.U. neu geöffnete Layer ohne Hintergrundbild oder -farbe angezeigt. Auch das wird in diesem Angebot nur durch "dirty tricks" umgangen.
Es soll hier nicht erklärt werden, wie man Webseiten in XHTML schreibt. Dies ist viel mehr ein Versuch, ein Angebot auf der Basis von XHMTL 1.1 zu gestalten, um zu erkunden, was schon oder noch geht, wenn man auf liebgewonnene Techniken bei der Seitengestaltung verzichtet.
XHTML 1.0, die erste Version von XHTML, kennt die Varianten Frameset, Transitional und Strict. Die ersten beiden Varianten stellen nur Übergangslösungen dar; zukünftig soll nur noch Strict weiter entwickelt und unterstützt werden. XHTML 1.1 ist eine modularisierte Version von XHTML 1.0-Strict. Will man die neueste Version verwenden, bedeutet das
Diese Ansätze werden hier verfolgt, um das Projekt einer kleinen Website in einer einzigen HTML-Seite zu realisieren, die sowohl Inhalte als auch Formatierungen enthält. Dies soll keinen Widerspruch zu dem Ziel darstellen, künftig Inhalte und Formate strikt zu trennen. Die grundlegenden Formatdefinitionen wurden bereits in eine CSS-Datei ausgelagert.
Die weiteren Themenseiten befassen sich mit dem Versuch, bewährte multimediale und interaktive Elemente in die Struktur einzubringen, ohne die Validierungsanforderungen zu verletzen.
Formeln mit ASCIIMathML lassen sich ohne Änderungen in XHTML-Seiten einbauen.
Achtung: Die Formeln werden angezeigt, wenn man - nur sofern man den Internet Explorer benutzt - das kostenlose Browser-Plugin MathPlayer von DesignScience installiert hat. Dafür lassen sich die mathematischen Ausdrücke dann per Mausklick hervorheben, was in Mozilla-Browsern nicht funktioniert.
$(NN_0,+)$ und $(NN,*)$ sind
regulär, d.h.
$AA a,b,c in NN_0: a+c=b+c hArr a=b$,
$AA a,b,c in NN: a * c = b * c hArr a = b$.
Die Erweiterung aus algebraischer Sicht
Die Struktur $(NN,\ *)$ ist regulär und
enthält 1 als neutrales Element. Sie ist aber
keine Gruppe, da es nur im Falle $a|b$ ein $x in
NN$ mit $a*x = b$ gibt.
Wir konstruieren eine kommutative Gruppe $(QQ^+,
*)$, in der solche Gleichungen stets lösbar
sind und in die $(NN, \ *)$ eingebettet werden
kann. Es soll also eine injektive Abbildung $phi:
NN rarr QQ^+$ geben, die mit der Multiplikation
verträglich ist. Darüber hinaus soll
$phi$ nach Erklärung der Addition + und
Kleinerbeziehung < in $QQ^+$ auch mit + und <
verträglich sein.
Schritt 1:
In der Menge $NN xx NN$ aller Paare
natürlicher Zahlen sei die Relation ~
erklärt durch
$(b, a) ~ (d,c) :hArr b*c = a*d$ .
Schritt 2:
Offensichtlich ist ~ eine Äquivalenzrelation
(Nachweis in Übung 2), d.h. es gilt für
alle $a, b, c, d, f, g in NN:$
$(b, a) ~ (b, a)$ (Reflexivität)
$(b, a) ~ (d, c) rArr (d, c) ~ (b, a)$
(Symmetrie)
$(b, a) ~ (d, c) ^^ (d, c) ~ (g, f) ) rArr (b, a)
~ (g, f)$ (Transitivität)
Damit zerlegt ~ die Menge $NN xx NN$ in
Äquivalenzklassen und wir definieren die durch
(b, a) repräsentierte Bruchzahl $a/b$ als die
Äquivalenzklasse
$[(b, a)] := {(d, c) in NN xx NN | (d, c) ~ (b,
a)}$ .
Später schreiben wir an Stelle von $[(b, a)]$
kürzer $a/b$ .
Schritt 3:
Wir definieren die Verknüpfungen · und
+ in der Menge der Bruchzahlen in der Form
$[(b, a)] * [(d, c)] := [(b * d, a * c)]$
$[(b, a)] + [(d, c)] := [(b * d, a * d + c * b)]$
.
Definiert man die Kleinerbeziehung in $QQ^+$ in
der Form
$[(b, a)] < [(d, c)] :hArr a * d < b * c$
,
so erweisen sich die Multiplikation, die Addition
und die Kleinerbeziehung als wohldefiniert, d.h.
repräsentantenunabhängig.
Die Einbettung von $NN$ in $QQ^+$ erfolgt in
natürlicher Weise durch die Abbildung $phi$
von $NN$ nach $QQ^+$ mit der Vorschrift
$phi(n) := [(1, n)]$ für alle $n in
NN$.
Offensichtlich ist $phi$ eine injektive und
strukturverträgliche Abbildung.
Neben den verworfenen HTML-Attributen, insbesondere im Zusammenhang mit Formularen und Tabellen, ist das Applet-Tag zu entfernen; man braucht stattdessen ein Object-Tag. Eine Lösung für die beiden großen Browser gibt es nur mit der hier eingebauten ganz speziellen und komplizierten Lösung, die auf Browser reagiert und Spezifika ausnutzt. Der Code bleibt dabei XHTML-konform.
Leider verhindert der unter "Schaufenster-Effekte" beschriebene Layer-Bug der Mozilla-Familie die Sichtbarkeit des Applets. Es gilt wieder die dort angegebene Ausnahme. Notfalls müssten also Applet und Film auf dem gleichen Layer stehen und am Ende des Quellcodes eingetragen sein. Weitere Schwierigkeiten werden von Windows XP mit "SorgenPack 2" berichtet.
In dieser Lerneinheit vertiefen wir die
Beschäftigung mit Zuordnungen und bringen auch die
Formeln wieder ins Spiel. Als Beispiel greifen wir noch
einmal die recht einfache Formel zur Berechnung des
Flächeninhalts eines Rechtecks auf. In der
Lerneinheit 2.2.4 hieß es:
Ein Wohnzimmer mit rechteckiger Bodenfläche habe
die Seitenlängen c und d.
Für den Flächeninhalt A gilt also: $A =
c*d$.
Bei der Planung der Raumverteilung eines
Hauses könnte es nun sein, dass ein
Maß c des Wohnzimmers, nennen wir es
Länge, durch die Lage im Haus
unveränderlich festgelegt ist. Bei der
Breite d gebe es dagegen einen Spielraum,
der theoretisch von 0 (kein Wohnzimmer!)
bis zur maximalen Hausgröße
ginge. Dem nebenstehenden Grundriss kann
man entnehmen, dass die Länge mit
c = 6,00 m unveränderlich
feststeht.
In diesem Fall kann man sagen, dass eine
Zuordnung besteht, bei der der
Flächeninhalt A des Wohnzimmers
von der gewählten Breite d
abhängt.
Diese Zuordnung mit der Formel $A = c*d = 6*d$ wird zunächst durch eine Tabelle dargestellt. Fülle sie vollständig aus und überprüfe danach deine Eintragungen:
Einen Graphen erstellen
Nun werden die notierten Wertepaare benutzt, um den
Graph der Zuordnung zu erstellen. Es folgt ein Applet,
in dem ein passendes Koordinatensystem
einschließlich Gitter zur besseren Ablesung
bereits vorbereitet ist.
Klicke mit der Maus an die richtigen Stellen des
Rasters, um die Datenpunkte aus der Tabelle
einzutragen. Ein Klick auf den Knopf "Undo" löscht
den jeweils zuletzt eingetragenen Punkt. Mit dem
Testknopf, der erst erscheint, wenn du alle Punkte
eingetragen hast, kannst du deine Lösung
überprüfen. Die Punkte werden vorher
automatisch mit Linien verbunden.
Sicher ist dir bereits an der Tabelle aufgefallen, dass zwischen der Breite d und dem Flächeninhalt A des Wohnzimmers ein ganz besonderer Zusammenhang besteht. Bei jeder Steigerung der Breite um 50 cm ist der Flächeninhalt um 3 m2 angewachsen. Dieses regelmäßige Ansteigen zeigt deutlich erkennbar auch der Graph. Bei dem Beispiel mit der Zuordnung Datum - Temperatur in der vorangegangenen Lerneinheit hat es eine solche Regelmäßigkeit nicht gegeben.
Einbetten einer externen HTML-Datei als Objekt. Bei voller Funktionsfähigkeit wäre das der Schlüssel zur Vermeidung von Frame-Konstruktionen. Es bleibt die Frage, ob man den verbotenen Target-Parameter immer vermeiden kann.
Escher-Seite eingebettet: Aus der Fraktalwelt
Ergebnis
Diese Art von Schaufenster scheint im Prinzip keine Probleme zu
bereiten. Erstaunlicherweise tritt der Object-Bug in
Mozilla diesmal nicht auf und das eingebettete Objekt
scheint die Schichtenlage gemäß dem z-Index
anzunehmen. Das gilt wie gesagt für Mozilla; diesmal wird der z-Index vom IE 6.0 ignoriert, was aber außer einem sichtbaren (die Menüleiste fährt unter das Objekt) keine weiteren unangenehmen Effekte hat. Die eingebettete Seite sollte allerdings keine Links enthalten, die auf das eigene Angebot zurückführen. Selbst mittels Javascript ist dann keine Steuerung der aufrufenden Struktur möglich.
Es gilt nicht mehr den einstmals allgemein verpönten Schaufenstereffekt in jedem Fall zu vermeiden. Einige Anbieter betteln geradezu darum, ihren "Content" in die eigene Website einzubinden, freilich nicht ohne geschäftliche Interessen. Dazu bieten sie fertige Codeschnipsel an, die man direkt in seinen Quellcode einbinden kann.
Geht das XHTML-strict-konform? - Let's try:
1. Versuch: You Tube: We all love Ellen Feiss!
Das Original!
Ergebnis
Externe Videos lassen sich einbinden. Der Code ist
nicht konform, man kann ihn aber anpassen, indem man
den Embed-Einschluss entfernt. Type- und Data-Attribut
müssen dem Object-Tag einverleibt bzw. geschrieben
werden. Der Internet-Explorer braucht außerdem
den src- oder movie-Parameter mit dem Inhalt von
data.
Browser der Mozilla-Familie verhalten sich "buggy", wenn das Object auf einem Layer (div) liegt. Nur wenn der Layer mit dem Objekt im Quellcode zuletzt eingetragen ist, kann man den Filmlayer anklicken und starten. In diesem Fall bleibt der Objektlayer immer ganz vorne; der z-Index wird ignoriert.
2. Versuch: Ein eigenes Video: Desktopfilm
Die Aussage im Video ist nicht mehr wahr, weil sie durch den Einbau aufgehoben wurde.
Ergebnis
Der Code, der zum Einbinden eines Flashplayers (mediaplayer.swf) benötigt wird, ist XHTML-konform. Beide Browserfamilien reagieren auch ohne embed-Tag richtig.
Aber Vorsicht: Nicht alle der zahlreich angebotenen FLV-Player arbeiten sowohl mit IE 6 als auch mit Mozilla unter Flash 9 fehlerfrei zusammen.
Ergebnis
Externe Java-Scripte sind nutzbar. Der Code ist nicht ganz
konform, zur Anpassung muss das Language-Attribut
entfallen und die &-Zeichen müssen durch
Character Entities (&) ersetzt werden.
