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 small 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 Gonzaga’s start in 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. This database-driven solution is built with CartoDB, Leaflet, Google WSK, PHP, mySQL, JavaScript, JSON & CSV.

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 and remastered a collection of my great-grandfather’s 78rpm Victrola records, many of which date back a hundred years or more. I then built this mp3 player which features CSS3 transformations and custom JavaScript combining to create a beautiful experimental kaleidoscopic SVG-animated logo. Refresh the page to see subtle variations in the pattern.

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

This project is part of a PHP plugin experiment I wrote for generating interactive charts and graphs as well as formatted content, notes & sources on the fly. It uses custom JavaScript, Bootstrap, PHP, mySQL & HighCharts. The idea was to create a flexible mechanism for displaying multiple types of dynamic data from .JSON and .CSV files in a small amount of screen real estate. Plus 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; Isotope & 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 web app w/interactive family trees; digital maps; galleries; timelines; digitized 8mm home movies; restored 78rpm records; national & regional census records; ship manifests; detailed research findings, 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. It ports simultaneously to a smart phone and a smart surface, making it ideal for interactive exhibitions.

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!

One of my great grandfathers had his sesquicentennial birthday recently, so I whipped up this interactive prototype as part of my family genealogy project, to share with relatives and others.The back-end pulls out the personal data, then the front-end creates a full-screen map centered on the person’s home town, while a count-down timer animates to the scheduled event.This responsive solution uses 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  

(Real) Books Read: Dynamic literary charts & lists

Proof of concept interactive dashboard w/a single dataset to display statistics of the last several years’ worth of completed books. Not only does it give insight into reading habits over time, it features a sleek & responsive UI with a color-coded filtering system to see subsets of the data, all happening live in the DOM. It is custom-built with Bootstrap3, mySQL, PHP, jQuery, Isotope, CSS3, HighCharts, HighStocks, and miscellaneous JavaScript libraries.

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

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  

Responsive Audio + Video Player

Did you know that I used to be a songwriter & musician? Here I am using Isotope, Bootstrap, jQuery, PHP, mySQL, CSS3 and the Vimeo API to serve up my original music and video projects with a modern, responsive typographic UI.

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

UI & PHP Experiments: Communication Design Articles

I built a simple CMS to store articles or tutorials that tie into my client work, the college courses I teach and the web projects I build (web design & development; information design; UI/UX; typography; JavaScript; audio & video editing, etc.) The following are examples of the same mySQL dataset being used to simultaneously populate 3 completely different UI design patterns (the ‘Resourcrs’ page is a 4th.) As soon as a new record is added to the database, they all update.

in CSS, Databases & PHP, Graphic Design, Photoshop, Project Highlights, Teaching, UI and UX  

eTheRealMcCoy

This responsive design was a promo for a music & video project I created.

in Databases & PHP, Experiment, Graphic Design, Project Highlights, Typography  

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. 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 + ActionScript3 programming to create the live wave form animations.

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

Big List of Resources

I archive pertinent articles which tie into the web projects I build, the college and university courses I teach and the lecture audiences I address. This includes – but is not limied to – web design & development; information design; UI/UX; typography; JavaScript; audio & video editing, etc. These are the 100 most recent articles – click a link to see the article, or click a header to see all articles by that category. This list is updated often.

in Databases & PHP, Project Highlights, Resource  

RSS Content Aggregator Carousel

This proof-of-concept custom feed reader consumes live RSS feeds from different external sites by category (web design; typography; JavaScript; audio editing, etc.) Once any of those sites is updated, so too will this agregator update, automatically. Some categories load fast; some, such as web design, are loading in content from 20+ sites, so they might take an extra moment. It’s 100% custom built with PHP, mySQL, simplePie, JavaScript, Bootstrap, LESS & jQuery.

in CSS, Databases & PHP, Graphic Design, Project Highlights, Teaching, 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 Animation, Original Video, Project Highlights, Teaching