Digital Media Production Anselm Spoerri Ph D MIT

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 4 – Overview Image Composition – Readings | Rules and Principles Image Editing – – Cropping Images | Scaling Images for Slideshows | Adobe TV Demos Color | Web Graphics | Image Formats: GIF, JPEG Java. Script Slideshows – – CSS: position | z-index | width / height as % of Browser Size j. Query | Customize Galleria, Galleriffic and Supersized slideshows Programming Concepts Java. Script and Document Object Model (DOM) – Data Types, Variables, Operators, Statements, Function and Control Structures – Document Object Model (DOM) – Image Rollovers Lectures – Week 4 Content http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures. html#week 4 Digital Media Production © Anselm Spoerri

Image Composition – Readings Course Website - public • Composition Rules • Composition Balance • Flickr: Learn Composition By Example • Digital Photography Tutorials • 10 -Pro-Photography-Tips e. College – private Photographically Speaking: A Deeper Look at Creating Stronger Images by David du. Chemin • Chapter 2 – Elements • Chapter 3 – Decisions Digital Media Production © Anselm Spoerri

Image Composition - Rules of Thirds Photoshop Elements – Cropping using Rules of Thirds Digital Media Production © Anselm Spoerri

Image Composition – Principles Center of Interest – direct attention to primary idea of picture. Viewer’s attention is directed by what subject is looking at and should coincide with center of interest. Digital Media Production © Anselm Spoerri

Image Composition – Principles Subject placement – Rule of Thirds | Dynamic Symmetry Simplicity – One Idea per Image Viewpoint and Camera Angle Study subject from different sides, viewpoints (low, level, high) and angles to establish clear center of interest. Balance – Symmetry | Asymmetrical Digital Media Production © Anselm Spoerri

Image Composition – Principles Shapes and Lines Make Shapes more dominant by placing them against contrasting backgrounds Lines can structure photos. Pattern can create visual rhythms Lighting Morning | Sunset Light and shadows help create mood Digital Media Production © Anselm Spoerri

Image Composition – Principles Texture create Forms | Moods Google Image Search Tone white | gray | black shadings Contrast Tonal | Color Digital Media Production © Anselm Spoerri

Image Composition – Principles Framing Subjects enclosed by frame become emphasized Foreground | Background Digital Media Production © Anselm Spoerri

Image Editing – Photoshop Elements Video Demos – Preparing Images for Slideshow – Resize – Crop: Thumbnail | Rule of Thirds Video Demos – Adobe TV – Overview – Organize – Select & Edit – Text – Effects – Collage & Merge Digital Media Production © Anselm Spoerri

Image Editing – Changing Size Image > Resize > Image Size Select “Constrain Proportions” and “Resample Image” checkboxes Specify Desired Width or Height File > Save As – Select JPEG – JPEG Options: Highest Quality Digital Media Production © Anselm Spoerri

Image Editing – Cropping Image > Crop Aspect Ratio: Use Photo Ratio | Custom – Custom: specify Width and Height Overlay: Rule of Thirds | Golden Ratio File > Save As – Select JPEG – JPEG Options: Highest Quality Digital Media Production © Anselm Spoerri

Color Large Areas = Low Saturation = Subtle color Background / minor elements = Subtle pastel colors Small Areas = High Saturation = Bold color Maximum emphasis = Bold, saturated primary colors Digital Media Production © Anselm Spoerri

Color (cont. ) RGB Color used by Monitor – Direct Light, Not Reflected Indexed Color – Limited Selection of Colors: up to 256 colors – To Reduce File Size – Color not in the Palette is Approximated and “Dithered” Creating Web-Safe Colors – All combinations of 0%, 20%, 40%, 60%, 80%, 100% for Red, Green and Blue – 6 to 3 = 216 colors – Affects Illustrations, Drawings more than Photographs – Fireworks has Web-safe Palette Digital Media Production © Anselm Spoerri

Web Graphics Bitmapped or Raster Graphics – Paint and Photo Programs Object or Vector-based Graphics – Draw and Illustration Programs – Use Mathematical Representation for Shapes – Used to Create Original Artwork Converted into Bitmap using Fireworks Anti-aliasing (smoothing) – Increases file size Digital Media Production © Anselm Spoerri

