Home   CGS 2820C
  Web Development 		#13 Grading Criteria for:
A Media Page with audio, video, slideshow, animated gif, RSS, YouTube, Instagram ...
Description: Create a single separate 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 existing page, such as portfolio.htm, delete the content in the <main> section and replace it with the content for this assignment. Also update the <title> tag, meta description and <h1>. This page does NOT have to be part of your navigation, but it must be live on your site. You should create a media folder, similar to the images folder. Upload all media and media.htm to your website.
When done, upload the full URL web address to the Media Canvas Assignment Dropbox.

Add the first 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 multiple browsers before it is submitted to be graded!  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.

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

HTML Media Tutorials below

Interactive W3Schools Audio Tutorials
Interactive W3Schools Video Tutorials
Interactive W3Schools YouTube Tutorials

Make sure you MEET ALL GRADING CRITERIA below.
Topic Directions Points

Create a Media folder on your website and store your .mp3, .mp4, .mov, .wmv, .wma, .midi, .fla, animated .gifs, and other media 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 meaningful names: -5 for each occurrence
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: 20 pts each, 80 pts total.
Do the four personally created media items shown below.
Create each of these items yourself and put all on your media.htm page.

#1 Audio File
Create your own short audio file, relevant to your site.

For examples of audio links see:
If Cars were Computers (2MB .mp3 will autostart)
Church Donation (39K .wma - will NOT autostart)

BUT, you will only get half credit if you link to your audio file, as shown above. For full credit, embed the file with video controls as shown at right.

Be sure to test your page with FireFox, Chrome, Edge and your smartphone.

Use the same personalized banner/masthead in the top row or on the top of the page consistent with the rest of your site.

 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.

The easiest way to make a short audio recording is to use a voice recorder app on your smartphone.

To convert files to different formats, see:
https://www.online-convert.com/

Or download the very good and free Audacity recorder and audio editor (Use File > Export to save as a .mpg file if necessary)

NOTE to Professor: Audacity may disable TEAMS Audio!!!

Download Audacity (audio) | Audacity Manual | Audacity Video

HTML5 and newer browsers allow you to use traditional MP3 files and simple code:

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

 #1 20pts
Audio
(p 217-220)

Required

For full credit, insert or embed, so the player is visible.
Do not just link.

Create a single 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 homemade video.

For a very easy example see my Bimini Bay Sailing video link:
30 Sailboat Tacking Video

BUT, you will only get half credit if you link to your video file, as shown above. For full credit, embed the file with video controls as shown at right.

Be sure to test it at home and at school, with the Edge, Chrome and FireFox and your smartphone.

Create your OWN short and relevant homemade video file and upload and insert it into List Item 2 of your Media page - perhaps a Welcome To My Site video. The easiest way to make a short video file is the use your smartphone camera and set it to video.

The most common extensions are .mp4 (Motion Picture), .mpeg, .wmv (Windows Media Video) and Apple QuickTime .mov file.
.avi (Audio Video Interleaved) files are often too large for the web.

HTML5 allows for simple 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>

Fortunately, newer browsers allow you to use just traditional MP4:

<video controls src="media/vKoiPond.mp4" type="video/mp4">
</video>

 #2 20pts
Video
(p 213-216)

Required

For full credit, insert or embed so the player is visible.
Do not just link.

Make this college level and relevant to your site.

#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.)

Or do a Google search to find an Animated Gif app. Do a search on "w3schools CSS animations", or "html5 animations" or "JavaScript animations" or another method.

Make your OWN relevant and college level animated gif from two or three actual pictures of yourself, your child, or your pet, your business, to add your Media page. Add it to List Item 3 of your Media page.

There are numerous ways to animate images. Your textbook provides code for a routine using CSS - see p 487. Or you can use Adobe Photoshop (see link at left.) Or you can download Unfreez (see link at left.) Even your smartphone camera/photos app may provide animation features (see below.)

Zoey Dog
Zoey will blink if she likes you

Google Photos has an animation feature that you can use if you have several similar shots of the same object.
1. Open Google Photos
2. Click Utilities on the left side or the + Create link at top right
3. Choose Animation
4. Select the desired photos to animate
5. Click Create
But if you choose Google Photos Animate, do not just do it. Do it well!		 #3 20pts
Animated Gif
(p 117)

Required

Insert or embed.
Do not just link.

Make it a college level animation using relevant photos!
#4 Slideshow or Carousel
Create your own image by image slide show, probably using a JavaScript showing off photos, images or other items.

Or

4 Transition
Create your own transitional slide show such as a Rotating banner on the top of your Media Demo web page. 		Add an image by image Slideshow or Carousel to List Item 4 that scrolls. Or add a transitional slide show or banner that blends one image into another. Use the sample code in the book, or do a search on "w3schools CSS Slideshow", or "html5 Slideshow" or "JavaScript Slideshows" or another method. WordPress has numerous attractive Carousel plugins.

For a sample Transitional JavaScript banner see: JavaScript Rotate Header. Do NOT use this sample code, it works, but is not as good as other slideshows or carousels.		 #4 20pts
Slideshow

Required

Insert or embed.
Do not just link.

PART 2: 10 Points each. Pick at least TWO from the following.
(I suggest you do 1 or 2 extra media items as insurance)
#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

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.

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.

Remember:
A Hotspot allows one image to be mapped into parts for multiple links. 		#5 10 pts
hotspot

Optional

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

Embed a YouTube Video
Add a working Embedded YouTube window to 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.

See video below of a 9-year old new Sailor at Bimini Bay Sailing.


Sample YouTube Embed code:
<iframe width="462" height="260" src="https://www.youtube.com/embed/Ra1G4C0SSE4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>		 #6 10 pts
YouTube

Insert or embed.
Do not just link.
7 RSS Feed
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: rss.com

YouTube RSS Tutorial
 Do a web search "RSS feed" and on "embed RSS on a web page" and insert an RSS feed into 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 your assignment):


RSS Feed. Created with RSS Feed Widget by FeedWind.

#7 10 pts
RSS Feed

Insert or embed.
Do not just link.
#8 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. #8 10 pts
z-index
(p 364)
#9 Your choice of something that is different or unusual.

Perhaps a fun Jib Jab.
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">		 #9 10 pts
Jib Jab

Number each item. Try to do 1 or 2 extras for insurance
#10
Embedded Social Media 		Create and embed your own attractive Instagram or other image sharing or social media account and connect it to your Web page. Make sure it clearly identifies you as the creator.
Or link a Twitter feed or Flickr or Facebook feed or a Google Calendar.		 #10 10pts
Twitter/X or
Flickr or
Instagram or
Be sure to test your page with FireFox, Chrome and Edge and a smartphone.
Upload the full path to media.htm to the assignment dropbox.