Rails for Mobile Devices @ Conferencia Rails 2011

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

<!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 DOMUniﬁed User Interface

Clean semantic markup + JavascriptUniﬁed 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> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div></div>

Example: local linked pages <div data-role="page" id="foo" > <div data-role="header"> <h1>Foo</h1> </div> <div data-role="content"> When loading the HTML page <p>Im first in the source order so Im shown as the page.</p> the ﬁrst page is autom. shown <p>View internal page called <a href="#bar">bar</a></p> </div> and the rest hidden <div data-role="footer"> <h4>Page Footer</h4> </div> </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 ofﬂine web application is alist of URLs — HTML, CSS, JavaScript, images, or any other kind of resource. http://diveintohtml5.org/ofﬂine.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 ﬁles to cache /images/logo.png http://example.com/code.js FALLBACK List of ﬁles 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 ﬁle Ofﬂine & online Online only does not to be included

A more complex example All pages CACHE MANIFEST Fallback for ofﬂine 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-ofﬂine

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-ofﬂine

Modernizrhttp://modernizr.com/

Examples

Googlehttp://mail.google.com

Wanderlust Stories http://wanderluststories.com/

Testﬂighthttps://testﬂightapp.com/

PieGuyhttp://mrgan.com/pieguy

Movie Timeshttp://andrew.harrison.org/movies/

Harmonioushttp://harmoniousapp.com/app/

Conclusions

Native apps vs. Web apps

Beneﬁts of Native AppsPerformanceUser ExperienceInstallationMonetization optionsDistribution & Market visibility

Beneﬁts 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/

http://blog.aentos.com	130
http://speakerrate.com	36
http://www.techgig.com	10
https://twitter.com	5
http://twitter.com	1
http://zootool.com	1
http://coderwall.com	1

Rails for Mobile Devices @ Conferencia Rails 2011

by Alberto Perdomo

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 184

Statistics

Rails for Mobile Devices @ Conferencia Rails 2011 Presentation Transcript