This page contains all the material (slides, examples, videos and projects) of the Aalto HTML5 Web App course that took place during the Spring 2012.

Lectures

Here you find the schedule of the lectures and labs. The links to the material of the course will be available on this page.

Monday 12th March 2012
14:15-15:45

This lecture gives an introduction to the mobile application ecosystem and looks at the pros and cons of using Web technologies for building mobile applications, especially focusing on HTML5.

We also introduce some basic elements of web development that will be necessary throughout the course (i.e. Sinatra, Javascript, Ruby, etc).

Documents: lecture1.pdf

Examples:
16:00-17:45

We'll introduce the course assignment: goals, expectations, evaluation method, schedule and way of working. We'll also form the teams and check your development environment.

Documents: lab1.pdf, webapps_development_tools.pdf, Group work instructions.pptx

Monday 19th March 2012
14:15-15:45

This lecture introduces the basics for creating a mobile web application with HTML5 and jQuery. We create a simple blog application that demonstrates the following elements:

  • viewport meta tag
  • Forms, new HTML5 form semantics and validation
  • Styling
  • Contenteditable attribute
  • Single page and multipage with jQuery Mobile
  • Sinatra server with templates
  • Local storage
  • Offline usage
  • Detecting connectivity changes

Documents: lecture2.pdf

Examples:
Lab 2: jQuery Mobile
Guest Lecture: Mikael Blomberg, SC5
16:00-17:45

This lab is focused on learning jQuery and jQuery Mobile through examples and hands-on exercises.

Documents: jQuery Mobile - Mikael Blomberg.pdf

Examples: jQuery Examples




Monday 26th March 2012
14:15-15:45

In this lecture we'll explore the advantages of using a templating method for creating the views of the application. We also explore the benefits of Backbone.js for simplifying the design of the web client. We cover the following topics:

  • Introduction to client-side templating
  • Example with Handlerbar.js
  • MVC architecture for webapps
  • Introduction to Backbone.js
  • Example of MVC web app

Documents: lecture3.pdf

Examples:
Guest Lecture: Mikael Blomberg, SC5
16:00-17:45

This lab will be focused on mastering the details of Backbone.js through several examples.

Monday 2nd April 2012
14:15-15:45

In this lecture we explore the APIs for drawing on the canvas, for reading from the file system, for using the new XMLHttpRequest Level 2, for accessing the camera, accelerometers and geolocation and, for playing audio/video files. We cover the following topics:

  • Canvas API
  • Bytes, Blobs and File API
  • HTML Media Capture API
  • Motion Sensor API
  • GeoLocation API
  • Audio & Video

Documents: lecture4.pdf

Examples:
16:00-17:45

Hands-on exercises on device access API

Monday 16th April 2012
14:15-15:45

In this lecture we'll give an overview of the new elements of CSS3 (like media queries, transitions, animations) and how to support touch interactions. We will cover the following topics:

  • Media Queries
  • Position: fixed
  • Overflow: scroll
  • Touch Interaction
  • CSS3 Selectors
  • CSS3 Transformations
  • CSS3 Transitions
  • CSS3 Animations

Documents: lecture5.pdf

Examples:

Lab 5: Ruby on Rails 3
Guest Lecture: Lauri Jutila and Matias Korhonen, Kisko Labs
16:00-17:45

This lecture will introduce the basics of Ruby on Rails 3.

Documents: Ruby on Rails - KiskoLabs.pdf

The example that was used in the lab is available on github at: Aalto on Rails

Monday 23rd April 2012
14:15-15:45

In this lecture we focus on the real-time communication API that is now supported in HTML5:

  • Push Technology
  • Web Sockets
  • Server-Sent Events
  • Web Workers

Documents: lecture6.pdf

Examples:
Lab 6: Designing REST interfaces
Guest Lecture: Lauri Jutila and Matias Korhonen, Kisko Labs
16:00-17:45

This lecture will dive into the principles of REST design and how to create RESTful interfaces with Ruby on Rails

Documents: REST and stuff like that.pdf

Monday 7th May 2012
Lecture 7: Developing native web apps with HTML5
Guest Lecture: Antti Vuorela, Futurice
14:15-15:45

In this lecture we introduce the technologies for creating native applications by embedding an HTML5 web view. In particular we'll focus on PhoneGap.

Lab 7: PhoneGap
Guest Lecture: Antti Vuorela, Futurice
16:00-17:45

Hands-on exercises on PhoneGap

Demos of the course assignments

Here is the list of teams, their assignments and a link to the live demos.

Description of the course

