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

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: Fredrick the Great meets Bach Johann Nikolaus Forkel One evening, just as he was getting his flute ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. 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 rule Cascading and Inheritance

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