• Like
  • Save
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
Upcoming SlideShare
Loading in...5
×
 

iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development

on

  • 98,600 views

Wouldn't it be cool to be able to use CSS3 and HTML5 unfettered by the lack of support in IE? Mobile developers for smart phones get to do just that!...

Wouldn't it be cool to be able to use CSS3 and HTML5 unfettered by the lack of support in IE? Mobile developers for smart phones get to do just that!

When developing for iPhones, iPods, iPads and Android devices—mobile devices using webkit browsers—we can use CSS animations, transforms, multiple background images, rounded corners, text and box shadows, CSS columns, and HTML5 form elements.

In this session we'll use some CSS3 features learned in earlier session to create a native looking iPhone web app. We'll also cover some CSS UI and HTML5 form elements that will help you get up to speed on developing for mobile webkit. You don't have to wait any longer to use CSS3!

Statistics

Views

Total Views
98,600
Views on SlideShare
21,916
Embed Views
76,684

Actions

Likes
45
Downloads
543
Comments
1

53 Embeds 76,684

http://www.evotech.net 74230
http://www.zhangxinxu.com 976
http://blog.dreamcss.com 576
http://translate.googleusercontent.com 317
http://onwebdev.blogspot.com 136
http://higher.com.ua 128
http://webcache.googleusercontent.com 93
http://www.css3html5.com 63
http://www.cssk8.com 58
http://test1.inceptum.eu 9
http://tantrieuf31.blogspot.com 7
http://cache.baidu.com 7
http://onwebdev.blogspot.com.au 6
http://onwebdev.blogspot.co.uk 5
http://onwebdev.blogspot.com.es 5
http://evotech.net 4
http://core.traackr.com 4
http://blog.gabrieleromanato.com 4
http://onwebdev.blogspot.co.il 4
https://www.evotech.net 3
http://paper.li 3
http://127.0.0.1 3
http://dongzhendong.com.cn 2
http://www.scoop.it 2
https://duckduckgo.com 2
http://www2.verious.com 2
http://static.slidesharecdn.com 2
http://markup.io 2
http://onwebdev.blogspot.com.ar 2
http://localhost 2
http://www.imedu.org 2
https://twimg0-a.akamaihd.net 2
https://si0.twimg.com 2
https://twitter.com 2
http://onwebdev.blogspot.co.nz 1
http://131.253.14.66 1
http://web.archive.org 1
https://translate.googleusercontent.com 1
http://anype.com 1
http://onwebdev.blogspot.in 1
http://www.intersquash.com 1
http://www.slideshare.net 1
http://feeds.feedburner.com 1
http://www.google.es 1
http://news.baidu.com 1
http://anonymouse.org 1
http://a0.twimg.com 1
http://reader.youdao.com 1
http://api.markup.io 1
http://onwebdev.blogspot.mx 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

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Good
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • History of support of CSS, and why it’s ok to move forward
  • History of support of CSS, and why it’s ok to move forward
  • History of support of CSS, and why it’s ok to move forward
  • History of support of CSS, and why it’s ok to move forward
  • standardista
  • standardista
  • To enable this, you have to first enable the menu barClick > show menu bar under the gearsThen go to preferences > advanced > check “show develop menu in menubar”
  • 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
  • Sorry, but no source was attributed
  • Javascript LibrariesEasiest to use is Joe Hewitt’s IUIMore full featured is JQTouchFor full fledged apps, Sencha Touch.
  • Graffetopia = GUI and Wireframe
  • 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 }

iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development Presentation Transcript

  • CSS3 & iPhone
    http://findmebyip.com/litmus/
    Estelle Weyl
    http://standardista.com
    http://evotech.net/blog
    @estellevw
  • http://findmebyip.com/litmus/
  • CSS2.1
  • CSS3
    Unfinished, but well supported
  • iPhone = Safari
    No need to do any Cross browser testing!!!
  • CSS3
    Safari Supports all of CSS3
    Safari Supports HTML5
    almost
    ^
    much of
    ^
  • CSS3 Features
    CSS3 Selectors
    Text Shadow (2.0)
    Box Shadow (prefixed)
    Rounded Corners (prefixed)
    @font-face
    Colors & Alpha Transparency (hsla, rgba)
    Opacity
    Multiple background images
  • CSS3 Features
    Text-overflow
    Gradients
    Transforms
    Background size
    Multi-column layout
    Animations
    Transitions
    Border-image
    Reflections
  • HTML5
    databases
    Storage
    Offline Applications
    GeoLocation
    <canvas>, <svg>, <audio>, <video>
    Web Forms…
  • HTML5 Template
    <!DOCTYPE html><html><head><meta charset="UTF-8"/><title>Remember this!!</title></head><body></body></html>
  • HTML5 Input Types
    date /time / datetime / datetime-local / month / week
    email
    url
    tel
    number
    range
    search
  • iPhone Input Behavior
  • iPhonev. Desktop
    Input file type does Not work
    <a href=“tel:14155551212>Call me</a>
    googlemaps, iTunes and Youtube links open widgets
    mailto: opens mail application
    view source debugger

  • Firebug for iPhone???
    Settings > Safari > Developer > Debug Console
  • Firebug for Safari?
    Switch user agent to iPhone
    Use Web Inspector to debug
  • iPhone Simulator
  • And for Windows?
    And for Windows?
  • Beautiful bookmarks
    <link rel="apple-touch-icon" href="/iphoneicon.png" />
    apple-touch-icon.png
  • Targeting the Phone
    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" />
  • Targeting the Phone
    @media screen and (max-device-width: 480px){
    /* iPhone CSS here */
    }
  • Hide the Title bar
    <script>
    addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
    function hideURLbar(){ window.scrollTo(0,1); }
    }
    </script>
  • Don’t reinvent the wheel
  • Sencha Touch
  • http://graffletopia.com/stencils/358
    http://graffletopia.com/stencils/392
    http://glyphish.com/
  • http://www.westciv.com/tools/gradients/
  • h1 {
    white-space: nowrap;
    width: 180px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    }
  • 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%; //Saf3.0            
    background-size: 100% 50%;
    }
  • CSS3 Selectors
    :nth-of-type()
    tr:nth-of-type(even) td{
    background-color: #dedede;
    }
  • Thanks.
    Estelle Weyl
    Twitter: @estellevw
    Blog: http://www.standardista.com
    http://evotech.net/blog
  • Prizes
    Copy of my Book - Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKithttp://apress.com/book/view/9781430230069