Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web Development for Mobile: GTUG Talk at Google

17,686 views

Published on

You no longer have to wait to use HTML5 and CSS3: in developing for mobile, you don't have to worry about archaic browser. Webkit, the browser engine found on Android and iPhone provide excellent support for CSS3 and HTML5. In this session we learn how we can use these new technologies to create mobile web applications.

Published in: Technology
  • Be the first to comment

Web Development for Mobile: GTUG Talk at Google

  1. 1. Mobile Web Development<br />Estelle Weyl<br />http://standardista.com<br />http://evotech.net/blog<br />@estellevw<br />
  2. 2. Native or Web???<br />2<br />Source: Jonathan Stark<br />
  3. 3. 3<br />
  4. 4. With HTML5 & CSS3<br />4<br />
  5. 5. http://findmebyip.com/litmus/<br />
  6. 6. CSS2.1<br />
  7. 7. CSS3<br />Unfinished, but well supported<br />
  8. 8. iPhone/Android = Webkit<br />No Cross browser testing!!!<br />
  9. 9. CSS3<br />Mobile Webkit Supports all of CSS3<br />Mobile Webkit Supports HTML5<br />almost<br />^<br />much of<br />^<br />
  10. 10. CSS3 Properties<br />CSS3 Selectors<br />HSLA / RGBA<br />Multiple backgrounds<br />Background-size<br />Border-radius<br />Border-image<br />Text Shadow<br />Box Shadow <br />Opacity<br />10<br /><ul><li>Text-overflow
  11. 11. Gradients
  12. 12. Transforms
  13. 13. Columns
  14. 14. Animations
  15. 15. Transitions
  16. 16. Border-image
  17. 17. Reflections
  18. 18. @font-face</li></li></ul><li>HTML5 APIs<br />Local Storage<br />Session Storage<br />WebSQL dB<br />Offline Applications<br />GeoLocation<br />postMessage<br />11<br /><ul><li>Query selector ??
  19. 19. Drag & Drop
  20. 20. <canvas>, <svg>, <audio>, <video>
  21. 21. Web Forms</li></li></ul><li>HTML5 <input> Types<br />date /time / datetime / datetime-local / month / week<br />email <br />url<br />12<br /><ul><li>Tel
  22. 22. Number
  23. 23. Range
  24. 24. search</li></li></ul><li>Input Behavior<br />13<br />Keyboard support ≠ Input Type Support<br />
  25. 25. iPhone v. Android v. desktop<br />Input file type does Not work on iPhone. <br /><a href=“tel:14155551212>Call me</a><br />mailto: opens mail application<br />google maps, iTunes and Youtube links open widgets on iPhone<br />view source debugger<br />✔<br />14<br />
  26. 26. Mobile Simulators<br />15<br />
  27. 27. Debugging?<br />Switch user agent to iPhone / Other<br />Use Web Inspector to debug<br />16<br />
  28. 28. Firebug for Mobile?<br />Settings > Safari > Developer > Debug Console<br />17<br />Android Debug Bridge (ADB)<br />
  29. 29. Beautiful bookmarks<br /><link rel="apple-touch-icon" href="/iphoneicon.png" /><br />apple-touch-icon.png<br />(or apple-touch-icon-precomposed.png)<br />18<br />
  30. 30. Android bookmarks<br /><link rel="apple-touch-icon" href="/iphoneicon.png" /><br />apple-touch-icon.png<br />19<br />
  31. 31. Mobile web app settings<br /><link rel="apple-touch-startup-image" href="/startup.png"><br /><meta name="apple-mobile-web-app-capable" content="yes" /> <br /><meta name="apple-mobile-web-app-status-bar-style" content=“default || black || black-translucent" /> (iPhone only)<br />20<br />
  32. 32. Targeting Mobile<br />Viewport:<br /><meta name="viewport" content="width=980”/><br /><meta name="viewport" content="width=device-width”/><br /><meta name="viewport" <br /> content="user-scalable=no, width=device-width"/><br />Prohibit Zoom / Pinch:<br /><meta name="viewport" content="width=device-width, <br /> minimum-scale=1.0, maximum-scale=1.0" /> <br />21<br />
  33. 33. @media queries<br /><ul><li> min-width
  34. 34. max-width
  35. 35. device-width
  36. 36. min-device-width
  37. 37. max-device-width
  38. 38. orientation
  39. 39. -webkit-min-device-pixel-ratio</li></ul>@media screen and (max-device-width: 480px){ <br /> /* small screen CSS here */ <br />} <br />22<br />
  40. 40. @media screen and (???){ …}<br />Portrait & Landscape (min-width: 320px) and (max-width: 480px)<br />Portrait & Landscape<br /> (min-device-width: 320px) and (max-device-width: 480px)<br />Portrait & Landscape<br /> (max-device-width: 480px)<br />Landscape only<br /> (min-width: 321px) and (max-width: 480px)<br />Portrait only<br /> (max-width: 320px) <br />23<br />
  41. 41. iPad<br />Portrait & Landscape (min-device-width: 768px) and (max-device-width: 1024px)<br />Landscape only<br /> (min-device-width: 481px) and<br /> (max-device-width: 1024px) and <br /> (orientation: landscape)<br />Portrait only<br /> (min-device-width: 481px) and <br /> (max-device-width: 1024px) and <br /> (orientation: portrait)<br />24<br />
  42. 42. 25<br />
  43. 43. Hide the Title bar<br /><script><br />addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);<br /> function hideURLbar(){ window.scrollTo(0,1); }<br />} <br /></script><br />26<br />
  44. 44. Don’t reinvent the wheel<br />27<br />
  45. 45. Sencha Touch<br />28<br />http://glyphish.com/<br />http://graffletopia.com/stencils<br />
  46. 46. 29<br />http://10k.aneventapart.com<br />
  47. 47. 30<br />
  48. 48. 31<br />
  49. 49. 32<br />Gradients<br />
  50. 50. http://www.westciv.com/tools/gradients/<br />33<br />
  51. 51. 34<br />text-shadow: color leftoffsettopoffset blur;<br />
  52. 52. 35<br />
  53. 53. 36<br />
  54. 54. 37<br />
  55. 55. foo {<br /> background-image: url(foo.png); <br /> -moz-background-size: 100% 50%; //FF3.6 <br /> -o-background-size: 100% 50%; //O 9.5 <br /> -webkit-background-size: 100% 50%; //Saf 3.0             <br /> background-size: 100% 50%; <br /> } <br />38<br />
  56. 56. 39<br />
  57. 57. 40<br />
  58. 58. CSS3 Selectors<br />:nth-of-type()<br />tr:nth-of-type(even) td{<br /> background-color: #dedede;<br />}<br />41<br />
  59. 59. 42<br />Transforms<br />translate() -webkit-transform: translate(15px, -15px); <br /> transform: translate(15px, -15px);<br />translateX() -webkit-transform: translatex(15px);<br /> transform: translatex(15px);<br /> <br />translateY() -webkit-transform: translatey(-15px); <br /> transform: translatey(-15px);<br /> <br />scale() -webkit-transform: scale(1.5, 2);<br /> transform: scale(1.5, 2);<br /> <br />scaleX() -webkit-transform: scalex(0.5); <br /> transform: scalex(0.5);<br /> <br />scaleY() -webkit-transform: scaley(2);<br /> transform: scaley(2);<br /> <br />
  60. 60. 43<br />rotate() -webkit-transform: rotate(15deg); <br /> transform: rotate(15deg)<br /> <br />skew() -webkit-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg);<br /> <br />skewX() -webkit-transform: skewx(15deg);<br /> transform: skewx(15deg);<br /> <br />skewY() -webkit-transform: skewy(-3deg); <br /> transform: skewy(-3deg);<br />Multiple transforms<br />.enlargen:hover {<br /> -webkit-transform: translate(-50%, -50%) scale(2) rotate(0); <br /> transform: translate(-50%, -50%) scale(2) rotate(0);<br />}<br /> <br />
  61. 61. 44<br />Transitions<br />transition-property<br />transition-duration<br />transition-timing-function ease || linear || ease-in-out || ease-in || ease-out || cubic-bezier()<br />transition-delay<br />
  62. 62. 45<br />Multiple Transitions<br />or ‘all’<br />
  63. 63. 46<br />Animation<br />
  64. 64. 47<br />Animation<br /> animation-name, <br /> animation-duration, <br /> animation-timing-function<br /> ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier()<br /> animation-delay<br /> animation-iteration-count<br />n || infinite<br /> animation-direction<br /> alternate || normal<br />
  65. 65. Thanks.<br />Estelle Weyl<br />Twitter: @estellevw<br />Blog: http://www.standardista.com<br />http://evotech.net/blog<br />48<br />
  66. 66. Credits<br />http://www.flickr.com/photos/nrkbeta/3905907681Marius Arnesen<br />49<br />

×