Skip to content
Snippets Groups Projects
Commit 4a019c09 authored by Jennifer Mankoff's avatar Jennifer Mankoff
Browse files

Merge branch 'week4-changes' into 'UACCESS-23fa' 

Week4 changes

See merge request undergrad-accessibility-website!46
parents 2e720f85 0d9958c8
No related branches found
No related tags found
3 merge requests!12Accessibility website jen summer work,!9Q access 24 sp,!8Q access 24 sp
Hide whitespace changes
Inline Side-by-side
slides/access-trees.html
+ 73
− 31
View file @ 4a019c09
...@@ -25,6 +25,17 @@ class: ...@@ -25,6 +25,17 @@ class:
## Make sure zoom is running and recording!!! ## Make sure zoom is running and recording!!!
## Make sure captioning is turned on ## Make sure captioning is turned on
---
# Announcements
Reminder: what to do if you miss a class
Reminder: regrades
Summary: We'll keep doing it and add some moer details to it as requested
Visual calendar: We've heard this a few times. But I'm not sure where to put it or why canvas doesn't work. Can someone who's asking for this help us out with some user-centered desgin after class? :)
--- ---
[//]: # (Outline Slide) [//]: # (Outline Slide)
# Learning Goals for today # Learning Goals for today
...@@ -201,25 +212,6 @@ Easy to split this up among a group ...@@ -201,25 +212,6 @@ Easy to split this up among a group
- Style sheets must be linked to an html page in the <head> for the styles to work - Style sheets must be linked to an html page in the <head> for the styles to work
`<link href=“style.css” rel=“stylesheet” />` `<link href=“style.css” rel=“stylesheet” />`
- Great example is [CSS Zen Garden](http://www.csszengarden.com/) - Great example is [CSS Zen Garden](http://www.csszengarden.com/)
- Exercise in [Ed](https://edstem.org/us/courses/38124/lessons/59447/slides/331625)
---
# CSS
.left-column50[
- Files consist of one or more rule sets
- Each rule set has a selector which chooses which HTML elements you want to style
- Style properties are set with rules which are property/value pairs
- Syntax is important
- More on [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
]
.right-column50[
![:img CSS rules description, 100%, width](https://code.makery.ch/library/html-css/part3/css-rule.png)
From [W3Schools](https://code.makery.ch/library/html-css/part3/)
]
--- ---
# Layout in CSS # Layout in CSS
...@@ -233,11 +225,10 @@ fortunately there is CSS [Flexbox](https://courses.cs.washington.edu/courses/cse ...@@ -233,11 +225,10 @@ fortunately there is CSS [Flexbox](https://courses.cs.washington.edu/courses/cse
--- ---
# Document Object Model (DOM) # Document Object Model (DOM) (1/3)
.left-column[ .left-column[
![:img DOM Example, 110%,width](img/building/dom.png) ![:img Initial screen for the spot the heron app, 90%,width](img/building/spottheheronscreen.png)
] ]
.right-column[ .right-column[
...@@ -248,22 +239,73 @@ fortunately there is CSS [Flexbox](https://courses.cs.washington.edu/courses/cse ...@@ -248,22 +239,73 @@ fortunately there is CSS [Flexbox](https://courses.cs.washington.edu/courses/cse
] ]
--- ---
# Let's compare that to an app # Document Object Model (DOM) (2/3)
.left-column[
![:img Initial screen for the spot the heron app, 90%,width](img/building/spottheheronscreen.png)
]
**Interface Programmers** combine library elements according to toolkit rules & .right-column[
constraints of architecture (common to all UI toolkits). What does this hierarchy look like?
Example: let's list all the components of this image: ]
---
# Document Object Model (DOM) (3/3)
.left-column[
![:img Initial screen for the spot the heron app, 90%,width](img/building/spottheheronscreen.png)
]
.right-column[
<div class="mermaid">
%%{init: {'theme':'base', 'themeVariables': { 'primaryColor': '#4CAF50', 'tertiaryColor': '#009688', 'fontSize': '16px', 'textMargin': '0px', 'text-align': 'left' }}%%
flowchart TD
A(Main Window)
B(Vertical Layout)
C("Spot the Heron" Label)
D(Picture of a heron in water with some reeds)
E(Horizontal Layout: Controls)
F(Left arrow)
G(Play)
H(Right arrow)
A --> B
B --> C
B --> D
B --> E
E --> F
E --> G
E --> H
classDef default fill:#009688,stroke:#333,stroke-width:2px, color:white;
classDef reflect fill:#4CAF50,stroke:#333,stroke-width:2px, color:white;
class A,B,C default
class A,B,C,D,E reflect
linkStyle default stroke: black,stroke-width:8px
</div>
]
---
# Let's compare that to an app
.left-column50[
**Interface Programmers** combine *library elements* (e.g. buttons and labels) according to *toolkit rules* &
constraints of *toolkit architecture* (common to all UI toolkits). Example: let's list all the components of this image:
![:img Picture of a very simple interface showing a ringing bell at ![:img Picture of a very simple interface showing a ringing bell at
left and an x at right to close the window with the words Google left and an x at right to close the window with the words Google
Calendar reminder Christian and Anind (Jen Mankoff) is starting at Calendar reminder Christian and Anind (Jen Mankoff) is starting at
12:30pm. Video call between them, 60%, width](img/building/interface.png) 12:30pm. Video call between them, 100%, width](img/building/interface.png)
]
**Pause and think:** .right-column50[
- How does the toolkit know where to put the components on the screen? Discussion (post on [Ed]({{site.discussion}}/3666535))
- How does the toolkit know how to draw each component? - What are the "components" in this image?
- What does the "interactor hierarchy" look like for this image
]
??? ???
discuss with your neighbor discuss with your neighbor
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment