CodeFrenzy

About a year ago, I embarked on a project through an organization called InterConnection.

InterConnection, as its website says, works to make Internet technology accessible to underserved communities around the world. As a web designer and/or developer, you can become a “web volunteer” and help build sites for other organizations out there who need a site but don’t have the money or the know-how to build one themselves.

So this is what I did. I became a web volunteer. InterConnection assigned me a project – to build a site for Shauri Yako Community Youth Support Centre in Kenya. How excited was I?!? Kenya! Awesome! Apart from doing something which was going to help others a LOT, I was going to have to push my boundaries and come up with a design. Yikes.

Shauri Yako Community Youth Support Centre is a community based organization, based in Nyeri, Kenya. SYSC was created to provide developmental services for children and youth living in poverty in Nyeri. SYSC works with vulnerable children, youth and women who face poverty, HIV/AIDS pandemic or social isolation to address their needs and hopes.

Within a few days of being assigned this project, Joe from Shauri Yako got in touch with me and with InterConnection’s help, we set them up with some online hosting and I started on the designs. Now, me not having a creative bone in my body meant that it was, let’s say, somewhat difficult for me to come up with a nice design. It took me about… 26 designs(!!!) and many frustrating one-sided arguments with photoshop until both Joe and I were happy with it. Phew! What a mammoth effort that was!

I then embarked on actually building the site. I had received lots of word documents and requirements from Joe, so this part was pretty easy. APART from the fact that in order to challenge myself a little bit more, I had decided that I would build the whole thing with as little HTML as possible and as much CSS as I could come up with. This, however, didn’t sit well with many browsers and after many attempts and many hours cursing at IE, as well as the realisation that this site was actually meant to be as accessible as possible (read: cross-browser), I gave up and re-did the site in HTML tables. Urgh. But, it took probably no more than 1.5 hours. How frustrating.

Anyway, the site has now been up and running for a few months and apart from a few last bits and pieces to tidy up, I would say it’s pretty much done.

But I’ll tell you the best part of all this. The other day when I did what I bet a lot of you out there also do but don’t admit to – “googled” myself – I came across one result which I totally didn’t expect. Shauri Yako had dedicated a paragraph of one of their latest newsletters to thanking me, Annie Luxton from New Zealand, and others from all around the world who have helped them in various different ways. That recognition was one of the best feelings I’ve had in a LONG time.

Here is a screenshot of the page as it is now – the best design I could come up with. I know it ain’t the greatest but it’s usable (well, at least I think so!) and does the job :)

p{margin: 0px auto; text-align: center;}.

So Google are now moving on into the spreadsheet business? This week Google released yet another product – Google Spreadsheets – an online spreadsheet application. Having just had a quick play around with it, it really is quite cool. Random, but cool. The functionality available is impressive – you can save spreadsheets, open ones already saved, download it as an .xls or .csv, and you can even share your spreadsheets with other users.

For the sheet itself, you can click in individual cells or highlight a group of them, type stuff into them, press F2 to edit existing text in a cell (just as you do in Excel), format the text (font, color and type of cell e.g. decimal, dollar, plain text…). You can even include formulas in the cells…

So how is all this done? Well, using a hell of a lot of javascript and some css. I can only assume that the speadsheet might use up a fair bit of RAM on the client-side (if my laptop didn’t have 1.5 gig RAM I might be able to notice…). I wonder well it works on different browsers. I might have to try it out on that mac at work tomorrow. Safari seems to be pretty good at breaking all sites that use css.

Anyway, I guess something like this new product might be used by those who don’t already own Excel and refuse to pay for it, or those who don’t have it installed but do have a nice connection to the internet and need to quickly whip up a spreadsheet… Hmm, who knows.

Below are a couple of screenshots for those who havn’t seen it yet.

It’s been a while but I’m back, back into blogging mode. I’m back from my 5 week trip to Argentina, Uruguay, Brazil and Chile (5 weeks isn’t nearly long enough to see all that!) and settling back down into normal working days in Wellington.

Came across this awesome multi-input touch screen demo.

You could do so much with this type of technology, it really opens up to the floor to a whole new type of computing. If it is pressure, heat, moisture sensitive then it could even take into account how you’re feeling when you touch it. Imagine writing programs for that! Hmm… where can I get me one of those…

Well, better get back to work and stop dreaming…

So I have finally finished my TravelBlog . Well, as much as it will probably ever be finished anyway. There are probably a few ‘niceties’ that I could have added (such as an RSS feed or commenting… or a calendar that actually lets you navigate months and years… oh dear, this is sounding worse and worse…).

But anyway, it MUST be finished because I am going on holiday TOMORROW and I’m not doing anything else on it. Really. I’m not.

Its taken me a while to do but I have added most of the things that I said I still wanted to do. Now I can have named users on the site, a login section, adding, editting and deleting articles for logged-in users (with extracts even)! And the best part is the photo upload / management / viewing side of it. When writing an article, you can upload photos and they will be resized to fit the page and a little thumbnail will be created. They are displayed underneath the article. And of course there is the management of these photos… but I’m sure thats enough detail :)

I’m not sure if writing it from scratch was the best idea but it sure did give me heaps of flexibility in terms of what functionality I wanted. The whole interaction with the Google Map is quite neat, and the photo management thing works like I want it. But as I’ve said, it took a fair bit of work to get it to this stage (many late nights) which can lead to some not-feeling-that-great-at-work type days… :)

So, I probably won’t be adding any articles to this blog for a while but I will hopefully be keeping my travelblog quite up to date :)

