The CIS Sandbox has been very fortunate to have a lot of digital signage here at Bentley’s Smith Academic Technology Center in the form of 4 Google TVs. However, we were displaying a site that was hardly optimized for a desktop, let alone a mobile phone or TV. Fortunately, WordPress, the website platform that we use, is very flexible if you know how to code it correctly.
A few months ago, I optimized the site to be adaptive, meaning that it changes shape based on the screen that used it. However, this is really only useful if we want to show the whole website on the display. However, these signs don’t serve the same purpose as our website. Our website lets people know where we are, serves up blog posts, allows people to connect to tutors, and shows what’s coming up. However, the signage really needs to show what’s going on now, and who is available to help you. Much like the website, the signage is also important during the winter months, because our alert banner allows us to tell the world whether or not we are open before entering the room.
So, I decided to prototype a sign layout for the site to display on the Google TVs. It took some fidgeting with the content we already had to come up with something that worked a little better:
This whole new template focuses on letting you know what’s going on in “real” time. Each TV actually updates every hour thanks to a simple JS script, and pulls down the most recent version of the sign to show visitors. In the sandbox itself, we have a tutor queue, which was previously only taking up a small portion of the screen, so I coded a split screen to show upcoming events along with who is waiting in line for tutoring help.
So, what exactly did I use for technology to make this happen? Well, the site is coded in PHP, using WordPress as a content management system. The layout is created in CSS3, and of course it exists because of HTML5. WordPress allows our staff to make changes to the page online, without having to touch code, whether it’s changing the color of the boxes, adding widgets or writing content. The animations on the site are all through JavaScript, specifically the jQuery library.