SYST10049 Web Development:Worksheet 5

1. Review, connect, dig deeper

1.1. Review and complete exercises from previous exercises:

• Review Exercise 3.3.1 (template project) — List the development steps. (What is the procedure?)
  Answer:

  1. Create project directory (folder).
  2. Create content subdirectory.
  3. Create images subdirectory.
  4. Create css subdirectory.
  5. Create template.html in project directory.
  6. Start with minimal HTML5 document.
  7. Add viewport meta element.
  8. Add author and description meta elements.
  9. Add prologue (documentation header).
  10. Add your own comments.
  11. Validate and correct all warnings and errors.
  12. Test using browser.
  13. Add standard content page areas.
  14. Validate and correct all warnings and errors.
  15. Publish project using Filezilla on dev.fast.sheridanc.on.ca.
  16. Validate for accessiblitity using wave.webaim.org. Correct all errors. Test with browser.
• Review Excerise 3.3.2 (mark up a letter project) — compare your version to solution. Revisit related examples and dig deeper:
  • Elements MAIN, P, H1, H2, H3, EM, KBD, MARK, INS, DEL, STRONG, SUP, DFN, CITE, VAR, DEL, SMALL, SAMP, CODE
  • Emphasis and importance (EM, STRONG)
  • Italic, bold, and underline "The elements <b>, <i>, and <u>...are known as presentational elements and should no longer be used"
  • Abbreviation and definitions
• Review Exercise 4.3.1 (structuring a page of content project) — What page areas are common to all project pages? On paper, draw the DOM diagram for the marked up content, starting with the BODY node (element) as the root (top) of the diagram.
• Review Exercise 4.3.2 (blog articles - single page project) — What page areas are common to all project pages? Is there a main navigation? Are you using only relative pathnames?
• Review Exercise 4.3.3 (blog articles - multi-page project) — What page areas are common to all project pages? Is there a main navigation? Are you using only relative pathnames? Review entire Section 3.2. of Worksheet 1, especially, What is a URL? File organization. and File navigation.
• Review Exercise 4.3.4 (explore medi - multi page project) — What page areas are common to all project pages? Is there a main navigation? Are you using only relative pathnames? Related example: IMG element with SRC, WIDTH, HEIGHT, ALT, and TITLE attributes

Keep working with references:

• Look up and read a definition of a term or concept you encountered previously: MDN Web Docs Glossary: Definitions of Web-related terms
• Explore how an element fits and how it is related to other element: Periodic Table of HTML5 Elements
• HTML elements reference
• HTML attribute reference
• Content categories

2. Read and explore more concepts

Complete the following tutorials

2.1. Page structure (WCAG Success criteria: 1.3.1., 2.4.1, 2.4.6, 2.4.10)

• Page Regions Page header, page footer, navigation, main content, complementary contant, using WAI-ARIA. (Techniques: ARIA11)
• Headings Heading ranks, organize passages of text, headings that reflect the page organization. (Techniques: ARIA12, G130, G141, H42, H69, H80, PDF9)
• Labeling Regions Using area-labelledby and aria-label. (Techniques: ARIA11, H69)
• Content Structure Articles, sections, paragraphs, lists, quotes, figures, images, tables. (Techniques: G62, H40, H48, H49)

2.2. Menus (MCAG Success criteria: 2.4.1, 2.4.3, 3.4.5, 2.4.7, 2.4.8, 4.1.2)

• Structure Menu represenation, identify menus, label menus, indicate the current item. (ARIA6, ARIA11, G14, G63, G65, G127, G128, G161, G182, G183, H4, SCR26)

2.3. Images

• Informative Images Examples 1, 2, 3, 4, and 5. WCAG techniques: G94, H37.
• Decorative Images Examples 1, 2, 3, and 4. WCAG techniques: H2, H67.
• Functional Images Examples 1, 2, 3, 4, and 5. WCAG techniques: H36, H37.
• Images of Text Example 1: Styled text with decorative effect Using an image; Example 2: Image of text used as an unlinked logo; Example 3: Mathematical expressions Using images. WCAG techniques: C22, G94.
• Complex Images Long descriptions. Examples 1 and 2. WCAG techniques: C22, G94.
• Groups of Images Examples 1 and 2. WCAG techniques: ARIA13, G196, H67.
• Image Maps Example 1. WCAG techniques: ARIA13, G196, H67.
• An alt Decision Tree
• Tips and Tricks

2.4. Tables

• Tables with One Header WCAG techniques: H51, H63.
• Tables with Two Headers WCAG techniques: H51, H63.
• Tables with Irregular Headers WCAG techniques: H63.
• Tables with Multi-Level Headers WCAG techniques: H63.
• Caption & Summary WCAG techniques: H39.
• Tips and Tricks Keep it simple. Table separation. Data separation. Alignment. Tables for layout.

3. Practice. Practice. Practice.

3.1 Explore images - multi-page project

Project Brief

1. Read all instructions before you start.
2. Complete tutorial 2.3. Images above
3. Start with a copy of the site_template project.
4. Name of the project: explore_images
5. Important: Create all pages from the template first. Make sure that the HEADER and FOOTER areas are the same. Include the unique H2 header in the MAIN page area, so that when you test the navigation, you will see to which page you have navigated. Then build and test the navigation, before you add the content to the individual pages. Make sure you test all possible link (from every page to every other page).
6. Home page (index.html) introduces the secondary pages and information (summarize, include key points and interesting observations, in your own words) from the tutorial pages, including "An alt Decision Tree" and "Tips and Tricks"
7. Secondary pages:informative.html, decorative.html, functional.html, textual.html, complex.html, groups.html, and imageMaps.html (stored in content sub-directory)
8. all pages have a common HEADER, NAV, and FOOTER. Use H1 in the header, H2 for MAIN element heading. There is no ASIDE used in this project. The navigation includes a link to the home page and the seven secondary pages. Use relative pathnames.
9. there are no images on the index page
10. implement the listed examples in Section 2.3. Images above for each secondary page
11. you do not need to download the images, copy and use the absolute URL (right-click on their image, select "Copy image address", then paste to your IMG element's SRC attribute) Note: if you are downloading any images, always include citation in your file's prologue, as well as a comment just above the element where the image is used.
12. Make sure to validate every pages, both for HTML validity and Accessibility.
13. Publish to assignments/assignment2 directory on the dev.fast.sheridanc.on.ca server.
14. Submit your Web URL to the project, together with the appropriate credentials (username and password) in the SLATE dropbox when it becomes available. Once the dropbox becomes available, it will state the due dates.

3.2. Explore data tables

Project Brief

1. Start with a copy of the site_template project.
2. Project name is explore_tables.
3. Read actively information about the project