Das nächste Webkompetenz-Tutorial

Nach dem Abschluss des Ajax-Tutorials fragen sich einige Freunde des Fortsetzungsromans vielleicht, was als nächstes dran kommt. Beschreibungswürdige Techniken gibt es ja zur Genüge. Meine Wahl ist allerdings auf etwas gefallen, das man eigentlich noch gar nicht wirklich zuverlässig dokumentieren kann, weil es noch gar keine endgültige Ausprägung hat und es auch noch gar keine vollständige Implementierung davon gibt. Dennoch wird aus der interessierten Fachwelt kaum jemand bezweifeln, dass es sinnvoll ist, sich möglichst frühzeitig damit auseinanderzusetzen. Es geht nämlich um nichts Geringeres als um die Brot-und-Butter-Sprache schlechthin: HTML.

Wie berichtet, soll HTML 5 nun definitiv kommen, und zwar wie gewohnt als Recommendation (offizielle Empfehlung) des W3-Konsortiums. Obwohl sich das Dokument, das später einmal die offizielle Empfehlung werden soll, noch in einem sehr frühen Working-Draft-Stadium (Arbeitsentwurf) befindet, lässt es doch schon erkennen, welche wesentlichen Neuereungen geplant sind. Und das sind mehr als nur einige. HTML wird in der neuen Vollversion „evolutionär“ erneuert, was heißen soll, dass ein Kompromiss zwischen Rückwärtskompatibilität und neuem Standard erreicht werden soll. Der Kompromiss besteht darin, dass Autoren keine veralteten Auszeichnungen mehr verwenden, Browser und andere User-Agents solche Auszeichnungen aber noch erkennen und verarbeiten sollen. Die Erneuerung besteht aus einer ganzen Reihe neuer Elemente und Attribute. Diese verfolgen vor allem zwei Ziele: erstens soll semantisch sinnvolles Markup wesentlich besser realisierbar sein als bisher, und zweitens soll HTML-Code besser für Scripting gerüstet sein, um moderne Webanwendungen besser zu unterstützen.

In dem geplanten Tutorial werden wir zunächst versuchen, etwas Klarheit in das Wirrwarr um die Spezifikation von HTML 5 zu bringen. Dann werden die derzeit absehbaren neuen Elemente und Attribute vorgestellt, und zwar im Zusammenhang mit den Konzepten, die dahinter stecken. Zuletzt wird das Tutorial noch erklären, was Sie selber tun können, um an HTML 5 mitzuarbeiten. Neben dem HTML-5-Tutorial wird die Einführung in Hypertext noch weitergeführt, so dass in nächster Zeit also diese beiden „Serien“ auf dem Webkompetenz-Kanal laufen werden.

Kuckstu hier: Google Maps jetzt auch als Inline-Frame

Wenn man schon im Impressum seiner Website seine Adresse angeben muss, kann man das ja auch gleich stilvoll tun, indem man einen passenden Kartenausschnitt präsentiert. Bislang war das immer eine Angelegenheit, die grafische Zusatzarbeiten erforderte und außerdem ganz leicht fremde Copyrights verletzte. Denn mal eben einen Screenshot von einem bei stadtplandienst.de oder ähnlichen Services angezeigten Stadtausschnittsplan anzupassen und als Grafik auf die eigene Website zu bringen sollte man aus urheberrechtlichen Gründen tunlichst vermeiden.

Die Allgemeinen Geschäftsbedingungen von Google Maps lesen sich zwar auch nicht wie eine Copyleft-Lizenz, sind jedoch so gehalten, dass zumindest das direkte Verlinken von Originalkarten aus Google Maps auf eigenen Webseiten nie einen Lizenzverstoß darstellte. Ganz im Gegenteil wurde diese Möglichkeit von Google sogar aktiv unterstützt. So gab es immer schon zu jedem angezeigten Google-Maps-Kartenausschnitt den Link URL zu dieser Seite, der das Kopieren einer URL ermöglichte, die genau den angezeigten Kartenausschnitt direkt aufrufbar macht. Sehr praktisch für Bookmarks, oder zur Verwendung in E-Mails oder auf eigenen Webseiten, um einen dort genannten Ort zu kennzeichnen

Klickt man URL zu dieser Seite an, bietet der dabei ausgelöste Popup-Layer mittlerweile jedoch noch eine neue Funktion an: den HTML-Code zum Einbetten des Kartenausschnitts in einen Inline-Frame:

Screenshot Google Maps

In einer zusätzlich aufrufbaren Vorschau kann man Größe und Aussehen des Inline-Frames noch weiter den eigenen Wünschen anpassen. Wer über entsprechende HTML/CSS-Kenntnisse verfügt, kann natürlich auch seine eigenen Vorstellungen im Quelltext verwirklichen. Hier ein Beispiel, wie so etwas hinterher auf einer eigenen Webseite aussehen könnte:

