iPhone Sdk For Web Developers


Published on

Slides from Mobile Portland March 2008 introducing the new web features released with the iPhone SDK.

Published in: Business, Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

iPhone Sdk For Web Developers

  1. iPhone SDK for Web Application Developers Jason Grigsby • Mobile Portland • March 24, 2008 http://cloudfour.com • http://userfirstweb.com • http://twitter.com/grigs • jason@cloudfour.com
  2. 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
  3. 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
  4. Configuring the View Port <meta name = quot;viewportquot; content = quot;width=device-widthquot; /> <meta name = quot;viewportquot; content = quot;initial-scale = 2.3, user-scalable = noquot; />
  5. Default Javascript Events Plus orientation and onorientationchange
  6. New Features with the SDK
  7. 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”);
  8. The Case for Using Native Selectors Source: http://webkit.org/blog/153/webkit-gets-native-getelementsbyclassname/
  9. 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.
  10. Native SVG 1.1 Support <?xml version=quot;1.0quot; standalone=quot;noquot;?> <!DOCTYPE svg PUBLIC quot;-//W3C//DTD SVG 1.1//ENquot; quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtdquot;> <svg width=quot;100%quot; height=quot;100%quot; version=quot;1.1quot; xmlns=quot;http://www.w3.org/2000/svgquot;> <rect x=quot;20quot; y=quot;20quot; rx=quot;20quot; ry=quot;20quot; width=quot;250quot; height=quot;100quot; style=quot;fill:red;stroke:black;stroke-width:5;opacity:0.5quot;/> </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”)
  11. 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
  12. CSS Effects: Transitions • Provides easy to use <head> animation in CSS <style type=quot;text/cssquot; media=quot;screenquot;> div { • Transitions are implicit: You -webkit-transition-property: opacity; -webkit-transition-duration: 2s; define 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=quot;width:100px; height:100px; • Available properties background-color:blue;quot; onclick=quot;this.className = 'fadeAway'quot;> • -webkit-transition-property Tap to fade </div> • -webkit-transition-duration • -webkit-transition-timing- function
  13. 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
  14. Offline Database SQLite db.transaction( function (transaction) { transaction.executeSql(quot;UPDATE people set shirt=? where name=?;quot;, [ shirt, name ]); // array of values for the ? placeholders } );
  15. 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
  16. 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 Offline database Viewport Currently on iPhones
  17. SDK Tools for Web Developers
  18. Dashcode
  19. 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)
  20. 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
  21. 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/