SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013.

SE 372: Web Page Design: HTML5

Week 11: Rich MediaCopyright © Steven W. Johnson

February 1, 2013

Multimedia

Canvas

SVG

Today:

2

What’s a codec?

3

xxxfile types

<audio autoplay="autoplay" controls="controls"> <source src=“audio.ogg" /> <source src=“audio.mp3" /> <a>Download this file.</a> <a href=“audio.mp3”>Download the MP3 version</a></audio>

Audio and HTML5:

4

HTML4 relied on 3rd party plugins for multimedia

HTML5: plan was to not do that

<audio> and HTML5: cascading support for audio file types


Audio and HTML5:

5

Current (2014) support:

Firefox: .ogg

Webkit: .mp3

Opera (pre-10): .wav only


Plays first file typeit understands

Video and HTML5:

6

Current (2014) support:

Safari, IE9: H.264

Firefox: Theora open source codec

Opera: Vorbis (firefox and opera: theora and vorbis)_

Chrome: .ogg and .mp4

Set type type to save the browser from doing this work<video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is old. Kill it quickly.<a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p></video>

Plays first file typeit understands

Video and HTML5:

7

Other video stuff:

Preload attribute

Controls displays controls

<video preload><video preload controls>

Audio and HTML5:

8

Do you really mean it?

Audio can be major annoyance (rahatsız etmek)

Typically use .mp3 file type (.wav or .ogg)

May or may not be streamed (akım)

Problem:

file size

distraction

Audio and HTML5:

9

Both placed in <head>:

Audio played in background (no controls)

Browser controls, appearance varies (embedded)

<audio src=“myfile.mp3” type=“audio/mpeg” controls></audio>

<audio src=“myfile.mp3” type=“audio/mpeg” autoplay></audio>

Audio and HTML5:

10

Audio support:

no universal agreement on anything

MP3 WAV OGG

Chrome Yes No Yes

Firefox No Yes Yes

IE 9 Yes No No*

Opera No Yes No

Safari Yes No Yes

Audio and HTML5:

11

Due to file sizes, preloading is a good idea

Add ‘preload’ attribute

<audio src=“myfile.mp3” preload controls></audio>

Video and HTML5:

12

More of the same pain continued

Really??? Must you?

YouTube is bad enough, this is video (even worse)

No one wants to watch your stinking video

Currently, Firefox and IE do not support

<video src=“file.mp4” controls preload=“auto”></video>

Video and HTML5:

13

Browser support is a problem:

no universal agreement on anything

H.264 = .mp4 and .mov

H.264 OGG WebM 3GP

Chrome No Yes Yes No

Firefox No Yes ??? No

IE 9 No* No No* Yes

Opera No Yes Yes No

Safari Yes No No Yes

Safari Mobile No No No Yes

Extensions change the browser itself

Plugins allow the browser to do more things

Plugins and extensions:

14

Adds abilities to a larger application

Plugin uses (browser):

video

audio

flash

virus scanners

display Office documents

3rd party libraries

plugins embedded into page (<embed> or <object>)

Plugins:

15

Similar idea

Extensions are usually added toolbars

Mozilla: Add-ons (plugins and extensions)

Extensions are additional features:

Toolbars

New menus

New tabs in an interface

Extensions:

16

Allows ‘core program’ to be small

Add ‘extra’ functions that you need via plugins

The debate points:

Plugins are less reliable

Unknown author (support, liability, security, reliability)

No brand to associate with

Plugins:

17

Rich media = multimedia

First there was text (Cern, circa 1991)

Then there was images (1993)

Then there was FutureSplash (1996)

First successful version

Rich media:

18

FutureSplash: a multimedia plug-in

Proprietary; not an open specification

RealPlayer

QuickTime

many others

Rich media:

19

Flash:

succeeded because it did a unique job well

plug-in: no cross-browser issues

issue today: do we want plug-ins?

Rich media:

20

Rich media:

21

