Upload
meaghan-olds
View
216
Download
1
Tags:
Embed Size (px)
Citation preview
HTML STRUCTURE &
WEB DESIGN BASICS
Media and Interactivity Basics
1Week 11 03/25/2014 Course TECH 2150 Dr. Simon Qiu
Textbook Contents of Pearson Education, Basic of Web Design
Learning Outcomes
2Week 11 03/25/2014 Course TECH 2150 Dr. Simon Qiu
Textbook Contents of Core Web Programming
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 Configure a Flash animation on a web page Use the CSS3 transform and transition properties Describe the purpose of the HTML5 canvas
element
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-InA 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. Common used plug-ins and helper applications:
Adobe Flash Player, Shockwave Player; Windows Media Player; Apple QuickTime;
RealPlayer;
Why doesn’t my audio/video file play?3
Containers & Codecs –New about HTML5 video and audio – No Plug-in Needed.
HTML5 audio & video Native to the browserBrowsers do not support the same codecs
ContainerDesignated by the file extension – contains the
media and metadata Codec
The algorithm used to compress the media
4
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.
5
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)
6
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
7
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>
8
Demo: podcast/podcast.html
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-inWidely installed on browsers
9
HTML5 Embed Element
<embed type="application/x-shockwave-flash" src="fall5.swf"
width="640"
height="100"
quality="high”
title="Fall Nature Hikes">
10
HTML5 Audio & Source Elements
<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>
11
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>
12
Use the iframe element to embed YouTube Video
<iframe src="http://www.youtube.com/embed/VIDEO_ID" width="640" height="385"> View the <a href="http://www.youtube.com/watch?v=VIDEO_ID">YouTube Video</a></iframe>
13
CSS3 Transform Property Allows you to rotate, scale, skew, or move an
element
Example: -webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg);
14
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;-webkit-transition: background-color 2s linear;-moz-transition: background-color 2s linear;-o-transition: background-color 2s linear;transition: background-color 2s linear; }
15
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
16
<script>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>
Assignment 2 – A2Due date: 4/10/2014.
1. Chapter 9 Q7
Create a web page about your favorite movie that uses a two-column table containing details about the movie. Use emvedded CSS to style the table border and background color. Include the following in the table:
Title of the movie Director or producer Leading actor Leading actress Rating (R, PG-13, PG, G, NR) A brief description of the movie An absolute link to a review about the movie
Place an e-mail link to yourself on the web page. Save the page as movie9.html
2. Chapter 10 Q.1
Write the code to create the following:
b. A group of radio buttons that website visitors can check to vote for their favorite day of the week.
c. A select list that asks website visitors to select their favorite social networking website.
e. A hidden form control with the name of userid.
g. A form tag to invoke server-side processing using
http://webdevbasics.net/scripts/demo.php17
Assignment 2 – A2Due date: 4/10/2014. (Continue)
3. Chapter 11 Q.1, Q.2, Q.3, Q.4 i. Write the HTML for a hyperlink to a video called lighthouse.mov on a
web page
ii. Write the HTML to embed an audio file called soundloop.mp3 on a web
page that can be controlled by the visitor.
iii. Write the HTML to display a video on a web page. The video files are
named movies.m4v and movie.gov. The width is 480 pixels. And the
height is 360 pixels. The poster image is movie.jpg.
iv. Write the HTML to display a Flash file named flashbutton.swf on a web
page.
18