iLearnPad - Taking a Web App to the Marketplace: Juli 2012

Montag, 30. Juli 2012

Bugs fixed in Windows Phone 7?

With a little experimenting templating is now working:

(a) the main page is being generated from static HTML as a jQuery-Mobile (jQM) page with header, footer and content as a jQM (unordered) listview <ul>...</ul> with list item link content <li>...</li> being dynamically generated for each picture.

Here´s the static HTML to which each link is added:

Here's the dynamic part that gets fed to Underscore to fill out the <%= %> placeholders and when done to enclose the outermost div block of the "cartTemplate" within an li element and add to the above <ul> element with id "menuContent":

(b) the content pages of pictures with sound are being added to the body element of the page as jQM pages with header, footer and content containing img and usemap elements.

Here's the static HTML to which each picture content is added:

...

Here´s the dynamic part that gets fed to Underscore to fill out the <%= %> placeholders and when done to enclose the 3 outermost div blocks of the "itemTemplate" within a div element marked as a jQM page - data-role="page" - and add to the above <body> element with id = "pages":

So lets see the jQM-style result in the browsers, this time without sound but with a pop transition on picture selection and with splash screen from:

http://tutorialzine.com/2010/11/apple-style-splash-screen-jquery/

Windows Phone 7 (SDK 7.1 emulator)

Conclusion:Works well - big improvement from before. Picture selection fine. Transitions are not particularly convincing - flip back from picture to main menu for example is weak.

Android (AVD Manager v 4.1 emulator)

Conclusion: As before works well. Transitions much better than before - flip, for example, more convincing - but there's a transition flicker on initial selection of a picture.

iPod touch (simulated with Safari Desktop Browser)

Conclusion. Still works well. Still the most polished of the browsers.

Overall Conclusion: JQM with Backbone and Underscore have helped create a viable cross-browser app with a consistent look and feel. This approach has fixed the bugs previously found in Windows Phone 7 - good news :-) Its not perfect, though, and we'll have to wait on future jQM releases to improve the experience of transitions on Windows Phone and Android for example, but the app is perfectly useable. Next stop add sound and publish to App Marketplace.

Sonntag, 22. Juli 2012

Cross-browser friendly iLearnPad with jQueryMobile?

Our initial attempt is also going to be based on the Model View Controller pattern (MVC) so that we can treat markup, data and the guiding logic in between separately. To this end we're going to make use of the following link that introduces us to the Backbone.js library to handle MVC and the Underscore.js library for handling the repetitive layout aspects of the application, otherwise known as templating:

http://javascriptplayground.com/blog/2012/04/backbone-js-tutorial-1

Here's our initial attempt:

Here's some of the menu list html showing firstly the template for the repeating elements of the menu list referencing data items from the model e.g. <%= title %>, <%= pathMenu %>:

and secondly, once the page has loaded, the filled out template with enclosing "divs" decorated with jQuery Mobile "data-role" attributes e.g. data-role="page", data-role="header", data-role="content":

Conclusion: OK so we´re not there yet - clearly jQuery Mobile with its mobile device look and feel styling is yet to make its mark, but at least we have a taste for how Backbone can be used to organize the pages of the application using a collection and views and how Underscore in a clumsy fashion can be used to layout the repeating elements of the menu and the selected picture pages.