Attending an Apple Tech Talk at the Millennium Hotel New York was a good use of time today. The evangelism team, despite evangelizing, is highly competent and I came away satisfied with decent knowledge consumption.
The event had a massively different feel than John Resig described last year.
There was a lot of JavaScript hate by attendees (“blah blah… GWT is the only thing we trust… blah blah JavaScript is a stupid language…”).
This year it was all about at least 50% about the web. Apple has exposed touch events, multi-touch events, gestures, location based services, and rotation to javascript both for polling and callbacks. Some of the credit for the newfound excitement around Safari and iPhone web apps should probably be shared with WebKit’s HTML5 (file caching and SQLite)… All of which are supported in the iPhone 2.2 OS release.
Over the next few days I’ll have more details on specific highlights. For now, here are my condensed raw notes.
iPhone Safari browser, starting with the basic stuff:
- If not specified, assumes a web page width of 980 pixels and scales to 360
- To override, add <meta name=”viewport” content=”width=720″ /> (where you would replace 720 with your pages width)
- Or, if you’ve optimized for the full screen of the iPhone, add <meta name=”viewport” content=”device-width” />
- Additionally, you can specify a width, height, initial-scale, minimum-scale, maximum-scale, and user-scalable. If width, height, or initial scale are set, Safari will auto-calculate the others (i.e. if width is set, height and initial-scale will be handled for you). user-scalable means the user can not scale via zoom-in or zoom-out.
- Optimize for cellular networks (duh!). Latency is often a bigger factor than bandwidth on Edge and 3G (duh!). Beat this by using fewer, slightly larger resources in a page load (i.e. use a single image and use CSS to display portions of it instead of loading multiple separate images for buttons, etc).
- A nice tool for simulating throttled bandwidth is ipfw (duh, but I’ll this to my blog for others)… Do the following to enable throttling (from terminal.app): 1) sudo su 2) ipfw add pipe 1 src-port http 3) ipfw pipe 1 config delay 200 bw 700kbit/s. Do the following to kill the throttling afterwards: 1) ipfw flush.
- Give the latest rev of Dashcode a try to get a feel for how various transforms, etc, work. See the source in the supplied samples.
Home screen icons, total beginner stuff, but necessary (mostly so I remember the filenames):
- For a custom, iPhone specific, icon from your site (a la favicon), place apple-touch-icon.png at the docroot (http://www.apple.com/apple-touch-icon.png).
- For a custom icon, without the shiny polish (not recommended unless you’ve made it shiny already), use apple-touch-icon-precomposed.png.
How to make a web app feel like a real app (no nav bar, custom status bar, control of rotation, rotation notification, etc).
- To hide the Safari UI: <meta name=”apple-mobile-web-app-capable” content=”yes” />
- To change the status bar (the top space with signal and battery indicators): <meta name=”apple-mobile-web-app-status-bar-style” content=”grey” /> (replace “grey” with “black” or “black translucent”)
- When the Safari UI is hidden you are locked to Portrait mode (maybe a good thing!)
- You can get notifications for rotation and can rotate your elements via callbacks with the following:
<body onorientationchange=”updateOrientation();”> …
function updateOrientation(degrees) {
case 0:
case -90:
case 90:
}
Touch and gestures via JavaScript:
- Use <div ontouchstart=”trackTouches(event)”… and you’ll need three arrays for your touch points: var allTouches = event.touches; var targetTouches = event.targetTouches; var changedTouches = event.changedTouches;
- When a touch occurs, you’ll receive a touchstart notification.
- When a touch moves, you receive a touchchange notification.
- When a finger is lifted, you’ll receive a touchend or touchcancel (if the finger was moved off the screen).
- For gestures (pinching and rotating), the same notifications will be sent, but as gesturestart, gesturechange, and gestureend (or gesturecancel).
- For pinch gestures, you have scale information. A scale less than 1.0 means zooming out (fingers moving closer together). A scale greater than 1.0 means zooming in (fingers spreading apart).
- For rotation gestures, notifications are sent in degrees. Negative numbers indicate counterclockwise and positive numbers are clockwise.
- Transforms specific to the iPhone are provided, such as calling “-wekit-transform: rotate(-20deg);” for an object you wish to rotate. Make this type of call from a touch or gesture callback and you have dragability from within a web app. Additional parameters can be used during rotation, such as “-webkit-transform: rotate(-20deg); -webkit-transform-origin: top left;” to make the rotation of the object hinge on the top left (default is the center).
- An example of rotating, scaling, and moving an object: “document.getElementById(‘myFlower’).style.webkitTransform = ‘rotate(360deg) scale(0.5) translate(600px, 50px)’;
- Transforms are usually given a period of time to perform the transform (i.e. -webkit-transition-duration: 2s;). During that time the transform can be modified so as to transform in a linear, ease, ease-in, ease-out, ease-in-out, or a cubic-bezier form.
Database support for SQLite and file caching (client side, duh):
- HTML5’s SQLite spec is supported by iPhone’s Safari
- The sample code in the presentation creates a 2.5 megabyte database. Not worth mentioning otherwise, but I was stoked with the thought of creating reasonably large DBs locally… Maybe we’ll see some radically enhanced Gmail and Google Reader web apps. Airplane mode will be a little nicer.
- filecache ability is in iPhone 2.2. This was too new and no slides were available… Still, another airplane friendly feature and would be great for flickr or other media intensive sites.
And that’s just on web apps. My notes on native apps are more sparse, partly because it was the end of the day and partly because it’s old news.
A nice finish for the day was a presentation on submitting one’s application to Apple. I’ll save those notes for later this week – too much commentary I want to include to just put it up raw ;)
Food and refreshments during the Tech Talk were top notch. They know how to take care of the folks that build their platform.
Thanks for taking the time to write this up. I found it helpful as I was making a tiny little webApp for the school where I teach.
Glad I could help! Check back in the next few days while add more
detail and examples.
Thanks for taking the time to write this up. I found it helpful as I was making a tiny little webApp for the school where I teach.
Glad I could help! Check back in the next few days while add more
detail and examples.