Step 1. Create the overall HTML structure

Gather your data and create your basic page navigation structure

Save a Word document with copies of your code and screen shots. Add this to your web site in the homework folder after you have completed both problems.

Edit the week7-1.html, week7-2.html and week7-3.html pages to have the same style sheet: homework.css

Make sure you have links to all of the pages for this week and the home button in your main navigation menu. You should have a consistent style or theme for your web site that is unique. Dont copy off of other web sites!

Make sure there is some place on the home page that has links to all of the other pages. You can do this in the main menu if you chose the first page layout from week 2. If you chose the Jumbotron, just create a link to at least to the first page for each week.

For Problem 1, well work with week7-1.html.

Make sure you add sufficient content to the page!!!!

Step 2. Insert Multimedia with HTML

Program Requirements: Use the window object methods to create a conversation between you and the visitor to collect information from the user. Determine if the user supports cookies. If yes, then store the information in cookies and then display the results in the web page.

Insert video media with HTML

You will be editing the week7-1.html page.

First you need to find videos or create your own.

Sample files you can download http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5 (Links to an external site.). Because of the file size limitations with online classrooms, its acceptable to point to the video that is on the web.

However you need to have at least 2 different video formats. Again, make sure to have multiple formats for the same video. The purpose is to that everyone can see the same video.

Although there are many YouTube downloading programs, please only use media that is in the public domain or has no copyright restrictions. Again, the Gutenberg Library is a great resource for older content (Gutenberg.org), or the Library of Congress for media (www.loc.gov (Links to an external site.)). An alternative is to download a video from online. In Google, you can right click on a link and select Save Link As, which allows you to save the target file locally. Try to keep The video on this page above is provided in multiple formats, and each is less than 1 MB.

If you need to convert your video, there are many free video converters out there. But its not a requirement and there are plenty of sample videos you could use.

All media should be in media folder off the root folder.

Insert the video in the web page using the video and source elements.

Save and preview the page in the browser.

Insert video from a media server

Insert a video from a media server such as YouTube using iFrame. In the YouTube web site, locate the code they provide.

Your task is to embed a video into your week7-1.html page. TIP: Notice the pattern if you embed a video.So be careful with what videos you use and respect copyright! View the top lists of YouTube Videos at https://www.youtube.com/playlist?list= PLirAqAtl_h2r5g8xGajEwdXd3x1sZh8hC. (Links to an external site.)

(Links to an external site.)For example, this would embed the video of Katy Perry Fireworks. Not all of the videos will allow you to embed the content, even if they provide the code.

Look at the pattern. Its the same pattern for the Taylor Swift video. Notice the querystring attached after the questionmark (?) in the url.

Insert audio media with HTML

First you need to find audio files or create your own. Samples you can use are located at http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5 (Links to an external site.). Because of the file size limitations with online classrooms, its acceptable to point to the video that is on the web.

However you need to have at least 2 different audio file formats. Again, make sure to have multiple formats for the same audio. The purpose is to that everyone can listen to the same audio. Try to keep the audio file small.

If you need to convert your audio, there are many free audio converters out there. But its not a requirement and there are plenty of sample videos you could use.

All media should be in media folder off the root folder

Step 3. Review and document your HTML

Review and document your program

Review your program to make sure you also used descriptive names for the variables, classes and other elements and stuctures.

Preview and test your program. Again, make sure there is adequate documentation in the programs!

If you need additional screen shots to show your program, just add them here.

Screen shots go here. Show the web page in the browser with the values displayed!

Screen shots go here. Show the HTML code (and any JavaScript if you used anything new)

Problem 2:

Step 1. Create the overall HTML structure

The owner wants to have a drawing of some of the objects in the rummage sale on the web site. You will modify the page to create a design using the canvas object and JavaScript. Then you will animate the canvas object in some way.

Gather your data and create your basic page navigation structure

Make a new copy of your page and name it week week7-2.html.

Make sure to include sufficient content in your pages!

Your goal is to draw an object that is for sale at the rummage sale. This semester you will create: two different lamps on a table. It would be helpful if you drew out your drawing first on paper or in a computer program like Illustrator or even PowerPoint.You might want to look at some videos on how to draw a lamp. There are several on YouTube.

Step 2. Create an graphical scene using the Canvas object and JavaScript

Insert the canvas element in the page using HTML

You must include:

Text elements with different font properties configured.

Insert the date of the event.

You need a combination of a variety of elements including:

A variety of shapes: squares, circle, ellipse, rectangle, polygon, lines and clipping regions

A variety of paths and arcs and curves.

Use a variety of different colors, gradients and images

A variety of special effects such as patterns, shadow, opacity and transformations

Remember that its a variety of elements and techniques that we are looking for. We are looking for creativity.

Use your knowledge of JavaScript to organize your code. For example you might use a function for the lamp and pass parameters or you might want to have a function for each lamp.

There are many ways to create your code. The key is to demonstrate your ability to organize and maintain your code and solve the problem.

Modify the canvas with JavaScript

Modify the canvas drawing in some way, which can be animations, or interactivity.

For example, you can have the user click the mouse to start drawing and stop.

You can move the lamp using simple linear movement with animation frames

You can have the user click and change a property such as the ben color.

You can have the user change the color fill of the lampshade.

Or come up with your own interactive program.

This will require you doing additional independent reading beyond what is in the book. So this is a challenge to show your problem solving skills and programming creativitiy.