Author: Ziying Wang

link: http://imanas.shanghai.nyu.edu/~zw1745/cat/cat.html

I went to find another cat picture!

It went pretty smooth when I link the first two buttons with the js functions to flip the cat. But I couldn’t figure out how to change the text in the caption function.

Through searching online, I discovered that I need to use a .innerHTML in my function to replace the text with new ones.

Link: https://imanas.shanghai.nyu.edu/~zw1745/week3/hw1.html

For this project, I decided to separate the header from the body with a different background color. Originally, I only adjusted the orange box size and set the page background into the color clan, then I discovered that other websites draw clearer boundaries between the header and the body, therefore, I inserted a white solid border to the bottom of the orange box, the arrangement makes the header stand out better. In addition, I moved the original links to below the white line, and the display became clearer.

I also insert an email input box into my home page because I find it interesting, especially the interactive function and the phrases I can put inside the email box. Unfortunately, I have no idea where the entered email address goes because I didn’t insert further functions for that and didn’t know what to put to achieve that goal. Another problem I ran into was still the emoji signs. I didn’t figure out why the ios emoji can’t be displayed on the net.

Compared to the original version, I made adjustments to the display and added some boxes and frames to construct the webpages.

link: http://imanas.shanghai.nyu.edu/~zw1745/week2/index.html

This is the portfolio I made using CSS layout. I applied flexbox to horizontally align the elements,  and padding as well as margins to adjust the size of the blank areas. The footer position was a bit tricky for me because when I wrap the webpage, its position moves vertically and it didn’t work even when I applied “fixed”. Then I realized that the footer was only fixed within itself, which means the space for the footer isn’t the whole webpage so it can not be static on the webpage. So I adjust the size of the space for the footer to 100%, and the footer can be static on the page or relative if I set it to relative position.

Scott McCloud has an advanced perspective on how he views comics and digital forms. I’ve always considered comic books as an assembly of static pictures, for when I’m reading through the pictures, I can automatically connect them in my head and form a complete storyline. But through Scott McCloud’s analysis, the static pictures inside comics are separated, and therefore are never continuous. McCloud explains the blank area between pictures is left for the readers to fill in. The classic version of printed comics actually inspires readers’ imagination.

McCloud also brings up a theory I’ve never thought about. He explains that due to the size of the pages and the printed-version of comics, a series of pictures always have a line break and cut to the next line, it interrupts the “continuity” (even though there isn’t an absolute continuity in comics) in comics. With the improvement in technologies, we now have digital devices for online comics. But due to the limitation in people’s minds towards old types of comic books, the comics online are simply paper version comics scanned into screens. McCloud comes up with an idea that with the support of digital devices, comics can be continuous. It can be presented as a continuous, never-ending form, such as a wheel that displays comics like films. He even mentions that by the turns inside the plot of the comic, the composing type on the screen can make a turn, indicating the plot as well as getting the readers more involved in the story. I’m inspired by this idea and the latest Black Mirror series, Bandersnatch. It would be amazing if I can create a comic page on the website that creates turns when the plot twists and make the readers pick their own story when reading my comic.

This is a photoshop work I made with the following three pictures.

I warp the perspective of the fountain picture and use the stamp tool to remove the logo on the corner.

Then I use the magnetic lasso tool to carve out the keyboard of the piano picture I took.

Then I insert the area I carved into the fountain picture and adjust the perspective and color curve for the keyboard, then I overlay the keyboard to the fountain.

Finally, I carve out the pianist from the third picture and transform the direction to make him sit on the keyboard.

I use the blur tool to blur out the edges and use the burn tool to add some shadows on the fountain and the keyboard under where the pianist sits.