1

Web Development & Design

Foundations with HTML5

CHAPTER 11
WEB MULTIMEDIA AND INTERACTIVITY

Copyright © Terry Felke-Morris http://terrymorris.net 2

 Learning Outcomes
In this chapter, you will learn how to ...

◦ Describe the purpose of plug-ins, helper applications, media containers, and codecs
◦ Describe types of multimedia files used on the Web
◦ Configure hyperlinks to multimedia files
◦ Configure audio and video on a web page with HTML5 elements
◦ Describe features and common uses of Adobe Flash, JavaScript,
Java applets, Ajax, and jQuery
◦ Configure a Flash animation on a web page
◦ Configure a Java applet on a web page
◦ Create an interactive image gallery with CSS
◦ Configure the CSS3 transform and transition properties
◦ Describe the purpose of geolocation, web storage, offline web applications, and canvas
HTML5 APIs.

Copyright © Terry Felke-Morris http://terrymorris.net 3

 Helper Applications & Plug-ins

Helper Application
◦ A program that can be designated to handle a particular file type
(such as .wav or .mpg) to allow the user to view or otherwise
utilize the special file.
◦ The helper application runs in a separate window from the
browser.
Plug-In
◦ A newer and more common method
◦ Plug-ins run right in the browser window so that media objects
can be integrated directly into the web page.

Copyright © Terry Felke-Morris http://terrymorris.net

4
 Containers & Codecs

Container
◦ Designated by the file extension – contains the media and
metadata

Codec
◦ The algorithm used to compress the media

HTML5 audio & video

◦ Native to the browser
◦ ISSUE: Browsers do not all support the same codecs
◦ http://www.longtailvideo.com/html5/
Copyright © Terry Felke-Morris http://terrymorris.net
5
 Commonly Used Plug-ins
Adobe Flash Player
Adobe Reader
Windows Media Player
Apple Quicktime

Copyright © Terry Felke-Morris http://terrymorris.net

6
 Common Audio File Types
 .wav Wave File
 .aiff Audio Interchange File Format
 .mid Musical Instrument Digital Interface (MIDI)
 .au Sun UNIX sound file
 .mp3 MPEG-1 Audio Layer-3
 .ogg Ogg Vorbis (open-source)
 . m4a MPEG 4 Audio.
This audio-only MPEG-4 format is
supported by Quicktime, iTunes, and iPods.

Copyright © Terry Felke-Morris http://terrymorris.net

7
 Common Video File Types
.mov Quicktime
.avi Microsoft Audio Video Interleaved
.wmv Windows Media File
.flv Flash Video File
.mpg MPEG (Motion Picture Experts Group)
.m4v .mp4 (MPEG-4)
.ogv Ogg Theora (open-source)
.webm VP8 codec (open video format, free)

Copyright © Terry Felke-Morris http://terrymorris.net

8
 Copyright Issues
•Only publish web pages, images, and other media that you
have personally created or have obtained the rights or
license to use.
•Ask permission to use media created by another person
instead of simply “grabbing” it.
•All work (including web pages) are automatically
copyrighted even if there is not copyright mark or date.
•Fair Use Clause of the Copyright Act
•Creative Commons – A new approach to copyright

Copyright © Terry Felke-Morris http://terrymorris.net

9
 Configure Audio & Video

Most basic method to provide audio or video files:

Hyperlink
<a href="wdfpodcast.mp3" title="Web Design
Podcast">Web Design Podcast</a>

Copyright © Terry Felke-Morris http://terrymorris.net

10
 Multimedia & Accessibility
Provide alternate content
◦Transcript (for audio)
◦Captions (for video)
◦Text format

Copyright © Terry Felke-Morris http://terrymorris.net

11
 What is Adobe Flash?
•A popular multimedia application
•Create multimedia which adds visual interest and
interactivity to web pages
•Flash movies are saved in “.swf” files
•Perception of speedy display
•.swf files play as they download
•Flash Player
• Free browser plug-in
• Widely installed on desktop browsers but not well-supported
by mobile devices

Copyright © Terry Felke-Morris http://terrymorris.net

12
 HTML5 Embed Element

<embed type="application/x-shockwave-flash"
src="fall5.swf"
width="640"
height="100"
quality="high”
title="Fall Nature Hikes">

Copyright © Terry Felke-Morris http://terrymorris.net

