Week3: Profile page CSS (Cecilia Cai)

http://imanas.shanghai.nyu.edu/~zc1151/commLab/week1/profile.html

This is the link of my profile page with CSS, and the following pictures are how the page looks like before and after I added CSS to it.

Inspired by the in-class CSS exercise, I started with dividing my profile page into different blocks and use <div>’s to create different classes in the html file. I separated the content into four sections, respectively basic information, education experiences, hobbies and my favorite stuffs. I then went on to browse others’ profile web-page for inspirations for designing the layout, and the following picture is one of the examples I found. 

example profile page I found on Google

In fact, the above picture is quite typical, as professional profile pages all have similar style. I figured that the classic components are: a side bar with a profile picture and navigation links, and grids containing image or text. Applying this idea to my own profile page, I decided to create a side bar to put my basic information, with the rest of the contents fitting into different frames, taking up the main part of the page.

To implement such design, I used the knowledge we learned in class about CSS positioning and creating flex objects. I found this tutorial about positioning especially useful:https://medium.freecodecamp.org/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26 . I firstly created different containers for each part of the web page, which are rectangles of different colors, and use them to enclose their respective contents. By setting the sidebar’s as well as its contents’ position to be absolute, and the remaining parts’ to be static, I was able to reorganize the layout. With the position absolute, the position of each sub-component in the sidebar, such as the greeting line “Hey! Nice to meet you!”, is only relative to its parent, which is the grey block container I created in the first place, and they all, together with the grey rectangle, are removed from the page flow. I also explored the CSS functions for image, and learned from google the way to cut it into a circle.

For the remaining parts, I learned from google the way to set styled frames and added a frame to each part. However, I went into trouble in formatting them. I figured that the three parts: education, hobbies, and favorites should be parallel and similar, and thus set them to be flex. But such setting messed up the layout of the whole page, including the side bar, and I was only able to reformat them by resetting the values of the parameters. I originally wanted to use the same class for the style of the three blocks, but I realized that since I set the values of the margins and the distances to top and left to be some concrete numbers, I need different values for the three frames so that they don’t overlap each other. Therefore I created three similar classes for them, but I’m still wondering if there is any way to combine the three classes. I’m actually curious about the way it works when using percentages to set the values of the widths and heights, and I’m not sure what value are the percentages referring to. The following parts are the CSS code for them.

In addition to the above features, I also explored to set a background for the web page. The trouble I ran into is to adjust the opacity of the background image. I originally inserted the background-picture in the CSS code in body part, but once I set its opacity, all the contents on the web, including the texts and other pictures, become more transparent along with the background. I googled for the solution and learned that I can set features for the same div with a separate “body::after” block. By setting the opacity in the “body::after” section, I was able to adjust the transparency of the background without affecting other contents.

Finally, I added three icons, which are picture I found on google, to enrich the page content. And I also adjusted the margins of each parts to make the page looks more proportionate. 

Week2: Response to Scott McCloud’s Understanding Comics Chap1-4 (Cecilia Cai)

I find myself having so many misunderstandings about this medium before after reading the first four chapters of the book Understanding Comics—the Invisible Art. In fact, comics to me were just stories presented by sequences of pictures, sometimes in combination of words, and are funnier to read than plain texts. This understanding is actually close to how the author defines comic in this book, which is an artform or a medium that present ideas in sequentially juxtaposed pictures (McCloud 6-7), but I haven’t actually pondered on the differences between comics and animations or cartoons, and the messages that comics convey.

Comics is a medium that conveys certain messages. When defining and differentiating comics, the author modifies the terms he uses a couple of time. To generalize, some key words about comics are: sequential, visual, static, and iconic. Different from cartoons, comic is a medium which often employs the picture-making approach (McCloud 21). Comics are not as efficient as plain texts in explaining information, especially academic knowledge, and not as vivid as animation or videos in presenting the reality. But they have more abstractions and emphasis, and are more able to deliver messages with strong emotion such as irony.

Another thing that I want to highlight is the balance between the objectivity and abstractness of comics. As McCloud introduces, icons which reduce and simplify the realistic pictures but intensify the features take up a significant part of comic drawings, such as the faces of two dots and a line. Such abstract images are recognizable because we tend to complete the whole picture from the small but essential fraction with imagination. It is pretty amazing to examine, but just as McCloud mentions, “we see ourselves in everything” (33). As long as the image has the basic feature of a face, which is two dots representing the eyes and a line denotes the mouth, we see and recognize it as an abstract face. Such closure phenomenon appears quite frequent in comics, and the consistency of comics actually relies heavily on people’s ability to see the unseen. The closure ability is accumulated from our life experiences, and thus to understand comics, certain experiences are needed. I think that comics’ capability of storing and delivering messages are lesser compared to both video animations and plain text, for the use of sequential images and the limitation on the wordcounts determine that more spaces are needed for comics to convey a story. Personally, I consider pictures more important than words in comics, and words are just complimentary explanation of some concrete ideas which cannot be well delivered only through image. That is also the reason that comics are generally easier to read. But different from pure pictures, which people can interpret as wildly and various as they like, the messages that comics convey is more concrete and consistent, and thus need some words to support. Comic pictures, though, are not able to show the whole, and often jump between a scene and some details. McCloud uses the Japanese comics as an example, whose characters are mostly designed simple “to assist in reader-identification”, but also has some frames with very realistic drawings to show the detail of an object or some textures. I used to only accept the messages that comics tell, failing to think about why they are organized in such way. Now reflecting on comics I read before, I am quite amazed by our natural ability to relate and recognize the whole from fractions, or reality from abstract, and the use of such closure ability to comprehend comics.

Comics are able to show a sense of time by arranging the contents in consecutive frames. A sense of urgent can be created by repeating the image of clock in several frames, and a sense of motions can be strengthened by drawing multiple images of the same subject with each presenting one position stage. The amazing part is what to put on each frame and what techniques are used to create certain effects.

I gained many insights and understandings about the features of the comics and its story telling ability, and how they are related to our natural abilities or life experiences. I also learned and thought about the message of the comics as a medium after reading the first four chapters. I’m deeply engaged in this book and look forward to reading the rest of it.

Week2: CSS In-Class Exercise (Cecilia Cai)

https://imanas.shanghai.nyu.edu/~zc1151/commLab/week2/css/index.html

This is the Portfolio page I built for the in-class CSS exercise. 

I followed the instruction and firstly set different background colors for each div so that I can get a better sense of the different components of the web page. Then I started to work on formatting the positions for each component. I set the positions of the heading and the bottom components to be fixed, respectively at the top and bottom of the page, and align the items to center. I then created a container div enclosing the navigation and content div, and set its position to be absolute. I used this container div as a parent element of the navigation and content parts. Once I set its absolute position, the block moved to the left top and covered the other contents. I adjusted it by setting its width and heights as well as its distances to left and top. The position of the navigation and content divs are also set to absolute, and I adjusted their layout in relation to the container element. 

The next step is to set the flex object of the photo in the contents. I set the content and content-box to flex in row direction, and set its feature to be wrap.  I also adjust their sizes accordingly.

This is how the page looks like before I hid the colors.

Finally, I removed the background color of each part and this is how the web page looks.

Week 2: Photoshop Collage (Cecilia Cai)

For this assignment, I chose the following three pictures, respectively of a corgi, a blackhole, and fantasy land, from google, and made a wired collage. 

I am crazy about corgi so I went directly searching for pictures of corgi, and it inspired me of a dog jumping into an imaginary world, so I decided to use the element of a blackhole and a fantasy land. The following picture is what I made out of them.

I used the picture of the blackhole as background layer and firstly worked with fitting the fantasy land into the black whole. I cropped the picture of the fantasy land into an ellipse and apply an Iris blur filter to blur its edges. I resized the ellipse to fill the blackhole. I also applied a brightness and contrast layer to make the overall color tune brighter and more fancy. I find it quite easy to get this part done, for the blackhole picture and the fantasy land picture I found are both in blue tone and can easily merge harmonically.

I then worked on adding the dog to the background. The first trouble I encountered was to cut it out perfectly. The quick selection tools help me quickly select the main body of the corgi, but as it is furry, it is hard to deal with the edge. Moreover, since the original background is a grassland, the grey and light green color at the edge of the cropped out dog is very obvious, especially in its tail part. The dog also seems really abrupt in the background, as its yellow strongly contrast the blue background. I tried to adjust its size and rotate it, but it still seem strange in the picture.

I found a couple of filters but were unsure about their effects, so I want to the PhotoShop workshop. Cindy introduced photoshop’s new feature of Refine Edge Brush Tool, which can be access in the mask layer after selecting the object. Cindy demoed this tool to me with cutting out the shape of the flying hair from a picture of a girl. After refining the selection at the edge with this tool, I could did an overall adjustment of its smoothness and sharpness. However, this improvement on the cutting did little work to merging the dog into the background environment. Cindy suggested me to adjust the color tone of the dog, adding blue element to make it fit in better. She also showed me the tool of distorting and wrapping the image, telling me that shape and directions also matter. I tilted the dog image to face towards the hole, and adjusting its color. I also blurred its edge to merge with the blue lights in the background image. Besides, I explored the smudge tool and used it to create the visual effect of the dog being pulled towards the blackhole, where is now the fantasy land, by its mystery power. To further soften the edge, I select the part near the hole and adjust its color tone to be more blue, merging with the blue lights. Finally, I did some sharpening on some details and finish my creation.

Week2: Response to Marshall McLuhan (Cecilia Cai)

This reading is quite innovative and yet insightful to me. We have been so used to leaving with the changes that emerging mediums brought us that we soon adapt to new habits without even recognizing them. We usually easily accept what is introduced to us and go on to enjoy the convenience these new mediums brought, failing to consider the hidden “message”.

First time reading the line that “the medium is the message”, I was not sure what it means, for although the medium, as one of the examples McLuhan gave in the reading, that the electric lights are used for lightening, brain surgery, night baseball, and etc., convey certain message, the content is usually designed by men and thus what it tells is what men are thinking about. Later I realized that the message here does not equal to content. Besides providing people with concrete information, message of the medium implies new trends and features. Back to the example of the electric light, which seems to have no message itself, actually illustrate that light is a form of signals and can be used to alert living creatures. This message essentially points out that light can be a form of communication and can transfer information. However, as McLuhan stated, this kind of message of the light medium is often neglected, as the electric light has “no content” until it is used by men in specific environment and plays some roles.

How are the messages of the medium influencing us? I started to consider cases in my life after reading McLuhan’s discussion on the power of new medias in the electric age. Take instant messaging as an example. Before messaging apps become wide-spread, we contact one another mainly through phone calls or text messages. I remember before middle school, it was still quite fashionable to have a small and cute phone book and note down others’ phone numbers when meeting new friends. I used to spend a long time drafting text messages or calling my friends, and remembered my mom complaining about me wasting money on sending a bunch of messages or making long phone calls. The message that mobile phones convey before instant messaging age was interpersonal connection, allowing us to contact with friends and family, and even listen to their voices, when being apart.

The first generation of instant messaging apps were mostly Web based. I was fond of QQ when it first came out and would sit in front of my computer for the whole day talking to friends. Online instant messaging is part of the culture that the Internet brought to us, and thus the medium – messaging Web apps, is also about connection. But different from phones which are mainly for contacting people that we are familiar with, online connection is broader but shallower, and is about “meeting” new people and chat with even strangers. The message is exploration and quick connection.

Moving to nowadays when we contact each other mostly through mobile instant messaging apps such as WeChat, the message changes again along with the medium. Although the mobile phone is still the medium for these apps, phone numbers are no longer vital to our connection. In fact, many people even can’t remember their own phone numbers. I suddenly fell into panic one day when I lost my WeChat account, and realized that most of my current connection with people is on WeChat. It was lucky that I recovered my account, and for a moment I felt like I was cut apart from all of my social connections. I no longer know my friends’ phone numbers as we mostly talk on WeChat, and if we want, we can send voice messages or make WeChat calls. But then I thought, how is instant messaging different from the traditional text messages? After reflecting on my habits, I believe that a new message that the medium of mobile instant messaging apps, and specifically in my case, the WeChat, brought, is fragmented and graphical. Instead of typing out the whole idea, I, as well as my friends, usually tear a sentence into pieces and send words or phrases to express our ideas. This way of messaging is faster, and friendlier to readers, for people are usually too busy and bothered to read a long paragraph at a time. We also send more emojis and stickers to present our feelings more vividly. These new habits are formed under the influence of the new medium, and even when I text my friends occasionally, I would send several text messages to express only one thing before realizing that I should not have done that since texts are charged by numbers.

We are prone to be influenced by new mediums for we pay little attention to their messages. As McLuhan states, “any medium has the power of imposing its assumption on the unwary” (157). This also leads to transformation of cultures. McLuhan discussed the conflict between the English culture of discontinuity and the principle of uniformity of the typography technology. The printing medium itself conveys the message of unchangeability and formality, and thus challenge the antient oral tradition which is flexible and dynamic. Such messages are usually unattended, and we are easily adapted to new cultures. Therefore, I want to raise a question here that, with all these various emerging mediums in our lives, are we becoming smarter or number?