Now however, they have released an initial version of an official HTTP REST API. No more magic and glue. Just good old HTTP.

In order to simplify interacting with the Neo REST server from PHP, I knocked up a little PHP client library for it. Its early days for the Neo REST server and its even earlier days for the PHP client, so use with care!

Firstly, head over to the Neo wiki for information on how to get the Neo REST server installed and running. This will guide you through the basics of interacting with the REST API via HTTP using your web browser and command line tools (e.g. CURL).

Once you have it running and have poked it and prodded it using your webbrowser and / or the command line, its time to get going with PHP!

Getting started with Neo REST server and PHP

Head over to the github page for the PHP client and download it. If you are familiar with git, you may as well grab the latest version, otherwise I have zipped up a version here.

Make sure you have the Neo REST server running (its best to start the demo with a empty server so all the node numbers match my examples) and navigate into the directory where you downloaded the PHP client. Type ‘php demo.php’ to run the  demo file.

If all has gone well, 3 nodes will be added with relationships between then, and you will be presented with a textual diagram representation in the shell window.

To confirm it works, you can view the nodes in your browser (http://localhost:9999/node/1, http://localhost:9999/node/2, http://localhost:9999/node/3).

So, if it worked, I suggest you open the ‘demo.php’ script and see how it works!

So I am going to mind dump a few possible ways layout could be done. These are not serious suggestions, just ideas.

The first approach is by far the most unlikely. Why? Well it requires extensions to CSS which, as we know, could take a decade to reach our IE6 using friends.

So the basic problem of layouts is that we want to divide our page into distinct areas. A typical layout might look like this (image from java2s.com):

This is called a ‘Border Layout’ (in java terminology at least). For example, you might want to have the header in the ‘North’ section, a sidebar in the ‘East’ section, your footer in the ‘South’ section and your content in the ‘Center’ section. You might not use all sections (i.e. we might not put anything in the West section) at which point it is not rendered. So this is a very flexible layout, able to do two and three columns, and can probably account for 95% of all web layouts out there. There are other basic layout types, and I think that with a few pre-defined layouts you could cover the vast majority of layouts with ease.

Imagine if we had a new CSS attribute in the body element:

body{
layout-manager: border-layout;
}

Ok, so we have said to the browser, we would like to render this page using the border layout model as detailed about. How do we add content to each section?


div#navigation{
position: layout;
layout-position: east;
}


Hmmm, easy hey? Using the CSS file we can assign page elements to the different layout sections. Of course the problem with this is that it limits you to a pre-defined set of layouts. You could probably use the CSS3 layouts module to define your own.

Generally, I think CSS is great at styling content. It was designed to style text based documents, you can see that from the DTP inspired terminology. For example, floats are designed to float paragraphs of text around images, not for making left and right columns on your page. In short, I think layout in CSS is a hack, using CSS for something it was not designed to do, exactly as using tables for layout is also a hack.

So we have to choose between two wrongs right? What would be the ideal situation?

Look at the average website. Most pages have common layout and header elements. Looking at the source code, often only a small fragment of the HTML is actually for content. The rest are ‘layout’ elements that are constant across most pages in the site. So I think, in essence a HTML page is the union of two components, the content (the document in my mind) and the layout (the navigation, header, the search bar thats on every page). Look at this site. Only one small area corresponds to content (the blog post area) and the rest is my overly large sidebar, header and flickr photo stream. Not to mention all the divs or whatever to float the sidebar to the right etc…  

Why is this a problem? Many non-standard uses of HTML (screen readers, search engine crawlers) have great problems separating the ‘content’ of the page from other secondary elements. SEO teaches us that we should have our ‘content’ as near to the top of the HTML as possible, and we have great fun trying to hack our CSS layouts so that order is unimportant in the HTML. Search engines also tend to devalue links in ‘layout’ elements (i.e. sidebars) compared to ‘in-content’ links. Why? Because a link in a layout element tends to occur on all pages in the site, where as a in-text link means that I am actually talking about that page there and then.

To me, this suggests that the most semantic solution would be to somehow separate the content from the layout elements. Therefore, each URI on the site corresponds to a small semantically relevant HTML document that is just the content for that URI. Layout elements could either be ‘included’ from external files in a similar way to the CSS @import directive, or marked as being ‘secondary’ content. 

