#1
  1. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493

    Lightbulb 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
    1. What's this all about then?
    2. Creating a simple WAP 1 & WAP 2 (XHTML MP) page
    3. Content Type
    4. Testing
    5. Viewing
    6. Detection
    7. More Resources & Further Reading
    8. 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
    Last edited by jabba_29; June 20th, 2007 at 09:20 PM. Reason: Added links to ToC

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    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.

    __________________
  2. #2
  3. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493

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


    Just save the snippets and upload to your web server.

    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>



    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>


    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/

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    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.

    __________________
  4. #3
  5. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493

    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
    [/code]

    To get PHP to do this for you, see the following examples:
    test_wml.php Code:
    <?php
    header('Content-Type: text/vnd.wap.wml; charset=ISO-8859-1');
    // rest of your code below
    ?>


    test_mhtml.php Code:
    <?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/

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    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.

    __________________
  6. #4
  7. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493

    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:
    <?
    // 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

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    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.

    __________________
  8. #5
  9. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493

    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=affi...id=109892&t=82
    + https://addons.mozilla.org/extension...cation=firefox (wml browser)
    + https://addons.mozilla.org/extension...cation=firefox (mhtml profile)
    + https://addons.mozilla.org/extension...cation=firefox (web developer's toolbar)
    Last edited by jabba_29; July 8th, 2007 at 08:09 PM. Reason: Added resource

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    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.

    __________________
  10. #6
  11. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493

    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.

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    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.

    __________________
  12. #7
  13. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493
  14. #8
  15. Retired
    Devshed Supreme Being (6500+ posts)

    Join Date
    Feb 2002
    Location
    Finland
    Posts
    9,143
    Rep Power
    2493

    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:
    <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!

    Cheers,
    Jamie

    >_ skiFFie ? | Twitter

    __________________

    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.

    __________________

IMN logo majestic logo threadwatch logo seochat tools logo