Download presentation
Presentation is loading. Please wait.
1
Mobile Web Lecture 2 N Amanquah Spring 2011
2
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 />
3
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" "
4
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”);} ?>
5
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{……}
6
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: ” > Call us </a>
7
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
8
Lab 1. Device Detection 2. Device properties 3. Image adaptation
Static Dynamic
9
Testing Tools FF -User agent switcher
Download and install Small screen renderer Web developer toolkit/toolbar for FF
10
User agent for N95 8GB phone
Mozilla/5.0 (SymbianOS/9.2; U; Series60/3.1 NokiaN95_8GB/ ; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413 See link for some User agent strings
11
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
12
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, "Nokia "); $prop = Mobi_Mtld_DA_Api::getProperty($tree, "Nokia ", "displayWidth");
13
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)
14
Wurfl: installation Wurfl installation instructions:
15
See demo at http://192.168.30.105/mywebs/mwc/wurfl/index.php
Download wurfl files at
16
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:
17
Useful refs Phone detection and PHP
*** And ASP here: what kind of phone is it? *** WURFL in PHP: Device atlas and image adaptation
Similar presentations
