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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Web Development for Mobile: GTUG Talk at Google

16,186
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 …

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,186
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
294
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
      Estelle Weyl
      http://standardista.com
      http://evotech.net/blog
      @estellevw
    • 2. Native or Web???
      2
      Source: Jonathan Stark
    • 3. 3
    • 4. With HTML5 & CSS3
      4
    • 5. http://findmebyip.com/litmus/
    • 6. CSS2.1
    • 7. CSS3
      Unfinished, but well supported
    • 8. iPhone/Android = Webkit
      No Cross browser testing!!!
    • 9. CSS3
      Mobile Webkit Supports all of CSS3
      Mobile Webkit Supports HTML5
      almost
      ^
      much of
      ^
    • 10. CSS3 Properties
      CSS3 Selectors
      HSLA / RGBA
      Multiple backgrounds
      Background-size
      Border-radius
      Border-image
      Text Shadow
      Box Shadow
      Opacity
      10
    • HTML5 APIs
      Local Storage
      Session Storage
      WebSQL dB
      Offline Applications
      GeoLocation
      postMessage
      11
      • Query selector ??
      • 19. Drag & Drop
      • 20. <canvas>, <svg>, <audio>, <video>
      • 21. Web Forms
    • HTML5 <input> Types
      date /time / datetime / datetime-local / month / week
      email
      url
      12
    • Input Behavior
      13
      Keyboard support ≠ Input Type Support
    • 25. iPhone v. Android v. desktop
      Input file type does Not work on iPhone.
      <a href=“tel:14155551212>Call me</a>
      mailto: opens mail application
      google maps, iTunes and Youtube links open widgets on iPhone
      view source debugger

      14
    • 26. Mobile Simulators
      15
    • 27. Debugging?
      Switch user agent to iPhone / Other
      Use Web Inspector to debug
      16
    • 28. Firebug for Mobile?
      Settings > Safari > Developer > Debug Console
      17
      Android Debug Bridge (ADB)
    • 29. Beautiful bookmarks
      <link rel="apple-touch-icon" href="/iphoneicon.png" />
      apple-touch-icon.png
      (or apple-touch-icon-precomposed.png)
      18
    • 30. Android bookmarks
      <link rel="apple-touch-icon" href="/iphoneicon.png" />
      apple-touch-icon.png
      19
    • 31. Mobile web app settings
      <link rel="apple-touch-startup-image" href="/startup.png">
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-status-bar-style" content=“default || black || black-translucent" /> (iPhone only)
      20
    • 32. Targeting Mobile
      Viewport:
      <meta name="viewport" content="width=980”/>
      <meta name="viewport" content="width=device-width”/>
      <meta name="viewport"
      content="user-scalable=no, width=device-width"/>
      Prohibit Zoom / Pinch:
      <meta name="viewport" content="width=device-width,
      minimum-scale=1.0, maximum-scale=1.0" />
      21
    • 33. @media queries
      @media screen and (max-device-width: 480px){
      /* small screen CSS here */
      }
      22
    • 40. @media screen and (???){ …}
      Portrait & Landscape (min-width: 320px) and (max-width: 480px)
      Portrait & Landscape
      (min-device-width: 320px) and (max-device-width: 480px)
      Portrait & Landscape
      (max-device-width: 480px)
      Landscape only
      (min-width: 321px) and (max-width: 480px)
      Portrait only
      (max-width: 320px)
      23
    • 41. iPad
      Portrait & Landscape (min-device-width: 768px) and (max-device-width: 1024px)
      Landscape only
      (min-device-width: 481px) and
      (max-device-width: 1024px) and
      (orientation: landscape)
      Portrait only
      (min-device-width: 481px) and
      (max-device-width: 1024px) and
      (orientation: portrait)
      24
    • 42. 25
    • 43. Hide the Title bar
      <script>
      addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
      function hideURLbar(){ window.scrollTo(0,1); }
      }
      </script>
      26
    • 44. Don’t reinvent the wheel
      27
    • 45. Sencha Touch
      28
      http://glyphish.com/
      http://graffletopia.com/stencils
    • 46. 29
      http://10k.aneventapart.com
    • 47. 30
    • 48. 31
    • 49. 32
      Gradients
    • 50. http://www.westciv.com/tools/gradients/
      33
    • 51. 34
      text-shadow: color leftoffsettopoffset blur;
    • 52. 35
    • 53. 36
    • 54. 37
    • 55. foo {
      background-image: url(foo.png);
      -moz-background-size: 100% 50%; //FF3.6
      -o-background-size: 100% 50%; //O 9.5
      -webkit-background-size: 100% 50%; //Saf 3.0            
      background-size: 100% 50%;
      }
      38
    • 56. 39
    • 57. 40
    • 58. CSS3 Selectors
      :nth-of-type()
      tr:nth-of-type(even) td{
      background-color: #dedede;
      }
      41
    • 59. 42
      Transforms
      translate() -webkit-transform: translate(15px, -15px);
      transform: translate(15px, -15px);
      translateX() -webkit-transform: translatex(15px);
      transform: translatex(15px);
       
      translateY() -webkit-transform: translatey(-15px);
      transform: translatey(-15px);
       
      scale() -webkit-transform: scale(1.5, 2);
      transform: scale(1.5, 2);
       
      scaleX() -webkit-transform: scalex(0.5);
      transform: scalex(0.5);
       
      scaleY() -webkit-transform: scaley(2);
      transform: scaley(2);
       
    • 60. 43
      rotate() -webkit-transform: rotate(15deg);
      transform: rotate(15deg)
       
      skew() -webkit-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg);
       
      skewX() -webkit-transform: skewx(15deg);
      transform: skewx(15deg);
       
      skewY() -webkit-transform: skewy(-3deg);
      transform: skewy(-3deg);
      Multiple transforms
      .enlargen:hover {
      -webkit-transform: translate(-50%, -50%) scale(2) rotate(0);
      transform: translate(-50%, -50%) scale(2) rotate(0);
      }
       
    • 61. 44
      Transitions
      transition-property
      transition-duration
      transition-timing-function ease || linear || ease-in-out || ease-in || ease-out || cubic-bezier()
      transition-delay
    • 62. 45
      Multiple Transitions
      or ‘all’
    • 63. 46
      Animation
    • 64. 47
      Animation
      animation-name,
      animation-duration,
      animation-timing-function
      ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier()
      animation-delay
      animation-iteration-count
      n || infinite
      animation-direction
      alternate || normal
    • 65. Thanks.
      Estelle Weyl
      Twitter: @estellevw
      Blog: http://www.standardista.com
      http://evotech.net/blog
      48
    • 66. Credits
      http://www.flickr.com/photos/nrkbeta/3905907681Marius Arnesen
      49