Cm i padwebdev_lunch_learn
Upcoming SlideShare
Loading in...5
×
 

Cm i padwebdev_lunch_learn

on

  • 2,393 views

 

Statistics

Views

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

Actions

Likes
1
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

Cm i padwebdev_lunch_learn Cm i padwebdev_lunch_learn Presentation Transcript

  • iPad Web DevelopmentA magical and revolutionary presentationDecember 13, 2010By Abraham Velazquez &Alex Zelenskiy© 2010 Critical Mass, Inc. All Rights Reserved
  • Native App vs. Web AppObjective C + APIs/Backend HTML5/CSS3/JS + BackendHigher Cost ≈ 3-5x Considerably lower cost because they are more commonNative does more, its faster/smoother languagesApp Store Promotion Instant updatesUpdate require apple approval Native does more, is faster/smootherNative sits on the device Deployed online and viewed via safari or pulled into application wrapperNative is best when you need tocache/store a lot of content that does No internet, no app. There are somenot change. caching options, but limited.Access to all iOS APIs Access to Limited APIs
  • Web Apps on iPad vs. iPhone vs. AndroidAll 3 use webkit... but!iPad iPhone Android 320x480 240x6401024x768 640x960 360x640APIs: Location, 320x480Orientation, 480x800Accelerometer, Tap APIs: Location, 600x1024 (Tab)Targets and swipes Orientation, Accelerometer, Tap APIs: Location,Video, Local Storage Targets and swipes Orientation, Accelerometer,CSS3 Fonts Video, Local Storage Camera CSS3 Fonts Video, Local Storage Flash! (Kinda) Poor Font Support
  • iDevices: stop worrying about this stuff! Reliable Layouts (IE6 is dead) Great CSS3 Support because its the almighty WebKit Flash mobile is dead (Kinda) Mobile Video is standard and reliable Hover events, there is no hover for touch.
  • Start worrying about this, though. 1. Animation/transition performance Transitions are possible, but use wisely. To many will cause poor performance 2. Slow Internet speed Dont overload with high-res images or non-optimized video. Use progressive downloading 3. No fixed positioning No toolbars at top of pages, unless you use a library 4. Need to pay attention how content is being served Web view and mobile safari do not fire the same events, for example. 6. Two screen orientations Design for landscape and portrait How will content re-flow based on position. Headers shrink down, Sidebars become footers
  • Best Practices: Design Your finger is 30 pixels wide! (60pixels on iPhone 4) Give tappable elements in your app a target area of at least 44 x 44 pixels. Keep 12ish pixels between navigation elements (double on iPhone 4). Stick to native styles where ever possible Keep it simple! What are the bare essentials? Test both, in Simulator and load JPG on Device
  • Best Practices 3: UIKeep in mind where users hands are going to be:iPhone uses a bottom naviPad uses split view
  • Examples
  • Side Navigation
  • Best Practices: Development Keep requests down (5-10 per page) No Faux CSS Elements :before or :after Anything that causes dom redraws is bad Use classes for everything (Turn then on/off when you need them) CSS3 is good, but go easy on it Optimize all your images Use CSS/Image sprites, wisely Canvas and SVG elements are pretty good
  • HTML 5Video tags are good.Some of the new HTML form attributes will trigger the alternate screenkeyboards on mobile devices. This is really handy.
  • CSS3background-color: rgba(180, 180, 144, 0.6);opacity: .5;text-shadow: 1px 1px 3px #888;background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0, #444444),color-stop(1, #999999));-webkit-border-radius: 12px;-webkit-box-shadow: 0px 0px 4px #ffffff;-webkit-transition: all 1s ease-in-out;-webkit-transition-property: opacity, left;-webkit-transition-duration: 2s, 4s;transform:skew(35deg);transform:scale(1,0.5);transform:rotate(45deg);transform:translate(10px, 20px);
  • CSS3 You can do this... but don!
  • Font Support - Use it!iosfonts.com list of native fonts on iPad and iPhoneTypekit works on everythingGoogle font directory now works on everything.Use something like fontsquirrel.com to generate fonts in thecorrect formats.Check font licenses before including them.Older iOS versions are at a (50%) risk of crashing when youbind different @font-face weights to the same typeface.
  • Mobile Webkit vs. WebkitMobile webkit is a lot like desktop webkit, except it runs on slowerhardware, tries to scale everything to a tiny screen*, and does notremember what position:fixed is.*unless you tell it not to through the use of meta tags:<meta name="viewport" content="width=device-width, initial-scale=1.0;maximum-scale=1.0;">
  • TricksThere are some undocumented features of webkit that producedesired effects.For example, translate3d can be exploited for smoother rendering:-webkit-transform: translate3d(0,0,0)Unfortunately, stuff like this is not a feature and could be "fixed" byapple at any time.
  • CSS Media Queries<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"><link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">@media only screen and (max-device-width: 1024px) and(orientation:portrait) {}@media only screen and (max-device-width: 1024px) and(orientation:landscape) {}
  • Meta Viewport Tag
  • JavascriptMobile browsers have device-specific javascript events that you areable to hook into: device rotation touch (different from click)Caveat: these are not consistent between mobile safari and webviewin iOS apps.window.addEventListener(orientationchange in window ?orientationchange : resize, foo, false);document.body.className = orientation % 180 == 0 ? vertical : horizontal;
  • JavascriptDont use JS libraries, unless you really need to.Standard JS is reliable.iScroll JS if you have to to use custom scrollingRapahelJS for SVG and graphicsMobile browsers have device-specific JavaScript events that you areable to hook into: device rotation touch (different from click)
  • Backend / AJAXThe back end is going to be pretty much identical.All of the dynamic data, whether you have a web or nativeapp, is likely going to be piped over http.
  • DEPLOY!
  • Questions?