iPhonify You Web - Understanding iPhone/Android WebDev
-
Upload
chris-bannon -
Category
Technology
-
view
198 -
download
1
description
Transcript of iPhonify You Web - Understanding iPhone/Android WebDev
![Page 2: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/2.jpg)
“A lot of your users have one of these!”
![Page 3: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/3.jpg)
iPhone touch gestures
Click
Tap
Scroll
Drag/Scroll/FlickInput
Typing
Zoom
Pinch
http://help.apple.com/ipodtouch/guide/
![Page 4: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/4.jpg)
Our Website on the iPhone
![Page 5: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/5.jpg)
A Better Experience
![Page 6: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/6.jpg)
Facebook on the iPhone
![Page 7: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/7.jpg)
CNN on iPhone
![Page 8: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/8.jpg)
• Optimize your web content for the iPhone
• Design a UX that follows Apple’s guidelines
Building Great iPhone Sites
![Page 9: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/9.jpg)
Navigation Model
iPhone applications can contain as many different screens as necessary, butusers access and see them sequentially, never simultaneously.
![Page 10: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/10.jpg)
• Add a home screen icon• Add a startup screen• Specify the viewport settings
Quick & Easy
![Page 11: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/11.jpg)
<link rel="apple-touch-icon” href="/icon.png"/>
Add a home screen icon
<link rel="apple-touch-icon-precomposed” href="/icon_pre.png"/>
![Page 12: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/12.jpg)
<link rel="apple-touch-startup-image" href="/startup.png">
Add a startup screen
![Page 13: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/13.jpg)
<meta name = "viewport" content = "width = 590px">
Configure the Viewport
![Page 14: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/14.jpg)
• 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
![Page 15: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/15.jpg)
<link media="only screen and (max-device-width: 480px)" href=“iphone.css" type= "text/css" rel="stylesheet">
Add an iPhone stylesheet
![Page 16: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/16.jpg)
Metrics – Portrait Orientation
![Page 17: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/17.jpg)
Metrics – Landscape Orientation
![Page 18: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/18.jpg)
Metrics - Lists
![Page 19: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/19.jpg)
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/
![Page 20: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/20.jpg)
ASP.NET Controls• LaunchPad• ViewPort• NavigationList• Buttons• Slider• TabBarController• MultiView• PickerView• Calendar• CoverFlow
ComponentOne Studio for iPhone
http://www.componentone.com/
![Page 21: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/21.jpg)
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/
![Page 22: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/22.jpg)
Time to see some code!
What time is it?
![Page 23: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/23.jpg)
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
![Page 24: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/24.jpg)
Rate This Session!
http://speakerrate.com/banzor
![Page 25: iPhonify You Web - Understanding iPhone/Android WebDev](https://reader034.fdocuments.in/reader034/viewer/2022050702/54c6bde54a7959b72d8b46bd/html5/thumbnails/25.jpg)
Spam Twitter for a Free License!
#studio4iphoneTweet for a chance to win!
Example: Wow, #studio4iphone from @ComponentOne is the shizz! - http://bit.ly/studio4iphone