WAP 2.0 How-to Guide: How to Build a Mobile Site

**akc** · 07-05-2007 12:44 PM

Hello people, i have created a thread explaining how to create a full WAP 2.0 site, the tutorial will explain everything from XHTML-MP to using PHP and WURFL.

Regards,

**akc** · 07-05-2007 12:47 PM

Part 1:

First of all you should save all your pages as page.xhtml, don't forget to do this, unless you are doing programming, in that case your pages will be page.php, page.jsp, etc.

This tutorial will explain in detail mobi development in PHP5, if you need something more complex like Java(JSP,JSF,WebServices) you should hire my services

Sending the correct MIME types.

First of all you must configure the HTTP of your hosting to send the correct MIME types to the end user. To do that i will explain how to configure the .htaccess file on Apache that all hosting accounts have. You should open your .htaccess file and add this text. This file is a hidden file, and probably does not contain any text.

1. This line adds this type of file to the list of MIME types supported by your HTTP Server.

Code:

AddType application/xhtml+xml .xhtml

2. This line configures the server to listing on index.xhtml

Code:

DirectoryIndex index.html index.xhtml index.php

3. This redirects www.yoursite.mobi to yoursite.mobi and viceversa. This is specially usefull when it comes to SEO optimization.

Code:

RewriteEngine On
RewriteCond %{HTTP_HOST} ^yoursite\.mobi [nc]
RewriteRule (.*) http://www.yoursite.mobi/$1 [R=301,L]

4. This line change the MIME type to "text/html" if the browser is Explorer, because the Explorer does not recognize XHTML extensions, everything else is served as .xhtml

Code:

RewriteCond %{HTTP_USER_AGENT} .*MSIE.*
RewriteCond %{REQUEST_URI} \.xhtml$
RewriteRule .* - [T=text/html]

Using the correct Encoding and DocType.

Character Encoding: The XML directive tells the navigator how to display the characters on a page.

Code:

<?xml version="1.0" encoding="UTF-8" ?>

DocType: The DocType tells the navigator how a page should be interpreted, including the rules and how strictly they should be.

Code:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

XHTML Meta Tags.
Here you probably know how to do things but there is a very special feature to use: CACHE
You must always use cache to download all images and stylesheets ones, so you save the user from downloading everything with any subsequent request.
Here is a sample of using Meta Tags:

Code:

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="description" content="Your site's description" />
<meta name="keywords" content="Lots of keywords here" />
<meta http-equiv="Cache-Control" content="max-age=300"/>
<link rel="icon" href="images/favicon.ico"/>
<link rel="shortcut icon" href="images/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Your site's title.</title>

Note the line:

Code:

<meta http-equiv="Cache-Control" content="max-age=300"/>

This line sets the cache to 300 minutes, this is necesary for saving download cost and time. But must be deactivated for debuging.

Here i leave you a full example of how your header should look like:

Code:

<?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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="description" content="Your site's description" />
<meta name="keywords" content="Lots of keywords here" />
<meta http-equiv="Cache-Control" content="max-age=300"/>
<link rel="icon" href="images/favicon.ico"/>
<link rel="shortcut icon" href="images/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Your site's title.</title>
</head>

Here i leave you a few links for you to check:

Mobile Design Patterns - http://patterns.littlespringsdesign.com
WAP 2.0 Specification - http://www.wapforum.org/what/technical.htm
WAP 2.0 Technology White Paper - http://www.wapforum.org/what/WAPWhite_Paper1.pdf
XHTML-MP 1.0 Specification - http://www.openmobilealliance.org/te...20011029-a.pdf
Comparison of XHTML Mobile Profile and XHTML Basic - http://pc.dev.mobi/?q=node/119
W3C Mobile Web Best Practices Working Group - http://www.w3.org/2005/MWI/BPWG/
W3C mobileOK Scheme 1.0 - http://www.w3.org/TR/mobileOK/
MobiReady Report - http://ready.mobi
W3C Mobile Web Best Practices Basic Guidelines - http://www.w3.org/TR/mobile-bp/
dotMobi Switch On Web Developers Guide - http://pc.mtld.mobi/documents/dotmob...er_Guide3.html
XHTML-MP Specifications - http://www.openmobilealliance.org/te...20011029-a.pdf
Wireless CSS Specifications - http://www.openmobilealliance.org/re...20040609-C.pdf
XHTML Modularization - http://www.w3.org/TR/2001/REC-xhtml-...tion-20010410/

