scripting

Creating an iPhone friendly site in PHP

Creating a website that renders well on an iPhone as well as on all standard web browsers shouldn’t be a difficult task. It’s always easier if you can design and build a site with this in mind rather than retrofitting a site after it’s launched, but either way the principle remains the same.

The way we do it at Fly Digital is to load exactly the same page regardless of the browser being used, no redirects to a seperate mobile site or subdomain. This way, whenever you’re making updates to navigation or content in the future you only have to do it in one place.

You can achieve the basics in two simple steps. First of all you’ll need to detect if the user is browing your site on an iPhone, here’s the server side way to do this:

<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone')) {
  //it is an iPhone user
}
?>

Once you know this, you can see how you can load one stylesheet if it’s an iPhone and another for all other browsers. I’m not going to go into the CSS side of things in this post, I’m assuming you know a bit of CSS already if you’re reading this article. Suffice to say your iPhone styles will need to take into account the smaller screen when you’re loading things like container DIV’s and image sizes (do you see now why I said at the beginning it’s better if you can do this before building a new site rather than afterwards…?)

To stop the Safari browser from allowing users to use the pinch screen gesture to scale the webpage up or down in size, and to set the width of the page to the width of the screen, use this line of code:

<meta name="viewport" content="width=device-width,minimum-scale=1.0,
maximum-scale=1.0" />

Finally, a neat touch is to create a springboard icon for users that bookmark your site. This is a 57×57 PNG file that should be called apple-touch-icon.png and sits on the root of your domain. Fly Digital’s icon is shown below as an example:

http://www.flydigital.com.au/apple-touch-icon.png

Note you don’t need to add the rounded edges and reflection that you see on Apple icons, the iPhone will do this for you automatically.

Here’s the full IF statement with CSS includes for you to copy and paste. Give it a go and you’ll be building websites for iPhone and web browsers that all run out of one file in no time.

<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone'))
{?>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,
maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style-iphone.css"
media="screen"/>
<?php
} else {
?>
<link rel="stylesheet" type="text/css" href="css/style.css"
media="screen"/>
<?php
}
?>

How to concatenate a string in Objective-C

I’m writing this article with the objective of hopefully helping you if you’re looking how to concatenate a string but also to vent just a tiny little bit.

Firstly, to set the scene. You have two strings and you want to join them together. For example, string1 is something like “Fly” and string2 is something else like “Digital” and you want to join them as string3 to become something new such as “Fly Digital”.

In ASP Classic, this is a breeze:

<%
string1="Fly"
string2="Digital"
string3=string1 & " " & string2
Response.Write(string3)
%>

In PHP, not a problem:

<?php
$string1="Fly";
$string2="Digital";
$string3 = $string1 . " " . $string2;
echo $string3;
?>

But Objective-C doesn’t quite use the same logic of string1 + string2 = string3. Instead you need to call a whole new method called stringByAppendingString, which is where I start to ask questions. But first, here’s how I do it in Objective-C:

NSString *string1 = @"Fly";
NSString *string2 = @"Digital";
NSString *string3;
string3 = [string1 stringByAppendingString:string2];

Now call me old fashioned, but I think the PHP / ASP Classic / Javascript methodology is far more easily adoptable for programmers than having to know a new method to achieve what I consider a very basic but fundamental part of programming. I question why the developers of Objective-C thought that a whole new method had to be invented rather than sticking to the very logical 1 + 2 = 3 style. If there’s anyone reading this that knows the answer to that question I’d love to hear it.

How to loop through files in a folder in PHP (the quick way)

If you’ve ever used FSO (File System Object) in ASP Classic to loop through files in a folder you’ll know how useful it is. You can create a script with parameters to check file types, names, sizes, etc and then all your client needs to do is manage the source directory on the web server to update the site.

PHP is no different in principle, but it took me a little while to get the syntax down nice and tight to a couple of lines to do the same thing, so I thought I’d share how we do it here.

This is the base script that I use to setup the directory and the loop:

<?php
 $dir = "../yourDirectoryName/*";
 foreach(glob($dir) as $file)  
 {  
 echo $file;  
 }
 ?>

Note the $dir variable is set as the directory where your files are located on your web server in relation to the script.

Once you have the basic loop, you can then easily adapt it slightly to do different things. Eg, say you’re looping through a list of images and you want them to show on the page, change the echo statement to this:

echo "<img src='$file' alt='$file'/>";

Or say you only want to show images in a directory whose filename contains “_thumb”, add an IF condition around your echo statement like this:

if (strpos($file,"_thumb") >0) {
  echo "<img src='$file' alt='$file'/>";
}

The possibilities really are endless. Give it a try and let us know how you go.

TYD3RNPHX7SB <!–b1cfc4ed59be410f9d457cfd3a385507–>

How to include one CSS file in another CSS file

So you’re familiar with the include function in your favourite scripting language, but did you know you can use the same principle with your CSS files?

A CSS include works in exactly the way you would expect. Add this line of code to your CSS file, change {filename} to be the name of the CSS file you want to include (without the curly brackets) and bingo!

@import "{filename}.css";

I use this when I’m working on large sites that have some common CSS styles across the site but some that are specific to sections. I usually have one master.css file and multiple sectionname.css files. This makes editing styles that are not generic to the whole site a much quicker process.

How to center a website in CSS

A lot of websites that we build require the site to be centered regardless of the total screen width. I remember in the days of tables we’d simple put a master table of 100% width on the page, add a TD with an align=’center’ tag then nest another table inside to centre the main content.

With CSS the principle doesn’t have to be too different but the code is a lot neater. Here’s how I usually do it:

1) Create two CSS divs, one for the master container and one for the content:

div#container
{
 margin: 0 auto;
 background-color:#fff;
 width:600px;
}
div#content
{
 padding:20px;
}

The margin:0 auto; is the important part here. That is what will center the content within. The background-color and width attributes of the container div and padding attribute of the content div are just to highlight the example, you can remove these or change them to suit your design.

2) In your HTML, add your divs into the page BODY:

<body>
 <div id="container">
  <div id="content">
   Hello World!
  </div>
 </div>  
</body>

And that’s it!

Here’s the full code:

<html>
<head>
<style>
body
{
 background-color:#000;
}
div#container
{
 margin: 0 auto;
 background-color:#fff;
 width:600px;
}
div#content
{
 padding:20px;
}
</style>
</head>
<body>
 <div id="container">
  <div id="content">
   Hello World!
  </div>
 </div>  
</body>
</html>