Flash:

animation/multimedia tool in vector graphics*

Issues with Flash:

myth #8: Flash is dead

myth #10: Browser vendors control HTML5

Do we want proprietary technologies?

Flash:

time-based content; built on a timeline

paradigm: animators (Walt Disney)

combines vector graphics, bitmaps, audio

Apple: no support for Flash on iPhone, iPad

Rich media:

22

Rich media:

23

Flash versus Silverlight:

Silverlight time-based

Silverlight uses XAML (larger) and .NET

Rich media:

24

Silverlight, Flash are proprietary:

challenges to accessibility

challenge to device independence

challenge to data portability

don’t work well with other standards

can promote interoperability

money and access issues

Rich media:

25

Many mobile devices will not play Flash

Workaround for all media:

<object width=“300” height=“200” type=“application/x-shockwave-flash” data=“http://www.youtube.com/video”><embed src=…></object>

<iframe src=http://www.youtube.com/video” style=“max-width: 100%;”></iframe>

Rich media:

26

‘Old code” (issues with HTML5):

Workaround for all media (HTML5):

<object width=“300” height=“200” type=“application/x-shockwave-flash” data=“http://www.youtube.com/video”><embed src=…></object>

<iframe width="560" height="315" src="http://www.youtube.com/embed/oiSn2JuDQSc" frameborder="0" allowfullscreen></iframe>

Rich media:

27

Embed YouTube:

find the movie

‘Share’ the movie

click ‘embed’

copy link (http:?)

Lab: multimedia

28

Open ‘multimedia’ folder

Insert ‘Jinglebells’ as background music

Insert ‘Onuncu_Yil_Marsi’ as embedded music

Embed a YouTube (find your own)

Forget all of this; don’t use multimedia

Break 29

SVG and Canvas:

30

Two new image types

Vision: eliminate plug-ins and use SVG, canvas

SVG NOT part of HTML5 (brought up at same time)

Both are programming APIs that create images

SVG: vector-based images, XML file format

Canvas: pixel-based images, JavaScript

http://en.wikipedia.org/wiki/Vector_graphics

SVG and Canvas:

31

SVG:

good for data charts

resolution-independent graphics

interactive animated user interfaces

vector image editing

scales well

light footprint

slow to draw


SVG and Canvas:

32

Canvas:

defined shapes edited using JavaScript

‘primitive form of Flash’

larger footprint than SVG

make games and use logic in image

no DOM nodes (large images run faster)

limited pre-defined shapes

Canvas:

33

Experimental/undefined area of HTML

Original developer: Apple

Pixel-based API (renders fast, poor scaling)

Images defined as geometric shapes

Major features:

stroke and fill color

patterns and gradients

lines

rectangles

paths (curves)

text

transformations (scale, rotate, etc)

Canvas:

34http://www.w3schools.com/tags/ref_canvas.asp

Canvas:

35

Create 3D games using JavaScript (OpenGL)

Creates interactive graphics, applications, games

http://canvasrider.com

Canvas:

36

Canvas:

37

For HTML5 compatible browsers only

Other browsers ignore

new browsers: show image

old browsers: show alternate content

<canvas id=“myid” width=“400” height=“400”><p>Your browser is not HTML5 compatible</p></canvas>

<canvas id=“myid” width=“400” height=“400”><img src=“myimage.png”> //.png equivalent</canvas>

Canvas:

38

Addressing comes from upper left corner

x x x

Y

Y

Y

IP.

.EP

Canvas:

39

A bitmapped image drawn using “JavaScript”

like GD2 from PHP, OpenGL

Define a canvas size, color

Draw regular geometric shapes from UL corner

shape.fillRect(10,15,100,200)

X position

height

width

Y position .

.shape.fillStyle=“rgb(51, 153, 51)”;

Canvas:

40

Shapes are a collection of pixels

Most shapes: use paths (lines) as edges

“Create” shapes using beginPath(), closePath();

.

