site to mobile conversion
Post on 15-Jan-2015
2.049 Views
Preview:
DESCRIPTION
TRANSCRIPT
Conversion
AUGUST 12, 2012
michael stowe
Site2Mobile
• 10+ years experience hacking PHP
• Published Author, Speaker, and Consultant
• Developed applications used by the medical field and law enforcement
• Software Engineer at CaringBridge.org (half a million visitors every day)
• Zend Certified PHP 5.3 Software Engineer
.com
@mikegstowe
MIKESTOWE
SO YOU WANT TO GO MOBILE
You have a fantastic desktop version of your website that
absolutely rocks! But your boss just bought an iPhone,
and now your boss wants a “mobile” version of the site…
tomorrow!
Oh yeah, and just because your boss shelled out $$$ for
that fancy iPhone, don’t expect the same for this project.
Budget is everything.
THE GOOD NEWS
No matter what your site looks like, as long as you
followed at least SOME standards and conventions…
we can make a mobile version of it!
THE BAD NEWS
Some ways are a lot easier than others… and if you
didn’t follow at least some conventions, well… your
boss isn’t going to be very happy budget or time
wise.
DESIGN HELPERS
For developing a mobile version of your site, you
may find the following libraries to be useful:
• jQuery Mobile
• jQTouch
• Sencha Touch
RESPONSIVE DESIGN
Responsive design can be a quick and fairly easy way
to make your site more friendly for mobile users. By
using media queries you can setup rules for how the
CSS is rendered by the browser.
RESPONSIVE DESIGN CSS
<html> <head> <!-- Using Link HREF --> <link rel="stylesheet" media="screen and (max-width: 1024px)" rel="stylesheet" href="example.css"> <!-- Using CSS --> <style type="text/css"> /* Using Import */ @import url(example.css) screen and (max-width: 1024px) /** Not as Ideal **/ @media screen and (max-width: 320px) { /** ... **/ } </style> </head> </html>
RESPONSIVE DESIGN
However, if you don’t utilize CSS to handle the
templating of your site, or if you use things like
tables or flash, you’re going to run into big problems.
Also, size matters, big images and excess code can
make for unpleasant loading times and experiences.
RESPONSIVE DESIGN
Oh yeah, and this is a PHP Conference, so we’re not
going to focus on this solution.
However, (advertising alert), you can learn more
about Responsive Design and Media Queries from my
Mobile Presentations available at
http://www.mikestowe.com/slides
RESPONSIVE DESIGN + SERVER SIDE
Responsive Design + Server Side, or RESS utilizes
Responsive Design for templating, but also relies on
back-end modifications for mobile users.
RESS can be a great solution, but requires access to
the back-end code of the application, and may
require you to go in and make tweaks/ hacks to
make certain pages mobile friendly.
A PHP SKIMMER
So let’s say you have a fairly large website, or even a
small website… but you don’t have access to the
database/ API layer, or worse- it’s a static site written
in HTML!
As long as you followed some uniform code
standards for your pages, you can utilize the
DOMDocument class to grab the content.
A PHP SKIMMER
With the DOMDocument class we can use the
loadHTML(), loadHTMLFile(),
getElementsByTagName(), and
getElementById() methods to load a HTML file
and access it’s elements.
A PHP SKIMMER HTML
<html> <head> <title>Sample Site</title> </head> <body> <header>Header Text</header> <div id="menu">Menu Items</div> <div id="content"> <p>Hello World</p> </div> <footer>Footer Text</footer> </body> </html>
A PHP SKIMMER – BY ID <?php
<?php $content = ''; $dom = new DOMDocument(); $dom->loadHTMLFile('index.html'); $elem = $dom->getElementById('content'); $children = $elem->childNodes; foreach ($children as $child) { $tmp_doc = new DOMDocument(); $tmp_doc->appendChild($tmp_doc->importNode($child,true)); $content .= $tmp_doc->saveHTML(); } // echos "<p>Hello World</p>" echo $content;
A PHP SKIMMER – BY TAG <?php
<?php $content = ''; $dom = new DOMDocument(); $dom->loadHTMLFile('index.html'); $elements = $this->DOM->getElementsByTagName('header'); $elem = $elements[0]; // First Element $children = $elem->childNodes; foreach ($children as $child) { $tmp_doc = new DOMDocument(); $tmp_doc->appendChild($tmp_doc->importNode($child,true)); $content .= $tmp_doc->saveHTML(); } // echos "Header Text" echo $content;
A PHP SKIMMER
Unfortunately, DOMDocument doesn’t allow us to
locate elements by class name, nor does it format
the content for mobile devices (ie resizing images).
Fortunately, there is an pre-existing script based on
DOMDocument and designed for mobile
implementation that does both (and also performs
Caching) – DomRipper.
Download DomRipper at github.com/mikestowe.com/DomRipper
A PHP SKIMMER – DOMRIPPER <?php
<?php $dom = new DomRipper(); // echos "Header Text" echo $doc->fetch('index.html','header', 'tag'); // echos "<p>Hello World</p>" echo $doc->fetch('index.html','content');
Download DomRipper at github.com/mikestowe.com/DomRipper
SIMPLE TEMPLATING
One of the easiest ways (especially for informational
sites or CSS driven sites) is to simply switch out the
header and footer.
This is usually the FASTEST solution, as long as your
header and footer files are used across the platform
and you do not use a lot of fancy features (drag and
drop JavaScript is bad).
SIMPLE TEMPLATING <?php
<?php // Header File $mobile = new MobileCheck(); if ($mobile->isMobile()) { require_once('mobile_header.php'); } else { // Header contents moved to a new file require_once('desktop_header.php'); }
Download DomRipper at github.com/mikestowe.com/DomRipper
DATABASE/ API LAYER
Of course, if we have a database driven site, and we
have access to the database/ API layer, this provides
us with an even more efficient and flexible solution.
<?php
<?php $api = new ApiLayer('/path/to/file'); ?> <html> <!-- Mobile Header --> Name: <?php echo $api->user->name; ?><br /> Email: <?php echo $api->user->email; ?> <br /><br /> <strong>Sites:</strong><br /> <?php foreach ($api->user->sites as $site) { echo $site->siteName . '<br />'; } ?> <!-- Mobile Footer --> </html>
DATABASE/ API LAYER BASIC
Data can be pulled in through a simple JSON call and requires no work on the mobile platform other than decoding
<?php
<?php $api = new ApiLayer(); ?> <html> <!-- Mobile Header --> Name: <?php echo $api->user()->name; ?><br /> Email: <?php echo $api->user()->email; ?> <br /><br /> <strong>Sites:</strong><br /> <?php foreach ($api->user()->getSites() as $site) { echo $site->siteName . '<br />'; } ?> <!-- Mobile Footer --> </html>
DATABASE/ API LAYER
Initial data is called in, but the ApiLayer has the ability to continuing grabbing information from the host, and requires access to the necessary classes.
DATABASE/ API LAYER
A properly designed API layer will provide your
mobile platform with all of the data necessary to
perform the same functionality as your desktop
version.
While setting up the API Layer initially takes more
time, it provides incredible flexibility and allows for
increased efficiency.
TRANSLATION ENGINE
For sites that offer multiple languages/ translations,
having a centralized translation engine that allows for
mobile translations (which may differ from desktop
translations) may be beneficial.
If you already have a database with key, language,
and translation columns, you may want to add a
column for “platform.”
<?php
<?php function getMobileTranslation($key, $language) { $db = new Database(); $query = 'SELECT `translation` FROM translations WHERE key = ? AND language = ? AND platform = ?'; $row = $db->fetch($query, $key, $language, 'mobile'); if (!$row) { $row = $db->fetch($query, $key, $language, 'desktop'); } return $row; } echo getMobileTranslation('welcomeText', 'en');
TRANSLATION ENGINE
TRANSLATION ENGINE
The mobile translation engine can be setup either on
the mobile platform, or it can be setup on the host
API platform, allowing for any future changes to the
translations system to be modified all at once.
The translation engine would then be made available
to the mobile platform through the API Layer.
FRAMEWORKS
Many popular frameworks allow not only for rapid
application development, but also provide the ability
to modify the view layer.
This allows your site to operate under the same
code, but with a separate interface for your users.
FRAMEWORKS
Because you are using the same code for your
actions, but have the ability to set unique templates,
views, pull in or remove scripts, etc; Frameworks
allow for the greatest flexibility while being
tremendously efficient.
FRAMEWORKS
Techniques:
• Modify the Template (choose a mobile template)
• Modify the View (change the file used for the view)
• Modify the Context-Type (ie return JSON).
<?php
<?php class MyController extends MyControllerAbstract { public function myAction() { parent::handleMobile(); /** Controller Contents **/ } }
FRAMEWORK CONTROLLER VIEW
Example for ZendFramework 1
<?php
<?php abstract class myControllerAbstract extends ZendControllerAbstract { protected function handleMobile($altView = null, $altTemplate = null) { $mobile = new MobileHandler(); // new class we created if($mobile->isMobile()) { if ($altView) { $this->view->render($altView); } $template = $altTemplate ? $altTemplate : 'mobile.html'; $this->_helper->_layout->setLayoutetLayout($template); } } }
FRAMEWORK ABSTRACT FOR VIEW
Example for ZendFramework 1
<?php
<?php class MyController extends MyControllerAbstract { public function myAction() { $viewVariables = array('item1' => 'hello', 'item2' => 'world'); if ($this -> params() -> fromQuery('context') == 'json') { $result = new JsonModel(); $result -> setTerminal(true); $result -> setVariables($viewVariables); return $result; } return $viewVariables; } }
FRAMEWORK CONTEXT SWITCHER
Example for ZendFramework 2
FRAMEWORKS
Some of the more popular frameworks out there
include:
• Zend Framework
• CakePHP
• CodeIgnighter
• Symphony
• Yii
OVERVIEW OF SOLUTIONS
Tactic Platform
Tie-In Efficiency Flexibility
User Friendly
Responsive Design
RESS
Skimmer
Simple Template
API Layer
Framework
Good So-So Poor
IN SUMMARY
In the end, the best solution is the one that fits your
current infrastructure, your capabilities, your
timeline, and your budget.
While some solutions certainly provide greater
efficiency, flexibility, and the best user experience - if
it isn’t feasible something is usually better than
nothing.
THANK YOU. @mikegstowe
visit mikestowe.com/slides for more on Mobile and PHP
top related