Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

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

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!

  • Inicia sesión para ver los comentarios

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 />

×