Mobile Web Appplications Development with HTML5

Lab 1: The Challenge

Claudio Riva

Aalto University - Fall 2012

The Challenge

Overview of the assignment

Way of Working


Devevelopment Environment

Course Examples

You have been hired!
The Challenge

Build a Mobile Web App

  • Using some of the HTML5 API (e.g. canvas, local storage, websockets)
  • Using some of the mobile device features (e.g. GPS, camera, sensors)
  • Make it working on selected mobile devices
  • Using some client/server communication (e.g. REST, websockets)

Build it as a team

  • Work in sub-teams
  • One delivery
  • 2 Nov : Kick-off
  • 30 Nov : Mid-term review
  • 17 Dec : Demo day (final review)
Evaluation Criteria
  • Functionality
  • Usability of the application (e.g. touch interactions)
  • Application design and code style
  • Extra credits for a PhoneGap version or additional achievements
Meet the customer

World provider for digital weather services

Our customer already has a website

Our customer already has mobile app for several platforms


Now they want a cool mobile web app based on HTML5

The Android App
Your current skills

Who knows the basic of Web Development ?

Who is proficient with Javascript ?

Who is proficient with CSS ?

Who has server-side development skills ?

Who knows Ruby and Ruby on Rails ?

Way of Working

All code, documentation and discussions on GitHub at:

  • Keep everyone informed
  • Branch often, merge asap, commit often
  • Comment on the pull requests
  • Don't be shy in the discussions
Everyone has the right (and obligation) to:
  • Commit code to master
  • Create a pull request before merging a big feature
  • Create and assign issues
The sub-teams

Small sub-teams are responsible for implementing the features

2-3 members for each sub-team

Sub-teams are responsible for
  • Concepting and designing a new feature
  • Creating a new branch
  • Implementing the feature
  • Creating a pull request
  • Merging with master
Some special roles
Key contact points for
  • Overseeing a particular area of the development
  • Status reporting
  • Initiating discussions
  • Project manager
  • A UI designer
  • A client architect
  • A server architect
  • A quality manager
The Foreca API
Homework 1
  1. Create a Github account
  2. Send the account to me:
  3. Clone:
  4. Start coding!
Homework 2
  1. Study the Foreca API
  2. Try to concept the Foreca Mobile Web App
    • Content
      • How to structure it ?
      • What's essential and what's not ?
      • How to present it on a small device and a tablet ?
    • Interaction
      • How will the user interact with the content ? For doing what ?
      • What about the navigation ?
      • How will it differ between a handheld device, tablet and PC ?
    • Mobility
      • What mobile capabilities can improve the experience ?
      • Geolocation ?
      • Sensors ?

Development Tools

Browsers & Emulators

HTML/CSS/JS/Ruby Editor

Git Client


Browsers on PC

With debugging support (important)

Webkit-based browsers are recommended
  • Same engine used in most mobile devices
  • Good development tools
  • Google Chrome or Apple Safari
Emulators and Remote Debugging
Code Editor

Any editor with support for HTML/CSS/JS

Aptana Studio (Win, Mac, Linux)

TextMate / TextWranger (Mac)

Notepad++ (Windows)

Configuring Git for GitHub

Ruby version 1.8.7 or later is required for course examples that have a server component

Bundler is also required

Check the instructions at the course examples git