Home   CGS 2820C
  Web Development
#12 Grading Criteria for:
A Media Page with Silverlight, Flash, Windows Media audio and video, RSS, MP3, You Tube, Applet, Animated gif...
Description: Create a Media Demo web page named media.htm, using an Ordered List <ol> or numbered rows in a table using at least 6 unique items shown below, numbered 1 to 6. Use the same masthead, navigation, and stylesheet that you use for the rest of your site - copy an exising page, such as portfolio.htm, delete the content in the main div and replace it with the content for this assignment; also update the <title> tag and meta description. This page does NOT have to be part of your navigation, but it must be live on your site. Upload the URL address to the Angel Assignment Dropbox.

Add the four required 20 point Media items, and at least two of the 10 point Media items listed below. Do not use any of the specific samples shown on this page. Make sure you test all the items on your media page in the lab before it is graded! You will only have one chance to make sure they each work. If you do more than the required items you may get 10 or 20 insurance points in case one of them surprises you and does not work when it is graded. However, the maximum grade will be 100.

Plug-ins or Add-ons - mini applications that are added to a browser to enable it to play certain third party video formats, animation formats, or run applets. To manage Add-ons in IE9 and in Firefox, choose Tools | Manage Add-ons. Examples:  Flash, Java, Google and Yahoo! Toolbars, Firefox Web Developer Tools

Flash - a multimedia application originally acquired by Macromedia (ShockWave) and currently developed and distributed by Adobe Systems. It requires a Flash Player plug-in and has a source extension of .fla and a web extension of .swf

RSS - Really Simple Syndication or web feed formats used to publish frequently updated works, such as blogs, newsfeeds, audio, and video in a standardized format. RSS can be added to a web page by copying and pasting the script supplied by the RSS provider or it can be launched by clicking the RSS icon in a browser that initiates the subscription process. RSS Logo, click for more info
Topic Directions Points

Create a Media folder on your website and store your .mp3, .mp4, .mov, .wmv, .wma, .midi, .xap, .swf, .fla, animated .gifs, and .class files in the new Media folder. (Hover over each of the extensions above for a quick explanation. Be sure to know what each of these extensions is used for. If necessary, look them up on the Internet.)

List and number each media item as shown below.
Reminder: .style1 or autostyle7 are not a meaningful names: -5 for each occurance
Reminder: Every web page needs a unique Title, specific for the page: -5
Reminder: Page must have: <meta name="author" content="Your Name"> and a unique Meta Description for the Media page.

PART 1: 10-20 pts each, 90 pts total.
Do the four personally created media items shown below.
You will create each of these items yourself and put them on your Media page.

1 Audio File
Create your own short and relevant audio file.

For examples see:
If Cars were Computers (1.7MB .mp3)
Church Donation (39K .wma)

You will only get half credit if you link to your audio file (as shown above), instead of inserting the audio file (as shown at right).

Be sure to test it at home and at school, with the Explorer and with FireFox. For instance, the HTML5 audio controls code at right will work on the newer version of IE, Chrome, and Safari, but the MP3 file format will not work on all browsers.

