Rails for Mobile Devices @ Conferencia Rails 2011
•
20 j'aime•4,664 vues
The slides from my talk "Rails for Mobile Devices" at Conferencia Rails 2011.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à Rails for Mobile Devices @ Conferencia Rails 2011
Similaire à Rails for Mobile Devices @ Conferencia Rails 2011 (20)
Plus de Alberto Perdomo
Plus de Alberto Perdomo (10)
Dernier
Dernier (20)
Rails for Mobile Devices @ Conferencia Rails 2011
- 1. Rails for mobile devices Alberto Perdomo Conferencia Rails 2011
- 8. Issues
- 10. Screen Different sizes and resolutions Different orientations: portrait vs. landscape Zooming
- 11. Touch interfaces
- 12. Touch interfaces Small font size, little space between links No hover Gestures events vs. mouse events
- 13. The network
- 14. Heavy websites
- 15. Unsused assets
- 16. 1 big asset vs. several smaller ones
- 17. Solutions
- 19. User Interface
- 20. Width
- 21. <!DOCTYPE html> <html> <head> <title>Hello world!</title> </head> <body> <p>Hello world!</p> </body>
- 22. Viewport meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> Separated by commas, not semicolons!!!
- 23. Responsive Web Designs http://mediaqueri.es/
- 24. Fluid layouts and styles depending on width & device capabilities
- 27. Conferencia Rails by @mamuso: http://conferenciarails.org/
- 28. Media Queries W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/
- 29. Examples block for > 900px @media screen and (min-width: 900px) { // styles for bigger displays } or separate CSS file <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> tablets <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
- 30. Frameworks
- 31. http://www.sencha.com/products/touch/ open source + commercial licenses
- 32. demos.Forms = new Ext.TabPanel({ items: [{ title: 'Basic', xtype: 'form', id: 'basicform', scroll: 'vertical', items: [{ xtype: 'fieldset', title: 'Personal Info', instructions: 'Please enter the information above.', defaults: { // labelAlign: 'right' labelWidth: '35%' }, items: [{ xtype: 'textfield', name: 'name', label: 'Name', placeHolder: 'Tom Roy', autoCapitalize : true, required: true, useClearIcon: true }, { // ...
- 33. Javascript DOM Unified User Interface
- 35. Clean semantic markup + Javascript Unified User Interface
- 36. Features jQuery Progressive enhancement Cross-platform Accessibility Lightweight (~12K comp) HTML5
- 38. <!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> </head> <body> ... </body> </html>
- 39. Anatomy of a page <div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
- 40. Example: Single Page <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page -->
- 41. Example: local linked pages <div data-role="page" id="foo" > <div data-role="header"> <h1>Foo</h1> </div><!-- /header --> <div data-role="content"> When loading the HTML page <p>I'm first in the source order so I'm shown as the page.</p> the first page is autom. shown <p>View internal page called <a href="#bar">bar</a></p> </div><!-- /content --> and the rest hidden <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div> <div data-role="page" id="bar" > When following a link to a local ... linked page, there is an animated </div> transition
- 42. Other stuff Components: Lists, Buttons, Dialogs, Grid, ... Hijax / Ajax Page transitions / Animations Theming Dual license: MIT or GPL version 2
- 43. The Network
- 44. Pa! I: "e manifest
- 45. At its simplest, an offline web application is a list of URLs — HTML, CSS, JavaScript, images, or any other kind of resource. http://diveintohtml5.org/offline.html#divingin
- 46. Support IE Firefox Safari Chrome Opera iPhone Android - 3.5+ 4.0+ 5.0+ 10.6+ 2.1+ 2.0+
- 47. Basic example /index.html <!DOCTYPE HTML> <html manifest="/offline.appcache" > <body> ... /offline.appcache Content type: text/cache-manifest !!! CACHE MANIFEST /screen.css /application.js /logo.png
- 48. Anatomy of a manifest <name>.appcache CACHE MANIFEST CACHE /css/screen.css /css/offline.css List of files to cache /images/logo.png http://example.com/code.js FALLBACK List of files to fall back / /offline.html in case not available /images/avatars/ /offline_avatar.png NETWORK Online whitelist, never /track.cgi cached
- 49. Cache what? Place All pages must be included Read Browse purchase messages articles orders Reference to manifest in each of them Send Read news messages The page that triggers the download of the manifest file Offline & online Online only does not to be included
- 50. A more complex example All pages CACHE MANIFEST Fallback for offline FALLBACK / /offline.html pages NETWORK Allow to browse * other pages when online
- 51. Manifest: Status status (returns boolean) navigator.onLine callbacks ononline onoffline
- 52. Manifest: DOM & Events object events window.applicationCache checking downloading progress cached noupdate updateready reload new cache after updateready window.applicationCache.swapCache()
- 53. Manifest: DOM & Events manifest attr in <html> Event: checking Event: Event: progress progress yes no yes Download first changed? Download time? Event: Event: downloading downloading Event: Event: cached no Event: noupdate updateready Finished
- 54. Rack Offline by Yehuda Katz https://github.com/wycats/rack-offline
- 55. Automated Mobile::Application.routes.draw do match "/application.manifest" => Rails::Offline Automatically caches all JS, CSS & HTML in public In development: include SHA based on timestamp to force reload In production: include SHA based on underlying assets
- 56. Custom manifest Mobile::Application.routes.draw do offline = Rack::Offline.configure do cache [ "http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css", "http://code.jquery.com/mobile/1.0b1/images/icons-18-white.png", "http://code.jquery.com/mobile/1.0b1/images/ajax-loader.png", "http://code.jquery.com/jquery-1.6.1.min.js", "http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js", "favicon.ico"] network "*" end match "/offline.appcache" => offline # ...
- 57. Debugging
- 59. Part II: Storage
- 60. Local Storage Implemented natively in the browsers Key/Value store Persistence Never sent to server (unlike cookies) Supported in common browsers, even IE > 8.0
- 61. Details 5MB by default acessible through localStorage object key: String, value: Any JS supported type Use parseInt, parseFloat, ... to retrieve objects Synchronous API
- 62. Examples Read/Write var foo = localStorage["bar"]; localStorage["bar"] = foo; Clear key localStorage.removeItem("bar"); Empty storage localStorage.clear();
- 63. Competitors: WebSQL SQL database in the browser SQLite Implemented by some browsers: Safari, Chrome, Webkit Asynchronous API Requires more code but is also more powerful
- 64. Competitors: IndexedDB No standard Query Language Access through API functions Very early stage, not yet usable
- 65. Toolbox
- 66. Detect requests from mobile devices in your Rails app https://github.com/brendanlim/mobile-fu https://github.com/shenoudab/active_device
- 67. Rails helpers for jQuery Mobile https://github.com/Consoci8/jqmobile_helpers https://github.com/wakeless/rails-jquery-mobile
- 70. Examples
- 72. Wanderlust Stories http://wanderluststories.com/
- 77. Conclusions
- 78. Native apps vs. Web apps
- 81. Benefits of Native Apps Performance User Experience Installation Monetization options Distribution & Market visibility
- 82. Benefits of Web Apps Interoperability & cross platform Installation & deployment options URLs Shorter Time to Market Deploy instantly, no approval process Your skills
- 83. Resources
- 84. Dive Into HTML5 by Mark Pilgrim http://diveintohtml5.org
- 85. Introducing HTML5 by Bruce Lawson and Remy Sharp http://introducinghtml5.com/
- 86. HTML5 Demos by Remy Sharp http://html5demos.com https://github.com/remy/html5demos
- 87. Mobilizer from SpringBox http://www.springbox.com/mobilizer/
- 89. Questions.
- 90. Creative Commons Title Author URL iPad vs iPhone Julien GONG Min http://www.flickr.com/photos/bfishadow/4604166391/ No worries http://www.flickr.com/photos/uggboy/5382476400/ Just Care Baby John Martinez Pavliga http://www.flickr.com/photos/virtualsugar/4590816785/ godzilla-anatomy Joe Wu http://www.flickr.com/photos/ozzywu1974/5143458938/ Manifest of Alien Passengers SS Ultonia Southampton(Apr.22, 1913) - Quebec Brent http://www.flickr.com/photos/stupiddingo/3728417282/ (May 8, 1913) 1 of 2 Pain Nathan Phillips http://www.flickr.com/photos/npphoto/4383990220/ http://www.flickr.com/photos/kalleboo/3277120428/ Storage Karl Baron Jocelyn Foye - Sumo - Face Off - Gateway Japan @ Torrance Art Museum (small) http://www.flickr.com/photos/lifeontheedge/5565245900/ box wrenches S. Diddy http://www.flickr.com/photos/spence_sir/2292721218/