You can achieve similar results on the server side by including document fragments in whatever server side programming language you wish. This is not quite the same though as the full document (including layout elements) is sent to the client. I want to be able to do it sending just the content. Interesting, good old fashioned frames actually allowed us to this. I.e. in a frameset I could have one HTML docuument for the content and one for the layout elements. However, frames are awful and have a bunch of usability issues.

Obviously this is a pie-in-the-sky idea as it would require a standard to be defined and incorporated in the browsers. That could take years, even decades in IE’s case. The debate on tables v CSS is centred around which tool is best to use today, not in the distant future. 

That said, I am looking at an approach to do this ‘layout functionality’  in javascript on the client before the page is rendered. Watch this space…

UPDATE: I realise I did not actually talk about HOW the layout might be achieved. Here is an idea (and just and idea).

• It takes the user out of my web application
• Does not allow me to integrate the maps with my application. I.e. add many markers. Do something when a marker is clicked.

So this got me thinking, would it be possible to do a ‘lite’ version of the javascript maps API for the iPhone? Before the newest version of mobile Safari, this would not have been possible. Fundamentally you cant drag the map! However, with the new version Apple introduced a javascript API for sensing single and double finger drag events. 

So, I went about knocking up a very basic test version (try it on your iphone, tinyurl: http://tinyurl.com/3g5tg4). Is buggy, basic and sub-optimal, but proves it could work nicely. Try zooming with the double finger pinch action! 

I also tried the new webkit CSS transforms to allow free zooming and rotation, however they are buggy and slow on the iphone! Oh well! Anyway, maybe we can have google maps lite on the iphone?

Anyway, to cut a long story short, I figured, that as you can make markers bounce after you drag them, it should be possible to make them bounce in other situations. I was looking for an function named ‘bounce’ or similar, but it was a bit harder than that! After tracing the flow through the obscured maps code (!) I found that you can drop a marker from above using the following code:

// Make bouncable
if (!marker.Xa)
{
marker.Xa = true;
marker.qo(false);
}
marker.Pa = height; // Current height
marker.ri = height; // Max height
marker.av = 1; // Direction (+ = down)
marker.tc(); // Go baby!


Here is a demo. The markers also ‘hop’ when you move the mouse over them. In the source code there are three functions,  dropMarker, hilightMarker and dehilightMarker. Check them out!

Please, please, please google can we make a publicly available ‘bounce’ function?

Update: Sorry, the demo (http://www.worldreviewer.com/junk/iphone-map.html) seems to have stopped working. I think the API version that this worked on is too old and not supported anymore!

Compare this to the overly engineered UK equivalent:

Is it me, or is the main function of this device to have its button pushed? Why then does the UK version have a really, really small button that protected by a raised ring to make it even more difficult to push? I love the simplicity of the Irish version. Its main purpose is to be a button, therefore the button is huge and easy to push. Lovely.

S3 by default hosts files in the US, but it is possible to host content in Europe. One thing we noticed early on, was that videos did not always stream as smoothly when hosted on the American servers and viewed in the UK (and we assume other European countries). Because of this we wanted to offer “geo-targeting”, where we can host the files twice, once in America and once in Europe and choose the best based on the user’s location. Of course, this means we have to pay for storage twice, but typically bandwidth will be the most expensive element of you bill, so a few more cents for extra storage might not be a problem. Well thats how it is for us, you mileage may vary!

It would be great if S3 had geo-targeting by default, but it does not, so how can we offer it?

Actually its quite simple. Basically we will set up two S3 buckets, say “us.media.worldreviewer.com” and “eu.media.worldreviewer.com” being the American and European buckets respectivly. We then decide between the two bucket urls based on the users location.

Geo-coding of IP addresses is very easy and free (well at least down to the country level). There are a variety of webservices (like hostip) however, we wanted something that could run locally, to cut down the delay. Maxmind offer a free PHP IP to country database called GEO lite (they also sell licenses for a more accurate version, but this is good enough for us). You need to download both the data file (GeoIP.dat) and the PHP library file (geoip.php) from that page. Once you have them you can get the country code for any IP address like this:


geoip_country_code_by_addr('212.140.189.10'); //returns 'GB'


Easy! Now all we need to do is map European countries to the European bucket url and all others to the American url. This function in this file does just that. Useage:


$bucket = '.media.worldreviewer.com';
$bucket = getAmazonS3LocalServer().$bucket;


You can then pass the bucket to your HTML layer to load the media files from the right place. The GeoIP lookup is quite quick, but you are probably better off storing the result in the user’s session, so that you only have to look it up when the visitor first views a video.