Final Interactive Web Page

Interactive Web Page Documentation:

Link to webpage:

Group: Ivan and Julie
Documentation by: Julie Huang

Description of Webpage:
Our webpage consists of a main page, a 2nd main page, and 4 subpages. Our first main page resembles the older Windows XP computer, but once you click on the file in the middle of the page, it leads you to the 2nd main page that resembles a more modern day, punk rock type feel page. Within the 2nd main page, there are 4 important figure to the technology industry that we chose to display and explain their life story and accomplishments/impacts on the world they have had. If you click on one of the women, it leads you to a separate, individualized page of them.

Ivan and I had a difficult time and we jumped around from idea to idea until we landed on the idea of cyberfeminism. Initially, we had coded the 2nd main page to be our main page, but found it difficult to keep in theme with our 4 sub pages. So we decided to start from scratch again and create a completely new webpage: our main page.

Our 2nd main page consists of a lot of gifs and has an added autoplay song. We have the borders around the 4 women change and the mouse pointer turn into a question to indicate the user should press on this picture.

Our 4 sub pages consists of many transparent png images. We used a lot of source replacement images to create popups and to hover to change pictures. Some pages also have added in videos and audio.

We ended up coding the main page last. We used source replacement for the works cited and positioned the wording manually.


We ran into a number of issues throughout our coding and resource finding process. The first was deciding what idea our webpage was to be. We kept jumping back and forth with different type of websites, but we ended up sticking to the one we first talked about.

When we coded the 2nd main page, we struggled to put the flashy border behind the pictures and have them change, but once we figured that out we were able to finish our page. There was also a lot of formatting on all these pages with % and px so that took a lot of effort to figure out.

On the 4 sub pages, we wanted to create a horizontally scrolling page, but using that function it would only scroll by the arrow keys, so we instead we decided to be innovative and place a very big width transparent picture at the bottom of the pages (and it worked!) We also tried to make popups when you click on a sticker, but the format we wanted the popups weren’t the style we wanted, so we instead created a transparent dot and had the image be replaced by a externally styled popup when the user clicked on the sticker.

Lastly, when we uploaded everything to Cyberduck, our functions didn’t work. It took a while to debug, since it was working locally. Initially, we thought it was an error of a misspelled video, but it was actually the src = function that had an invisible letter in between that was caused from a different language keyboard. So we had to re-upload to cyberduck and change the links in our main page.

If I could change anything, I would try and format everything in percentages to make the formatting universally the same on all computers. In addition, I would also try more to personalize the individual pages and use the same fonts for all the women just to make the page go together more.

Overall, I had a great time working together with Ivan and I feel like I’ve learned a lot through this project. Even though there were struggles, and things didn’t go the ideal way, we made it work and I am proud of this webpage.

Week 11: Response to Greene (Leon & Nimrah)

Response to Greene:

In this article, the author deliberates the topic of “” and its origin and technological evolution throughout the many years. Before taking this class, I wasn’t really sure how to sum up what we were doing, but after reading this article, I gained a lot of clarity on what we were learning and creating. Online media projects are becoming more and more prevalent in our modern day lives, and the internet has really become our medium we carry out our lives on, however no one expected this would happen. Due to the ability to be accessed from locations all over the world and convenience, projects like these have risen in popularity and spread like a wildfire within the internet family. Greene talks about how many of the “” artists do their work purely for themselves, rather than for profit. This lead into the idea Greene deliberates on cyberfeminism. “” allowed a more open path for the expression of empowered female technologists. Because the web is a medium anyone can use, more females were able to show to the world their strong abilities and challenge their male counterparts and stereotypes.

When we think of this topic, it is important to understand with benefits, there are also disadvantages. For example, Greene mentions how big companies were almost able to take advantage of “”‘s technological advances and push forward their agenda, without regard to smaller companies that rely on the ability to be seen through the internet and gain awareness. The digital economy, like the rest of economy, once again is dominated by big corporations who try to push out and steal smaller business consumers. I see this when I just search something on Google, and the first website that pops up is usually an AD that is of a large corporation, altering the users view and influencing them to click on their website rather than another.