This is everything you need to know on how to configure the header for a Static XHTML-MP, more to come on headers on Dinamic XHTML-MP with PHP5

Cheers,

Andreas Peter Koenzen

Continue Part 1:

WURFL

What is WURFL?

WURFL is a software that enables you to detect mobile devices through the HTTP Header using the device's USER AGENT.
The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices.

How to use it with PHP?
Well i will give you here a script that detects if the browser is a desktop browser or a mobile browser. I will explain how to use it and i will explain how to use WURFL to detect specific phone characteristics for better display. WURFL is very usefull for specific phone characteristics like the display, what kind of images the devices supports and many more.

I will begin by explaining how to install WURFL on your site...

How to install WURFL?
First you download the software for PHP here:
http://sourceforge.net/project/downl...se_mirror=ufpr
The you download the XML file that contains the characteristics for every phone here:
http://wurfl.sourceforge.net/wurfl.xml

To install WURFL you can create a folder on your root directory named "wurfl", you copy there all files provided by PHP Tools.
The files are:
- check_wurfl.php
- update_cache.php
- wurfl_class.php
- wurfl_config.php
- wurfl_parser.php
- readme.txt

Then you proceed to create a folder also on your root directory called "wurfl_data". In this folder you should put your wurfl.xml file.

What you do next is edit your "wurfl_config.php" file:
This is what you need to do:
1. Open the file in your text editor or IDE.
2. Change this line to the path of your wurfl_data folder you just created.
i.e. define("DATADIR", 'path/wurfl_data/');
I recomend using the full path to this directory.
Like define("DATADIR", '/var/www/html/wurfl_data/');
3. Change the path to your wurfl_parser.php file.
i.e. define("WURFL_PARSER_FILE", 'path/wurfl/wurfl_parser.php');
Like define("WURFL_PARSER_FILE", '/var/www/html/wurfl/wurfl_parser.php');
4. Change the path to your wurfl_class.php file.
i.e. define("WURFL_CLASS_FILE", 'path/wurfl/wurfl_class.php');
Like define("WURFL_CLASS_FILE", '/var/www/html/wurfl/wurfl_class.php');
5. Finally you should configure WURFL to use cache, this is very simple and i recommend using MULTICACHE. This is acomplish by setting the CONSTANTS "define ("WURFL_USE_CACHE", true);" to "true" and "define ("WURFL_USE_MULTICACHE", true);" to "true".
6. This is everything you need to do to install WURFL.

Now that everything is finish installing WURFL, you need to go with your browser to www.yoursite.mobi/path_to_wurfl/update_cache.php, this will initialize the WURFL cache. If everything works fine you would see a message like this:

Parser load time:0.010666131973267
Parsing time:6.2261588573456
Total:1183602354.1569

If this message appears it means that you have installed WURFL successfully

Script to detect mobile browser or desktop browser.
Here is a script to detect if a browser is mobile or desktop:

Code:

<?php
/*
 * Script to detect browsers.
 * @author APKC.net - Desarrollo para Móviles
 * @version 1.0
 */

//--------------------------------------------------
# Here import the two files necesary by WURFL to do the detection.
require_once ('path_to_wurfl/wurfl/wurfl_config.php');
require_once ('path_to_wurfl/wurfl/wurfl_class.php');
//--------------------------------------------------

//--------------------------------------------------
/**
 * Performs the detection of devices.
 * @access public
 * @author APKC.net
 * @return none
 */