.

. .

.

beginPath()start:

moveTo

continue:lineTo

continue:lineTo

continue:lineTo

continue:lineTo

closePath()

Canvas:

41

Ellipses/ovals are a collection of pixels

quadraticCurveTo(), bezierCurve To()

arc()

Canvas:

42

function draw() { var canvas = document.getElementById('canvas').getContext('2d'); canvas.fillStyle = "rgb(200,0,0)"; canvas.fillRect (10, 10, 55, 50); canvas.fillStyle = "rgba(0, 0, 200, 0.5)"; canvas.fillRect (30, 30, 55, 50);

canvas.beginPath(); canvas.moveTo(10, 10); canvas.lineTo(90, 90); canvas.strokeStyle = "rgb(0,200,0)"; canvas.stroke();}

Write function that makes image

retrieve canvas from DOM node (rename)

test browser support

define context (“2d”or “experimental-webgl”)

create shapes (color, shape & location)

Canvas:

43

Canvas resources:http://dev.opera.com/articles/view/html-5-canvas-the-basics

https://developer.mozilla.org/En/Canvas_tutorial

http://html5doctor.com/video-canvas-magic

www.canvasdemos.com

www.netmagazine.com/tutorials/learning-basics-html5-canvas

Create this image in canvas:

white canvas (300 x 300 px)

green square (200px)

centered on canvas

draw red line

Lab: draw

44

Steps:

define/determine all sizes/dimensions

create the canvas

draw the square

draw the line

Lab: draw

45

Lab: draw

46

<html> <head> </head> <body> <canvas id="canvas" width="300" height="300"> <img src=“fallback.png”> </canvas> <p>Here is some text on the page</p> </body></html>

First steps:

define canvas (id, size of image)

define fallback image

Lab: draw

47

<script> function draw() {

} window.onload=draw;</script>

Define the function:

Lab: draw

48

canvas = document.getElementById('logo').getContext('2d'); canvas.fillStyle = "rgba(0, 255, 0)"; canvas.fillRect (50, 50, 200, 200); canvas.beginPath(); canvas.moveTo(50, 50); canvas.lineTo(250, 250); canvas.strokeStyle = "rgb(255, 0, 0)"; canvas.stroke();

Write the code

Done! Test in browser


red oval (200 x 100px)

green square (200px)

blue equilateral triangle (200px tall)

centered on canvas

Lab: logo

49


corner of square is center of oval

top of triangle is middle of side of square

20 pixels between image border and shapes

Lab: logo

50

Calculate the image definitions:

Lab: logo

51

20px

20px

100px

200px


Lab: logo

52

100px

200px

20px


Lab: logo

53

20px

200px

200px


Lab: logo

54

100px

20px

20px

200px

200px

205010

020

0

2039

0

Canvas

height:


Lab: logo

55

200px20px


Lab: logo

56

200px20px

200px


Lab: logo

57

20px

200px

200px

What is the size of the triangle?

equilateral

opposite side 200 pixels tall

hypotenuse 2x adjacent

x2 + 200px2 = 2x2

200px / √3 = 115

Lab: logo

58

60°

200px

x

2x

1

2√3

115px


Lab: logo

59

20px

200px

115px


Lab: logo

60

200px

20px

20px

200px

115px

Canva

s

width:20100

200

115

20455


Lab: logo

61

455px

390px

(√5*100)/2 = 113


Lab: logo

62

100px

200px

20px

20px

200px

200px

205010

020

0

2039

0

Canvas

height:

width: 20100

200

115

20455

(√5*100)/2 = 113

Draw the canvas:

Lab: logo

63

455px

390px

Create folder ‘canvas’

Create HTML5 file ‘logo.html’. Save locally

Lab: logo

64

<!DOCTYPE html><html> <head> <meta charset=“utf-8”> <title>Logo Lab: Steve Johnson</title> </head> <body></body></html>

Code to make background:

background defined in canvas tag

