Device Emulators and Simulators: All the major telecommunication
companies offer software development kits for their devices. Here is collection
of links to download emulator and simulators to test your mobile code:
- Openwave Phone Simulator: http://www.openwave.com
- Motorola: http://www.motocoder.com
- Sony Ericsson: http://www.ericsson.com/mobilityworld
- Nokia: http://forum.nokia.com
- Web Server: You'll need a web server to deploy your mobile web sites,
especially if you are planning on generating dynamic or database driven
content. There are many server platforms available including Apache and
Microsoft. You can also use one of a wide variety of server scripting languages
such as PHP, JSP, ASP and ColdFusion. If you want to develop WAP based content
derived from XHTML, you can download a WAP Gateway server on Ericsson's
Indonesian site: http://www.ericsson.co.id/mobilityworld/download/
All of the examples featured in the article were tested on an Apache server
using PHP. You must enable XSLT support in your PHP.INI file to try them out.
For more information, please refer to the following page on the official PHP
website: http://ca.php.net/xslt
- Actual Mobile Devices: Also known as "real-world" testing. Many
companies offer equipment loaner programs to developers. Borrow devices from
friends and family. Or visit a provider (such as Sprint, T-Mobile or AT&T)
to do some "window shopping". Who knows, they may allow you to test out your
web content on a variety of devices.
Case Study: XML.com Mobile Articles
To demonstrate how XHTML content can be reused on multiple devices, we
created a simple XHTML Mobile Profile web page displaying article titles from
the mobile section of XML.com. In a fully functional application, it would be
more practical to bring in the data using an RSS feed or database. Here is a
complete analysis of the XHTML file:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
First, we declare the page as an XML document. Then we set the DOCTYPE to
XHTML Mobile 1.0 and we associate it to the DTD located on WAPForum's server. A
Document Type Definition outlines what tags are allowed and how they should be
formatted on the page. If you want to implement XHTML Mobile Profile using
Openwave's proprietary extensions, you must declare a different DOCTYPE:
<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"
"http://www.openwave.com/dtd/xhtml-mobile10.dtd">
The rest of the document consists of a simple well-formed HTML Page with
links to the mobile articles on XML.com:
<html>
<head>
<title>XML.COM Mobile</title>
XHTML Mobile Profile supports Wireless Cascading Style Sheets (WCSS). We
embed the style sheet into the page using the LINK tag:
<link rel="stylesheet" href="xmlmobile.css" type="text/css"/>
There are alternative ways of embedding stylesheets into XHTML Mobile
Profile pages. Since the document is XML based, you can use an XML declaration
to bring in your styles. Notice that the media type is set as "handheld". The
following line of code is usually right below the XML declaration. Here is an
example of a typical xml-stylesheet declaration:
<?xml-stylesheet href="xmlmobile.css" media="handheld" type="text/css"?>
All the text within the body tag is contained within block level elements
such as Header 1 and Paragraphs as outlined in the XHTML specifications:
</head>
<body>
<h1>Current Articles</h1>
<p><a href="http://www.xml.com/pub/a/2004/01/28/binaryxml.html">
Binary Waltz, Play On</a></p>
<p><a href="http://www.xml.com/pub/a/ws/2003/08/19/mobile.html">
A Web Services Strategy for Mobile Phones</a></p>
<p><a href="http://www.xml.com/pub/a/ws/2003/08/19/ksoap.html">
Low Bandwidth SOAP</a></p>
<p><a href="http://www.xml.com/pub/a/2003/08/13/deviant.html">
Binary XML, Again</a></p>
</body>
</html>
For more detailed information on XHTML, take a look at this great tutorial found on the W3Schools website: http://www.w3schools.com/xhtml/default.asp
Introducing Wireless Cascading Style Sheets
XHTML is a versatile document type. Not only will it behave like a regular
HTML page, but it also structures data like an XML file. In this new paradigm,
data elements and presentation elements are treated as separate entities.
Wireless Cascading Style Sheets provides the presentation elements to XHTML
Mobile Profile documents.
Here is an example of Wireless CSS code which can be applied to our XHTML page. We've defined four styles for four HTML elements: Heading 1, Paragraphs, Anchors and the Body tag:
h1 {font-size:x-large;color:#4040ff;text-align:center;
text-decoration:underline;}
p {border:1px #6060ff solid;background:#f0f0ff;
text-align:center;font-size:medium;padding:4px;}
a {color:black}
body {background:#c0c0ff;}
Here is a screenshot of the XHTML/WCSS combination in Internet Explorer 6.0:
Some devices will override the CSS tags you've defined. For example, if you
are using a monochromatic device the colors will obviously be ignored. Also
keep in mind that the implementation of CSS in mobile device browsers is a
rather new development. Don't be surprised if you get inconsistent results
when you test on different devices, especially image and font rendering.
Due to device limitations, mobile browsers usually can't cache files like
regular web browsers. Keep in mind that every time a user will access your
page, the CSS file will download into the device. Interestingly enough, most
wireless vendors (Nokia, Openwave, AU Systems and Access) have added support
for embedding inline styles on your XHTML (which bypasses the multiple file
download problem, but also ties your presentation code to your data). Inline
styles are not officially part of the Mobile Profile standard.
Choosing the right XHTML Mobile Profile MIME Type
You have to configure appropriate MIME types to host XHTML Mobile Profile
pages on your web server. The Open Mobile Alliance recommends you use the
following MIME type for XHTML Mobile Profile content:
application/vnd.wap.xhtml+xml
Realistically, the implementation of XHTML MP differs from the stated
specifications, especially in regards to WAP support. The only company that
supports WAP in their mobile browser is Openwave. Most mobile browsers from OMA
members support basic XHTML; therefore you can also set the MIME type as application/xhtml+xml.
The MIME type is usually used for browser validation. Either one is suitable
for outputting XHTML Mobile Profile. Your choice of MIME types will depend on
the presence of WAP based features in your Mobile Profile documents.
Handling Different Implementations and Vendor-Specific Features
XHTML Mobile Profile is a step in the right direction, but there are still
challenging obstacles ahead in regards to multi-platform wireless development.
Many vendors have chosen different implementations of XHTML Mobile Profile in
their mobile browsers. For example, the Access browser on Japanese DoCoMo
cellphones supports the stripped down XHTML Basic rather than the entire Mobile
Profile specifications. New Nokia phones can handle XHTML Mobile Profile, but
without the WAP namespace support.
A solution to get around these differences is to go with the lowest common
denominator -- create web pages and content in strict XHTML Basic, which is
theoretically supported on all devices. Unfortunately, this solution doesn't
really take into account or harness the amazing proprietary features found on
many devices. Fortunately, you can have the best of both worlds without having
to write down or research the capabilities of an untold number of devices.
[1] [2] Next