Image File Formats GIF – – – Cross Platform & Lossless Compression Indexed Colors: few GIFs need all colors, reduce it manually Transparency (so no white box around graphic) Interlacing & Progressive Download Create Animations Best for – Images with Large Areas of Solid Color, Simple Illustrations – Small Photos or thumbnails JPEG – – – Cross Platform & LOSSY Compression Progressive JPEG No transparency No Animation Best for – Photos: Millions of Colors and Subtle Changes Digital Media Production © Anselm Spoerri

Save Image for Web RGB Mode 72 ppi Indexed Color Mode Reduced Color Palette – Adaptive Palette Interlaced Digital Media Production © Anselm Spoerri

Image Slideshow – CSS, Java. Script and j. Query CSS Properties position property of an element – position: static; default | appear in document / linear flow – position: relative; positioned relative to its normal position – position: absolute; positioned relative to first non-static parent – position: fixed; relative to browser window Learn CSS Positioning in 10 Steps z-index property – specifies stack order of an element width / height as % of Parent – width: 50%; height: 75%; Java. Script | j. Query = Java. Script library that makes Java. Script programming easier Digital Media Production © Anselm Spoerri

Image Slideshow – Galleria | Galleriffic | Supersized Galleria http: //galleria. io/themes/classic/ | Demo Width: % to width of slideshow. DIV Thumbnail: scaled versions of large images Galleriffic http: //www. twospy. com/galleriffic/example-5. html | Demo Widest Image: specifies width of slideshow Highest Image: specifies height of slideshow Width to use: 500 px Thumbnail: 75 px x 75 px Supersized http: //www. buildinternet. com/project/supersized/ | Demo Screen filling High Resolution Images Width to use: 1200 px Thumbnail: scaled image and still high resolution Digital Media Production © Anselm Spoerri

Key Programming Concepts data types numbers, text, boolean (true, false) variable = container of data array = collection of data organized in a sequence statement = combination of variables, operators and data group of statements function = collection of statements to perform specific task perform test: true or false if (test) then for loop: where do we start? when are done? how to continue? Digital Media Production © Anselm Spoerri

Programming Concepts – Overview Data Types: such as numbers, text, boolean (true, false) ‒ Integer | Boolean | Character | String | Floating-Point ‒ Array: [5, 4, 7] (use FOR loop to examine each array item) Variable: is way to symbolically to refer to data content ‒ scores = [5, 4, 7]; Operators: can be used to perform built-in operations ‒ 5 +5; (where + is addition operator) Statement: combination of variables, operators and data ‒ total = 12 * monthly_average; Digital Media Production © Anselm Spoerri

Programming Concepts – Overview Function: collection of statements to perform specific task function add_scores (score 1, score 2) { return (score 1 + score 2); } total = add_scores (3, 4); Conditional Programming used so that operations are performed only if certain condition is met: ‒ IF test (only do something if certain condition is true) ‒ FOR loop (keep doing something only if certain condition is true) ‒ WHILE loop (keep doing something until certain condition not true anymore) Debugging code is essential part of programming. . . chasing typos, missing parentheses : ) Digital Media Production © Anselm Spoerri

Java. Script – Client-side scripting language – Programs embedded as plain text in HTML of Web page, <script type="text/javascript"> … </script> – Since text, viewable to the world and for security reasons, scripts are limited in what they can do – Browser executes program as it loads page, integrating dynamic output of program with static content of HTML – Used to access to elements of HTML document. – Validate form data – Create dynamic user interaction such as checking email address validity in input forms and interactive page elements … – Major implementation differences between different browsers. Digital Media Production © Anselm Spoerri

Java. Script – Data Types, Variables, Operators, Statements Data Types – only three primitive data types Boolean: true, false Variables Number: 5, 7. 45 String: “Hello World” = holds value of specific data type – sequences of letters, digits, and underscores – start with a letter or underscore – variables names are case-sensitive sci_550 = true; create variable sci_550 and set it to true var count = 100; create variable count and set it to 100 Operators count = 15 + 8 - 7 count += 5 n++ count = 5 * temp “Hello” + “World” Statements Instructions end with semicolon … If missing, automatically inserted Assignment : total = earn 1 – spend 1 Return value from function: return total Digital Media Production © Anselm Spoerri

Java. Script – Arrays Array stores a sequence of items, accessible via an index items = new Array(10); items = new Array(); // allocates space for 10 items // if no size given, will adjust dynamically items = [0, 0, 0, 0]; items. length // can assign size & values [] // the number of items in the array To access array element, use [index] for (i = 0; i < items. length; i++) { document. write(items[i] + " "); // displays elements } Digital Media Production © Anselm Spoerri

