Hello MOBI domainers, i think i will open a new thread to explain in full how to develop a full WAP 2.0 site, including the programming.
First of all sorry for my english
Methodologie:
1. I will be explaining part by part, post by post, not all in one big post that would not be easy to read.
2. I will begin on how to develop the XHTML-MP part.
3. Then i will begin by explaining how to use WURFL for mobile detection,
4. And last i will explain how to use all that to turn your site in a full WAP 2.0 site that generates traffic.
This post will be Part 1 of the Tutorial...
Please feel free to add anything to the mix...
Cheers,
P.S.: I will begin tonigh when i get home, now i'm working
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
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:
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...
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:
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.
Your welcome, let's move forward this mobi business for the benefit of all...
Yes of course you can add what you like, let's make it a thread of advices and best practices for mobile development. I will continue this tutorial until i have finish explaining how to build a full WAP 2.0 site. It may take me a while though
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:
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:
Use accesskeys in the Primary Navigation.
The primary navigation should include an assigned accesskey that corresponds to a keypad number key whenever possible:
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.
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:
