Original file was S10Lab3.tex



CSCE 102 Final Project

Two due dates

Final Due Date - the last week of classes the night before your last lab the week of December 2-5

Start early

First Due Date: You must be able to show your lab instructor that you have completed a significant portion by the week of

November 11-14.

(it must be on your x-drive the night before your lab.

No late submissions will be accepted

By the first due date you are to have a significant amount completed and on your x-drive.

This will count 20% of your project grade.

Complete the first two pages with the exception of the slide show. And have a good start on the external CSS so that all it needs is a little polish.

If you can complete more by the first deadline, that would be good!

You can complete the slideshow as soon as it is covered in lecture.

You will be doing a similar navigation in lab and also a CSS animation so you will know how to do those as soon as you have completed those assignments. You can then complete that part of your project.

DO NOT PRINT the Code, turn-in only on the x-drive

read the entire assignment before you start.

All work must be your own with the exception of the required downloaded JavaScript.

Create a well-designed, interactive, informative, professional looking website using the following specifications. The layout, content, and navigation needs to be carefully planned. Your pages and your code should not look like anyone else’s.

General information

• As always, you must write the code for this assignment (with the exception of the one JavaScript that is to be downloaded and code given in class). The work you turn in must be your work.

• Be sure to include comments for the code that you did not write so that it is clear where the code came from.

• Do not share your code with anyone.

• Do not copy from others.

• Do not copy from the web (with the one exception).

• Your code, layout, style and the content of your page will not look like anyone else’s.

• Use care not to plagiarize content or code from the web.

• Do not use anyone else’s code – you don’t want to be turned in to Academic Integrity.

• All cheating will be reported to the Office of Academic Integrity.

• Anyone found cheating will receive an F in the course.

_____________________________________________________________________

Note: Download Brackets on your computer or use it in the lab. It is an editor that will help you with your code. Brackets provides suggestions as you type, the closing tags, etc. Brackets is available in the labs and can be downloaded to your computer. (It is free; we are not asking you to purchase anything.)

_____________________________________________________________________

Specifications

• Create a folder named A_Final_Project__xx in your All_102Submissions folder to contain all of your files for the final project. As always xx is replaced by your initials.

• You will create exactly 4 HTML documents for your web site.

• These pages open the door for you to show your creativity and to show what you know.

• Use the structural/semantic elements provided in HTML5; See pages 48 in your Web Design book (by Terry Felke-Morris). (These are the elements that you used in the layout lab assignment.)

• Your grade will be based on:

• The use of HTML/CSS/JavaScript (Think about doing something that you think is neat. Remember to test and validate your code.)

• The layout, style, and content (Be creative and take the time to fine tune your page.)

• Completeness (Be certain that all the requirements are included, the content is well written and free of spelling and grammar errors.)

_____________________________________________________________________

Layout and Style

• The layout should be planned and well thought-out. Make it look professional, not too flashy or tacky.

• Structure the page with HTML and apply styles to all pages with an external CSS file.

• Note: You must use an external CSS; internal and inline/local CSS is optional and may be used also but most of your CSS must be in the external CSS. (Remember it matters whether the link element is above or below the style element.)

• Make the pages fit nicely together and look like a well-planned website designed to work together; not just random pages. Think about the layout, the style, the navigational flow (we will give you a plan for the navigation) as well as the content.

• Consider using some interesting styles in addition to what we have used in class; such as CSS3 box shadow, text shadow, opacity, gradients,transform or other styles if you have not tried them earlier (some are explained in the HTML5 Web Design textbook by Terry Felke-Morris and you can also refer to W3Schools).

_____________________________________________________________________

Navigation

• The navigation will be the overlay navigation that you will do in lab or some variation. You can change navigation so that it is similar, not identical to the lab assignment. For example have it cover a different percentage of the page, put the links in a different place or use different colors. You still need to use the overlay.

• You must have a menu with hyperlinks on every page within your project that allows navigation to the other web pages within your project so you will use the overlay navigation on every page.

• The navigation menu should be consistent across all the pages of your project.

_____________________________________________________________________

• Page 1 ̶ Will be a page about you

• Create a page about you named A_ project_start_xx.html. (As always xx is replaced by your initials.)

• Include information about you.

• Include at least one JavaScript which is to be downloaded from the web. Select a free JavaScript from the thousands that are available – nothing too tacky. (Search for a free JavaScript that you think will fit nicely into your page and cut and paste it into your code as directed.) Include comments telling where you got this JavaScript and what it does.

• Include two JavaScript functions that you write.

• Include an animation. See

(you will do an animation in lab.)

• Page 2 Will be about something of interest to you.

• Create a page about something of interest to you.

• Include a slideshow with at least 9 images related to your topic. (A slideshow will be taught in class.)

• Incorporate a video of a TED talk. Try to find a TED talk related to your interests.

___________________________________________________________________________

Embedding Videos

Here are three easy ways to embed a video in your web page.

1. Use the share/embed code from YouTube

1. Below the video on there will be a “share” button

1. Click this button and select “embed”

2. Copy the code provided and paste into your html file where you want the video to be located

1. Create your own element

1. Follow tutorial here

2. Note: id for video can be found after watch?v= in url

1. For example: watch?v=12345

2. video id is 12345

3. Use embed/12345 as src for

2. Use tag

1. Use embed/12345 as src

1. 12345 replaced by the id for your selected video

Notes

1. Some videos on YouTube are set to not allow embedding

1. If you are having problems try selecting another video

2. Do not use the tag

1. It requires the direct file not the YouTube link

3. Make sure to replace the watch?v= in the url with /embed/

__________________________________________________________

• Cite your sources at the bottom of the page in a list, by giving the links. (MLA format is not required)

• Note: Do not copy from the web. The text, like the code, must be your own. Do not copy from anyone else.

___________________________________________________________________________________

• Page 3 – Will probably be the largest page. It is to be about the history of computers.

• Research the topic and create an informative webpage.

• Include information about what has happened

• Beginning of computing

• Early computers

• People in computing

• Development

• Impact on the way we live today

• Use at least three sources which are to be cited in a reference section at the bottom of this page.

• In your conclusions express your findings as well as your opinion.

• Include a feedback form below your conclusions for the viewers to express their opinions. As part of the feedback, collect the user's intended display name and their comments.

• Include a button in this form and display all the collected information when they click on a button.

• Write a JavaScript function that will display the comment from the user on your web page along with the user's display name in a paragraph when the button is clicked.

• (Hint: It will require another HTML element in addition to a form, which acts as a placeholder for the newly added comments. This placeholder could be a p element without any content inside.) Display the user's display name along their comment.

• Page 4 – Is to be about computer viruses, what they are, the trouble they cause and how to avoid them.

• Explain what a computer virus is

• The types of viruses

• How they work

• How they are spread

• Where they come from

• The dangers and problems they cause

• Etc.

• Note: Make the pages interesting. You must have exactly four HTML documents and one CSS document. So plan the layout, style and content carefully.

_____________________________________________________________________

Tips and hints

1. Prepare a detailed plan for your project before you start writing code. Decide on the content of the page along with the images, links, etc. that will be used.

2. Include appropriate comments (in the CSS, the JavaScript and in the HTML) throughout your code to explain anything unusual, neat, or to point out things that were required in the specifications.

3. Start early. The project is not something that can be finished on the last day. The labs will fill up during open lab hours since other sections will also be working on their projects. No projects will be accepted late.

4. All HTML code must be HTML5 compliant.

5. Test your page frequently in the browser; it is more difficult to debug after entering a lot of code.

6. If you do not know how to do something, refer to your notes, textbook and of course W3Schools. If you still cannot find the answer, ask. There are open hours almost every day.

7. Download the images you want to use; do not use the URL's to load images from the internet. All images must be available on your X drive.

8. Always save backup copies of your work. Keep more than one copy in more than one place. Flash drives and hard drives can go bad and can be lost or stolen. It is more work than can be done in one night.

9. Always work from the X drive when you are in the lab. It is backed up and we can retrieve earlier versions of a file if it becomes corrupted or is accidentally deleted.

10. Use the validation tools to check your code before submission at . You can also use the Chrome developer tools and Brackets.

11. There are lab monitors to help you during open lab hours.

12. The project will be graded based on completeness of code and content, accuracy as well as creativity.

13. Be creative. You can include sound (this is optional) or additional neat JavaScript functions that you write; include comments that tell what you are doing. You can also look at W3Schools for other neat things that you can use; be certain that you reference them and do not try to pass them off as your own. Include comments to explain the neat things that you have included.

14. Your code will not look like anyone else’s. You are to type your own code and content for your project pages. Do not copy text from sources online; that would be is plagiarism.

15. Do not copy from the web with the exception of the free JavaScript.

16. Use references wherever you think it necessary; the references are on the bottom of the current page.

17. Do not use any code or text from someone else; using someone else’s work will lead you to the Academic Integrity Office. All work must be your own.

18. Your Submissions must be placed on your X: drive by the deadline.

19. Remember there are two deadlines.

20. There are no late submissions. No projects will be accepted late.

21. Start early/ finish early.

Note:

• Do not submit a print out of the project. Make sure that you save your project on your X drive by the due date. DO NOT PRINT. ONLY the X-drive SUBMISSION IS ACCEPTED.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download