Developing PhoneGap mobile project. From start to finish

This is the first part of the tutorial. Second, Third and the last tutorial parts can be found by following the links.

After receiving good reader feedback for HTML5 widgets tutorial for iOS digital books today I’m starting with new tutorial for developing hybrid mobile applications with the help of PhoneGap framework (or Apache Cordova wrapper as some people like to call it).

The goal is to create a fully working and somewhat useful mobile application from the ground up. To make things more interesting and useful for our readers I’m planning to implement (and go into technical specs) today’s most used mobile application functions. Web services (the way for client devices to communicate with servers and each other over the World Wide Web network), Authentication (after which mobile applications can consume online resources on behalf of third parties), Geolocation, Maps and on device Storage.

I’m estimating that it will take little bit of time to get to the end of the project and to write everything in blog post format. Therefore I will split this tutorial into several parts and will publish them separately here on htmlcenter. It will make it easier to follow for everyone who is reading as well.
You are much welcome to join the discussion any time by posting comments or asking questions. There is much work ahead so lets get started!

Creating HTML5 widgets for Apple iBook applications

Recently I had a chance to take a closer look at relatively new tool for creating interactive iPad tablet reading experiences called iBooks Author. It was released by Apple in January 2012 and is aimed at book authors and publishers to allow for an easy publishing of their books on Apple iBook platform. Application supports its own format .ibooks as well as .pdf and .ePub formats for exporting.

But what really caught my attention was the possibility to embed interactive elements inside actual ebooks. It can be done in the form of HTML5 widgets, with CSS styling and JavaScript support for building interactivity.  As it was a good fit for one of interactive digital mobile content projects we will be crafting at PopularOwl and I went through the process of creating and adding HTML5 widget to iBook project to understand how it all comes together.

In this tutorial I’m going to walk you through the steps for building fully working HTML5 widget to be used in iBooks Author projects. This sample widget will help eBook authors to easily add social follow option to their digital books so their readers can interact from within the eBook.

Source code for finished widget project is located at the bottom of this tutorial, feel free to download and test it. The final result:

html5 widget in ibook author

Five Reasons Why HTML5 Rocks For Mobile

Andrew Holden is co-founder and Chief Experience Officer (CXO) at Weever Apps. Andrew is a web development expert and frequently writes about mobile visitor engagement and online best practices.

HTML5 is everywhere this year!  Google supports it.  Facebook’s all over it.  It’s clear that HTML5 is the future for mobile.

Ok, that’s cool. So what is HTML5 and what does it do for mobile?

Great question! HTML5 is the latest version of HTML – the standard for presenting and structuring content on the World Wide Web.  One of the great advancements with HTML5 is that it allows websites to function like mobile apps by offering design capability that is mobile friendly, as opposed to laptop/desktop friendly.  This means websites can be designed to fit mobile screens and have a user interface that is easy to control and highly functional with a touch screen. The term used for this technology is “web app”.

For practical purposes, there are two ways to implement a “web app”.

  1. Websites can be designed so that they can scale from a desktop monitor down to a smart phone screen.
  2. An independent web app can be designed, which will open when a website is accessed on a mobile device.

This new approach of presenting mobile content is breaking down barriers – including time, money, and the ubiquitous App Store.  The doors are now being opened to individuals and small business.  Big players are also gravitating to this alternative as they recognize the benefits.

Here are the facts about the mobile market:  50% of all local searches are now on mobile devices.  This is largely due to smart phone ownership surpassing cell phone ownership in the US and other countries.  Despite this notable adoption, most businesses don’t have any mobile solution of any kind – let alone the subsequent marketing benefits.  Unfortunately, traditional app development is just too time-consuming, expensive, and technical.

Firefox and HTML5

Earlier this evening, I was reminded of just how primitive the HTML5 support was in Firefox 3.5/3.6. While we have seen three major version releases since 3.5, it was actually still the latest version of Firefox less than 6 months ago (and was that way for almost 2 years). Therefore, Firefox 3.5.x still holds a decent amount of market share (probably as much as, if not more than IE6 did a year or two ago). Looking at a handful of websites for which I have analytics data, versions of Firefox prior to 4 still accounted for anywhere between 2% and 15% of the total visits to those sites last month. With all of that information, it’s probably still important to make sure your sites work in versions of Firefox as far back as 3.5.

There are two somewhat major gotchas in the way Firefox 3.x handled HTML5. The first is easily fixed with a few lines of CSS. The second can only really be fixed if you rewrite some of your HTML.

Some HTML5 “Features” You Might Not Expect

As we continue to transition whole-hog into HTML5 with new Web development, there are a few things you might need to know before deciding how to handle certain situations. I have discovered two somewhat major gotchas over the last few months that really made me reconsider my usage of the new technology.

While articles, asides, headers, footers, etc. are a fantastic way to introduce semantics into your page designs, there are a few elements and attributes that might not do quite what you’d expect.

HTML Presentations with Opera

Because Opera is not an extremely popular browser, most developers probably aren’t aware of one of its greatest features: Opera Show mode. Opera Show mode is the official name of the full screen mode for Opera (technically, it’s only called Opera Show when a projection media style sheet – discussed below – is present); and it brings with it a great possibility.

More than two years ago, Opera added support for the projection media mode in CSS. Whenever the browser is expanded to full screen mode, it activates the projection media, allowing you to apply a completely different stylesheet to the full screen page than you have in other settings.

Pages:

Useful Things