Goat Karma http://www.goatkarma.com web development Tue, 26 Jan 2010 17:14:43 +0000 http://wordpress.org/?v=2.7.1 en hourly 1 Introducing Flickr Group Searcher and Flickr Favourite Searcher (with auto-code generation!) http://www.goatkarma.com/2009/08/introducing-flickr-group-searcher-and-flickr-favourite-searcher-with-auto-code-generation/ http://www.goatkarma.com/2009/08/introducing-flickr-group-searcher-and-flickr-favourite-searcher-with-auto-code-generation/#comments Sat, 22 Aug 2009 09:49:26 +0000 admin http://www.goatkarma.com/?p=315 flickr-logo

This is my first post in two months..sorry, been incredibly busy at work! I’ve had my first week off since, well, I don’t know when!

So how did I spend one of my days off? Coding. Yep, bloody coding!

Anyway, I wanted to solve quite a specific problem with regards to Flickr. Every month on www.holgablog.com we run a ‘best of’ in which we showcase some of the best photos Holga photos we have seen in the Holga Flickr group. The problems we faced however were twofold:

  1. There was no easy way to browse the pool for all photos added for one specific month
  2. It took absolutely ages to manually insert the photos(with all info required) into wordpress

To tackle this, I’ve created The Flickr Group Searcher.  This simple script enables you to enter the group code for a certain group (to get a group ID, you can either get lucky and the ID will be in the group’s URL, or you can use this to search for the group and find the id: FLickr API group search), choose two dates, and choose what you want to do when ‘clicking’ on the returned image thumbnails.   This solved the first problem, in that we can now browse a pool between two dates.

The 2nd problem was also easily solved;  you get the choice of three options before searching:

  • You can either have the thumbnails linked through to the flickr page for that particular photo.
  • You can generate the code required to enter the photo into a flickr discussion.
  • You can generate the code required to enter the photo into a Wordpress page/post (via the HTML view).

The 2nd and 3rd options show a text box at the top of the screen which,when you click on a photo, fills up with the code required for insertion into the chosen program.  You can then simply copy and paste the code into wherever you need it!

Another great bonus is that it uses Alen Grakalic’s Jquery image preview, which enables the user to see a larger preview of the photo when they hover over a thumbnail.

In the long run, this should save us loads of time!


Another small script I created was the Flickr Favourite Searcher, which searches through a FLickr user’s public favourites that were added between two dates, and then generates the same type of insertion code as the Flickr Group Searcher.

The Geeky Part

To create these scripts, I used Dan Coulter’s awesome PHPFlickr which offers a PHP ‘wrapper’ around the Flickr API, allowing for easier interaction with the FLickr API methods.  All the API methods are present, and are simple to use with PHPFlickr, with the results returned in an easy-to-use array.

If anyone wants a copy of my scripts to copy/butcher/change, drop me an email.

]]> http://www.goatkarma.com/2009/08/introducing-flickr-group-searcher-and-flickr-favourite-searcher-with-auto-code-generation/feed/ Reading Google Map pointers from a MySQL database http://www.goatkarma.com/2009/06/reading-google-map-pointers-from-a-mysql-database/ http://www.goatkarma.com/2009/06/reading-google-map-pointers-from-a-mysql-database/#comments Fri, 12 Jun 2009 08:48:01 +0000 admin http://www.goatkarma.com/?p=292 As mentioned in my other blog post, you may be interested in how you can plot points on a google map using the google maps API, combined with a MySQL database.
The basic premise is that you have a MySQL database containing a series of latitudes and longitudes, and you need to read the latitudes/longitudes from the database and plot them onto the google map.

First thing first, create a a simple database table with a column for both latitude and longitude, you would of course have other fields depending on what data you are using the google map to represent. For simplicities sake, I’ve called them ‘lat’ and ‘lon’:

CREATE TABLE `map` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`lat` DECIMAL( 10, 6 ) NOT NULL ,
`lon` DECIMAL( 10, 6 ) NOT NULL

) ENGINE = MYISAM

