CSS and Multimedia Components

1. CSS and Multimedia Components INSY211 Feng Liu Ph.D.

2. Outline • Cascading Style sheet • Inline style / Internal style / external style sheet • Use scheme is a fast way for the quick result • Layer • Position blocks • Z-index: the order of showing layer in Z direction. • <div> </div> • Multimedia Components • 3D/2D interactive media components • Embed Video

3. Cascading Style sheet • A style sheet is a set of instructions that tells a browser how to present HTML elements. • such as what font to use, what size the paragraph text should be, what color the header text should be, whether or not there should be a background color applied to specific elements, and so on. • The three different kinds of style sheet are applied to a Web page in cascading order. • The external linked style sheet is applied first. • The internal embedded style sheet is applied next, taking precedence over the linked style sheet. • The inline style is applied last and takes precedence over the embedded and linked style sheets.

4. Cascading Style sheet • Syntax: selector {property: value; } • External CSS: <link rel="stylesheet" type="text/css" href="styles.css"> • Internal CSS <style> <!-- h1 {color: red;} --> </style> • Inline CSS : <h2 style="color: red;">

5. CSS syntax • selector {property: value} • body {color: black} • p { text-align: center; color: black; font-family: arial } • p.margin {margin: 20% 20% 20% 20% }

6. External style sheet • In html file head: • <link rel=“stylesheet” type=“text/css” href=“main.css” /> • Simply use notepad create a css save type as *.*, enter the “.css” in. • Advantage: when you change one rule, all pages changed automatically

