Browsing

MITA Seminar 2003

Mikko Pohja & Alessandro Cogliati

Outline

WAP Architecture

Nokia Phone Series

Markup Languages

Cascading Style Sheets

Example: Opera browser for mobile phones

WAP Architecture

WAP architecture compared to Internet architecture

MITA 2 Solutions and Tools, IT Press, 2002.

WAP Architecture

MITA 2 Solutions and Tools, IT Press, 2002.

Browsing with Nokia phones

Browsers are handled by soft keys

Only Communicator can browse using http

Excluding Series 60 with gprs connection

Others use WAP

Series 20 Series 40 Series 60 CommunicatorResolution 84x48 128x128 176x208 490x165

Display Black and white 4096 colors 4096 colors 4096 colorsControls 1 or 2 soft keys 2 soft keys 2 soft keys + joystic 4 soft keys + joysticBrowser WAP 1.1 or 1.2.1 WAP 1.2.1 WAP 1.2.1 WAP 1.2.1 + Web

Markup languages

XForms will replace HTML forms in future

SVG brings graphics to documents

Both are XML languages => can be combined with other XML languages

WML to XHTML Migration, Nokia Forum, 2002.

Mobile browsing

Currently, mobile browsers need their own content (WML)

Future, all documents are based on XHTML

Different subsets depending on devices

CSS and XSL do content adaptation

WML to XHTML Migration, Nokia Forum, 2002.

XML and layout

As the number of XML applications increases and they become more sophisticated, it will be critical to have common user interface models written up in a simpler language.

As the number of different mobile phone is continually growing, it will be critical to have a layout adaptation for each different model.

Cascading Style Sheets as solution

CSS Advantages

Separation between content and style.

It gives opportunity to organize the content in sections and subsections.

The files are smaller to download and simpler to be interpreted by a browser.

It allows the creation of more sophisticated layout.

It is possible to change the look of a site by just modifying one file.

It is possible to associate different graphic layout profiles for different devices.

Cascading Style Sheet (CSS)

XML document example:

<?XML:stylesheet type="text/css" href="bach.css"?>

<ARTICLE><HEADLINE>Fredrick the Great meets Bach</HEADLINE>

<AUTHOR>Johann Nikolaus Forkel</AUTHOR>

<PARA> One evening, just as he was getting his

<INSTRUMENT>flute</INSTRUMENT> ready and his

musicians were assembled, an officer brought him a list of the strangers who had arrived.

</PARA>

</ARTICLE>

CSS document example:

INSTRUMENT { display: inline }

ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

HEADLINE { font-size: 1.3em }

AUTHOR { font-style: italic }

ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Cascading Style Sheet (CSS)

@import rule

Cascading and Inheritance

@import (5)

2

98765

1

43

@import (7) @import (8)

@import (6) @import (9)

@import (4)

@import (3)

@import (2)

CSS Media Queries

A Media Query consists of a media type and one or more expressions to limit the scope of style sheets. By using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.

A Media Query consists of a media type and one or more expressions involving media features.

CSS document example:

@media screen and (color),

projection and (color) { ... }

Mobile browsers

Openwave

Most popular browser

Usually default browser in mobile phones

Opera

Nokia browser

Conclusions

Nowadays mobile browsers use WML

Content is filtered from html or made separately

Future: XHTML + XForms + SVG, etc.

CSS is for layout

Simple language

Adapt content to various devices