We have set the lat and long as DECIMAL(10,6) to enable us to use decimal points due to how lat/long is represented (i.e 52.132633 is a latitude). We’ve also thrown in a auto incrementing ID for the primary key.

Now we have the MySQL table, we need to populate it, so go ahead and throw some latitudes and longitudesinto it. If you are feeling adventurous you can take a stab at Geocoding some locations using the API (I will be covering Geocoding in another article shortly). You can grab some latitudes and longitudes using maporama to search for a location, and you will find the lat/long on the bottom left corner of your screen.

Now onwards with the code.

First we need to connect to the database:

<?php $db = mysql_connect(“localhost”,“dnusername”,“dbpassword”);
     mysql_select_db(“dbname”, $db); ?>

Next, we will need to include the google maps API key in the headof your page. You can sign up for your API key by going to this page.

So, in the header of your page, enter this bit of script, with your API key placed where it says so:

<script src=“http://maps.google.com/maps?file=api&amp;v=2&amp;key=ENTERYOURKEYHERE” type=“text/javascript”></script>

Now we have set up access to the DB and linked to our google maps API, we can continue with the creation of the map.

Still in the of the page, create some javascript that will create the points. In this instance we want the points clickable so when you click on the point on the map, it will go to another webpage. For this we use the GEvent.addListener function, which will direct the user to the new page when they click on the point. We are directing people to a PHP page that will take the point as a variable from the address bar (using GET) and then display some sort of information depending on what is required.

<script type=“text/javascript”>
        function createMarker(point,html) {
          
        var marker = new GMarker(point);
       GEvent.addListener(marker,“click”,function(){ top.location = “http://www.websiteaddress.com/page.php?point=”+point });
       return marker;
      }
</script>

Now we need to initialize the map:

<script type=“text/javascript”>
         function initialize() {
        if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById(“map_canvas”),{ size: new GSize(580,400) } );
              map.removeMapType(G_HYBRID_MAP);
                map.setCenter(new GLatLng(-3.703250,40.416741,0), 1);
                var mapControl = new GMapTypeControl();
                map.addControl(mapControl);
                map.addControl(new GLargeMapControl());

This is only half the code, but I thought I’d halt there for a second and explain what’s happening, We are creating a new map, and placing it in the DIV on our page called ‘map_canvas’. We can specifiy the size of the map you want, and what type of map you want(i,e satellite, street,hybrid etc). The size is controlled by the ’size:’ command, and the type of map by the ‘map.removeMapType’, which will remove any type of map button you don’t want. You also set the the starting point of the map by using the ‘map.setCenter’ function.
You finally add the controls onto the map, i.e if you want the zoom, and the directional cursors for navigating.

After initializing the map, and in the same script and function (notice how the above piece of javascript isn’t closed by a tag, and the function isn’t closed either with curly bracket), we need to now plot our points onto the map from our MySQL table. To do this we use PHP to perform a query on the database and extract the lat and long, assign them to variables and output each one in the javascript as a point. Simple (err..)!

<?  $exe_map=“SELECT lat,lon FROM map”;
         $result_map = mysql_query($exe_map, $db)or die(mysql_error()); 
         while(list($lat,$long) = mysql_fetch_row($result_map)){
          
                        echo “\n var point = new GLatLng(”.$lat.“,”.$long.“);\n“;
                        echo “var marker = createMarker(point,”);\n“;
                    echo “map.addOverlay(marker);\n“;
                    echo “\n“;
        }
?>

And don’t forget to close the function,’if’ statement and script:

}
}

    </script>

This basically gets all latitudes and longitudes from the database, row by row, and creates a point on the map by assigning the lat/long variables to a javascript variable called ‘point’. A google map marker called ‘marker’ is then created with the coordinates assigned to ‘point’. Finally the marker is added to the map. This is repeated for all points in the database table.

And that’s the hard part done. We have read out our points from the database and added them to the google map. All we need to do is create

All we need to do is put the google map in the place on the page we said we would (”map_canvas”), and initialize the javascript when the page loads, otherwise the map won’t show up.

