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 experi

ence – 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

Fun Opportunity for Zooming UIs

• New Reader– Zoom to details

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

• Orhttp://en.wikipedia.org/wiki/Zooming_user_interface

iBlipper CSS Transforms

Use percent markers for timein your CSS.

Applying CSS Transforms with JS

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

Development and Debugging

• Apple iPhone Simulator• Linked debug console on desktop

Happy Hacking!

AndyEdhttp://surfmind.com