Mobile for PHP Developers

PHP|tek 2011

1. Mobile for PHP Developers Shaun Farrell May 25, 2011 13:00 Sunday, May 22, 2011
2. Who? • Live & work in Washington, DC • Federal Contractor • Senior Developer @ CACI International, Inc. • Founder of Brewery DB (PintLabs) • Like Beer • Like to Run Sunday, May 22, 2011
3. Going Mobile • Mobile is everywhere. It’s in your pocket. Sunday, May 22, 2011
4. Web Browser Usage • Reston, VA based comScore tracks mobile usage. In September (2010), 35 percent of mobile phone subscribers used a Web browser. A slightly smaller portion, 33 percent, used downloaded apps. Sunday, May 22, 2011
5. A bit of History Sunday, May 22, 2011
6. • WML & HDML - stripped-down formats suitable for transmission across limited bandwidth, and wireless data connection called WAP • WAP 1.0 - released in1997 • WAP 2.0 - released in 2002 • WAP 2.0 - Striped version of XHTML (XHTML-MP) • HTML5 Sunday, May 22, 2011
7. Remember? Sunday, May 22, 2011
8. IBM Simon • First smartphone released to the public in 1993 by BellSouth. It combined features included mobile phone, pager, PDA and fax machine Sunday, May 22, 2011
9. Types of Phones Sunday, May 22, 2011
10. Types of Phones Voice Only Sunday, May 22, 2011
11. Types of Phones Voice Only Feature Phones Sunday, May 22, 2011
12. Types of Phones Voice Only Feature Phones PDA Phones Sunday, May 22, 2011
13. Types of Phones Voice Only Feature Phones PDA Phones Smart Phones Sunday, May 22, 2011
14. Native or Mobile Web? http://www.siteworx.com/blog/2011/03/29/helping-cmo’s-navigate-the-html5-vs-native-mobile-app-dilemma/r1_swxmd60_cmo-html5- nativeapp_a/ Sunday, May 22, 2011
15. Let’s Agree • Let’s not debate which approach, native or web, should win in the marketplace. Sunday, May 22, 2011
16. Mobile Web • Mobile Web refers to using a mobile phone device incorporating a web browser to access websites. Sunday, May 22, 2011
17. Native • Native refers to an application designed to run in the computer environment (machine language and OS) being referenced. Sunday, May 22, 2011
18. Sunday, May 22, 2011
19. Sunday, May 22, 2011
20. Native Applications • Performance • Designed a specific device • Take Advantage of Phone’s Features • Monetization • Visibility • Game Development • Distribution • Offline Capability Sunday, May 22, 2011
21. Mobile Web Applications • Develop in your language of choice • Develop once • No Approval Process • Instant updates and feature releases • COST! • Interoperability Sunday, May 22, 2011
22. How to Choose? • Do you want to get your app online tomorrow? • Do you know Java, Objective C, .NET? • What type of application are you building? • Do you have $ and patience? • Bill French - Founder of iPadCTO - Web Planning Framework Sunday, May 22, 2011
23. Sunday, May 22, 2011
24. Hybrid Approach • What’s the Hybrid Approach • Benefits • Downsides • PhoneGap - http://www.phonegap.com/ • Appcelerator - http://www.appcelerator.com/ products/titanium-mobile-application- development/ Sunday, May 22, 2011
25. Let’s Talk Code Sunday, May 22, 2011
26. Development Strategies • Know your users • Don’t try to do it all • Figure out what is most important part of your site • Decide how you are going to host your site • How are you going to get your users to your mobile site • Your backend data store. Sunday, May 22, 2011
27. Device Detection • Most important part of your mobile site • How do we get users to the mobile site • Don’t break the user experience! Sunday, May 22, 2011
28. Detection Option #1 • Do Nothing • Put a link somewhere on your site that allows the user to go to the mobile site. Sunday, May 22, 2011
29. Detection Option #2 • Pay someone Sunday, May 22, 2011
30. Detection Option #3 • Javascript Sunday, May 22, 2011
31. var uagent = navigator.userAgent.toLowerCase(); mozilla/5.0 (iphone; u; cpu iphone os 3_0 like mac os x; en-us) applewebkit/528.18 (khtml, like gecko) version/4.0 mobile/7a341 safari/ 528.16 Sunday, May 22, 2011
32. Detection Option #4 • Media queries (CSS) • A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. Sunday, May 22, 2011
33. @media only screen and (max-width: 999px) { /* rules that only apply for canvases narrower than 1000px */ } @media only screen and (device-width: 768px) and (orientation: landscape) { /* rules for iPad in landscape orientation */ } @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { /* iPhone, Android rules here */ } Sunday, May 22, 2011
34. Detection Option #5 • PHP Sunday, May 22, 2011
35. preg_match('/(up.browser|up.link|mmp|symbian|smartphone| midp|wap|phone|android)/i', str tolower($_SERVER ['HTTP_USER_AGENT']))) strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/ vnd.wap.xhtml+xml') > 0 isset($_SERVER['HTTP_X_WAP_PROFILE']) isset($_SERVER['HTTP_PROFILE']) Sunday, May 22, 2011
36. $mobile_ua = strtolower(substr($_SERVER ['HTTP_USER_AGENT'], 0, 4)); $mobile_agents = array('w3c', 'acs-', 'alav', 'alca', 'amoi', 'audi', 'avan', 'benq', 'bird', 'blac', 'blaz', 'brew', 'cell', 'cldc', 'cmd-', 'dang', 'doco', 'eric', 'hipt', 'inno', 'ipaq', 'java', 'jigs', 'kddi', 'keji', 'leno', 'lg-c', 'lg-d', 'lg-g', 'lge-', ETC...); in_array($mobile_ua,$mobile_agents) Sunday, May 22, 2011
37. Detection Option #6 • Device Library • Target specific features • DeviceAtlas vs. WURFL • Both are are great services that detect devices based on user agent. • What’s the difference • DeviceAtlas cost money & WURFL is free • They are basically the same thing Sunday, May 22, 2011
38. What is WURFL? • Wireless Universal Resource File • Open Source • It’s an XML configuration file which contains information about capabilities and features of many mobile devices. • Has an API • Zend Framework - Zend_Http_UserAgent Sunday, May 22, 2011
39. There are about 14,000 Devices in WURFL Sunday, May 22, 2011
40. WURFL History • WALL - Basically WALL allowed WML developers to adopt XHTML-MP in the early days. • WALL NG - Allows you to make XHTML- MP & CSS look the same on all phones <br> vs <br /> <wall:br/> <wng:css_property name="font-size" value="14px"/> Sunday, May 22, 2011
41. How does it Work? • WURFL is a Large XML File • You use the PHP Classes to Capture UserAgent • Conclusive vs. Recovery Heuristics • Finds to see exact match. • If not exact match drops down to generic settings for that mobile device. Sunday, May 22, 2011
42. WURFL Device Data • iPhone 4 • Exact Match Sunday, May 22, 2011
43. WURFL Device Data • iPhone • Generic Match Sunday, May 22, 2011
44. WURFL Getting Started • Make sure your PHP installation can handle ZIP archives • You need the PEAR Logging libraries • You need WURFL API package • Extract the WURFL package edit the wurfl-config.xml • Initialize the WURFL manager. Sunday, May 22, 2011
45. <wurfl-config> <wurfl> <main-file>data/wurfl.zip</main-file> <patches> <patch>data/patch_01.xml</patch> </patches> </wurfl> <!-- cache-dir specifies the directory used for caching. Make sure PHP has write access --> <cache-dir>cache/</cache-dir> </wurfl-config> <cache> <provider>memcache</provider> <params>serverIp=127.0.0.1</params> </cache> Sunday, May 22, 2011
46. Getting Device Data • 4 different ways to get data about a device. • WURFL_Request_GenericRequest - getDeviceForRequest() • HTTP_Request like $_SERVER getDeviceForHttpRequest() • UserAgent - getDeviceForUserAgent() • Device Id - getDevice() Sunday, May 22, 2011
47. WURFL Capabilities • WURFL Capabilities • The capabilities allow you to customize a users experience • For Example: If you have a cool flash presentation that you want to show you can’t do it with an iPhone or Blackberry but you MAY be able to do it with an Android Sunday, May 22, 2011
48. WURFL Capabilities • brand_name • marketing_name • model_name • is_tablet • mobile_browser • is_wireless_device • has_qwerty_keyboard • can_assign_phone_number • resolution_width, resolution_height • dual_orientation • canvas_support • physical_screen_width, physical_screen_height Sunday, May 22, 2011
49. Accessing Capabilities $device = $wurflManager->getDeviceForHttpRequest($_SERVER); $isWireless = $device->getCapability('is_wireless_device'); $device = $wurflManager->getDeviceForHttpRequest($_SERVER); $all_capabilities = $device->getAllCapabilities(); Sunday, May 22, 2011
50. With Zend Framework Sunday, May 22, 2011
51. Zend Framework • It’s basically the same with Zend Framework • Zend_Http_UserAgent • Front Controller Plugin • Modules • Context Switching and Layouts Sunday, May 22, 2011
52. ZF Layouts public function dispatchLoopStartup(Zend_Controller_Request_Abstract $request) { $bootstrap = Zend_Controller_Front::getInstance()->getParam('bootstrap'); $userAgent = $bootstrap->getResource('useragent'); if ('mobile' != $userAgent->getBrowserType()) { return; } $layout = $bootstrap->getResource('layout'); $width = $userAgent->getDevice()->getPhysicalScreenWidth(); Sunday, May 22, 2011
53. switch (true) { case ($width <= 128): $layout->setLayout('layout-poor'); break; case ($width <= 176): $layout->setLayout('layout-medium'); break; case ($width <= 240): $layout->setLayout('layout-high'); break; case ($width <= 320): $layout->setLayout('layout-ultra'); break; default: // use default break; } } Sunday, May 22, 2011
54. ZF Context Switching • Target specific devices. • Switch views. Sunday, May 22, 2011
55. public function dispatchLoopStartup(Zend_Controller_Request_Abstract $request) { $contextSwitch = Zend_Controller_Action_HelperBroker::getStaticHelper('ContextSwitch'); $contextSwitch->clearContexts() ->setContext( 'iphone', array( 'suffix' => 'iphone', 'headers' => array( 'Content-Type' => 'text/html; Charset=UTF-8', ), ) ) ->setContext( 'ipad', array( 'suffix' => 'ipad', 'headers' => array( 'Content-Type' => 'text/html; Charset=UTF-8', ), ) ) ->setContext( 'html', array( 'headers' => array( 'Content-Type' => 'text/html; Charset=UTF-8', ), ) ) ->setAutoDisableLayout(false) ->setDefaultContext('html') ->initContext(); Sunday, May 22, 2011
56. $bootstrap = Zend_Controller_Front::getInstance()->getParam('bootstrap'); $userAgent = $bootstrap->getResource('useragent'); switch($userAgent->getDevice()->getFeature('device')) { case "iphone": $request->setParam('format', 'iphone'); break; case "ipad": $request->setParam('format', 'ipad'); break; default: $request->setParam('format', 'html'); } Sunday, May 22, 2011
57. public function init() { $this->_helper->contextSwitch() ->addActionContext('index', array('iphone', 'ipad')) ->initContext(); } index.ipad.phtml index.iphone.phtml index.phtml Sunday, May 22, 2011
58. Putting it all Together http://www.flickr.com/photos/pixelcore/88061381/sizes/z/in/photostream/ Sunday, May 22, 2011
59. The Pieces • HTML5 • CSS3 • AJAX • Your API’s • PHP (obviously!) Sunday, May 22, 2011
60. HTML 5 • Video • Canvas • GeoLocation • Local Storage • IndexDB Sunday, May 22, 2011
61. CSS 3 • Transitions • Effects • CSS Orientation <link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css” <link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”> Sunday, May 22, 2011
62. Ajax • Hijack all requests! • Make AJAX calls to your PHP Pages and your API. Sunday, May 22, 2011
63. Use API’s • Use API’s! • You already know PHP! • Keep your data transmissions small. • Have PHP make request to API and/or Database and return JSON or XML via AJAX Request! Sunday, May 22, 2011
64. Warnings • Mobile Processors aren’t as powerful as your computer • Your 3G or LTE connection is SLOW • Minimize your requests to the server • Don’t use transition because they LOOK COOL! Sunday, May 22, 2011
65. Tools to Help you out • There is a lot to think about • You can do it all yourself! • However, there are some tools to help you! • jQuery Mobile - www.jQuerymobile.com • Sencha Touch - http://www.sencha.com/ • jQTouch - http://jqtouch.com/ • These are all good but not everyone has a smartphone! Sunday, May 22, 2011
66. Testing • Draw a line in the sand • By lots of phones • Go to the AT&T, Verizon, T-Mobile Stores • Simulators • Switch browser’s user agents • jQuery Mobile site talks about how they do testing. Worth a look! Sunday, May 22, 2011
67. Tips & Tricks http://www.flickr.com/photos/viteez/4571357063/sizes/z/in/photostream/ Sunday, May 22, 2011
68. Design • Don’t make your app look like a Mobile Web App! • Inspiration (http:// cssiphone.com/) Sunday, May 22, 2011
69. Home Screen Icon <link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="iphone4.png" /> <link rel="apple-touch-icon- precomposed" href="android.png" /> Sunday, May 22, 2011
70. Home Screen Icon • Add Javascript to Allow user to add to Home Screen • iPhone - Mobile Bookmark Bubble - http:// code.google.com/p/ mobile-bookmark- bubble/ Sunday, May 22, 2011
71. Go Full Screen • Disable the standard safari user interface components • <meta name="apple- mobile-web-app- capable" content="yes" /> • Android Hide URL Bar • window.scrollTo(0, 1); Sunday, May 22, 2011
72. Add Splash Page • iPhone Only • <link rel="apple- touch-startup-image" href=startup.png" /> • Only works from full screen mode Sunday, May 22, 2011
73. Keyboards • Keystrokes - Keep the number of keystrokes to a minimum. • Free Text - Avoid free text entry where possible. • Defaults - Provide pre-selected default values where possible. • Input modes/formats - Specify a default text entry mode, language and/or input format, if the device is known to support it. Sunday, May 22, 2011
74. <!-- display a standard keyboard --> Text: <input type="text" /> <!-- display a telephone keypad --> Telephone: <input type="tel" /> <!-- display a URL keyboard --> URL: <input type="url" /> <!-- display an email keyboard --> Email: <input type="email" /> <!-- display a numeric keyboard --> Zip Code: <input type="text" pattern="[0-9]*" /> Sunday, May 22, 2011
75. Sunday, May 22, 2011
76. Sunday, May 22, 2011
77. View Port • Allows you to control the scale of your content • <meta name="viewport" content="width=device-width; initial- scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user- scalable=false;"/> Sunday, May 22, 2011
78. Sunday, May 22, 2011
79. Format Detection • Format Detection - By default, Safari on iOS detects any string formatted like a phone number and makes it a link that calls the number. • If you don’t like that you can turn it off. • <meta name="format-detection" content="telephone=no"> • <a href="tel:12345678900">Call me</a> • <a href="sms:12345678900">Send me a text</a> Sunday, May 22, 2011
80. Final Thoughts • Keep it Simple • Know your Users • Don’t go overboard • Use Your API’s! • TEST! Sunday, May 22, 2011
81. Questions? • @farrelley • farrelley@gmail.com • http://joind.in/talk/view/3411 Sunday, May 22, 2011
82. Resources • Modernizr is a JavaScript library that allows you to use CSS3 and HTML5 features while maintaining a fine level of control over browsers that don't. (http://www.modernizr.com/) • FormFactor helps you customize your web app for different form factors, e.g. when you make "the mobile version", "the TV version", etc. (https://github.com/PaulKinlan/formfactor) • Mustache Logic-less templates. (http://mustache.github.com/) • Lawnchair Sorta like a couch except smaller and outside, also, a client side JSON document store (http://westcoastlogic.com/lawnchair/) • JQuery Touch - http://plugins.jquery.com/files/jquery.touch.js.txt • TouchScroll - http://uxebu.com/blog/2010/04/27/touchscroll-a- scrolling-layer-for-webkit-mobile/ Sunday, May 22, 2011
83. Resources • Leviroutes - A basic routes framework for JS that hooks in to HTML5 history (https://github.com/ PaulKinlan/leviroutes) • Mobile Web Development: From Zero to Hero by Michael Mahemoff and Paul Kinlan take a pragmatic approach as they walk you through building a mobile web app in HTML5. Mobile is hot hot hot. (http://www.youtube.com/watch?v=vV85dNeGRhY) • WURFL Explorer - http://www.tera-wurfl.com/ explore/ Sunday, May 22, 2011