Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Sven Lennartz 12. Juli 2006

WML-Kurs

Kein Beitragsbild

Auch wenn es umständlicher als HTML aussehen mag: WML ist keine Hexerei – wenn man die entsprechenden Tags kennt.

WML spielt inzwischen keine Rolle, es taugt nur für alte Handys mit extrem kleinen Displays. Aktuell gilt das XHTML Mobile Profile.

Ähnlich wie HTML wird auch WML von einer entsprechenden Einleitung umfasst. Zwischen diesen Tags befinden sich die auf der Seite darzustellenden Bestandteile.

 <wml>
 Inhalt
 </wml>

Cards definieren
Jede Card innerhalb eines Decks muss gesondert beschrieben werden:

      <card id="card1" title="Ueberschrift">

<p>Text</p>
 </card>
      <card id="card2"
title="Noch eine Ueberschrift">
 <p>Text</p>
 </card>

ID
Die Identifikation „id“ darf nicht mehr als 8 Zeichen umfassen. Damit können Sie dann ähnlich einem Anker unter HTML auf eine bestimmte Card zugreifen. Dies erfolgt mit „#card1“ oder „#card2“ etc.

Text
Textabsätze werden mit <p></p> eingefasst. Darüber hinaus ist möglich mit align=““ die Ausrichtung anzugeben. Erlaubt sind „right“, „left“ und „center“.

Textformatierungen
Hier ist die Auswahl gering. Fett und kursiv stehen zur Verfügung. Das Unterstreichen sollten wegen der Verwechslungsgefahr zu Hyperlinks besser nicht verwendet werden.

      <b>Dieser
Text wird fett dargestellt.</b>
 <i>Dieser Text wird kursiv angezeigt.</i>

<u>Dieser Text wird unterstrichen.</u>

Hyperlinks
Hypertext ist ein wesentlicher Bestandteil aller online Medien, das ist bei WML nicht anders. So setzen Sie einen Link auf eine andere Card:

      <a
href="#card1">Linktext</a>

So setzen Sie einen Link auf ein anderes Deck:

      <a href="deck2.wml">Linktext</a>

Externe Links sind ebenso möglich, sie dürfen selbstverständlich nur auf anderen WAP Angebote zeigen, mit HTML wäre ein Handy hoffnungslos überfordert.

      <a
href="http://wap.yahoo.com">Yahoo</a>

Tabellen
Angesichts der geringen Möglichkeiten in Hinsicht auf das Layout mag es überraschen, dass WML tabellenfähig ist. Nun, all zu aufwändig dürfen Ihre Konstruktionen hier nicht werden:

      <table title="Tabelle" columns="2">

<tr><td>Zelle 1</td><td>Zelle 2</td></tr>

<tr><td>Zelle 3</td><td>Zelle 4</td></tr>

<tr><td>Zelle 5</td><td>Zelle 6</td></tr>

</table>

Grafik
Grafiken sind, wenn auch nur sehr eingeschränkt, durchaus möglich. Das Format heißt WBMP, es steht für „Wireless Bitmap“. Dabei handelt es sich um ein Schwarzweiß Format, das durch Umwandlung mit einem Hilfsprogramm erzeugt werden kann. Es gibt nur zwei Farben. Das genügt, um schematische Logos und Piktogramme darzustellen. Verschiedene Attributen wie horizontaler und vertikaler Abstand, Alternativtext, Höhe und Breite sind erlaubt. Diese Angaben kennen Sie bereits von HTML her.

      <img
src="bild.wbmp" alt="Beschreibung"
 vspace="4"
hspace="4" align="bottom" height="20" width="20">

Plug-Ins und Konverter zur Umwandlung bestehender Formate erhalten Sie hier:

  • WapTiger BMP 2 WBMP-Converter
  • WapTiger ONLINE BMP 2 WBMP-Converter

Schaltflächen
Schaltflächen (Buttons) spielen unter WML eine größere Rolle als unter HTML. Der Grund ist schnell ausgemacht. Der Zugriff über die Handy-Tastatur ist kompliziert, eine beschriftete Schaltfläche hilft die Wege abzukürzen und erleichtert die Navigation.

      <do
type="accept" label="ok1" name="Weiter">

<go href="#card2"/>
 </do>

Diese Möglichkeiten stehen zu Verfügung

accept
Akzeptieren – Bestätigen von Abfragen

prev
Zurück

help
Hilfe – Ruft einen Link zu einer Hilfeseite auf (sofern vorhanden).

reset
Löschen – Formulareingaben löschen

options
Optionen

