Author: jhr360

For our final project, I had the idea of creating an interactive catcalling website because I felt that, with the JavaScript features we learned, catcalling would translate well into a web-based medium. Catcalling is a widespread form of street harassment that plagues metropolitan areas, though it is not uncommon in less urban areas as well. Catcalling is mostly done toward women by men, though there are cases of the reverse. 

• Design

The project only features one page and contains information about catcalling, such as a definition, the prevalence among different countries, why it is important to bring attention to it, the effects it has on the individual and society, and resources for further reading. There is also an embedded Twitter feed of curated tweets concerning catcalling, including firsthand accounts by victims. The page is meant to be informative and the aim is to educate the reader on catcalling and street harassment.

Another feature of the page is the interruptions, or the ways in which the webpage catcalls the user. Upon opening the webpage, the website wolf-whistles at you. This is what makes the website more effective:

The reader is meant to be interrupted by this alert every five seconds, which is both annoying and persistent, reflecting the nature of catcalling in real life. Not only this, but we also placed misleading links that are meant to enhance the interactive catcalling aspect:

 

The link contained herein leads to a video about catcalling.

Once the viewer reaches the bottom of the page, a popup shows up containing a video featuring women telling their experiences of being catcalled.

• Process

We began by compiling the information we would feature on the website. This process was simple enough due to the plethora of information and accounts on catcalling on the Internet. We wanted to make the layout simple and streamlined, but also aesthetically pleasing. We split the work between the two of us such that I would handle CSS and styling while Taylah handled the JavaScript interactions.

I believe the components of the project all worked well together, namely design and user interaction, though due to time constraints I feel that the page is rather simplistic and could use more interactions or visuals rather than just text on a page. While doing this project, I learned how to implement Twitter feeds using Twitter’s TweetDeck functions, which allow a user to compile tweets into collections that could then be translated into source code to feature on websites. I was also able to strengthen my CSS skills through this project. 

• Future
  Taking into account criticism from the class and critics, if we had more time I would’ve liked to create visuals on my own rather than sourcing them from the Internet. More visuals, such as a map infographic, would’ve improved the page since many people felt the page looked too Wikipedia-esque. More interruptions on the webpage would be more interesting and conducive to the user experience, and if given more time, we would have liked to include more varied interruptions, such as audio and different types of popups. 

A. Concept

For the final project, I will be working with Taylah on an interactive catcalling website. Catcalling is a social phenomenon in which sexually suggestive remarks are made toward a stranger on the street and is a form of sexual harassment. It is an unfortunately common phenomenon that many will find relatable and we hope to bring light to its nature as an epidemic, especially in large cities like New York City. I figured catcalling, which is invasive in nature, would translate well into a website through the use of different web features, such as popups, deceptive links, and autoplay audio.

B. Sources

One artist of significance in this project is the creators of the “Carbon Budget” by World Resource Institute. This is an example of an infographic that is clear, concise and informative. It presents relevant information in an easily readable format with a color display that is calming for the reader. This relates to the desired format of the website to provide information to the readers about Catcalling in a simple, easy to follow format. This also allows us to manipulate the remainder of the space (next to the infographic) to include distractions.  

http://i-cdn.embed.ly/1/display?key=fd92ebbc52fc43fb98f69e50e7893c13&url=http%3A%2F%2Fwww.wri.org%2Fsites%2Fdefault%2Ffiles%2FWRI13-IPCCinfographic-FINAL_web.png

Another website that is a source of inspiration is that of recording artist Solange, whose site includes minimal text and many photographs. The layout of the website is visually appealing and engrossing, and if we adapt this style, we would then distract the user enough to be startled by an interruption.

https://blackplanet.com/solange/

C. Production

To accomplish this project, we will utilize various media such as audio, video, and other visuals that will engage the user and engross them. Using the alert function on JavaScript, we would interrupt the viewer’s experience on the website. Other interruptions include scroll-triggered audio of actual catcalls, popups that appear multiple times when links are clicked, amongst other things. The website will contain information about catcalling including narratives involving catcalling sourced from the Internet. The webpage will be scroll-centric in that the beginning of the page might be some innocuous, everyday subject that has nothing to do with catcalling, though the user gets interrupted anyway, effectively translating the experience of being catcalled in real life. At the bottom of the site, information and testimonials of people’s catcalling experiences will be included, as well as movie/television clips that depict catcalling.  

https://www.sbnation.com/a/17776-football/chapter-1

this Internet art project, titled “What football will look like in 17776,” is the story of a planetary space probe. I chose it because it incorporates different types of media and goes with the theme of technology and sentience, which we explored a bit at the beginning of the semester.

http://imanas.shanghai.nyu.edu/~jc8017/VideoWebsite/index.html

For our video project, I suggested we make a film adaptation of one of my favorite short stories, “Carnation, Lily, Lily Rose” by Kelly Link. The narrative is rather dark and abstract, which would allow us a lot of wiggle room in terms of editing. We decided to have Taylah act in all three scenes since there is only one character, though we each chose three different scenes from the story to adapt and edit on our own. 

I took care of the second video, which follows our main character as he begins to question his surroundings. As such, I edited my scenes using different filter and effect options:

  

While editing, I wanted each edit to convey a different feeling within the viewer, as this is a highly interpretive and abstract narrative that the viewer is free to analyze however they like. Each different rendition is meant to tell the same story with a slightly different feeling.

To make this interactive, Justin added the feature to toggle between each filter on the website.

As far as filming goes, we definitely had issues due to a lack of resources, such as a dolly for cellphones. Some of our shots were shaky because we did them by hand, and due to time constraints, we did not think it necessary to attend an info session in order to borrow a dolly from IMA.

In terms of my editing, the project met my goals and I learned more about Premiere Pro. There were some effects I had in mind that I couldn’t figure out how to execute, such as an overlaid video of handwritten text appearing over the scene, so I scrapped that idea. Over the course of this module, I learned much about filmography and more features of Premiere, which I have used previously but I am far from an expert. Overall, I’m satisfied with how it turned out. 

URL: https://imanas.shanghai.nyu.edu/~jhr360/audioproject/index.html

For our audio project, Kat and I delegated the work between us such that I worked on the web design while Kat designed the audio. We decided on recording a reading of a poem, “Biography of Southern Rain” by Kenneth Patchen, which Kat then distorted and added other atmospheric sound bytes.

Because our main focus was the audio, I decided to design the website to complement the content of the audio and made the background a gif from the film Garden of Words, which heavily uses rain as a symbol. Since the background and the player are gifs, I decided not to include an author’s bio, as that would have been more distraction from the audio, and I felt that there wasn’t anything more that could add to the website, other than subtitles.

I initially had trouble with the subtitles not appearing, but I was eventually able to resolve my issues. I used the in-class exercises for coding reference.

I wanted to have the background be multiple images that would transition into one another, but I couldn’t find a solution that I understood with my current coding knowledge and decided not to pursue this.

Through this project, I was able to design a website, which I hadn’t done since before the comic project, as I’d been working on content then. I also designed the player in Photoshop and drew the gifs, and it was satisfying to see something I created functioning properly.