iOS Applications with HTML5 and CSS3

by Jenifer W

iOS Applications with HTML5 and CSS3

Today, mobile application (app) development has become one of the most popular trends in software development as we emerge ourselves into an on the go, handheld device era. “A few short years ago, most mobile devices were, for want of a better word, ‘dumb’” (Charland & LeRoux, 2011). Now, mobile devices have advanced so much that it can take away much of a person’s daily usage of a desktop or laptop. “Mobile apps are currently evolving very rapidly but generally are targeted at a specific task, run on a mobile device, make heavy use of the data network, and have a simple delivery mechanism (i.e., Google Play Store or Apple Store)” (Tracy, 2012). Mobile applications can be used in a variety of operating systems such as the iOS, Android, Blackberry OS, Windows Phone, and much more. To develop a mobile application, a basic knowledge of one or more programming languages is needed. This blog will focus primarily on the development of iOS applications using HTML5 and CSS3. Hyper Text Markup Language (HTML) and Cascading Style Sheets (CSS) are the core components in web development that have evolved tremendously over the past years. “Web design is becoming more sophisticated, with new browser techniques and design principles, including fluid grids, flexible images and media queries, making it possible to deliver a quality experience to users no matter how large (or small) their display” (Reyna 2012). The latest versions of the previously mention web development languages are HTML5 and CSS3. With the launch of HTML5 and CSS3, these two languages have opened a new form of computing: the ability to create iOS applications using HTML5 and CSS3 in native and web applications.


Native vs Web Applications

There were originally two mobile development approaches that can be made when creating iOS applications: native and web apps. Native applications are applications that are installed in the iPhone, has access to the hardware components (accelerometer, geolocation, camera, etc), and developed in Objective-C (a programming language). On the other hand, web applications are applications that have a user interface built under web-based technology, optimized for the iPhone, not installed on the phone, and not written in Objective-C. Below are advantages and disadvantages of using one approach over the other what has been defined by Jonathan Stark from his book called Building iPhone Apps with HTML, CSS, and JavaScript:


NATIVE APPLICATIONS

Advantages:

  • One click away access to millions of registered credit card owners.
  • Development environments such as Xcode, Interface Builder, and the Cocoa Touch framework.
  • Ability to access all the devices’ hardware features.

Disadvantages:

  • Must pay money to become an Apple developer.
  • Approval from Apple Inc. is required.
  • Application development only in Objective-C.
  • Can only develop on a Mac OS.
  • Bug fixes are not done in a timely manner.
  • Slow development cycles and testing cycle limitations from App Store.


WEB APPLICATIONS

Advantages:

  • Web developer’s own authoring tools can be used.
  • Use the current web design and development skills.
  • Not limited to using a Mac OS.
  • App can run on any device with a web browser.
  • Real-time bug fixes.
  • Fast development cycles.

Disadvantages:

  • Unable to access all the hardware features on the iPhone.
  • Have to make your own payment system.
  • Difficult to achieve sophisticated UI effects.


Web Apps with Native Device Features: The Hybrid

The advantages and disadvantages between the two choices are heavily weighted. Alternatively, there is a third option that developers can choose from. This option integrates the creation of a web application but uses a development tool that acts “as a bridge between web applications and mobile phones” (Stark, 2010). With this, the web application may use the iPhone’s hardware features through the development tools’ APIs. Some examples of these development tools are PhoneGap, RhoMobile, and Titanium Mobile. These development tools allow the developer to create applications using HTML, CSS, and JavaScript (JS), be able to install the applications to different phone operating systems, and use the tool’s JS APIs to access the devices’ hardware features. Below are the development tool advantages, disadvantages, and App Store considerations:

Advantages:

  • Development environments such as Xcode, Interface Builder, and the Cocoa Touch framework.
  • Web developer’s own authoring tools can be used.
  • Use the current web design and development skills.
  • Cross-platform support on apps as long as it is supported by the development tool.
  • Able to access most (if not all) hardware features on the iPhone.

Disadvantages:

  • Must pay money to become an Apple developer.
  • Can only develop on a Mac OS.
  • Approval from Apple Inc. is required if using App Store.

App Store Considerations:

  • Bug fix speeds will vary as it depends on the usage of the App Store.
  • Development cycles will vary as it depends on the usage of the App Store.
  • If using App Store, you will have access to their payment system.


