Brief on Device Awareness and Content Adaptation

Mobile Website DevelopmentBrief on Device Awareness & Content Adaptation

Facilitated by:Michael WakaheTawi Commercial Services LtdJuly 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




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 MPXHTML Element Reason for Exclusion

frame, frameset, iframe, noframes

Frames have significant browser memory requirements, including newDOM instances. Frames are not usable on small screens.

applet Java applets are not supported in mobile browsers or natively on mobiledevices. 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



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.



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 URLvar newSrc = "img/michael_icon.png";// Update the image URLdocument.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/


http://www.w3.org/TR/2002/CR-css-mobile-20020725






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 WakaheE-mail: [email protected]

Phone: +254 (0) 20 239 3052 Website: www.tawi.mobi


mailto:[email protected]

http://www.tawi.mobi/

Brief on Device Awareness and Content Adaptation

Education

Transcript of Brief on Device Awareness and Content Adaptation