All posts by dug

Interactive timeline

Interactive Timeline (personal project)

 timeline

Late in 2013 Facebook went into overdrive with “lookbacks”, where a whole heap of events from the year were selected ( seemingly at random ), automagically collated, and posted to your own timeline. It got me to thinking about the whole retrospective thing and ways of approaching it for multiple platforms.

With the new surfsouthoz.com website still in early development I also needed  a gap filler, so over the first week of Xmas holidays I slapped the layout and design together for an interactive timeline. I designed for tablet first and built the wireframe so it worked nicely on the iPad in Safari, partly a nod to the soaring stats for handheld surfsouthoz has seen over the previous 12 months, and partly as a teaser for direction the new site would be taking.  

With the container and 5 views working reasonably well after  a few days, I turned to the surfsouthoz.com facebook page for content. Some months were better than others, but all in all it was surprisingly easy to cherry pick a few major happenings from each month.  It probably took a week or so to collate it and whittle it down, but I finally got it all in.   Last steps were yoinking the slider /scroller I’d built for a recent project and adding Swipe events.  

To my amazement I made my new year’s eve editorial deadline, and foisted the timeline on surfsouthoz.com’s hungover and dehydrated audience  on New Year’s day. It was pretty well received and got some good viral Facebook share traffic, and the time on page from Analytics indicated people were actually spending some time digging through the pics and video.

I’ll definitely try and do another for 2014, but I’m secretly hoping I’ll be able to incorporate it into the relaunched design. 

But let’s not get ahead of ourselves…

Case study: WorkDirections

Case study: WorkDirections ESC3

Brief

Develop an online recruitment and candidate management portal.

Background

The Federal Government puts Employment Services out to tender every three years, and various job agencies submit bids for this work. Under the Job Network In 2004, Clements Recruitment acted as the agent for the recruitment of people to staff these agencies in every state. To streamline this complex process, Clements set up assessment centers in Sydney, Melbourne, Brisbane, and Hobart. The initial applications would be made through the online portal, which candidates could then use to track their progress through the refinement process.

A total of about 320 positions were available nationally, and the portal managed in the order of 4,600 applicants.

Approach

The build of the portal was carried out by three web developers with one lead,  and a 0.5 time project manager. In early stages several open source packages were examined, but none of them proved more than 30% fit for purpose. A bespoke solution was proposed, based on  PHP / MySQL, and this was built under a pair / team programmer arrangement. Functional modules were arbitrarily split between developers, coded and tested individually, and finally integrated into the main site.  Continuous / regression testing was employed with local version control.

The system would have a customer facing portal, and an admin facing secure management interface.

Key functions

  • Candidate log in / session management ( secure )
  • Candidate profile edit / manage, document upload system with version control
  • Candidate online testing ( four separate tests for fit and psych profile )
  • Candidate progess / status through recruitment
  • Administrator candidate assessment / grading
  • Administrator mail to specific candidate groups / lists
  • Administrator profile edit / update / delete / create
     

Case study: Swellnet

Case study: Swellnet

Brief

Develop custom CMS, back end administration and back end data management system for upgraded website.

Background

Swellnet has grown from a small one-man operation sending out surf forecast faxes to Adelaide surf shops in 1999, to one of the largest surf webcam / report / forecast websites in the world. In 2002 Swellnet’s phase one expansion offered surf forecasts covering the whole of Australia, through the first version of its website. The phase 2 expansion in 2005 included a major overhaul of the website to include surf forecasts and reports covering over 150 locations around the country, and also to make way for a national network of beach webcams.  The company took on a dozen reporters and two new forecasters, filing updates from 4 timezones. The need for a detailed and complex backend management system was flagged early on in the redevelopment process.

Approach

swllnet_siteSmartsite partnered with Elk Creative, who were charged with visual direction and branding of the new site, as well as UI design and implementation. Elk Creative also developed  all the Flash charting and data elements. Smartsite scoped and developed everything else

Early consultation with Swellnet led to the creation of a  feature “wishlist”, which was then refined to a list of essentials. This formed the basis of the first draft scope document. Every piece of data to be presented on the site, and to be collected by reporters and forecasters, was then categorized and hammered into a fuzzy model. This model formed the basis for the first report / forecast database schema. There would eventually be three databases and schemas -

  • report / forecasts ( from surf reporters and forecasters )
  • archiving and collection of data (from meteorological websites worldwide)
  • content management ( for site content, editorial, ads etc. )

Key functions

  • simple data API for text and chart / graphical data
  • Admin reporter & forecaster management
  • Admin forecast & report management ( text & numeric parameters )
  • Home page + editorial content management
  • Automated online data collection, archive & retrieval system
  • daily overview ( what’s missing? )

Case study: Bike SA

Case study: Bike SA

bikesa3

Brief

Develop a solution for entering Bike SA events online.

Background

Bike SA is the peak cycling organisation in South Australia, lobbying Government for cyclist safety improvements and promoting all facets of cycling. Their cause is largely funded through several events held throughout the year, some attracting thousands of entries. In 2004 the decision was made to migrate this snail-mail / paper based system to an online one. Participants would be able to fill out personal details and select options relating to the event, including meals, transport, and associated social activities. Payment through BPAY, phone (credit card)  and cheque could be made in the final stage of registration.

Approach

Smartsite partnered with TRIM Systems, and together developed the project scope with Bike SA. The build consisted of a client-facing site, which would be incorporated into BikeSA’s website, and a secure administration back end. The solution had to run on BikeSA’s Windows Server, and Trim performed installation and configuration to support some of the site’s features.  They also managed data migration from Excel / MS Access Database to MySQL. Smartsite worked on the PHP / MySQL powered forms, developed the new database schema, and designed / built the administration back end. Several of the online forms included complex client side validation and logic, which was handled by Javascript.

Key functions

  • Event registration, email confirmation
  • Data sanitizing
  • Mailing list ( event related )
  • Event payment
  • Administrator manual payment
  • Administrator mail to specific candidate groups / lists
  • Administrator profile edit / update / delete / create
  • Administrator export of entrant details to MS Excel
  • Event Newsletter create / mail ( PDF to e-mail and print / mail merge )

Our expertise

  • MySQL – RDB design, CRUD, size / performance optimisation
  • PHP – Object Oriented, legacy hacking, module integration, plug-in development
  • jQuery – GUI interfacing & REST, animation & games, data & geo
  • jQuery Mobile, Zepto – lightweight mobile web frameworks
  • HTML5 / CSS3
  • JSON / XML schema design and implmetations for feed / data transfer
  • JSONP data & cross domain solutions
  • jQuery UI for GUI and gamesthree.js for advanced 3D modelling
  • TweenMax js for Animation and effects
  • Raphael.js, Flot.js for charting

What we do

Smartsite is the trading name of a web consultancy based in Adelaide, South Australia.

We specialise in finding web-based solutions to business problems, by customising easily sourced open source software. When that software can’t be customised enough to do what you want, we write our own modules to fill any gaps in functionality. We’ve extensively customised WordPress, OSCommerce, phpBB and Mahara, integrating special features or enhancing requirements to meet a specific purpose.

When modifying a turnkey solution like WordPress doesn’t quite cut it, we can develop bespoke solutions from scratch. We can manage that process from impossibly crazy idea, through to go-live and post-launch bug tracking.

In more recent years the focus has shifted to interactive content, wrapping games, animations, data visualisatons and infographic content in HTML and CSS3, and gluing it together with a multitude of cutting edge Javascript libaries.