8/8/2019 04 XHTML MP

1/37

WAP 2.0 Mobile Web:

XHTML Mobile Profile

David Robison & Jules Pagna Disso

University of Bradford

8/8/2019 04 XHTML MP

2/37

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.

8/8/2019 04 XHTML MP

3/37

Wireless Application Protocol (WAP 2.0)

Wireless Application Protocol (WAP 1.0) was thefirst Internet service for mobile devices inEurope. WAP pages were written in WML(Wireless Mark-up Language).

Perceived failure a lack of services andmismatched consumer expectations. Meanwhilethe Mobile Web continues to evolve and grow.

WAP 2.0 is the Mobile Web with added colour

and enhanced media capabilities moreconverged with Web development for PCs.

WAP 2.0 Web pages are generally designed inXHTML MP.

8/8/2019 04 XHTML MP

4/37

Mark-up languages

(too many acronyms)

SGML (Standardised GeneralMark-up Language)

HTML (Hypertext Mark-upLanguage) used for regular

Web pages XML (eXtensible Markup

Language)

XHTML (eXtensible HypertextMark-up Language - a

junction between HTML 4.01and XML)

WML1 (Wireless Mark-upLanguage WAP 1.0)

XHTML MP (XHTML MobileProfile WAP 2.0)

Image source:

http://www.littlespringsdesign.com/

design/xhtmlinfo

8/8/2019 04 XHTML MP

5/37

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).

8/8/2019 04 XHTML MP

6/37

What is XHTML?

Developing XHTML is very much like developingusing HTML. The elements (tags) and attributesare almost identical.

XHTML is an intersection of HTML and XML areformulation of HTML as an application of XML.

Pages written in XHTML work well in mostbrowsers.

XHTML is stricter than HTML. All tags, including

empty elements, must be closed and in lowercase.

It is defined by W3C

8/8/2019 04 XHTML MP

7/37

XHTML Basic

XHTML Basic is essentially a cut-down versionof XHTML, suitable for devices with limitedprocessing and display capabilities (such as

handhelds). It still looks like a lot like HTML, but without

many features that are hard to support onmobile 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 forbackground.

8/8/2019 04 XHTML MP

8/37

XHTML Basic Modules and Elements

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

8/8/2019 04 XHTML MP

9/37

XHTML Mobile Profile

The WAP Forum (now OMA) addedsome features to XHTML Basic in orderto 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.

8/8/2019 04 XHTML MP

10/37

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/documentation/guides_and_references/xhtml_tutorial/i

ndex.htm http://developer.openwave.com/dvl/support/docu

mentation/guides_and_references/xhtml-mp_style_guide

8/8/2019 04 XHTML MP

11/37

Getting Started with WAP 2.0

Development

Were 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.

8/8/2019 04 XHTML MP

12/37

Dreamweaver

Well be using the emulators in conjunction withDreamweaver 8 (the very latest version)

Within Dreamweaver you can manage a great manyWeb development and design functions initially

well be using it largely as a text editor (which helpsus code).

Dreamweaver has two main view settings Designview and Code view. You want to be in Code Viewat first.

It also gives you a head start when developing WML,XHTML, CSS by providing templates and the like.

If youve never programmed used HTML before youmay be feeling a little lost please follow the tutoriallinks in this document and elsewhere, and ask forhelp if stuck.

8/8/2019 04 XHTML MP

13/37

Creating a Blank XHTML file in Adobe

Dreamweaver CS3

File new Blank page Page type = HTML doctype = xhtml MP 1.0

Adobe Dreamweavertreats this document asHTML. However if yousave it with the extension".xhtml" it becomesreadable in the Nokia5100 and other XHTMLMP devices.

There are further issuesto be explored around theopening prolog lines itproduces, but lets get onwith actually developing!

8/8/2019 04 XHTML MP

14/37

8/8/2019 04 XHTML MP

15/37

Try this XHTML MP Example

My Mobile Page

Hello world.

Note: you can ignore everything before in most cases

Save it as hello.xhtmland load it in a mobile emulator.

Also check outAdobe Dreamweavers CS3 validation capabilities whichcan save you a lot oftime

Display your page in a browser and display the same page usingdevice central (File Preview in browser device central)

8/8/2019 04 XHTML MP

16/37

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 bythe 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.

8/8/2019 04 XHTML MP

17/37

Font style code example

Font Style

Bold

Italic

Bold italic

Small

Big

Emphasis
Strong

h1

h2

h3

8/8/2019 04 XHTML MP

18/37

Explanation

Note what happens when you test the output in different mobilebrowsers.

The and tags mean bold and italic.

The tag reduces the text size.

The tag increases it. The and styles are similar. The WAP browser will

display text with emphasis () or strong () style in someway that makes it more noticeable. The effect depends on the actualwireless 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 seta specific font size (e.g. 12pt) to some text.