Week 11: Final Interactive Web Project Proposal

Group members: Ivan and Julie


After a lot of discussion and throwing around of ideas, Ivan and I came up with the idea of creating an interactive website that educates its users about important female figures and their contribution of ideas in the creation and evolution of the internet. We plan to discuss the term ‘cyberfeminism’ and have 5 important figures in the technology industry that has made a difference in the way the internet has grown to be today. We also plan to have a separate linked page of an inspiration letter to all women, along with 3 interviews of women who are currently in the track of either computer science, ima, and data science. More information to come.

Week 10: Response to Paul Rand (Leon & Nimrah)

Response to Rand:

One thing Rand mentions that really interested me was his idea of “the tool of the future”. In current society, it seems to be that of the computer. Rand compares the computer with art, and from there he brings up many intriguing ideas. Rand believes the computer has created almost like a block between the mind and the hand. People no longer use their hands to produce work, nowadays it is all through the computer. When we use the computer, I realize I don’t even think about how to use my fingers when I type, it just comes automatically without a second thought. This is the same case with my smartphone, when I type a message I don’t even have to look at the keyboard anymore to send a text. It is like my mind has memorized the keyboard and I don’t have to think about it. However, this phenomenon leads to the decrease of one’s individuality because of its convenience and widespread use. In our modern society, we rarely every write anything out, however our handwriting is a large part of our individuality. And now we don’t ever use it. Everything in our lives can be formatted through technology. Rather than letting the computer completely replace everything in our lives, we should perceive it as an enhancement to benefit our lives, like an updated, specialized pencil/brush.

Week 10: Response to Paul Graham (Leon & Nimrah)

Response to Graham:

After reading this guest lecture speech, I find myself more aware of some of the misconceptions people tend to make about technology and art. I thought it was interesting how Graham focused a lot on how many people perceive software and technology as a way to become trapped in a box with little to no creativity, however, everyone learns in different ways and approaches things differently. He mentioned how in college, he was taught to write code out on paper first, then transfer it to the computer. However, he learned that he wrote code in a different way. I think this speaks to and emphasizes how our society is continuously changing and growing to fit many different ways of learning.

Graham said, “We need a language that lets us scribble and smudge and smear, not a language where you have to sit with a teacup of types balanced on your knee and make polite conversation with a strict old aunt of a compiler.” This quote really stood out to me because I relate to it very much. I am the type of person with a jumble of ideas or ways to approach something, and try out a number of those numerous ideas or approaches before I reach the best one that fits me the best. However, I remember in high school, there were a few classes that were difficult because the teachers wanted problems done in one way and one way only because they thought it was the only correct way. Regardless if you got the correct answer in a different way, they still wouldn’t give you full credit because the problems wasn’t done “correctly” in their entitled way. Through this speech, I was able to better understand how with the change of society, individuality should strive to be unique.

Week 10: Interactive Video Project (Leon & Nimrah)

Video Project Documentation:

Link to Video Project:

Group: Adriano, Raza, and Julie
Documentation by: Julie Huang

Description of Webpage:
Our webpage consists of an initial page that directs the user to the first introductory video about a girl who keeps getting mysterious phone calls/messages and goes in search for detective help. After that video shows, the user is redirected to the main page which consists of 4 more videos as boxes. 3 of boxes contain videos that are clues and one box is left as a question mark, unable to be clicked on until the other 3 have already been watched. After you click on one of the boxes and watch that video, the box becomes black and white. Once the user has watched all 3 videos, they can then click on the question mark and watch the concluding video that explains the mystery.

