In addition to the GPS, a mobile device generally have other various sensors like the camera, a compass and an accelerometer. Provided a suitable plugin exists, apps built using Cordova can leverage these sensors. For example, using Cordova Camera plugin, it is possible to add picture taking and picture browsing capabilities to an app.

The work to do is:

• Enhance the app to allow users to take a photo.
• Display the photo just taken in the mobile app.
• Save the photo to the photo album after capture.
• Retrieve a photo from existing photo library.

Mobile devices generally have various sensors like the camera, a GPS, a compass and an accelerometer. It is instructive to see how one can use the standard HTML5 API to, for example, know where the device is located. This then opens all sorts of possibilities like for example, displaying the songs which are the most popular where the user is.

The work to do is:

• Obtain the current coordinates using the HTML5 API. In Cordova, it is important to add the Geolocation plugin to the app.
• Use the Google Maps API to do reverse geocoding (i.e. determine country name given location). It is important to get a Google API key before attempting to use the Google APIs. If you are using Google Chrome, you may find the device sensors emulation feature useful.
• Display the artists and songs of the country we are located (if possible)
• Add a Google Map to the application to show where the user is.

jQuery Mobile has a number of elements like buttons and icons to make the user interface more usable. jQuery Mobile also provides a number of built-in themes as well as allow the developer to customise the CSS attributes of any element being shown.

The work to do is:

• Add a theme to the initial page (including the header and the footer)
• Use custom styles using normal CSS
• Create and use a custom theme made with ThemeRoller
• Fix the position of the header (or the footer)
• Add icons to buttons
• Group buttons

jQuery Mobile is a new Javascript-based web framework for smartphones and tablets. It is based on HTML5 and builds upon jQuery and jQuery UI.

The work to do is to update the website designed in the previous topic to use jQuery Mobile concepts and components:

• Add jQuery Mobile CSS and Javascript to an existing web application
• Change the web page to conform to the page anatomy of jQuery Mobile
• Add a simple pop-up dialog
• Transform a single-page document into a multi-page document
• Add different transitions between pages

The objective is to build a web application which renders properly on the limited screens of mobile devices.

HTML5 provides an API to store data locally in the browser (as opposed as on the server). This is called Local or Web Storage and all current browsers support it.

With Local Storage, it is possible to make web applications more responsive and impose less strain on servers and this is valuable when the number of concurrent users increases beyond a certain limit.

The work to do is:

• Use Local Storage to remember the name of the last country entered by the user.
• Track changes to Local Storage using the storage event.
• Use Local Storage to memorise the songs from a given artist in case the user wants to display details about that artist again. This minimises the number of requests which need to be done to the Web Service while also increasing responsiveness.

AJAX is a powerful technology. It allows client-side applications to send requests to servers and, when the data comes back (most probably in XML or JSON format), the application can manipulate the DOM and, hence, change the layout and content of the webpage being shown.

AJAX programming can be problematic because of the asynchronous behaviour. Callbacks need to be properly designed to prevent surprises.

The work to do is:

• Make AJAX queries to Last.fm to get the most popular songs of the three existing French artists
• Make AJAX queries to Last.fm to get the three most popular artists in France (as well as their songs)
• Allow the user to enter a country name and displays the three most popular artists in that country as well as their songs. At this point, it’s interesting to understand the difference between normal and AJAX form submission.

Javascript is a powerful and expressive programming language. Learning how to write Javascript properly by focusing on its good parts (and ignoring its bad parts) is a necessity if one wants to create maintainable code.

The work to do is:

• Show a simple alert while the webpage (created previously) is loading
• Use window.onload to execute code only when the whole content has been loaded
• Display the number of songs in an alert
• Show additional statistics like number of distinct countries and their names
• Hide all country names using Javascript and some CSS
• Use a timeout and callbacks to show/hide countries every second

The next step is to enhance the application to use jQuery (ready function, selectors, etc), one of the most formidable Javascript libraries ever.

jQuery can be used to easily:

• Display the table of songs with stripes (with the help of some CSS)
• Toggle the striped rows in the songs table when the mouse is over the table
• etc.

Finally, it is also important to know how to use a library like Underscore.js which provides a collection of useful functions (such as map, filter, uniq, etc.) to increase programmer productivity. Underscore.js simplifies existing (non-functional) Javascript code and, hence, make it more maintainable.

HTML5 is World Wide Web Consortium standard for the construction of web applications (including web applications for mobile devices) as opposed to the construction of classical websites.

In practice, HTML5 includes:

• Hypertext Markup Language (HTML, now in version 5)
• Cascading Style Sheet (CSS, now in version 3)
• Javascript (standardised as ECMAScript and implemented by most mainstream browsers)

The relevance of HTML5 for mobile development is that the two major smartphone and tablet platforms, namely Apple’s iOS (used on iPhones and iPads) and Google Android, have HTML5 compliant browsers. In fact, both platforms use the same Webkit open source browser engine which means that, say, a web application which works correctly on an Android smartphone is bound to work correctly too on an iPhone. Interestingly both Google Chrome and Apple Safari also use Webkit and, consequently, mobile development can start on, say, Chrome and it is expected that the app, when moved to a mobile device, will behave similarly. This is the actual process we are going to follow during this training.

As a web developer, it is important to always make sure that the HTML, CSS and Javascript are properly validated. This can be done by using the following online validators:

• W3C Markup Validation Service (for HTML)
• W3C CSS Validation Service (for CSS)
• JSLint (for Javascript)

The work to do is to progressively build a webpage such as the one shown above. You should use the latest HTML5 tags (such as header, nav, section, aside and footer) as well as CSS3 to style and format the content.

jQuery Mobile features a lot of advanced user interface elements such as collapsible content and sets, listviews and forms.

The work to do is:

• Make the three French artists collapsible
• Surround the three French artists with a collapsible set and make the first artist expand on load
• Use a listview for the Indian songs and show a back button in the header
• Add a filter to the listviews containing Indian songs
• Add a feedback form (with some server side processing e.g. in PHP)
• Handle swipes and taps appropriately