F O R U M

N O K I A

Series 40 Platform: Designing XHTML Mobile Profile Content Version 1.2; September 18, 2006

Series 40

Forum.Nokia.com

Copyright © 2006 Nokia Corporation. All rights reserved. Nokia and Nokia Connecting People are registered trademarks of Nokia Corporation. Java and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc. Other product and company names mentioned herein may be trademarks or trade names of their respective owners. Disclaimer The information in this document is provided “as is,” with no warranties whatsoever, including any warranty of merchantability, fitness for any particular purpose, or any warranty otherwise arising out of any proposal, specification, or sample. Furthermore, information provided in this document is preliminary, and may be changed substantially prior to final release. This document is provided for informational purposes only. Nokia Corporation disclaims all liability, including liability for infringement of any proprietary rights, relating to implementation of information presented in this document. Nokia Corporation does not warrant or represent that such use will not infringe such rights. Nokia Corporation retains the right to make changes to this specification at any time, without notice. License A license is hereby granted to download and print a copy of this specification for personal use only. No other license to any other intellectual property rights is granted herein.

Series 40 Platform: Designing XHTML Mobile Profile Content

2

Forum.Nokia.com

Contents 1

2

3

4

Introduction................................................................................................................................................ 7 1.1

Nokia Series 40 mobile browser .........................................................................................................7

1.2

Series 40 platform....................................................................................................................................7

1.3

Chapter topics............................................................................................................................................8

Guidelines for design................................................................................................................................ 9 2.1

Make applications for mobile use.......................................................................................................9

2.2

Keep user task flow fluent and be reasonable with image use ...............................................9

2.3

Make structure easy for novices but don’t forget power users ................................................9

2.4

Provide sufficient information on a page ..................................................................................... 10

2.5

Provide informative feedback for user actions ........................................................................... 10

2.6

Minimize amount and size of images ............................................................................................ 10

2.7

Specify image height and width attributes.................................................................................. 11

2.8

Use tables carefully............................................................................................................................... 11

2.9

Consider options for adding style definitions ............................................................................. 11

2.10

Remove unnecessary white space and comments inside code............................................. 11

2.11

Enable caching of pages using HTTP header directives............................................................ 11

2.12

Use Unicode 2.0 character sets for XHTML content .................................................................... 12

2.13

Use correct MIME types and validated XHTML code.................................................................... 12

2.14

Use descriptive page titles and element labels........................................................................... 12

2.15

Perform a usability test....................................................................................................................... 13

Tools for developing browsing applications ...................................................................................14 3.1

SDKs and IDEs.......................................................................................................................................... 14

3.2

Image tools ............................................................................................................................................. 14

3.3

W3C tools ................................................................................................................................................. 14 3.3.1

HTML/XHTML validation tool............................................................................................ 14

3.3.2

HTML Tidy............................................................................................................................... 14

3.3.3

CSS validator ......................................................................................................................... 14

Introduction to the user interface ......................................................................................................15 4.1

Nokia devices with 128 x 128/160 , 208 x 208, and 240 x 320 pixel resolutions............ 15

4.2

User interface hardware – keys and display ................................................................................ 15 4.2.1

Two-softkey display ........................................................................................................... 15

4.2.2

Three-softkey display ........................................................................................................ 16

4.3

An alphanumeric keyboard................................................................................................................ 17

4.4

Display fonts............................................................................................................................................ 17

4.5

Accessing the browser......................................................................................................................... 18

4.6

Content size............................................................................................................................................. 18

Series 40 Platform: Designing XHTML Mobile Profile Content

3

Forum.Nokia.com

5

XHTML MP elements ................................................................................................................................19 5.1

6

5.1.1

Paragraph and content alignment................................................................................ 20

5.1.2

Line break.............................................................................................................................. 20

5.1.3

Pre element........................................................................................................................... 20

5.2

Tables ........................................................................................................................................................ 21

5.3

Images ...................................................................................................................................................... 22

5.4

Links........................................................................................................................................................... 23

5.5

Access keys .............................................................................................................................................. 23

5.6

XHTML MP input processing ............................................................................................................... 24 5.6.1

Input elements .................................................................................................................... 24

5.6.2

Select element...................................................................................................................... 25

WAP CSS ...................................................................................................................................................27 6.1

6.2

Applying style sheets ........................................................................................................................... 27 6.1.1

External style sheets ..........................................................................................................27

6.1.2

Style element in document head................................................................................... 27

6.1.3

Inline styles ........................................................................................................................... 28

6.1.4

Cascading rules for style elements................................................................................ 28

Borders...................................................................................................................................................... 28 6.2.1

Border style........................................................................................................................... 28

6.2.2

Border width ........................................................................................................................ 28

6.2.3

Float......................................................................................................................................... 28

6.3

Margin ....................................................................................................................................................... 29

6.4

Padding..................................................................................................................................................... 29

6.5

List style.................................................................................................................................................... 29

6.6

6.7 7

Text formatting...................................................................................................................................... 19

6.5.1

List style image.................................................................................................................... 29

6.5.2

List style position ................................................................................................................ 29

6.5.3

List style type........................................................................................................................ 29

Text ............................................................................................................................................................ 30 6.6.1

Text align ............................................................................................................................... 30

6.6.2

Text decoration.................................................................................................................... 30

6.6.3

Marquee ................................................................................................................................. 30

Color........................................................................................................................................................... 31

Additional features .................................................................................................................................32 7.1

TCP/IP ........................................................................................................................................................ 32

7.2

Push ........................................................................................................................................................... 32 7.2.1

Service Indication................................................................................................................ 33

7.2.2

Service Loading.................................................................................................................... 33

Series 40 Platform: Designing XHTML Mobile Profile Content

4

Forum.Nokia.com

7.3

Wireless Telephony Applications Interface (WTAI) Public Library ........................................ 33 7.3.1

Making a phone call ........................................................................................................... 34

7.3.2

Sending a DTMF tone ......................................................................................................... 34

7.3.3

Adding a phone book entry............................................................................................. 34

7.4

Cache ......................................................................................................................................................... 34

7.5

Content download over WAP ............................................................................................................ 34

7.6

Content upload....................................................................................................................................... 35

7.7

WML Script ............................................................................................................................................... 36

7.8

ECMAScript Mobile Profile.................................................................................................................... 36

7.9

User Agent Profile.................................................................................................................................. 36

7.10

Cookies...................................................................................................................................................... 36

7.11

Segmentation and Reassembly (SAR)............................................................................................. 37

8

Terms and abbreviations.......................................................................................................................38

9

References .................................................................................................................................................40

Evaluate this resource....................................................................................................................................41

Series 40 Platform: Designing XHTML Mobile Profile Content

5

Forum.Nokia.com

Change history February 20, 2004

Version 1.0

Initial document release. Replaces the document WAP Service Developer’s Guide for Nokia Series 40 Phones with XHTML Browser v1.7.

May 10, 2005

Version 1.1

Sections 4.1, 4.2.2, 4.4, 4.6, 5.3, and 7.11 updated. Minor terminology updates.

September 18, 2006

Version 1.2

Series 40 Platform: Designing XHTML Mobile Profile Content

Information about Series 40 3rd Edition added. Technical details revised throughout the document.

6

Forum.Nokia.com

1 Introduction The following document provides information and practical examples for developers who want to optimize their services for Nokia Series 40 devices with the Extensible Hypertext Markup Language Mobile Profile (XHTML MP)/ Wireless Markup Language (WML) dual-mode browser. The document is intended to serve as a guide for both wired Web content developers eager to provide content for the growing number of wireless Web users, and Wireless Access Protocol (WAP) content developers who wish to take advantage of features available through XHTML and style sheets. 1.1

Nokia Series 40 mobile browser The Nokia Series 40 browser is a dual mode browser that natively supports both XHTML MP with WAP CSS and WML 1.x. This means that existing browsing applications written in WML 1.x will work in the browser, as well as new XHTML MP services. XHTML MP with WAP CSS gives developers much more control over the format and layout of their pages and should be used in preference to WML 1.x. WML 1.x can be used for specialized WML 1.x functionalities, such as WML events or calling WMLScript. XHTML MP and WML 1.x pages can be seamlessly linked together. History is maintained so that the user can go back, no matter what kinds of content are intermixed. Users need not know whether the page they are currently viewing was written in XHTML or WML 1.x. The switch to using the TCP/IP stack is one of the main factors in the development of rich 2.5-3G multimedia services. Compared to the WAP 1.x stack, TCP/IP provides more security and enables access to a wider variety of Internet services. For more information about TCP/IP, see Section 7.1, “TCP/IP.” The Nokia XHTML browser supports ASCII and Unicode 2.0 character sets. Therefore, to ensure the greatest level of interoperability, all XHTML content should be created by using Unicode for non-Latin languages. For Latin languages, ASCII can also be used. Some gateways and proxies can convert local character sets to Unicode, but not all. Therefore the only way to guarantee that the device receives Unicode is to create the content in Unicode. More information about the Unicode and non-Latin languages can be found in the following books:

