Browsing MITA Seminar 2003 Mikko Pohja & Alessandro Cogliati.
-
Upload
chastity-wilson -
Category
Documents
-
view
217 -
download
1
Transcript of Browsing MITA Seminar 2003 Mikko Pohja & Alessandro Cogliati.
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