7. Internal style sheet • In the head (doesn't matter put where) <style type = “text/css”> <!- - Img { color: red;…;} - - > </style> • Inline style: • <img src = “….jpg” style = “color: red; border: solid;” /> • Whenever multiple style rule apply to one object, the latest one works

8. Fonts • Font-family • Put multiple choices: • P {font-family: “verdana”, “helvetica”, sans-serif} • First choice, second choice, and generic fonts • Font-weight: normal; bold; • Font-style: italic; oblique; normal; • Font-size: 14px;20px;1em;1.5em;75%; • Line-height:120%; 1.5 (means 1.5*font-size) • All-in-one: p {font: normal 12px/120% “verdana”, “helvetica”, sans-serif}

9. Colors • Color: #ff00cc • Color:rgb(100%,0%30%) • Background: #9fc • Background: url(image.jpg) repeat/repeat-x/repeat-y/no-repeat; fixed

10. Layout with styles • Purpose of using CSS is separate styling rules from content of the pages. To give more flexibility to work well in different browsers, platforms, medias and prints. • More specifically, it is the structure need to be styled.

11. Layers: division • Divide content to logic sections using: <div> • <div class = “nevigation”> <a href = “home.html”>home</a> <a href = “content.html”>content</a> <a href = “contactus.html”>contact us</a> <div class = “dg”> • <div class = “main”>

12. This is a demo The Box Model: Layer • Position boxes: • Static: keep default flow • Specify a coordinates: absolute/relative position/ or browser fix • Special order by Z-index; • Once we know where is should be position, we can control its padding, border, margin, size, alignment, color…etc.

13. Position absolute/fixed elements • #bg {position: absolute; top:250px;left:2%;} • #content {position: absolute; top:0px;left:30%;} • #navigation {position: absolute; top:10px;left:2%;} • #navigation a {display:block} • #bg {position: fixed; top:250px;left:2%;} • #content {position: absolute; top:0px;left:30%;} • #navigation {position: fixed; top:10px;left:2%;} • #navigation a {display:block} Position: top, right, bottom, and left

14. Position offset elements • #bg {position: absolute; top:250px;left:2%;} • #content {position: absolute; top:0px;left:30%;} • #navigation {position: absolute; top:10px;left:2%;} • #navigation a {display:block} • h2,h3{position: relative; left: -25px}

15. Position in 3D by using index and floating elements • Z-index: • #bg {position: absolute; top:250px;left:2%; z-index:1} • #content {position: absolute; top:0px;left:30%; z-index:2} • #navigation {position: absolute; top:10px;left:2%; z-index:3} • Floating object: • #calendar {…. float:right;} • Remove object right to the elements: {clear:right} • Vertical Alignments: • {vertical-align: baseline;middle ;sub;super; top; texttop;bottom; textbottom}

16. … Coming next Multimedia components …

17. Multimedia components • Basic multimedia types and available file formats • Enhance web by adding animation, sounds, video… • Advantages and disadvantages of using multimedia • Technology considerations when using multimedia • Examples of how to embed media component into your webpage

18. Multimedia • The term multimedia refers to a combination of two or more media • Audio • Video • Animation • 3D VR/AR • Other media:

19. Human sensors • Sight  eyes  monitor , HMD … • Sound  ears  Sound card, Speaker • Touch  finger  Haptic device, Joystick • Smell  nose  smoke simulation ?? • Feel  Heart ??? …  Bio-Electric

20. Audio • Can enhance a Web page with speech, music, or other sounds • Helpful to those with vision limitations • Non-streaming: entire file downloaded and stored on disk before playback can begin • Streaming: data is buffered; playback begins as soon as there is enough to play without too many pauses for buffering to catch up

21. Tips for using audio • Be sure that any dialog in audio is also available as text • Some people prefer text • Needed by the deaf  accessibility • keep volume low initially • keep it brief • Give users the control

22. Audio formats for Web

23. Video • A powerful medium, conveying: • Motion • Changing facial expressions • Associated audio • Disadvantage: • Very slow for users with dialup connections • Best for users with broadband connections • Which is approaching half of U.S. households that have Internet connection • Includes most company intranets

24. Tips for recording video • Use a tripod • You get a much better image • The reduction of motion improves compression • Use a neutral background • Better visually, and also improves compression • Get in close to your subject

25. Medium shot

26. Close up shot

27. Extreme close-up – the best

28. Text on a Web page is easier to read than a caption on a video

29. Video formats for the Web

30. Demo: • http://insylinux.mercer.edu/~liu_f/multimedia/movie/

31. Graphic components • 2D graphics • Vector graphics v.s. raster graphic • Animation • Tools: flash, gif creator • 3D graphics • Film –video: adobe primer; final-cut • Animation: 3D max, Maya, Animation Master • Game – interactive : Blender, 3rd party engine • Virtual reality – interactive (VRML, X3D)

32. Vector-based vs. pixel-based formats • Pixel-based format gives the information for every pixel; like a bitmap • Vector-based format lists the shapes, with mathematical descriptions of lines and curves • Vector-based format can be very much more compact, saving storage and speeding downloads • Vector-based format can also improve appearance • Vector-based format permits much better results when images sizes are changed • But: vector-based format doesn’t display automatically in a browser; user must have or download a player

33. Vector-based vs. pixel-based formats (II) • Software packages • Vector • Flash • SVG • PDF • Application • Logo • Raster • Photoshop Jpg • Gif • Photo  raster

34. Comparing pixel-based (top) and vector-based formats

35. Animation • Definition: synthetic apparent motion created through artificial means • Can sometimes be stored more compactly than video, speeding downloads • Offers a richer set of interactions than video • An attention-getter • Good for demonstrating transitions and for explaining complex systems

36. Demo of Flash

37. Performance • How long the loading time should be? • Not 10 Mins But 10 seconds • 10 years ago: a over night-internet connection vs. Today static “online” light • Reduce loading time • Compressing your images, sounds, and videos. • Display image with different technique (Multi-map) • Use Vector instead of Raster graphics • But most vector graphic not standard yet!

38. 3D Animation and interaction • Provides more information and flexibility than the 2D animation we have seen • Many formats; the open standard is Virtual Reality Markup Language (VRML) • H-Anim is the standard for human animation using avatars • X3D is next generation of VRML specified in XML

39. Tour of the Munich Airport Center, in interactive 3D, 1

40. Tour of the Munich Airport Center, in interactive 3D, 2

41. Tour of the Munich Airport Center, in interactive 3D, 3

42. How to embed graphic components to the web • Standard • <img> - supported by all browsers • No- Standard • A plug-in might be needed • <object>: flash file • <embed> : demo of HIV model in VRML • <applet>: not all web browser support • ….

43. Demo • System requirements: • VRML plug-in : http://www.bitmanagement.de/ • Flash plug-in … : http://www.flash.com • Multi-user shared virtual environments • VRML embed example (VRML plug in and shader supported graphics card needed) http://insylinux.mercer.edu/~liu_f/multimedia/vrml/

44. Home work • Project2 and project3 • Using table or layers for layout; stylesheets for fonts and position as well as color chart to give at least two different color schemes match. Typography knowledge need to be applied to the design. • add at least two interactive components on your website to enhance the content present.