Copyright © Steven W. Johnson SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013
Today: Multimedia Canvas SVG
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 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: 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 type it 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 type it understands
Video and HTML5: Other video stuff: Preload attribute Controls displays controls <video preload> <video preload 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 src=“myfile.mp3” type=“audio/mpeg” autoplay></audio> <audio src=“myfile.mp3” type=“audio/mpeg” controls></audio>
Audio and HTML5: Audio support: no universal agreement on anything MP3 WAV OGG Chrome Yes No Firefox IE 9 No* Opera Safari
Audio and HTML5: Due to file sizes, preloading is a good idea Add ‘preload’ attribute <audio src=“myfile.mp3” preload controls></audio>
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 src=“file.mp4” controls preload=“auto”></video>
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 Firefox ??? IE 9 No* Opera Safari Safari Mobile
Plugins and extensions: Extensions change the browser itself Plugins allow the browser to do more things
Plugins: 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>)
Extensions: 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
Plugins: 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
Rich media: 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?
Rich media: 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: <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: ‘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: 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
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: 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
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
Canvas: Major features: stroke and fill color patterns and gradients lines rectangles paths (curves) text transformations (scale, rotate, etc) http://www.w3schools.com/tags/ref_canvas.asp
Canvas: Create 3D games using JavaScript (OpenGL) Creates interactive graphics, applications, games http://canvasrider.com
Canvas:
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 x x x Y IP . EP
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.fillStyle=“rgb(51, 153, 51)”; X position width shape.fillRect(10,15,100,200) Y position height .
Canvas: Shapes are a collection of pixels Most shapes: use paths (lines) as edges “Create” shapes using beginPath(), closePath(); beginPath() start: moveTo closePath() . continue: lineTo . . continue: lineTo . . continue: lineTo continue: lineTo
Canvas: Ellipses/ovals are a collection of pixels quadraticCurveTo(), bezierCurve To() arc()
Canvas: 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) 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(); }
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
Lab: draw 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 <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>
Lab: draw Define the function: <script> function draw() { } window.onload=draw; </script>
Lab: draw Write the code Done! Test in browser 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();
Lab: logo Create this image in canvas: red oval (200 x 100px) green square (200px) blue equilateral triangle (200px tall) centered on canvas
Lab: logo 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 Calculate the image definitions: 20px 100px 200px 20px
Lab: logo Calculate the image definitions: 20px 100px 200px
Lab: logo Calculate the image definitions: 200px 200px 20px
Lab: logo Calculate the image definitions: Canvas height: 20 50 100 20px 20 50 100 200 390 100px 200px 200px 20px
Lab: logo Calculate the image definitions: 200px 20px
Lab: logo Calculate the image definitions: 200px 20px 200px
Lab: logo Calculate the image definitions: 200px 200px 20px
Lab: logo What is the size of the triangle? equilateral opposite side 200 pixels tall hypotenuse 2x adjacent x2 + 200px2 = 2x2 200px / √3 = 115 2x 2 √3 200px 60° x 1 115px
Lab: logo Calculate the image definitions: 200px 115px 20px
Lab: logo Calculate the image definitions: Canvas width: 20 100 200 200px 20px 20 100 200 115 455 200px 115px 20px
Lab: logo Calculate the image definitions: (√5*100)/2 = 113 455px
Lab: logo Calculate the image definitions: Canvas height: width: 20 20 20px 200px 20 50 100 200 390 20 100 200 115 455 100px 200px 200px (√5*100)/2 = 113 20px
Lab: logo Draw the canvas: 455px 390px
Lab: logo Create folder ‘canvas’ Create HTML5 file ‘logo.html’. Save locally <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>Logo Lab: Steve Johnson</title> </head> <body> </body> </html>
Lab: logo Code to make background: background defined in canvas tag graceful degradation with image (<img>) call the function using JavaScript <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>
Lab: logo Start from back of image: draw the red ellipse 120, 70 120, 70 200, 100
Lab: logo Ellipse is not regular shape Several methods to draw; our method: 2 curves Bezier curves: smallest change in curve point-to-point 20px 200px 20px 100px
Lab: logo 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) 20px 200px 100px
Lab: logo Write the function: centerX = 120; centerY = 70; 20px Lab: logo Write the function: 200px 100px 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 }
Lab: logo . . . Write the function: . . . canvas.beginPath(); 20px Lab: logo Write the function: . . . 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); 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(); }
Lab: logo Calculate the image definitions: define dimensions 120, 70 320, 70 120, 270 320, 270
Lab: logo Code to make green square: . 120, 70 320, 70 120, 270 canvas.fillStyle = "rgba(0, 255, 0, .5)"; canvas.fillRect(120, 70, 200, 200);
Lab: logo Calculate the image definitions: define corners and fill 320, 170 205, 370 435, 370
Lab: logo Code to make blue triangle: . . . canvas.beginPath(); 320, 170 . . 205, 370 435, 370 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();
Lab: logo 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 Initial position Size of shape 20px 20px 100px 200px
Lab: logo Create a new layer Use rectangular marquee: initial point: 120, 120 size of shape: 200, 200 fill with green Set opacity to 50% Initial position Size of shape 120px 120px 200px 200px
Lab: logo 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 320, 170 133 px 200 px 67 px 115 px
Lab: logo Create a new layer Use polygon tool (3 sides): initial point: 320, 303 end point: 435, 370 fill with blue set opacity to 50% Initial position Size of shape 320, 303 435, 370
Lab: logo 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: animation 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: <script> set variables; (global) function animate() { draw(); } function draw() { } animate(); </script> <body> <canvas id="animation" width="400" height="400"> </canvas> </body>
Lab: animation Variables: <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
Lab: animation Animation sequence: 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();
Lab: animation The shape: 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>
Lab: birds Use 4 images to create an animation Does not work in Chrome Copy ‘birds’ to your desktop; open ‘bird.html’ http://canvas-html-5.blogspot.com/2012/12/bird-animated-flying-canvas-html5.html http://www.sodahead.com
Lab: birds General code layout is the same <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.html http://www.sodahead.com
Lab: birds Draw() loads 4 different images <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.html http://www.sodahead.com
Lab: birds Canvas and global variables <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.html http://www.sodahead.com
Lab: birds Animate function: 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.html http://www.sodahead.com
Lab: birds Draw function: 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.html http://www.sodahead.com
Lab: birds Add call to ‘animate()’ Done! } animate(); </script> </body> </html> http://canvas-html-5.blogspot.com/2012/12/bird-animated-flying-canvas-html5.html http://www.sodahead.com
Break
SVG and HTML5: 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
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*: <object width=300 height=200 type=“svg+xml” data=“filename.svg”> </object> *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; gracefully degrade <object width=100 height=200 data="your.svg" type=“image/svg+xml”> <img src=“yourfallback.png” alt=“image”> </object>
SVG and HTML5: <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: 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: 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: Other alternatives: <img> problem for older browsers no fallback <img src=“your.svg” width=“100” height=“200” alt=“myimage” title=“myimage”>
SVG and HTML5: 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: Basic shapes: rect circle ellipse line polyline polygon
SVG and HTML5: 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: 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: 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: Coloring with XML definitions
Lab: svg Create this image as svg Use ‘svg’ folder (image found inside) 400px 25px 25px 400px
Lab: svg Rectangle: centered vertically Right edge in middle of window 175 pixels wide 76 pixels tall Red-green 400px 25px 25px 400px
Lab: svg Circle: centered vertically Left edge in middle of window 175 pixels wide Green-blue 400px 25px 25px 400px
Lab: svg Initial code: <!DOCTYPE html> <html> <head> 400px 25px Lab: svg Initial code: <!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>SVG Lab: Steve Johnson</title> </head> <body> </body> </html>
Lab: svg Make rectangle, circle: <body> 400px 25px Lab: svg Make rectangle, circle: <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>
Lab: svg Define 2 gradients: <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>
Lab: svg Isn’t red + green = yellow? Why did we get gray? 255 255 128
Lab: svg Define 2 gradients: <body> <defs> <linearGradient id=“rectGradient”> <stop offset=“0%” stop-color=“#FF0000” /> <stop offset=“100%” stop-color=“#00FF00” /> </linearGradient> </defs> <linearGradient id=“circleGradient”> <stop offset=“0%” stop-color=“#00FF00” /> <stop offset=“100%” stop-color=“#0000FF” /> <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>
Lab: svg Last step: Add the backup plan <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>
Lab: svg Play time: Add another gradient definition <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>
Lab: svg Play time: Add another gradient definition <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>
Lab: svg Done! Save and check work
SVG image maps Week 7, created pixel-based image map Include code in .svg image to create image map
Break
Assignment: screensaver Create a ‘screensaver’ using <canvas> ‘Bounce’ a unique image (not your friend’s) off the 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: shapezoo Create an image using <svg> Unique image is to include: rectangle circle ellipse triangle or hexagon or star Color each item Use 2 gradients
Copyright © Steven W. Johnson SE 372: Web Page Design: HTML5 Week 11: Rich Media Copyright © Steven W. Johnson February 1, 2013