CGS 2820C Web Development
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.
Short Interactive Tutorials:
W3Schools Media Introduction
W3Schools Audio Tutorial:
W3Schools Video Tutorial:
W3Schools YouTube Tutorial:
W3Schools iFrames Tutorial:
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.
HTML Media Tutorials below
Interactive W3Schools Audio TutorialsInteractive W3Schools Video Tutorials
Interactive W3Schools YouTube Tutorials
Make sure you MEET ALL GRADING CRITERIA below.
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.
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.
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>
Audio
(p 217-220)
Required
For full credit, insert or embed, so the player is visible.
Do not just link.
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.
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>
<video controls src="media/vKoiPond.mp4" type="video/mp4">
</video>
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 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!
Animated Gif
(p 117)
Required
Insert or embed.
Do not just link.
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.
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.
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)
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
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.
hotspot
Optional
Write me a note in the Assignment Dropbox telling me where to find the hotspot when you submit it.
Embed a YouTube Video
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>
YouTube
Insert or embed.
Do not just link.
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
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.
RSS Feed
Insert or embed.
Do not just link.
z-index
(p 364)
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.
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">
Jib Jab
Number each item. Try to do 1 or 2 extras for insurance
Embedded Social Media
Or link a Twitter feed or Flickr or Facebook feed or a Google Calendar.
Twitter/X or
Flickr or
Instagram or
Upload the full path to media.htm to the assignment dropbox.