1.2

•

Lunde, Ken. CJKV Information Processing. 1st edition. O’Reilly & Associates (December 1998)

•

Graham, Tony. Unicode: A Primer. John Wiley & Sons (March 2000) Series 40 platform

Series 40 3rd Edition devices support XHTML MP and WML. Some devices also support HTML browsing over wTCP/IP. The Series 40 devices provide a common set of technologies and APIs across a large family of devices, although some devices within the family may include additional features. Developers can build core functionalities on the platform technologies, and then optimize an application for particular user interfaces and technology extensions available on devices within the family. Series 40 2nd Edition supports XHTML MP and WML browsing over wTCP/IP. The Series 40 platform provides a common set of technologies and APIs across a large family of devices, although some devices within the family may include additional features. Series 40 1st Edition supports WML browsing over WAP. Some compliant Series 40 devices also support XHTML MP browsing over WAP or wTCP/IP. Possible exceptions for WML rendering and browser behavior in Series 40 1st Edition devices are documented in the Forum Nokia Technical Library [2]. Detailed information about browser features can be found in Browser Characteristics In Nokia GSM Devices [1]. All documents are available at http://www.forum.nokia.com/. Series 40 Platform: Designing XHTML Mobile Profile Content

7

Forum.Nokia.com

1.3

Chapter topics Chapter 2, “Guidelines for design,” outlines several recommendations for optimizing mobile XHTML services so that they achieve the best possible usability and performance. Chapter 3, "Tools for developing browsing applications,” is an overview of tools available for developing browsing applications. Chapter 4, “Introduction to the user interface,” describes the browser's user interface elements, keys, and display. Chapter 5, “XHTML MP elements,” outlines some general XHTML MP elements supported by the Nokia Series 40 mobile browser. Chapter 6, “WAP CSS,” introduces WAP CSS, and Chapter 7, “Additional features,” introduces additional features that are supported in the Nokia Series 40 mobile browser.

Series 40 Platform: Designing XHTML Mobile Profile Content

8

Forum.Nokia.com

2 Guidelines for design 2.1

Make applications for mobile use When deciding what information to include in the different applications on a mobile device, developers should consider the types of situations in which the mobile device will be used. The content of the service should fulfill the needs of the target user group and be optimized for the most common tasks. Because of the mobility of the small display, the user might use the mobile phone primarily when there is no PC access to the Internet, and for quick information. Examples include speedy access to flight schedules, short news flashes, and weather information. It is less likely that users will use their mobile devices to surf.

2.2

Keep user task flow fluent and be reasonable with image use Colorful pages look great but may not feel great when images slow down service. According to usability studies 1 , users are less enthusiastic about services if images disrupt their task flow. In particular, large images aren't appreciated when users are navigating toward the target page. Images that have information value are appreciated, but in many cases users either turn off images to save time and money, or proceed to the next page without waiting for the images to download. It is important to allow users to continue navigation even before all images are downloaded. Large tables may cause similar problems — that is, the user is stuck on a page until it is downloaded or can't find the way to proceed before the page is fully downloaded. Because phone displays are different sizes, developers should make sure that data tables are readable even on the smallest displays; often they must be squeezed to fit the display.

2.3

Make structure easy for novices but don’t forget power users In mobile services it often seems that a shallow structure is easier to understand than a deep structure. Links and pages should feature descriptive names to help the user find the information s/he needs. It is hard to say how many links should be provided on one link list page. If the links clearly belong together and are easy to browse (one line per link, alphabetical or otherwise logical order so that the user does not have to read through each link), it is better to provide 30 links on a single page rather than five links on six pages. If there are tens of links, it may be a good idea to provide sorting options before showing them. If the link can fit on one row, it makes the selection clear and the page look better. There are no <do> elements in WAP 2.0; instead, they have been replaced with access keys. However, most users seem to be unaware of access keys and are unable to find them. To help users understand the concept of access keys, developers should make sure that they are visible on the screen and in a form that resembles phone keys. If possible, a search function should be provided. Power users appreciate it, as do novices navigating large sites.

1 Roto, V., Kaikkonen, A.: Acceptable Download Times in the Mobile Internet. In Stephanidis, C. (ed.): Universal Access in HCI. Volume 4 of the Proceedings of HCI International 2003.

Series 40 Platform: Designing XHTML Mobile Profile Content

9

Forum.Nokia.com

2.4

Provide sufficient information on a page Interactive pages should be short; informative pages long. 2 It is not recommended to start the site using a doormat page, which serves no other purpose than to greet the visitor and display a logo. It is better if the user can go to the service directly. In XHTML, information is downloaded as pages and not as decks as in WML. This means that it is even more important to provide necessary information to users on a single page to support their task flow. Going back and forth between pages may take more time in XHTML, as the pages are downloaded separately. In backwards navigation this applies especially to cases where pages are not cacheable, e.g., in systems related to paying or where private information is provided. The first (topmost) screenful of any page is the most important. All often-used navigational links, search fields, login screens, and the bulk of the information should reside there. The user can then navigate forward before the rest of the page has been loaded, and will not have to scroll the page. Using the top of the page for banner advertisements or non-informative graphics should be avoided. It is better to place advertisements at the left or right edge. It is difficult to scroll up and down pages, so interactive pages with forms should not be too long, because users may not be sure if they have filled in every field on a long form. Users can easily lose the feeling of control if the form takes more than two screenfuls. There should be sufficient information on the destination page to which the user is headed. For example, if the target page contains a story or instructions, the entire contents should be presented on one page. Subtitles that take the user to points within the page help when browsing a long, informative page. The fact that information is downloaded as individual pages, not decks, is the biggest individual change that affects navigation and structural differences between WML and XHTML.

2.5

Provide informative feedback for user actions Developers should provide proper feedback for user actions and for error and problem situations. For example, after the user clicks a link, the page title should be the same as the link name. Minimizing steps in navigation should not increase the user's feeling of insecurity, e.g., confirmation pages for user actions may be needed even if they require an extra click. If the confirmation page is missing, the user may feel s/he needs to check to see if the action has taken place — this leads to even more clicks. Users should feel that they are controlling the system. If problems arise, users should be informed what to do next. Errors can be prevented by explaining to users the format of expected input, and by marking mandatory fields.

2.6

Minimize amount and size of images The amount and size of images on an XHTML should be considered carefully. Each image on a page causes a separate roundtrip, which in turn makes the rendering of an entire page slower. Therefore the number of roundtrips should be minimized. Also it should be noted that each time an image arrives at the mobile device, the entire containing page may be rearranged, which takes time and processor resources. Thus, a page with just a few images may load faster than one with many smaller images. If possible, it is recommended to use the same images on various pages throughout the service; then a specific image is downloaded only once and saved to cache. For example, if custom images are used for bullets, the same ones should be used throughout the service.

2

Kaikkonen, A., Roto, V.: Navigating in a Mobile XHTML Application. Proceedings of CHI2003 conference

Series 40 Platform: Designing XHTML Mobile Profile Content

10

Forum.Nokia.com

TCP/IP connection may result in different download speeds for pages, even though the amount of data is the same. For example, downloading an XHTML page containing four images at 2 KB each is faster than downloading a page with eight images at 1 KB each. If the WAP gateway is used, it should be placed close to a Gateway General Packet Radio Service (GPRS) Support Node (GGSN). “Close” in this instance refers to both latency and the probability of packet loss. Lost messages cause additional delay due to HTTP retransmission. The latency between the WAP gateway and content server should be minimized. 2.7

Specify image height and width attributes It is recommended that content developers explicitly specify the height and width of images in markup to allow the browser to reserve the proper space for the image. If width and height parameters are used in image tags, the XHTML browser is able to reserve the space for images before the images are downloaded. Thus the page is displayed to the user before images are downloaded and images become visible when they are downloaded. This doesn't change the complete download and processing time of the XHTML page, but it improves the user experience substantially because a user can read the page before the images are downloaded. For example:

2.8

Use tables carefully The browser supports the use of tables and nested tables in the XHTML page. Developers should be careful when defining cell widths, particularly with nested tables.

2.9

Consider options for adding style definitions Developers can specify their own styles in various ways: in an external style sheet, in a style element in the document head, or by using an inline style attribute in a specific element. Although in general it is a good practice to use external style sheets whenever possible to separate style from markup, it should be noted that there are tradeoffs to consider. Rendering of the XHTML page is faster when style definitions are inside XHTML code, but the use of external style sheets offers a convenient way to change styles throughout the service. The same external style sheet should be used throughout the service to avoid downloading multiple style sheets to the device. The external style sheet is downloaded only once and saved in cache.