HTML5 introduces many new features, technologies and APIs that enable web developers to create apps and websites that are fast, responsive, stunningly beautiful and resemble the experience of desktop applications. Now supporting multimedia content (audio, video and graphics), data communication methods (like websockets), offline usage, local storage, access to local resources (like camera), the Web is becoming a popular platform for building mobile web applications that can run on phones, tablets, smartphones and behave like native applications.

In this course you will learn how to build mobile web applications with HTML5. We will cover the new concepts that HTML5 is introducing, several frameworks for facilitating the development (e.g. jQuery Mobile, Sencha and jQTouch, Backbone.js, Mustache, Handlebar.js) and key techniques for building web backends (e.g Sinatra, Ruby on Rails, Haml, CoffeScript). We will focus on understanding the overall end-to-end architecture and the benefits of each technology through many examples and hands-on exercises.

The course includes theory lectures, seminars, lab exercises and one group assignment.

Prerequisites

The students are expected to have prior programming experience in any object-oriented language and familiarity with HTML, CSS and JavaScript. Experience with MVC frameworks (like Ruby on Rails and Django) and familiarity with the Ruby programming languages are a plus.

Registration

The course is an experiment in community outreach and co-operation. The course will be open not only to Aalto Students but also to people working in the IT industry and startups. (everyone can particpate!). The course is free to non-Aalto participants, but everybody is expected to follow the full course including all home work. Aalto students earn 4 credits from the course.

The registration for the Spring 2012 edition of the course is closed. To attend future editions follow us on Twitter or check this page again in the future.

Expectations

Students are expected to attend 80% of the lectures and submit the course assignments. Assignments will be done in teams of 2-3 persons.

Grades

The final grade is based on the performance on the course’s exercises. Exercises are evaluated based on their design, functionality, correctness and style.

Schedule

All the lectures are hold every Monday at 14:15-18:00 from 12th March 2012 till 7th May 2012 excluding 9th April and 30th April. The venue is the Backstage auditorium at the Aalto Venture Garage (Address: Betonimiehenkuja 3, Otaniemi, Espoo. The Garage is located behind the Design Factory in a big industry hall. The entrance is a big door at the end of the parking lot.)

The detailed schedule of the lectures is available here .

Staff

Claudio Riva , Nokia, Main Instructor

Antti Vuorela , Futurice, Course Assistant

Mikael Blomberg , SC5, jQuery and Backbone Instructor

Matias Korhonen , Kisko Labs, Ruby On Rails Instructor

Lauri Jutila , Kisko Labs, Ruby on Rails Instructor

Kimmo Karhu , Aalto University, Assignment Coordinator

Häkan Mitts , Aalto University, Program Coordinator

Assignment

During the course the students are required to complete an assignment under the supervision of the instructors. The assignment aims at involving the students in a real world and hands-on experience on what it’s like to create a new web application for a new or existing product, for a new company or a new startup or just for turning an idea into reality. To make it as real as possible to the real world, the assignment will be conducted in cooperation with the Aalto Venture Garage. The assignment is team based and will be conducted with the following schedule:

  • Kick-off (12 March 2012) : after a brief introduction on the goals and expectations of the assignment, we will run a group forming exercise where the participants will have a possibility to discuss new or ongoing activities related to mobile web apps. The expectation is that at the end of the exercise, the teams will have identified some interesting topics for assignments.
  • Proposal submission (19 March 2012) : one week after the kick-off the teams must submit a proposal for the assignment. The proposal must state very clearly what mobile application they indend to build, what technologies will be used and what will be the contribution of the each individual (mixing with people outside of the course is possible but each individual contribution must be stated upfront). The proposals will be reviewed by the review board.
  • Mid-term review (23 April 2012) : the teams will be requested to make a mid-term review of their work in order to collect feedback on the development of their assignment.
  • Final review (15 and 22 May 2012) : each team will present the outcome of their assignments

The assignment will be evaluated by the course’s board (consisting of least 5 memebers) based on the quality of the final outcome and weekly progress. Grading will based on team results and on the individual participation and contribution.

All teams are requested to create a git repository at GitHub where to submit the web application and related documenation. It’s important that each team setups a blog/journal where the progress can be monitored (e.g. on the GitHub repository page or through the issue management tool).

About

The present site contains the material (slides, exercises and assignments) for the web applications development course that will be given at the Aalto University during the Spring 2012 ( T-106.5820 ). All communication about the course will happen through this website, the Noppa page and by following us on Twitter

All material (slides and examples) are under the Creative Commons license . You are free to distribute unedited versions of the material for non-commercial purposes. You are also free to modify this material as long as you distribute the resulting work under the same license.

Creative Commons License

Below there is the list of the sponsors that are supporting and contributing to this course.