The tag of HTML does not exist in XHTML MP. So, if you wantto underline some text, WAP CSS has to be used.

8/8/2019 04 XHTML MP

19/37

Trouble-shooting

Rules for XHTML documents1) All tag and attribute names should be

lowercase (e.g. Hello World)

2)"Empty" tags must have an extra slash at theend (e.g. the line break
)

3) Never leave out an end tag

4) Usually save files with the extension ".xhtml"

5) Tags must be correctly nested (e.g.emboldened text)

8/8/2019 04 XHTML MP

20/37

Lists - output

XHTML provides tagsfor unnumbered lists,ordered or numberedlists, and definition lists

and terms. This is what it looks like

on the Openwavebrowser (available fromopenwave.com) for

now use the Nokia ones. You should also be able

8/8/2019 04 XHTML MP

21/37

Lists

Unnumbered Lists

Unnumbered List:

First Item

Second ItemThird Item

And so on...

8/8/2019 04 XHTML MP

22/37

Links, Hyperlinks, Calls and Emails

Like in WML and in HTML, Hyperlinks are usedto link to another XHTML document and you canuse href to trigger a call also.

Examples:

page 2

BBC Wap

Call Number

Email Joe

8/8/2019 04 XHTML MP

23/37

Tables

XHTML MP provides support for use oftables

An XHTML MP Table

Item 1

Item 2

Item 3

Item 4

8/8/2019 04 XHTML MP

24/37

Table output

8/8/2019 04 XHTML MP

25/37

Comments

You can include comments in your XHTML-MP code.Browsers ignore all comments.

A comment is every character between the commentstart string ( ):

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 willwork with your code. You can also use comments todisable sections of code temporarily.

NOTE The browser downloads comments along withthe rest of the document. Keep your comments brief.Lengthy comments are not efficient for small devices.

8/8/2019 04 XHTML MP

26/37

User Input

The inputelement allows the user to enterinformation

Rather than listing the code here an example

version is included online (currently at

www.mobilitystudies.com/masters/xhtml-mp/input.xhtml).

8/8/2019 04 XHTML MP

27/37

User Input

Input is a key element of mobiledevelopment

Read more on the technicalities of usingXHTML MP for input here:http://www.developershome.com/wap/xhtmlmp/xhtml_mp_tutorial.asp?page=inputElements

What do we then do with the data? (Clientside scripting or server side dealings)

8/8/2019 04 XHTML MP

28/37

Integrating XHMTL Basic and WML/WMLScript?

XHTML MP and WML are not the samething however, WAP 2.0 compatibledevices should be able to read WMLdocuments as well.

Some of the features of WML are notavailable in XHTML MP documents Cards and Decks do not exist for example.

You cannot call a WMLScript functiondirectly from an XHTML MP document.

You can branch to a WML document thatcalls the WMLScript function.

8/8/2019 04 XHTML MP

29/37

Cascading Style Sheets (CSS)

XHTML supports CSS.

CSS allows you to establish a

consistent design and formatting acrossall pages of a site.

With CSS, if you want to change thestyle or formatting of a page, you just

have to change the CSS, not each pageelement individually

8/8/2019 04 XHTML MP

30/37

Cascading Style Sheets

XHTML Basic only supports CSS throughexternal links

but XHTML-MP allows internal CSS as well.

Use caution with external CSS. In theory, externalCSS allows you to have one CSS that applies to yourentire site while reducing the amount of downloading theuser has to do. In practice, many browsers do not cache

the CSS and thus download it again for each page theuser visits. Further, when the CSS is downloaded, thealready-displayed XHTML content jumps around torender the new styling.

8/8/2019 04 XHTML MP

31/37

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;}

8/8/2019 04 XHTML MP

32/37

Cascading Style Sheets (CSS)

Style sheets are composed of selectors,properties, and valuesSelectors 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")

8/8/2019 04 XHTML MP

33/37

Using the Element to Apply an

External Style Sheet

You can use the XHTML-MP element to applyan external (separate) CSS file to the contents of anXHTML-MP document.

The element is contained in the element.

The following XHTML-MP excerpt applies the stylerules contained in the external file style.css to thecontents of the current document:

External Style Sheet

8/8/2019 04 XHTML MP

34/37

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 standardizethe 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 thereading/practice

8/8/2019 04 XHTML MP

35/37

Further Resources

http://developer.openwave.com/documentation/xhtml_mp_css_reference (Complete CSSfor MP reference)

http://www.developershome.com/wap/xhtmlmp (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 theseries 40)

8/8/2019 04 XHTML MP

36/37

Server-side options

In addition to taking data from the user it wouldbe useful to do something with it

Doing this on a server rather than locally hasadvantages (no processing required by themobile)

Options include (all have been used in previousstudent projects):PHP MySQL (Apache) open source and well

established

JSP / SQL

ASP.NET / Access

Other server-side options?

8/8/2019 04 XHTML MP

37/37

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