Make sure your body tag has these javascript fucntions included:

<body onload=“initialize()” onunload=“GUnload()”>

and finally, you can just place your div called ‘map_canvas’ wherever you want on your page:

<div id=“map_canvas” style=“width: 580px; height: 300px”></div>

You can download the complete file as txt file here:

map.txt

]]> http://www.goatkarma.com/2009/06/reading-google-map-pointers-from-a-mysql-database/feed/ Police Tracking Project (AKA Let’s play with the Google Maps API). http://www.goatkarma.com/2009/06/police-tracking-project-aka-lets-play-with-the-google-maps-api/ http://www.goatkarma.com/2009/06/police-tracking-project-aka-lets-play-with-the-google-maps-api/#comments Wed, 03 Jun 2009 10:16:12 +0000 admin http://www.goatkarma.com/?p=211 One of my employers, the SCCJR, has started a new project: Community Policing in Scotland. The project is quite a modern project, in terms of academia, in that it combines many different multimedia elements such as video, audio and photographs to describe the routes Community Police Support Officers (CPSO’s) take on their ‘beat’. The police officers are given video recorders and cameras to use during their patrols, they then upload them via the website ‘members’ area.

In these recessionary times, we are always looking for ways to save cash on projects, or shelve them for a while, and this was no different. We wanted to track the CPSO’s on their patrols using GPS, we could then record their routes and build up an accurate record of their routes in relation to crime areas. The idea was to use small GPS tracking devices and record where they walk. The officers would then upload the GPS data to the website, where it gets added onto a google map. The project co-ordinators could then view the routes taken by the CPSO’s over multiple days. In addition to this we wanted to plot crime stats by postcode to see if the officers deliberately avoided areas of high crime.

The one problem is that I just don’t have the time to do this. I know the theory, and have actually done most of the legwork before using the Google Maps API with PHP&MySQL on the Global Gothic website, but time and monetary constraints have left us without the ability to do this part of the project.

…Enter the Computer Science Department at the University of Stirling. Every year they have a cohort of MSc students who need to undertake a final year project and dissertation. They request for projects to be added to a list for the students to choose from, and luckily enough we managed to snag ourselves a student!

We have had a few meetings to discuss our requirements and everything is a go! Here’s a breakdown of what should be an incredibly interesting project (for geeks like me anyway).

Part 1

  • Create a simple, secure website (PHP sessions) to enable CPSO’s to log in and upload a GPS file (.GPX format).
  • The System will then automatically parse the GPX file (it’s just XML really) and input it into the MySQL database
  • The project coordinators can then log into the website and choose which CPSO they want to view the results from, and the date of the patrol (populated & filtered using AJAX).
  • The results from the above query will then be plotted onto a google map.
  • The coordinator can then choose to plot further routes on the same map.

Part 2

  • Crime statistics will be provided in a CSV file, this will have the postcode in one column, and the number of crimes in the other column. The file needs to be uploaded, parsed, and entered in a database.
  • The crime stats can then be plotted onto the google map, using different coloured ‘circles’ to denote an area (i.e red= over 10 crimes,yellow=5 to 9 crimes etc).
  • The crime stats can be turned on and off using a button, so they can be overlaid with the routes from the first part of the project.

Sounds simple, eh? Well, yes and no. Both parts, taken separately are quite easy, but combining them in an easy-to-use interface will be the hard part methinks.

Stay tuned in a few days for another blog entry with some simple code to plot points on a google map using coordinates stored in a MySQL database. Probably quite boring stuff, but it’s easy to do, and there’s not that many examples out there.

And here’s a pretty(!) picture of how I envisage it will look when finished. Stay tuned to see the final version in the autumn. Click on it for a larger view!

stats2

]]> http://www.goatkarma.com/2009/06/police-tracking-project-aka-lets-play-with-the-google-maps-api/feed/ In the Pipeline http://www.goatkarma.com/2009/04/in-the-pipeline/ http://www.goatkarma.com/2009/04/in-the-pipeline/#comments Thu, 30 Apr 2009 18:06:24 +0000 admin http://www.goatkarma.com/?p=192 With the recession starting to take it’s toll on the public sector, especially universities (some have seen a massive shortfall in their budgets), web development work is starting to slow down, but there are still  a few exciting opportunities coming up over the next few months here at Goat Karma Towers:

