Nav & Search

Creating a HTML 5 Web App for iPad – Part 2

Projects - March 16th, 2011

This is the second part of a two-part article mini-series (first part here) showing some basic techniques for creating a HTML 5 web app compatible or optimized for the iPad depending on how the techniques are used. It’s not the most exhaustive guide out there, but it’s basically what I now use to progressively enhance mobile versions of the websites I create. See it as a starting point for your own experimantation!


Creating a HTML 5 Web App for iPad – Part 1

Projects - December 7th, 2010

The iPad is (at least for now) the perfect device for consuming media (on the go) and for casual browsing and news consumption. In my point of view there’s no reason for most apps to live in the App Store, the majority would work equally well (if not better) as websites or web apps with the benefit that they would be accessible on all platforms, be free from Apple censorship and are easier to develop (just count the number of HTML vs. Objective C developers). There are a few instances were the speed and processing ability is needed (such as games and media players) but most apps are basically information presenters and the web is more than adequate of handling that.

However, there are some optimizations that can be done to most websites for optimal display and a few other issues that needs to be adressed to allow websites to feel as native apps on the iPad (and other mobile touch devices).


Width and Height of Dynamically Loaded Images in Webkit

Projects - September 24th, 2010

Another day, another problem and (luckily) a new solution when developing the next version of Lumebox. It seems as if Webkit browsers sets the image height and width before the image file has been loaded which means that when using, for example, jQuery the .loaded()-event is fired when the height is still 0. Stackoverflow was kind enough to pin down the problem in these two Q&As, but the given solutions didn’t really fix the problem.


Googles Ajax APIs and jQuery Plugins

Projects - September 22nd, 2010

I’m working on a new version of the Lumebox that utilizes Googles AJAX Feed API instead of relying on a local proxy to fetch RSS-data. Only problem was that the Google AJAX APIs uses dynamic loading in the same way as jQuery does but there’s no obvious way to sync them, which means that you can’t use external jQuery plugins out of the box. The best (and only working) solution I found online used three separate functions and a manual timeout to let the DOM’s keep up with another, this doesn’t cut it for me so set out to find a better solution.


Lumebox Released

Projects - January 8th, 2010

Today I released the Lumebox to the jQuery plugin repository, it’s a Lightbox clone with a few added features. One of the main features is that it can parse RSS feeds just as easily as displaying images. The plugin searches the post or page for all links leading to images and opens them in a popup instead of following them.

The RSS parser that’s built into the plugin is compatible with RSS and ATOM feeds and can be used on its own. It takes two parameters, the URL to parse and a function to execute when it has fetched and parsed the feed. Since it uses Ajax the URL must be local or go through a local proxy.

More information can be found on my Lumebox project page and it can be downloaded from the jQuery plugin repository.