Coming together to create a storyline was very difficult in the beginning and changed throughout our process a lot. We had initially started off with the idea of a murder mystery, however, we wanted to do something a little more lighthearted and came together on the idea of a mystery, but with a bit of a plot twist ending. We wrote out a script and prepared in advance with the details of how we wanted our scenes to play out, and that really helped us in the long run since we knew what we wanted to film. Once we figured out our final storyline, we made a plan of the places we wanted to shoot and what equipment we needed to create our videos.

We thought filming would only take about half the, but we ended up spending an entire day going around Shanghai to our locations to film: AB, Century park, Fake market, East Nanjing Road, and French Concession. Filming our scenes was probably on the difficult side of things. Because we were filming outdoors with a lot of external sounds, we had to use a shotgun/tascam to collect our audio in order for it to be of high quality.

Once we gathered all our videos/audios, we had to organize everything with folders and used Adobe Premiere to edit all our videos. Initially, Premiere seemed difficult to use, but once we got the hang of it, it was very convenient and nice to edit our videos with. We used the razor tool, speed function, and audio level functions a lot and switched out the camera audio and synchronized the video with our tascam recorded audio (this took a lot of time to match up exactly). We then added in transition effects and background music to fit our scenes.

As we were finalizing our video edits, we also were coding our sections. We created 5 divs, with section 1 as the introduction video, and section 2, 3, 4 as the clues, and section 5 as the final concluding video.

The filming aspect of this project was a lot more difficult than I perceived it to be. Since we rented out quite a lot of equipment and were filming all over Shanghai, we had to carry around all the heavy stuff. In addition, it was only the 3 of us filming the 3 of us, so in scenes where one person had to film the other 2 and needed the shotgun/tascam to be held as well, we found it difficult to manage that especially if we were moving. For example, in the Forever 21 video, it was only Adriano filming Raza and I and he had to film and carry the shotgun while following us around, which was very difficult to do, hence why the video was unfocused on the hair sample and the audio was not too clear. This was probably one of the most difficult filming aspect.

When we were editing our videos, it was very time consuming to exactly match up the tascam recorded audio with the video. Because the camera captured audio was not of high quality, we wanted to use the tascam to record audio. It was a bit difficult to do this, and we had to be patient, but in the end it turned out pretty well. Making the background music quieter in order to hear us speaking was an issue as well.

In the coding process, we initially had a white space where the question mark was, and only after the user clicked on the other 3 videos, would a picture appear for the user to click, however we decide to change that as it was not to aesthetically pleasing. It was a bit difficult to figure out how to not let the user click on the question mark, but we figured that out eventually with some help.

If I could change something, I would have tried to ask one more person to help us film so we could ensure our video and audio was of highest possible quality. If we had another person to help, we could have been able to ensure focus on the right moments and gotten clearer audio recordings.

Overall, I am proud of the work we did. Initially, our group had a difficult time working things out as we all have very strong personalities and are full of many different ideas, but we all came together and worked together very well. Both Adriano and Raza were of high spirits and we all just had a good, fun time throughout this project.

Week 8: Response to Walter Benjamin (Leon & Nimrah)

Response to Benjamin:

Reading this article really opened up the way I perceive films and works of art. The way our modern world perceives art is completely different from the way people perceived art in the past, and I think it greatly correlates with the way our society has formed and grown to be. Our society has set many unspoken standards and that greatly influences the way we see and interpret things. In his writing, Benjamin mentions something I found very intriguing: how art in modern times have lost its “aura”, or in other words lost its own originality and authenticity. If you think about it, every film typically has the same overarching basic structure, which is eventually shown to the world. That means that people all over receive the same message over and over again to the point where they believe the message the film makers want them to believe is in fact what they individually created to believe. When Benjamin talks about how the individual no longer interprets the film, and it is instead the film telling the individual what to interpret, this changes our own free will to perceive what we want to perceive, and we are all victims of this “loss of aura”.

