Iphone it

How about you create a version of your WordPress website for Iphone, well here is a small tutorial of how to do it.

All the coding is using the Zend Framework Database Handler, so if you are using one of my classes or anything else, change it to work for you.

The first thing you will need is to download the IUI framework. It have a series of scripts, css, and some other things that are going to be used when you are checking the site with your Iphone.

Now create a PHP script page with this html header. It’s the same one that is being used at the samples of the framework.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>McLoide.com Iphone Version</title>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "../iui/iui.css";</style>
<script type="application/x-javascript" src="../iui/iui.js"></script>
<!--
<script type="application/x-javascript" src="http://10.0.1.2:1840/ibug.js"></script>
-->
</head>
<body onclick="console.log('action', event.target);">

Now you have to create the following structure:

  • Toolbar – will be displayed at top with a back button and the stats (battery, etc) button
  • Home – will be the first thing loaded when the Iphone load the page, so this should have a list of the contents of the website
  • Summary – This will display a small summary of what’s about the the content that is about to be displayed and a back button
  • Display – This will display the full content of the item

Imagine this as a site tree that is being build dinamicaly and every click displays one of the tree branches.

So, how your body will be built? It’s simplier to display the code than explain, so, here’s the rest of the code:

<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a href="stats.php" class="button">Stats</a>
</div>
<ul id="home" title="Posts" selected="true">
<?php
$stmt = "select * from wp_posts where post_status = 'publish' group by post_title order by ID asc";
$data = $GLOBALS['db']->fetchAll($stmt); # This is using Zend Framework Db Hanlder
foreach($data as $key => $contents) {
?><li><a href="#summary<?php echo $contents['ID'] ?>"><?php echo strip_tags($contents['post_title']); ?></a></li><?php
}
# retrieving all info of your posts
?>
<li><a href="stats.php">Stats</a></li>
</ul>
<?php
#building the summary list
foreach($data as $key => $contents) { ?>
<ul id="summary<?php echo $contents['ID'] ?>" title="<?php echo strip_tags($contents['post_title']); ?>">
<li><a href="#display<?php echo $contents['ID'] ?>"><?php echo count_words(strip_tags($contents['post_content']),20); ?></a></li>
<li><a href="#home">Back</a></li>
</ul>
<?php } ?>
<?php
#building the display blocks
foreach($data as $key => $contents) { ?>
<div id="display<?php echo $contents['ID'] ?>" class="panel" title="<?php echo $contents['post_title']; ?>">
<h2><?php echo $contents['post_title']; ?></h2>
<p><?php
echo $contents['post_content'];
?></p>
</div>
<?php }

#note count_words is just a small function to get an string and correctly break into a smaller string without breaking the words

?>

With this in place all you need to do now is test it and for that you can test it in the Iphone tester. It’s not 100% accurate but it will give you a great idea of how things will work in the real Iphone and you can always access it by your computer browser.

Off course this is a simple example and there is much more you could do to work with this. Imagine a full application only to work out with Iphones.

If you want to see this example working, you can see a demo from in http://www.mcloide.com/iphone/

Have fun.

Advertisements

About mcloide

Making things simpler, just check: http://www.mcloide.com View all posts by mcloide

One response to “Iphone it

  • Iphone it » iPhone Tricks

    […] mcloide placed an observative post today on Iphone itHere’s a quick excerptWith this in place all you need to do now is test it and for that you can test it in the Iphone tester. It’s not 100% accurate but it will give you a great idea of how things will work in the real Iphone and you can always access it by … […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: