Tweet
Tweet

Slide 1

Slide 1 text

Mobile for PHP Developers Shaun Farrell May 25, 2011 13:00 Sunday, May 22, 2011

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Going Mobile • Mobile is everywhere. It’s in your pocket. Sunday, May 22, 2011

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

A bit of History Sunday, May 22, 2011

Slide 6

Slide 6 text

• 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

Slide 7

Slide 7 text

Remember? Sunday, May 22, 2011

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Types of Phones Sunday, May 22, 2011

Slide 10

Slide 10 text

Types of Phones Voice Only Sunday, May 22, 2011

Slide 11

Slide 11 text

Types of Phones Voice Only Feature Phones Sunday, May 22, 2011

Slide 12

Slide 12 text

Types of Phones Voice Only Feature Phones PDA Phones Sunday, May 22, 2011

Slide 13

Slide 13 text

Types of Phones Voice Only Feature Phones PDA Phones Smart Phones Sunday, May 22, 2011

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Let’s Agree • Let’s not debate which approach, native or web, should win in the marketplace. Sunday, May 22, 2011

Slide 16

Slide 16 text

Mobile Web • Mobile Web refers to using a mobile phone device incorporating a web browser to access websites. Sunday, May 22, 2011

Slide 17

Slide 17 text

Native • Native refers to an application designed to run in the computer environment (machine language and OS) being referenced. Sunday, May 22, 2011

Slide 18

Slide 18 text

Sunday, May 22, 2011

Slide 19

Slide 19 text

Sunday, May 22, 2011

Slide 20

Slide 20 text

Native Applications • Performance • Designed a specific device • Take Advantage of Phone’s Features • Monetization • Visibility • Game Development • Distribution • Offline Capability Sunday, May 22, 2011

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Sunday, May 22, 2011

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Let’s Talk Code Sunday, May 22, 2011

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Detection Option #2 • Pay someone Sunday, May 22, 2011

Slide 30

Slide 30 text

Detection Option #3 • Javascript Sunday, May 22, 2011

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

@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

Slide 34

Slide 34 text

Detection Option #5 • PHP Sunday, May 22, 2011

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

$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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

There are about 14,000 Devices in WURFL Sunday, May 22, 2011

Slide 40

Slide 40 text

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
vs
Sunday, May 22, 2011

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

WURFL Device Data • iPhone 4 • Exact Match Sunday, May 22, 2011

Slide 43

Slide 43 text

WURFL Device Data • iPhone • Generic Match Sunday, May 22, 2011

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

data/wurfl.zip data/patch_01.xml cache/ memcache serverIp=127.0.0.1 Sunday, May 22, 2011

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Accessing Capabilities $device = $wurflManager->getDeviceForHttpRequest($_SERVER); $isWireless = $device->getCapability('is_wireless_device'); $device = $wurflManager->getDeviceForHttpRequest($_SERVER); $all_capabilities = $device->getAllCapabilities(); Sunday, May 22, 2011

Slide 50

Slide 50 text

With Zend Framework Sunday, May 22, 2011

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

ZF Context Switching • Target specific devices. • Switch views. Sunday, May 22, 2011

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

$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

Slide 57

Slide 57 text

public function init() { $this->_helper->contextSwitch() ->addActionContext('index', array('iphone', 'ipad')) ->initContext(); } index.ipad.phtml index.iphone.phtml index.phtml Sunday, May 22, 2011

Slide 58

Slide 58 text

Putting it all Together http://www.flickr.com/photos/pixelcore/88061381/sizes/z/in/photostream/ Sunday, May 22, 2011

Slide 59

Slide 59 text

The Pieces • HTML5 • CSS3 • AJAX • Your API’s • PHP (obviously!) Sunday, May 22, 2011

Slide 60

Slide 60 text

HTML 5 • Video • Canvas • GeoLocation • Local Storage • IndexDB Sunday, May 22, 2011

Slide 61

Slide 61 text

CSS 3 • Transitions • Effects • CSS Orientation Sunday, May 22, 2011

Slide 62

Slide 62 text

Ajax • Hijack all requests! • Make AJAX calls to your PHP Pages and your API. Sunday, May 22, 2011

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Tips & Tricks http://www.flickr.com/photos/viteez/4571357063/sizes/z/in/photostream/ Sunday, May 22, 2011

Slide 68

Slide 68 text

Design • Don’t make your app look like a Mobile Web App! • Inspiration (http:// cssiphone.com/) Sunday, May 22, 2011

Slide 69

Slide 69 text

Home Screen Icon Sunday, May 22, 2011

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Go Full Screen • Disable the standard safari user interface components • • Android Hide URL Bar • window.scrollTo(0, 1); Sunday, May 22, 2011

Slide 72

Slide 72 text

Add Splash Page • iPhone Only • • Only works from full screen mode Sunday, May 22, 2011

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Text: Telephone: URL: Email: Zip Code: Sunday, May 22, 2011

Slide 75

Slide 75 text

Sunday, May 22, 2011

Slide 76

Slide 76 text

Sunday, May 22, 2011

Slide 77

Slide 77 text

View Port • Allows you to control the scale of your content • Sunday, May 22, 2011

Slide 78

Slide 78 text

Sunday, May 22, 2011

Slide 79

Slide 79 text

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. • • Call me • Send me a text Sunday, May 22, 2011

Slide 80

Slide 80 text

Final Thoughts • Keep it Simple • Know your Users • Don’t go overboard • Use Your API’s! • TEST! Sunday, May 22, 2011

Slide 81

Slide 81 text

Questions? • @farrelley • [email protected] • http://joind.in/talk/view/3411 Sunday, May 22, 2011

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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