• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building tomorrow's web with today's tools
 

Building tomorrow's web with today's tools

on

  • 1,828 views

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 ...

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?

Statistics

Views

Total Views
1,828
Views on SlideShare
1,789
Embed Views
39

Actions

Likes
4
Downloads
55
Comments
0

2 Embeds 39

http://lanyrd.com 38
http://www.techgig.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

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

    Building tomorrow's web with today's tools Building tomorrow's web with today's tools Presentation Transcript

    • James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
    • BuildingTomorrow’s WebWith Today’s Tools
    • 1941
    • An Experience Designed for the Medium
    • 1995
    • An Experience Designed for the Medium
    • 2007
    • An Experience Designed for the Medium
    • History has taught us to embrace change
    • History has taught usto question assumptions
    • History has taught usto have high expectations
    • How The Webis Changing Mobile How Mobileis Changing The Web
    • 2008We must have an iPhone App!
    • 2009We must have an Android App!
    • 2010We must have an iPad App!
    • 2011We must have a...
    • omfg
    • JS C# Palm J2ME Microsoft RIM RIM Android AppleApple Air Microsoft PalmObj-C Java C++ Android Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
    • But what does this word even mean?The Mobile WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
    • A perfect storm
    • Documents ApplicationsDeclarative HTML Programmatic DOMThemes & templates JSON APIs Thin client Thick client URLs Arguments & signalsRequest/Response Synchronization
    • A New Web Stack WebFonts Video Audio GraphicsDevice Access Server & Services Camera CSS Styling & Layout HTTP Location AJAX JavaScript Contacts Events SMS Semantic HTML Sockets Orientation SSL File Systems Worker x-App Gyro DBs Parallel More... Messaging App Cache Processing
    • Web technologies are a viable alternativeto native development
    • built withApps vs Web technology
    • Documents ApplicationsDeclarative HTML Programmatic DOMThemes & templates JSON APIs Thin client Thick client URLs Arguments & signalsRequest/Response Synchronization Sedentary user Mobile user This is what it means
    • Mobile isan adjective not a noun
    • 480px) { and (m ax-width:@me dia screen png); #logo { mage: u rl(mobile. ba ckground-i }}
    • Mobile devices are di erent GPS device Camera Music player Phone
    • atio n/msword tent-Ty pe: applicCon
    • The Mobile Web is not a 320px Web
    • How did those assortedtank tops work out for you?
    • Techniques
    • adap tation nad·ap·ta·tio ˈtāSHəәn/  /ˌadəәp-/ dapnoun /ˌ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
    • Mobile adaptation Presentational Prioritizational Permutational
    • Presentational adaptation La yout
    • Prioritizational adaptation A tion and I N aviga
    • Permutational adaptation nality Fu nctio
    • The topology of adaptation Client Proxy Server
    • PresentationalPrioritizationalPermutational Client Proxy Server
    • ‘Passive’ client adaptation 55 </a> :// 555">5 =" tel < a href
    • Proxy adaptationThere’s a bad sortThere’s a good sort
    • Server adaptation Views HTML, CSS...Controllers Models
    • Server adaptation DesktopSwitcher HTML, CSS... Mobile Controllers Models
    • 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
    • Brand consistency
    • Device detection with PHPif (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
    • Device detection with Railsclass ApplicationController < ActionController::Base has_mobile_fuend*.mobile.erbis_mobile_device?in_mobile_view? https://github.com/brendanlim/mobile-fu
    • 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
    • Detection & user choice “Switch to our desktop site”
    • Thematic consistencyw3c-speak http://mysite.com/posts/123 http://m.mysite.com/posts/123
    • Using di erent URLs can preserve the integrity of ‘One Web’
    • Device diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
    • dapt ation a ve c lient esignPresentational Passi Web D sive R espon t ation adap Proxy t ection Devi ce dePrioritizational e le sit MobiPermutational Client Proxy Server
    • dapt ation a ve c lient esignPresentational Passi Web D sive R espon t ation adap Proxy t ection Devi ce dePrioritizational e le sit MobiPermutational Client Proxy Server
    • A dedicated mobile app DesktopSwitchers Mobile REST JSO on Controllers N ce Models
    • The stack of the present req/resUser interface RenderingBusiness logic Storage
    • The stack of the future User interface syncSecurity Business logicStorage Storage The return of the thick client
    • Do we have time for some code?
    • Progressive enhancement
    • assumption HTML JS CSS progressive enhancement app doc vs assumptionHTML JS CSS app detection +/- feature
    • Thick client, thin serverThe shortfall in the cloud
    • http://mysite.com/myimage.pnghttp://i.tinysrc.mobi/http://mysite.com/myimage.png
    • dapt ation a ve c lient esignPresentational Passi Web D sive R espon t ation adap Proxy t ection Devi ce dePrioritizational e le sit Mobi p d su pportPermutational Mob ile ap Clou Client Proxy Server
    • Mobile isan adjective not a noun
    • The Mobile Web is not a 320px Web
    • History has taught us to embrace change
    • History has taught usto question assumptions
    • History has taught usto have high expectations
    • James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com