iPhone and Ruby on Rails
Web Development for the iPhone is still relevant.

Agenda
Safari Browser
iPhone Web-App Development Overview
Ruby on Rails Demo
Finish-up

Hi, I’m Andy

Hi, I’m Andy
I’m an iPhone Developer

Hi, I’m Andy
I’m an iPhone Developer

Hi, I’m Andy
I’m an iPhone Developer
Ninth Division

Hi, I’m Andy
I’m an iPhone Developer
Ninth Division
Build applications one the Apple Platforms.

Safari
Web Browser

Desktop and Mobile

Desktop and Mobile

Browsers Evolved

Browser History

Konqueror Timeline

Konqueror Timeline
Version 1 Version 2
1996
October 23, 2000
Version 4
2008
Switch to KHTML

Webkit Timeline
www.webkit.org

Webkit Timeline
www.webkit.org
New Javascript Engine
June 2, 2008
Begin work Safari first adaption
2002 October 23, 2000
Open Source
June 7, 2005
HTML 5
Email to KDE Move from Nov 2007
mailing list from KTHML
Apple to
Webkit
Dec. 2005

Safari Timeline

Safari Timeline
Version 1
2003
Version 2
2005
Version 3
2007 Version 4
2009
Steve Announces Mac OSX 10.4 Mac OSX 10.6
Mac OSX Mac OSX 10.5
10.2 & 10.3

Safari Browser Features
Mobile Desktop
AJAX
HTML 5
CSS 3
Offline Storage
Developer Tools *
Effects / Media
* different per browser

Safari Browser Features
Mobile Desktop
AJAX
HTML 5
CSS 3
Offline Storage
Developer Tools *
Effects / Media
* different per browser

Safari Browser Features
Mobile Desktop
AJAX
HTML 5
CSS 3
Offline Storage
Developer Tools *
Effects / Media
* different per browser

Developer Tools

Developer Tools

Developer Tools

Developer Tools (2)

Developer Tools (2)

Developer Tools (2)

Developer Tools (2)

CSS

CSS

CSS

CSS

CSS

CSS

CSS

Want more CSS Recipes?
Then Go Here

Excitement
Safari Mobile
Location Aware
Better Offline Storage
Flash Player
Copy / Paste

Excitement
Safari Mobile
Location Aware
Better Offline Storage
Flash Player
Copy / Paste

Excitement
Safari Mobile
Location Aware
Better Offline Storage
Flash Player
Copy / Paste

iPhone Web
Development

Design Gotchas
Thumbs - no pointer In and out of network
coverage
Thumbs usually 44x44
pixels iPhone / Standard style
sheet [ provide both ].
Mouse pointer 12x12
pixels App or Webpage?
Less screen size

Design Pointers
Simplify the interface
as much as you can.
Tell user what is
happening.
Consistent design
Interruptions
Use the phone!

What doesn’t work.
Javascript mouseover, mouseout, :hover and tooltips
onkeydown, onkeypress, onkeyup,
No streaming of files
Files less than 10MB
Javascript must execute in 5 seconds
Safari support GZIP!
Framesets will make your life hell.

General Notes
Optimize
Throw out your Javascript/CSS frameworks.
Load your site in fragments.
I love the iPhone too, but remember there are others.
When you are done optimizing, optimize your site more

Human Interface Guidelines
One of the most important documents as an
iPhone developer - native and web.

Human Interface Guidelines
One of the most important documents as an
iPhone developer - native and web.

Human Interface Guidelines
One of the most important documents as an
iPhone developer - native and web.
Download it here later

iPhone SDK Timeline
“All you need is the Web Browser” - Steve

iPhone SDK Timeline
“All you need is the Web Browser” - Steve
iPhone Announced
Jan. 2007
iPhone SDK
March 2008
iPhone Available iPhone 2 Public
June 2007 July 2008
SDK is Webkit Open First Fart
Closed Beta App
Freak out

Safari Mobile Examples
Weather Underground
TA-DA List
Flickr.com
Twitter.com

Dashcode.app
Honestly, I hate it.

Webkit Embedded
Not going to talk much about this, but just so you
know... you can embed the core of safari in your
native iPhone App.

iUI
http://code.google.com/p/iui/
“We will rock your world when you want to build a
native looking iPhone web application”

CiUI
http://code.google.com/p/ciui-dev/
“We are iUI with a slightly different design”

Tools needed
iPhone SDK
iPhoney
Your iPhone or iPod-Touch

Apple Developer Connection
Let’s all create an account

Safari / iPhone Development Center
Did Andy show you these links?

Ruby on Rails

Code.
No slides for this section. ;-)

Cocoa User Group
Focus on Cocoa and Cocoa-touch
.... but include: Mac, iPhone, iPhone-web, Mac-
web, XCode, Interface Builder, Safari

Open Debate
lets start a flame war.