Post on 21-Mar-2016
description
Coding considerations for Coding considerations for developing Web-Apps for developing Web-Apps for
SmartPhonesSmartPhonesTrevor SeeneyTrevor Seeney
March 23March 23rdrd 2010 2010 NY PHPNY PHP
IntroductionIntroductionMe and PHPMe and PHPThe System i (aka IBM i) The System i (aka IBM i)
A video clip demonstrating mobile computing using an iPhone
AgendaAgendaSmartPhonesSmartPhonesThe iPhone as a web-clientThe iPhone as a web-clientOptimizing web-pages for the iPhoneOptimizing web-pages for the iPhoneThe Differing Rendering Options AvailableThe Differing Rendering Options AvailableSupporting TechnologiesSupporting TechnologiesAccess SecurityAccess SecurityA PHP exampleA PHP exampleAn Order-Entry exampleAn Order-Entry exampleSummarySummary
SmartPhonesSmartPhones Defined to be a phone with a browser.Defined to be a phone with a browser. iPhone, Blackberry, Android, Nokia, etc.iPhone, Blackberry, Android, Nokia, etc. Market share:-Market share:-
1.1. NokiaNokia 44.3%44.3%2.2. BlackberryBlackberry 20.9 %20.9 %3.3. iPhoneiPhone 13.7%13.7%
As at 2ndQ 2009, according to Canalys, a British company that provides expert analysis for the High Tech industry
Mobile browsing by platformMobile browsing by platform
Source Canalys
SmartPhone Internet AccessSmartPhone Internet Access Two out of three people accessing the Internet Two out of three people accessing the Internet
from a SmartPhone use an iPhone.from a SmartPhone use an iPhone.
The BlackBerry browser is difficult to use and The BlackBerry browser is difficult to use and provides inconsistent renderings of web pages. provides inconsistent renderings of web pages.
Will Blackberry improve its browser before the Will Blackberry improve its browser before the iPhone gains corporate acceptance, or will its iPhone gains corporate acceptance, or will its corporate market share diminish? corporate market share diminish?
The iPhone as a web-clientThe iPhone as a web-clientSafari browserSafari browserMost standard browser features available, Most standard browser features available,
e.g., JavaScript, Cookies, Forms, DOMe.g., JavaScript, Cookies, Forms, DOMNot available, events such as Not available, events such as
onMouseOver, onBlur, etc (no mouse!)onMouseOver, onBlur, etc (no mouse!)Finger Movements “tap”, “flick” and Finger Movements “tap”, “flick” and
“pinch”.“pinch”.Orientation change, 90°Orientation change, 90°
Optimizing web-pages for the Optimizing web-pages for the iPhoneiPhone
Focus on Width and Height.Focus on Width and Height.Maximizing Screen SpaceMaximizing Screen SpaceDevice Specific Rendering Device Specific Rendering
Conditional CSSConditional CSSRedirectionRedirection
Focus on Width and HeightFocus on Width and Height The iPhone's screen is 320x480 in portrait mode, 480x320 The iPhone's screen is 320x480 in portrait mode, 480x320
in landscape mode. in landscape mode.
Some say - Pages should scale Some say - Pages should scale downdown to 320 pixel-width to 320 pixel-width when in portrait mode, rather than being styled with 320 when in portrait mode, rather than being styled with 320 pixel-width initially then having to be stretched to 480 pixel-width initially then having to be stretched to 480 pixel-width for landscape mode.pixel-width for landscape mode.
<meta name = "viewport" content = "width = device-width"><meta name = "viewport" content = "width = device-width"> <meta name = "viewport" content = "height = device-height"> <meta name = "viewport" content = "height = device-height">
Rolling Up the URL input fieldRolling Up the URL input field <body onload="setTimeout(function() { <body onload="setTimeout(function() {
window.scrollTo(0, 1)window.scrollTo(0, 1) }, 100);"> }, 100);">
Conditional CSSConditional CSS It is possible to use a different external It is possible to use a different external
CCS file depending on the deviceCCS file depending on the device
<link href='PCTHRStyle.css' type='text/css' rel='stylesheet' >
<!--[if !IE]->
<link media="only screen and (max-device-width: 480px)“ href="iTHRStyle.css" type="text/css" rel="stylesheet" />
<!–<![endif]–>
Using the Default .css FileUsing the Default .css File
Conditional CSS Example
Using the iPhone Specific .css FileUsing the iPhone Specific .css File
The Default .css FileThe Default .css File
body {background-color: #C48189;}
.column1 {position:absolute;top: 20;left:20;
width:290;}
.column2 {position:absolute;top: 20;left:350;
width:290;}.column3 {
position:absolute;top: 20;left:680;
width:290;}
The iPhone Specific .css FileThe iPhone Specific .css File
body {background-color: #AFC7C7;}
.column1 {position:absolute;top: 20;left:10;
width:290;}
.column2 {position:absolute;top: 360;left:10;
width:290;}.column3 {
position:absolute;top: 1040;left:10;
width:290; }
Device Detection and Redirection Device Detection and Redirection
An alternative to Conditional CSSAn alternative to Conditional CSS
Instead of pointing to a different style Instead of pointing to a different style sheet, transfer to a different HTML sheet, transfer to a different HTML document.document.
Detect device from an environment Detect device from an environment variable known as User-Agentvariable known as User-Agent
Device Detection and RedirectionDevice Detection and Redirection
http://www.sentinex.com/Mobile2.htmlhttp://www.sentinex.com/Mobile2.html
<script><script>if (navigator.userAgent.match("if (navigator.userAgent.match("BlackberryBlackberry") != null) {") != null) {
window.location="window.location="Blackberry.htmlBlackberry.html" " }}else {else {
if (navigator.userAgent.match("if (navigator.userAgent.match("iPhoneiPhone") != null) {") != null) {window.locationwindow.location="iPhone.html="iPhone.html" "
}}else {else {
window.location="window.location="Laptop.htmlLaptop.html" " }}
}}</script></script>
iPhone OrientationiPhone Orientation Environment variable Environment variable window.orientation window.orientation An event An event window.onorientationchange window.onorientationchange Orientation Orientation expressed as degrees:expressed as degrees: 0 = Portrait mode 0 = Portrait mode 90 = Landscape Left90 = Landscape Left -90 = Landscape Right-90 = Landscape Right
On Orientation ChangeOn Orientation Change window.onorientationchange = function() { window.onorientationchange = function() {
/*window.orientation returns a value that indicates whether iPhone /*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode. */is in portrait mode, landscape mode. */ var orientation = window.orientation; var orientation = window.orientation;
switch(orientation) { switch(orientation) { case 0:case 0: /* Portrait mode */; /* Portrait mode */; document.getElementById("main").style.top = 160; document.getElementById("main").style.top = 160; document.getElementById("main").style.left = 8; document.getElementById("main").style.left = 8; document.getElementById("graph").style.top = 570; document.getElementById("graph").style.top = 570; document.getElementById("graph").style.left = 2; document.getElementById("graph").style.left = 2; ............ break;break; case 90:case 90: /* Landscape Left mode *//* Landscape Left mode */ break;break; case -90:case -90: /* Landscape Right mode *//* Landscape Right mode */
Making WebApps look like iAppsMaking WebApps look like iApps
Save your WebApp onto the iPhone using “data URLs”
1. Type in a URL2. Tap "Save It Now"3. When your website appears choose "Add to Home Screen"
Rendering Options Rendering Options Tables Tables GraphsGraphs
Graph Builder by NetscapeGraph Builder by Netscape
<script src="graph.js"></SCRIPT><center><fieldset style="background-color: #9bc8af; padding-left: 5px; width: 350;border: 2px solid #900000;"><script>var g =new Graph(210,130);g.title = "LOS ANGELES COUNTY claims for 2006 ";g.xLabel = "Month";g.yLabel = "Claims";g.scale = 10000;g.addRow(47210, 45615, 50562, 42646, 42712, 39657, 35958, 37735, 37116, 41283, 39847, 50003);g.setXScaleValues("JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC");g.build();</script></feildset></center>
Rendering Options (cont.)Rendering Options (cont.) Another Netscape Another Netscape
Graph with a storyGraph with a story
$78,000 from 12/12 to $78,000 from 12/12 to Christmas day.Christmas day.
Rendering Options (cont.)Rendering Options (cont.) Java Script Pie ChartsJava Script Pie Charts Google Pie ChartsGoogle Pie Charts
Rendering Options (cont.)Rendering Options (cont.) Google GaugesGoogle Gauges
Rendering Options (cont.)Rendering Options (cont.)Bindows Gauges
Executive DashboardsExecutive Dashboards
Each element is a Google Chart
WidJetsWidJetsYahoo has Widgets, Google has GadgetsYahoo has Widgets, Google has Gadgets I call them WidJets where the ‘J’ I call them WidJets where the ‘J’
represents JavaScriptrepresents JavaScriptConstruction: CGI program writes a Construction: CGI program writes a
JavaScript function anew each day.JavaScript function anew each day. Implementation:Implementation:
<script type='text/javascript' src='http://www.TheHockeyRating.com/TheHockeyRating.js'></script>
<script>THRScores();</script>
iPhone WidJetsiPhone WidJets
Rendering Options (cont.)Rendering Options (cont.) ReportsReports A simple ‘flash’ report A simple ‘flash’ report
optimized for the optimized for the SmartPhoneSmartPhone
Reports (cont.)Reports (cont.)
Supporting TechnologiesSupporting TechnologiesPHP is ubiquitous IPHP is ubiquitous IAJAX (Asynchronous JavaScript and AJAX (Asynchronous JavaScript and
XML), is a technique used to create XML), is a technique used to create interactive web pages.interactive web pages.
Prototype, a JavaScript Framework; makes Prototype, a JavaScript Framework; makes implementing AJAX easy. implementing AJAX easy.
http://http://www.PrototypeJS.orgwww.PrototypeJS.orgBindows, another AJAX Framework Bindows, another AJAX Framework
http://http://www.bindows.netwww.bindows.net//
Ajax using Prototype to execute a Ajax using Prototype to execute a JavaScript functionJavaScript function
Specify Specify Prototype.jsPrototype.js in HTML document in HTML document Write the JavaScript function to be Write the JavaScript function to be
executedexecuted Use Use Ajax.Update Ajax.Update with with evalScripts: trueevalScripts: true Response should be of the form: Response should be of the form:
runThisFunction(parm1,parm2,parm3);runThisFunction(parm1,parm2,parm3); Finally, apply Finally, apply Ajax.PeriodicalUpdaterAjax.PeriodicalUpdater to to
achieve continuous, automatic update.achieve continuous, automatic update.
Access Security ProcessAccess Security ProcessOn initial page load, check for a cookie On initial page load, check for a cookie
containing the user name.containing the user name. If not found, issue panel to accept User If not found, issue panel to accept User
Name and Password.Name and Password. Issue AJAX request to validate same.Issue AJAX request to validate same.Server verifies credentials.Server verifies credentials.Client retrieves server response and Client retrieves server response and
creates Cookie, hides SignOn panel and creates Cookie, hides SignOn panel and shows the page’s main panel.shows the page’s main panel.
Access SecurityAccess Security
A PHP exampleA PHP example A Debt Reduction A Debt Reduction
CalculatorCalculator Accepts Total Debt Accepts Total Debt
and Interest rateand Interest rate Optionally Payment Optionally Payment
Amount and TermAmount and Term Uses Netscape’s Uses Netscape’s
Graph-BuilderGraph-Builder
http://www.sentinex.com/EZDebtCalculator.php
Code snippetsCode snippets
<meta name = "viewport" content = "width = device-width"><meta name = "viewport" content = "height = device-height">
<?PHP if (isset($_POST['loanamount'])) { echo '<script>document.getElementById("loanamount").value = ' . $_POST["loanamount"] . ';</script>';}
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
The Mobile ChallengeThe Mobile Challenge
Signal:
• Safari to Host• Online updates
No Signal:
• HTML data encapsulation on iphone• email updates
A Case StudyA Case StudyOrder Entry – No SignalOrder Entry – No Signal
Select a customerSelect a customer
Select a customer (cont)Select a customer (cont)Drop down select Drop down select list is presentedlist is presented
Select a customer (cont)Select a customer (cont)Press [done]Press [done]Double [tap] to Double [tap] to
resize displayresize displayProduct select Product select
screen displayed.screen displayed. [tap] Product select [tap] Product select
dropdown select dropdown select list.list.
Select a productSelect a product [tap] the Product [tap] the Product
dropdown select dropdown select list.list.
[tap] a product[tap] a product [tap] [next] to enter [tap] [next] to enter
quantityquantity
Select a quantitySelect a quantityEnter a quantity Enter a quantity
then [tap] [done]then [tap] [done]
Select a product (cont)Select a product (cont)The order begins The order begins
to take shape.to take shape.Add another itemAdd another item
Select a product (cont)Select a product (cont)Continue to add Continue to add
products.products.Press [Finished] Press [Finished]
when done.when done.
Completed OrderCompleted OrderPress [Send e-Press [Send e-
Mail] to transmit Mail] to transmit the order to the order to System i HostSystem i Host
The e-MailThe e-MailEncoded data Encoded data
stream stream Designed to Designed to
minimize the number minimize the number of characters and to of characters and to ease processing by ease processing by the host the host
Press [Send]Press [Send]
A Case StudyA Case StudyOrder Entry – With a SignalOrder Entry – With a Signal
Auto-Suggest using AJAX to access entire Auto-Suggest using AJAX to access entire customer filecustomer file
A server-side query returns a block of A server-side query returns a block of HTML representing a number of HTML representing a number of suggested itemssuggested items
Will accept names or numbers Will accept names or numbers Example using AJAX
Another Case StudyAnother Case Study
Reporting & Business IntelligenceReporting & Business IntelligenceAn Executive DashboardAn Executive Dashboard
Another Case StudyAnother Case Study
Reporting & Business IntelligenceReporting & Business Intelligence
An Executive DashboardAn Executive Dashboard
SummarySummary
Nothing MagicalNothing MagicalClient / ServerClient / Server
Optimization for Smart Phone to be Optimization for Smart Phone to be consideredconsidered
A variety of format optionsA variety of format options Security can and should be built inSecurity can and should be built in
GO MOBILE!GO MOBILE!
Trevor SeeneyTrevor Seeneytseeney@sentinex.comtseeney@sentinex.com
201-681-9301201-681-9301www.sentinex.comwww.sentinex.com