Your SlideShare is downloading. ×
0
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Web Development for Mobile: GTUG Talk at Google
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Development for Mobile: GTUG Talk at Google

16,361

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 …

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
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
16,361
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
298
Comments
0
Likes
23
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
  • standardista
  • standardista
  • standardista
  • Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17 Switching user agent only matters if browser sniffingMozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
  • selecting the +, or 'add bookmark' from the bottom nav, selecting "Add to Home Screen" from the bookmarks menuOptionally editing the title of the bookmark, andSelecting "Add".
  • selecting the +, or 'add bookmark' from the bottom nav, selecting "Add to Home Screen" from the bookmarks menuOptionally editing the title of the bookmark, andSelecting "Add".
  • Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
  • Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
  • Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
  • Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
  • Safari on iPhone OS displays webpages at a scale that works for most web content originally designed for the desktop. If these default settings don’t work for your webpages, it is highly recommended that you change the settings by configuring the viewport. You especially need to configure the viewport if you are designing webpages specifically for iPhone OS. Configuring the viewport is easy—just add one line of HTML to your webpage
  • Sorry, but no source was attributed
  • Javascript LibrariesEasiest to use is Joe Hewitt’s IUIMore full featured is JQTouchFor full fledged apps, Sencha Touch.
  • GRADIENTS
  • http://developer.apple.com/safari/library/documentation/internetweb/conceptual/safarivisualeffectsprogguide/Gradients/Gradients.html
  • .foo { background-image: url(bg-image.png); -moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */ -o-background-size: 100% 100%; /* Opera 9.5 */ -webkit-background-size: 100% 100%; /* Safari 3.0 */             background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */ -moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */Background-size:= [ <length> | <percentage> | auto ]{1,2} | cover | contain }
  • Transcript

    • 1. Mobile Web Development<br />Estelle Weyl<br />http://standardista.com<br />http://evotech.net/blog<br />@estellevw<br />
    • 2. Native or Web???<br />2<br />Source: Jonathan Stark<br />
    • 3. 3<br />
    • 4. With HTML5 & CSS3<br />4<br />
    • 5. http://findmebyip.com/litmus/<br />
    • 6. CSS2.1<br />
    • 7. CSS3<br />Unfinished, but well supported<br />
    • 8. iPhone/Android = Webkit<br />No Cross browser testing!!!<br />
    • 9. CSS3<br />Mobile Webkit Supports all of CSS3<br />Mobile Webkit Supports HTML5<br />almost<br />^<br />much of<br />^<br />
    • 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. Gradients
    • 12. Transforms
    • 13. Columns
    • 14. Animations
    • 15. Transitions
    • 16. Border-image
    • 17. Reflections
    • 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. Drag & Drop
    • 20. <canvas>, <svg>, <audio>, <video>
    • 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. Number
    • 23. Range
    • 24. search</li></li></ul><li>Input Behavior<br />13<br />Keyboard support ≠ Input Type Support<br />
    • 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. Mobile Simulators<br />15<br />
    • 27. Debugging?<br />Switch user agent to iPhone / Other<br />Use Web Inspector to debug<br />16<br />
    • 28. Firebug for Mobile?<br />Settings > Safari > Developer > Debug Console<br />17<br />Android Debug Bridge (ADB)<br />
    • 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. Android bookmarks<br /><link rel="apple-touch-icon" href="/iphoneicon.png" /><br />apple-touch-icon.png<br />19<br />
    • 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. 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. @media queries<br /><ul><li> min-width
    • 34. max-width
    • 35. device-width
    • 36. min-device-width
    • 37. max-device-width
    • 38. orientation
    • 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. @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. 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. 25<br />
    • 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. Don’t reinvent the wheel<br />27<br />
    • 45. Sencha Touch<br />28<br />http://glyphish.com/<br />http://graffletopia.com/stencils<br />
    • 46. 29<br />http://10k.aneventapart.com<br />
    • 47. 30<br />
    • 48. 31<br />
    • 49. 32<br />Gradients<br />
    • 50. http://www.westciv.com/tools/gradients/<br />33<br />
    • 51. 34<br />text-shadow: color leftoffsettopoffset blur;<br />
    • 52. 35<br />
    • 53. 36<br />
    • 54. 37<br />
    • 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. 39<br />
    • 57. 40<br />
    • 58. CSS3 Selectors<br />:nth-of-type()<br />tr:nth-of-type(even) td{<br /> background-color: #dedede;<br />}<br />41<br />
    • 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. 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. 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. 45<br />Multiple Transitions<br />or ‘all’<br />
    • 63. 46<br />Animation<br />
    • 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. Thanks.<br />Estelle Weyl<br />Twitter: @estellevw<br />Blog: http://www.standardista.com<br />http://evotech.net/blog<br />48<br />
    • 66. Credits<br />http://www.flickr.com/photos/nrkbeta/3905907681Marius Arnesen<br />49<br />

    ×