SYST10049 Web Development:Worksheet 6

Prev

Next

1. Review, connect, dig deeper

  1. Worksheet 1: Review how internet works, what is webpage, website, web server, search engine; how to build a website; what is URL, how to use URL, difference beteen aboslute, relative, and semantic URLs; describe client/server environment, file system, file nameing conventions, file types, file organization, file navigation.
  2. Worksheet 2: Review progressive enhancemnent. Review accessible web design and development. Review HTML document.
  3. Worksheet 3: Review the client environment (from both user and developer perspective), the server environment, and the publishing process. Review the development process (review the steps in the creation of the templates project). How do you test? How do you validate for HTML validity? How do you validate for accessibility? What is HTML Living Standard? Review the document metadata, sections, grouping content, text-level semantics, links. Practice making lists.
  4. Worksheet 4: Review content categories (textual, semantic, interactive), inline vs. block behaviour; How do you structure a page of content? What page areas are common to all pages on a website? How do you create navigation? What is byline, jumpline, bookmark, anchor URL? Review working with images, video, audio, and other embedded and interactive elements. Practice making navigation.
  5. Worksheet 5: Review how to make page structures, menus, images, and table accessible. Practice making data tables.

2. Read and explore more concepts

In-class Exercise 1
Complete Quiz 1
  • Availability date has been extended to Oct. 20, 2023 11:59 PM
  • No penalties applied between Oct. 17 (due date) and Oct 20 (ends date)
  • Password has been removed.
In-class Exercise 2
Complete all six (6) exercises in Worksheets 3 and 4 (3.3.1, 3.3.2, 4.3.1, 4.3.2, 4.3.3, and 4.3.4). To receive a full grade:
  • all six (6) exercises must be complete on your laptop and published on dev.fast.sheridanc.on.ca
  • a single zip file of all six projects, with proper file structure is attached to this Dropbox, named yourUserName_e2.zip (make sure you substitute your user name for "yourUserName")
  • your web URL is entered in this Dropbox's Comments area (you can verify what your web URL is at tech.fast.sheridanc.on.ca/services/lamp).
  • show me in the classroom (Week 6).
Note: consider tutoring if you need help creating your ZIP file, or you are struggling with the course material.
In-class Exercise 3
Complete Quiz 2 (see details in SLATE)
Assignment 1
Complete 5.3.2 Explore data tables (see details in SLATE)
Assignment 2
Complete 5.3.1 Explore images - multi-page project (see details in SLATE)

3. Practice. Practice. Practice.

Self-assessment Rubric
Review and evaluate every solution before submitting
  1. is the solution an output of Phase 1 of Progressive Enhancement?
  2. is the markup compliant to HTML5 (HTML Living Standard)?
  3. does it contain minimal HTML5 document?
  4. does it contain any additional elements specified in the templates project?
  5. is HTML well-formed? does it adhere to code style? (indentation, whitespace)
  6. is HTML valid? have all validation errors and warnings been removed?
  7. is code well documented? is prologue up-to-date and contains the who, what, when, and why information? do inline comments explain code blocks? are all comments relevant and complete?
  8. is all content marked up with semantic correctness?
  9. is code validated for accessibility? have all errors and warnings been addressed?
  10. is content correct and clean? does it contain grammatical erros? spelling erros? or using lorem ipsum (instead of repetitious phrases)?
  11. is the project properly published? all file and directory names adhere to naming conventions? site follows standard file (required) organization?
  12. is all content properly rendering on local and server machine?
  13. reflect: what have you learned? what improvements can you identify? what's the next step (did you identify related concepts/functionality to pursue)?
For every project and exercise, practice how to
  1. draw the file organization as a hierarchy (on paper)
  2. draw a page as a wireframe diagram (on paper)
  3. draw DOM diagram of a HTML document or fragment (on paper)
  4. document a HTML document using comments, including prologue
  5. publish entire project
  6. publish a single file (add a new file to existing project)
  7. publish an update file (overwrite, or delete and upload, existing file)
  8. validate and debug HTML code (validator.w3.org)
  9. validate and debug accessibility (wave.webaim.org)