Web programming

warning: Creating default object from empty value in /home/whole/www/www/blog/modules/taxonomy.module on line 1223.

A quick tutorial on using iUI to create a native looking iPhone or iPod touch web page

| | |

I just picked up a new Apple iPod Touch and thought I'd create a version of my photoblog that is optimized for the iPhone and/or iPod Touch. This won't be an actual application available through the App Store, but instead a web page using Joe Hewitt's iUI CSS and JavaScript library.

In this first tutorial we'll:

  1. Download and setup iUI
  2. Create a simple 'Hello World' page
  3. Dream of the final photoblog application

Search Disqus comments using Google

|

Like many bloggers out there, I've just started using the Disqus comment system here. Seems like it is a popular subject on Twitter and FriendFeed, so I thought I'd give it a try. It didn't take long before I wanted to start searching through the comments to find other bloggers commenting on similar topics (Apple iPhone vs the latest from Noikia, or the latest Canon digital SLR, for instance), but they don't have a real comment search up and running yet, so I created a form here that use Google to do the search.

Intelligent links using Apture in Drupal

Summary: In about 5 minutes I got Apture set up and running in this Drupal blog -- it was quick, easy, and best of all, it works!

Steps:

  1. Get a user ID and password from the Apture website
  2. Embed one JavaScript call just before the </body> tag in every page
  3. Reload the main page in Firefox or IE and the Apture links were working!

It really was that easy (and no, I'm not in any way associated with Apture).

Google Earth KML file for the photographs on my photoblog

| |

Summary: A quick tutorial on how I put together a PHP script to serve a Google Earth KML file updated live with all the geo-tagged photos from my photo-blog, stored in MySQL. Rather than having people store the whole, static data file on their local machine, I've created a small, second XML file that uses the <NetworkLink> element to have Google Earth re-load the data file every hour, so that newly geotagged photos are included as well.

If you have Google Earth installed you should just be able to load the KML data file on this page to see a live version of the links.

GEO microformat markup added

| | |

I've added GEO microformat codes to a bunch of the pages here at Wholemap (as well as to my photoblog entries). The various Firefox extensions that I have seem to recognize them, but to be quite honest, I'm not sure really how anyone will use them just yet... are there search engines that recognize them? More information about Microformats in general is available here

HTML example for part 3 of the Mapstraction tutorial

| | |

<!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">
  // As described in the third tutorial at http://www.wholemap.com/blog/mapstraction-tutorial3
  // and available online at http://www.wholemap.com/map/zMapstraction-demo2-yahoo.html
  <head>

Mapstraction tutorial part 3 - Switching from Google Maps to Yahoo

| |

One of the main benefits of Mapstraction is the ability to write the code once, and easily use it with different mapping systems (eventually even OpenStreetMap). So in part three of this tutorial we'll try switching from Google Maps over to Yahoo Maps. Will it really be as simple as changing one parameter?

Mapstraction tutorial

| | |

It was time to start moving my old Google Maps pages over to version 2 of the API, and I thought I'd consider using another mapping solution (maybe Yahoo Maps or Microsoft). But then fate intervened and I happened to listen to a podcast from the Where 2.0 conference by Steve Coast. He talked about Open Street Map and more importantly to me, Mapstraction.

From their homepage

    Mapstraction is a library which provides a common API for Google, Yahoo! and Microsoft's javascript mapping APIs to enable switching from one to another as smoothly as possible.

HTML example for part 2 of the Simple Mapstraction tutorial

| | |

<!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">
  // As described in the second tutorial at http://www.wholemap.com/blog/mapstraction-tutorial2
  // and available online at http://www.wholemap.com/map/zMapstraction-demo2.html
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

Mapstraction tutorial part 2 - Adding map controls and markers

| |

In the first part of our Mapstraction tutorial we displayed a simple Google map. Now we'll take a look at the API documentation and add some controls to our map along with a couple of markers, one simple, one more complex with a custom graphic.

Syndicate content