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

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

upgraded mermaid; added answer slide

See merge request undergrad-accessibility-website!48
parents 24c5ddb3 4cfb96da
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
Showing
with 33 additions and 148380 deletions
_config.yml
+ 1
− 1
View file @ 8b863cfd
......@@ -66,7 +66,7 @@ sass:
kramdown:
toc_levels: '1'
mermaid: 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'
mermaid: 'https://cdn.jsdelivr.net/npm/mermaid@10.5.0/dist/mermaid.min.js'
remarkConfig:
# possible highlight options:
......
_config_production.yml
+ 1
− 1
View file @ 8b863cfd
......@@ -66,7 +66,7 @@ sass:
kramdown:
toc_levels: '1'
mermaid: 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'
mermaid: 'https://cdn.jsdelivr.net/npm/mermaid@10.5.0/dist/mermaid.min.js'
remarkConfig:
# possible highlight options:
......
_scss/mermaid/class.scss deleted 100644 → 0
+ 0
− 78
View file @ 24c5ddb3
g.classGroup text {
fill: $nodeBorder;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 10px;
}
g.classGroup rect {
fill: $nodeBkg;
stroke: $nodeBorder;
}
g.classGroup line {
stroke: $nodeBorder;
stroke-width: 1;
}
.classLabel .box {
stroke: none;
stroke-width: 0;
fill: $nodeBkg;
opacity: 0.5;
}
.classLabel .label {
fill: $nodeBorder;
font-size: 10px;
}
.relation {
stroke: $nodeBorder;
stroke-width: 1;
fill: none;
}
@mixin composition {
fill: $nodeBorder;
stroke: $nodeBorder;
stroke-width: 1;
}
#compositionStart {
@include composition;
}
#compositionEnd {
@include composition;
}
@mixin aggregation {
fill: $nodeBkg;
stroke: $nodeBorder;
stroke-width: 1;
}
#aggregationStart {
@include aggregation;
}
#aggregationEnd {
@include aggregation;
}
#dependencyStart {
@include composition;
}
#dependencyEnd {
@include composition;
}
#extensionStart {
@include composition;
}
#extensionEnd {
@include composition;
}
_scss/mermaid/dark/index.scss deleted 100644 → 0
+ 0
− 54
View file @ 24c5ddb3
$mainBkg: #BDD5EA;
$secondBkg: #6D6D65;
$mainContrastColor: lightgrey;
$darkTextColor: #323D47;
$lineColor: $mainContrastColor;
$border1: #81B1DB;
$border2: rgba(255, 255, 255, 0.25);
$arrowheadColor: $mainContrastColor;
/* Flowchart variables */
$nodeBkg: $mainBkg;
$nodeBorder: purple;
$clusterBkg: $secondBkg;
$clusterBorder: $border2;
$defaultLinkColor: $lineColor;
$titleColor: #F9FFFE;
$edgeLabelBackground: #e8e8e8;
/* Sequence Diagram variables */
$actorBorder: $border1;
$actorBkg: $mainBkg;
$actorTextColor: black;
$actorLineColor: $mainContrastColor;
$signalColor: $mainContrastColor;
$signalTextColor: $mainContrastColor;
$labelBoxBkgColor: $actorBkg;
$labelBoxBorderColor: $actorBorder;
$labelTextColor: $mainContrastColor;
$noteBorderColor: $border2;
$noteBkgColor: #fff5ad;
/* Gantt chart variables */
$sectionBkgColor: rgba(255, 255, 255, 0.3);
$altSectionBkgColor: white;
$sectionBkgColor2: #EAE8B9;
$taskBorderColor: rgba(255, 255, 255, 0.5);
$taskBkgColor: $mainBkg;
$taskTextColor: $darkTextColor;
$taskTextLightColor: $mainContrastColor;
$taskTextOutsideColor: $taskTextLightColor;
$activeTaskBorderColor: rgba(255, 255, 255, 0.5);
$activeTaskBkgColor: #81B1DB;
$gridColor: $mainContrastColor;
$doneTaskBkgColor: $mainContrastColor;
$doneTaskBorderColor: grey;
$critBorderColor: #E83737;
$critBkgColor: #E83737;
$taskTextDarkColor: $darkTextColor;
$todayLineColor: #DB5757;
@import '../mermaid';
_scss/mermaid/default/index.scss deleted 100644 → 0
+ 0
− 52
View file @ 24c5ddb3
$mainBkg: #ECECFF;
$secondBkg: #ffffde;
$lineColor: #333333;
$border1: #CCCCFF;
$border2: #aaaa33;
$arrowheadColor: #333333;
/* Flowchart variables */
$nodeBkg: $mainBkg;
$nodeBorder: #9370DB;
$clusterBkg: $secondBkg;
$clusterBorder: $border2;
$defaultLinkColor: $lineColor;
$titleColor: #333;
$edgeLabelBackground: #e8e8e8;
/* Sequence Diagram variables */
$actorBorder: $border1;
$actorBkg: $mainBkg;
$actorTextColor: black;
$actorLineColor: grey;
$signalColor: #333;
$signalTextColor: #333;
$labelBoxBkgColor: $actorBkg;
$labelBoxBorderColor: $actorBorder;
$labelTextColor: $actorTextColor;
$noteBorderColor: $border2;
$noteBkgColor: #fff5ad;
/* Gantt chart variables */
$sectionBkgColor: rgba(102, 102, 255, 0.49);
$altSectionBkgColor: white;
$sectionBkgColor2: #fff400;
$taskBorderColor: #534fbc;
$taskBkgColor: #8a90dd;
$taskTextLightColor: white;
$taskTextColor: $taskTextLightColor;
$taskTextDarkColor: black;
$taskTextOutsideColor: $taskTextDarkColor;
$activeTaskBorderColor: #534fbc;
$activeTaskBkgColor: #bfc7ff;
$gridColor: lightgrey;
$doneTaskBkgColor: lightgrey;
$doneTaskBorderColor: grey;
$critBorderColor: #ff8888;
$critBkgColor: red;
$todayLineColor: red;
@import '../mermaid';
_scss/mermaid/flowchart.scss deleted 100644 → 0
+ 0
− 54
View file @ 24c5ddb3
.label {
font-family: 'trebuchet ms', verdana, arial;
color: #333;
}
.node rect,
.node circle,
.node ellipse,
.node polygon {
fill: $mainBkg;
stroke: $nodeBorder;
stroke-width: 1px;
}
.node.clickable {
cursor: pointer;
}
.arrowheadPath {
fill: $arrowheadColor;
}
.edgePath .path {
stroke: $lineColor;
stroke-width: 1.5px;
}
.edgeLabel {
background-color: $edgeLabelBackground;
}
.cluster rect {
fill: $secondBkg !important;
stroke: $clusterBorder !important;
stroke-width: 1px !important;
}
.cluster text {
fill: $titleColor;
}
div.mermaidTooltip {
position: absolute;
text-align: center;
max-width: 200px;
padding: 2px;
font-family: 'trebuchet ms', verdana, arial;
font-size: 12px;
background: $secondBkg;
border: 1px solid $border2;
border-radius: 2px;
pointer-events: none;
z-index: 100;
}
_scss/mermaid/forest/index.scss deleted 100644 → 0
+ 0
− 53
View file @ 24c5ddb3
$mainBkg: #cde498;
$secondBkg: #cdffb2;
$lineColor: #1a3318;
$lineColor: green;
$border1: #13540c;
$border2: #6eaa49;
$arrowheadColor: green;
/* Flowchart variables */
$nodeBkg: $mainBkg;
$nodeBorder: $border1;
$clusterBkg: $secondBkg;
$clusterBorder: $border2;
$defaultLinkColor: $lineColor;
$titleColor: #333;
$edgeLabelBackground: #e8e8e8;
/* Sequence Diagram variables */
$actorBorder: $border1;
$actorBkg: $mainBkg;
$actorTextColor: black;
$actorLineColor: grey;
$signalColor: #333;
$signalTextColor: #333;
$labelBoxBkgColor: $actorBkg;
$labelBoxBorderColor: #326932;
$labelTextColor: $actorTextColor;
$noteBorderColor: $border2;
$noteBkgColor: #fff5ad;
/* Gantt chart variables */
$sectionBkgColor: #6eaa49;
$altSectionBkgColor: white;
$sectionBkgColor2: #6eaa49;
$taskBorderColor: $border1;
$taskBkgColor: #487e3a;
$taskTextLightColor: white;
$taskTextColor: $taskTextLightColor;
$taskTextDarkColor: black;
$taskTextOutsideColor: $taskTextDarkColor;
$activeTaskBorderColor: $taskBorderColor;
$activeTaskBkgColor: $mainBkg;
$gridColor: lightgrey;
$doneTaskBkgColor: lightgrey;
$doneTaskBorderColor: grey;
$critBorderColor: #ff8888;
$critBkgColor: red;
$todayLineColor: red;
@import '../mermaid';
_scss/mermaid/gantt.scss deleted 100644 → 0
+ 0
− 209
View file @ 24c5ddb3
/** Section styling */
.section {
stroke: none;
opacity: 0.2;
}
.section0 {
fill: $sectionBkgColor;
}
.section2 {
fill: $sectionBkgColor2;
}
.section1,
.section3 {
fill: $altSectionBkgColor;
opacity: 0.2;
}
.sectionTitle0 {
fill: $titleColor;
}
.sectionTitle1 {
fill: $titleColor;
}
.sectionTitle2 {
fill: $titleColor;
}
.sectionTitle3 {
fill: $titleColor;
}
.sectionTitle {
text-anchor: start;
font-size: 11px;
text-height: 14px;
}
/* Grid and axis */
.grid .tick {
stroke: $gridColor;
opacity: 0.3;
shape-rendering: crispEdges;
}
.grid path {
stroke-width: 0;
}
/* Today line */
.today {
fill: none;
stroke: $todayLineColor;
stroke-width: 2px;
}
/* Task styling */
/* Default task */
.task {
stroke-width: 2;
}
.taskText {
text-anchor: middle;
font-size: 11px;
}
.taskTextOutsideRight {
fill: $taskTextDarkColor;
text-anchor: start;
font-size: 11px;
}
.taskTextOutsideLeft {
fill: $taskTextDarkColor;
text-anchor: end;
font-size: 11px;
}
/* Specific task settings for the sections*/
.taskText0,
.taskText1,
.taskText2,
.taskText3 {
fill: $taskTextColor;
}
.task0,
.task1,
.task2,
.task3 {
fill: $taskBkgColor;
stroke: $taskBorderColor;
}
.taskTextOutside0,
.taskTextOutside2,
{
fill: $taskTextOutsideColor;
}
.taskTextOutside1,
.taskTextOutside3 {
fill: $taskTextOutsideColor;
}
/* Active task */
.active0,
.active1,
.active2,
.active3 {
fill: $activeTaskBkgColor;
stroke: $activeTaskBorderColor;
}
.activeText0,
.activeText1,
.activeText2,
.activeText3 {
fill: $taskTextDarkColor !important;
}
/* Completed task */
.done0,
.done1,
.done2,
.done3 {
stroke: $doneTaskBorderColor;
fill: $doneTaskBkgColor;
stroke-width: 2;
}
.doneText0,
.doneText1,
.doneText2,
.doneText3 {
fill: $taskTextDarkColor !important;
}
/* Tasks on the critical line */
.crit0,
.crit1,
.crit2,
.crit3 {
stroke: $critBorderColor;
fill: $critBkgColor;
stroke-width: 2;
}
.activeCrit0,
.activeCrit1,
.activeCrit2,
.activeCrit3 {
stroke: $critBorderColor;
fill: $activeTaskBkgColor;
stroke-width: 2;
}
.doneCrit0,
.doneCrit1,
.doneCrit2,
.doneCrit3 {
stroke: $critBorderColor;
fill: $doneTaskBkgColor;
stroke-width: 2;
cursor: pointer;
shape-rendering: crispEdges;
}
.doneCritText0,
.doneCritText1,
.doneCritText2,
.doneCritText3 {
fill: $taskTextDarkColor !important;
}
.activeCritText0,
.activeCritText1,
.activeCritText2,
.activeCritText3 {
fill: $taskTextDarkColor !important;
}
.titleText {
text-anchor: middle;
font-size: 18px;
fill: $taskTextDarkColor;
}
_scss/mermaid/git.scss deleted 100644 → 0
+ 0
− 6
View file @ 24c5ddb3
.commit-id,
.commit-msg,
.branch-label {
fill: lightgrey;
color: lightgrey;
}
_scss/mermaid/mermaid.scss deleted 100644 → 0
+ 0
− 5
View file @ 24c5ddb3
@import 'flowchart';
@import 'sequence';
@import 'gantt';
@import 'class';
@import 'git';
_scss/mermaid/neutral/index.scss deleted 100644 → 0
+ 0
− 57
View file @ 24c5ddb3
$mainBkg: #eee;
$contrast: #26a;
$secondBkg: lighten($contrast, 55%);
$lineColor: #666;
$border1: #999;
$border2: $contrast;
$note: #ffa;
$text: #333;
$critical: #d42;
$done: #bbb;
$arrowheadColor: #333333;
/* Flowchart variables */
$nodeBkg: $mainBkg;
$nodeBorder: $border1;
$clusterBkg: $secondBkg;
$clusterBorder: $border2;
$defaultLinkColor: $lineColor;
$titleColor: $text;
$edgeLabelBackground: white;
/* Sequence Diagram variables */
$actorBorder: $border1;
$actorBkg: $mainBkg;
$actorTextColor: $text;
$actorLineColor: $lineColor;
$signalColor: $text;
$signalTextColor: $text;
$labelBoxBkgColor: $actorBkg;
$labelBoxBorderColor: $actorBorder;
$labelTextColor: white;
$noteBorderColor: darken($note, 60%);
$noteBkgColor: $note;
/* Gantt chart variables */
$sectionBkgColor: lighten($contrast, 30%);
$altSectionBkgColor: white;
$sectionBkgColor2: lighten($contrast, 30%);
$taskBorderColor: darken($contrast, 10%);
$taskBkgColor: $contrast;
$taskTextLightColor: white;
$taskTextColor: $taskTextLightColor;
$taskTextDarkColor: $text;
$taskTextOutsideColor: $taskTextDarkColor;
$activeTaskBorderColor: $taskBorderColor;
$activeTaskBkgColor: $mainBkg;
$gridColor: lighten($border1, 30%);
$doneTaskBkgColor: $done;
$doneTaskBorderColor: $lineColor;
$critBkgColor: $critical;
$critBorderColor: darken($critBkgColor, 10%);
$todayLineColor: $critBkgColor;
@import '../mermaid';
_scss/mermaid/sequence.scss deleted 100644 → 0
+ 0
− 75
View file @ 24c5ddb3
.actor {
stroke: $actorBorder;
fill: $actorBkg;
}
text.actor {
fill: $actorTextColor;
stroke: none;
}
.actor-line {
stroke: $actorLineColor;
}
.messageLine0 {
stroke-width: 1.5;
stroke-dasharray: '2 2';
marker-end: 'url(#arrowhead)';
stroke: $signalColor;
}
.messageLine1 {
stroke-width: 1.5;
stroke-dasharray: '2 2';
stroke: $signalColor;
}
#arrowhead {
fill: $signalColor;
}
#crosshead path {
fill: $signalColor !important;
stroke: $signalColor !important;
}
.messageText {
fill: $signalTextColor;
stroke: none;
}
.labelBox {
stroke: $labelBoxBorderColor;
fill: $labelBoxBkgColor;
}
.labelText {
fill: $labelTextColor;
stroke: none;
}
.loopText {
fill: $labelTextColor;
stroke: none;
}
.loopLine {
stroke-width: 2;
stroke-dasharray: '2 2';
marker-end: 'url(#arrowhead)';
stroke: $labelBoxBorderColor;
}
.note {
//stroke: #decc93;
stroke: $noteBorderColor;
fill: $noteBkgColor;
}
.noteText {
fill: black;
stroke: none;
font-family: 'trebuchet ms', verdana, arial;
font-size: 14px;
}
assets/css/mermaid.css
+ 2
− 30
View file @ 8b863cfd
......@@ -3,6 +3,7 @@
/* Sequence Diagram variables */
/* Gantt chart variables */
path {
visibility: visible;
}
......@@ -16,14 +17,10 @@ path {
visibility: visible;
}
.mermaid {
width: 100% !important;
float: left;
}
.mermaid .label {
color: #333;
font-size: 16pt;
font-size:14px;
}
.node rect,
......@@ -32,9 +29,6 @@ path {
.node polygon {
fill: #dbf0db;
stroke: #CCCCFF;
stroke-width: 1px;
padding:0px;
font-size:14px !important;
}
......@@ -72,30 +66,24 @@ text.actor {
.messageText {
fill: #333;
stroke: none;
padding:0px;
font-size:14px !important;
}
.labelBox {
stroke: #CCCCFF;
fill: #dbf0db;
font-size:14px !important;
}
.bluegreen > rect {
fill: #d1e0e0 !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.blue > rect {
fill: #e6f3ff !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.bluelarge > rect {
......@@ -109,28 +97,24 @@ text.actor {
fill: #dbf0db !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.yellow > rect {
fill:#ffffe6 !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.darkblue > rect {
fill: #99ccff !important;
stroke:#333 !important;
stroke-width:4px !important;
font-size:14px !important;
}
.bluegreen > circle {
fill: #d1e0e0 !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.blue > circle {
......@@ -144,14 +128,12 @@ text.actor {
fill: #dbf0db !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.yellow > circle {
fill:#ffffe6 !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.darkblue > circle {
......@@ -159,7 +141,6 @@ text.actor {
stroke:#333 !important;
stroke-width:2px !important;
color:white !important;
font-size:14px !important;
}
.finish > circle {
......@@ -167,7 +148,6 @@ text.actor {
fill:#d1e0e0 !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.finish > rect {
......@@ -175,21 +155,18 @@ text.actor {
fill:#d1e0e0 !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.normal > circle {
fill:#e6f3ff !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.normal > rect {
fill:#e6f3ff !important;
stroke:#333 !important;
stroke-width:2px !important;
font-size:14px !important;
}
.start > circle {
......@@ -197,7 +174,6 @@ text.actor {
stroke:#333 !important;
stroke-width:4px !important;
border-width:5px !important;
font-size:14px !important;
}
.start > rect {
......@@ -205,7 +181,6 @@ text.actor {
stroke:#333 !important;
stroke-width:4px !important;
border-width:5px !important;
font-size:14px !important;
}
.invisible > circle {
......@@ -213,7 +188,6 @@ text.actor {
stroke:#FFFFFF !important;
color:#FFFFFF !important;
alpha:0 !important;
font-size:14px !important;
color:#FFFFFF !important;
}
......@@ -222,7 +196,6 @@ text.actor {
stroke:#FFFFFF !important;
color:#FFFFFF !important;
alpha:0 !important;
font-size:14px !important;
}
.invisible > label {
......@@ -232,7 +205,6 @@ text.actor {
/* Remove label background fill */
.label > rect {
padding:0 !important;
font-size:14px !important;
}
///////////////////////////////////
......
assets/css/site.scss
+ 0
− 2
View file @ 8b863cfd
......@@ -15,6 +15,4 @@ $icon-font-path: "{{ site.github.url }}/assets/fonts/bootstrap";
@import "bootstrap/bootstrap";
@import "mermaid/dark/index";
@import "mermaid/mermaid";
assets/js/mermaid.8.8.2.js deleted 100644 → 0
+ 0
− 74073
View file @ 24c5ddb3
Source diff could not be displayed: it is too large. Options to address this: view the blob.
assets/js/mermaid.js deleted 100644 → 0
+ 0
− 73628
View file @ 24c5ddb3
Source diff could not be displayed: it is too large. Options to address this: view the blob.
slides/access-trees.html
+ 29
− 2
View file @ 8b863cfd
......@@ -261,8 +261,6 @@ What does this hierarchy look like?
.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)
......@@ -313,6 +311,35 @@ Discussion (post on [Ed]({{site.discussion}}/3666535))
discuss with your neighbor
- what to draw; where to draw it
---
# Let's compare that to an app (Answer)
.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
left and an x at right to close the window with the words Google
Calendar reminder Christian and Anind (Jen Mankoff) is starting at
12:30pm. Video call between them, 100%, width](img/building/interface.png)
]
.right-column50[
<div class="mermaid">
graph TD
W(Window) --> H[Horizontal layout]
H --> I1[fa:fa-bell Bell ]
H --> V[Vertical Layout]
V --> I2[Title: Google Calendar reminder]
V --> I3[Text: Christian and Anind --Jen Mankoff-- is
starting at 12:30pm. - Video call]
classDef default fill:#009688,stroke:#333,stroke-width:2px, color:white;
classDef reflect fill:#4CAF50,stroke:#333,stroke-width:2px, color:white;
class H,V default
class I1,I2,I3 reflect
linkStyle default stroke: black,stroke-width:8px
</div>
]
---
# How do we make it more interactive?
......
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