Der HTML-Code dazu:

<iframe width="95%" height="300" frameborder="no" scrolling="no" 
marginheight="0" marginwidth="0" 
style="border: solid 6px rgb(195,217,255); -moz-border-radius: 6px" 
src="http://maps.google.de/maps?q=Dorotheenstra%C3%9Fe+84,+10117+Berlin&ie=UTF8&om=1
&s=AARTsJpTBbyW_tifyvpBxE0OBXm6zIut0w&ll=52.524264,13.387957
&spn=0.018278,0.036478&z=14&iwloc=addr&output=embed">
</iframe>

Der Kartenausschnitt bietet dank der Einbettung als Inline-Frame die Originalfunktionalität von Google Maps. So kann man den Kartenausschnitt mit der Maus ändern und zoomen. Ein Klick auf die in der Sprechblase angezeigten Adresse öffnet den Kartenausschnitt im gesamten Browserfenster.

Das Einbetten einer Google-Maps-URL in einem Inline-Frame war natürlich auch schon früher möglich. Jedoch wurde dann einfach die entsprechende Google-Maps-Seite eingebunden, mitsamt aller Navigationsbereiche. Die jetzt von Google angebotene Möglichkeit lädt dagegen nur den reinen Kartenausschnitt in den Inline-Frame. Ein Ärgernis für HTML-Puristen bleibt natürlich das ganze Thema Frames. Verwendet man im HTML-Code einen Inline-Frame, kann man für betroffene Webseiten keinen der empfohlenen HTML-Standards (HTML 4.01 strict, XHTML 1.0 strict) mehr anwenden. Doch das ist letztlich ein Problem der nicht mehr praxisgerechten HTML/XHTML-Spezifikation: während klassische Framesets tatsächlich langsam am Aussterben sind, nimmt die Bedeutung von Inline-Frames immer weiter zu. Gerade im Web-2.0-Bereich finden sich häufig Inline-Frames. Trost für wackelnde Puristen: in HTML 5 (wir berichteten) wird das iframe-Element zum empfohlenen Standard gehören.

HTML-5 reift nun auf W3C-Server

Wie berichtet, ist die Geschichte von HTML mittlerweile doch nicht mehr nur die Vorgeschichte von XHTML, sondern geht ihre eigenen Wege weiter. Das W3-Konsortium, hat, um eine Spaltung bei der Standardisierung der Basis-Sprache von Webseiten zu vermeiden, in letzter Zeit eine ungewöhnliche Eile an den Tag gelegt. Als Ergebnis davon ist nun unter der Adresse http://www.w3.org/html/wg/html5/ ein Frühstadium der geplanten neuen HTML-Version 5 zu sehen. Genaugenommen befindet sich das Dokument noch nicht mal im Working-Draft-Zustand, weshalb es als „W3C Editor's Draft“ ausgegeben wird, eine Art Vorab-Working-Draft.

Die ersten Abschnitte des Dokuments lassen deutlich das Tauziehen der letzten Monate erkennen. Eine mühsame Koalition mit der WHATWG soll das Dokument voranbringen. Immerhin können Interessierte dort mal schön auf einen Blick sehen, was an Neuerungen geplant ist. Web-Entwickler dürfen sich auf neue HTML-Elemente freuen wie nav (für Navigationsleisten), article (z.B. für News- oder Blog-Beiträge), aside (für Marginalspalten oder abgesetzte Kästen, die vom Haupttext getrennt sind, aber einen Bezug darin haben), header und footer (für Kopf- und Fußbereiche von Webseiten), diverse spezialisierte Multimedia-Elemente wie figure, audio, video, source und canvas. Alles Neuerungen, die aus der Wunschkiste der Praktiker kommen. Sogar alte, längst verstoßene Bekannte wie embed und iframe sind wieder mit von der Partie, weil sie in der Praxis nie totzukriegen waren. Mit Spannung verfolgt werden darf auch die neue Abteilung für interaktive Elemente, zu denen Neuerungen wie details, datagrid oder command gehören. Diese Elemente sollen vor allem Standardaufgaben bei Webanwendungen so beschreibbar machen, dass kein zusätzliches Scripting mehr dafür nötig ist.

HTML 5 gibt also das mit XHTML 2 verfolgte Konzept der Elementreduzierung auf. Stattdessen soll eine ganze Reihe neuer Elemente und Attribute für mehr semantische Eindeutigkeit auf Webseiten sorgen. Eine Botschaft, die in der Praxis ankommt! Doch wie lange wird das Dokument auf dem W3-Server wohl noch reifen müssen, bis es den ersehnten Status einer offiziellen Recommendation (Empfehlung) haben wird, die dann auch für Browser-Anbieter zuverlässig gilt? Glaubt man dem Schedule of Deliverables der HTML-Arbeitsgruppe des W3C, soll die Empfehlung 2010 fertig sein. Da regt sich doch schon wieder Ärger an der Basis: ist denn der Review-Prozess tatsächlich nicht schneller durchführbar? Müssen dazu wirklich drei weitere Jahre vergehen?

