Mobile Web Lecture 2 N Amanquah Spring 2011
xHTML WAP2.0 devices support xHTML –MP 1.0 in addition to WML1.x all tags written in small caps all tags must be closed Eg <b>bold text</b> <br />
Start an html page with header ("Content-Type: application/xhtml+xml "); <?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">
xHTML-MP- IE challenges <?php $msie = strpos($_SERVER[“HTTP_USER_AGENT”],’MSIE’) > 0; if (!$msie) { header(“Content-Type: application/xhtml+xml; charset=UTF-8”);} else { header(“Content-Type: text/html; charset=UTF-8”);} ?>
CSS WAP 2.0 supports WCSS, a subset of CSS Provide CSS file if desired <head> <title>Our page</title> <link rel="stylesheet" href="style.css" type="text/css"/> </head> Provide CSS file if desired body { color: #00ff00; background-color: #FFFFFF} .mytext { color: #FF0066; } h1{……}
Menus… Make use of Access keys in menus Use Lists for menus <a accesskey="1" href=“page1.html">Link 1</a> Use Lists for menus <ol> <li><a accesskey="1" href="page1.html">Page1</a></li> <li><a accesskey="2" href="page2.html">Page2</a></li> <li><a accesskey="3" href="page3.html">Page3</a></li> <li><a accesskey="4" href="page4.html">Page4</a></li> </ol> Telephone Tag <a href=“tel:+23324419419” > Call us </a>
Mobile Web Dev- Tips Balance goals and constraints Meet your business goals Meet your user’s needs – Context: what will they do on the move? What info required? They usually need info they can action. What tasks will be accomplished
Lab 1. Device Detection 2. Device properties 3. Image adaptation Static Dynamic
Testing Tools FF -User agent switcher https://addons.mozilla.org/en-US/firefox/addon/59 Download and install Small screen renderer Web developer toolkit/toolbar for FF
User agent for N95 8GB phone Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaN95_8GB/10.0.021; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413 See link for some User agent strings http://wiki.forum.nokia.com/index.php/User-Agent_headers_for_Nokia_devices
Device Atlas Make use of to obtain all properties of your device getProperties($tree, $_SERVER['HTTP_USER_AGENT']) to obtain all properties of your device Use mobileDevice property to determine if it is a mobile. (=0/false if it is not) See doc folder for documentation and usage
usage include "Mobi/Mtld/DA/Api.php"; $tree = Mobi_Mtld_DA_Api::getTreeFromFile("json/Sample.json"); $ua = $_SERVER['HTTP_USER_AGENT']; try{ $vendor = Mobi_Mtld_DA_Api::getProperty($tree, $ua, 'vendor'); } catch (Mobi_Mtld_Da_Exception_InvalidPropertyException $e) { $vendor = "Unknown"; } echo $vendor; … $tree = Mobi_Mtld_DA_Api::getTreeFromFile("sample/Sample.json"); $prps = Mobi_Mtld_DA_Api::getProperties($tree, "Nokia6680..."); $prop = Mobi_Mtld_DA_Api::getProperty($tree, "Nokia6680...", "displayWidth");
Method Summary static integer getApiRevision () static array getProperties ( &$tree, string $userAgent) static array getPropertiesAsTyped ( &$tree, string $userAgent) static string getProperty ( &$tree, string $userAgent, string $property) static boolean getPropertyAsBoolean ( &$tree, string $userAgent, string $property) static string getPropertyAsDate ( &$tree, string $userAgent, string $property) static integer getPropertyAsInteger ( &$tree, string $userAgent, string $property) static string getPropertyAsString ( &$tree, string $userAgent, string $property) static array getTreeFromFile (string $filename) static array getTreeFromString (string $json) static integer getTreeRevision ( &$tree) static array listProperties ( &$tree)
Wurfl: installation Wurfl installation instructions: http://wurfl.sourceforge.net/nphp/
See demo at http://192.168.30.105/mywebs/mwc/wurfl/index.php Download wurfl files at http://192.168.30.105/mywebs/mwc/Links.htm
Image adaptation Static: Dynamic Howto: Display a pre-sized image depending on screen width Dynamic Make use of image adaptation library in conjunction with device atlas Howto: http://mobiforge.com/developing/story/image-adaptation-with-deviceatlas
Useful refs Phone detection and PHP ***http://dev.mobi/article/lightweight-device-detection-php And ASP here: http://dev.mobi/article/lightweight-device-detection-asp what kind of phone is it? ***http://dev.mobi/article/the-deviceatlas-api-php-part-i-the-basics http://dev.mobi/node/858 WURFL in PHP: http://dev.mobi/article/introduction-wurfl Device atlas and image adaptation http://dev.mobi/article/image-adaptation-with-deviceatlas