13
 HTML5 Audio & Source Elements

Demo

<audio controls="controls">
<source src="soundloop.mp3" type="audio/mpeg">
<source src="soundloop.ogg" type="audio/ogg">
<a href="soundloop.mp3">Download the Audio File</a> (MP3)
</audio>
Copyright © Terry Felke-Morris http://terrymorris.net
14
 HTML5 Video &
Source Elements

<video controls="controls" poster="sparky.jpg"

width="160" height="150">
<source src="sparky.m4v" type="video/mp4">
<source src="sparky.ogv" type="video/ogg">
<a href="sparky.mov">Sparky the Dog</a> (.mov)
</video>
Demo

Copyright © Terry Felke-Morris http://terrymorris.net

15
 CSS Drop Down Menu
•Configure nav container with position relative
•Code submenu (drop down menu) ul element with the
parent li element
•Configure submenu ul element to initially not display
•Configure submenu ul element with absolute positioning

16
Copyright © Terry Felke-Morris http://terrymorris.net
 CSS3 Transform Property
Allows you to rotate, scale, skew, or move an element

Example:
transform: rotate(3deg);

Copyright © Terry Felke-Morris http://terrymorris.net

17
 CSS3 Transition Property
Provides for changes in property values to display in a smoother
manner over a specified time.

Example:

nav a:hover { color: #869dc7; background-color: #eaeaea;

transition: background-color 2s linear; }

Copyright © Terry Felke-Morris http://terrymorris.net 18

 CSS Image Gallery
Configure each thumbnail image:
<li><a href="photo1.jpg"><img src="photo1thumb.jpg" width="100" height="75"
alt="Golden Gate Bridge">
<span><img src="photo1.jpg" width="400" height="300“
alt="Golden Gate Bridge"><br>Golden Gate Bridge </span></a>
</li>
The key CSS:
#gallery span { position: absolute;
opacity: 0;
transition: opacity 3s ease-in-out;
left: -1000px; }
#gallery a:hover span {
position: absolute;
top: 16px; left: 320px;
text-align: center; }

Copyright © Terry Felke-Morris http://terrymorris.net

19
 What is Java?

•Object Oriented Programming (OOP)

•Developed by Sun Microsystems
•Java is not the same language as JavaScript.
•Java is more powerful and much more flexible
than JavaScript.
•Java can be used to:
• develop stand-alone executable applications
• applets that are invoked by Web pages

Copyright © Terry Felke-Morris http://terrymorris.net 20

 Java Applets
Compiled -- translated from the
English-like Java statements to an encoded
form called Byte Code.

Use the “.class” file extension

Java Virtual Machine (JVM)

◦ interprets the byte code into the proper machine
language for the operating system
◦ After translation, the applet is executed and
appears on the Web page.

Copyright © Terry Felke-Morris http://terrymorris.net 21

 Adding a Java Applet to a Web Page
OBSOLETE: the applet element
HTML5: the object element
<object type="application/x-java-applet" width="610" height="30"
title="This Java Applet displays a message">
<param name="code" value="example.class">
<param name="textColor" value="#FF0000">
<param name="message" value="This is a Java Applet">
<param name="backColor" value="#FFFFFF">
Java Applets can be used to display text, manipulate graphics, play
games, and more.
Visit <a href="http://download.oracle.com/javase/tutorial/">Oracle</a>
for more information.
</object>

Copyright © Terry Felke-Morris http://terrymorris.net 22

 What is JavaScript?
•Object-based client-side scripting language
•Originally developed by Brendan Eich at
Netscape
• JavaScript is NOT Java
•Manipulates the objects associated with a
web page document:
◦ the window
◦ the document
◦ the elements such as forms, images, hyperlinks, and so on

Copyright © Terry Felke-Morris http://terrymorris.net 23

 WHAT IS JAVASCRIPT? (2)

Originally developed by Netscape and

called LiveScript

Renamed JavaScript after Netscape

collaborated with Sun Microsystems on
modifications to the language

JavaScript is NOT Java

Copyright © Terry Felke-Morris http://terrymorris.net 24

 Common Uses of JavaScript
Display a message box
Select list navigation
Edit and validate form information
Create a new window with a specified size and
screen position
Image Rollovers
Status Messages
Display Current Date
Calculations
Copyright © Terry Felke-Morris http://terrymorris.net 25
 Document Object Model (DOM)
 A portion of the DOM is
