iOS ‘native’ web apps with HTML5

I’ve been considering iOS development recently but I don’t have a Mac on which to develop. Alternatively, I have been looking into HTML5 ‘native’ web apps. These are web apps that look and feel like native iOS applications.

I am using my Batch Image Resize web app for my R&D on this topic.

Installation

The web app can be installed via Safari’s ‘Add to Home Page’ feature.

It looks like a native App

As per the Apple Developer Guide, adding the elements below will allow the site to act like a native app when access from your iOS device.

‘apple-touch-icon’ defines the image to use for the icon.

‘apple-touch-startup-image’ defines the splash screen image.

The ‘apple-mobile-web-app-capable’ meta tag allows the page opened via your home screen to behave like a native app. When I open the ‘app’, I see it in full screen browser with no address bar at the top or any of the menus at the bottom.

<link rel="apple-touch-icon" href="/path/to/custom-icon.png"></link>
<link rel="apple-touch-icon-precompsed" href="/path/to/custom-icon.png"></link>
<link rel="apple-touch-startup-image" href="/path/to/startup-image.png"></link>
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Full Screen --></meta>

Reference

https://labs.ericsson.com/developer-community/blog/beyond-html5-audio-capture-web-browsers
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html

Integrating Google Web Fonts

.post-434 { font-family: ‘Jura’; }

Historically, web designers have been limited to the fonts they can use in live text. Enter Google Web fonts. This will allow you to integrate any website.

I have used the Google Web Fonts API to integrate the Jura font for this post by adding the following to my HTML:

<link href="http://fonts.googleapis.com/css?family=Jura&v1" rel="stylesheet" type="text/css" />
<style>
* { font-family: 'Jura'; }
</style>

You can view more font options on the Google Web Fonts site.

Why did I choose this font? I wanted to use something that was easily differentiable from the surrounding content.

Siobahn has a more thorough article on using the Google Web Fonts API here: http://wpmu.org/how-to-use-the-google-font-directory-with-wordpress/

HTML5

I want to stay ahead of the curve when it comes to HTML5 and everything it has to offer so I’m using this blog entry to chronicle my research and any cool tools I find around the interwebs.

I found this nice sandbox the other day http://rendera.heroku.com/. They have some nice example and am learning a lot from it.

W3Schools has a nice primer on HTML5. 

Some questions I have and would like to answer for myself are…

  1. What is the purpose of the <address> node? What do I gain from using it?
  2. How can I integrate HTML5 with ASP.NET Web Controls?

More questions to come.