Digital Media Production Anselm Spoerri Ph D MIT
- Slides: 72
Digital Media Production Anselm Spoerri Ph. D (MIT) SC&I @ Rutgers University aspoerri@rutgers. edu anselm. spoerri@gmail. com Digital Media Production © Anselm Spoerri
Lecture 6 - Overview Web Design (HTML 5, CSS 3) – HTML 5 Key New Features – CSS 3 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 Content http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures. html#week 6 Digital Media Production © Anselm Spoerri
HTML 5 – Intro Why HTML 5? – – – Reduce the need for external plugins (like Flash) Better error handling More markup to replace scripting HTML 5 should be device independent Based on HTML, CSS, DOM, and Java. Script What is HTML 5 ‒ HTML 5 specification – http: //dev. w 3. org/html 5/spec/ ‒ Officially Working Draft | “living standard” Browser Support for HTML 5 – HTML 5 not yet official standard, no browser provides full HTML 5 support. – But all major browsers continue to add support for new HTML 5 features. – Understanding & implementing features is what matters. Digital Media Production © Anselm Spoerri
HTML 5 – New Capabilities http: //www. w 3 schools. com/html 5/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 Java. Script runs in background without affecting page performance Server-Sent Events page gets automatic updates from server Digital Media Production © Anselm Spoerri
HTML 5 – DOCTYPE | charset | lang | CSS & Java. Script links ‒ HTML 5 DOCTYPE: <!DOCTYPE html> ‒ not case sensitive | version dropped ‒ all browsers recognize shortened DOCTYPE & render in strict mode and 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> Digital Media Production © Anselm Spoerri
HTML 5 – New Elements New Media Elements <audio> <video> <source> <embed> in) <track> sound content video or movie multiple media resources for <video> and <audio> container for external application or interactive content (a plugtext 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; } Digital Media Production © Anselm Spoerri
HTML 5 – 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 (h 1, … h 6). ‒ 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. Digital Media Production © Anselm Spoerri
HTML 5 – Element Flowchart http: //html 5 doctor. com/happy-1 st-birthday-us/#flowchart Digital Media Production © Anselm Spoerri
CSS 3 – Intro http: //www. w 3 schools. com/css 3/default. asp CSS 3 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. 2 D Transforms move, scale, turn, spin and stretch elements. 3 D Transforms format elements using 3 D 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. Digital Media Production © Anselm Spoerri
Storyboarding Videos AFI’s Storyboarding Guide http: //www. youtube. com/watch? v=p. WPjjo. OFIu 8 – – 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_3 bq_0 e. SY Readings Knight Digital Media Center: Storyboarding Story Cookbook: Storyboarding AFI’s Screen Shot Reference Resources website | video http: //filmmakeriq. com/2010/10/500 -storyboard-tutorials-resources/ Digital Media Production © Anselm Spoerri
Exercise 3 – Develop Website with Storyboard for Video Create Storyboard for video to be created in Ex 4 – 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 = 10 px | black border | padding = 10 px Exercise 3 http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Exercises. html#Ex 3 Digital Media Production © Anselm Spoerri
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 Digital Media Production © Anselm Spoerri
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 Digital Media Production © Anselm Spoerri
Hi – I am in a rush Digital Media Production © Anselm Spoerri
Illusion of Motion Digital Media Production © Anselm Spoerri
Illusion of Motion Digital Media Production © Anselm Spoerri
Motion Out of Frame Digital Media Production © Anselm Spoerri
Where Does Boy Reappear? His Direction of Motion? ? Digital Media Production ? © Anselm Spoerri
Direction of Motion Continuity Digital Media Production © Anselm Spoerri
Need to Maintain Speed Continuity Digital Media Production © Anselm Spoerri
Illusion of Motion Digital Media Production © Anselm Spoerri
Illusion of Motion Digital Media Production © Anselm Spoerri
Total Shot Digital Media Production © Anselm Spoerri
Medium Shot Digital Media Production © Anselm Spoerri
Close-up Shot Digital Media Production © Anselm Spoerri
Total > Medium > Close-up Spatial Alignment Digital Media Production © Anselm Spoerri
Total Shot Digital Media Production © Anselm Spoerri
Medium Shot with Poor Spatial Continuity Digital Media Production © Anselm Spoerri
Close-up with Poor Spatial Continuity - Jumpy Digital Media Production © Anselm Spoerri
Current Location of Focus Digital Media Production © Anselm Spoerri
Maintain Location of Focus Digital Media Production © Anselm Spoerri
Continuity of Location of Focus Digital Media Production © Anselm Spoerri
Line of Sight between Protagonists Digital Media Production © Anselm Spoerri
Angle of Line of Sight Continuity Digital Media Production © Anselm Spoerri
Camera on Same Side of Line of Sight Digital Media Production © Anselm Spoerri
Do not Cross Line of Sight Digital Media Production © Anselm Spoerri
Establishing Line of Sight Digital Media Production © Anselm Spoerri
Crossing Line of Sight – Seesaw Digital Media Production © Anselm Spoerri
Maintaining Angle and Line of Sight Digital Media Production © Anselm Spoerri
Camera Again on Same Side of Line of Sight Digital Media Production © Anselm Spoerri
Film Editing – Tools & Devices (cont. ) Frame Grid Action Reaction Cut-Away & Audio L-cut Establishing Subjective POV Digital Media Production © Anselm Spoerri
The Frame Grid Digital Media Production © Anselm Spoerri
Action Digital Media Production © Anselm Spoerri
Reaction Digital Media Production © Anselm Spoerri
Action or Cut-Away Digital Media Production © Anselm Spoerri
Reaction or Jump in Time (Audio L-cut) Digital Media Production © Anselm Spoerri
Stop The “Argument” Digital Media Production © Anselm Spoerri
Direction and Angle of Gaze Digital Media Production © Anselm Spoerri
Subjective Point of View Digital Media Production © Anselm Spoerri
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 Digital Media Production © Anselm Spoerri
Create Illusion of Cause & Effect Sequence Shots Use Continuity Principles Viewers Create Relationships that Do Not Exit in Reality Digital Media Production © Anselm Spoerri
Close-up of Face Digital Media Production © Anselm Spoerri
Subjective Point of View Digital Media Production © Anselm Spoerri
Effect Digital Media Production © Anselm Spoerri
Cause? Digital Media Production © Anselm Spoerri
Effect! Digital Media Production © Anselm Spoerri
Parallel Editing Cut Back and Forth between Different Storylines Creates Illusion of Events Happening at the Same Time Enhances Anticipation or Anxiety Digital Media Production © Anselm Spoerri
Two Protagonists Digital Media Production © Anselm Spoerri
In Discussion Digital Media Production © Anselm Spoerri
Boy Digital Media Production © Anselm Spoerri
Rushing Home Digital Media Production © Anselm Spoerri
Action Digital Media Production © Anselm Spoerri
Reaction Digital Media Production © Anselm Spoerri
Really … Digital Media Production © Anselm Spoerri
Action Digital Media Production © Anselm Spoerri
Reaction Digital Media Production © Anselm Spoerri
Really Rushing Digital Media Production © Anselm Spoerri
Resolution … Digital Media Production © Anselm Spoerri
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. Digital Media Production © Anselm Spoerri
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 Digital Media Production © Anselm Spoerri
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 Digital Media Production © Anselm Spoerri
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 © Anselm Spoerri
Spoerri
Jelaskan tujuan dari pengujian post production
Anselm argument for god
Anselm painter analogy
Ontological argument
Eric fischl net worth
Anselm von canterbury zitate
Jeff wall manet
Anselm vossen
Gaunilo's response to anselm's ontological argument
Joseph beuys pronunciation
Anselm levskaya
Anselm vossen
Konten multimedia adalah
Mit media lab
Media production architects
Recce imedia
Nevion video ipath
Media production architects
Akademis digital adalah
Digital markets and digital goods
Digital data digital signals
Digital data digital signals
E-commerce: digital markets, digital goods
Digital data to digital signal encoding
"key international"
Unique features of digital markets
Compositional mode for digital media
What media habits did teens talk about?
Creative brief
Short workplace messages and digital media
Digital media content providers
Digital media ocr
Digital media value chain
Robbins digital media
Media elements digital
Nine compositional modes in digital media
This refers to the layering of different digital media.
Compositional mode for digital media
What is digital media software
Iab digital media sales certification
Digital media primer
Barry cheetham
Venn diagram about media and information literacy
Digital media introduction
Digital media monetization
Digital media project
Digital media primer
Digital media primer
Powrr ball
Pq media digital out of home
Digital media notes
Differential media vs selective media
Media jadi adalah
Major decisions in advertising
What are the advantages and limitation of people as media
Invasiones en la alta edad media
Alta edad media y baja edad media
Cold media
Differential media vs selective media
A level media vogue
Psv stpm sem 1
Hot media and cold media
Moyens hors média
Wired and wireless media
Perbedaan media jadi dan media rancang
Hot media and cold media
New media vs old media
Scratch.mit.edu
Word mit
Aktivierungsenergie
Werkvergleich mit außentext beispiel
Wechselpräpositionen dativ akkusativ
