Project Highlights

Interactive Deep-Zoom Image (DZI) Batch Image Processor and Gallery

I recently built a custom PHP- and mySQL-based WordPress automation system for batch image processing and deep-zoom image creation (DZI). Click here to see it in action.
Using open-source JavaScript libraries in the front-end to guide visitors on a pleasing journey through the thousands of images in the collections, this responsive solution also simultaneously automates custom SQL INSERT statements, adding 1,000s of hi-resolution TIF & JPG image records to a database all at once.

in Databases & PHP, Historic Preservation, Interactive, Project Highlights, UI and UX  

Gonzaga College High School Archives

I was part of a select team granted access to the archives of Gonzaga College High School in Washington DC, to organize and evaluate the school’s large and historic collections and artifacts. Dating to 1821, the archives include relics and remnants of Gonzaga, Notre Dame Academy, St. Aloysius Parish, the Swampoodle and Sursum Corda neighborhoods and old Washington DC before, during and after the Civil War.

in Historic Preservation, Project Highlights  

Design, Content Portability & the Information Hierarchy

There are many ways to say the same thing. I designed and coded these examples for my students to demonstrate the idea of “portability of content”, to get them thinking about the information hierarchy and simultaneous uses of data in layout design. For each design, there are the same 7 sections in the information hierarchy. The HTML in each of these designs is 100% the same – all that changes is the CSS.

in CSS, Graphic Design, Photoshop, Project Highlights, Teaching, Typography  

Interactive Temporal Map, Family Journeys, 1730 – 1960

Part of a multimedia genealogy project, this interactive temporal map shows residence and migration patterns of ancestors from Europe in the 1730s to America starting in the 1820s.

in Databases & PHP, Genealogy, Interactive, JavaScript, Maps, Project Highlights  

Interactive Map: Ireland 1850 Census > Family Households by Parish

This interactive map shows where people of specific surnames lived in Ireland in the 19th century, according to parish records. I scraped a static dataset from the Irish Times website, and built a much more interesting way to view the same information, with additional insights provided by clustering of semi-opaque colored markers. The dataset has 4 pieces of information: latitude, longitude, name of parish and number of family surnames in that parish.

in Databases & PHP, Genealogy, Graphic Design, Interactive, JavaScript, Maps, Project Highlights  

Interactive MP3 Player With Animated SVG Kaleidoscopic Logo

I digitized my great-grandfather’s 78rpm Victrola records dating back a hundred years or more. I then built this HTML5 mp3 player combining CSS3 transformations & custom JavaScript to create a beautiful experimental kaleidoscopic SVG-animated logo.

in Animation, CSS, Databases & PHP, Experiment, Genealogy, Graphic Design, Historic Preservation, Interactive, JavaScript, Project Highlights, SVG, UI and UX  

Interactive Fact Sheet with Dynamic Data

A PHP plugin experiment I wrote for generating interactive charts and graphs as well as formatted content, notes & sources. It uses custom WordPress, JavaScript, Bootstrap, PHP, mySQL & HighCharts. It’s a nice typographical treatment, and the information hierarchy is just right.

in Charts and Graphs, Databases & PHP, Graphic Design, High Charts, Interactive, JavaScript, Project Highlights, SVG, UI and UX  

Interactive Rubik’s Cube: Maps of Old Washington DC

I used a collection of old maps of Washington DC for this Rubiks Cube code experiment from Google Chrome Labs. It would seem to make the game exponentially harder, especially if one does not know old Washington DC.

in Graphic Design, Interactive, Maps, Project Highlights  

Interactive: Image Gallery Photowall

Inspired by the fireflies in my backyard, this experimental responsive gallery uses JavaScript; AJAX & Bootstrap to serve up samples of my photography. Picture this as a very large horizontal or vertical interactive screen, with all content animating in the DOM, where you can filter and interact with it.

in Databases & PHP, Experiment, Graphic Design, Project Highlights, UI and UX  

Interactive Genealogy Exhibition & Archives

This is a feature-rich genealogy framework w/interactive family trees; digital maps; galleries; timelines; 8mm home movies; restored 78s; census records; manifests; detailed research, and much more. This high-end secure CMS solution uses the latest and greatest, scales to any size (screen, data-set and audience) and is entertaining and educational.

in Databases & PHP, Graphic Design, Historic Preservation, Interactive, Photoshop, Project Highlights  

JavaScript Count-Down Timer with Full Page Map

Happy 150th Birthday, Cornelius J. Carmody!My great grandfather had his sesquicentennial birthday recently, so I whipped up this interactive prototype as part of my genealogy museum project. It features Javascript, PHP, mySQL, CSS3 and Google Maps APIv3.

in Graphic Design, Interactive, Maps, Project Highlights, UI and UX  

Interactive Map Tour of Tenleytown, DC

This interactive map tour through historic Tenleytown in Washington, DC uses ESRI and ArcGIS to serve up a responsive, educational map of razed residences and stores.

in Historic Preservation, Interactive, Maps, Project Highlights  

HTML5 JS Animation w/Greensock GSAP + CSS3 Transforms

This 30-second animation uses a suite of animation tools + custom scripting to tell a story with dynamic database-driven content. This uses JavaScript, Greensock GSAP, CSS3, PHP, mySQL, jQuery UI and HTML5. No Flash.

in Animation, Graphic Design, Interactive, Project Highlights, UI and UX  

Introduction to Obsolete Media

Intro to a lecture for an Art History class I taught at the Corcoran College of Art + Design: Digital Media Culture. I put together coverage of the 1937 Hindenburg disaster using obsolete media to fuel the discussion: “How will we communicate 75 years from now? To what extent will contemporary modern media be extant then?”

in Original Video, Project Highlights, Teaching  

Audio Wave-Form Animation

It can be a real pain to get live wave forms in a multimedia project. Creative custom programming, however, simplifies things quite a bit. For this project highlighting the music I’ve written and performed over the years, I used Adobe After Effects + Flash ActionScript3 programming to create the live wave form animations. This song and the others on this site all use this function.

in Databases & PHP, Experiment, Graphic Design, Project Highlights, UI and UX  

Print to Web Experiments: Future-Proof Solutions

A big part of teaching emergent communication (and programming) to college design majors is getting the students comfortable with the new paradigm that virtually all future design will be executed by code. They have to learn basic programming skills at the very least to be competitive. These screenshots are from work I designed and executed for class lectures toward that end: I took print ads, album covers and book covers and reproduced them with HTML5, jQuery and CSS3. Then the students created their own fully-coded versions, recycling dying media into future-proof solutions.

in CSS, Graphic Design, Interactive, Photoshop, Project Highlights, Teaching  

How To Watch Sound

I remixed & animated this classic rock song for one of the New Media Photojournalism graduate classes I taught at the Corcoran College of Art + Design. The idea was to introduce people to observing sound with their eyes, not their ears.

in Original Video, Project Highlights, Teaching