MOBILE RESOURCES & FAQS

Dev Shed Forums Sponsor:

March 13th, 2006, 10:26 PM

jabba_29

Back in HEL

Dev Shed God 9th Plane (9000 - 9499 posts)

Join Date: Feb 2002

Location: Finland

Posts: 9,061

Folding Points: 57777 Folding Title: Beginner Folder

Time spent in forums: 4 Months 3 Days 9 h 48 m 17 sec
Reputation Power: 2015

Send a message via Google Talk to jabba_29

MOBILE RESOURCES & FAQS

This thread endeavors to answer a few frequently asked questions
and list useful resources to help you make your own WAP pages.

Please PM me, jabba_29, if you wish any additions or modifications.

Contents

What's this all about then?
Creating a simple WAP 1 & WAP 2 (XHTML MP) page
Content Type
Testing
Viewing
Detection
More Resources & Further Reading
Google Wireless Transcoder Tips

What is WAP?

The Wireless Application Protocol (WAP) is an open, global specification that empowers mobile users with wireless devices to easily access and interact with information and services instantly.
Source: OMA

__________________
Cheers,

Jamie

# mdb4u | mobile movie database | Please help to test and promote
# skiFFie | Home of the 'accessibility module' for Drupal
# Jamie Burns [me] Accessibility Module [drupal]
# guidelines | search | wap resources | not getting help | fold to cure

__________________

Let the might of your compassion arise to bring a quick end
to the flowing stream of the blood and tears .....
Please hear my anguished words of truth.

__________________

Last edited by jabba_29 : June 20th, 2007 at 09:20 PM. Reason: Added links to ToC

March 13th, 2006, 10:29 PM

jabba_29

Back in HEL

Join Date: Feb 2002

Location: Finland

Posts: 9,061

Time spent in forums: 4 Months 3 Days 9 h 48 m 17 sec
Reputation Power: 2015

Creating a simple WAP 1 & WAP 2 (xhtml MP) page

Just save the snippets and upload to your web server.

test.wml Code:

Original - test.wml Code
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <card id="test" title="Test WAP 1.0"> <p>Hello, welcome to Dev Shed!</p> </card> </wml>

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="test" title="Test WAP 1.0">
<p>Hello, welcome to Dev Shed!</p>
</card>
</wml>

test.mhtml Code:

Original - test.mhtml Code
<?xml version="1.0" encoding="iso-8859-1"?> <!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" xml:lang="en"> <head> <title>Test WAP 2.0</title> </head> <body> <p>Hello, welcome to Dev Shed!</p> </body> </html>

<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en">
<head>
<title>Test WAP 2.0</title>
</head>
<body>
<p>Hello, welcome to Dev Shed!</p>
</body>
</html>

Good tutorials:

WAP 1:
http://www.w3schools.com/wap/default.asp
http://www.developershome.com/wap/wml/

wmlscript:
http://www.w3schools.com/wmlscript/default.asp
http://www.developershome.com/wap/wmlscript/

WAP 2:
http://www.developershome.com/wap/xhtmlmp/

WAP 2 CSS:
http://www.developershome.com/wap/wcss/

March 13th, 2006, 10:35 PM

jabba_29

Back in HEL

Join Date: Feb 2002

Location: Finland

Posts: 9,061

Time spent in forums: 4 Months 3 Days 9 h 48 m 17 sec
Reputation Power: 2015

Content Type

To get mobiles content served correctly from your server, in this example Apache 2x no real configuration is needed, especially if you use PHP to modify headers. However, if you would like Apache to handle .mhtml files as application/vnd.wap.xhtml+xml, then AddType is what you are looking for. These modifications can be made at server level or per directory using .htaccess if your server's configuration permits.

Code:

httpd.conf

AddType application/vnd.wap.xhtml+xml .mhtml
#same can be done for wml file extension if it isn't serving as text/vnd.wap.wml
AddType text/vnd.wap.wml .wml

To get PHP to do this for you, see the following examples:

