Blog

Lists
10th September 2011

This application is all about managing tasks. To begin with, click the 'create new task list' at the bottom. This then opens a panel in which the list can be named, and items inserted into it.

If logged in, changes are saved automatically so when you revisit the page, your previous settings remain, including the name and state of each task.

Click here to use

F1
10th September 2011

An interactive motorsport calendar. It contains events for 2011, and displays the status of each event - whether past, present or future - and highlights this in the interface.

For F1 events, there's also the option to view an archive of races from the BBC website's Classic F1 series.

Click here to use

Game
10th September 2011

A game created in JavaScript for your entertainment. Containing retro style glowing graphics - assuming you're using anything better than evil IE8, otherwise you don't get the pretty glows and nice rounded corners. This is an update of the last JavaScript Game I made - I said I'd update it at some point, and here it is. Runs much smoother, although visually I preferred the lighter background looking back, but that's just an easy CSS change.

The idea is to guide the ball through the holes to reach the bottom. The arrow keys, mouse, or a touch screen can be used to control the ball. It technically works on phones as it's not Flash based and widths are set as percentages, but it depends on your screen resolution and graphics provider as to how well it will work.

It heavily uses the jQuery animate tool, as well as the jQuery Rotate plugin, and took around 3 hours to make. The rows are generated randomly with PHP, so the difficulty can also vary slightly between refreshes. A difficulty trigger is activated when the ball reaches the bottom of the screen - when this happens, it speeds everything up as it assumes it has been going too slowly for the player until this point.

High scores are kept locally and per session, but in future it would easily be possible to have them saved in a database. Try it for yourself, it demonstrates itself better than I can explain in words!

Click here to use

Feedreader
10th September 2011

