720 likes | 752 Views
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
E N D
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 • 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 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: <!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. • 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 • 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 • 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
Film Editing – Tools & Devices (cont.) • Frame Grid • Action Reaction • Cut-Away & Audio L-cut • Establishing Subjective POV
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