Scottish Community Safety Network

I’ve been contracted to completely re-design and create a large custom content management system for the SCSN.  The SCSN is a large government-funded network that oversees all aspects of community safety, including: fire,police,roads,anti-social behaviour, and many other sections.

Preliminary workshops and focus group sessions have taken place to establish the content of the site, and development will begin at the end of May.

EU-Russian Network

The EU-Russian Network, largely based at the University of Stirling.  The network focusses on building strong academic relationships between two other large bodies: the British Association for Slavonic and East European Studies (BASEES) and the University Association for Contemporary Studies (UACES).

The EU-Russian Network wants to incorporate the latest Web 2.0 technologies, to produce a ’social’ network of interested parties.

A scoping study has taken place, and designs will begin in earnest soon.

Arts at Stirling

The University of Stirling teaches many courses that are spread across multiple disciplines.  The Arts at Stirling site hopes to gather all these courses together in one place to act as a promotional site for prospective students.   It also hopes to become an information resource for current students and staff members.

Initial designs are being drafted, with development to take place soon.

]]> http://www.goatkarma.com/2009/04/in-the-pipeline/feed/ Gloriously Bad Websites: A Celebration http://www.goatkarma.com/2009/04/gloriously-bad-websites-a-celebration/ http://www.goatkarma.com/2009/04/gloriously-bad-websites-a-celebration/#comments Thu, 30 Apr 2009 14:20:24 +0000 admin http://www.goatkarma.com/?p=162 While the internet as a popular medium enters it’s awkward teenage years, you would have thought that bad design would slowly disappear into the ether.  By bad design I mean those third-trimester-abortions of sites that people would knock up and host on geocities.  Terrible tabular designs containing frames, eye-bleeding colour clashes, horrible little animated GIFs, and not forgetting amazing music playing in the background.

Many of those amazing sites from those heady days have slowly disappeared, but some remain, and this post aims to celebrate and salute those websites that stick 2 fingers up at standards,css and ‘web 2.0′, sites so fantastically grotesque that if directly looked at would cause permanent retinal damage.

Now I’m not a great designer by any means, I’m more a code monkey, but I can tell when a site is bad.  But not just bad.  Gloriously bad, so bad that they are actually pretty damn brilliant, so bad that they would have had to put in a lot of effort to make them that bad (trust me, as you will see at the bottom of this entry, I tried!).

So behold, some of the most amazingly bad websites on the interweb.

