Brief on Device Awareness and Content Adaptation

Mobile Website Development
Brief on Device Awareness & Content Adaptation
Facilitated by:
Michael Wakahe
Tawi Commercial
Services Ltd
July 2011

Table of Contents
 XHTML MP
 CSS
 JSP
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.

XHTML MP

WURFL
 XHTML MP = XHTML Mobile Profile
 XHTML uses the tag set of HTML and enforces the
rigorous syntax requirements of XML
 XHTML-MP is currently considered the de facto
standard language for Mobile Web development

XHTML MP
 XHTML 1.0 Reference (not XHTML MP 1.0):
http://www.w3.org/TR/2000/REC-xhtml1-20000126/
• XHTML MP 1.0 Document Type Definition (DTD):
http://www.wapforum.org/DTD/xhtml-mobile10.dtd

XHTML MP
<?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>


<title>Annotated XHTML Example</title>
</head>
<body>
<div class="hdr">Annotated XHTML Example</div>
</body>
</html>

XHTML MP
XHTML Element Reason for Exclusion
frame, frameset, iframe,
noframes
Frames have significant browser memory
requirements, including new
DOM instances. Frames are not usable on small
screens.
applet Java applets are not supported in mobile browsers
or natively on mobile
devices. Java SE is not supported on mobile
devices.
area, map Image maps are not supported nor easy to use on
mobile devices.
basefont Specify default font styles using CSS.
XHTML Elements Unsupported in XHTML-MP

XHTML MP
bdo Bidirectional text is not supported.
button Use <input type="submit"> for push buttons.
center Use CSS to align page elements.
col, colgroup Only basic tables are supported. See the next section for
details.
del, ins, s, strike Use CSS to style text to appear as deleted from, inserted into,
or struck from the document.
dir, menu Use CSS to style text to appear as directory or menu lists.
font Use CSS to specify font styles.
legend Basic forms are supported. Legends are not supported in
fieldsets.
noscript, script Supported only in XHTML-MP 1.1 and later.

XHTML MP
sub, sup Mobile devices provide limited fonts. Subscripts and
superscripts are supported.
tbody, tfoot, thead Basic tables are supported. Grouping table header, body and
footer elements is not supported.
tt Use CSS to style text to appear as teletype text.
u Underlining is a universal indicator of link labels. Underlined
text that is not a link is not usable on small screens and
strongly discouraged. However, if underlining is absolutely
required, it may be accomplished using the text-decoration:
underline; CSS directive.
xmp Use CSS or the pre element to style text to appear
preformatted.

XHTML MP
 The tel: URI schemes allow mobile users to click a
link to initiate a phone call.
 Format of a tel: URI is tel:<phone number>
 Example: Call <a href="tel:+254-722–321-
1212">+254-722–321-1212</a> for Information

XHTML MP
 The wtai: scheme is used to initiate phone calls and
add contact phone numbers to the mobile device’s
address book
 Uses a different URI format for each task

XHTML MP
 Format for initiating a phone call from the mobile
device: wtai://wp/mc;<phone number>
 To add a contact into the mobile address book:
wtai://wp/ap;<phone number>;<name>

XHTML MP
 Examples:
Call <a href="wtai://wp/mc;+254728321987">+254-728–
321-1987</a> for Information
<a ref="wtai://wp/ap;+254728321987;Information">Add to
Address Book</a>

XHTML MP
 XHTML-MP 1.1 adds support for the <script> and
<noscript> tags
 The markup snippet below imports an external
JavaScript file into an XHTML-MP document:
<script type="text/javascript" src="js/library.js" />

XHTML MP
 An example of a JavaScript function declared inline in
a XHTML-MP 1.1 document:
<script type="text/javascript">
function handleOnClick() {
// Get the new image URL
var newSrc = "img/michael_icon.png";
// Update the image URL
document.getElementById("theImg").src = newSrc;
}
</script>

XHTML MP
 Below, an XHTML-MP image tag associates the inline
JavaScript function above with its onclick event:
<img id="theImg" src="/logo.png"width="140" height="50"
alt="Logo“ onclick=“handleOnClick();"/>
 The MIME type text/javascript must be used to identify
JavaScript and ECMAScript MP in XHTML-MP 1.1 markup
documents.
 XHTML-MP 1.2 is a new standard, adopted in March 2008

XHTML MP
 Other topics in XHTML MP (see examples):
Forms, Tables, Links and Access Keys
 Many examples at the following link:
http://www.developershome.com/wap/xhtmlmp

CSS

Wireless CSS
/*
This is a Wireless CSS file.
*/
h1 {
color: blue
}
p {
font-style: italic
}
Sample Wireless CSS

Wireless CSS
 CSS = Cascading Style Sheets
 Used to define presentation including layouts,
colours & fonts
 Can use either Wireless CSS or CSS Mobile Profile

Wireless CSS
 Both mobile CSS subsets support core CSS syntax and
properties including selectors, inheritance, the box
model, shorthand properties, generic font families,
and absolute and relative font sizes.
 Both mobile dialects comply with existing CSS syntax
standards and can be validated with a CSS validator.

Wireless CSS
 A CSS statement is consisted of a selector, a property,
and a property value: selector {property:
property_value}
 Example: p {text-align: right}
 Multiple properties are separated with a semicolon:
selector {property1: property_value1; property2:
property_value2; ... propertyN: property_valueN}

Wireless CSS
 Example of multiple properties: p {text-align: right;
color: blue}

Wireless CSS
 CSS Mobile Profile 1.0 Specification:
http://www.w3.org/TR/2002/CR-css-mobile-20020725
 CSS 2 Specification:
http://www.w3.org/TR/2008/REC-CSS2-20080411/

JSP and
Servlets

XHTML MP
 You can also introduce JSP and servlet technology to
XHTML MP similar to the way we did it in WML.
 Remember to save files as .jsp as well as to specify
the MIME type: application/vnd.wap.xhtml+xml
 Sample in next slide

XHTML MP
<?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">
<% response.setContentType("application/vnd.wap.xhtml+xml;charset=UTF-8"); %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Annotated XHTML Example</title>
</head>
<body>
<p>An XHTML JSP Example</p>
<% out.println("<p>My name is Michael</p>"); %>
</body>
</html>

The End
Michael Wakahe
E-mail: michael@tawi.mobi
Phone: +254 (0) 20 239 3052
Website: www.tawi.mobi

Brief on Device Awareness and Content Adaptation

More Related Content

Viewers also liked (11)

Similar to Brief on Device Awareness and Content Adaptation (20)

More from tawi123 (14)

Recently uploaded (20)

Brief on Device Awareness and Content Adaptation