Dornsife Spokane Mural Website
This project was done for an Internet Applications Development class in January of 2022. For the project, we were given two weeks to complete a web-based project paired with a non-profit from the Spokane area. My group was paired with our university's community engagement center to help them create a website featuring artwork of the greater Spokane area as well as interactivity throughout the photo to enable viewers to learn more about each part of Spokane that was portrayed.
We began our process by interviewing the main commissioners from of the organization to determine expectations. We then created a simple mockup of the site on both mobile and web. It was important that we make the website mobile-friendly because people were mainly going to be accessing it through a QR code near the physical location of the mural. We decided that due to the unique and solitary function of the site we would "hard-code" it using HTML, CSS, and JavaScript.
Our site features a function that, when a pin is clicked, the text at the bottom changes based on which location was chosen. We completed this by placing pins at certain coordinates on the photo itself and tagging each pin with the location it was over. We then created the section for each of the text with two different types of section tags to differentiate hidden and shown sections. When the user interacts with a certain pin, the JavaScript code changes the tag value of the associated text to "shown", which in turn changes the actual text shown at the bottom section of the screen.
A challenge we faced when making the site mobile-friendly was the size of the image. We debated making the user change their own screen orientation to landscape, but decided instead to use media query to determine the size of the screen and change the orientation accordingly. Currently, if a user goes onto the site on mobile, the will be able to scroll the image side-to-side and the bottom text up and down in order to view the content of the entire page.