The .mp3 would have to be converted to an .ogg format and the second source line added to call the .ogg file if viewed on FireFox :-(

The third line of text is a fallback line for a browser that not support either format or is missing an audio plugin.
Create your OWN short and relevant audio file and insert it into List Item 1 of your Media Demo. It must be easily recognizable as something that you recorded - perhaps a Welcome To My Site message. The most common formats are .mp3 files.  Windows .Wav files are often too big to put on the web.

To record a short file you can use the Windows Sound recorder: Start > All Programs > Accessories > Sound Recorder. Or download the very good and free Audacity recorder and audio editor (Use File > Export to save as a .mpg file)
Download Audacity (audio) | View Audacity Tutorial | Audacity PDF

Below is the older code used to play an audio clip:

<object id="media2" height="45" type="video/x-ms-wmv" width="200">
   <param name="filename" value="Media/CountingRibs.wma">
   <param name="autoStart" value="0">
</object>

HTML5 allows for simpler code. But older versions of FireFox wanted you to convert .mp3 files to .ogg files : -(

<audio controls="controls">
<source src="media/NewAge.mp3" type="audio/mp3">
<source src="media/NewAge.ogg" type="audio/ogg">
This browser does not support this audio format.
</audio>

Note: Audacity will convert .mp3 files to .ogg format.

Fortunately, newer browsers support traditional MP3

<audio controls src="media/NewAge.mp3" type="audio/mp3">
</audio>

20

Required

Insert or embed.
Do not just link.

Create a Media page with at least 6 unique items numbered 1 to 6 (-10 points if you do not number them)
2 Video File
Create and insert your own short and relevant home made video. If necessary, you can download the free Windows Movie Maker.

For a very easy example see my Welcome video:
30 Second Welcome Video

or
Koi Pond (128KB .wmv)

You will only get half credit if you link to your video file (as shown above), instead of inserting the video file (as shown at right).

Be sure to test it at home and at school, with the Explorer and with FireFox. For instance, the HTML5 video controls code at right will work on the newer version of IE, Chrome, and Safari, but the MP4 file format will not work. It would have to be converted to an .ogv format and a second source line added to call the .ogv file if viewed on FireFox :-(

Create your OWN short and relevant home made video file and upload and insert it into List Item 2 of your Media page - perhaps a Welcome To My Site video. Use a camcorder or cell phone or you can make it from a web cam or you can use the free Windows Movie Maker to add a sound track to some still photos that are in a slideshow.

The most common extensions are .mpg, .mp4, .mpeg, .wmv (Windows Media Video) and Apple QuickTime .mov file. (.avi files are often too large to put on the web.)

Below is the code that Expression Web generated:

<object id="media1" height="150" type="video/x-ms-wmv" width="150">
   <param name="filename" value="Media/vKoiPond.wmv">
   <param name="autoStart" value="0">
</object>

HTML5 allows for even simplier code but different browsers may not play certain formats so we must currently add fallback code and fallback text in case the first or second format does not play : -(

<video controls>
<source src="media/vKoiPond.mp4"> <!-- IE -->
<source src="media/vKoiPond.ogv"> <!-- FF -->
Browser does not support format
</video>
<!-- To convert a .mp4 file to an .ogv file see: https://www.online-convert.com/ -->
 
Newer Browsers support traditional MP4  
<video controls src="media/vKoiPond.mp4" type="video/mp4">
</video>

20

Required

Insert or embed.
Do not just link.

3 Animated Gif
Create your own animated .gif
See AnimationWithPhotoshop.htm
Or Download UnFreez, a free gif animator (scroll to bottom of download screen to make sure you download UnFreez and not another app). (If necessary, scroll down and make sure you click the right [Download] button.)
Make your OWN relevant and college level animated gif from two or three actual pictures of yourself, your child, or your pet, to add your Media page. Add it to List Item 3 of your Media page.
Zoey Dog
20

Required

Insert or embed.
Do not just link.

4 Slide show
Create your own image by image slide show, probably using a JavaScript showing off photos, images or other items.
Ex: Jay and Julie Slide Show
Find your own script. Do not use the script from this page.

Or

4 Transition
Create your own transitional slide show such as a Rotating banner on the top of your Media Demo web page.
Ex: RotatePics.swf
Find your own script. Do not use the script from this page.
An image by image slide show scrolls; a transitional slide show or banner blends one image into another.

Using the skills you have to create or do a web search to see how to create and add a slide show to your Media page. Add it to List Item 4 of your Media page.

Also see: http://picasa.google.com/ to upload pics and generate a slideshow

Using the skills you have to create it or do a web search to see how to create it, add a Transitional banner to your web page. Make sure it is centered on the top of your page. It can be done in JavaScript, Silverlight, Flash, or in any other method you desire. The banner must be between 400px and 800px wide and between 75px and 200px in height. For a sample Transitional banner see: JavaScript Rotate Header
20

Required

Insert or embed.
Do not just link.

5 This is not really a media feature, but Image Maps allow you to set Hotspots that set only a specific portion of an image as a link

Add at least one Image Map / Hotspot linked to a specific part of an image that is located somewhere on your index.htm. A hotspot only covers PART of the image.
As an example:
Red: Go to Top of page
Green: Go to Syllabus
Traffic light Top of Page Returun to syllabus

Note how a Hotspot allows one image to be mapped into parts for multiple links.
Hotspots work with Image Maps to map the x y coordinates on an image so that only a specific portion of an image is a link.

Expression Web:
1. Insert an image and select it.
2. View > Toolbars > Pictures
3. Click on the Rectangular or Circle or Polygon icon on the right on the picture toolbar (see View > Toolbars) and draw the desired shape over the part of the picture that you want to be a Hotspot, and enter the URL address for the Hotspot link in the Address textbox.

Dreamweaver:
1. Insert an image and select it.
2. Open the Properties panel on the bottom of the screen.
3. Click on the Rectangular or Circle or Polygon icon on the bottom of the Properties panel.
4. Draw the image map over the part of the picture that you want to be a Hotspot, and enter the URL address for the Hotspot link in the Address textbox.
10 hotspot

Required

The hotspot probably should not be part of your Nav.

Write me a note in the Assignment Dropbox telling me where to find the hotspot when you submit it.

Remember:
A hotspot is used with one image to map it to multiple links

PART 2: 10 Points each. Pick at least ONE from the following.
(I suggest you do 1 or 2 extra media items as insurance)

6 You Tube



Add a working Embedded YouTube window to list item 5 of your Media page. This sould either be your own YouTube video or an item related to your site, YouTube videos typically show the Embed code on the right on the YouTube website screen; or click [Share] and then click the [Embed] button. Simply copy and paste the embed code into your web page.

Sample YouTube Embed code:
<iframe width="420" height="315" src="http://www.youtube.com/embed/761fxdQ0xfc" frameborder="0" allowfullscreen></iframe>
10

Insert or embed.
Do not just link.

7 Adobe Flash is used to create rich animation and to integrate video into web pages. Click for Flash directions.

Flash Instructional Videos

Flash Samples:

Don't touch me (727K .swf)
Move your cursor over his nose.

Click for full size
FIME sample (115K)

Bug
Either create or do a search of your computer or do a web search for a Flash file (.swf) to download and insert into list item 7 of your Media Demo. Insert | Media | Flash Movie
10

Insert or embed.
Do not just link.

8 RSS
Really Simple Syndication is a family of web feed formats used to publish frequently updated works - such as blogs, newsfeeds, audio, and video - in a standardized format

Sample RSS feeds on a web page

RSS directories:
feedzilla.com
Click on the grey widget code icon to build your feed and "Grab" the code. See sample at right.

YouTube RSS Tutorial
Do a web search "RSS feed" and on "embed RSS on a web page" and insert an RSS feed into list item 8 of your Media Demo.
See Sample RSS feeds on a web page and View Source.

Below is a sample RSS feed for NPR (Do not use this particular RSS feed for yoru assignment):


RSS Feed. Created with RSS Feed Widget by FeedWind.

10

Insert or embed.
Do not just link.

9 z-index - allows you to stack individual images partially on top of each other. Now that we are basically done with the course, it is time for you to grow on your own. Do a web search and research z-index. Then using z-index, attractively stack at least two images relevant to your site. Make sure it is obvious that they are stacked images. 10
10 Your choice of something that is different or unusual.

Perhaps a fun JibJab. (It must be your own creation with your own personal picture.)
Click above to see your professor and his talented brothers and sisters at Christmas.

If have an alternative that is different than any of the media types or media alternatives listed above, you may use it as one of your 10 media items. (You cannot use both a .wma and a .wav. - they are listed together as alternatives.)
For instance my favorite is the Splash Screen I made for:
scoopdaddys.com Ice Cream Shop on St. Armands Circle that is a merger of a .jpg on the left and an Animated .gif on the right.
<td align="right">
    <img src="scoopdaddyStoreFrontLeft.JPG" border="0">
</td>
<td align="left">
    <img src="ScoopDaddysRightAnim.gif" border="0">
</td>

It has a refresh or redirect after a 8 seconds:
<meta http-equiv="REFRESH" content="8;url=FileName.htm">
10


Number each item. Try to do 1 or 2 extras for insurance
11 Create your own attractive Picassa or Flickr image sharing account and connect it to your Web page. Make sure it clearly identifies you as the creator. 10
Be sure to test your media elements on multiple browsers.
Upload the full path to media.htm to the assignment dropbox.