iPhone Web-App Hackery Presented by Andy Edmonds @ BarCampAtl08

Demo: iBlipper.com

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

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

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

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

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

New Reader

Zoom to details

See http://delicious.com/andyed/zui

Or http://en.wikipedia.org/wiki/Zooming_user_interface

iBlipper CSS Transforms Use percent markers for time in your CSS.

Use percent

markers for time

in your CSS.

Applying CSS Transforms with JS node.style.webkitAnimationName = 'fade,slide'; node.style.webkitAnimationDuration= “1000,1000”;

node.style.webkitAnimationName = 'fade,slide';

node.style.webkitAnimationDuration= “1000,1000”;

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

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);

}};

Development and Debugging Apple iPhone Simulator Linked debug console on desktop

Apple iPhone Simulator

Linked debug console on desktop

Happy Hacking! AndyEd http://surfmind.com

AndyEd

http://surfmind.com