graceful degradation with image (<img>)

call the function using JavaScript

Lab: logo

65

<script> function draw() {

} window.onload=draw;</script></head><body> <canvas id="logo" width="455" height="390"> <img src="backup.png" width="453" height="390" alt="Logo image" title="Logo image"> </canvas></body>

Start from back of image:

draw the red ellipse

Lab: logo

66

120, 70200, 100

Ellipse is not regular shape

Several methods to draw; our method: 2 curves

Bezier curves:

smallest change in curve point-to-point

Lab: logo

67

100px

200px20px

20px

Pierre Bézier: (1910 – 1999) and Bézier curve (1968)

Developed to draw automobile designs (Renault)

Basis for curves in CAD and computer graphics

Used in Photoshop, Illustrator, etc.

Lab: logo

68

Draws polynomial shapes

Lab: logo

69

Use 2 Bézier curves (right, left)

Need to know:

center of ellipse (120, 70)

width, height of ellipse (200, 100)

Lab: logo

70

100px

200px

20px

Write the function:

Lab: logo

71

centerX = 120; centerY = 70; width = 200; height = 100; //defines shape critical values canvas = document.getElementById("logo").getContext('2d'); //variable ‘canvas’ now describes the canvas image on the webpage

}

100px

200px

20px

Write the function:

Lab: logo

72

canvas.beginPath(); canvas.moveTo(centerX, centerY - height/2);

