Embed Size (px)
DESCRIPTION
Slides from Mobile Portland March 2008 introducing the new web features released with the iPhone SDK.
Citation preview
iPhone SDK for Web Application Developers
Jason Grigsby • Mobile Portland • March 24, 2008
http://cloudfour.com • http://userfirstweb.com • http://twitter.com/grigs • [email protected]
• Quick overview of web dev for the iPhone• New features of Safari announced with SDK• Web development tools provided by SDK• Resources for more information
Web Apps with the iPhone SDK
iPhone = Basic Web Development w/ Tweaks
• HTML, XHTML, CSS, Javascript
• Avoid frames
• No flash, java, xslt, plugins, mouse-over, hover styles, wml, file uploads & downloads
• Need to consider speed of connection and processor
Configuring the View Port
<meta name = "viewport" content = "width=device-width" /><meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no" />
Default Javascript Events
Plus orientation and onorientationchange
New Features with the SDK
Javascript Enhancements — HTML 5 Spec
getElementsByClassNamevar myDivs = document.getElementsByClassName(“myDivClass”);
querySelector()var fooOrBar = document.querySelector(“#foo, #bar”);
querySelectorAll()var errors = document.querySelectorAll(“span.error”);
The Case for Using Native Selectors
Source: http://webkit.org/blog/153/webkit-gets-native-getelementsbyclassname/
iPhone Gestures
• iPhone will support javascript access to gestures:
• touchstart, touchmove, touchend, touchcancel
• gesturestart, gesturechange, gestureend
• Can determine the number of fingers being used, whether or not the user rotating or pinching the content.
• Unfortunately, the documentation for these new features is incomplete.
Native SVG 1.1 Support
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250" height="100"style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>
•Vector-based•Rich graphics•Some animation•Highly compressible
Use in IMG Tag:<img src=“logo.svg” />
Use in CSS:background-image: url(“logo.svg”)
CSS Effects: Transforms
• Transformations applied before an elements is rendered.
• Available in both 2d and 3d space.
• Some options:• matrix• translate, translate3d• rotate, rotate3d• scale, scale3d• scale
-webkit-transform -webkit-transform-origin -webkit-perspective -webkit-transform-style -webkit-backface-visibility
CSS Effects: Transitions
• Provides easy to use animation in CSS
• Transitions are implicit: You define the start and end of the transition, not the in between steps.
• Animation is hardware accelerated.
• Available properties• -webkit-transition-property• -webkit-transition-duration• -webkit-transition-timing-
function
<head><style type="text/css" media="screen">div { -webkit-transition-property: opacity; -webkit-transition-duration: 2s;}div.fadeAway { opacity:0;}</style></head><body><div style="width:100px; height:100px; background-color:blue;" onclick="this.className = 'fadeAway'">Tap to fade</div>
CSS Effects: Animation
• Transitions are explicit: You define key frames for the animation.
• Animation is hardware accelerated.
• Available properties• -webkit-animation-name • -webkit-animation-duration • -webkit-animation-timing-
function • -webkit-animation-iteration-
count • -webkit-animation-direction • -webkit-animation-play-state • -webkit-animation-delay
Offline Database SQLite
db.transaction( function (transaction) { transaction.executeSql("UPDATE people set shirt=? where name=?;", [ shirt, name ]); // array of values for the ? placeholders });
Full Screen Mode
• Requires the user to add your web page to their home screen
• Need to set apple-touch-icon.png
• Add meta tag:
<meta name=“apple-touch-fullscreen” content=“yes” />
• Any new windows will open
Which SDK Features Can You Use Today?
iPhone OS 1.1.4 Safari 3.1 iPhone OS 2.0 (beta)
Default javascriptOrientationXHTMLCSSViewport
Currently on iPhones
JS enhancementsSVGCSS effectsOffline database
GesturesFull screen mode
SDK Tools for Web Developers
Dashcode
iPhone Simulator (a.k.a. Aspen Simulator)
• First real simulator. iPhoney doesn’t cut it.
• It is called ASPEN Simulator. Don’t bother searching for the iPhone simulator.
• /Developer/Platforms/AspenSimulator.platform/Developer/Applications/Aspen Simulator !!
• Supports all iPhone specific options including eventually gestures (hold option)
Resources
• Apple Developer Center: http://developer.apple.com/iphone/
• iPhone Google Group: http://groups.google.com/group/iphonewebdev
• Web Kit: http://webkit.org
• iPhone Developer’s Wiki: http://www.kudit.com/wiki/
• DevPhone: http://devphone.com
• iPhone Atlas: http://iphoneatlas.com
• iPhone News Blog: http://iphonenewsblog.com
Thank you for attending Mobile Portland.
Next Meeting:
April 28th
Subscribe athttp://mobileportland.com
Join our Google Group:http://groups.google.com/group/mobile-portland/
