iPhonify You Web - Understanding iPhone/Android WebDev


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Since everyone and their Mom has an iPhone, we need to start building web apps that work (well) on them. We will be taking a look at a few techniques for developing iPhone-ready websites. Then we will dive into using ASP.NET to build a working iPhone-optimized web app. The entire app will be an ASP.NET website built in Visual Studio 2008. By the end of this session you will be ready to build an iPhone version of your ASP.NET project without ever leaving Visual Studio.The iPhone has become a common device in the hands of your end users. You’ll learn everything you need to know in order to build Web applications targeted for the iPhone. This session will give you an overview of the iPhone in general including the specs, UI, and behavior. Plus, it takes a look at some popular iPhone sites as well as the tools you may use to build them. After a walk through storyboarding an iPhone Web app as a concept and developing it in ASP.NET, you will be ready to extend your site to the iPhone without ever leaving Visual Studio.
  • http://help.apple.com/ipodtouch/guide/
  • http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/iPhoneWebAppHIG/MetricsLayout/MetricsLayout.html#//apple_ref/doc/uid/TP40007900-CH6-SW1
  • iPhonify You Web - Understanding iPhone/Android WebDev

    1. 1. iPhonify Your Web Apps<br />Chris Bannon<br />http://twitter.com/b4nn0n<br />chrisb@componentone.com<br />
    2. 2. “A lot of your users have one of these!”<br />
    3. 3. iPhone touch gestures<br />Tap<br />Pinch<br />Click<br />Zoom<br />Drag/Scroll/Flick<br />Typing<br />Scroll<br />Input<br />http://help.apple.com/ipodtouch/guide/ <br />
    4. 4. Our Website on the iPhone<br />
    5. 5. A Better Experience<br />
    6. 6. Facebook on the iPhone<br />
    7. 7. CNN on iPhone<br />
    8. 8. Optimize your web content for the iPhone<br />Design a UX that follows Apple’s guidelines<br />Building Great iPhone Sites<br />
    9. 9. Navigation Model<br />iPhone applications can contain as many different screens as necessary, but<br />users access and see them sequentially, never simultaneously.<br />
    10. 10. Add a home screen icon<br />Add a startup screen<br />Specify the viewport settings<br />Quick & Easy<br />
    11. 11. <link rel="apple-touch-icon” href="/icon.png"/> <br />Add a home screen icon<br /><link rel="apple-touch-icon-precomposed” href="/icon_pre.png"/> <br />
    12. 12. <link rel="apple-touch-startup-image" href="/startup.png"> <br />Add a startup screen<br />
    13. 13. <meta name = "viewport" content = "width = 590px"> <br />Configure the Viewport<br />
    14. 14. Email<a href="mailto:frank@example.com">John Frank</a> <br />Phone<a href="tel:1-408-555-5555">1-408-555-5555</a><br />Text Message<a href="sms:1-408-555-1212">New SMS Message</a> <br />Google Maps<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a> <br />YouTube<a href="http://www.youtube.com/v/VIDEO_IDENTIFIER">Play Video</a> <br />Use hyperlinks<br />
    15. 15. <link media="only screen and (max-device-width: 480px)" href=“iphone.css" type= "text/css" rel="stylesheet"> <br />Add an iPhonestylesheet<br />
    16. 16. Metrics – Portrait Orientation<br />
    17. 17. Metrics – Landscape Orientation<br />
    18. 18. Metrics - Lists<br />
    19. 19. Tools for iPhone Web Development<br />iPhone SDK (Dashcode)<br />Apple dev only<br />http://developer.apple.com/iphone/<br />jQTouch<br />Client-side (jQuery)<br />http://www.jqtouch.com/<br />Studio for iPhone<br />Server & Client (ASP.NET + jQuery)<br />http://www.componentone.com/<br />
    20. 20. ASP.NET Controls<br />LaunchPad<br />ViewPort<br />NavigationList<br />Buttons<br />Slider<br />TabBarController<br />MultiView<br />PickerView<br />Calendar<br />CoverFlow<br />ComponentOne Studio for iPhone<br />http://www.componentone.com/<br />
    21. 21. Tools for iPhone Testing<br />                                  <br />iPhone / iPod Touch<br />Best method for testing<br />http://www.apple.com<br />Mac w/ Windows using Fusion<br />Great for developing & testing together<br />(Being used for this presentation)<br />http://www.vmware.com/products/fusion/ <br />Safari for Windows<br />Similar browser rendering for basic tests<br />http://www.apple.com/safari/<br />
    22. 22. Time to see some code!<br />What time is it?<br />
    23. 23. jQTouch<br />http://www.jqtouch.com/<br />ComponentOne Studio for iPhone<br />http://bit.ly/studio4iphone<br />iPhone Dev Center<br />https://developer.apple.com/iphone<br />VMWare Fusion<br />http://www.vmware.com/products/fusion/<br />Safari for Windows<br />https://www.apple.com/safari<br />My Blog<br />http://bit.ly/webdevblog<br />Resources<br />
    24. 24. Rate This Session!<br />http://speakerrate.com/banzor<br />
    25. 25. Spam Twitter for a Free License!<br />#studio4iphone<br />Tweet for a chance to win!<br />Example: Wow, #studio4iphone from @ComponentOne is the shizz! - http://bit.ly/studio4iphone<br />
    26. 26. Thanks!<br />Chris Bannon<br />http://twitter.com/b4nn0n<br />chrisb@componentone.com<br />