shown at the left.

 Defines every object

and element on a Web
page

 Hierarchical structure

 Accesses page elements

and apply styles to page
elements

Copyright © Terry Felke-Morris http://terrymorris.net 26

 What is Ajax?

 Asynchronous JavaScript and XML

 “Ajax” – Jesse James Garrett at Adaptive Path
 Existing technologies used in a new way
 Standards-based XHTML and CSS
 Document Object Model
 XML (and the related XSLT technology)
 Asynchronous data retrieval using XMLHttpRequest
 JavaScript

 Very Basic Example:

◦ http://webdevfoundations.net/css

Copyright © Terry Felke-Morris http://terrymorris.net 27

A JavaScript library intended
to simplify client-side scripting
Exploring JQuery
Example: http://webdevfoundations.net/jquery

API – Application Programming Interface

◦ A protocol that allows software components to
communicate – interacting and sharing data.

The jQuery API can be used to configure many

interactive features, including:
◦ image slideshows
◦ animation (moving, hiding, fading)
◦ event handling (mouse movements and mouse clicking)
◦ document manipulation
◦ Ajax

Copyright © Terry Felke-Morris http://terrymorris.net 28

 HTML5 APIs
API – a protocol that allows software components to
communicate – interacting and sharing data
A variety of APIs that are intended to work with
HTML5, CSS, and JavaScript are currently under
development and in the W3C approval process,
including:
◦ geolocation
◦ web storage
◦ offline web applications
◦ canvas

Copyright © Terry Felke-Morris http://terrymorris.net 29

 HTML5 Geolocation
Allows your web page visitors to share their geographic
location
Their location may be determined by the IP address,
wireless network connection, local cell tower, or GPS
hardware depending on the type of device and browser.
JavaScript is used to work with the latitude and longitude
coordinates provided by the browser.
Examples:
◦ http://webdevfoundations.net/geo and http://html5demos.com/geo

Copyright © Terry Felke-Morris http://terrymorris.net 30

 HTML5 Web Storage
Traditionally, the JavaScript cookie object has been used to store
information in key-value pairs on the client (the website visitor’s
computer).
NEW FOR HTML5: Web Storage API
◦ provides two new ways to store information on the client side:
local storage and session storage.
◦ Advantage: increase in the amount of data that can be stored (5MB per domain).
◦ The localStorage object stores data without an expiration date.
◦ The sessionStorage object stores data only for the duration of the current browser
◦ JavaScript is used to work with the values stored in the localStorage and sessionStorage
objects.

Examples:
◦ http://webdevfoundations.net/storage and http://html5demos.com/storage

Copyright © Terry Felke-Morris http://terrymorris.net 31

 HTML5 Offline Web
Applications
An offline web application enables website visitors to view
documents and access web applications even when they are not
connected to the Internet.
A web application (app) can be written with HTML, CSS and
JavaScript and can run in any browser – as long as you are online.
An offline web application takes this one step further and stores the
HTML, CSS, and JavaScript files on the visitor’s device for use offline,
even when the device is not connected to the Internet.
Examples:
◦ http://html5demos.com/offlineapp
◦ http://www.w3schools.com/html/html5_app_cache.asp

Copyright © Terry Felke-Morris http://terrymorris.net 32

 HTML5 Canvas Element
Configures dynamic graphics
◦ Draw lines, shapes, text, image
◦ Interact with actions taken by the user

Canvas API (application programming interface)

JavaScript – client-side scripting language
<script type="text/javascript">
function drawMe() {
var canvas = document.getElementById("myCanvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(255, 0, 0)";
ctx.font = "bold 3em Georgia";
ctx.fillText("My Canvas", 70, 100);
ctx.fillStyle = "rgba(0, 0, 200, 0.50)";
ctx.fillRect (57, 54, 100, 65);
}
}
</script>
Copyright © Terry Felke-Morris http://terrymorris.net
33
 Multimedia & Accessibility
•Provide links to plug-ins
•Provide text descriptions and captions
•Verify keyboard access
•Check for screen flickering
•Verify functionality if JavaScript is disabled
•If media is used for main navigation, provide plain text links

Copyright © Terry Felke-Morris http://terrymorris.net 34