Der japanische Mobilfunkbetreiber NTT DoCoMo führte i-mode im Februar 1999 ein. 14 Monate später zählte die Firma bereits über sechs Millionen Abonnenten, derzeit sind es rund 32 Millionen. E-Plus dürfte sich in Deutschland mit weniger Erfolg bescheiden müssen, nicht zuletzt herrscht hier eine größere Konkurrenz durch WAP-Handys.
Während WAP mit der Markup-Sprache WML arbeitet, setzt i-mode auf ein leicht abgewandeltes cHTML (Compact HTML). Dabei handelt es sich um eine Untergruppe von HTML, die aus dessen einfachen Befehlen für Text und Grafiken besteht. Obwohl diese Sprache bereits 1998 vom W3C als Standard zur Diskussion gestellt wurde, kam sie bis heute nicht über diesen Status hinaus. Die Sprache ist derzeit also kein offizieller Standard. Da NTT DoCoMo für den i-mode-Dienst eine leicht abgewandelte Variante verwendet, nennt man diese meist iHTML (i-mode-compatible Hypertext Markup Language). Diese Sprache enthält zusätzliche Tags, zum Beispiel für spezielle Logos oder um einen Anruf über einen Link zu tätigen.
Einen ausführlichen Test des i-mode-Dienstes finden Sie im tecCHANNEL-Beitrag "i-mode: UMTS im Kleinformat". Mehr zu WAP lesen Sie in unseren Beiträgen WAP-Grundlagen und Zweite Runde für WAP.
WML vs. iHTML
Worin liegt der Unterschied zwischen WML von WAP und iHTML von i-mode? Beide sind einfache Markup-Sprachen. Während WML aber eine von HTML getrennte eigene Untergruppe von XML darstellt, ist cHTML ein abgespecktes HTML. Das bedeutet, dass HTML-fähige Browser prinzipiell cHTML-Seiten anzeigen können, WML-Seiten dagegen nicht. Nur die speziellen Tags von iHTML können die Browser nicht verarbeiten.
Doch die Unterschiede dürften bald der Vergangenheit angehören. Sobald WAP 2.0 und damit XHTML für Handys verabschiedet wird, stellen NTT DoCoMo und E-Plus ihre Dienste auf diesen neuen Standard um. Da gegen Ende des Jahres damit gerechnet wird, dürften 2003 alle Handys die gleiche Beschreibungssprache verstehen. Schon heute funktioniert das von E-Plus vertriebene NEC-Handy n21i mit iHTML und WAP 1.2. Per Software-Upgrade soll es dann auch XHTML-fähig werden.
Weitere Details zu XHTML bietet dieser tecCHANNEL-Beitrag.
Tools und Emulatoren für iHTML
Wer seine iHTML-Seiten nicht mit der Hand programmieren will, hat schlechte Karten. Derzeit gibt es noch keine entsprechenden Editoren. Man kann zwar normale Webeditoren verwenden und anschließend im Quelltext überprüfen, ob die erzeugten Tags mit iHTML kompatibel sind. Handarbeit dürfte sich aber trotzdem kaum vermeiden lassen.
Für Unternehmen und umfangreiche Webauftritte stellt Websphere, der "Markup-Sprachen-Übersetzer" von IBM, eine interessante Alternative dar. Dieses Programm übersetzt Seiten von XML, HTML, WML, VoiceXML oder Palm OS HTML inklusive GIFs und JPGs in cHTML oder iHTML. Ein XML-Stylesheet-Editor sorgt dabei für eine individuelle Anpassung der Seiten.
Auch an Emulatoren herrscht eklatanter Mangel. So stehen derzeit nur ein paar japanische Programme zur Verfügung, wie beispielsweise hier. Diese genügen jedoch den hohen Ansprüchen von eCommerce-Angeboten nicht. Zumindest die cHTML-Befehle lassen sich in jedem HTML-fähigen Browser testen. Doch die Anzeige stimmt nicht hundertprozentig mit dem Bildschirm des Mobiltelefons überein, und spezielle iHTML-Befehle ignoriert der Browser völlig.
Emulator von E-Plus
Damit Sie einen ersten Eindruck bekommen, wie Ihre Seiten in einem i-mode-Handy aussehen, bietet E-Plus eine HTML-Datei an, die ein Handydisplay in Ihrem Webbrowser imitiert. Ein echter Emulator ist dies jedoch nicht, da er die speziellen iHTML-Befehle nicht anzeigen kann. Zudem akzeptiert der Internet Explorer im Gegensatz zum i-mode-Handy sämtliche HTML-Befehle, Frames, Tabellen und JPGs. Trotzdem gibt er einen ganz guten Eindruck von der Seite. Diesen Pseudo-Emulator können Sie sich hier herunterladen.
Um Ihre Seite zu integrieren, öffnen Sie den Quelltext der Datei "viewer.html", kopieren ihn in einen Webeditor oder in einen Texteditor wie Notepad und ersetzen in Zeile 16 die iFrame-Quelle (iframe src) imode/index.html mit dem Namen ihrer entsprechenden Datei. Beachten Sie dabei die Ordnerzuweisung. Alternativ setzen Sie in der bereitgestellten Indexdatei einen Link auf Ihre Seite. Dann lässt sie sich auch im Emulator über Anklicken des entsprechenden Links direkt aufrufen.
iHTML-Dokumentation
Die beiden Mobilfunkbetreiber NTT DoCoMo und E-Plus bieten gratis Informationsmaterial für Entwickler an. Als Grundlage für diesen Workshop finden einige Dateien aus dem Tutorial von E-Plus Verwendung. Zudem stehen auf den Webseiten eine Farbtabelle und eine iHTML-Referenz zur Verfügung.
Apropos E-Plus: Offizielle i-mode-Content-Partner haben den Vorteil, dass E-Plus sie an den Abogebühren der Nutzer beteiligt. Außerdem werden diese Seiten vom i-mode-Portal aus verlinkt. Allerdings kann jeder Anbieter iHTML-Seiten erstellen und über das Internet zum Abruf über i-mode-Handys und PDAs bereitstellen. Details zum Geschäftsmodell des deutschen i-mode-Ablegers finden Sie hier.
Seitenaufbau
Bevor man mit der Programmierung einer iHTML-Seite beginnt, gilt es, einige Dinge zu beachten.
Wie bei WML sollten sich auch in iHTML die Seiten nach den Größen des Handydisplays richten. Das derzeit in Deutschland angebotene i-mode-Handy NEC n21i besitzt acht Zeilen mit jeweils etwa 14 Zeichen. Scrollen ist in allen Richtungen möglich.
Die Dateien sollten möglichst klein bleiben und 10 KByte nicht überschreiten, damit Zeit und Kosten für den Nutzer im Rahmen bleiben.
iHTML kann keine Hintergrundfarben, Tabellen oder Frames darstellen.
Für Grafiken darf nur das GIF-Format verwendet werden. Die meisten Handys können Farben anzeigen. In Japan stellen einige Mobiltelefone sogar animierte GIFs dar.
Sie können bei E-Plus keine JavaScripts oder Java Applets einsetzen. In Japan gibt es einige Java-fähige i-mode-Handys.
Die Dateien speichert man mit der Datei-Extension .html ab.
Die Indexdatei
Wie bei jedem normalen Internet-Auftritt gibt es auf iHTML-Seiten eine Homepage. Auch hier heißt diese in der Regel "index.html". Die von E-Plus gebotene Indexdatei hat folgenden Quelltext:
<html>
<head>
<title>Testseite</TITLE>
</head>
<body>
Willkommen auf Ihrer ersten i-mode Seite<br>
<a href="kontakt.html" accesskey="1">1 Kontakt</a><br>
<a href="partyticker.html" accesskey="2">2 Party-Ticker</a><br>
</body>
</html>
Die Tags entsprechen den üblichen HTML-Tags, mit einer Ausnahme: accesskey gibt es nur in iHTML. Wenn Sie einen Link mit diesem zusätzlichen Verweis und einem dazugehörigen Wert versehen, lässt er sich über die entsprechende Wahltaste des Telefons anwählen. Der Microsoft Internet Explorer kann mit diesem Tag nichts anfangen - dank seiner Fehlertoleranz stört ihn das jedoch nicht weiter. Andere Browser geben beim Laden dieser Seite eventuell Fehlermeldungen aus, die Sie aber in der Regel ignorieren können.
Farben und Fotos
Das von E-Plus in Deutschland vertriebene NEC-Handy besitzt ein Farbdisplay. Die farbliche Markierung von Texten funktioniert über die normalen HTML-Befehle. Entsprechend lassen sich Texte auch zentrieren oder rechtsbündig ausrichten.
Wenn Sie ein Bild integrieren möchten, muss es im einfachen GIF-Format vorliegen. JPG und animierte GIFs zeigt das NEC-Handy nicht an. Außerdem sollten Sie prüfen, ob das Bild auch im kleinen Handyformat noch zu erkennen ist. Das Handydisplay hat eine Breite von 100 Pixeln. Bei größeren Bildern muss der Betrachter scrollen.
E-Mail-Links
Die E-Mail-Funktion entspricht dem HTML-Befehl. Sie sollten aber berücksichtigen, dass sich nur Textnachrichten versenden lassen. Das Verschicken von Bildern ist nicht möglich. Sie können aber eine URL angeben, auf der das Bild hinterlegt ist. Klickt der Empfänger auf diese, wird die Grafik auf dem Handy angezeigt.
Die von E-Plus bereitgestellte Datei "kontakt.html" ist somit bis auf den bereits bekannten accesskey standardisiertes HTML:
<html>
<head>
<title>Testseite</TITLE>
</head>
<body>
<div align="center"><font color="#0000FF">Paule Nutzer</font></div>
<br>
<div align="center"><img src="foto.gif" width="110" height="80" border="0"></div>
<br>
Schreib mir doch eine i-mail:<br>
<a href="mailto:paule.nutzer@i-mode.de">paule.nutzer@i-mode.de</a>
<br>
<a href="partyticker.html" accesskey="1">1 Party-Ticker</a>
<br>
<a href="index.html" accesskey="2">2 Startseite</a>
<br>
</body>
</html>
Laufschriften und Anrufe per Link
Eine im Gegensatz zum PC sehr wichtige Funktion auf dem Handy ist die Laufschrift. iHTML benutzt dazu den Marquee-Befehl, der auch vom Microsoft Internet Explorer akzeptiert wird. Sie können darin sowohl die Laufrichtung (direction="left/right") als auch die Art der Animation (behavior) festlegen.
Das Attribut scroll bedeutet eine fortlaufende Bewegung, slide beendet die Bewegung, sobald das letzte Zeichen angezeigt wird und alternate wechselt die Bewegungsrichtung. iHTML kennt zwar auch den loop-Befehl, der die Anzahl der Wiederholungen festlegt, jedoch nicht scrollamount oder scrolldelay zur Beeinflussung der Geschwindigkeit.
Eine echte Besonderheit von iHTML stellt der Phoneto-Befehl dar. Er entspricht dem E-Mail-Befehl, jedoch wird in diesem Fall kein Text verschickt, sondern die angegebene Telefonnummer angerufen. Der Befehl lautet <a href="tel:0000">0000</a>.
Anrufe per Link
Die E-Plus-Datei "partyticker.html" sollte somit klar sein:
<html>
<head>
<title>Testseite</TITLE>
</head>
<body>
<div align="center"><font color="#0000FF">Party-Ticker</font></div>
<br>
Hier sind die Party-Termine für die nächsten Wochen:<br>
<marquee direction="left" behavior="scroll" loop="10">+++ Geburtstags-Party am 10. April ab 19:00 uhr +++</marquee>
<br>
Ruf mich an, wenn Du kommen möchtest:<br>
<a href="tel:01785487932">01785487932</a>
<br>
<a href="kontakt.html" accesskey="1">1 Kontakt</a>
<br>
<a href="index.html" accesskey="2">2 Startseite</a>
<br>
</body>
</html>
Weitere Informationen über iHTML finden Sie auf der Webseite von NTT DoCoMo. Bei Anywhereyougo finden Sie in der Rubrik "i-mode" zahlreiche interessante Informationen, unter anderem Tutorials und FAQs. (kpf)