Download as PDF, PPTX
![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/75/Building-tomorrow-s-web-with-today-s-tools-55-2048.jpg)
Uploaded byJames Pearce
Building tomorrow's web with today's tools
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.
More Related Content
![]project-open[ Data-Model 100511b](https://cdn.slidesharecdn.com/ss_thumbnails/po-dev-data-model-100511b-120831083756-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Building tomorrow's web with today's tools
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
Building tomorrow's web with today's tools
- 2. James Pearce Director,Developer Relations @ jamespearce jamesp@sencha.com
- 3.
- 4.
- 5. An Experience Designedfor the Medium
- 6.
- 7. An Experience Designedfor the Medium
- 8.
- 9. An Experience Designedfor the Medium
- 10. History has taughtus to embrace change
- 11. History has taughtus to question assumptions
- 12. History has taughtus to have high expectations
- 13. How The Web isChanging Mobile How Mobile is Changing The Web
- 14. 2008 We must havean iPhone App!
- 15. 2009 We must havean Android App!
- 16. 2010 We must havean iPad App!
- 17.
- 19.
- 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 doesthis word even mean? The Mobile Web Cross-platform Familiar skills & tools Decentralized Easily updated Indexed Well-understood technologies
- 24.
- 25. Documents Applications Declarative HTML Programmatic DOM Themes & templates JSON APIs Thin client Thick client URLs Arguments & signals Request/Response Synchronization
- 27. A New WebStack 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 vsWeb 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 adjectivenot a noun
- 33. 480px) { and (m ax-width: @me dia screen png); #logo { mage: u rl(mobile. ba ckground-i } }
- 34. Mobile devices aredi 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 thoseassorted tank tops work out for you?
- 41.
- 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 ofadaptation 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 abad 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 withplugins 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
- 54.
- 55. Device detection withPHP 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 withRails 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 withnode.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 & userchoice “Switch to our desktop site”
- 60. Thematic consistency w3c-speak http://mysite.com/posts/123 http://m.mysite.com/posts/123
- 61. Using di erentURLs can preserve the integrity of ‘One Web’
- 62. Device diversity Can IUse? 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 mobileapp Desktop Switchers Mobile REST JSO on Controllers N ce Models
- 66. The stack ofthe present req/res User interface Rendering Business logic Storage
- 67. The stack ofthe future User interface sync Security Business logic Storage Storage The return of the thick client
- 69. Do we havetime for some code?
- 70.
- 71. assumption HTML JS CSS progressive enhancement app doc vs assumption HTML JS CSS app detection +/- feature
- 72. Thick client, thinserver The shortfall in the cloud
- 73.
- 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 adjectivenot a noun
- 77. The Mobile Web is not a 320px Web
- 78. History has taughtus to embrace change
- 79. History has taughtus to question assumptions
- 80. History has taughtus to have high expectations
- 81. James Pearce Director,Developer Relations @ jamespearce jamesp@sencha.com