WAP 2.

0 Mobile Web:
XHTML Mobile Profile

David Robison & Jules Pagna Disso

University of Bradford
Objectives of the session
 Discuss the relationship between XHTML,
XHTML Basic, XHTML-MP.
 Do some practical work in XHTML MP –
developing a WAP 2.0 mobile website.
 Examine Cascading Style Sheets (CSS) and
how they can be used for mobile website design.
 Discuss server-side options for dynamic Mobile
Web content.
Wireless Application Protocol (WAP 2.0)

 Wireless Application Protocol (WAP 1.0) was the

first Internet service for mobile devices in
Europe. WAP pages were written in WML
(Wireless Mark-up Language).
 Perceived ‘failure’ – a lack of services and
mismatched consumer expectations. Meanwhile
the Mobile Web continues to evolve and grow.
 WAP 2.0 is the Mobile Web with added ‘colour’
and enhanced media capabilities – more
converged with Web development for PCs.
 WAP 2.0 Web pages are generally designed in
XHTML MP.
Mark-up languages
(too many acronyms)
 SGML (Standardised General
Mark-up Language)
 HTML (Hypertext Mark-up
Language) – used for regular
Web pages
 XML (eXtensible Markup
Language)
 XHTML (eXtensible Hypertext
Mark-up Language - a
junction between HTML 4.01
and XML)
 WML1 (Wireless Mark-up
Language – WAP 1.0)
 XHTML MP (XHTML Mobile Image source:
Profile – WAP 2.0) http://www.littlespringsdesign.com/
design/xhtmlinfo
Important Organisations
 World Wide Web Consortium (W3C):
Maintains Web standards and
specifications (www.w3.org).

 Open Mobile Alliance (previously The

WAP Forum) has members from over
300 mainly mobile and IT related
organisations. It has specified
XHTML Mobile Profile, among other
things (www.openmobilealliance.org).
What is XHTML?
 Developing XHTML is very much like developing
using HTML. The elements (tags) and attributes
are almost identical.
 XHTML is an intersection of HTML and XML – a
reformulation of HTML as an application of XML.
 Pages written in XHTML work well in most
browsers.
 XHTML is stricter than HTML. All tags, including
empty elements, must be closed and in lower
case.
 It is defined by W3C
XHTML Basic
 XHTML Basic is essentially a cut-down version
of XHTML, suitable for devices with limited
processing and display capabilities (such as
handhelds).
 It still looks like a lot like HTML, but without
many features that are hard to support on
mobile devices: frames, nested tables, internal
style sheets (CSS), complex forms and scripting.
 XHTML Basic was again defined by W3C. See
http://www.w3.org/TR/xhtml-basic for
background.
 XHTML Basic – Modules and Elements

Note: The Elements look a lot like regular HTML and behave in a very similar way
XHTML Mobile Profile

 The WAP Forum (now OMA) added

some features to XHTML Basic in order
to rectify some of its limitations, thus
creating XHTML Mobile Profile (MP).
 XHTML MP extends XHTML Basic to
bring extra functionality to developers,
including more display elements and
internal style sheets (CSS).
 XHTML MP is a strict subset of XHTML.
Web References
XHTML (for background):
 http://www.w3.org/TR/xhtml1
XHTML Basic (for background):
 http://www.w3.org/TR/xhtml-basic
XHTML-MP (required reading):
 http://developer.openwave.com/dvl/support/docu
mentation/guides_and_references/xhtml_tutorial/i
ndex.htm
 http://developer.openwave.com/dvl/support/docu
mentation/guides_and_references/xhtml-
mp_style_guide
 Getting Started with WAP 2.0
Development
 We’re going to use
Nokia Emulators to
test our applications.
 We have the 5100
(pictured) and the
Series 40 available
from the Start menu
– you can swap
between them to test
how your pages look.
Dreamweaver
 We’ll be using the emulators in conjunction with
Dreamweaver 8 (the very latest version)
 Within Dreamweaver you can manage a great many
Web development and design functions – initially
we’ll be using it largely as a text editor (which helps
us code).
 Dreamweaver has two main view settings – Design
view and Code view. You want to be in Code View
at first.
 It also gives you a head start when developing WML,
XHTML, CSS by providing templates and the like.
 If you’ve never programmed used HTML before you
may be feeling a little lost – please follow the tutorial
links in this document and elsewhere, and ask for
help if stuck.
 Creating a Blank XHTML file in Adobe
Dreamweaver CS3
 File  new  Blank page
 Page type = HTML 
doc type = xhtml MP 1.0
 Adobe Dreamweaver
