digital media production n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Digital Media Production PowerPoint Presentation
Download Presentation
Digital Media Production

Loading in 2 Seconds...

play fullscreen
1 / 72

Digital Media Production - PowerPoint PPT Presentation


  • 107 Views
  • Uploaded on

Digital Media Production. Digital Media Production. Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com. Lecture 6 - Overview. Web Design (HTML5, CSS3 ) HTML5 Key New Features CSS3 Key New Features Storyboarding

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Digital Media Production' - jetta


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
digital media production
Digital Media Production

Digital Media

Production

Anselm Spoerri PhD (MIT)

SC&I @ Rutgers University

aspoerri@rutgers.edu

anselm.spoerri@gmail.com

lecture 6 overview
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
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
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 WorkersJavaScript 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 | 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
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
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
HTML5 – Element Flowchart

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

css3 intro
CSS3 – Intro
  • http://www.w3schools.com/css3/default.asp
  • CSS3 backwards compatible, don’t have to change existing designs.
  • BordersRounded, add shadow and use image as border.
  • Backgrounds new background properties and greater control.
  • Text Effects newfeatures 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.
  • Transitionsadd 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
Storyboarding
  • Videos

AFI’s Storyboarding Guide

http://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
  • Readings

Knight Digital Media Center: Storyboardingwebsite | video

Story Cookbook: Storyboardingvideo

AFI’s Screen Shot Referencevideo

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

exercise 3 develop website with storyboard for video
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
  • 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
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
film editing tools devices cont
Film Editing – Tools & Devices (cont.)
  • Frame Grid
  • Action  Reaction
  • Cut-Away & Audio L-cut
  • Establishing Subjective POV
film editing create illusion of continuity
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
Create Illusion of Cause & Effect
  • Sequence Shots
  • Use Continuity Principles
  • Viewers Create Relationships that Do Not Exit in Reality
parallel editing
Parallel Editing
  • Cut Back and Forth between Different Storylines
  • Creates Illusion of Events Happening at the Same Time
  • Enhances Anticipation or Anxiety
short movie example
Short Movie Example
  • NIKE AD slow
    • Click onhttp://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
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 Location of Focus

Continuity of Line of Sight

Summary – Basic Editing Principles
summary create illusion of continuity
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