2.10

Remove unnecessary white space and comments inside code

It is important to make sure that there is no extra white space inside the code. Although white space is not visible on the screen, it is still processed, because the browser parses, formats, applies CSS to, and renders white space. The number of comments in XHTML code should be minimized to keep the code as compact as possible. 2.11

Enable caching of pages using HTTP header directives

The browser places viewed XHTML pages in the cache; however, content developers should not assume that pages are cached by default 3 . Explicit cache headers should be sent with documents to ensure that pages are cached on the client, if possible. In addition, an expiration time should be set for at least a few days, in order to ensure that content is cached for a suitable time across multiple time zones. 3

In Series 40 devices the content is not cached by default.

Series 40 Platform: Designing XHTML Mobile Profile Content

11

Forum.Nokia.com

Placing cache directives within Meta tags (e.g., using HTTP-EQUIV) is not supported by all Series 40 devices, but caching can also be controlled using HTTP headers. The "Cache-control: no-cache" HTTP header directive can be set by the HTTP server hosting the pages to define that pages are not cached. Cache uses the “least recently used” algorithm, which means that items used least are removed first. It is recommended to reuse images and external CSS in all XHTML pages to ensure that they stay in cache and need not be downloaded each time they are used. 2.12

Use Unicode 2.0 character sets for XHTML content

The XHTML browser supports ASCII and Unicode 2.0 character sets. Therefore to ensure the greatest level of interoperability, all XHTML content should be created by using Unicode for non-Latin languages. For Latin languages, ASCII can also be used. Some gateways and proxies can convert local character sets to Unicode, but not all. Therefore the only way to guarantee the device receives Unicode is to create the content in Unicode. More information about Unicode and non-Latin languages can be found in the following books: •

Lunde, Ken. CJKV Information Processing. 1st edition. O’Reilly & Associates (December 1998)

•

Graham, Tony. Unicode: A Primer. John Wiley & Sons (March 2000)

2.13

Use correct MIME types and validated XHTML code

The preferred MIME type for XHTML MP content is "application/xhtml+xml", which should be used for serving XHTML MP documents to XHTML user agents. In addition, “application/vnd.wap.xhtml+xml”, which is specified by OMA, can be used. The MIME type “text/html” is available too, but for XHTML, use of this type should be reserved for the purpose of rendering on existing HTML user agents. It should be noted that XHTML documents served as “text/html” will not be processed as XML. This means that, for example, well-formedness errors may not be detected by user agents. Authors who wish to support both XHTML and HTML user agents may utilize content negotiation by serving HTML documents as “text/html” and XHTML documents as “application/xhtml+xml”. It is recommended to use file extension *.xhtml in all XHTML MP content. XHTML code should be validated to avoid any interoperability problems and to enhance performance. XHTML content can be validated, for example, with the W3C validator at http://validator.w3.org. When creating XHTML content dynamically, the generated code should be valid DTD XHTML MP 1.0. 2.14

Use descriptive page titles and element labels

The page title describes the contents of the page being displayed. Use of titles is recommended in WML and mandatory in XHTML. Titles help the user navigate in the application because they remind the user where s/he is within the application. It may be a good idea to start the title with the service’s name and keep the total length of the title short. The item previously selected by the user should determine the header text. For instance, the title “Bookmarks” tells the user that the display contains a list of bookmarks in the application and that the option item previously selected was Bookmarks. Proportional fonts are used in header text, and if the header text is too long, it is cut automatically. Cut titles are usually better than abbreviations, because the user may be confused by unfamiliar abbreviations. Although short words are recommended for element labels, acronyms that are not well known by the target user group should not be used. The same label should always be used for the same thing, especially with function labels such as Delete, Remove, Erase, Clear, and Destroy.

Series 40 Platform: Designing XHTML Mobile Profile Content

12

Forum.Nokia.com

2.15

Perform a usability test

It is always a good idea to perform a usability test for new applications. People who have not been involved in the design or development of an application tend to notice potential usability problems that are often not obvious to those who know the design by heart. Usability tests should be performed as early as possible in the development process. Any necessary changes resulting from the tests can then be implemented within the development timetable. Testers who are representatives of the future end users should be used. At the very least, tests should be conducted on a small scale if the schedule does not allow for extensive testing.

Series 40 Platform: Designing XHTML Mobile Profile Content

13

Forum.Nokia.com

3 Tools for developing browsing applications 3.1