Java. Script : Functions function name (para 1, para 2, …) { … } Reusable code that consists of Collection of “statements” Takes one or more values as input “parameters” Returns “result” value function convert. To. Celsius(f) { var celsius = 5/9 * (f-32); return celsius; } var f = 50; c = convert. To. Celsius(f); Digital Media Production © Anselm Spoerri

Java. Script : Control Structures Sequential top to bottom Conditional if (test) { … } else { … } Repetition for (i=0; i<100; i++) { … } Boolean Operators x == y x != y x>y x <= y x && y x || y !x true if x and y are equal true if x and y are not equal true if x is greater than y true if x is smaller than or equal to y true if both x and y are true if either x or y is true is false Digital Media Production © Anselm Spoerri

Java. Script – Some Uses Display information based on Time of Day Java. Script can check the computer's clock and pull the appropriate data based on the clock information. Detect Visitor's Browser this lecture Java. Script can be used to detect the visitor's browser, and load another page specifically designed for that browser. Validate Forms Data next lecture Java. Script can be used to validate form data at the client-side saving both the precious server resources and time. Add Interactivity to Website this lecture Java. Script can be set to execute when something happens, like when a user moves mouse over an image. Create Cookies Java. Script can store information on the visitor's computer and retrieve it automatically next time the user visits your page. Change Page Contents Dynamically Java. Script can change the display of content without the involvement of server programs. It can read and change the content of an HTML elements or move them around pages. Digital Media Production © Anselm Spoerri

Java. Script – Stored Where Location of Java. Script External file <script type="text/javascript" src="script. js"></script> External. js file: must not include any <script> or </script> tags <head> <script type="text/javascript“>script code</script> Place code here to be available when page loads <body> <script type="text/javascript"> document. write("<h 2>Using Java. Script</h 2>"); document. write("Hello World. Today is " + Date() ); </script> Places h 2 and “Hello World. Today is [current date]” in page where Java. Script is located Digital Media Production © Anselm Spoerri

Java. Script Example <html> <head><title>Hello World</title></head> <body> <script type="text/javascript"> document. write("Hello World") ; </script> <noscript> Your browser doesn't support or has disabled Java. Script. </noscript> </body> </html> Tasks • Change Text and apply h 2 tag • Add "+ Date()" to text being displayed • Add paragraph before and after where Java. Script is inserted http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec 4/Steps/Hello. World. html Digital Media Production © Anselm Spoerri

Java. Script and Document Object Model http: //en. wikipedia. org/wiki/Document_Object_Model Platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents. Examples – – document. write() document. images[0] document. links. linkname. href document. get. Element. By. Id("id") Reference, Tutorial and Examples http: //www. w 3 schools. com/jsref/default. asp See Lectures: Week 8 for more resources. Digital Media Production © Anselm Spoerri

Document Object Model url = document. links. linkname. href Digital Media Production © Anselm Spoerri

Access HREF using Java. Script and DOM <html> <head><title>Link Test</title></head> <body> <a id="mylink" href="http: //comminfo. rutgers. edu">SCI</a> <script> url = document. links. mylink. href ; // variable // document. write('The URL is ' + url); // access DOM // </script> </body> </html> http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec 4/Steps/link. Java. Script. html Digital Media Production © Anselm Spoerri

Java. Script – Detect Visitor's Browser <body> <script type="text/javascript"> document. write(navigator. app. Name); document. write(" "); document. write(navigator. app. Version); document. write(" "); document. write(navigator. user. Agent); document. write(" "); </script> </body> http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec 4/Steps/Browser. Detect. html More Info: http: //www. javascriptkit. com/javatutors/navigator. shtml Digital Media Production © Anselm Spoerri

Image Rollover Java. Script <head> <script type="text/javascript" language="Java. Script"> littlecat = new Image(143, 83) littlecat. src = "real. jpg" bigcat = new Image(143, 83) bigcat. src = "dream. jpg" </script> </head> <body> <img src="real. jpg" name="catpic" onmouseover="document. catpic. src = bigcat. src" onmouseout="document. catpic. src = littlecat. src" /> </body> http: //comminfo. rutgers. edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec 4/Steps/imagerollover. html Digital Media Production © Anselm Spoerri