Page 3 - Contents
1 Contents PREFACE _______________________________________________ 2 Who Should Read this Guide? 2 Overview of Contents 2 Related Publications 2 Ericsson Publications 2 Other Publications 2 Terminology 3 Abbreviations 3 Definitions 3 GENERAL USABILITY ASPECTS ____________________________ 4 USER INTE...
Page 4 - PREFACE; Who Should Read this Guide?; Other Publications
2 PREFACE This document describes how to design WAP services for the Ericsson Mobile Phone R380. Who Should Read this Guide? This document is intended for developers of WAP services who want a deeper insight intodesigning applications for the Ericsson R380 WAP browser. It is assumed that the reader ...
Page 5 - Terminology; Definitions; newcontext
3 [3] WAP Wireless Markup Language Specification, Version 1.1 Version 16-JUN-1999 Wireless Application Protocol Forum, Ltd. http://www.wapforum.org/what/technical.htm Terminology Abbreviations GIF Graphics Interchange Format HTTP Hypertext Transfer Protocol URI Uniform Resource Identifier URL Unifor...
Page 6 - GENERAL USABILITY ASPECTS
4 GENERAL USABILITY ASPECTS When it comes to designing any kind of electronic service, simplicity is the key to gainingacceptance and appreciation from users. Simplicity is even more important in a mobileenvironment since the user often needs to concentrate on other things as well as using thetermin...
Page 7 - USER INTERFACE ISSUES; The Browser Display
5 USER INTERFACE ISSUES The Browser Display The Ericsson R380 display is a grey scale black and white touchscreen with a resolution of360x120 pixels with 0.23 pitch. This means an active screen size of almost 83x28mm. The browser display has three sections: the Browser Area, the Card Title bar at th...
Page 8 - The On-screen Keyboard
6 Toolbar The Toolbar is an area containing buttons required by the browser. The On-screen Keyboard Text input is done with on-screen keyboards or a character recognition screen. Three differentkeyboard layouts are available: an alpha layout, a numeric layout and a layout with nationalcharacters. To...
Page 9 - DESIGN COMPONENTS; Using Text; Font size; big; small; em
7 DESIGN COMPONENTS This chapter gives an overview of the graphical user interface components and a description oftheir corresponding WML elements. These items are then used when designing WAP services. The “Look and Feel” of the components is described and guidelines are made on componentusage. The...
Page 10 - Line Spacing and Line Breaks; br
8 A text formatting example <wml> <card id="first" title="Pizza Penguin" newcontext="true"> <p align="center"> <br/> <b><big><a href="#second">Welcome</a></big></b><br/> to<br/> The Mobile...
Page 11 - Paragraphs; Attribute; align; align
9 Paragraphs Text on a WML card comprises one or more paragraphs. A paragraph always starts on a new line and is preceded by an extra line space of 3 pixels. Text within a paragraph is by default displayed left aligned. However, it can optionally bedisplayed right aligned or centered. WML Paragraphs...
Page 12 - Indented Paragraphs; title; title; fieldset; fieldset
10 Indented Paragraphs Related text and other components can be grouped together to increase usability. Such groupscan be nested. Each group is indented 20 additional pixels and preceded by an extra line space of 3 pixels. A header in bold font can optionally precede a group. In such a case a so-cal...
Page 13 - The Card Title Bar; Using Select Lists; select
11 The Card Title Bar See Card Title Bar on page 5. WML The title in the Card Title bar is defined by using the title attribute in the card element. Using Select Lists A select list is an input component that specifies a list of options for the user to choose from.Single and multiple choice lists ar...
Page 14 - option; Multiple Choice Lists
12 The option element Text in the option element content is used in the drop-down list. The title attribute is not supported. An example of a single choice list <p> <b>Select Pizza</b> <select> <option>Cappriciosa</option> <option>Quatro Staggioni</option...
Page 15 - Using Buttons
13 The select element Attribute Description multiple The multiple attribute can take the following values: Yes and No . The default value is No . To create a multiple choice list, this attribute is set to Yes . The option element Text in the option element content is displayed to the right of the ch...
Page 16 - do; Using Input Fields
14 WML Buttons are defined by using the do element. Pressing the button invokes the action defined in the do element. The R380 supports the following attributes: Attribute Description label The value of the label attribute is used as text on the button. The text is not truncated. type If no label is...
Page 17 - Using Images
15 Touching the screen anywhere in an input field makes the keyboard, or character recognitionscreen, appear (see The On-screen Keyboard above). WML Input fields are defined by using the input element. The following attributes are supported: Attribute Description type The type attribute can take the...
Page 19 - Using Hyperlinks
17 An image example <p align="center"> <img alt="baker"src="baker.gif" vspace="5" width="40" height="30"/><br/> <b>The oven is turned on, and your pizza will be delivered just in time.</b><br/> </p> Using Hyper...
Page 20 - Using Images as Hyperlinks
18 Using Images as Hyperlinks An image can also serve as a link. By default, there are no differences in image layout if theimage serves as a link or not. However, the R380 browser can be set to show image links with aframe of 1 black and 1 white pixel. This affects the card layout. WML An image hyp...
Page 21 - table
19 In addition to text and images, tables can also contain hyperlinks and images used as hyperlinks. WML The table element is used together with tr and td to create a set of aligned columns of text and images. The tr element is used as a container to hold a single table row. The td element is used a...
Page 23 - THE PIZZA PENGUIN EXAMPLE
21 THE PIZZA PENGUIN EXAMPLE Below is a complete WML code listing from a WAP demonstration application. The examplesin the previous chapters were mainly selected from this application. <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www....