SDKs and IDEs Although WAP documents can be written in any text editor that can save files as plain text, there are many SDKs and IDEs available to aid the development of wireless applications. Some of these also incorporate emulators, for example the Nokia Mobile Internet Toolkit (http://www.forum.nokia.com/), Ericsson WAPIDE (http://www.ericsson.com/), and the Openwave SDK (http://www.openwave.com/).

3.2

Image tools Various companies offer tools for the creation and manipulation of images for wireless applications. For example, imagemagick http://www.imagemagick.org/ is a collection of tools and libraries that can be used to create, manipulate, and convert images in many image formats.

3.3

W3C tools

3.3.1

HTML/XHTML validation tool

W3C provides a free HTML/XHTML validation service. However, it is not able to verify valid XHTML MP. The user submits an HTML/XHTML document, usually by providing a URL for it, and the service provides notification of its validity. The tool can be accessed at http://validator.w3.org/. Several other XML validators can be found on the Internet. 3.3.2

HTML Tidy

HTML Tidy is a utility for converting HTML to valid, well-formed XHTML (not XHTML MP). There are various GUI versions or the source as a UNIX filter for processing HTML files. HTML Tidy is available from http://tidy.sourceforge.net/. 3.3.3

CSS validator

The W3C provides a free CSS validation tool that can verify correct CSS but it is not yet able to verify conformance with WCSS. The W3C CSS validator is available at http://jigsaw.w3.org/css-validator. The Nokia Mobile Internet Toolkit contains a CSS editor that can both create and validate CSS files.

Series 40 Platform: Designing XHTML Mobile Profile Content

14

Forum.Nokia.com

4 Introduction to the user interface The following chapter provides a brief overview of the user interface in Series 40 devices with XHTML browser. 4.1

Nokia devices with 128 x 128/160 , 208 x 208, and 240 x 320 pixel resolutions These devices have an XHTML/WML dual browser with enhanced features and increased usability. The predictive text input (T9) can be used. Nokia Series 40 devices support Push Service Indication, service loading, three Wireless Telephony Application Interface (WTAI) public library functions, cookies, and content downloading. Applications created with Java™ MIDP can be downloaded into the device over the mobile network by pointing the browser to a page that contains the download.

4.2

User interface hardware – keys and display

4.2.1

Two-softkey display

The display is a high-resolution, passive-matrix, color display, with 4,096 colors and a display resolution of 128 pixels (horizontal) by 128 pixels (vertical). The display consists of the application area, a header area, and an area used for the softkeys.

Figure 1: Structure of the browser screen

The application area is 128 pixels (horizontal) by 96 pixels (vertical), minus scrollbars if present. Keys in the two-softkey user interface: The Send/Talk key works as a selection key. The End key exits a data call/GRPS connection and goes into idle state when pressed twice. The two softkeys are assigned actions that enable the user to manipulate the user interface by making selections and entering, editing, and deleting text. In the Nokia 6800 there is also a third softkey, which is used only as a profile key. •

The left softkey is used as a yes/positive key. It contains options that execute commands and go deeper into the menu structure. Some example functions are Select, OK, and Options.

Series 40 Platform: Designing XHTML Mobile Profile Content

15

Forum.Nokia.com

•

The right softkey is used as a no/negative key. It contains options that cancel commands, delete text, and go backwards in the menu structure; examples include Back, Exit, and Clear.

Four-way scrolling and navigation: •

Scrolling up/down allows the user to scroll the options, text, and images in the current display up and down (vertical direction). Moving the window up and down is done using the scroll up and scroll down keys.

•

Scrolling left/right allows the user to scroll the content in the current display in a horizontal direction. Moving the window left and right is done using the scroll left and scroll right keys.

4.2.2

Three-softkey display

The Series 40 three-softkey display has three high-resolution display types: •

A passive-matrix color display with 4,096 colors.

•

An active matrix LCD with up to 262 144 colors.

•

An active TFT with up tp 16 million colors.

The display consists of the application area, a header area, and an area used for the softkeys.

Figure 2: Structure of the browser screen

The display resolutions and application areas are listed in Table 1. Note that the scrollbars are placed in the application area, if they are present.

Resolution

Application area

128 x 128

128 pixels (horizontal) by 96 pixels (vertical)

128 x 160

128 pixels (horizontal) by 115 pixels (vertical)

208 x 208

204 pixels (horizontal) by 156 pixels (vertical)

240 x 320

224 pixels (horizontal) by 226 pixels (vertical)

Table 1: Display resolutions and application areas

Keys in the three-softkey user interface: The Send/Talk key works as a selection key. Series 40 Platform: Designing XHTML Mobile Profile Content

16

Forum.Nokia.com

The End key exits a data call/GRPS connection and goes into idle state when pressed twice. The three softkeys are assigned actions that enable the user to manipulate the user interface by making selections and entering, editing, and deleting text. •

The left softkey usually provides an option list with the label Options. Here the user can find all kinds of context-specific options.

•

The middle softkey usually provides the most important and frequently used function. The function is presented with a textual label in the middle of the lowest part of the display. The user can directly perform functions with this key.

•

The right softkey provides the backward, negative functions, such as Exit, Back, and Clear.

Four-way scrolling and navigation:

4.3

•

Scrolling up/down allows the user to scroll the options, text, and images in the current display up and down (vertical direction). Moving the window up and down is done using the scroll up and scroll down keys.

•

Scrolling left/right allows the user to scroll the content in the current display in a horizontal direction. Moving the window left and right is done using the scroll left and scroll right keys. An alphanumeric keyboard

In addition to having a normal numeric keyboard, some Nokia phones have an alphanumeric keyboard with 52 keys hidden under the flip. The keyboard is revealed when the flip is opened. The software turns the display texts and images 90 degrees when the flip is opened. The keyboard under the flip enables fast, easy, user-friendly text input via thumb typing.

Figure 3: Mechanical concept of the Nokia 6820 messaging device

4.4

Display fonts In most countries, the Series 40 XHTML browser supports one font family in three font sizes. The font size in pixels depends on the display size. Most devices support the following font sizes:

Series 40 Platform: Designing XHTML Mobile Profile Content

17

Forum.Nokia.com

128 x 128

9 pixels, 12 pixels, and 16 pixels (China 12 and 16)

128 x 160

9 pixels (China/APAC 12 pixels), 16 pixels, and 23 pixels

208 x 208

20 pixels, 24 pixels, and 28 pixels

240 x 320

16, pixels, 20 pixels, and 24 pixels

For each of these (two or three) sizes, normal, bold, and italic styles are available. Other families, sizes, weights, and styles are mapped as appropriate onto available fonts. The user may be able to set the default font size for three different sizes, for example, “Extra small,” “Small,” and “Medium” through a browser application appearance setting. On color displays, the same set of colors is available for fonts as is available for images. It is therefore recommended that content developers use (Web-safe) colors, rather than style, weight, or size, to distinguish sections of text. All fonts are proportional. Proportional fonts give a dynamic and minimized width for each character, improve readability of display texts, and generally allow more characters to be displayed per line. On the other hand, having proportional fonts means that it is difficult to tell how many characters there can be in each line, e.g., compare characters ”W” and ”i.” 4.5

Accessing the browser The Nokia Series 40 mobile browser is accessed by selecting the Services application from the Application menu. For quick access to the browser, the user can long press the 0 key, which will automatically start the browser and load the home page for the currently active settings. The browser can also be accessed through the Favorites menu, or through any one of a variety of other methods.

4.6

Content size All Series 40 devices support documents up to 32 kB in size, including an external style sheet or embedded images. No single text block (paragraph) should be larger than 10 kB, and tables should not be nested more than two levels deep. Many Series 40 devices support documents up to 100 kB in size (including images). In cases where an external style sheet or embedded image exceeds the limit on total content size for a document, the primary document will be displayed with an icon indicating images that failed to load, and formatted according to the style attributes present in the primary document. It is therefore recommended that if larger content sizes are used, the primary document (excluding images and external style sheet) should always be less than 32 kB in size. This will ensure that the content, including links, will be displayed, even on devices with a 32 kB total maximum content size.

Series 40 Platform: Designing XHTML Mobile Profile Content

18

Forum.Nokia.com

5 XHTML MP elements The following guidelines are for using XHTML MP when designing services for the Nokia Series 40 dual browser. They provide an overview of the XHTML MP elements that are critical from the rendering point of view and the XHTML MP capabilities supported by the browser. This chapter does not include all possible XHTML MP elements and attributes. 5.1

Text formatting The content of an XHTML page is displayed in the application/main area of the display (see Figure 1). The order of elements is significant, as they appear on the screen in the same order. White space is ignored unless the <pre> element is used. See Section 5.1.3, ”Pre element,” for more information on the <pre> element. Table 2 contains default styles for text layout formatting elements. These styles may be overridden using style sheets.

Element

Formatting

Abbr

Normal

Acronym

Normal

Address

Italic if supported, normal otherwise

Blockquote

Indented normal text (cite is ignored)

Cite

Italics if supported, normal otherwise

Code

Normal

Defn

Italics if supported, normal otherwise

em

Bold

H1- h6

Actual font size product dependent

Kbd

Monospace if supported, normal text else

strong

Bold font

b

Bold font

i

Italics if supported, normal otherwise

Var

Italics font

Pre

Monospace

Span

Inline container for text

u

Underlined font

big

Font size is set to larger

small

Font size is set to smaller

P, div

Block container for text.

q

Normal text, within quotes

Samp

Normal

Br

A line break is inserted in the text

Series 40 Platform: Designing XHTML Mobile Profile Content

19

Forum.Nokia.com

Table 2: Text layout formats

5.1.1

Paragraph and content alignment

The paragraph element,

, enables word wrapping and content alignment. A paragraph always starts on a new line. The content inside a paragraph can be aligned to the left, center, or right; by default, alignment is to the left. The alignment is set by using paragraph attributes (see Example 1). The recommended method of specifying alignment in XHTML is by using style sheets. A paragraph will always be wrapped unless the content specifies nowrap and the user wrap setting is off.

Align "center"

Align "right"

Example 1: Paragraph element and alignment

5.1.2

Line break

The
element forcibly breaks (ends) the current line of text. The HTML clear attribute specifies how text after the forced line break is wrapped around a floated element, for example, an image. Possible values are left, right, all, and none. The default value is left. Left prevents floated elements from being displayed to the left of the element. Right prevents floated elements from being displayed to the right of the element. All prevents floated elements on either side of the element. In all of these cases, the top margin of the element is increased until the top edge of the element’s border is just below the bottom edge of the floated element. None allows floated elements to appear on either side of the element. See also the float property for style sheets in Section 6.2.3, “Float.” 5.1.3

Pre element

The pre element, <pre>, causes text to be displayed “preformatted” to the extent possible. Preformatted means that white space is left intact, the font is displayed as plain text, and word wrapping is enabled/disabled according to how the browser is set.

Series 40 Platform: Designing XHTML Mobile Profile Content

20

Forum.Nokia.com

5.2

Tables The table element, , is used together with and

element can be used. It is possible to have text, images, and tables on the same page. The cells are shown in bordered rows and columns. The presentation attributes of a table should be defined in a style sheet, for example, the border width, border color, text alignment, etc. Automatic width of cells and columns depends on the number of columns and the amount of content inside the cells. For example, if the table contains three or more columns, the width of a table cell plus its border is one third of the display width, and if the table only contains one column, the fixed width of a table cell and its border is the width of the display. If the table cells and columns are narrow (only a small amount of content in cells), it is possible to have more than three columns on the display. The developer can also specify cell sizes in style sheets or by using style element or style attributes. Cells and columns are sized based on the first row.

Paris

Current Conditions
Forecast

Home | Weather

Example 2: Table element

When using nested tables, content developers should avoid specifying the parent table width as a percentage while the child table widths are expressed explicitly. Because the Series 40 platform contains devices with different screen sizes, percentages will not always represent the same number of pixels. Therefore it is recommended that absolute widths (pixels) be used for both parent and nested tables, to ensure that the content will be rendered properly. Care should be taken to ensure that the total table width is the same as the sum of the widths of the individual columns plus borders and cell spacing. In general, as table nesting levels increase, so does the complexity of the page and the required processing time to display the page. In order to ensure the timely display of pages, very deeply nested tables should be avoided. For example, consider the following content segment: Series 40 Platform: Designing XHTML Mobile Profile Content

21

Forum.Nokia.com

The parent table is specified as a width of 100 percent of the content area (128 pixels on most Series 40 devices), while the nested table within it specifies a width of 240 pixels. The width of content within the nested table is set to 240 pixels, but the parent table is constrained to displaying only 80 percent of the content area, thereby cutting off almost half of the nested content width. It is recommended that absolute widths (pixels) be used for both parent and nested tables, to ensure the content will be rendered properly. Care should be taken to ensure that the total table width is the same as the sum of the individual column widths plus borders and cell spacing. In general, as table nesting levels increase, so does the complexity of the page and the processing time required for displaying the page. In order to ensure a timely display of pages, table nesting of more than 10 levels should be avoided. On most Series 40 devices it is not a good idea to have more than three levels of table nesting on one page. The less nesting there is, the faster the table will load on the target device. As a stylistic note, tables should not have borders that are too thick, since in a device with limited display size the border width can easily consume enough pixels to make the actual content area too small to be useful. " > <style type="text/css"> td {border: solid}

Heading

1	2
3 4 5 6	7

Example 3: Nested table element

5.3

Images •

In a 128 x 128 pixels UI, the graphics area is at most 128 pixels wide and 96 pixels high.

•

In a 128 x 160 pixels UI, the static graphics area is a maximum of 128 pixels wide and 115 pixels high.

Series 40 Platform: Designing XHTML Mobile Profile Content

22

Forum.Nokia.com

•

In a 208 x 208 pixels UI, the static graphics area is a maximum of 196 pixels wide and 156 pixels high but vertically and horizontally scrollable up to the maximum deck size.

The appearance of content prior to completion of image loads can be greatly enhanced by specifying the height and width for each image. As an additional benefit, specifying the height and width in the element will often reduce by a factor of two the computational effort needed to completely render a page. These two advantages can lead to a significantly better user experience. Image scaling is supported on most Series 40 devices; however, images are not scaled by default even with the “wrap” appearance setting turned on. Images are only scaled according to attributes (height and width in particular) or style applied to an image element. If, for some reason, an image cannot be fetched (e.g., when image auto loading is off), then a "broken" image icon and the alt attribute text are displayed. The alt attribute text is truncated if it exceeds the horizontal space left for the text on the line in use. Images can be used inside a table and as a hot link (see Example 3). 5.4

Links A hot link is specified with the element. By default, hot links are shown underlined and colored blue. If there are an image and text declared inside an anchored link, the image is displayed with a borderline and the text is shown underlined. Developers can specify different link options using style sheets; however, this is not supported by all device models. The user can navigate to a link and select a highlighted link by pressing the middle softkey, the send key, or by using the browser’s options menu. Example.xhtml

<span class="red">Text

Style.ccs

Ol { list-style-position:outside ; background-color:yellow; ul {list-style-type:disc } body {background-color:yellow} div.marquee {width: 50% ; font-size:large } .red { color: red; }

}

Example 4: Colored link

5.5

Access keys The Nokia Series 40 dual browser supports the access-key attribute for both XHTML pages and WML cards (although it has different effects depending on the markup language used). It can be used with the elements and . This attribute can be used to assign hardware keys to elements in the page, such as hot links and text areas, thus easing navigation. The hardware keys 0-9 can be assigned to certain elements in the page. If the # key or the * key are assigned as access keys, they are ignored by the browser. The designer can indicate to the user which

Series 40 Platform: Designing XHTML Mobile Profile Content

23

Forum.Nokia.com

key to press in order to activate the element, by adding the label of the key to the element. For example, if the service provider associates the key 1 with a link, the number 1 can be added to the label of the link. For HTML content, all elements, input type=image, and input type=submit access keys are accessible through the options menu. For WML content, all assigned <do> elements with a go task are accessible through the options menu. 1. Text 1 Example 5: Assigning an access key to a hot link

An access key has an effect on an element even if the element is not highlighted or visible. After an access key has been pressed, the element is highlighted if it was not already. 5.6

XHTML MP input processing Input processing enables the user to input requested information to the service. There are two kinds of input elements: input fields created using an element and selection lists created using a <select> element. To specify each choice within a <select> element, elements are used.

5.6.1

Input elements

The input element is a rectangular editing box. Its size is determined by a size attribute. It also has a type attribute, the allowed values of which are text, password, check box, image, file, radio, reset, and submit. If text type is used, input is displayed to the user in a readable form, whereas if password type is used, input of each character is obscured. Text is the default type. When the element is of type check box, a check box is displayed. There is a checked attribute for setting the initial state of the check box; the default state is not checked. No line breaks are inserted before or after the check box. When a check box has focus, it is highlighted. When the element is of type image, a graphical submit button is displayed. No line breaks are inserted before or after a graphical submit button. A graphical submit button is displayed as an image anchor. When the element is of type file, a rectangular editing box with three dots is displayed. When the element is activated, the "Gallery" of the device is shown and the user can select the content to upload. After the user has made the selection, the XHTML page is displayed again and the name of the selected content is shown on the element.

Figure 4: element and the upload process

When the element is of type radio, a radio button is displayed. There is a checked attribute for setting the initial state of the radio button; the default state is not checked. No line breaks are inserted before or after the radio button. When a radio button has focus, it is highlighted. If two or Series 40 Platform: Designing XHTML Mobile Profile Content

24

Forum.Nokia.com

more radio buttons of the same name in the same form have the checked attribute, only the first declared would be preselected. When a radio button is activated, all of the other radio buttons with the same name attribute value in the enclosing element are deactivated. When the element is of type reset, a reset button is displayed. No line breaks are inserted before or after a reset button. The default label text is Reset. When the element is of type submit, a submit button is displayed. No line breaks are inserted before or after the submit button. The value attribute is for setting the label text of the button. The default label text is Submit.

Form Input

Next

Start

Example 6: Input elements

The size of the textual input boxes (input, text area) depends on size settings and the text inside the box. If the input box does not fit on the current line without exceeding the display width, a line break is inserted and the input box is drawn on the next line. If the input text is longer than the input box, the text is truncated and an ellipsis is added. The user can input characters to an element after highlighting it. The user can also open the editing box by pressing the navigation key on the highlighted editing box or by selecting the options list item Open when the editing box is highlighted. If a format mask is used (-wap-input-format for XHTML content or the format attribute for WML content), the editor does partial validation (prefix match) against the format string while the user is entering text. Limited feedback exists for the user about possible correct entries after an incorrect character is entered, so complicated format masks should be avoided. Once the user has accepted the input by clicking selection key or selecting OK in options menu, the input and final validation is done using the entire format mask and input string. If the final validation fails, the value of the input field reverts to the previous value, and the editor is closed. 5.6.2

Select element

Selection lists are elements that specify a list of options for the user to choose from. There are two kinds of selection lists supported: single-choice and multiple-choice lists. The user can select multiple choices if the multiple attribute is set as true (selected items are marked with a selection symbol). A selection list item on a card is a rectangular box that looks similar to an element item. Inside the selection box, there is an arrow character in link color (default: blue) pointing to the right. This arrow is positioned at the very end of the last line of the selection box. The arrow differentiates the selection box from the editing box, which is used for input elements.

Series 40 Platform: Designing XHTML Mobile Profile Content

25

Forum.Nokia.com

The user can open a selection list when a selection list is highlighted. Selection lists can have a title and a predefined value. The title is used as a label for the list of values from among which the user can choose one (single selection list) or more (multi-selection list) values. Selected values are displayed in the selection box. If more than one value is selected in a multi-select list, the values are separated with commas. The size of the selection box fits the size of the selected value(s). The selection box contents will automatically be truncated if they exceeds the screen size (that is, if the selected values do not fit into the space that is available in the box on the current line). Truncated text can be seen in full by pressing and holding the # key. The option element specifies a single option in a select element. Options can be grouped with an optgroup element, which specifies a group of choice items in a select element.

Next

Forms

Multiple:
<select name="Select" multiple="multiple"> First Second Third Fourth
None selected:
<select name="Select2"> First Second Third Fourth

Next

Start

Example 7: Selection and option elements

Series 40 Platform: Designing XHTML Mobile Profile Content

26

Forum.Nokia.com

6 WAP CSS Style sheets enable the content of a page to be separated from its presentation, thus allowing the same content to be targeted to different platforms simply by changing the style sheet. Style sheets also give developers much more control over the way a mobile application looks than was possible with WML. Every aspect of a WAP page's appearance — positioning, fonts, colors, text attributes, borders, margins, and alignment — can be defined in a style sheet. This chapter offers guidelines for using WAP CSS when designing services for the Nokia Series 40 dual browser. It provides an overview of the WAP CSS properties that are critical from the rendering point of view and the WAP CSS properties and attributes supported by the browser. This chapter does not include all possible WAP CSS properties and attributes. Pattern matching based on link pseudo-class is not supported. 6.1

Applying style sheets The Series 40 XHTML browser has a default style that specifies how all XHTML MP elements will be displayed in the event that developers do not specify their own styles. Developers can specify their own styles in various ways: in an external style sheet, in a style element in the document head, or by using inline style. The recommended way is to use an external style sheet, but there are tradeoffs to consider. External style sheets can adapt a single XHTML source document for a variety of devices. WAP CSS is based on a subset of CSS2; however, it is not a strict subset. WAP CSS includes several extensions for wireless devices (marquee, input format validation, access key). These extensions are generally identified with a prefix of “–wap–” and may substitute for some functionality provided by WML but not by XHTML. Furthermore, external style sheets can be reused for multiple pages being viewed on a single phone, and therefore hold the potential, if cached, to dramatically reduce the bandwidth required when loading related content onto the phone. Note, however, that if the same style sheet is not going to be used for multiple XHTML documents, using an external style sheet results in an additional network roundtrip, and an additional delay before the document is rendered in its final format. Furthermore, during the additional delay period while the external style sheet is being fetched from the network, the unformatted content may appear very different from the final form.

6.1.1

External style sheets

External style sheets are specified in the head element of a document using a element. More than one external style sheet can be used per document. Example 8: Defining an external style sheet

6.1.2

Style element in document head

A <style> element can be used with the element to define a style that applies to the entire document. <style> p {color:blue} Example 9: Defining a style element in a document head. Blue will be the font color for all paragraph text

Series 40 Platform: Designing XHTML Mobile Profile Content

27

Forum.Nokia.com

6.1.3

Inline styles

A style attribute can be set for a single element anywhere in the document where the element is specified. This is an XHTML MP extension. It allows an application developer to apply style properties to individual elements.

red

Example 10: Defining an inline style. Red will be the font color for just this paragraph

6.1.4

Cascading rules for style elements

Style elements specified first will be overridden by identical style elements defined later. The default style sheet for the browser has the lowest priority in the cascading order, followed by an external style sheet, and then a style element in the document head. Inline styles have the highest priority. 6.2

Borders

6.2.1

Border style

Border style can be applied to all elements. Supported values for border style are solid, hidden, and none. If the border style is set to be anything other than solid, the border will be displayed as a solid line. If border style is specified as none or hidden, no border will be drawn. The default value for border style is none. Border style sets the style of all four borders of an element. When the border style is solid, the border is drawn as a single unbroken line. One to four style values are allowed within one declaration. If the bottom, top, left, and right properties are declared individually, only one value is allowed per declaration. 6.2.2

Border width

Border width can be applied to all elements. The border width property can be set to medium, thin, thick, or a particular number of pixels. Negative widths are not allowed and the default value (medium) is applied in that case. The values medium and thin both result in a border width of 1 pixel. Highlighting bordered elements with medium or thin values results in a border width of 2 pixels. The thick value results in a border width of 2 pixels. Highlighting a thick-bordered element results in a border width of 3 pixels. For a border width that sets the width of all four borders of an element, one to four width values are allowed per declaration. When declaring the bottom, top, left, and right properties individually, only one value is allowed per declaration. 6.2.3

Float

The float property causes an element to be moved to one side of the parent element's content area. Supported values for the float property are left, right, and none. Left floats the element to the left of the parent element's content, and right floats it to the right. The value none prevents the element from being floated. Floating an element causes its display property to be set to block except if the original display was set to none. In that case, the element will not be rendered, and floating has no effect.

Series 40 Platform: Designing XHTML Mobile Profile Content

28

Forum.Nokia.com

The rare red-billed worraburra has been spotted off the north coast of the Isle of Skye. It has been over 3 years since the last sighting.

Example 11: Float property using an inline style

6.3

Margin The margin property can be applied to all displayed elements. Supported values are length, percentage, and auto. For percentage, the margin is calculated with respect to the width of the element's containing block. The default value for margin is zero. All four sides of an element can have a margin applied at once using the margin shorthand property, or each side can have a margin applied separately by defining values for margin-top, margin-right, margin-bottom, and margin-left. Negative values for margin properties are allowed.

6.4

Padding The padding property can be applied to all displayable elements. Supported values are length, inherit, percentage, and auto. For percentage, the padding is calculated with respect to the width of the element's containing block. The default value for padding is zero. All four sides of an element can be padded at once using the padding property or each side can be padded separately by defining values for top, right, bottom, and left. A negative value for length is not allowed; the default value is applied if the given value is negative. Length and percentage values may be mixed together.

6.5

List style List style properties can be applied to all elements.

6.5.1

List style image

Supported values are uri and none. None is the default value. List style image defines the location of a bullet image that is used for a list item. Uri points to the image location, and if the image cannot be loaded, none is applied. None uses a default bullet image for list items. 6.5.2

List style position

List style position sets the position of the bullet in relation to the content of the list item. Supported values are inside and outside with outside being the default value. Inside displays the bullet as an inline item at the beginning of the first line of the list item's content (visually seen as part of the list item's content). Outside displays the bullet outside the box containing the list item's content. 6.5.3

