iphonify you web - understanding iphone/android webdev
DESCRIPTION
TRANSCRIPT
“A lot of your users have one of these!”
iPhone touch gestures
Click
Tap
Scroll
Drag/Scroll/FlickInput
Typing
Zoom
Pinch
http://help.apple.com/ipodtouch/guide/
Our Website on the iPhone
A Better Experience
Facebook on the iPhone
CNN on iPhone
• Optimize your web content for the iPhone
• Design a UX that follows Apple’s guidelines
Building Great iPhone Sites
Navigation Model
iPhone applications can contain as many different screens as necessary, butusers access and see them sequentially, never simultaneously.
• Add a home screen icon• Add a startup screen• Specify the viewport settings
Quick & Easy
<link rel="apple-touch-icon” href="/icon.png"/>
Add a home screen icon
<link rel="apple-touch-icon-precomposed” href="/icon_pre.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">
Add a startup screen
<meta name = "viewport" content = "width = 590px">
Configure the Viewport
• Email<a href="mailto:[email protected]">John Frank</a>
• Phone<a href="tel:1-408-555-5555">1-408-555-5555</a>
• Text Message<a href="sms:1-408-555-1212">New SMS Message</a>
• Google Maps<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>
• YouTube<a href="http://www.youtube.com/v/VIDEO_IDENTIFIER">Play Video</a>
Use hyperlinks
<link media="only screen and (max-device-width: 480px)" href=“iphone.css" type= "text/css" rel="stylesheet">
Add an iPhone stylesheet
Metrics – Portrait Orientation
Metrics – Landscape Orientation
Metrics - Lists
Tools for iPhone Web Development
iPhone SDK (Dashcode)Apple dev onlyhttp://developer.apple.com/iphone/
jQTouchClient-side (jQuery)http://www.jqtouch.com/
Studio for iPhoneServer & Client (ASP.NET + jQuery)http://www.componentone.com/
ASP.NET Controls• LaunchPad• ViewPort• NavigationList• Buttons• Slider• TabBarController• MultiView• PickerView• Calendar• CoverFlow
ComponentOne Studio for iPhone
http://www.componentone.com/
Tools for iPhone Testing
iPhone / iPod TouchBest method for testinghttp://www.apple.com
Mac w/ Windows using FusionGreat for developing & testing together(Being used for this presentation)
http://www.vmware.com/products/fusion/
Safari for WindowsSimilar browser rendering for basic testshttp://www.apple.com/safari/
Time to see some code!
What time is it?
jQTouchhttp://www.jqtouch.com/
ComponentOne Studio for iPhonehttp://bit.ly/studio4iphone
iPhone Dev Centerhttps://developer.apple.com/iphone
VMWare Fusionhttp://www.vmware.com/products/fusion/
Safari for Windowshttps://www.apple.com/safari
My Bloghttp://bit.ly/webdevblog
Resources
Rate This Session!
http://speakerrate.com/banzor
Spam Twitter for a Free License!
#studio4iphoneTweet for a chance to win!
Example: Wow, #studio4iphone from @ComponentOne is the shizz! - http://bit.ly/studio4iphone
