iPhone Sdk For Web Developers
Upcoming SlideShare
Loading in...5

iPhone Sdk For Web Developers



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

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



Total Views
Views on SlideShare
Embed Views



7 Embeds 138

http://www.slideshare.net 98
http://mobileportland.com 20
http://www.techgig.com 13
http://www.mobileportland.com 3
http://slideshare.phreadz.com 2
http://translate.googleusercontent.com 1
http://localhost 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

iPhone Sdk For Web Developers iPhone Sdk For Web Developers Presentation Transcript

  • 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
  • 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 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 = quot;viewportquot; content = quot;width=device-widthquot; /> <meta name = quot;viewportquot; content = quot;initial-scale = 2.3, user-scalable = noquot; />
  • 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 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=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”)
  • 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=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
  • 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(quot;UPDATE people set shirt=? where name=?;quot;, [ 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 Offline 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 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 at http://mobileportland.com Join our Google Group: http://groups.google.com/ group/mobile-portland/