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 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 JavaScript Slideshows –CSS: position | z-index | width / height as % of Browser Size –jQuery | Customize Galleria, Galleriffic and Supersized slideshows Programming Concepts JavaScript 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#week4 http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures.html#week4

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

4. © Anselm SpoerriDigital Media Production Image Composition - Rules Rules of Thirds Photoshop Elements – Cropping using Rules of Thirds

5. © Anselm SpoerriDigital Media Production 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. 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

6. © Anselm SpoerriDigital Media Production Image Composition – Principles Subject placement – Rule of Thirds 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 | Dynamic Symmetry

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

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

9. © Anselm SpoerriDigital Media Production Image Composition – Principles Framing Subjects enclosed by frame become emphasized Foreground | Background

10. © Anselm SpoerriDigital Media Production 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

11. © Anselm SpoerriDigital Media Production 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

12. © Anselm SpoerriDigital Media Production 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

13. © Anselm SpoerriDigital Media Production 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

14. © Anselm SpoerriDigital Media Production 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 –6to3 = 216 colors –Affects Illustrations, Drawings more than Photographs –Fireworks has Web-safe Palette

15. © Anselm SpoerriDigital Media Production 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 Artwork Converted into Bitmap using Fireworks Anti-aliasing (smoothing) –Increases file size

16. © Anselm SpoerriDigital Media Production 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

17. © Anselm SpoerriDigital Media Production Save Image for Web RGB Mode 72 ppi Indexed Color Mode Reduced Color Palette –Adaptive Palette Interlaced

18. © Anselm SpoerriDigital Media Production Image Slideshow – CSS, JavaScript and jQuery 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%; JavaScript | jQuery jQuery = JavaScript library that makes JavaScript programming easier

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

20. © Anselm SpoerriDigital Media Production 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?

21. © Anselm SpoerriDigital Media Production 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;

22. © Anselm SpoerriDigital Media Production Programming Concepts – Overview Function : collection of statements to perform specific task function add_scores (score1, score2) { return (score1 + score2); } 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 :)

23. © Anselm SpoerriDigital Media Production JavaScript –Client-side scripting language –Programs embedded as plain text in HTML of Web page, … –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.

24. © Anselm SpoerriDigital Media Production JavaScript – Data Types, Variables, Operators, Statements Data Types – only three primitive data types Boolean: true, false Number: 5, 7.45 String: “Hello World” Variables = 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 = earn1 – spend1 Return value from function: return total

25. © Anselm SpoerriDigital Media Production JavaScript – Arrays Array stores a sequence of items, accessible via an index items = new Array(10); // allocates space for 10 items items = new Array(); // if no size given, will adjust dynamically items = [0,0,0,0,0,0,0,0,0,0]; // can assign size & values [] items.length // 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 }

26. © Anselm SpoerriDigital Media Production JavaScript : Function Functions function name (para1, para2, …) { … } Reusable code that consists of Collection of “statements” Takes one or more values as input “parameters” Returns “result” value function convertToCelsius(f) { var celsius = 5/9 * (f-32); return celsius; } var f = 50; c = convertToCelsius(f);

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

28. © Anselm SpoerriDigital Media Production JavaScript – Some Uses Display information based on Time of Day JavaScript can check the computer's clock and pull the appropriate data based on the clock information. Detect Visitor's Browser this lecture JavaScript can be used to detect the visitor's browser, and load another page specifically designed for that browser. Validate Forms Data next lecture JavaScript 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 JavaScript can be set to execute when something happens, like when a user moves mouse over an image. Create Cookies JavaScript can store information on the visitor's computer and retrieve it automatically next time the user visits your page. Change Page Contents Dynamically JavaScript 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.

29. © Anselm SpoerriDigital Media Production JavaScript – Stored Where Location of JavaScript External file External.js file: must not include any or tags script code Place code here to be available when page loads document.write(" Using JavaScript "); document.write("Hello World. Today is " + Date() ); Places h2 and “Hello World. Today is [current date]” in page where JavaScript is located

30. © Anselm SpoerriDigital Media Production JavaScript Example Hello World document.write("Hello World") ; Your browser doesn't support or has disabled JavaScript. Tasks Change Text and apply h2 tag Add "+ Date()" to text being displayed Add paragraph before and after where JavaScript is inserted http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec4/Steps/HelloWorld.html

31. © Anselm SpoerriDigital Media Production JavaScript and Document Object Model Document Object Model http://en.wikipedia.org/wiki/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.getElementById("id") Reference, Tutorial and Examples http://www.w3schools.com/ jsref/default.asp See Lectures: Week 8 for more resources.

32. © Anselm SpoerriDigital Media Production Document Object Model url = document.links.linkname.href

33. © Anselm SpoerriDigital Media Production Access HREF using JavaScript and DOM Link Test SCI url = document.links.mylink.href ; // variable // document.write('The URL is ' + url); // access DOM // http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec4/Steps/linkJavaScript.html

34. © Anselm SpoerriDigital Media Production JavaScript – Detect Visitor's Browser document.write(navigator.appName); document.write(" "); document.write(navigator.appVersion); document.write(" "); document.write(navigator.userAgent); document.write(" "); http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec4/Steps/BrowserDetect.html More Info: http://www.javascriptkit.com/javatutors/navigator.shtmlhttp://www.javascriptkit.com/javatutors/navigator.shtml

35. © Anselm SpoerriDigital Media Production Image Rollover JavaScript littlecat = new Image(143,83) littlecat.src = "real.jpg" bigcat = new Image(143,83) bigcat.src = "dream.jpg" <img src="real.jpg" name="catpic" onmouseover="document.catpic.src = bigcat.src" onmouseout="document.catpic.src = littlecat.src" /> http://comminfo.rutgers.edu/~aspoerri/Teaching/DMPOnline/Lectures/Lec4/Steps/imagerollover.html