Mobiles Internet: eine Herausforderung
Hohe Informationsdichte für kleine Displays
Mobile Endgeräte mit mobilen Internetdiensten zu versorgen ist keineswegs trivial. Der Grund dafür ist die enorme Divergenz der Geräte hinsichtlich Web-Technologien, Display, Prozessorleistung und verfügbarer Bandbreite. Außerdem kann man davon ausgehen, dass es zu einer flächendeckenden UMTS-Verfügbarkeit erst 2010 kommen wird. Für die Erstellung eines mobilen Internetangebots müssen daher nahezu vergessene Fragestellungen von vor 15 Jahren wieder reaktiviert werden: Wie viele Bytes müssen unbedingt übertragen werden? Kann das Endgerät alles verstehen? Wie groß ist das Display?
Die meisten Browser müssen mit einer Display-Größe von 240x320 Pixel auskommen. Beachtenswert ist die Bandbreite: Eine 9 KByte große HTML-Seite benötigt mit GSM 8 Sekunden und mit GPRS durchschnittlich immerhin noch 2 Sekunden.
Darstellung von news4mobile.de mit dem Browser Blazer auf einem Treo 650 mit einer Auflösung von 320x320 Pixel.
Für die Erstellung und Pflege von internetbasierten Diensten gilt es, den Aufwand und die Kosten so gering wie möglich zu halten und zeitgleich möglichst viele Endgeräte optimal zu bedienen.
Lösungsansatz mehrstufig
Eine Lösung für dieses Dilemma sehen wir in drei Ansatzpunkten:
- Geräteunabhängige Content-Beschreibung über ein CMS (TYPO3)
- Minimierung des Overheads in den gerenderten HTML-Seiten (TYPO3)
- Automatisches Erkennen des Darstellungsgeräts und automatische Umwandlung des Contents in eine entsprechende Form
Die automatische Konvertierung von schlanken TYPO3-Seiten über CoBaView für eine Vielzahl von Endgeräten (XHTML, WAP, iMode).
Die automatische Umwandlung (Transkodierung) einer Website für das jeweilige Endgerät beziehungsweise die vorhandene Bandbreite ist der komplizierteste Teil. Da diese Anforderung in allen Projekten gleich ist, haben wir den Transkoder in das separate Modul CoBaView [2] ausgelagert. Eine Website ist über CoBaView automatisch für jedes Endgerät verfügbar - egal ob XHTML, WAP oder iMode. Aus der Sicht des Nutzers kann über CoBaView jede beliebige Website im Internet mit einem mobilen Endgerät besucht werden, da diese on the fly entsprechend umgewandelt wird. Durch den Einsatz des Transkoders halten wir alle Web-Applikationen weiterhin so einfach wie möglich und sind dennoch vollständig erreichbar. Obwohl der Transkoder automatisch Optimierungen, wie zum Beispiel die Erhöhung der Entropie durch Whitespace-Stripping, vornimmt, ist es ratsam, bereits eine Minimierung des HTML-Codes der durch TYPO3 generierten HTML-Seiten zu erreichen.
Minimierung des HTML-Codes von TYPO3
Standardmäßig ist in den von TYPO3 gerenderten Seiten ein großer Overhead durch Kommentare und JavaScript enthalten. Dies ist zunächst nicht für mobile Anwendungen geeignet. Mit wenigen Eingriffen im TyposScript lässt sich jedoch unnötiger HTML-Code in der Seitenausgabe vermeiden. Ein „HELLO WORLD!“ mit TypoScript (hier mit TYPO3 3.8.0) ohne zusätzliche Modifikation ergibt eine HTML-Ausgabe von zusammen 1120 Bytes, wovon das meiste Kommentare und JavaScript ausmachen.
page = PAGE page.typeNum = 0 page.10 = TEXT page.10.value = HELLO WORLD!Listing 1
Mit einem eigenen HTML-Rumpf können wir uns auf das Wesentliche beschränken. Dazu wird das TypoScript entsprechend erweitert. Wir haben uns zur Orientierung an die Standard TYPO3-HTML Ausgabe gehalten.
config.disableAllHeaderCode = 1
page.10.wrap (
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>mobile</title>
</head>
<body bgcolor="#FFFFFF"> | </body>
</html>
)
Listing 2
Diese Veränderung ergibt eine HTML-Ausgabe von „HELLO WORLD!“, eingebettet im obigen Quellcode und umfasst dann zusammen 266 Bytes. Mit „config.disableAllHeaderCode“ werden alle Features des Page-Objekts unterdrückt. Der Seiteninhalt besteht dann nur aus dem Ergebnis des cObject-Array des Page-Objekts (hier dem Unterobjekt page.10, „HELLO WORLD!“). Dieses wird in den gewünschten HTML-Rumpf eingebettet. Dabei haben wir den TYPO3-Einleitungs-Kommentar, ein Meta-Tag (generator) und das JavaScript mit der Funktion „blurLink“ entfernt. Wenn wir später ein Menü generieren, müssen wir die Eigenschaft „noBlur = 1“ setzen. Blur ist die Markierung eines geklickten Links und wird normalerweise vom Browser selbst übernommen.
Änderungen, die man normalerweise zum Beispiel mit „page.bodyTag“, „page.config“, „page.meta“, „page.stylesheet“ oder „page.headerData“ vornimmt, kann man dann direkt in den Wrap übernehmen. Als einfachstes Beispiel für Content-Rendering binden wir jetzt einen Text-Record mit Überschrift und Text mit folgender Erweiterung im TypoScript ein:
page.10 = CONTENT
page.10 {
table = tt_content
select {
pidInList = this
orderBy = sorting
}
}
tt_content = CASE
tt_content.key.field = CType
tt_content.text = COA
tt_content.text {
1 = TEXT
1.field = header
1.wrap = <h1> | </h1>
2 = TEXT
2.field = bodytext
2.wrap = <p> | </p>
}
Listing 3
Das ergibt eine einfache HTML-Ausgabe des Text-Records.
<h1>Überschrift</h1><p>Text</p>Listing 4
Wenn wir unseren Content mit css_styled_content rendern lassen,
page.10 < styles.content.getListing 5
erhalten wir bei diesem einfachen Text-Record folgenden HTML-Code im Body:
<!-- CONTENT ELEMENT, uid:1/text [begin] --> <a name="1"></a> <!-- Header: [begin] --> <div class="csc-header csc-header-n1"><h1 class="csc-firstHeader">Überschrift</h1></div> <!-- Header: [end] --> <!-- Text: [begin] --> <p class="bodytext">Text</p> <!-- Text: [end] --> <!-- CONTENT ELEMENT, uid:1/text [end] -->Listing 6
Dazu muss die Extension „css_styled_content“ installiert und im Template unter „Include static (from extensions)“ ausgewählt sein. Um die Ausgabe wieder auf unseren Minimal-Code zurückzuführen und unnötige Kommentare und CSS-Anweisungen zu unterdrücken, überschreiben wir im TypoScript folgende Objekte:
#unnötiger Code in der Überschrift entfernen lib.stdheader.10.1.fontTag = <h1>|</h1> lib.stdheader.stdWrap.dataWrap = lib.stdheader.stdWrap.prefixComment =Listing 7
#unnötiger Code beim Text entfernen tt_content.stdWrap.prefixComment = tt_content.text.20.prefixComment = tt_content.stdWrap.dataWrap = lib.parseFunc_RTE.nonTypoTagStdWrap.encapsLines.addAttributes.P.class =Listing 8
So erhalten wir wieder die reduzierte HTML-Ausgabe von vorher. Dies ist die schlankeste Version, die wir für diesen Text-Record erreichen können. Gegebenenfalls müssen nicht von allen Objekten die Inhalte modifiziert werden. Der „prefixComment“ kann mit „page.config.disablePrefixComment = 1“ auch global für alle Inhaltselemente ausgeschaltet werden. Das Beispiel zeigt, wie man das Rendering ganz gezielt steuern kann. Im Module-Template kann man unter „Template Analyser“, „EXT:css_styled_content/static/“ den TypoScript-Code von „css_styled_content“ mit der Ausgabe vergleichen. Die benötigten Objekte können dann mit einem eigenen TypoScript überschrieben werden.
Ähnlich können auch andere Content-Records (z.B. Formulare) modifiziert und entschlackt werden. Gerade, wenn das Ziel „möglichst schlanke HTML-Dokumente“ verfolgt wird, ist es sehr nützlich, dass TYPO3 so individuell konfiguriert werden kann. Um die HTML-Seite in unserem Beispiel jetzt noch etwas attraktiver zu gestalten, genügen zwei Zeilen CSS-Code. Auch hier gilt es, die geringe Bandbreite im mobilen Internet zu berücksichtigen, wie bei allem anderen auch, das über die Leitung muss.
body { font-size: small; font-family: sans-serif, Arial, Helvetica; }
h1 { font-size: medium }
Listing 9
HTML-Dokumente - minimal und pragmatisch
Bereits in dem kleinen Beispiel wurden einige Bytes gespart, die nicht übertragen werden müssen. Das bedeutet eine spürbar schnellere Ladezeit für den Nutzer. Diese Herangehensweise muss nun konsequent bei größeren HTML-Dokumenten beibehalten werden. Es geht darum, möglichst elegant gewünschte Strukturen mit sauberem und zugleich minimalem HTML umzusetzen. Besonders wichtig ist das Testen der mobilen Website mit einem echten mobilen Endgerät über GPRS. Sind die Dokumente zu groß für die Bandbreite, entstehen „Darstellungs-Effekte“, die am Desktop nicht simulierbar sind. Bei news4mobile.de haben wir zum Beispiel Listen durch <br /> dargestellt. Das entspricht nicht der hohen Markup-Lehre, war für uns jedoch in diesem Projekt die beste Lösung, um Sprünge auf dem Display zu vermeiden. Die Website news4mobile.de ist mit einer CoBaView-Funktionalität im Internet kostenfrei verfügbar.
Veikko Wünsche ist Geschäftsführer der Lightwerk GmbH (www.lightwerk.com) und seit 1994 im Bereich WWW-Technologie tätig. Er brachte 1995 die erste regionale Tageszeitung ins Internet und war in mehreren Internet-Projekten, zum Beispiel am Fraunhofer IAO, tätig. Aktueller Fokus ist die Förderung des mobilen Internets durch den Transkoder CoBaView und news4mobile.de.