General Chart Comparison

(Image taken from ftp://public.dhe.ibm.com/software/pdf/mobile-enterprise/WSW14182USEN.pdf)

 

PhoneGap
In this blog, I will be focusing on PhoneGap as the development tool. “PhoneGap is an open source framework that provides developers with an environment where they can create apps in HTML, CSS, and JavaScript and still call native device features and sensors via a common JS API” (Charland & LeRoux, 2011). PhoneGap’s library to use native technology is called Apache Cordova. To get a more vivid idea of what PhoneGap is about, the core components within the PhoneGap are the same for an Android over an iPhone except there is a difference in the procedure to begin creating and building iOS apps. Instead, you would be using Mac OS, Xcode, and an iOS and be required to be registered as an Apple developer.

PhoneGap offers a variety of APIs:

  • Accelerometer
  • Camera
  • Capture
  • Compass
  • Connection
  • Contacts
  • Device
  • Events
  • File
  • Geolocation
  • Globalization
  • InAppBrowser
  • Media
  • Notification
  • Splashscreen
  • Storage

However, there are limitations to the devices’ features that are supported:

(Image taken from http://phonegap.com/about/feature/)

 

An Example
As I do not have have the necessary development environment to create an application for iOS, I will be providing the expected outcome of running the test app.

(Image taken from http://docs.phonegap.com/en/2.6.0/guide_getting-started_ios_index.md.html#Getting%20Started%20with%20iOS)

The above image is an image of the iPhone simulator using Xcode once you have created a new project.

When you open the files, the code for this is a mixture of HTML, CSS, and JS as shown below:

  • index.html
  • index.css
  • index.js
index.html code:

index.css code:

index.js code:
 

PhoneGap Build
PhoneGap now offers a new way to build applications using cloud computing through the Adobe Creative Cloud with a monthly membership fee on private apps. However, it is a free service for open source projects that are accessible in the GitHub repository. In addition, there is also “a monthly membership service that allows you to download and install Adobe’s Creative Suite 6 desktop apps, including Photoshop, Premiere, InDesign and Dreamweaver” (Finley, 2012). Developers can now use their cloud service to compile online with the latest SDK versions. Users are also able to access the links to the applications that are created without connecting to a computer as deploying to a device to test the application requires a USB connection. Additionally, using their service supports multiple platforms without the hassle of having different developers using different development environments as they all use one code base.


PhoneGap Applications
Below are examples of existing PhoneGap projects:

(Image taken from http://phonegap.com/app/ios/)

 

Decision Making
With HTML and CSS continuing to evolve in the modern day world, what used to be a mere basic backbone of website creations can now be used to create mobile applications. We have three choices to build mobile apps: web, native, or both. Web apps are written using web-based technology and run through browsers while native apps are built using Objective-C and installed on the phone. Using a combination of creating a web app and integrating native features requires the usage of a development tool that acts as a bridge. PhoneGap is one of the most notable developer tools that can be used to create native-like applications. Whichever application option you choose will have its own advantages and disadvantages. The future of iOS apps being built using web technologies is shining brightly with the evolution of HTML5, CSS3, and cloud computing. There are expectations that “most of the interesting and dynamic content will continue to be housed on enterprise servers, with applications becoming more flexible” (Tracy, 2012).

 

 

 References

Adobe PhoneGap Build. (n.d.). Retrieved from https://build.phonegap.com/

Bowser, J. (2011, October 04). Interview by B Stewart. Phonegap basics: What it is and what it can do for mobile developers., Retrieved from http://radar.oreilly.com/2011/10/phonegap-mobile-development.html

Charland, A., & LeRoux, B. (2011). Mobile application development: web vs. native. Communications of the ACM, 54(5), 49-53. doi: 10.1145/1941487.1941504

Finley, K. (2012, September 24). Adobe launches hosted phonegap build service for creating cross-platform mobile apps. TechCrunch. Retrieved from http://techcrunch.com/2012/09/24/adobe-launches-hosted-phonegap-build-service-for-creating-cross-platform-mobile-apps/

HTML & CSS. (n.d.). Retrieved from http://www.w3.org/standards/webdesign/htmlcss

PhoneGap documentation. (n.d.). Retrieved from http://docs.phonegap.com/en/2.6.0/index.html

Reyna, J. (2012). From flash to HTML5: The eLearning evolution. Training & Development, 39(5), 28-29. Retrieved from http://search.proquest.com/docview/1140333316?accountid=10357

Stark, J. (2010). Building iPhone apps with HTML, CSS, and JavaScript. (1st ed., p. 186). Sebastopol, CA: O’Reilly Media, Inc.

Tracy, K.W. (2012). Mobile application development experiences on Apple’s iOS and Android OS. Potentials, IEEE, 31(4), 30-34. doi: 10.1109/MPOT.2011.2182571

9 thoughts on “iOS Applications with HTML5 and CSS3

  • May 3, 2013 at 7:18 pm
    Permalink

    Excellent blog and presentation Jenifer! I really like how you laid out the advantages and disadvantages of the apps and development tools. I wonder if the same principles apply for android phones. I’d imagine developers would have much more freedom, and wouldn’t have to pay additional costs to Google to use the hardware features of its phones.

    • May 3, 2013 at 7:52 pm
      Permalink

      The same principles are applied for Android development using Android SDK. I’m more familiar with developing in an Android environment as I don’t have any Apple products so I’m more than willing to provide insights on Android development or developing in other environments leaning toward Androids and multi-platforms. (I’ll more or less go off on a tangent in this response!) I recommend that if you want to develop applications, try to use a Linux OS as what could take 15 min on Linux could take 1-2 hours on Windows OS (I believe Mac is also a good choice but that OS performance is foreign to me. I know it’s rather fast and it might be on par with Linux). Apple developers are required to pay $99/year to develop applications if you want the app to be installed on the phone. On the other hand, Android developers have the freedom to install any kind of application on their device. It is totally free. If you want to put your application up in Google Play so you can distribute to a wide audience, you would only need to pay a one-time fee of $25 to become a Google Play developer.

  • May 12, 2013 at 7:04 pm
    Permalink

    Interesting topic Jennifer. I found this article very interesting, informative and useful. I wasn’t aware that by mixing HTML, CSS and JavaScript you can write and run an iOS application. I really liked how you explained and give examples of the both aspects of programming with different techniques. I guess in near future we will see some other programs like phoneGap. I am wondering if you are aware of the cost of membership for the Adobe Creative Cloud?

    • May 28, 2013 at 5:01 pm
      Permalink

      The pricing for Adobe Creative Cloud varies (ranging from $19.99~$49.99 and more if you are a large corporation). You don’t need to order that service directly from them if you want to use PhoneGap. Their cloud service is free for open source and 1 private app. If you plan to have multiple private apps, you just need to pay $9.99 per month for their cloud service.

  • May 29, 2013 at 2:53 pm
    Permalink

    A very well written article, Jennifer! I also agree with David in how you listed both the advantages and disadvantages of apps and the development of apps. I was wondering, which is harder to code for? Android or iOS? I heard that it was easier to code for iOS and that’s why there’s more apps for iOS verses Android. I know it’s also because there is/was more people using iOS than Android and that this could play a roll. But which is harder to code for?

  • June 7, 2013 at 6:39 pm
    Permalink

    Jenifer, I really enjoyed reading your blog, as it was very helpful and informative! I especially liked that you talked about PhoneGap being an open-source framework. I suppose that we students can start to develop web IOS applications with the concepts we learned in class, as PhoneGap allows developers to develop in HTML, Javascript, and CSS!

  • June 9, 2013 at 1:59 am
    Permalink

    Wow. You did a very good job writing this article. I feel you delved correctly into the advantages and disadvantages of web and native apps, and to the actual development of the native apps. I too wish i had the development skills to write an ios app, but you did a great job explaining and showing the code associated with writing such an app.

  • June 10, 2013 at 12:33 am
    Permalink

    Great article! I really liked the breakdown and screen shots of the code. Showing the Advantages and disadvantages really helped me understand. I am definitely going to check out phone gap and hopefully see if I can write an app. Thanks for all the clarifications.

  • June 10, 2013 at 11:15 am
    Permalink

    Excellent breakdown Jenifer. I had no idea that some apps could be so simple as to be written with only HTML and CSS. I always figured that some sort of programming language like C# or visual basic or the like would be required to make the app function. Very well written with the pros and cons of each. Also very nice to know the price to develop for each platform.

Comments are closed.