Friday, September 14, 2007

Creating a basic iPhone page: Detecting the browser

Even though I'm working mainly on an iPhone page for our campus, I don't want to assume that other mobile browsers won't be showing up more and more on campus. There are probably better ways to do this, but I made two different pages, one for most mobile browsers and one for the iPhone.

I placed both home.html (the default index page on our system) and i.html, the iPhone-specific page in a directory called "m" on the document root of the server my.acu.edu. The url for the mobile app is then:

my.acu.edu/m

On the default "home" page I inserted a script from iphonewebdev.com that sniffs the browser and either leaves the user on the current page or redirects to the iPhone-specific page. Here's the html wrapper for that page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>ACU Mobile</title>
<script>
if (navigator.userAgent.indexOf('iPhone') != -1) {
/* iPhone user */

window.location = "http://my.acu.edu/m/i.html"
}
</script>
</head>
<body>
Mobile links go here.
</body>
</html>

What happens is this:
  • home.html checks your browser to see if it's an iPhone.
  • If not, it displays the text in the page.
  • If so, it redirects to a page called i.html.
That's all there is to it.

Tuesday, September 4, 2007

Creating a basic organizational iPhone page: Overview

Joe Hewitt, of Firefox fame, has created an easy-to-use framework for publishing web pages in a format that mimics Apple's own native iPhone applications. It consists of javascript, css and html files, all freely available.

My effort at using the framework can be found at my.acu.edu/m. It's a simple html page that links to mobile-formatted programs such as Google webmail, calendar and search, simple calls to Google maps, and links to external apps specifically created for the iPhone such as the excellent moviesapp.com and the Facebook iPhone application, also built by Joe Hewitt. There's also a campus directory script that I wrote, which is the only thing approaching programming that I did for this project.

I tried to think of information that students and employees might need when out and about. For example, college kids think about food a lot and fortunately, one of the easiest and most useful of the iPhone features is the embedded Google maps tool. There are limitations to this tool, which I'll point out in a later post, but for certain searches, it's as easy as creating a link:

http://maps.google.com/maps?q=Restaurants+near+Abilene+Christian+University

Touching this link switches the iPhone to the maps application, drops markers on the local eateries, and includes all the information you'd expect such as phone numbers and addresses. No more api keys and javascript to write. I'll give more detail about maps in a later post as well.

So, that's the overview. Next, I'll dig into a few details for each section.

About This Blog

You'd think that managers of programmers would have top priority on pet projects, but anybody who's done this job for long realizes that urgent projects and those already in motion often have to come before those longer-term, vision-related ones that need to be see the light of day in order to ever become a priority project.

I often find myself in this exact situation and usually forge ahead with whatever tools I can to get a working prototype of at least the simpler aspects of a project up and running. This blog is about those efforts. I may be the only one who ever reads it but at least I'll have a record of my thoughts and actions using those wonderful tools available these days.

So, in the next day or two, I'll write about my most recent project-- getting a basic page up for the iPhone. It's surprisingly easy because of the generosity of talented programmers who release their work and patiently explain it.