Building tomorrow's web with today's tools
4 likes739 views
The document discusses the evolution of web and mobile technologies, emphasizing the need for adaptation and change in developing web applications. It highlights the importance of mobile design principles, device diversity, and the role of various tools and frameworks in creating effective mobile experiences. The message conveys that mobile is an adjective describing the context of use, rather than merely a type of web experience.
![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](https://image.slidesharecdn.com/buildingtomorrowswebwithtodaystools-key-110413201446-phpapp01/85/Building-tomorrow-s-web-with-today-s-tools-55-320.jpg)
Building tomorrow's web with today's tools
- 2. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
- 3. Building Tomorrow’s Web With Today’s Tools
- 4. 1941
- 5. An Experience Designed for the Medium
- 6. 1995
- 7. An Experience Designed for the Medium
- 8. 2007
- 9. An Experience Designed for the Medium
- 10. History has taught us to embrace change
- 11. History has taught us to question assumptions
- 12. History has taught us to have high expectations
- 13. How The Web is Changing Mobile How Mobile is Changing The Web
- 14. 2008 We must have an iPhone App!
- 15. 2009 We must have an Android App!
- 16. 2010 We must have an iPad App!
- 17. 2011 We must have a...
- 19. omfg
- 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
- 24. A perfect storm
- 25. Documents Applications Declarative HTML Programmatic DOM Themes & templates JSON APIs Thin client Thick client URLs Arguments & signals Request/Response Synchronization
- 27. A New Web Stack WebFonts Video Audio Graphics Device 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
- 29. Web technologies are a viable alternative to native development
- 30. built with Apps vs Web technology
- 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
- 32. Mobile is an adjective not a noun
- 33. 480px) { and (m ax-width: @me dia screen png); #logo { mage: u rl(mobile. ba ckground-i } }
- 34. Mobile devices are di erent GPS device Camera Music player Phone
- 35. atio n/msword tent-Ty pe: applic Con
- 36. The Mobile Web is not a 320px Web
- 40. How did those assorted tank tops work out for you?
- 41. Techniques
- 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
- 43. Mobile adaptation Presentational Prioritizational Permutational
- 44. Presentational adaptation La yout
- 45. Prioritizational adaptation A tion and I N aviga
- 46. Permutational adaptation nality Fu nctio
- 47. The topology of adaptation Client Proxy Server
- 48. Presentational Prioritizational Permutational Client Proxy Server
- 49. ‘Passive’ client adaptation 55 </a> :// 555">5 =" tel < a href
- 50. Proxy adaptation There’s a bad sort There’s a good sort
- 51. Server adaptation Views HTML, CSS... Controllers Models
- 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
- 58. Detection & user choice “Switch to our desktop site”
- 60. Thematic consistency w3c-speak http://mysite.com/posts/123 http://m.mysite.com/posts/123
- 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
- 69. Do we have time for some code?
- 71. assumption HTML JS CSS progressive enhancement app doc vs assumption HTML JS CSS app detection +/- feature
- 72. Thick client, thin server The shortfall in the cloud
- 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
- 76. Mobile is an adjective not a noun
- 77. The Mobile Web is not a 320px Web
- 78. History has taught us to embrace change
- 79. History has taught us to question assumptions
- 80. History has taught us to have high expectations
- 81. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com