se 372: web page design: html5 week 11: rich media copyright © steven w. johnson february 1, 2013
TRANSCRIPT
![Page 1: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/1.jpg)
SE 372: Web Page Design: HTML5
Week 11: Rich MediaCopyright © Steven W. Johnson
February 1, 2013
![Page 2: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/2.jpg)
Multimedia
Canvas
SVG
Today:
2
![Page 3: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/3.jpg)
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>
![Page 4: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/4.jpg)
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 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>
![Page 5: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/5.jpg)
Audio and HTML5:
5
Current (2014) support:
Firefox: .ogg
Webkit: .mp3
Opera (pre-10): .wav only
<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>
Plays first file typeit understands
![Page 6: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/6.jpg)
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
![Page 7: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/7.jpg)
Video and HTML5:
7
Other video stuff:
Preload attribute
Controls displays controls
<video preload><video preload controls>
![Page 8: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/8.jpg)
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
![Page 9: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/9.jpg)
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>
![Page 10: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/10.jpg)
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
![Page 11: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/11.jpg)
Audio and HTML5:
11
Due to file sizes, preloading is a good idea
Add ‘preload’ attribute
<audio src=“myfile.mp3” preload controls></audio>
![Page 12: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/12.jpg)
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>
![Page 13: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/13.jpg)
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
![Page 14: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/14.jpg)
Extensions change the browser itself
Plugins allow the browser to do more things
Plugins and extensions:
14
![Page 15: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/15.jpg)
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
![Page 16: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/16.jpg)
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
![Page 17: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/17.jpg)
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
![Page 18: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/18.jpg)
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
![Page 19: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/19.jpg)
FutureSplash: a multimedia plug-in
Proprietary; not an open specification
RealPlayer
QuickTime
many others
Rich media:
19
![Page 20: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/20.jpg)
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
![Page 21: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/21.jpg)
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?
![Page 22: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/22.jpg)
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
![Page 23: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/23.jpg)
Rich media:
23
Flash versus Silverlight:
Silverlight time-based
Silverlight uses XAML (larger) and .NET
![Page 24: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/24.jpg)
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
![Page 25: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/25.jpg)
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>
![Page 26: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/26.jpg)
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>
![Page 27: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/27.jpg)
Rich media:
27
Embed YouTube:
find the movie
‘Share’ the movie
click ‘embed’
copy link (http:?)
![Page 28: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/28.jpg)
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
![Page 29: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/29.jpg)
Break 29
![Page 30: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/30.jpg)
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
![Page 31: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/31.jpg)
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
http://en.wikipedia.org/wiki/Vector_graphics
![Page 32: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/32.jpg)
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
![Page 33: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/33.jpg)
Canvas:
33
Experimental/undefined area of HTML
Original developer: Apple
Pixel-based API (renders fast, poor scaling)
Images defined as geometric shapes
![Page 34: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/34.jpg)
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
![Page 35: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/35.jpg)
Canvas:
35
Create 3D games using JavaScript (OpenGL)
Creates interactive graphics, applications, games
http://canvasrider.com
![Page 36: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/36.jpg)
Canvas:
36
![Page 37: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/37.jpg)
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>
![Page 38: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/38.jpg)
Canvas:
38
Addressing comes from upper left corner
x x x
Y
Y
Y
IP.
.EP
![Page 39: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/39.jpg)
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)”;
![Page 40: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/40.jpg)
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()
![Page 41: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/41.jpg)
Canvas:
41
Ellipses/ovals are a collection of pixels
quadraticCurveTo(), bezierCurve To()
arc()
![Page 42: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/42.jpg)
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)
![Page 43: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/43.jpg)
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
![Page 44: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/44.jpg)
Create this image in canvas:
white canvas (300 x 300 px)
green square (200px)
centered on canvas
draw red line
Lab: draw
44
![Page 45: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/45.jpg)
Steps:
define/determine all sizes/dimensions
create the canvas
draw the square
draw the line
Lab: draw
45
![Page 46: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/46.jpg)
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
![Page 47: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/47.jpg)
Lab: draw
47
<script> function draw() {
} window.onload=draw;</script>
Define the function:
![Page 48: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/48.jpg)
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
![Page 49: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/49.jpg)
Create this image in canvas:
red oval (200 x 100px)
green square (200px)
blue equilateral triangle (200px tall)
centered on canvas
Lab: logo
49
![Page 50: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/50.jpg)
Create this image in canvas:
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
![Page 51: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/51.jpg)
Calculate the image definitions:
Lab: logo
51
20px
20px
100px
200px
![Page 52: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/52.jpg)
Calculate the image definitions:
Lab: logo
52
100px
200px
20px
![Page 53: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/53.jpg)
Calculate the image definitions:
Lab: logo
53
20px
200px
200px
![Page 54: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/54.jpg)
Calculate the image definitions:
Lab: logo
54
100px
20px
20px
200px
200px
205010
020
0
2039
0
Canvas
height:
![Page 55: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/55.jpg)
Calculate the image definitions:
Lab: logo
55
200px20px
![Page 56: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/56.jpg)
Calculate the image definitions:
Lab: logo
56
200px20px
200px
![Page 57: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/57.jpg)
Calculate the image definitions:
Lab: logo
57
20px
200px
200px
![Page 58: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/58.jpg)
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
![Page 59: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/59.jpg)
Calculate the image definitions:
Lab: logo
59
20px
200px
115px
![Page 60: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/60.jpg)
Calculate the image definitions:
Lab: logo
60
200px
20px
20px
200px
115px
Canva
s
width:20100
200
115
20455
![Page 61: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/61.jpg)
Calculate the image definitions:
Lab: logo
61
455px
390px
(√5*100)/2 = 113
![Page 62: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/62.jpg)
Calculate the image definitions:
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
![Page 63: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/63.jpg)
Draw the canvas:
Lab: logo
63
455px
390px
![Page 64: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/64.jpg)
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>
![Page 65: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/65.jpg)
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>
![Page 66: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/66.jpg)
Start from back of image:
draw the red ellipse
Lab: logo
66
120, 70200, 100
![Page 67: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/67.jpg)
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
![Page 68: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/68.jpg)
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
![Page 69: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/69.jpg)
Draws polynomial shapes
Lab: logo
69
![Page 70: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/70.jpg)
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
![Page 71: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/71.jpg)
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
![Page 72: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/72.jpg)
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
. .
..
.
.
![Page 73: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/73.jpg)
Calculate the image definitions:
define dimensions
Lab: logo
73
120, 70
320, 270120, 270
320, 70
![Page 74: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/74.jpg)
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.
![Page 75: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/75.jpg)
Calculate the image definitions:
define corners and fill
Lab: logo
75
435, 370
320, 170
205, 370
![Page 76: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/76.jpg)
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
.
..
![Page 77: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/77.jpg)
Older browsers that don’t do <canvas>?
Make image for graceful degradation
Photoshop
Lab: logo
77
![Page 78: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/78.jpg)
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
![Page 79: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/79.jpg)
Create a new layer
Use rectangular marquee:
initial point: 120, 120
size of shape: 200, 200
fill with green
Set opacity to 50%
Lab: logo
79
Initialposition
Size ofshape
200px
120px
120px
200px
![Page 80: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/80.jpg)
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
![Page 81: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/81.jpg)
Create a new layer
Use polygon tool (3 sides):
initial point: 320, 303
end point: 435, 370
fill with blue
set opacity to 50%
Lab: logo
81
Initialposition
Size ofshape
320, 303
435, 370
![Page 82: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/82.jpg)
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
![Page 83: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/83.jpg)
Done! Save code to in-class files
Lab: logo
83
![Page 84: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/84.jpg)
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
![Page 85: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/85.jpg)
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>
![Page 86: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/86.jpg)
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
![Page 87: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/87.jpg)
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();}
![Page 88: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/88.jpg)
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>
![Page 89: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/89.jpg)
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
![Page 90: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/90.jpg)
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
![Page 91: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/91.jpg)
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>
http://canvas-html-5.blogspot.com/2012/12/bird-animated-flying-canvas-html5.htmlhttp://www.sodahead.com
![Page 92: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/92.jpg)
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;
http://canvas-html-5.blogspot.com/2012/12/bird-animated-flying-canvas-html5.htmlhttp://www.sodahead.com
![Page 93: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/93.jpg)
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();}
http://canvas-html-5.blogspot.com/2012/12/bird-animated-flying-canvas-html5.htmlhttp://www.sodahead.com
![Page 94: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/94.jpg)
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}
http://canvas-html-5.blogspot.com/2012/12/bird-animated-flying-canvas-html5.htmlhttp://www.sodahead.com
![Page 95: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/95.jpg)
Add call to ‘animate()’
Done!
Lab: birds
95
}
animate();
</script></body></html>
http://canvas-html-5.blogspot.com/2012/12/bird-animated-flying-canvas-html5.htmlhttp://www.sodahead.com
![Page 96: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/96.jpg)
Break 96
![Page 97: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/97.jpg)
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>
http://en.wikipedia.org/wiki/Vector_graphics
![Page 98: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/98.jpg)
SVG and HTML5:
98
Vector Graphics terminology:
fill: ‘inside’ of shape
stroke: ‘edge’ of shape
path: ‘line’
Consistent (same) with other graphic programs
![Page 99: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/99.jpg)
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
![Page 100: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/100.jpg)
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>
![Page 101: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/101.jpg)
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>
![Page 102: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/102.jpg)
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>
![Page 103: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/103.jpg)
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”>
![Page 104: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/104.jpg)
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”>
![Page 105: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/105.jpg)
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”>
![Page 106: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/106.jpg)
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>
![Page 107: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/107.jpg)
SVG and HTML5:
107
Basic shapes:
rect
circle
ellipse
line
polyline
polygon
![Page 108: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/108.jpg)
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>
![Page 109: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/109.jpg)
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>
![Page 110: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/110.jpg)
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>
![Page 111: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/111.jpg)
SVG and HTML5:
111
Coloring with XML definitions
![Page 112: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/112.jpg)
Create this image as svg
Use ‘svg’ folder (image found inside)
Lab: svg
112
400px
400px
25px 25px
![Page 113: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/113.jpg)
Rectangle: centered vertically
Right edge in middle of window
175 pixels wide
76 pixels tall
Red-green
Lab: svg
113
400px
400px
25px 25px
![Page 114: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/114.jpg)
Circle: centered vertically
Left edge in middle of window
175 pixels wide
Green-blue
Lab: svg
114
400px
400px
25px 25px
![Page 115: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/115.jpg)
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>
![Page 116: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/116.jpg)
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>
![Page 117: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/117.jpg)
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>
![Page 118: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/118.jpg)
Isn’t red + green = yellow?
Why did we get gray?
Lab: svg
118
255 25500
128
![Page 119: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/119.jpg)
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>
![Page 120: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/120.jpg)
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>
![Page 121: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/121.jpg)
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>
![Page 122: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/122.jpg)
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>
![Page 123: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/123.jpg)
Done!
Save and check work
Lab: svg
123
![Page 124: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/124.jpg)
Week 7, created pixel-based image map
Include code in .svg image to create image map
SVG image maps
124
![Page 125: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/125.jpg)
Break 125
![Page 126: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/126.jpg)
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
![Page 127: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/127.jpg)
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
![Page 128: SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062515/56649c775503460f9492b6ea/html5/thumbnails/128.jpg)
SE 372: Web Page Design: HTML5
Week 11: Rich MediaCopyright © Steven W. Johnson
February 1, 2013