List style type

A list style type sets the type of the list item bullet. The supported values are disc, circle, square, decimal, upper Roman, lower Roman, lower alpha, upper alpha, and none. The default value for list style type is disc. Disc displays a filled circle, circle displays an unfilled circle, square displays a square, and decimal displays a decimal count starting at 1. Upper Roman displays an upper Roman numeral count starting at I, and lower Roman displays a lower Roman numeral count starting at i. Lower alpha displays lower ASCII letters starting with "a" and upper alpha displays uppercase ASCII letters starting with "A." No bullet is displayed when the value is set to none. The List style type will override user defined list type (ul or ol). Series 40 Platform: Designing XHTML Mobile Profile Content

29

Forum.Nokia.com

ol ul h3 .b .u

{ { { { {

list-style-type:upper-roman ;list-style-position:outside } list-style-type:square } color:white } font-weight:bold } text-decoration:underline }

Example 12: List styles. Excerpt from a WCSS showing an ordered list with an upper Roman bullet type, position outside, and an unordered list with a square bullet type

6.6

Text

6.6.1

Text align

The supported values for the text align property are left, right, and center, and inherit. The default value is left. The text align property applies to all block level elements and it sets the way line boxes are aligned within a block level element. The left value aligns line boxes to the left side of the element's content area. The right value aligns line boxes to the right side of the element's content area. The center value centers them. 6.6.2

