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

105,529 views
105,217 views

Published on

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!

Published in: Technology
1 Comment
47 Likes
Statistics
Notes
No Downloads
Views
Total views
105,529
On SlideShare
0
From Embeds
0
Number of Embeds
84,229
Actions
Shares
0
Downloads
563
Comments
1
Likes
47
Embeds 0
No embeds

No notes for slide
  • 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:= [ <length> | <percentage> | auto ]{1,2} | cover | contain }
  • iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development

    1. 1. CSS3 & iPhone<br />http://findmebyip.com/litmus/<br />Estelle Weyl<br />http://standardista.com<br />http://evotech.net/blog<br />@estellevw<br />
    2. 2. http://findmebyip.com/litmus/<br />
    3. 3. CSS2.1<br />
    4. 4. CSS3<br />Unfinished, but well supported<br />
    5. 5. iPhone = Safari<br />No need to do any Cross browser testing!!!<br />
    6. 6. CSS3<br />Safari Supports all of CSS3<br />Safari Supports HTML5<br />almost<br />^<br />much of<br />^<br />
    7. 7. CSS3 Features<br />CSS3 Selectors<br />Text Shadow (2.0)<br />Box Shadow (prefixed)<br />Rounded Corners (prefixed)<br />@font-face<br />Colors & Alpha Transparency (hsla, rgba)<br />Opacity<br />Multiple background images<br />
    8. 8. CSS3 Features<br />Text-overflow<br />Gradients<br />Transforms<br />Background size<br />Multi-column layout<br />Animations<br />Transitions<br />Border-image<br />Reflections<br />
    9. 9. HTML5<br />databases<br />Storage<br />Offline Applications<br />GeoLocation<br /><canvas>, <svg>, <audio>, <video><br />Web Forms…<br />
    10. 10. HTML5 Template<br /><!DOCTYPE html><html><head><meta charset="UTF-8"/><title>Remember this!!</title></head><body></body></html><br />
    11. 11. HTML5 Input Types<br />date /time / datetime / datetime-local / month / week<br />email <br />url<br />tel<br />number <br />range <br />search<br />
    12. 12. iPhone Input Behavior<br />
    13. 13. iPhonev. Desktop<br />Input file type does Not work<br /><a href=“tel:14155551212>Call me</a><br />googlemaps, iTunes and Youtube links open widgets<br />mailto: opens mail application<br />view source debugger<br />✔<br />
    14. 14. Firebug for iPhone???<br />Settings > Safari > Developer > Debug Console<br />
    15. 15. Firebug for Safari?<br />Switch user agent to iPhone<br />Use Web Inspector to debug<br />
    16. 16. iPhone Simulator<br />
    17. 17. And for Windows?<br />And for Windows?<br />
    18. 18. Beautiful bookmarks<br /><link rel="apple-touch-icon" href="/iphoneicon.png" /><br />apple-touch-icon.png<br />
    19. 19. Targeting the Phone<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 />
    20. 20. Targeting the Phone<br />@media screen and (max-device-width: 480px){ <br /> /* iPhone CSS here */ <br />} <br />
    21. 21. 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 />
    22. 22. Don’t reinvent the wheel<br />
    23. 23. Sencha Touch<br />
    24. 24. http://graffletopia.com/stencils/358<br />http://graffletopia.com/stencils/392<br />http://glyphish.com/<br />
    25. 25.
    26. 26.
    27. 27.
    28. 28.
    29. 29. http://www.westciv.com/tools/gradients/<br />
    30. 30.
    31. 31.
    32. 32. h1 {<br /> white-space: nowrap;<br /> width: 180px; <br /> overflow: hidden;<br /> -o-text-overflow: ellipsis;<br />text-overflow: ellipsis;<br />}<br />
    33. 33.
    34. 34.
    35. 35.
    36. 36. 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%; //Saf3.0             <br /> background-size: 100% 50%;<br />} <br />
    37. 37.
    38. 38.
    39. 39.
    40. 40.
    41. 41. CSS3 Selectors<br />:nth-of-type()<br />tr:nth-of-type(even) td{<br /> background-color: #dedede;<br />}<br />
    42. 42. Thanks.<br />Estelle Weyl<br />Twitter: @estellevw<br />Blog: http://www.standardista.com<br />http://evotech.net/blog<br />
    43. 43. Prizes<br />Copy of my Book - Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKithttp://apress.com/book/view/9781430230069<br />

    ×