% METHOD: Flowcharts (Flow of the chart –> chart of the flow: on demand!)
% WHAT: -
A flowchart is a type of diagram that represents an algorithm, workflow, or process by showing the steps as boxes of various kinds and depicting their order by connecting the boxes with arrows. This diagrammatic representation illustrates a solution model to a given problem. Flowcharts are used in analyzing, designing, documenting, or managing a process or program in various fields.[^]{https://en.wikipedia.org/wiki/Flowchart}
% WHY: Through flowcharts one will be able to analyze and reflect on one's own software situation.
% URGENCY: Using flowchart observation methods towards analysis will result in on-demand revelation of flows, relations, and connections previously obscured.
% NOTE: The term _software situation_ is suggested as a good replacement for _software problem_.
% WHEN:
% WHO:
% WARNING:
% HOW: -
**Sample Flowchart Questionnaire**
% ----------------
1. Validate your situation?
2. Is it human or machine situation?
human machine I don't know
| | |
3. Choose a flowchart element that best describes your situation?
▭ ♢ ⏢
Operation → Represented as trapez ⏢
Process → Represented as rectangle ▭
Decision → Represented as rhombus ♢
https://unicode-table.com/en/
According to your answer go to question 4.
4.1 Identify operation(s) that could
help you out through the situation?
4.2 Identify process(es) that could
help you out through the situation?
4.3 Identify decision(s) that could
help you out through the situation?
5. Was that actually helpful?
Yes No
| |
Done o. How does that make you feel?
(end of this questionnaire) (jump to the beginning)
% SRCCODE: small
% SOURCE: The SOFTWARE SKETCHING OBSERVATION YUPPIES (SSoGY).
% EXAMPLE: -
http://observatory.constantvzw.org/etherdump/clinic.newflow.diff.html
**Service Log**
1. Microsoft word copy/paste situation
2. Machine or human situation: it's uncertain, but looks like machine situation as client tried to uninstall and reinstall, 6 months later the situation repeated
3. & 4). Process: back up files, obtain a copy of OS of choice and then reinstall Word.
o) How she feels? Feeling angry
More info → see Rafaella flowchart pic
## Appendix A:
* **IBM Ruler:**
* IBM Flowcharting Template found at NAM-IP (% REFREF: ibmruler)
* http://observatory.constantvzw.org/images/wednesday/P1040728.JPG
* left to right
* process - rectange
* input / output - skew square
* document - rectangle, but buttom line is a wave
* manual operation -
* communication link -
* preperation -
* merge - down-pointing triangle
* decision -- rhombus
* connector - small circle
* magnetic tape - circle
* display -
* auxilary operation - square
* arrow head - four triangle
* manual input -
* Punched Card - rectangle with left cut edge
* Punched tape - like a flag
* **Burroughs Ruler:**
* Burroughs Flowcharting Template found at NAM-IP (% REFREF: burroughs)
* http://observatory.constantvzw.org/images/wednesday/P1040730.JPG
* Left to right, top to bottom:
* input/output = parallelogram
* Auxiliary operation = square / gyrational square
* Preparation - hexagon
* Drum or disk - oval
* Process - rectangle
* Off-line storage - triangle
* On-line storage - like a quarter moon
* Display - one side oval and one side a little oval
* Manual input - rectangle, but top side askew / irregular rectangle
* Document - rectangle, but buttom line is a wave
* Manual Operation - tilted rectangle
* Magnetic Tape - circle but with a square on the buttom right
* Connector - circle
* Communication Link - a z shaped thingy
* Decision - rhombus
* ... unknown x 2
* Punched Card
* Terminal
* Punched Tape
* Flow Direction
* Card Deck
% SHOW: tgsoimages.svg ibmruler REF:ibmruler
% SHOW: tgsoimages.svg burroughs REF:burroughs
% PDFFIX: 1 \newpage
## Appendix B
### Friday:
**15:30 - 16:15**
We started our undertaking by analysing the rulers by IBM and Burroughs. It seems that every symbol on the two rulers has a specific shape and has a specific meaning. There are similarities between the shapes on the two rulers. On the Burroughs we found some symbols without descriptions. We tried to figure out their meaning. We counted up the symbols on the IBM and Burroughs rulers. The specific literature explained to us that engineers have a kind of standard for these symbols. These symbols are vocabulary.
**16:15 - 16:40**
We started with analyzing an [educational flow chart as our case example](https://en.wikipedia.org/wiki/Flowchart#/media/File:LampFlowchart.svg): We were able to figure out what the arrows on the ruler meant. They are used in combination with the decision symbol. In shape studies, triangles can be used to direct movement based on the direction they point. In the flowchart, the options are represented by rectangles and squares. In shape studies rectangles and squares are stable. They’re familiar and trusted shapes and suggest honesty.
**16:45 - 17:00**
We analyzed a flow chart of a multiplication algorithm. Its content illustrated an instruction to shift the number left or right . The decision box instructed you to repeat it 32 times for the whole number!
The rectangles were again representing options, while the flexible factors were illustrated by the rhombus, the symbol for Decision. The final symbol with the title "Done" was illustrated by something inbetween a circle and a rectangle.
**17:00 - 17:15**
We realized in our undertaking that we needed to jump into an internal perspective and get more familiar with the task of flow chart drawing. For this flow chart we decided to chart the elevator to the first floor from the perspective of the elevator. To achieve this task we agreed to do field research and go to the first floor by elevator for real. Some of us used this opportunity to smoke a cigarette and to elaborate on the experience of the elevator. The final goal is the create a flow chart based on our observations, but we are going to do this tomorrow. [^]{Further elevator ruminations were made through reference to Marc Isaacs. Lift. UK, 2001. https://www.youtube.com/watch?v=FJNAvyLCTik}
**17:15 - 17:40**
To round off the day we ended with some general reflections. It seems that the different interpretations of symbols have been integrated into flowcharts from the early ones of the 1920s until now.[@xing:flowcharts] To put this knowledge into practice we started to sketch out the flowchart on the wall using Post-its.
**Current research goals:**
* Flowchart or intervention: what is it like to be a elevator
* Zenit browser extension
* Iconographic analyses of flow chart symbols
* Call-flow && zenit modeling template for the drop-in clinic interview
% PDFFIX: 1 \newpage
### Saturday:
**11:00 - 11:40**
We updated our research followers and fellow researchers about our undertakings.
**14:45-18:00**
Zenit(h) modeling/analysis
A method derived from a removal of textual informating from flowcharts -- related to previous work with [Zenit: International Review of Arts and Culture](https://monoskop.org/Zenit) created by Ljubomir Micic, founder of Zenitism (Zenitizam) an early 20th Century movement, and zenith -- an imaginary point directly "above" a particular location, on [the imaginary celestial sphere](https://en.wikipedia.org/wiki/Zenith)
Connection inspiration: [Procedure Flow Chart](https://helios.gsfc.nasa.gov/flowchart.html)
Some historical experimentation examples:
http://www.e-w-n-s.net/minis-html/futuremillionaire/transition/v.gif
http://www.e-w-n-s.net/minis-html/futuremillionaire/transition/arrows.gif
http://www.e-w-n-s.net/minis-html/_navigation.htm
**Material:**
[Flow chart from Wikimedia Commons, the free media repository](https://commons.wikimedia.org/wiki/Flow_chart)
**Afternoon**
Joseph working on all the ideas at the same time
Continue with flow chart elevator
Lara working on Zenit(h) modeling/analysis leading to call-flow template, and zenit browser plugin
Michaela helping out the flow chart of the elevator as a case study
% Here are the flowchart symbols: http://observatory.constantvzw.org/etherdump/flowchartsymbols.md (% CARLINSAYS: We should embed the images of the symbols in the doc or get rid of this?)
### Sources:
[Software design](https://en.wikipedia.org/wiki/Software_design),
[Flowchart](https://en.wikipedia.org/wiki/Flowchart),
[Software design description](https://en.wikipedia.org/wiki/Software_design_description),
[HTML Unicode UTF-8](https://www.w3schools.com/charsets/ref_utf_geometric.asp),
[Penguin Dictionary of Symbols](http://www.iausdj.ac.ir/ostad/DocLib71/J._C._Cirlot_Dictionary_of_Symbols__1990.pdf),
[Flowchart humour](http://observatory.constantvzw.org/video/A_Computer_Glossary.webm#t=02:26),
[Power Point as Knowledge Communication](http://computationalculture.net/article/one-damn-slide-after-another-powerpoint-at-every-occasion-for-speech)
### Blank diagrams:
[See Nothing Volume Three](http://silviolorusso.com/see-nothing-volume-three),
[Blank Diagrams #4: NSA Slides of PRISM Program](http://silviolorusso.com/blank-diagrams-4-nsa-slides-of-prism-program),
[Blank Diagrams #1 – Claude Shannon, schematic diagram of a general communication system](http://silviolorusso.com/blank-diagrams-1-claude-shannon-schematic-diagram-of-a-general-communication-system)
The Grammar of Shapes: http://vanseodesign.com/web-design/visual-grammar-shapes
% PDFFIX: 1 \newpage
## How to create browser add on /or browser extension:
1. Make a new dir at your local machine. Lets called it adds-on & and a folder called icons
2. Make an icon for your browser extension
3. Open text editor and copy paste this jason code
4. You will need to modify the last two lines to point to the etherbox.local & css to point to the extension.css
5. Make an css script place your css there
On the browser:
1. Go to extension
2. Load debugger from `about:debugging`
3. Load your extension
% ------
manifest.json:
{
"manifest_version": 2,
"name": "extension",
"version": "1.0",
"description": "this is the browser extensions",
"icons": {
"48": "icons/icon-name-here.png"
},
"content_scripts": [
{
"matches": ["*://etherbox.local/*"],
"css": ["extension.css"]
}
]
}
% SRCCODE: plain
% SOURCE: Version 3384 Saved June 10, 2017. Authors: m, lara, carlin + 5 unnamed authors