Case Study: Okland Construction
The Okland Construction project was one of the most complicated, comprehensive and intricate projects I’ve ever attempted.
A company that I do a lot of work with, ConsultNet, brought this project to me. At the time, Okland had already began the process of building a new website with another developer that wasn’t working out. They were being told that many of features they wanted were impossible to build and it was going to take three months before it was complete. I found out that they hadn’t yet considered a mobile friendly website because they believed it was a separate website project. When they found out that I could build everything they wanted, plus give them a mobile friendly site – in only one month – and within their existing budget – they were immediately on board.
At that point I was committed and had just four weeks to create a content management system, a pixel-perfect, mobile friendly website and multiple jQuery components most of which had animation.
Okland’s website designer, Ryan Hyde, had already created every page of the website in Photoshop and used those pages to create very comprehensive slides with tons of notes, font sizes, colors, etc. in the companies slide sharing software. He had also uploaded most of the images to separate file sharing software and was available to work with me throughout the project, allowing me to very quickly get everything I needed. I gave him access through my firewall to view the project on my development system so that he could see changes in real time and we communicated mostly via Skype. I also worked closely with Okland’s Director of Information Systems, Lee Holland, in order to get an Ubuntu server setup for this project very quickly. If not for all the work that he had already put into those slides and the responsive communication from the people I was working with, this project would have been impossible in the promised time frame.
Below I’ve detailed how I built some key areas of the system.
Content Management System
The CMS is built using a php framework that I have personally developed over years named phpVolume. It allows me to very rapidly create complex enterprise class applications. It has features such as tiered security levels, security inheritance, user roles, and an extremely advanced object model that’s automatically builds and runs each of the modules. The modules, in this case it was Projects, Markets, News and Awards, are represented by a multi-dimensional array that contains a full description of the object and the options it requires. The framework uses a module object array to create a datagrid for viewing the records and the forms for adding and editing the data. By default each module object supports data validation and record locking so that only one person can edit a record at a time and everybody else is given a view only option. Some of the optional options include record cloning, recycle bin, custom fields, record tagging, parent/child relationships, opening of the forms in dialog windows, form loading via post or ajax and form saving via post or ajax. There are also multiple hooks within the form controller module that allow a developer to extend a forms functionality any way the choose. While it has a ton of automation and does most of the work for you, the object controller is designed to never get in your way. This advanced technology made it possible to have the entire cms built in less than a week including all of the file uploads, image manipulation, gallery sorting, video uploads with automatic thumbnails and an integrated html editor that’s used in multiple places. The CMS also features a built in help system that gives users all of the information they need about a module or a part of module when they need it.
Custom jQuery Components
News Marquee: The news marquee on the home page has a lot of animation components and interactivity. Each news items slides down as the next item slides in from the top. When this happens the selectors beneath animate at the same time to indicate which item is showing. Because this is a responsive component, an ellipsis function shortens the text as necessary and adds a nice … to the end. Clicking one of the news selectors changes the news item to the one associated to that selector and waits 20 seconds before restarting the animation. Hovering over a news item stops the animation and displays a button bar. Once the mouse is removed the animation restarts in 5 seconds.
Project Full Screen Gallery: This gallery is used to show the very large full sized pictures uploaded in the cms. It has zooming capabilities with the mouse scroll wheel and with a toolbar layered on top of the image as well as image panning using the mouse when the image is zoomed in. The dots below the image represent the individual images. As the user scrolls through the images the dots change color to indicate which image is showing and the can be clicked to open a specific image. Although it’s not obvious, this gallery actually opens in an iframe. I’m using the advanced dialog library that I built for the phpVolume framework to open a borderless dialog window and the content is loaded via the sites web controller just like every other page. The dialog library allows me to control the opacity of the modal overlay so I simple set the color to black and the opacity to 0.
The end result was that this project was completed on time, on budget and the client was extremely happy. I was able to provide them with everything they wanted and much more.
A couple of months after the website was complete I began work on the second stage of this project. This involved creating a Grunt development environment, integrating the project into Grunt, converting all of the stylesheets to SASS and adding the codebase to a subversion repository. This resulted in the website being easier and safer to work on, easier to deploy and most importantly the speed of their website was increased dramatically.
I worked with Lee at Okland to setup another Ubuntu server, this time for Subversion. I then installed subversion on that server, created the repository, created a new user and then configured the system for svn+ssh using key/pair authentication. Users connecting to the server via ssh using the key/pair are restricted to repo and can do nothing else.
One of the major challenges in this stage was having to setup everything again on a Windows computer and document each step of the process so that it could all be duplicated on Ryan’s computer at Okland. Luckily everything worked out and I came away with the impression that developers originally built some of these systems for Linux and then realized, oh yeah, people on Windows are going to want this to.
The third and final stage of this project involves adding finger sliding capabilities to the image sliders and upgrading the third-party Job Applicant CMS to match the design of the new website. This stage is currently underway.