Digital Media Production

© Anselm SpoerriDigital Media Production

Digital MediaProduction

Digital Media Production

Anselm Spoerri PhD (MIT)SC&I @ Rutgers University

[email protected]@gmail.com


Lecture 6 - Overview

Web Design (HTML5, CSS3)– HTML5 Key New Features

– CSS3 Key New Features

Storyboarding– Videos | Readings | Resources

Exercise 3 – What to Do

Video Editing Principles– Short Movie Example– Basic Film / Video Editing

– Compress Time– Create Illusion of Continuity– Create Illusion of Cause & Effect

Lectures – Week 6 Contenthttp://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week6


HTML5 – Intro

Why HTML5?– Reduce the need for external plugins (like Flash)– Better error handling– More markup to replace scripting– HTML5 should be device independent– Based on HTML, CSS, DOM, and JavaScript

What is HTML5‒ HTML5 specification – http://dev.w3.org/html5/spec/‒ Officially Working Draft | “living standard”

Browser Support for HTML5– HTML5 not yet official standard, no browser provides full HTML5 support.– But all major browsers continue to add support for new HTML5 features.– Understanding & implementing features is what matters.


HTML5 – New Capabilities

http://www.w3schools.com/html5/default.asp

Video specifies standard way to embed video (no plug-in)

Audio specifies standard way to embed audio (no plug-in)

Drag and Drop any element can be draggable what to drag | where to drop | do the drop

Canvas used to draw graphics, on the fly, on web page

SVG supported Scalable Vector Graphics to draw shapes

Geolocation can determine user's position with permission

Web Storage better local storage within browser than cookies

Web Workers JavaScript runs in background without affecting page performance

Server-Sent Events page gets automatic updates from server


HTML5 – DOCTYPE | charset | lang | CSS & JavaScript links

‒ HTML5 DOCTYPE: <!DOCTYPE html>

‒ not case sensitive | version dropped

‒ all browsers recognize shortened DOCTYPE & render in strict modeand deprecated elements will not work

‒ Specify Character Set: <meta charset="UTF-8" />

‒ Specify Language: <html lang="en">

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" />

‒ Script and Link Declarations: type attribute optional

<link rel="stylesheet" href="styles.css" />

<script src="scripts.js"></script>


HTML5 – New Elements

New Media Elements<audio> sound content<video> video or movie<source> multiple media resources for <video> and <audio><embed> container for external application or interactive content (a plug-in)<track> text tracks for <video> and <audio>

New Form Elements–New form controls, like calendar, date, time, email, url, search

New Semantic / Structural Elements‒ header, nav, aside, section, article and footer

‒ Focus on your content and consider semantics of each element

‒ Use div if you need containing element strictly for style purposes

‒ Some older browsers treat new elements like inline elements

header, footer, nav, article, aside, section { display: block; }


HTML5 – New Semantic / Structural Elements

‒ header element‒ Used to contain headline(s) for a page and/or section.

‒ Can contain logos and navigational aids.

‒ nav element‒ Contains major navigation links.

‒ Often contained by header.

‒ aside element‒ Contains related information, such as sidebar or pull-quotes.

‒ section element‒ Contains content that is related or grouped thematically.‒ Only if its content has own self-contained outline (h1,… h6).‒ Do not use simply for styling purposes – use divs and spans instead.

‒ article element‒ Stand-alone content such as a blog entry.

‒ footer element‒ Contains information about a page and/or section.


HTML5 – Element Flowchart

http://html5doctor.com/happy-1st-birthday-us/#flowchart


CSS3 – Intro

http://www.w3schools.com/css3/default.asp

CSS3 backwards compatible, don’t have to change existing designs.

Borders Rounded, add shadow and use image as border.

Backgrounds new background properties and greater control.

Text Effects new features such as text-shadow or word-wrap.

Fonts can use font you like by including font file on server.

2D Transforms move, scale, turn, spin and stretch elements.

3D Transforms format elements using 3D transforms.

Transitions add effect when changing from one style to another, such as on mouseover or mouseout events.

Animations specify CSS style inside @keyframes rule and animation will gradually change from the current style to the new style.

Multiple Columns can create multiple columns for laying out text.

User Interface user can resize elements and other features supported.


Storyboarding

Videos

AFI’s Storyboarding Guidehttp://www.youtube.com/watch?v=pWPjjoOFIu8

–Help you visualize what you want to see in your video or film–Show what the camera is looking at a specific moment–Taxonomy of Shots: Long | Medium | Close-up | Point of View …–Sequence of Camera Shots to Capture Essence of Idea

Vimeo Storyboarding Basics–http://vimeo.com/videoschool/lesson/4/storyboarding-basics