treats this document as
HTML. However if you
save it with the extension
".xhtml" – it becomes
readable in the Nokia
5100 and other XHTML
MP devices.
 There are further issues
to be explored around the
opening prolog lines it
produces, but lets get on
with actually developing!
 Try this XHTML MP Example
<?xml version="1.0"?>
<!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>My Mobile Page</title>
  </head>
  <body>
    <div>Hello world.</div>
  </body>
</html>

 Note: you can ignore everything before <html> in most cases

 Save it as hello.xhtml and load it in a mobile emulator.
 Also check out Adobe Dreamweavers CS3 validation capabilities which
can save you a lot of time
 Display your page in a browser and display the same page using device
central (File  Preview in browser  device central)
 Font Style in XHTML MP
 You can use tags to change the font style of the
text in XHTML MP.
 Some WAP browsers only support a subset of
these tags, even though these tags are defined by
the XHTML MP specification.
 This is because the WAP browser can only make
use of the fonts available on the mobile device. For
example, if the italic font is not available, the italic
style is not supported.
 Unsupported XHTML MP tags will be ignored by
WAP browsers and will not cause any errors.
 Font style code example
<?xml version="1.0"?>
<!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>Font Style</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
<b>Bold</b><br/>
<i>Italic</i><br/>
<b><i>Bold italic</i></b><br/>
<small>Small</small><br/>
<big>Big</big><br/>
<em>Emphasis</em><br/>
<strong>Strong</strong>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
</div>
</body>
</html>
Explanation

 Note what happens when you test the output in different mobile
browsers.
 The <b> and <i> tags mean bold and italic.
 The <small> tag reduces the text size.
 The <big> tag increases it.
 The <em> and <strong> styles are similar. The WAP browser will
display text with emphasis (<em>) or strong (<strong>) style in
some way that makes it more noticeable. The effect depends on the
actual wireless device.
 You can have more precise control over font formats with WAP
CSS. For example, you can control the font family to be used or set
a specific font size (e.g. 12pt) to some text.
 The <u> tag of HTML does not exist in XHTML MP. So, if you want
to underline some text, WAP CSS has to be used.
Trouble-shooting

 Rules for XHTML documents

1) All tag and attribute names should be
lowercase (e.g. <div>Hello World</div>)
2)"Empty" tags must have an extra slash at the
end (e.g. the line break <br />)
3) Never leave out an end tag
4) Usually save files with the extension ".xhtml"
5) Tags must be correctly ‘nested’ (e.g.
<div><em>emboldened text</em></div>)
Lists - output
 XHTML provides tags
for unnumbered lists,
ordered or numbered
lists, and definition lists
and terms.
 This is what it looks like
on the Openwave
browser (available from
openwave.com) – for
now use the Nokia ones.
 You should also be able
 Lists
<?xml version="1.0"?>
<!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>Unnumbered Lists</title>
</head>

<body>
<div><em>Unnumbered List:</em></div>
<ul>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
<li>And so on...</li>
</ul>

</body>
</html>
Links, Hyperlinks, Calls and Emails
 Like in WML and in HTML, Hyperlinks are used
to link to another XHTML document and you can
use href to trigger a call also.
 Examples:

 <a href="page2.xhtml">page 2</a>

 <a href="http://www.bbc.co.uk/wap">BBC Wap</a>
 <a href="wtai://wp/mc;8005551212">Call Number</a>
 <a href="mailto:[email protected]">Email Joe</a>


Tables
 XHTML MP provides support for use of
tables <head>
<title>An XHTML MP Table</title>
</head>

<body>
<table>
<tr>
<td>Item 1</td>
<td>Item 2</td>
</tr>

<tr>
<td>Item 3</td>
<td>Item 4</td>
</tr>
</table>
</body>
Table output
Comments
 You can include comments in your XHTML-MP code.
Browsers ignore all comments.
 A comment is every character between the comment
start string ( <!-- )and the comment end string ( --> ):
<!-- one or more lines of comments -->
 Comments can contain reminders about how and why
you wrote the code the way you did, plans for the future,
or other helpful information for yourself or others who will
work with your code. You can also use comments to
disable sections of code temporarily.
 NOTE  The browser downloads comments along with
the rest of the document. Keep your comments brief.
Lengthy comments are not efficient for small devices.
User Input
 The input element allows the user to enter information
 Rather than listing the code here – an example version is included online
(currently at www.mobilitystudies.com/masters/xhtml-
mp/input.xhtml).
User Input
 Input is a key element of mobile
