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

transcript

SE 372: Web Page Design: HTML5

February 1, 2013

Multimedia

Canvas

Today:

What’s a codec?

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:

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:

Current (2014) support:

Firefox: .ogg

Webkit: .mp3

Opera (pre-10): .wav only

Plays first file typeit understands

Video and HTML5:

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:

Other video stuff:

Preload attribute

Controls displays controls

Audio and HTML5:

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:

Both placed in <head>:

Audio played in background (no controls)

Browser controls, appearance varies (embedded)

Audio and HTML5:

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:

Due to file sizes, preloading is a good idea

Add ‘preload’ attribute

Video and HTML5:

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 and HTML5:

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:

Adds abilities to a larger application

Plugin uses (browser):

virus scanners

display Office documents

3rd party libraries

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

Plugins:

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:

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:

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:

FutureSplash: a multimedia plug-in

Proprietary; not an open specification

RealPlayer

QuickTime

many others

Rich media:

Flash:

succeeded because it did a unique job well

plug-in: no cross-browser issues

issue today: do we want plug-ins?

Rich media:

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:

Flash versus Silverlight:

Silverlight time-based

Silverlight uses XAML (larger) and .NET

Rich media:

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:

Many mobile devices will not play Flash

Workaround for all media:

Rich media:

‘Old code” (issues with HTML5):

Workaround for all media (HTML5):

Rich media:

Embed YouTube:

find the movie

‘Share’ the movie

click ‘embed’

copy link (http:?)

Lab: multimedia

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:

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:

good for data charts

resolution-independent graphics

interactive animated user interfaces

vector image editing

scales well

light footprint

slow to draw

SVG and Canvas:

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:

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

rectangles

paths (curves)

transformations (scale, rotate, etc)

Canvas:

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

Canvas:

Create 3D games using JavaScript (OpenGL)

Creates interactive graphics, applications, games

http://canvasrider.com

Canvas:

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:

Addressing comes from upper left corner

Canvas:

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

Y position .

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

Canvas:

Shapes are a collection of pixels

Most shapes: use paths (lines) as edges

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

beginPath()start:

moveTo

continue:lineTo

closePath()

Canvas:

Ellipses/ovals are a collection of pixels

quadraticCurveTo(), bezierCurve To()

Canvas:

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:

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

Steps:

define/determine all sizes/dimensions

create the canvas

draw the square

draw the line

Lab: draw

First steps:

define canvas (id, size of image)

define fallback image

Lab: draw

} window.onload=draw;</script>

Define the function:

Lab: draw

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

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

Calculate the image definitions:

Lab: logo

205010

Canvas

height:

Lab: logo

200px20px

Lab: logo

200px20px

Lab: logo

What is the size of the triangle?

equilateral

opposite side 200 pixels tall

hypotenuse 2x adjacent

x2 + 200px2 = 2x2

200px / √3 = 115

Lab: logo

width:20100

Lab: logo

(√5*100)/2 = 113

Lab: logo

205010

Canvas

height:

width: 20100

(√5*100)/2 = 113

Draw the canvas:

Lab: logo

Create folder ‘canvas’

Create HTML5 file ‘logo.html’. Save locally

Lab: logo

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

} 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

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

200px20px

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

Draws polynomial shapes

Lab: logo

Use 2 Bézier curves (right, left)

Need to know:

center of ellipse (120, 70)

width, height of ellipse (200, 100)

Lab: logo

Write the function:

Lab: logo

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

Write the function:

Lab: logo

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();

define dimensions

Lab: logo

120, 70

320, 270120, 270

320, 70

Code to make green square:

Lab: logo

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

435, 370

320, 170

205, 370

Code to make blue triangle:

Lab: logo

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

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

Initialposition

Size ofshape

Create a new layer

Use rectangular marquee:

size of shape: 200, 200

fill with green

Set opacity to 50%

Lab: logo

Initialposition

Size ofshape

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

200 px

115 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

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

Done! Save code to in-class files

Lab: logo

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

Big picture stuff:

Lab: animation

function animate() {

draw(); }

function draw() {

} animate();</script>

Variables:

Lab: animation

Animation sequence:

Lab: animation

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

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

<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

<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

Animate function:

Lab: birds

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

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()’

Lab: birds

animate();

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

Break 96

SVG and HTML5:

Vector Graphics:

uses defined regions of color; not pixels

Advantages:

ability to zoom

file size*

Two forms in HTML:

SVG and HTML5:

Vector Graphics terminology:

fill: ‘inside’ of shape

stroke: ‘edge’ of shape

path: ‘line’

Consistent (same) with other graphic programs

SVG and HTML5:

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:

Use of <object> for .svg allowed*:

*Legacy browsers, current conditions may be very different

SVG and HTML5:

If use .svg images:

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

use <object>, define fallback image; gracefullydegrade

SVG and HTML5:

<object> tag:

holds embedded object; multimedia

content ‘inside’ object will display in place of

SVG and HTML5:

Other alternatives: <embed>

OLD html, usually used for/with plugins

No fallback, render problems (OLD browsers)

SVG and HTML5:

Other alternatives: <iframe>

deprecated HTML 4, xhtml

new life in HTML5 as ‘sandbox’

no fallback

set frameborder to 0 if not wanted

SVG and HTML5:

Other alternatives: <img>

problem for older browsers

no fallback

SVG and HTML5:

SVG elements are part of DOM

Access through DOM; Style

Create a simple SVG image

</svg>

SVG and HTML5:

Basic shapes:

circle

ellipse

polyline

polygon

SVG and HTML5:

A simple image:

SVG and HTML5:

A simple image:

SVG and HTML5:

Coloring with XML definitions:

SVG and HTML5:

Coloring with XML definitions

Create this image as svg

Use ‘svg’ folder (image found inside)

Lab: svg

25px 25px

Rectangle: centered vertically

Right edge in middle of window

175 pixels wide

76 pixels tall

Red-green

Lab: svg

25px 25px

Circle: centered vertically

Left edge in middle of window

175 pixels wide

Green-blue

Lab: svg

25px 25px

Initial code:

Lab: svg

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

25px 25px

Define 2 gradients:

Lab: svg

Isn’t red + green = yellow?

Why did we get gray?

Lab: svg

255 25500

Define 2 gradients:

Lab: svg

Last step:

Add the backup plan

Lab: svg

Play time:

Add another gradient definition

Lab: svg

Play time:

Add another gradient definition

Lab: svg

Save and check work

Lab: svg

Week 7, created pixel-based image map

Include code in .svg image to create image map

SVG image maps

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

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

SE 372: Web Page Design: HTML5

February 1, 2013

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

Documents