NamePros.Com - View Single Post - WAP 2.0 Development. Howto Guide?

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/t...-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/dotmo...per_Guide3.html
XHTML-MP Specifications - http://www.openmobilealliance.org/t...-20011029-a.pdf
Wireless CSS Specifications - http://www.openmobilealliance.org/r...-20040609-C.pdf
XHTML Modularization - http://www.w3.org/TR/2001/REC-xhtml...ation-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/down...use_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:

Quote:

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