Developing Device Independent Web Applications …  and how to use XML for that purpose
Today’s lecture <ul><li>Purpose </li></ul><ul><ul><li>Discuss problems related to publishing content on devices with diffe...
Today’s lecture DI (2) <ul><li>Background </li></ul><ul><li>Authoring roles </li></ul><ul><li>Applications and content </l...
Vision <ul><li>Make web content available to: </li></ul><ul><ul><li>Anyone (i.e. disabled) </li></ul></ul><ul><ul><li>Anyw...
The Author perspective <ul><li>Democratic/marketing perspective </li></ul><ul><ul><li>Public authorities and companies wan...
The User perspective <ul><li>Access </li></ul><ul><ul><li>Mobile networks and broadband connections at home provides for n...
U ser  R elated  C oncepts (URC) from W3C
URC: User Experience <ul><li>A user experience is a set of material rendered by a user agent which may be perceived by a u...
URC: Device <ul><li>A device is an apparatus through which a user can perceive and interact with ”the web”. </li></ul><ul>...
URC: Access Mechanism <ul><li>An  access mechanism  is a combination of hardware (including one or more devices and networ...
URC: Perceivable Unit <ul><li>A  perceivable unit  is a set of material which, when rendered by a user agent, may be perce...
URC: Web page <ul><li>A  web page  is a collection of information, consisting of one or more resources intended to be rend...
URC:Functional  User Experience <ul><li>A  functional user experience  is a set of one or more perceivable units that enab...
Device Independent Access <ul><li>This leads to our basic goal: </li></ul><ul><li>DIP-1: Device Independent Access For som...
Authoring Roles <ul><li>Authoring includes a variety of activities. </li></ul><ul><li>An activity is performed by one or s...
Authoring roles <ul><li>Interface designers </li></ul><ul><ul><li>Layout designers </li></ul></ul><ul><ul><li>Stylistic de...
Layout Designers <ul><li>Layout designers specify the physical placement of material on the output of the device. Typicall...
Stylistic Designers <ul><li>The stylistic design of a site is essentially its &quot;look and feel&quot;. It includes the s...
Interaction Designers <ul><li>Interaction designers specify the way that users interact with a site. In particular, intera...
Navigation Designers <ul><li>Navigation designers specify the paths that visitors may take through a site. Navigation is u...
Interaction between roles
Applications and content <ul><li>Websites can be considered as applications that consists of </li></ul><ul><ul><li>Content...
The role of XML/XSLT <ul><li>Content and navigation can often be described by custom XML-based formats. </li></ul><ul><li>...
Device Diversity <ul><li>Devices that can, or soon will be able to access web content, are diverse </li></ul><ul><ul><li>W...
Device Output  Characteristics <ul><li>Devices have different output characteristics </li></ul><ul><ul><li>Screen size and...
Device Bandwidth  Characteristics <ul><li>Devices have different bandwidth characteristics </li></ul><ul><ul><li>2400bit/S...
Device Input  Characteristics <ul><li>Devices have different input characteristics </li></ul><ul><ul><li>Keyboards </li></...
Other Device  Characteristics <ul><li>User preferences </li></ul><ul><li>Location </li></ul><ul><li>Cost of access </li></ul>
What does this lead to <ul><li>What you should do: </li></ul><ul><ul><li>Aim for a structure where you can provide functio...
Harmonized User Experience <ul><li>A  Harmonized User Experience  is a functional user experience that is sufficiently har...
Example: Font substitution
Example: Forms
Example: Navigation
Mapping Navigation structure to devices <ul><li><navigation  </li></ul><ul><li>title=&quot;Dokumentstrukturer&quot; base=&...
XSLT for adapting content to different devices index-fo.xsl index-wml.xsl index-html.xsl index-fo.xsl
References/Links <ul><li>W3C activities on Device Independence: http://www.w3.org/2001/di/ </li></ul><ul><li>http://www.w3...
Upcoming SlideShare
Loading in...5
×

Device Independence

1,220

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,220
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Device Independence

  1. 1. Developing Device Independent Web Applications … and how to use XML for that purpose
  2. 2. Today’s lecture <ul><li>Purpose </li></ul><ul><ul><li>Discuss problems related to publishing content on devices with different output capabilities (i.e. Cell phones, Web browsers, Set-top boxes, radios). </li></ul></ul><ul><li>Goals </li></ul><ul><ul><li>Make you familiar with the W3C guidelines for device independent authoring (on which this presentation is based). </li></ul></ul><ul><ul><li>Not intended to provide solutions, but rather point out important considerations. </li></ul></ul>
  3. 3. Today’s lecture DI (2) <ul><li>Background </li></ul><ul><li>Authoring roles </li></ul><ul><li>Applications and content </li></ul><ul><li>Devices and Access mechanisms </li></ul><ul><li>Personalization and Accessibility </li></ul><ul><li>Affordability </li></ul>
  4. 4. Vision <ul><li>Make web content available to: </li></ul><ul><ul><li>Anyone (i.e. disabled) </li></ul></ul><ul><ul><li>Anywhere (internationalization) </li></ul></ul><ul><ul><li>Anytime (cell phones, TV, browser…) </li></ul></ul><ul><ul><li>Anyhow (choice of visual, aural … output) </li></ul></ul>
  5. 5. The Author perspective <ul><li>Democratic/marketing perspective </li></ul><ul><ul><li>Public authorities and companies want their content to be available to everyone. </li></ul></ul><ul><li>New publishing devices </li></ul><ul><ul><li>Many devices with different capabilities exist. </li></ul></ul><ul><ul><li>Difficult to know which devices will be available in the future. </li></ul></ul><ul><ul><li>Making specific solutions for each device is expensive and maintenance difficulties arise. </li></ul></ul><ul><li>Protecting investments </li></ul><ul><ul><li>Making content device independent (DI) protects the investment of producing the content. </li></ul></ul>
  6. 6. The User perspective <ul><li>Access </li></ul><ul><ul><li>Mobile networks and broadband connections at home provides for new possibilities of media consumption. </li></ul></ul><ul><li>Devices </li></ul><ul><ul><li>When we buy new devices, we want to access all the content we usually access from computers. </li></ul></ul>
  7. 7. U ser R elated C oncepts (URC) from W3C
  8. 8. URC: User Experience <ul><li>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. </li></ul><ul><li>Example: Course web pages </li></ul>
  9. 9. URC: Device <ul><li>A device is an apparatus through which a user can perceive and interact with ”the web”. </li></ul><ul><li>Examples: a mobile phone, a computer, a web page. </li></ul>
  10. 10. URC: Access Mechanism <ul><li>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). </li></ul>
  11. 11. URC: Perceivable Unit <ul><li>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. </li></ul><ul><li>Examle: a form on a web page, an image, vector graphics, an html paragraph </li></ul>
  12. 12. URC: Web page <ul><li>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. </li></ul><ul><li>Example: One course web page. </li></ul>
  13. 13. URC:Functional User Experience <ul><li>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. </li></ul><ul><li>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…) </li></ul>
  14. 14. Device Independent Access <ul><li>This leads to our basic goal: </li></ul><ul><li>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. </li></ul>
  15. 15. Authoring Roles <ul><li>Authoring includes a variety of activities. </li></ul><ul><li>An activity is performed by one or several individuals taking on a specific role. </li></ul><ul><li>One individual can take on several roles. </li></ul><ul><li>Several individuals can take on one role. </li></ul>
  16. 16. Authoring roles <ul><li>Interface designers </li></ul><ul><ul><li>Layout designers </li></ul></ul><ul><ul><li>Stylistic designers </li></ul></ul><ul><ul><li>Interaction designers </li></ul></ul><ul><ul><li>Navigation designers </li></ul></ul><ul><li>Content creators </li></ul><ul><li>Business logic creators </li></ul>
  17. 17. Layout Designers <ul><li>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. </li></ul>
  18. 18. Stylistic Designers <ul><li>The stylistic design of a site is essentially its &quot;look and feel&quot;. 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. </li></ul>
  19. 19. Interaction Designers <ul><li>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. </li></ul><ul><li>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. </li></ul>
  20. 20. Navigation Designers <ul><li>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. </li></ul>
  21. 21. Interaction between roles
  22. 22. Applications and content <ul><li>Websites can be considered as applications that consists of </li></ul><ul><ul><li>Content </li></ul></ul><ul><ul><li>Presentation </li></ul></ul><ul><ul><li>Navigation </li></ul></ul><ul><ul><li>Interaction </li></ul></ul><ul><ul><li>Business logic </li></ul></ul>
  23. 23. The role of XML/XSLT <ul><li>Content and navigation can often be described by custom XML-based formats. </li></ul><ul><li>Presentation can be described in other XML-based formats (XHTML, WML, SMIL, SVG…) </li></ul><ul><li>Interaction can often be described with XForms </li></ul><ul><li>(XML+Xforms) + XSLT ==> Presentation + Interaction </li></ul><ul><li>New devices can be added by providing new XSLT templatses </li></ul><ul><li>This separates content, navigation, presentation and interaction. </li></ul>
  24. 24. Device Diversity <ul><li>Devices that can, or soon will be able to access web content, are diverse </li></ul><ul><ul><li>Workstations </li></ul></ul><ul><ul><li>Personal Digital Assistants (PDAs) </li></ul></ul><ul><ul><li>Mobile Phones </li></ul></ul><ul><ul><li>Voice Systems </li></ul></ul><ul><ul><li>Printers </li></ul></ul><ul><ul><li>Interactive TV </li></ul></ul>
  25. 25. Device Output Characteristics <ul><li>Devices have different output characteristics </li></ul><ul><ul><li>Screen size and resolution </li></ul></ul><ul><ul><li>Colour capacity </li></ul></ul><ul><ul><li>Video capacity </li></ul></ul><ul><ul><li>Audio capacity </li></ul></ul>
  26. 26. Device Bandwidth Characteristics <ul><li>Devices have different bandwidth characteristics </li></ul><ul><ul><li>2400bit/S - 1Gbit/S </li></ul></ul><ul><ul><li>Declared bandwidth </li></ul></ul><ul><ul><li>Actual bandwidth </li></ul></ul>
  27. 27. Device Input Characteristics <ul><li>Devices have different input characteristics </li></ul><ul><ul><li>Keyboards </li></ul></ul><ul><ul><li>Handwriting recognition </li></ul></ul><ul><ul><li>Voice recognition </li></ul></ul><ul><ul><li>Multitap/T9 </li></ul></ul><ul><li>Some input devices are unsuitable for some applications, i.e. multitap for writing a thesis. </li></ul>
  28. 28. Other Device Characteristics <ul><li>User preferences </li></ul><ul><li>Location </li></ul><ul><li>Cost of access </li></ul>
  29. 29. What does this lead to <ul><li>What you should do: </li></ul><ul><ul><li>Aim for a structure where you can provide functional user experiences on all devices. </li></ul></ul><ul><ul><li>Abstract device knowledge </li></ul></ul><ul><ul><li>Consider providing harmonized user experiences for particular devices or classes of devices. </li></ul></ul><ul><li>This leads to </li></ul><ul><ul><li>Ease of maintenance </li></ul></ul><ul><ul><li>Scalability to new devices </li></ul></ul>
  30. 30. Harmonized User Experience <ul><li>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. </li></ul>
  31. 31. Example: Font substitution
  32. 32. Example: Forms
  33. 33. Example: Navigation
  34. 34. Mapping Navigation structure to devices <ul><li><navigation </li></ul><ul><li>title=&quot;Dokumentstrukturer&quot; base=&quot;/dokumentstrukturer06/&quot;> </li></ul><ul><li><menuitem href=&quot;&quot;> </li></ul><ul><li><text>Startsida</text> </li></ul><ul><li></menuitem> </li></ul><ul><li>… </li></ul><ul><li><menuitem href=&quot;lab/&quot;> </li></ul><ul><li><text>Examination</text> </li></ul><ul><li><menuitem href=&quot;lab/lab1/&quot;> </li></ul><ul><li><text>Lab 1: DTD</text> </li></ul><ul><li></menuitem> </li></ul><ul><li><menuitem href=&quot;lab/lab2/&quot;> </li></ul><ul><li><text>Lab 2: XSLT</text> </li></ul><ul><li></menuitem> </li></ul><ul><li> … </li></ul><ul><li></menuitem> </li></ul><ul><li> … </li></ul><ul><li></navigation> </li></ul>
  35. 35. XSLT for adapting content to different devices index-fo.xsl index-wml.xsl index-html.xsl index-fo.xsl
  36. 36. References/Links <ul><li>W3C activities on Device Independence: http://www.w3.org/2001/di/ </li></ul><ul><li>http://www.w3.org/TR/2003/NOTE-acdi-20030901/ </li></ul><ul><li>http://www.w3.org/MarkUp/Forms/ </li></ul><ul><li>http://www.cameronmoll.com/archives/000415.html (about mobile web design) </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×