Developing PhoneGap mobile project. Part 2

In the part one of these series we have checked what PhoneGap mobile application framework is, downloaded its latest version and have created our initial first project for iOS smartphone platform. I have also outlined frame for example mobile app we are going to build and the set of web APIs that we will be using to make this example application somewhat useful for its users.

In this part of the tutorial we will take a closer look to PhoneGap framework structure, its main files and will write code to consume data from the web based APIs. Lets call it slightly advanced “Hello World” example which instead of printing just simple text will display 5 yummy receipts retrieved from external web service.
We will continue working on the code of the initial project created in the part one of this tutorial. You can follow the steps we took last time, they are quite simple.
As we have much more code in this part, the all source code for today’s finished tutorial is located at the bottom of the post. Feel free to download and use it for testing. Now, lets get started.

PhoneGap structure for iOS mobile project

Let’s take a look at the structure and contents of the project created by PhoneGap script. Open the project with XCode (key tool for developing iOS based mobile applications). The structure will look the same as I have pictured below, with the key files for iOS project as well as PhoneGap specific www directory and few configuration files.
For iOS apps main.m objective-c implementation file represents the main loop application is constantly running. From the contents of this file we see that AppDelegate is being referenced as a main controller. Quick view to AppDelegate.m implementation file shows us that it sets some configuration parameters for the mobile project. Cache size, window size, splash screen, default start page for view controller (project default is always index.html) and other properties. The main directory where all application files have to be placed is www and they will be served via special custom view (web view).

AppDelegate.m implementation file for newly created PhoneGap iOS project.

PhoneGap project files for iOS

Read More
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!

Read More
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

Read More
We have got new looks

Late last month I have posted about HTMLCenter redesign project we started few weeks ago. Well, as you might have already noticed we went live with new looks. There is still ongoing work happening and I’m continuing to add various bits and pieces (we are big fans of agile approach to things) but the main site design changes are already in place.

It is mobile first design. We wanted HTML Center to look great on multiple mobile devices as we have noticed constantly increasing number of our readers accessing site through mobile Internet browsers. Most likely these are just going to become main tools for reading content on the web as mobile first is becoming the norm these days. And responsive design so far is the best answer to multiple mobile screens and growing variety of mobile devices out there.

Read More
Roundup for many things

It’s totally not boring to watch client side programing language space these days. New libraries, frameworks and applications are being created almost daily. Not to mention constantly growing and evolving old ones. Lots of time all this information is getting buried because other, more important things float on top in overall information flow. For some time now I’m using tools like Instapaper and Toodledo to capture and organize all read worthy bits of information about interesting releases, updates and projects. So I thought it might be a good idea to share some of them in monthly roundups here on htmlcenter and accompany them with some short comments.
Lets just start and see how it goes.

Read More
We have been quiet for couple of months

We have been quiet for few months here at htmlcenter.
There are couple of reasons for this radio silence and I’m sure both of these reasons mean some positive things for this blog.

First reason is that Allen who was original founder and started htmlcenter back in 1998 (its true, this site was started even before dot.com meltdown happened!) decided to do something different and gave the keys from this blog to new owners. It gives us a chance to give this site well deserved push forward with some new and fresh ideas.

Read More
Facebook Launches Full WordPress Plugin

Earlier today Facebook announced that they have launched a full WordPress plugin. The Facebook developer blog has a full overview of the plugin which is available now from within the WordPress admin plugins page.

The plugin allows you to post directly from WordPress to your Facebook profile. The plugin also allows for Facebook comments, Facebook like button, Facebook share button along with an activity option.

To use this plugin, you need to setup your blog as an application inside of WordPress and then link  up your Facebook account with the plugin if you want the full functionality of the plugin.

One important note – when I added the Facebook plugin to one of my blogs – the like button completely removed ShareThis and the Facebook commenting option completely removed the regular WordPress commenting option.

 

Read More
Eliminating Options in a Gravity Form

For those of you using WordPress, GravityForms can be a real godsend. GravityForms is a premium plugin that makes it extremely simple to create forms on your website. However, there are a few features that aren’t quite built out the way they probably should be, yet.

One of those features is the ability to stop people from submitting forms with duplicate values. While this feature is extremely useful the way it’s currently implemented when it comes to duplicate entries for people’s names, email addresses, etc., it’s not overly useful when it comes to select elements, radio buttons and checkboxes. As it is currently implemented, all of the options are still available for the user to select when filling out the form, but when they submit the form, they get an error message indicating the option has already been selected.

With the use of some GravityForms filters, though, you can make things slightly more usable.

Read More
What Are Your Favorite WordPress Plugins?

Have you ever wondered what your friends’ favorite WordPress plugins might be? Are you tired of slogging through pages and pages of 5-year-old blog posts just trying to find good plugins for your WordPress site?

The folks at WordPress have made a small but significant change to the way the plugins repository works. Now, when viewing the details of a plugin, you can click the “Favorite” link to add that plugin to your list of favorites. Then, anyone that visits your profile will be able to see which plugins are your favorites.

Read More
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.

Read More