Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications

  • 10,078 views
Uploaded on

Michael Smith, senior developer at Magnani Caruso Dutton, will give a tutorial on the latest and greatest CSS techniques for building native-like applications on the iPhone and Palm Pre (and other …

Michael Smith, senior developer at Magnani Caruso Dutton, will give a tutorial on the latest and greatest CSS techniques for building native-like applications on the iPhone and Palm Pre (and other WebKit based browsers) with minimal images and strongly reusable code.

Discussion will include current and future browser support, implementation issues and best practices. We will quickly touch on new JavaScript and HTML 5 features (new events and client side storage) to give a well-rounded example. Example code and demonstrations will be used throughout the talk.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Thanks for posting these!
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
10,078
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
454
Comments
1
Likes
25

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Advanced HTML & CSS Techniques for Developing Webkit Mobile Applications Michael T. Smith Senior Developer, Magnani Caruso Dutton September 16, 2009
  • 2. Who I Am?
  • 3. Who I Am? - Senior Developer, Magnani Caruso Dutton
  • 4. Who I Am? - Senior Developer, Magnani Caruso Dutton - Discover Financial Services, AT&T, London 2012
  • 5. Who I Am? - Senior Developer, Magnani Caruso Dutton - Discover Financial Services, AT&T, London 2012 - Full Time Web Developer
  • 6. Who I Am? - Senior Developer, Magnani Caruso Dutton - Discover Financial Services, AT&T, London 2012 - Full Time Web Developer - Part Time Cocoa Developer
  • 7. iPhone, Pre, Android?
  • 8. iPhone, Pre, Android? - iPhone, iPod touch?
  • 9. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold
  • 10. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre?
  • 11. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre? - 1,500,000 by end of year (?)
  • 12. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre? - 1,500,000 by end of year (?) - Android?
  • 13. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre? - 1,500,000 by end of year (?) - Android? - 8,000,000 by end of year (?)
  • 14. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre? - 1,500,000 by end of year (?) - Android? - 8,000,000 by end of year (?)
  • 15. iPhone, Pre, Android? - iPhone, iPod touch? - More than 45,000,000 sold - Palm Pre? - 1,500,000 by end of year (?) - Android? - 8,000,000 by end of year (?) ...but...
  • 16. WebKit
  • 17. WebKit - WebKit browser engine across all three platforms
  • 18. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all
  • 19. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all - Some differences
  • 20. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all - Some differences - Progressive enhancement
  • 21. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all - Some differences - Progressive enhancement - Somethings will work
  • 22. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all - Some differences - Progressive enhancement - Somethings will work - Others won’t
  • 23. WebKit - WebKit browser engine across all three platforms - Build for one -- test for all - Some differences - Progressive enhancement - Somethings will work - Others won’t - The user doesn’t miss out
  • 24. Webkit Background
  • 25. Webkit Background - Actively developed, open source browser engine
  • 26. Webkit Background - Actively developed, open source browser engine - Dave Hyatt (http://surfingsafari.com), Safari & Webkit Architect
  • 27. Webkit Background - Actively developed, open source browser engine - Dave Hyatt (http://surfingsafari.com), Safari & Webkit Architect - Began implementing CSS extensions that are working drafts for the W3C
  • 28. Let’s begin...
  • 29. “Web Application” Basics
  • 30. “Web Application” Basics - Two forms:
  • 31. “Web Application” Basics - Two forms: - Web Application
  • 32. “Web Application” Basics - Two forms: - Web Application - the original, non-native answer to the SDK
  • 33. “Web Application” Basics - Two forms: - Web Application - the original, non-native answer to the SDK - Web-based App
  • 34. “Web Application” Basics - Two forms: - Web Application - the original, non-native answer to the SDK - Web-based App - going to flickr.com and getting a customized view
  • 35. “Web Application” Basics Web-based App Web App
  • 36. “Web Application” Basics
  • 37. “Web Application” Basics - Form is determined by user and developer
  • 38. “Web Application” Basics - Form is determined by user and developer - User must choose to “Save to Home Screen”
  • 39. “Web Application” Basics - Form is determined by user and developer - User must choose to “Save to Home Screen” - Developer uses HTML meta tags to customize the application for the iPhone
  • 40. HTML
  • 41. HTML <link rel="apple-touch-icon" href="/custom_icon.png">
  • 42. HTML <link rel="apple-touch-icon" href="/custom_icon.png">
  • 43. HTML <link rel="apple-touch-icon" href="/custom_icon.png">
  • 44. HTML <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png">
  • 45. HTML <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
  • 46. HTML <meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]">
  • 47. HTML <meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]"> default
  • 48. HTML <meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]"> default black
  • 49. HTML <meta name="apple-mobile-web-app-status-bar-style" content="[default|black|black-translucent]"> default black black-translucent
  • 50. HTML <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="viewport" content ="initial-scale = 2.3, user-scalable = no">
  • 51. HTML <meta name="viewport" content ="width = [200 to 10,000 || device-width]"> <meta name="viewport" content ="height = [223 to 10,000 || device-height]"> <meta name="viewport" content ="minimum-scale = [0.01 to 10.0]"> <meta name="viewport" content ="maximum-scale = [0.01 to 10.0]"> <meta name="viewport" content ="initial-scale = [minimum-scale to maximum-scale]"> <meta name="viewport" content ="user-scalable = [yes||no]"> All options can be combined via commas
  • 52. HTML <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="viewport" content ="initial-scale = 2.3, user-scalable = no"> <meta name="apple-mobile-web-app-capable" content="yes">
  • 53. HTML <link rel="apple-touch-icon" href="/custom_icon.png"> <link rel="apple-touch-startup-image" href="/startup.png"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="viewport" content ="initial-scale = 2.3, user-scalable = no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="format-detection" content="telephone=no">
  • 54. ...which brings us to the CSS...
  • 55. WebKit CSS Support
  • 56. WebKit CSS Support - WebKit’s CSS support is spectacular.
  • 57. WebKit CSS Support - WebKit’s CSS support is spectacular. - Large subset of CSS 2.1 Specification
  • 58. WebKit CSS Support - WebKit’s CSS support is spectacular. - Large subset of CSS 2.1 Specification - Portions of CSS 3 Specification
  • 59. WebKit CSS Support - WebKit’s CSS support is spectacular. - Large subset of CSS 2.1 Specification - Portions of CSS 3 Specification - (most written using -webkit-rule notation)
  • 60. WebKit CSS Support - WebKit’s CSS support is spectacular. - Large subset of CSS 2.1 Specification - Portions of CSS 3 Specification - (most written using -webkit-rule notation) - 200+ rules
  • 61. border opacity counter-reset -webkit-appearance border-bottom position list-style -webkit-nbsp-mode border-bottom-color right list-style-image -webkit-rtl-ordering border-bottom-style top list-style-position -webkit-user-drag border-bottom-width unicode-bidi list-style-type -webkit-user-modify border-color vertical-align orphans -webkit-user-select border-left width page-break-after border-collapse border-left-color z-index page-break-before border-spacing border-left-style zoom page-break-inside caption-side border-left-width clip widows empty-cells border-right overflow background table-layout border-right-color overflow-x background-attachment -webkit-border-horizontal- border-right-style overflow-y background-color spacing border-right-width resize background-image -webkit-border-vertical-spacing border-style visibility background-position -webkit-column-break-after border-top -webkit-animation background-position-x -webkit-column-break-before border-top-color -webkit-animation-delay background-position-y -webkit-column-break-inside border-top-style -webkit-animation-direction background-repeat -webkit-column-count border-top-width -webkit-animation-duration color -webkit-column-gap border-width -webkit-animation-iteration- -webkit-background-clip -webkit-column-rule margin-bottom count -webkit-background-composite -webkit-column-rule-color margin-left -webkit-animation-name -webkit-background-origin -webkit-column-rule-style margin-right -webkit-animation-play-state -webkit-background-size -webkit-column-rule-width margin-top -webkit-animation-timing- font -webkit-column-width padding-bottom function font-family -webkit-columns padding-left -webkit-backface-visibility font-size cursor padding-right -webkit-box-reflect font-style outline padding-top -webkit-mask font-variant outline-color -webkit-border-bottom-left- -webkit-mask-attachment font-weight outline-offset radius -webkit-mask-box-image src outline-style -webkit-border-bottom-right- -webkit-mask-clip unicode-range outline-width radius -webkit-mask-composite letter-spacing pointer-events -webkit-border-image -webkit-mask-image text-align -webkit-box-align -webkit-border-radius -webkit-mask-origin text-decoration -webkit-box-direction -webkit-border-top-left-radius -webkit-mask-position text-indent -webkit-box-flex -webkit-border-top-right-radius -webkit-mask-position-x text-overflow -webkit-box-flex-group -webkit-box-sizing -webkit-mask-position-y text-shadow -webkit-box-lines -webkit-box-shadow -webkit-mask-repeat text-transform -webkit-box-ordinal-group -webkit-margin-bottom-collapse -webkit-mask-size white-space -webkit-box-orient -webkit-margin-collapse -webkit-perspective word-break -webkit-box-pack -webkit-margin-start -webkit-perspective-origin word-spacing -webkit-touch-callout -webkit-margin-top-collapse -webkit-transform word-wrap -webkit-dashboard-region -webkit-padding-start -webkit-transform-origin -webkit-marquee -webkit-tap-highlight-color bottom -webkit-transform-origin-x -webkit-marquee-direction clear -webkit-transform-origin-y -webkit-marquee-increment direction -webkit-transform-origin-z -webkit-marquee-repetition display -webkit-transform-style -webkit-marquee-speed float -webkit-transition -webkit-marquee-style height -webkit-transition-delay -webkit-text-fill-color left -webkit-transition-duration -webkit-text-security line-height -webkit-transition-property -webkit-text-size-adjust max-height -webkit-transition-timing- -webkit-text-stroke max-width function -webkit-text-stroke-color min-height content -webkit-text-stroke-width min-width counter-increment -webkit-line-break
  • 62. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
  • 63. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
  • 64. -webkit-border-radius
  • 65. -webkit-border-radius - Rounds the corners of a box
  • 66. -webkit-border-radius
  • 67. -webkit-border-radius -webkit-border-radius: radius; -webkit-border-radius: horizontal_radius vertical_radius;
  • 68. -webkit-border-radius -webkit-border-radius: radius; -webkit-border-radius: horizontal_radius vertical_radius; -webkit-border-bottom-left-radius: radius; -webkit-border-bottom-right-radius: radius; -webkit-border-top-left-radius: radius; -webkit-border-top-right-radius: radius;
  • 69. -webkit-border-radius
  • 70. -webkit-border-radius
  • 71. -webkit-border-radius header #information { display: block; position: absolute; top: 13px; left: 15px; height: 18px; width: 18px; z-index: 100; font-family: "Georgia"; font-size: 15px; font-weight: bold; font-style: italic; text-decoration: none; text-align: center; color: #686868; background-color: #FFFFFF; -webkit-border-radius: 9px; }
  • 72. -webkit-border-radius header #information { display: block; position: absolute; top: 13px; left: 15px; height: 18px; width: 18px; z-index: 100; font-family: "Georgia"; font-size: 15px; font-weight: bold; font-style: italic; text-decoration: none; text-align: center; color: #686868; background-color: #FFFFFF; -webkit-border-radius: 9px; }
  • 73. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
  • 74. -webkit-box-shadow
  • 75. -webkit-box-shadow (text-shadow)
  • 76. -webkit-box-shadow (text-shadow) - Simple shadow effects - Very similar to layer effects in Photoshop - Properties are arranged differently
  • 77. -webkit-box-shadow (text-shadow) text-shadow: color x_offset y_offset blur_radius; -webkit-box-shadow: x_offset y_offset blur_radius color; text-shadow: #000000 0 -1px 0; -webkit-box-shadow: -1px 0 0 #000000;
  • 78. text-shadow header h1 { display: block; position: relative; top: 9px; margin: 0; padding: 0; font-size: 18px; color: #FFFFFF; text-shadow: #000000 0 -1px 0; text-align: center; }
  • 79. text-shadow
  • 80. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
  • 81. -webkit-gradient
  • 82. -webkit-gradient - Not actually a rule — A “CSS Property Function” - Used anywhere a url() function can be used - ‘Experimental CSS 3’
  • 83. -webkit-gradient
  • 84. -webkit-gradient -webkit-gradient(type, start_point, end_point, stops );
  • 85. -webkit-gradient -webkit-gradient(type, start_point, end_point, stops ); -webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, stops );
  • 86. -webkit-gradient -webkit-gradient(linear, start_point, end_point, color-stop(position, color) ); -webkit-gradient(radius, inner_center, inner_radius, outer_center, outer_radius, color-stop(position, color) );
  • 87. -webkit-gradient background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #B8B8B7), color-stop(0.49, #9C9C9C), color-stop(0.50, #797979), color-stop(1.00, #656565) );
  • 88. -webkit-gradient background: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #B8B8B7), color-stop(0.49, #9C9C9C), color-stop(0.50, #797979), color-stop(1.00, #656565) );
  • 89. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
  • 90. -webkit-mask
  • 91. -webkit-mask - Alpha-level based masks
  • 92. -webkit-mask - Alpha-level based masks - Knock out portions of a box with a pattern (image, gradient, etc.)
  • 93. -webkit-mask - Alpha-level based masks - Knock out portions of a box with a pattern (image, gradient, etc.) - Works in a “layered” context:
  • 94. -webkit-mask - Alpha-level based masks - Knock out portions of a box with a pattern (image, gradient, etc.) - Works in a “layered” context: - mask
  • 95. -webkit-mask - Alpha-level based masks - Knock out portions of a box with a pattern (image, gradient, etc.) - Works in a “layered” context: - mask - border
  • 96. -webkit-mask - Alpha-level based masks - Knock out portions of a box with a pattern (image, gradient, etc.) - Works in a “layered” context: - mask - border - background
  • 97. -webkit-mask
  • 98. -webkit-mask - Layers alpha channel masks on to objects
  • 99. -webkit-mask - Layers alpha channel masks on to objects - Can clip complex shapes based on a grayscale image (even -webkit-gradient!)
  • 100. -webkit-mask - Layers alpha channel masks on to objects - Can clip complex shapes based on a grayscale image (even -webkit-gradient!) - A pain in the butt to use.
  • 101. -webkit-mask -webkit-mask: attachment, clip, origin, image, repeat, composite, box-image; -attachment: Allows the mask to scroll with the page -clip: Extends mask into border -origin: Mask’s anchor position -image: The mask image -repeat: Sets the mask’s ability to repeat -composite: Extends mask into padding -box-image: Sets a mask for a border box
  • 102. -webkit-mask border: 1px solid #C0C8CC; border-left: 2px solid #C0C8CC; -webkit-border-top-right-radius: 6px; t -webkit-border-bottom-right-radius: 6px; -webkit-mask: no-repeat url(images/mask-btn-left.png); background-color: #B6BDC1; background: -webkit-gradient(linear, left bottom, left top, color-stop(0.48, #b5bcc0), color-stop(0.49, #c8d0d4), color-stop(0.50, #c0c8cc), color-stop(0.61, #d4dbdd), color-stop(1.00, #f4fcfe) );
  • 103. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
  • 104. -webkit-transition
  • 105. -webkit-transition - Basic CSS transition
  • 106. -webkit-transition - Basic CSS transition - Specified by property
  • 107. -webkit-transition - Basic CSS transition - Specified by property - Similar (but simplified) timing functions to a tweening library
  • 108. -webkit-transition -webkit-transition: property duration timing_function delay;
  • 109. -webkit-transition -webkit-transition: property duration timing_function delay; -webkit-transition-property: property; -webkit-transition-duration: duration; -webkit-transition-timing- function: timing_function; -webkit-transition-delay: delay;
  • 110. -webkit-transition
  • 111. -webkit-transition #toDoInfo { position: absolute; left: 10px; top: -320px; z-index: 75; display: block; width: 300px; height: 320px; background: #B8B8B7; -webkit-border-radius: 10px; -webkit-transition: top .25s linear; } #toDoInfo.visible { top: 36px; }
  • 112. -webkit-transition
  • 113. -webkit-transition linear
  • 114. -webkit-transition linear ease
  • 115. -webkit-transition linear ease ease-in-out
  • 116. -webkit-transition linear ease ease-in-out ease-out
  • 117. -webkit-transition linear ease ease-in-out ease-out ease-in
  • 118. -webkit-transition
  • 119. -webkit-transition - cubic-bezier() CSS Property function can create custom “tweens”
  • 120. -webkit-transition - cubic-bezier() CSS Property function can create custom “tweens”
  • 121. -webkit-transition - cubic-bezier() CSS Property function can create custom “tweens” -webkit-transition-timing-function: cubic-bezier(p0x, p0y, p1x, p1y);
  • 122. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
  • 123. -webkit-transform
  • 124. -webkit-transform - Allows 3D and Flat transformations of objects
  • 125. -webkit-transform - Allows 3D and Flat transformations of objects - Simple interface
  • 126. -webkit-transform - Allows 3D and Flat transformations of objects - Simple interface - Customizable (matrix) transformations
  • 127. -webkit-transform -webkit-transform: function(param);
  • 128. -webkit-transform -webkit-transform: function(param); matrix scale translate matrix3d scale3d translate3d scaleX translateX perspective scaleY translateY scaleZ translateZ rotate skewX rotate3d skewY rotateX rotateY rotateZ
  • 129. -webkit-transform -webkit-transform: function(param); matrix scale translate matrix3d scale3d translate3d scaleX translateX perspective scaleY translateY scaleZ translateZ rotate skewX rotate3d skewY rotateX rotateY rotateZ Example
  • 130. -webkit-border-radius -webkit-box-shadow -webkit-gradient -webkit-mask -webkit-transition -webkit-transform -webkit-animation
  • 131. -webkit-animation
  • 132. -webkit-animation - Explicit animation handled directly by CSS
  • 133. -webkit-animation - Explicit animation handled directly by CSS - Repeated effects, keyframes
  • 134. -webkit-animation - Explicit animation handled directly by CSS - Repeated effects, keyframes - Uses an apple extension block (@-webkit- keyframes) to define the animation
  • 135. -webkit-animation - Explicit animation handled directly by CSS - Repeated effects, keyframes - Uses an apple extension block (@-webkit- keyframes) to define the animation - “Normal” CSS to turn animation on
  • 136. -webkit-animation - Explicit animation handled directly by CSS - Repeated effects, keyframes - Uses an apple extension block (@-webkit- keyframes) to define the animation - “Normal” CSS to turn animation on Example
  • 137. -webkit-animation Simple animation setup: @-webkit-keyframes bounce { from { left: 0px; } to { left: 200px; } }
  • 138. -webkit-animation Simple animation setup: Simple animation Trigger: @-webkit-keyframes bounce { div#bouncer { from { position: absolute; left: 0px; -webkit-animation-name: bounce; } -webkit-animation-duration: 4s; to { -webkit-animation-iteration-count: 10; left: 200px; -webkit-animation-direction: alternate; } } }
  • 139. Complex Animation Setup: Complex Animation Trigger: @-webkit-keyframes pulseAndMove { div#pulser { 0% { position: absolute; background: #0F0; -webkit-animation-name: pulseAndMove; left: 0px; top: 0px; -webkit-animation-duration: 4s; } -webkit-animation-iteration-count: 10; 25% { -webkit-animation-direction: alternate; background: #F00; } left: 20px; top: 20px; } 50% { Example background: #00F; } 75% { background: #0FF; left: 50px; top: 50px; } 100% { background: #F0F; } }
  • 140. ...and everything else
  • 141. ...and everything else - Just a taste
  • 142. ...and everything else - Just a taste - Apple is adding a lot more fine-grained control to CSS
  • 143. ...and everything else - Just a taste - Apple is adding a lot more fine-grained control to CSS -webkit-background -webkit-box -webkit-marquee -webkit-tap -webkit-text -webkit-touch -webkit-column
  • 144. Tools
  • 145. Tools - CSS3 Gradient Builder http://gradients.glrzad.com (Damian built it!)
  • 146. Tools - CSS3 Gradient Builder http://gradients.glrzad.com (Damian built it!) - Emulators: - iPhone — Native, easy to use - Android — Eclipse based, not easy to use - Palm Pre — VirtualBox image, easy to use, takes some time to install
  • 147. Resources
  • 148. Resources - Safari CSS Reference Guide http://developer.apple.com/mac/library/ documentation/AppleApplications/Reference/ SafariCSSRef/Introduction.html
  • 149. Resources - Safari CSS Reference Guide http://developer.apple.com/mac/library/ documentation/AppleApplications/Reference/ SafariCSSRef/Introduction.html - Safari Web Content Guide http://developer.apple.com/safari/library/ documentation/AppleApplications/Reference/ SafariWebContent/Introduction/Introduction.html
  • 150. Resources - Safari CSS Reference Guide http://developer.apple.com/mac/library/ documentation/AppleApplications/Reference/ SafariCSSRef/Introduction.html - Safari Web Content Guide http://developer.apple.com/safari/library/ documentation/AppleApplications/Reference/ SafariWebContent/Introduction/Introduction.html - Surfin’ Safari http://webkit.org/blog/
  • 151. JavaScript?
  • 152. JavaScript? - A lot of new touch events
  • 153. JavaScript? - A lot of new touch events - HTML / JS Client Side Storage
  • 154. JavaScript? - A lot of new touch events - HTML / JS Client Side Storage - GeoLocation API
  • 155. JavaScript? - A lot of new touch events - HTML / JS Client Side Storage - GeoLocation API NYC JS Meetup 7pm, October 6, 2009 Rebar, Dumbo
  • 156. Thanks... - Damian Galarza, Associate Developer Magnani Caruso Dutton - Victor Vasquez, Associate Designer Magnani Caruso Dutton
  • 157. Me: http://michaeltsmith.net Code: http://github.com/michaeltsmith Slides: http://www.slideshare.net/michaeltsmith michael@michaeltsmith.net Thank you, very much.