Tabellenlayouts einmal anders

Über das Webthreads-Blog bin ich auf ein japanisches YouTube-Video gestoßen, das die alte HTML-Tabellenkunst und den kreativen, zweckentfremdenden Umgang mit der Markupsprache HTML noch einmal richtig hochleben lässt:

Nun ist die Idee nicht neu. Schon vor Jahren kursierten Quelltexte im Web, in denen HTML-Tabellen so fein gerastert werden, dass daraus Pixelgemälde werden. Neu ist, dass einer der Wahnsinnigen, die sich mit so etwas befassen, seine ganze Editierarbeit bis zum fertigen Manga-Girl als Zeitraffer-Video aufgenommen hat und damit etwas Einblick gibt in seine Werkstatt. Wer also keine Zeit mehr findet, die diesjährige Documenta in Kassel zu besuchen, kann mit diesem Video ein wenig moderne Kunst schnuppern.

Neues von der Zukunft von HTML

Unter dem Titel Weiterentwicklung von HTML kommt voran ist im SELFHTML Weblog ein Beitrag erschienen, der den aktuellen Stand der Diskussionen rund um die Zukunft von HTML zusammenfasst. Auch andere Magazine berichten immer mal wieder über das Thema, so etwa der Golem-Beitrag W3C nimmt die Weiterentwicklung von HTML wieder auf.

Interessant ist, dass nun offenbar versucht wird, die drohende Spaltung zwischen W3-Konsortium und WHATWG zu vermeiden (wir berichteten). Die offene HTML-Arbeitsgruppe des W3-Konsortiums plant dem Blog-Beitrag zufolge, Teile der unter dem Code-Namen HTML 5 gehandelten Vorschläge der WHATWG in ein W3-gesegnetes HTML 5 zu übernehmen. Ein wichtiger Auslöser dazu war wohl dieses Mailinglisten-Posting von David Baron (Mozilla Foundation). Allerdings gibt es offenbar durchaus konträre Standpunkte innerhalb der offenen HTML-Arbeitsgruppe des W3-Konsortiums, sodass die letzte Entscheidung noch nicht gefallen ist.

Endlosdiskussionen kann sich die offene Arbeitsgruppe allerdings nicht erlauben. „The HTML working group has not yet begun working on a specification. While we wait for the work in the HTML working group to start, we are continuing on our work on the WHATWG specs.“ Diese Aussage auf der Startseite der WHATWG darf durchaus als Wink mit dem Zaunpfahl verstanden werden, binnen einer angemessenen Frist zu einer klaren Entscheidung in Sachen HTML zu kommen.

Hintergrund der Querelen sind vor allem die Vorstellungen des W3-Konsortiums zum propagierten Nachfolgerstandard XHTML 2.0, der zum einen in vielen Punkten nicht mehr rückwärtskompatibel zu herkömmlichem HTML und XHTML 1.x ist, und der andererseits etliche Wünsche an HTML, die im Laufe der Jahre in der Praxis entstanden sind, nicht berücksichtigt. Der Entwurf der WHATWG orientiert sich dagegen bewusst an diesen Wünschen aus der Praxis. Dazu gehören beispielsweise verbesserte HTML-Formulare im Hinblick auf die immer zahlreicher werdenden Webanwendungen, mehr Klarheit beim Einbetten von Multimedia oder die HTML-seitige Unterstützung der Ajax-Schnittstelle.

Jens Meiert über den Kampf der HTML-Entwürfe

Zwar haben sich zu den klassischen Texten im Web mittlerweile eine Menge multimedialer Inhalte hinzugesellt. Doch das ändert nichts daran, dass immer noch HTML oder XHTML die Basis fast aller Webseiten ist, und daran wird sich wohl auch in den nächsten Jahren nichts ändern.

Grund genug, die Entwicklung dieser Basis- und Schlüsseltechnologie zu verfolgen. Jens Meiert gehört zu denen, die diese Entwicklung genau mitverfolgen und darüber berichten. In dem gerade erschienen Artikel (X)HTML 5 und XHTML 2 im Vergleich, einem Artikel, den Meiert aus dem Englischen übersetzt hat, wird der aktuelle Stand der Dinge unter dem Aspekt beleuchtet, dass mittlerweile zwei konkurrierende Entwicklungsstränge existieren.

Der eine ist der offizielle Strang: XHTML 2.0 vom W3-Konsortium. Derzeit noch immer im Stadium eines Entwurfs (working draft), verfolgt XHTML 2.0 vor allem die perfekte Integration in die XML-Welt sowie den konsequenten Abschied von allem physischen Markup.