Text decoration

The supported values for the text decoration property are none, underline, and blink, and inherit. The default value is none. Text decoration can be applied to all elements, including inline elements. The value underline causes elements to be underlined with a single line. The value blink causes elements to blink. The blink speed is one blink per second. .p

{ text-decoration:blink }

Example 13: Text decoration. Excerpt from a WCSS. Any text within a

element that uses this style sheet will blink

6.6.3

Marquee

The <marquee> element renders the content between the <marquee> start and end tags as a marquee. Setting <marquee> attributes can further define the marquee behavior. The content can be text, images, style, or phrase elements (e.g., <span>, , <em>, etc.). Links and other elements are not allowed. Setting the display property on an element to -wap-marquee also renders the text as a marquee. CSS properties may also be set to further define the marquee behavior. Marquee text is always rendered on one line; if a line break is inserted, the browser ignores it. The font used for marquee text is the default font unless otherwise specified by the content author. The number of marquee texts visible depends on the display size. The marquee behavior can be changed by applying the CSS properties listed in Table 3.

Series 40 Platform: Designing XHTML Mobile Profile Content

30

Forum.Nokia.com

Property

Supported values

Initial value

UI effect

–wap-marquee-dir

Ltr, rtl

Rtl

Controls scrolling direction.

-wap-marquee-loop

All integers, “infinite”

1

Determines the number of marquee loops.

-wap-marquee-style

Scroll, slide, alternate

Scroll

Determines the behavior of the marquee.

-wap-marquee-speed

Slow, normal, fast

normal

Marquee speed. Slow=400ms, normal=150ms, fast=85ms.

Table 3: CSS properties for marquee behavior

6.7

Color The Nokia Series 40 XHTML devices have a color display, so WAP pages targeted to this platform can be made much more visually appealing using the color capabilities of XHTML. Color can be specified for the background, text, borders, and many other elements. The color scheme for a document should normally be defined in a style sheet.

Series 40 Platform: Designing XHTML Mobile Profile Content

31

Forum.Nokia.com

7 Additional features 7.1

TCP/IP TCP/IP is the standard Internet transmission control protocol that allows data to be sent in fixed or mobile networks. In IP-based packet data networks, the TCP protocol is widely used by several applications. It is capable of setting up a connection between a client and a server and providing reliable data transmission within that connection. Devices use wireless profiled TCP/IP (wTCP/IP, Figure 5), which provides the same functionality as “normal” TCP/IP with some bandwidth optimization.

Figure 5: Wireless profiled TCP with WAP proxy

