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.
Here you find the schedule of the lectures and labs. The links to the material of the course will be available on this page.
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.
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
- Contenteditable attribute
- Single page and multipage with jQuery Mobile
- Sinatra server with templates
- Local storage
- Offline usage
- Detecting connectivity changes
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
This lab will be focused on mastering the details of Backbone.js through several examples.
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
Hands-on exercises on device access API
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
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
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
In this lecture we introduce the technologies for creating native applications by embedding an HTML5 web view. In particular we'll focus on PhoneGap.
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.
- GPS Tracker (Team 1): Live demo
- Moco: Mobile Presentation Controller (Team 2): Live demo
- Hungry Bunch (Team 3): Live demo
- Mobile Bitmaps and Waves (Team 4): Live demo
- Feel Task (Team 5): Live demo
- Gaso (Team 6): Live demo
- Find a room (Team 7): Live demo
- Driver Services (Team 9): Live demo
- Open Ministry Mobile (Team 10): Live demo
- Tap the beer (Team 11): Live demo
- My Mundus Mobile (Team 12)
- Zouba (Team 14): Live demo
- Bar Router (Team 15)
- ReittiSuperDial (Team 17): Live demo
- Pin on Map (Team 24): Live demo
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.
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.
Students are expected to attend 80% of the lectures and submit the course assignments. Assignments will be done in teams of 2-3 persons.
The final grade is based on the performance on the course’s exercises. Exercises are evaluated based on their design, functionality, correctness and style.
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 .
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
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).
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.
Below there is the list of the sponsors that are supporting and contributing to this course.