• Save
Rails for Mobile Devices @ Conferencia Rails 2011
Upcoming SlideShare
Loading in...5
×
 

Rails for Mobile Devices @ Conferencia Rails 2011

on

  • 6,753 views

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

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

Statistics

Views

Total Views
6,753
Views on SlideShare
6,530
Embed Views
223

Actions

Likes
18
Downloads
0
Comments
0

8 Embeds 223

http://blog.aentos.com 134
http://speakerrate.com 36
http://localhost 25
http://www.techgig.com 20
https://twitter.com 5
http://twitter.com 1
http://zootool.com 1
http://coderwall.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Rails for Mobile Devices @ Conferencia Rails 2011 Rails for Mobile Devices @ Conferencia Rails 2011 Presentation Transcript

  • 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, not semicolons!!!
  • 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 rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />tablets<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
  • Frameworks
  • http://www.sencha.com/products/touch/ open source + commercial licenses
  • 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 }, { // ...
  • Javascript DOMUnified User Interface
  • Clean semantic markup + JavascriptUnified User Interface
  • FeaturesjQuery Progressive enhancementCross-platform AccessibilityLightweight (~12K comp)HTML5
  • Crossbrowser Experience
  • <!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>
  • Anatomy of a page<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div></div>
  • 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 -->
  • 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
  • Other stuffComponents: Lists, Buttons, Dialogs, Grid, ...Hijax / AjaxPage transitions / AnimationsThemingDual license: MIT or GPL version 2
  • 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 of resource. http://diveintohtml5.org/offline.html#divingin
  • 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: text/cache-manifest !!!CACHE MANIFEST/screen.css/application.js/logo.png
  • 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
  • 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
  • A more complex example All pages CACHE MANIFEST Fallback for offline FALLBACK / /offline.html pages NETWORK Allow to browse * other pages when online
  • Manifest: Status status (returns boolean) navigator.onLine callbacks ononline onoffline
  • Manifest: DOM & Eventsobject eventswindow.applicationCache checking downloading progress cached noupdate updatereadyreload new cache after updatereadywindow.applicationCache.swapCache()
  • 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
  • Rack Offline by Yehuda Katzhttps://github.com/wycats/rack-offline
  • 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
  • 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 # ...
  • Debugging
  • Part II: Storage
  • Local StorageImplemented natively in the browsersKey/Value storePersistenceNever sent to server (unlike cookies)Supported in common browsers, even IE > 8.0
  • Details5MB by defaultacessible through localStorage objectkey: String, value: Any JS supported typeUse parseInt, parseFloat, ... to retrieve objectsSynchronous API
  • ExamplesRead/Writevar foo = localStorage["bar"];localStorage["bar"] = foo;Clear keylocalStorage.removeItem("bar");Empty storagelocalStorage.clear();
  • Competitors: WebSQLSQL database in the browserSQLiteImplemented by some browsers: Safari, Chrome, WebkitAsynchronous APIRequires more code but is also more powerful
  • 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/shenoudab/active_device
  • 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 instantly, no approval processYour skills
  • 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 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/