Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile for PHP Developers

Mobile for PHP Developers

PHP|tek 2011

15130e56cd419190f5212187ab3f9b06?s=128

Shaun Farrell

May 25, 2011
Tweet

More Decks by Shaun Farrell

Other Decks in Technology

Transcript

  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