• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
iPhonify You Web - Understanding iPhone/Android WebDev
 

iPhonify You Web - Understanding iPhone/Android WebDev

on

  • 2,534 views

 

Statistics

Views

Total Views
2,534
Views on SlideShare
2,534
Embed Views
0

Actions

Likes
2
Downloads
11
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 iPhonify You Web - Understanding iPhone/Android WebDev Presentation Transcript

  • iPhonify Your Web Apps
    Chris Bannon
    http://twitter.com/b4nn0n
    chrisb@componentone.com
  • “A lot of your users have one of these!”
  • iPhone touch gestures
    Tap
    Pinch
    Click
    Zoom
    Drag/Scroll/Flick
    Typing
    Scroll
    Input
    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, but
    users 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:frank@example.com">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 iPhonestylesheet
  • Metrics – Portrait Orientation
  • Metrics – Landscape Orientation
  • Metrics - Lists
  • Tools for iPhone Web Development
    iPhone SDK (Dashcode)
    Apple dev only
    http://developer.apple.com/iphone/
    jQTouch
    Client-side (jQuery)
    http://www.jqtouch.com/
    Studio for iPhone
    Server & 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 Touch
    Best method for testing
    http://www.apple.com
    Mac w/ Windows using Fusion
    Great for developing & testing together
    (Being used for this presentation)
    http://www.vmware.com/products/fusion/
    Safari for Windows
    Similar browser rendering for basic tests
    http://www.apple.com/safari/
  • Time to see some code!
    What time is it?
  • jQTouch
    http://www.jqtouch.com/
    ComponentOne Studio for iPhone
    http://bit.ly/studio4iphone
    iPhone Dev Center
    https://developer.apple.com/iphone
    VMWare Fusion
    http://www.vmware.com/products/fusion/
    Safari for Windows
    https://www.apple.com/safari
    My Blog
    http://bit.ly/webdevblog
    Resources
  • Rate This Session!
    http://speakerrate.com/banzor
  • Spam Twitter for a Free License!
    #studio4iphone
    Tweet for a chance to win!
    Example: Wow, #studio4iphone from @ComponentOne is the shizz! - http://bit.ly/studio4iphone
  • Thanks!
    Chris Bannon
    http://twitter.com/b4nn0n
    chrisb@componentone.com