Estudio de Vulnerabilidad de Protocolos y Redes de Comunicación para Medidore...
Mwml
1. Mobile Web Markup
Language
M.C. Juan Carlos Olivares Rojas
Department of Computer and System
Instituto Tecnológico de Morelia
jcolivar@itmorelia.edu.mx
19.72388 lat, -101.1848 long
2. 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.
4. 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.
5. 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.
6. 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.
7. Markup Language Convergence
1998 1999 2000 2001 2002
WAP
HTML
XML
HDML
WML XHTML Basic + WML
HTML 3.2
C-HTML
HTML 4.0
XHTML 1.0
XHTML BasicXML 1.0
WAP
2.x
WAP
1.x
i-mode
9. WAP Tools
• Nokia WAP SDK
• WinWAP
• MobileDev
• Nokia WML Studio for Macromedia Dreamweaver
• Ericsson WAPIDE
• IBM WAPSody
10. A Simple WML File
• A Simple WML file
<?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>
Standard header for
WML 1.1 files
11. BUSI 0063 Handout 7 - Wireless Application Development 11
A WML Example with Cards
<?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
Select menu – a
common control in
WML
Go to Password card
when user selects it
12. (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
13. BUSI 0063 Handout 7 - Wireless Application Development 13
WMLScript
• 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.
14. BUSI 0063 Handout 7 - Wireless Application Development 14
A WMLScript Example
<?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
15. BUSI 0063 Handout 7 - Wireless Application Development 15
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
16. 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
17. 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.
18. XHTML Basic – Modules and Elements
Note: The Elements look a lot like regular HTML and behave in a very similar way
19. 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.
20. 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>)
21. 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>
22. 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>
23. 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>
25. 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>
26. 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>
27. 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>
28. 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>
29. 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
30. 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.
31. 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;}
32. 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
33. 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.
34. 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.
35. 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!
37. 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.
The autor is responsible about all information contained in this slides, it doesn’t reflect the view point of the school.
Limit categories to 5 – this allows you to limit choices offered, which in turn cuts down on confusion. You want to present only the content that is relevant to the mobile user.
Organize content no more than 5 levels deep – users may get lost
This is an illustration of a sitemap created for the traditional web access from a desktop versus a sitemap created for accessing the web through a mobile device.