Wireless profiled TCP is also more reliable, with improved error-handling capabilities when compared to normal TCP, and has lower connection setup times. Wireless profiled TCP is optimized for wireless environments and can operate with standard TCP [RFC0793] [RFC1122] implementations on the Internet. Wireless profiled TCP/IP enables connections with larger data file sizes than WSP. Because of this, TCP/IP will be an underlying key enabler for new, rich applications such as next-generation MIDP 2.0, streaming, and richer messaging, such as imaging, video, e-mail, Multimedia Messaging Service (MMS) with large file sizes, and Instant Messaging and Presence. TCP/IP enables improved security over data connections from the mobile device to the network. Previously there were different encoding protocols used between the device and the WAP gateway and between the WAP gateway and the network. TCP/IP enables the usage of Transport Layer Security (TLS) all the way from the device to the origin server. Based on the Internet security protocol (SSL), TLS is a standard for enabling secure Internet connections between the devices and origin servers. TLS will ensure real end-to-end security with no security gap (i.e., security protocol conversion). In practice, this means improved security for information-sensitive applications such as banking and e-commerce, as well as other corporate and financial applications. 7.2

Push Push service messages are an ideal way for service providers to activate users, as these messages can be used to notify users of updated content or alert them about information in their areas of interest, for example, new e-mails, changes in stock prices, flight schedule changes, or news headlines. Service messages indicate downloadable content. The user can view indicated content by using the Service Inbox and the browser.

Series 40 Platform: Designing XHTML Mobile Profile Content

32

Forum.Nokia.com

7.2.1

Service Indication

The Service Indication content type enables an alert message to be sent to users. A Service Indication must contain at least the text to be displayed to the user and a URL address of content that may be dynamically generated for each push message in the application server. In addition to text and a URL address, the service indication can optionally contain the following information: creation date and time, expiration date and time, ID, and priority. Each Service Indication has a Service Indication ID, which is used to uniquely identify different kinds of Service Indications. Service providers set the Service Indication IDs for messages. The ID allows reception of multiple Service Indications with the same URL address and priority level. If the received Service Indication has the same ID as the one stored in memory, the received Service Indication will replace the stored one only if it is newer. Priority levels define how the received messages are ordered in the Service Inbox and also whether the user is notified about the received Service Indication. The defined priority level has the following effect: •

signal-high: A notification is displayed and an SMS alert tone is sounded.

•

signal-medium: A notification is displayed and an SMS alert tone is sounded.

•

signal-low: No indication of the received Service Indication is displayed to the user. The Service Indication is silently stored in the Service Inbox.

•

signal-none: The Service Indication is automatically discarded. The user is not notified.

•

delete: If a Service Indication already exists, the Service Indication with the same ID in the Service Inbox is deleted. If there is no Service Indication with the same ID in the Service Inbox, the received Service Indication is discarded. The user is not notified.

If no attribute has been specified, Service Indications will be received as “signal-medium.” 7.2.2

Service Loading

The Service Loading content type enables a URL address to be sent to a device, which then "pulls" the content at that URL from the origin server without the user specifically requesting it. As the user may be busy doing other things when service-loading content is received, the intrusiveness level can be set. Service Loading is not supported on all devices, and should be verified with the Browser Characteristics in Nokia GSM Devices [1] document. A Service Loading content type has one mandatory href attribute and one optional action attribute. The href attribute is the URL of the service application to be loaded and the action attribute specifies the action that should be taken after "pulling" the service application. There are three possible values for the action attribute:

7.3

•

execute-low: The application is executed in a non-intrusive manner.

•

execute-high: The application is executed and may result in user-intrusive behavior.

•

cache: The application is not executed. Instead it is placed in cache if cache exists. If cache does not exist, the application is silently discarded. Wireless Telephony Applications Interface (WTAI) Public Library

The Nokia Series 40 dual browser supports three Wireless Telephony Applications Interface (WTAI) public library functions: making a call while browsing, sending DTMF tones, and saving numbers and names to the phone book. These functions — MakeCall, SendDTMF, and AddPBEntry — can be used anywhere in XHTML MP code.

Series 40 Platform: Designing XHTML Mobile Profile Content

33

Forum.Nokia.com

7.3.1

Making a phone call

The MakeCall function is used to make a phone call directly from an XHTML page. A typical example of the use of MakeCall is when the user selects a link that initiates a phone call. In XHTML, the MakeCall function is defined with the following string: Call 123456 789 When a MakeCall function is executed, the user is asked to confirm that the dial-up is to be made. If the phone number about to be called does not exist in the phone book, a confirmation query with the phone number is displayed. If the number exists in the phone book, a confirmation query is displayed with the name fetched from the phone book. If the user accepts making the phone call, another confirmation query is displayed with the text "Quit browsing?" If the user accepts both queries, the browser session will be terminated and the browser application will close down. The call will then be initiated. When the call is terminated, the device is in idle state. If the user rejects the latter confirmation query, the call will be initiated from within the browser display and the user can browse cached content during the call. If the user is browsing over GPRS connection, the connection will be suspended while the phone call is active. 7.3.2

Sending a DTMF tone

The user can send DTMF tones through the network by executing a WTAI function called SendDTMF. Just like MakeCall, a typical way of using SendDTMF is to assign the SendDTMF function to a link. The user must have a voice call active. When the DTMF tone has been sent, the user returns to the active page where s/he initiated the sending. The voice call remains active. 7.3.3

Adding a phone book entry

The AddPBEntry function offers an easy way to store a phone number and corresponding name onto the phone book application from an XHTML page. In XHTML, the AddPBEntry function is defined with the following string: Home When the user activates an AddPBEntry function and the content author has declared a name and a number, the phone displays a confirmation query with the text "Save name?" When the user accepts the confirmation query, another confirmation query with the text "With number +123456789" is displayed and the number is stored in the phone book application. When saving is complete, the currently active page is displayed again. The user does not have to be online or have any voice calls active in order to use the AddPBEntry function. 7.4

Cache The Nokia Series 40 dual browser places viewed XHTML pages in the cache; however, pages are not cached by default. Caching makes previously visited pages quick to access, as there is no need to reload them. The user can empty the cache by selecting Clear Cache in the Options list in the browser. The cache stored in the client can be controlled using HTTP headers. The "no-cache" HTTP header directive can be set by the HTTP server hosting the pages to define that pages are not cached.

7.5

Content download over WAP Content download is a technology used to deliver digital content such as entertainment and business applications to mobile devices. Another important application area for downloading is to personalize devices according to a user’s preferences and lifestyle. Content downloading can be initiated by an end user or by a network application.

Series 40 Platform: Designing XHTML Mobile Profile Content

34

Forum.Nokia.com

The content download mechanism between the mobile device and content source is based on open technologies such as HTTP (and WSP) and Java Community Process technology. This technology allows for the creation of an open, multi-vendor market for device vendors, as well as for network server and broker vendors. Nokia Series 40 browser inherently supports the download of multiple content types over WAP. These are: •

Wallpaper/screen savers/animations (Gif87a/89a)

•

Pictures in WBMP, GIF, animated GIF, JPG, and PNG image formats

•

Operator logo and calling line identification logo icons

•

MIDP applications (MIDlets)

•

Ring tones, video, audio

7.6

Content upload Content upload technology is used to deliver digital content from a device to a server. An example of a content upload service would be the photo album service that allows a user to upload photos taken with the device's camera to her/his own photo album on the service provider's server. Users can upload any type of file from the Gallery, but the explicit MIME type is given for only the following content types:

File extension

MIME type

JPG

image/jpeg

PNG

image/png

WBMP

image/vnd.wap.wbmp

GIF

image/gif

MIDI ring tone

audio/midi

For all other types, a more generic MIME type "application/octet-stream" is given. Content is sent from a device to the server as a Multipart Message; the server-side implementation of the content upload is similar to the HTTP upload mechanism for standard Internet browsers. The process of implementing the upload mechanism in the server side is described below: 1.

An XHTML page with a

element is created. Inside the element there are at least and elements. The page is deployed to the Web server.

2.

When the page is opened with the device browser, the user can select the content to upload according to the process described in Section 5.6.1, “Input elements.”

3.

After the content has been selected and the Submit button has been activated, the form is posted to the URL defined in the form. Selected content is part of this Multipart Message.

4.

On the server side, the Multipart Message is parsed with an application (written with, for example, CGI, PHP, ASP, JSP, or Java Servlet) and content can be saved to the file system of the service provider's server.

For up-to-date information about which phones support image upload, see the Nokia XHTML FAQ at www.forum.nokia.com/browsing.

Series 40 Platform: Designing XHTML Mobile Profile Content

35

Forum.Nokia.com

7.7

WML Script WMLScript can be called from anywhere within WML code. To call WMLScript from an XHTML page, a link from an XHTML page to a WML card, which then calls WMLScript, is required. WMLScript communicates with WML markup context via variables. These variables can be manipulated algorithmically by WMLScript to calculate prices, verify input data, perform string manipulation, and provide limited dialog/window facilities. WMLScript can also be used for specific e-commerce and banking applications requiring digital signature. Most WMLScript functionality — the notable exception being functionality in the WMLScript Dialog Library — can be implemented using XHTML and server-side Perl or Visual Basic scripts. This approach requires an additional network roundtrip, but holds the potential (with external WAP CSS) to allow a single set of server-side script(s) to support both wireless and desktop applications. WMLScript is compiled by the gateway when being sent to devices with a WAP stack. Since the Series 40 browser does not support uncompiled WMLScript content, in order to send WMLScript to a Series 40 browser with a TCP/IP stack, it must be stored in compiled form (wmlsc) on the origin server. Further, the origin server must be configured to recognize a new file extension and associate it with the MIME type application/vnd.wap.wmlsc.

