Hello, I m Ryan Huber. I m currently the lead web developer and designer for a small team at Vanderbilt University.

Transcription

1 Hello, I m Ryan Huber. I m currently the lead web developer and designer for a small team at Vanderbilt University. I value creative, thoughtful, elegant, and accessible solutions to challenges and I m passionate about using technology to enhance our lives. TABLE OF CONTENTS 3... Vanderbilt University School of Medicine Homepage and Barista 8... RegisterYourTeam.org Web Application Out & About Nashville Website 9... LifeFlight Live ios Application Vanderbilt University Medical Center and Vanderbilt Health Websites Pedipalp Imaging Junior Research Project

2 Vanderbilt University School of Medicine Website Design and Development PROJECT RESPONSIBILITIES Lead design and development of a new website for the Vanderbilt University School of Medicine including performing needs analysis, generating mock-ups, soliciting feedback, generating design iterations and final design, coding of all server-side custom features, and the implementation of the design in responsive HTML5 + CSS + Javascript. Additionally, our team needed a platform that could easily handle hundreds of sites for departments, offices, labs, and other entities while maintaining visual consistency and accessibility. The platform needed to enable intuitive site management tools for non-technical users. I designed and developed a custom distribution of Drupal. TECHNOLOGIES USED The sites consist of responsive, standards based HTML5, CSS, and Javascript that is output using a bespoke distribution of Drupal we named Barista. Barista includes a number of custom modules written in PHP + Javascript. ACKNOWLEDGMENTS Our team consisted of myself, our department s director, a server administrator, and two content specialists. Photography was provided by Vanderbilt University Creative Services. Most written content was provided by the content producers on our team. Third party components in use include Bootstrap, jquery, Flexslider, Font Awesome, HTML5 Shim, Respond.js, and a number of community contributed Drupal modules.

3 medschool.vanderbilt.edu Detail of the School of Medicine website homepage. The site employs a responsive design so that it adjusts to accommodate to the user s display.

4 Detail of megamenu navigation. I needed to design an interface that would accommodate a complex hierarchical navigation structure. I chose a click-activated split menu pattern, which is easier to manipulate for less precise mouse users and touch users. The vertical tabs are used sparingly, but provide a useful way to get users to their destination quickly without overwhelming them with extremely lengthy menus. The active tab is defaulted based on our analysis of traffic patterns prospective MD students are the largest audience. The Departments & Centers navigation uses jquery and a custom web service to pull accurate data from an institutional directory.

5 Detail of Barista administration tools. Our chosen content management platform, Drupal, is powerful and flexible, but is hindered by usability issues. I created over thirty custom-written modules, along with the public-facing and administrative themes, which carefully and extensively modify core Drupal to enhance its usability and provide added functionality. There are, for example, modules that enable input and formatting for people directories, simplify the process of password protecting content, facilitate importing publication lists from PubMed, and modify the Drupal block management paradigm to make it vastly more intuitive.

6 Assorted sites utilizing our custom Drupal distribution, Barista. Over two hundred websites are powered by Barista, ranging from small laboratory websites to extremely large departmental sites, and even the homepage. Barista enables a very small team to support a large number of content editors, many with limited technical experience. Users have a large amount of point-and-click control over the look of their site, but every site inherits careful design considerations, accessibility optimizations, and layouts that respond to available screen size.

7 REGISTERYOURTEAM.ORG I am very involved as a volunteer for Destination Imagination, a creative problem solving program for students. I conceived, designed, and developed a responsive web application designed to simplify a relatively complex team registration process that was previously paper-based. It includes mechanisms for electronic payment and a variety of tournament management tools. The site consists of responsive, standards based HTML5 + CSS + Javascript with a PHP back-end that uses the CodeIgniter framework. The tool is used to register hundreds of teams for tournaments in several states. Photography / videography was provided by Destination Imagination. A number of third party components are used, namely Bootstrap and jquery. OUT & ABOUT NASHVILLE WEBSITE Out & About Nashville is a local gay, lesbian, bisexual, and transgender focused publication that has been around for over a decade. I designed and developed a responsive website for them, with Drupal + several custom modules as a back-end. I imported thousands of articles into the new system from their legacy platform.

8 LifeFlight Live Mobile App Design and Development PROJECT RESPONSIBILITIES Solely responsible for the design and development of a novel application and back-end for the air medical service at Vanderbilt University Medical Center. The application allowed users to listen to the radio communication between helicopters and emergency medical service on the ground. TECHNOLOGIES USED The application was created in Appcelerator Titanium Studio using JavaScript and HTML5, then compiled as a native ios application. I set up an Ubuntu-based encoding server with multiple audio cards, which I connected to a mixing board. The board provided both individual audio feeds and a mix-down of all audio feeds. A streaming server rebroadcast the audio, which was then consumed by the application itself. ACKNOWLEDGMENTS Electronic Highway Sign font by Tom Oetken. LifeFlight wings logo by Vanderbilt Creative Services. Icons from assorted sources. The iphone image pictured here around the app itself is based on a design by Uriel Albarran O.

9 VANDERBILT UNIVERSITY MEDICAL CENTER & VANDERBILT HEALTH WEBSITES While on the web team for Vanderbilt University Medical Center Marketing, we were tasked with redesigning the web presence for the Medical Center. We split the site into a new site for patients and a site for staff and faculty. I was responsible for generating mock-ups and interactive prototypes, as well as working with leadership on content organization. I created the HTML and JavaScript for the templates and implemented them in our custom content management system. Additionally, I created back-end tools to help manage parts of the homepage content (e.g., an institutional directory management tool, a physician directory.) Photos courtesy Vanderbilt Photography Services. PEDIPALP IMAGING JUNIOR RESEARCH PROJECT I was tasked with photographing the pedipalps of a variety of species of wolf spiders to aid in classification. The morphology of pedipalps is significant in their function but quite difficult to capture with a light microscope because of the limited depth of field at high magnification. I designed a process of merging multiple photos taken at various levels of focus resulting in the most clear images of palp structure and interconnectedness available. Additionally, I developed a method for capturing interactive 3D images of palps. My research was completed under the advisement of Dr. Gail Straton. Comparison of palps in Geolycosa wolf spiders: development of affordable methods for 3D imaging using light microscopy was presented at the 2004 Sigma Xi Student Research Poster Competition. This project was significant for me, because it was informed by three of my passions: the natural world, visual design, and technology.