Die Vorstellungen der W3C-Arbeitsgruppe zu HTML sind in den letzten Jahren jedoch immer stärker in die Kritik der Fachwelt geraten. Praxisfernes HTML aus dem akademischen Elfenbeinturm sei das, was dort produziert werde, so die Kritiker. Gleichzeitig begannen auch vom W3-Konsortium mehr oder weniger unabhängige Arbeitsgruppen, alternative Entwürfe für einen künftigen HTML/XHTML-Standard zu entwickeln. Die bekannteste dieser Initiativen ist die WHATWG Community. Dort entsteht eine Spezfikation mit dem Titel Web Applications 1.0, die soeben (12.03.2007) in einer neuen Working Draft veröffentlicht wurde.

Meierts übersetzter Artikel leistet eine Gesamtschau über die Stärken und Schwächen der beiden Entwürfe. Dabei spart er nicht mit Wertungen. Es gibt eine Menge, was der Artikelautor cool findet, aber auch so einiges, was er für ganz und gar uncool hält. Der Artikel ist damit ein lebendig geschriebener, guter Einstieg, um sich vielleicht einmal näher mit den beiden Entwürfen zu befassen.

Insgesamt kommt der W3C-Entwurf zu XHTML 2.0 etwas besser weg. Es mag der Blick „in the long run“ sein, der einer konsequenten XML-Integration auf die Dauer den Vorzug gibt vor zweifellos nachvollziehbaren Bemühungen, (X)HTML der gegenwärtigen Praxis anzupassen.

Doch wer sagt eigentlich, dass es ein Rennen sein muss, das nur einen Sieger haben kann? Was sollte dagegensprechen, führende Browser künftig einfach mit Parsern für beide Dokumenttypen auszuliefern? Webautoren könnten sich dann für den Dokumenttyp entscheiden, den sie für ihre Zwecke besser gebrauchen können, oder mit dem sie einfach vertrauter sind. Vielleicht geht der Weg einfach dahin, sich von dem einen, alleinseligmachenden HTML zu verabschieden. Ein Zerbrechen der Einheit des Web wäre dadurch jedenfalls nicht zu befürchten.

Diskussionen zu diesem Eintrag im Webkompetenz-Forum:
Jens Meiert über den Kampf der HTML-Entwürfe

Das Elend invalider Templates

Nun bin ich ja einer, der aus der Ecke selbstgemachtes HTML kommt. Da überkam mich natürlich das Gruseln, als ich mal den W3C-Validator auf dieses Blog loslies. Die Liste der HTML-Verfehlungen in der Template-Engine von blogger.com ist wirklich schlimmer als alles, was Homepage-Novizen so fabrizieren. Darüber können auch die ganzen im Quelltext so supercool und professionell aussehenden outer-wrapper-divs und dergleichen nicht hinwegtäuschen.

Es geht schon mit Blog-Einträgen wie diesem hier los: ein gesamter Blog-Eintrag wird von der Template-Engine automatisch in <p>...</p> eingeschlossen, was völliger Unfug ist. Denn dadurch führt jede Verwendung von Zwischenüberschriften, Listen und anderen Blockelementen innerhalb des Eintrags zu einem groben Verstoß (p-Elemente dürfen keine anderen Blockelemente enthalten). Aber die Liste der Mängel ist noch viel, viel länger. Ein Thread der Blogger Help Group hat das Elend bereits angeprangert.

Eine besondere Schwere der Schuld ist meiner Ansicht nach auch deshalb gegeben, weil es sich hierbei um Templates handelt, die zigtausendfach verwendet werden, und in denen abermillionen Webseiten produziert werden. Ein solch fahrlässiges Multiplizieren von invalidem HTML-Code macht wirklich alle Anstrengungen zunichte, mit denen in den letzten Jahren versucht wurde, Website-Betreiber zur Standardkonformität zu erziehen.

Sicher gibt es Auswege — eigenes Blog-Hosting mit selbst kontrollierbarer Blog-Software usw. Doch das ist nur ein Ausweg für ein paar Profis, nicht aber für die Masse der Blogger. Und ich möchte gar nicht wissen, in wie vielen anderen Web-2.0-Services der HTML-Standard ähnlich mit Füßen getreten wird. Die Validierung des Webkompetenz-Forums ist schon mal ähnlich vernichtend. Meine User-Seite bei Mr. Wong kommt mit 12 Validator-Meldungen fast noch glimpflich davon. Scheint aber wirklich ein ziemliches Schmuddel-Web zu sein, dieses „Web 2.0“ &mdash zumindest aus Markup-Sicht.

Diskussionen zu diesem Eintrag im Webkompetenz-Forum:
Betreff: Das Elend invalider Templates