Rails for mobile devicesAlberto Perdomo                  Conferencia Rails 2011
Mobile devices
BlackberryNokiaPalmKindleWindows Phone
Issues
User Interface
ScreenDifferent sizes and resolutionsDifferent orientations: portrait vs. landscapeZooming
Touch interfaces
Touch interfacesSmall font size, little space between linksNo hoverGestures events vs. mouse events
The network
Heavy websites
Unsused assets
1 big asset vs. several smaller ones
Solutions
User Interface
Width
<!DOCTYPE html><html><head>    <title>Hello world!</title></head><body><p>Hello world!</p></body>
Viewport meta tag<meta name="viewport"      content="width=device-width, initial-scale=1">         Separated by commas, no...
Responsive Web Designs     http://mediaqueri.es/
Fluid layouts and stylesdepending on width & device         capabilities
Simon Collison: http://colly.com/
Andersson-Wise Architects: http://www.anderssonwise.com/
Conferencia Rails by @mamuso: http://conferenciarails.org/
Media Queries     W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/
Examplesblock for > 900px@media screen and (min-width: 900px) {  // styles for bigger displays}or separate CSS file<link r...
Frameworks
http://www.sencha.com/products/touch/   open source + commercial licenses
demos.Forms = new Ext.TabPanel({    items: [{        title: Basic,        xtype: form,        id: basicform,        scroll...
Javascript        DOMUnified User Interface
Clean semantic markup          +      JavascriptUnified User Interface
FeaturesjQuery                    Progressive                          enhancementCross-platform                          ...
Crossbrowser Experience
<!DOCTYPE html><html>  <head>  <title>Page Title</title>  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1...
Anatomy of a page<div data-role="page">  <div data-role="header">...</div>  <div data-role="content">...</div>  <div data-...
Example: Single Page<body><div data-role="page">  <div data-role="header">    <h1>Page Title</h1>  </div><!-- /header --> ...
Example: local linked pages <div data-role="page" id="foo" >   <div data-role="header">     <h1>Foo</h1>   </div><!-- /hea...
Other stuffComponents: Lists, Buttons, Dialogs, Grid, ...Hijax / AjaxPage transitions / AnimationsThemingDual license: MIT...
The Network
Pa! I:   "e manifest
At its simplest, an offline web application is alist of URLs — HTML, CSS, JavaScript, images,           or any other kind o...
SupportIE   Firefox   Safari   Chrome   Opera   iPhone   Android-     3.5+     4.0+      5.0+    10.6+    2.1+     2.0+
Basic example/index.html<!DOCTYPE HTML><html manifest="/offline.appcache" ><body>.../offline.appcache         Content type...
Anatomy of a manifest  <name>.appcache   CACHE MANIFEST   CACHE   /css/screen.css   /css/offline.css                      ...
Cache what?                           Place        All pages must be included Read         Browse                         ...
A more complex example                 All pages    CACHE MANIFEST                             Fallback for offline    FALL...
Manifest: Status status (returns boolean) navigator.onLine callbacks ononline onoffline
Manifest: DOM & Eventsobject                        eventswindow.applicationCache       checking                          ...
Manifest: DOM & Events                                                          manifest                                  ...
Rack Offline              by          Yehuda Katzhttps://github.com/wycats/rack-offline
AutomatedMobile::Application.routes.draw do  match "/application.manifest" => Rails::OfflineAutomatically caches all JS, C...
Custom manifestMobile::Application.routes.draw do  offline = Rack::Offline.configure do    cache [ "http://code.jquery.com...
Debugging
Part II: Storage
Local StorageImplemented natively in the browsersKey/Value storePersistenceNever sent to server (unlike cookies)Supported ...
Details5MB by defaultacessible through localStorage objectkey: String, value: Any JS supported typeUse parseInt, parseFloa...
ExamplesRead/Writevar foo = localStorage["bar"];localStorage["bar"] = foo;Clear keylocalStorage.removeItem("bar");Empty st...
Competitors: WebSQLSQL database in the browserSQLiteImplemented by some browsers: Safari, Chrome, WebkitAsynchronous APIRe...
Competitors: IndexedDB   No standard Query Language   Access through API functions   Very early stage, not yet usable
Toolbox
Detect requests from mobile devices in your Rails app      https://github.com/brendanlim/mobile-fu    https://github.com/s...
Rails helpers for jQuery Mobilehttps://github.com/Consoci8/jqmobile_helpershttps://github.com/wakeless/rails-jquery-mobile
Manifesthttps://github.com/wycats/rack-offline
Modernizrhttp://modernizr.com/
Examples
Googlehttp://mail.google.com
Wanderlust Stories  http://wanderluststories.com/
Testflighthttps://testflightapp.com/
PieGuyhttp://mrgan.com/pieguy
Movie Timeshttp://andrew.harrison.org/movies/
Harmonioushttp://harmoniousapp.com/app/
Conclusions
Native apps vs. Web apps
Benefits of Native AppsPerformanceUser ExperienceInstallationMonetization optionsDistribution & Market visibility
Benefits of Web AppsInteroperability & cross platformInstallation & deployment optionsURLsShorter Time to MarketDeploy inst...
Resources
Dive Into HTML5            by       Mark Pilgrim  http://diveintohtml5.org
Introducing HTML5              by Bruce Lawson and Remy Sharp  http://introducinghtml5.com/
HTML5 Demos               by           Remy Sharp      http://html5demos.comhttps://github.com/remy/html5demos
Mobilizer               from            SpringBoxhttp://www.springbox.com/mobilizer/
Thanks.@albertoperdomoalberto.perdomo @aentos.com
Questions.
Creative Commons                                     Title                                                  Author        ...
Rails for Mobile Devices @ Conferencia Rails 2011
Rails for Mobile Devices @ Conferencia Rails 2011
Rails for Mobile Devices @ Conferencia Rails 2011
Rails for Mobile Devices @ Conferencia Rails 2011
Rails for Mobile Devices @ Conferencia Rails 2011
Rails for Mobile Devices @ Conferencia Rails 2011
Rails for Mobile Devices @ Conferencia Rails 2011
Rails for Mobile Devices @ Conferencia Rails 2011
Rails for Mobile Devices @ Conferencia Rails 2011
Upcoming SlideShare
Loading in...5
×

Rails for Mobile Devices @ Conferencia Rails 2011

6,809

Published on

The slides from my talk "Rails for Mobile Devices" at Conferencia Rails 2011.

Published in: Technology
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,809
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

Transcript of "Rails for Mobile Devices @ Conferencia Rails 2011"

  1. 1. Rails for mobile devicesAlberto Perdomo Conferencia Rails 2011
  2. 2. Mobile devices
  3. 3. BlackberryNokiaPalmKindleWindows Phone
  4. 4. Issues
  5. 5. User Interface
  6. 6. ScreenDifferent sizes and resolutionsDifferent orientations: portrait vs. landscapeZooming
  7. 7. Touch interfaces
  8. 8. Touch interfacesSmall font size, little space between linksNo hoverGestures events vs. mouse events
  9. 9. The network
  10. 10. Heavy websites
  11. 11. Unsused assets
  12. 12. 1 big asset vs. several smaller ones
  13. 13. Solutions
  14. 14. User Interface
  15. 15. Width
  16. 16. <!DOCTYPE html><html><head> <title>Hello world!</title></head><body><p>Hello world!</p></body>
  17. 17. Viewport meta tag<meta name="viewport" content="width=device-width, initial-scale=1"> Separated by commas, not semicolons!!!
  18. 18. Responsive Web Designs http://mediaqueri.es/
  19. 19. Fluid layouts and stylesdepending on width & device capabilities
  20. 20. Simon Collison: http://colly.com/
  21. 21. Andersson-Wise Architects: http://www.anderssonwise.com/
  22. 22. Conferencia Rails by @mamuso: http://conferenciarails.org/
  23. 23. Media Queries W3C Candidate Recommendation http://www.w3.org/TR/css3-mediaqueries/
  24. 24. Examplesblock 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">
  25. 25. Frameworks
  26. 26. http://www.sencha.com/products/touch/ open source + commercial licenses
  27. 27. 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 }, { // ...
  28. 28. Javascript DOMUnified User Interface
  29. 29. Clean semantic markup + JavascriptUnified User Interface
  30. 30. FeaturesjQuery Progressive enhancementCross-platform AccessibilityLightweight (~12K comp)HTML5
  31. 31. Crossbrowser Experience
  32. 32. <!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>
  33. 33. Anatomy of a page<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div></div>
  34. 34. 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 -->
  35. 35. 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>Im first in the source order so Im 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
  36. 36. Other stuffComponents: Lists, Buttons, Dialogs, Grid, ...Hijax / AjaxPage transitions / AnimationsThemingDual license: MIT or GPL version 2
  37. 37. The Network
  38. 38. Pa! I: "e manifest
  39. 39. At its simplest, an offline web application is alist of URLs — HTML, CSS, JavaScript, images, or any other kind of resource. http://diveintohtml5.org/offline.html#divingin
  40. 40. SupportIE Firefox Safari Chrome Opera iPhone Android- 3.5+ 4.0+ 5.0+ 10.6+ 2.1+ 2.0+
  41. 41. 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
  42. 42. 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
  43. 43. Cache what? Place All pages must be included Read Browse purchasemessages articles orders Reference to manifest in each of them SendRead news messages The page that triggers the download of the manifest file Offline & online Online only does not to be included
  44. 44. A more complex example All pages CACHE MANIFEST Fallback for offline FALLBACK / /offline.html pages NETWORK Allow to browse * other pages when online
  45. 45. Manifest: Status status (returns boolean) navigator.onLine callbacks ononline onoffline
  46. 46. Manifest: DOM & Eventsobject eventswindow.applicationCache checking downloading progress cached noupdate updatereadyreload new cache after updatereadywindow.applicationCache.swapCache()
  47. 47. Manifest: DOM & Events manifest attr in <html> Event: checkingEvent: Event:progress progress yes no yes Download first changed? Download time? Event: Event: downloading downloading Event: Event: cached no Event: noupdate updateready Finished
  48. 48. Rack Offline by Yehuda Katzhttps://github.com/wycats/rack-offline
  49. 49. AutomatedMobile::Application.routes.draw do match "/application.manifest" => Rails::OfflineAutomatically caches all JS, CSS & HTML in publicIn development: include SHA based on timestamp to forcereloadIn production: include SHA based on underlying assets
  50. 50. Custom manifestMobile::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 # ...
  51. 51. Debugging
  52. 52. Part II: Storage
  53. 53. Local StorageImplemented natively in the browsersKey/Value storePersistenceNever sent to server (unlike cookies)Supported in common browsers, even IE > 8.0
  54. 54. Details5MB by defaultacessible through localStorage objectkey: String, value: Any JS supported typeUse parseInt, parseFloat, ... to retrieve objectsSynchronous API
  55. 55. ExamplesRead/Writevar foo = localStorage["bar"];localStorage["bar"] = foo;Clear keylocalStorage.removeItem("bar");Empty storagelocalStorage.clear();
  56. 56. Competitors: WebSQLSQL database in the browserSQLiteImplemented by some browsers: Safari, Chrome, WebkitAsynchronous APIRequires more code but is also more powerful
  57. 57. Competitors: IndexedDB No standard Query Language Access through API functions Very early stage, not yet usable
  58. 58. Toolbox
  59. 59. Detect requests from mobile devices in your Rails app https://github.com/brendanlim/mobile-fu https://github.com/shenoudab/active_device
  60. 60. Rails helpers for jQuery Mobilehttps://github.com/Consoci8/jqmobile_helpershttps://github.com/wakeless/rails-jquery-mobile
  61. 61. Manifesthttps://github.com/wycats/rack-offline
  62. 62. Modernizrhttp://modernizr.com/
  63. 63. Examples
  64. 64. Googlehttp://mail.google.com
  65. 65. Wanderlust Stories http://wanderluststories.com/
  66. 66. Testflighthttps://testflightapp.com/
  67. 67. PieGuyhttp://mrgan.com/pieguy
  68. 68. Movie Timeshttp://andrew.harrison.org/movies/
  69. 69. Harmonioushttp://harmoniousapp.com/app/
  70. 70. Conclusions
  71. 71. Native apps vs. Web apps
  72. 72. Benefits of Native AppsPerformanceUser ExperienceInstallationMonetization optionsDistribution & Market visibility
  73. 73. Benefits of Web AppsInteroperability & cross platformInstallation & deployment optionsURLsShorter Time to MarketDeploy instantly, no approval processYour skills
  74. 74. Resources
  75. 75. Dive Into HTML5 by Mark Pilgrim http://diveintohtml5.org
  76. 76. Introducing HTML5 by Bruce Lawson and Remy Sharp http://introducinghtml5.com/
  77. 77. HTML5 Demos by Remy Sharp http://html5demos.comhttps://github.com/remy/html5demos
  78. 78. Mobilizer from SpringBoxhttp://www.springbox.com/mobilizer/
  79. 79. Thanks.@albertoperdomoalberto.perdomo @aentos.com
  80. 80. Questions.
  81. 81. Creative Commons Title Author URLiPad 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 2Pain Nathan Phillips http://www.flickr.com/photos/npphoto/4383990220/ http://www.flickr.com/photos/kalleboo/3277120428/Storage Karl BaronJocelyn 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/

×