device independence

1

Developing Device Independent Web

Applications

… and how to use XML for that purpose

2

Today’s lecture

• Purpose– Discuss problems related to publishing

content on devices with different output capabilities (i.e. Cell phones, Web browsers, Set-top boxes, radios).

• Goals – Make you familiar with the W3C guidelines for

device independent authoring (on which this presentation is based).

– Not intended to provide solutions, but rather point out important considerations.

3

Today’s lecture DI (2)

• Background• Authoring roles• Applications and content• Devices and Access mechanisms• Personalization and Accessibility• Affordability

4

Vision

• Make web content available to:– Anyone (i.e. disabled)– Anywhere (internationalization)– Anytime (cell phones, TV, browser…)– Anyhow (choice of visual, aural … output)

5

The Author perspective

• Democratic/marketing perspective– Public authorities and companies want their content

to be available to everyone.

• New publishing devices– Many devices with different capabilities exist.– Difficult to know which devices will be available in

the future.– Making specific solutions for each device is

expensive and maintenance difficulties arise.

• Protecting investments– Making content device independent (DI) protects the

investment of producing the content.

6

The User perspective

• Access– Mobile networks and broadband connections

at home provides for new possibilities of media consumption.

• Devices– When we buy new devices, we want to

access all the content we usually access from computers.

7

User Related Concepts (URC)from W3C

QuickTime och enTIFF (okomprimerat)-dekomprimerarekrävs för att kunna se bilden.

8

URC: User Experience

• A user experience is a set of material rendered by a user agent which may be perceived by a user and with which interaction may be possible.

• Example: Course web pages

9

URC: Device

• A device is an apparatus through which a user can perceive and interact with ”the web”.

• Examples: a mobile phone, a computer, a web page.

10

URC: Access Mechanism

• An access mechanism is a combination of hardware (including one or more devices and network connections) and software (including one or more user agents) that allows a user to perceive and interact with ”the web” using one or more modalities (sight, sound, keyboard, voice etc).

11

URC: Perceivable Unit

• A perceivable unit is a set of material which, when rendered by a user agent, may be perceived by a user and with which interaction may be possible.

• Examle: a form on a web page, an image, vector graphics, an html paragraph

12

URC: Web page

• A web page is a collection of information, consisting of one or more resources intended to be rendered simultaneously, and identified by a single URI.

• Example: One course web page.

13

URC:Functional User Experience

• A functional user experience is a set of one or more perceivable units that enables a user to complete the function intended by the author for a given resource via a given access mechanism.

• Example: being able to find the time and place for a lecture from the course schedule on the course homepages from a given access mechanism (phone, computer…)

14

Device Independent Access

• This leads to our basic goal:• DIP-1: Device Independent Access

For some web content or applications to be device independent, it should be possible for a user to obtain a functional user experience associated with its web page identifier via any access mechanism.

15

Authoring Roles

• Authoring includes a variety of activities.• An activity is performed by one or several

individuals taking on a specific role.• One individual can take on several roles.• Several individuals can take on one role.

16

Authoring roles

• Interface designers– Layout designers– Stylistic designers– Interaction designers– Navigation designers

• Content creators• Business logic creators

17

Layout Designers

• Layout designers specify the physical placement of material on the output of the device. Typically this involves the arrangement of text, associated images and other media within a single page. However, the role of the layout designer changes when the access device has output mechanisms other than visual display. For example, the designer may need to specify the sequence in which information is spoken. The options available to the layout designer are heavily influenced by the capabilities of the target device, such as the size and resolution of its display.

18

Stylistic Designers

• The stylistic design of a site is essentially its "look and feel". It includes the selection of fonts and colors and the development of graphics used for elements such as icons, branding and backgrounds. It also includes stylistic elements of other kinds of media, such as audio and video. For example, where a device has spoken output, stylistic design might include the selection of the qualities of the particular voice used under various circumstances. Stylistic design is also heavily influenced by the capabilities of the target device and preferences expressed by the user.

