iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
•Download as PPTX, PDF•
47 likes•31,569 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! 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!
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (11)
Similar to iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
Similar to iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development (20)
Recently uploaded
Recently uploaded (20)
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
- 1. CSS3 & iPhone http://findmebyip.com/litmus/ Estelle Weyl http://standardista.com http://evotech.net/blog @estellevw
- 3. CSS2.1
- 4. CSS3 Unfinished, but well supported
- 5. iPhone = Safari No need to do any Cross browser testing!!!
- 6. CSS3 Safari Supports all of CSS3 Safari Supports HTML5 almost ^ much of ^
- 7. 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
- 8. CSS3 Features Text-overflow Gradients Transforms Background size Multi-column layout Animations Transitions Border-image Reflections
- 9. HTML5 databases Storage Offline Applications GeoLocation <canvas>, <svg>, <audio>, <video> Web Forms…
- 10. HTML5 Template <!DOCTYPE html><html><head><meta charset="UTF-8"/><title>Remember this!!</title></head><body></body></html>
- 11. HTML5 Input Types date /time / datetime / datetime-local / month / week email url tel number range search
- 13. 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 ✔
- 14. Firebug for iPhone??? Settings > Safari > Developer > Debug Console
- 15. Firebug for Safari? Switch user agent to iPhone Use Web Inspector to debug
- 16. iPhone Simulator
- 17. And for Windows? And for Windows?
- 18. Beautiful bookmarks <link rel="apple-touch-icon" href="/iphoneicon.png" /> apple-touch-icon.png
- 19. 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" />
- 20. Targeting the Phone @media screen and (max-device-width: 480px){ /* iPhone CSS here */ }
- 21. Hide the Title bar <script> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } } </script>
- 22. Don’t reinvent the wheel
- 23. Sencha Touch
- 32. h1 { white-space: nowrap; width: 180px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
- 36. 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%; }
- 41. CSS3 Selectors :nth-of-type() tr:nth-of-type(even) td{ background-color: #dedede; }
- 42. Thanks. Estelle Weyl Twitter: @estellevw Blog: http://www.standardista.com http://evotech.net/blog
- 43. Prizes Copy of my Book - Beginning iPhone Web Apps: HTML5, CSS3, and JavaScript for WebKithttp://apress.com/book/view/9781430230069
Editor's Notes
- 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 }