These are the slides for a three hour primer for PHP developers. It covers the whole spectrum from the mobile web to apis for native apps, as well as topics such as generating QR codes and sending push notifications from PHP to android and apple devices.
4. Contents
ā£ Part 1: Putting mobile in perspective
ā£ Part 2: Browser based mobile applications
ā£ Part 3: A few words on frontend design
ā£ Part 4: Cool stuff with PHP and native apps
ā£ Part 5: APIs for native apps
ā£ Part 6: Web vs Native: best of both worlds
ā£ Part 7: Random bits if time permits
4
27. A pixel is not a pixel
Viewports:
ā£ Invented by Apple
ā£ Adopted by others
ā£ Unofficial standard, registered at whatwg.org
27
28. A pixel is not a pixel
320 640
480 960
iPhone 3 iPhone 4
28
29. A pixel is not a pixel
CSS 2.1 Specification:
āIf the pixel density of the output device is very different from that of a typical computer display,
the user agent should rescale pixel values. It is recommended that the pixel unit refer to the
whole number of device pixels that best approximates the reference pixel. It is recommended
that the reference pixel be the visual angle of one pixel on a device with a pixel density of
96dpi and a distance from the reader of an armās length.ā
29
30. Standardization Horror
ā£ <meta name=āviewportā content=āwidth=device-widthā />
ā¢ iPhone and most others
ā£ <meta name=āHandheldFriendlyā content=ātrueā />
ā¢ Many feature phones (originally Palm)
ā£ <meta name=āMobileOptimizedā content=ā320ā />
ā¢ Windows Mobile
ā£ <meta name=āviewportā
content=ātarget-densitydpi=device-dpiā />
ā¢ Android
30
31. A pixel is not a pixel
Recommended reading:
http://www.quirksmode.org/blog/ by Peter Paul Koch
31
32. Device Detection
Itās all in the User Agent
ā¢ Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X;
en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version /
4.0.5 Mobile/8B117 Safari/6531.22.7
ā¢ Mozilla/5.0 (Linux; U; Android 2.1-update1; nl-nl; HTC Hero
Build/ERE27) AppleWebKit/ 530.17 (KHTML, like Gecko)
Version/4.0 Mobile Safari/ 530.17
32
34. Donāt Reinvent The Wheel
http://detectmobilebrowsers.mobi/
ā¢ Downloadable PHP library
for device detection
ā¢ Online code generator
ā¢ Donationware
ā¢ Ugly code, well documented
34
35. On to a more advanced mechanism
ā£ General tip:
ā¢ donāt rely on device
ā¢ rely on capabilities
ā£ WURFL
ā¢ Wireless Universal Resource FiLe
ā¢ Contains info on 500+ capabilities of 14.000+ devices
ā¢ http://wurfl.sourceforge.net/
ā¢ Clients available for many languages
35
36. WURFL in PHP: Tera-Wurfl
ā£ Download Tera-Wurfl
ā¢ http://www.tera-wurfl.com
ā£ Install in document root
ā¢ e.g. in /var/www/yoursite/Tera-WURFL
ā¢ Make sure data/ dir is apache read+writable
ā£ Create empty database
36
46. Alternatives
ā£ http://www.deviceatlas.com
ā¢ Commercial database of device properties
ā¢ Available online, as API and downloadable
json file
ā¢ Free for development
ā¢ ~99$/year for production
46
47. Browser Detection In Practice
ā£ Letās optimize a site with what weāve learned
so far.
ā£ Letās take advantage of ZFās powerful MVC
set up
ā¢ View scripts determine layout of actions
ā¢ Layout script wraps everything into main layout
ā¢ Use Bootstrapper to detect device and setup MVC
47
48. Zend Framework mobile site
2 ways for mobile layout:
ā£ Separate files
ā£ Separate folders
Detection in bootstrap
48
54. Dealing With Mobile Browsers
ā£ Considerations:
ā¢ Donāt redirect to homepage
ā¢ Offer āclassicā option
ā¢ Donāt make assumptions on physical screen size
54
59. HTML5 is powerful
ā£ localStorage
ā£ <video>
ā£ <canvas>
ā£ <svg>
ā£ <input type=ānumberā> and many other form
fields
ā£ navigator.geolocation.getCurrentPosition();
59
60. Browsers love HTML5
Browsers supporting HTML5:
ā£ Firefox
ā£ Safari
ā£ Opera
ā£ All the mobile browsers
ā£ IE (sort of, no support for <article> until IE9)
60
61. Things to consider
ā£ Donāt just scale the layout, scale content too
ā£ Consider āscenario based content
managementā
61
63. jQTouch
ā£ iPhone experience in HTML5
ā£ http://jqtouch.com/ (beta 3)
ā£ jQuery based
ā£ MIT License
ā£ Give it a try: http://jqtouch.com/preview/
demos/main
63
64. Alternatives
ā£ jQuery Mobile
ā¢ 1.0 alpha was released at October 16, 2010
ā¢ http://jquerymobile.com/
ā£ Sencha Touch
ā¢ From the makers of jqTouch
ā¢ Tablet support
ā¢ http://www.sencha.com/products/touch/
64
82. Notifications - Notes
ā£ For Apple:
ā¢ Get certificates from the developer portal
ā£ For Android
ā¢ Need to register an account and request a quota
ā£ Note: deviceTokens can change!
82
83. Token Exchange
notiļ¬cationToken
Apple Push
Your Server Notiļ¬cation
deviceToken message
message
Services payload
payload
signature Your
App
notiļ¬cationToken
deviceToken
deviceToken
Token notiļ¬cationToken
Exchange
http://tokenexchange.googlecode.com
83
85. PHPās role in native apps
Android Blackberry
iPhone App
App App
API
85
86. Optimize APIs for mobile
ā£ Content optimization
ā£ Scalability
ā£ Longevity
ā£ Security
ā£ Client/Server
considerations
86
87. Content Optimization
ā£ Consider CPU and memory constraints
ā¢ Prefer JSON over XML
ā¢ Compress data
ā¢ Keep responses small
ā¢ But not too small (connection / routing overhead)
87
89. Longevity
ā£ Apps have different deployment patterns
ā¢ No āquick fixā in the application as in web apps
ā£ Client/Server asynchronous updates
ā¢ Backwards compatibility
ā£ Versioned API URLs:
- http://iportfolio.api.egeniq.com/portfolios/1.0/mvb/collections.json
89
90. Longevity
ā£ How long do you support your APIs?
ā¢ Canāt force people to delete their Apps
ā¢ Provide clean fallback
ā¢ Synchronized instead of real-time data
ā£ Implement status check API calls
ā£ API ownership
90
91. Longevity - API Ownership
ā£ Own DNS records
ā£ Own the initial entry point of the app
ā£ Donāt hardcode URLs
ā£ By the way: also own the developer account
91
98. Client/Server considerations
ā£ Image Processing in the API, instead of App
ā¢ Use Imagick / GD etc.
ā¢ Trade-off between bandwidth and processing power
ā£ Apps support threading / asynchronisity
ā¢ Fire-and-forget API design
ā¢ Prepare/getResult call duos
ā£ Push features into PHP APIs for reuse
98
99. PHPās role in native apps
ā£ PHP has native support for:
ā¢ Web services
ā¢ JSON
ā¢ Compression
ā¢ Image manipulation
ā£ Egeniqās number 1 choice for App APIs
ā£ 25-30% of App development time = API
99
101. HTML5 in the App Store
ā£ HTML5 on the server, supports PHP:
ā¢ IPFaces - http://www.ipfaces.org/
ā£ HTML5 on the device, no (or limited) support
for PHP:
ā¢ AppCelerator - http://appcelerator.com/
ā¢ Phonegap - http://phonegap.com
101
104. Testing
ā£ Various options for testing:
ā¢ Get your boss to buy you devices
ā¢ Firefox with user agent plugin
ā¢ Use Simulators/Emulators
ā¢ Use a service such as DeviceAnywhere
104
105. Running PHP on the device
First: Why??!
ā£ PHP For Android (PFA)
ā¢ http://phpforandroid.net/
ā£ PAMP for Symbian
ā¢ http://wiki.opensource.nokia.com/projects/PAMP
105
106. Symfony Mobile
ā¢ Mime-type based optimisation
ā¢ http://www.symfony-project.org/blog/2008/06/09/how-
to-create-an-optimized-version-of-your-website-for-the-
iphone-in-symfony-1-1
106
110. Credits
Pictures used in this presentation are creative commons attribution licensed pictures. Here
are the owners and the URLS where the originals can be found:
āDow says POOā by Stepleton - http://www.flickr.com/photos/29407923@N03/2899705638/
āThe telephoneā by Tylerdurden - http://www.flickr.com/photos/tylerdurden/529028040/
āWebā by Kurtxio - http://www.flickr.com/photos/kurtxio/2182760200/
āHeavy cloud, no rainā by Robynsnest - http://www.flickr.com/photos/robynsnest/12405841/
āWireless fridgeā from http://www.wirelessgoodness.com/tag/srt746awtn/
āArmy iphone appā by Soldiersmediacenter - http://www.flickr.com/photos/soldiersmediacenter/4271795260/
āCarbon Fibre Walletā by Ryan Loos - http://www.flickr.com/photos/rh1n0/4157547404/
āKeysā by Jamison Judd - http://www.flickr.com/photos/jamisonjudd/2419601050/
āPhone Girlā by Steffen - http://www.flickr.com/photos/re-ality/460465894/
āIcon_safari_hiresā by Hans Dorsch - http://www.flickr.com/photos/hansdorsch/2861804087/
āThinkingā by Karola - http://www.flickr.com/photos/karola/3623768629/
āJus'a webā by Jusfi - http://www.flickr.com/photos/jusfi/2921202536/
āiPad :)ā by Korosirego - http://www.flickr.com/photos/korosirego/4334862666/
āI've got a monkey on my backā by Keven Law - http://www.flickr.com/photos/kevenlaw/2698946160/
āAdd a spoonful of coffeeā by Martyn Wright - http://www.flickr.com/photos/35521221@N05/5181647830/
āLocked steelā by Darwinbell - http://www.flickr.com/photos/darwinbell/321434733/
ā4 Biscuitsā by Barnoid - http://www.flickr.com/photos/barnoid/2025811494/
āpining for mauiā by DāArcy Norman - http://www.flickr.com/photos/dnorman/2223663304/
111. Credits
Pictures used in this presentation are creative commons attribution licensed pictures. Here
are the owners and the URLS where the originals can be found:
āSeeing my world through a keyholeā by Kate Ter Haar - http://www.flickr.com/photos/katerha/4592429363/
āDear CNN, please send me push notifi...ā by Alex Valentine - http://www.flickr.com/photos/alexvalentine/5644423659/
Ivoās portrait in intro, photo by Jelmer de Haas - http://www.jelmerdehaas.com