Content Adaptation

Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)

Erik Wilde, UC Berkeley School of Information
2010-04-19

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License [http://creativecommons.org/licenses/by/3.0/]

Contents Erik Wilde: Content Adaptation

Contents

Erik Wilde: Content Adaptation

(2) Abstract

Mobile applications need to address the diversity of clients, and can do so in a variety of ways. In this lecture, we take a brief look at how to implement client-side adaptation, which uses client-side mechanisms (HTML and scripting) to adapt to the capabilities of the client. We also look at server-side mechanisms such as HTTP content negotiation, and at various ways in which mobile-specific content can be published on the web.



Compressing Resources

Outline (Compressing Resources)

  1. Compressing Resources [4]
  2. Client-Side Approaches [2]
  3. Server-Side Approaches [6]
    1. HTTP Content Negotiation [1]
    2. Multiple URI Spaces [4]
  4. Final Project Planning [1]
Compressing Resources Erik Wilde: Content Adaptation

(4) Displaying Request Headers

cylog-headers.png
host www.cylog.org
user-agent Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (.NET CLR 3.5.30729)
accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
accept-language en-us,en;q=0.7,de-de;q=0.3
accept-encoding gzip,deflate
accept-charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 115
connection keep-alive
referer http://www.google.com/search?q=http+header+display&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
content-length 0


Compressing Resources Erik Wilde: Content Adaptation

(5) Displaying Response Headers



Compressing Resources Erik Wilde: Content Adaptation

(6) HTTP Compression



Compressing Resources Erik Wilde: Content Adaptation

(7) Configuring HTTP Compression



Client-Side Approaches

Outline (Client-Side Approaches)

  1. Compressing Resources [4]
  2. Client-Side Approaches [2]
  3. Server-Side Approaches [6]
    1. HTTP Content Negotiation [1]
    2. Multiple URI Spaces [4]
  4. Final Project Planning [1]
Client-Side Approaches Erik Wilde: Content Adaptation

(9) Graceful Degradation



Client-Side Approaches Erik Wilde: Content Adaptation

(10) DIY Degradation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Flash or GIF</title>
  <script type="text/javascript" src="http://www.swiss.com/_layouts/swfobject.js" ></script>
 </head>
 <body>
  <script language="JavaScript" type="text/javascript">
  <!--
  var altWaitImg = '<img src="http://www.swiss.com/web/img/misc/ani_waiting.gif" alt="" />';
  if (deconcept.SWFObjectUtil.getPlayerVersion().major < 7)
   document.write(altWaitImg);
  else {
   var waitSo = new SWFObject('http://www.swiss.com/style%20library/images/misc/ani_waiting.swf', 'waiting', '71', '13', '7', '#fff');
   waitSo.addParam("menu", "false");
   var waitHtml = waitSo.getSWFHTML();
   if (navigator.plugins && navigator.mimeTypes && navigator.mimeTypes.length) 
   waitHtml += '<noembed>' + altWaitImg + '<'+'/noembed>'; 
   document.write(waitHtml); }
  // -->
  </script>
 <noscript>
  <img src="http://www.swiss.com/web/img/misc/ani_waiting.gif" alt="Please wait..." />
 </noscript>
 </body>
</html>


Server-Side Approaches

Outline (Server-Side Approaches)

  1. Compressing Resources [4]
  2. Client-Side Approaches [2]
  3. Server-Side Approaches [6]
    1. HTTP Content Negotiation [1]
    2. Multiple URI Spaces [4]
  4. Final Project Planning [1]
Server-Side Approaches Erik Wilde: Content Adaptation

(12) Serving Different Content



HTTP Content Negotiation

Outline (HTTP Content Negotiation)

  1. Compressing Resources [4]
  2. Client-Side Approaches [2]
  3. Server-Side Approaches [6]
    1. HTTP Content Negotiation [1]
    2. Multiple URI Spaces [4]
  4. Final Project Planning [1]
HTTP Content Negotiation Erik Wilde: Content Adaptation

(14) Inspecting Client Requests

  • Clients disclose their type in the User-Agent header field
    Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
    Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
  • Servers can send content based on HTTP or sniffing info


Multiple URI Spaces

Outline (Multiple URI Spaces)

  1. Compressing Resources [4]
  2. Client-Side Approaches [2]
  3. Server-Side Approaches [6]
    1. HTTP Content Negotiation [1]
    2. Multiple URI Spaces [4]
  4. Final Project Planning [1]
Multiple URI Spaces Erik Wilde: Content Adaptation

(16) Mobile Naming Variations

  • URIs can be used in a number of different ways
    • any Web-based publishing should have a strategy for using URIs
    • being consistent is almost as important as doing it right
  • For variations of URIs, various parts of the Web architecture can be used
    • DNS names for naming servers
    • various parts of the URI name
    • protocol mechanisms of HTTP or Cookies [Local Storage; Cookies (1)]
  • This problem is similar to multilingual pages [../web-fall09/i18n+l10n#i18n-uri]
    • handling both problems in a consistent way is important
    • organizational issues can be more important than architectural purity


Multiple URI Spaces Erik Wilde: Content Adaptation

(17) Subdomains for Mobile Pages

http://m.example.com/some/page
  • Defines DNS subdomains for mobile pages
  • Advantages
    • offers easy load-balancing to different servers (but code must kept in sync)
    • bookmarks identify the mobile variant
  • Disadvantages
    • no easy way to get from one variant to another in terms of URI navigation
    • scheme requires DNS updates and management


Multiple URI Spaces Erik Wilde: Content Adaptation

(18) .mobi for Mobile Pages

http://example.mobi/some/page
  • Use the mobi DNS TLD to identify the mobile page
  • Advantages
    • bookmarks identify the mobile variant
  • Disadvantages
    • requires registration of additional DNS entry (effort, costs, domain squatting)
    • managing two DNS spaces can become challenging
    • what if there is more than one mobile variant?


Multiple URI Spaces Erik Wilde: Content Adaptation

(19) URI Paths for Mobile Pages

http://example.com/mobile/some/page
  • Encodes mobile as the first path segment of the URI path
  • Advantages
    • bookmarks identify the mobile variant
  • Disadvantages
    • logically, the URI path does not represent the hierarchy of resources
    • no easy way to get from one variant to another in terms of URI navigation
    • hard to maintain if this is used as the actual layout of documents in directories


Final Project Planning

Outline (Final Project Planning)

  1. Compressing Resources [4]
  2. Client-Side Approaches [2]
  3. Server-Side Approaches [6]
    1. HTTP Content Negotiation [1]
    2. Multiple URI Spaces [4]
  4. Final Project Planning [1]
Final Project Planning Erik Wilde: Content Adaptation

(21) Project Development



2010-04-19 Mobile Application Design and Development [./]
Spring 2010 — INFO 152 (CCN 42504)