Havenworks (http://www.havenworks.com)

BBC News- go F**k yourself.   Look at this peach of a site.  At first it just looks like the style sheet has gone walkies, but delving deeper you realise it’s designed like this.  This site is one of the best worst designs out there.  It’s perfect in every way. It’s just way too hard to read, which is a shame for a NEWS BLOG!  I wish I could design sites as brilliant as this, It’s just about perfect.   See also havenworks web division, specialising in other beautiful designs such as Fair Lending in Iowa and Forest Grove Appartments.

Alternative Transport Services (http://www.alternativetransportservices.co.uk/)

Hello Darlings.  It’s always good when in business to keep a formal manner when addressing your prospective customers darlings.  Alternative Transport Services (ATS henceforth), has it all: clashing neon-coloured text, the standard animated clipart GIFs that have nothing to do with the product, streeetccheeed out pictures that repeat, and a front page that is longer than bigfoots dick.  I love it.   Blatently designed by the the mum of ATS’s boss.  I love they way they make a big deal about credit cards not needed, blatently due to the fact they wouldn’t have a clue how to put that option on the website.

Virginia Driver Improvement Programme (http://www.5safepoints.com)

I think this was an exercise in how many flashing, rotating, spinning animations they could fit on one page.   I’m not sure why they need to coat everything in a rainbow bar, but it sure is perty. (that was my best redneck accent).

Although useful, I’m not sure how having the area code for every county in Virginia is useful on the front page.  They also love repeating the same thing over and over again.  it’s great.  Perhaps it is a subliminal site advertising someones wares.  Actually it’s hardly subliminal when you have this hynotising you:.

YOU ARE FEEEELINNG VERY SLEEEEPY,,, BUY SOMETHING NOWWWWWWW.

Lings Cars (http://www.lingscars.com/)

I was torn whether to put Lings Cars here.  It surely is a beautifully horrible website.  But the problem is, is that it’s meant to be.  I think a lot of time and effort went into making this site look how it looks.   It’s all to do with marketing.  People come to the site (named after Ling, the owner of the company) and think they are looking at a personal amateur site, hence getting a personal service by Ling.  Very very shrewd, and effective.  Last I heard the site was doing exceptionally well.

I especially like this at the footer:

Made in the People’s Republic of China (me, not the website… which was handcrafted by Ling, in the UK)

But perhaps that’s me being cynical and the site is actually all done by Ling in her back room.  If so, I salute you Ling.  The site is glorious.

Adveb Web Design (yep web design!!) (http://www.adveb.co.uk/)

So the site is just one of thousands of amateurish table-designed sites around the net.  But wait… this guy is a web designer?  WTF!   Looking at his client list, pretty much all the sites belong in this post.  Check out W J Briggs Fresh Milk. I dread to think how much poor old Bill Brigg forked out for that page.  Top marks to this guy who charges £100 a page for this sh*t.    Actually, I take that back.  It’s people like that that make small businesses not want a website when that’s what they get for their hard-earned cash.   Adveb designs: your’e crap. I don’t salute you.

Longs Cycles (http://www.longscycle.com/ )

Internet shops, as a rule, have to be slightly accessible in order for them to attract customers, especially these days with loads of internet stores offering everything under the sun.  So why would you shop here?   It’s brilliant.  Nice use of frames for the menu at the side, and they have even stolen the checkout buttons from amazon!!

Amazon:

Longs Cycles:

hmmmm.

Accept Jesus, Forever Forgiven (http://www.dokimos.org/ajff/)

WARNING:  Before clicking on the link above, please ensure you are not suffering from any heart condition, pregnant or epileptic.   As you may be after clicking (apart from pregnant, unless God impregnates you through the website.  It has that much power.

Don’t coming running to me if you give birth to Jesus.

File under Weird

Below are a few other sites, that while the designs are bad.  They are just plain strange sites.

I KISS YOU

http://www.istanbul.tc/mahir/mahir/

Mahir is an internet legend.  He must be who Sascha Baron-Cohen based Borat on.  His site is the bestest personal website in the world.

apart from…

I Liek Milk!!!

http://www.generation.nl/~hitoshi/

Hitoshi’s site is as old as the internet (well, it feels like it).  His saying ‘I Liek Milk!!!’, has been said thousands of times on internet message boards, but his site is still awesome.

Peter Pan’s Home Page

http://www.pixyland.org/peterpan/

This guy is weird.  Like really weird.  He thinks he is Peter Pan.   The whole site freaks me out.  Check out his fiance’s webpage for equally bizarre mindf**k.

And Now..

I mentioned earlier that it takes A LOT of effort to make a website as bad as above.  It does.  I tried.  And failed.    I spent ages trying to get my blog webpage as bad as those above.  I just couldn’t do it.

The inner geek also made it 100% W3C validated!  Until I added some music that is…
Behold my attempt:

http://www.goatkarma.com/bad/bad.php

Anyone got any other terrible websites?

]]> http://www.goatkarma.com/2009/04/gloriously-bad-websites-a-celebration/feed/ HolgaBlog http://www.goatkarma.com/2009/04/holgablog/ http://www.goatkarma.com/2009/04/holgablog/#comments Thu, 30 Apr 2009 13:24:53 +0000 admin http://www.goatkarma.com/?p=58 hb

Holgablog isn’t usually flying communist colours, but it was International Commie Camera Day, so we changed the site to support our comrades!

Holgablog is a fast-growing photography magazine, dedicated to film photography.   Although digitial is more popular than film these days, film has found it’s niche.  Holgablog currently has over 15 dedicated writers, all with different expertise in photography.

Technical

  • Wordpress powered
  • Customised infinity theme, to produce a magazine style, yet keep in line with the artistic nature of the readers.
  • use of large number of custom fields to extend the use of wordpress

]]> http://www.goatkarma.com/2009/04/holgablog/feed/ Crime and Justice Student Portal http://www.goatkarma.com/2009/04/crime-and-justice-student-portal/ http://www.goatkarma.com/2009/04/crime-and-justice-student-portal/#comments Thu, 30 Apr 2009 13:20:29 +0000 admin http://www.goatkarma.com/?p=30 beta

The Crime and Justice Student Portal is an extension of the Scottish Centre for Crime and Justice Research. It offers students at all levels the opportunity to educationally network in the field of criminology. The site offers users to sign up and start an educational blog/journal, in additional to offering useful tools and resources for their studies. The site is currently in it’s development and testing phase, with an expected September rollout.

Technical

  • Fully custom Content Management System, coded from the ground up with PHP and MySQL
  • Using JQuery and AJAX for a slick front-end experience
  • Fully W3C compliant and validated.

]]> http://www.goatkarma.com/2009/04/crime-and-justice-student-portal/feed/ The Gothic Imagination http://www.goatkarma.com/2009/04/the-gothic-imagination/ http://www.goatkarma.com/2009/04/the-gothic-imagination/#comments Thu, 30 Apr 2009 13:17:34 +0000 admin http://www.goatkarma.com/?p=25 go1

The Gothic Imagination is an incredibly popular website hosted at the University of Stirling.  It’s remit is to provide social networking within the field of gothic studies throughout the world.  It houses blogs, news and guest blogs, as well as a link directory.   The Gothic Imagination website predated the latest iterations of Wordpress by 2 years, yet managed to offer the same functionality that only the latest versions have produced.

Technical

  • Fully custom CMS and blogging system.
  • Coded in PHP, and using MySQL databases.

]]> http://www.goatkarma.com/2009/04/the-gothic-imagination/feed/ Film at Stirling http://www.goatkarma.com/2009/04/film-at-stirling/ http://www.goatkarma.com/2009/04/film-at-stirling/#comments Thu, 30 Apr 2009 13:17:16 +0000 admin http://www.goatkarma.com/?p=35 film1

