John Abbott College Continuing Education Web Page Publishing ­ Project # 1 (30%)
You will create a web site for a restaurant (*). The site must include the following documents:
1. index.html : which should contain a couple of paragraphs talking about the restaurant, maybe its history or best known dishes, etc., as well as its address and telephone numbers.
2. dishes.html: contains the restaurant's menu ( a list of dishes served in the restaurant). 3. location.html: a page with instructions on how to get to the restaurant , including a map, and opening hours.
4. specials.html: this page must display specials for the week, including the specials' names, prices and what they include. There must be at least 3 different specials. 5. A style sheet file called base.css, which must be included in all three web pages as a external style sheet. It should contain style rules specifying at least the following properties: ◦
the site's text and background color; ◦
headings (h1 and h2) color, which must be different from the regular text color; ◦
font – including family, weight, size and line height; ◦
color, font, text decoration for the A tag in all its states (link, visited, focus, hover, active).
Other requirements:
1. All pages must contain meta tags indicating the content type, author, and keywords of the document.
2. All pages must use at least one h1 or h2 tag, and at least two images in each page. You are allowed to repeat images on different pages; for example, the logo of the restaurant may appear in all pages.
3. Formatting (colors, font, alignment, etc) must be done exclusively with CSS. 4. At least one of the pages should contain a list (ul or ol). I suggest you use bullets either on the dishes or the specials page.
5. All pages must contain links to the other pages in the site (i.e. a “navigation bar”).
6. All pages must have a XHTML Strict DOCTYPE definition. All your tags must be correctly formatted following the rules of the XHTML markup language (use the validator!).
7. All images must be contained within a folder called “images”.
8. File and folder names must follow the naming convention set up for the class (lowercase letters only and no spaces).
(*) NOTE: If you do not like the restaurant theme, you may choose to do your assignment on another topic, but I must approve it first. All requirements listed above still hold (number of pages, required HTML and CSS elements, etc.)
This assignment is due by Tuesday, March 22, 9 am. No assignments will be accepted after this deadline. Extensions may be given on a case­by­case basis, but you must ask for it before the deadline, and you must still submit your work on Tuesday even if it is incomplete.
To hand in the assignment: upload it to your account on Cont. Ed.'s web server, into a folder called project1 (inside of your webpub folder); or send a zip file with the contents of the assignment by email. If you send it by email, keep in mind that I will not accept any assignment that is not sent in a zip (compressed) file, and that it is up to you to make sure that I receive your assignment on time. Project #1 ­ Informational Web Site (30%)
Evaluation Criteria
Excellent
XHTML code
•
•
•
/ 30
•
•
CSS code
•
•
•
/ 25
•
•
•
Adequate
All pages contain the DOCTYPE tag for the XHTML strict mode. All basic structure tags (html, head, title, body) and meta tags are present in all pages. Paragraph, heading, formatting, list, image and hyperlink tags are used correctly to display the content of the document. The document content has been successfully separated from its appearance, i.e. there are no color, size, alignment or position attributes in any of the XHTML tags (except for those cases approved by the instructor ­­ in which the attribute was needed and there was no CSS equivalent to achieve the desired look). All pages have been validated with the W3C HTML validator and contain no syntax errors. •
A CSS stylesheet has been created and used for the whole site. Only linked (external) CSS style sheets are used in the pages. Any use of embedded styles was previously approved by the instructor.
All required CCS attributes are present in the style sheet. Style classes are used correctly to set up different looks for a given tag. All files containing CSS code, including the style sheet itself have been checked using the W3C CSS validator.
•
•
•
•
•
•
•
•
•
Fail
The wrong DOCTYPE is used in one or more pages.
Up to 30% of the structure and meta tags are missing, or there is misplaced content (for example, paragraphs in the head area). Up to 30% of other required tags are missing or have not been used correctly.
Some color, size, or alignment attributes were used without instructor approval. Up to 30% of the pages were not validated.
•
•
Up to 30% of the pages do not have an attached CSS style sheet. Embedded or inline styles are used without prior approval. Up to 40% of the required CSS properties are not present. Style classes are not used (when necessary) or are used incorrectly. Up to 30% of the pages containing CSS have not been validated.
•
There is no DOCTYPE.
More than 30% of the required tags, including structure tags are missing.
• Deprecated attributes for colors, sizes, alignment and position are used in most or all pages. • There are XHTML errors in 60% or more of the pages. The pages were not validated.
CSS is not used, it is used scarcely, or it is only used in embedded or inline form. • More than 40% of the required CSS properties are missing. • The CSS code (if any) has not been validated.
Excellent
Graphical interface, design •
•
•
/ 20
•
•
None of the images used is bigger than an average monitor screen size.
The text size and color, along with background color allow for an easy read. The design used is intuitive and simple, but attractive. It emphasizes the content and important features of the site. There are navigational aids (menu bar, links). The users can quickly find what they are looking for, or go back to previously viewed pages. The location and content of navigational aids is consistent (i.e. the size, location, and items in the “navbar” does not change from page to page).
Adequate
•
•
•
•
•
Up to 40% of the images used do not fit in one screen.
Up to 40% of the pages are not readable or contain sections that are not readable.
Up to 40% of the pages are too crowded or contain too much detail or changes in colours, making it hard for the user to focus on the content.
There are navigational aids but they are not necessarily intuitive, the user has a hard time figuring out how the menu works. There are small changes in the menu (size, location, items, etc.) from a page to another. Fail
•
•
•
•
•
•
Content and structure
•
•
•
/ 25
•
•
All required pages with the specified content are present in the site. All required folders (images) have been created and are used correctly.
The student followed the class naming convention for file names (no spaces, lowercase letters only, etc). All images display correctly and all links work when clicked on (that is, all the URL addresses are written correctly). The site structure is maintained in the zip file submitted or the directory where the site has been uploaded.
•
•
•
•
•
Up to 30% of the required pages, or parts of the requirements for the content is missing. The images or the styles folder is missing, or some of the images or style files are misplaced.
Up to 30% of the files were not named according to the convention. Up to 30% of the images or links do not display or work correctly. Some of the files or folders were misplaced when uploading or compressing.
More than 40% of the images used are too big for the screen size.
More than 40 of the pages are not readable or contain sections that are not readable.
More than 40% of the pages are too crowded or contain too much detail or changes in colours.
There are no navigational aids, or it is not obvious that they are navigational aids, or they are so unintuitive that a user cannot find their way around. It takes 3 or more clicks to get from one major section of the site to another. The menu (if it exists) changes considerably from page to page, so the user has to re­read the menu every time.
More than 30% of the required pages or features are missing. • There are no images or styles folders. • File naming convention was not followed for more than 30% of the files. • Even if there are sub­
folders, the files were not placed in the right location (the site structure was not maintained) when uploading or compressing. •