How To Make a Storyboard–http://www.youtube.com/watch?v=65_3bq_0eSY

ReadingsKnight Digital Media Center: Storyboarding website | video

Story Cookbook: Storyboarding video

AFI’s Screen Shot Reference video

Resources http://filmmakeriq.com/2010/10/500-storyboard-tutorials-resources/


Exercise 3 – Develop Website with Storyboard for Video

Create Storyboard for video to be created in Ex4

– Tools to Use to Create Storyboard Frames / Panels– Digital Drawing Tool– Word Text Processing: use Drawing Tool

– Use Jing screen capture tool to create digital image

– Paper & Pencil – Scan or Create Digital Photo

Website– Page Layout uses DIVs and is controlled by External CSS file– Overview Page: Sidebar floating to right– Storyboard Page– Each Frame = DIV that contains Image, Type of Shot, Topic

– margin = 10px | black border | padding = 10px

Exercise 3 http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Exercises.html#Ex3


Video Editing Principles

Video Editing Principles‒ Short Movie Example

‒ Meaning – Basic Film Editing ‒ Compress Time

‒ Create Illusion of Continuity

‒ Create Illusion of Cause & Effect

‒ Parallel Editing

‒ Motivate Cuts


Film Editing – Tools & Devices

Illusion of Motion

Continuity of Direction of Motion & Speed

Total > Medium > Close-up Shot

Continuity of Location of Focus

Continuity of Line of Sight


Hi – I am in a rush


Illusion of Motion


Motion Out of Frame


Where Does Boy Reappear? His Direction of Motion?

? ?


Direction of Motion Continuity


Need to Maintain Speed Continuity


Illusion of Motion


Total Shot


Medium Shot


Close-up Shot


Total > Medium > Close-up Spatial Alignment


Total Shot


Medium Shot with Poor Spatial Continuity


Close-up with Poor Spatial Continuity - Jumpy


Current Location of Focus


Maintain Location of Focus


Line of Sight between Protagonists


Angle of Line of Sight Continuity


Camera on Same Side of Line of Sight


Do not Cross Line of Sight


Establishing Line of Sight


Crossing Line of Sight – Seesaw


Maintaining Angle and Line of Sight


Camera Again on Same Side of Line of Sight


Film Editing – Tools & Devices (cont.)

Frame Grid

Action Reaction

Cut-Away & Audio L-cut

Establishing Subjective POV


The Frame Grid


Action


Reaction


Action or Cut-Away


Reaction or Jump in Time (Audio L-cut)


Stop The “Argument”


Direction and Angle of Gaze


Subjective Point of View


Film Editing - Create Illusion of Continuity

Compress Time by Selecting "Highlights"

Viewer Fills In

"Real time" = "Screen time"

Maintain Continuity for:– Location of Focus– Motion & Speed– Line of Sight– Theme: similarity in subject & background in terms of shapes,

color, texture, motion

Leverage Conventions & Viewer Expectations


Create Illusion of Cause & Effect

Sequence Shots

Use Continuity Principles

Viewers Create Relationships that Do Not Exit in Reality


Close-up of Face


Subjective Point of View


Effect


Cause?


Effect!


Parallel Editing

Cut Back and Forth between Different Storylines

Creates Illusion of Events Happening at the Same Time

Enhances Anticipation or Anxiety


Two Protagonists


In Discussion


Boy


Rushing Home


Action


Reaction


Really …


Action


Reaction


Really Rushing


Resolution …


Short Movie Example

NIKE AD slow– Click on

http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Video/ Please click on “nikeadslow.wmv” link to play video (it may take a while)

– Analyze happens to the focus of attention and which continuity principles are employed.


Summary – Basic Film Editing

Compress Time

Create Illusion of Continuity– Location of Focus– Motion & Speed– Line of Sight– Theme: similarity in subject & background in terms of shapes,

color, texture, motion

Create Illusion of Cause & Effect

Parallel Editing

Motivate Cuts– Any Edit Has Potential of Breaking Illusion of Continuity – Use or Break Conventions & Viewer Expectations– Use Cuts to Create Rhythm– Maintain or Break Continuity As Storyline Requires


Summary – Basic Editing Principles

Continuity of Direction of Motion & Speed

Total > Medium > Close-up Shot


Continuity of Line of Sight


Summary - Create Illusion of Continuity

Compress Time by Selecting "Highlights"

Viewer Fills In

"Real time" = "Screen time"

Maintain Continuity for:– Motion & Speed – Location of Focus– Line of Sight– Theme: similarity in subject & background in terms of shapes, color,

texture, motion

Leverage Conventions & Viewer Expectations

Digital Media Production

Documents

Transcript of Digital Media Production