Few have the chance to create web-based mobile services from scratch. After years of investment in existing platforms (such as content management systems), how can you re-use your content, your servers, and your knowledge and evolve them to meet the mobile challenge?
22. JS
C# Palm J2ME
Microsoft
RIM RIM
Android
Apple
Apple Air Microsoft
Palm
Obj-C
Java
C++ Android Top U.S. Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010
23. But what does this word even mean?
The Mobile Web
Cross-platform
Familiar skills & tools
Decentralized
Easily updated
Indexed
Well-understood technologies
31. Documents Applications
Declarative HTML Programmatic DOM
Themes & templates JSON APIs
Thin client Thick client
URLs Arguments & signals
Request/Response Synchronization
Sedentary user Mobile user
This is what it means
42. adap tation
n
ad·ap·ta·tio ˈtāSHəәn/ /ˌadəәp-/
dap
noun /ˌa
o f adapting
or process
1. The action ted
or being adap
r stage play
sio n drama, o itten work
2. A mo vie, televi f rom a wr
en adapted
that has be
or species
an organism nment
by which o its envir
o
3. A change t
etter suited
becomes b
52. Server adaptation
Desktop
Switcher
HTML, CSS...
Mobile
Controllers
Models
53. Device detection with plugins
WordPress Mobile Pack
http://wordpress.org/extend/plugins/wordpress-mobile-pack
WPTouch
http://wordpress.org/extend/plugins/wptouch
Drupal Mobile Plugin
http://drupal.org/project/mobileplugin
55. Device detection with PHP
if (isset($_SERVER['HTTP_X_WAP_PROFILE']) { ...
if (in_array(substr($user_agent, 0, 4), $prefixes)) { ...
if (strpos($accept, 'wap') !== false) { ...
if (preg_match("/(" . $keywords . ")/i", $user_agent)) { ...
https://github.com/jamesgpearce/mobiledetect
56. Device detection with Rails
class ApplicationController < ActionController::Base
has_mobile_fu
end
*.mobile.erb
is_mobile_device?
in_mobile_view?
https://github.com/brendanlim/mobile-fu
57. Device detection with node.js
var Connect = require("connect"),
Monomi = require("monomi");
Connect.createServer(
Monomi.detectBrowserType(),
function(request, response, next) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.write('Hello World: ');
response.end('you are using a ' + request.monomi.browserType);
}
).listen(8080);
https://github.com/jamesgpearce/monomi
61. Using di erent URLs
can preserve
the integrity of
‘One Web’
62. Device diversity
Can I Use?
http://caniuse.com
Modernizr
http://modernizr.com
DeviceAtlas
http://deviceatlas.com
63. dapt ation
a
ve c lient esign
Presentational Passi Web
D
sive
R espon t ation
adap
Proxy t ection
Devi ce de
Prioritizational
e
le sit
Mobi
Permutational
Client Proxy Server
64. dapt ation
a
ve c lient esign
Presentational Passi Web
D
sive
R espon t ation
adap
Proxy t ection
Devi ce de
Prioritizational
e
le sit
Mobi
Permutational
Client Proxy Server
65. A dedicated mobile app
Desktop
Switchers
Mobile
REST
JSO on
Controllers N
ce
Models
66. The stack of the present
req/res
User interface Rendering
Business logic
Storage
67. The stack of the future
User interface
sync
Security Business logic
Storage Storage
The return of
the thick client
74. dapt ation
a
ve c lient esign
Presentational Passi Web
D
sive
R espon t ation
adap
Proxy t ection
Devi ce de
Prioritizational
e
le sit
Mobi
p d su pport
Permutational
Mob ile ap Clou
Client Proxy Server