Mobile web markup language
This presentation is the property of its rightful owner.
Sponsored Links
1 / 38

Mobile Web Markup Language PowerPoint PPT Presentation


  • 40 Views
  • Uploaded on
  • Presentation posted in: General

Mobile Web Markup Language. Department of Computer and System Instituto Tecnológico de Morelia [email protected] 19.72388 lat, -101.1848 long. M.C. Juan Carlos Olivares Rojas. Disclaimer.

Download Presentation

Mobile Web Markup Language

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Mobile web markup language

Mobile Web MarkupLanguage

Department of Computer and System

Instituto Tecnológico de Morelia

[email protected]

19.72388 lat, -101.1848 long

M.C. Juan Carlos Olivares Rojas


Disclaimer

Disclaimer

Some material in this presentation has been obtained from various sources, each of which has intellectual property, so in this presentation will only have some rights reserved.

These slides are free, so you can add, modify, and delete slides (including this one) and slide content to suit your needs. They obviously represent a lot of work on my part. In return for use, I only ask the following: if you use these slides (e.g., in a class) in substantially unaltered form, that you mention their source.


Outline

Outline

  • Introduction

  • WML

  • XHTML-MP

  • Conclusions


Objectives of the session

Objectives of theSession

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


Introduction

Introduction

  • The use of mobile devices has increased tremendously in recent years (e.g., cell phones, PDAs, and other handheld devices).

  • Mobile devices are different from traditional Web browsers:

    • Lower bandwidth

    • Lower memory

    • Limited display area

    • Limited input devices

  • Therefore, protocols and languages that are specific for wireless applications have been designed.


Introduction1

Introduction

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

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


Markup language convergence

Markup Language Convergence

HDML

WML

XHTML Basic + WML

WAP 1.x

WAP 2.x

HTML 3.2

HTML 4.0

C-HTML

XHTML 1.0

i-mode

XML 1.0

XHTML Basic

1998

1999

2000

2001

2002

WAP

HTML

XML


Wap architecture

WAP Architecture


Wap tools

WAP Tools

  • Nokia WAP SDK

  • WinWAP

  • MobileDev

  • Nokia WML Studio for Macromedia Dreamweaver

  • Ericsson WAPIDE

  • IBM WAPSody


A simple wml file

A Simple WML File

  • A Simple WML file

Standard header for WML 1.1 files

<?xml version='1.0'?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="First_Card" title="First Card">

<p>

Welcome to WML!

</p>

</card>

</wml>


A wml example with cards

A WML Example with Cards

BUSI 0063 Handout 7 - Wireless Application Development

<?xml version='1.0'?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="Login" title="Login">

<do type="accept" label="Password">

<go href="#Password"/>

</do>

<p>

UserName:

<select name="name" title="Name:">

<option value="Charlene">Charlene</option>

<option value="Gillian">Gillian</option>

<option value="Rosanne">Rosanne</option>

<option value="Race">Race</option>

</select>

</p>

</card>

Login Card - the first card here

Go to Password card when user selects it

Select menu – a common control in WML


Mobile web markup language

(continued from previous slide)

<card id="Password" title="Password:">

<do type="accept" label="Results">

<go href="#Results"/>

</do>

<p>

Password: <input type="text" name="password"/>

</p>

</card>

<card id="Results" title="Results:">

<p>

You entered:<br/>

Name: $(name)<br/>

Password: $(password)<br/>

</p>

</card>

</wml>

The Password card

The Results card


Wmlscript

WMLScript

BUSI 0063 Handout 7 - Wireless Application Development

  • Similar to JavaScript in HTML

  • Used to add client-side logic to WAP pages

  • Can be used for form validation and other client-side functions.

  • WMLScripts are NOT embedded in WML pages; they are stored as separate files.


A wmlscript example

A WMLScript Example

BUSI 0063 Handout 7 - Wireless Application Development

<?xml version='1.0'?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="Phone" title="Phone:">

<do type="accept" label="Results">

<go href="example4.wmls#validate($(Phone))"/>

</do>

<p>

Enter phone: <input type="text" name="Phone"/>

</p>

</card>

<card id="Results" title="Results:">

<p>

You entered:<br/>

Phone: $(Phone)<br/>

</p>

</card>

</wml>

http://147.8.210.143/wireless/example4.wml


Mobile web markup language

BUSI 0063 Handout 7 - Wireless Application Development

A WMLScript Example

extern function validate(Phone)

{

if (String.length(Phone) != 8)

{

WMLBrowser.setVar("Phone", "Error: Phone not correct.");

}

WMLBrowser.go("example4.wml#Results");

}

http://147.8.210.143/wireless/example4.wmls


What is xhtml

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

  • 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

XHTML Basic – Modules and Elements

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


Xhtml mobile profile

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.


Rules for xhtml documents

