Local Database

The discussion of client-side storage requires investigating the use of a client side database in addition to cache, local storage and session storage tools. An advanced experience of this tool will call for the completion of the following task where you will create a ToDo app:

http://blog.teamtreehouse.com/create-your-own-to-do-app-with-html5-and-indexeddb complete it and modify somehow.

If you would like to do something more business like, although somewhat more complex, you can follow this tutorial allowing to create a useful bibliography management app.

This task is totally voluntary and will not affect your Excellence attribute of the Certificate, but will just give you an extra knowledge and hands-on experience of an important tool.
More help on IndexedDB could be found in a mini series here, here, and here.

Be aware of your browser capabilities.

On another note I want to emphasize a growing important of the local storage solutions use case, especially in games and business apps, where the local and server content are being synced. For example, Backbone.js comes with methods for fetching and saving data models to and from the server. Then any local change or information entry can be synced with the server and then synced with other local devices. Real estate, or insurance agent software can serve as good use cases.

Additional Work Using jQuery Mobile

Knowledge of  jQuery Mobile is rapidly becoming a must in app development community (along with some other frameworks)  - so here is an additional simple task making it easier to absorb the rapid development capabilities.

As an extra point work and an additional training in jQuery Mobile do the following:

1. Read, follow, and recreate a simple app from http://ht.ly/cM7QS.

2. Modify it with following MINIMAL changes:
    a) use your own photos
    b) add Home and Info pages with some content to make the footer navbar workable from the Photos page
    c) put the footer navbar on these new pages allowing switching among pages
   

3. Of course, you can also modify the book's project for your own design, which is somewhat more complicated...

4. Post the description of the changes to the original app that you've made and the link to it (check the link workability before and after posting it) to the Extras forum.


For those who would want to include some more features - you can use this tutorial


Note: these additional efforts will not be supported - so that you should not make your code too complicated and then ask me to debug your project :) 

Explore Emulators

One of the goals of this program is to introduce students to various approaches in mobile app development. Responsive design with its variations is an important part of it. But there are situations when it might be beneficial the creation of separate mobile sites. An interesting example can be seen in the recent political campaign.

Another aspect of separate mobile site development is in determining exactly when and for what devices such development is necessary. The two mainstream directions of the automation oof such redirecting is in media queries and user agents that you've been introduced in our studies. There is an ongoing evolution of both approaches attempting to increase their precision, while on the other side the users are getting tools allowing to change user agents in order to get different corresponding source code and views.

An important part of the decision is an ability to see how different the content looks like on different devices by using a variety of device emulators. In my opinion the latest beta of Chrome Canary (you can download it) already has a bunch of such emulators working without the need for any special installation. It actually is a useful development tool. Although I do not want to overload the course of studies with a lot of possible sideline information sticking close to the coverage of all modern approaches to mobile app development, advanced students might be interested in some additional exploration.

Exploration Advice: install the latest Chrome Canary. Go to your site and see it on the screen. Go to Tools, Developer Tools and click on any emulator you want to explore in the upper menu (under Device option).

You might also tweak your HTML and CSS in the bottom menu and see how it affects various emulators. The screen will look like the following:

But be aware that richness of the newest development tools is just masking the main challenge – responsive design as automation of responsiveness and adaptation (see RESS in my previous post) versus manual choices. And this is not only about adapting to the screen size or resolution. Modern mobile devices increasingly use additional capabilities in the use of various sensors, user actions, and dynamic UI modifications. Allowing your app automatically adapting in its behavior requires not only the views of the content that you can see in Chrome Canary manual development assistance but access to the decision making system determining app behavior and adaptive changes when dealing with specific devices and their capabilities. But this will be another story that we will touch upon later.