A quick app to read RSS feeds from external sources and display them on the page. Three sample feeds are included as demos, along with the ability to add a fourth (which isn't saved).

When clicked, links are expanded to reveal the additional content contained in the feed, as well as a link to the original article. Any images in the feed are displayed directly in the page with styling to prevent them taking over the screen.

Click here to use
Chat
10th September 2011

A web-based "instant" messaging system - not quite instant because there's a 1.5 second delay while checking for data, since browsers don't have push facilities to be told to retrieve data from the server.

This app requires registration, and from there you can add friends to talk to (assuming they're already registered). An upload function is available to share photos and files, which are then displayed in the page, as well as recent messages. The option to view the past week or day's worth of chat with one particular friend is available, along with email notifications.

It works by sending a request to the server to detect whether an update to a chat has been posted. If it has, the data is then retrieved and instantly animated into the chat window. It's really much more clever than I can put into words - give it a try!

Click here to use
New website
10th September 2011

Decided it was time to update again. It's built with a PHP framework with a MySQL database and jQuery. In the webapps section, there are several things to play with, some of which are enhanced by registering, and so there is a log and registration function added.

The design is built in a way that it should scale down nicely to mobile phone screens without the need for a separate site. Widths become percentage in the CSS based below a certain threshold, and a little jQuery animation helps the style along, but it isn't necessary to enable JavaScript - it only adds to it.

Clicking on a video will play in the browser if the screen width is high enough for it to safely assume the page is being viewed from a PC. If not, the video will be linked to as a normal file, so the device can play the video in whatever player it likes. I didn't want to go down the route of PHP or JavaScript browser detection, and rather keep everything nice all on one page without thousands of if statements. Also, click on images in the blog section, they whiz about before your eyes.

Not a lot more to say really, just have a look around. It'll probably change next week when I'm bored of it again anyway.

Webapps site
20th July 2011
I updated the webapps site to add new styles to old apps, and create new apps: Webmap and Todo. More on the new apps soon...

Feel free to experiment with any of the apps.

http://adamgleeson.co.uk/webapps
New website developed and launched
11th January 2011
Here's a website that I developed and it has recently gone live. It's for blogging about a round the world trip, and has a fully fledged admin system to quickly allow posts to be created, along with the use of the Google Maps API to add markers for locations and some nice animations to display the journey path as it develops.

It also features a photo gallery, with the Fancybox jQuery plugin, and includes PHP image manipulation to automatically generate the required thumbnails.

Visit the site here: http://www.leeanneroundtheworld.co.uk
Chat in PHP with jQuery and MySQL
24th November 2010

For my final (for now) web app I've made recently, I've added an instant chat section to the site, but with image and video uploads integrated within the chat. I could spend hours talking about it, but it's probably best explained in action - feel free to try it out and ask me any questions. I've left a few explanation messages on there for you to read.

Chat here.

chat2

Template websites version 0.5
3rd May 2010

This post is now out of date, but I've kept it in for future reference.

template0.1Added what I have so far of the template website, allowing Mr Random with no web experience to create his own website.

Many things still to add, including image backgrounds (will most likely be disabled in demo), custom stylesheets and sample settings to choose from.

All features that are visible at the moment are working, however it needs a colour picker - at the moment you have to put in either the basic colour in words (eg 'black'), or the hex colour coding, which Mr Random obviously won't know.

Feel free to have a play around.

www.adamgleeson.co.uk/template

Motorsports Calendar
19th March 2010

motorsport_websiteJust about finished my motorsports calendar. I've added options for links, mostly aimed at the BBC website, which have highlights of previous races, but no logical way of finding them, so this should keep them all together. I opened the ability to post links to anyone, but left them invisible until I approve them, so the page doesn't get abused by dirty spammers.

Other than adding links, the whole thing is automated, after the initial entering into the database of the various events. This also means it's very easy to include another series I may decide to watch, or if one is requested by anyone. The calendar counts down to the next event, and automatically produces iPlayer links when available, and removes them after 7 days, when they are deleted.

It needs tidying up, especially on the style front, both visually and code (I added inline styles rather than using up the main stylesheet, when I should have really added a unique stylesheet for it but realised too late as I expanded it), but for now it does its job.

HTML5 Video and Stuff!
26th February 2010
The video is completely unrelated to this post other than the fact that HTML5 browsers will play it.



I've been playing with the delights of HTML5, and added videos to hopefully replace Flash. Not that I had a problem with Flash, but YouTube/Google are doing it, so that means everyone else has to because they're obviously correct - Google wins at the internet.

But the immediate advantages are the performance and quality, and it just feels nicer that it's embedded better into the page, although it has broken W3C complicances... for now.

The problem is that not all browsers support HTML5 - yes, you again, Internet Explorer. I hate you so much and never miss an opportunity to tell everyone how irritating you are. But even then, the browsers that do support HTML5 don't all support the same filetypes. Webkit (Chrome/Safari) play nice MP4/M4V file types, which means they play well on the iPhone and support an image to display that invites you to click to play.


HTML5 on iPhone
Screenshot of the iPhone version of my site displaying the graphic that predictably leads to the video when tapped.



Firefox has done an IE and done things differently by not supporting MP4/M4V, and supporting OGG/OGV instead. The quality of the Firefox video is slightly inferior since I've had to put the video through two lots of compression (AVI > M4V > OGG), but hopefully in a future update Firefox will support MP4s so everything can be uniform. Or a good OGG converter appears - my attempts at finding one have resulted in me discovering SUPER, which does a good enough job at the actual converting, but takes far longer to start up than it does to convert. And I have to put an M4V through rather than the original AVI, because it adds a random green bar to the bottom of AVIs. Incidentally, I'm using Handbrake for the M4Vs.

The videos then fall back to Flash in Internet Explorer (playing the MP4 file rather than FLV to save another convert and upload). I doubt IE will support HTML5 this decade, so I guess Flash will be around a while yet. Not that that's a bad thing - Flash is great. But not so good for video, even though it has been the standard for so long.

I plan on creating a custom interface for the videos but for now I've allowed the default browser interface to be displayed, with a simple 'play' graphic over the top.

iPhone site
4th February 2010
iphone-site.jpg

I've created an iPhone version of the website, mostly to take advantage of the automatic rotation after seeing an article on Engage Interactive. If you're using an iPhone or an iPod Touch, you should be sent there as soon as you visit my site. If you don't have an Apple product, you can view the site here, although it'll not make much sense since it doesn't know which direction you're facing to be able to display the appropriate content.

So instead, here are some screenshots - taken with the phone's built in screen capture, by pressing the home and power buttons simultaneously.

The home page:
iPhone site


Phone rotated to the left:
iPhone site 2


Phone rotated to the right:
iPhone site 3


After touching a video, it will play in the iPhone's default player, although for blog content videos, as they are uploaded in FLV format (as opposed to M4V that I used for the dedicated video page), they won't play [although I've now gone through and converted some of the videos and added links when visiting on the iPhone page]. When the video has finished or you click done, it then throws you back to the page you came from.

I'm going to continue working on things like the missing videos, and allow comments to be added to blog posts (not that I get - or expect - many comments; it's just for my own concepts more than anything else) to make it as close as I can to the main site, and allow devices without accelerometers to be able to use it too.

One thing I really like is that if it looks correct on one iPhone, it'll look correct on them all. Saves a lot of time testing and then fixing all the issues Internet Explorer inevitably brings up, which also means it doesn't matter so much about complying to W3C standards (assuming they matter to you). And Safari supports CSS3 styling, so easy shadows and rounded corners without having to use graphics, which obviously helps with speeding up the download of pages on poor connections.

Content management systems
7th July 2009

Content management systemsAlmost every website I have created has also required a content management system of some sort to enable the client to update their website without needing to go through me for a small update, which allows the site to be standalone until a major update or refresh is desired.

I expanded from this to also build a completely custom website package, which allows clients to control not only the content, but also the layout. Colours, background images, fonts and text alignments are all examples of what can be quickly and easily modified on each page. Pages and tabs can also be created, so the system can be used to create two totally independent-looking websites using the same base code.

Group collaboration minisite
7th July 2009

Collaboration websitesFor a group project on my postgraduate degree, programmers had to work with artists to produce a small computer game. To assist with this, I made a small website that allowed contributors to post updates in a comments section, upload new artwork and designs, or share the latest version of code. Messages could be left and email notifications sent to all members of the minisite if desired (a login was required, so everyone had to register and leave an email address).

The site worked well and was regularly used, and feedback was positive in that it was much easier to write reports based from the content that had been contributed throughout the project rather than searching through endless emails as had been the case in the past.

Mailing Application
7th July 2009

Mailing applicationThis program was written by me from scratch to send out custom emails to members who have opted to subscribe to monthly email newsletters. Each issue follows a template that is easily updated using the CMS to insert news and images into various categories. Email recipient lists can then be assigned to the created email to be sent out, with the number of recipients sent to a batch queue to reduce the load on the server, as it is required to send out almost 2,500 emails at the same time. It is written in PHP, using MySQL.

www.chrisalisflowers.co.uk
7th June 2009

Chrisalis FlowersChrisalis Flowers is an e-commerce website that I designed and built on a freelance basis. It uses PHP and a MySQL database and content management system to be self-maintained and updated by the client, with categories and new products easily created, removed or updated, with images and various other options for each item.

www.agcas.org.uk
7th May 2009

AGCASThe AGCAS website is made using Ruby/Rails, and was functioning prior to me joining the company. I have since added new features and styles, such as integration with Google maps, a complete overhaul of the layout to bring it up to date without losing existing familiarities and features, and other tweaks and fixes. It is maintained by a team of people, using GIT as the version control software to keep each other up to date.

Flash presentation
7th March 2009

Flash presentationA Flash presentation was required for an awards ceremony, but the content wasn't going to be clear until shortly before the ceremony as the winners were not known, and many other factors such as screen resolution were also unknown, so it had to be suitable for a wide range of users and machines.

I created a Flash slideshow that was programmed using ActionScript to draw from an external XML file, which was created once the winners were known using another program I made using C++/Windows Forms to generate the necessary XML structure. This allowed for a dynamic and stylish Flash presentation with more effects than a standard PowerPoint presentation, and more easily and quickly edited.

www.adamgleeson.co.uk
7th February 2009

This siteMy site is written in PHP with MySQL, using strict W3C HTML, Flash, JavaScript and CSS. It has a full and custom content management system to easily update the content of any page and expands with each redesign. It also hosts mini sites such as my Blackjack game, motorsports calendar and custom template sites application.

Loading...
Saving...