Rules for XHTML Documents

  • All tag and attribute names should be lowercase

  • "Empty" tags must have an extra slash at the end

  • Never leave out an end tag. Usually save files with the extension ".xhtml“

  • Tags must be correctly ‘nested’ (e.g. <div><em>emboldened text</em></div>)


Font style code example

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>


Lists code example

Lists 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>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>


Tables code example

Tables Code Example

  • 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>


  • A sample xhtml mp page

    A Sample XHTML-MP Page

    <?xml version="1.0"?>

    <!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN" "http://www.openwave.com/DTD/xhtml-mobile10.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>

    <title>XHTML Samples</title>

    </head>

    <body>

    <ol>

    <li><a accesskey="1" href="inbox.html">Check emails</a></li>

    <li><a accesskey="2" href="movies.html">Movies Info</a></li>

    <li><a accesskey="3" href="about.html">About</a></li>

    </ol>

    </body>

    </html>

    Quick access key


    A sample xhtml mp page1

    A Sample XHTML-MP Page

    <?xml version="1.0" encoding="UTF-8"?>

    <!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

    "http://www.openwave.com/dtd/xhtml-mobile10.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>

    <title>

    About this Site

    </title>

    </head>

    <body>

    <p>

    This is a test site.

    </p>

    <hr/>

    </body>

    </html>


    Nokia code example

    Nokia Code Example

    <?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>XHTML Mobile Profile Document</title>

    <!--

    Change href="style.css" below to the file name and

    relative path or URL of your external style sheet.

    -->

    <link rel="stylesheet" href="style.css" type="text/css"/>

    <!--

    <style> document-wide styles would go here </style>

    -->

    </head>

    <body>

    <h1> Heading </h1>

    <p>

    Body

    </p>

    </body>

    </html>


    Another nokia code example

    Another Nokia 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">

    <!-- Required head element -->

    <head>

    <title>Stale News Portal</title>

    <!-- Include style sheet in the head section. -->

    <link rel="stylesheet" href="style.css" type="text/css"/>

    <style type="text/css">

    </style>

    </head>


    Another nokia code example1

    Another Nokia Code Example

    <!-- Required body element -->

    <body>

    <!-- h2 style is defined in the style sheet -->

    <h2>Stale News Portal</h2>

    <p>

    <img src="icons/news.gif" alt="new" />

    Categories:

    </p>

    <ul>

    <li><a href="entertainment.xhtml">Entertainment</a></li>

    <li><a href="business.xhtml">Business</a></li>

    <li><a href="world.xhtml">World</a></li>

    <li><a href="weather.xhtml">Weather</a></li>

    <li><a href="updates.xhtml">SMS Alerts</a></li>

    </ul>

    <!-- The .small style is defined in the style.css stylesheet referred to in

    the

    <head> of this document. -->

    <p class="small"><br/>

    <a href="about.xhtml">About Stale News Portal</a>

    </p>

    </body>

    </html>


    Cascading style sheets css

    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

    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

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


    Mobile design good practices

    Mobile Design Good Practices

    • Limit categories to 5

    • Limit links to 10

    • No more than 5 levels deep

    • At least one content item per category

    • Prioritize links by activity or popularity


    Mobile design good practices1

    Mobile Design Good Practices

    • Ensuring the use of the correct character encoding and doctype makes sure that the page renders as expected.

    • Avoid tables for layout

    • Use accesskeys in the primary navigation

    • Use document styles, not external styles – insert styles into the <head> of a document.

    • Use few or no forms. If you have to use forms, keep required information as little as possible.

    • Make telephone number links


    Guidelines for mobile content

    Guidelines for Mobile Content

    • Keep it simple!

      • WAP browsers have limited capabilities

    • Keep images small

      • Use smallest palette possible (256 web-safe palette):

    • Scale images to fit the device before delivery:

      • Keep the file size of your images as small as possible

    • Always include alt text.

      • The browser may not display images, or images may be corrupted by communications errors.


    Guidelines for mobile content1

    Guidelines for Mobile Content

    • Keep your pages small.

    • Wireless bandwidth is scarce: big pages download slowly.

    • Keep images small and suitable for low resolution.

    • Test, test, test.

    • Because WML & XHTML-MP are relatively new, test compatibility with different browsers!


    Bad vs good

    Bad vs Good


    References

    References

    • Robison, D. and Pagna, J., (2008) , Wap 2.0 Mobile Web: XHTML Mobile Profile.

    • Kantor, P. (2006), XHTML, Desert Code 2006.

    • Skelton, G., Excell, P., Robison, D. and Taj, I. (2008) XHTML Basic and XHTML-MP.

    • Ingram, M. (2008) Mobile Devices: Driving Standards for a “New” Web.


    Preguntas

    ¿Preguntas?


  • Login