Last modification on Wednesday, 03-Feb-2010 21:51:35 CET
Description: This course looks at the quickly developing landscape of mobile applications. It focuses on Web-based mobile applications, and thus covers issues of Web service design (RESTful service design), mobile platforms (iPhone, Android, Symbian/S60, WebOS, Windows Mobile, BlackBerry OS, BREW, JavaME/JavaFX, Flash Light), and the specific constraints and requirements of user interface design for limited devices. The course combines a conceptual overview, design issues, and practical development issues.
| Date | Subject | Slides | Required Reading | Additional Resources | Assignments |
|---|---|---|---|---|---|
| 2010-01-20 |
Overview and Introduction — This introductory lecture covers organizational issues of the Mobile Application Design and Developmentcourse. We will discuss the course topics and the syllabus, the assignments and what we expect in terms of prerequisites and how assignments will be supported, and some administrative issues. |
Introduction | bSpace Site [https://bspace.berkeley.edu/portal/site/1a1c3c3a-b351-41d3-95e7-5f6e48b88fdd] | ||
| 2010-01-22 | Mobile Applications Landscape — Mobile Applications can be defined and approached in a variety of ways. In this lecture, we look at the landscape of mobile applications and the various facets that are relevant for them. This is mostly an overview of the landscape of mobile applications and the factors that are important for that landscape. Specifically, this lecture discusses settings, users, devices, content, and transport issues and how these factor into the design and development of mobile applications. | Landscape | Mobile Ecosystem [http://proquest.safaribooksonline.com/9780596806231/the_mobile_ecosystem] | Wikipedia: Mobile Device [http://en.wikipedia.org/wiki/Mobile_device] · Wikipedia: Mobile Web [http://en.wikipedia.org/wiki/Mobile_Web] · Wikipedia: Mobile Browser [http://en.wikipedia.org/wiki/Mobile_browser] | |
| 2010-01-25 |
Mobile Applications History — The design and development of mobile applications has already gone through a number of stages of development, and the current landscape very likely will change substantially into yet unknown directions. Looking back at the short but surprisingly varied History of Mobile Applicationsnot only is a good exercise in better understanding different approaches, but it is also interesting to look at why certain approaches may have failed or succeeded. Often, the deciding factors are not just technical, but economical and social issues play an important role as well. |
History | Mobile History [http://proquest.safaribooksonline.com/9780596806231/a_brief_history_of_mobile] | Wikipedia: PDA [http://en.wikipedia.org/wiki/Personal_Digital_Assistant] · Wikipedia: Psion [http://en.wikipedia.org/wiki/Psion] · Wikipedia: Palm [http://en.wikipedia.org/wiki/Palm_%28PDA%29] | A1: Setup [https://bspace.berkeley.edu/portal/site/1a1c3c3a-b351-41d3-95e7-5f6e48b88fdd/page/d488f9e7-81a3-4053-a9c8-41b5aad88eef] (assigned: 1/25; due: 2/1) |
| 2010-01-27 |
Mobile Web Mechanics — In this lecture, we look at the mechanics that are required to make Web-based mobile applications possible. This starts with basic networking capabilities, the question how individual devices establish Internet connectivity, and how the devices then communicate with the next hopin the communications chain. Based on this connectivity, we look at what it takes to establish a Web connection, how clients and servers are connected (how the data is actually routed), and how this can be influenced by intermediaries. Finally, we look in more detail at the endpoints of such a conversation, the browser and the server. How does a browser on a mobile device access the network, and how does a server receiving a request route it to the appropriate logic for processing it? We will discuss many of these in more detail later, but this lecture presents the big picture of how they all work together to make the mobile Web work. |
Mechanics | |||
| 2010-01-29 | Browser and Server Setup — As a starting point for the assignments in this course, we are setting up a server and files on the server for accessing them with (mobile) clients. This lecture looks at some of the practical issues such as how file access works through a file system and through server software, how server software can even provide multiple access paths (virtual hosts), and how working with Web-oriented content can be made more convenient by setting up a local environment (a local Web server). | Setup | Filezilla [http://filezilla-project.org/] · XAMPP [http://www.apachefriends.org/en/xampp.html] | ||
| 2010-02-01 | HTML, CSS, and DOM — The Hypertext Markup Language (HTML) is the most important content type on the Web. Modern browsers are expected to support HTML, CSS for styling the content of a HTML page, and scripting so that server-supplied scripting code can run in the browser, update the HTML and/or CSS, and interact with the user or the browser. This lecture presents an overview of how the building blocks of HTML, CSS, DOM, and scripting fit together to provide Web applications with a standardized and robust platform. | HTML/CSS/DOM | CSS Spec [http://www.w3.org/TR/CSS21/] · CSS Properties [http://www.w3.org/TR/CSS21/propidx.html] · CSS Tutorial [http://www.w3schools.com/css] · CSS Validator [http://jigsaw.w3.org/css-validator/] | A21: Web App (flickr) [https://bspace.berkeley.edu/portal/site/1a1c3c3a-b351-41d3-95e7-5f6e48b88fdd/page/d488f9e7-81a3-4053-a9c8-41b5aad88eef] (assigned: 2/1; due: 2/9) | |
| 2010-02-03 | Nick Doty : Scripting with JavaScript — This lecture introduces JavaScript as a programming language and discusses some of the most important features of the language. We also look at how to use JavaScript inside of a browser interactively with a debugging tool called Firebug, and start looking at some of the ways in which jQuery makes Web development with JavaScript less programming-heavy, more reliable, and more declarative. | Scripting | Firebug [http://getfirebug.com/] | ||
| 2010-02-05 | Ryan Greenberg : Introduction to jQuery — In this second lecture on scripting, we look in more detail at the jQuery framework. We focus on how selectors allow to select nodes in the DOM tree, how these can be manipulated using jQuery methods, and how they can be used as starting point for traversal of the DOM tree. We also look at some of the mechanics of event handlers and some of the finer points of when and how event handlers and events should be managed in jQuery. | jQuery | jQuery [http://jquery.com/] | ||
| 2010-02-08 | Structured Data: XML and JSON — Many mobile applications are based on communications with a service. In most cases, these communications are based on structured data, with the client receiving and/or sending structured data to a service. The two most popular data formats for exchanging structured data in use today are the Extensible Markup Language (XML) and the JavaScript Object Notation (JSON). This lecture explains and compares these two formats, and is the foundation for the following lectures about Content Syndication and Ajax. | Structured Data | Wikipedia: DHTML [http://en.wikipedia.org/wiki/Dynamic_HTML] · Wikipedia: Ajax [http://en.wikipedia.org/wiki/Ajax_%28programming%29] · XML Spec [http://www.w3.org/TR/REC-xml/] · Structuring Content with XML [http://dret.net/netdret/publications#wil06l] · JSON [http://www.json.org/] · JSON vs. XML [http://blog.technologyofcontent.com/2010/01/json-vs-xml/] | A22: Web App (twitter) [https://bspace.berkeley.edu/portal/site/1a1c3c3a-b351-41d3-95e7-5f6e48b88fdd/page/d488f9e7-81a3-4053-a9c8-41b5aad88eef] (assigned: 2/8; due: 2/16) | |
| 2010-02-10 | Content Syndication — For many information sources on the Web, it is useful to have some standardized way of subscribing to information updates. Syndication formats such as RSS and Atom can be used by these information sources to publish a feed of updated information items. Extensions allow feeds to carry additional data, for example in podcasts. While RSS and Atom are read-only formats, the Atom Publishing Protocol (AtomPub) build on top of Atom and provides a protocol for submitting new items to feeds. | Syndication | Atom [http://tools.ietf.org/html/rfc4287] · AtomPub [http://tools.ietf.org/html/rfc5023] · Validator [http://validator.w3.org/feed/] · Identifying Atom [http://www.xml.com/pub/a/2004/08/18/pilgrim.html] | ||
| 2010-02-12 | Web Foundations (URI & HTTP) — The Web's architecture has very simple principles revolving around the ideas of placing a heavy emphasis on a consistent and global identification mechanism for resources, a standardized way of how resource representations can be retrieved, and a standardized way of how resource representations should be usable by using standardized media types. Based on the Internet, the Web's transport protocol transmits representations of resources identified by a Uniform Resource Identifier (URI) between Web servers and clients. The most important protocols for data transfer on the Web is the Hypertext Transfer Protocol (HTTP). | Foundations | Why Mobile? [http://proquest.safaribooksonline.com/9780596806231/why_mobile] | Cool URIs [http://www.w3.org/Provider/Style/URI] · Live HTTP Headers [https://addons.mozilla.org/en-US/firefox/addon/3829] · URI Spec [http://tools.ietf.org/html/rfc3986] · HTTP Spec [http://tools.ietf.org/html/rfc2616] | |
| 2010-02-17 |
Scripting with Server Access — Scripting is used on the majority of today's modern Web sites. Scripting can be used to improve the usability and accessibility of a Web site (for example for validating form data on the client side), it can vastly improve the user experience with new interface design (the smooth scrolling of Google Maps vs. older click to scrollmap services), or it can be used to implement behavior that would be impossible without scripting (for example the online applications of Google Docs). Asynchronous JavaScript and XML (Ajax) takes Dynamic HTML (DHTML) to the next level by allowing server access from within scripting code. This is accomplished by using a standardized API for client/server communications, the XMLHttpRequest object. This objects allows using HTTP connections from within scripting code, and thereby allows scripting code to dynamically reload data from a server in response to user interactions. |
Ajax | Animation with jQTouch [http://proquest.safaribooksonline.com/9780596806231/the_mobile_ecosystem] | DHTML [http://www.yourhtmlsource.com/javascript/dhtmlexplained.html] · Wikipedia [http://en.wikipedia.org/wiki/Dynamic_HTML] · XMLHttpRequest Spec [http://www.w3.org/TR/XMLHttpRequest/] |
A3: Touch App [https://bspace.berkeley.edu/portal/site/1a1c3c3a-b351-41d3-95e7-5f6e48b88fdd/page/d488f9e7-81a3-4053-a9c8-41b5aad88eef] (assigned: 2/17; due: 3/1) |
| 2010-02-19 | Cross Site Scripting (XSS) — Many mobile applications use data from a variety of sources, the most popular example being map-based applications with often combine map data from one site with placemarks and other map overlays from a different source. Depending on the implementation, this design might be limited by the Same-Origin Policy implemented by clients, which originated in an attempt to reduce the risks of Cross-Site Scripting (XSS). In this practical lecture, we look at some of the workarounds that are possible, specifically at JSON with Padding (JSONP), which is a client-based approach, and at reverse proxying, which is a server-based approach. | XSS | iPhone Web App HIG [http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG] | JSONP & jQuery [http://www.ibm.com/developerworks/library/wa-aj-jsonp1/] · ProxyPass [http://httpd.apache.org/docs/2.2/mod/mod_proxy.html#proxypass] | |
| 2010-02-22 |
Jeffrey Nichols :
Designing Mobile User Interfaces — In this lecture, I'll describe both the general process for designing user interfaces and variety of guidelines for designing mobile user interfaces. The mobile guidelines are based on a variety of studies conducted at IBM, my own personal experience, and Barbara Ballard's book Designing the Mobile User Experience. |
UI Design | Mobile Design [http://proquest.safaribooksonline.com/9780596806231/mobile_web_development] | Mobility is Different [https://courses.ischool.berkeley.edu/i213/s10/readings/ballard-ch1-introduction.pdf] · Research and Design Process [https://courses.ischool.berkeley.edu/i213/s10/readings/ballard-ch9-research-and-design-process.pdf] | |
| 2010-02-24 | Jeffrey Nichols : Evaluating and Iterating on Mobile User Interfaces — In this lecture, I'll describe a variety of methods for evaluating mobile user interfaces. These vary from traditional lab-based user interface evaluation methods, including heuristic analysis and think-aloud studies, to field-based methods that are better suited to mobile interfaces, such as diary studies, the experience sampling method, and logging studies. | UI Evaluation | Mobile Web vs. Native [http://proquest.safaribooksonline.com/9780596806231/mobile_web_apps_versus_native_applicat] | Using the Experience Sampling Method to Evaluate Ubicomp Applications [doi.ieeecomputersociety.org/10.110910.1109/MPRV.2003.1203750] | |
| 2010-02-26 | Mobile Web vs. Web — Web-based mobile applications inherit important properties and constraints both because of their dependency on the Web, and because of their focus on mobile scenarios. In the previous two lectures, we have looked at the differences caused by typical mobile device usage, which often translate into different designs, and might even make Web-based solutions less than optimal in some situations. From the technical perspective, an important question is how easy it is to design and build Web-based applications for mobile devices, and in this lecture we look at the most important component in that picture, the mobile browser. | Mobile Web | Types of Mobile Apps [http://proquest.safaribooksonline.com/9780596806231/types_of_mobile_applications] | Touch Web [http://blog.taptu.com/2010/02/03/touchfriendlywebreport/] · Acid3 Test [http://en.wikipedia.org/wiki/Acid3] · CSS3 Selectors Test [http://www.css3.info/selectors-test/] · Mobile Browser Test [http://www.w3.org/2005/MWI/Tests/blog/2010/02/09/wctmbv2] | |
| 2010-03-01 | Mobile Platforms — This lecture takes a closer view of the spectrum between native and Web-based mobile apps. Specifically, we look at the gap, how that gap might be closed by the activities referred to as HTML5, and what still remains as open issues even with HTML5. We also look at the hybrid approaches such as PhoneGap, and at the more desktop-inspired approaches of Flash Light and JavaFX. | Platforms | HTML5 APIs [http://dret.typepad.com/dretblog/html5-api-overview.html] · PhoneGap [http://www.infoq.com/presentations/PhoneGap-Mobile-Applications-with-HTML-CSS-JavaScript] | A4: Maps [https://bspace.berkeley.edu/portal/site/1a1c3c3a-b351-41d3-95e7-5f6e48b88fdd/page/d488f9e7-81a3-4053-a9c8-41b5aad88eef] (assigned: 3/1; due: 3/8) | |
| 2010-03-03 | Geolocation — Mobility is (one of) the defining characteristics of mobile devices, and many use cases and scenarios not only depend on mobility (the ability to move), but on location (the knowledge of where something moved to). Determining the location of a mobile device can be done in a variety of ways, and in this lecture we briefly look at various localization technologies (IP address, Wi-Fi, cell phone, GPS). We then look at the W3C Geolocation API, which is currently under development and allows scripting code to request the location of the device it is running on. Finally, we discuss some privacy issues around automated access to location information. | Geolocation | Geolocation API [http://www.w3.org/TR/geolocation-API/] · Geolocation Privacy [http://escholarship.org/uc/item/0rp834wf] · Geolocation Demo [http://npdoty.name/location/] | ||
| 2010-03-05 | Local Storage — Mobile applications face two main challenges that call for local data storage: they must be able to go offline so that they can work when there is no connectivity; they must be able to store data locally so that they can better optimize network traffic. In this lecture, we look some of the established mechanisms for local storage (Cookies) and traffic optimization (HTTP caching), and look at the HTML5 mechanisms that provide more extensive client-side support for local data storage: Web Storage and Web SQL Database. | Storage | Web Storage [http://www.w3.org/TR/webstorage/] · Web SQL Database [http://www.w3.org/TR/webdatabase/] · State [http://www.w3.org/2001/tag/doc/state.html] · Cookies Spec [http://tools.ietf.org/html/rfc2965] | ||
| 2010-03-08 | Server Side Technologies — Navigating the mobile landscape means that depending on the targeted mobile devices, it might be impossible to rely on sophisticated client-side support for Web technologies. In such a case, it is necessary to move the functionality to the server-side, so that mobile applications can be used by simpler clients as well. In this lecture, we look at the concepts that can be utilized on the server side, standalone web servers, general programming frameworks, and Content Management Systems (CMS). | Server Side | PHP [http://www.php.net/] · SimplePie [http://simplepie.org/] | A5: mobileOK [https://bspace.berkeley.edu/portal/site/1a1c3c3a-b351-41d3-95e7-5f6e48b88fdd/page/d488f9e7-81a3-4053-a9c8-41b5aad88eef] (assigned: 3/8; due: 3/19) | |
| 2010-03-10 | Representational State Transfer (REST) — Representational State Transfer (REST) is an architectural style for building distributed systems. The Web is an example for such a system. REST-style applications can be built using a wide variety of technologies. REST's main principles are those of resource-oriented states and functionalities, the idea of a unique way of identifying resources, and the idea of how operations on these resources are defined in terms of a single protocol for interacting with resources. REST-oriented system design leads to systems which are open, scalable, extensible, and easy to understand. | REST | What is REST? [http://www.eioba.com/a69755/how_i_explained_rest_to_my_wife] · REST Interfaces [http://bitworking.org/news/193/Do-we-need-WADL] | REST vs. SOAP [http://www.mulberrytech.com/Extreme/Proceedings/html/2002/Prescod01/EML2002Prescod01.html] · RESTwiki [http://rest.blueoxen.net/cgi-bin/wiki.pl] | |
| 2010-03-15 |
Offline-Capable Applications — Mobile settings should not rely on the client being online all the time. For Web-based applications, however, this is a challenge, because the traditional model of Web-based applications has no notion of offline mode. HTML5, however, introduces the ability to design and build offline-capable applications. One important part of that is local storage, the ability to persistently store data on the client. The other important part is the application cache, the ability of a Web-based application to list all the resources that are necessary for offline mode. Clients can then reliably store all these files locally for offline capabilities. |
Offline | Going Offline [http://building-iphone-apps.labs.oreilly.com/ch06.html] | Offline Applications [http://www.w3.org/TR/offline-webapps/] · HTML5 [http://www.w3.org/TR/html5/offline.html] | |
| 2010-03-17 | Camera Access — As a case study, we look at the (seemingly) simple task of how to add camera access to a mobile application. It turns out that this cannot be easily done in any Web-based application that is supposed to be working across a large range of devices. However, as an exercise of surveying the mobile ecosystem (and thus highlighting the difficulties of navigating this constantly changing landscape), in this lecture we look at the available options, and at the trade-offs involved with every of those options. | Camera | W3C DAP [http://www.w3.org/2009/dap/] | ||
| 2010-03-19 | Final Project Setup — Discussion about the scope and possible ideas for the final project. More details about the exact requirements and constraints for final projects will be made available at a later date. | Project Setup | SCVNGR [http://www.scvngr.com/] | ||
| 2010-03-29 | Final Project Proposal — The final project is supposed to cover a mobile application all the way from the use cases to implementation issues. In this lecture, we look at the expected format of the project proposal and the different issues that need to be addressed in the proposal. Most importantly, the proposal has to contain a section on application design as well as a section on application implementation. | Project Proposal | A6: Proposal [https://bspace.berkeley.edu/portal/site/1a1c3c3a-b351-41d3-95e7-5f6e48b88fdd/page/d488f9e7-81a3-4053-a9c8-41b5aad88eef] (assigned: 3/29; due: 4/5) | ||
| 2010-03-31 | Hardware/Platform Opinions — Based on the first experiences with the new devices, today we briefly review some impressions about that device and the platform it provides. This involves listing some observations about likes and dislikes regarding the device/platform in general, as well as some initial ideas how useful that platform will be for the mobile application of the final project. | Droid | |||
| 2010-04-02 | Final Project Design and Implementation — As an example of a final project, in this lecture we discuss the scenario of Observations of Daily Living (ODL) and how this information can be created, managed, and exchanged with mobile applications. While the back-end of the particular scenario is connected to a lot of highly complex systems and interfaces managing health-related information, the front-end and the user-centered management can be regarded as an application that should be more or less self-contained. | Project Example | |||
| 2010-04-05 | Server Configuration — In all scenarios using Web-based services (in Web-based UIs as well as in native applications accessing Web-based services), it is important to control the way in which the server is using HTTP. Popular examples are setting appropriate media types (making sure resources are handled correctly), setting appropriate expiration dates (making sure resources can be cached), handling redirections (if server setup changes should be managed gracefully) and configuring access control (for non-public resources). While all of this can be handled programmatically, using a Web server and server configuration allows many things to be handled in a declarative way. | Server | Apache Documentation [http://httpd.apache.org/docs/] · FastCGI [http://www.fastcgi.com/] | A7: Offline App [https://bspace.berkeley.edu/portal/site/1a1c3c3a-b351-41d3-95e7-5f6e48b88fdd/page/d488f9e7-81a3-4053-a9c8-41b5aad88eef] (assigned: 4/5; due: 4/12) | |
| 2010-04-07 | Access Control — Many resources for mobile applications need to be access controlled. Common reasons for this are security or privacy considerations. There are a number of common methods of how access control can be implemented, and in this lecture we look at some of the fundamental methods (HTTP Basic Authentication and Digest Access Authentication which need to be configured in the server) and the underlying methods for encoding and encrypting data. | Access | Apache Access Control [http://httpd.apache.org/docs/2.2/howto/auth.html] | ||
| 2010-04-09 | Security Mechanisms — For the HTTP authentication methods introduced in the last lecture, some fundamental cryptographic methods and protocols already have been taking for granted. In this lecture, we look a bit more systematically at the fundamental cryptographic methods (hash sums, one-way functions, symmetric encryption, asymmetric encryption) and how these are combined into cryptographic protocols. | Security | Browser Security [http://cacm.acm.org/magazines/2009/8/34494-browser-security/fulltext] | Security [http://en.wikipedia.org/wiki/Internet_security] · Privacy [http://en.wikipedia.org/wiki/Internet_privacy] | |
| 2010-04-12 | Authentication — Continuing the topic of security in mobile settings, we look at the two main applications in mobile security, which are securing communications with SSL/TLS in HTTP, and securing application code via digital signatures. Another important concept in access control and authentication is that of third-party access to access-controlled resources. We look at OAuth, which is one way of managing access in scenarios where applications want to gain access to resources that are hosted by other services and are access-controlled. | Authentication | Browser Options [http://support.mozilla.com/en-US/kb/Options+window] · HTTPS [http://en.wikipedia.org/wiki/Https] · HTTPS Spec [http://tools.ietf.org/html/rfc2818] · OAuth [http://oauth.net/] | ||
| 2010-04-14 | Constraints of Mobile Applications — Mobile application development faces the same performance challenges as application development in general, which means that performance considerations have to be an integral part of any real-world application design. However, on mobile devices, the challenges related to performance issues are quite a bit bigger, because the runtime platforms may be limited in their functionality, the platforms are inherently limited in their resources (mostly processing power and memory), and the devices often have connectivity that may be substantially slower than best-case scenarios, or may even be intermittent. | Constraints | |||
| 2010-04-16 | Speeding Up Mobile Applications — In order to speed up mobile applications, the optimization of network traffic often is one of the areas where significant improvements can be achieved. Since most network traffic uses HTTP, it is important to understand how HTTP caching works, and how servers can be configured to make caching work more effectively. However, since servers have no control over the clients and possible HTTP intermediaries, it is also important to understand the general architecture of HTTP caching, and how applications may or may not have good caching support on the platform they are built on. | Speed | Best Practices [http://developer.yahoo.com/performance/rules.html] · Caching Tutorial [http://www.mnot.net/cache_docs/] | ||
| 2010-04-19 | Content Adaptation — 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. | Content Adaptation | Adapting to Devices [http://proquest.safaribooksonline.com/9780596806231/adapting_to_devices] | .mobi [http://en.wikipedia.org/wiki/.mobi] · WURFL [http://wurfl.sourceforge.net/] |
|
| 2010-04-21 | Maria Ly : Designing and Developing Mobile Tools for the Active Market — Skimble's case study of how we developed our activity tracking and sharing tools for people on-the-go. Learn about the trials and tribulations we experienced from Skimble's conception stage all the way to launching our first application in the iTunes App Store. | Skimble | Skimble [http://www.skimble.com/] (iPhone [http://itunes.com/skimble]|mobile [http://www.skimble.com/switch_ui?ui=mobile]) · three20 [http://github.com/facebook/three20] · HTML5 Now [http://www.amazon.com/HTML5-Now-Step-Step-Tutorial/dp/0321719913] | ||
| 2010-04-23 | Kiyo Kubo : TBD — Kiyo Kubo is CEO of Spotlight Mobile [http://www.spotlightmobile.com/]. | Spotlight Mobile | Spotlight Mobile [http://www.spotlightmobile.com/] |
|
Please send comments to dret@berkeley.edu Last modification on Wednesday, 03-Feb-2010 21:51:35 CET |
|
|