19

Interaction Designers

• Interaction designers specify the way that users interact with a site. In particular, interaction designers specify how interactions occur within a page. This might include defining the order in which data is entered on a particular page. It might also include defining the particular kind of user interface abstraction employed for entering each value. Interaction design takes place at a level abstracted from the particular capabilities of the device. For example, an interface designer might specify that data entry for a particular field uses a mechanism where the user selects a single value from a set. The stylistic designer might interpret this as use of a drop-down list control on a particular device.

• Interaction design is often more abstract than other aspects of the design. It may be less influenced by the nature of the target device. Often, the same or similar interaction can be implemented on a wide range of devices, if a sufficiently abstract view is taken. The W3C XForms specification is an example of such an abstraction.

20

Navigation Designers

• Navigation designers specify the paths that visitors may take through a site. Navigation is usually implemented by the use of links. The way in which such links are represented is defined by the stylistic design. For example, links might be presented as a list of text items, or as a complex, dynamic cascading menu. In either case, it is the set of links, rather than its presentation, that defines the available navigation from the current page.

21

Interaction between roles

22

Applications and content

• Websites can be considered as applications that consists of– Content– Presentation– Navigation– Interaction– Business logic

23

The role of XML/XSLT

• Content and navigation can often be described by custom XML-based formats.

• Presentation can be described in other XML-based formats (XHTML, WML, SMIL, SVG…)

• Interaction can often be described with XForms• (XML+Xforms) + XSLT ==> Presentation +

Interaction• New devices can be added by providing new

XSLT templatses• This separates content, navigation,

presentation and interaction.

24

Device Diversity

• Devices that can, or soon will be able to access web content, are diverse– Workstations– Personal Digital Assistants (PDAs)– Mobile Phones– Voice Systems– Printers– Interactive TV

25

Device Output Characteristics

• Devices have different output characteristics– Screen size and resolution– Colour capacity– Video capacity– Audio capacity

26

Device Bandwidth Characteristics

• Devices have different bandwidth characteristics– 2400bit/S - 1Gbit/S– Declared bandwidth– Actual bandwidth

27

Device Input Characteristics

• Devices have different input characteristics– Keyboards– Handwriting recognition– Voice recognition– Multitap/T9

• Some input devices are unsuitable for some applications, i.e. multitap for writing a thesis.

28

Other Device Characteristics

• User preferences• Location• Cost of access

29

What does this lead to

• What you should do:– Aim for a structure where you can provide

functional user experiences on all devices.– Abstract device knowledge– Consider providing harmonized user

experiences for particular devices or classes of devices.

• This leads to– Ease of maintenance– Scalability to new devices

30

Harmonized User Experience

• A Harmonized User Experience is a functional user experience that is sufficiently harmonized with the delivery context to meet the quality criteria of the author.

31

Example: Font substitution

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

32

Example: Forms

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

33

Example: Navigation

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

34

Mapping Navigation structure to devices

<navigation title="Dokumentstrukturer"

base="/dokumentstrukturer06/"> <menuitem href=""> <text>Startsida</text> </menuitem> … <menuitem href="lab/"> <text>Examination</text> <menuitem href="lab/lab1/"> <text>Lab 1: DTD</text> </menuitem> <menuitem href="lab/lab2/"> <text>Lab 2: XSLT</text> </menuitem>

… </menuitem>

… </navigation>

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

35

XSLT for adapting content to different devices

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.QuickTime™ and a

TIFF (LZW) decompressorare needed to see this picture.

index-fo.xsl

index-wml.xsl

index-html.xsl

index-fo.xsl

36

References/Links

• W3C activities on Device Independence: http://www.w3.org/2001/di/

• http://www.w3.org/TR/2003/NOTE-acdi-20030901/

• http://www.w3.org/MarkUp/Forms/• http://www.cameronmoll.com/archives/

000415.html (about mobile web design)