function device_detection()
{
  if (!isset($_SESSION['wurfl_id'])) {
    $myDevice = new wurfl_class();
    $myDevice -> GetDeviceCapabilitiesFromAgent($_SERVER["HTTP_USER_AGENT"]);

    #Session variables.
    $_SESSION['myDevice'] = $myDevice;
    $_SESSION['user_agent'] = $_SERVER['HTTP_USER_AGENT'];
    $_SESSION['brand_name'] = $myDevice -> getDeviceCapability('brand_name');
    $_SESSION['model_name'] = $myDevice -> getDeviceCapability('model_name');

    #Array of WURFL capabilities.
    $wurfl_array = array();
    $wurfl_array = $myDevice -> capabilities;

    #Checks if there is a fallback ID.
    if (isset($wurfl_array['fall_back'])) {
      $_SESSION['wurfl_id_fallback'] = $wurfl_array['fall_back'];
    } else {
      $_SESSION['wurfl_id_fallback'] = 'This device does not have a Fallback ID.';
    }

    #Checks if the browser is WAP or not.
    $_SESSION['browser_is_wap'] = $myDevice -> browser_is_wap;

    if ($_SESSION['browser_is_wap']) {
      $_SESSION['modo'] = 'movil';
      #Use the fallback ID instead of the regular ID.
      $_SESSION['wurfl_id'] = $_SESSION['wurfl_id_fallback'];
    } else {
      $_SESSION['modo'] = 'desktop';
      $_SESSION['wurfl_id'] = 'nokia_6600_ver1';
    }
  }
}
//--------------------------------------------------
?>

This script will detect the browser of the user and stored in a session variable for later use. It is very important to use session variables for this kind of thing because it is safer and more convenient if you have many pages.

Later i will explain how to put all this things together to build a full WAP 2.0 site.

Cheers,

Andreas Peter Koenzen

**Andres Kello** · 07-05-2007 01:11 PM

Great info, Andreas, I've "stuck" your guide.

Big thanks,
Andres

**Scandiman** · 07-05-2007 01:46 PM

This is great stuff Andreas, I especially appreciate the instructions to help resolve the .xhtml file naming via the htaccess file. I'll be digging through your links today!

**akc** · 07-07-2007 07:57 PM

Part 2: The body

Always Use Well-formed Code.
For those not familiar with XHTML, the first thing to know is that all code should validate (according to the doctype) and be well-formed (a valid XML document).
Here is a basic run down of the rules of well-formed XML as well as the key differences between XHTML and HTML.

Code:

1. All elements should be closed, e.g. <br/>. These are also acceptable: <br></br>, and <br />.
2. All non-empty elements should be closed: <p>Example Text</p>
3. All elements must be properly nested: <em><strong>Example Text</strong></em>
4. The alt attribute must be used for all images: <img src="image.png" alt="Image Description" />
5. Text should appear within a block level element and not directly in the body: <body><p>Example Text</p></body>
6. Inline elements should always nest with block level elements: <h2><em>Example Text</em></h2>
7. All attributes should appear within quotes: <p class="names"/>
8. All elements and attributes should use lowercase: <p class="Sm">Example Text <hr noshade="true"/></p>

There are many online Web tools that you can use to validate your markup including the MobiReady Report and the W3C Validation service. There are also browser-based tools such as the HTML Validator Firefox Extension that can be used throughout the development cycle to keep an eye on your pages.

Always Avoid Using Tables for Layout.
We can now add our content in the body of our document, but first we need to add structural elements to contain each logical section, a header, footer and the main body, for example.
With HTML 4, it was common practice to use tables to control the layout of content. This technique, however, constricts the use of our markup by integrating presentational layout into our code. While this doesn’t seem like a critical issue, it becomes a big problem when the page is viewed in multiple mobile browsers.
Instead, use XHTML-friendly <div> elements to logically contain our content for later styling to control the presentation. Since we usually display text in a single section, the structure is straightforward with a content container in the middle of a header and footer:

Code:

<body>
<div id="header">
<!-- Header placeholder -->
</div>
<div id="content">
<!-- Content placeholder -->
</div>
<div id="footer">
<!-- Footer placeholder -->
</div>
</body>

Place Navigation in the Content Body.
Unlike on the desktop, it usually isn’t a good idea to have a navigation list on every page. Given the vertical orientation of the mobile page, you should show only navigation that’s relevant to the page, thereby reducing page weight and scrolling. Thus, the navigation goes into the content body:

Code:

<div id="content">
<ol>
<li><a href="news.html">News</a><li>
<li><a href="products.html">Our Products</a></li>
<li><a href="customers.html">Our Customers</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ol>
</div>

Use accesskeys in the Primary Navigation.
The primary navigation should include an assigned accesskey that corresponds to a keypad number key whenever possible:

Code:

<li><a href="news.html" accesskey="1">News</a></li>

