Viewport Meta Anweisung

Ein Kollege hier im Sektor M hat seit einiger Zeit ein iPhone, dieses habe ich mir heute geschnappt und damit rumgespielt. Nachdem ich auf eine optimierte Homepage für das iPhone gelandet bin, habe ich die Viewport Meta Anweisung entdeckt. Diese ist dafür da um z.B. dem iPhone die Breite der Internetseite zu übermitteln, damit sie displaykonform angezeigt wird.

So wird z.B. aus:

ein ansehliches:

Die korrekte Anweisung lautet:

<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />

Weitere technische Details und Beschreibungen findet ihr im Beitrag Web Development for the iPhone aus dem evotech Blog.

W3C News: CSS, Mobile, Selectors API

• Quality Assurance Activity Completes Its Work, QA Becomes the Q&A Weblog
• Last Call: CSS Mobile Profile
• CSS Snapshot 2007: Working Draft
• Behavioral Extensions to CSS: Working Draft
• Selectors API: Working Draft
• Tim Berners-Lee and One Web at Mobile Internet World

W3C News: Mobile Web, XHTML, MathML, Ajax, DOM

• Web Experts Gather for Fundamentos Web 2007
• Policy Languages Interest Group Launched
• Mobile Web Best Practices Working Group Renewed
• Last Call: XHTML Role Attribute Module
• Mathematical Markup Language (MathML) 3.0: Working Draft
• Mobile Ajax: Workshop Report
• W3C Technical Plenary Week Upcoming in Cambridge, USA
• Widgets 1.0: Working Draft
• Video on the Web: Call for Participation
• Language Bindings for DOM Specifications: Working Draft

W3C News: CSS3

• Last Call: MTOM Policy Assertion
• Last Call: XML Pipeline Language
• A MathML for CSS Profile: Working Draft
• Mobile Ajax: W3C and OpenAjax Alliance Joint Workshop
• Update to SPARQL Candidate Recommendation: XML Results Format
• POWDER Description Resources and Vocabulary: Working Drafts
• Last Call: Web Services Policy Primer and Guidelines for Authors
• Last Call: W3C mobileOK Basic Tests 1.0
• POWDER Description Resources, Datatypes and Vocabulary: Working Drafts
• Service Modeling Language (SML): Working Drafts
• Enabling Read Access: Working Draft
• W3C Talks in October

Mit PHP .WML generieren

Wie bereits im Beitrag Mobile Web Design ersichtlich, beschäftige ich mich grade mit dem Mobile Web. Somit habe ich angefangen mit WML ein wenig rum zu experimentieren, da es völlig uninteressant wäre ohne dynamischen Content, wurde ich schnell eingebremst. Denn um zum Beispiel mit PHP entsprechende .WML Seiten generieren zu können müßen entsprechende Rahmenbedingung auf dem Webserver geschaffen werden.

In meinen konkreten Fall, bei einem Kundenprojekt das bei 1&1 gehosted wird, muß man eine .htaccess Datei im entsprechenden Verzeichnis anlegen und dort folgendes eintragen (Danke an Joerg Behrens aus de.comp.lang.php.misc):

AddType x-mapp-php4 .php .wml
DirectoryIndex index.wml

Dies hat zur Folge, das nun auch PHP Anweisungen innerhalb von Dateien mit der Endung .WML ausgeführt werden. Des Weiteren legt man sinnigerweise hier auch die Startseite des Angebots fest.

Nun schaut man sich generell an wie das Standard-Konstrukt einer WML Seite aussehen muß, da noch nicht alles 100% wasserdicht ist, was die Standardisierung angeht, schaut man sich halt aktuelle Angebote an. Daraus resultiert dann folgendes Konstrukt, das durchgängig genutzt wird:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="home" title="Mobile Web">
Hello World!
</card>
</wml>

Da aber nun PHP versuchen würde <? zu interpretieren, müßen wir diese Zeile mit PHP generieren mit einem entsprechenden Header der die Codierung der Seite festlegt und fügen letztendlich noch den codetechnischen Klassiker ein:

<?php
header("Content-Type: text/vnd.wap.wml;charset=UTF-8");
print("\n\n<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="home" title="Mobile Web">
<?php echo "Hello World"; ?>
</card>
</wml>

Und optimalerweise sollte somit in unserem WAP Browser (z.B. WinWAP) dort „Hello World!“ stehen.

Mobile Web Design

Mobile Web Design ist auch der Titel eines entsprechenden Buches dazu. Da sich gerade die Gelegenheit durch einen Kunden ergeben hat und wir uns einig sind, das dies auch Sinn macht für das Unternehmen, werde ich mich mit dieser Materie befassen. Da ich bisher nicht mal ansatzweise damit experimentiert habe, fange ich bei Null an. Doch dies ist nicht das Schlimmste, den somit kann ich schön in Ruhe alle Vor- und Nachteile durchgehen und die Entwicklung mit euch teilen.

Doch schauen wir uns mal aktuelle Mobile Web Angebote an und wie diese realisiert wurden:

• SPIGEL Mobil
• n-tv mobil
• n24
• tagesschau.de

Dazu braucht man natürlich ein entsprechendes Endgerät oder einfach einen entsprechenden Browser der dieses simuliert. Ich benutze momentan zum Testen den WinWAP Browser. Offizilles seitens des W3C gibt es natürlich auch mittlerweile, nämlich die W3C Mobile Web Initiative. Des Weiteren gibt es die Open Mobile Alliance (OMA) die aus dem ehemaligen WAP Forum entstanden ist, dort findet man auch die aktuellen Spezifikationen die relevant sind um entsprechende Angeboten zu gestalten.

Nach einigen hin und her klicken habe ich nun auch mal zwei interessante deutschsprachige Websites gefunden, die sich mit diesem Thema befassen:

• MWBP Flip Cards
• WML – Tutorial

Es gibt garantiert noch zahlreiche weitere Angebote, doch ihr kennt das ja, erst im Laufe der Zeit findet man diese und kann sie halbwegs durchsieben. Falls ihr welche kennt, die man auf jedenfall mal besuchen sollte, dann schreibt sie ruhig in die Kommentare.

Und das Offensichtliche habe ich natürlich erstmal wieder vergessen, denn natürlich gibt es bei W3Schools eine entsprechende Sektion dafür!