.mobi WAP 2.0 Development. How to Guide?

Namecheap AuctionsNamecheap Auctions
SpaceshipSpaceship
SpaceshipSpaceship
Watch

anurag

Established Member
Impact
2
How to Develop a Mobi Site.

Hello

As all of us know that .mobi is not the same as other names.

Can some one help me how to develop the site or any software to develop site.


Thanks
Anurag
 
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
GoDaddyGoDaddy
scandiman said:
I don't see a problem in terms of code compliance. But in terms of usability keep the images smaller for the mobile user.


Thanks scandiman, the images are small and they'll be listed alphabetically
for easier access/navigation.
 
0
•••
Incorporate AnswersBox from http://mobile.answers.com to your .mobi or other mobile web site. You only have to cut and paste this HTML code onto your own Web page to produce the Answers search box:

HTML:
<!-- Start www.Answers.com Answers Box --> 

<form action="http://mobile.answers.com/main/ntquery" method="get" accept-charset="UTF-8" style="display:inline;" onsubmit="return document.getElementById('answers_s').value != '';"><a href="http://mobile.answers.com" target="_blank"><img style="margin:0px 0px 3px 0px;padding:0px;" src="http://site.answers.com/main149090/images/small_mobileAnswers.gif" alt="Answers.com"/></a><br/><span style="padding-top:0px;margin-top:0px;color:#003399;font-family:Trebuchet MS;font-size:12px;padding-left:4px;"><a href="http://mobile.answers.com" style="text-decoration:none;color:#003399;" target="_blank">Answers, not links</a></span><input type="hidden" name="gwp" value="15"/><input type="text" name="s" id="s" maxlength="100" style="width:100px;"/><br/><input type="submit" id="go" value=" Go "/></form></div> 

<!-- End www.Answers.com Answers Box -->
I`m just starting to learn website development, so maybe someone can tweak this much better.
 
0
•••
Cool Firefox plugins for mobile web developers:

MobileStartUp.com

# wmlbrowser - Add WML markup support to your browser.

# XHTML Mobile Profile - Add xHTML MP support to your browser.

# User Agent Switcher - Use this plugin to send the user-agent string of whichever mobile browser you want to emulate. Try a diverse range of user-agents to make sure your app can handle all the different formats.

# ModifyHeaders - Allows you to spoof headers. Use this to add an x-up-subno, x-wap-profile, etc. header to your browser session so your app thinks you are coming from a network operators proxy.
 
0
•••
WAP 2.0 Development. Tutorial for NamePros.com

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 :hehe:
 
Last edited:
4
•••
akc,
It is very nice of you to share such info with us. Your caring and sharing attitude is much appreciated. Thanks a bunch and welcome to the forum.
 
0
•••
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/tech/affiliates/wap/wap-277-xhtmlmp-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/dotmobi_Switch_On_Web_Developer_Guide3.html
XHTML-MP Specifications - http://www.openmobilealliance.org/tech/affiliates/wap/wap-277-xhtmlmp-20011029-a.pdf
Wireless CSS Specifications - http://www.openmobilealliance.org/r...2-20040609-C/OMA-WAP-WCSS-V1_1-20040609-C.pdf
XHTML Modularization - http://www.w3.org/TR/2001/REC-xhtml-modularization-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...lename=wurfl_php_tools_21.zip&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:
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

 
Last edited:
1
•••
Thankyou very much, rep added, keep up the good work.

andyr
 
0
•••
Yes, Thank you very much akc. I don't have time to try it now, but I hope you will stay around. :great:
 
0
•••
Andreas, thank you very much for this useful tutorial! :great: Rep added. :)

I`m looking forward for our further cooperation in developing of some my .mobi sites.

If you allow I would like to contribute to this yours great thread with this link (all of xhtml-mp tags list)
 
1
•••
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 :hehe:

Regards,
 
0
•••
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,
 
0
•••
This is a very informative thread. Let me know akc if you would like me to "sticky" it. I think it's worth stickying.
 
0
•••
Yes garrett200, it would be nice that the thread remains sticky.

Cheers,
 
0
•••
Done.
 
0
•••
I have a few custom, very easy to use mobi scripts for sale, including a social network clone of mpals.mobi

Check them out at www.phpplaza.com
 
0
•••
Can anyone tell me how to include javascript in a .mobi page?

I'm struggling with a piece of javascript code that I need to use in my new .mobi web page... :(

Any suggestions?
 
0
•••
del.icio.us said:
Can anyone tell me how to include javascript in a .mobi page?

I'm struggling with a piece of javascript code that I need to use in my new .mobi web page... :(

Any suggestions?
My suggestion, don't use javascript. Not supported by most phones.
 
0
•••
scandiman said:
My suggestion, don't use javascript. Not supported by most phones.


Is there any alternative scripting technology for mobile devices?

I'm developing a dynamic mobile application, which will return dynamic results based on user inputs, just like google search engine. Which technology should I use to develop such a mobile compatible application?
 
0
•••
alright guys...I`m just "trying" to learn not even the ABC but just the A about this.....so please don`t laugh to much at my question:

without hosting I assume I can`t even start to develop Cairns.mobi , so my first problem is the hosting.....where do I get the cheapest /easiest to set one? Is there any free?


Thank you a lot.
 
0
•••
Dev.mobi, site.mobi, or ready.mobi

Go to Dev.mobi where you will find all of the tools you need for FREE.
 
0
•••
CatchedCatched

We're social

Escrow.com
Spaceship
Domain Recover
CryptoExchange.com
Catchy
URLs.com
NameFit
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back