delete
Löschen – Zum Löschen eines Elementes oder der aktuellen Auswahl.

Überdies sind folgen Aktion (Tasks) möglich:

go
Ruft eine URL oder eine andere Card auf.

prev
Ruft die vorhergehende URL auf.

refresh
Lädt die aktuelle Seite erneut.

noop
Löschen von <do> Elementen

Menü auf allen Cards (Template)
Eine Art globale Einstellung für mehrere Cards lässt sich praktischerweise auch definieren. Damit wird Quellcode eingespart und das Programmieren wird einfacher. Mit diesen Zeilen wird eine „Zurück“ Schaltfläche auf jeder Card gezeigt:

      <template>
 <do type="options"
label="Zurueck" name="prev">
 <prev/>
 </do>

</template>

Beispiel
Wie eine Suchmaschinen auf einem Handy aussehen kann, das haben wir Ihnen schon weiter oben gezeigt. Hier der Quellcode von Googles Startseite, Sie werden viele Bekannte entdecken:

      <?xml
version="1.0"?>
 <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD
WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
      <wml>

<card title="Google">
 <do type = "prev"><prev/></do>

<do type="accept" label="Search">
 <go href="http://www.google.com/wml?q=$(q)&amp;start=0"/>

</do>
 <p align="center">
 <input name="q"/>

<a href="http://www.google.com/wml?q=$(q)&amp;start=0"
 >Web
search</a><br/><a href="infon.wml">About</a>

<br/><a href="webwapn.wml#choose">Options</a>

</p></card></wml>

WAP-Man
Die technisch bessere, aber optisch weniger attraktive Lösung heißt WinWAP und kommt aus der Softwareschmiede Slobtrot. Das Programm ist einfacher zu bedienen und bietet gewohnten Komfort von Browsern. Solche Programme bieten sich vor allem an, um eigene WML Seiten auf gewohntem Betriebssystem zu testen. Ein Test mit einem echten Handy schließlich ist nicht nur sehr umständlich sondern auch teuer. Web-Browser sind nicht WML fähig, eine Ausnahme bildet nur der Norwegische Opera.

WAP im Dreamweaver
Macromedia reagiert schnell auf die Bedürfnisse der Anwender und stellt in Zusammenarbeit mit dem Handyfabrikanten Nokia eine WML-Erweiterung vor. Sie können diese kostenlos von Macromedia herunterladen. Dazu ist allerdings erst einmal der Extension Manager nötig. Eine Zusatzsoftware, die in den Dreamweaver eingebunden wird, der Manager übernimmt die Installation und Verwaltung der Erweiterungen. Von denen es übrigens zahlreiche gibt. Sie dürfen sich bei Macromedia gern bedienen, müssen sich jedoch vorher namentlich registrieren lassen.

Dreamweavers neue WML Funktionen sind direkt über das Menü aufzurufen, dort gibt es einen neuen Eintrag „WML“. Die Arbeitsfläche startet praktischerweise gleich mit einer Card, in welche Sie wie gewohnt Text eingeben können. Nicht nur, dass Ihr Dreamweaver jetzt WML-Seiten anlegen kann, es gibt außerdem eine zusätzliche Hilfe und eine Vorschau. Dazu wird eine Handy-Simulation gestartet. Sie läuft mit Java. Im Test hat das leider nicht immer so gut klappen wollen, das Vorschau-Handy stürzte ein ums andere Mal ab. Eine funktionierende WML-Umgebung scheint überhaupt eine Art Glückspiel zu sein. Weder läuft die Dreamweaver Erweiterung auf allen Rechnern zuverlässig und fehlerfrei noch tun das die diversen Toolkits, die von den großen Handy-Herstellern für Entwickler angeboten werden. Wenn es nicht klappt, bleibt nur eines, verschiedene Produkte testen oder auf die manuelle Technik zurückgreifen.

WML Toolkits
Wenn Sie nicht mit dem Dreamweaver arbeiten oder die Erweiterung nicht korrekt funktioniert, können Sie auf verschiedene unabhängige Werkzeugkisten zurückgreifen. Die größten Hersteller haben eigene Lösungen entwickelt, die zu ansprechenden WML-Seiten führen sollen und neben allerlei Informationen auch entsprechende Emulatoren einschließen. Die Programme laufen überwiegen unter Java und sind somit plattformunabhängig.

Sven Lennartz

Sven Lennartz

Ex Webdesigner, Gründer von Dr. Web und Smashing Magazine. Heute ist Sven als Schriftsteller und Blogger unterwegs. Schau was er jetzt macht…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.