development
 Read more on the technicalities of using
XHTML MP for input here:
http://www.developershome.com/wap/xht
mlmp/xhtml_mp_tutorial.asp?
page=inputElements
 What do we then do with the data? (Client
side scripting or server side dealings)
Integrating XHMTL Basic and WML/WMLScript?

 XHTML MP and WML are not the same thing –

however, WAP 2.0 compatible devices should
be able to read WML documents as well.
 Some of the features of WML are not available
in XHTML MP documents – Cards and Decks
do not exist for example.
 You cannot call a WMLScript function directly
from an XHTML MP document.
 You can branch to a WML document that calls
the WMLScript function.
Cascading Style Sheets (CSS)
 XHTML supports CSS.
 CSS allows you to establish a
consistent design and formatting across
all pages of a site.
 With CSS, if you want to change the
style or formatting of a page, you just
have to change the CSS, not each page
element individually
Cascading Style Sheets
 XHTML Basic only supports CSS through
external links
 but XHTML-MP allows internal CSS as well.

 Use caution with external CSS. In theory, external

CSS allows you to have one CSS that applies to your
entire site while reducing the amount of downloading the
user has to do. In practice, many browsers do not cache
the CSS and thus download it again for each page the
user visits. Further, when the CSS is downloaded, the
already-displayed XHTML content jumps around to
render the new styling.
 CSS code example
Save the following as "style.css" in the same folder:
body { background-color: #efefdd; font-family: Arial, Verdana, Helvetica;
font-size: 10pt; color: #000044;}

div { font-family: Arial, Verdana, Helvetica; font-size: 10pt; color: #000044;}

hr { color:#006600;}

h1 { font-family: Verdana, Arial, Helvetica; font-size: 14pt; color: #000000;}

h2 { font-family: Verdana, Arial, Helvetica; font-size: 12pt; color: #000000;}
h3 { font-family: Verdana, Arial, Helvetica; font-size: 10pt;font-weight:bold;
color: #00000;}

a{ color: #1144aa; text-decoration: none;}

a:hover { text-decoration: underline;}
a:visited { color: #4466cc;}
Cascading Style Sheets (CSS)
 Style sheets are composed of selectors,
properties, and values
 Selectors – elements in your XHTML MP document
(e.g. "h1 {…}")
 Properties – relate to the selector, associated with
the characteristics of a particular element (e.g. "font-
family:")
 Values – describe properties, used for such tasks as
setting font to a particular font family (e.g. "arial")
Using the <link> Element to Apply an
External Style Sheet
 You can use the XHTML-MP <link> element to apply
an external (separate) CSS file to the contents of an
XHTML-MP document.
 The <link> element is contained in the <head>
element.
 The following XHTML-MP excerpt applies the style
rules contained in the external file style.css to the
contents of the current document:
<head>     
<title>External Style Sheet</title>
<link href="style.css rel="stylesheet" type="text/css" />
</head>
 For more see:
http://www.developershome.com/wap/wcss
XHTML MP Summary
 XHTML is an XML representation
 XHTML Basic – supported in the WAP 2.0 standard
modularized and includes the following modules:
Structure, Text, Hypertext, List, Basic Forms, Tables,
Image, Object, Meta Information, Link and Base –
and also extra features
 XHTML MP expands the features of XHTML Basic
 Cascading Style Sheets (CSS) used to standardize
the look and feel of pages in XHTML Basic
 CSS is composed of selectors, properties, values
 These slides only cover a small part of development
using XHTML MP – now you must do the
reading/practice
Further Resources
 http://developer.openwave.com/documentatio
n/xhtml_mp_css_reference (Complete CSS
for MP reference)
 http://www.developershome.com/wap/xhtmlm
p (Very useful - please work through)
 http://sw.nokia.com/id/8c4fff25-dc0f-4853-
ba59-
bf7c0085429c/Series_40_Platform_Designin
g_XHTML_MP_Content_v1_2_en.pdf
(Getting started with XHTML MP for the
series 40)
Server-side options
 In addition to taking data from the user it would
be useful to do something with it
 Doing this on a server rather than locally has
advantages (no processing required by the
mobile)
 Options include (all have been used in previous
student projects):
 PHP MySQL (Apache) – open source and well
established
 JSP / SQL
 ASP.NET / Access
 Other server-side options?
Tasks for next time:
 Develop a small Mobile Profile based website
that contains images and several linked pages
 Follow up further resources and push on with
reading into XHTML MP
 Set up a PHP/MySQL account at
http://lamp.inf.brad.ac.uk – research database
driven web applications