COP4813 Assignment 2 – Full Web Site
Objectives
1. Demonstrate ability to create a simple web site.
2. Demonstrate ability to embed Javascript and CSS into web pages
Supports Student Outcomes 1, 2, 5
1 – Understand and use all the capabilities of modern web browsers.
2 – Ability to use XHTML capabilities to design and implement a web site.
5 – Ability to deploy web based designs in a server environment.
Assignment
For this assignment you will create a personal web site hosted on the server and available at the domain from Assignment 1- this will replace the Hello World site that you created in Assignment 1. This page will be accessible from your web domain registered in Assignment 1 – it does not have to be the default page. If it is not the default page, you will need to include the full URL to the correct page. (Submitting an incorrect URL will lose you 2 points – so get it right).
1. This page will need to have a menu. On this menu you will be adding links to other assignments (and adding additional links during the semester). You can create your own menu from scratch or use one of the hundreds of different menu systems available on the internet with a simple Google search.
Here is a sample set of menu items – you may structure your menu however you desire;
My Classes
– Link to class 1
– Link to class 2
My Assignments <- You will want this and keep it up to date
– Assignment 1
– Assignment 2
My Favorite Sites <- Optional
– link
– link
Programming Sites <- Optional
– link
– link
Remember – these will need to be included as a menu.
A lecture on how to do this is at Lecture – JavaScript – Creating menus with JavaScript and Lecture – JQuery – Menu Example in JQuery .
You are welcome to include other items in your menu or choose different sets of menu items. The only required menu item is links to your assignments in this class. The other links are recommended to help you create a site that will allow you to demonstrate your ability as a web developer. I recommend also links to resources that you find that are useful completing this class.
2. This page will need to have some information. One will be the purpose of this site, this is a site for the COP4813 class where you will be demonstrating your web programming. This is also somewhat of a resume – here you will show and tell potential employers what you can do. Include information on the site that you would like them to know. A picture is useful, though it does not necessarily have to be a face shot of you.
3. Organization of the site – It is expected that the site use well-formed html and also correct Cascading Style Sheets (css). I highly recommend using a single external css file – this will allow you to make easy changes to the site by modifying the CSS. I will be checking this and there are plenty of tools that allow you to do this ( like http://nibbler.silktide.com/ or http://achecker.ca/checker/index.php). I will be testing your site using a tool I pick at random and grading based on results. You should discuss questions about tools and compliance on the Discussion Board.
Submit your link to the Assignments Page (text file with URL) and also post to the Assignment 2 discussion board.
Information
All pages from this assignment forward Must be ADA compliant – example: you can use a tool to check this – https://www.webaccessibility.com/.
All pages must have descriptive metadata.
All pages must be W3C compliant. I will be validating with one or more validation engines such as https://validator.w3.org/
Estimated Completion Time
This should take 10-20 hours to create a good web site.
Supporting Lectures
You should be watching all lectures involving HTML, CSS, and JavaScript at COP 4813 Lectures. There are 2 specific lectures on creating and using menu’s – you do NOT need to use these menu systems, but you should still watch the lectures.
1. Lecture – JavaScript – Creating menus with JavaScript
2. Lecture – JQuery – Menu Example in JQuery .
If you have no experience at all with html then I highly recommend the lectures; (along with doing the tutorial at w3c schools)
1. Lecture – Getting Started in HTML
2. Lecture – Getting Started with CSS
At this stage – get used to using the Lectures Page at COP 4813 Lectures – I add lectures based on the questions I have from students on the bulletin board.
Questions and Answers
Q: What tools can I use?
A: Any tools you desire to use. I do recommend, however that you have the ability to enter/edit raw html when needed. You will be using html and css through the entire class, you do not need to be an expert at this point. This is just to get you started. If you use an html editor (like Dreamweaver, Expression Web, Visual Studio, or others) – be sure you can easily drop into raw html format with any editor you use.
Q: What tools do you recommend?
A: I do most of my editing in Notepad++, there are lots of good tools for this. The Discussion board is a great resource to ask questions – use it.
More is at Assignment 2 Frequently Asked Questions
External Resources
1. W3 Schools – The tutorials at w3 schools are the best way to get started with this assignment. These are at http://www.w3schools.com/ and you should complete the tutorial on html and css – or at least gain a level of proficiency in both technologies.
2. JQuery – I recommend getting familiar with JQuery so that you can easily use JQuery resources. I have a few getting started lectures on JQuery on the lectures page. As for menus – here is a list of menu choices that are pretty easy to incorporate into your web page once you get familiar with JQuery http://speckyboy.com/2011/07/04/15-fresh-jquery-menu-plugins-and-tutorials/
3. Browser Console and JavaScript tools – If you look in the menu of any browser you will find a Developer Menu. It is worthwhile to get used to using this menu. This will help you debug JavaScript, view a page DOM, insert and try CSS, and much more.
Grading Criteria
The web site must;
(5 points) Contain all required elements (Menu, image, at least 2 pages)
(2 points) Contain no HTML errors
(2 points) Contain no CSS errors
(1 point) Contain no Javascript errors
I will be using validation tools to check this. There are (1) tools to do this built into Chrome, (2) Plugins to Netscape that do this, (3) external validation tools like http://validator.w3.org/