7.8

ECMAScript Mobile Profile ECMAScript MP is a scripting language used with XHTML MP to provide added intelligence to the mobile browser and dynamic behavior to XHTML MP documents. ECMAScript MP is based on ECMAScript defined by ECMA 262. ECMAScript MP is supported with minor exceptions. For more information, see http://www.openmobilealliance.org/.

7.9

User Agent Profile User Agent Profile (UAProf) contains capability information about the client device. The UAProf file is being stored in a repository server and a URL pointing to the file is sent in the HTTP header from the mobile device to the server when requesting content. Using UAProf information, the content server can deliver content most suited to the capabilities of the WAP device. It should be noted that WAP and the Open Mobile Alliance (OMA) differ slightly in the UAProf specifications. The two UAProf specs are not identical. OMA is the standards body now responsible for all UAProf work. The WAP User Agent Profile might contain the following information: •

Hardware platform information, which can contain a collection of properties that describe the hardware characteristics of the device.

•

Software platform information, which can contain information about the system software, video and audio encoders supported by the device, and the user’s language preference.

•

Network characteristics, which can contain network-related information, such as bearer information.

•

WAP characteristics, which can contain a set of attributes describing the WAP capabilities supported on the device (for example supported WTAI public library functions and WMLScript libraries).

7.10

Cookies

Cookies enable the storage of data such as user information to ease browsing by reducing the amount of information the user must enter. When developing content that is user-specific, cookies should be used to identify returning users and present customized content. This allows frequent users of specific Series 40 Platform: Designing XHTML Mobile Profile Content

36

Forum.Nokia.com

sites to return to previously visited pages without having to navigate beginning at the site's home page. For example, login can be configured dynamically so that it is displayed only if the application cannot identify the user. Further, it allows shopping cart status or other state information to be maintained in the event of a connection interruption, either unexpected or deliberate. Both Netscape style and W3C HTTP State Management (1.0) cookies are supported. The total space available for storage of cookies is limited, so cookie length should be limited to 500 bytes or less where possible. 7.11

Segmentation and Reassembly (SAR)

The Segmentation and Reassembly (SAR) functionality is an optional feature in the Wireless Transport Protocol (WTP) layer defined by the WAP Forum (SAR is used in devices which have the WAP stack). SAR is used to split large WTP messages into a number of smaller datagrams and selectively retransmit failed datagrams. The use of SAR improves over-the-air (OTA) efficiency for downloading large messages to the phone and makes content downloading (e.g., a Java MIDlet download) and MMS transfer more reliable. The use of SAR enables the transmission of large data files through WSP to the mobile device. To use SAR, it must be supported by both of the communicating parties — typically the WAP gateway and the WAP browser. WAP service developers do not need to take any actions to enable SAR in their service development. The Nokia WAP gateways let through files up to 100 KB, but the limit might be smaller than that in some gateways. SAR cannot be used in connectionless (temporary) mode, and in that case the maximum data transfer size through WAP is 30 KB. SAR is not supported by devices which use the TCP/IP protocol stack.

Series 40 Platform: Designing XHTML Mobile Profile Content

37

Forum.Nokia.com

8 Terms and abbreviations Term or abbreviation

Meaning

Card

A single WML unit of navigation and user interface.

CSS

Cascading Style Sheet. Mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

Deck

A collection of WML cards that is the smallest downloadable unit. One cannot download a single card in a deck; the entire deck must be downloaded. Service developers should be aware of this, and not create large applications in a single deck.

Do element

A way of defining the binding between events (such as a user selection) and a task (for example, to go somewhere).

DTMF tone

Standard tone used to transmit numeric data via telephone. Generated when numeric keys are pressed.

GPRS

General Packet Radio Service. Mobile service that gives a packet switched access over GSM to external data networks with high peak transfer capacity.

GUI

Graphical User Interface.

HTML

Hypertext Markup Language. The markup language that is used for publishing hypertext on the World Wide Web.

HTTP

Hypertext Transfer Protocol. An application-level protocol for transferring HTML documents in the Internet.

Hyperlink

A link within a document or card that allows quick navigation to another document (card).

IDE

Integrated Development Environment. A tool for application developers.

Input element

A markup element that allows for interaction with the user, that is, lets the user input textual values. These can be used for input to locally stored scripts, or for parsing to origin servers.

Multiselection list

A selection list that allows the user to scroll and select several (or no) options to be active.

Navigation

The concept of moving between menu items,

Proportional font

A font in which different letter widths do not necessarily have the same number of pixels: "W" and "I" are good examples.

SAR

Segmentation and Reassembly. A functionality that is used to split large WTP messages into a number of smaller datagrams and selectively retransmit failed datagrams.

SDK

Software Development Kit. A kit for software developers including, e.g., an emulator, sample codes, reference documentation.

Selection list

List of user-selectable options.

Softkey

One or more function keys on the phone, whose function depends on the state of the phone. These keys are called softkeys because there is an associated text on the display.

Series 40 Platform: Designing XHTML Mobile Profile Content

38

Forum.Nokia.com

Term or abbreviation

Meaning

TCP/IP

Transfer Control Protocol/Internet Protocol. The standard Internet transmission control protocol that allows data to be sent in fixed or mobile networks.

UI

User Interface.

URL

Uniform Resource Locator. String that identifies resources on the Web.

W3C

World Wide Web Consortium. An organization that develops interoperable technologies for the Web.

WAP CSS

WAP CSS. Cascading Style Sheet specification optimized for wireless devices.

Word wrapping

Formatting rule for text appearance.

WIM

Wireless Identity Module. Enables users to make authenticated payments using digital signatures.

WML

Wireless Markup Language. Markup language based on Extensible Markup Language (XML), which is intended for use in specifying content and user interface for narrowband devices, including mobile devices and pagers.

WSP

Wireless Session Protocol. A layer of WAP stack that is optimized for low bandwidth bearer networks with long latency.

WTAI

Wireless Telephony Applications Interface. Feature that provides the means to create telephony applications by using a WAE user-agent with the appropriate WTAI function libraries.

XHTML

Extensible Hypertext Markup Language. XHTML uses the definitions in HTML 4.1 but requires proper XML syntax.

XHTML Basic

A subset of XHTML for small devices that omits features, such as frames, that are inappropriate for small screens.

XHTML MP

XHTML Mobile Profile. XML-based markup language that contains XHTML Basic and a few additional elements from full XHTML 1.1.

Series 40 Platform: Designing XHTML Mobile Profile Content

39

Forum.Nokia.com

9 References The following documents are available at www.forum.nokia.com. [1] Browser Characteristics in Nokia GSM Devices [2] Forum Nokia Technical Library [3] Introduction To User Agent Profile Other documents: Nokia Phone User's Guides http://www.nokia.com/ GPRS-related documentation http://www.mobilegprs.com/ WAP Push Specifications http://www.openmobilealliance.org Wireless Application Environment Specifications http://www.openmobilealliance.org Wireless Profile Cascading Style Sheet Specification http://www.openmobilealliance.org XHTML Basic Specification http://www.w3.org/TR/xhtml-basic/ XHTML Mobile Profile Specification http://www.openmobilealliance.org

Series 40 Platform: Designing XHTML Mobile Profile Content

40

Forum.Nokia.com

Evaluate this resource Please spare a moment to help us improve documentation quality and recognize the resources you find most valuable, by rating this resource.

Series 40 Platform: Designing XHTML Mobile Profile Content

41

---

Related Documents

Nokia Series 40 Platform: Designing Xhtml Content For Mobile

April 2020 11

Designing For Mobile

November 2019 26

Designing E Content

May 2020 8

Nokia Mobile Secret Codes

November 2019 66

Nokia Mobile Codes

April 2020 22

Windows Mobile Platform Overview

November 2019 20

---

More Documents from "Fahad_Mudassar"

On-time_delivery_toolkit

May 2020 7

Mediacom Phone Service User Guide (mound, Mn)

April 2020 10

Nokia Series 40 Platform: Designing Xhtml Content For Mobile

April 2020 11

Eeoc Field Guidance - Reasonable Accommodation Of Disabled Employees

December 2019 17

Harassment Investigation Checklist

November 2019 19

Anti-harassment Policy Guide For Managers

November 2019 22

Copyright © 2024 PDFCOKE.

elements to create sets of rows and columns of data, such as text, images, links, and so on. Also, the