My observations on iPhone development

[CyberGeek]

Hi, I've been reading MacRumors and the forums for some time, and finally decided to register to share some of the things I've found while messing around with the iPhone's Safari.

I wrote a little test page as I've been messing around. It's not an app in the slightest bit. In fact, it's only really useful to other developers (who should feel free to look at the source for specifics on how I did things). It's best viewed on an iPhone, since the links at the bottom will actually all work on one.

• The iPhone is not running an incredibly fast processor. The test page animates two divs five seconds after the page loads (the animation adjusts the position and opacity of the divs). My iMac handles the animation without breaking a sweat. The iPhone strains a little bit. What I do now on the page seems to be about the limit of what you can expect to do on the iPhone (technologically, not creatively) without the framerate taking a dive into the crapper.
• It's probably a good idea to use a meta tag to set the page to be 480 pixels wide, then construct the app so that it looks good when it's 480 pixels wide (when the iPhone is held in landscape) as well as when it's scaled down to 320 pixels wide (when it's held in portrait).
• The protocol for calling a phone number is tel:. Example: <a href="tel:555-1212">Call Me</a>
• The protocol for sending an email is mailto:. Example: <a href="mailto:address@domain.com">Email me</a>
• The protocol for looking up an address on Google Maps is maps:. Example: <a href="maps:20 Infinite Loop Cupertino, CA">Look me up</a>

I hope developers find at least some of this stuff useful (if nothing else, I don't think anybody else has figured out and posted the exact protocol name for looking up addresses in Google Maps).

 

[dangleheart]

Does tel: cause Safari to make a phone call using the cell phone side of iPhone? Did you test it? Just checking.

Initially there are going to be some simple but very useful apps like this. Like a corporate directory. You go to http://corpDirectory.XYZ.com/ and touch the person you want to call.

 

[CyberGeek]

Does tel: cause Safari to make a phone call using the cell phone side of iPhone? Did you test it? Just checking.

An earlier version of the page was set up to call my other cell phone, and I tested it then. If you click a tel: link, the iPhone will display a confirmation dialog asking if you want to call the number. If you click 'Call', then the iPhone will actually call the number using its normal cell phone interface.

Related to that, clicking a maps link will actually go to the iPhone's Google Maps app, rather than point Safari to maps.google.com.

I quite like that they put the confirmation dialog in there. It keeps malicious app writers from being able to cause users to inadvertently dial 911, thinking that they were just clicking a normal link.

 

[dangleheart]

Thanks CG.

Here is a simple sample page I put together. Those who can and are willing, please surf to this link and see if you can touch the links and dial.

http://home.comcast.net/~lookingahead125/PhoneBook.html

 

[CyberGeek]

It works for me.

Note that it appears that you can format numbers that you put in tel links. I put a hyphen in the number on my page (555-1212). Not sure what your options are as far as formatting go, but it wouldn't surprise me if, when it comes down to it, the iPhone only pays attention to the actual digits in the number string.

 

[dangleheart]

Thanks for the test and confirmation CG. Yes, I saw that you used '-' but I just was not sure what all it will take, so I went conservative.

So, Let us call this our First iPhone Third Party Application: Corporate Touch Dialer And we will have spin off versions Family Touch Dialer, Friends Touch Dialer...

 

[DrMoray]

Thanks for those details. That'll be helpful in creating useful apps.

 

[Billy Boo Bob]

Thanks for those details. That'll be helpful in creating useful apps.

Big time... I should be getting my own iPhone this week, but in the mean time I've been poking around and trying to find good tutorials on AJAX scripting, with some decent success (not already being a JavaScript whiz sure doesn't help).

However, in all this poking around I have yet to come across much of this type of info... Anybody know of a place (perhaps at Apple.com) that lists all these tags? About the only thing I stumbled on was mention of watching for a windowsize event (not sure if that's the exact term) to tell when Safari was rotated from portrait to landscape, or back. And that (tracking) dragging objects is out due to dragging being trapped by Safari for touchscreen operations. And that in some situation mouseDown and mouseUp were sent together when released (so you couldn't track a mouseDown because the message is only sent after releasing).

Just paraphrasing what I read... Could be wrong about this stuff, though. I'm a JavaScript know-it-little.

 

[scotty1024]

More power for href

I've gone into the Apple bug reporting system and requested that href be enhanced with two more protocols: sms: and vmail:.

The sms: would invoke the SMS send feature of the iPhone.

The vmail: would dial the AT&T voice mail system access number and then enter the 10 digit phone number supplied after the vmail: to allow leaving a message directly in voicemail. With javascript you could defend yourself from 3am phone calls from your web site or just post a vmail: and not a tel: for customer support issues.

We'll see what happens.

 

[dangleheart]

I already got some brownie points by setting up a page for an acquiantance of mine with his frequently called numbers. He just bought an iPhone. Touch Dial is how I promoted the site to him. . He was quite impressed that on day 1 I have managed to create an app for the iPhone. (And I do not have an iPhone in my hands yet ). I let him stay in that wonderland for a few minutes before explaining how it is done. All credit goes to CyberGeek for figuring out the tags, especially the tel: tag.

BTW CG, how did you figure them out?

 

[Billy Boo Bob]

The vmail: would dial the AT&T voice mail system access number and then enter the 10 digit phone number supplied after the vmail: to allow leaving a message directly in voicemail.

Interesting... I haven't heard of this. I guess you can do this now manually? What's that AT&T number to start with, if you know?

With javascript you could defend yourself from 3am phone calls from your web site or just post a vmail: and not a tel: for customer support issues.

That's a nice idea.

 

[CyberGeek]

BTW CG, how did you figure them out?

Educated guesses, mostly. Mailto was pretty obvious, it's just the standard for linking email addresses. I read a blog post that speculated that the other two would be tel and gmaps. Tel is actually a standard for linking to phone numbers, though it doesn't have much use in desktop browsers. The blogger's guess of gmaps proved to be wrong, so I guessed maps, which turned out to be right.