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

Web Development for Mobile: GTUG Talk at Google

on

  • 16,933 views

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.

Statistics

Views

Total Views
16,933
Views on SlideShare
9,259
Embed Views
7,674

Actions

Likes
22
Downloads
290
Comments
0

21 Embeds 7,674

http://www.standardista.com 7574
http://docrea.org 26
http://translate.googleusercontent.com 21
http://mangastorytelling.tistory.com 12
http://www.enfew.com 8
http://webcache.googleusercontent.com 5
http://test1.inceptum.eu 5
http://xss.yandex.net 4
http://xianguo.com 4
http://ind3x.tumblr.com 3
http://www.docrea.org 2
http://dev.newsblur.com 1
http://www.newsblur.com 1
http://www.verious.com 1
https://s3-us4.ixquick-proxy.com 1
http://safe.tumblr.com 1
http://www.netvibes.com 1
https://www.standardista.com 1
https://www.goodsmiles.info 1
http://www.techgig.com 1
http://www.hanrss.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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:= [ | | auto ]{1,2} | cover | contain }

Web Development for Mobile: GTUG Talk at Google Web Development for Mobile: GTUG Talk at Google Presentation Transcript

  • Mobile Web Development
    Estelle Weyl
    http://standardista.com
    http://evotech.net/blog
    @estellevw
  • Native or Web???
    2
    Source: Jonathan Stark
  • 3
  • With HTML5 & CSS3
    4
  • http://findmebyip.com/litmus/
  • CSS2.1
  • CSS3
    Unfinished, but well supported
  • iPhone/Android = Webkit
    No Cross browser testing!!!
  • CSS3
    Mobile Webkit Supports all of CSS3
    Mobile Webkit Supports HTML5
    almost
    ^
    much of
    ^
  • CSS3 Properties
    CSS3 Selectors
    HSLA / RGBA
    Multiple backgrounds
    Background-size
    Border-radius
    Border-image
    Text Shadow
    Box Shadow
    Opacity
    10
    • Text-overflow
    • Gradients
    • Transforms
    • Columns
    • Animations
    • Transitions
    • Border-image
    • Reflections
    • @font-face
  • HTML5 APIs
    Local Storage
    Session Storage
    WebSQL dB
    Offline Applications
    GeoLocation
    postMessage
    11
    • Query selector ??
    • Drag & Drop
    • <canvas>, <svg>, <audio>, <video>
    • Web Forms
  • HTML5 <input> Types
    date /time / datetime / datetime-local / month / week
    email
    url
    12
    • Tel
    • Number
    • Range
    • search
  • Input Behavior
    13
    Keyboard support ≠ Input Type Support
  • 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
  • Mobile Simulators
    15
  • Debugging?
    Switch user agent to iPhone / Other
    Use Web Inspector to debug
    16
  • Firebug for Mobile?
    Settings > Safari > Developer > Debug Console
    17
    Android Debug Bridge (ADB)
  • Beautiful bookmarks
    <link rel="apple-touch-icon" href="/iphoneicon.png" />
    apple-touch-icon.png
    (or apple-touch-icon-precomposed.png)
    18
  • Android bookmarks
    <link rel="apple-touch-icon" href="/iphoneicon.png" />
    apple-touch-icon.png
    19
  • 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
  • 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
  • @media queries
    • min-width
    • max-width
    • device-width
    • min-device-width
    • max-device-width
    • orientation
    • -webkit-min-device-pixel-ratio
    @media screen and (max-device-width: 480px){
    /* small screen CSS here */
    }
    22
  • @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
  • 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
  • 25
  • Hide the Title bar
    <script>
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); }
    }
    </script>
    26
  • Don’t reinvent the wheel
    27
  • Sencha Touch
    28
    http://glyphish.com/
    http://graffletopia.com/stencils
  • 29
    http://10k.aneventapart.com
  • 30
  • 31
  • 32
    Gradients
  • http://www.westciv.com/tools/gradients/
    33
  • 34
    text-shadow: color leftoffsettopoffset blur;
  • 35
  • 36
  • 37
  • 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
  • 39
  • 40
  • CSS3 Selectors
    :nth-of-type()
    tr:nth-of-type(even) td{
    background-color: #dedede;
    }
    41
  • 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);
     
  • 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);
    }
     
  • 44
    Transitions
    transition-property
    transition-duration
    transition-timing-function ease || linear || ease-in-out || ease-in || ease-out || cubic-bezier()
    transition-delay
  • 45
    Multiple Transitions
    or ‘all’
  • 46
    Animation
  • 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
  • Thanks.
    Estelle Weyl
    Twitter: @estellevw
    Blog: http://www.standardista.com
    http://evotech.net/blog
    48
  • Credits
    http://www.flickr.com/photos/nrkbeta/3905907681Marius Arnesen
    49