test_wml.php Code:

Original - test_wml.php Code
<?php header('Content-Type: text/vnd.wap.wml; charset=ISO-8859-1'); // rest of your code below ?>

<?php
header('Content-Type: text/vnd.wap.wml; charset=ISO-8859-1');
// rest of your code below
?>

test_mhtml.php Code:

Original - test_mhtml.php Code
<?php header('Content-Type: application/vnd.wap.xhtml+xml; charset=ISO-8859-1'); // rest of your code below ?>

<?php
header('Content-Type: application/vnd.wap.xhtml+xml; charset=ISO-8859-1');
// rest of your code below
?>

ASP and JSP examples to follow.

Good tutorial:

SERVER SETUP:
http://www.developershome.com/wap/wapServerSetup/

March 13th, 2006, 10:39 PM

jabba_29

Back in HEL

Join Date: Feb 2002

Location: Finland

Posts: 9,061

Time spent in forums: 4 Months 3 Days 9 h 48 m 17 sec
Reputation Power: 2015

Testing

Before uploading you should validate your code.
Q: Why?
A: Because WAP 1 and WAP 2 are derivatives of XML, any malformed code will cause the page to break,
leading to, in most cases, a page that won't render at all. XML is essentially a stricter version of HTML,
which requires html tags to be in the right order, proper nesting, and closed correctly.

xml code examples Code:

Original - xml code examples Code
<? // incorrect code examples ?> <p><strong>Some text here</p></strong> <img src=someimage> <input type=checkbox checked> Yes <br> <? // above code corrected ?> <p><strong>Some text here</strong></p> <img src="someimage" /> <input type="checkbox" checked="checked" /> Yes <br />

<?
// incorrect code examples
?>
<p><strong>Some text here</p></strong>
<img src=someimage>
<input type=checkbox checked> Yes
<br>
<?
// above code corrected
?>
<p><strong>Some text here</strong></p>
<img src="someimage" />
<input type="checkbox" checked="checked" /> Yes
<br />

See the tutorials links above for more info. To help, you can validate your code online using a validator.

Online Validators
http://www.w3schools.com/wap/wml_validate.asp
http://www.validome.org/
http://mr.dev.mobi/

Last edited by jabba_29 : December 28th, 2006 at 02:23 AM. Reason: Added resource

March 13th, 2006, 10:47 PM

jabba_29

Back in HEL

Join Date: Feb 2002

Location: Finland

Posts: 9,061

Time spent in forums: 4 Months 3 Days 9 h 48 m 17 sec
Reputation Power: 2015

Viewing

So you have now created your pages. You want to see how they look like. There are a 4 ways to do this.

1) Upload your files to a publicly accessible web server (IP address or host) and visit the url using your mobile device
2) Upload your files to a publicly accessible web server (IP address or host) and visit the url using an online emulator.
3) Use an emulator on a privately hosted server (eg: your PC) and use an emulator..

Online emulators
http://pukupi.com/tools/mimic/ (imode)
http://wapsilon.com/ (WAP)
http://emulator.mtld.mobi/emulator.php (Java required)

3) Download wap software or emulators and check on your PC

Software:
http://www.forum.nokia.com/main/0,6566,033_3-3,00.html (Nokia)
http://www.winwap.com/ (winwap)
http://www.ericsson.com/mobilityworld (Ericsson)
http://www.w3schools.com/wap/wap_software.asp (general)
http://www.marketcircle.com/iphoney/ (iPhone - currently MAC only)

4) View your pages using a web browsers with wap and /or SSR capabilities. You can upload your files to your local web server or a publicly accessible one.

Browsers with WAP/WAP2 capabilities
Opera - http://www.opera.com/
Firefox - http://www.spreadfirefox.com/?q=aff...&id=109892&t=82
+ https://addons.mozilla.org/extensio...ication=firefox (wml browser)
+ https://addons.mozilla.org/extensio...ication=firefox (mhtml profile)
+ https://addons.mozilla.org/extensio...ication=firefox (web developer's toolbar)

