mirror of
https://github.com/kristopolous/BOOTSTRA.386.git
synced 2026-02-04 05:35:11 +00:00
more conceptual overviews
This commit is contained in:
Chris McKenzie
0
manual/.gitignore → floppy/.gitignore
vendored
0
manual/.gitignore → floppy/.gitignore
vendored
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
102
floppy/index.md
102
floppy/index.md
@@ -1095,8 +1095,108 @@ Let's try this:
|
||||
)
|
||||
```
|
||||
|
||||
Cascading Style Sheets (CSS) was the hard one really. First, it came from effectively thin air in the 1990s and is not tied to an earlier system. Typesetting systems like LaTeX are just coming out and there are certainly vendors like Harris, Camex, and CompuGraphics for typesetting advertisement and newspapers on computers but the destination is paper.
|
||||
|
||||
The destination of CSS is someone else's computer screen with that being the point of consumption. There's another difficulty, CSS is an indirect system. Ideally you craft a conceptual abstraction such as "important" and then you describe what important things ought to look like. Then you go into your document and you mark things as important.
|
||||
|
||||
Essentially it breaks things into three layers: content, presentation, and consumption. The content ostensibly can be presented in a variety of ways and then consumed on a variety of devices. This clean separation, of generalizing each of these concepts, is foreign. Music is kind of like it - you have the recording, the medium such as a vinyl record, and the equipment the person experiences it on, but it's very far away.
|
||||
|
||||
And then there is the syntax itself. I decided to maybe just do things incrementally.
|
||||
|
||||
"Ok let's say we have a word processor, some common functions, New, Open, Save, we want buttons for them in HML, let's do that"
|
||||
|
||||
```html
|
||||
<BUTTON>New</
|
||||
<BUTTON>Open</
|
||||
<BUTTON>Save</
|
||||
```
|
||||
|
||||
Orion interrupts me, "But Wait, what if we want pictures in there?" and I erase the part of the blackboard
|
||||
```html
|
||||
<BUTTON><IMG SRC=NEW.BIN><//
|
||||
<BUTTON><IMG SRC=OPEN.BIN><//
|
||||
<BUTTON><IMG SRC=SAVE.BIN><//
|
||||
```
|
||||
|
||||
Then Kat interrupts and says "ok, but not all terminals are raster. So I erase again. "Let's not break our hierarchy. Let's call these, spans of text...
|
||||
```html
|
||||
<BUTTON><SPAN>New</<IMG SRC=NEW.BIN><//
|
||||
<BUTTON><SPAN>Open</<IMG SRC=OPEN.BIN><//
|
||||
<BUTTON><SPAN>Save</<IMG SRC=SAVE.BIN><//
|
||||
```
|
||||
|
||||
Chuck drops his hands on the table "now you got both in there, how will that work? Sometimes we want pictures, sometimes we want text."
|
||||
|
||||
Kat responsds, "well we can give it IDs like in the Scheme example from earlier, test the device and then decide which to turn off and on"
|
||||
|
||||
So I erase again
|
||||
```html
|
||||
<BUTTON ID=B_NEW><SPAN>New</<IMG SRC=NEW.BIN><//
|
||||
<BUTTON ID=B_OPEN><SPAN>Open</<IMG SRC=OPEN.BIN><//
|
||||
<BUTTON ID=B_SAVE><SPAN>Save</<IMG SRC=SAVE.BIN><//
|
||||
```
|
||||
And write
|
||||
|
||||
```javascript
|
||||
(onLoad Document (
|
||||
lambda() (
|
||||
(if (= device "text")
|
||||
(map hide '(B_NEW B_OPEN B_...
|
||||
```
|
||||
|
||||
"Not so fast" Hasegawa interrupts before I could finish. "See here's the problem. What something looks like and what it does, these are not the same. Nor are they the same as the structure."
|
||||
|
||||
He pauses and takes a sip of that folgers coffee, somehow enjoying it, "We all come to the same office in different cars. If we swapped cars one night we would all still successfully come to the office. The instructions for operating a car is independent from the actual car. The content of the journey is also different. Here we have two cars. The graphical and text terminal. This distinction should live separate from the journey and the operation."
|
||||
|
||||
I erase the bottom part, "olright, let's imagine something different
|
||||
|
||||
```css
|
||||
@media GRAPHICAL {
|
||||
BUTTON SPAN {
|
||||
DISPLAY: NONE;
|
||||
}
|
||||
}
|
||||
@media TEXT {
|
||||
BUTTON IMG {
|
||||
DISPLAY: NONE;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
"There!", I say, hoping to have successfully smuggled things in.
|
||||
|
||||
"In this syntax", Kat says, "You don't need those IDs at all. You just referenced the entire class of them."
|
||||
|
||||
I shrug, "I guess I did. Would classifying things be a useful idea? I erase a few things and add a bit more
|
||||
|
||||
```html
|
||||
<BUTTON><SPAN>New</<IMG SRC=NEW.BIN><//
|
||||
<BUTTON><SPAN>Open</<IMG SRC=OPEN.BIN><//
|
||||
<BUTTON><SPAN>Save</<IMG SRC=SAVE.BIN><//
|
||||
<BUTTON><SPAN>B</<IMG SRC=BOLD.BIN><//
|
||||
<BUTTON><SPAN>I</<IMG SRC=ITALICS.BIN><//
|
||||
<BUTTON><SPAN>U</<IMG SRC=UNDERLINE.BIN><//
|
||||
```
|
||||
|
||||
"Well yes, you obviously need something in there now" Chuck says. More erasing and I get this
|
||||
|
||||
|
||||
```html
|
||||
<DIV ID=GRP_FILE>
|
||||
<BUTTON><SPAN>New</<IMG SRC=NEW.BIN><//
|
||||
<BUTTON><SPAN>Open</<IMG SRC=OPEN.BIN><//
|
||||
<BUTTON><SPAN>Save</<IMG SRC=SAVE.BIN><//
|
||||
</<DIV ID=GRP_EDIT>
|
||||
<BUTTON><SPAN>B</<IMG SRC=BOLD.BIN><//
|
||||
<BUTTON><SPAN>I</<IMG SRC=ITALICS.BIN><//
|
||||
<BUTTON><SPAN>U</<IMG SRC=UNDERLINE.BIN><//
|
||||
</
|
||||
```
|
||||
|
||||
## Friday: Demo in 2 weeks
|
||||
|
||||
Now that I've convinced these people this is possible, I need to fake build it. We have our terminology and we are going to go back and redo the exploration on construction paper and 3x5 cards. Maybe with better luck this time.
|
||||
|
||||
# Week 2
|
||||
|
||||
## Monday: Navigating the menu
|
||||
@@ -1111,7 +1211,7 @@ Scroll wheel on the mouse
|
||||
|
||||
## Friday: One Week
|
||||
|
||||
Aston Tate return with the pieces - Hyperlinks/CSS/JS
|
||||
Ashton Tate return with the pieces - Hyperlinks/CSS/JS
|
||||
|
||||
# Week 3
|
||||
|
||||
|
||||
82
floppy/notes.md
Normal file
82
floppy/notes.md
Normal file
@@ -0,0 +1,82 @@
|
||||
Todo:
|
||||
|
||||
[ ] construction paper ux scene
|
||||
[ ] some content for the other 4 months
|
||||
[ ] Maybe http?
|
||||
|
||||
I need more conflict/insight to drive the narrative in this section. It can't just be some dry fetishization of technology.
|
||||
|
||||
There's the drama of building things which is only good with conflict.
|
||||
|
||||
The characters should be archetypes about the facets of technology. There's minitel.
|
||||
|
||||
Contrastive conflicts:
|
||||
|
||||
now and the future
|
||||
solving problems versus building new world
|
||||
dreams constrained by what's possible
|
||||
people imagine the future as taking the derivative of the present and extensing the tangent line but it's always weird and curvy
|
||||
|
||||
possibilities:
|
||||
|
||||
maybe a scene of casual sexism
|
||||
|
||||
They're with a client who constantly defers to a male engineer despite Kat being helpful and informative.
|
||||
|
||||
It's a behavior that was at one time so normal that nobody can see it but him.
|
||||
|
||||
Unless your tools are insufficient your dreams are too small
|
||||
|
||||
Someone's gotta have an opinion. Either you or the user. Opinions bring rules, rules bring structure and structure is the primordial soup of usability, it doesn't guarantee it but functional systems are impossibel without it
|
||||
|
||||
You don't choose your time, time chooses you. Success is about what you perform when time tosses you on stage. Even in the world of time travel, every moment can only be lived once. I wil become a day older regardless of when date that is.
|
||||
|
||||
Interactions have to have
|
||||
|
||||
* intimacy - rapid and incremental
|
||||
* cancelable
|
||||
* temporality
|
||||
* reversibility
|
||||
* concrete
|
||||
|
||||
The computer as a participant in the division of labor
|
||||
|
||||
---
|
||||
|
||||
Jay - Hope & Dreams
|
||||
Orion - Openness & Adaptation
|
||||
Thomas - Ethics & Ownership
|
||||
Gilda - Discipline & Analysis
|
||||
Chuck - Feasibility & Communication (Interpersonal)
|
||||
|
||||
Timeline
|
||||
1982 11 - comdex
|
||||
12
|
||||
1983 1
|
||||
2
|
||||
~3? - jay arrival (unspecified
|
||||
4 Friday - boston 1 (28 day clock - march 4)
|
||||
8 Tuesday - Thomas
|
||||
10 Resume
|
||||
11 Interview - Jay
|
||||
14 Monday
|
||||
15 Tuesday
|
||||
16 Wednesday - Construction paper
|
||||
17 Thursday - Markup Proposal (html, css, javascript)
|
||||
18 Friday - Layout models, spacing flow, semantic colors
|
||||
21 Monday - Drop Down & Navbar
|
||||
22 Tuesday - Device orientation & 12 column layout
|
||||
23 Wednesday - Buttons Groups and Lists
|
||||
24 Thursday - Forms Input groups and Bredcrumbs
|
||||
25 Friday - Tooltips Alerts and Toasts
|
||||
28 Monday - Spinners Progress and Pagers
|
||||
3 -
|
||||
1 Tuesday - Carousels Jumbotron Popovers
|
||||
2 Wednesday - Cards Badges and Navbar
|
||||
3 Thursday - Todo apps & SPA
|
||||
4 Boston II
|
||||
4 - standards bodies & rfcs
|
||||
5 - SAS & http protocols
|
||||
6 - browser design
|
||||
7
|
||||
8 - jay departture
|
||||
@@ -1,39 +0,0 @@
|
||||
The characters should be archetypes about the facets of technology
|
||||
|
||||
Jay - Hope & Dreams
|
||||
Orion - Openness & Adaptation
|
||||
Thomas - Ethics & Ownership
|
||||
Gilda - Discipline & Analysis
|
||||
Chuck - Feasibility & Communication (Interpersonal)
|
||||
|
||||
Timeline
|
||||
1982 11 - comdex
|
||||
12
|
||||
1983 1
|
||||
2
|
||||
~3? - jay arrival (unspecified
|
||||
4 Friday - boston 1 (28 day clock - march 4)
|
||||
8 Tuesday - Thomas
|
||||
10 Resume
|
||||
11 Interview - Jay
|
||||
14 Monday
|
||||
15 Tuesday
|
||||
16 Wednesday - Construction paper
|
||||
17 Thursday - Markup Proposal (html, css, javascript)
|
||||
18 Friday - Layout models, spacing flow, semantic colors
|
||||
21 Monday - Drop Down & Navbar
|
||||
22 Tuesday - Device orientation & 12 column layout
|
||||
23 Wednesday - Buttons Groups and Lists
|
||||
24 Thursday - Forms Input groups and Bredcrumbs
|
||||
25 Friday - Tooltips Alerts and Toasts
|
||||
28 Monday - Spinners Progress and Pagers
|
||||
3 -
|
||||
1 Tuesday - Carousels Jumbotron Popovers
|
||||
2 Wednesday - Cards Badges and Navbar
|
||||
3 Thursday - Todo apps & SPA
|
||||
4 Boston II
|
||||
4 - standards bodies & rfcs
|
||||
5 - SAS & http protocols
|
||||
6 - browser design
|
||||
7
|
||||
8 - jay departture
|
||||
Reference in New Issue
Block a user