So I’ve had this great idea of making a travel blog with an interactive map on it for some time now… But I can’t seem to get around to actually doing much work on it. So I’m going to write a list of all the things I still need to do to get it up and going and maybe that will motivate me to do something about it. Maybe.

Here it goes…

1. Create a users table in the db.
2. Write a proper login page with some validation.
3. Write a blog content management area where users can write an article, edit an existing article or delete an article. This could be expanded endlessly really… Don’t really know where to draw the line. Will have to think about this one. Need to decide on a look and feel for this area.
4. Fix up the calendar.
5. Add the ability to see move to previous months (and then move back to current, obviously) on the calendar.
6. Write code so that map is always centered on the last entry’s location, unless they have chosen to read a particular article in which case it should center on that article’s location if there was a location associated with it.
7. Write code on the google map icons so that when you click on it it shows something more useful than what it currently does. Maybe displays the title and date of the blog entry at that spot? Maybe shows that entry on the page somewhere? Dunno.
8. Create some form of photo table in the db.
9. Add a photo upload mechanism to the blog content management area.
10. Allow users to associate photos to a blog entry or create galleries?
11. Figure out where on the page the photos will be displayed and how users can view them…

1. Create a route on the map (a polyline) of all the places that the entries relate to, in order of date, of course.

   Eeek, this list is getting far too long for my liking. I can see why I keep procrastinating… But all of this has to be done before I go to South America on the 23rd of December coz I want to use it!

   • 

A while ago I decided I would create some kind of a travel blog using Flash. Seeing as I don’t know Flash or Actionscript very well, this is as far as I got before I decided that using Google Maps and their extensive API would be a lot easier.

The mapping data I used in this app is a free set of basic world data converted into an svg using some free script I found online (can’t remember where or what it was called now, doh). The points are being read out of a MySQL database which is also being used for the “real” travel blog that I am working on. So this map should actually reflect the “real” travel blog when I finally finish it and it maybe even gets used.

Maybe I’ll continue to work on this one day when I don’t have a million other things I want to be doing. :)

“Real-Time” tracking of GPS locations on a web site is actually quite hard to achieve. In order to see a dot moving around on an online map, the page would need to be constantly refreshing itself. The refresh would initiate a request back to the server where server-side code would grab the new coordinates of the GPS unit out of a database, redraw the map with a dot on it, and send the whole image back to the user’s browser. Whether the refreshing is caused by the page itself or a hidden iframe on the page somewhere, a full roundtrip to the server every few seconds would soon become super annoying, even if it did mean the user got to see a neat dot ‘seemingly’ moving around on a map.

So how do we get around this? Ideally, we would just want to redraw the ‘dot’, not the whole map and definitely not the whole page. Can this be done? Yes! How? Using AJAX.

No, AJAX isn’t a cleaning product. And believe it or not it isn’t even a new technology. AJAX stands for “Asynchronous JavaScript and XML” and is described by WikiPedia as:

A term describing a web development technique for creating interactive web applications using a combination of:

*HTML (or XHTML) and CSS for presenting information *The Document Object Model manipulated through JavaScript to dynamically display and interact with the information presented *The XMLHttpRequest object to exchange data asynchronously with the web server. (XML is commonly used, although any text format will work, including preformatted HTML, plain text, and JSON)

AJAX essentially allows calls to be made to the server without the user ‘noticing’. The call itself does not cause the page to refresh at all. The developer can make the page do whatever they wish with the response from the server. Most often developers will manipulate the page’s appearance using JavaScript, the DOM and CSS.

So how can AJAX be applied to online mapping? Well, using AJAX we can make ‘asynchronous’ calls to some server-side logic that can grab the newest position of the GPS unit out of a database. The coordinates can then be passed back to our page in an XML string. Client-side JavaScript in our page will interpret the XML and create a ‘img’ element that looks like a dot, using CSS to place it at the correct pixel location on the map.

Since I don’t have a real GPS unit to test this with, I have populated a database table with some fake GPS coordinates. To date I’ve tried this using MapInfo’s MapXtreme 2004 (ASP.NET in C#, plenty of JavaScript, CSS and a horrible little Access DB) which worked a treat. I’ve also tried it using a Google Map which you can see below. (If the dot has stopped moving, refresh the page using Ctrl+F5 – I only have about 10 points in my fake GPS unit db table.)

If anyone wants to see my code, please see this article.

Today, while waiting for my incredibly slow script to finish running, I came across a very interesting Firefox extension: Greasemonkey.

Greasemonkey is a Firefox extension which lets you to add bits of DHTML (“user scripts”) to any web page to change its behavior.

One really interesting use of these Greasemonkey scripts is Stephen Fernandez’s Geotagging Flickr with Google Maps and Greasemonkey . His two greasemonkey scripts allow users to geotag flickr images quickly and efficiently by injecting new links into both the flickr and multimap interfaces. On the flickr side, the user clicks the ‘Add Geotags’ button and is then automatically redirected to multimap.com. Once the user is at multimap.com they can geocode their location. When multimap has found the location it will present the user with a link that says ‘Add GeoTags to your flickr image’. A couple more clicks and the user is back at their flickr image and with a bit of luck, the geotags should have been inserted successfully.

I’m thinking this type of script could be very useful for my TravelBlog application. Getting the lat long coordinates of the user’s location was always going to be a problem as I have yet to find a free world-wide geocoding web service to user. Instead I was assuming users would have to actually browse to a site such as multimap.com or maporama.com, geocode their location and then manually copy and paste the lat long coords into the blog entry. Not so nice.

So the next step is to get the TravelBlog up to speed so it is actually more like a weblog than it currently is. Then onto the Greasemonkey scripts!