Grafoscopio

Suma,SegmentoId
699296597336.0,12

Suma,SegmentoId
1247787917094.0,22

Suma,SegmentoId
926267354007.0,41

Suma,SegmentoId
8929380362372.0,42

Suma,SegmentoId
8929380362372.0,42

Suma,SegmentoId
8929380362372.0,42

---
header-includes:
     - \usepackage{minted}
     - \usemintedstyle{friendly}
---
# Agile visualization



## Part 0 - Before the feast

Moose is a platform for data and software analysis. Roassal is the visualization engine part of Moose. 
Moose and Roassal are written in the Pharo programming language.

### First visualization

Open a workspace from the World menu and type the following (or copy if you have using an online version of the book):

\begin{minted}{smalltalk}[frame=lines]
b := RTMondrian new.
	b shape label.
	b nodes: (1 to: 100).
	b edges connectFrom: [ :i | i // 2 ].
	b layout cluster.
	b
\end{minted}

\begin{minted}{smalltalk}[frame=lines]
path := FileLocator temp.
allFilesUnderPath := path asFileReference allChildren.
b := RTMondrian new.
 
b shape circle
		color: Color gray trans;
		if: [ :aFile | aFile path basename endsWith: '.png' ] color: Color red trans.
	b nodes: allFilesUnderPath.
	b edges connectFrom: #parent.
	b normalizer
				normalizeSize: #size min: 10 max: 150 using: #sqrt.
	b layout cluster.
	b
\end{minted}

### Geographical CSV data

Comma-separated values (CSV) is a file format close to what spreedcheat are manipulated. Roassal has facilities to extract data from CSV files. 
The following example shows earthquakes over the last 30 days:

\begin{minted}{smalltalk}[frame=lines]
| tab b |
tab := RTTabTable new input:  'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_hour.csv' asUrl retrieveContents  usingDelimiter: $,.
tab removeFirstRow.
tab replaceEmptyValuesWith: '0' inColumns: #(2 3 4 5).
tab convertColumnsAsFloat: #(2 3 4 5).
b := RTMapLocationBuilder new.
b shape circle
	size: [ :v | 2 raisedTo: (v - 1) ];
	color: (Color red alpha: 0.3).
tab values do: [ :row | b addPoint: row second @ row third value: row fifth ].
b build.
\end{minted}

### Seism activity over time



\begin{minted}{smalltalk}[frame=lines]
tab := RTTabTable new 
			input: 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.csv' asUrl retrieveContents 
			usingDelimiter: $,.
	tab removeFirstRow.
	tab convertColumn: 1 to: [ :s | (DateAndTime fromString: s) julianDayNumber ].
	tab convertColumnsAsFloat: #(5).

	v := RTView new.
	es := RTEllipse elementsOn: tab values.
	v addAll: es. 
	es @ RTPopup.

	RTMetricNormalizer new
		elements: es;
		normalizeColor: #fifth using: { Color orange . Color red };
		alphaColor: 0.3;
		normalizeX: #first min: 0 max: 600;
		normalizeSize: #fifth min: 0 max: 80 using: [ :mag | 2 raisedTo: (mag - 1) ].
		
	es @ (RTLabeled new text: [ :row | row fifth > 6 ifTrue: [ row fifth ] ifFalse: [ '' ] ]).
	v @ RTDraggableView.
	v
\end{minted}

### Charting



#### Plotting



\begin{minted}{smalltalk}[frame=lines]
	"Preparing the data"
	tab := RTTabTable new input: 'http://bit.ly/EbolaCSV' asUrl retrieveContents usingDelimiter: $,.
	tab removeFirstRow.
	tab replaceEmptyValuesWith: '0' inColumns: #(10 11).
	tab convertColumnsAsInteger: #(10 11).
	tab convertColumnsAsDateAndTime: #(3 4).
	data := tab values reversed.

	"Charting the data"
	b := RTGrapher new.

	ds := RTData new.
	ds interaction fixedPopupText: [ :row | row value at: 12 ]. 
	ds dotShape ellipse 
		color: (Color blue alpha: 0.3);
		size: [ :row  | (row at: 11) / 5 ].
	ds points: data.
	ds connectColor: Color blue.
	ds y: [ :r | r at: 10 ].
	ds highlightIf: [ :row | (row at: 10) > 100 ] using: [ :row | row third year ].
	b add: ds. 

	b axisX noLabel; numberOfTicks: tab values size.
	b axisY noDecimal.
	b
\end{minted}

#### Double plotting



\begin{minted}{smalltalk}[frame=lines]
tab := RTTabTable new input: 'http://bit.ly/CensusGov' asUrl retrieveContents usingDelimiter: $,.
	tab removeFirstRow.
	tab convertColumnsAsInteger: #('POPESTIMATE2013' 'POPEST18PLUS2013').

	b := RTDoubleBarBuilder new.
	b pointName: [ :row | row at: (tab indexOfName: 'NAME') ].
	"Remove the first line, the sum"
	b points: tab values allButFirst. 
	b bottomValue: [ :row | ((row at: (tab indexOfName: 'POPESTIMATE2013')) / 1000) asInteger ] 
		titled: 'Pop estimate (x 1000)'.
	b topValue: [ :row | ((row at: (tab indexOfName: 'POPEST18PLUS2013')) / 1000) asInteger] 
		titled: 'Pop +18 estimate (x 1000)'.
	b
\end{minted}

#### Multiple graphs



\begin{minted}{smalltalk}[frame=lines]
	b := RTGrapher new.
	numberOfDataSets := 5.

	colorNormalizer := RTMultiLinearColorForIdentity new 
						objects: (1 to: numberOfDataSets).
	1 to: numberOfDataSets do: [ :i |
		ds := RTData new.
		ds noDot.
		ds points: ((1 to: 500) collect: [ :ii | 50 atRandom - 25 ]) cumsum.
		ds connectColor: (colorNormalizer rtValue: i).
		b add: ds.
	].
	b


\end{minted}

### Timeline



\begin{minted}{smalltalk}[frame=lines]
	data := #(
		#(WP1 0 4)  #(WP2 4 8)
		#(WP3 8 12) #(WP4 3 4) 
		#(WP4 7 9) #(WP4 10 12)   
	  ).
	b := RTTimeline new.
	s := RTTimelineSet new.
	s objects: data.
	s lineIdentifier: #first.
	s start: #second.
	s end: #third.
	b add: s.
	b axisX
		noDecimal;
		title: 'Month';
		numberOfLabels: 12.
	b
\end{minted}

### Integration with OpenStreetMap



\begin{minted}{smalltalk}[frame=lines]

\end{minted}

### Pharo in a Nutshell



### Overview of Trachel

#### Shapes



\begin{minted}{smalltalk}[frame=lines]
| c |
c := TRCanvas new.
	100 timesRepeat: [
		| shape |
		shape := TREllipseShape new.
		shape size: 50 atRandom.
		shape color: Color random.
		shape translateTo: (500 atRandom @ 500 atRandom) - (250 @ 250).
		c addShape: shape ].
	c
\end{minted}

#### Fixed Shapes



\begin{minted}{smalltalk}[frame=lines]
| c button |

c := TRCanvas new.

	100 timesRepeat: [ c addShape: (TREllipseShape new 
									color: Color random; 
									size: 30 atRandom; 
									translateTo: (400 atRandom @ 400 atRandom)) ].

	button := TRLabelShape new text: 'move'.
	c addShape: button.
	button setAsFixed.
	button translateBy: 30 @ 30.

	button when: TRMouseClick do: [ :evt | 
		c camera translateBy: 4 atRandom @ 4 atRandom. 
		c signalUpdate ].
	c 
\end{minted}

#### Positioning



#### Size

#### Examples of Graph usage



\begin{minted}{smalltalk}[frame=lines]
| b |
b := RTGraphBuilder new.
	b nodes if: [ :c | c inheritsFrom: RTShape ]; color: Color green.
	b nodes if: [ :c | c inheritsFrom: RTLayout ]; color: Color yellow.
	b nodes if: [ :c | 'TR*' match: c name ]; color: Color purple.
	b nodes color: Color gray.
	
	b edges
		connectTo: #subclasses;
		useInLayout.
	
	b edges
		connectTo: #dependentClasses;
		follow: #superclass;
		if: [:from :to | ('RT*' match: from name) and: ['TR*' match: to name]];
		color: (Color blue alpha: 0.2).
	
	b layout cluster.

	b global normalizeSize: #numberOfMethods min: 5 max: 60.
	
	b addAll: RTObject withAllSubclasses.	
	b addAll: TRObject withAllSubclasses.
	b addAll: TREvent withAllSubclasses.
	b build
\end{minted}

#### Program Structure



##### Nodes

OrderedCollection [
	GrafoscopioNode {
		#header : 'Introduction',
		#body : 'This is a companion notebook for the *Entreprise  Pharo: A web perspective* book available at the
[Pharo Books][pharo-books] web page.
As usual, it follows the same structure of the book, as I\'m advancing on it, and sometimes it presents
complementary material that was not available in the book originally.

This companion notebook is intended to be read with the Enterprise Pharo Book, to execute the code here,
but adding the context and more explanations of the book. ',
		#children : OrderedCollection [ ],
		#parent : GrafoscopioNode {
			#header : 'Arbol principal',
			#body : '',
			#children : @1,
			#level : 0,
			#nodesInPreorder : OrderedCollection [
				@4,
				@2,
				GrafoscopioNode {
					#header : '%idea links',
					#body : '[pharo-books]: http://files.pharo.org/books/
[tealight]: https://github.com/astares/Tealight',
					#children : OrderedCollection [ ],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						''
					]
				},
				GrafoscopioNode {
					#header : 'Simple Web applications',
					#body : '',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : 'Tealight',
							#body : '[Tealight][tealight] is a tool that provides some additions to make easier using and managing
Teapot.',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : 'Installation',
									#key : '',
									#body : 'Metacello new 
    repository: \'github://astares/Tealight/repository\';
    baseline: \'Tealight\';
    load ',
									#tags : 'código',
									#children : OrderedCollection [ ],
									#parent : @11,
									#level : 4,
									#nodesInPreorder : OrderedCollection [
										@13
									],
									#links : OrderedCollection [
										''
									]
								},
								GrafoscopioNode {
									#header : 'Inspecting instances',
									#body : 'TLWebserver teapot inspec',
									#tags : 'código',
									#children : OrderedCollection [ ],
									#parent : @11,
									#level : 4,
									#links : OrderedCollection [
										''
									]
								},
								GrafoscopioNode {
									#header : 'Definir una ruta para una instancia de Teapot',
									#key : '',
									#body : 'TLWebserver teapot 
    GET: \'/hi\' -> \'HelloWorld\'',
									#tags : 'código',
									#children : OrderedCollection [ ],
									#parent : @11,
									#level : 4,
									#nodesInPreorder : OrderedCollection [
										@20
									],
									#links : OrderedCollection [
										''
									]
								},
								GrafoscopioNode {
									#header : 'Acceder a un Teapot por omisión',
									#key : '',
									#body : 'TLWebserver teapot',
									#tags : 'código',
									#children : OrderedCollection [ ],
									#parent : @11,
									#level : 4,
									#nodesInPreorder : OrderedCollection [
										@24
									],
									#links : OrderedCollection [
										''
									]
								}
							],
							#parent : @9,
							#level : 2,
							#links : OrderedCollection [
								'',
								'https://github.com/astares/Tealight'
							]
						},
						GrafoscopioNode {
							#header : 'Teapot',
							#body : '',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : 'Getting Started',
									#body : '',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : 'Install',
											#body : 'Gofer it
\tsmalltalkhubUser: \'zeroflag\' project: \'Teapot\'; configuration;
loadStable.',
											#tags : 'código',
											#children : OrderedCollection [ ],
											#parent : @31,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										},
										GrafoscopioNode {
											#header : 'Launch',
											#body : 'Teapot on
\tGET: \'/welcome\' -> \'Hello World!\'; start.
\t
',
											#tags : 'código',
											#children : OrderedCollection [ ],
											#parent : @31,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										}
									],
									#parent : @29,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								},
								GrafoscopioNode {
									#header : 'A REST Example, Showing some CRUD Operations',
									#body : '',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : 'Defining the data structure',
											#body : '| books teapot |
books := Dictionary new.
teapot := Teapot configure: {
\t#defaultOutput -> #json. #port -> 8080. #debugMode -> true }.
teapot
\tGET: \'/books\' -> books;
\tPUT: \'/books/<id>\' -> [ :req | | book |
\t\tbook := {\'author\' -> (req at: #author).
\t\t\'title\' -> (req at: #title)} asDictionary.
\t\tbooks at: (req at: #id) put: book ];
\tDELETE: \'/books/<id>\' -> [ :req | books removeKey: (req at: #id)];
\texception:
\t\tKeyNotFound -> (TeaResponse notFound body: \'No such book\');
\tstart.
\t
',
											#tags : 'código',
											#children : OrderedCollection [ ],
											#parent : @40,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										},
										GrafoscopioNode {
											#header : 'Adding new data with ZnClient',
											#body : 'ZnClient new
\turl: \'http://localhost:8080/books/1\';
\tformAt: \'author\' put: \'SquareBracketAssociates\';
\tformAt: \'title\' put: \'Pharo For The Enterprise\'; put
\t',
											#tags : 'código',
											#children : OrderedCollection [ ],
											#parent : @40,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										}
									],
									#parent : @29,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								}
							],
							#parent : @9,
							#level : 2,
							#links : OrderedCollection [
								''
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						''
					]
				},
				@11,
				@13,
				@17,
				@20,
				@24,
				@29,
				@31,
				@33,
				@36,
				@40,
				@42,
				@45
			]
		},
		#level : 1,
		#links : OrderedCollection [
			''
		]
	},
	@6,
	@9
]

@misc{when-floss-isnt-better-2013, author = {Hill, Benjamin Mako}, title = {“{When} {Free} {Software} {Isn}’t {Better}” {Talk}}, month = {dec}, year = 2013 }  @misc{floss-few-authors-2016, author = {Eghbal, Nadia}, title = {What success really looks like in open source}, month = {feb}, year = 2016 }  @book{oop-pharo-2017, author = {Ducasse, Stéphane}, title = {Learning {Object}-{Oriented} {Programming}, {Design} and {TDD} with {Pharo} (vol {I})}, year = 2017 }  @book{pbe-2016, author = {Black, Andrew and Ducasse, Stéphane and Nierstrasz, Oscar and Pollet, Damien and Cassou, Damien and Denker, Marcus and Zagidulin, Dmitri and Hess, Nicolai and Chloupis, Dimitris}, title = {Pharo by {Example}}, publisher = {Square Bracket Associates}, year = 2016 }  @book{bergel_agile_2016, author = {Bergel, Alexandre}, title = {Agile {Visualization}}, publisher = {LULU Press}, month = {sep}, year = 2016 }  @misc{moldable-debugger-2014, author = {Girba, Tudor and Chis, Andrei and Niertrasz, Oscar}, title = {{SCG}: {The} "{Moldable} {Debugger}"}, month = {sep}, year = 2014 }  @misc{literate-computing-2015, author = {Perez, Fernando and Granger, Brian E.}, title = {Project {Jupyter}: {Computational} {Narratives} as the {Engine} of {Collaborative} {Data} {Science}}, month = {jul}, year = 2015 }  @article{luna-grafoscopio-2014, author = {Luna Cárdenas, Offray Vladimir}, title = {Metáforas y artefactos alternativos de escritura para jalonar la investigación abierta y la ciencia ciudadana y de garage}, month = {sep}, year = 2014 } 

---
pandocOptions: -N --template=mytemplate.tex --variable fontsize=12pt --variable version=1.3.8 --latex-engine=xelatex --toc --bibliography bibliography.bib date: 20 April 2017 title: Grafoscopio User Manual author: Offray Vladimir Luna Cárdenas ---

# Important information to start with



## A small presentation

This manual documents the basics of [Grafoscopio][grafoscopio-en], a tool
I'm cocreating[^cocreation] to make  reproducible research and literate computing, 
which allow authors to intertwine prose, code, data and visualizations into storytelling,
and readers and coauthors can verify, collaborate on and extend the document claims and artifacts. 
The context for that cocreation is my PhD in Design and Creation in the University of Caldas 
(Manizales, Colombia) and in our local hackerspace HackBo (Bogotá, Colombia), but
we are making something that moves beyond and between frontiers and our hope is
to potenciate that.

This document started as a draft for a simple `README` file, following the recomendations
given in the Jornal of Open Source Software (JOSS), but I entered in
some kind of "writing frenzy", and when I stoped, I had 40+ pages 
of documentation that became this manual, which is a way to introduce Grafoscopio
to a wider English speaking/reading audience.

I think there is a lot happening beyond the usual places and languages, here in the 
Global South: in garages, hackerspaces, makerspaces, favelas, barrios, streets, in Portuguese, 
Spanish, Hindi and away of indexed journals and their narratives. 
Away of universities, research centers, software fabrics and "publication scores".
[JOSS][joss] is an interesting enactive hack/critic to hegemonic ways of seeing knowledge and 
its validation, that visibilizes other creations and artifacts beyond the paper, by given them a
paper facade and we need more hacks like this, to make visible non-hegemonic knowledge practices, 
places, artifacts, cultures and languages.

Grafoscopio is an artifact to bridge, explore and communicate ideas and practices to and from
a broader and more diverse group of people and to amplify their voices with digital technology.
I hope you find the tools and ideas presented here interesting and they become a
bridge to alternatives that resonate with you.

[^cocreation]: 
    See the acknowledgements to look for other people that
    make Grafoscopio possible.
    Hopefuly this form of cocreation is just the beginning and will become
    more plural and potent in the future.

## Acknowledgements

I'm the main author of Grafoscopio and its companion packages
(`Dataviz`, `Pubiblio`) and, as Nadia Egbal [-@floss-few-authors-2016],
Benjamin Mako Hill [-@when-floss-isnt-better-2013] and others have pointed,
the majority of the Free Libre Open Source Software is created and mantained
mainly by one or two individuals, and in that sense Grafoscopio, follows the
rule and not the exception.
Despite of that, I think that Grafoscopio has been cocreated in a
pretty particular sense: our hackathons and workshops have given
to me a strong sense of priority and flow, and that requires a lot
of commitment and openess from most of the participants.
Also, I have received support from family, friends and tech communities in
several ways: long coffe talks, code snippets, proactive workshop documentation
and note taking, jokes, critic & challenges, travel help, proof reading blog 
entries, and even small and flexible loans (and is really a bless having them
coming from family and not from banks).
In that sense each creation requires a lot of people to see the light and
I have been lucky enough to count with all of them.

Here is a (probably incomplete)[^incomplete-thanks] list of people that 
helped me to make Grafoscopio possible:

Philippe Back,
Claudia Baez,
Carlos Barreneche,
Alexandre Bergel,
Luis Alejandro Bernal,
Andrés Calderón, 
Hilda Cárdenas,
Fernando Castro Toro,
Sebastian Castro Toro,
Ben Coman,
Jose David Cuartas,
Stephan Eggermont,
Johan Fabry,
Yanneth Gil,
Tudor Girba,
Nicolai Hess,
Diddier H.,
Camilo Hurtado,
Luis Linares,
Divian Luna,
Miltón Mamani, 
Rafael Medina, 
Iván Pulido,
David Salvador,
and 
Peter Uhnák.

Also, several places and communities were an active part in this project:
[HackBo][hackbo] hackerspace, [mutabiT][mutabit], [Pharo][pharo-community], 
[Moose][moose-community] and  [Agile Visualization][agileviz] communities, 
[HiTeC Lab][hitec-lab] of the Los Libertadores University and [Object Profile][object-profile].

To all of them, my sincere thanks.

  [^incomplete-thanks]: 
    If I made and error on omission in your name, please use the community
    contact forms explained at "Community Guidelines" section to let me know.

## Reading conventions

This document follows the following conventions:

  - *Italics* is used for emphasis and for Grafoscopio/Pharo special terms. For example:
    "Write this in the *playground*".
  - **Bold** is for strong emphasis notes and reminders, like in "**Important note**".
  - `Verbatim` is for representing code snippets and commands, keys and file names.
    For example: "Open the file named `manual.ston`".
  - Code lines are in verbatim and numered, which makes easier to point to specific
    parts and to know when a code block splits across sucessive pages.
  - `Ctrl` and `Cmd` represent the "Control" and  "Command" keys, respectively.
    The former is avaible on Windows and Gnu/Linux platforms and the last one
    is available on Mac platform.
    When we use that key in combination with other that needs to be pressed at
    the same time, we use `+` and the other key, so `Ctrl + s` represent the 
    simultaneos pressing of the keys `Ctrl` and `s`.
    Keyboard shorcuts that contain `Ctrl` on Windows and Gnu/Linux, can be
    replaced by `Cmd` on Mac and to ease reading we don't repeat each shorcut
    on each platform.
    Sometimes we will put the keyboard shortcut in parenthesis, just after the action it
    referst to, like in "Open the spotter (`Shift` + `Enter`)".
  - When we refer to menus and submenus in the Graphical User Interface (GUI), we will
    use `>` as an indicator of the menus hirarchy.
    For example, writing `Update > Grafoscopio`, means to choose the `Update` menu
    and then the `Grafoscopio` submenu in it.
  - The PDF and HTML versions of this document include clickable links and words, that
   are shown in blue, for example the following words are a clickable link to the
   [Grafoscopio web page][grafoscopio-en].
  - Bibiographic references use the usual convention of being cited between parenthesis, 
    like in: "(author year)".



## Document and software versions

As convention, this manual has the same version of the software it documents.
So the version number you see on bottom left side of each page, corresponds 
also to the Grafoscopio version.
Sometimes the manual is extended or corrected, while referring to the same
version of the software, so an alphanumeric smaller identifier is added next, in 
square brackets. 
Version plus revision identify without ambiguity this manual[^cryptohash], which 
is useful for changing digital artifacts to report bugs, fixes or just to know at which
point of their history you are located.

Because we follow a [rolling release][rolling-release] model for Grafoscopio and its
related packages and projects it is possible that the software and the documentation 
get out of sync.
Update them to their latest versions using the `Update` menu from the *docking bar*, 
as will be explained later.

Grafoscopio is packaged with other companion software, that is installed automatically with it. 
This is the info about this software bundle (taken from the present `ConfigurationOfGrafoscopio` 
source code):


~~~{.numberLines}
version138: spec
	<version: '1.3.8' imports: #('1.1-baseline' )>

	spec for: #'common' do: [
		spec blessing: #'stable'.
		spec description: 'version 1.3.8'.
		spec author: 'OffrayLuna'.
		spec timestamp: '2017-04-06T18:56'.
		spec 
			project: 'Ston' with: #stable;
			project: 'Roassal2' with: #stable;
			"project: 'OSProcess' with: #stable;" 
			project: 'WebBrowser' with: #stable;
			"project: 'Pubiblio' with: #stable;"
			project: 'Dataviz' with: '2.2.3'.
		spec 
			package: #Grafoscopio with: 'Grafoscopio-OffrayLuna.271';
			package: 'Spec-Glamour' with: 'Spec-Glamour-johanfabry.2' ].
~~~

[^cryptohash]: 
    For the curious, that code corresponds to the [cryptographic hash][cryptohash] of the source 
    markdown file used to produce the PDF or HTML version of this document (you will learn more
    about them in the "Exporting" section of this manual).
    You can use this hash to locate the exact version of such file in [its timeline][manual-source-timeline].

## On commons, copyright and copyfarleft

Grafoscopio is covered with the same MIT license as Pharo.
This document is covered by the P2P license.
Both are pretty liberal licenses that grant you a plethora of rights
to use, modify and make profit of Grafoscopio and its documentation,
under certains conditions, but I think that documentation and software 
do not need to have the same license, or offer the same rights even in the 
case of Grafoscopio, where  *interactive documentation is closer to being
a form of software*. 

I think that a deeper discusion on licences and the protection and expansion 
of knowledge as a commons is needed and this licenses difference reflect that.
You can see a full copy of both licenses, MIT and P2P, included in the
"Licenses" section of this document.

# Grafoscopio for what and for whom?



## This tool and you



Grafoscopio is a moldable tool for literate computing and reproducible
research, developed on [Pharo][pharo] live coding and computing integrated environment, 
in the context of a PhD research in a hacker space of the Global South ([HackBo][hackbo] 
in Bogotá, Colombia), that is being actively used, developed and documented.
We will expand on the points of the previous definition.

  - Being moldable [@moldable-debugger-2014] means that is easy to adapt the tool to several problems,
    which follows the opposite popular path of trying to force several problems into a predefined tool.
    Tools change us. So we need to change them back to express our concerns and to help us 
    in dealing with complex issues and problems in a flexible way.
  - Literate computing [@literate-computing-2015] is a way  of intertwining prose, code, data 
    and visualizations to make data based storytelling, experimentation, exploration and 
    documentation in diverse broad fields like academia, journalism, research and (h)ac(k)tivism.
    Grafoscopio allows the creation of literate computing structured interactive notebooks, that 
    take the form of a tree-like programmable document.
  - Research claims and findings and supporting data and visualizations can be integrated in 
    interactive notebooks with historic traceability, allowing reproducible research.
  - Because of the continuity and uniformity of the Pharo environment [@pbe-2016], Grafoscopio blurs 
    the distinction between code, data, document, application and IDE [^ide] and tries to blur 
    also the distinction between interactive documents authors and software developers. 
  - From the particular context where is being developed (HackBo hackerspace and a PhD research on
    Design and Creation), Grafoscopio is concived as a empowering simple and self contained *pocket
    infrastructure* (that work off-line/on-line  from USB thumb drives and/or low resources machines 
    [@luna-grafoscopio-2014]), wich states a critical approach to exclusionary ideas about data, coding, 
    research, and their practicioners, places, and supporting tools and infrastructures.
    In the [Grafoscopio web page][grafoscopio-en], we showcase several projects aligned with such
    critical approach and the idea that technology is mostly not neutral, wich is also reflected in some parts
    of this text and in the fact that we're opinionated about technology and its uses.
    I hope you find our technology and themes choices empowering and reavealing of alternatives.

  [^ide]: IDE: Integrated software Development Environment


Grafoscopio and its companion package, Dataviz, are intended to be used by learners and researchers 
in several fields: academia, journalism, activism, hacktivism and for anyone interested in open reproducible 
research and data storytelling backed by data and agile visualizations [@bergel_agile_2016].
This document assumes that you are such person. 
We will introduce the general features of Grafoscopio and point to several external and internal 
resources to complete your panoramic view of the ecosystem that let you deep your knowledge.

We included introductory resources to learn Pharo and data visualization, 
processing and storage related technologies (see the `Help` menu), and 
the [Grafoscopio web page][grafoscopio-en] (see figure \ref{fig:web-page-en}) shows several 
examples of how to use them for specific projects: 
Panama Papers as reproducible research; open community innovation in access to medicine 
information; Twitter data selfies; specific domain visualizations for medicine information; 
open, garage and citizen science and research.
*This whole manual was also created using Grafoscopio* and is also an example of the type 
of documents you can create with this tool.
We hope to inspire you to create and publish your own projects.

This document, by not trying to be comprenhensive, is a first invitation to know the 
Grafoscopio environment and to deep your knowledge with the use of it and other related resources.
You will see that, despite of being a manual, it includes pretty practical examples and invitations.
That is because I think that learning something new is more like reading a map
that reading a manual: you make first a panoramic view of where you are and
where you want to be, and take a practical approach to making your tasks and
reaching your destination.

No prior knowledge of programming is supposed to follow this manual.

![ Detail for the Grafoscopio [English web page][grafoscopio-en]. ](../../../Imagenes/grafoscopio-webpage-en.png){#fig:web-page-en}

**Important note** `>` *A prototype pointing to future possibilites* | 
Despite of being pretty usable, you will see that Grafoscopio is not totally finished,
and this shows in a few spots of the Graphical User Interface (GUI) that "point to the future", towards
funtionality still to be implemented.
It's an unusual approach, but I think that is important to convey some sense of possibility,
and work to be done in the GUI, instead of a fully polished "product" or a GUI that hides what is not ready.
This conviction comes from the [hackathons and workshops][dataweek] where we worked and evolved 
Grafoscopio, while the workshop was happening(!), thanks to the dynamic, moldable and continuous nature 
of the Pharo live coding environment.
Blurring the distinction between interactive documents authors and software developers, means to put
the whole environment at their dispossal, and to show the community that they can be part of this 
future possibilities, and that is why we take this unusual approach to GUI.

Where the GUI is more a remainder for the future, I will point that using the **TBD** remark (for To Be Done).

## Place in the ecosystem



### Similar tools

Grafoscopio is similar to other tools and has been inspired by many
of them, while is trying to bring also new possibilities, by combining
different ideas, diverging from others, puting "parallel" ideas into
dialog and, hopefully, bringing new ones. 
Here we talk about the similarities and differences with other tools.

  - Like [Jupyter][jupyter],  or [Zeppling][zeppling], [Beaker][beaker] 
    or [nteract][nteract], Grafoscopio provides interactive notebook functionality, 
    but it is focused only on Pharo code right now, instead of being a 
    "language neutral" notebook (but this could be a feature for the future)
    and is able to use Pharo bindings to integrate and communicate with other data
    languages, like [R][r-lang], [SQL][sql] or [J][j-lang].
    Grafoscopio is a multiplatform (Mac, Windows, Gnu/Linux) desktop 
    application (like nteract, or Electron Beaker),  instead of a web one 
    (like Jupyter, Zepelling or Beaker), providing a simple, extensible, 
    powerful, self-contained and portable environment for interactive computing, 
    (as said it can run from a USB thumb drive, modest computers
    and anything in between and beyond).
  - Grafoscopio organizes documents in a tree like metaphor, also called the *outline*, or the 
    notebook, that is interactive and programmable, like [Org Mode][org-mode], [Leo Editor][leo], 
    [TeXmacs][texmacs] or [Pollen][pollen] and share with them the idea that the 
    "document is the program"[^book-program] (or a programable container 
    of small  chunks of programs and scripts).
    Also, the document author, can define custom tags that can be used to traverse the 
    document tree and produce multiple customized views and outputs from a single document.
    A single notebook can contain short or book size interactive documents
    (this full manual is in a single Grafoscopio notebook). 
  - Like [Jupyter Lab][jupyterlab], Grafoscopio environment supports needs beyond the notebook. 
    Grafoscopio achieves this by leveraging the advantange of the extensible Pharo computing 
    environment and ecosystem, where it inhabits, with powerful tools for several computing taks, beyond
    and complementary to interactive documentation and reproducible research: GUI bulding, data processing 
    and visualization, unit testing, code repositories and source management, among others.
    It could be said that Jupyter Lab and Grafoscopio followed opposite paths, the first started in the Jupyter notebook,
    and is trying to become and IDE, and the second started in the Pharo live coding IDE and it bringing interactive
    notebooks functionality. In some sense, one is already in the future of what the other can be.
  - Grafoscopio uses the [Roassal agile visualization engine][roassal], to build interactive 
    visualizations and export them to the web.
    Roassal provides similar functionality to other visualization engines and toolkits like [D3.js][d3js], 
    [RaphaelJS][raphaeljs], [Processing][processing] or [Flare][flare], but, by being part of the Pharo 
    live coding  environment, it invites to a more explorative and dynamic building of visualizations in 
    an agile way.
  -  At the moment, notebook sharing, collaboration and publishing in print (PDF) and web (HTML) formats 
    is supported, but in the future we hope to provide advanced interactive notebook publishing 
    features in a distributed p2p fashion (see next section for the techologies that enable this).


[^book-program]: 
    The idea of the "document is a program" is a paraphrasis of "the book is a program",
    stated in the Pollen documentation, which is a short phrase to express a powerful idea
    about burring the disctinction between the document and the program, that is present 
    in several programs, like TeXmacs, Leo, Org Mode, and, of course, Grafoscopio.

### Technologies behind

Grafoscopio tries to become a simple, understandable, moldable, 
versatile and flexible tool thanks to the power of [Pharo][pharo] 
environment and ecosystem and the combination with mature external 
and internal frameworks and tools. It uses: 

  -  Internal tools and frameworks:
    - [GT Tools][gt-tools] and [Spec][spec] for embeddable code playgrounds, GUI and interactive 
      notebook nodes.
    - [Roassal][roassal] for data visualization.
    - [STON][ston] for a light data storage and a human friendly notebooks format.
    - [NeoJSON][neojson] for interacting with structured hierarchical [JSON][json] data.
    - [Citezen][citezen]: for reading and exporting bibliographies to the [BibTeX][bibtex] format.
    - [Fuel][fuel]: For medium data storage and objects serialization.
    - [UDBC][udbc]: For connection and management of external data bases.
  - External tools and frameworks:
    - [Fossil SCM][fossil] for collaboration, publication and traceability of the documents history 
      (including this very manual).
    - [Pandoc][pandoc] for exporting to printing (PDF) and web (HTML) formats.
    - [SQLite][sqlite] for storage and management of tabular data, for the `Dataviz` companion package.

Despite of trying to provide a friendly, cohesive and empowering user experience (UX) by
integrating default external minimalist and/or self-contained tools into the data exploration 
and document publishing workflow, other external tools could be integrated ([Git][git], 
more data bases, including [NoSQL][nosql], other exporters and 
[light markup languages][light-markup-languages] and so on). 



# Installation instructions

If you want to install Grafoscopio on Pharo 5, there are two ways of doing:
via the Pharo catalog or via running a script from the playground.
Both suppose that you have already installed and running Pharo for your platform
(Windows, Gnu/Linux or Mac) from its [download page][pharo-download],
and will be explained below, from the easiest one to the far easy ones.
Also both of them use the Monticello package manager, so dependencies are
managed automatically for you, making the procedures really short, even for
the script based one.

Different install procedures suit different tastes and needs and bring alternatives,
so, if one doesn't work for you or your need/taste, you can try others, or just
leave it like that, if your chosen method worked.



## Install from the Pharo catalog

To install Grafoscopio, from Internet in Pharo 5, follow this steps:

1. Open the spotter (`Shift` + `Enter`) and start to write the first letters of "Grafoscopio" (without the quotes).
  The spoter will show that it is available in the projects Catalog as shown in the figure \ref{fig:install-screen1}.

  ![ Install screen 1 | Finding Grafoscopio in the projects Catalog. ](../../../Imagenes/Install/spotter-grafos-first-launch.png){#fig:install-screen1}

2. Click with the mouse or move with the keyboard to select the "Grafoscopio" package showed.
    A install question as the following will be shown (see figure \ref{fig:install-screen2} ). 
    Select "Yes" to start the installation process.

  ![ Install screen 2 | Install question. ](../../../Imagenes/Install/install-question.png){#fig:install-screen2 width="50%"}

3. While the installation is running, some progress bars with package names are going to be showed
  (see figure \ref{fig:install-screen3}):

 ![ Install screen 3 | Installation progress bars. ](../../../Imagenes/Install/progress-bar.png){#fig:install-screen3}

4. When the installation ends we will see two indicators (as shown in figure \ref{fig:install-screen4}):
  - Messages in the lower left corner telling that installation is complete and documentation is installed.
  - A tool bar in the upper side of the Pharo window, called the docking bar.

  ![ Install screen 4 | Installation ended. ](../../../Imagenes/Install/install-ended.png){#fig:install-screen4}

5. Once we have Grafoscopio installed, we save modifications to our computing environment, by making 
  click in any clean part of the GUI (not occupied by any window) to deploy the *World Menu*.
  There we choose `Save`, to save the system with the same name, or `Save as` to save it with a new one
  (see figure \ref{fig:install-screen5}).

  ![ Install screen 5 | Saving changes via the World Menu. ](../../../Imagenes/Install/save-menu.png){#fig:install-screen5 width="50%"}

## Install from a script

There are two ways of running scripts in the Pharo environment:
one by importing them from Internet and the other by writing them
manually.

If you want to run a Pharo script from its web address, open the spotter
(`Shift + Enter`) and paste the address and then press `Enter` to open
the interactive *playground* and finally press the `Do it and go` green play 
button or its shorcut (`Ctrl + Shift + g`). 
(An empty *playground*  and its play button are showed in  figure
\ref{fig:empty-playground})

![ Empty *playground* and its play button. ](../../../Imagenes/Install/empty-playground-1.png){#fig:empty-playground}

For example, if you want to run the first part of the install script, open the
spotter and paste this address <http://ws.stfx.eu/BMWZPUY38BSF>.
You will see a screenshot similar to figure \ref{fig:install-script-part1},
showing the web address you have pasted and the first lines of the script
below, marked in grey. 

![ Loading the install configuration package. ](../../../Imagenes/Install/install-script-part1.png){#fig:install-script-part1} 

Press `Enter` or select with the mouse the area with the grey background. 
You will see the interactive playground with the script loaded.
We will see more details about the playground later.
For the moment press the play button or the shorcut (`Ctrl + Shift + g`).
You will see that the playground has been executed.
An executed playground contains a new column with details of the object
resulting from that execution, as shown in figure \ref{fig:executed-playground}.

![ Executed playground. ](../../../Imagenes/Install/executed-playground.png){#fig:executed-playground} 

Now repeat the procedure, opening the spotter, pasting this url <http://ws.stfx.eu/CZ87ZZ2SXCEM> 
and executing the second part of the installation script (showed in figure \ref{fig:install-script-part2}).

![ Loading Grafoscopio. ](../../../Imagenes/Install/install-script-part2.png){#fig:install-script-part2}

You will see the progress bars and the ending of the installation process,
as described in the steps 4 to 5 of the previous section.

Is usual to run the previous two steps in a single playground, by executing parts of it.
Here we are going to show you how to do it, with the same installation example we
have done so far.
Open a playground (`Ctrl` + `o` + `w`) and write this (or paste the URL of 
[this playground](http://ws.stfx.eu/D6DDTUAMWIOK), in the spotter, as before):

~~~{.numberLines}
"Start by loading the configuration of Grafoscopio"
  Gofer new
    url: 'http://smalltalkhub.com/mc/Pharo/MetaRepoForPharo50/main';
    package: 'ConfigurationOfGrafoscopio';
  load.

"After that load Grafoscopio"
ConfigurationOfGrafoscopio load.

~~~



Now select with the mouse the first 5 lines of the script and make click with the mouse 
secondary button. A contextual menu will be show near to the selection, as shown in the figure 
\ref{fig:playground-partial-execution}.
Choose from that menu the `Do it and go` option (or press the `Ctrl + g`  keyboard combination).
Only the selected part of the script will be executed.

![ Selecting the script part that will be executed and deploying the contextual menu. ](../../../Imagenes/Install/playground-partial-execution.png){#fig:playground-partial-execution}

![ Executing the second part of the script. ](../../../Imagenes/Install/playground-partial-execution2.png){#fig:playground-partial-execution2}
 
Now select the second part of the script, the last two lines, as shown in figure 
\ref{fig:playground-partial-execution2} and repeat the previous procedure.
You will see the progress bars and the ending of the installation process,
as described in the steps 4 to 5 of the previous section.

# Using Grafoscopio

This section will show you how to use Grafoscopio from the GUI.

## The spotter

One of the first elements of the Pharo GUI that is an excellent companion
for Grafoscopio is the [spotter][spotter], provided by the GT Toolkit.
It is a quick finder and laucher of system functionality and behaviour, 
allowing you to launch and execute scripts, browse the system, and find
code, among other uses.
Spotter and playgrounds (using before to install Grafoscopio) are a good 
entry points to deep in the system.
We will use them progressively and you will learn more on how to use them,
as you use the interactive documentation provided with Grafoscopio and the
Dataviz package.

To launch the spotter press `Shift` + `Enter` in Pharo. You will see something like the
figure \ref{fig:spotter}:

![ The spotter. ](../../../Imagenes/spotter.png){#fig:spotter}

You can learn more about the spotter in the [Pharo MOOC][mooc] [^mooc],
particularly in lesson 9 of Week 3 ([video 1][mooc-spotter1], [video 2][mooc-spotter2]).

[^mooc]: 
    MOOC stands for Massive Online Open Courseware.
    The Pharo MOOC is excellent and a really good entry point for programmers
    wating to learn more about Pharo and live coding.
    It also provides good complementary information if you come for other disciplines
    and endeavors and want to complement your reproducible research, modelling,
    data storytelling and visualization, with solid foundations of the Pharo environment,
    but it presumes familiary with programming.
    For an introductory book to object oriented programming, using the Pharo environment,
    look for the upcomming release of Learning Object-OrientedProgramming, Design and 
    TDDwith Pharo (vol I) [@oop-pharo-2017] (beta version [here][oop-pharo-2017]).

## The docking bar

The *docking bar* is a fixed point in the graphical interface for quick access to certain
functionalities, located at the top side of the Pharo main window see figure \ref{fig:docking-bar}.

![ The docking bar. ](../../../Imagenes/DockingBar/docking-bar1.png){#fig:docking-bar}

The docking bar is divided in three menus that are explained below.

### Launch menu

This menu allows the creation of new notebooks and the opening of recent ones.
Also it allows to launch *playgrounds* for writing  scripts and code snippets and 
*Transcripts* to see logs of the system.
Figure \ref{fig:launch-menu} shows the `Launch` menu.

![ The launch menu. ](../../../Imagenes/DockingBar/launch-menu.png){#fig:launch-menu width="50%"}

This are the options in the Update menu:

  - `New notebook`: Creates a new notebook.
  - `Notebook from file...`: opens a pre-existing notebook from a local file.
  - `Notebook from internet...`: opens a notebook from an URL and creates a local copy in the 
    temporal folder.
  - `Recent notebooks...`: lists the notebooks that have been recently opened and/or saved.
  - `Example notebooks...`: (**TBD**) Lists a set of example notebooks (may be integrated in the
    `Help ̀ menu).
  - `Roassal visualizations gallery...`: Opens a visualization browser grouped by categories. Useful 
    as starting point and inspirations for some projects.
  - `Playground`: Opens an interactive coding scripting environment, with single "pages". 
    Playgrounds are also embeddable inside Grafoscopio notebooks.
  - `Transcript`: opens an output window to see log of events or see print messages.

### Update menu

This menu updates functionality, documentation and settings for Grafoscopio.
Grafoscopio has a [rolling release][rolling-release] model, so continuous updates 
in functionality and documentation, come after the version packaged with the default installation.
The updates frequency increases with our [Data Week][dataweek] hackathon-workshop, seminars, 
and other community events, so is good to go the update menu regularly. 
Figure \ref{fig:update-menu} shows the `Update` menu.

![ The update menu. ](../../../Imagenes/DockingBar/update-menu.png){#fig:update-menu width="50%"}

This are the options in the Update menu:

  - `Grafoscopio`: Updates Grafoscopio to the latest development version from the repository.
  - `Documentation`: Updates  companion documentation, that comes as native notebooks or in 
    exported formats (PDF now and HTML in the future).
  - `Dataviz Package`: Updates the Dataviz companion package, which contains Domain Specific 
    Languages and Visualizations that are introduced as Grafoscopio notebooks.
    A companion notebook about this package is available on the Help menu, for more detailed 
    information.
  - `Notebooks places`: Updates some globally shared references for notebooks, so they can be 
    adapted to personal preferences.
    This is useful for workshops, so participants can still store some notebooks in their preferred 
    locations, while sharing relative routes. Examples of this functionality can be found in the Dataviz 
    package notebooks documentation.
  - `All the system`: Updates all of the above, except for the "Notebooks places", without going for 
    any individual menu.

### Help menu

The Help menu contains mostly references to interactive notebooks that teach
or exemplify how to use Grafoscopio or the core technologies behind (Pharo tutorial,
Roassal, STON, etc). 
They are installed with Grafoscopio in native format and some are in PDF, like this manual.
Figure \ref{fig:help-menu} shows the `Help` menu.

![ The help menu. ](../../../Imagenes/DockingBar/help-menu.png){#fig:help-menu width="50%"}

We have followed a local first approach for the Grafoscopio development, which implies that
most of the documentation is writen for the local context first and in Spanish.
The Grafoscopio Manual is the first English "formal" document (besides blog post and constant 
communication with the international Pharo communities that are in English).
Because the GUI is in English now (it was in Spanish at the begining), we indicate when a 
`Help` document is in Spanish.
In the future we would like to have multilingual documentation, with a bigger team and community to
work on this issues. And of course you're already invited to be part of it.

This are the options in the Help menu:

  - `Tutorial (Spanish)`: Opens a tutorial used for the [Data Week][dataweek] hackathon/workshop, that
     advances in increasding difficulty, covering the Pharo introductory tutorial (Prof. Steph), 
     some simple scripts, reading of structured data (in JSON), building of a first package (Cinemania),
     HTML templating and programatic generation (via Mustache) and basic web publishing (via Teapot).
     (For a more detailed view of the contents, you're welcomed to explore the tutorial by yourself).
  - `Manual`: Opens this manual as a Grafoscopio native document.
  - `Manual (PDF)`: Opens this manual, exported as PDF.
  - `Dev's notes`: Opens a notebook with notes from the developer. Useful to know what is happening
    with the development process and where is going and is complementary to other development
    infrastructures, like code, docs and issues repositories (provided by SmalltalkHub and Fossil).
  - `About Grafoscopio`: Opens the "About" window, showing contributors and the software version.


## The notebook GUI

The notebook GUI is composed of tree main parts (as showed in figure \ref{fig:new-notebook}):

  1. The top bar
  2. The document tree
  3. The node details

Each of these sections will be detailed below.

### Creating a new notebook

To create a new notebook you have several options:

  - Choose `Launch > New notebook`, from the *docking bar*.
  - Open a *playground* (`Ctrl + o + w`) and write  `GrafoscopioNotebook new openDefault`.

You will see a window like the shown in figure \ref{fig:new-notebook}.

![ A new Grafoscopio notebook. ](../../../Imagenes/Notebook/new-notebook1.png){#fig:new-notebook}

Next section will explain the functionality of the notebook GUI.

### The top bar

The top bar groups funtionality to save, export and edit the document tree and associate it to related 
assets, that form projects.

This is the detailed information.

#### The notebook menu

Allows the creation new notebooks and their exportation to external formats.
Figure \ref{fig:notebook-menu}, shows this menu, when the notebook button is clicked.

![ The notebook menu. ](../../../Imagenes/Notebook/notebook-menu.png){#fig:notebook-menu}

These are the options of this menu:

  - `Save`: Saves the notebook to the filesystem. If no filename has been provided, asks for one.
  - `Save as...`: Saves the notebook to the filesyste under a new name.
  - `Export as markdown`: Exports the current notebook to [Pandoc's markdown][markdown]. 
  - `Export as html`: Exports the current notebook to HTML format.
  - `Export as pdf`: Exports the current notebook to HTML format.
  - `See html`: (**TBD**) Shows the exported HTML document.
  - `See pdf`: (**TBD**) Shows the exported PDF document.

See  the "Exporting" section for details about exporting and the pandoc prerrequisites to make it work.

#### The project menu (TBD)

A project is a Grafoscopio notebook with the related files to produce particular outputs
from it, including data files, HTML and LaTeX templates or other notebooks.
A project tracks the historical changes on such files, allows collaboration between collective
authors, exploring or unifying work variations (what is called branching and merging) and let 
the profreaders or audience made suggestions (via ticketing).
Projects can be published on the web, providing reproducibility and increasing transparency to
research claims.

Project functionality is provided in Grafoscopio thanks to the [Fossil SCM][fossil] (SCM stands for
Software Configuration Manager and sometimes is called Distributed Control Version System or DVCS),
a simple and self-contained software for asynchronous collaboration with a pretty small footprint 
(~2 Mb in size for all its functionality), available for major platforms, and providing truly distributed
project management features (source file management, wiki, ticketing).
Fossil is similar to [Git][git] or [GitHub][github], but it is simpler that the former and does not hide 
functionality under closed source code software or promotes centralization, like the later[^github-alternatives].

Despite of not being integrated yet, several projects have been done using the Grafoscopio + Fossil combination. 
For example, Grafoscopio uses Fossil as backend for its documentation and reporting issues and
uses the Fossil JSON Application Programming Interface (API) to query documention and update it to the
last versions.


[^github-alternatives]: 
    There are several alternatives to GitHub that provide a sleek and friendly
    web user interface (WUI), without complicated overheat, following
    the same spirit of Fossil, but based on git.
    Checkout [Gogs][gogs], for a self hosted and easy to install git 
    based source code management system.

#### The toolbar

The toolbar provides a series of icons to access frequently used functionality, organized by groups.
In the future this functionality will be accessible also via keyboard shorcuts.
Figure \ref{fig:toolbar} shows the toolbar.

![ The toolbar. ](../../../Imagenes/Notebook/toolbar.png){#fig:toolbar}

Here is a more detailed explanation of the icons functionality in the toolbar.

##### Notebook saving and node cut, copy & paste

  - ![](../../../Imagenes/Notebook/icon-save.png): Saves the current notebook.
  - ![](../../../Imagenes/Notebook/icon-cut.png): Cuts the current node of the document tree.
  - ![](../../../Imagenes/Notebook/icon-copy.png): Copies the current node of the document tree to the 
    clipboard.
  - ![](../../../Imagenes/Notebook/icon-paste.png): Pastes the current node of the document tree from the
    clipboard.

##### Node addition, deletion and movement

This operations edit the document tree. 
You are invited to experiment with them in the new notebook already created, to make more sense
of this operations.

  - ![](../../../Imagenes/Notebook/icon-add.png): Adds a new node to the tree after the 
    currently selected one.
  - ![](../../../Imagenes/Notebook/icon-delete.png): Removes the currently selected node.
  - ![](../../../Imagenes/Notebook/icon-up.png): Moves the currently selected node one place upward, 
    unless is the first node.
  - ![](../../../Imagenes/Notebook/icon-down.png): Moves the currently selected node one place 
    downward, unless is the last node.
  - ![](../../../Imagenes/Notebook/icon-left.png): Promotes the currently selected node one place, to 
    the same level of its parent.
  - ![](../../../Imagenes/Notebook/icon-right.png): Demotes the currently selected node one place, making 
    it child of the previous slibing.

##### Switching node body, visiting links, updating content and adding tags

There are two kinds of  nodes in Grafoscopio now: text nodes and code nodes.
This could change in the future, providing special nodes as particular handlers and viewers
for particular content (images, audio, video, and so on).
But with the simple combination of this two kinds of nodes, complete and complex interactive 
documents can be created already, and complemented with the dynamic and inmersive Pharo ecosystem.
Text nodes are writen in pandoc's markdown, with support to embedding images, bibliographic
references and all the features provided by this simple, mature and extensible markup language.
Code nodes are interactive playgrounds of Pharo code, allowing to dive into different objects,
and integrated with the Roassal agile visualization toolkit.
 
  - ![](../../../Imagenes/Notebook/icon-code.png): switches a node from text to code and viceversa.
    Because literate computing, weaves code and text, emphasizing narrative and storytelling 
    supported by data, the default nodes are textual ones.
  - ![](../../../Imagenes/Notebook/icon-go.png): visits a node link, opening it in the web browser, 
    if it is not empty (see node details for more information about node links).
  - ![](../../../Imagenes/Notebook/icon-sync.png): updates node body acording to the node last link, which
    is useful for published playgrounds.
    In the future this icon will sync body contents with different type of links, including those pointing to
    [etherpads][etherpad] or local and remote files.
  - ![](../../../Imagenes/Notebook/icon-tag.png) ![](../../../Imagenes/Notebook/icon-untag.png):
    the add/remove tags icons  will be used to define custom tags to mark nodes (**TBD**).
    Custom tags can be used to define node traversal paths to create different outputs from a single   
    notebook (in a similar way to `%keywords` as is explained after).

### The document tree

The document tree is the place where the whole document is shown
and provides a uniform metaphor to organize the work.
It is at the left of the Grafosocopio Notebook GUI.
This part will introduce the document tree and some vocabulary to be used with it.

The tree metaphor provides sequence and hierarchy to the document
and its parts and is composed by nodes.
Nodes have tree kinds of possible basic relationships: parent, child and sibling,
which are represented visually for the indentation level of the nodes.
We'll use this visual metaphor to introduce this relationships.
The nodes indented inmediately at the right of other are called the children of the
node at the left, and, converserly, the node at the left is said to be the parent of the
nodes at the right.
Nodes at the same indentation level are siblings, sharing the same parent.
If a node has children, it will show an arrow head at the left.
if the arrow is pointing right, the node is collapsed meaning is not showing
its children.
If the arrow is pointing down, the node is expanded, meaning that is shown them.
(see figure below).

Finally, If a node A is parent of a node B, which is parent of a node C, then A is said to be
an ancestor of C and C is said to be a sucessor of A.

### Node details

As we said, documents are composed by nodes organized in trees.
The node has tree parts: header, body and links.
We will explain the detailed composition of a node below.

#### Node header

The node header is a short text (one line) that summarizes the purpose or content of the node.
The header is shown in two places, in the document tree (for navigation) and at the top of the 
node details, as a text field, for edition.
Once the node header has been edited a color mark will be shown near the upper right corner
of the text field box.
This is known as a dirty marker.
To update the header in the document tree press `Ctrl + s` ( in Windows or Linux) or `Cmd + s` (Mac).


#### Node body

The node body contains more extense information for the node and can
take several lines of text or code.
Node body is located inmediatly below the node header text input.
Node body is saved automatically with each keystroke, and takes advantage of the
build in persistance for all Pharo objects (called image persistance), but if you want
to update the notebook contents to the file system you will need to save
the notebook explicitely, by pressing the save button in the top bar or chosing the
save option in the  `Notebook menu`.

#### Node links

Node links store links to web references.
Sometimes when you're making quick outlines, you need
to organice external web references and have an easy way to visit them.
That's the primary functionality for node links.
If a node contains a valid link URL in the node links, you can visit them, by
pressing the blue arrow icon ![](../../../Imagenes/Notebook/icon-go.png), 
which will open the default web browser in such link.
The node links behave in a similar way to headers and the modificacions are saved 
explicitly by pressing `Ctrl + s` (Gnu/Linux, Windows) or `Cmd + s` (Mac).

In the future node links will behave in smarter ways, storing, for example, the history
of shared playgrounds for code nodes, paths to the file system to export subtrees of a
document. Web browsing is just the begining.

### More on code nodes

Code nodes are at the core experience of the interactive documentation,
exploratory computing, reproducible research and literate computing.
Code nodes are full Pharo interactive playgrounds embedded inside the
Grafoscopio notebook, with full functionality, including interactive inspectors,
to dive into the objects, including graphical capabilities.
We use extensively code nodes in our [Data Week][dataweek] workshops,
in conjunction with the integrated Monticello DVCS, to share code in agile 
fashion and prototype ideas quickly.
Here is a more detailed view of how to use code nodes.

#### Executing

Once a node has been defined as code 
(by pressing the ![](../../../Imagenes/Notebook/icon-code.png) button),
you will see a playground page inside the node body, with custom buttons
for its functionality, as seen in figure \ref{fig:code-node-emty}.

![ An empty code node. ](../../../Imagenes/Notebook/code-node-empty.png){#fig:code-node-emty}

This code node is a fully functional Pharo playground. 
You can write Pharo code there and execute it totally or partially, as we have seen already on the 
Grafoscopio script  installing method.
If you used the Pharo catalog method, take a short look on how to execute playgrounds
partially or totally and the keyboard shorcuts.

Just to remember and practice, create a new code node and write this: 

~~~{.numberLines}
b := RTMondrian new.
b shape label.
b nodes: (1 to: 100).
b edges connectFrom: [ :i | i // 2 ].
b layout cluster.
b
~~~



Then press the green play button ![](../../../Imagenes/Notebook/icon-play.png)
(or its shorcut `Ctrl + g`) and you will see something like the figure \ref{fig:code-node-executed}:

![ Executed code node. ](../../../Imagenes/Notebook/code-node-executed.png){#fig:code-node-executed}

What we have done is a small visualization (taken from the 
[Agile Visualization quick start][agileviz-quickstart]) that connects each number from 1 to 100 with
the [floor][floor-function] of its half (so, the numbers 18 and 19 are connected to 9, for example), 
and we put this visualization as an interactive code node of our notebook.
You can find more examples of interactive notebooks in the `Help` menu and create your own
on several topics.

#### Sharing

To share a code node, click the "publish" button in the playground page
![](../../../Imagenes/Notebook/icon-publish.png), that is just at the right of the play button.
A question window will be open asking to confirm your publication
(see figure \ref{fig:playground-publish-question}).

![ Publishing confirmation question. ](../../../Imagenes/Notebook/playground-publish-question.png){#fig:playground-publish-question width="50%"}

Once you accept to share your playround contents, a notification popup
will be shown, telling the web address (URL) of your published playground and will be
automatically copied to the system's clipboard (see figure \ref{fig:notification-published}), so it can 
be easily pasted in mails and other messages.

![ Publishing notification in the bottom left corner of the Pharo window. ](../../../Imagenes/Notebook/notification-published.png){#fig:notification-published}

Playground publications hosting services is generously provided by Sven
Van Caekenberghe (also, he is the author of the superb STON format and 
NeoJSON importers, used in Grafoscopio and the Dataviz companion package).
It is something like a [pastebin][pastebin] for Pharo code and a pretty convenient
way of sharing small snippets of functionality in Grafoscopio.
We use it continuously on our Data Week hackathon/workshops.

#### Importing

The previous topic show you how to share code nodes from the notebook to the web. 
This one shows how to import them from the web to your notebooks.
For this, the only thing you need to do is to paste the web URL for published playground
in the node links section and press enter.
The node will become a playground with the contents imported from the web.

We use this feature extensively for our workshops/hackathons and in fact was inspired
by them.
Usually we have a set of [etherpads][etherpad] to write quick notes collaboratively in
real time by the event participants and we put there the links of the shared playgrounds,
to be imported in Grafoscopio notebooks.

In the future the node links could show the history of the shared playgrounds and its transformations.



#### Diving on results

Code nodes are fully functional playgrounds, as we have said.
So you can use the full functionality of them to dive into the objects
resulting from a code execution.
By executing the playground, you not only see the results, but also
a customized inspector (provided by the GT-Tools) that allows to
see the attributes of the object or query them.

Several customized tabs are shown according to the execution
in the playground and can be extended and adapted further.

Some of the most used tabs are:

  - `Raw`: Shows the attributes of the object resulting from the 
    playgrounds execution. 
    Those attributes are also objects, so you can dive into them.
    Once you have selected an object, a faceted browsing will start
    opening a new set of tabs zooming into this particular object.
    The lower panel of the raw view, can be used to send messages to 
    the main object, or the objects that compose it.
  - `Meta`: Shows the objects hierarchy starting with the one resulting
    from the playgrounds execution and ascending in the containing classes.
    Is pretty useful to have a quick overview of which is the vocabulary of the 
    object, wich messages can be send and how they're organized (protocols) 
    and implemented.

For example, click on any number in the last visualization we have been using
in our code node. A new tab will be open, showing more details of that number. 
Then click on the `Meta` tab and select `SmallInteger`. 
You will see something like the figure \ref{fig:code-node-inspector}.

![ Diving on code node results using the playground inspector. ](../../../Imagenes/Notebook/code-node-inspector.png){#fig:code-node-inspector}

To know more about playgrounds and how they can be used and extended
vistit the [GT-Tools page][gt-tools].

### Extending the markup: `%keywords`

Grafoscopio traverses the notebook's document tree to export it to Pandoc's markdown.
Once it is in this format you can customize the output using the rich Pandoc options, adding
templates, changing bibliographic citation styles, using metadata and fine tuning the result
to get the PDF or HTML you want or need.

But sometimes, you want more control while writing and exporting the document.
That's the role of `%keywords`, that let you extend the writing and exporting syntax to
suit your needs as an author.
They are programmed entirely on Pharo, and you can see how they are coded and use them
as templates of your own special keywords (a topic we will cover in specialized notebooks)
and in the future a full Grafoscopio document API and a DSL will be provided to create even
easier customizations of Grafoscopio behavior and markup.

A `%keyword` tells Grafoscopio how to process the document while exporting and is usually
located in the node's header, as the first word of it.
Sometimes the `%keyword` also appears in the node's body, as we will see.
Everytime Grafoscopio finds a `%keyword` in a node will process that node accordingly to a
set of predefined rules.

In this part of the document, we will show you how to use the `%keywords` already present.
You're invited to explore the Grafoscopio native version of this manual (in the `Help > Manual`
*docking bar* menu) to see examples of how they are used in this very document.

  - `%invisible`: Use it to mark a node that you don't want to become part of the exported document.
    This applies to that node and its children. 

  - `%idea`: Use it when you don't want the header of the node to become part of the exported result.
      Is useful to split long text that are part of a single section into a set of main ideas.

  - `%embed`: Use it to change the way that children nodes are included in the exported result.
    If you do not use this keyword, all non-invisible children nodes will be added secuencially after the parent.
    If you use this keyword, all non-invisible children nodes that start with `%embed` will be added in the
    order they where called in the parent's body.

  - `%footnote`: Use it to create a children node that contains footnotes invoked in the parents body.
    The header of the footnote should be the same that is referenced in the parent. So if the parents body
    includes a `[^my-ID]` markup reference to a footnode, the children node should have this header:
    `%footnode my-ID`.
    Useful for long footnotes, (wich are usual in academic writing) or just to have a more organized document tree.

  - '%output': Use it if you want to include the textual output of a code node execution in the exported
    markdown file.

### Exporting: markdown, HTML, \LaTeX and PDF

Grafoscopio provides exportation capabilies to [Pandoc's markdown][markdown]
and use Pandoc to export to HTML, [LaTeX][latex] and PDF[^latex-engine]. 
To export a document, choose the appropiate option from the `Notebook` menu.
Exporting to markdown will save the document in the same location as the current notebook, 
but with  `.markdown` extension, instead of `.ston` and exporting as PDF, \LaTeX or HTML will
run the proper Pandoc command on this document for such conversion and will add the `.pdf`,
`.tex` or `.html` respective file extension  (provided that Pandoc is installed on your system at
the usual location, if is not, Grafoscopio will send you an error message).
If you want to export a document with a different name, you wil need first to save 
the native document with such new name.

You can also use Pandoc directly over the markdown file to
create beautiful documents for the printing and the web,
with templates and customized control over a lot of variables
(see the [Pandoc website][pandoc] for more information).
For example, the PDF version of this document was created in this way, 
from a single Grafoscopio notebook, using the command:

~~~
pandoc -N --template=mytemplate.tex --variable fontsize=12pt --variable 
version=1.3.5 --latex-engine=xelatex --toc --bibliography bibliography.bib
manual.markdown -o manual.pdf
~~~

**Important note ** `>`  *Bibliographic support: Zotero and BibTeX* | 
Grafoscopio has preliminar support for reading and generating [BibTeX][bibtex] files 
and to connect with public [Zotero][zotero] collections.
In fact, the bibliography file for this manual was done by reading a [Zotero collection][zotero-manual]
and creating the respective `bibliography.bib` from there.
This allows to work collaboratively on research, sharing bibliographic references, making
annotations and customizing their integration into the final exported document.
Open this manual from the `Help > Manual` docking bar menu and open the `Bibliography`
node to see an example of how this is done for this document.

You can browse the [proper folder in the fossil repository][manual-tip] to see
the manual and companion files in different formats.

[^latex-engine]: 
    Exporting to PDF, requires the proper instalation of a LaTeX engine,
    like pdflatex, luatex, xelatex or context.
    Explanation about how to install them for each specific platfom
    (Windows, Gnu/Linux and/or Mac) goes beyond the objectives of this
    manual and is available online.
    Please consult the published documentation for your particular platform.
    
    In the future we hope to provide integration with external package managers, like
    [Nix][nix] (for Gnu/Linux and Mac) or [Chocolatey][chocolatey] (for Windows) to
    help with external tools and frameworks installations, in case you don't want to
    make them by yourself.

# Examples

There is a dedicated complementary package, called `Dataviz`, with examples, 
that was build with educative purposes, for a recurrent local workshop called 
the Data Week, where we invite a diverse community in gender, professions,
educational and life backgrounds.
The Dataviz package is automatically installed when you install Grafoscopio,
and you can find more information about it in the [Dataviz intro][dataviz-intro] 
repository page.
Also we have a Spanish introductory tutorial, that is directed towards beginers.

The notebooks for such examples are available in the `Help` menu of the docking bar,
or you can open them by executing this code form the *playground*:


~~~{.numberLines}
"This opens the Spanish tutorial"
GrafoscopioNotebook new openTutorial 
~~~

~~~{.numberLines}
"This opens the introductory notebook to the Dataviz package"
GrafoscopioDocumentation openDatavizIntro
~~~

# API documentation

Because Grafoscopio inhabits a full live coding environment,
it follows the custom of making the API documentation available
inside a dynamic environment, instead in some static web page.
To open the Grafoscopio package inside the system browser,
and see the messages organized by protocols execute:


~~~{.numberLines}
"Browser the notebook API"
GrafoscopioNotebook browse.

"Browse the document tree API"
GrafoscopioNode browse.
~~~

# Tests

The core functionality of Grafoscopio document tree model is tested.
If you want to see and run the tests, just open the tests package by
executing:

~~~{.numberLines}
GrafoscopioNodeTest browse
~~~



From there, you can use the extensive test environment provided by Pharo.
For a short introduction to how to run test on this environment,
I recommend to watch the [Coding a Little Domain Specific Language video ][mooc-w3-14],
from the [Pharo MOOC][mooc].

# Known bugs

There is a non critical but annoying bug that presents from time
to time when you are using the notebook GUI.

Some times, when you click the document tree a window popup
with an error message, titled 
"`MessageNotUnderstood: receiver of "selectedMorphList" is nil`", 
as shown in figure \ref{fig:bug}.

![ The know bug message. ](../../../Imagenes/Notebook/bug.png){#fig:bug}


If that is the case, you still can continue your writing in the current document,
clicking on other notebook nodes and editing them, but if the message presents
again (usually when selecting the same node that originated it the first time),
you can save the notebook and reopen it again from the 
`Launch > Recent notebooks...` docking bar menu.

We are going to hunt and squeeze that bug out of existance.
Resistance is futile.
To help us with this or other bugs please look at the Community Guidelines to
know how to contribute to the project.

# Community Guidelines



## Seek support

Grafoscopio has a small and new born community.
You can reach it by following the contact links
in the Grafoscopio page in 
[Spanish](http://mutabit.com/grafoscopio/)
or in [English](http://mutabit.com/grafoscopio/index.en.html).

Also you can discuss issues related with Grafoscopio in the
[Pharo users community](http://pharo.org/community) 
mailing list.
We are in such list and try to be active participants there
and bridge the local Spanish community with the international
one.

## Report issues or problems

To report issues or problems with the software and/or its documentation 
please visit our [ticket section][grafoscopio-tickets] Fossil repository.
Before creating a new ticket, please be sure to visit the 
[current tickets][grafoscopio-tickets-current], to see if your issue/problem has been
not reported already.

When you are filling out the issues form, take into account to include the software version
where you found this problem.
If you are reporting an issue with documentation, add the document version, usually found
in the lower left side of the page, including the document revision in the square brackets.

## Contribute to the project

As we said, Grafoscopio wants to help in blurring the distinction
between software developer and interactive document author,
so we are pretty open to several ways of contribution: from
bug reports, as explained above, to the creation of interactive
documentation, domain specific languages (DSLs) and visualizations,
or software functionality.

Contributions usually take part on our recurrent [Data Week][dataweek] 
hackathon/workshop and there you will learn how to use and adapt 
the software, starting by the basics, creating DSLs and crafting
visualizations and integrating them into interactive notebooks.
You will also learn how to use Fossil and how to commit to our 
shared repositories for [code][grafoscopio-sthub] and for 
[documents and issues][grafoscopio-fossil].
Besides this manual, we are creating also a tutorial (in Spanish) with all 
these themes covered, as memories for us and others to remember and learn from.
The idea, as was said before, is to have multilingual documentation with a *local
first* approach.

If you don't have the chance to assist to one of our face to face learning workshops
and hackathons or to use the resulting notebooks, but still want and already know
who to contribute, you can also ask for permisions in the respositories using any of 
the contact methods listed above.
We are a small, new born and friendly community with low traffic
mail communication and can discuss about contributions on an
individual  case by case approach, so your words, bugfix and suggestions 
will be listened and taking into account and integrated when and where they 
make sense.

Welcome again to our community :-).

[agileviz]: http://agilevisualization.com/
[agileviz-quickstart]: https://dl.dropboxusercontent.com/u/31543901/AgileVisualization/QuickStart/0101-QuickStart.html
[beaker]: http://beakernotebook.com/
[bibtex]: https://en.wikipedia.org/wiki/BibTeX
[chocolatey]: https://chocolatey.org/
[citezen]: http://people.untyped.org/damien.pollet/software/citezen/
[cryptohash]: https://en.wikipedia.org/wiki/Cryptographic_hash_function
[d3js]: https://d3js.org/
[dataweek]: http://mutabit.com/dataweek/
[etherpad]: https://en.wikipedia.org/wiki/Etherpad
[flare]: http://flare.prefuse.org/
[floor-function]: https://en.wikipedia.org/wiki/Floor_and_ceiling_functions
[fuel]: http://rmod.inria.fr/web/software/Fuel
[fossil]: http://fossil-scm.org/
[hitec-lab]: http://www.hiteclab.co.nr/
[joss]: http://joss.theoj.org/
[grafoscopio-en]: http://mutabit.com/grafoscopio/index.en.html
[grafoscopio-fossil]: http://mutabit.com/repos.fossil/grafoscopio/
[grafoscopio-tickets]: http://mutabit.com/repos.fossil/grafoscopio/ticket
[grafoscopio-tickets-current]: http://mutabit.com/repos.fossil/grafoscopio/rptview?rn=1
[grafoscopio-sthub]: http://smalltalkhub.com/#!/~Offray/Grafoscopio
[git]: https://en.wikipedia.org/wiki/Git
[github]: https://en.wikipedia.org/wiki/GitHub
[gogs]: https://gogs.io/
[gt-tools]: http://gtoolkit.org/
[hackbo]: http://hackbo.co/
[j-lang]: https://en.wikipedia.org/wiki/J_(programming_language)
[json]: http://en.wikipedia.org/wiki/JavaScript_Object_Notation
[jupyter]: http://jupyter.org/
[jupyterlab]: http://jupyterlab.github.io/jupyterlab/
[latex]: https://en.wikipedia.org/wiki/LaTeX
[leo]: http://leoeditor.com
[light-markup-languages]: https://en.wikipedia.org/wiki/Light_markup_language
[manual-tip]: http://mutabit.com/repos.fossil/grafoscopio/dir?tip&name=Docs/En/Books/Manual
[manual-source-timeline]: http://mutabit.com/repos.fossil/grafoscopio/finfo?name=Docs/En/Books/Manual/manual.markdown
[markdown]: http://pandoc.org/MANUAL.html#pandocs-markdown
[mooc]: https://siemenbaader.github.io/PharoMooc-website/
[mooc-spotter1]: http://rmod-pharo-mooc.lille.inria.fr/MOOC/Videos/W3/C019-Videos-Spotter1-BrowsingAClassWithSpotter-V2-HD_720p_4Mbs.m4v
[mooc-spotter2]: http://rmod-pharo-mooc.lille.inria.fr/MOOC/Videos/W3/C019-Videos-Spotter2-Categories-V2-HD_720p_4Mbs.m4v
[mooc-w3-14]: http://amara.org/en/videos/04UWGMwnrdXz/info/rmod-pharo-mooclilleinriafrc019-videos-redo-dsl-hd_720p_4mbsm4v/
[moose-community]: http://moosetechnology.org/#twitter
[mutabit]: http://mutabit.com/
[neojson]: https://ci.inria.fr/pharo-contribution/job/EnterprisePharoBook/lastSuccessfulBuild/artifact/book-result/NeoJSON/NeoJSON.html
[nix]: http://nixos.org/nix/
[nosql]: https://en.wikipedia.org/wiki/NoSQL
[nteract]: https://nteract.io/
[object-profile]: http://objectprofile.com/
[oop-pharo-2017]: https://ci.inria.fr/pharo-contribution/view/Books/job/LearningObjectOrientedProgramming/98/artifact/book.pdf
[org-mode]: http://orgmode.org/
[pastebin]: https://en.wikipedia.org/wiki/Pastebin
[pandoc]: http://pandoc.org/
[pharo]: http://pharo.org/
[pharo-download]: http://pharo.org/download
[pharo-community]: http://pharo.org/community
[pollen]: http://docs.racket-lang.org/pollen/
[processing]: https://processing.org/
[raphaeljs]: https://dmitrybaranovskiy.github.io/raphael/
[r-lang]: https://en.wikipedia.org/wiki/R_(programming_language)
[roassal]: http://agilevisualization.com/
[rolling-release]: https://en.wikipedia.org/wiki/Rolling_release
[spec]: http://files.pharo.org/books/spec-tutorial/
[spotter]: http://gtoolkit.org/#spotter
[sql]: https://en.wikipedia.org/wiki/SQL
[sqlite]: http://sqlite.org/
[ston]: https://github.com/svenvc/ston/blob/master/ston-paper.md
[texmacs]: http://texmacs.org/
[udbc]: http://www.smalltalkhub.com/#!/~TorstenBergmann/UDBC 
[zeppling]: http://zeppelin-project.org/
[zotero]: https://www.zotero.org/
[zotero-manual]: https://www.zotero.org/groups/diseo_y_creacion_phd_msc_universidad_de_caldas/items/collectionKey/PHGTCZVT

# Licenses



## Grafoscopio, Dataviz and Pubiblio Software License

The Grafoscopio, and its companion packages Dataviz and Publibio, 
are software covered under MIT License

Copyright (c) 2014-2017 Offray Vladimir Luna Cárdenas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

## Documention License

THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS COPYFARLEFT PUBLIC LICENSE (“LICENSE”). 
THE WORK IS PROTECTED BY COPYRIGHT AND ALL OTHER APPLICABLE LAWS. ANY USE OF THE WORK OTHER THAN AS 
AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED. BY EXERCISING ANY RIGHTS TO THE WORK 
PROVIDED IN THIS LICENSE, YOU AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY 
BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN AS CONSIDERATION 
FOR ACCEPTING THE TERMS AND CONDITIONS OF THIS LICENSE AND FOR AGREEING TO BE BOUND BY THE TERMS AND 
CONDITIONS OF THIS LICENSE.

THE [GRAFOSCOPIO MANUAL](../Books/Manual/manual.ston), 
THE [DATAVIZ NOTEBOOK](../../../Packages/Dataviz/dataviz.ston),
AND THEIR DERIVATED FILES LOCATED IN THIS REPOSITORY, 
ARE COVERED BY THIS DOCUMENTATION LICENSE.

### Definitions

a. **“Adaptation”** means a work based upon the Work, or upon the Work and other pre-existing works, 
  such as a translation, adaptation, derivative work, arrangement of music or other alterations of a literary 
  or artistic work, or phonogram or performance and includes cinematographic adaptations or any other 
  form in which the Work may be recast, transformed, or adapted including in any form recognizably derived 
  from the original, except that a work that constitutes a Collection will not be considered an Adaptation for 
  the purpose of this License. For the avoidance of doubt, where the Work is a musical work, performance or 
  phonogram, the synchronization of the Work in timed-relation with a moving image (“synching”) will be 
  considered an Adaptation for the purpose of this License. 

b. **“Collection”** means a collection of literary or artistic works, such as encyclopedias and anthologies, or 
  performances, phonograms or broadcasts, or other works or subject matter other than works listed in Section 
  1(f) below, which, by reason of the selection and arrangement of their contents, constitute intellectual creations, 
  in which the Work is included in its entirety in unmodified form along with one or more other contributions, each 
  constituting separate and independent works in themselves, which together are assembled into a collective whole. 
  A work that constitutes a Collection will not be considered an Adaptation (as defined above) for the purposes of this License. 

c. **“Distribute”** means to make available to the public the original and copies of the Work or Adaptation, as appropriate,
  through sale, gift or any other transfer of possession or ownership. 

d. **“Licensor”** means the individual, individuals, entity or entities that offer(s) the Work under the terms of this License. 

e. **“Original Author”** means, in the case of a literary or artistic work, the individual, individuals, entity or entities who 
  created the Work or if no individual or entity can be identified, the publisher; and in addition (i) in the case of a performance 
  the actors, singers, musicians, dancers, and other persons who act, sing, deliver, declaim, play in, interpret or otherwise perform 
  literary or artistic works or expressions of folklore; (ii) in the case of a phonogram the producer being the person or legal entity 
  who first fixes the sounds of a performance or other sounds; and, (iii) in the case of broadcasts, the organization that transmits 
  the broadcast. 

f. **“Work”** means the literary and/or artistic work offered under the terms of this License including without limitation any production 
  in the literary, scientific and artistic domain, whatever may be the mode or form of its expression including digital form, such as a book, 
  pamphlet and other writing; a lecture, address, sermon or other work of the same nature; a dramatic or dramatico-musical work; a 
  choreographic work or entertainment in dumb show; a musical composition with or without words; a cinematographic work to which 
  are assimilated works expressed by a process analogous to cinematography; a work of drawing, painting, architecture, sculpture, engraving 
  or lithography; a photographic work to which are assimilated works expressed by a process analogous to photography; a work of applied art; 
  an illustration, map, plan, sketch or three-dimensional work relative to geography, topography, architecture or science; a performance; a 
  broadcast; a phonogram; a compilation of data to the extent it is protected as a copyrightable work; or a work performed by a variety or 
  circus performer to the extent it is not otherwise considered a literary or artistic work. 

g. **“You”** means an individual or entity exercising rights under this License who has not previously violated the terms of this License with 
  respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation. 

h. **“Publicly Perform”** means to perform public recitations of the Work and to communicate to the public those public recitations, by any 
  means or process, including by wire or wireless means or public digital performances; to make available to the public Works in such a way 
  that members of the public may access these Works from a place and at a place individually chosen by them; to perform the Work to the 
  public by any means or process and the communication to the public of the performances of the Work, including by public digital performance; 
  to broadcast and rebroadcast the Work by any means including signs, sounds or images. 

i. **“Reproduce”** means to make copies of the Work by any means including without limitation by sound or visual recordings and the right 
  of fixation and reproducing fixations of the Work, including storage of a protected performance or phonogram in digital form or other electronic 
  medium.

### Fair dealing rights

Nothing in this License is intended to reduce, limit, or restrict any uses free from copyright or 
rights arising from limitations or exceptions that are provided for in connection with the copyright 
protection under copyright law or other applicable laws.

### License Grant

Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, 
royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to 
exercise the rights in the Work as stated below:

a. to Reproduce the Work, to incorporate the Work into one or more Collections, and to Reproduce 
    the Work as incorporated in the Collections; 

b. to create and Reproduce Adaptations provided that any such Adaptation, including any translation 
    in any medium, takes reasonable steps to clearly label, demarcate or otherwise identify that changes 
    were made to the original Work. For example, a translation could be marked 
    “The original work was translated from English to Spanish,” or a modification could indicate 
    “The original work has been modified.”; 

c. to Distribute and Publicly Perform the Work including as incorporated in Collections; and, 

d. to Distribute and Publicly Perform Adaptations. The above rights may be exercised in all media and formats whether 
  now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary 
  to exercise the rights in other media and formats. Subject to Section 8(f), all rights not expressly granted by Licensor are hereby 
  reserved, including but not   limited to the rights set forth in Section 4(f).

### Restrictions

The license granted in Section 3 above is expressly made subject to and limited by the following restrictions:

a. You may Distribute or Publicly Perform the Work only under the terms of this License. You must include a copy of, or the Uniform Resource Identifier (URI) 
  for, this License with every copy of the Work You Distribute or Publicly Perform. You may not offer or impose any terms on the Work that restrict the terms of
  this License or the ability of the recipient of the Work to exercise the rights granted to that recipient under the terms of the License. You may not sublicense 
  the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties with every copy of the Work You Distribute or 
  Publicly Perform. When You Distribute or Publicly Perform the Work, You may not impose any effective technological measures on the Work that restrict the
  ability of a recipient of the Work from You to exercise the rights granted to that recipient under the terms of the License. This Section 4(a) applies to the 
  Work as incorporated in a Collection, but this does not require the Collection apart from the Work itself to be made subject to the terms of this License. If 
  You create a Collection, upon notice from any Licensor You must, to the extent practicable, remove from the Collection any credit as required by Section  
  4(d), as requested. If You create an Adaptation, upon notice from any Licensor You must, to the extent practicable, remove from the Adaptation any credit 
  as required by Section 4(d), as requested. 

b. Subject to the exception in Section 4(c), you may not exercise any of the rights granted to You in Section 3 above in any manner that is primarily intended 
  for or directed toward commercial advantage or private monetary compensation. The exchange of the Work for other copyrighted works by means of 
  digital file-sharing or otherwise shall not be considered to be intended for or directed toward commercial advantage or private monetary compensation, 
  provided there is no payment of any monetary compensation in connection with the exchange of copyrighted works. 

c. **You may exercise the rights granted in Section 3 for commercial purposes only if**:

   i. **You are a worker-owned business or worker-owned collective; and** 
   ii. **all financial gain, surplus, profits and benefits produced by the business or collective are distributed among the worker-owners**

d. Any use by a business that is privately owned and managed, and that seeks to generate profit from the labor of employees paid by salary or other wages, is
  not permitted under this license. 

e. If You Distribute, or Publicly Perform the Work or any Adaptations or Collections, You must, unless a request has been made pursuant to Section 4(a), keep 
  intact all copyright notices for the Work and provide, reasonable to the medium or means You are utilizing: (i) the name of the Original Author (or 
  pseudonym, if applicable) if supplied, and/or if the Original Author and/or Licensor designate another party or parties (e.g., a sponsor institute, publishing 
  entity, journal) for attribution (“Attribution Parties”) in Licensor’s copyright notice, terms of service or by other reasonable means, the name of such party 
  or parties; (ii) the title of the Work if supplied; (iii) to the extent reasonably practicable, the URI, if any, that Licensor specifies to be associated with the 
  Work, unless such URI does not refer to the copyright notice or licensing information for the Work; and, (iv) consistent with Section 3(b), in the case of an 
  Adaptation, a credit identifying the use of the Work in the Adaptation (e.g., “French translation of the Work by Original Author,” or “Screenplay based on 
  original Work by Original Author”). The credit required by this Section 4(d) may be implemented in any reasonable manner; provided, however, that in the 
  case of a Adaptation or Collection, at a minimum such credit will appear, if a credit for all contributing authors of the Adaptation or Collection appears, then
  as part of these credits and in a manner at least as prominent as the credits for the other contributing authors. For the avoidance of doubt, You may only 
  use the credit required by this Section for the purpose of attribution in the manner set out above and, by exercising Your rights under this License, You may 
  not implicitly or explicitly assert or imply any connection with, sponsorship or endorsement by the Original Author, Licensor and/or Attribution Parties, as 
  appropriate, of You or Your use of the Work, without the separate, express prior written permission of the Original Author, Licensor and/or Attribution 
  Parties. 

f. For the avoidance of doubt: 

  i. Non-waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing 
    scheme cannot be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License; 
  ii. Waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing 
    scheme can be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License if 
    Your exercise of such rights is for a purpose or use which is otherwise than noncommercial as permitted under Section 4(b) and otherwise waives the right 
    to collect royalties through any statutory or compulsory licensing scheme; and, 
  iii.Voluntary License Schemes. The Licensor reserves the right to collect royalties, whether individually or, in the event that the Licensor is a member of a 
    collecting society that administers voluntary licensing schemes, via that society, from any exercise by You of the rights granted under this License that is 
    for a purpose or use which is otherwise than noncommercial as permitted under Section 4(b). 

g. Except as otherwise agreed in writing by the Licensor or as may be otherwise permitted by applicable law, if You Reproduce, Distribute or Publicly Perform
  the Work either by itself or as part of any Adaptations or Collections, You must not distort, mutilate, modify or take other derogatory action in relation to 
  the Work which would be prejudicial to the Original Author’s honor or reputation. Licensor agrees that in those jurisdictions (e.g. Japan), in which any 
  exercise of the right granted in Section 3(b) of this License (the right to make Adaptations) would be deemed to be a distortion, mutilation, modification or 
  other derogatory action prejudicial to the Original Author’s honor and reputation, the Licensor will waive or not assert, as appropriate, this Section, to the 
  fullest extent permitted by the applicable national law, to enable You to reasonably exercise Your right under Section 3(b) of this License (right to make 
  Adaptations) but not otherwise.

### Representations, Warranties and Disclaimer

UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR 
WARRANTIES OF ANY KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF 
TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE 
PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO 
SUCH EXCLUSION MAY NOT APPLY TO YOU. 

### Limitation on liability

EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, 
INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN 
ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 

### Termination

a. This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who 
  have received Adaptations or Collections from You under this License, however, will not have their licenses terminated provided such individuals or entities 
  remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License. 

b. Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding 
  the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that 
  any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and 
  this License will continue in full force and effect unless terminated as stated above.



### Miscellaneous

a. Each time You Distribute or Publicly Perform the Work or a Collection, the Licensor offers to the recipient a license to the Work on the same terms and 
  conditions as the license granted to You under this License.

b. Each time You Distribute or Publicly Perform an Adaptation, Licensor offers to the recipient a license to the original Work on the same terms and 
  conditions as the license granted to You under this License. 

c. If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the 
  terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to 
  make such provision valid and enforceable. 

d. No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by 
  the party to be charged with such waiver or consent. 

e. This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or 
  representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any 
  communication from You. This License may not be modified without the mutual written agreement of the Licensor and You. 

f. The rights granted under, and the subject matter referenced, in this License were drafted utilizing the terminology of the Berne Convention for the 
  Protection of Literary and Artistic Works (as amended on September 28, 1979), the Rome Convention of 1961, the WIPO Copyright Treaty of 1996, the WIPO 
  Performances and Phonograms Treaty of 1996 and the Universal Copyright Convention (as revised on July 24, 1971). These rights and subject matter take 
  effect in the relevant jurisdiction in which the License terms are sought to be enforced according to the corresponding provisions of the implementation of 
  those treaty provisions in the applicable national law. If the standard suite of rights granted under applicable copyright law includes additional rights not 
  granted under this License, such additional rights are deemed to be included in the License; this License is not intended to restrict the license of any rights 
  under applicable law.

# Bibliography

OrderedCollection [
	GrafoscopioNode {
		#header : '%metadata ',
		#body : '| metadata version pandocOptions |
version := \'1.3.8\'.
pandocOptions := \'-N --template=mytemplate.tex --variable fontsize=12pt --variable version=\',version,\' --latex-engine=xelatex --toc --bibliography bibliography.bib\'.
metadata := 
{ 
\'title\' -> \'Grafoscopio User Manual\'.
\'author\' -> \'Offray Vladimir Luna Cárdenas\'.
\'date\' -> Date today.
\'pandocOptions\' -> pandocOptions
} asDictionary.',
		#tags : 'código',
		#children : OrderedCollection [ ],
		#parent : GrafoscopioNode {
			#header : 'Arbol principal',
			#body : '',
			#children : @1,
			#level : 0,
			#nodesInPreorder : OrderedCollection [
				@4,
				@2,
				GrafoscopioNode {
					#header : 'Important information to start with',
					#body : '',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : 'A small presentation',
							#body : 'This manual documents the basics of [Grafoscopio][grafoscopio-en], a tool
I\'m cocreating[^cocreation] to make  reproducible research and literate computing, 
which allow authors to intertwine prose, code, data and visualizations into storytelling,
and readers and coauthors can verify, collaborate on and extend the document claims and artifacts. 
The context for that cocreation is my PhD in Design and Creation in the University of Caldas 
(Manizales, Colombia) and in our local hackerspace HackBo (Bogotá, Colombia), but
we are making something that moves beyond and between frontiers and our hope is
to potenciate that.

This document started as a draft for a simple `README` file, following the recomendations
given in the Jornal of Open Source Software (JOSS), but I entered in
some kind of "writing frenzy", and when I stoped, I had 40+ pages 
of documentation that became this manual, which is a way to introduce Grafoscopio
to a wider English speaking/reading audience.

I think there is a lot happening beyond the usual places and languages, here in the 
Global South: in garages, hackerspaces, makerspaces, favelas, barrios, streets, in Portuguese, 
Spanish, Hindi and away of indexed journals and their narratives. 
Away of universities, research centers, software fabrics and "publication scores".
[JOSS][joss] is an interesting enactive hack/critic to hegemonic ways of seeing knowledge and 
its validation, that visibilizes other creations and artifacts beyond the paper, by given them a
paper facade and we need more hacks like this, to make visible non-hegemonic knowledge practices, 
places, artifacts, cultures and languages.

Grafoscopio is an artifact to bridge, explore and communicate ideas and practices to and from
a broader and more diverse group of people and to amplify their voices with digital technology.
I hope you find the tools and ideas presented here interesting and they become a
bridge to alternatives that resonate with you.',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : '%footnote cocreation',
									#body : 'See the acknowledgements to look for other people that
make Grafoscopio possible.
Hopefuly this form of cocreation is just the beginning and will become
more plural and potent in the future.',
									#children : OrderedCollection [ ],
									#parent : @8,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								}
							],
							#parent : @6,
							#level : 2,
							#links : OrderedCollection [
								''
							]
						},
						GrafoscopioNode {
							#header : 'Acknowledgements',
							#body : 'I\'m the main author of Grafoscopio and its companion packages
(`Dataviz`, `Pubiblio`) and, as Nadia Egbal [-@floss-few-authors-2016],
Benjamin Mako Hill [-@when-floss-isnt-better-2013] and others have pointed,
the majority of the Free Libre Open Source Software is created and mantained
mainly by one or two individuals, and in that sense Grafoscopio, follows the
rule and not the exception.
Despite of that, I think that Grafoscopio has been cocreated in a
pretty particular sense: our hackathons and workshops have given
to me a strong sense of priority and flow, and that requires a lot
of commitment and openess from most of the participants.
Also, I have received support from family, friends and tech communities in
several ways: long coffe talks, code snippets, proactive workshop documentation
and note taking, jokes, critic & challenges, travel help, proof reading blog 
entries, and even small and flexible loans (and is really a bless having them
coming from family and not from banks).
In that sense each creation requires a lot of people to see the light and
I have been lucky enough to count with all of them.

Here is a (probably incomplete)[^incomplete-thanks] list of people that 
helped me to make Grafoscopio possible:

%embed people

Also, several places and communities were an active part in this project:
[HackBo][hackbo] hackerspace, [mutabiT][mutabit], [Pharo][pharo-community], 
[Moose][moose-community] and  [Agile Visualization][agileviz] communities, 
[HiTeC Lab][hitec-lab] of the Los Libertadores University and [Object Profile][object-profile].

To all of them, my sincere thanks.

  [^incomplete-thanks]: 
    If I made and error on omission in your name, please use the community
    contact forms explained at "Community Guidelines" section to let me know.',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : '%embed people',
									#body : 'Philippe Back,
Claudia Baez,
Carlos Barreneche,
Alexandre Bergel,
Luis Alejandro Bernal,
Andrés Calderón, 
Hilda Cárdenas,
Fernando Castro Toro,
Sebastian Castro Toro,
Ben Coman,
Jose David Cuartas,
Stephan Eggermont,
Johan Fabry,
Yanneth Gil,
Tudor Girba,
Nicolai Hess,
Diddier H.,
Camilo Hurtado,
Luis Linares,
Divian Luna,
Miltón Mamani, 
Rafael Medina, 
Iván Pulido,
David Salvador,
Serge Stinckwich,
and 
Peter Uhnák.',
									#children : OrderedCollection [ ],
									#parent : @14,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								}
							],
							#parent : @6,
							#level : 2,
							#links : OrderedCollection [
								''
							]
						},
						GrafoscopioNode {
							#header : 'Reading conventions',
							#body : 'This document follows the following conventions:

  - *Italics* is used for emphasis and for Grafoscopio/Pharo special terms. For example:
    "Write this in the *playground*".
  - **Bold** is for strong emphasis notes and reminders, like in "**Important note**".
  - `Verbatim` is for representing code snippets and commands, keys and file names.
    For example: "Open the file named `manual.ston`".
  - Code lines are in verbatim and numered, which makes easier to point to specific
    parts and to know when a code block splits across sucessive pages.
  - `Ctrl` and `Cmd` represent the "Control" and  "Command" keys, respectively.
    The former is avaible on Windows and Gnu/Linux platforms and the last one
    is available on Mac platform.
    When we use that key in combination with other that needs to be pressed at
    the same time, we use `+` and the other key, so `Ctrl + s` represent the 
    simultaneos pressing of the keys `Ctrl` and `s`.
    Keyboard shorcuts that contain `Ctrl` on Windows and Gnu/Linux, can be
    replaced by `Cmd` on Mac and to ease reading we don\'t repeat each shorcut
    on each platform.
    Sometimes we will put the keyboard shortcut in parenthesis, just after the action it
    referst to, like in "Open the spotter (`Shift` + `Enter`)".
  - When we refer to menus and submenus in the Graphical User Interface (GUI), we will
    use `>` as an indicator of the menus hirarchy.
    For example, writing `Update > Grafoscopio`, means to choose the `Update` menu
    and then the `Grafoscopio` submenu in it.
  - The PDF and HTML versions of this document include clickable links and words, that
   are shown in blue, for example the following words are a clickable link to the
   [Grafoscopio web page][grafoscopio-en].
  - Bibiographic references use the usual convention of being cited between parenthesis, 
    like in: "(author year)".

',
							#children : OrderedCollection [ ],
							#parent : @6,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								'',
								''
							]
						},
						GrafoscopioNode {
							#header : 'Document and software versions',
							#body : 'As convention, this manual has the same version of the software it documents.
So the version number you see on bottom left side of each page, corresponds 
also to the Grafoscopio version.
Sometimes the manual is extended or corrected, while referring to the same
version of the software, so an alphanumeric smaller identifier is added next, in 
square brackets. 
Version plus revision identify without ambiguity this manual[^cryptohash], which 
is useful for changing digital artifacts to report bugs, fixes or just to know at which
point of their history you are located.

Because we follow a [rolling release][rolling-release] model for Grafoscopio and its
related packages and projects it is possible that the software and the documentation 
get out of sync.
Update them to their latest versions using the `Update` menu from the *docking bar*, 
as will be explained later.

Grafoscopio is packaged with other companion software, that is installed automatically with it. 
This is the info about this software bundle (taken from the present `ConfigurationOfGrafoscopio` 
source code):
',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : '%output This software bundle versions',
									#body : '(ConfigurationOfGrafoscopio>>#version138:) sourceCode',
									#tags : 'código',
									#children : OrderedCollection [ ],
									#parent : @23,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								},
								GrafoscopioNode {
									#header : '%footnote cryptohash',
									#body : 'For the curious, that code corresponds to the [cryptographic hash][cryptohash] of the source 
markdown file used to produce the PDF or HTML version of this document (you will learn more
about them in the "Exporting" section of this manual).
You can use this hash to locate the exact version of such file in [its timeline][manual-source-timeline].',
									#children : OrderedCollection [ ],
									#parent : @23,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								}
							],
							#parent : @6,
							#level : 2,
							#links : OrderedCollection [
								''
							]
						},
						GrafoscopioNode {
							#header : 'On commons, copyright and copyfarleft',
							#body : 'Grafoscopio is covered with the same MIT license as Pharo.
This document is covered by the P2P license.
Both are pretty liberal licenses that grant you a plethora of rights
to use, modify and make profit of Grafoscopio and its documentation,
under certains conditions, but I think that documentation and software 
do not need to have the same license, or offer the same rights even in the 
case of Grafoscopio, where  *interactive documentation is closer to being
a form of software*. 

I think that a deeper discusion on licences and the protection and expansion 
of knowledge as a commons is needed and this licenses difference reflect that.
You can see a full copy of both licenses, MIT and P2P, included in the
"Licenses" section of this document.',
							#children : OrderedCollection [ ],
							#parent : @6,
							#level : 2,
							#links : OrderedCollection [
								''
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						''
					]
				},
				@8,
				@10,
				@14,
				@16,
				@20,
				@23,
				@25,
				@28,
				@32,
				GrafoscopioNode {
					#header : 'Grafoscopio for what and for whom?',
					#body : '',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : 'This tool and you',
							#body : '',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : '%idea For what',
									#body : 'Grafoscopio is a moldable tool for literate computing and reproducible
research, developed on [Pharo][pharo] live coding and computing integrated environment, 
in the context of a PhD research in a hacker space of the Global South ([HackBo][hackbo] 
in Bogotá, Colombia), that is being actively used, developed and documented.
We will expand on the points of the previous definition.

  - Being moldable [@moldable-debugger-2014] means that is easy to adapt the tool to several problems,
    which follows the opposite popular path of trying to force several problems into a predefined tool.
    Tools change us. So we need to change them back to express our concerns and to help us 
    in dealing with complex issues and problems in a flexible way.
  - Literate computing [@literate-computing-2015] is a way  of intertwining prose, code, data 
    and visualizations to make data based storytelling, experimentation, exploration and 
    documentation in diverse broad fields like academia, journalism, research and (h)ac(k)tivism.
    Grafoscopio allows the creation of literate computing structured interactive notebooks, that 
    take the form of a tree-like programmable document.
  - Research claims and findings and supporting data and visualizations can be integrated in 
    interactive notebooks with historic traceability, allowing reproducible research.
  - Because of the continuity and uniformity of the Pharo environment [@pbe-2016], Grafoscopio blurs 
    the distinction between code, data, document, application and IDE [^ide] and tries to blur 
    also the distinction between interactive documents authors and software developers. 
  - From the particular context where is being developed (HackBo hackerspace and a PhD research on
    Design and Creation), Grafoscopio is concived as a empowering simple and self contained *pocket
    infrastructure* (that work off-line/on-line  from USB thumb drives and/or low resources machines 
    [@luna-grafoscopio-2014]), wich states a critical approach to exclusionary ideas about data, coding, 
    research, and their practicioners, places, and supporting tools and infrastructures.
    In the [Grafoscopio web page][grafoscopio-en], we showcase several projects aligned with such
    critical approach and the idea that technology is mostly not neutral, wich is also reflected in some parts
    of this text and in the fact that we\'re opinionated about technology and its uses.
    I hope you find our technology and themes choices empowering and reavealing of alternatives.

  [^ide]: IDE: Integrated software Development Environment
',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : '%invisible What is Grafoscopio? Alternative definitions',
											#body : '',
											#children : OrderedCollection [
												GrafoscopioNode {
													#header : 'From the web site',
													#body : 'Grafoscopio is a moldable tool for interactive documentation, exploratory computing, agile data visualization,
and reproducible research, that is being used in several fields: citizen, garage & open science, (h)ac(k)tivism, open & community innovation, domain specific visualization and data journalism, and has a lot of other potential uses. 

Grafoscopio is covered by a Free Libre Open Source Software license (MIT) and it has an associated hackathon/workshop, called the Data Week, oriented to citizen concerns, which are related and mediated by data and visualization. There we learn, adapt and feedback this tool.
Grafoscopio is and integrates simple and self-cointained "pocket infractures", that can be execute On/Off-line, from a USB thumb drive, a rasperry-Pi alike computer, a modest server or any hardware in between and beyond. ',
													#children : OrderedCollection [ ],
													#parent : @42,
													#level : 3,
													#links : OrderedCollection [
														''
													]
												},
												GrafoscopioNode {
													#header : 'From the JOSS article',
													#body : '[Literate computing] [@perez&granger-2015] is a way of intertwining prose, code data and visualizations
to make data based storytelling, experimentation, exploration and documentation in diverse broad fields like academia, journalism, research and (h)ac(k)tivism.
Grafoscopio is moldable tool [@girba_scg:_2014] for literate computing
and reproducible research, and 

agile data visualizations [@bergel-2015], 
in a tree-like interactive document metaphor, 

developed on the [Pharo][pharo] live coding and computing integrated environment. 
Because of the continuity and uniformity of this environment, Grafoscopio blurs 
the distinction between code, data, document, application and IDE and tries to 
blur the distinction between interactive documents authors and software developers 
[@luna-2017]. 

Grafoscopio has been developed in the context of a PhD research in a hackerspace of 
the Global South ([HackBo][hackbo] in Bogotá, Colombia) and from this particular context was
concived as a empowering, simple, flexible and self contained *pocket infrastructure* 
(that works off-line/on-line from USB thumb drives and/or low resources machines [@luna2014]).
',
													#children : OrderedCollection [ ],
													#parent : @42,
													#level : 3,
													#links : OrderedCollection [
														''
													]
												},
												GrafoscopioNode {
													#header : 'From GSoC',
													#body : 'Literate computing is a way of mixing text, code, data and visualizations for making data based storytelling, experimentation, exploration and documentation in diverse broad fields like academia, journalism, research and activism, or Pharo specific themes (for Roasall, Polymath etc). Grafoscopio is a tool that brings literate computing to the Pharo environment by allowing the creation of structured interactive notebooks in a tree-like programmable document metaphor.',
													#children : OrderedCollection [ ],
													#parent : @42,
													#level : 3,
													#links : OrderedCollection [
														''
													]
												}
											],
											#parent : @40,
											#level : 3,
											#links : OrderedCollection [
												''
											]
										}
									],
									#parent : @38,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								},
								GrafoscopioNode {
									#header : '%idea from whom',
									#body : 'Grafoscopio and its companion package, Dataviz, are intended to be used by learners and researchers 
in several fields: academia, journalism, activism, hacktivism and for anyone interested in open reproducible 
research and data storytelling backed by data and agile visualizations [@bergel_agile_2016].
This document assumes that you are such person. 
We will introduce the general features of Grafoscopio and point to several external and internal 
resources to complete your panoramic view of the ecosystem that let you deep your knowledge.

We included introductory resources to learn Pharo and data visualization, 
processing and storage related technologies (see the `Help` menu), and 
the [Grafoscopio web page][grafoscopio-en] (see figure \\ref{fig:web-page-en}) shows several 
examples of how to use them for specific projects: 
Panama Papers as reproducible research; open community innovation in access to medicine 
information; Twitter data selfies; specific domain visualizations for medicine information; 
open, garage and citizen science and research.
*This whole manual was also created using Grafoscopio* and is also an example of the type 
of documents you can create with this tool.
We hope to inspire you to create and publish your own projects.

This document, by not trying to be comprenhensive, is a first invitation to know the 
Grafoscopio environment and to deep your knowledge with the use of it and other related resources.
You will see that, despite of being a manual, it includes pretty practical examples and invitations.
That is because I think that learning something new is more like reading a map
that reading a manual: you make first a panoramic view of where you are and
where you want to be, and take a practical approach to making your tasks and
reaching your destination.

No prior knowledge of programming is supposed to follow this manual.

![ Detail for the Grafoscopio [English web page][grafoscopio-en]. ](../../../Imagenes/grafoscopio-webpage-en.png){#fig:web-page-en}',
									#children : OrderedCollection [ ],
									#parent : @38,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								},
								GrafoscopioNode {
									#header : '%idea TBD',
									#body : '**Important note** `>` *A prototype pointing to future possibilites* | 
Despite of being pretty usable, you will see that Grafoscopio is not totally finished,
and this shows in a few spots of the Graphical User Interface (GUI) that "point to the future", towards
funtionality still to be implemented.
It\'s an unusual approach, but I think that is important to convey some sense of possibility,
and work to be done in the GUI, instead of a fully polished "product" or a GUI that hides what is not ready.
This conviction comes from the [hackathons and workshops][dataweek] where we worked and evolved 
Grafoscopio, while the workshop was happening(!), thanks to the dynamic, moldable and continuous nature 
of the Pharo live coding environment.
Blurring the distinction between interactive documents authors and software developers, means to put
the whole environment at their dispossal, and to show the community that they can be part of this 
future possibilities, and that is why we take this unusual approach to GUI.

Where the GUI is more a remainder for the future, I will point that using the **TBD** remark (for To Be Done).',
									#children : OrderedCollection [ ],
									#parent : @38,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								}
							],
							#parent : @36,
							#level : 2,
							#links : OrderedCollection [
								''
							]
						},
						GrafoscopioNode {
							#header : 'Place in the ecosystem',
							#body : '',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : 'Similar tools',
									#body : 'Grafoscopio is similar to other tools and has been inspired by many
of them, while is trying to bring also new possibilities, by combining
different ideas, diverging from others, puting "parallel" ideas into
dialog and, hopefully, bringing new ones. 
Here we talk about the similarities and differences with other tools.

  - Like [Jupyter][jupyter],  or [Zeppling][zeppling], [Beaker][beaker] 
    or [nteract][nteract], Grafoscopio provides interactive notebook functionality, 
    but it is focused only on Pharo code right now, instead of being a 
    "language neutral" notebook (but this could be a feature for the future)
    and is able to use Pharo bindings to integrate and communicate with other data
    languages, like [R][r-lang], [SQL][sql] or [J][j-lang].
    Grafoscopio is a multiplatform (Mac, Windows, Gnu/Linux) desktop 
    application (like nteract, or Electron Beaker),  instead of a web one 
    (like Jupyter, Zepelling or Beaker), providing a simple, extensible, 
    powerful, self-contained and portable environment for interactive computing, 
    (as said it can run from a USB thumb drive, modest computers
    and anything in between and beyond).
  - Grafoscopio organizes documents in a tree like metaphor, also called the *outline*, or the 
    notebook, that is interactive and programmable, like [Org Mode][org-mode], [Leo Editor][leo], 
    [TeXmacs][texmacs] or [Pollen][pollen] and share with them the idea that the 
    "document is the program"[^book-program] (or a programable container 
    of small  chunks of programs and scripts).
    Also, the document author, can define custom tags that can be used to traverse the 
    document tree and produce multiple customized views and outputs from a single document.
    A single notebook can contain short or book size interactive documents
    (this full manual is in a single Grafoscopio notebook). 
  - Like [Jupyter Lab][jupyterlab], Grafoscopio environment supports needs beyond the notebook. 
    Grafoscopio achieves this by leveraging the advantange of the extensible Pharo computing 
    environment and ecosystem, where it inhabits, with powerful tools for several computing taks, beyond
    and complementary to interactive documentation and reproducible research: GUI bulding, data processing 
    and visualization, unit testing, code repositories and source management, among others.
    It could be said that Jupyter Lab and Grafoscopio followed opposite paths, the first started in the Jupyter notebook,
    and is trying to become and IDE, and the second started in the Pharo live coding IDE and it bringing interactive
    notebooks functionality. In some sense, one is already in the future of what the other can be.
  - Grafoscopio uses the [Roassal agile visualization engine][roassal], to build interactive 
    visualizations and export them to the web.
    Roassal provides similar functionality to other visualization engines and toolkits like [D3.js][d3js], 
    [RaphaelJS][raphaeljs], [Processing][processing] or [Flare][flare], but, by being part of the Pharo 
    live coding  environment, it invites to a more explorative and dynamic building of visualizations in 
    an agile way.
  -  At the moment, notebook sharing, collaboration and publishing in print (PDF) and web (HTML) formats 
    is supported, but in the future we hope to provide advanced interactive notebook publishing 
    features in a distributed p2p fashion (see next section for the techologies that enable this).
',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : '%footnote book-program',
											#body : 'The idea of the "document is a program" is a paraphrasis of "the book is a program",
stated in the Pollen documentation, which is a short phrase to express a powerful idea
about burring the disctinction between the document and the program, that is present 
in several programs, like TeXmacs, Leo, Org Mode, and, of course, Grafoscopio.',
											#children : OrderedCollection [ ],
											#parent : @64,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										}
									],
									#parent : @62,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Technologies behind',
									#body : 'Grafoscopio tries to become a simple, understandable, moldable, 
versatile and flexible tool thanks to the power of [Pharo][pharo] 
environment and ecosystem and the combination with mature external 
and internal frameworks and tools. It uses: 

  -  Internal tools and frameworks:
    - [GT Tools][gt-tools] and [Spec][spec] for embeddable code playgrounds, GUI and interactive 
      notebook nodes.
    - [Roassal][roassal] for data visualization.
    - [STON][ston] for a light data storage and a human friendly notebooks format.
    - [NeoJSON][neojson] for interacting with structured hierarchical [JSON][json] data.
    - [Citezen][citezen]: for reading and exporting bibliographies to the [BibTeX][bibtex] format.
    - [Fuel][fuel]: For medium data storage and objects serialization.
    - [UDBC][udbc]: For connection and management of external data bases.
  - External tools and frameworks:
    - [Fossil SCM][fossil] for collaboration, publication and traceability of the documents history 
      (including this very manual).
    - [Pandoc][pandoc] for exporting to printing (PDF) and web (HTML) formats.
    - [SQLite][sqlite] for storage and management of tabular data, for the `Dataviz` companion package.

Despite of trying to provide a friendly, cohesive and empowering user experience (UX) by
integrating default external minimalist and/or self-contained tools into the data exploration 
and document publishing workflow, other external tools could be integrated ([Git][git], 
more data bases, including [NoSQL][nosql], other exporters and 
[light markup languages][light-markup-languages] and so on). 

',
									#children : OrderedCollection [ ],
									#parent : @62,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								}
							],
							#parent : @36,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								''
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						''
					]
				},
				@38,
				@40,
				@42,
				@44,
				@47,
				@50,
				@55,
				@58,
				@62,
				@64,
				@66,
				@70,
				GrafoscopioNode {
					#header : 'Installation instructions',
					#body : 'If you want to install Grafoscopio on Pharo 5, there are two ways of doing:
via the Pharo catalog or via running a script from the playground.
Both suppose that you have already installed and running Pharo for your platform
(Windows, Gnu/Linux or Mac) from its [download page][pharo-download],
and will be explained below, from the easiest one to the far easy ones.
Also both of them use the Monticello package manager, so dependencies are
managed automatically for you, making the procedures really short, even for
the script based one.

Different install procedures suit different tastes and needs and bring alternatives,
so, if one doesn\'t work for you or your need/taste, you can try others, or just
leave it like that, if your chosen method worked.

',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : 'Install from the Pharo catalog',
							#body : 'To install Grafoscopio, from Internet in Pharo 5, follow this steps:

1. Open the spotter (`Shift` + `Enter`) and start to write the first letters of "Grafoscopio" (without the quotes).
  The spoter will show that it is available in the projects Catalog as shown in the figure \\ref{fig:install-screen1}.

  ![ Install screen 1 | Finding Grafoscopio in the projects Catalog. ](../../../Imagenes/Install/spotter-grafos-first-launch.png){#fig:install-screen1}

2. Click with the mouse or move with the keyboard to select the "Grafoscopio" package showed.
    A install question as the following will be shown (see figure \\ref{fig:install-screen2} ). 
    Select "Yes" to start the installation process.

  ![ Install screen 2 | Install question. ](../../../Imagenes/Install/install-question.png){#fig:install-screen2 width="50%"}

3. While the installation is running, some progress bars with package names are going to be showed
  (see figure \\ref{fig:install-screen3}):

 ![ Install screen 3 | Installation progress bars. ](../../../Imagenes/Install/progress-bar.png){#fig:install-screen3}

4. When the installation ends we will see two indicators (as shown in figure \\ref{fig:install-screen4}):
  - Messages in the lower left corner telling that installation is complete and documentation is installed.
  - A tool bar in the upper side of the Pharo window, called the docking bar.

  ![ Install screen 4 | Installation ended. ](../../../Imagenes/Install/install-ended.png){#fig:install-screen4}

5. Once we have Grafoscopio installed, we save modifications to our computing environment, by making 
  click in any clean part of the GUI (not occupied by any window) to deploy the *World Menu*.
  There we choose `Save`, to save the system with the same name, or `Save as` to save it with a new one
  (see figure \\ref{fig:install-screen5}).

  ![ Install screen 5 | Saving changes via the World Menu. ](../../../Imagenes/Install/save-menu.png){#fig:install-screen5 width="50%"}',
							#children : OrderedCollection [ ],
							#parent : @75,
							#level : 2,
							#links : OrderedCollection [
								''
							]
						},
						GrafoscopioNode {
							#header : 'Install from a script',
							#body : 'There are two ways of running scripts in the Pharo environment:
one by importing them from Internet and the other by writing them
manually.

If you want to run a Pharo script from its web address, open the spotter
(`Shift + Enter`) and paste the address and then press `Enter` to open
the interactive *playground* and finally press the `Do it and go` green play 
button or its shorcut (`Ctrl + Shift + g`). 
(An empty *playground*  and its play button are showed in  figure
\\ref{fig:empty-playground})

![ Empty *playground* and its play button. ](../../../Imagenes/Install/empty-playground-1.png){#fig:empty-playground}',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : '%idea in two steps',
									#body : 'For example, if you want to run the first part of the install script, open the
spotter and paste this address <http://ws.stfx.eu/BMWZPUY38BSF>.
You will see a screenshot similar to figure \\ref{fig:install-script-part1},
showing the web address you have pasted and the first lines of the script
below, marked in grey. 

![ Loading the install configuration package. ](../../../Imagenes/Install/install-script-part1.png){#fig:install-script-part1} 

Press `Enter` or select with the mouse the area with the grey background. 
You will see the interactive playground with the script loaded.
We will see more details about the playground later.
For the moment press the play button or the shorcut (`Ctrl + Shift + g`).
You will see that the playground has been executed.
An executed playground contains a new column with details of the object
resulting from that execution, as shown in figure \\ref{fig:executed-playground}.

![ Executed playground. ](../../../Imagenes/Install/executed-playground.png){#fig:executed-playground} 

Now repeat the procedure, opening the spotter, pasting this url <http://ws.stfx.eu/CZ87ZZ2SXCEM> 
and executing the second part of the installation script (showed in figure \\ref{fig:install-script-part2}).

![ Loading Grafoscopio. ](../../../Imagenes/Install/install-script-part2.png){#fig:install-script-part2}

You will see the progress bars and the ending of the installation process,
as described in the steps 4 to 5 of the previous section.',
									#children : OrderedCollection [ ],
									#parent : @80,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								},
								GrafoscopioNode {
									#header : '%idea In one step',
									#body : 'Is usual to run the previous two steps in a single playground, by executing parts of it.
Here we are going to show you how to do it, with the same installation example we
have done so far.
Open a playground (`Ctrl` + `o` + `w`) and write this (or paste the URL of 
[this playground](http://ws.stfx.eu/D6DDTUAMWIOK), in the spotter, as before):

%embed Grafoscopio single quick install script

Now select with the mouse the first 5 lines of the script and make click with the mouse 
secondary button. A contextual menu will be show near to the selection, as shown in the figure 
\\ref{fig:playground-partial-execution}.
Choose from that menu the `Do it and go` option (or press the `Ctrl + g`  keyboard combination).
Only the selected part of the script will be executed.

![ Selecting the script part that will be executed and deploying the contextual menu. ](../../../Imagenes/Install/playground-partial-execution.png){#fig:playground-partial-execution}

![ Executing the second part of the script. ](../../../Imagenes/Install/playground-partial-execution2.png){#fig:playground-partial-execution2}
 
Now select the second part of the script, the last two lines, as shown in figure 
\\ref{fig:playground-partial-execution2} and repeat the previous procedure.
You will see the progress bars and the ending of the installation process,
as described in the steps 4 to 5 of the previous section.',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : '%embed Grafoscopio single quick install script',
											#body : '"Start by loading the configuration of Grafoscopio"
  Gofer new
    url: \'http://smalltalkhub.com/mc/Pharo/MetaRepoForPharo50/main\';
    package: \'ConfigurationOfGrafoscopio\';
  load.

"After that load Grafoscopio"
ConfigurationOfGrafoscopio load.
',
											#tags : 'código',
											#children : OrderedCollection [ ],
											#parent : @85,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'http://ws.stfx.eu/D6DDTUAMWIOK'
											]
										}
									],
									#parent : @80,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								},
								GrafoscopioNode {
									#header : '%invisible',
									#body : '',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : 'Instaliing the Grafoscopio configuration',
											#body : '"Start by loading the configuration of Grafoscopio"
  Gofer new
    url: \'http://smalltalkhub.com/mc/Pharo/MetaRepoForPharo50/main\';
    package: \'ConfigurationOfGrafoscopio\';
  load.
',
											#tags : 'código',
											#children : OrderedCollection [ ],
											#parent : @91,
											#level : 4,
											#links : OrderedCollection [
												'',
												'http://ws.stfx.eu/BMWZPUY38BSF'
											]
										},
										GrafoscopioNode {
											#header : 'Load Grafoscopio',
											#body : '"After that load Grafoscopio"
ConfigurationOfGrafoscopio load.
',
											#tags : 'código',
											#children : OrderedCollection [ ],
											#parent : @91,
											#level : 4,
											#links : OrderedCollection [
												'',
												'http://ws.stfx.eu/CZ87ZZ2SXCEM'
											]
										}
									],
									#parent : @80,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								}
							],
							#parent : @75,
							#level : 2,
							#links : OrderedCollection [
								''
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						''
					]
				},
				@77,
				@80,
				@82,
				@85,
				@87,
				@91,
				@93,
				@96,
				GrafoscopioNode {
					#header : 'Using Grafoscopio',
					#body : 'This section will show you how to use Grafoscopio from the GUI.',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : 'The spotter',
							#body : 'One of the first elements of the Pharo GUI that is an excellent companion
for Grafoscopio is the [spotter][spotter], provided by the GT Toolkit.
It is a quick finder and laucher of system functionality and behaviour, 
allowing you to launch and execute scripts, browse the system, and find
code, among other uses.
Spotter and playgrounds (using before to install Grafoscopio) are a good 
entry points to deep in the system.
We will use them progressively and you will learn more on how to use them,
as you use the interactive documentation provided with Grafoscopio and the
Dataviz package.

To launch the spotter press `Shift` + `Enter` in Pharo. You will see something like the
figure \\ref{fig:spotter}:

![ The spotter. ](../../../Imagenes/spotter.png){#fig:spotter}

You can learn more about the spotter in the [Pharo MOOC][mooc] [^mooc],
particularly in lesson 9 of Week 3 ([video 1][mooc-spotter1], [video 2][mooc-spotter2]).',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : '%footnote mooc',
									#body : 'MOOC stands for Massive Online Open Courseware.
The Pharo MOOC is excellent and a really good entry point for programmers
wating to learn more about Pharo and live coding.
It also provides good complementary information if you come for other disciplines
and endeavors and want to complement your reproducible research, modelling,
data storytelling and visualization, with solid foundations of the Pharo environment,
but it presumes familiary with programming.
For an introductory book to object oriented programming, using the Pharo environment,
look for the upcomming release of Learning Object-OrientedProgramming, Design and 
TDDwith Pharo (vol I) [@oop-pharo-2017] (beta version [here][oop-pharo-2017]).',
									#children : OrderedCollection [ ],
									#parent : @104,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								}
							],
							#parent : @102,
							#level : 2,
							#links : OrderedCollection [
								''
							]
						},
						GrafoscopioNode {
							#header : 'The docking bar',
							#body : 'The *docking bar* is a fixed point in the graphical interface for quick access to certain
functionalities, located at the top side of the Pharo main window see figure \\ref{fig:docking-bar}.

![ The docking bar. ](../../../Imagenes/DockingBar/docking-bar1.png){#fig:docking-bar}

The docking bar is divided in three menus that are explained below.',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : 'Launch menu',
									#body : 'This menu allows the creation of new notebooks and the opening of recent ones.
Also it allows to launch *playgrounds* for writing  scripts and code snippets and 
*Transcripts* to see logs of the system.
Figure \\ref{fig:launch-menu} shows the `Launch` menu.

![ The launch menu. ](../../../Imagenes/DockingBar/launch-menu.png){#fig:launch-menu width="50%"}

This are the options in the Update menu:

  - `New notebook`: Creates a new notebook.
  - `Notebook from file...`: opens a pre-existing notebook from a local file.
  - `Notebook from internet...`: opens a notebook from an URL and creates a local copy in the 
    temporal folder.
  - `Recent notebooks...`: lists the notebooks that have been recently opened and/or saved.
  - `Example notebooks...`: (**TBD**) Lists a set of example notebooks (may be integrated in the
    `Help ̀ menu).
  - `Roassal visualizations gallery...`: Opens a visualization browser grouped by categories. Useful 
    as starting point and inspirations for some projects.
  - `Playground`: Opens an interactive coding scripting environment, with single "pages". 
    Playgrounds are also embeddable inside Grafoscopio notebooks.
  - `Transcript`: opens an output window to see log of events or see print messages.',
									#children : OrderedCollection [ ],
									#parent : @110,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Update menu',
									#body : 'This menu updates functionality, documentation and settings for Grafoscopio.
Grafoscopio has a [rolling release][rolling-release] model, so continuous updates 
in functionality and documentation, come after the version packaged with the default installation.
The updates frequency increases with our [Data Week][dataweek] hackathon-workshop, seminars, 
and other community events, so is good to go the update menu regularly. 
Figure \\ref{fig:update-menu} shows the `Update` menu.

![ The update menu. ](../../../Imagenes/DockingBar/update-menu.png){#fig:update-menu width="50%"}

This are the options in the Update menu:

  - `Grafoscopio`: Updates Grafoscopio to the latest development version from the repository.
  - `Documentation`: Updates  companion documentation, that comes as native notebooks or in 
    exported formats (PDF now and HTML in the future).
  - `Dataviz Package`: Updates the Dataviz companion package, which contains Domain Specific 
    Languages and Visualizations that are introduced as Grafoscopio notebooks.
    A companion notebook about this package is available on the Help menu, for more detailed 
    information.
  - `Notebooks places`: Updates some globally shared references for notebooks, so they can be 
    adapted to personal preferences.
    This is useful for workshops, so participants can still store some notebooks in their preferred 
    locations, while sharing relative routes. Examples of this functionality can be found in the Dataviz 
    package notebooks documentation.
  - `All the system`: Updates all of the above, except for the "Notebooks places", without going for 
    any individual menu.',
									#children : OrderedCollection [ ],
									#parent : @110,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Help menu',
									#body : 'The Help menu contains mostly references to interactive notebooks that teach
or exemplify how to use Grafoscopio or the core technologies behind (Pharo tutorial,
Roassal, STON, etc). 
They are installed with Grafoscopio in native format and some are in PDF, like this manual.
Figure \\ref{fig:help-menu} shows the `Help` menu.

![ The help menu. ](../../../Imagenes/DockingBar/help-menu.png){#fig:help-menu width="50%"}

We have followed a local first approach for the Grafoscopio development, which implies that
most of the documentation is writen for the local context first and in Spanish.
The Grafoscopio Manual is the first English "formal" document (besides blog post and constant 
communication with the international Pharo communities that are in English).
Because the GUI is in English now (it was in Spanish at the begining), we indicate when a 
`Help` document is in Spanish.
In the future we would like to have multilingual documentation, with a bigger team and community to
work on this issues. And of course you\'re already invited to be part of it.

This are the options in the Help menu:

  - `Tutorial (Spanish)`: Opens a tutorial used for the [Data Week][dataweek] hackathon/workshop, that
     advances in increasding difficulty, covering the Pharo introductory tutorial (Prof. Steph), 
     some simple scripts, reading of structured data (in JSON), building of a first package (Cinemania),
     HTML templating and programatic generation (via Mustache) and basic web publishing (via Teapot).
     (For a more detailed view of the contents, you\'re welcomed to explore the tutorial by yourself).
  - `Manual`: Opens this manual as a Grafoscopio native document.
  - `Manual (PDF)`: Opens this manual, exported as PDF.
  - `Dev\'s notes`: Opens a notebook with notes from the developer. Useful to know what is happening
    with the development process and where is going and is complementary to other development
    infrastructures, like code, docs and issues repositories (provided by SmalltalkHub and Fossil).
  - `About Grafoscopio`: Opens the "About" window, showing contributors and the software version.
',
									#children : OrderedCollection [ ],
									#parent : @110,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								}
							],
							#parent : @102,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								''
							]
						},
						GrafoscopioNode {
							#header : 'The notebook GUI',
							#body : 'The notebook GUI is composed of tree main parts (as showed in figure \\ref{fig:new-notebook}):

  1. The top bar
  2. The document tree
  3. The node details

Each of these sections will be detailed below.',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : 'Creating a new notebook',
									#body : 'To create a new notebook you have several options:

  - Choose `Launch > New notebook`, from the *docking bar*.
  - Open a *playground* (`Ctrl + o + w`) and write  `GrafoscopioNotebook new openDefault`.

You will see a window like the shown in figure \\ref{fig:new-notebook}.

![ A new Grafoscopio notebook. ](../../../Imagenes/Notebook/new-notebook1.png){#fig:new-notebook}

Next section will explain the functionality of the notebook GUI.',
									#children : OrderedCollection [ ],
									#parent : @122,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'The top bar',
									#body : 'The top bar groups funtionality to save, export and edit the document tree and associate it to related 
assets, that form projects.

This is the detailed information.',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : 'The notebook menu',
											#body : 'Allows the creation new notebooks and their exportation to external formats.
Figure \\ref{fig:notebook-menu}, shows this menu, when the notebook button is clicked.

![ The notebook menu. ](../../../Imagenes/Notebook/notebook-menu.png){#fig:notebook-menu}

These are the options of this menu:

  - `Save`: Saves the notebook to the filesystem. If no filename has been provided, asks for one.
  - `Save as...`: Saves the notebook to the filesyste under a new name.
  - `Export as markdown`: Exports the current notebook to [Pandoc\'s markdown][markdown]. 
  - `Export as html`: Exports the current notebook to HTML format.
  - `Export as pdf`: Exports the current notebook to HTML format.
  - `See html`: (**TBD**) Shows the exported HTML document.
  - `See pdf`: (**TBD**) Shows the exported PDF document.

See  the "Exporting" section for details about exporting and the pandoc prerrequisites to make it work.',
											#children : OrderedCollection [ ],
											#parent : @127,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												''
											]
										},
										GrafoscopioNode {
											#header : 'The project menu (TBD)',
											#body : 'A project is a Grafoscopio notebook with the related files to produce particular outputs
from it, including data files, HTML and LaTeX templates or other notebooks.
A project tracks the historical changes on such files, allows collaboration between collective
authors, exploring or unifying work variations (what is called branching and merging) and let 
the profreaders or audience made suggestions (via ticketing).
Projects can be published on the web, providing reproducibility and increasing transparency to
research claims.

Project functionality is provided in Grafoscopio thanks to the [Fossil SCM][fossil] (SCM stands for
Software Configuration Manager and sometimes is called Distributed Control Version System or DVCS),
a simple and self-contained software for asynchronous collaboration with a pretty small footprint 
(~2 Mb in size for all its functionality), available for major platforms, and providing truly distributed
project management features (source file management, wiki, ticketing).
Fossil is similar to [Git][git] or [GitHub][github], but it is simpler that the former and does not hide 
functionality under closed source code software or promotes centralization, like the later[^github-alternatives].

Despite of not being integrated yet, several projects have been done using the Grafoscopio + Fossil combination. 
For example, Grafoscopio uses Fossil as backend for its documentation and reporting issues and
uses the Fossil JSON Application Programming Interface (API) to query documention and update it to the
last versions.
',
											#children : OrderedCollection [
												GrafoscopioNode {
													#header : '%footnote github-alternatives',
													#body : 'There are several alternatives to GitHub that provide a sleek and friendly
web user interface (WUI), without complicated overheat, following
the same spirit of Fossil, but based on git.
Checkout [Gogs][gogs], for a self hosted and easy to install git 
based source code management system.',
													#children : OrderedCollection [ ],
													#parent : @132,
													#level : 5,
													#links : OrderedCollection [
														''
													]
												}
											],
											#parent : @127,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												''
											]
										},
										GrafoscopioNode {
											#header : 'The toolbar',
											#body : 'The toolbar provides a series of icons to access frequently used functionality, organized by groups.
In the future this functionality will be accessible also via keyboard shorcuts.
Figure \\ref{fig:toolbar} shows the toolbar.

![ The toolbar. ](../../../Imagenes/Notebook/toolbar.png){#fig:toolbar}

Here is a more detailed explanation of the icons functionality in the toolbar.',
											#children : OrderedCollection [
												GrafoscopioNode {
													#header : 'Notebook saving and node cut, copy & paste',
													#body : '  - ![](../../../Imagenes/Notebook/icon-save.png): Saves the current notebook.
  - ![](../../../Imagenes/Notebook/icon-cut.png): Cuts the current node of the document tree.
  - ![](../../../Imagenes/Notebook/icon-copy.png): Copies the current node of the document tree to the 
    clipboard.
  - ![](../../../Imagenes/Notebook/icon-paste.png): Pastes the current node of the document tree from the
    clipboard.',
													#children : OrderedCollection [ ],
													#parent : @138,
													#level : 5,
													#links : OrderedCollection [
														'',
														'',
														'',
														'',
														'',
														'',
														'',
														'',
														'',
														''
													]
												},
												GrafoscopioNode {
													#header : 'Node addition, deletion and movement',
													#body : 'This operations edit the document tree. 
You are invited to experiment with them in the new notebook already created, to make more sense
of this operations.

  - ![](../../../Imagenes/Notebook/icon-add.png): Adds a new node to the tree after the 
    currently selected one.
  - ![](../../../Imagenes/Notebook/icon-delete.png): Removes the currently selected node.
  - ![](../../../Imagenes/Notebook/icon-up.png): Moves the currently selected node one place upward, 
    unless is the first node.
  - ![](../../../Imagenes/Notebook/icon-down.png): Moves the currently selected node one place 
    downward, unless is the last node.
  - ![](../../../Imagenes/Notebook/icon-left.png): Promotes the currently selected node one place, to 
    the same level of its parent.
  - ![](../../../Imagenes/Notebook/icon-right.png): Demotes the currently selected node one place, making 
    it child of the previous slibing.',
													#children : OrderedCollection [ ],
													#parent : @138,
													#level : 5,
													#links : OrderedCollection [
														'',
														'',
														'',
														'',
														'',
														'',
														'',
														''
													]
												},
												GrafoscopioNode {
													#header : 'Switching node body, visiting links, updating content and adding tags',
													#body : 'There are two kinds of  nodes in Grafoscopio now: text nodes and code nodes.
This could change in the future, providing special nodes as particular handlers and viewers
for particular content (images, audio, video, and so on).
But with the simple combination of this two kinds of nodes, complete and complex interactive 
documents can be created already, and complemented with the dynamic and inmersive Pharo ecosystem.
Text nodes are writen in pandoc\'s markdown, with support to embedding images, bibliographic
references and all the features provided by this simple, mature and extensible markup language.
Code nodes are interactive playgrounds of Pharo code, allowing to dive into different objects,
and integrated with the Roassal agile visualization toolkit.
 
  - ![](../../../Imagenes/Notebook/icon-code.png): switches a node from text to code and viceversa.
    Because literate computing, weaves code and text, emphasizing narrative and storytelling 
    supported by data, the default nodes are textual ones.
  - ![](../../../Imagenes/Notebook/icon-go.png): visits a node link, opening it in the web browser, 
    if it is not empty (see node details for more information about node links).
  - ![](../../../Imagenes/Notebook/icon-sync.png): updates node body acording to the node last link, which
    is useful for published playgrounds.
    In the future this icon will sync body contents with different type of links, including those pointing to
    [etherpads][etherpad] or local and remote files.
  - ![](../../../Imagenes/Notebook/icon-tag.png) ![](../../../Imagenes/Notebook/icon-untag.png):
    the add/remove tags icons  will be used to define custom tags to mark nodes (**TBD**).
    Custom tags can be used to define node traversal paths to create different outputs from a single   
    notebook (in a similar way to `%keywords` as is explained after).',
													#children : OrderedCollection [ ],
													#parent : @138,
													#level : 5,
													#links : OrderedCollection [
														'',
														'',
														'',
														'',
														'',
														'',
														'',
														'',
														'',
														'',
														'',
														''
													]
												}
											],
											#parent : @127,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												''
											]
										}
									],
									#parent : @122,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'The document tree',
									#body : 'The document tree is the place where the whole document is shown
and provides a uniform metaphor to organize the work.
It is at the left of the Grafosocopio Notebook GUI.
This part will introduce the document tree and some vocabulary to be used with it.

The tree metaphor provides sequence and hierarchy to the document
and its parts and is composed by nodes.
Nodes have tree kinds of possible basic relationships: parent, child and sibling,
which are represented visually for the indentation level of the nodes.
We\'ll use this visual metaphor to introduce this relationships.
The nodes indented inmediately at the right of other are called the children of the
node at the left, and, converserly, the node at the left is said to be the parent of the
nodes at the right.
Nodes at the same indentation level are siblings, sharing the same parent.
If a node has children, it will show an arrow head at the left.
if the arrow is pointing right, the node is collapsed meaning is not showing
its children.
If the arrow is pointing down, the node is expanded, meaning that is shown them.
(see figure below).

Finally, If a node A is parent of a node B, which is parent of a node C, then A is said to be
an ancestor of C and C is said to be a sucessor of A.',
									#children : OrderedCollection [ ],
									#parent : @122,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Node details',
									#body : 'As we said, documents are composed by nodes organized in trees.
The node has tree parts: header, body and links.
We will explain the detailed composition of a node below.',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : 'Node header',
											#body : 'The node header is a short text (one line) that summarizes the purpose or content of the node.
The header is shown in two places, in the document tree (for navigation) and at the top of the 
node details, as a text field, for edition.
Once the node header has been edited a color mark will be shown near the upper right corner
of the text field box.
This is known as a dirty marker.
To update the header in the document tree press `Ctrl + s` ( in Windows or Linux) or `Cmd + s` (Mac).
',
											#children : OrderedCollection [ ],
											#parent : @154,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												''
											]
										},
										GrafoscopioNode {
											#header : 'Node body',
											#body : 'The node body contains more extense information for the node and can
take several lines of text or code.
Node body is located inmediatly below the node header text input.
Node body is saved automatically with each keystroke, and takes advantage of the
build in persistance for all Pharo objects (called image persistance), but if you want
to update the notebook contents to the file system you will need to save
the notebook explicitely, by pressing the save button in the top bar or chosing the
save option in the  `Notebook menu`.',
											#children : OrderedCollection [ ],
											#parent : @154,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												''
											]
										},
										GrafoscopioNode {
											#header : 'Node links',
											#body : 'Node links store links to web references.
Sometimes when you\'re making quick outlines, you need
to organice external web references and have an easy way to visit them.
That\'s the primary functionality for node links.
If a node contains a valid link URL in the node links, you can visit them, by
pressing the blue arrow icon ![](../../../Imagenes/Notebook/icon-go.png), 
which will open the default web browser in such link.
The node links behave in a similar way to headers and the modificacions are saved 
explicitly by pressing `Ctrl + s` (Gnu/Linux, Windows) or `Cmd + s` (Mac).

In the future node links will behave in smarter ways, storing, for example, the history
of shared playgrounds for code nodes, paths to the file system to export subtrees of a
document. Web browsing is just the begining.',
											#children : OrderedCollection [ ],
											#parent : @154,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												'',
												'http://mutabit.com'
											]
										}
									],
									#parent : @122,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'More on code nodes',
									#body : 'Code nodes are at the core experience of the interactive documentation,
exploratory computing, reproducible research and literate computing.
Code nodes are full Pharo interactive playgrounds embedded inside the
Grafoscopio notebook, with full functionality, including interactive inspectors,
to dive into the objects, including graphical capabilities.
We use extensively code nodes in our [Data Week][dataweek] workshops,
in conjunction with the integrated Monticello DVCS, to share code in agile 
fashion and prototype ideas quickly.
Here is a more detailed view of how to use code nodes.',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : 'Executing',
											#body : 'Once a node has been defined as code 
(by pressing the ![](../../../Imagenes/Notebook/icon-code.png) button),
you will see a playground page inside the node body, with custom buttons
for its functionality, as seen in figure \\ref{fig:code-node-emty}.

![ An empty code node. ](../../../Imagenes/Notebook/code-node-empty.png){#fig:code-node-emty}

This code node is a fully functional Pharo playground. 
You can write Pharo code there and execute it totally or partially, as we have seen already on the 
Grafoscopio script  installing method.
If you used the Pharo catalog method, take a short look on how to execute playgrounds
partially or totally and the keyboard shorcuts.

Just to remember and practice, create a new code node and write this: 

%embed connecting numbers

Then press the green play button ![](../../../Imagenes/Notebook/icon-play.png)
(or its shorcut `Ctrl + g`) and you will see something like the figure \\ref{fig:code-node-executed}:

![ Executed code node. ](../../../Imagenes/Notebook/code-node-executed.png){#fig:code-node-executed}

What we have done is a small visualization (taken from the 
[Agile Visualization quick start][agileviz-quickstart]) that connects each number from 1 to 100 with
the [floor][floor-function] of its half (so, the numbers 18 and 19 are connected to 9, for example), 
and we put this visualization as an interactive code node of our notebook.
You can find more examples of interactive notebooks in the `Help` menu and create your own
on several topics.',
											#children : OrderedCollection [
												GrafoscopioNode {
													#header : '%embed connecting numbers',
													#body : 'b := RTMondrian new.
b shape label.
b nodes: (1 to: 100).
b edges connectFrom: [ :i | i // 2 ].
b layout cluster.
b',
													#tags : 'código',
													#children : OrderedCollection [ ],
													#parent : @168,
													#level : 5,
													#links : OrderedCollection [
														''
													]
												}
											],
											#parent : @166,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												''
											]
										},
										GrafoscopioNode {
											#header : 'Sharing',
											#body : 'To share a code node, click the "publish" button in the playground page
![](../../../Imagenes/Notebook/icon-publish.png), that is just at the right of the play button.
A question window will be open asking to confirm your publication
(see figure \\ref{fig:playground-publish-question}).

![ Publishing confirmation question. ](../../../Imagenes/Notebook/playground-publish-question.png){#fig:playground-publish-question width="50%"}

Once you accept to share your playround contents, a notification popup
will be shown, telling the web address (URL) of your published playground and will be
automatically copied to the system\'s clipboard (see figure \\ref{fig:notification-published}), so it can 
be easily pasted in mails and other messages.

![ Publishing notification in the bottom left corner of the Pharo window. ](../../../Imagenes/Notebook/notification-published.png){#fig:notification-published}

Playground publications hosting services is generously provided by Sven
Van Caekenberghe (also, he is the author of the superb STON format and 
NeoJSON importers, used in Grafoscopio and the Dataviz companion package).
It is something like a [pastebin][pastebin] for Pharo code and a pretty convenient
way of sharing small snippets of functionality in Grafoscopio.
We use it continuously on our Data Week hackathon/workshops.',
											#children : OrderedCollection [ ],
											#parent : @166,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												''
											]
										},
										GrafoscopioNode {
											#header : 'Importing',
											#body : 'The previous topic show you how to share code nodes from the notebook to the web. 
This one shows how to import them from the web to your notebooks.
For this, the only thing you need to do is to paste the web URL for published playground
in the node links section and press enter.
The node will become a playground with the contents imported from the web.

We use this feature extensively for our workshops/hackathons and in fact was inspired
by them.
Usually we have a set of [etherpads][etherpad] to write quick notes collaboratively in
real time by the event participants and we put there the links of the shared playgrounds,
to be imported in Grafoscopio notebooks.

In the future the node links could show the history of the shared playgrounds and its transformations.

',
											#children : OrderedCollection [ ],
											#parent : @166,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												'',
												'',
												''
											]
										},
										GrafoscopioNode {
											#header : 'Diving on results',
											#body : 'Code nodes are fully functional playgrounds, as we have said.
So you can use the full functionality of them to dive into the objects
resulting from a code execution.
By executing the playground, you not only see the results, but also
a customized inspector (provided by the GT-Tools) that allows to
see the attributes of the object or query them.

Several customized tabs are shown according to the execution
in the playground and can be extended and adapted further.

Some of the most used tabs are:

  - `Raw`: Shows the attributes of the object resulting from the 
    playgrounds execution. 
    Those attributes are also objects, so you can dive into them.
    Once you have selected an object, a faceted browsing will start
    opening a new set of tabs zooming into this particular object.
    The lower panel of the raw view, can be used to send messages to 
    the main object, or the objects that compose it.
  - `Meta`: Shows the objects hierarchy starting with the one resulting
    from the playgrounds execution and ascending in the containing classes.
    Is pretty useful to have a quick overview of which is the vocabulary of the 
    object, wich messages can be send and how they\'re organized (protocols) 
    and implemented.

For example, click on any number in the last visualization we have been using
in our code node. A new tab will be open, showing more details of that number. 
Then click on the `Meta` tab and select `SmallInteger`. 
You will see something like the figure \\ref{fig:code-node-inspector}.

![ Diving on code node results using the playground inspector. ](../../../Imagenes/Notebook/code-node-inspector.png){#fig:code-node-inspector}

To know more about playgrounds and how they can be used and extended
vistit the [GT-Tools page][gt-tools].',
											#children : OrderedCollection [ ],
											#parent : @166,
											#level : 4,
											#links : OrderedCollection [
												'',
												'',
												'',
												'',
												'',
												''
											]
										}
									],
									#parent : @122,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Extending the markup: `%keywords`',
									#body : 'Grafoscopio traverses the notebook\'s document tree to export it to Pandoc\'s markdown.
Once it is in this format you can customize the output using the rich Pandoc options, adding
templates, changing bibliographic citation styles, using metadata and fine tuning the result
to get the PDF or HTML you want or need.

But sometimes, you want more control while writing and exporting the document.
That\'s the role of `%keywords`, that let you extend the writing and exporting syntax to
suit your needs as an author.
They are programmed entirely on Pharo, and you can see how they are coded and use them
as templates of your own special keywords (a topic we will cover in specialized notebooks)
and in the future a full Grafoscopio document API and a DSL will be provided to create even
easier customizations of Grafoscopio behavior and markup.

A `%keyword` tells Grafoscopio how to process the document while exporting and is usually
located in the node\'s header, as the first word of it.
Sometimes the `%keyword` also appears in the node\'s body, as we will see.
Everytime Grafoscopio finds a `%keyword` in a node will process that node accordingly to a
set of predefined rules.

In this part of the document, we will show you how to use the `%keywords` already present.
You\'re invited to explore the Grafoscopio native version of this manual (in the `Help > Manual`
*docking bar* menu) to see examples of how they are used in this very document.',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : '%idea %invisible',
											#body : '  - `%invisible`: Use it to mark a node that you don\'t want to become part of the exported document.
    This applies to that node and its children. ',
											#children : OrderedCollection [ ],
											#parent : @184,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										},
										GrafoscopioNode {
											#header : '%idea %idea',
											#body : '  - `%idea`: Use it when you don\'t want the header of the node to become part of the exported result.
      Is useful to split long text that are part of a single section into a set of main ideas.',
											#children : OrderedCollection [ ],
											#parent : @184,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										},
										GrafoscopioNode {
											#header : '%idea %embed',
											#body : '  - `%embed`: Use it to change the way that children nodes are included in the exported result.
    If you do not use this keyword, all non-invisible children nodes will be added secuencially after the parent.
    If you use this keyword, all non-invisible children nodes that start with `%embed` will be added in the
    order they where called in the parent\'s body.',
											#children : OrderedCollection [ ],
											#parent : @184,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										},
										GrafoscopioNode {
											#header : '%idea %footnote',
											#body : '  - `%footnote`: Use it to create a children node that contains footnotes invoked in the parents body.
    The header of the footnote should be the same that is referenced in the parent. So if the parents body
    includes a `[^my-ID]` markup reference to a footnode, the children node should have this header:
    `%footnode my-ID`.
    Useful for long footnotes, (wich are usual in academic writing) or just to have a more organized document tree.',
											#children : OrderedCollection [ ],
											#parent : @184,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										},
										GrafoscopioNode {
											#header : '%idea %output',
											#body : '  - \'%output\': Use it if you want to include the textual output of a code node execution in the exported
    markdown file.',
											#children : OrderedCollection [ ],
											#parent : @184,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										}
									],
									#parent : @122,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Exporting: markdown, HTML, \\LaTeX and PDF',
									#body : 'Grafoscopio provides exportation capabilies to [Pandoc\'s markdown][markdown]
and use Pandoc to export to HTML, [LaTeX][latex] and PDF[^latex-engine]. 
To export a document, choose the appropiate option from the `Notebook` menu.
Exporting to markdown will save the document in the same location as the current notebook, 
but with  `.markdown` extension, instead of `.ston` and exporting as PDF, \\LaTeX or HTML will
run the proper Pandoc command on this document for such conversion and will add the `.pdf`,
`.tex` or `.html` respective file extension  (provided that Pandoc is installed on your system at
the usual location, if is not, Grafoscopio will send you an error message).
If you want to export a document with a different name, you wil need first to save 
the native document with such new name.

You can also use Pandoc directly over the markdown file to
create beautiful documents for the printing and the web,
with templates and customized control over a lot of variables
(see the [Pandoc website][pandoc] for more information).
For example, the PDF version of this document was created in this way, 
from a single Grafoscopio notebook, using the command:

~~~
pandoc -N --template=mytemplate.tex --variable fontsize=12pt --variable 
version=1.3.5 --latex-engine=xelatex --toc --bibliography bibliography.bib
manual.markdown -o manual.pdf
~~~

%embed Bibliographic support: Zotero and BibTeX

You can browse the [proper folder in the fossil repository][manual-tip] to see
the manual and companion files in different formats.',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : '%footnote latex-engine',
											#body : 'Exporting to PDF, requires the proper instalation of a LaTeX engine,
like pdflatex, luatex, xelatex or context.
Explanation about how to install them for each specific platfom
(Windows, Gnu/Linux and/or Mac) goes beyond the objectives of this
manual and is available online.
Please consult the published documentation for your particular platform.

In the future we hope to provide integration with external package managers, like
[Nix][nix] (for Gnu/Linux and Mac) or [Chocolatey][chocolatey] (for Windows) to
help with external tools and frameworks installations, in case you don\'t want to
make them by yourself.',
											#children : OrderedCollection [ ],
											#parent : @202,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										},
										GrafoscopioNode {
											#header : '%embed Bibliographic support: Zotero and BibTeX',
											#body : '**Important note ** `>`  *Bibliographic support: Zotero and BibTeX* | 
Grafoscopio has preliminar support for reading and generating [BibTeX][bibtex] files 
and to connect with public [Zotero][zotero] collections.
In fact, the bibliography file for this manual was done by reading a [Zotero collection][zotero-manual]
and creating the respective `bibliography.bib` from there.
This allows to work collaboratively on research, sharing bibliographic references, making
annotations and customizing their integration into the final exported document.
Open this manual from the `Help > Manual` docking bar menu and open the `Bibliography`
node to see an example of how this is done for this document.',
											#children : OrderedCollection [ ],
											#parent : @202,
											#level : 4,
											#links : OrderedCollection [
												''
											]
										}
									],
									#parent : @122,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										'',
										''
									]
								}
							],
							#parent : @102,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								''
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						''
					]
				},
				@104,
				@106,
				@110,
				@112,
				@115,
				@118,
				@122,
				@124,
				@127,
				@129,
				@132,
				@134,
				@138,
				@140,
				@143,
				@146,
				@151,
				@154,
				@156,
				@159,
				@162,
				@166,
				@168,
				@170,
				@174,
				@177,
				@180,
				@184,
				@186,
				@189,
				@192,
				@195,
				@198,
				@202,
				@204,
				@207,
				GrafoscopioNode {
					#header : 'Examples',
					#body : 'There is a dedicated complementary package, called `Dataviz`, with examples, 
that was build with educative purposes, for a recurrent local workshop called 
the Data Week, where we invite a diverse community in gender, professions,
educational and life backgrounds.
The Dataviz package is automatically installed when you install Grafoscopio,
and you can find more information about it in the [Dataviz intro][dataviz-intro] 
repository page.
Also we have a Spanish introductory tutorial, that is directed towards beginers.

The notebooks for such examples are available in the `Help` menu of the docking bar,
or you can open them by executing this code form the *playground*:
',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : 'Opening tutorial',
							#body : '"This opens the Spanish tutorial"
GrafoscopioNotebook new openTutorial ',
							#tags : 'código',
							#children : OrderedCollection [ ],
							#parent : @213,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								''
							]
						},
						GrafoscopioNode {
							#header : 'Opening Dataviz documentation',
							#body : '"This opens the introductory notebook to the Dataviz package"
GrafoscopioDocumentation openDatavizIntro',
							#tags : 'código',
							#children : OrderedCollection [ ],
							#parent : @213,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								''
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						'',
						''
					]
				},
				@215,
				@218,
				GrafoscopioNode {
					#header : 'API documentation',
					#body : 'Because Grafoscopio inhabits a full live coding environment,
it follows the custom of making the API documentation available
inside a dynamic environment, instead in some static web page.
To open the Grafoscopio package inside the system browser,
and see the messages organized by protocols execute:
',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : 'Opening the code browser for Grafoscopio',
							#body : '"Browser the notebook API"
GrafoscopioNotebook browse.

"Browse the document tree API"
GrafoscopioNode browse.',
							#tags : 'código',
							#children : OrderedCollection [ ],
							#parent : @222,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								'',
								''
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						'',
						'',
						'',
						''
					]
				},
				@224,
				GrafoscopioNode {
					#header : 'Tests',
					#body : 'The core functionality of Grafoscopio document tree model is tested.
If you want to see and run the tests, just open the tests package by
executing:

%embed Opening the tests package

From there, you can use the extensive test environment provided by Pharo.
For a short introduction to how to run test on this environment,
I recommend to watch the [Coding a Little Domain Specific Language video ][mooc-w3-14],
from the [Pharo MOOC][mooc].',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : '%embed Opening the tests package',
							#body : 'GrafoscopioNodeTest browse',
							#tags : 'código',
							#children : OrderedCollection [ ],
							#parent : @228,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								'',
								''
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						'',
						'',
						'',
						'',
						'',
						''
					]
				},
				@230,
				GrafoscopioNode {
					#header : 'Known bugs',
					#body : 'There is a non critical but annoying bug that presents from time
to time when you are using the notebook GUI.

Some times, when you click the document tree a window popup
with an error message, titled 
"`MessageNotUnderstood: receiver of "selectedMorphList" is nil`", 
as shown in figure \\ref{fig:bug}.

![ The know bug message. ](../../../Imagenes/Notebook/bug.png){#fig:bug}


If that is the case, you still can continue your writing in the current document,
clicking on other notebook nodes and editing them, but if the message presents
again (usually when selecting the same node that originated it the first time),
you can save the notebook and reopen it again from the 
`Launch > Recent notebooks...` docking bar menu.

We are going to hunt and squeeze that bug out of existance.
Resistance is futile.
To help us with this or other bugs please look at the Community Guidelines to
know how to contribute to the project.',
					#children : OrderedCollection [ ],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						''
					]
				},
				GrafoscopioNode {
					#header : 'Community Guidelines',
					#body : '',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : 'Seek support',
							#body : 'Grafoscopio has a small and new born community.
You can reach it by following the contact links
in the Grafoscopio page in 
[Spanish](http://mutabit.com/grafoscopio/)
or in [English](http://mutabit.com/grafoscopio/index.en.html).

Also you can discuss issues related with Grafoscopio in the
[Pharo users community](http://pharo.org/community) 
mailing list.
We are in such list and try to be active participants there
and bridge the local Spanish community with the international
one.',
							#children : OrderedCollection [ ],
							#parent : @237,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								''
							]
						},
						GrafoscopioNode {
							#header : 'Report issues or problems',
							#body : 'To report issues or problems with the software and/or its documentation 
please visit our [ticket section][grafoscopio-tickets] Fossil repository.
Before creating a new ticket, please be sure to visit the 
[current tickets][grafoscopio-tickets-current], to see if your issue/problem has been
not reported already.

When you are filling out the issues form, take into account to include the software version
where you found this problem.
If you are reporting an issue with documentation, add the document version, usually found
in the lower left side of the page, including the document revision in the square brackets.',
							#children : OrderedCollection [ ],
							#parent : @237,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								''
							]
						},
						GrafoscopioNode {
							#header : 'Contribute to the project',
							#body : 'As we said, Grafoscopio wants to help in blurring the distinction
between software developer and interactive document author,
so we are pretty open to several ways of contribution: from
bug reports, as explained above, to the creation of interactive
documentation, domain specific languages (DSLs) and visualizations,
or software functionality.

Contributions usually take part on our recurrent [Data Week][dataweek] 
hackathon/workshop and there you will learn how to use and adapt 
the software, starting by the basics, creating DSLs and crafting
visualizations and integrating them into interactive notebooks.
You will also learn how to use Fossil and how to commit to our 
shared repositories for [code][grafoscopio-sthub] and for 
[documents and issues][grafoscopio-fossil].
Besides this manual, we are creating also a tutorial (in Spanish) with all 
these themes covered, as memories for us and others to remember and learn from.
The idea, as was said before, is to have multilingual documentation with a *local
first* approach.

If you don\'t have the chance to assist to one of our face to face learning workshops
and hackathons or to use the resulting notebooks, but still want and already know
who to contribute, you can also ask for permisions in the respositories using any of 
the contact methods listed above.
We are a small, new born and friendly community with low traffic
mail communication and can discuss about contributions on an
individual  case by case approach, so your words, bugfix and suggestions 
will be listened and taking into account and integrated when and where they 
make sense.

Welcome again to our community :-).',
							#children : OrderedCollection [ ],
							#parent : @237,
							#level : 2,
							#links : OrderedCollection [
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								''
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						'',
						'',
						'',
						'',
						'',
						'',
						''
					]
				},
				@239,
				@242,
				@245,
				GrafoscopioNode {
					#header : '%idea external links',
					#body : '[agileviz]: http://agilevisualization.com/
[agileviz-quickstart]: https://dl.dropboxusercontent.com/u/31543901/AgileVisualization/QuickStart/0101-QuickStart.html
[beaker]: http://beakernotebook.com/
[bibtex]: https://en.wikipedia.org/wiki/BibTeX
[chocolatey]: https://chocolatey.org/
[citezen]: http://people.untyped.org/damien.pollet/software/citezen/
[cryptohash]: https://en.wikipedia.org/wiki/Cryptographic_hash_function
[d3js]: https://d3js.org/
[dataweek]: http://mutabit.com/dataweek/
[etherpad]: https://en.wikipedia.org/wiki/Etherpad
[flare]: http://flare.prefuse.org/
[floor-function]: https://en.wikipedia.org/wiki/Floor_and_ceiling_functions
[fuel]: http://rmod.inria.fr/web/software/Fuel
[fossil]: http://fossil-scm.org/
[hitec-lab]: http://www.hiteclab.co.nr/
[joss]: http://joss.theoj.org/
[grafoscopio-en]: http://mutabit.com/grafoscopio/index.en.html
[grafoscopio-fossil]: http://mutabit.com/repos.fossil/grafoscopio/
[grafoscopio-tickets]: http://mutabit.com/repos.fossil/grafoscopio/ticket
[grafoscopio-tickets-current]: http://mutabit.com/repos.fossil/grafoscopio/rptview?rn=1
[grafoscopio-sthub]: http://smalltalkhub.com/#!/~Offray/Grafoscopio
[git]: https://en.wikipedia.org/wiki/Git
[github]: https://en.wikipedia.org/wiki/GitHub
[gogs]: https://gogs.io/
[gt-tools]: http://gtoolkit.org/
[hackbo]: http://hackbo.co/
[j-lang]: https://en.wikipedia.org/wiki/J_(programming_language)
[json]: http://en.wikipedia.org/wiki/JavaScript_Object_Notation
[jupyter]: http://jupyter.org/
[jupyterlab]: http://jupyterlab.github.io/jupyterlab/
[latex]: https://en.wikipedia.org/wiki/LaTeX
[leo]: http://leoeditor.com
[light-markup-languages]: https://en.wikipedia.org/wiki/Light_markup_language
[manual-tip]: http://mutabit.com/repos.fossil/grafoscopio/dir?tip&name=Docs/En/Books/Manual
[manual-source-timeline]: http://mutabit.com/repos.fossil/grafoscopio/finfo?name=Docs/En/Books/Manual/manual.markdown
[markdown]: http://pandoc.org/MANUAL.html#pandocs-markdown
[mooc]: https://siemenbaader.github.io/PharoMooc-website/
[mooc-spotter1]: http://rmod-pharo-mooc.lille.inria.fr/MOOC/Videos/W3/C019-Videos-Spotter1-BrowsingAClassWithSpotter-V2-HD_720p_4Mbs.m4v
[mooc-spotter2]: http://rmod-pharo-mooc.lille.inria.fr/MOOC/Videos/W3/C019-Videos-Spotter2-Categories-V2-HD_720p_4Mbs.m4v
[mooc-w3-14]: http://amara.org/en/videos/04UWGMwnrdXz/info/rmod-pharo-mooclilleinriafrc019-videos-redo-dsl-hd_720p_4mbsm4v/
[moose-community]: http://moosetechnology.org/#twitter
[mutabit]: http://mutabit.com/
[neojson]: https://ci.inria.fr/pharo-contribution/job/EnterprisePharoBook/lastSuccessfulBuild/artifact/book-result/NeoJSON/NeoJSON.html
[nix]: http://nixos.org/nix/
[nosql]: https://en.wikipedia.org/wiki/NoSQL
[nteract]: https://nteract.io/
[object-profile]: http://objectprofile.com/
[oop-pharo-2017]: https://ci.inria.fr/pharo-contribution/view/Books/job/LearningObjectOrientedProgramming/98/artifact/book.pdf
[org-mode]: http://orgmode.org/
[pastebin]: https://en.wikipedia.org/wiki/Pastebin
[pandoc]: http://pandoc.org/
[pharo]: http://pharo.org/
[pharo-download]: http://pharo.org/download
[pharo-community]: http://pharo.org/community
[pollen]: http://docs.racket-lang.org/pollen/
[processing]: https://processing.org/
[raphaeljs]: https://dmitrybaranovskiy.github.io/raphael/
[r-lang]: https://en.wikipedia.org/wiki/R_(programming_language)
[roassal]: http://agilevisualization.com/
[rolling-release]: https://en.wikipedia.org/wiki/Rolling_release
[spec]: http://files.pharo.org/books/spec-tutorial/
[spotter]: http://gtoolkit.org/#spotter
[sql]: https://en.wikipedia.org/wiki/SQL
[sqlite]: http://sqlite.org/
[ston]: https://github.com/svenvc/ston/blob/master/ston-paper.md
[texmacs]: http://texmacs.org/
[udbc]: http://www.smalltalkhub.com/#!/~TorstenBergmann/UDBC 
[zeppling]: http://zeppelin-project.org/
[zotero]: https://www.zotero.org/
[zotero-manual]: https://www.zotero.org/groups/diseo_y_creacion_phd_msc_universidad_de_caldas/items/collectionKey/PHGTCZVT',
					#children : OrderedCollection [ ],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						''
					]
				},
				GrafoscopioNode {
					#header : 'Licenses',
					#body : '',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : 'Grafoscopio, Dataviz and Pubiblio Software License',
							#body : 'The Grafoscopio, and its companion packages Dataviz and Publibio, 
are software covered under MIT License

Copyright (c) 2014-2017 Offray Vladimir Luna Cárdenas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.',
							#children : OrderedCollection [ ],
							#parent : @252,
							#level : 2,
							#nodesInPreorder : OrderedCollection [
								@254
							],
							#links : OrderedCollection [
								'',
								'',
								'http://vistonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'http://visonte.org',
								'../../Licenses/grafoscopio-mit.md'
							]
						},
						GrafoscopioNode {
							#header : 'Documention License',
							#body : 'THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS COPYFARLEFT PUBLIC LICENSE (“LICENSE”). 
THE WORK IS PROTECTED BY COPYRIGHT AND ALL OTHER APPLICABLE LAWS. ANY USE OF THE WORK OTHER THAN AS 
AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED. BY EXERCISING ANY RIGHTS TO THE WORK 
PROVIDED IN THIS LICENSE, YOU AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY 
BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN AS CONSIDERATION 
FOR ACCEPTING THE TERMS AND CONDITIONS OF THIS LICENSE AND FOR AGREEING TO BE BOUND BY THE TERMS AND 
CONDITIONS OF THIS LICENSE.

THE [GRAFOSCOPIO MANUAL](../Books/Manual/manual.ston), 
THE [DATAVIZ NOTEBOOK](../../../Packages/Dataviz/dataviz.ston),
AND THEIR DERIVATED FILES LOCATED IN THIS REPOSITORY, 
ARE COVERED BY THIS DOCUMENTATION LICENSE.',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : 'Definitions',
									#body : 'a. **“Adaptation”** means a work based upon the Work, or upon the Work and other pre-existing works, 
  such as a translation, adaptation, derivative work, arrangement of music or other alterations of a literary 
  or artistic work, or phonogram or performance and includes cinematographic adaptations or any other 
  form in which the Work may be recast, transformed, or adapted including in any form recognizably derived 
  from the original, except that a work that constitutes a Collection will not be considered an Adaptation for 
  the purpose of this License. For the avoidance of doubt, where the Work is a musical work, performance or 
  phonogram, the synchronization of the Work in timed-relation with a moving image (“synching”) will be 
  considered an Adaptation for the purpose of this License. 

b. **“Collection”** means a collection of literary or artistic works, such as encyclopedias and anthologies, or 
  performances, phonograms or broadcasts, or other works or subject matter other than works listed in Section 
  1(f) below, which, by reason of the selection and arrangement of their contents, constitute intellectual creations, 
  in which the Work is included in its entirety in unmodified form along with one or more other contributions, each 
  constituting separate and independent works in themselves, which together are assembled into a collective whole. 
  A work that constitutes a Collection will not be considered an Adaptation (as defined above) for the purposes of this License. 

c. **“Distribute”** means to make available to the public the original and copies of the Work or Adaptation, as appropriate,
  through sale, gift or any other transfer of possession or ownership. 

d. **“Licensor”** means the individual, individuals, entity or entities that offer(s) the Work under the terms of this License. 

e. **“Original Author”** means, in the case of a literary or artistic work, the individual, individuals, entity or entities who 
  created the Work or if no individual or entity can be identified, the publisher; and in addition (i) in the case of a performance 
  the actors, singers, musicians, dancers, and other persons who act, sing, deliver, declaim, play in, interpret or otherwise perform 
  literary or artistic works or expressions of folklore; (ii) in the case of a phonogram the producer being the person or legal entity 
  who first fixes the sounds of a performance or other sounds; and, (iii) in the case of broadcasts, the organization that transmits 
  the broadcast. 

f. **“Work”** means the literary and/or artistic work offered under the terms of this License including without limitation any production 
  in the literary, scientific and artistic domain, whatever may be the mode or form of its expression including digital form, such as a book, 
  pamphlet and other writing; a lecture, address, sermon or other work of the same nature; a dramatic or dramatico-musical work; a 
  choreographic work or entertainment in dumb show; a musical composition with or without words; a cinematographic work to which 
  are assimilated works expressed by a process analogous to cinematography; a work of drawing, painting, architecture, sculpture, engraving 
  or lithography; a photographic work to which are assimilated works expressed by a process analogous to photography; a work of applied art; 
  an illustration, map, plan, sketch or three-dimensional work relative to geography, topography, architecture or science; a performance; a 
  broadcast; a phonogram; a compilation of data to the extent it is protected as a copyrightable work; or a work performed by a variety or 
  circus performer to the extent it is not otherwise considered a literary or artistic work. 

g. **“You”** means an individual or entity exercising rights under this License who has not previously violated the terms of this License with 
  respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation. 

h. **“Publicly Perform”** means to perform public recitations of the Work and to communicate to the public those public recitations, by any 
  means or process, including by wire or wireless means or public digital performances; to make available to the public Works in such a way 
  that members of the public may access these Works from a place and at a place individually chosen by them; to perform the Work to the 
  public by any means or process and the communication to the public of the performances of the Work, including by public digital performance; 
  to broadcast and rebroadcast the Work by any means including signs, sounds or images. 

i. **“Reproduce”** means to make copies of the Work by any means including without limitation by sound or visual recordings and the right 
  of fixation and reproducing fixations of the Work, including storage of a protected performance or phonogram in digital form or other electronic 
  medium.',
									#children : OrderedCollection [ ],
									#parent : @258,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Fair dealing rights',
									#body : 'Nothing in this License is intended to reduce, limit, or restrict any uses free from copyright or 
rights arising from limitations or exceptions that are provided for in connection with the copyright 
protection under copyright law or other applicable laws.',
									#children : OrderedCollection [ ],
									#parent : @258,
									#level : 3,
									#links : OrderedCollection [
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'License Grant',
									#body : 'Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, 
royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to 
exercise the rights in the Work as stated below:

a. to Reproduce the Work, to incorporate the Work into one or more Collections, and to Reproduce 
    the Work as incorporated in the Collections; 

b. to create and Reproduce Adaptations provided that any such Adaptation, including any translation 
    in any medium, takes reasonable steps to clearly label, demarcate or otherwise identify that changes 
    were made to the original Work. For example, a translation could be marked 
    “The original work was translated from English to Spanish,” or a modification could indicate 
    “The original work has been modified.”; 

c. to Distribute and Publicly Perform the Work including as incorporated in Collections; and, 

d. to Distribute and Publicly Perform Adaptations. The above rights may be exercised in all media and formats whether 
  now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary 
  to exercise the rights in other media and formats. Subject to Section 8(f), all rights not expressly granted by Licensor are hereby 
  reserved, including but not   limited to the rights set forth in Section 4(f).',
									#children : OrderedCollection [ ],
									#parent : @258,
									#level : 3,
									#links : OrderedCollection [
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Restrictions',
									#body : 'The license granted in Section 3 above is expressly made subject to and limited by the following restrictions:

a. You may Distribute or Publicly Perform the Work only under the terms of this License. You must include a copy of, or the Uniform Resource Identifier (URI) 
  for, this License with every copy of the Work You Distribute or Publicly Perform. You may not offer or impose any terms on the Work that restrict the terms of
  this License or the ability of the recipient of the Work to exercise the rights granted to that recipient under the terms of the License. You may not sublicense 
  the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties with every copy of the Work You Distribute or 
  Publicly Perform. When You Distribute or Publicly Perform the Work, You may not impose any effective technological measures on the Work that restrict the
  ability of a recipient of the Work from You to exercise the rights granted to that recipient under the terms of the License. This Section 4(a) applies to the 
  Work as incorporated in a Collection, but this does not require the Collection apart from the Work itself to be made subject to the terms of this License. If 
  You create a Collection, upon notice from any Licensor You must, to the extent practicable, remove from the Collection any credit as required by Section  
  4(d), as requested. If You create an Adaptation, upon notice from any Licensor You must, to the extent practicable, remove from the Adaptation any credit 
  as required by Section 4(d), as requested. 

b. Subject to the exception in Section 4(c), you may not exercise any of the rights granted to You in Section 3 above in any manner that is primarily intended 
  for or directed toward commercial advantage or private monetary compensation. The exchange of the Work for other copyrighted works by means of 
  digital file-sharing or otherwise shall not be considered to be intended for or directed toward commercial advantage or private monetary compensation, 
  provided there is no payment of any monetary compensation in connection with the exchange of copyrighted works. 

c. **You may exercise the rights granted in Section 3 for commercial purposes only if**:

   i. **You are a worker-owned business or worker-owned collective; and** 
   ii. **all financial gain, surplus, profits and benefits produced by the business or collective are distributed among the worker-owners**

d. Any use by a business that is privately owned and managed, and that seeks to generate profit from the labor of employees paid by salary or other wages, is
  not permitted under this license. 

e. If You Distribute, or Publicly Perform the Work or any Adaptations or Collections, You must, unless a request has been made pursuant to Section 4(a), keep 
  intact all copyright notices for the Work and provide, reasonable to the medium or means You are utilizing: (i) the name of the Original Author (or 
  pseudonym, if applicable) if supplied, and/or if the Original Author and/or Licensor designate another party or parties (e.g., a sponsor institute, publishing 
  entity, journal) for attribution (“Attribution Parties”) in Licensor’s copyright notice, terms of service or by other reasonable means, the name of such party 
  or parties; (ii) the title of the Work if supplied; (iii) to the extent reasonably practicable, the URI, if any, that Licensor specifies to be associated with the 
  Work, unless such URI does not refer to the copyright notice or licensing information for the Work; and, (iv) consistent with Section 3(b), in the case of an 
  Adaptation, a credit identifying the use of the Work in the Adaptation (e.g., “French translation of the Work by Original Author,” or “Screenplay based on 
  original Work by Original Author”). The credit required by this Section 4(d) may be implemented in any reasonable manner; provided, however, that in the 
  case of a Adaptation or Collection, at a minimum such credit will appear, if a credit for all contributing authors of the Adaptation or Collection appears, then
  as part of these credits and in a manner at least as prominent as the credits for the other contributing authors. For the avoidance of doubt, You may only 
  use the credit required by this Section for the purpose of attribution in the manner set out above and, by exercising Your rights under this License, You may 
  not implicitly or explicitly assert or imply any connection with, sponsorship or endorsement by the Original Author, Licensor and/or Attribution Parties, as 
  appropriate, of You or Your use of the Work, without the separate, express prior written permission of the Original Author, Licensor and/or Attribution 
  Parties. 

f. For the avoidance of doubt: 

  i. Non-waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing 
    scheme cannot be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License; 
  ii. Waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing 
    scheme can be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License if 
    Your exercise of such rights is for a purpose or use which is otherwise than noncommercial as permitted under Section 4(b) and otherwise waives the right 
    to collect royalties through any statutory or compulsory licensing scheme; and, 
  iii.Voluntary License Schemes. The Licensor reserves the right to collect royalties, whether individually or, in the event that the Licensor is a member of a 
    collecting society that administers voluntary licensing schemes, via that society, from any exercise by You of the rights granted under this License that is 
    for a purpose or use which is otherwise than noncommercial as permitted under Section 4(b). 

g. Except as otherwise agreed in writing by the Licensor or as may be otherwise permitted by applicable law, if You Reproduce, Distribute or Publicly Perform
  the Work either by itself or as part of any Adaptations or Collections, You must not distort, mutilate, modify or take other derogatory action in relation to 
  the Work which would be prejudicial to the Original Author’s honor or reputation. Licensor agrees that in those jurisdictions (e.g. Japan), in which any 
  exercise of the right granted in Section 3(b) of this License (the right to make Adaptations) would be deemed to be a distortion, mutilation, modification or 
  other derogatory action prejudicial to the Original Author’s honor and reputation, the Licensor will waive or not assert, as appropriate, this Section, to the 
  fullest extent permitted by the applicable national law, to enable You to reasonably exercise Your right under Section 3(b) of this License (right to make 
  Adaptations) but not otherwise.',
									#children : OrderedCollection [ ],
									#parent : @258,
									#level : 3,
									#links : OrderedCollection [
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Representations, Warranties and Disclaimer',
									#body : 'UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR 
WARRANTIES OF ANY KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF 
TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE 
PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO 
SUCH EXCLUSION MAY NOT APPLY TO YOU. ',
									#children : OrderedCollection [ ],
									#parent : @258,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Limitation on liability',
									#body : 'EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, 
INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN 
ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. ',
									#children : OrderedCollection [ ],
									#parent : @258,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Termination',
									#body : 'a. This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who 
  have received Adaptations or Collections from You under this License, however, will not have their licenses terminated provided such individuals or entities 
  remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License. 

b. Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding 
  the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that 
  any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and 
  this License will continue in full force and effect unless terminated as stated above.

',
									#children : OrderedCollection [ ],
									#parent : @258,
									#level : 3,
									#links : OrderedCollection [
										'',
										'',
										'',
										''
									]
								},
								GrafoscopioNode {
									#header : 'Miscellaneous',
									#body : 'a. Each time You Distribute or Publicly Perform the Work or a Collection, the Licensor offers to the recipient a license to the Work on the same terms and 
  conditions as the license granted to You under this License.

b. Each time You Distribute or Publicly Perform an Adaptation, Licensor offers to the recipient a license to the original Work on the same terms and 
  conditions as the license granted to You under this License. 

c. If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the 
  terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to 
  make such provision valid and enforceable. 

d. No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by 
  the party to be charged with such waiver or consent. 

e. This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or 
  representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any 
  communication from You. This License may not be modified without the mutual written agreement of the Licensor and You. 

f. The rights granted under, and the subject matter referenced, in this License were drafted utilizing the terminology of the Berne Convention for the 
  Protection of Literary and Artistic Works (as amended on September 28, 1979), the Rome Convention of 1961, the WIPO Copyright Treaty of 1996, the WIPO 
  Performances and Phonograms Treaty of 1996 and the Universal Copyright Convention (as revised on July 24, 1971). These rights and subject matter take 
  effect in the relevant jurisdiction in which the License terms are sought to be enforced according to the corresponding provisions of the implementation of 
  those treaty provisions in the applicable national law. If the standard suite of rights granted under applicable copyright law includes additional rights not 
  granted under this License, such additional rights are deemed to be included in the License; this License is not intended to restrict the license of any rights 
  under applicable law.',
									#children : OrderedCollection [ ],
									#parent : @258,
									#level : 3,
									#links : OrderedCollection [
										'',
										''
									]
								}
							],
							#parent : @252,
							#level : 2,
							#nodesInPreorder : OrderedCollection [
								@258,
								@260,
								@263,
								@266,
								@269,
								@272,
								@275,
								@278,
								@281
							],
							#links : OrderedCollection [
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'',
								'../../Licenses/documents-p2p-ismb.md'
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						'',
						''
					]
				},
				@254,
				@258,
				@260,
				@263,
				@266,
				@269,
				@272,
				@275,
				@278,
				@281,
				GrafoscopioNode {
					#header : 'Bibliography',
					#body : '',
					#children : OrderedCollection [
						GrafoscopioNode {
							#header : '%invisible ',
							#body : '',
							#children : OrderedCollection [
								GrafoscopioNode {
									#header : 'Quering Zotero collection and exporting as BibTeX',
									#body : '"This script updates the bibliography for this document with the latest
available online. Useful if you\'re adding new bibliographic references"
| bibTeXData bibFile bibliography tempStream |
bibTeXData := (ZoteroLibrary new groupID: \'204755\') subcollectionAsBibTeX: \'PHGTCZVT\'.
tempStream := \'\' writeStream.
bibliography := CZBibParser parse: bibTeXData.
bibliography entries do: [ :entry | 
\tentry fields second key = \'shorttitle\'
\t\tifTrue: [entry key: entry fields second value ].
\ttempStream nextPutAll: (BibBibRenderer new render: entry) contents].
bibFile := FileLocator home asFileReference / \'Programas\' / \'Grafoscopio\' / \'Repo\' / \'Docs\' / \'En\' / \'Books\' / \'Manual\' / \'bibliography.bib\'.
bibFile exists
\tifTrue: [ bibFile delete ] 
\tifFalse: [ bibFile ensureCreateFile ].
bibFile writeStreamDo: [ :stream | stream nextPutAll: tempStream contents ].
bibFile

',
									#tags : 'código',
									#children : OrderedCollection [ ],
									#parent : @289,
									#level : 3,
									#links : OrderedCollection [
										'',
										'http://ws.stfx.eu/4138G3OYJZ9I'
									]
								},
								GrafoscopioNode {
									#header : 'Problems with Pandoc and bibliography',
									#body : 'This note is here, to provide context, but it should be moved to the developers notebook.

While running the PDF conversion command:

~~~
pandoc -N --template=mytemplate.tex --variable fontsize=12pt --variable version=1.3.4 --latex-engine=xelatex --toc --bibliography bibliography.bib manual.markdown -o manual.pdf
~~~

I got this error:

~~~
pandoc-citeproc: "stdin" (line 8, column 2):
unexpected "m"
expecting "c", "C", "p", "P", "s" or "S"
CallStack (from HasCallStack):
  error, called at src/Text/CSL/Input/Bibtex.hs:113:32 in pandoc-citeproc-0.10.4-Ks7e5k595uURtHUpwsSlk:Text.CSL.Input.Bibtex
pandoc: Error running filter pandoc-citeproc
Filter returned error status 1
~~~

The problem is the way Zotero or Citezen are creating BibTeX entries that contain has a value in the field "Adicional" in the Zotero
library (mi Zotero UI is in Spanish), represented in the exported entry as note: {}.
They should be removed. 
May be we should control the fields exported by Citezen, editing or deleting all conflicting fields/characters for pandoc-citeproc. ',
									#children : OrderedCollection [ ],
									#parent : @289,
									#level : 3,
									#links : OrderedCollection [
										'',
										'https://github.com/jgm/pandoc/issues/1034'
									]
								},
								GrafoscopioNode {
									#header : 'Old citezen tests',
									#body : 'Previously I made some tests with [citezen][citezen] for cleaning the bibliographic references,
but that implementation was abandoned, because it was far too specific.
Now that I\'m implemeting Zotero back end in a more general way, would be nice to retake
the initial citezen experiments.

See/browse children nodes for some details on previos exploration.

[citezen]: (http://people.untyped.org/damien.pollet/software/citezen/)',
									#children : OrderedCollection [
										GrafoscopioNode {
											#header : 'Tweet',
											#body : '',
											#children : OrderedCollection [
												GrafoscopioNode {
													#header : 'Script screenshot zoom',
													#body : '',
													#children : OrderedCollection [ ],
													#parent : @299,
													#level : 5,
													#links : OrderedCollection [
														'',
														'https://www.enlightenment.org/ss/e-54454b6c965410.68921158.jpg'
													]
												}
											],
											#parent : @297,
											#level : 4,
											#links : OrderedCollection [
												'',
												'https://twitter.com/offrayLC/status/524258229875142657'
											]
										},
										GrafoscopioNode {
											#header : 'Thread asking for bibtex support',
											#body : '',
											#children : OrderedCollection [
												GrafoscopioNode {
													#header : 'Old script',
													#body : '| bibFile bibliography bibStream bibOutputer |
bibFile := ((FileLocator documents / \'U/Libertadores/Grafoscopio/Docs/Es/Articulos/Libertadores/\') children
    detect: [:each | each basename endsWith: \'bib\' ]).
bibliography := CZBibParser parse: bibFile contents.
bibStream := \'\' writeStream.
(bibliography entries) do: [:bibItem |
\tbibItem fields do: [:some | some key = \'shorttitle\'
\t\tifTrue: [ bibItem key: some value ]].
\tbibOutputer := CZBibTeXDocBuilder  new.
\tbibStream nextPutAll: 
\t\t\t(bibOutputer entryToBibtexString: bibItem); cr].
bibliography.
bibFile writeStreamDo: [:stream |
       stream nextPutAll: bibStream contents withUnixLineEndings ].
bibStream contents.
',
													#tags : 'código',
													#children : OrderedCollection [ ],
													#parent : @305,
													#level : 5,
													#links : OrderedCollection [
														'',
														'http://ws.stfx.eu/3CEKQQQ3NL2E'
													]
												}
											],
											#parent : @297,
											#level : 4,
											#links : OrderedCollection [
												'',
												'http://forum.world.st/Citizen-example-for-manipulating-a-bibtex-file-tt4784240.html#a4822230'
											]
										}
									],
									#parent : @289,
									#level : 3,
									#links : OrderedCollection [
										''
									]
								}
							],
							#parent : @287,
							#level : 2,
							#links : OrderedCollection [
								'',
								''
							]
						}
					],
					#parent : @4,
					#level : 1,
					#links : OrderedCollection [
						'',
						'',
						'',
						'',
						'',
						''
					]
				},
				@289,
				@291,
				@294,
				@297,
				@299,
				@301,
				@305,
				@307
			],
			#links : OrderedCollection [ ]
		},
		#level : 1,
		#links : OrderedCollection [
			''
		]
	},
	@6,
	@36,
	@75,
	@102,
	@213,
	@222,
	@228,
	@234,
	@237,
	@249,
	@252,
	@287
]

\documentclass[$if(fontsize)$$fontsize$,$endif$$if(lang)$$lang$,$endif$$if(papersize)$$papersize$,$endif$$for(classoption)$$classoption$$sep$,$endfor$]{$documentclass$}
$if(fontfamily)$
\usepackage{$fontfamily$}
$else$
\usepackage{lmodern}
$endif$
$if(linestretch)$
\usepackage{setspace}
\setstretch{$linestretch$}
$endif$
\usepackage{amssymb,amsmath}
\usepackage{ifxetex,ifluatex}
\usepackage{fixltx2e} % provides \textsubscript
\ifnum 0\ifxetex 1\fi\ifluatex 1\fi=0 % if pdftex
  \usepackage[T1]{fontenc}
  \usepackage[utf8]{inputenc}
$if(euro)$
  \usepackage{eurosym}
$endif$
\else % if luatex or xelatex
  \ifxetex
    \usepackage{mathspec}
    \usepackage{xltxtra,xunicode}
  \else
    \usepackage{fontspec}
  \fi
  \defaultfontfeatures{Mapping=tex-text,Scale=MatchLowercase}
  \newcommand{\euro}{€}
$if(mainfont)$
    \setmainfont{$mainfont$}
$endif$
$if(sansfont)$
    \setsansfont{$sansfont$}
$endif$
$if(monofont)$
    \setmonofont[Mapping=tex-ansi]{$monofont$}
$endif$
$if(mathfont)$
    \setmathfont(Digits,Latin,Greek){$mathfont$}
$endif$
\fi
% use upquote if available, for straight quotes in verbatim environments
\IfFileExists{upquote.sty}{\usepackage{upquote}}{}
% use microtype if available
\IfFileExists{microtype.sty}{%
\usepackage{microtype}
\UseMicrotypeSet[protrusion]{basicmath} % disable protrusion for tt fonts
}{}
$if(geometry)$
\usepackage[$for(geometry)$$geometry$$sep$,$endfor$]{geometry}
$endif$
\ifxetex
  \usepackage[setpagesize=false, % page size defined by xetex
              unicode=false, % unicode breaks when used with xetex
              xetex]{hyperref}
\else
  \usepackage[unicode=true]{hyperref}
\fi
\hypersetup{breaklinks=true,
            bookmarks=true,
            pdfauthor={$author-meta$},
            pdftitle={$title-meta$},
            colorlinks=true,
            citecolor=$if(citecolor)$$citecolor$$else$blue$endif$,
            urlcolor=$if(urlcolor)$$urlcolor$$else$blue$endif$,
            linkcolor=$if(linkcolor)$$linkcolor$$else$magenta$endif$,
            pdfborder={0 0 0}}
\urlstyle{same}  % don't use monospace font for urls
\usepackage{fancyhdr}
\pagestyle{fancy}
\pagenumbering{arabic}
\lhead{\itshape $title$}
\chead{}
\rhead{\itshape{\nouppercase{\leftmark}}}
\lfoot{v $version$ \scriptsize{[$rev$]}}
\cfoot{}
\rfoot{\thepage}
$if(lang)$
\ifxetex
  \usepackage{polyglossia}
  \setmainlanguage{$mainlang$}
  \setotherlanguages{$for(otherlang)$$otherlang$$sep$,$endfor$}
\else
  \usepackage[shorthands=off,$lang$]{babel}
\fi
$endif$
$if(natbib)$
\usepackage{natbib}
\bibliographystyle{$if(biblio-style)$$biblio-style$$else$plainnat$endif$}
$endif$
$if(biblatex)$
\usepackage{biblatex}
$for(bibliography)$
\addbibresource{$bibliography$}
$endfor$
$endif$
$if(listings)$
\usepackage{listings}
$endif$
$if(lhs)$
\lstnewenvironment{code}{\lstset{language=Haskell,basicstyle=\small\ttfamily}}{}
$endif$
$if(highlighting-macros)$
$highlighting-macros$
$endif$
$if(verbatim-in-note)$
\usepackage{fancyvrb}
\VerbatimFootnotes
$endif$
$if(tables)$
\usepackage{longtable,booktabs}
$endif$
$if(graphics)$
\usepackage{graphicx,grffile}
\makeatletter
\def\maxwidth{\ifdim\Gin@nat@width>\linewidth\linewidth\else\Gin@nat@width\fi}
\def\maxheight{\ifdim\Gin@nat@height>\textheight\textheight\else\Gin@nat@height\fi}
\makeatother
% Scale images if necessary, so that they will not overflow the page
% margins by default, and it is still possible to overwrite the defaults
% using explicit options in \includegraphics[width, height, ...]{}
\setkeys{Gin}{width=\maxwidth,height=\maxheight,keepaspectratio}
$endif$
$if(links-as-notes)$
% Make links footnotes instead of hotlinks:
\renewcommand{\href}[2]{#2\footnote{\url{#1}}}
$endif$
$if(strikeout)$
\usepackage[normalem]{ulem}
% avoid problems with \sout in headers with hyperref:
\pdfstringdefDisableCommands{\renewcommand{\sout}{}}
$endif$
\setlength{\parindent}{0pt}
\setlength{\parskip}{6pt plus 2pt minus 1pt}
\setlength{\emergencystretch}{3em}  % prevent overfull lines
\providecommand{\tightlist}{%
  \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt}}
$if(numbersections)$
\setcounter{secnumdepth}{5}
$else$
\setcounter{secnumdepth}{0}
$endif$
$if(verbatim-in-note)$
\VerbatimFootnotes % allows verbatim text in footnotes
$endif$

$if(title)$
\title{$title$$if(subtitle)$\\\vspace{0.5em}{\large $subtitle$}$endif$}
$endif$
$if(author)$
\author{$for(author)$$author$$sep$ \and $endfor$}
$endif$
\date{$date$}
$for(header-includes)$
$header-includes$
$endfor$

% Redefines (sub)paragraphs to behave more like sections
\ifx\paragraph\undefined\else
\let\oldparagraph\paragraph
\renewcommand{\paragraph}[1]{\oldparagraph{#1}\mbox{}}
\fi
\ifx\subparagraph\undefined\else
\let\oldsubparagraph\subparagraph
\renewcommand{\subparagraph}[1]{\oldsubparagraph{#1}\mbox{}}
\fi

\begin{document}
$if(title)$
\maketitle
$endif$
$if(abstract)$
\begin{abstract}
$abstract$
\end{abstract}
$endif$

$for(include-before)$
$include-before$

$endfor$
$if(toc)$
{
\hypersetup{linkcolor=$if(toccolor)$$toccolor$$else$black$endif$}
\setcounter{tocdepth}{$toc-depth$}
\tableofcontents
}
$endif$
$if(lot)$
\listoftables
$endif$
$if(lof)$
\listoffigures
$endif$
$body$

$if(natbib)$
$if(bibliography)$
$if(biblio-title)$
$if(book-class)$
\renewcommand\bibname{$biblio-title$}
$else$
\renewcommand\refname{$biblio-title$}
$endif$
$endif$
\bibliography{$for(bibliography)$$bibliography$$sep$,$endfor$}

$endif$
$endif$
$if(biblatex)$
\printbibliography$if(biblio-title)$[title=$biblio-title$]$endif$

$endif$
$for(include-after)$
$include-after$

$endfor$
\end{document}

## Documention License

THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS COPYFARLEFT PUBLIC LICENSE (“LICENSE”). 
THE WORK IS PROTECTED BY COPYRIGHT AND ALL OTHER APPLICABLE LAWS. ANY USE OF THE WORK OTHER THAN AS 
AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED. BY EXERCISING ANY RIGHTS TO THE WORK 
PROVIDED IN THIS LICENSE, YOU AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY 
BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN AS CONSIDERATION 
FOR ACCEPTING THE TERMS AND CONDITIONS OF THIS LICENSE AND FOR AGREEING TO BE BOUND BY THE TERMS AND 
CONDITIONS OF THIS LICENSE.

THE [GRAFOSCOPIO MANUAL](../Books/Manual/manual.ston), 
THE [DATAVIZ NOTEBOOK](../../../Packages/Dataviz/dataviz.ston),
AND THEIR DERIVATED FILES LOCATED IN THIS REPOSITORY, 
ARE COVERED BY THIS DOCUMENTATION LICENSE.

### Definitions

a. **“Adaptation”** means a work based upon the Work, or upon the Work and other pre-existing works, such as a translation, adaptation, derivative work, arrangement of music or other alterations of a literary or artistic work, or phonogram or performance and includes cinematographic adaptations or any other form in which the Work may be recast, transformed, or adapted including in any form recognizably derived from the original, except that a work that constitutes a Collection will not be considered an Adaptation for the purpose of this License. For the avoidance of doubt, where the Work is a musical work, performance or phonogram, the synchronization of the Work in timed-relation with a moving image (“synching”) will be considered an Adaptation for the purpose of this License. 

b. **“Collection”** means a collection of literary or artistic works, such as encyclopedias and anthologies, or performances, phonograms or broadcasts, or other works or subject matter other than works listed in Section 1(f) below, which, by reason of the selection and arrangement of their contents, constitute intellectual creations, in which the Work is included in its entirety in unmodified form along with one or more other contributions, each constituting separate and independent works in themselves, which together are assembled into a collective whole. A work that constitutes a Collection will not be considered an Adaptation (as defined above) for the purposes of this License. 

c. **“Distribute”** means to make available to the public the original and copies of the Work or Adaptation, as appropriate, through sale, gift or any other transfer of possession or ownership. 

d. **“Licensor”** means the individual, individuals, entity or entities that offer(s) the Work under the terms of this License. 

e. **“Original Author”** means, in the case of a literary or artistic work, the individual, individuals, entity or entities who created the Work or if no individual or entity can be identified, the publisher; and in addition (i) in the case of a performance the actors, singers, musicians, dancers, and other persons who act, sing, deliver, declaim, play in, interpret or otherwise perform literary or artistic works or expressions of folklore; (ii) in the case of a phonogram the producer being the person or legal entity who first fixes the sounds of a performance or other sounds; and, (iii) in the case of broadcasts, the organization that transmits the broadcast. 

f. **“Work”** means the literary and/or artistic work offered under the terms of this License including without limitation any production in the literary, scientific and artistic domain, whatever may be the mode or form of its expression including digital form, such as a book, pamphlet and other writing; a lecture, address, sermon or other work of the same nature; a dramatic or dramatico-musical work; a choreographic work or entertainment in dumb show; a musical composition with or without words; a cinematographic work to which are assimilated works expressed by a process analogous to cinematography; a work of drawing, painting, architecture, sculpture, engraving or lithography; a photographic work to which are assimilated works expressed by a process analogous to photography; a work of applied art; an illustration, map, plan, sketch or three-dimensional work relative to geography, topography, architecture or science; a performance; a broadcast; a phonogram; a compilation of data to the extent it is protected as a copyrightable work; or a work performed by a variety or circus performer to the extent it is not otherwise considered a literary or artistic work. 

g. **“You”** means an individual or entity exercising rights under this License who has not previously violated the terms of this License with respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation. 

h. **“Publicly Perform”** means to perform public recitations of the Work and to communicate to the public those public recitations, by any means or process, including by wire or wireless means or public digital performances; to make available to the public Works in such a way that members of the public may access these Works from a place and at a place individually chosen by them; to perform the Work to the public by any means or process and the communication to the public of the performances of the Work, including by public digital performance; to broadcast and rebroadcast the Work by any means including signs, sounds or images. 

i. **“Reproduce”** means to make copies of the Work by any means including without limitation by sound or visual recordings and the right of fixation and reproducing fixations of the Work, including storage of a protected performance or phonogram in digital form or other electronic medium.

### Fair dealing rights

Nothing in this License is intended to reduce, limit, or restrict any uses free from copyright or rights arising from limitations or exceptions that are provided for in connection with the copyright protection under copyright law or other applicable laws.

### License Grant

Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to exercise the rights in the Work as stated below:

a. to Reproduce the Work, to incorporate the Work into one or more Collections, and to Reproduce the Work as incorporated in the Collections; 

b. to create and Reproduce Adaptations provided that any such Adaptation, including any translation in any medium, takes reasonable steps to clearly label, demarcate or otherwise identify that changes were made to the original Work. For example, a translation could be marked “The original work was translated from English to Spanish,” or a modification could indicate “The original work has been modified.”; 

c. to Distribute and Publicly Perform the Work including as incorporated in Collections; and, 

d. to Distribute and Publicly Perform Adaptations. The above rights may be exercised in all media and formats whether now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary to exercise the rights in other media and formats. Subject to Section 8(f), all rights not expressly granted by Licensor are hereby reserved, including but not limited to the rights set forth in Section 4(f).

### Restrictions

The license granted in Section 3 above is expressly made subject to and limited by the following restrictions:

a. You may Distribute or Publicly Perform the Work only under the terms of this License. You must include a copy of, or the Uniform Resource Identifier (URI) for, this License with every copy of the Work You Distribute or Publicly Perform. You may not offer or impose any terms on the Work that restrict the terms of this License or the ability of the recipient of the Work to exercise the rights granted to that recipient under the terms of the License. You may not sublicense the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties with every copy of the Work You Distribute or Publicly Perform. When You Distribute or Publicly Perform the Work, You may not impose any effective technological measures on the Work that restrict the ability of a recipient of the Work from You to exercise the rights granted to that recipient under the terms of the License. This Section 4(a) applies to the Work as incorporated in a Collection, but this does not require the Collection apart from the Work itself to be made subject to the terms of this License. If You create a Collection, upon notice from any Licensor You must, to the extent practicable, remove from the Collection any credit as required by Section 4(d), as requested. If You create an Adaptation, upon notice from any Licensor You must, to the extent practicable, remove from the Adaptation any credit as required by Section 4(d), as requested. 

b. Subject to the exception in Section 4(c), you may not exercise any of the rights granted to You in Section 3 above in any manner that is primarily intended for or directed toward commercial advantage or private monetary compensation. The exchange of the Work for other copyrighted works by means of digital file-sharing or otherwise shall not be considered to be intended for or directed toward commercial advantage or private monetary compensation, provided there is no payment of any monetary compensation in connection with the exchange of copyrighted works. 

c. **You may exercise the rights granted in Section 3 for commercial purposes only if**:

 i. **You are a worker-owned business or worker-owned collective; and** 
 ii. **all financial gain, surplus, profits and benefits produced by the business or collective are distributed among the worker-owners**

d. Any use by a business that is privately owned and managed, and that seeks to generate profit from the labor of employees paid by salary or other wages, is not permitted under this license. 

e. If You Distribute, or Publicly Perform the Work or any Adaptations or Collections, You must, unless a request has been made pursuant to Section 4(a), keep intact all copyright notices for the Work and provide, reasonable to the medium or means You are utilizing: (i) the name of the Original Author (or pseudonym, if applicable) if supplied, and/or if the Original Author and/or Licensor designate another party or parties (e.g., a sponsor institute, publishing entity, journal) for attribution (“Attribution Parties”) in Licensor’s copyright notice, terms of service or by other reasonable means, the name of such party or parties; (ii) the title of the Work if supplied; (iii) to the extent reasonably practicable, the URI, if any, that Licensor specifies to be associated with the Work, unless such URI does not refer to the copyright notice or licensing information for the Work; and, (iv) consistent with Section 3(b), in the case of an Adaptation, a credit identifying the use of the Work in the Adaptation (e.g., “French translation of the Work by Original Author,” or “Screenplay based on original Work by Original Author”). The credit required by this Section 4(d) may be implemented in any reasonable manner; provided, however, that in the case of a Adaptation or Collection, at a minimum such credit will appear, if a credit for all contributing authors of the Adaptation or Collection appears, then as part of these credits and in a manner at least as prominent as the credits for the other contributing authors. For the avoidance of doubt, You may only use the credit required by this Section for the purpose of attribution in the manner set out above and, by exercising Your rights under this License, You may not implicitly or explicitly assert or imply any connection with, sponsorship or endorsement by the Original Author, Licensor and/or Attribution Parties, as appropriate, of You or Your use of the Work, without the separate, express prior written permission of the Original Author, Licensor and/or Attribution Parties. 

f. For the avoidance of doubt: 

  i. Non-waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme cannot be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License; 

  ii. Waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme can be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License if Your exercise of such rights is for a purpose or use which is otherwise than noncommercial as permitted under Section 4(b) and otherwise waives the right to collect royalties through any statutory or compulsory licensing scheme; and, 
  iii.Voluntary License Schemes. The Licensor reserves the right to collect royalties, whether individually or, in the event that the Licensor is a member of a collecting society that administers voluntary licensing schemes, via that society, from any exercise by You of the rights granted under this License that is for a purpose or use which is otherwise than noncommercial as permitted under Section 4(b). 

g. Except as otherwise agreed in writing by the Licensor or as may be otherwise permitted by applicable law, if You Reproduce, Distribute or Publicly Perform the Work either by itself or as part of any Adaptations or Collections, You must not distort, mutilate, modify or take other derogatory action in relation to the Work which would be prejudicial to the Original Author’s honor or reputation. Licensor agrees that in those jurisdictions (e.g. Japan), in which any exercise of the right granted in Section 3(b) of this License (the right to make Adaptations) would be deemed to be a distortion, mutilation, modification or other derogatory action prejudicial to the Original Author’s honor and reputation, the Licensor will waive or not assert, as appropriate, this Section, to the fullest extent permitted by the applicable national law, to enable You to reasonably exercise Your right under Section 3(b) of this License (right to make Adaptations) but not otherwise.

### Representations, Warranties and Disclaimer

UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU. 

### Limitation on liability

EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. 

### Termination

a. This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who have received Adaptations or Collections from You under this License, however, will not have their licenses terminated provided such individuals or entities remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License. 

b. Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and this License will continue in full force and effect unless terminated as stated above.



### Miscellaneous

a. Each time You Distribute or Publicly Perform the Work or a Collection, the Licensor offers to the recipient a license to the Work on the same terms and conditions as the license granted to You under this License.

b. Each time You Distribute or Publicly Perform an Adaptation, Licensor offers to the recipient a license to the original Work on the same terms and conditions as the license granted to You under this License. 

c. If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable. 

d. No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by the party to be charged with such waiver or consent. 

e. This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any communication from You. This License may not be modified without the mutual written agreement of the Licensor and You. 

f. The rights granted under, and the subject matter referenced, in this License were drafted utilizing the terminology of the Berne Convention for the Protection of Literary and Artistic Works (as amended on September 28, 1979), the Rome Convention of 1961, the WIPO Copyright Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996 and the Universal Copyright Convention (as revised on July 24, 1971). These rights and subject matter take effect in the relevant jurisdiction in which the License terms are sought to be enforced according to the corresponding provisions of the implementation of those treaty provisions in the applicable national law. If the standard suite of rights granted under applicable copyright law includes additional rights not granted under this License, such additional rights are deemed to be included in the License; this License is not intended to restrict the license of any rights under applicable law.

## Grafoscopio, Dataviz and Pubiblio Software License

The Grafoscopio, and its companion packages Dataviz and Publibio, 
are software covered under MIT License

Copyright (c) 2014-2017 Offray Vladimir Luna Cárdenas

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  ---
  title: 'Grafoscopio: A moldable tool for literate computing and reproducible research'
  tags:
    - literate computing
    - reproducible research
    - data visualization
    - agile visualization
    - data activism
    - pocket infrastructures
    - moldable tools
    - civil tech
  authors:
   - name: Offray Vladimir Luna Cárdenas
     orcid: 0000-0002-4640-6984
     affiliation: 1
     affiliation: 2
     affiliation: 3
  affiliations:
   - name: HackBo: a hackerspace in Bogotá
     index: 1
   - name: mutabiT
     index: 2
  - name: University of Caldas
     index: 3
  date: 29 March 2017
  bibliography: paper.bib
  ---

  # Summary

  Grafoscopio [@luna-grafoscopio-2014] is a moldable [@moldable-debugger-2014] tool 
  to make reproducible research and literate computing [@literate-computing-2015],
  developed on Pharo [@pbe-2016] live coding and computing integrated environment,
  which allow authors to intertwine prose, code, data and 
  agile visualizations into storytelling, and readers and coauthors can verify, collaborate 
  on and extend the document claims and artifacts.
  Grafoscopio is and integrates simple and self-cointained "pocket infractures", that can   
  be execute On/Off-line, from a USB thumb drive, a rasperry-Pi alike computer, a modest 
  server or any hardware in between and beyond and tries to blur binary constructs like
  author / lector, developer / user, document / data, binary aplication / source code, and
  has an associated permanent workshop+hackathon, called the Data Week, where
  diverse participants learn, extend and modify Grafoscopio, while dealing with civic 
  issues that can be understood and expressed better using the techniques provided by
  literate computing and reproducible research.
  
  <figure><a href="../../../../Imagenes/side-by-side.png">
    <img
	src="../../../../Imagenes/side-by-side.png"
	style="width:85%"
	alt="Grafoscopio environment and a final generated pdf, side by side."
    >
  </a>
  <figcaption><small><b>^Up |</b> 
       Grafoscopio environment and the final pdf, side by side.
       </small> 
    </figcaption>
  <figure>
  \includegraphics{../../../../Imagenes/side-by-side.png}

  # References

\begin{longtable}[]{@{}l@{}}
\toprule
title: `Grafoscopio: A moldable tool for literate computing and
reproducible research'\tabularnewline
tags:\tabularnewline
- literate computing\tabularnewline
- reproducible research\tabularnewline
- data visualization\tabularnewline
- agile visualization\tabularnewline
- data activism\tabularnewline
- pocket infrastructures\tabularnewline
- moldable tools\tabularnewline
- civil tech\tabularnewline
authors:\tabularnewline
- name: Offray Vladimir Luna Cárdenas\tabularnewline
orcid: 0000-0002-4640-6984\tabularnewline
affiliation: 1\tabularnewline
affiliation: 2\tabularnewline
affiliation: 3\tabularnewline
affiliations:\tabularnewline
- name: HackBo: a hackerspace in Bogotá\tabularnewline
index: 1\tabularnewline
- name: mutabiT\tabularnewline
index: 2\tabularnewline
- name: University of Caldas\tabularnewline
index: 3\tabularnewline
date: 29 March 2017\tabularnewline
bibliography: paper.bib\tabularnewline
\bottomrule
\end{longtable}

\# Summary

Grafoscopio (Luna Cárdenas 2014) is a moldable (Girba, Chis, and
Niertrasz 2014) tool to make reproducible research and literate
computing (Perez and Granger 2015), developed on Pharo (Black et al.
2016) live coding and computing integrated environment, which allow
authors to intertwin prose, code, data and agile visualizations into
storytelling, and readers and coauthors can verify, collaborate on and
extend the document claims and artifacts. Grafoscopio is and integrates
simple and self-cointained ``pocket infractures'', that can\\
be execute On/Off-line, from a USB thumb drive, a rasperry-Pi alike
computer, a modest server or any hardware in between and beyond and
tries to blur binary constructs like author / lector, developer / user,
document / data, binary aplication / source code, and has an associated
permanent workshop+hackathon, called the Data Week, where diverse
participants learn, extend and modify Grafoscopio, while dealing with
civic issues that can be understood and expressed better using the
techniques provided by literate computing and reproducible research.

\^{}Up \textbar{} Grafoscopio environment and the final pdf, side by
side.

\includegraphics{../../../../Imagenes/side-by-side.png}

\# References

\hypertarget{refs}{}
\hypertarget{ref-pbe-2016}{}
Black, Andrew, Stéphane Ducasse, Oscar Nierstrasz, Damien Pollet, Damien
Cassou, Marcus Denker, Dmitri Zagidulin, Nicolai Hess, and Dimitris
Chloupis. 2016. \emph{Pharo by Example}. Square Bracket Associates.

\hypertarget{ref-moldable-debugger-2014}{}
Girba, Tudor, Andrei Chis, and Oscar Niertrasz. 2014. ``SCG: The
`Moldable Debugger'.''

\hypertarget{ref-luna-grafoscopio-2014}{}
Luna Cárdenas, Offray Vladimir. 2014. ``Metáforas Y Artefactos
Alternativos de Escritura Para Jalonar La Investigación Abierta Y La
Ciencia Ciudadana Y de Garage,'' September.

\hypertarget{ref-literate-computing-2015}{}
Perez, Fernando, and Brian E. Granger. 2015. ``Project Jupyter:
Computational Narratives as the Engine of Collaborative Data Science.''

<map version="freeplane 1.5.9">
<!--To view this file, download free mind mapping software Freeplane from http://freeplane.sourceforge.net -->
<node TEXT="Grafoscopio&#xa;ESUG 2016" FOLDED="false" ID="ID_861053468" CREATED="1472034834081" MODIFIED="1482255051087"><hook NAME="MapStyle" zoom="2.0">
    <properties fit_to_viewport="false;" show_note_icons="true"/>

<map_styles>
<stylenode LOCALIZED_TEXT="styles.root_node" STYLE="oval" UNIFORM_SHAPE="true" VGAP_QUANTITY="24.0 pt" TEXT_SHORTENED="true">
<font SIZE="24"/>
<richcontent TYPE="DETAILS" LOCALIZED_HTML="styles_background_html"/>
<stylenode LOCALIZED_TEXT="styles.predefined" POSITION="right" STYLE="bubble">
<font SIZE="9"/>
<stylenode LOCALIZED_TEXT="default" COLOR="#000000" STYLE="bubble" SHAPE_VERTICAL_MARGIN="0.0 pt" TEXT_ALIGN="CENTER" MAX_WIDTH="120.0 pt" MIN_WIDTH="120.0 pt">
<font NAME="Arial" SIZE="9" BOLD="true" ITALIC="false"/>
<edge STYLE="bezier" WIDTH="3"/>
</stylenode>
<stylenode LOCALIZED_TEXT="defaultstyle.details">
<font SIZE="11" BOLD="false"/>
</stylenode>
<stylenode LOCALIZED_TEXT="defaultstyle.attributes" COLOR="#000000" BACKGROUND_COLOR="#ffffff">
<font SIZE="9" BOLD="false"/>
</stylenode>
<stylenode LOCALIZED_TEXT="defaultstyle.note" COLOR="#000000" BACKGROUND_COLOR="#ffffff" TEXT_ALIGN="LEFT">
<font BOLD="false"/>
</stylenode>
<stylenode LOCALIZED_TEXT="defaultstyle.floating">
<edge STYLE="hide_edge"/>
</stylenode>
</stylenode>
<stylenode LOCALIZED_TEXT="styles.user-defined" POSITION="right" STYLE="bubble">
<font SIZE="9"/>
<stylenode LOCALIZED_TEXT="styles.important">
<icon BUILTIN="yes"/>
<edge COLOR="#0000cc"/>
</stylenode>
</stylenode>
<stylenode LOCALIZED_TEXT="styles.AutomaticLayout" POSITION="right" STYLE="bubble">
<font SIZE="9"/>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level.root" COLOR="#000000" STYLE="oval" UNIFORM_SHAPE="true" MAX_WIDTH="120.0 pt" MIN_WIDTH="120.0 pt">
<font SIZE="24" ITALIC="true"/>
<edge STYLE="bezier" WIDTH="3"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,1">
<edge COLOR="#000000"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,2">
<edge COLOR="#ff0033"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,3">
<edge COLOR="#009933"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,4">
<edge COLOR="#3333ff"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,5">
<edge COLOR="#ff6600"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,6">
<edge COLOR="#cc00cc"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,7">
<edge COLOR="#ffbf00"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,8">
<edge COLOR="#00ff99"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,9">
<edge COLOR="#0099ff"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,10">
<edge COLOR="#996600"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,11">
<edge COLOR="#000000"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,12">
<edge COLOR="#cc0066"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,13">
<edge COLOR="#33ff00"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,14">
<edge COLOR="#ff9999"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,15">
<edge COLOR="#0000cc"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,16">
<edge COLOR="#cccc00"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,17">
<edge COLOR="#0099cc"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,18">
<edge COLOR="#006600"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,19">
<edge COLOR="#ff00cc"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,20">
<edge COLOR="#00cc00"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,21">
<edge COLOR="#0066cc"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,22">
<edge COLOR="#00ffff"/>
</stylenode>
</stylenode>
</stylenode>
</map_styles>
</hook>
<hook NAME="accessories/plugins/AutomaticLayout.properties" VALUE="ALL"/>
<font SIZE="18"/>
<hook NAME="AutomaticEdgeColor" COUNTER="0" RULE="FOR_COLUMNS"/>
<node TEXT="How do we&#xa;change&#xa;the tools&#xa;that change us?" POSITION="right" ID="ID_814860269" CREATED="1472044198805" MODIFIED="1472142318798">
<font SIZE="13"/>
<node TEXT="we" ID="ID_351134282" CREATED="1472044232640" MODIFIED="1472045551380">
<font SIZE="13"/>
<node TEXT="Local hackerspace&#xa;( Bogot&#xe1; - Colombia )" FOLDED="true" ID="ID_1551691087" CREATED="1472044252711" MODIFIED="1472044334030">
<font SIZE="10"/>
<node TEXT="HackBo" ID="ID_1306611386" CREATED="1472044265467" MODIFIED="1472044316425">
<font SIZE="10"/>
<node TEXT="hackbo.co" ID="ID_996645644" CREATED="1472120423141" MODIFIED="1472129542114" LINK="http://hackbo.co/">
<hook URI="../../../../../../Descargas/hackbo.png" SIZE="0.44020543" NAME="ExternalObject"/>
</node>
</node>
<node TEXT="But beyond your usual &quot;geek/nerd&quot;&#xa;(i.e. The programmer)" ID="ID_541718207" CREATED="1472044276596" MODIFIED="1472120529824">
<font SIZE="10"/>
<node TEXT="Let&apos;s bring more geeks" ID="ID_1433090692" CREATED="1472044299518" MODIFIED="1472045019662">
<font SIZE="10"/>
<richcontent TYPE="NOTE">

<html>
  <head>
    
  </head>
  <body>
    <p>
      
    </p>
    <p>
      <font size="3">Although often considered as a pejorative, the term is also used self-referentially without malice or as a source of pride. Its meaning has evolved to refer to &quot;someone who is interested in a subject (usually intellectual or complex) for its own sake&quot;.</font>
    </p>
    <p>
      
    </p>
    <p>
      <a href="https://en.wikipedia.org/wiki/Geek">Geek - Wikipedia</a>
    </p>
  </body>
</html>
</richcontent>
<node TEXT="Health" ID="ID_1915853923" CREATED="1472044438912" MODIFIED="1472044460421">
<node TEXT="DSL for public health info" ID="ID_1867484247" CREATED="1472045108861" MODIFIED="1472046100114" LINK="http://mutabit.com/offray/blog/en/entry/sdv-infomed">
<hook URI="grafoscopio-ESUG-2016_2217518226715232305.png" SIZE="0.7741935" NAME="ExternalObject"/>
</node>
</node>
<node TEXT="Journalism" ID="ID_1515131252" CREATED="1472044384374" MODIFIED="1472044475892">
<node TEXT="Panama Paper &amp; Reproducible Research" ID="ID_474654520" CREATED="1472046353586" MODIFIED="1472046395531" LINK="http://mutabit.com/offray/blog/en/entry/panama-papers-1">
<hook URI="grafoscopio-ESUG-2016_5968308155747760333.png" SIZE="0.3125" NAME="ExternalObject"/>
</node>
</node>
<node TEXT="Activism" ID="ID_1990068617" CREATED="1472044396764" MODIFIED="1472044479291">
<node TEXT="Twitter Data Selfies" ID="ID_1529442406" CREATED="1472046946880" MODIFIED="1472046966799" LINK="http://mutabit.com/offray/blog/en/entry/ds-twitter-mockup">
<hook URI="grafoscopio-ESUG-2016-data-selfies.png" SIZE="0.75" NAME="ExternalObject"/>
</node>
</node>
</node>
</node>
</node>
</node>
<node TEXT="The tools" ID="ID_810495737" CREATED="1472044237399" MODIFIED="1472044249011">
<font SIZE="12"/>
<node TEXT="Dataviz" ID="ID_943285378" CREATED="1472045260156" MODIFIED="1472047002165" LINK="http://smalltalkhub.com/#!/~Offray/Dataviz">
<font SIZE="12"/>
</node>
<node TEXT="Grafoscopio" FOLDED="true" ID="ID_1036095775" CREATED="1472045255022" MODIFIED="1482255068353">
<font SIZE="12"/>
<node TEXT="Home page" ID="ID_1719698504" CREATED="1472047021661" MODIFIED="1472129720832" LINK="http://mutabit.com/grafoscopio/"/>
<node TEXT="ST Repository" ID="ID_1204870492" CREATED="1472047028969" MODIFIED="1482255068356" LINK="http://smalltalkhub.com/#!/~Offray/Grafoscopio"/>
<node TEXT="Doc Repository" ID="ID_1198821833" CREATED="1472047075130" MODIFIED="1472129704710" LINK="http://mutabit.com/repos.fossil/grafoscopio/"/>
</node>
</node>
<node TEXT="The practices&#xa;( we + tools + context + ... )" ID="ID_411856785" CREATED="1472120618969" MODIFIED="1472130004806">
<font SIZE="12"/>
<node TEXT="Data Week" FOLDED="true" ID="ID_1143378394" CREATED="1472120662345" MODIFIED="1472120671086">
<font SIZE="11"/>
<node TEXT="Long Week hackathon/workshop" ID="ID_1162527362" CREATED="1472129149175" MODIFIED="1472129428579"/>
<node TEXT="4 editions&#xa;in almost 1 year" ID="ID_1422285264" CREATED="1472120672508" MODIFIED="1472129763699">
<font SIZE="11"/>
</node>
<node TEXT="Diverse people" ID="ID_1874312713" CREATED="1472120678830" MODIFIED="1472120697313">
<font SIZE="11"/>
<node TEXT="" ID="ID_124366995" CREATED="1472128819269" MODIFIED="1472128819270">
<hook NAME="FirstGroupNode"/>
</node>
<node TEXT="" ID="ID_567637473" CREATED="1472120813699" MODIFIED="1472120830811">
<hook URI="grafoscopio-people1.png" SIZE="0.8685062" NAME="ExternalObject"/>
</node>
<node TEXT="" ID="ID_1725447657" CREATED="1472121193023" MODIFIED="1472121201135">
<hook URI="people2.png" SIZE="1.0" NAME="ExternalObject"/>
</node>
<node TEXT="" ID="ID_913072837" CREATED="1472128819268" MODIFIED="1472128819269">
<hook NAME="SummaryNode"/>
<hook NAME="AlwaysUnfoldedNode"/>
<node TEXT="backgrounds" ID="ID_437479582" CREATED="1472128819270" MODIFIED="1472128851413">
<node TEXT="Librarian" ID="ID_1442280177" CREATED="1472128852327" MODIFIED="1472128946024"/>
<node TEXT="(Mostly newbie) Programmers&#xa;(like myself)" ID="ID_955697181" CREATED="1472128862688" MODIFIED="1472128959043"/>
<node TEXT="Philosophers" ID="ID_94654556" CREATED="1472128877755" MODIFIED="1472128886624"/>
<node TEXT="Journalists" ID="ID_64548780" CREATED="1472128887115" MODIFIED="1472128906931"/>
<node TEXT="Philology students" ID="ID_1247952164" CREATED="1472128907774" MODIFIED="1472129848695"/>
</node>
</node>
</node>
<node TEXT="New extra curriculum/support" ID="ID_285814954" CREATED="1472129772988" MODIFIED="1472129818801">
<font SIZE="11"/>
<node TEXT="Pharo MOOC" ID="ID_1838395670" CREATED="1472129794628" MODIFIED="1472129824138">
<font SIZE="10"/>
</node>
<node TEXT="Mailing list" ID="ID_1159519573" CREATED="1472129800986" MODIFIED="1472129827902" LINK="http://mutabit.com/grafoscopio/#contacto">
<font SIZE="10"/>
</node>
</node>
<node TEXT="Looking for numeracy&#xa;(not only BIG fancy DATA)" ID="ID_1755202738" CREATED="1472135234040" MODIFIED="1472135265412">
<font SIZE="9"/>
<node TEXT="making sense = numbers + context" ID="ID_953465328" CREATED="1472135268360" MODIFIED="1472137346528">
<font SIZE="11"/>
</node>
</node>
</node>
</node>
</node>
</node>
</map>

<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet href="treestyles.css" type="text/css"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!--This file has been created with toxhtml.xsl--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><title>Grafoscopio &amp; Data Week</title><link rel="stylesheet" href="grafoscopio-mapa.html_files/treestyles.css" type="text/css"/><script type="text/javascript" src="grafoscopio-mapa.html_files/marktree.js"> 
	</script></head><body><div class="basetop"><a href="#" onclick="expandAll(document.getElementById('base'))">Expand</a> -
<a href="#" onclick="collapseAll(document.getElementById('base'))">Collapse</a></div><div id="base" class="basetext"><ul>
	<li class="col" id="FMID_1788535810FM"><div class="boxed"><div class="nodecontent" style="color:#000000;font-size:150%;font-weight:bold;font-style:italic;">Grafoscopio &amp; Data Week</div><div class="note-and-attributes"><span class="note"><p><font size="4">Adaptable tool for visualization, open data, and reproducible research</font></p></span></div></div>
		<ul class="subexp">
	<li class="col" id="FMID_1635066869FM"><div class="nodecontent" style="color:#000000;font-size:133%;font-weight:bold;">First thanks!</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1495902729FM"><div class="nodecontent" style="color:#000000;font-size:133%;">For being here</div></li>
	<li class="col" id="FMID_1671005998FM"><div class="nodecontent" style="color:#000000;font-size:133%;">For having me here</div>
		<ul class="subexp">
	<li class="col" id="FMID_733048315FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Hosts</div>
		<ul class="subexp">
	<li class="col" id="FMID_421708629FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Recurrent</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1617778456FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="http://hackbo.co/">HackBo</a> <a href="http://hackbo.co/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li>
	<li class="col" id="FMID_1320412947FM"><div class="nodecontent" style="color:#000000;font-size:117%;">First timers<br/>(March, 2017)</div>
		<ul class="subexp">
	<li class="exp" id="FMID_265928318FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="http://mutabit.com/repos.fossil/grafoscopio/timeline?n=400&amp;y=all&amp;v=0">IFF / Valencia</a> <a href="http://mutabit.com/repos.fossil/grafoscopio/timeline?n=400&amp;y=all&amp;v=0"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div>
		<ul class="sub">
	<li class="basic" id="FMID_530831548FM"><div class="nodecontent" style="color:#000000;font-size:83%;font-weight:bold;">All team work that make it possible</div></li></ul></li>
	<li class="exp" id="FMID_1393205914FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Osoco</div>
		<ul class="sub">
	<li class="basic" id="FMID_175256701FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Rafael</div></li>
	<li class="basic" id="FMID_200408910FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Jose</div></li></ul></li>
	<li class="exp" id="FMID_643343902FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="http://medialab-prado.es/">Media Lab El Prado</a> <a href="http://medialab-prado.es/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div>
		<ul class="sub">
	<li class="basic" id="FMID_1919427964FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Adolfo</div></li>
	<li class="basic" id="FMID_1614725774FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Antonio</div></li>
	<li class="basic" id="FMID_215091947FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Sonia</div></li>
	<li class="basic" id="FMID_1361228748FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Marcos</div></li></ul></li></ul></li></ul></li></ul></li>
	<li class="basic" id="FMID_663940769FM"><div class="nodecontent" style="color:#000000;font-size:133%;">Let's make this a conversation</div></li>
	<li class="col" id="FMID_1311107528FM"><div class="nodecontent" style="color:#000000;font-size:133%;">For those who came in late...</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1494445487FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li></ul></li></ul></li>
	<li class="col" id="FMID_1414905294FM"><div class="nodecontent" style="color:#000000;font-size:133%;font-weight:bold;">Design approach</div>
		<ul class="subexp">
	<li class="col" id="FMID_194660459FM"><div class="nodecontent" style="color:#000000;font-size:133%;">Enactive understanding</div>
		<ul class="subexp">
	<li class="col" id="FMID_1275453281FM"><div class="boxed"><div class="nodecontent" style="color:#000000;font-size:133%;">Software as a craft</div><div class="note-and-attributes"><span class="note"><p>
      Aaron, Blackwell
    </p></span></div></div>
		<ul class="subexp">
	<li class="col" id="FMID_285929011FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Embodies designer/artisan knowledge</div>
		<ul class="subexp">
	<li class="col" id="FMID_734497781FM"><div class="boxed"><div class="nodecontent" style="color:#000000;font-size:100%;">About previous used and/or inspiring tools</div><div class="note-and-attributes"><span class="note"><p><b>Inspiration &amp; frustration </b>Frustration is also a way of knowledge:
    </p><p>
      There is also some stuff I don't like about these tools,
    </p><p>
      or that I would like to mix and match for my own needs.
    </p></span></div></div>
		<ul class="subexp">
	<li class="basic" id="FMID_1954215551FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li>
	<li class="basic" id="FMID_1079885802FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://texmacs.org/">TeXmacs</a> <a href="http://texmacs.org/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_1711003079FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Squeak / Smalltalk</div></li>
	<li class="col" id="FMID_1555803959FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="basic" id="FMID_518080209FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"><a href="http://mutabit.com/repos.fossil/offray-maestria-tesis/index">Combined in my masters thesis</a> <a href="http://mutabit.com/repos.fossil/offray-maestria-tesis/index"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li>
	<li class="basic" id="FMID_1563202036FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li>
	<li class="col" id="FMID_610784909FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://jupyter.org/">Jupyter<br/>(&amp; Mathematica)</a> <a href="http://jupyter.org/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div>
		<ul class="subexp">
	<li class="col" id="FMID_1995072513FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Notebooks are like REPL on steroids</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1903142966FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://mutabit.com/repos.fossil/piamed/doc/tip/Afiche/narrativa.png">Long teletype scrolls<br/>(or pile of files on folders)</a> <a href="http://mutabit.com/repos.fossil/piamed/doc/tip/Afiche/narrativa.png"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div> <a onclick="getVisibleParents('FMID_420200085FM')" href="#FMID_420200085FM"><img src="grafoscopio-mapa.html_files/ilink.png" class="ilink" alt="Connector"/></a></li>
	<li class="col" id="FMID_1297490452FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://jupyterlab.github.io/jupyterlab/">JupyterLab may change that</a> <a href="http://jupyterlab.github.io/jupyterlab/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div>
		<ul class="subexp">
	<li class="basic" id="FMID_548761401FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="https://www.youtube.com/watch?v=Ejh0ftSjk6g">IDE<br/>(I: interactive)</a> <a href="https://www.youtube.com/watch?v=Ejh0ftSjk6g"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_1159662982FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Start with the notebook, end in the IDE</div></li>
	<li class="basic" id="FMID_799557291FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Grafoscopio followed the inverse path: Providing notebook functionlity to a live coding IDE</div></li></ul></li></ul></li></ul></li>
	<li class="col" id="FMID_924431689FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://leoeditor.com/">Leo Editor</a> <a href="http://leoeditor.com/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div>
		<ul class="subexp">
	<li class="col" id="FMID_1545718998FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Trees as</div>
		<ul class="subexp">
	<li class="basic" id="FMID_395321482FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Emergent order</div></li>
	<li class="basic" id="FMID_1632177561FM"><div class="nodecontent" style="color:#000000;font-size:100%;">self referential programmable documents</div></li>
	<li class="basic" id="FMID_1471150051FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://mutabit.com/offray/static/blog/output/posts/la-forma-en-que-escribo-para-el-doctorado.html">Example</a> <a href="http://mutabit.com/offray/static/blog/output/posts/la-forma-en-que-escribo-para-el-doctorado.html"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li></ul></li>
	<li class="col" id="FMID_1589210534FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="col" id="FMID_1331920000FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="col" id="FMID_1594365174FM"><img src="grafoscopio-mapa.html_files/icons/help.png" alt="help"/> <img src="grafoscopio-mapa.html_files/icons/idea.png" alt="idea"/> <div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://mutabit.com/offray/static/blog/output/posts/on-deepness-and-complexity-of-ipython-documents.html">Can them be combined?</a> <a href="http://mutabit.com/offray/static/blog/output/posts/on-deepness-and-complexity-of-ipython-documents.html"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div>
		<ul class="subexp">
	<li class="col" id="FMID_1842646984FM"><div class="nodecontent" style="color:#000000;font-size:100%;">web app test case:<br/>web2py + IPython</div>
		<ul class="subexp">
	<li class="basic" id="FMID_747655842FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li>
	<li class="col" id="FMID_1846172900FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Paradigms</div>
		<ul class="subexp">
	<li class="basic" id="FMID_846876195FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">client - server</div></li>
	<li class="basic" id="FMID_851426132FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">scripting</div></li>
	<li class="basic" id="FMID_1265104829FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">imperative</div></li>
	<li class="basic" id="FMID_449762229FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">objects</div></li>
	<li class="basic" id="FMID_598327140FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">databases</div></li></ul></li>
	<li class="col" id="FMID_1048500532FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Technologies</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1177637086FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">python</div></li>
	<li class="basic" id="FMID_666280745FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">qt</div></li>
	<li class="basic" id="FMID_984609384FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">javascript</div></li>
	<li class="basic" id="FMID_1315850833FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">zeromq</div></li></ul></li>
	<li class="col" id="FMID_1620809771FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Formats</div>
		<ul class="subexp">
	<li class="basic" id="FMID_522798082FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">markup</div></li>
	<li class="basic" id="FMID_1177890644FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">serialization</div></li>
	<li class="basic" id="FMID_638858160FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">xml</div></li>
	<li class="basic" id="FMID_1040632156FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">json</div></li>
	<li class="basic" id="FMID_960768717FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">html</div></li></ul></li>
	<li class="col" id="FMID_145627716FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="col" id="FMID_1298268637FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="basic" id="FMID_240314460FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">this is NOT "natural" complexity</div></li></ul></li></ul></li>
	<li class="col" id="FMID_1795664907FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Examples</div>
		<ul class="subexp">
	<li class="basic" id="FMID_29958381FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"><a href="http://mutabit.com/offray/static/blog/output/posts/publicaciones-abiertas-para-la-web-primeras-pruebas.html"><p><font color="#000000">Publicaciones abiertas para la web: primeras pruebas</font></p></a> <a href="http://mutabit.com/offray/static/blog/output/posts/publicaciones-abiertas-para-la-web-primeras-pruebas.html"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_382148520FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"><a href="http://mutabit.com/offray/static/blog/output/posts/indie-science-indie-web-opengarage-science.html">Indie Web Science</a> <a href="http://mutabit.com/offray/static/blog/output/posts/indie-science-indie-web-opengarage-science.html"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li></ul></li>
	<li class="col" id="FMID_1851365733FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="https://vimeo.com/94724841">Software as a graph</a> <a href="https://vimeo.com/94724841"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div>
		<ul class="subexp">
	<li class="basic" id="FMID_1422822961FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://mutabit.com/offray/static/blog/output/posts/pharo-by-visualization.html">Pharo by Visualization</a> <a href="http://mutabit.com/offray/static/blog/output/posts/pharo-by-visualization.html"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li>
	<li class="basic" id="FMID_173310481FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://mutabit.com/offray/static/blog/output/posts/grafoscopio-idea-and-initial-progress.html">More info</a> <a href="http://mutabit.com/offray/static/blog/output/posts/grafoscopio-idea-and-initial-progress.html"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li></ul></li></ul></li></ul></li>
	<li class="col" id="FMID_1563376675FM"><div class="nodecontent" style="color:#000000;font-size:100%;">About knowledge as a commons/right and technology as its incarnation</div>
		<ul class="subexp">
	<li class="exp" id="FMID_1636480409FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Activism</div>
		<ul class="sub">
	<li class="basic" id="FMID_1491596254FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Choosing of themes (we'll zoom on that later)</div></li>
	<li class="basic" id="FMID_1383985138FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Metrics as critical devices</div> <a onclick="getVisibleParents('FMID_1580958585FM')" href="#FMID_1580958585FM"><img src="grafoscopio-mapa.html_files/ilink.png" class="ilink" alt="Connector"/></a></li></ul></li>
	<li class="exp" id="FMID_1580958585FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Commons as socioeconomic model</div>
		<ul class="sub">
	<li class="basic" id="FMID_1516606435FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Coop economies</div></li>
	<li class="exp" id="FMID_621662963FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Frontiers for value transition</div>
		<ul class="sub">
	<li class="basic" id="FMID_1633396808FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Working outside the commons to sustain the commons</div></li>
	<li class="basic" id="FMID_1740908960FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Differential prices for commoners and non-commoners</div></li></ul></li></ul></li>
	<li class="exp" id="FMID_1768345449FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Licensing</div>
		<ul class="sub">
	<li class="basic" id="FMID_1377214229FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Grafoscopio: MIT</div></li>
	<li class="basic" id="FMID_34257295FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Manual/Tutorial: P2p</div></li></ul></li></ul></li>
	<li class="col" id="FMID_518957493FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Conceptual searchs</div>
		<ul class="subexp">
	<li class="basic" id="FMID_55524328FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li>
	<li class="basic" id="FMID_1790524288FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Computer is a cognitive artifact</div></li>
	<li class="basic" id="FMID_951576003FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Computer as an expressive medium</div></li>
	<li class="col" id="FMID_1554381488FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="basic" id="FMID_1743097091FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">is not mostly about being "productive" is about being transformed (like with books, movies, games, etc)</div></li></ul></li>
	<li class="col" id="FMID_1638642274FM"><img src="grafoscopio-mapa.html_files/icons/help.png" alt="help"/> <div class="nodecontent" style="color:#000000;font-size:100%;">Subjacent rules and metaphors behind informatics</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1936867924FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="https://en.wikipedia.org/wiki/Maxwell%27s_equations">Maxwell Equations of informatics</a> <a href="https://en.wikipedia.org/wiki/Maxwell%27s_equations"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_1689400527FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Stretching graphs/trees, mind/concept maps as metaphors for writing, presenting, etc.</div></li></ul></li></ul></li></ul></li></ul></li>
	<li class="col" id="FMID_1545124738FM"><div class="nodecontent" style="color:#000000;font-size:133%;">Design: crosspollination  &amp; floppology</div>
		<ul class="subexp">
	<li class="col" id="FMID_949684058FM"><div class="nodecontent" style="color:#000000;font-size:108%;"><p style="text-align: center">
      What if inspiration for the future
    </p><p style="text-align: center">
      is in the past and the
    </p><p style="text-align: center">
       crossborder?
    </p></div>
		<ul class="subexp">
	<li class="col" id="FMID_1082024002FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Bifurcation points</div>
		<ul class="subexp">
	<li class="col" id="FMID_79858538FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="col" id="FMID_1230433091FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="col" id="FMID_1202612660FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="basic" id="FMID_699812615FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">imágenes tomadas de:<br/>Jonas, Wolfgang<br/>Design Research and its Meaning to the<br/>Methodological Development of the Discipline</div></li>
	<li class="basic" id="FMID_1011887468FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="https://www.iconeye.com/design/features/item/10859-vapourware-technology-that-might-have-been">Example: The technology that could have been</a> <a href="https://www.iconeye.com/design/features/item/10859-vapourware-technology-that-might-have-been"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li></ul></li></ul></li>
	<li class="col" id="FMID_939244794FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><p style="text-align: center">
      Bifurcation
    </p><p style="text-align: center">
      (recombination?)
    </p></div>
		<ul class="subexp">
	<li class="basic" id="FMID_420200085FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">unix fathers</div></li>
	<li class="col" id="FMID_727237537FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">dynabook children</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1677076092FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">sketchpad</div></li>
	<li class="basic" id="FMID_1226640772FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">GUI - 1977</div></li>
	<li class="col" id="FMID_1987415622FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Alan Kay holding a dynabook mockup (Wikipedia)</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1983032729FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"><a href="http://www.computerhistory.org/revolution/mobile-computing/18/315/1683">Card board mockup zoom</a> <a href="http://www.computerhistory.org/revolution/mobile-computing/18/315/1683"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_611568533FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"><a href="https://www.flickr.com/photos/briantrice/6279211096/in/photostream/">In the Computer History Museum</a> <a href="https://www.flickr.com/photos/briantrice/6279211096/in/photostream/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_1006352303FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"><a href="https://www.google.com/imgres?imgurl=http%3A%2F%2Ffacweb.cs.depaul.edu%2Fsgrais%2Fimages%2FiP_Project%2Fdynabook-01.gif&amp;imgrefurl=http%3A%2F%2Ffacweb.cs.depaul.edu%2Fsgrais%2Ftablet_application_project.htm&amp;docid=OhmWcwiybpfLTM&amp;tbnid=aPVktDdMIBoaFM%3A&amp;vet=10ahUKEwja05nB_-zSAhXLQiYKHc-TDBwQMwgjKAgwCA..i&amp;w=480&amp;h=699&amp;bih=605&amp;biw=1366&amp;q=alan%20kay%20holding%20a%20dynabook%20mockup&amp;ved=0ahUKEwja05nB_-zSAhXLQiYKHc-TDBwQMwgjKAgwCA&amp;iact=mrc&amp;uact=8#h=699&amp;imgrc=aPVktDdMIBoaFM:&amp;vet=10ahUKEwja05nB_-zSAhXLQiYKHc-TDBwQMwgjKAgwCA..i&amp;w=480">As a paper (1972) with children as users!</a> <a href="https://www.google.com/imgres?imgurl=http%3A%2F%2Ffacweb.cs.depaul.edu%2Fsgrais%2Fimages%2FiP_Project%2Fdynabook-01.gif&amp;imgrefurl=http%3A%2F%2Ffacweb.cs.depaul.edu%2Fsgrais%2Ftablet_application_project.htm&amp;docid=OhmWcwiybpfLTM&amp;tbnid=aPVktDdMIBoaFM%3A&amp;vet=10ahUKEwja05nB_-zSAhXLQiYKHc-TDBwQMwgjKAgwCA..i&amp;w=480&amp;h=699&amp;bih=605&amp;biw=1366&amp;q=alan%20kay%20holding%20a%20dynabook%20mockup&amp;ved=0ahUKEwja05nB_-zSAhXLQiYKHc-TDBwQMwgjKAgwCA&amp;iact=mrc&amp;uact=8#h=699&amp;imgrc=aPVktDdMIBoaFM:&amp;vet=10ahUKEwja05nB_-zSAhXLQiYKHc-TDBwQMwgjKAgwCA..i&amp;w=480"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="col" id="FMID_1269828332FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Inspired by</div>
		<ul class="subexp">
	<li class="basic" id="FMID_906081381FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li>
	<li class="basic" id="FMID_971417126FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Jerome Bruner</div></li>
	<li class="basic" id="FMID_1331819488FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Piaget</div></li>
	<li class="exp" id="FMID_1792238066FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"><p><font color="#000000">Paper</font></p></div>
		<ul class="sub">
	<li class="basic" id="FMID_320458437FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Cavallo</div></li></ul></li>
	<li class="col" id="FMID_1404942344FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="exp" id="FMID_252851311FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">understanding ways</div>
		<ul class="sub">
	<li class="col" id="FMID_1209156766FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Enactive</div>
		<ul class="subexp">
	<li class="basic" id="FMID_925256708FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Actions</div></li></ul></li>
	<li class="col" id="FMID_497295895FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Iconic</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1972723914FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Images</div></li></ul></li>
	<li class="col" id="FMID_701371922FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Symbolic</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1739018062FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Symbols: Words, Equations, etc.</div></li></ul></li></ul></li>
	<li class="col" id="FMID_215404496FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Close to gettin it... but not quite</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1226964568FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"><a href="https://youtu.be/J33pVRdxWbw?t=363">How Steve Jobs got the ideas of GUI from XEROX</a> <a href="https://youtu.be/J33pVRdxWbw?t=363"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li></ul></li></ul></li></ul></li></ul></li>
	<li class="basic" id="FMID_1639831104FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Free (as in Freedom) Software</div></li></ul></li></ul></li></ul></li></ul></li>
	<li class="col" id="FMID_300075086FM"><div class="nodecontent" style="color:#000000;font-size:133%;">Deconstruct<br/>critical divides</div>
		<ul class="subexp">
	<li class="col" id="FMID_1120728442FM"><div class="nodecontent" style="color:#000000;font-size:133%;">Software<br/>User/Developer</div>
		<ul class="subexp">
	<li class="col" id="FMID_1134043575FM"><div class="nodecontent" style="color:#000000;font-size:133%;">Tools model<br/>thought</div>
		<ul class="subexp">
	<li class="col" id="FMID_569765346FM"><div class="nodecontent" style="color:#000000;font-size:133%;">What colors<br/>can we not see?</div>
		<ul class="subexp">
	<li class="basic" id="FMID_444271451FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Infrared</div></li>
	<li class="basic" id="FMID_1268873049FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Ultraviolet</div></li></ul></li>
	<li class="basic" id="FMID_1747340735FM"><div class="nodecontent" style="color:#000000;font-size:133%;">What thoughts<br/>can we not have</div></li>
	<li class="col" id="FMID_658263291FM"><div class="nodecontent" style="color:#000000;font-size:133%;">Only a hammer...</div>
		<ul class="subexp">
	<li class="col" id="FMID_871157972FM"><div class="nodecontent" style="color:#000000;font-size:117%;">When the only thing I have is a hammer, all looks like nails</div>
		<ul class="subexp">
	<li class="col" id="FMID_1455832616FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Some sad common examples</div>
		<ul class="subexp">
	<li class="col" id="FMID_228261847FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Power Pointitis</div>
		<ul class="subexp">
	<li class="basic" id="FMID_562685676FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li></ul></li>
	<li class="col" id="FMID_1114502910FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Wordsitis</div>
		<ul class="subexp">
	<li class="basic" id="FMID_993090193FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li></ul></li></ul></li>
	<li class="col" id="FMID_1251530825FM"><div class="nodecontent" style="color:#000000;font-size:117%;">...and refreshing alternatives</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1774998048FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="http://www.literatureandlatte.com/scrivener.php">Scrivener</a> <a href="http://www.literatureandlatte.com/scrivener.php"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_1112902952FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="https://ghost.org/es/vs/tumblr/">Ulysses</a> <a href="https://ghost.org/es/vs/tumblr/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_760404261FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Atom</div></li>
	<li class="basic" id="FMID_809178773FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="http://happenapps.com/#quiver">Quiver</a> <a href="http://happenapps.com/#quiver"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_1614854557FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="https://ghost.org/es/vs/tumblr/">Ghost</a> <a href="https://ghost.org/es/vs/tumblr/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li>
	<li class="col" id="FMID_210903331FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Could be<br/>the other way around?</div>
		<ul class="subexp">
	<li class="col" id="FMID_1071880995FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="col" id="FMID_47552786FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="col" id="FMID_1910453462FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="exp" id="FMID_806997874FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="sub">
	<li class="basic" id="FMID_726792367FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"><a href="https://vimeo.com/83019193">imágenes tomadas de:<br/>https://vimeo.com/83019193</a> <a href="https://vimeo.com/83019193"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li></ul></li></ul></li></ul></li>
	<li class="col" id="FMID_854197478FM"><div class="nodecontent" style="color:#000000;font-size:117%;font-style:italic;">An example</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1550367081FM"><div class="nodecontent" style="color:#000000;font-size:100%;font-weight:bold;"><a href="http://mutabit.com/offray/blog/en/entry/sdv-infomed">Specific domain visualizations for public information on medicine</a> <a href="http://mutabit.com/offray/blog/en/entry/sdv-infomed"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li></ul></li></ul></li></ul></li></ul></li></ul></li>
	<li class="col" id="FMID_1800746997FM"><div class="nodecontent" style="color:#000000;font-size:133%;">Data</div>
		<ul class="subexp">
	<li class="col" id="FMID_1505876776FM"><div class="nodecontent" style="color:#000000;font-size:133%;">... the answer to a question that could be asked in a different way</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1805605311FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li>
	<li class="col" id="FMID_498942573FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Some of them are inmutable</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1525145796FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li></ul></li>
	<li class="col" id="FMID_1005475289FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Most of them are our design</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1622679955FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li></ul></li>
	<li class="col" id="FMID_1063530166FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="col" id="FMID_1826689929FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Who becomes data of who?</div>
		<ul class="subexp">
	<li class="col" id="FMID_1724253087FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Now: only they watching us</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1804222671FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Possible: also us watching them</div></li></ul></li></ul></li></ul></li></ul></li></ul></li>
	<li class="basic" id="FMID_1844373844FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li>
	<li class="col" id="FMID_833345178FM"><div class="nodecontent" style="color:#000000;font-size:133%;">Code / Data / Doc</div>
		<ul class="subexp">
	<li class="col" id="FMID_999012132FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Complex multilayered<br/>infrastructure</div>
		<ul class="subexp">
	<li class="basic" id="FMID_639023372FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/></li>
	<li class="basic" id="FMID_460495295FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Document</div></li>
	<li class="basic" id="FMID_792347259FM"><div class="nodecontent" style="color:#000000;font-size:100%;">App</div></li>
	<li class="col" id="FMID_583461027FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="basic" id="FMID_887594311FM"><div class="nodecontent" style="color:#000000;font-size:83%;">This is where<br/>"end user" lives</div></li></ul></li>
	<li class="basic" id="FMID_1987475536FM"><div class="nodecontent" style="color:#000000;font-size:100%;">IDE</div></li>
	<li class="basic" id="FMID_86422565FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Programming language</div></li>
	<li class="basic" id="FMID_488639543FM"><div class="nodecontent" style="color:#000000;font-size:100%;">OS</div></li></ul></li></ul></li>
	<li class="col" id="FMID_1676590116FM"><div class="nodecontent" style="color:#000000;font-size:133%;">"Big" / small<br/>data</div>
		<ul class="subexp">
	<li class="col" id="FMID_1349328036FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Those who control infrastructure define/confine interaction</div>
		<ul class="subexp">
	<li class="col" id="FMID_1713268598FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Pocket infrastructures</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1457715460FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Work online / offline</div></li>
	<li class="basic" id="FMID_648541265FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Fit in your pocket</div></li>
	<li class="basic" id="FMID_1720601800FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Self contained</div> <a onclick="getVisibleParents('FMID_999012132FM')" href="#FMID_999012132FM"><img src="grafoscopio-mapa.html_files/ilink.png" class="ilink" alt="Connector"/></a></li></ul></li></ul></li></ul></li>
	<li class="col" id="FMID_1529605818FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;"/>
		<ul class="subexp">
	<li class="col" id="FMID_911910882FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Examples</div>
		<ul class="subexp">
	<li class="basic" id="FMID_101737518FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="http://mutabit.com/offray/blog/en/entry/panama-papers-1">Panama Papers &amp; Offshore leaks</a> <a href="http://mutabit.com/offray/blog/en/entry/panama-papers-1"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_1375017178FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="http://mutabit.com/offray/blog/en/entry/ds-twitter-mockup">Twitter Data Selfies</a> <a href="http://mutabit.com/offray/blog/en/entry/ds-twitter-mockup"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div> <a onclick="getVisibleParents('FMID_1804222671FM')" href="#FMID_1804222671FM"><img src="grafoscopio-mapa.html_files/ilink.png" class="ilink" alt="Connector"/></a></li></ul></li></ul></li></ul></li></ul></li></ul></li>
	<li class="col" id="FMID_510182000FM"><div class="nodecontent" style="color:#000000;font-size:133%;font-weight:bold;">Artifacts + communities</div>
		<ul class="subexp">
	<li class="col" id="FMID_888903068FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="http://mutabit.com/dataweek/">Data Week</a> <a href="http://mutabit.com/dataweek/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div>
		<ul class="subexp">
	<li class="col" id="FMID_956021400FM"><div class="nodecontent" style="color:#000000;font-size:117%;font-weight:bold;">+</div>
		<ul class="subexp">
	<li class="col" id="FMID_790073246FM"><div class="nodecontent" style="color:#000000;font-size:117%;">workshop</div>
		<ul class="subexp">
	<li class="basic" id="FMID_602906774FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Learning by doing and example</div></li></ul></li>
	<li class="col" id="FMID_1651990700FM"><div class="nodecontent" style="color:#000000;font-size:117%;">hackathon</div>
		<ul class="subexp">
	<li class="basic" id="FMID_669460352FM"><div class="nodecontent" style="color:#000000;font-size:100%;">Intensive Prototyping &amp; community building</div></li></ul></li></ul></li>
	<li class="col" id="FMID_1445774687FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Participant's profiles</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1001768227FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Teacher</div></li>
	<li class="basic" id="FMID_1264557109FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Student</div></li>
	<li class="basic" id="FMID_1991615083FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Philosoper</div></li>
	<li class="basic" id="FMID_276742432FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Journalist</div></li>
	<li class="basic" id="FMID_1050523970FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Newbie</div></li>
	<li class="basic" id="FMID_1478001231FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Hacker / Coder</div></li>
	<li class="basic" id="FMID_498106734FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Researcher</div></li>
	<li class="basic" id="FMID_1339331785FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Activist</div></li></ul></li>
	<li class="col" id="FMID_1459797017FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Capacity building<br/>"inside" community &amp; infrastructure</div>
		<ul class="subexp">
	<li class="col" id="FMID_218035297FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">taken from: https://is.gd/nomad_cath</div>
		<ul class="subexp">
	<li class="basic" id="FMID_56636803FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">taken from: https://is.gd/nomad_cath</div></li></ul></li></ul></li></ul></li>
	<li class="col" id="FMID_1002902364FM"><div class="nodecontent" style="color:#000000;font-size:117%;">The near future:</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1712525740FM"><div class="nodecontent" style="color:#000000;font-size:117%;">JOSS</div></li>
	<li class="basic" id="FMID_1041339953FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Data Week 8</div></li>
	<li class="col" id="FMID_457016508FM"><div class="nodecontent" style="color:#000000;font-size:117%;"><a href="https://twitter.com/offrayLC/status/837859107562532865">Google summer of code</a> <a href="https://twitter.com/offrayLC/status/837859107562532865"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div>
		<ul class="subexp">
	<li class="basic" id="FMID_1536027699FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="https://summerofcode.withgoogle.com/">Context</a> <a href="https://summerofcode.withgoogle.com/"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_1377677053FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://pharo.org/news/GSoC17Students">Pharo: Call for students</a> <a href="http://pharo.org/news/GSoC17Students"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li>
	<li class="basic" id="FMID_175390937FM"><div class="nodecontent" style="color:#000000;font-size:100%;"><a href="http://gsoc.pharo.org/#topic-grafoscopio-literate-computing-and-reproducible-research-for-pharo">Grafoscopio as a Summer of code project</a> <a href="http://gsoc.pharo.org/#topic-grafoscopio-literate-computing-and-reproducible-research-for-pharo"><img src="grafoscopio-mapa.html_files/ilink.png" alt="User Link" style="border-width:0"/></a></div></li></ul></li>
	<li class="basic" id="FMID_1676470265FM"><div class="nodecontent" style="color:#000000;font-size:117%;">re:publica Berlin<br/>(May, 2017)</div></li>
	<li class="col" id="FMID_463634827FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Critical code+data literacy education</div>
		<ul class="subexp">
	<li class="col" id="FMID_1610672511FM"><div class="nodecontent" style="color:#000000;font-size:117%;">contrast</div>
		<ul class="subexp">
	<li class="col" id="FMID_513970086FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Formal education</div>
		<ul class="subexp">
	<li class="basic" id="FMID_572566733FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Lots of time (epoche of life)</div></li>
	<li class="basic" id="FMID_747346790FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Degrees</div></li></ul></li>
	<li class="col" id="FMID_887781387FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Bootcamps</div>
		<ul class="subexp">
	<li class="basic" id="FMID_91350456FM"><div class="nodecontent" style="color:#000000;font-size:117%;">3 intensive months of your life</div></li>
	<li class="basic" id="FMID_1811027170FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Jobs ?</div></li></ul></li>
	<li class="col" id="FMID_738302041FM"><img src="grafoscopio-mapa.html_files/icons/button_ok.png" alt="button_ok"/> <div class="nodecontent" style="color:#000000;font-size:117%;">Informal education</div>
		<ul class="subexp">
	<li class="basic" id="FMID_1302300553FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Organic time<br/>Longlife</div></li>
	<li class="basic" id="FMID_908067301FM"><div class="nodecontent" style="color:#000000;font-size:117%;">Portafolios</div></li></ul></li></ul></li></ul></li></ul></li></ul></li>
	<li class="basic" id="FMID_1002688031FM"><div class="nodecontent" style="color:#000000;font-size:133%;font-weight:bold;">Demo time</div></li>
	<li class="basic" id="FMID_190273179FM"><div class="nodecontent" style="color:#000000;font-size:133%;font-weight:bold;">More questions / comments</div></li>
	<li class="exp" id="FMID_1536700324FM"><div class="nodecontent" style="color:#000000;font-size:133%;font-weight:bold;">License</div>
		<ul class="sub">
	<li class="exp" id="FMID_229151547FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Creative Commons<br/>Attribution Share Alike</div>
		<ul class="sub">
	<li class="basic" id="FMID_1736201537FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">cc 2016-2017 por Offray Luna Cárdenas se distribuye bajo una Licencia Creative Commons Atribución-CompartirIgual 4.0 Internacional.</div></li></ul></li></ul></li>
	<li class="exp" id="FMID_853968580FM"><div class="nodecontent" style="color:#000000;font-size:133%;font-weight:bold;">Author</div>
		<ul class="sub">
	<li class="exp" id="FMID_239193035FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Offray Vladimir<br/>Luna Cárdenas</div>
		<ul class="sub">
	<li class="basic" id="FMID_997624194FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Correo: offray@mutabit.com</div></li>
	<li class="basic" id="FMID_1156975694FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Twitter: @offrayLC</div></li>
	<li class="basic" id="FMID_1496044372FM"><div class="nodecontent" style="color:#000000;font-size:75%;font-weight:bold;">Blog: http://mutabit.com/offray/blog</div></li></ul></li></ul></li></ul></li></ul></div></body></html>

/* MarkTree JavaScript code
 *
 * The contents of this file are subject to the Mozilla Public License Version
 * 1.1 (the "License"); you may not use this file except in compliance with
 * the License. You may obtain a copy of the License at
 * http://www.mozilla.org/MPL/
 *
 * Software distributed under the License is distributed on an "AS IS" basis,
 * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
 * for the specific language governing rights and limitations under the
 * License.
 *
 * Miika Nurminen, 12.7.2004.
 */

/* cross-browser (tested with ie5, mozilla 1 and opera 5) keypress detection */
function get_keycode(evt) {
  // IE
    code = document.layers ? evt.which
           : document.all ? event.keyCode // event.keyCode!=evt.keyCode!
           : evt.keyCode;

  if (code==0)
    code=evt.which; // for NS
  return code;
}

var lastnode=null;
var listnodes = null;
var list_index=1;
var lastnodetype=''; // determines if node is a link, input or text;

// up, left, down, right, keypress codes
//ijkl
//var keys = new Array(105,106,107,108);
//num arrows
//var keys = new Array(56,52,50,54);
//wasd
// var press2 = new Array(119,97,115,100);
 var press = new Array(47,45,42,43);

// keydown codes
  //  var keys2=new Array(87,65,83,68);
  var keys= new Array(38,37,40,39);

  // keyset 1 = keydown, otherwise press
function checkup(keyset,n) {
  if (keyset==1) return (n==keys[0]);
  return ((n==press[0]) /*|| (n==press2[0])*/)
}

function checkdn(keyset,n) {
  if (keyset==1) return (n==keys[2]);
  return ((n==press[2]) /*|| (n==press2[2])*/)
}

function checkl(keyset,n) {
  if (keyset==1) return (n==keys[1]);
  return ((n==press[1]) /*|| (n==press2[1])*/)
}

function checkr(keyset,n) {
  if (keyset==1) return (n==keys[3]);
  return ((n==press[3]) /*|| (n==press2[3])*/)
}





function is_exp(n) {
  if (n==null) return false;
  return ((n.className=='exp') || (n.className=='exp_active'));
}

function is_col(n) {
  if (n==null) return false;
  return ((n.className=='col') || (n.className=='col_active'));
}

function is_basic(n) {
  if (n==null) return false;
  return ((n.className=='basic') || (n.className=='basic_active'));
}



/* returns i>=0 if true */
function is_active(node) {
  if (node.className==null) return false
  return node.className.indexOf('_active');
}

function toggle_class(node) {
  if ((node==null) || (node.className==null)) return;
  str=node.className;
  result="";
  i = str.indexOf('_active');
  if (i>0)
    result= str.substr(0,i);
  else
    result= str+"_active";
  node.className=result;
  return node;
}

function activate(node) {
  node.style.backgroundColor='#eeeeff';
}

function deactivate(node) {
   node.style.backgroundColor='#ffffff';
}

function is_list_node(n) {
  if (n==null) return false;
  if (n.className==null) return false;
  if ( (is_exp(n)) ||
       (is_col(n)) ||
       (is_basic(n)) )
   return true; else return false;
}


function get_href(n) {
  alist=n.attributes;
  if (alist!=null) {
    hr = alist.getNamedItem('href');
    if (hr!=null) return hr.nodeValue;
  }
  if (n.childNodes.length==0) return '';
  for (var i=0; i<n.childNodes.length; i++) {
    s = get_href(n.childNodes[i]);
    if (s!='') return s;
  }
  return '';
}

function get_link(n) {
  if (n==null) return null;
  if (n.style==null) return null;

 // disabling uncontrolled recursion to prevent error messages on IE
 // when trying to focus to invisible links (readonly mode)
//    alert(n.nodeName+' '+n.className);
  if ((n.nodeName=='UL') && (n.className=='sub')) return null;

  if (n.nodeName=='A') return n;
  if (n.childNodes.length==0) return null;
  for (var i=0; i<n.childNodes.length; i++) {
    s = get_link(n.childNodes[i]);
    if (s!=null) return s;
  }
  return null;
}

function set_lastnode(n) {
/*var d = new Date();
var t_mil = d.getMilliseconds();*/
// testattu nopeuksia explorerilla, ei merkitt�vi� eroja
  if (lastnode==n) return;
/*  deactivate(lastnode)
  lastnode=n;
  activate(lastnode);*/

  if (is_active(lastnode)>=0)
    toggle_class(lastnode);
  lastnode=n;
  if (!(is_active(lastnode)>=0))
    toggle_class(lastnode);


/*var d2 = new Date();
var t_mil2 = d2.getMilliseconds();
  window.alert(t_mil2-t_mil);*/
}

function next_list_node() {
  tempIndex = list_index;
  while (tempIndex<listnodes.length-1) {
    tempIndex++;
    var x = listnodes[tempIndex];
    if (is_list_node(x)) {
      list_index=tempIndex;
      return;
    }
  }
}

function prev_list_node() {
  tempIndex = list_index;
  while (tempIndex>0) {
    tempIndex--;
    var x = listnodes[tempIndex];
    if (is_list_node(x)) {
      list_index=tempIndex;
      return;
    }
  }
}



function getsub (li) {
  if (li.childNodes.length==0) return null;
  for (var c = 0; c < li.childNodes.length; c++)
    if ( (li.childNodes[c].className == 'sub') || (li.childNodes[c].className == 'subexp') )
      return li.childNodes[c];
}

function find_listnode_recursive (li) {
  if (is_list_node(li)) return li;
  if (li.childNodes.length==0) return null;
  result=null;
  for (var c = 0; c < li.childNodes.length; c++) {
    result=find_listnode_recursive(li.childNodes[c]);
    if (result!=null) return result;
  }
  return null;
}

function next_child_listnode(li) {
  var result=null;
  for (var i=0; i<li.childNodes.length; i++) {
    result=find_listnode_recursive(li.childNodes[i]);
    if (result!=null) return result;
  }
  return null;
}

function next_actual_sibling_listnode(li) {
  if (li==null) return null;
  var temp=li;
  while (1) {
    var n = temp.nextSibling;
    if (n==null) {
      n=parent_listnode(temp);
      return next_actual_sibling_listnode(n);
    }
    if (is_list_node(n)) return n;
    temp=n;
  }
}

function next_sibling_listnode(li) {
if (li==null) return null;
 var result=null;
  var temp=li;
  if (is_col(temp)) return next_child_listnode(temp);
  while (1) {
    var n = temp.nextSibling;
    if (n==null) {
      n=parent_listnode(temp);
      return next_actual_sibling_listnode(n);
    }
    if (is_list_node(n)) return n;
    temp=n;
  }
}

function last_sibling_listnode(li) {
  if (li==null) return null;
  var temp=li;
  var last=null;
  while(1) {
    var n = temp.nextSibling;
    if (is_list_node(temp))
      last = temp;
    if (n==null) {
      if (is_col(last)) return last_sibling_listnode(next_child_listnode(last));
      else return last;
    }
    temp = n;
  }
}

function prev_sibling_listnode(li) {
  if (li==null) return null;
  var temp=li;
  var n = null;
  while (1) {
    n = temp.previousSibling;
    if (n==null) {
      return parent_listnode(li);
    }
    if (is_list_node(n)) {
      if (is_col(n)) {
        return last_sibling_listnode(next_child_listnode(n));
      }
      else {
        return n;
      }
    }
    temp=n;
  }
}


function parent_listnode(li) {
  // added 12.7.2004 to prevent IE error when readonly mode==true
  if (li==null) return null;
  n=li;
  while (1) {
    n=n.parentNode;
    if (n==null) return null;
    if (is_list_node(n)) return n;
  }
}

function getVisibleParents(id) {
  var n = document.getElementById(id);
  while(1) {
    expand(n);
    n = parent_listnode(n);
    if (n==null) return;
  }
}

function onClickHandler (evt) {
if (lastnode==null)
{
listnodes = document.getElementsByTagName('li');
lastnode=listnodes[1];
temp=listnodes[1];
}


  var target = evt ? evt.target : event.srcElement;
  if (!is_list_node(target)) return;
  toggle(target);
  set_lastnode(target);
}


function expand(node) {
    if (!is_exp(node)) return;
    if (node.className=='exp_active')
      node.className='col_active';
    else
        node.className='col';
    setSubClass(node,'subexp');
    //    getsub(node).className='subexp';
}

function collapse(node) {
  if (!is_col(node)) return;

if (node.className=='col_active')
    node.className='exp_active'
  else
    node.className='exp';

 setSubClass(node,'sub');
//  getsub(node).className='sub';

}

function setSubClass(node,name) {
  sub = getsub(node);
  if (sub==null) return;
  sub.className=name;
}

function toggle(target) {
  if (!is_list_node(target)) return;
    if (is_col(target)) {
      target.className='exp';
      setSubClass(target,'sub');
      //      getsub(target).className='sub';
    }
    else if (is_exp(target)) {
      target.className='col';
      setSubClass(target,'subexp');
      //      getsub(target).className='subexp';
    }

}

function expandAll(node) {
    if (node.className=='exp') {
        node.className='col';
        setSubClass(node,'subexp');
//        getsub(node).className='subexp';
    }
    var i;
    if (node.childNodes!=null)
//    if (node.hasChildNodes())
        for ( i = 0; i<node.childNodes.length; i++)
            expandAll(node.childNodes[i]);
}

function collapseAll(node) {
    if  (node.className=='col') {
        node.className='exp';
        setSubClass(node,'sub');
//        getsub(node).className='sub';
    }
    var i;
    if (node.childNodes!=null)
// for opera   if (node.hasChildNodes())
        for ( i = 0; i<node.childNodes.length; i++)
            collapseAll(node.childNodes[i]);
}



function unFocus(node) {
     // unfocuses potential link that is to be hidden (if a==null there is no link so it should not be blurred).
     // tested with mozilla 1.7, 12.7.2004. /mn (
      intemp=parent_listnode(node);
      a = get_link(intemp);     // added 6.4. to get keyboard working with
      // moved before collapse to prevent an error message with IE when readonly==true
      if (a!=null) a.blur(); // netscape after collapsing a focused node
      return intemp;
}

// mode: 0==keypress, 1==keyup
function keyfunc(evt,mode) {
 var c = get_keycode(evt);
 var temp = null;
 var a = null;

  if (lastnode==null) {
    listnodes = document.getElementsByTagName('li');
    lastnode=listnodes[1];
    temp=listnodes[1];
  }

  //window.alert(c);
  if (checkup(mode,c)) { // i
   temp=prev_sibling_listnode(lastnode);
  }
  else if (checkdn(mode,c)) { // k
    temp=next_sibling_listnode(lastnode);
  }
  else if (checkr(mode,c)) { // l
    expand(lastnode);
    //  temp=next_child_listnode(lastnode);
    // if (temp==null) {
      a = get_link(lastnode);
        if (a!=null) a.focus(); else self.focus();
      //}
  }
  else if (checkl(mode,c)) { // j
    if (is_col(lastnode)) {
      unFocus(lastnode);
      collapse(lastnode);
    }
    else {
      temp=unFocus(lastnode);
      collapse(temp);
    }
   //    if (temp==null) lastnode.focus(); // forces focus to correct div (try mozilla typesearch) (doesn't seem to work -mn/6.4.2004)
  }
  else return;
  if (temp!=null) set_lastnode(temp);

  // alert('pressed ' + String.fromCharCode(c) + '(' + c + ')');
  return true;
}


function keytest (evt) {
  return keyfunc(evt,1);
};


function presstest (evt) {
  return keyfunc(evt,0);
};


  document.onclick = onClickHandler;
  document.onkeypress = presstest;
  document.onkeyup = keytest;

body {
	background-color: #eeeeee;
  	color: #000000;
	font-family:sans-serif;
}

:link { color: #0000ff; text-decoration:none;}
:visited { color: #6666ff; text-decoration:none; }
a:active { color: #0000ff; text-decoration:none;}
a:hover {color: #0000ff; text-decoration:underline; }

div.basetext {
    background-color:#ffffff;
        margin-top:11px;
        margin-bottom:11px;
	margin-left:1%;
	margin-right:1%;
	padding-top:11px;
	padding-left:11px;
	padding-right:11px;
	padding-bottom:11px;
	text-align:left;
	font-weight:normal;
  border-width:thin;
  border-style:solid;
  border-color:#dddddd;
}

div.basetop {
  position: fixed;
  width:auto;
  height:auto;
  right:0em;
  top:0em;
  left:auto;
  top:0;
    background-color:#ffffff;
        margin-top:0;
        margin-bottom:0;
	margin-left:1%;
	margin-right:1%;
	padding-top:2px;
	padding-left:11px;
	padding-right:11px;
	padding-bottom:2px;
	text-align:left;
	font-weight:normal;
text-align:right;
  border-width:thin;
  border-style:solid;
  border-color:#dddddd;
}

div.nodecontent p:first-child {
  display:inline;
}
div.nodecontent p + p:last-child {
  margin-bottom:0;
}

h1 {
    text-align:center;
}

span.h2 {
    font-family:sans-serif;
    font-weight:bold;
}

div.year {
	margin-right:2%;
	background-color:#eeeeee;
}

div.form {
}

span.cpt {
	color:#005500;
	font-weight:bold;
}

span.cm {
	color:#666666;
}

.fl {
	color:#0000FF;	
	font-style:italic;
}

ul {
	margin-top:1px;
        margin-bottom:1px;
	margin-left:0px;
	padding-left:3%;
}

li {
	list-style:outside;
  margin-top:10px;
  margin-bottom:10px;
}

ul li {
	list-style:square;
	font-family:sans-serif;
	font-weight:normal;
}

li.basic {
	list-style:square;
	list-style-image:none;
  margin-top:2px;
  margin-bottom:2px;
}

span.links {
}




.sub { display: none; }
.subexp {display: block; }
.sub { display: none; }

.subexp {display: block; }

li.exp {
  list-style-image:url("plus.png");
  margin-top:10px;
  margin-bottom:10px;
  cursor:pointer;
}

li.col {
  list-style-image:url("minus.png");
  margin-top:10px;
  margin-bottom:10px;
  cursor:pointer;
}

li.exp_active {
  list-style-image:url("plus.png");
  margin-top:10px;
  margin-bottom:10px;
  background-color:#eeeeff;
  cursor:pointer;
}

li.col_active {
  list-style-image:url("minus.png");
  margin-top:10px;
  margin-bottom:10px;
  background-color:#eeeeff;
  cursor:pointer; /* if not included, bullets are not shown right in moz*/
}


li.basic_active {
  list-style:square;
  list-style-image:none;
  background-color:#eeeeff;
  margin-top:2px;
  margin-bottom:2px;
}

/* the 'boxed' and 'attributes' styles are used to display notes and attributes
*/

.boxed,.nodecontent {display:inline;}
.boxed .note-and-attributes {display:none;}

.boxed:hover .note-and-attributes {
	position:fixed; top:2em;right:10px;z-index:3;
	display:block;
	min-width:33%;
	max-width:60%;
	max-height:95%;
	color:black;
	background:#ffffff;
	font:normal 16px courier, sans-serif;
	border:1px solid black;
	padding:10px;
}

.note:before {
	content:"NOTE: ";
	font-weight:bold;
}

table.attributes {
	border-collapse:collapse;
	empty-cells:show;
	border:thin black solid;
}
table.attributes td,th {
	border:thin black solid;
	padding-top:2px;
	padding-bottom:2px;
	padding-left:3px;
	padding-right:3px;
}
table.attributes th {
	text-align:center;
}
table.attributes caption {
	margin-top:1em;
	font-style:italic;
	text-align:center;
}

<map version="freeplane 1.5.9">
<!--To view this file, download free mind mapping software Freeplane from http://freeplane.sourceforge.net -->
<attribute_registry SHOW_ATTRIBUTES="hide"/>
<node TEXT="Grafoscopio &amp; Data Week" FOLDED="false" ID="ID_1788535810" CREATED="1488814730198" MODIFIED="1490303024809"><hook NAME="MapStyle">
    <properties fit_to_viewport="false;" show_icon_for_attributes="true" show_note_icons="true" show_notes_in_map="false"/>

<map_styles>
<stylenode LOCALIZED_TEXT="styles.root_node" STYLE="oval" UNIFORM_SHAPE="true" VGAP_QUANTITY="24.0 pt" TEXT_SHORTENED="true">
<font SIZE="24"/>
<richcontent TYPE="DETAILS" LOCALIZED_HTML="styles_background_html"/>
<stylenode LOCALIZED_TEXT="styles.predefined" POSITION="right" STYLE="bubble">
<font SIZE="9"/>
<stylenode LOCALIZED_TEXT="default" COLOR="#000000" STYLE="bubble" SHAPE_VERTICAL_MARGIN="0.0 pt" TEXT_ALIGN="CENTER" MAX_WIDTH="120.0 pt" MIN_WIDTH="120.0 pt">
<font NAME="Arial" SIZE="9" BOLD="true" ITALIC="false"/>
<edge STYLE="bezier" WIDTH="3"/>
</stylenode>
<stylenode LOCALIZED_TEXT="defaultstyle.details">
<font SIZE="11" BOLD="false"/>
</stylenode>
<stylenode LOCALIZED_TEXT="defaultstyle.attributes" COLOR="#000000" BACKGROUND_COLOR="#ffffff">
<font SIZE="9" BOLD="false"/>
</stylenode>
<stylenode LOCALIZED_TEXT="defaultstyle.note" COLOR="#000000" BACKGROUND_COLOR="#ffffff" TEXT_ALIGN="LEFT">
<font BOLD="false"/>
</stylenode>
<stylenode LOCALIZED_TEXT="defaultstyle.floating">
<edge STYLE="hide_edge"/>
</stylenode>
</stylenode>
<stylenode LOCALIZED_TEXT="styles.user-defined" POSITION="right" STYLE="bubble">
<font SIZE="9"/>
<stylenode LOCALIZED_TEXT="styles.important">
<icon BUILTIN="yes"/>
<edge COLOR="#0000cc"/>
</stylenode>
</stylenode>
<stylenode LOCALIZED_TEXT="styles.AutomaticLayout" POSITION="right" STYLE="bubble">
<font SIZE="9"/>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level.root" COLOR="#000000" STYLE="oval" UNIFORM_SHAPE="true" MAX_WIDTH="120.0 pt" MIN_WIDTH="120.0 pt">
<font SIZE="24" ITALIC="true"/>
<edge STYLE="bezier" WIDTH="3"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,1">
<edge COLOR="#000000"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,2">
<edge COLOR="#ff0033"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,3">
<edge COLOR="#009933"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,4">
<edge COLOR="#3333ff"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,5">
<edge COLOR="#ff6600"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,6">
<edge COLOR="#cc00cc"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,7">
<edge COLOR="#ffbf00"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,8">
<edge COLOR="#00ff99"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,9">
<edge COLOR="#0099ff"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,10">
<edge COLOR="#996600"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,11">
<edge COLOR="#000000"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,12">
<edge COLOR="#cc0066"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,13">
<edge COLOR="#33ff00"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,14">
<edge COLOR="#ff9999"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,15">
<edge COLOR="#0000cc"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,16">
<edge COLOR="#cccc00"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,17">
<edge COLOR="#0099cc"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,18">
<edge COLOR="#006600"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,19">
<edge COLOR="#ff00cc"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,20">
<edge COLOR="#00cc00"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,21">
<edge COLOR="#0066cc"/>
</stylenode>
<stylenode LOCALIZED_TEXT="AutomaticLayout.level,22">
<edge COLOR="#00ffff"/>
</stylenode>
</stylenode>
</stylenode>
</map_styles>
</hook>
<hook NAME="accessories/plugins/AutomaticLayout.properties" VALUE="ALL"/>
<font SIZE="18"/>
<hook NAME="AutomaticEdgeColor" COUNTER="0" RULE="FOR_COLUMNS"/>
<richcontent TYPE="NOTE">

<html>
  <head>
    
  </head>
  <body>
    <p>
      <font size="4">Adaptable tool for visualization, open data, and reproducible research</font>
    </p>
  </body>
</html>
</richcontent>
<hook NAME="AlwaysUnfoldedNode"/>
<node TEXT="First thanks!" POSITION="right" ID="ID_1635066869" CREATED="1488927270165" MODIFIED="1488927275813">
<font SIZE="16"/>
<node TEXT="For being here" ID="ID_1495902729" CREATED="1488927284652" MODIFIED="1488927320566">
<font SIZE="16" BOLD="false"/>
</node>
<node TEXT="For having me here" ID="ID_1671005998" CREATED="1488927298624" MODIFIED="1488927319830">
<font SIZE="16" BOLD="false"/>
<node TEXT="Hosts" ID="ID_733048315" CREATED="1490009610628" MODIFIED="1490009646681">
<font SIZE="14" BOLD="false"/>
<node TEXT="Recurrent" ID="ID_421708629" CREATED="1490018604173" MODIFIED="1490018616354">
<font SIZE="14" BOLD="false"/>
<node TEXT="HackBo" ID="ID_1617778456" CREATED="1490018618942" MODIFIED="1490284040755" LINK="http://hackbo.co/">
<font SIZE="14" BOLD="false" ITALIC="false"/>
</node>
</node>
<node TEXT="First timers&#xa;(March, 2017)" ID="ID_1320412947" CREATED="1490018640849" MODIFIED="1490018829216">
<font SIZE="14" BOLD="false"/>
<node TEXT="IFF / Valencia" FOLDED="true" ID="ID_265928318" CREATED="1488928047491" MODIFIED="1490018823846" LINK="http://mutabit.com/repos.fossil/grafoscopio/timeline?n=400&amp;y=all&amp;v=0">
<font SIZE="14" BOLD="false"/>
<node TEXT="All team work that make it possible" ID="ID_530831548" CREATED="1490018784680" MODIFIED="1490018802648">
<font SIZE="10"/>
</node>
</node>
<node TEXT="Osoco" FOLDED="true" ID="ID_1393205914" CREATED="1490018735088" MODIFIED="1490018739361">
<font SIZE="14" BOLD="false"/>
<node TEXT="Rafael" ID="ID_175256701" CREATED="1489826271607" MODIFIED="1490018754992">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Jose" ID="ID_200408910" CREATED="1490018755195" MODIFIED="1490018756637">
<font SIZE="14" BOLD="false"/>
</node>
</node>
<node TEXT="Media Lab El Prado" FOLDED="true" ID="ID_643343902" CREATED="1489838067498" MODIFIED="1490285072143" LINK="http://medialab-prado.es/">
<font SIZE="14" BOLD="false"/>
<node TEXT="Adolfo" ID="ID_1919427964" CREATED="1489826248292" MODIFIED="1489826270109">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Antonio" ID="ID_1614725774" CREATED="1489826271607" MODIFIED="1489826273675">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Sonia" ID="ID_215091947" CREATED="1489826274338" MODIFIED="1489826276275">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Marcos" ID="ID_1361228748" CREATED="1489826276492" MODIFIED="1489826278102">
<font SIZE="14" BOLD="false"/>
</node>
</node>
</node>
</node>
</node>
<node TEXT="Let&apos;s make this a conversation" ID="ID_663940769" CREATED="1488927309441" MODIFIED="1488927318536">
<font SIZE="16" BOLD="false"/>
</node>
<node TEXT="For those who came in late..." ID="ID_1311107528" CREATED="1490283593744" MODIFIED="1490283611907">
<font SIZE="16" BOLD="false"/>
<node TEXT="" ID="ID_1494445487" CREATED="1490284147772" MODIFIED="1490284163856">
<hook URI="Imagenes/those-who-came-late.jpg" SIZE="0.7217272" NAME="ExternalObject"/>
</node>
</node>
</node>
<node TEXT="Design approach" POSITION="right" ID="ID_1414905294" CREATED="1488845134741" MODIFIED="1488845174265">
<font SIZE="16"/>
<node TEXT="Enactive understanding" ID="ID_194660459" CREATED="1488815547947" MODIFIED="1489495856860">
<font SIZE="16" BOLD="false"/>
<node TEXT="Software as a craft" ID="ID_1275453281" CREATED="1489496507416" MODIFIED="1489516040011">
<font SIZE="16" BOLD="false"/>
<richcontent TYPE="NOTE">

<html>
  <head>
    
  </head>
  <body>
    <p>
      Aaron, Blackwell
    </p>
  </body>
</html>
</richcontent>
<node TEXT="Embodies designer/artisan knowledge" ID="ID_285929011" CREATED="1489496629123" MODIFIED="1489496793952">
<font SIZE="14" BOLD="false"/>
<node TEXT="About previous used and/or inspiring tools" ID="ID_734497781" CREATED="1489496690140" MODIFIED="1490032408556">
<font SIZE="12" BOLD="false"/>
<richcontent TYPE="NOTE">

<html>
  <head>
    
  </head>
  <body>
    <p>
      <b>Inspiration &amp; frustration </b>Frustration is also a way of knowledge:
    </p>
    <p>
      There is also some stuff I don't like about these tools,
    </p>
    <p>
      or that I would like to mix and match for my own needs.
    </p>
  </body>
</html>
</richcontent>
<node TEXT="" ID="ID_1954215551" CREATED="1490034103536" MODIFIED="1490034103538">
<hook NAME="FirstGroupNode"/>
</node>
<node TEXT="TeXmacs" ID="ID_1079885802" CREATED="1489497041043" MODIFIED="1490033133539" LINK="http://texmacs.org/">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Squeak / Smalltalk" ID="ID_1711003079" CREATED="1489497034882" MODIFIED="1489497040561">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="" ID="ID_1555803959" CREATED="1490034103532" MODIFIED="1490034103535">
<hook NAME="SummaryNode"/>
<hook NAME="AlwaysUnfoldedNode"/>
<node TEXT="Combined in my masters thesis" ID="ID_518080209" CREATED="1490034103540" MODIFIED="1490108280448" LINK="http://mutabit.com/repos.fossil/offray-maestria-tesis/index"/>
</node>
<node TEXT="" ID="ID_1563202036" CREATED="1490043662020" MODIFIED="1490043662022">
<hook NAME="FirstGroupNode"/>
</node>
<node TEXT="Jupyter&#xa;(&amp; Mathematica)" ID="ID_610784909" CREATED="1489497012321" MODIFIED="1490042809323" LINK="http://jupyter.org/">
<font SIZE="12" BOLD="false"/>
<node TEXT="Notebooks are like REPL on steroids" ID="ID_1995072513" CREATED="1490042819371" MODIFIED="1490143536589">
<font SIZE="12" BOLD="false"/>
<node TEXT="Long teletype scrolls&#xa;(or pile of files on folders)" ID="ID_1903142966" CREATED="1490042875553" MODIFIED="1490131293191" LINK="http://mutabit.com/repos.fossil/piamed/doc/tip/Afiche/narrativa.png">
<arrowlink SHAPE="CUBIC_CURVE" COLOR="#000000" WIDTH="2" TRANSPARENCY="140" FONT_SIZE="9" FONT_FAMILY="SansSerif" DESTINATION="ID_420200085" MIDDLE_LABEL="Tradici&#xf3;n Unix" STARTINCLINATION="384;6;" ENDINCLINATION="384;6;" STARTARROW="NONE" ENDARROW="DEFAULT"/>
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="JupyterLab may change that" ID="ID_1297490452" CREATED="1490042993118" MODIFIED="1490200272961" LINK="http://jupyterlab.github.io/jupyterlab/">
<font SIZE="12" BOLD="false"/>
<node TEXT="IDE&#xa;(I: interactive)" ID="ID_548761401" CREATED="1490043167328" MODIFIED="1490286101593" LINK="https://www.youtube.com/watch?v=Ejh0ftSjk6g">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Start with the notebook, end in the IDE" ID="ID_1159662982" CREATED="1490043208476" MODIFIED="1490043219980">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Grafoscopio followed the inverse path: Providing notebook functionlity to a live coding IDE" ID="ID_799557291" CREATED="1490043220594" MODIFIED="1490043262452">
<font SIZE="12" BOLD="false"/>
</node>
</node>
</node>
</node>
<node TEXT="Leo Editor" ID="ID_924431689" CREATED="1489497001620" MODIFIED="1490032422829" LINK="http://leoeditor.com/">
<font SIZE="12" BOLD="false"/>
<node TEXT="Trees as" ID="ID_1545718998" CREATED="1490108302292" MODIFIED="1490108310078">
<font SIZE="12" BOLD="false"/>
<node TEXT="Emergent order" ID="ID_395321482" CREATED="1490108323128" MODIFIED="1490108327980">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="self referential programmable documents" ID="ID_1632177561" CREATED="1490108331266" MODIFIED="1490136940687">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Example" ID="ID_1471150051" CREATED="1490136948358" MODIFIED="1490136960278" LINK="http://mutabit.com/offray/static/blog/output/posts/la-forma-en-que-escribo-para-el-doctorado.html">
<font SIZE="12" BOLD="false"/>
</node>
</node>
</node>
<node TEXT="" ID="ID_1589210534" CREATED="1490043662018" MODIFIED="1490043662020">
<hook NAME="SummaryNode"/>
<hook NAME="AlwaysUnfoldedNode"/>
<node TEXT="" ID="ID_1331920000" CREATED="1490112750444" MODIFIED="1490112750444">
<node TEXT="Can them be combined?" ID="ID_1594365174" CREATED="1490043662023" MODIFIED="1490044692950" LINK="http://mutabit.com/offray/static/blog/output/posts/on-deepness-and-complexity-of-ipython-documents.html">
<icon BUILTIN="help"/>
<icon BUILTIN="idea"/>
<font SIZE="12" BOLD="false"/>
<node TEXT="web app test case:&#xa;web2py + IPython" ID="ID_1842646984" CREATED="1490101685272" MODIFIED="1490112281247">
<font SIZE="12" BOLD="false"/>
<node TEXT="" ID="ID_747655842" CREATED="1490112316267" MODIFIED="1490112316268">
<hook NAME="FirstGroupNode"/>
</node>
<node TEXT="Paradigms" ID="ID_1846172900" CREATED="1490111790287" MODIFIED="1490111805936">
<font SIZE="12" BOLD="false"/>
<node TEXT="client - server" ID="ID_846876195" CREATED="1490111821251" MODIFIED="1490111827717"/>
<node TEXT="scripting" ID="ID_851426132" CREATED="1490111828199" MODIFIED="1490111833124"/>
<node TEXT="imperative" ID="ID_1265104829" CREATED="1490111833366" MODIFIED="1490111835645"/>
<node TEXT="objects" ID="ID_449762229" CREATED="1490111835911" MODIFIED="1490111838428"/>
<node TEXT="databases" ID="ID_598327140" CREATED="1490111841678" MODIFIED="1490111843967"/>
</node>
<node TEXT="Technologies" ID="ID_1048500532" CREATED="1490111810308" MODIFIED="1490111813531">
<font SIZE="12" BOLD="false"/>
<node TEXT="python" ID="ID_1177637086" CREATED="1490111847288" MODIFIED="1490111851489"/>
<node TEXT="qt" ID="ID_666280745" CREATED="1490111851803" MODIFIED="1490111853876"/>
<node TEXT="javascript" ID="ID_984609384" CREATED="1490111863896" MODIFIED="1490111868494"/>
<node TEXT="zeromq" ID="ID_1315850833" CREATED="1490112073905" MODIFIED="1490112081780"/>
</node>
<node TEXT="Formats" ID="ID_1620809771" CREATED="1490112105291" MODIFIED="1490112108331">
<font SIZE="12" BOLD="false"/>
<node TEXT="markup" ID="ID_522798082" CREATED="1490111838918" MODIFIED="1490111841325"/>
<node TEXT="serialization" ID="ID_1177890644" CREATED="1490112110451" MODIFIED="1490112113435"/>
<node TEXT="xml" ID="ID_638858160" CREATED="1490111854221" MODIFIED="1490111859188"/>
<node TEXT="json" ID="ID_1040632156" CREATED="1490111859406" MODIFIED="1490111863479"/>
<node TEXT="html" ID="ID_960768717" CREATED="1490112231248" MODIFIED="1490112233276"/>
</node>
<node TEXT="" ID="ID_145627716" CREATED="1490112316266" MODIFIED="1490112316267">
<hook NAME="SummaryNode"/>
<hook NAME="AlwaysUnfoldedNode"/>
<node TEXT="" ID="ID_1298268637" CREATED="1490112359290" MODIFIED="1490112460473">
<node TEXT="this is NOT &quot;natural&quot; complexity" ID="ID_240314460" CREATED="1490112316268" MODIFIED="1490112337011"/>
</node>
</node>
<node TEXT="Examples" ID="ID_1795664907" CREATED="1490131828152" MODIFIED="1490131839043">
<font SIZE="12" BOLD="false"/>
<node TEXT="&lt;html&gt;&#xa;  &lt;head&gt;&#xa;    &#xa;  &lt;/head&gt;&#xa;  &lt;body&gt;&#xa;    &lt;p&gt;&#xa;      &lt;font color=&quot;#000000&quot;&gt;Publicaciones abiertas para la web: primeras pruebas&lt;/font&gt;&#xa;    &lt;/p&gt;&#xa;  &lt;/body&gt;&#xa;&lt;/html&gt;" ID="ID_29958381" CREATED="1490131880890" MODIFIED="1490131972977" LINK="http://mutabit.com/offray/static/blog/output/posts/publicaciones-abiertas-para-la-web-primeras-pruebas.html"/>
<node TEXT="Indie Web Science" ID="ID_382148520" CREATED="1490131856108" MODIFIED="1490131879726" LINK="http://mutabit.com/offray/static/blog/output/posts/indie-science-indie-web-opengarage-science.html"/>
</node>
</node>
<node TEXT="Software as a graph" ID="ID_1851365733" CREATED="1490101745052" MODIFIED="1490112542454" LINK="https://vimeo.com/94724841">
<font SIZE="12" BOLD="false"/>
<node TEXT="Pharo by Visualization" ID="ID_1422822961" CREATED="1490132211795" MODIFIED="1490137003680" LINK="http://mutabit.com/offray/static/blog/output/posts/pharo-by-visualization.html">
<font SIZE="12" BOLD="false"/>
</node>
</node>
<node TEXT="More info" ID="ID_173310481" CREATED="1490112527320" MODIFIED="1490112532853" LINK="http://mutabit.com/offray/static/blog/output/posts/grafoscopio-idea-and-initial-progress.html">
<font SIZE="12" BOLD="false"/>
</node>
</node>
</node>
</node>
</node>
<node TEXT="About knowledge as a commons/right and technology as its incarnation" ID="ID_1563376675" CREATED="1489496734503" MODIFIED="1489496913647">
<font SIZE="12" BOLD="false"/>
<node TEXT="Activism" FOLDED="true" ID="ID_1636480409" CREATED="1489497110059" MODIFIED="1489497118190">
<font SIZE="12" BOLD="false"/>
<node TEXT="Choosing of themes (we&apos;ll zoom on that later)" ID="ID_1491596254" CREATED="1489497119775" MODIFIED="1489497142569"/>
<node TEXT="Metrics as critical devices" ID="ID_1383985138" CREATED="1489497287721" MODIFIED="1490284638153">
<arrowlink SHAPE="CUBIC_CURVE" COLOR="#000000" WIDTH="2" TRANSPARENCY="200" FONT_SIZE="9" FONT_FAMILY="SansSerif" DESTINATION="ID_1580958585" STARTINCLINATION="504;89;" ENDINCLINATION="385;36;" STARTARROW="NONE" ENDARROW="DEFAULT"/>
</node>
</node>
<node TEXT="Commons as socioeconomic model" FOLDED="true" ID="ID_1580958585" CREATED="1489497152530" MODIFIED="1489517144912">
<font SIZE="12" BOLD="false"/>
<node TEXT="Coop economies" ID="ID_1516606435" CREATED="1489497264273" MODIFIED="1489497267947"/>
<node TEXT="Frontiers for value transition" FOLDED="true" ID="ID_621662963" CREATED="1489497268562" MODIFIED="1489497277962">
<node TEXT="Working outside the commons to sustain the commons" ID="ID_1633396808" CREATED="1489497376622" MODIFIED="1489497400933"/>
<node TEXT="Differential prices for commoners and non-commoners" ID="ID_1740908960" CREATED="1489497401963" MODIFIED="1489497434534"/>
</node>
</node>
<node TEXT="Licensing" FOLDED="true" ID="ID_1768345449" CREATED="1489496946465" MODIFIED="1489496958948">
<font SIZE="12" BOLD="false"/>
<node TEXT="Grafoscopio: MIT" ID="ID_1377214229" CREATED="1489496965356" MODIFIED="1489496973360"/>
<node TEXT="Manual/Tutorial: P2p" ID="ID_34257295" CREATED="1489496973818" MODIFIED="1489496990720"/>
</node>
</node>
<node TEXT="Conceptual searchs" ID="ID_518957493" CREATED="1490460497893" MODIFIED="1490460507039">
<font SIZE="12" BOLD="false"/>
<node TEXT="" ID="ID_55524328" CREATED="1490460711010" MODIFIED="1490460711012">
<hook NAME="FirstGroupNode"/>
</node>
<node TEXT="Computer is a cognitive artifact" ID="ID_1790524288" CREATED="1490460513931" MODIFIED="1490460523369">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Computer as an expressive medium" ID="ID_951576003" CREATED="1490460529253" MODIFIED="1490460549228">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="" ID="ID_1554381488" CREATED="1490460711001" MODIFIED="1490460711009">
<hook NAME="SummaryNode"/>
<hook NAME="AlwaysUnfoldedNode"/>
<node TEXT="is not mostly about being &quot;productive&quot; is about being transformed (like with books, movies, games, etc)" ID="ID_1743097091" CREATED="1490460711014" MODIFIED="1490460750076"/>
</node>
<node TEXT="Subjacent rules and metaphors behind informatics" ID="ID_1638642274" CREATED="1490460549761" MODIFIED="1490460676710">
<icon BUILTIN="help"/>
<font SIZE="12" BOLD="false"/>
<node TEXT="Maxwell Equations of informatics" ID="ID_1936867924" CREATED="1490460595289" MODIFIED="1490464703748" LINK="https://en.wikipedia.org/wiki/Maxwell%27s_equations">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Stretching graphs/trees, mind/concept maps as metaphors for writing, presenting, etc." ID="ID_1689400527" CREATED="1490460611658" MODIFIED="1490460662893">
<font SIZE="12" BOLD="false"/>
</node>
</node>
</node>
</node>
</node>
<node TEXT="Design: crosspollination  &amp; floppology" ID="ID_1545124738" CREATED="1489829807847" MODIFIED="1489829852886">
<font SIZE="16" BOLD="false"/>
<node ID="ID_949684058" CREATED="1461139832055" MODIFIED="1490380394539"><richcontent TYPE="NODE">

<html>
  <head>
    
  </head>
  <body>
    <p style="text-align: center">
      What if inspiration for the future
    </p>
    <p style="text-align: center">
      is in the past and the
    </p>
    <p style="text-align: center">
      &#160;crossborder?
    </p>
  </body>
</html>

</richcontent>
<font SIZE="13" BOLD="false"/>
<node TEXT="Bifurcation points" ID="ID_1082024002" CREATED="1461140364340" MODIFIED="1490131275213">
<font SIZE="12" BOLD="false"/>
<node TEXT="" ID="ID_79858538" CREATED="1461142571956" MODIFIED="1461633911234">
<hook URI="Imagenes/bifurcation-points-complex-system.png" SIZE="0.6223331" NAME="ExternalObject"/>
<node TEXT="" ID="ID_1230433091" CREATED="1461142823058" MODIFIED="1461634059910">
<hook URI="Imagenes/bifurcation-technology.png" SIZE="0.74049306" NAME="ExternalObject"/>
<node TEXT="" ID="ID_1202612660" CREATED="1461142997915" MODIFIED="1461634113815">
<hook URI="Imagenes/bifurcation-design.png" SIZE="0.6884396" NAME="ExternalObject"/>
<node TEXT="im&#xe1;genes tomadas de:&#xa;Jonas, Wolfgang&#xa;Design Research and its Meaning to the&#xa;Methodological Development of the Discipline" ID="ID_699812615" CREATED="1461634120908" MODIFIED="1461635459149"/>
<node TEXT="Example: The technology that could have been" ID="ID_1011887468" CREATED="1490380419048" MODIFIED="1490381543208" LINK="https://www.iconeye.com/design/features/item/10859-vapourware-technology-that-might-have-been">
<font SIZE="12" BOLD="false"/>
<node TEXT="iPad: Scroll or Card?" ID="ID_1284993307" CREATED="1490743148955" MODIFIED="1490743170397" LINK="https://ia.net/topics/ipad-scroll-or-card/"/>
</node>
</node>
</node>
</node>
<node ID="ID_939244794" CREATED="1461143052605" MODIFIED="1490380501362"><richcontent TYPE="NODE">

<html>
  <head>
    
  </head>
  <body>
    <p style="text-align: center">
      Bifurcation
    </p>
    <p style="text-align: center">
      (recombination?)
    </p>
  </body>
</html>

</richcontent>
<font SIZE="12" BOLD="false"/>
<node TEXT="unix fathers" ID="ID_420200085" CREATED="1461143268494" MODIFIED="1461635756011">
<hook URI="Imagenes/unix-fathers.jpg" SIZE="0.58424675" NAME="ExternalObject"/>
</node>
<node TEXT="dynabook children" ID="ID_727237537" CREATED="1461143336092" MODIFIED="1461635808977">
<hook URI="Imagenes/dynabook-children.png" SIZE="1.0" NAME="ExternalObject"/>
<node TEXT="sketchpad" ID="ID_1677076092" CREATED="1461143780619" MODIFIED="1461635861930">
<hook URI="Imagenes/sketchpad.jpg" SIZE="0.74444443" NAME="ExternalObject"/>
</node>
<node TEXT="GUI - 1977" ID="ID_1226640772" CREATED="1461143812487" MODIFIED="1461635923190">
<hook URI="Imagenes/smalltalk-72-1977.jpg" SIZE="0.4682309" NAME="ExternalObject"/>
</node>
<node TEXT="Alan Kay holding a dynabook mockup (Wikipedia)" ID="ID_1987415622" CREATED="1490284871030" MODIFIED="1490284914713">
<hook URI="../../../Imagenes/alan_Kay_and_the_prototype_of_Dynabook.jpg" SIZE="1.5593226" NAME="ExternalObject"/>
<node TEXT="Card board mockup zoom" ID="ID_1983032729" CREATED="1490286641782" MODIFIED="1490286666329" LINK="http://www.computerhistory.org/revolution/mobile-computing/18/315/1683"/>
<node TEXT="In the Computer History Museum" ID="ID_611568533" CREATED="1490286679894" MODIFIED="1490286711606" LINK="https://www.flickr.com/photos/briantrice/6279211096/in/photostream/"/>
<node TEXT="As a paper (1972) with children as users!" ID="ID_1006352303" CREATED="1490286712763" MODIFIED="1490288150335" LINK="https://www.google.com/imgres?imgurl=http%3A%2F%2Ffacweb.cs.depaul.edu%2Fsgrais%2Fimages%2FiP_Project%2Fdynabook-01.gif&amp;imgrefurl=http%3A%2F%2Ffacweb.cs.depaul.edu%2Fsgrais%2Ftablet_application_project.htm&amp;docid=OhmWcwiybpfLTM&amp;tbnid=aPVktDdMIBoaFM%3A&amp;vet=10ahUKEwja05nB_-zSAhXLQiYKHc-TDBwQMwgjKAgwCA..i&amp;w=480&amp;h=699&amp;bih=605&amp;biw=1366&amp;q=alan%20kay%20holding%20a%20dynabook%20mockup&amp;ved=0ahUKEwja05nB_-zSAhXLQiYKHc-TDBwQMwgjKAgwCA&amp;iact=mrc&amp;uact=8#h=699&amp;imgrc=aPVktDdMIBoaFM:&amp;vet=10ahUKEwja05nB_-zSAhXLQiYKHc-TDBwQMwgjKAgwCA..i&amp;w=480"/>
<node TEXT="Inspired by" ID="ID_1269828332" CREATED="1490309846729" MODIFIED="1490309861696">
<node TEXT="" ID="ID_906081381" CREATED="1490310069029" MODIFIED="1490310069030">
<hook NAME="FirstGroupNode"/>
</node>
<node TEXT="Jerome Bruner" ID="ID_971417126" CREATED="1490309863074" MODIFIED="1490309869997"/>
<node TEXT="Piaget" ID="ID_1331819488" CREATED="1490309870379" MODIFIED="1490309893933"/>
<node TEXT="&lt;html&gt;&#xa;  &lt;head&gt;&#xa;    &#xa;  &lt;/head&gt;&#xa;  &lt;body&gt;&#xa;    &lt;p&gt;&#xa;      &lt;font color=&quot;#000000&quot;&gt;Paper&lt;/font&gt;&#xa;    &lt;/p&gt;&#xa;  &lt;/body&gt;&#xa;&lt;/html&gt;" FOLDED="true" ID="ID_1792238066" CREATED="1490309894270" MODIFIED="1490309927022">
<node TEXT="Cavallo" ID="ID_320458437" CREATED="1490309945340" MODIFIED="1490309948556"/>
</node>
<node TEXT="" ID="ID_1404942344" CREATED="1490310069027" MODIFIED="1490310069029">
<hook NAME="SummaryNode"/>
<hook NAME="AlwaysUnfoldedNode"/>
<node TEXT="understanding ways" FOLDED="true" ID="ID_252851311" CREATED="1490310069030" MODIFIED="1490310089497">
<node TEXT="Enactive" ID="ID_1209156766" CREATED="1490310092420" MODIFIED="1490310120382">
<node TEXT="Actions" ID="ID_925256708" CREATED="1490310132565" MODIFIED="1490310135388"/>
</node>
<node TEXT="Iconic" ID="ID_497295895" CREATED="1490310120735" MODIFIED="1490310123906">
<node TEXT="Images" ID="ID_1972723914" CREATED="1490310136937" MODIFIED="1490310141498"/>
</node>
<node TEXT="Symbolic" ID="ID_701371922" CREATED="1490310124627" MODIFIED="1490310129485">
<node TEXT="Symbols: Words, Equations, etc." ID="ID_1739018062" CREATED="1490310143677" MODIFIED="1490310157529"/>
</node>
</node>
<node TEXT="Close to gettin it... but not quite" ID="ID_215404496" CREATED="1490636254410" MODIFIED="1490636404928">
<node TEXT="How Steve Jobs got the ideas of GUI from XEROX" ID="ID_1226964568" CREATED="1490636685176" MODIFIED="1490636720146" LINK="https://youtu.be/J33pVRdxWbw?t=363"/>
</node>
</node>
</node>
</node>
</node>
<node TEXT="Free (as in Freedom) Software" ID="ID_1639831104" CREATED="1461143665685" MODIFIED="1461635965672">
<hook URI="Imagenes/richardstallman.jpg" SIZE="0.5111215" NAME="ExternalObject"/>
</node>
</node>
</node>
</node>
</node>
<node TEXT="Deconstruct&#xa;critical divides" ID="ID_300075086" CREATED="1488815651656" MODIFIED="1489495851814">
<font SIZE="16" BOLD="false"/>
<node TEXT="Software&#xa;User/Developer" ID="ID_1120728442" CREATED="1488815810479" MODIFIED="1489495849760">
<font SIZE="16" BOLD="false"/>
<node TEXT="Tools model&#xa;thought" ID="ID_1134043575" CREATED="1488870231068" MODIFIED="1489495813855">
<font SIZE="16" BOLD="false"/>
<node TEXT="What colors&#xa;can we not see?" ID="ID_569765346" CREATED="1488870293677" MODIFIED="1489495816079">
<font SIZE="16" BOLD="false"/>
<node TEXT="Infrared" ID="ID_444271451" CREATED="1488870381874" MODIFIED="1489495819127">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Ultraviolet" ID="ID_1268873049" CREATED="1488870395996" MODIFIED="1489495820790">
<font SIZE="14" BOLD="false"/>
</node>
</node>
<node TEXT="What thoughts&#xa;can we not have" ID="ID_1747340735" CREATED="1488870331863" MODIFIED="1489495822618">
<font SIZE="16" BOLD="false"/>
</node>
<node TEXT="Only a hammer..." ID="ID_658263291" CREATED="1488870355630" MODIFIED="1489495824336">
<font SIZE="16" BOLD="false"/>
<node TEXT="When the only thing I have is a hammer, all looks like nails" ID="ID_871157972" CREATED="1488870451221" MODIFIED="1489495826547">
<font SIZE="14" BOLD="false"/>
<node TEXT="Some sad common examples" ID="ID_1455832616" CREATED="1490286161427" MODIFIED="1490286173781">
<font SIZE="14" BOLD="false"/>
<node TEXT="Power Pointitis" ID="ID_228261847" CREATED="1461121233016" MODIFIED="1490301012943">
<font SIZE="12" BOLD="false"/>
<node TEXT="" ID="ID_562685676" CREATED="1461122609913" MODIFIED="1461633348597">
<hook URI="Imagenes/addicted-powerpoint.gif" SIZE="0.6970944" NAME="ExternalObject"/>
</node>
</node>
<node TEXT="Wordsitis" ID="ID_1114502910" CREATED="1461121247578" MODIFIED="1490301023806">
<font SIZE="12" BOLD="false"/>
<node TEXT="" ID="ID_993090193" CREATED="1461122793059" MODIFIED="1461633612262">
<hook URI="Imagenes/word-2007-interface.png" SIZE="0.4175166" NAME="ExternalObject"/>
</node>
</node>
</node>
<node TEXT="...and refreshing alternatives" ID="ID_1251530825" CREATED="1490301043270" MODIFIED="1490301063196">
<font SIZE="14" BOLD="false"/>
<node TEXT="Scrivener" ID="ID_1774998048" CREATED="1490303276474" MODIFIED="1490303571277" LINK="http://www.literatureandlatte.com/scrivener.php">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Ulysses" ID="ID_1112902952" CREATED="1490303298968" MODIFIED="1490303459961" LINK="https://ghost.org/es/vs/tumblr/">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Atom" ID="ID_760404261" CREATED="1490311183190" MODIFIED="1490311185313">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Quiver" ID="ID_809178773" CREATED="1490303841965" MODIFIED="1490303847587" LINK="http://happenapps.com/#quiver">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Ghost" ID="ID_1614854557" CREATED="1490304060137" MODIFIED="1490304070426" LINK="https://ghost.org/es/vs/tumblr/">
<font SIZE="14" BOLD="false"/>
</node>
</node>
<node TEXT="Could be&#xa;the other way around?" ID="ID_210903331" CREATED="1488883310465" MODIFIED="1489495828709">
<font SIZE="14" BOLD="false"/>
<node TEXT="" ID="ID_1071880995" CREATED="1461119947330" MODIFIED="1461632420826">
<font ITALIC="false"/>
<hook URI="Imagenes/herramientas-amoldables-1.png" SIZE="0.47361735" NAME="ExternalObject"/>
<node TEXT="" ID="ID_47552786" CREATED="1461120072851" MODIFIED="1461679527993">
<hook URI="Imagenes/herramientas-amoldables-2.png" SIZE="0.5674635" NAME="ExternalObject"/>
<node TEXT="" ID="ID_1910453462" CREATED="1461120403239" MODIFIED="1461679379054">
<hook URI="Imagenes/herramientas-amoldables-3.png" SIZE="0.44841895" NAME="ExternalObject"/>
<node TEXT="" FOLDED="true" ID="ID_806997874" CREATED="1461120573108" MODIFIED="1461632987429" HGAP_QUANTITY="10.0 px" VSHIFT_QUANTITY="10.0 px">
<hook URI="Imagenes/herramientas-amoldables-4.png" SIZE="0.7946251" NAME="ExternalObject"/>
<node TEXT="im&#xe1;genes tomadas de:&#xa;https://vimeo.com/83019193" ID="ID_726792367" CREATED="1461633143770" MODIFIED="1461633281843" LINK="https://vimeo.com/83019193"/>
</node>
</node>
</node>
</node>
<node TEXT="An example" ID="ID_854197478" CREATED="1488883883422" MODIFIED="1488884858106">
<font SIZE="14" BOLD="false" ITALIC="true"/>
<node TEXT="Specific domain visualizations for public information on medicine" ID="ID_1550367081" CREATED="1488884784413" MODIFIED="1488884861751" LINK="http://mutabit.com/offray/blog/en/entry/sdv-infomed">
<hook URI="LocalImages/omeprazol-by-property.png" SIZE="0.7741935" NAME="ExternalObject"/>
<font SIZE="12"/>
</node>
</node>
</node>
</node>
</node>
</node>
</node>
<node TEXT="Data" ID="ID_1800746997" CREATED="1488815401376" MODIFIED="1489495859068">
<font SIZE="16" BOLD="false"/>
<node TEXT="... the answer to a question that could be asked in a different way" ID="ID_1505876776" CREATED="1488815481185" MODIFIED="1488886166116">
<font SIZE="16" BOLD="false"/>
<node TEXT="" ID="ID_1805605311" CREATED="1488917713322" MODIFIED="1488917713323">
<hook NAME="FirstGroupNode"/>
</node>
<node TEXT="Some of them are inmutable" ID="ID_498942573" CREATED="1488886172102" MODIFIED="1488886194743">
<font SIZE="14" BOLD="false"/>
<node TEXT="" ID="ID_1525145796" CREATED="1488886394014" MODIFIED="1488886405906">
<hook URI="../../../Es/Presentaciones/AbreLatam2016/images/speed-of-light.png" SIZE="0.174304" NAME="ExternalObject"/>
</node>
</node>
<node TEXT="Most of them are our design" ID="ID_1005475289" CREATED="1488886214887" MODIFIED="1488886223832">
<font SIZE="14" BOLD="false"/>
<node TEXT="" ID="ID_1622679955" CREATED="1488886447348" MODIFIED="1488886461493">
<hook URI="../../../Es/Presentaciones/AbreLatam2016/images/gender-form.png" SIZE="0.4111508" NAME="ExternalObject"/>
</node>
</node>
<node TEXT="" ID="ID_1063530166" CREATED="1488917713321" MODIFIED="1488917713322">
<hook NAME="SummaryNode"/>
<hook NAME="AlwaysUnfoldedNode"/>
<node TEXT="Who becomes data of who?" ID="ID_1826689929" CREATED="1488917713325" MODIFIED="1488917734961">
<font SIZE="14" BOLD="false"/>
<node TEXT="Now: only they watching us" ID="ID_1724253087" CREATED="1488917805616" MODIFIED="1488919157883">
<hook URI="../../../Es/Presentaciones/AbreLatam2016/images/observing-us.png" SIZE="0.6119089" NAME="ExternalObject"/>
<font SIZE="14" BOLD="false"/>
<node TEXT="Possible: also us watching them" ID="ID_1804222671" CREATED="1488918232423" MODIFIED="1488919163483">
<hook URI="../../../Es/Presentaciones/AbreLatam2016/images/observing-them.png" SIZE="0.625" NAME="ExternalObject"/>
<font SIZE="14" BOLD="false"/>
</node>
</node>
</node>
</node>
</node>
</node>
<node TEXT="" ID="ID_1844373844" CREATED="1488916561052" MODIFIED="1488916561054">
<hook NAME="FirstGroupNode"/>
</node>
<node TEXT="Code / Data / Doc" ID="ID_833345178" CREATED="1488815864158" MODIFIED="1489495861335">
<font SIZE="16" BOLD="false"/>
<node TEXT="Complex multilayered&#xa;infrastructure" ID="ID_999012132" CREATED="1488962919397" MODIFIED="1488963523912">
<font SIZE="14" BOLD="false"/>
<node TEXT="" ID="ID_639023372" CREATED="1488963656620" MODIFIED="1488963656620">
<hook NAME="FirstGroupNode"/>
</node>
<node TEXT="Document" ID="ID_460495295" CREATED="1488963605400" MODIFIED="1488963612442">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="App" ID="ID_792347259" CREATED="1488963595683" MODIFIED="1488963601091">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="" ID="ID_583461027" CREATED="1488963656618" MODIFIED="1488963656619">
<hook NAME="SummaryNode"/>
<hook NAME="AlwaysUnfoldedNode"/>
<node TEXT="This is where&#xa;&quot;end user&quot; lives" ID="ID_887594311" CREATED="1488963656621" MODIFIED="1488963690619">
<font SIZE="10" BOLD="false"/>
</node>
</node>
<node TEXT="IDE" ID="ID_1987475536" CREATED="1488963587890" MODIFIED="1488963591032">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Programming language" ID="ID_86422565" CREATED="1488963569103" MODIFIED="1488963578889">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="OS" ID="ID_488639543" CREATED="1488963526362" MODIFIED="1488963568218">
<font SIZE="12" BOLD="false"/>
</node>
</node>
</node>
<node TEXT="&quot;Big&quot; / small&#xa;data" ID="ID_1676590116" CREATED="1488815869762" MODIFIED="1489495862822">
<font SIZE="16" BOLD="false"/>
<node TEXT="Those who control infrastructure define/confine interaction" ID="ID_1349328036" CREATED="1488962858765" MODIFIED="1488962893957">
<font SIZE="14" BOLD="false"/>
<node TEXT="Pocket infrastructures" ID="ID_1713268598" CREATED="1488962897283" MODIFIED="1488963881542">
<font SIZE="12" BOLD="false"/>
<node TEXT="Work online / offline" ID="ID_1457715460" CREATED="1488963886576" MODIFIED="1488963901726">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Fit in your pocket" ID="ID_648541265" CREATED="1488963906199" MODIFIED="1488963911418">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Self contained" ID="ID_1720601800" CREATED="1488963911957" MODIFIED="1489518865622">
<arrowlink SHAPE="CUBIC_CURVE" COLOR="#000000" WIDTH="2" TRANSPARENCY="200" FONT_SIZE="9" FONT_FAMILY="SansSerif" DESTINATION="ID_999012132" MIDDLE_LABEL="versus" STARTINCLINATION="-81;-233;" ENDINCLINATION="152;-177;" STARTARROW="NONE" ENDARROW="DEFAULT"/>
<font SIZE="12" BOLD="false"/>
</node>
</node>
</node>
</node>
<node TEXT="" ID="ID_1529605818" CREATED="1488916561051" MODIFIED="1488916561052">
<hook NAME="SummaryNode"/>
<hook NAME="AlwaysUnfoldedNode"/>
<node TEXT="Examples" ID="ID_911910882" CREATED="1488885442597" MODIFIED="1489495882631">
<font SIZE="14" BOLD="false"/>
<node TEXT="Panama Papers &amp; Offshore leaks" ID="ID_101737518" CREATED="1488885506249" MODIFIED="1488927211786" LINK="http://mutabit.com/offray/blog/en/entry/panama-papers-1">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Twitter Data Selfies" ID="ID_1375017178" CREATED="1488885573458" MODIFIED="1490031921293" LINK="http://mutabit.com/offray/blog/en/entry/ds-twitter-mockup">
<arrowlink SHAPE="CUBIC_CURVE" COLOR="#000000" WIDTH="2" TRANSPARENCY="200" FONT_SIZE="9" FONT_FAMILY="SansSerif" DESTINATION="ID_1804222671" STARTINCLINATION="211;131;" ENDINCLINATION="-137;276;" STARTARROW="NONE" ENDARROW="DEFAULT"/>
<font SIZE="14" BOLD="false"/>
</node>
</node>
</node>
</node>
</node>
</node>
<node TEXT="Artifacts + communities" POSITION="right" ID="ID_510182000" CREATED="1488815936596" MODIFIED="1488919901726">
<font SIZE="16"/>
<node TEXT="Data Week" ID="ID_888903068" CREATED="1488926401233" MODIFIED="1488926780635" LINK="http://mutabit.com/dataweek/">
<font SIZE="14" BOLD="false"/>
<node TEXT="+" ID="ID_956021400" CREATED="1488926606207" MODIFIED="1488926612836">
<font SIZE="14"/>
<node TEXT="workshop" ID="ID_790073246" CREATED="1488926543494" MODIFIED="1488926630499">
<font SIZE="14" BOLD="false"/>
<node TEXT="Learning by doing and example" ID="ID_602906774" CREATED="1488926641507" MODIFIED="1488926659171">
<font SIZE="12" BOLD="false"/>
</node>
</node>
<node TEXT="hackathon" ID="ID_1651990700" CREATED="1488926587083" MODIFIED="1488926593986">
<font SIZE="14" BOLD="false"/>
<node TEXT="Intensive Prototyping &amp; community building" ID="ID_669460352" CREATED="1488926662840" MODIFIED="1488926689468">
<font SIZE="12" BOLD="false"/>
</node>
</node>
</node>
<node TEXT="Participant&apos;s profiles" ID="ID_1445774687" CREATED="1488926695442" MODIFIED="1489495946152">
<font SIZE="14" BOLD="false"/>
<node TEXT="Teacher" ID="ID_1001768227" CREATED="1488926704394" MODIFIED="1489495951057"/>
<node TEXT="Student" ID="ID_1264557109" CREATED="1488926708409" MODIFIED="1489495953507"/>
<node TEXT="Philosoper" ID="ID_1991615083" CREATED="1488926710891" MODIFIED="1489495955518"/>
<node TEXT="Journalist" ID="ID_276742432" CREATED="1488926719742" MODIFIED="1489495958191"/>
<node TEXT="Newbie" ID="ID_1050523970" CREATED="1488926727470" MODIFIED="1489495961079"/>
<node TEXT="Hacker / Coder" ID="ID_1478001231" CREATED="1488926739090" MODIFIED="1489495978540"/>
<node TEXT="Researcher" ID="ID_498106734" CREATED="1488926751241" MODIFIED="1489495969542"/>
<node TEXT="Activist" ID="ID_1339331785" CREATED="1489495984609" MODIFIED="1489495987848"/>
</node>
<node TEXT="Capacity building&#xa;&quot;inside&quot; community &amp; infrastructure" ID="ID_1459797017" CREATED="1488926785281" MODIFIED="1488926997646">
<font SIZE="14" BOLD="false"/>
<node TEXT="taken from: https://is.gd/nomad_cath" ID="ID_218035297" CREATED="1488927009752" MODIFIED="1488927094898">
<hook URI="LocalImages/nomads-1.png" SIZE="0.77080894" NAME="ExternalObject"/>
<node TEXT="taken from: https://is.gd/nomad_cath" ID="ID_56636803" CREATED="1488927106529" MODIFIED="1488927159920">
<hook URI="LocalImages/nomads-2.png" SIZE="0.7614839" NAME="ExternalObject"/>
<node TEXT="Navegar la complejidad" ID="ID_1963860389" CREATED="1490919560913" MODIFIED="1490919566317"/>
<node TEXT="El artefacto es el curr&#xed;culo" ID="ID_556902629" CREATED="1490919574124" MODIFIED="1490919577727"/>
</node>
</node>
</node>
</node>
<node TEXT="The near future:" ID="ID_1002902364" CREATED="1488928011112" MODIFIED="1488928022761">
<font SIZE="14" BOLD="false"/>
<node TEXT="JOSS" ID="ID_1712525740" CREATED="1489838488357" MODIFIED="1490914329055" LINK="http://joss.theoj.org/">
<font SIZE="14" BOLD="false"/>
<node TEXT="About" ID="ID_1837413560" CREATED="1490914335467" MODIFIED="1490914338045"/>
</node>
<node TEXT="Data Week 8" ID="ID_1041339953" CREATED="1489496382406" MODIFIED="1489496386697">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Google summer of code" ID="ID_457016508" CREATED="1488928026869" MODIFIED="1488928218270" LINK="https://twitter.com/offrayLC/status/837859107562532865">
<font SIZE="14" BOLD="false"/>
<node TEXT="Context" ID="ID_1536027699" CREATED="1490031649329" MODIFIED="1490031674582" LINK="https://summerofcode.withgoogle.com/">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Pharo: Call for students" ID="ID_1377677053" CREATED="1490031560887" MODIFIED="1490313597661" LINK="http://pharo.org/news/GSoC17Students">
<font SIZE="12" BOLD="false"/>
</node>
<node TEXT="Grafoscopio as a Summer of code project" ID="ID_175390937" CREATED="1490203628499" MODIFIED="1490203649115" LINK="http://gsoc.pharo.org/#topic-grafoscopio-literate-computing-and-reproducible-research-for-pharo">
<font SIZE="12" BOLD="false"/>
</node>
</node>
<node TEXT="re:publica Berlin&#xa;(May, 2017)" ID="ID_1676470265" CREATED="1488928094733" MODIFIED="1490313806647">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Critical code+data literacy education" ID="ID_463634827" CREATED="1489496019823" MODIFIED="1489496142073">
<font SIZE="14" BOLD="false"/>
<node TEXT="contrast" ID="ID_1610672511" CREATED="1489496143443" MODIFIED="1489826062203">
<font SIZE="14" BOLD="false"/>
<node TEXT="Formal education" ID="ID_513970086" CREATED="1489496268102" MODIFIED="1490288483079">
<font SIZE="14" BOLD="false"/>
<node TEXT="Lots of time (epoche of life)" ID="ID_572566733" CREATED="1490288513686" MODIFIED="1490288529895">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Degrees" ID="ID_747346790" CREATED="1490288491743" MODIFIED="1490288504778">
<font SIZE="14" BOLD="false"/>
</node>
</node>
<node TEXT="Bootcamps" ID="ID_887781387" CREATED="1490455789415" MODIFIED="1490455793089">
<font SIZE="14" BOLD="false"/>
<node TEXT="3 intensive months of your life" ID="ID_91350456" CREATED="1490288513686" MODIFIED="1490455821926">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Jobs ?" ID="ID_1811027170" CREATED="1490455827168" MODIFIED="1490455832147">
<font SIZE="14" BOLD="false"/>
</node>
</node>
<node TEXT="Informal education" ID="ID_738302041" CREATED="1489496305948" MODIFIED="1490288567227">
<icon BUILTIN="button_ok"/>
<font SIZE="14" BOLD="false"/>
<node TEXT="Organic time&#xa;Longlife" ID="ID_1302300553" CREATED="1490288743626" MODIFIED="1490288801034">
<font SIZE="14" BOLD="false"/>
</node>
<node TEXT="Portafolios" ID="ID_908067301" CREATED="1490288733767" MODIFIED="1490288739629">
<font SIZE="14" BOLD="false"/>
</node>
</node>
</node>
</node>
</node>
</node>
<node TEXT="Demo time" POSITION="right" ID="ID_1002688031" CREATED="1488927174298" MODIFIED="1488927177880">
<font SIZE="16"/>
</node>
<node TEXT="More questions / comments" POSITION="right" ID="ID_190273179" CREATED="1488927188317" MODIFIED="1489496216260">
<font SIZE="16"/>
</node>
<node TEXT="License" FOLDED="true" POSITION="right" ID="ID_1536700324" CREATED="1490301861700" MODIFIED="1490301867516">
<font SIZE="16"/>
<node TEXT="Creative Commons&#xa;Attribution Share Alike" FOLDED="true" ID="ID_229151547" CREATED="1461678182923" MODIFIED="1461678228896">
<hook URI="Imagenes/by-sa.png" SIZE="0.39184317" NAME="ExternalObject"/>
<node TEXT="cc 2016-2017 por Offray Luna C&#xe1;rdenas se distribuye bajo una Licencia Creative Commons Atribuci&#xf3;n-CompartirIgual 4.0 Internacional." ID="ID_1736201537" CREATED="1461678323873" MODIFIED="1490301934799"/>
</node>
</node>
<node TEXT="Author" FOLDED="true" POSITION="right" ID="ID_853968580" CREATED="1490301887578" MODIFIED="1490301889911">
<font SIZE="16"/>
<node TEXT="Offray Vladimir&#xa;Luna C&#xe1;rdenas" FOLDED="true" ID="ID_239193035" CREATED="1461677918264" MODIFIED="1461677927168">
<node TEXT="Correo: offray@mutabit.com" ID="ID_997624194" CREATED="1461677928023" MODIFIED="1461677963242"/>
<node TEXT="Twitter: @offrayLC" ID="ID_1156975694" CREATED="1461677933301" MODIFIED="1461677944625"/>
<node TEXT="Blog: http://mutabit.com/offray/blog" ID="ID_1496044372" CREATED="1461677945208" MODIFIED="1461677955652"/>
</node>
</node>
</node>
</map>