CSS and Multimedia Components

CSS and Multimedia Components

INSY211

Feng Liu Ph.D.

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

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.

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;">

CSS syntax

selector {property: value} body {color: black} p { text-align: center; color: black; font-

family: arial } p.margin {margin: 20% 20% 20% 20% }

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

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

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}

Colors

Color: #ff00cc Color:rgb(100%,0%30%) Background: #9fc Background: url(image.jpg)

repeat/repeat-x/repeat-y/no-repeat; fixed

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.

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”>

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.

This is a demo

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

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}

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}

… Coming next

Multimedia components …

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

Multimedia The term multimedia refers to a combination

of two or more media Audio Video Animation 3D VR/AR Other media:

Human sensors

Sight eyes monitor , HMD … Sound ears Sound card,

Speaker Touch finger Haptic device,

Joystick Smell nose smoke simulation ?? Feel Heart ??? … Bio-Electric

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

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

Audio formats for Web

Extension Format Name Originator Streaming? Additional software?

.wav Waveform Microsoft No No

.au Sun Audio Sun Microsystems No No

.aiff Audio Interchange

Apple No No

.mid Musical Instrument Digital Interface

International MIDI Association

No No

.mp3 MPEG Audio (Layer 3)

Fraunhofer IIS-A and the ISO

Yes No

.ra Real Audio Real Networks Yes Yes. Available: www.real.com

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

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

Medium shot

Close up shot

Extreme close-up – the best

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

Video formats for the Web

Name File extension

Originator Additional codec?

Streaming? Additional player?

Audio-Video Interlaced .avi Microsoft Yes No No

QuickTime .mov .qt Apple Yes Configurable No

MPEG Video (MPEG-4) .mpg Motion Picture Expert Group

No No No

Flash video .flv Adobe yes yes Yes

Google Video .gvp Google no yes Yes/no

Real Video .ram .rm RealNetworks No Yes – requires server

software

Yes

Demo:

http://insylinux.mercer.edu/~liu_f/multimedia/movie/

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)

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

Vector-based vs. pixel-based formats (II)

Software packages Vector

Flash SVG PDF

Application

Logo

Raster Photoshop Jpg Gif

Photo raster

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

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

Demo of Flash

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!

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

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

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

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

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

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/

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.