WAP Seiten mit XHTML fürs Handy
Meine Erfahrungen bei der Umsetzung von WAP Seiten mit XHTML für mobile Entgeräte
Dies ist eine Sammlung von XHTML/WAP Know-How die ich im Laufe der Zeit zusammengetragen habe. Hierbei handelt es sich um Umfangreiches Know-How zum Thema XHTML für Handys und PDAs das sich vor allem auf die technischen Aspekte bei der Realisierung von WAP/XHTML Seiten bezieht.Der HTTP HEADER einer xhtml Seite
Der MIME-Type für eine XHTML Seite ist "application/xhtml+xml". In PHP kann man dies folgender massen angeben.
header('Content-Type: application/xhtml+xml;');
Normalerweise wird die Content Codierung in der XML Deklaration angegeben,
es kann aber nicht schaden, im HTTP Header das verwendete Charset anzugeben.
Im Falle einer ISO-8859-1 Codierung würde der Header in PHP folgendermaßen angegeben.
header('Content-Type: application/xhtml+xml; charset=iso-8859-1');
Es ist neben ISO-8859-1 aber auch UTF-8 möglich. Um sicherzugehen, dass die
verwendete Codierung vom Endgerät unterstützt wird ist es ratsam, den HTTP-Header
"accept-charset" des HTTP-Request auszulesen.
Der XHTML HEADER des Dokumentes
Jede XHTML Seite beginnt mit folgenden beiden Zeilen.<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">Mit diesen Zeilen wird das Dokument als XML Dokument deklariert und der Doctype festgelegt. Zusätzlich kann in der Deklaration noch die Codierung (charset) festgelegt werden. Handelt es sich z.B. um ein ISO-8859-1 Charset, so ist die erste zeile folgendermassen zu erweitern.
<?xml version="1.0" encoding="ISO-8859-1"?>Um ganz sicher zu gehen, kann man noch den HTTP-Response Header Content-Type um das Attribut Charset erweitern. Siehe auch unter "HTTP HEADER"
Die XHTML STYLE Angaben
Das Styling kann über CSS Dateien gesteuert werden. Die CSS Datei wird folgendermassen angegeben. Diese Zeile folgt direkt der Deklaration (<?xml?>)<?xml-stylesheet href="mystylesheet.css" media="handheld" type="text/css" ?>Wird das Style als XML Verarbeitungs-Style angegeben, ist es nicht möglich ein zweites CSS Dokument anzugeben. Sollte es aber nötig sein mehrere CSS Dateien zu verwenden, ist folgende Zeile hilfreich.
<link rel="stylesheet" href="mystylesheet.css" type="text/css"/>Diese Zeile kann belibig oft im Header des XHTML Dokuments angegeben werden. Zusätzlich ist aber auch möglich einen Style Sheet innerhalb einer XHTML Datei anzugeben. Die Angaben gelten dann ur für das XHTML Dokument. Die Style Angeban werden im XHTML-Header folgendermassen angegeben.
<style>
body
{
color:blue
}
</style>
Hinweis: Die beiden Tags link und style werden beide nur innerhalb des Tags head akzeptiert.
XHTML Beispiele
Eine Sammlung von simplen XHTML Beispielen für mobile Endgeräte (Handy und PDA) sind unter /uploads/wap/index.xhtml zu finden.CSS Angaben in XHTML Dokumenten für mobile Endgeräte (WAP)
Eine der größten Errungenschaffen für Handys und PDAs ist die Einfühung von CSS, die bei der WML Programmierung nicht möglich war/ist. Auch wenn es keine vollständige Implementierung der CSS Features ist, die unter HTML möglich sind, ist es doch eine sehr hilfreiche Methode ein Style für Webseiten festzulegen. Unter Zuhilfenahme der Styles können einige Parameter verändert werden, mit denen die Darstellung eines Dokumentes Konfigurieren kann.Abstände (Rahmen, Innenabstände, Seitenränder) können über verschiedene Eigenschaften festgelegt werden. Weiterhin können Ausrichtung, Textumfluss, Schriftarten und andere Text Attribute über die Styles verändert werden. Auch Farben können über CSS Eigenschaften verändert werden. Dies ist aber nur bei Geräten mit Farbdisplay möglich.
Einem XHTML Tag kann man auf 4 unterschiedliche Arten ein CSS Attribut hinzuzufügen.
Methode 1: Über eine direkte Zuweisung im Attribut style. Einem Paragraph die Textfarbe blau zu geben kann demnach folgendermassen durchgeführt werden.
Methode 2: Mit der folgenden Style Deklaration, die entweder in einem Style-Dokument oder im Body des Style Tags eingetragen wird, kann man allen Paragraphen die Textfarbe blau zuweisen. Da sich das auf alle Paragraphen bezieht, ist es aber nicht immer die beste Lösung.Dieser Text ist blau
p {
color:blue;
}
Methode 3:
Mit der folgenden Style Deklaration, die entweder in einem Style-Dokument oder im
Body des Style Tags eingetragen wird, kann man allen Paragraphen der Klasse blue
die Textfarbe blau zuweisen.
p.blue {
color:blue;
}
Der zugehörige XHTML Code sieht dann so aus <p class="blue">Ich bin total blau</p>
Alle Paragrahen die im Attribut class den Wert blue stehen haben, erhalten einen
blauen Text. Normalerweise reicht dies schon für 99% aller Fälle aus. Trotzdem
gibt es noch eine vierte Möglichkeit einem Tag eine Style Deklaration zuzuweisen.Methode 4: Mit der folgenden Style Deklaration, die entweder in einem Style-Dokument oder im Body des Style Tags eingetragen wird, kann man dem Paragraphen mit der Id blue die Textfarbe blau zuweisen.
p#blue {
color:blue;
}
Der zugehörige XHTML Code sieht dann so aus Ich bin total blau
Der Paragrahen bei dem im Attribut id der Wert blue steht, erhält einen blauen Text. Der Wert des Attributes Id sollte in einem XHMTL-Dokument nicht 2 mal verwendet werden, da die Id eine eindeutige Identifizierung des Elementes darstellt.Sonstiges zum Thema WAP und XHTML
1. Mobile Endegeräte sind sehr eingeschräntk in Bezug auf Bildschirmauflösung, Speicher und Prozessorkapazität. Dies sollte beim erstellen von XHMTL Seiten für Handys immer berücksichtigt werden.2. Der Download einer XHTML Seite die 4 Bilder mit je 2 KB enthält ist kürzer als der Download einer XHTML Seite die 8 Biler mit je 1 KB enthält. Dies liegt an der TCP/IP und WAP Architiektur mit der XHTML Dokumente übertragen werden.
3. Es ist immer Sinnvol Höhen und Breiten für ein Bild anzugeben, da dann die Seite nicht mehrmals dargestellt werden muss. Werden keine Werte angegeben, wird die Seite geladen und angezeigt. Nach dem Laden der Bilder muss die Seite dann nochmals dargestellt werden, da vorher die Dimensionen der Bilder nicht bekannt waren und alle Positionen neu berechnet werden müssen.
4. Tabellen sollten so weit wie möglich vermieden werden, da die Darstellung von Tabellen sehr viel CPU Zeit benötigt und diese auf mobilen Endgeräten meist nur sehr eingeschränkt zur verfügung steht.
5. CSS Angaben sollten in externen Dateien angegeben werden um die Dokumentengröße klein und damit die Downloadzeiten gering zu halten. Eine CSS Datei kann von den Endgeräten gecached werden und muss nicht bei jedem Klick auf einen Link neu übertragen werden.
6. Auf mobilen Endgeräten ist Usability sehr wichtig. Es ist sehr wichtig einen umfangreichen Usability Test zu machen bevor eine Webseite/WAP-Seite online gestellt wird.Kein User hat Lust sich auf dem Handy durch ein komplexes Menü zu navigieren oder erst endlos vielen Links zu folgen bevor er die gewünschte Seite erreicht.
7. Cookies werden mittlerweile schon von sehr vielen Mobilen Endgeräten unterstützt, wer dennoch sicher gehen möchte oder die Übertragungszeiten minimieren möchte, sollte keine Cookies verwenden. Ein einfacher Weg Cookies zu vermeiden, ist es eine Unique-ID im URL mitzuführen und die zugehörigen Informationen nicht im Cookie sondern in einer Datenbank zu speichern.
Hat Ihnen dieser Beitrag geholfen? Dann speichern Sie Ihne doch bei diesen Diensten:
Wenn Ihnen diese Informationen zu "WAP Seiten mit XHTML fürs Handy" gefallen haben, Sie Anregungen oder Kritik haben, dann schreiben Sie mir doch einfach eine E-Mail an [email protected].
