1 / 72

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. Web Design (HTML5, CSS3 ) HTML5 Key New Features CSS3 Key New Features Storyboarding

jetta
Download Presentation

Digital Media Production

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Digital Media Production Digital Media Production Anselm Spoerri PhD (MIT) SC&I @ Rutgers University aspoerri@rutgers.edu anselm.spoerri@gmail.com

  2. 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

  3. 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.

  4. 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

  5. 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>

  6. 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; }

  7. 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. HTML5 – Element Flowchart http://html5doctor.com/happy-1st-birthday-us/#flowchart

  9. 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.

  10. 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/

  11. 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. 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

  13. 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. Hi – I am in a rush

  15. Illusion of Motion

  16. Illusion of Motion

  17. Motion Out of Frame

  18. Where Does Boy Reappear? His Direction of Motion?  ? ? 

  19. Direction of Motion Continuity

  20. Need to Maintain Speed Continuity

  21. Illusion of Motion

  22. Illusion of Motion

  23. Total Shot

  24. Medium Shot

  25. Close-up Shot

  26. Total > Medium > Close-up  Spatial Alignment

  27. Total Shot

  28. Medium Shot with Poor Spatial Continuity

  29. Close-up with Poor Spatial Continuity - Jumpy

  30. Current Location of Focus

  31. Maintain Location of Focus

  32. Continuity of Location of Focus

  33. Line of Sight between Protagonists

  34. Angle of Line of Sight Continuity

  35. Camera on Same Side of Line of Sight

  36. Do not Cross Line of Sight

  37. Establishing Line of Sight

  38. Crossing Line of Sight – Seesaw

  39. Maintaining Angle and Line of Sight

  40. Camera Again on Same Side of Line of Sight

  41. Film Editing – Tools & Devices (cont.) • Frame Grid • Action  Reaction • Cut-Away & Audio L-cut • Establishing Subjective POV

  42. The Frame Grid

  43. Action

  44. Reaction

  45. Action or Cut-Away

  46. Reaction or Jump in Time (Audio L-cut)

  47. Stop The “Argument”

  48. Direction and Angle of Gaze

  49. Subjective Point of View

  50. 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

More Related