Last edited by jabba_29 : July 8th, 2007 at 08:09 PM. Reason: Added resource

March 13th, 2006, 10:50 PM

jabba_29

Back in HEL

Join Date: Feb 2002

Location: Finland

Posts: 9,061

Time spent in forums: 4 Months 3 Days 9 h 48 m 17 sec
Reputation Power: 2015

Detection

There are a few ways of detecting wap enabled devices, and rendering content accordingly.
One of the most popular is WURFL. Another method is by checking against the "HTTP_ACCEPT" of the device.

Detection
http://www.developershome.com/wap/detection/

For me, I use a PHP script that I developed myself that checks HTTP_ACCEPT primarily, then a bit of HTTP_USER_AGENT.
Still a work in progress: http://www.skiffie.com/code/php/php-device-detection.

CMS plugins / modules.

There are a few modules around that enable mobile content for ready made CMS solutions:

Accessibility module for Drupal v5x
Accessibility module for Drupal v4.7
Mobile plugin for Wordpress.

Enjoy...

Last edited by jabba_29 : December 19th, 2007 at 06:42 PM.

March 13th, 2006, 10:55 PM

jabba_29

Back in HEL

Join Date: Feb 2002

Location: Finland

Posts: 9,061

Time spent in forums: 4 Months 3 Days 9 h 48 m 17 sec
Reputation Power: 2015

More Resources & Further Reading

General
http://www.wirelessdevnet.com/
http://www.wap-shareware.com/
http://www.devguru.com/technologies/wml/home.asp
http://24ways.org/2006/the-mobile-web-simplified

Forums
This one

Apache
PHP
XML
Forum Nokia
Dot Mobi Forums
Name Pros

Specifications & interests
Open Mobile Alliance
Mobile Web Initiative
MTLD
MTLD Guides

SMS
Sending SMS thread
Sending SMS Thru HTTP
Similar article to the one above
http://www.developershome.com/sms/

PHP / WAP tutorials
http://www.tutorialized.com/tutorials/PHP/WAP-and-WML/1
http://www.zend.com/zend/tut/wap.php
http://www.wirelessdevnet.com/chann...mlcast_php.html

XML & XSLT
http://www.xml.com
http://www.xml.com/pub/rg/142
http://www.devshed.com/c/b/XML/

Media Types
Add Video Mime Type for 3gp Video on Apache Server - article
MIME Media Types

Yahoo Groups
http://groups.yahoo.com/group/wmlprogramming/

Last edited by jabba_29 : July 18th, 2007 at 12:29 AM. Reason: added resource

June 20th, 2007, 09:17 PM

jabba_29

Back in HEL

Join Date: Feb 2002

Location: Finland

Posts: 9,061

Time spent in forums: 4 Months 3 Days 9 h 48 m 17 sec
Reputation Power: 2015

Google Wireless Transcoder

Here are some tips for Google Wireless.

You can tell whether your site is being accessed by Google Wireless Transcoder by its user-agent string.

If you have some sort of detection script running you can look for Googlebot-Mobile in the UA string.
If it is found in the string, render mobile content accordingly.

In addition, you can stop mobile pages from being transcoded by
adding the following lines to the <head></head> of your document...

php Code:

Original - php Code
<link rel="alternate" media="handheld" href="alternate page" />

<link rel="alternate" media="handheld" href="alternate page" />

Note that you do not need to do this for pages that are served in a mobile friendly content type format *:

text/vnd.wap.wml
application/vnd.wap.xhtml+xml

These formats should by default be left alone by the transcoder.

* The device detection script that I use finds best suited content-type and
renders my mobi in text/html if the browser cannot handle application/vnd.wap.xhtml+xml.
Therefore it serves text/html to Google and I need to insert the afore mentioned HTML into the head of my documents.

Pages for imode for example Google will try to transcode the pages as content type should be text/html.

This post is an extension of this thread!

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: