Week 2 Presentation - On Video Transitions

I.
http://www.youtube.com/watch?v=cULOFcZ93Ug
- Point out the part(s) that applies Ken Burns Effect.
- Which part(s) of using Ken Burn Effect you think are (is) good?
- Evaluate this video from other aspects (sound, photo, script, transition and so on). Which are (is) good and which can to be improved?

Map of NUS (0:10 - 0:12)
I think this is pretty ok given that the map already showed the cropped section of NUS FASS, however, the image moving from left to right makes it confusing because it felt like the audience was 'dropping of the edge'. It would have been better if the motion was zooming in instead.

Pics of stairs (0:20 - 0:26)
I like that the moving pictures of the stairs followed the shape/flow (if there is such a thing) of the stairs, e.g. going from bottom to top (cos that's how we climb the stairs from the bottom angle). There is also another zooming-out picture of the stairs and I think all these effects serves to slowly reveal just how many steps there are to take and gives the audience an element of surprise! I'm kind of picturing in my head that they'll go, "Wow, when are the stairs gonna end?... What there's still more?"

Looking up at a stairs (going up/zoom out) (0:27 - 0:34)
I liked that when the image of Cheryl looking up the stairs from behind was shown, the image was moving upwards because it would be like the natural way of looking at the stairs first from the bottom then upwards to see where it ends.
I felt that it was also appropriate for the image of Cheryl's face (the "not again!" part) to be zooming-out..I felt that it was effective in capturing her emotions at that point of time rather than zooming-in. I think it was because someone would imagine her screaming (imagine drawing lines from her mouth outwards to the edges of the screen..like a comic effect, if you know what I mean).

Food hankies (0:44 - 0:46)
I think there isn't any special meaning behind the Ken Burns effect, but I do think that the effect does give it a nice touch rather than just leaving it static.

Looking at books & mugging (0:58 - 1:08)
I think that the Ken Burns effect of the images of Cheryl looking at the pile of books and later on in her study materials was good because the motion followed the vision-line of her eyes.


Evaluation of the video.
I think that the script was done very well. It was interesting, engaging (her voice was very energetic) and definitely puts an honest testimony of what it's like to be a regular NUS student. I think the photos were done very well too (and the effort in taking them was commendable). Also, the concept of using people to hold onto the papers with letters was unique and interesting.
However, I think she can work on her laughter. At some points, her laughter/chuckle seemed very muffled and suppressed.. so it does sound 'forced' or 'fake to some extent. I think by relaxing and being confident of her voice/laughter would really help to improve the quality of the video, because it becomes something really personal and not staged.
You know what, I think she can probably even just remove the laughter bits altogether.

II.
What are the types of video transition?
- Please list 5 different video transition effects (see the Adobe Premiere menu). When should these transition effects be used? What are the meaning attached to each transition effect?
- Please find 5 clips which illustrate when these five effects are used, and their meaning/purpose [The meaning of the direction: From left to right [the good guy], from right to left [the bad guy], an example from tonight’s lecture]. If you cut the clips from your DVD, please put these clips in your A2 folder i.e., in addition to your answers you write in the blog. (tips: you can find videos from YouTube; you can also cut your own movies).

1. Cross dissolve
Meaning attached: Across a certain time span.
When should it be used: When trying to show different shots in which there is a time lapse in between them.
(5:17 - 5:22 from http://www.youtube.com/watch?v=VDlsGm59xHc&feature=related); the passing of time as Harry waits for his turn while the other contestants went for their turn.

2. Dip to black
Meaning attached: Across an even longer time span.
When should it be used: As in #1, but probably when there is a longer time lapse (e.g. a few hours or even days). It can also be used between different acts or scenes. A fade out draws more attention to the passing of time while dissolve does not.
(1:09 - 1:11 from http://vimeo.com/groups/stopmotion/videos/12155835); to signify a passage of time as the bottle flows to the other character.

(See: 1:09 - 1:11)

Bottle from Kirsten Lepore on Vimeo.


3. Push
Meaning attached: A change to a different scene.
When should it be used: When we want to change a scene creatively/to a different scene with a different setting or at a different time.
(0:37 - 0:42 from http://www.youtube.com/watch?v=KCyMT3eXs7c); used to change the scene into a flashback.

(See: 0:37 - 0:42)


4. Iris
Meaning attached: A round moving mask that can close down to end a scene (iris-out) or open to begin one (iris-in), which by doing so reveals more space in the scene (in iris-in) or focuses on one point while eliminating other details (in iris-out).
When should it be used: starting or ending a scene (with a particular focus point in the scene and eliminates other elements in the scene). (quoted from Yale Edu)
http://classes.yale.edu/film/videos/Iris-Neighbors.wmv

5. Additive dissolve
Meaning attached: There is sort of like a flash of light when this is used, probably to signify a 'magical' journey into the non-physical world (e.g. a memory, flashback, dream or some imaginary world).
When should it be used: Before going into a memory, flashback, dream or some imaginary world.
(3:36 - 3:40 from http://www.youtube.com/watch?v=fUYiRZ3kUCM) --> a flashback/history scene, and it also gives a mystical feel to it.

(See: 3:36 - 3:40)

III.
Define what are “pan, tilt‐up, tilt‐down, zoom, close up; extreme close‐up; wide‐angle; high‐angle; fisheye, and telephoto”
- Show us how to pan, tilt‐up, tilt‐down, zoom, close up; extreme close‐up; wide‐angle; high‐angle; fisheye, and telephoto
- Please discuss the suitability of using pan, tilt‐up, tilt‐down zoom, close up; extreme close‐up; wide‐angle; high‐angle; fisheye, and telephoto in the clips.
- What is the meaning/the purpose of pan, tilt‐up, tilt‐down zoom, close up; extreme close‐up; wide‐angle; high‐angle; fisheye, and telephoto?

Pan:
With pan, the camera turn to the left or right. It gives the movement that scans the space horizontally and it serves to connect the places/characters spacially (like how near or how far apart the subjects are). The speed of the pan can also be used for dramatic purposes, e.g. fast pans suggest that characters have no time to waste, giving a sense of urgency and perhaps danger.
(5:42 - 5:45 from http://www.youtube.com/watch?v=fUYiRZ3kUCM) --> adding to the illusion of speed of the vampires

(See: 5:42 - 5:45)

Tilt:
Like pan, just that the camera swivels up or down instead, scanning the space vertically. It is used sometimes to create a social difference between characters (the weaker ones, like slaves, are at shot from high-angle and the master is shot from low-angle). It is also a means of creating suspense, since viewers do not know when the camera will stop, or what will be found there (can also be said of pan).
(0:20 - from http://www.youtube.com/watch?v=XSIOopnk7L8) --> tilting down the skulls, and we don't know what we might find below.


Zoom:
The focal length of the lens changes as the shot is in progress, and it seems like we are moving towards or away from the subject.
Zooming in has a variety of purposes, e.g. focusing on a particular subject in a crowd, or creating tension if we zoom in too close. Zooming out helps to create an establishment of the subject's surroundings.

Close-up:
A framing which the subject takes up a lot of space in the screen. (the scale is large)

Extreme close-up:
A framing which the subject is shown even larger than close-up, and is usually used with human faces. This usually focuses on a particular facial feature, e.g. eyes/nose/mouth, and it gives a disturbing feeling for the viewers (like too close for comfort).

Wide-angle:
Short focal length lenses are used and it distorts the straight lines near the edges of the frame and by exaggerating the distance between foreground and background (the opposite of telephoto). More of the scene can enter the frame, so it is used usually when the scene is in an enclosed space.
(5:20 - 5:25 from http://www.youtube.com/watch?v=2JsDNfI9IDk&feature=related)

High-angle:
The camera shoots from above the subject and tilted downwards to frame the subject. It gives a feeling that the subject is weak.

Fisheye:
A distortion of the image (more distortion than wide-angle) and gives a very unnaturalistic shot. It is used sometimes in landscape shots and skating shots.

Telephoto:
The effect is to compress the depth of the image, so that the distance between the foreground and background (or something far away) is compressed.

Note: All the videos are not copyrighted by me and I just found them off the net. Please note also that some of the videos cannot be embedded here in this blog because the user who uploaded them disabled it.

My Own Domain Name

I've just bought my OWN domain name for the online portfolio!

http://www.carol-elizabeth.com!

Ok, so I've just only bought the DNS, not the web hosting. But still, the name is mine!

I thought it'd be better if the domain name was my own name (Elizabeth's my baptism name. It's an official name!) so that it's like a branding for myself. Besides, it's easier for people to remember.

Week 1 Presentation

I.

Please list 3 good websites which you like and evaluate these websites. Do they apply the Principles of Visual Communications which you have learnt in NM2208 (Color Scheme, Layout, Gestalt and so on)? Do these websites use CSS? If yes, how do they implement the CSS across the websites? If no, why? What makes them good?

[Disclaimer]
It has been a long while since I took NM2208, hence the full and exact details of what was learnt is a little foggy, so please bear with me while I do my best to refresh my memory.


Apple

For my top pick, my FAVOURITE would be the Apple website. Okay granted, I may like to use Apple products, but I think that their website is really pleasing on the eyes and easy to navigate around.




Applying Principles of Visual Communication

• Color Scheme: The colors are of a consistent grayish tone, so it is soothing to the eyes (I can't imagine if the colors are too bright and contrasting all the way) and it also gives it an elegant look.
• Layout: The website is organized neatly into grids and the most important information (or at least what the company wants people to notice) is always placed at the center (e.g. new products). Plus, different sections of information are placed into boxes and the headings are often highlighted in a different shade, which makes the distinction even clearer.
  
• Typography: I especially love the typography here as everything is consistent, readable and even the spacings between the letters make it look very pleasing.
• Others: I like it that everything I want to find out about the products are very easy to find. Firstly, the navigation at the top is very clearcut - there is no ambiguity in it. I also like that there is a search option, so that in the event that people still cannot find what they are looking for, they can just use the search function.

Did the website use CSS?

Yes. After reading through some of the source code, CSS was done for the navigation bar and also for the display of text. The body text throughout the website has a consistent font and color and the hyperlinks also have its own color set. CSS was also used for the proper positioning of the elements (e.g. side bar, main content etc).



Crumpler

Next, it would be the Crumpler website.



Applying Principles of Visual Communication

• Color: The theme of the website is that of a "real-life store", complete with shelves and table top for the cash register. I think that the website achieved this theme well with the color scheme - e.g. the main shelve area where the products are displayed has a white/plain background, which is mostly the case in stores so that the background will not distract the consumers from the product.
• Gestalt: The products are placed across the website in a horizontal manner (albeit level by level). There might not be much of a practical explanation for this, but I guess it makes it more readable and neater for the people to read.

Did the website use CSS?

No, since the website was fully built in Flash. It is good, in my opinion, because it is very engaging in terms of the animation and the functionality of the website (displaying the price tags, sorting of the products according to type & price, having a search bar and even having a 'cash register' at the bottom of the page for us to keep track of the total cost). I also find that the theme of the website was very fun/unique/interesting and energetic, much like what the company actually wants to portray - the kind of fun, energetic, youthful and vibrant culture for the consumers.


Pixar

Finally, another website which I found to be good is the Pixar Animation Studios website.



Applying Principles of Visual Communication

• Color Scheme: White was used as the background and much of the website's fitted the "white, clean and classy" look. For example, the navigation was just a plain white, which (to me) made it all the more clean. It wouldn't have been as effective if the background of the navigation bar wasn't white.
• Layout/Gestalt: Everything was organized very neatly and very much simply - with just the navigation on top, main content in the middle and perhaps another sub content horizontal bar for additional interesting news (only in the homepage). It makes it very straightforward and easy to read.
• Style: The style of the website can be said to be clean and minimalist - which is a style I very much appreciate if done well.

Did the website use CSS?

No, the website didn't use much CSS, except for perhaps some of the formatting of the text (which didn't take up much of the website because it was mostly constructed with images). The layout of the website was mostly done using HTML tables.
I guess the good thing about the website was that it was clean and concise - achieving its purpose of introducing the public of their projects and their company's history.


II.

What are the advantages of using CSS?

CSS makes it more manageable for the website designer to design the website (also for the webmaster etc) because the layout and text style are already done in css, so there is no need to keep on using the HTML tags for every single chunk of text - which also significantly reduces file size.

On further research to the topic of CSS, I found out that it makes loading of the page faster too as the browsers cache the stylesheet page (http://www.plus2net.com/html_tutorial/css-adv.php).

A disadvantage, however, would be that CSS may not work consistently in different browsers.


III.

What is Woff? What are the advantages of using Woff? Any disadvantages? Find 2 good websites which apply Woff. Elaborate how Woff is used in the websites.

Woff stands for Web Open Font Format. It is a font format for use in web pages (developed by Mozilla), whereby people design fonts, save or convert them to WOFF and then use other technologies (e.g. HTML, CSS) to tell browsers which fonts to download and apply.

For more info, check out Wikipedia here, and w3 here.

Advantages:

• The font data is compressed, hence websites will use less bandwidth and loads faster.
• More fonts can be available to designers since there are more licenses for WOFF formats.
• It has the potential of becoming universal and an interoperable font format for the web (since it is gaining in popularity).
• (more info visit here)

Disadvantages:

I suppose it would be problematic if the server which supplies the fonts goes down.

2 good websites:

So far, I haven't been able to really find good websites that employ Woff. However, I did manage to find some demo sites that employ Woff (although sad to say that I wasn't able to load some of the fonts in some websites).

Here they are:
demo1
demo2
demo3

Magical Me

The term "magical" came into my mind when I was thinking of the video effects that we'll need to be doing later on in the module (and was trying really hard to come up with a cool name for this module's blog). Then I just thought about Lucasfilm's Industrial, Light and Magic department that makes the special effects of movies, and I thought "Hey, MAGIC!"

It's quite a pretty apt term to describe NM3208, or even new media for that matter, because it's dynamic. People get to interact with one another on the web and get to see video effects that otherwise won't be able to achieve in the real physical world.


Oh, and the "ME" does not necessarily need to be about me. "Me" can also be short for "media".

Haha, smart right?

XD