Your SlideShare is downloading. ×
Bar Camp Iphone Web Hackery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Bar Camp Iphone Web Hackery

927
views

Published on

Published in: Technology, News & Politics

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
927
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. iPhone Web-App Hackery Presented by Andy Edmonds @ BarCampAtl08
  • 2. Demo: iBlipper.com
  • 3. Building Blocks
    • Orientation Trick
    • Canvas
    • Animation options
      • jQuery
      • CSS Transforms
      • Dojo ( charts too )
    • Working with multitouch
      • Downlevel mouse experience
      • jQuery plugin
    • Standard UI Starters
      • UiUI Kit
      • IUI slide panel
    • Community
      • iphoneWebDev
  • 4. Screen Control
    • Annoying URL Bar?
      • Just scroll
    • Viewport Tag
      • Min,max zoom
      • Initial zoom
      • Canvas size
    • iPhone OS 2.1 introduces ability to go full screen from a home screen bookmark
        • Ajaxian
        • Apple
  • 5. Fun Opportunity for Zooming UIs
    • New Reader
      • Zoom to details
    • See http://delicious.com/andyed/zui
    • Or http://en.wikipedia.org/wiki/Zooming_user_interface
  • 6. iBlipper CSS Transforms
    • Use percent
    • markers for time
    • in your CSS.
  • 7. Applying CSS Transforms with JS
    • node.style.webkitAnimationName = 'fade,slide';
    • node.style.webkitAnimationDuration= “1000,1000”;
  • 8. Orientation Trick
    • var currentWidth;
    • var currentHeight; var updateLayout = function(){
    • if (window.innerWidth != currentWidth) { currentWidth = window.innerWidth; currentHeight = window.innerHeight; var orient = (currentWidth == 320) ? "profile" : "landscape"; document.body.setAttribute("orient", orient); window.scrollTo(0, 1);
    • }};
    Ugly but functional hack to set up an interval to inspect the window width
  • 9. Development and Debugging
    • Apple iPhone Simulator
    • Linked debug console on desktop
  • 10. Happy Hacking!
    • AndyEd
    • http://surfmind.com