Advanced Features General Directions

Overview

Remember, in order to meet the "creativity and problem-solving skills" objective, the student is required to produce programming project solutions from given problem descriptions. Note that this objective is not met if a student is able to produce solutions only by pasting together given code fragments. Although pasting code fragments together is sometimes appropriate, it does not enforce the development of creativity and problem-solving skills. Therefore, the homework directions and grading will be tightly aligned to these course learning outcomes.

1. Demonstrate creativity and problem-solving skills.
2. Analyze web programs in order to test, debug, and improve them.
3. Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.
4. Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.

Please review the general directions from week 1.

This week you will be spending time learning how to integrate multimedia and other content into your web pages as well as create interactive and animations using the canvas element and javascript. The first program is very easy to implement because of the power of HTML 5. However, the second,will include using JavaScript and the canvas element and require planning on your part in designing your program.

Remember your site this term is a 'Rummage Sale" site.

Problem 1

Your boss wants to develop web pages that show the success of the rummage sale. So your goal is to create web pages that display video, audio and other content in web pages.

Learning Outcomes

• Demonstrate creativity and problem-solving skills.
• Create web pages and web programs that use: HTML5, cascading style sheets, dynamic HTML, JavaScript, forms with controls, and Canvas.
• Evaluate web pages and web programs to ensure that they use proper coding conventions and documentation.

Step 1. Create the overall HTML structureGather your data and create your basic page navigation structure

1. 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.
2. Edit the week7-1.html, week7-2.html and week7-3.html pages to have the same style sheet: homework.css
3. 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. Don't copy off of other web sites!
4. 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.
5. For Problem 1, we'll work with week7-1.html.
6. 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

1. You will be editing the week7-1.html page.
2. 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.)Links to an external site.. Because of the file size limitations with online classrooms, it's 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.)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 it's 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

1. Insert a video from a media server such as YouTube using iFrame. In the YouTube web site, locate the code they provide.
2. 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.
3.  (Links to an external site.)Links to an external site.
4.  (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.
6. Look at the pattern. It's the same pattern for the Taylor Swift video. Notice the querystring attached after the questionmark (?) in the url.

Insert audio media with HTML

1. 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.)Links to an external site.. Because of the file size limitations with online classrooms, it's acceptable to point to the video that is on the web.
2. 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.
3. If you need to convert your audio, there are many free audio converters out there. But it's not a requirement and there are plenty of sample videos you could use.
4. All media should be in media folder off the root folder

Step 3. Review and document your HTML

Review and document your program

1. Review your program to make sure you also used descriptive names for the variables, classes and other elements and stuctures.
2. Preview and test your program. Again, make sure there is adequate documentation in the programs!
3. If you need additional screen shots to show your program, just add them here.
4. Screen shots go here. Show the web page in the browser with the values displayed!
5. 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.

1. Gather your data and create your basic page navigation structure
2. Make a new copy of your page and name it week week7-2.html.
3. Make sure to include sufficient content in your pages! 
4. 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 JavaScriptInsert the canvas element in the page using HTML

1. 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 it's 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

1. 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.

Step 3. Review and document your programs

Review the documentation for your program

1. Review your programs to make sure you also used descriptive names for the variables, classes and other elements and stuctures.
2. Preview and test your programs. Again, make sure there is adequate documentation in the programs!
3. If you need additional screen shots to show your program, add them here
4. Include a screen shot of your web pages showing your web page in the browser.
5. Show the HTML, CSS, and JavaScript code.