canvas.bezierCurveTo( //describe right half of bounding box centerX + width/2, centerY - height/2, //x:y coordinates centerX + width/2, centerY + height/2, centerX, centerY + height/2);

canvas.bezierCurveTo( //describe right half of bounding box centerX - width/2, centerY + height/2, //x:y coordinates centerX - width/2, centerY - height/2, centerX, centerY - height/2); canvas.fillStyle = "red"; canvas.fill(); canvas.closePath();

}

20px

. .

..

.

.


define dimensions

Lab: logo

73

120, 70

320, 270120, 270

320, 70

Code to make green square:

Lab: logo

74

canvas.fillStyle = "rgba(0, 255, 0, .5)"; canvas.fillRect(120, 70, 200, 200);

120, 70

120, 270

320, 70.


define corners and fill

Lab: logo

75

435, 370

320, 170

205, 370

Code to make blue triangle:

Lab: logo

76

canvas.beginPath(); canvas.moveTo(320, 170); //define starting point canvas.lineTo(433, 370); //define second point canvas.lineTo(207, 370); //define third point canvas.closePath(); canvas.fillStyle = "rgba(0, 0, 255, .5)"; canvas.fill();

435, 370

320, 170

205, 370

.

..

Older browsers that don’t do <canvas>?

Make image for graceful degradation

Photoshop

Lab: logo

77

Create new file (390 x 455px, 96 ppi)

Background is transparent

Use ‘Info’ to locate each shape

Use oval marquee:

initial point: 20, 20

size of shape: 200, 100

fill with red

Lab: logo

78

Initialposition

Size ofshape

200px

20px

20px

100px

Create a new layer

Use rectangular marquee:


size of shape: 200, 200

fill with green

Set opacity to 50%

Lab: logo

79

Initialposition

Size ofshape

200px

120px

120px

200px

Use triangle tool

Must know centroid (ağirlik merkezi):

short: 115/200 of long

115*115/200 = 67

also: 2/3 from top

320, 303

Lab: logo

80

200 px

115 px

67 px

133 px

320, 170

Create a new layer

Use polygon tool (3 sides):


end point: 435, 370

fill with blue

set opacity to 50%

Lab: logo

81

Initialposition

Size ofshape

320, 303

435, 370

Flatten layers

Clear the background; color may change

Save in correct format as ‘backup’

Place in ‘canvas’ folder

Open logo.html in your browser

Lab: logo

82

Done! Save code to in-class files

Lab: logo

83

Animation can be done in <canvas>

Required:

describe position of object using variables

create function that updates with time

old image must be erased; new image applied

Command: reqAniFrame

determines frame speed

Lab: animation

84

Big picture stuff:

Lab: animation

85

<script> set variables; (global)

function animate() {

draw(); }

function draw() {

} animate();</script>

<body> <canvas id="animation" width="400" height="400"> </canvas></body>

Variables:

Lab: animation

86

<script> var x = 0; //starting coordinate for x /*x ranges between 0 and 375 */ var y = 15; //starting coordinate for y var speed = 5; //increment size direction = "up"; //add (up) or subtract(down)to x

Animation sequence:

Lab: animation

87

function animate() {

reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ; reqAnimFrame(animate); if (direction == "down") {

x -= speed; //declared in variables } else {

x += speed; }

if (x >= 375) direction = "down"; if (x <= 0) direction = "up"; draw();}

The shape:

Lab: animation

88

function draw() { var canvas = document.getElementById("animation").getContext("2d"); document.getElementById("animation").style.background = "#CCCCCC";

canvas.clearRect(0, 0, 400, 400); //destroys old shape canvas.fillStyle = "#ff00ff"; //creates new shape canvas.fillRect(x, y, 25, 25); //position of new shape}animate();</script>

Use 4 images to create an animation

Does not work in Chrome

Copy ‘birds’ to your desktop; open ‘bird.html’

Lab: birds

89http://canvas-html-5.blogspot.com/2012/12/bird-animated-flying-canvas-html5.htmlhttp://www.sodahead.com

General code layout is the same

Lab: birds

90

<body> <canvas></canvas> <script> //declaring global variables

function animate() { draw(); }

function draw() {

} animate(); </script></body>

http://canvas-html-5.blogspot.com/2012/12/bird-animated-flying-canvas-html5.htmlhttp://www.sodahead.com

Draw() loads 4 different images

Lab: birds

91

<body> <canvas></canvas> <script> //declaring global variables

function animate() { draw(); }

function draw() { bird.src = “bird”+i+“.png”; } animate(); </script></body>


Canvas and global variables

Lab: birds

92

<body> <canvas id="sky" width="600" height="250" style="border:1px solid red;"></canvas>

<script> var x = -100; //initial position var y = 75; //initial position var speed = 2; var i = j = l= 1;


Animate function:

Lab: birds

93

function animate() { reqAnimFrame = window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ; reqAnimFrame(animate);

x += speed; if(x==700) x = -100; //restarts bird at 100 if(l == 4) l=1; //resets image counter draw();}


Draw function:

Lab: birds

94

function draw() { var canvas = document.getElementById("sky"); var context = canvas.getContext("2d");

context.clearRect(0, 0, 600, 250); //empty old view context.beginPath(); var gradient=context.createLinearGradient(300,200,400,-150); gradient.addColorStop(0,"#BADAF6"); gradient.addColorStop(1,"#98C5F8"); context.fillStyle=gradient; //sky gradeint color

var bird = new Image(); //load new image bird.src = "images/bird"+l+".png"; if(x%20 ==0){l++;} //increment “l” counter context.fillRect(0,0, 600, 400); //background first context.drawImage(bird, x, 20); //image on top}


Add call to ‘animate()’

Done!

Lab: birds

95

}

animate();

</script></body></html>


Break 96

SVG and HTML5:

97

Vector Graphics:

uses defined regions of color; not pixels

Advantages:

ability to zoom

file size*

Two forms in HTML:

.svg

<SVG>


SVG and HTML5:

98

Vector Graphics terminology:

fill: ‘inside’ of shape

stroke: ‘edge’ of shape

path: ‘line’

Consistent (same) with other graphic programs

SVG and HTML5:

99

Use of <img> for .svg allowed:

IE: 9.0+

Firefox: 4.0+

Safari: 4.0+

Chrome: 4.0+

Opera: 9.0+

Mobile support except for:

Android <3.0

iOS Safari <4.0

SVG and HTML5:

100

Use of <object> for .svg allowed*:

*Legacy browsers, current conditions may be very different

<object width=300 height=200 type=“svg+xml” data=“filename.svg”> </object>

SVG and HTML5:

101

If use .svg images:

test to see of if .svg supported in <img>

use <object>, define fallback image; gracefullydegrade

<object width=100 height=200 data="your.svg" type=“image/svg+xml”> <img src=“yourfallback.png” alt=“image”> </object>

SVG and HTML5:

102

<object> tag:

holds embedded object; multimedia

content ‘inside’ object will display in place of

<object width=100 height=200 data="your.svg" type=“image/svg+xml”> <img src=“yourfallback.png” alt=“image”> </object>

SVG and HTML5:

103

Other alternatives: <embed>

OLD html, usually used for/with plugins

No fallback, render problems (OLD browsers)

<embed width=“100” height=“200” src=“your.svg”alt=“myimage” title=“myimage”>

SVG and HTML5:

104

Other alternatives: <iframe>

deprecated HTML 4, xhtml

new life in HTML5 as ‘sandbox’

no fallback

set frameborder to 0 if not wanted

<iframe width=“100” height=“200” src=“your.svg”alt=“myimage” title=“myimage”>

SVG and HTML5:

105

Other alternatives: <img>

problem for older browsers

no fallback

<img src=“your.svg” width=“100” height=“200” alt=“myimage” title=“myimage”>

SVG and HTML5:

106

SVG elements are part of DOM

Access through DOM; Style

Create a simple SVG image

<svg xmlns=http://www.w3.org/2000/svg width=“400px” height=“400px”>

</svg>

SVG and HTML5:

107

Basic shapes:

rect

circle

ellipse

line

polyline

polygon

SVG and HTML5:

108

A simple image:

<svg xmlns=http://www.w3.org/2000/svg width=“400px” height=“400px”><rect fill=“blue” stroke=“red” x=“150” y=“150” width=“125” height=“75”></svg>

SVG and HTML5:

109

A simple image:

<svg xmlns=http://www.w3.org/2000/svg width=“400px” height=“400px”><circle fill=“#B9B9B9” stroke=“red” cx=“151” cy=“151” r=“150”></svg>

SVG and HTML5:

110

Coloring with XML definitions:

<svg xmlns=http://www.w3.org/2000/svg width=“400px” height=“400px”><defs> <linearGradient id=“MyGradient” gradientTransform=“rotate(45)”> <stop offset=“0%” stop-color=“#B9B9B9” /> <stop offset=“50%” stop-color=“#FF0000” /> <stop offset=“100%” stop-color=“#00FF00” /> </linearGradient></defs><circle fill=“url(#MyGradient)” cx=“151” cy=“151” r=“150”></svg>

SVG and HTML5:

111

Coloring with XML definitions

Create this image as svg

Use ‘svg’ folder (image found inside)

Lab: svg

112

400px

400px

25px 25px

Rectangle: centered vertically

Right edge in middle of window

175 pixels wide

76 pixels tall

Red-green

Lab: svg

113

400px

400px

25px 25px

Circle: centered vertically

Left edge in middle of window

175 pixels wide

Green-blue

Lab: svg

114

400px

400px

25px 25px

Initial code:

Lab: svg

115

400px

400px

25px 25px

<!DOCTYPE html><html> <head> <meta charset=“utf-8”> <title>SVG Lab: Steve Johnson</title> </head> <body> </body></html>

Make rectangle, circle:

Lab: svg

116

400px

400px

25px 25px

<body><svg xmlns=“http://www.w3.org/2000/svg” width=“400px” height=“400px”><rect fill=“red” x=“25” y=“162” width=“175” height=“76” /><circle fill=“green” cx=“288” cy=“200” r=“88” /></svg></body>

Define 2 gradients:

Lab: svg

117

<body><defs> <linearGradient id=“rectGradient”> <stop offset=“0%” stop-color=“#FF0000” /> <stop offset=“100%” stop-color=“#00FF00” /> </linearGradient></defs><svg xmlns=“http://www.w3.org/2000/svg” width=“400px” height=“400px”><rect fill=“url(#rectGradient)” x=“25” y=“162” width=“175” height=“76” /><circle fill=“green” cx=“288” cy=“200” r=“88” /></svg></body>

Isn’t red + green = yellow?

Why did we get gray?

Lab: svg

118

255 25500

128

Define 2 gradients:

Lab: svg

119

<body><defs> <linearGradient id=“rectGradient”> <stop offset=“0%” stop-color=“#FF0000” /> <stop offset=“100%” stop-color=“#00FF00” /> </linearGradient></defs><defs> <linearGradient id=“circleGradient”> <stop offset=“0%” stop-color=“#00FF00” /> <stop offset=“100%” stop-color=“#0000FF” /> </linearGradient></defs><svg xmlns=“http://www.w3.org/2000/svg” width=“400px” height=“400px”><rect fill=“url(#rectGradient)” x=“25” y=“162” width=“175” height=“76” /><circle fill=“url(#circleGradient)” cx=“288” cy=“200” r=“88” /></svg></body>

Last step:

Add the backup plan

Lab: svg

120

<body><svg xmlns=“http://www.w3.org/2000/svg” width=“400px” height=“400px”><rect fill=“url(#rectGradient)” x=“25” y=“162” width=“175” height=“76” /><circle fill=“url(#circleGradient)” cx=“288” cy=“200” r=“88” /><img src=“svg.png” width=“400” height=“400” alt=“svg image” title=“svg image”></svg></body>

Play time:

Add another gradient definition

Lab: svg

121

<body><svg xmlns=“http://www.w3.org/2000/svg” width=“400px” height=“400px”><defs> <linearGradient id="MyGradient" gradientTransform="rotate(45)"> <stop offset="0%" stop-color="#FF0000" /> <stop offset="50%" stop-color="#00FF00" /> <stop offset="100%" stop-color="#0000FF" /> </linearGradient></defs><rect fill=“url(#rectGradient)” x=“25” y=“162” width=“175” height=“76” /><circle fill=“url(#MyGradient)” cx=“288” cy=“200” r=“88” /><img src=“svg.png” width=“400” height=“400” alt=“svg image” title=“svg image”></svg></body>

Play time:

Add another gradient definition

Lab: svg

122

<body><svg xmlns=“http://www.w3.org/2000/svg” width=“400px” height=“400px”><defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="#FF0000" /> <stop offset="50%" stop-color="#00FF00" /> <stop offset="100%" stop-color="#0000FF" /> </linearGradient></defs><rect fill=“url(#rectGradient)” x=“25” y=“162” width=“175” height=“76” /><circle fill=“url(#MyGradient)” cx=“288” cy=“200” r=“88” /><img src=“svg.png” width=“400” height=“400” alt=“svg image” title=“svg image”></svg></body>

Done!

Save and check work

Lab: svg

123

Week 7, created pixel-based image map

Include code in .svg image to create image map

SVG image maps

124

Break 125

Create a ‘screensaver’ using <canvas>

‘Bounce’ a unique image (not your friend’s) offthe edges of the image (700w x 375h)

Image moves at 45° trajectory (path)

‘Bouncing’ must happen naturally

Color background with unique gradient

Add border

Assignment: screensaver

126

Create an image using <svg>

Unique image is to include:

rectangle

circle

ellipse

triangle or hexagon or star

Color each item

Use 2 gradients

Assignment: shapezoo

127

SE 372: Web Page Design: HTML5

Week 11: Rich MediaCopyright © Steven W. Johnson

February 1, 2013

Date post:	14-Dec-2015
Category:	Documents
Upload:	lucia-dubbs
View:	215 times
Download:	0 times

SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013.

Documents