Film at Stirling is a new initiative to enable external and internal users (students, prospective students, visitors etc) to see the film-related outputs of the various departments at the University.  Once fully up and running, the site will be used to showcase student work, in addition to using the blog feature as part of student’s coursework.

Technical

  • Customised Wordpress theme
  • Using excerpts and custom fields to populate the front page.

]]> http://www.goatkarma.com/2009/04/film-at-stirling/feed/ The Scottish Centre for Crime and Justice Research http://www.goatkarma.com/2009/04/the-scottish-centre-for-crime-and-justice-research/ http://www.goatkarma.com/2009/04/the-scottish-centre-for-crime-and-justice-research/#comments Thu, 30 Apr 2009 13:16:18 +0000 admin http://www.goatkarma.com/?p=8 sccjr3

The Scottish Centre for Crime and Justice Research was established in 2006 as a centre for academic excellence in the field of Crime and Justice.  It employs over 20 staff and has over 100 partners across many institutions.

The website is a custom-built CMS solution, including a portal for SCCJR staff members. The portal contains many facilities such as the ability to customise the front end of the site, and a research ticket logger for use by the Scottish Government to log research requests, which are then assigned to staff members.

Technical

  • PHP,MySQL,XHTML and CSS driven
  • Fully W3C standards compliant
  • fully custom CMS enabling 5 different security levels of staff to edit and take part in different parts of the site

]]> http://www.goatkarma.com/2009/04/the-scottish-centre-for-crime-and-justice-research/feed/