Hands on with Vue.js for Touchscreens

Workshop - register now

Ian Callahan, Harvard Art Museums, USA

The Harvard Art Museums has been deploying touchscreens built using web technologies since we reopened in 2014. While the content varied for each exhibition, each implementation was a structurally similar presentation of a handful of videos, text, and images. Incorporating those assets into each project was simply a matter of editing an existing template by hand and making the appropriate tweaks to the visual presentation.

The content demands of a recent exhibition included pictures, video and 3D renderings, as well as tombstone information and map locations, for more than 30 objects. The change in scale and structure rendered our established approach to touchscreens tedious and frustrating. We needed a new approach, so we built one that could:

incorporate an ad hoc collection of data that originated in a less-than-tidy set of spreadsheets
accommodate frequent – and last-minute – edits without frustration
run locally on a PC using nothing but Chrome, with or without an internet connection

In this workshop, we’ll cover using JSON for aggregation of ad hoc data, an introduction to declarative javascript framework Vue.js, and deployment workflows for managing your in-gallery touchscreen interactives with minimal cost and fuss using commodity hardware and Git/GitHub.