Bar Camp Iphone Web Hackery

1,175 views
1,108 views

Published on

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,175
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Bar Camp Iphone Web Hackery

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

×