Download presentation
Presentation is loading. Please wait.
Published byCharla Green Modified over 9 years ago
1
© Anselm SpoerriDigital Media Production Digital Media Production Digital Media Production Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com
2
© Anselm SpoerriDigital Media Production 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 Content http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week6 http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week6
3
© Anselm SpoerriDigital Media Production 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/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.
4
© Anselm SpoerriDigital Media Production 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
5
© Anselm SpoerriDigital Media Production HTML5 – DOCTYPE | charset | lang | CSS & JavaScript links ‒ HTML5 DOCTYPE: ‒ not case sensitive | version dropped ‒ all browsers recognize shortened DOCTYPE & render in strict mode and deprecated elements will not work ‒ Specify Character Set: ‒ Specify Language: ‒ Script and Link Declarations: type attribute optional
6
© Anselm SpoerriDigital Media Production HTML5 – New Elements New Media Elements sound content video or movie multiple media resources for and container for external application or interactive content (a plug-in) text tracks for and 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; }
7
© Anselm SpoerriDigital Media Production 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.
8
© Anselm SpoerriDigital Media Production HTML5 – Element Flowchart http://html5doctor.com/happy-1st-birthday-us/#flowchart
9
© Anselm SpoerriDigital Media Production 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.
10
© Anselm SpoerriDigital Media Production 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-basicshttp://vimeo.com/videoschool/lesson/4/storyboarding-basics How To Make a Storyboard –http://www.youtube.com/watch?v=65_3bq_0eSYhttp://www.youtube.com/watch?v=65_3bq_0eSY Readings Knight 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/ http://filmmakeriq.com/2010/10/500-storyboard-tutorials-resources/
11
© Anselm SpoerriDigital Media Production 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
12
© Anselm SpoerriDigital Media Production 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
13
© Anselm SpoerriDigital Media Production 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
14
© Anselm SpoerriDigital Media Production Hi – I am in a rush
15
© Anselm SpoerriDigital Media Production Illusion of Motion
16
© Anselm SpoerriDigital Media Production Illusion of Motion
17
© Anselm SpoerriDigital Media Production Motion Out of Frame
18
© Anselm SpoerriDigital Media Production Where Does Boy Reappear? His Direction of Motion? ? ? ? ?
19
© Anselm SpoerriDigital Media Production Direction of Motion Continuity
20
© Anselm SpoerriDigital Media Production Need to Maintain Speed Continuity
21
© Anselm SpoerriDigital Media Production Illusion of Motion
22
© Anselm SpoerriDigital Media Production Illusion of Motion
23
© Anselm SpoerriDigital Media Production Total Shot
24
© Anselm SpoerriDigital Media Production Medium Shot
25
© Anselm SpoerriDigital Media Production Close-up Shot
26
© Anselm SpoerriDigital Media Production Total > Medium > Close-up Spatial Alignment
27
© Anselm SpoerriDigital Media Production Total Shot
28
© Anselm SpoerriDigital Media Production Medium Shot with Poor Spatial Continuity
29
© Anselm SpoerriDigital Media Production Close-up with Poor Spatial Continuity - Jumpy
30
© Anselm SpoerriDigital Media Production Current Location of Focus
31
© Anselm SpoerriDigital Media Production Maintain Location of Focus
32
© Anselm SpoerriDigital Media Production Continuity of Location of Focus
33
© Anselm SpoerriDigital Media Production Line of Sight between Protagonists
34
© Anselm SpoerriDigital Media Production Angle of Line of Sight Continuity
35
© Anselm SpoerriDigital Media Production Camera on Same Side of Line of Sight
36
© Anselm SpoerriDigital Media Production Do not Cross Line of Sight
37
© Anselm SpoerriDigital Media Production Establishing Line of Sight
38
© Anselm SpoerriDigital Media Production Crossing Line of Sight – Seesaw
39
© Anselm SpoerriDigital Media Production Maintaining Angle and Line of Sight
40
© Anselm SpoerriDigital Media Production Camera Again on Same Side of Line of Sight
41
© Anselm SpoerriDigital Media Production Film Editing – Tools & Devices (cont.) Frame Grid Action Reaction Cut-Away & Audio L-cut Establishing Subjective POV
42
© Anselm SpoerriDigital Media Production The Frame Grid
43
© Anselm SpoerriDigital Media Production Action
44
© Anselm SpoerriDigital Media Production Reaction
45
© Anselm SpoerriDigital Media Production Action or Cut-Away
46
© Anselm SpoerriDigital Media Production Reaction or Jump in Time (Audio L-cut)
47
© Anselm SpoerriDigital Media Production Stop The “Argument”
48
© Anselm SpoerriDigital Media Production Direction and Angle of Gaze
49
© Anselm SpoerriDigital Media Production Subjective Point of View
50
© Anselm SpoerriDigital Media Production 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
51
© Anselm SpoerriDigital Media Production Create Illusion of Cause & Effect Sequence Shots Use Continuity Principles Viewers Create Relationships that Do Not Exit in Reality
52
© Anselm SpoerriDigital Media Production Close-up of Face
53
© Anselm SpoerriDigital Media Production Subjective Point of View
54
© Anselm SpoerriDigital Media Production Effect
55
© Anselm SpoerriDigital Media Production Cause?
56
© Anselm SpoerriDigital Media Production Effect!
57
© Anselm SpoerriDigital Media Production Parallel Editing Cut Back and Forth between Different Storylines Creates Illusion of Events Happening at the Same Time Enhances Anticipation or Anxiety
58
© Anselm SpoerriDigital Media Production Two Protagonists
59
© Anselm SpoerriDigital Media Production In Discussion
60
© Anselm SpoerriDigital Media Production Boy
61
© Anselm SpoerriDigital Media Production Rushing Home
62
© Anselm SpoerriDigital Media Production Action
63
© Anselm SpoerriDigital Media Production Reaction
64
© Anselm SpoerriDigital Media Production Really …
65
© Anselm SpoerriDigital Media Production Action
66
© Anselm SpoerriDigital Media Production Reaction
67
© Anselm SpoerriDigital Media Production Really Rushing
68
© Anselm SpoerriDigital Media Production Resolution …
69
© Anselm SpoerriDigital Media Production 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) http://www.scils.rutgers.edu/~aspoerri/Teaching/MPOnline/Video/ –Analyze happens to the focus of attention and which continuity principles are employed.
70
© Anselm SpoerriDigital Media Production 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
71
© Anselm SpoerriDigital Media Production 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
72
© Anselm SpoerriDigital Media Production 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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.