This code links the News item to the “1” key on the mobile keypad and displays the number 1 by it (if the <li> it is part of is the first in the list, of course). Obviously, navigation that exceeds the number of keys on the keypad makes it difficult to provide accesskeys for lists with more than ten items. While not a requirement for all links, accesskeys are useful for primary navigation.

Use Ordered Lists for Navigation.
Unlike on the desktop Web it isn’t the best idea to have a navigation list on every page. Given the vertical orientation of the mobile page you should only show navigation relevant to the page, reducing page weight and scrolling. Instead we will add our navigation into the content body.

Code:

<div id="content">
<ol>
<li><a href="news.html" accesskey="1">News</a><li>
<li><a href="products.html" accesskey="2">Our Products</a></li>
<li><a href="customers.html" accesskey="3">Our Customers</a></li>
<li><a href="about.html" accesskey="4">About Us</a></li>
<li><a href="contact.html" accesskey="5">Contact Us</a></li>
</ol>
</div>

For our home page, we can take certain liberties in providing a description for each link to let users know what to expect in each section. By wrapping the description into a <span>, we can use CSS to style it differently from the navigation:

Code:

<div id="content">
<ol>
<li>
<a href="news.html">News</a>
<span class="description">Read the latest about our products.</span>
</li>
<li>
<a href="products.html">Our Products</a>
<span class="description">Browse our product descriptions.</span>
</li>
<li>
<a href="customers.html">Our Customers</a>
<span class="description">View our customers.</span>
</li>
<li>
<a href="about.html">About Us</a>
<span class="description">What we do? How can we help
you?</span></li>
<li>
<a href="contact.html">Contact Us</a>
<span class="description">Telephone, email and location details.</span>
</li>
</ol>

Linking Phone Numbers.
One of the benefits of the Mobile Web is that its users primarily view it on a phone, allowing the user to quickly and easily make phone calls. It’s an opportunity to help the user and save steps:

Code:

<a href="tel:+12065450210">+1 206 545-0210</a>

Like any hyperlink, any text could appear between the <a> element to initiate a call. However, the recommendation is to display the phone number.

Dealing with Forms can be Tricky.
Entering data into a Mobile Web site can be a difficult and time-consuming process. To avoid wasting the user’s time and causing frustration, use forms sparingly.
However, when using forms, reduce the required information as much as possible. The following creates a contact form with few fields:

Code:

<form method="post" action="process_comment.cgi">
<dl>
<dt>Your comment is about:</dt>
<dd><input type="radio" id="cat1" value="website" accesskey="w" />
<label for="cat1">Our <span class="accesskey">W</span>eb Site</label></dd>
<dd><input type="radio" id="cat2" value="product" accesskey="p" />
<label for="cat2">Our <span class="accesskey">P</span>roducts</label></dd>
<dd><input type="radio" id="cat3" value="news" accesskey="n" />
<label for="cat3">A <span class="accesskey">N</span>ews Article</label></dd>
<dd><input type="radio" id="cat4" value="other" accesskey="o" />
<label for="cat3"><span class="accesskey">O</span>ther</label></dd>
<dt><label for="comment">Your comment:</label></dt>
<dd><textarea id="comment" name="comment" rows="5" cols="20"></textarea></dd>
<dt><label for="email">Your e-mail (optional):</label></dt>
<dd><input type="text" name="email" id="email" /></dd>
<dt><input type="submit" value="Send" /></dt>
</dl>
</form>

References.
W3C Mobile Web Best Practices Basic Guidelines - http://www.w3.org/TR/mobile-bp/
Global Authoring Practices - http://www.passani.it/gap/
Firefox HTML Validator - http://users.skynet.be/mgueury/mozilla/

Cheers,

**gogo** · 10-07-2007 11:46 PM

Thanks for all that really helpful info. The DTD used here is
!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">Just wondering about other DTDs? see the other thread on this http://mobility.mobi/showthread.php?t=255

Thread: WAP 2.0 How-to Guide: How to Build a Mobile Site

Thread Tools

Display

WAP 2.0 How-to Guide: How to Build a Mobile Site

Similar Threads

Build A Mobile Web Search Site Using Bing or Yahoo Data?

Entire site build in flashlite?

FrommersLA.mobi : Frommer's Travel Guide has their .mobi mobile site

Build your mobile site fast with these scripts - $25.00 Each For a Limited Time

Bookmarks

Bookmarks

Posting Permissions