What we would like is some sort of members-only application that allows our users to track their journeys with us and to maybe blog about them, but it should look swish and very easy to use. We would like a similar functionality for our travel guides who would then post information about the tours.

The idea of a blog is a great tool for customer retention, if done right it allows users to post comments about their journeys, maybe with images to keep a log of what they are doing while on that trip. It would allow visitors to see what is going on on a journey with <Company Name> and what you can do or what the user(s) saw and took part in. Obviously, I wanted to offer a little bit more than just a blog. My idea was to work on a map-blog…

(Please note, if you would just like to see the map in action, just scroll down to the bottom of this page)

.

Integrating with new technologies

For (flash) designers and developers there are a number of new technologies that give a user access to content and functionality that was not possible a year or two back. Let us take Google or Yahoo for example: developers are given access to a great and increasing number of technological toys to play with: application programming interfaces (APIs) to integrate content such as Flickr images and albums, mail, rss feeds or maps.

Anyone, from an individual to a development company, has access to these API components, and more and more people are using them to give their clients (or their portfolios) a WOW-factor.

.

Travel blog + map = travel journal

Looking at the possibilities our CMS at work has (remember, its is aspx / .net) there was quite a range of possibilities we could offer our client something for the money. The obvious would have been setting up blog-facilities based on either each tour or destinations, giving registered users who have participated in a tour to blog and comment about it (we would run the user’s access against their booking history to grant write-rights). We could also set up forums and sub-forums to allow users to add comments about trips or destinations.

However, travel blogs or forum posts can be a bit text-laden, and the interaction only consists of a user posting, others reading and (if they like) commenting on posts.

Some time ago we did some Google Earth integration to one of our clients’ website which allowed the client to plot out tours on Google Earth, to give the user the ability to ‘see’ the tour and where it is going and what is going on. The idea of combining a map with a travel blog kinda became obvious.

With both Google Maps and Yahoo Maps giving excellent access to and support for their APIs I wanted to work on integrating a mapping solution with our user and blog-database. In the end I went for Yahoo Maps simply because their development network had a tremendous amount of information and code-snippets to get started with.

.

Yahoo maps and ActionScript – (API) key to success?

Once the extension was downloaded and a API key registered I went on integrating the map into the workspace. Just import / drag the component into the stage. You can edit its size simply by entering a new width and height into the properties (by default on the bottom of the stage). Your next step will need to be to check out the parameters. The screenshot on the right (click to enlarge) shows you where you can find the API in Flash CS3 and what parameters you will need to change by default, such as API key, zoom factor or starting location (by default USA map).

Now that we have a working API-integration into flash I tackled the next step: integration of a server-database to read posted points as well as add points to it. (In this example I used PHP / MySQL as this blog is based on a PHP system). You need to set up a database via PHPMyAdmin for example. Here is a sql-database for you to have a look at and use:

Please download the file here: entries.zip

So, what do we have in this database now: We have an ID (unique value for each entry), lat and long, a date (for timestamping entries), a short info and a descritption. These are the fields I will be using for now.

.

Writing to and from the Database

The next steps are to read from and enter information to the database through PHP. A simple

$sql = “INSERT INTO entries (id, lat, lon, date, info, description) VALUES (”, ‘$lat’, ‘$lon’, ‘$date’, ‘$info’, ‘$description’)”;

for entering information should do the trick. Which it did. I am not going into very much detail here, as the project is very code-heavy, but if you are interested in knowing more please do not hesitate to get in touch with me.

.

The first travel journal test

Here is now a first map-test (please note that I have disabled entering notes at this stage):

.

Closing comments and future plans for this project

Getting the API to work was a bit tricky, and it took me a couple of hours to figure out what could be done and what didn’t when it came down to connecting to a database.

• User-access: At the moment any user can access the map, as such I will need to work on a login-based system, with each login having their own database table, and maybe a selector at the start to see whose trip journal you would like to visit. This should hopefully not be too difficult *touch wood*.
• Image and video-upload: I will need to write an image upload script that saves the images on the server in the user’s folder and give each one a unique ID just in case. I’ll have to also look into resizing options and video compression if we are not using youtube etc
• Linking: Users should be able to cross-link or link to products / posts / etc
• Moderation & Administration: …and ideally all of the above should be moderated and maintained
• Plus, I want this to work in Adobe AIR later on as well, so I will need to rewrite a bit of the code later!

Lastly, if you enjoyed the article – or just the flash map – then please leave a comment, I would really appreciate it, as it gives me always another boost to write more

[UPDATE: I have updated this project's progress here]

This is where single-site browsers were/are trying to bridge the gap. They are installed on your desktop or in your dock an once started they give you a browser-like experience, but customized to the specific website they were downloaded from. Elements that won’t be needed (like the address or navigation bar) are hidden. A very good example is the Gmail browser. This is also where my interest into the subject came from: how can we offer our clients something more “personal” or “customized to their needs or brand?”

Mozilla Prism (which had its first debut in 2006 under the name “WebRunner” and was launched by Mozilla Labs in Oct 2007) is a platform to create desktop-based apps from online applications. For example, with Prism you can turn Google calendar into its own desktop application which you could start from your desktop in its own SSB. Okay, this is a very short run-down of Prism, the main reason being that Prism allows anyone to download it and use it to fit to their needs.

Since this weblog is about considering development ideas (and progress) for B2B and B2C sites we need to talk about more proprietary software applications, which is where AIR and Silverlight come in. [I am considering talking about Prism at a later date].

Adobe AIR was first presented to the public in March 2007 (back then under the name Apollo) and was released as AIR in June of the same year. It is based on the open-source rendering engine called WebKit (the same that is being used by Safari and the iPhone) and supports Flash (ActionScript 3.0), CSS, HTML and JS natively. Additinally, you can style the interface in any way you would want, be it round, wavy, the possiblities are almost endless, making it ideal to customize the interface to the company’s / client’s specific needs. The installation of an AIR application is very straightforward, just install the AIR runtime (which is available for Windows as well as Mac, with Linux support coming soon) followed by the AIR application in question and within minutes you can enjoy the application.
Adobe’s CS3 web suite is all you need to get started: get hold of DreamWeaver, Flash or Flex and off you go (provided you know the aforementioned languages somewhat).

In our office I held a presentation about AIR and its capabilities. After the presentation a discussion arose about whether to pursue AIR, Silverlight (our devs are .net developers), or both. The plan was to develop an application with the following specifications on both platforms:

• Photo gallery
• Gallery information coming from a web-gallery of our development site (aspx, .net, XML)
• Tied into Flickr
• Needs to update itself if new photos are added to a gallery (including a note of sorts to indicate the update)
• Ability to comment on photos

I will write updates about this dev-off once we begun development.

I have just finished working on the information architecture, designs and flash for a client of ours, and since the client has such a big UGC integration we were thinking about a couple of apps for them afterwards: the gallery from above would definetly come in handy, an RSS reader for latest offers or updates to your tour, an offline blogging app which would synch to the site once you’re back online. Its just trying to find the time to actually sit down and spec them out – and selling them to the client! Right then, back to marketing 101.