Google Forms! (plus, how to display on the iPhone)

Google has just released what I think is one of their best product enhancements ever. Read about it on the Google docs blog post:

Stop sharing spreadsheets, start collecting information

What makes this so cool is that they've given the person of average technical competence -- i.e., the pointy hair boss-- the ability to create a form with multiple types of inputs, gather the information, chart it, share it, and discuss it. And, the forms display pretty well on the iPhone.

Pretty well is okay, but you can easily make them fit right into the iPhone interface. If you've read previous posts about building iPhone web apps, you can apply the same techniques as we have before. Just add a bit of html at the start of the document and a bit at the end and stick the form in an iframe in the middle. We have written a little tool to get you started. Create your form, get the link for it, and enter it here:

http://acu.mobi/ig

This will spit out the file in an iPhone-style interface. View source and save it as a document on your web and you're set. In theory, you could point directly to the url on our server, but this is an experiment and I can't guarantee it will be available, so please put all code on your own server.

By the way, you can do this same formatting trick with some Google gadgets and Google calendars since Google gives you a way to format the html output. Both are put in iframes. When you configure gadgets or calendars, just set the width to 320 pixels and a minimum of about 420 pixels length. Grab the url and stick it in this tool:

http://acu.mobi/igadgets

Please use the same caution as above. Use the tool to grab the html wrapper and then host it on your own server.

Possible uses and caveats for Google Apps users

At this point, only public google.com accounts can publish a form for use by anyone. Forms published from inside Google Apps domains will require a login, so only users of that domain can fill out the form. And at the point, since we can't use the extra formatting for the iPhone, users will have to tap or spread to enlarge the display. However, this is an easy-to-use online test, survey and clicker tool.

I suspect that Google will at some point give us the ability to share forms outside the domain, format for iPhone and display graphs of the collected input. In the meantime, I'm thankful for what we've got.

Google Maps and iPhone

There are a few easy ways to publish map information for iPhone use that don't require a programmer to get involved:

Google Map Search

Do a Google map search and the iPhone will switch to its built-in version of Google maps. Just input a query like this one into your page:

http://maps.google.com/?q=restaurants+near+Abilene+Christian+University,+Abilene,+TX

A couple of considerations:

• don't forget the target="_blank" in the link if you're using the iUI framework.
• put + signs instead of spaces between your search words

Use a KML File

By using a kml file, you can specify the exact coordinates that you want to map. Unfortunately, as of this writing, you can't control a lot about what's displayed. For example, you can't specify:

• Choice of satellite, map or list view; iPhone maps will display the last view selected
• Zoom level
• Any map attributes other than the coordinates and a description

To use a kml file, create a link to

maps.google.com/?f=q&hl=en&q=http://my.acu.edu/m/kml/acucoffee.kml

including the q=url_of_your_kml_file

A very helpful resource for testing kml files is at http://www.thechrisoshow.com/display_kml/

Point to a Google MyMaps Map

Google makes it very easy to create a map that can then be displayed on the iPhone. You still don't have the full browser functionality-- no special icons and the information that shows in the pop-up window on a browser doesn't show at all on the iPhone. For example, try this link from a browser and the iPhone:

Map from Google's MyMaps

Let's hope that Apple and Google team up to make using myMaps more robust. However, if you can live with the limitations, just point your browser to maps.google.com and create a map, saving it to your myMaps tab. Next, click on the "Link to this page" link and copy and paste the "Paste link in email or IM" as we did above with a kml file.

Advice from an iPhone TechTalk

One of the teachers at an Apple workshop at Educause recommended that I overcome the problem with custom information not showing up in their Google maps app by pointing the user to the information first and then to a map for the location.

So, using iUi to show coffee shops on campus, first give the list of coffee shops, each one a link to an information page (that could also include advertising), and finally to a map if needed.

Given that our campus is small and the difference between any two locations will never be more than a five-minute walk, this makes sense. Hours rather than location may be the key criteria for selecting one over the other, and in fact, most on-campus users may never look at the map. Good advice, I think.

Creating a basic iPhone page: Links to external apps

At ACU we use Google apps for our email, calendar, chat and documents hosting and so providing mobile apps for the iPhone is just a matter of pointing to those apps. Using Joe Hewitt's css and JavaScript framework for the iPhone, iUI, I have to make the target of the links to "_blank" which will open a new page on the iPhone:

<li><a href=\"https://mail.google.com/a/acu.edu/x/\" target=\"_blank\">Email</a></li>
<li><a href=\"https://www.google.com/calendar/hosted/acu.edu/m\" target=\"_blank\">Calendar</a></li>

Do the same thing for other Google apps that are handy for the iPhone:

<li><a href=\"http://www.google.com/uds/samples/iphone/isearch.html\" target=\"_blank\">Google search</a></li>
<li><a href=\"tel:800-466-4411\" target=\"_blank\">800-GOOG-411</a></li>

On the last link, notice the "tel" href type. Even though the iPhone will usually recognize a telephone number, it's good form to include the "tel" in the link.

Finally, there are other great apps out there that will appeal to students on the go:

<li><a href=\"http://iphone.facebook.com\" target=\"_blank\">Facebook</a></li>
<li><a href=\"http://www.moviesapp.com/?phone=79601\" target=\"_blank\">Movies & Theaters</a></li>

Next, I'll take a look at maps and some of the pros and cons of how iPhone handles custom searches.

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.

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.