SYST10049 Web Development:Worksheet 2

Prev

Next

1. Review, connect, dig deeper

1.1. Familiarize yourself with SLATE
Did you review
  • Course Outline
  • SLATE's various menus
  • Academic Procedures for Evaluation
  • Course Material
  • Class Plan Information
  • Professor's contact information
Ask clarification questions in class (during Q&A), or SLATE discussion (any time).
1.2. Prepare working environment
Did you prepare, install (if required) or bookmark (for quick access), check, and familiarize yourself with
  1. your laptop environment
  2. VS Code editor
  3. Google Chrome
  4. local workspace
  5. hierarchy and wireframe diagrams (drawn on paper)
  6. Developer's tools
  7. HTML validator
  8. CSS validator
  9. Lorem ipsum (dummy) text generator
1.3. Take a closer look at how browser works
  1. Navigation
  2. Fetching resources
  3. Parsing HTML and CSS
  4. Executing JS
  5. Rendering

2. Read and explore more concepts

2.1. Preparing server environment
Start in class (Week 2) and complete by the next class (Week 3)
  1. SFTP to transfer files between client and server FileZilla client (or WinSCP client)
  2. cPanel access to dev.fast.sheridanc.on.ca To request/reset password tech.fast.sheridanc.on.ca/ (Services > LAMP/Git). Information for Hostname, Web URL, cPanel URL, FileZilla setup, WinSCP setup, username and password info.
2.3. Progressive Enhancement (PE)
Progressive enhancement is a design methodology that ensures a web site/application is accessible to everyone, regardless of what kind of device they're using. Read further here and complete the Exercise:
Read the following articles and then answer the questions below. Write your answers down in your notes in your own words. Understanding these concepts is key to understanding how to develop web sites and applications that are accessible to all users.
  1. What is progressive enhancement (PE)?
  2. Why is it important?
  3. What is graceful degradation, and how is it different from progressive enhancement?
  4. What are the four major reasons for developing with progressive enhancement in mind? Make sure you're able to briefly explain each in your own words.
2.3. Accessible Web Design and Development
Read about Accessible Web Design and Development. Explore standards and guidelines including, WCAG, WAI-ARIA, WCAG's POUR principles (Perceivable, Operable, Understandable, Robust). Try out the suggested activities - using Narrator, Accessing the Accessibility Tree in various browsers, and using WAVE.
  • Web Content Accessibility Guidelines (WCAG) 2 is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally. Read further WCAG 2 Overview - W3C Web Accessibility Initiative (WAI)
  • WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with HTML, JavaScript, and related technologies. Read further WAI-ARIA Overview - W3C Web Accessibility Initiative (WAI)

3. Practice. Practice. Practice.

3.1. Project environment
  • Create a standard project sub-tree in your local webspage (C:\public_html\syst10049). The project name is site123. Create it manually without looking up what to do.
  • Create a standard project sub-tree in your local webspage (C:\public_html\syst10049). The project name is week02. Create it manually without looking up what to do.
  • Create a standard project sub-tree in your local webspage (C:\public_html\syst10049). The project name is exercise1. Create it by copying the project week02.
3.2. Progressive Enhancement
  • What is progressive enhancement? why is it important?
  • List and describe the three components of web apps following the PE approach to web design.
  • Describe three ways in which the internet has benefited people with disabilities.
  • Describe three issues or obstacles that people with disabilities can have when using web sites or web apps.
  • List the four categories of disabilities. For each category, list two specific disabilities in that category and describe the issues a person with that disability might encounter when using web pages or web apps.
  • List and briefly degine each of the four WCAG principles for accessible web content.
  • (Opinion) Most companies aim (and struggle) to implement A-level compliance. Why do you think this is the case, when AA-level (or even AAA-level compliance is clearly the most helpful for users?
3.3. HTML document (web page)
  • Describe an HTML document. Explain all of its components (parts).
  • What is a minimal HTML5 document? Write out the code for a minimal HTML5 document.
  • What are information artefacts? list several and describe some. When would you use textual markup? semantic markup? Give examples.
  • How does design of a page help with marking up its content?
  • What is the difference in behavior between inline and block elements? List some and compare.