iPhone Sdk For Web Developers

iPhone SDK for Web Application Developers Jason Grigsby • Mobile Portland • March 24, 2008 http://cloudfour.com • http://userﬁrstweb.com • http://twitter.com/grigs • jason@cloudfour.com

Web Apps with the iPhone SDK 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

iPhone = Basic Web Development w/ Tweaks • HTML, XHTML, CSS, Javascript • Avoid frames • No ﬂash, java, xslt, plugins, mouse-over, hover styles, wml, ﬁle uploads & downloads • Need to consider speed of connection and processor

Conﬁguring 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 getElementsByClassName var 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 ﬁngers 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=\"ﬁll:red;stroke:black;stroke-width:5;opacity:0.5\"/> </svg> Use in IMG Tag: •Vector-based <img src=“logo.svg” /> •Rich graphics •Some animation Use in CSS: •Highly compressible 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 -webkit-transform • rotate, rotate3d -webkit-transform-origin • scale, scale3d -webkit-perspective -webkit-transform-style • scale -webkit-backface-visibility

CSS Effects: Transitions • Provides easy to use <head> animation in CSS <style type=\"text/css\" media=\"screen\"> div { • Transitions are implicit: You -webkit-transition-property: opacity; -webkit-transition-duration: 2s; deﬁne the start and end of } the transition, not the in div.fadeAway { between steps. opacity:0; } </style> • Animation is hardware </head> accelerated. <body> <div style=\"width:100px; height:100px; • Available properties background-color:blue;\" onclick=\"this.className = 'fadeAway'\"> • -webkit-transition-property Tap to fade </div> • -webkit-transition-duration • -webkit-transition-timing- function

CSS Effects: Animation • Transitions are explicit: You deﬁne 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

Ofﬂine 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 javascript JS enhancements Gestures Orientation SVG Full screen mode XHTML CSS effects CSS Ofﬂine database Viewport Currently on iPhones

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 speciﬁc 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 at http://mobileportland.com Join our Google Group: http://groups.google.com/ group/mobile-portland/

iPhone Sdk For Web Developers

1 comments

Notes on slide 1

18 Favorites & 1 Group