When I was growing up, I used to love watching movies/shows where the boy and the girl fall in love and live happily ever after. It was also what was mainly shown on cable tv at the time. Typically, the boy and the girl were both white and living in a society of white culture. Therefore, growing up in an Asian household with heavy Asian influences, I had such a difficult time understanding why my life couldn’t be like the movies. I was submissive to the messages these movies were trying to convey rather than creating my own message.

Week 7: Final Audio Project (Leon & Nimrah)

Audio Project Documentation:

Link to Audio Project:

Group: Haider Ali and Julie Huang
Documentation by: Julie Huang

Description of Webpage:
Our audio webpage depicts the different phases of drinking culture throughout the 4 years of college, particularly to NYUSH. Our audio plays when you click on the pictures.

After coming up with our idea, Haider and I first focused on gathering our sounds. We pulled a lot of our sounds from, along with recording some parts ourselves and using previously recorded videos and transforming them into wav files. I focused on remixing the freshman and sophomore sounds, while Haider focused on the junior and senior sounds. We played around with audacity to mesh our sounds together, mainly focusing on the amplify effect to make our spoken and recorded words clearer, and the fade in fade out effect.

Once we compiled our sounds, we began to work on our html website page. I mainly focused on the webpage while Haider focused on adding the javascript functions. We both had a lot off fun working on this project!

In audacity, we had a lot of trouble making making the sounds fit together and mesh well. The background music was often too loud and we had to find a way to make the other sounds stand out more. Also, when we were coding, for some reason, we were struggling to get the background image to fit the whole screen, but eventually figured it out.

If we had more time, I would have liked to expand a bit more and make the sound remixes a little bit longer to include more aspects of each drinking life and more voice recordings. And also make the remixes flow a little more naturally.

Works cited:

Vine Vera Reviews the Best Wine Bars in New York

More citations continued in:

Week 7: Response to Chimamanda Adichie’s TED talk (Leon & Nimrah)

Response to TED talk:

During freshman orientation week, we were shown this TED talk. At that moment, it didn’t seem important enough to pay close attention to it. However, after rewatching this, I can clearly see the true importance of ALL of Chimamanda words. Chimamanda spoke about how “single stories” are what leads to racial stereotypes, which ultimately robs people of their dignity since we already make assumptions on who we think a person is based on only what we have previously experienced or been told. Back in high school, when I told some classmates I was going to China for university, their response was somewhere on the lines of “China? I didn’t even know they were doing that. Can you buy me some fake stuff though?” I had grown up my entire life traveling back and forth between Shanghai and US so I knew of the economic development going on, but these people only had a small, skewed perspective of what they thought China was like. While there are still lots of countryside aspects in China, there are also many large modernized cities. I was appalled at this opinion, but then again, I have to admit that I am also a contributor to the single story. However, it is nearly impossible to have all the stories. I think the importance of Chimamanda’s message is to never go into any situation already having previously existing assumptions. And this is ultimately because these assumptions are what make up and reinforce racism, sexism, etc.

I related a lot to Chimamanda when she was talking about the books she read when she grew up. Growing up I always read those same books and that influenced me to want to become white, despite how physically visible I am Asian. It was because of these books and external influences that led to a constant struggle growing up between my identities. On one hand my life at home was completely Chinese, but I was influenced by my predominately white schools to assimilate to white culture.

Week 6: Response to NPR article (Leon & Nimrah)


Cultural appropriation and cultural appreciation has always been a large controversial debate. And in the music industry, I think it is really easy for artists to cross the line. Like discussed in the last two readings, sharing ideas and borrowing from other ideas can be a good thing if the artist keeps the original context available. I think this is parallel to sharing musical beats/lyrics and borrowing inspiration from others. It is very common to for artists to unknowingly copy beats or lyrics because they have heard it somewhere before. In their process of creating music, they might not have even realized they were closely imitating an already existing type of music. Therefore, I think in cases like the Beyonce/Coldplay collab, both artists should have been more aware of the outburst they would create with their music video. While it is spreading awareness on India, it is important to mention the context.