Author: Laura Huang

Link: http://imanas.shanghai.nyu.edu/~yh2330/week02_project1/my_portfolio.html

When making the final HTML/CSS website, I solved a lot of questions that I encountered and added more color, type and some layouts on the page.  I also added the link to the “about me” page that we made in week 1 so that it looks more like a personal website.

I first write the basic size and position of the navigation box and the content box. I keep the navigation box in a fixed position with the flex-direction: column. But I change the left margin and the height with the percentage. This will enable the navigation box to move proportionately if users stretch the window and it will be easier when making future adjustments. I justified all the content and items in the center and align them with space-between.

For the content box, I did mostly the same. When writing the flex direction, I searched the tutorial and found a simpler way to combine wrap and direction, which is flex-flow, so I improved this part of my code. On Monday, I found some problems when setting the padding and the margin. I tried several times in the example code we wrote in the class and finally got it correct. After the Monday class, I found an important part that I missed, which is the first html{ } part that defines the initial height to be 100%. With this initial height defined, the following height can be calculated from this initial value. Then I fixed the problem that I didn’t remove the default margin which causes some misplacing in the “boxes”.

I also solved the problem of the footer. Originally, the footer I made is a fixed box that will roll with the page. Then I added the margin-bottom and the bottom value and define the position as relative. Finally, the footer can be placed at the bottom of the page no matter how the user rolls the page.

In Monday’s exercise, I changed the color and the font type of the boxes and texts. I also tried different styles of the border, for example, dotted, to make it more suitable to my web page. For the final portfolio, I found the background image function so I searched in the tutorial and figured out how to upload an image as a background and how to adjust its size or place. I couldn’t find a way to adjust the image’s transparency in the CSS so I just use photoshop to edit the picture first and then upload the image. I decided to combine the “about me” web page with this portfolio so I change the title of the items and add one link of the “Music & Film Gallery” which will link to a similar page that I made in week 1. In this way, I can enrich this personal website and add more pictures, videos or links to the page in the future.

The screenshots of my website are the following:

A new small problem I come up with is that the navigation box and the content box may overlap if I shrink the window smaller than a certain amount.

I tried to add the margin of the navigation box and the content box, but it doesn’t work. Then I tried to change the position type of the two boxes but when I use the “fix” position, the content container couldn’t stay in the center of the whole page according to the size of the window.  I also tried to change the padding of the content box and navigation box but they still overlap.  I may still work on this problem in future improvement.

Link: http://imanas.shanghai.nyu.edu/~yh2330/week02/my_portfolio.html

Screenshot:

  I first wrote the basic size and position of the navigation box and the content box. I kept the navigation box in a fixed position and the flex-direction: column. And I set the content box in the row direction. At first, I found some problems when setting the padding and the margin. I tried several times in the example code we wrote in the class and finally got it correct. Then I decided to add more color and style to the portfolio page to practice all the tools we learned in the class, the Adobe website and the font website.

  One problem I had was I couldn’t make the footer in the center of the bottom. I tried text-align and set the left margin. But at last, I found I had to add the width because the width property sets the width of an element, which does not include padding, borders, or margins.

    The book starts with the narration of the character Scott McCloud, who explore the world of comics when he was young. He mentions a common phenomenon among people who don’t read comics that originally, they may think comics as basic pictures books that tell a simple story with colorful illustrations. However, the content and meaning of the comics can be much more plentiful. McCloud offers a new definition of comics which is a deliberate sequential art, using a series of pictures to present a story. It is a media that can involve various stories and meanings just like literature, music or movies.
    The most significant features of the comic are simplification, abstraction, and symbolization. The simplified image can usually contain more abundant meanings and explanations, which enables the author to set up different backgrounds, stories and characteristics with more possibility. Over-detailed features build a prior assumption that may misguide the readers or distract their attention.
    McCloud mentioned McLuhan, the author of the last article we read, about the similar idea in the Medium is the Message that media itself is a carrier of content and its most important effect is that it change people’s function and psychological aspects. To express it more vividly, in my opinion, the comic as the medium, the carrier, and the container, try to be transparent and implicit as much as possible, while still emphasizing the content and the story.
    But the distinction between the comics and other forms of media like literature and photography is that the comics combine the image and narration more integrated. Meanwhile, it leaves some vacant positions that stimulate the closure, according to McCloud. These blank spaces give people more substitution to become part of the story. We can touch a broader world beyond ourselves if we use the senses and imagination to fill and enrich the cartoon pictures. In fact, many film directors will draw storyboards before the formal shoot, which I think is somewhat like a basic form of comics. Comics can even add more details and actions from different spatial or temporal dimensions into the same scene, which make the reading more interesting and combine the movement and quiescence. Therefore, the comic is one of the most important art forms which can’t be neglected because it makes everyone his own director of the story based on their imagination and knowledge.

    The article illustrates McLuhan’s comprehensive theory of the media. He first demonstrates that the media is a carrier of message or content and these messages convey different idea and information in the context of cultural and historical background. These content may have no concrete meanings or may be other forms of media.

    However, the content is not the only key point in the media. The different perceptions of the message also depend on the way we approach them and the way we use or dispose of them, which will gradually change the social formation and the function of people. The influences of the media may also contain psychological or moral consequences that will affect the whole civilization. For example, the inequity of education is partly changed among society since people can access all kinds of information from the Internet and the function of people turns to deal with information and data. The communication method between people changes to typing letters on the keyboard and sending images. Meanwhile, moral consequences may generate as people can keep anonymous on the internet, which will generate the behavior of cyber-bullying and cyber-violence, leading to serious moral consequences. The addiction to the virtual world will also harm the mental health of a person.

   Therefore, an individual must be aware that any forms of media or technology are an outside addition which can’t add or eliminate any value of himself. We have to step back to grasp the overall situation or the influence of technology. The technology can only become an extension of our physical entity but cannot become part of us. More importantly, it may sometimes become a limitation of our views as the way we receive the information and use the technology are almost identical and under control. The information itself is also a form of media that may include some biased viewpoints. Hence, we have to be cautious with all forms of media, not only the message they carry but also their means of expression and dissemination.

http://imanas.shanghai.nyu.edu/~yh2330/week01/aboutme.html

Reflection: One problem I had when making the web page was that I could not make the pictures and texts align to the left margin. Then I figured it out by changing the <p> places and combining the paragraphs. I also found that the browser will automatically add an extra line after the heading so I don’t need to add the line break mark <br>. I would like to make more changes in colors and adjust the picture size more easily as we learn further.