WebDev MidTerm Review.pdf

Week 1 More Specifically, the stages of Web Development are: 1. Definition 2. Planning 3. Development 4. Testing 5. Launch 6. Maintenance Client Server Wendi Jollymore: Wendi's Web - HTML: Client-Server Model (terminallearning.com) HTML: Hypertext Markup Language Codes the...

Week 1 More Specifically, the stages of Web Development are: 1. Definition 2. Planning 3. Development 4. Testing 5. Launch 6. Maintenance Client Server Wendi Jollymore: Wendi's Web - HTML: Client-Server Model (terminallearning.com) HTML: Hypertext Markup Language Codes the structure and content of a page or document Uses HTML elements – the “coding” parts of HTML: Body Sections Paragraphs Lists Header Footer Navigation menu … CSS: Cascading Style Sheets Codes the style of the document: Fonts Colour scheme, Layout Spacing Borders Styles can include hundreds of properties CSS Cont’d Styling kept separate of HTML Easier to keep the styling consistent for multipage document If I want to update the style of my document/web site, I only have to edit one CSS file, not each page of my document Index.html Serves as an index to the main pages on the site, often referred to as the home page The page that is displayed when the server accesses the website directory The index.html file is stored at the root of the server’s directory structure URL Uniform Resource Locator The address of a specific resource on the web Links often hide the URL. ClassPlan SYST15892 2024 Winter - SYST15892 Interactive User Interface Design (sheridancollege.ca) Is for the following URL https://Slate.sheridancollege.ca/d2l/le/content/1191329/viewContent/ 15548553/View Go to this link and look at each component of a URL What is a URL? - Learn web development | MDN (mozilla.org) URLs Each page in a website has it’s own unique URL (all the more reason to have a good file structure on the server) Absolute and Relative URLs Absolute: the full URL Relative: relative to the current page Week 2 Week 2: Accessible Design Progressive Enhancement Overview of Accessible Web Design WAI-WCAG This Photo This Photo by Unknown Author is licensed CC BY-NC-ND under CC BY-NC-ND This Photo CC BY-SA-NC This Photo by Unknown Author is licensed under CC BY-SA-NC 10/8/2024 Wendi Jollymore, FAST: SYST10049 11 PE: Content and Structure Design/code structure of page Create/code content of page Readable/Usable on any device, including Screen readers Small/large screens Portrait/landscape orientation 10/8/2024 Wendi Jollymore, FAST: SYST10049 12 Structure and Content Headings Paragraphs Lists Tables … 10/8/2024 Wendi Jollymore, FAST: SYST10049 13 Why separate the content? Facilitates adding assistive technology Enables easy change to different presentations (font, font size, contrast, …) Avoids ambiguity. Presentations/Styles don’t unambiguously define structure (Eg. Something bolded could be misconstrued to be a heading.) 10/8/2024 Wendi Jollymore, FAST: SYST10049 14 Clearly defined structure allows: Transformations suitable for the device and disability (Eg. generating a list of sections with links) Allows one to design interaction based on the structure Allow text readers to clearly distinguish text 10/8/2024 Wendi Jollymore, FAST: SYST10049 15 Progressive Enhancement (PE): Appearance and Layout Design/code appearance Colours, borders, fonts, etc. Design/code layout Enhancement only Supports all devices 10/8/2024 Wendi Jollymore, FAST: SYST10049 16 Progressive Enhancement: Why? link to PE article 1. Accessibility 2. Portability 3. Modularity 4. Site Performance 10/8/2024 Wendi Jollymore, FAST: SYST10049 17 Intro to Accessibility Resource: WebAIM https://webaim.org/intro/ (AIM: Accessibility in Mind) Disability Categories: Visual Auditory Motor Cognitive 10/8/2024 Wendi Jollymore, FAST: SYST10049 18 WAI-WCAG Web Accessibility Initiative – Web Content Accessibility Guidelines W3C (World Wide Web Consortium) Principles Guidelines Success Criteria Techniques link to wcag 2.2 10/8/2024 Wendi Jollymore, FAST: SYST10049 19 WAI-WCAG: Principles Defines WHAT IS accessible web content POUR Perceivable Operable Understandable Robust 10/8/2024 Wendi Jollymore, FAST: SYST10049 20 Perceivable Vision impaired: Font size, contrast Colour change of button not noticeable Hearing impaired: Use captions with video 10/8/2024 Wendi Jollymore, FAST: SYST10049 21 Operable All navigation usable by all users Usable with only a keyboard Sufficient time to read or hear Components easy to find and navigate Not trigger seizures or physical reactions (flashing things, excessive animation) Hand gesture interaction (eg. pinching or stretching): need to provide alternatives 10/8/2024 Wendi Jollymore, FAST: SYST10049 22 Understandable Everyone should be able to understand the content Ensure interactive components don’t cause: Drastic changes in screen/font size Cursor jumping to …? Scrolling to …? Consistent navigation Context-sensitive help Personal beef: excessive use of acronyms 10/8/2024 Wendi Jollymore, FAST: SYST10049 23 Robust Hard to break / difficult to crash Should work on different browsers, different screen sizes Unexpected selections should still leave the app functioning 10/8/2024 Wendi Jollymore, FAST: SYST10049 24 WAI-WCAG: Success Criteria (SC) Each guideline has one or more success criteria Each SC = a standard, a test, a check Each SC has a conformance level A = your site should definitely meet this SC AA = this too, but more work, few sites meet all AA SC AAA = nice to have, not required, specific 10/8/2024 Wendi Jollymore, FAST: SYST10049 25 Week 3 HTML An application of SGML (Standard Generalized Markup Language) SGML defines the structure/syntax that HTML uses (DTD, Dounment Type Definition) XML (Extensible Markup Language) is also derived from SGML Stricter than HTML, often used for transferring data over networks HTML History W3C founded by Tim Berners-Lee in 1994when he left CERN to establish WWW standards 2004 WHATWG (Web Hypertext Application Technology Working Group) formed by Apple, Mozilla and others W3C pushed for a more rigid XHTML type structure and fixed versions with release dates WHATWG pushed for a flexible structure and a live version with continuous updates 2014 HTML 5 live version became the sole standard WHATWG responsible for maintaining and enhancing HTML Tells browsers how to structure the page Contains elements Elements contain tags, opening and closing pairs See the cat P is the element name, presents the text as a paragraph Tags enclosed in Closing tag includes / The element is the complete item, tag to tag Elements Elements can be nested, that is one is contained inside another. Void elements Don’t have a closing tag Typically to inert something in the document, for example inserting an image using / not required but keeps it consistent with XML Attributes Elements can have attributes Attributes contain info that is not part of the content Note the structure: Space (space is a separator in HTML) Attribute name = Attribute value in quotes See image element previous slide Attributes Image element attributes src (required) alt width height Boolean Attributes Eg. disabled disabled=“disabled” Since it’s Boolean you can use a shortcut and just have disabled Quotes around attribute values Always include, skipping them works in some instances but best to be consistent and avoid possible errors Single or double quotes work, but best to have a consistent coding practice Using one type of quotes let’s you use the other type inside Can’t mix quotes If need to use the same quotes then need to use HTML entities: title=“My "Favourite&qout; Gook” Structure of an HTML Document test page Playing with HTML HTML Document Parts Historical artifact to be included Wraps around all of the page content Sometimes called the root element Contains things you want included that are not part of the content viewers see eg. Key words, description HTML Document Parts The meta element Including the UTF-8 character set is a good idea, covers majority of languages Name that appears in the browser tab The content Attributes Elements can have attributes Attributes contain info that is not part of the content Note the structure: Space (space is a separator in HTML) Attribute name = Attribute value in quotes See image element previous slide Attributes Image element attributes src (required) alt width height Boolean Attributes Eg. disabled disabled=“disabled” Since it’s Boolean you can use a shortcut and just have disabled Quotes around attribute values Always include, skipping them works in some instances but best to be consistent and avoid possible errors Single or double quotes work, but best to have a consistent coding practice Using one type of quotes let’s you use the other type inside Can’t mix quotes If need to use the same quotes then need to use HTML entities: title=“My "Favourite&qout; Gook” Structure of an HTML Document test page Playing with HTML HTML Document Parts Historical artifact to be included Wraps around all of the page content Sometimes called the root element Contains things you want included that are not part of the content viewers see eg. Key words, description HTML Document Parts The meta element Including the UTF-8 character set is a good idea, covers majority of languages Name that appears in the browser tab The content Structure of a Minimal HTML Document test page Playing with HTML Week 4  src –the source attribute Note the relative path Alt –alternative text in case image cannot be displayed Don’t use links to absolute URLS Image If alt is left blank, a reader will read the src. This is usually meaningless. If alt=“” then the screen reader will ignore the image assuming it is simply decorative The Figure Element Like the paragraph element, it is a block/structure element that contains content Its content typically an image and an optional figure caption This is a photo of something Figure Usage Typically when it is referred to in the text. For example: “As seen in Figure …” Separates the figure from the text Not limited to images. Could have a paragraph of text as the content of the figure Absolute versus Relative Paths Absolute defines the full path, the URL Relative defines the path relative to where you currently are / = root (on the server the public_html directory)../ = up one level (directory/folder)../../ would be up 2 levels./ = the current directory  HTML Sectioning Structuring your content with semantic elements Structuring Web Content into logical blocks Reflects/implements the structure of content determined by your plan / hierarchy Sectioning implements block elements which in turn contain content When implementing structure, remember that elements can be nested  A self-contained component / composition /article Eg. a blog post, a magazine article, a news article, a review  A self-contained component / composition /article Eg. a blog post, a magazine article, a news article, a review