Author: zy1193

Posted on

Comics project — Angel Yang

link: http://imanas.shanghai.nyu.edu/~zy1193/project1/project.html

Description

Our story is about a team of pig, dog, rabbit, panda heard about the treasure in the haunted house, so they go for an adventure in the haunted house, But in the end, they did not find the treasure but reaped the friendship.

At first, we created a lot of plots with conversation. But then, we found it was hard to render on a web page, so we cut and change parts of the plot to make it combine with HTML, CSS and JavaScript better.

Structure

My idea is to create one main page, which contains a brief introduction, and if you click different buttons, you can get into different floor page. 

Outside the door is a page to introduce each character. The 1st floor is a maze, and I try to use a simple animation to present it. The 2nd floor and the top floor are presented in the same way. The 2nd floor is a floor covered with water, and the characters use a boat to get across it. The top floor has a magic ball on it and using which characters make a wish.

Process

I designed the structure of five pages, code the first three pages and also provide the code model for the last two pages. 

The first problem I met is when I create the button the get into different pages, a new page just pops up, so at the end of the whole interaction process, there are many pages open together. So I google about this question and use the function of location to fix this problem.

The second problem is that what I want is to click the button once and the comics will automatically and continuously play. But use my knowledge in the recitation exercise–walking, I need to continuously click the button to make the picture move. So later I went to the lab and ask fellows for help, and use the setTimeout to fix this problem. (But in this part I think my way to create the animated sequences is too complex and it is easy to make mistakes if you are not clear in logic and not careful. )

The third problem is that I want to change the function of the button halfway. But when I code in JS  “utton1.onclick=xxxxx();” without my click, it automatically follows the order. I went to the fellow, she tells me I should delete the ().

Gain

This my first time to finish an IMA project. I feel good and proud of it. Designing webpage and coding are new to me, but as long as we dare to try and learn modestly can we gain valuable experience.

Posted on

Week 4 JS exercise — Angel Yang

Link: http://imanas.shanghai.nyu.edu/~zy1193/week4/walking.html

When I was doing this exercise, there is a careless mistake I made that I give a name to the var but I put it outside the function{ }, which means it’s not globally, but I still use that given name, so it doesn’t work at all.

I also feel like the javascript is a little different from the HTML and CSS, which need a strong sense of logic and a clear understanding of every component on your page.

Posted on

JS Exercise– Angel Yang

Link: http://imanas.shanghai.nyu.edu/~zy1193/week3/index-1.html

When I was doing this exercise, I use the javascript to put the order into the button and CSS to decorate the button.  

I met a problem that I cannot change the length of the caption’s border on the bottom. It looks weird.

Posted on

Website with HTML&CSS–Angel Yang

Link: http://imanas.shanghai.nyu.edu/~zy1193/week1/hw1.html

There is a problem that the border I expected was to decorate the whole body, but there is something wrong that it only decorate part of it. Moreover, because I used the absolute position, so the website is not responsive.

And I also met a problem when I used the Cyberduck.

This is the page before I post it on Cyberduck.

But if I click the link, it shows

Posted on

Photoshop—Angel Yang

These are the original pictures I used.

This is my final work.

When I was doing this assignment, I met many problems. The first one is how to combine my ideas and the materials I found on the internet. Not every picture you choose can ideally turn into what you imagine. So I stored many pictures as substitutions. The second problem is that I nearly have no knowledge of photoshop. So I use the resources on the IMA website and also find some teaching videos. I learned the basic skills of changing the layer‘s blend mode and how to use layer masking. Finally, I finished my first and simple photoshop work.