So bauen Sie eine i-mode Homepage

Nutzer des E-Plus Handy-Dienstes i-mode können sich eine eigene Homepage anlegen. Die mobilen Homepages sind mit dem Handy, aber auch mit einem normalen Browser abrufbar, der allerdings manche Befehle nicht erkennen kann.

Während der Mobilfunkstandard WAP mit der Markup-Sprache WML arbeitet, setzt i-mode auf ein leicht abgewandeltes cHTML (Compact HTML).

Es handelt sich um eine Untergruppe von HTML, die aus einfachen Befehlen für Text und Grafiken besteht. Man nennt diese Sprache meist iHTML (i-mode-compatible Hypertext Markup Language). Die Sprache enthält zusätzliche Tags, zum Beispiel für spezielle Logos oder um einen Anruf über einen Link tätigen zu können.

Um i-mode Seiten in der Sprache cHTML zu erstellen, braucht man nur einen ganz normalen Texteditor. Mit diesem erstellt man die i-mode Seite, die man dann auf einen Server uploadet. Um diese Seiten zu testen muss nicht immer das i-mode Handy verwendet werden. Man kann sie ganz normal in seinem Webbrowser betrachten.

Die Programmiersprache

iHTML ist ein abgespeckte Version der Programmiersprache HTML. Doch schon in kurzer Zeit ist damit Schluss. Sobald der Standard WAP 2.0 und damit XHTML für Handys verabschiedet wird, stellt E-Plus seine 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.

Die Voraussetzungen

Bei der Gestaltung einer i-mode Seite sollte man immer bedenken, dass die Endgeräte nur sehr kleine Darstellungsflächen (Displays) besitzen. Das NEC N21i besitzt ein Display von 120×160 Pixeln. Breite und große Grafiken werden automatisch proportional skaliert. Daher sollte man bei der Einbindung von Grafiken darauf achten, daß diese eine bestimmte maximale Breite nicht überschreiten.

Außerdem wird empfohlen, dass die Gesamtgröße einer Seite – inklusive Bilder – maximal 5 KB beträgt, besser sogar nur 2 KB. Auf keinen Fall darf eine Seite mit allen Inhalten größer als 10 KB sein.

Wichtige Downloads

Damit Sie so schnell wie möglich Ihre persönliche i-mode Homepage programmieren können, haben wir für Sie die wichtigsten Befehle in einem praktischen Handbuch zusammengestellt, das Sie sich als pdf-Datei hier herunterladen können.

Außerdem steht Ihnen eine Farbtabelle als pdf-Datei zur Verfügung, um das bunte Leben ins 256 Farben Display des i-mode Handys zu bringen.

Wir stellen außerdem ein ausführliches Tutorial zum Download bereit:

Legen Sie sich für das Tutorial bitte einen Ordner “i-mode” an, z.B. im Ordner “Eigene Dateien” (wenn Sie einen Windows Rechner benutzen) und laden Sie sich folgende Zip-Datei herunter:

Tutorial

Die Datei hat folgenden Inhalte:

Einen Ordner namens “iHTML Tutorial”. Darin enthalten sind “Viewer.html”. Mit diesem Frameset können Sie Ihre iHTML Dateien offline mit Ihrem Browser in einem Frame ansehen, der ungefähr der Displaygröße des i-mode Handys entspricht und Ihnen so als Orientierung dient. Das echte Handy hat ein Display von acht Zeilen mit ca. 14 Zeichen.

Die Index-Seite

Wie bei jeder Internet-Seite gibt es in iHTML eine Startseite. Diese Seite heißt normalerweise “index.html”. Auch die Datei aus unserem Download von E-Plus hat diesen Namen und den unten stehenden Quelltext. Das Besondere: Der Befehl “accesskey” wird nur in iHTML verwendet. Wenn Sie einen Link mit diesem Befehl und einer Nummer versehen, lässt er sich über die entsprechende Wahltaste des Telefons anklicken.

Hier das Beispielskript zu “index.html”:

[code]‹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›[/code]

Der eMail-Link

Die eMail-Funktion gleicht dem HTML-Befehl. Sie sollten aber berücksichtigen, dass sich nur Textnachrichten versenden lassen. Das Verschicken von Bildern ist leider nicht möglich. Sie können aber eine URL angeben, auf der das Bild liegt. Klickt der Empfänger auf diesen Link, wird die Grafik auf dem Handy angezeigt.

Die von E-Plus bereitgestellte Datei “kontakt.html” ist bis auf den bereits bekannten “accesskey”-Befehl standardisiertes HTML:

[code]‹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-mail.de\\\”›paule.nutzer@i-mail.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›[/code]

Eine echte Besonderheit von iHTML stellt der Phoneto-Befehl dar. Er entspricht dem eMail-Befehl, jedoch wird in diesem Fall kein Text verschickt, sondern die angegebene Telefonnummer angerufen. Der Befehl geht folgendermaßen:

[code]‹a href=\\\”tel:0000\\\”›0000‹/a›[/code]

Der Party-Ticker

Die E-Plus-Datei “partyticker.html” sieht dann folgendermaßen aus und Sie können das Gelernte mit diesem Skript und den Skripten für den Index und die eMail einfach einmal ausprobieren:

[code]‹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›[/code]

Und jetzt viel Spaß mit i-mode und Ihrer Homepage!

Quelle: AOL.DE

Leave a Reply

Your email address will not be published. Required fields are marked *