(April 26, 2010: Updated with newest features)

A few weeks ago in Colorado Springs there was a fuel tanker crash on the I-25 Interstate, spilling thousands of gallons of fuel and closing the Interstate for over 5 hours.  Traffic patterns were a complete mess as side-roads became major thoroughfares.  As I drove home from work, I found myself wishing I had access to springscam.markwoodman.com on my iPhone.  But I built that traffic-cam site in Flex (Flash), so that wasn’t an option.

That led me down the path on how to build iPhone faux-apps with iWebKit, and within a few hours I had a functioning version that worked pretty well and looked pretty good.

If you have an iPhone, check out iSpringsCam.markwoodman.com .  Here’s a run-down of the features:

• Use iSpringsCam like an App
  1. Open iSpringsCam Home screen
  2. Press (+) button in Safari
  3. Press “Add to Home Screen”
  4. iSpringsCam will now run full-screen (no browser bar)

• Main Screen
  1. Use the “All on Map” to get all camera markers on a live Google Map with I-25 traffic conditions
  2. Enter part of a street name in the filter field, and the list will display only the matching camera names
  3. Select one of the cameras to open up the Single Camera View

• Single Camera View
  1. You’ll see the latest image from that camera and a static map image of the camera location
  2. Rotate your iPhone to fill your screen with the camera image
  3. The camera image will auto-refresh once per minute
  4. To manually refresh the camera image, tap the image or the refresh button
  5. Touch the “Live Map” button (or the map image) to get a live Google Map with the camera’s image and traffic conditions on I-25

• Google Map View (with current traffic conditions)
  1. Pinch and expand the map to zoom in or out
  2. Touch a marker to see that camera’s image in a balloon
  3. Touch the “X” on the balloon to close it
  4. Touch the camera image in the balloon to open the single-camera view

If you don’t have an iPhone, here are some screenshots:

Making websites that are iPhone-friendly is easy enough, but I recently wanted to make a site that felt like a real iPhone app.  I don’t own a Mac, so building a native iPhone app wasn’t an option.

I turned to iWebKit 5.0, a lightweight DHTML toolkit for making websites that look “native” on the iPhone. It is a collection of CSS and Javascript files, a few small images, and a tutorial PDF on how to use them.  If you’re reading this on an iPhone, try out http://demo.iwebkit.net to see how a site built with it feels.

The iWebKit developers had these goals for version 5.0:

• It needs to be very lightweight
• Use small or no images (use css3 gradient and shadows for example)
• Use limited amounts or no javascript, always try to find a css3 solution first!
• Be user friendly (the least amount of elements possible in the html code as iwebkit is structured right now)

It’s dead-simple to use, and I think even people with scant web experience could put a static  site easily enough.  Safari for the iPhone has solid Javascript support, so more advanced web developers could put together some pretty decent dynamic functionality as well.

My favorite feature of iWebKit is when you use the “Add To Home Screen” button in Safari to put a bookmark icon on your iPhone.  A site made with iWebKit can be made to provide its own icon for your Home Screen, show a splash image while it loads, and run full-screen (no browser bar).  At that point, you can build something that most people would never suspect was a web site.

Other benefits from this approach:  No need to get Apple’s approval to list it in the app store and you can update it as often as you want.  You don’t get the exposure that the App Store brings, of course.   There are always trade-offs.

If you decide to give it a try, I recommend using Safari on your PC (or Mac) as a test browser during development, since it will render the pages fairly close to how they’ll appear on your iPhone.  You won’t get great results on IE or Firefox, but the Chrome browser works fairly well.

Have fun!

Last year I led a software project that employed a SOA architecture and a Flex UI.  The features we were able to build with FlexBuilder (now FlashBuilder) were pretty sweet and remarkably easy…  I’ve become a huge fan of Flex as a result.

The new FlashBuilder 4 provides some powerful new tools for integrating with various back-end services. Connecting to SOAP services is now, frankly, dead-simple. I’ve written two articles on this topic, both of which are now live on DevX.com:

• Build a Simple Map Client with SOAP in Flash Builder 4, Part I
• Create a Map Client with Web Services, Part II

The articles come with a starter project and walk you through how to connect to a SOAP service and build a functional Map client in a relatively short amount of time.  Unfortunately there’s been some sort of a mix-up on DevX and the download links for the project aren’t working yet.  In the meantime, you can download them here:

• Initial Project (start with this) : terraclient_initial.fxp
• Project by the end of Part 1: terraclient_part1.fxp
• Project by the end of Part 2: terraclient_part2.fxp
  

  Flex + SOAP map client

I’ll keep these downloads available until DevX fixes the problem on their end.  Sorry for the inconvenience.