Web Developer
Duet (or OhioHealth Mobile, as it's branded for OhioHealth) is a mobile application, published by eProximiti, designed to provide people with information about particular medical programs and help track progress through programs, such as pregnancy, surgery recovery, and Diabetes life changes. We worked, and are continuing to work, with doctors to provide the content.
As part of the team that developed the system, I built the API that the mobile devices use to retreive the data, as well as the backend control panel used to insert and update the information. I also helped build the timeline system that is used to track the various programs, and the Medical Information section, which provides a hierarchal structure of categories and articles related to the specialty under which a program resides.
The back end control panel for Duet differs from the control panels for past projects, because it's designed with the intent that OhioHealth (and other healthcare systems) representatives will be using it. This means considerably more effort was put into making the control panel easy to use and navigate, and look attractive. UI features include extensive use of JavaScript and jQuery to display or hide data as needed, as well as CSS3 to provide polish to the interface.
OhioHealth has embraced this project to the point that it will continue to grow and evolve in the coming months and years. We are always looking to add more specialties and programs, and have plans to provide integration with a number of health-related devices.
Columbulous is a mobile application for iPhone and Android devices for the Columbus, Ohio metro area. It provides location-based information on food, drinks, entertainment, and events for places all over the city. Vendors can add their location, as well as specials and events, from the website.
I implemented the website, database, and API for the Columbulous project.
Rock Short Vine is part of the Short Vine Business Association in Cincinnati, Ohio. When they needed an actual site built (as opposed to their former placeholder), they hired Nick Smith to design it and eProximiti to implement it. The result was a unique, street look with progressive enrichment and a dash of dynamic data.
Graphically speaking, the site uses a number of different cutting edge techniques, lending subtle hands to produce a bold effect. These CSS techniques include:
A dash of jQuery lends a hand in providing an expandable list of vendors, and custom JavaScript and PHP provide information bubbles for the map, powered by Google, and topped off with customized, generated, and clickable pins. Finally, an embedded Google calendar provides a schedule of events that is easy for the tech un-savy to maintain.
The site makes use of what's known as "progressive enrichment," as well as "graceful degredation." That is, not everything will be exactly the same in every browser. The experience will be acceptable in most browsers, while those with newer and/or more compliant browsers will receive extra touches.
Non-obtrusive JavaScript techniques allow things like the places list to fall back to a standard list in the absence of JavaScript support.
The CSS3-based drop shadows, gradients, opacity, and transforms are only present in the browsers that support such features. Currently, that includes the latest versions of Firefox, Chrome, Safari, and Opera, while Internet Explorer and older versions of the other four get fewer of these extra touches, and future versions of all of them should have even more enhanced support, as they improve on existing technologies (and in the case of Internet Explorer, add the new features).
The O Spot, built by eProximiti, is primarily a mobile application for Android and Apple (iOS) powered devices, but it also has a web application portion to it.
eProximiti has it's own, homegrown CMS, which actually controls a number of sites on different subsystems. Their flagship application (at least in the Columbus area) is the O Spot. The website portion of it has a lot of the same features as the mobile app, but is primarily for promoting the mobile app. The base design was already in place when I joined the eProximiti team, but they were poised to launch it big and wanted to make it its own subsystem within the CMS and make it wholey separate from the subsystem it was originally a part of. eProximiti's owner, Jeff, also wanted enhancements to both its public-facing frontend, and its underlying structure.
O Spot sits on top of a homegrown CMS that sits on top of the CodeIgniter framework. This makes for rapid development and easy changes, as well as solid separation of presentation, content, and data, thanks to its MVC architecture. Most of the content on the site is dynamically generated from a MySQL database, and jQuery and CSS add touches such as gradients, tabbed sections, and sliding effects. Some interacting with the Google Maps API completes the experience.
My first main task with it was to move everything into its own subsystem. When I started, it was fragmented between its own and another one. I pulled it out and turned it into its own entity. I also redid the frontend interface, in part due to some differences in the existing underlying structure in the two subsystems it was straddling.
Some of the changes included the addition of the tabbed "specials" section, the addition of events, and the changing of the "places" submenu to use modern CSS techniques.
General upkeep includes duplication of the subsystem for "sister sites" for other college communities, including UC Spot (Cincinnati) and 1 Uptown (Miami University Ohio), maintaining the API for the mobile apps, and providing enhancements by request.
As part of ongoing work with the Ohio Department of Rehabilitation and Correction, I helped work on one of their internal applications and also provided them with an analytics solution for the application.
Due to restrictions from the client, I can't disclose much about the application itself. That said, I'll do what I can.
The application as a whole is huge, so I only worked on a small part, and most of it was maintenance. Some of it was bug fixing, some of it was converting old 1.1 code to 3.5. It utilitzed Entity Framework, which was a fun experience (both seriously and sarcastically; EF is a great concept, but Microsoft's implementation of it in 3.5 is...wanting).
I also researched and installed a wiki for documentation, and analytics for monitoring the internal traffic. ScrewTurn wiki is a port of MediaWiki to .Net, and for .Net, it's a pretty good wiki. I'd recommend it for other .Net servers. Piwik, the analytics, is an open source, PHP/MySQL application that is designed to be a Google Analytics alternative. I liked it so much that I use it on my site, and would recommend it to anyone that wants analytics.
The Buckeye Institute is a political advocacy group for the state of Ohio. They originally had a static site and wanted to convert it to a CMS so that they could update and expand it and do so easily. I came into the project toward the end of it, to help the primary developer during crunch time.
The CMS is a custom in-house one that Switchbox's PHP developer created and that Switchbox has implemented on several different sites. My role was in creating a handful of modules to use in the Buckeye Institute site, including what powers the news section, contact forms, and search functionality, as well as some of the side bar aggregators.
When I first started freelancing, I initially wanted to run it as a company. The way my work path took me, however, thanks to the local job market and state of the economy, wasn't working well with the business facade. So I decided to rebrand myself and market myself under my own name.
I also wanted a more creative design than what I previously had, as what I had before struck me as rather bland. So, after some searching around for ideas (I really liked the corkboard and tacked-up note look from my Milo's Deli project), I finally came to the chalkboard look. The design incorporates a number of techniques and styles. TypeKit makes its appearance in the headers and major navigation in my site, while CSS3 allows for a stretching background and text shadowing (providing a subtle 3D effect) in the browsers that support those attributes. The ability to layer semi-transparent .PNG images as backgrounds to various HTML elements creates a well-used chalkboard look, complete with not-quite-erased writing.
In addition to a new design, I decided to put my site on a Content Management System, since I had added a blog to my previous site design, and I wanted a more efficient way to update my site as needed. I chose SilverStripe because I was already familiar with it from the 3 Pillar project and really liked the customizability it offers, and it has a blog module available, which integrates it into the site (so no need to spend time integrating blog software from another vendor).
Finally, the new site is an exercise in Agile development. I started by getting the core site up, so I had the new design going, then I have been progressively enhancing it as I build the custom page types for various aspects (such as this portfolio page). Having the site on the CMS makes it easier to develop in an Agile environment, because making changes to large sections is as simple as editing the appropriate controlling file.
I worked with Workstate to implement first the new design, then to migrate the site to the SilverStripe Content Management System.
The first phase involved turning Workstate's new design for the 3 Pillar Homes site into HTML and CSS, as well as adding some interactive touches using jQuery, such as the image carousel on the home page. The original design repeated a large amount of code on each page, and because the site was becoming quite large, it was starting to prove to be unweildly to maintain. To help remedy this, and get it ready for migrating to the CMS, I pulled out the duplicate code and created PHP include files to create a sort of "proto-template".
The second phase was to migrate the site to SilverStripe so that the client could update and create their own content. The initial migration was intended solely to get the site onto the CMS and get some priority pages into the CMS. Migrating to SilverStripe involved creating a custom theme and custom templates to accomodate the new design. More enhancements were also added to the site, including the automatically-updating blog snippet on the home page.
I worked with Workstate to implement a new design for Milo's Deli. I worked within the existing ASP.NET 2.0 application to reskin the site and make a few minor enhancements.
The original site had been created several years ago, and so was using JavaScript in places where other techniques could now be used, so I made a few changes to help reduce download size and loading times. Since more changes were outside of the scope of the project, however, the code wasn't put through an entire update.
The new design for Milo's Deli utilizes several aspects of CSS3, which degrade gracefully in browsers that don't support a given attribute. Such aspects include rounded corners and box-level drop and inner shadows. It also makes liberal use of the web font service TypeKit, for a fun, unique look.
In addition to the front-end changes, I also made some small enhancements to the back end. Behind some of the pages is a small, custom Content Management System to allow the deli's owner to update certain aspects of the site, such as the menu or specials. The client wanted another announcement section on the front page, so I added that to the existing CMS.
When I first started freelancing, I decided to operate under a business name. From this original idea, Gray Wolf Web was born. I wanted something simple, yet elegant, that reflected the name and my ideas.
When I developed the site, I was just learning about the ability in CSS to use web fonts. It was my first usage of web fonts, using the @font-face directive, directly (as opposed to going through such channels as TypeKit). I also later added box-level drop shadows to help alleviate the "flat" look I felt it had.
In addition to the site itself, I had also designed a logo and business card, so that I could better market my services.