Homework 15. 1. Final Project: Ode to the Strap Hangers

May 07, 2018

Homework 15. 1. Final Project: Ode to the Strap Hangers

***

The dice roll for my final project yielded "digital drawing and painting," "graphic/fashion design," and "mapping" as sources of inspiration and process, which lead me to think about drawings that I have been doing lately on the subway. I knew that I wanted to incorporate these drawings into this project in some way, and began to formulate ideas about how this might inform my project as a whole.

I came up with the idea of digitally mapping my drawings (which I refreshed with digital drawing and painting) onto a New York City subway map. Through the design of the layout and the text, the work I did on Photoshop, and the use of the layout of the New York Subway, I felt as though this idea not only creatively implemented each of the prompts that I rolled with the dice, but also allowed me to explore my own work in new ways, transforming it from the traditional to the digital. Through the evolution of this project, I ultimately wanted to create a clickable map that would allow the viewer to select different points along the subway routes and access the different drawings; I eventually decided that I wanted this map to be online, which added an element of coding to this project as well.

I felt that I was easily able to incorporate my first three ideas into my project. I am well-familiar with photoshop and graphic design, and the idea of mapping elegantly linked to a subject that I was already deeply interested in. However, the intent to develop a website for this project proved far more difficult than I had anticipated. Despite having almost no experience with HTML coding (or CSS coding, or JavaScript...), the fact that I had such a clear idea of what I wanted to do made me extremely confident that I could simply look up a few tutorials and easily master just enough code to be successful. I was wrong.

This element of my final project was extremely challenging. I wanted to give up, a lot of times. There were several times that I felt as though I had hit a wall, that I felt as though the situation were hopeless, even as I asked for help from both the internet and others around me! I began by downloading a free trial of Adobe Dreamweaver, which I found to be a remarkable program that was incredibly intuitive once you got used to the interface and had a basic understanding of what was going on, though I definitely struggled at first to get anywhere. Lacking the language to articulate what exactly it was that I was trying to do, I was effectively stuck trying to blindly find my way through the program from scratch.

It probably would have been easier for me to change my idea and simply work with an existing template in a program like Wix or Wordpress, or even Blogger. However, I was dead set on the fact that I knew exactly what I wanted to do; it seemed like such a simple idea, and it worked so effectively with the content of my piece! Surely there was a way to do it myself, in exactly the way that I wanted it done.

After counseling several different people, I was eventually told that what I was effectively trying to do was to create an Image Map. That evening, I went home and looked up several tutorials on image mapping in Dreamweaver. Image mapping, I found, has gone out of style over the past ten years or so, and the most recent videos that I was able to find were from the late aughts or early 2010's. Still, I eventually got it to work, and was able to create a fully functional image map on my own computer! When I previewed the page in Google Chrome, it also worked!! However, all of the code that I generated was still not online, and this proved to present even greater hurdles for me.

I did not want to pay for a hosting service, and had been told about a free hosting platform called GitHub that would allow you to upload your code and create your own website for free, as long as the code was open sourced. GitHub, however, is fairly bare-bones, and offers little direction to those who don't know what they're doing, like me. When I tried to upload my code, I found that the website was absolutely not working, for several reasons. I won't take you through all of the mistakes that I made throughout this process, but there were many of them. The most notable mistake was that I had not uploaded any of my files to GitHub, but was instead instructing my code to link to paths directly on my desktop, which, obviously, is completely ineffective for the purpose of a website. This is why the website worked when I previewed it from Dreamweaver on my own computer, but completely failed to work when I checked the url. Eventually, through a lot of reading and some communication with GitHub's customer service department, I figured out how to upload my files and reconfigure the paths to them.

When my website first worked properly, I think I cried a little bit. I had never before created my own website before, and I had struggled so much with this one that I had been absolutely convinced that it would never work. However, I persevered, and it eventually did work, exactly the way I wanted it to! This project was an unbelievable learning experience for me. I still am not a master at code, nor am I a master at GitHub, or technology in general. I can say, though, that I now know a little bit about how it all works. I am now far more comfortable embarking on a project like this, and would even encourage my students to do the same, perhaps with a little more support and prior learning than I had. Overall, this was possibly the most intimidated and the most frustrated I have ever been by a material. I don't think I have ever before had a moment like I had during this project, where I simply was convinced that I could not do it. However, I eventually learned that I indeed could do it, and it was so unbelievably satisfying. I am proud of this project. I did it. Check out my website; I made it myself!

https://stephanieoniffrey.github.io/

Process Photos:

I began by scanning all of my drawings onto my computer and uploading them into Photoshop, where I edited them and added color.

I then edited my map in Photoshop, adding text and "buttons" before image mapping it in Dreamweaver. This sounds simple now....but it took me a long time.

The original code that I generated linked paths to images that were directly in a folder in my desktop. The preview worked, but in actuality, the code was ineffective.