Sven Lennartz 12. Juli 2006

WML-Kurs

Kein Beitragsbild

Ex Webdesigner und Gründer von Dr. Web, heute ist Sven als Schriftsteller...

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

Ex Webdesigner und Gründer von Dr. Web, heute ist Sven als Schriftsteller und Blogger (Conterest) unterwegs. Hol dir sein gratis eBook Wie du mit wenig Zeit viel für dein Blog herausholst. Die Blogpflege Fibel.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück