|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<title>We have a USB full of documents</title>
|
|
|
<meta name="PDI" content="Documentation of PZI's Special Issue #11">
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
var head = document.getElementsByTagName('head')[0];
|
|
|
var xhttp = new XMLHttpRequest();
|
|
|
xhttp.onreadystatechange = function() {
|
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
|
let css = document.createElement('style');
|
|
|
css.innerHTML = this.responseText;
|
|
|
head.appendChild(css);
|
|
|
}
|
|
|
};
|
|
|
xhttp.open("GET", "https://pad.xpub.nl/p/publication11_CSS/export/txt", true);
|
|
|
xhttp.send();
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<div class="header">
|
|
|
<h1>We have a USB full of documents</h1>
|
|
|
</div>
|
|
|
|
|
|
<nav> <!-- Control buttons -->
|
|
|
<div class="myBtnContainer" id="myBtnContainer">
|
|
|
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
|
|
|
<button class="btn" onclick="filterSelection('tools')"> Tools</button>
|
|
|
<button class="btn" onclick="filterSelection('methods')"> Methods</button>
|
|
|
<button class="btn" onclick="filterSelection('experiences')"> Experiences </button>
|
|
|
</div>
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="intro" id="intro" data-aos="hide" data-aos-anchor="#empty" data-aos-duration="300" data-aos-offset="555"><h2>This is an introduction...</h2> <h5> ...to the whole freaking thing. You want to cook? Go ahead! Embrace the limitations!!</h5>
|
|
|
<a href="#swarm1" class="introlink">Swarm1</a>
|
|
|
<a href="#swarm2" class="introlink">Swarm2</a>
|
|
|
<a href="#swarm3" class="introlink">Swarm3</a></div>
|
|
|
|
|
|
<div class="main">
|
|
|
<div class="empty" id="empty"></div>
|
|
|
<div class="container">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="bashscript">
|
|
|
<h4>BASH script</h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#bashscript" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon01.png" alt="icon" width="100"></div>
|
|
|
<p>A BASH script is a series of commands stored in a text file. It contains commands that one would use in the command-line.<br>
|
|
|
We used BASH scripts to automatically upload batches of files including metadata to the <a href="#mediawiki">Wiki</a>.
|
|
|
<br><br>
|
|
|
<div class="code">for n, _file in enumerate(lsimgs):<br>
|
|
|
pagename = f'{dirname}-{_file}'<br>
|
|
|
print_colormsg(pagename, level='ok')<br>
|
|
|
page = site.pages[_file]<br>
|
|
|
<br>
|
|
|
if page.exists:<br>
|
|
|
url = page.imageinfo['descriptionurl']<br>
|
|
|
print_colormsg(
|
|
|
f'Already exists in {url} Will NOT be uploaded',
|
|
|
level='warning')<br>
|
|
|
else:<br>
|
|
|
img_smw_prop_val = smw_propval_template.render(<br>
|
|
|
title=args.title,<br>
|
|
|
date=args.date,<br>
|
|
|
part=n + 1,<br>
|
|
|
partof=len(lsimgs),<br>
|
|
|
creator=(', ').join(args.creator[1:]),<br>
|
|
|
organization=(', ').join(args.org[1:]),<br>
|
|
|
format=(', ').join(args.format[1:]),<br>
|
|
|
event=(', ').join(args.event[1:]),<br>
|
|
|
topic=(', ').join(args.topic[1:]),<br>
|
|
|
language=(', ').join(args.language[1:])<br>
|
|
|
)</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="darkweb">
|
|
|
<h4>Dark Web</h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#darkweb" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon02.png" alt="icon" width="100"></div>
|
|
|
<p>The Dark Web is a portion of the Internet that one cannot reach by the use of regular search engines. Users need specific software, configurations, or authorization to access to be able to use it. This shelter of anonymity is of a great importance while dealing with censorship and privacy concerns, and because of that the Dark Web is also oftenly perceived as a haven for criminal activities. Tor browser is probably the most used tool to access the dark web.<br>
|
|
|
The Dark Web offers the protective layers that make sure the location of the servers and the identity of the users is secure in the case of possible attempts of persecution of any kind.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="torbrowser">
|
|
|
<h4><a href="https://www.torproject.org/download/">Tor Browser</a></h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#torbrowser" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon03.png" alt="icon" width="100"></div>
|
|
|
<p>Using the Tor Browser helps prevent others from tracking your browsing behavior and user details like location. It is provided by the Tor Project, a non-profit organization. It works by routing all your internet traffic trough random nodes, listed in the Tor network and thus rendering the origin of it unrecognizable.
|
|
|
It is probably the most famous tool used to access the <a href="#darkweb">Dark Web</a>.<br>
|
|
|
<br>
|
|
|
<div class="code">somewhere, always, online<br>
|
|
|
everywhere, always, online<br>
|
|
|
somewhere, sometimes, offline<br>
|
|
|
nowhere, never, online</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="imgemagick">
|
|
|
<h4><a href="https://imagemagick.org/index.php">Image Magick</a></h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#imgemagick" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon04.png" alt="icon" width="100"></div>
|
|
|
<p>Image Magick is a free command-line tool. It comes with extensive functions to edit and convert images.<br>
|
|
|
We used Image Magic to convert multipage PDFs into individual JPGs to upload to the <a href="#mediawiki">Wiki</a>.<br>
|
|
|
<br>
|
|
|
<div class="code">convert -quality 100 -density 300 [name-of-pdf] %02d.jpg</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="pandoc">
|
|
|
<h4><a href="https://pandoc.org/">Pandoc</a></h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#pandoc" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon05.png" alt="icon" width="100"></div>
|
|
|
<p>Pandoc is a free command-line tool used to convert one markup format into a different one.<br>
|
|
|
We used Pandoc in the process of converting documents written in <a href="#markdown">markdown</a> into <a href="#htmlcssjs">HTML</a>.
|
|
|
<br><br>
|
|
|
<div class="code">pandoc -f markdown -t html
|
|
|
pandoc input.md -o output.html</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="tesseract">
|
|
|
<h4><a href="https://github.com/tesseract-ocr/tesseract">Tesseract</a></h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#tesseract" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon06.png" alt="icon" width="100"></div>
|
|
|
<p>Tesseract is a free "optical character recognition" (OCR) engine, and supposedly was the first one of its kind. It recognizes text within images and outputs this textual content in either a text file or a PDF in which the text is selectable and searchable.<br>
|
|
|
Tesseract is essential to provide a comprehensive overview when working with a big batch of scanned documents. The quality of the results depends very much on the quality of the documents and thus can result in the need for large-scale revisions. More concretely - not all images that contain text seem to be readable by Tesseract. Some images might be damaged (faded ink, strange font, etc.), therefore the recognition does not afford precise results. This is when humans come back into play, to edit and correct the inaccuracies, to proofread the machine.
|
|
|
<br><br>
|
|
|
<div class="code">tesseract input.jpg output_file pdf</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="mediawiki">
|
|
|
<h4><a href="https://www.mediawiki.org/wiki/MediaWiki">MediaWiki</a></h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#mediawiki" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon07.png" alt="icon" width="100"></div>
|
|
|
<p>MediaWiki, the basis for Wikipedia and most other MediaWiki websites, is a free and open-source "collaboration and documentation" platform engine. Wiki markup is the language used to write content on a wiki website. <br>
|
|
|
MediaWik served us as a platform that allows many users to handle large amounts of image files and metadata collectively. It features helpful tools to do so, such as <a href="#pageforms">page forms</a>, <a href="#semanticqueries">semantic queries</a> and an <a href="#api">API</a>.
|
|
|
<br><br>
|
|
|
<div class="code">= Headline=<br>
|
|
|
* List item<br>
|
|
|
** Sublist item 1<br>
|
|
|
** Sublist item 2</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="raspberrypi">
|
|
|
<h4><a href="https://www.raspberrypi.org/">Raspberry Pi</a></h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#raspberrypi" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon08.png" alt="icon" width="100"></div>
|
|
|
<p>Raspberry Pi is a series of small computers with internal RAM & CPU/GPU and several connectors, like USB or Ethernet. They are being used by a big and diverse community, in education or for all kinds of prototyping projects. <br>
|
|
|
We used them as a low cost web server to store our websites. As a security measure, three similar servers in different, secret locations provide continuous access to the material, serving as alternative hosts, should one of them be taken down or fail. The basic code structure is being created with <a href="#pythonscript">Python</a>.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="markdown">
|
|
|
<h4><a href="https://daringfireball.net/projects/markdown/">Markdown</a></h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#markdown" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon09.png" alt="icon" width="100"></div>
|
|
|
<p>Markdown is a markup language.
|
|
|
Markup languages are used to structure the linguistic syntax of a chosen system in a more user-friendly way. These languages are supposed to be easier to use than the actual code, as they are to be read by humans. What is written can easily be converted into the syntax of other languages.
|
|
|
Markdown has been originally developed to simplify writing <a href="#htmlcssjs">HTML</a>, but has ever since changed its role and now it provides conversions into different formats.<br>
|
|
|
We used Markdown while creating the <a href="#annotatedreaders">annotated readers (SWARM 1,2,3)</a> in order to convert plain text into html.<br>
|
|
|
<br>
|
|
|
<div class="code">| XPub | Is | Cool |<br>
|
|
|
| ------------- |:-------------:| -----:|<br>
|
|
|
| 3 is | right-aligned | $1600 |<br>
|
|
|
| 2 is | centered | $12 |<br>
|
|
|
| computers | are neat | $1 |</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="htmlcssjs">
|
|
|
<h4><a href="https://www.w3schools.com/">HTML, CSS, JS</a></h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#htmlcssjs" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon10.png" alt="icon" width="100"></div>
|
|
|
<p>Hypertext Markup language (HTML) is what the basic building blocks of the web are made of. This language defines and categorizes the content of a website and guides the user, e.g. from one page to another with the use of the so called hyperlinks.<br>
|
|
|
Cascading Style Sheet (CSS) is the visual facade, the makeup that is put on top of the HTML content. It refers to the categories assigned before. It is responsible for how a website looks like and also for basic interactions & animations.<br>
|
|
|
Java Script (JS) is the busy crane-worker that is still around, even after the building is already finished, to rearrange building blocks. Java Script controls interactions, animations, the loading and transformation of content.<br>
|
|
|
These languages can either be written all in one document or in separate ones, linked to one another.<br>
|
|
|
We used HTML, CSS and Java Script to create this website. We used CSS and Java Script to further edit the HTML created with <a href="#query2html">query2HTML</a>.<br>
|
|
|
<br>
|
|
|
<div class="code"><h1 id="header">Regular Publishing</h1><br>
|
|
|
<style>h1 {color: white; text-align: center;}</style><br>
|
|
|
<script>document.getElementById("header").innerHTML = "Anonymous publishing";</script></div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="web2print">
|
|
|
<h4>Web2Print</h4>
|
|
|
<div class="placeholder" data-aos="zoom-in" data-aos-anchor="#web2print" data-aos-duration="1000" data-aos-offset="300"><img src="img/icon11.png" alt="icon" width="100"></div>
|
|
|
<p>Web2Print is a method, that uses websites as a basis from which print layouts are created. When using this online workflow contents are open to a number of contributors, flexible and easy to change throughout the process.<br>
|
|
|
We used Web2Print to enable the printing of the website you're looking at, as well as for the creation of the <a href="#annotatedreaders">annotated readers (SWARM)</a> in their physical form.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="pageforms">
|
|
|
<h4>Page forms (MediaWiki)</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#pageforms" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon12.png" alt="icon" width="100"></div>
|
|
|
<p>Page forms is an extension that provides a <a href="#mediawiki">MediaWiki</a> instance with templates to create pages, edit pages and add query data to them. <br>
|
|
|
We used these forms to implement the same categories for each document and assign them their collected properties.<br>
|
|
|
<br>
|
|
|
<div class="code">{{ImageMetadata<br>
|
|
|
|Title=documenttitle<br>
|
|
|
|Date=1987/11/01<br>
|
|
|
|Part=<br>
|
|
|
|Partof=5<br>
|
|
|
|Creator=Organization1 (Org1), Organization2 (Org2), Organization3 (Org3), <br>
|
|
|
|Format=Paper, Manual<br>
|
|
|
|Event=<br>
|
|
|
|Topic=Political Ideologies, Arts and Culture, International Affairs, Economics, Resistance Tactics<br>
|
|
|
|Language=English<br>
|
|
|
}}<br>
|
|
|
=OCR=<br>
|
|
|
<nowiki><br>
|
|
|
Original file name: filename.pdf<br>
|
|
|
</nowiki></div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="semanticqueries">
|
|
|
<h4><a href="https://www.semantic-mediawiki.org/wiki/Semantic_MediaWiki">Semantic queries</a></h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#semanticqueries" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon13.png" alt="icon" width="100"></div>
|
|
|
<p>While lexical search returns literal matches to a search request, semantic search "understands" the query. When compiling the search results, this search procedure relies on previously entered, definitive, metadata information and thus usually returns more accurate results. Multiple requests can be combined to create more complex queries. There are two different factors to the queries: Which pages the search is based on and which information is obtained from them. <a href="#mediawiki">WikiMedia</a> uses a simple semantic language "semantic MediaWiki" for this.<br>
|
|
|
We used it to selectively query the previously entered content using meta data.<br>
|
|
|
<br>
|
|
|
<div class="code">[[Category:City]]<br>
|
|
|
[[Located in::Germany]] <br>
|
|
|
|?Population <br>
|
|
|
|?Area#km² = Size in km²</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="api">
|
|
|
<h4><a href="https://www.mediawiki.org/w/api.php ">API</a></h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#api" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon14.png" alt="icon" width="100"></div>
|
|
|
<p>An API (Application Programming Interface) is an interface that enables external programs or systems to communicate with the software. The API defines how to access and how to define requests. Some APIs are created specifically for certain programs, others follow industry standards.<br>
|
|
|
We used MediaWiki's API to organize and bundle a large amount of material and later in the process also to export the search queries from the Wiki user interface and then, using <a href="#query2html">query2html</a>, converted them to HTML.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="pythonscript">
|
|
|
<h4><a href="https://www.python.org/">Python</a> script</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#pythonscript" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon15.png" alt="icon" width="100"></div>
|
|
|
<p>Python is a highly abstract (high-level) programming language in which logical and clearly structured codes for projects of various sizes have been written since 1991. It is equipped/comes with a significant amount of libraries that simplify complex tasks.<br>
|
|
|
We used the Python library Mwclient to interface with the <a href="#mediawiki">MediaWiki</a> <a href="#api">API</a> in order to extract the results of semantic queries.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="staticwebsite">
|
|
|
<h4>Static website</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#staticwebsite" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon16.png" alt="icon" width="100"></div>
|
|
|
<p>A static website, the opposite of dynamic websites, is a website with unchanging content, which is mostly written in <a href="#htmlcssjs">HTML</a> and outputs the exact same content to each user. Benefits of this model are the lack of dependencies and increased security and performance. <br>
|
|
|
A static website was used to publish the archive.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="query2html">
|
|
|
<h4>query2HTML</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#query2html" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon17.png" alt="icon" width="100"></div>
|
|
|
<p>Using the <a href="#mediawiki">MediaWiki</a> <a href="#api">API</a>, <a href="#pythonscript">Python</a> and <a href="#pandoc">Pandoc</a> we converted the results of <a href="#semanticqueries">semantic queries</a> to a <a href="#staticwebsite">static website</a>.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="git">
|
|
|
<h4><a href="https://git-scm.com/">GIT</a></h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#git" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon18.png" alt="icon" width="100"></div>
|
|
|
<p>GIT is a version-based online data storage service that is used mostly to collectively work on code. This collaborative working environment retains all versions created, it is non-destructive. It also features the option of dividing a project into different versions, so called branches, which can be processed separately, and merged again afterwards.<br>
|
|
|
<br>
|
|
|
<div class="code">git commit -m "small changes"</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="ether2html">
|
|
|
<h4><a href="http://osp.kitchen/tools/ether2html/">Ether2HTML</a></h4>
|
|
|
<div class="placeholder"><! ––data-aos="zoom-in" data-aos-anchor="#ether2html" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon19.png" alt="icon" width="100"></div>
|
|
|
<p>An <a href="#etherpad">Etherpad</a> document can be used to collectively work on <a href="#htmlcssjs">HTML, CSS and Javascript</a> code, while still seeing a real time preview, using <a href="#curl">CURL</a>.<br>
|
|
|
We used this method while creating the website you're looking at.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="curl">
|
|
|
<h4><a href="https://curl.haxx.se/">Curl</a></h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#curl" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon20.png" alt="icon" width="100"></div>
|
|
|
<p>Curl is a command line tool, that automatically downloads content from a given URL and stores it in a file on your machine.
|
|
|
We used this tool as part of the <a href="#ether2html">Ether2HTML</a> method.<br>
|
|
|
<br>
|
|
|
<div class="code">while true; do sleep 5; curl https://pad.xpub.nl/p/Index_HTML/export/txt > index.html; done</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv tools" id="etherpad">
|
|
|
<h4><a href="https://etherpad.org/">Etherpad</a></h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#etherpad" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon21.png" alt="icon" width="100"></div>
|
|
|
<p>Etherpad is a open source online text editor that allows an unlimited number of contributors to collaborively write in the same virtual space in real time. This tool was used in all parts of the process to collectively take notes, write and organize content, collect, communicate and work on code, using the <a href="#ether2html">Ether2HTML</a> method.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="codeofconduct">
|
|
|
<h4>Code of conduct</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#codeofconduct" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon22.png" alt="icon" width="100"></div>
|
|
|
<p>We created a code of conduct to make sure that we were on the same page about the fundamentals of our regular interactions as a group. It served as a reference on how to approach each other and helped prevent avoidable unconstructive conflict.<br>
|
|
|
<br>
|
|
|
<div class="code">
|
|
|
<ul>
|
|
|
<li>Listen, don’t interrupt.</li>
|
|
|
<li>Listen actively - Show that you’ve understood.</li>
|
|
|
<li>If you don’t agree, you can still accept others opinions.</li>
|
|
|
<li>When negotiating, be convivial (be nice!).</li>
|
|
|
<li>Ask what is needed before you give.</li>
|
|
|
<li>If personal issues arise, try to address/resolve - if not: park it for the sake of the project.</li>
|
|
|
<li>When you don’t understand, ask for help (be humble).</li>
|
|
|
<li>Be aware of the space you take. (Check temperature - silence is OKAY!)</li>
|
|
|
<li>Before making a decision, check with others (might be an unhappy average).</li>
|
|
|
<li>Speak for yourself and your own experience (see links: nonviolent communication)</li>
|
|
|
<li>Use „AND“ instead of „BUT“ and „HOWEVER“.</li>
|
|
|
<li>These rules can be modified by consensus.</li>
|
|
|
</ul></div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="backgroundknowledge">
|
|
|
<h4>Obtaining background knowledge</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#backgroundknowledge" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon23.png" alt="icon" width="100"></div>
|
|
|
<p>To develop an understanding of a complex topic, basic research - on/offline - is the first necessary step to take. Talking about the facts as a group and/or collectively reading texts on the topic can help in the process. If possible, the best way to develop a deeper understanding is to get in touch with experts and/or witnesses. In the best case, to conduct an interview or even organize a meeting as a group or a workshop on the topic. Also taking as many different points of view, even if you don’t agree with them, is an imperative to create a differentiated opinion on a complex matter.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="firstimpression">
|
|
|
<h4>Getting a first impression</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#firstimpression" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon25.png" alt="icon" width="100"></div>
|
|
|
<p>When having first contact with the material that will constitute your work, getting a first quick overview and comprehending the scale of it, can influence the development of your process drastically. The reason for this is that, especially in time-limited projects, the first impressions significantly affect or even determine the creative and conceptual design that you decide for. Therefore, the fist contact with the material should be made with caution and calmness.<br>
|
|
|
In order to get a good overview of the archival material, when we first encountered it, we divided the documents, skimmed them and created a <a href="#polytpych">polyptych summary</a> that also served as a basis for a collective discussion. Beforehand, we had <a href="#readingexercises">trained our understanding of text</a> in order to be able to process the material effectively.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="readingexercises">
|
|
|
<h4>Reading Exercises</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#readingexercises" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon24.png" alt="icon" width="100"></div>
|
|
|
<p>Several different reading exercises helped us to enhance our text comprehension and prepare for the mental processing of large amounts of content.
|
|
|
<br><br>
|
|
|
<div class="code">Reading Exercise 1: Drawing intertextual lines<br>
|
|
|
Requires two participants with two different texts, of whom one (Person 1) starts reading their text out loud. Person 2 skims their text until they find an idea in their text that relates in some way to an idea, a thought that is being read out loud by Person 1. They both mark this adjacency and briefly discuss the interconnections between the two different ideas from both texts. Then they switch roles. Person 2 reads their text out loud, beginning at the last marked adjacency. They repeat this process as long as they want. This exercise is meant to create an intertextual environment in which both readers are challenged to highten their perception and their awareness of both texts, seemlingly unconnected at first. With the use of their imagination they find places where both texts overlap.<br>
|
|
|
<br>
|
|
|
Reading Exercise 2: Slow reading<br>
|
|
|
A group reads one text together, whereas each person reads only one sentence out loud, rotating clockwise. At times, one person can also read longer sections of the text, depending on its complexity. After the word is given to the next person in the rotation, the group collectively talks about what they understood from the sentence that was read and discusses their diverse takes on the meaning. The purpose of this exercise is to understand the text collectively and to enhance understanding of its content by helping each other think and deliberate, articulate. Slow reading is a training for an kind of a reading practice, where the reader challenges themselves into better understanding each building block of the meaning that the text is transmitting.<br>
|
|
|
<br>
|
|
|
Reading Exercise 3: Blackbox<br>
|
|
|
This exercise requires four participants. The "two channels" sit on the left and the right side of the speaker. They simultaneously whisper into the speakers' ears, reading out loud - a different text each. The speaker is the one in the hot seat. She/he listens to the whispered input and quickly and without thinking too much continuously communicates the information gathered from the two channels, interprets and invents an individual real-time speaking method. The listener is facing the speaker, he/she is the one that is taking notes of everything that the speaker utters. They stay in this constellation for the duration of three minutes, then rotate the roles around. The exercise finishes when everybody got to be in all of the four positions. Afterwards, they have a conversation on how they perceived the different roles. One person is always listening to the other three speaking, and notes down everything that they say.<br>
|
|
|
<br>
|
|
|
Reading Exercise 4: Composite highlights<br>
|
|
|
Two groups read two different texts that can be related. Using a pen or marker each participant highlights the most relevant parts of the text for them. By this, they are creating a brief subjective summary. Afterwards, the whole group combines all of their individual emphasis, to create one common summary. After that, each group has to agree on a form of a presentation in which all the participants can be heard. They present their understanding of the text to the other group. There can also be more groups than two, the division depends on the number of people involved in the exercise.</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="polyptych">
|
|
|
<h4>Polyptych Summary</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#polyptych" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon29.png" alt="icon" width="100"></div>
|
|
|
<p>Traditionally a Polyptych is a painting, split into sections. In this case we used the idea of a polyptych as an exercise that enables us to get a first impression of the archive material. <br>
|
|
|
<br>
|
|
|
<div class="code">Skim the material and intuitively look for subjectively interesting details that seem meaningful to you or stand out for any reason. In order to create the Polyptych, collect a set number of these details, approximately 30. Each detail should be enlarged to fill an A4 page. Afterwards, print out your personal collection, arrange it on the floor in an order that makes sense to you in whatever way. As everybody in the group does this, take time to to look at the formations(Polyptych) of each individual, let them explain their work, observations and methods behind the ordering system. Discuss it collectively.</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="categorizingthematerial">
|
|
|
<h4>Categorizing the material</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#categorizingthematerial" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon28.png" alt="icon" width="100"></div>
|
|
|
<p>To be able to navigate the material, you have to make connections in between the documents, get an overview of all of the existing data and from this develop a structure for the archive. We chose to categorize the material with content and format related categories.<br>
|
|
|
To start, each person skimmed a portion of the archive they were responsible for (as decided when dividing the work). During this process, properties that we considered relevant and/or seemed to be recurring throughout the material were collected for each document. Further, all categories and properties were gathered, discussed and reduced to the necessary. The thereby generated set of categories and properties was then applied to the documents by re-skimming them. The categories and properties were later used for the upload of the material to MediaWiki using page forms and were structured there.<br>
|
|
|
<br>
|
|
|
<div class="code">
|
|
|
<ul>
|
|
|
<li>Paper</li>
|
|
|
<li>Interdisciplinary Doctoral Fellowship</li>
|
|
|
<li>Marxism</li>
|
|
|
<li>Capitalism, Socialism, Class structure</li>
|
|
|
<li>Readings, Literature</li>
|
|
|
<li>Soviet Union</li>
|
|
|
<li>Economy</li>
|
|
|
<li>Peoples Republic of China</li>
|
|
|
<li>Socialist Republic of Vietnam</li>
|
|
|
<li>Reforms</li>
|
|
|
<li>Revolution</li>
|
|
|
<li>Revolutionary armed struggle, revolutionary army</li>
|
|
|
<li>Street fighting</li>
|
|
|
</ul></div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="annotatedreader">
|
|
|
<h4>Annotated reader (SWARM 1,2 & 3)</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#annotatedreader" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon26.png" alt="icon" width="100"></div>
|
|
|
<p>Using the slow reading method we have read several texts as a group. We have collected annotations, additional information and imagery on an Etherpad. Afterwards, we have collectively revised the collected content, added a glossary, styled it with CSS - designed a cover and designed the overall appearance of it. We have converted it to a print layout using the <a href="#ether2html">Ether2HTML</a> and <a href="#web2print">Web2Print</a> methods. Afterwards, we have printed out this material as booklets, which we have named: SWARM 1, 2 & 3.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="technicallimitations">
|
|
|
<h4>Technical limitations</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#technicallimitations" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon27.png" alt="icon" width="100"></div>
|
|
|
<p>Under certain conditions it may be necessary to publish content without leaving a trace of identity behind. To protect the contributors and server locations also means working with some technical limitations. At our project, this boiled down to facing reduced bandwidth speed when accessing websites, hosted in the Dark web through the Tor Browser, and also because of the necessity of implementing a static website.
|
|
|
It makes no sense to try and work against these restrictions, but rather to accept and find ways to work within the limitations. A clearly defined field of work can also speed up and enrich the process.<br>
|
|
|
<br>
|
|
|
<div class="code">
|
|
|
Embrace the limitations!</div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="divisionoflabor">
|
|
|
<h4>Division of labor</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#divisionoflabor" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon31.png" alt="icon" width="100"></div>
|
|
|
<p>At several different moments during the process we have divided upcoming tasks to individuals or groups. Right after the first contact with the archive material, we have split it into ten equal parts. Each individual had to deal with their part, while obeying the collective structure of categories and properties that we defined collectively. Later on in the process, we have split the class of ten people into two sub-groups: one caring for the actual archive, while the other worked on the public website (that you are currently lurking at) and a printed publication. Within these sub-groups, specific tasks were further divided between the individuals.
|
|
|
The crucial importance for this approach are regular live meetings with the entire team, where catching-up and exchange of information happens. Of a big significance are also platforms on which we document progress. Do eveything you can to keep in contact with the work of other people.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="collectingreferences">
|
|
|
<h4>Collecting references</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#collectingreferences" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon30.png" alt="icon" width="100"></div>
|
|
|
<p>When developing the structure, form and function of the publication, it was essential to collect references. For inspiration, but also to communicate complex ideas in a team. Very helpful were lectures and discussions with <a href="https://maydayrooms.org/">Maydayroom</a>, <a href="http://www.warpweftmemory.net/">The Warp and Weft of Memory</a> and <a href="http://osp.kitchen/">OpenSourcePublishing</a>.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv methods" id="threadmodel">
|
|
|
<h4>Thread Model</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#threadmodel" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon31.png" alt="icon" width="100"></div>
|
|
|
<p>A threat/thread model is a set of rules that lists and evaluates all the resources and contents of a project before starting to embark on the projects' journey. A threat model sets clear limits that must be respected when working together.<br>
|
|
|
During the process we have implemented a thread model to prevent the unwanted publication and communication of sensitive information.
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="filterDiv experiences" id="covid19">
|
|
|
<h4>COVID 19</h4>
|
|
|
<div class="placeholder"> <! ––data-aos="zoom-in" data-aos-anchor="#covid19" data-aos-duration="1000" data-aos-offset="300"––><img src="img/icon34.png" alt="icon" width="100"></div>
|
|
|
<p>In the midst of the process of dealing with our project, the global society was overwhelmed by the outbreak of the COVID 19 pandemic. Several drastic limitations followed. The most severe impact this situation has had on our project, was of course the closure of all educational facilities and the need for social distancing, to which we complied. This of course resulted in before unknown limitations to our collective process. Due to these circumstances, our launch was provisionally canceled and we were given an extra of two weeks to be able to slow down the process and finish our project.<br>
|
|
|
<br>
|
|
|
<div class="code">
|
|
|
Tools we used in this time of virtual communication:<br>
|
|
|
Online video conference tools: <a href="https://jitsi.org/">Jitsi</a>, <a href="https://www.skype.com/en/">Skype</a><br>
|
|
|
Other tools: <a href="#git">GIT</a>, <a href="#etherpad">Etherpad</a>, <a href="#ether2html">Ether2Html</a>, <a href="#curl">Curl</a>, <a href="#mediawiki">WikiMedia</a></div>
|
|
|
</p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script src="masonry.js"></script>
|
|
|
|
|
|
<script>
|
|
|
filterSelection("all")
|
|
|
function filterSelection(c) {
|
|
|
var x, i;
|
|
|
x = document.getElementsByClassName("filterDiv");
|
|
|
if (c == "all") c = "";
|
|
|
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
|
|
|
for (i = 0; i < x.length; i++) {
|
|
|
w3RemoveClass(x[i], "show");
|
|
|
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Show filtered elements
|
|
|
function w3AddClass(element, name) {
|
|
|
var i, arr1, arr2;
|
|
|
arr1 = element.className.split(" ");
|
|
|
arr2 = name.split(" ");
|
|
|
for (i = 0; i < arr2.length; i++) {
|
|
|
if (arr1.indexOf(arr2[i]) == -1) {
|
|
|
element.className += " " + arr2[i];
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// Hide elements that are not selected
|
|
|
function w3RemoveClass(element, name) {
|
|
|
var i, arr1, arr2;
|
|
|
arr1 = element.className.split(" ");
|
|
|
arr2 = name.split(" ");
|
|
|
for (i = 0; i < arr2.length; i++) {
|
|
|
while (arr1.indexOf(arr2[i]) > -1) {
|
|
|
arr1.splice(arr1.indexOf(arr2[i]), 1);
|
|
|
}
|
|
|
}
|
|
|
element.className = arr1.join(" ");
|
|
|
}
|
|
|
|
|
|
// Add active class to the current control button (highlight it)
|
|
|
var btnContainer = document.getElementById("myBtnContainer");
|
|
|
var btns = btnContainer.getElementsByClassName("btn");
|
|
|
for (var i = 0; i < btns.length; i++) {
|
|
|
btns[i].addEventListener("click", function() {
|
|
|
var current = document.getElementsByClassName("active");
|
|
|
current[0].className = current[0].className.replace(" active", "");
|
|
|
this.className += " active";
|
|
|
});
|
|
|
}
|
|
|
</script>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script>
|
|
|
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AOS=t():e.AOS=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}var i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=n(1),a=(o(r),n(6)),u=o(a),c=n(7),f=o(c),s=n(8),d=o(s),l=n(9),p=o(l),m=n(10),b=o(m),v=n(11),y=o(v),g=n(14),h=o(g),w=[],k=!1,x={offset:120,delay:0,easing:"ease",duration:400,disable:!1,once:!1,startEvent:"DOMContentLoaded",throttleDelay:99,debounceDelay:50,disableMutationObserver:!1},j=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];if(e&&(k=!0),k)return w=(0,y.default)(w,x),(0,b.default)(w,x.once),w},O=function(){w=(0,h.default)(),j()},_=function(){w.forEach(function(e,t){e.node.removeAttribute("data-aos"),e.node.removeAttribute("data-aos-easing"),e.node.removeAttribute("data-aos-duration"),e.node.removeAttribute("data-aos-delay")})},S=function(e){return e===!0||"mobile"===e&&p.default.mobile()||"phone"===e&&p.default.phone()||"tablet"===e&&p.default.tablet()||"function"==typeof e&&e()===!0},z=function(e){x=i(x,e),w=(0,h.default)();var t=document.all&&!window.atob;return S(x.disable)||t?_():(document.querySelector("body").setAttribute("data-aos-easing",x.easing),document.querySelector("body").setAttribute("data-aos-duration",x.duration),document.querySelector("body").setAttribute("data-aos-delay",x.delay),"DOMContentLoaded"===x.startEvent&&["complete","interactive"].indexOf(document.readyState)>-1?j(!0):"load"===x.startEvent?window.addEventListener(x.startEvent,function(){j(!0)}):document.addEventListener(x.startEvent,function(){j(!0)}),window.addEventListener("resize",(0,f.default)(j,x.debounceDelay,!0)),window.addEventListener("orientationchange",(0,f.default)(j,x.debounceDelay,!0)),window.addEventListener("scroll",(0,u.default)(function(){(0,b.default)(w,x.once)},x.throttleDelay)),x.disableMutationObserver||(0,d.default)("[data-aos]",O),w)};e.exports={init:z,refresh:j,refreshHard:O}},function(e,t){},,,,,function(e,t){(function(t){"use strict";function n(e,t,n){function o(t){var n=b,o=v;return b=v=void 0,k=t,g=e.apply(o,n)}function r(e){return k=e,h=setTimeout(s,t),_?o(e):g}function a(e){var n=e-w,o=e-k,i=t-n;return S?j(i,y-o):i}function c(e){var n=e-w,o=e-k;return void 0===w||n>=t||n<0||S&&o>=y}function s(){var e=O();return c(e)?d(e):void(h=setTimeout(s,a(e)))}function d(e){return h=void 0,z&&b?o(e):(b=v=void 0,g)}function l(){void 0!==h&&clearTimeout(h),k=0,b=w=v=h=void 0}function p(){return void 0===h?g:d(O())}function m(){var e=O(),n=c(e);if(b=arguments,v=this,w=e,n){if(void 0===h)return r(w);if(S)return h=setTimeout(s,t),o(w)}return void 0===h&&(h=setTimeout(s,t)),g}var b,v,y,g,h,w,k=0,_=!1,S=!1,z=!0;if("function"!=typeof e)throw new TypeError(f);return t=u(t)||0,i(n)&&(_=!!n.leading,S="maxWait"in n,y=S?x(u(n.maxWait)||0,t):y,z="trailing"in n?!!n.trailing:z),m.cancel=l,m.flush=p,m}function o(e,t,o){var r=!0,a=!0;if("function"!=typeof e)throw new TypeError(f);return i(o)&&(r="leading"in o?!!o.leading:r,a="trailing"in o?!!o.trailing:a),n(e,t,{leading:r,maxWait:t,trailing:a})}function i(e){var t="undefined"==typeof e?"undefined":c(e);return!!e&&("object"==t||"function"==t)}function r(e){return!!e&&"object"==("undefined"==typeof e?"undefined":c(e))}function a(e){return"symbol"==("undefined"==typeof e?"undefined":c(e))||r(e)&&k.call(e)==d}function u(e){if("number"==typeof e)return e;if(a(e))return s;if(i(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=i(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(l,"");var n=m.test(e);return
|
|
|
n||b.test(e)?v(e.slice(2),n?2:8):p.test(e)?s:+e}var c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f="Expected a function",s=NaN,d="[object Symbol]",l=/^\s+|\s+$/g,p=/^[-+]0x[0-9a-f]+$/i,m=/^0b[01]+$/i,b=/^0o[0-7]+$/i,v=parseInt,y="object"==("undefined"==typeof t?"undefined":c(t))&&t&&t.Object===Object&&t,g="object"==("undefined"==typeof self?"undefined":c(self))&&self&&self.Object===Object&&self,h=y||g||Function("return this")(),w=Object.prototype,k=w.toString,x=Math.max,j=Math.min,O=function(){return h.Date.now()};e.exports=o}).call(t,function(){return this}())},function(e,t){(function(t){"use strict";function n(e,t,n){function i(t){var n=b,o=v;return b=v=void 0,O=t,g=e.apply(o,n)}function r(e){return O=e,h=setTimeout(s,t),_?i(e):g}function u(e){var n=e-w,o=e-O,i=t-n;return S?x(i,y-o):i}function f(e){var n=e-w,o=e-O;return void 0===w||n>=t||n<0||S&&o>=y}function s(){var e=j();return f(e)?d(e):void(h=setTimeout(s,u(e)))}function d(e){return h=void 0,z&&b?i(e):(b=v=void 0,g)}function l(){void 0!==h&&clearTimeout(h),O=0,b=w=v=h=void 0}function p(){return void 0===h?g:d(j())}function m(){var e=j(),n=f(e);if(b=arguments,v=this,w=e,n){if(void 0===h)return r(w);if(S)return h=setTimeout(s,t),i(w)}return void 0===h&&(h=setTimeout(s,t)),g}var b,v,y,g,h,w,O=0,_=!1,S=!1,z=!0;if("function"!=typeof e)throw new TypeError(c);return t=a(t)||0,o(n)&&(_=!!n.leading,S="maxWait"in n,y=S?k(a(n.maxWait)||0,t):y,z="trailing"in n?!!n.trailing:z),m.cancel=l,m.flush=p,m}function o(e){var t="undefined"==typeof e?"undefined":u(e);return!!e&&("object"==t||"function"==t)}function i(e){return!!e&&"object"==("undefined"==typeof e?"undefined":u(e))}function r(e){return"symbol"==("undefined"==typeof e?"undefined":u(e))||i(e)&&w.call(e)==s}function a(e){if("number"==typeof e)return e;if(r(e))return f;if(o(e)){var t="function"==typeof e.valueOf?e
|
|
|
.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(d,"");var n=p.test(e);return n||m.test(e)?b(e.slice(2),n?2:8):l.test(e)?f:+e}var u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},c="Expected a function",f=NaN,s="[object Symbol]",d=/^\s+|\s+$/g,l=/^[-+]0x[0-9a-f]+$/i,p=/^0b[01]+$/i,m=/^0o[0-7]+$/i,b=parseInt,v="object"==("undefined"==typeof t?"undefined":u(t))&&t&&t.Object===Object&&t,y="object"==("undefined"==typeof self?"undefined":u(self))&&self&&self.Object===Object&&self,g=v||y||Function("return this")(),h=Object.prototype,w=h.toString,k=Math.max,x=Math.min,j=function(){return g.Date.now()};e.exports=n}).call(t,function(){return this}())},function(e,t){"use strict";function n(e,t){var n=window.document,r=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,a=new r(o);i=t,a.observe(n.documentElement,{childList:!0,subtree:!0,removedNodes:!0})}function o(e){e&&e.forEach(function(e){var t=Array.prototype.slice.call(e.addedNodes),n=Array.prototype.slice.call(e.removedNodes),o=t.concat(n).filter(function(e){return e.hasAttribute&&e.hasAttribute("data-aos")}).length;o&&i()})}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){};t.default=n},function(e,t){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(){return navigator.userAgent||navigator.vendor||window.opera||""}Object.defineProperty(t,"__esModule",{value:!0});var i=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),r=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i,a=/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i,u=/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i,c=/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i,f=function(){function e(){n(this,e)}return i(e,[{key:"phone",value:function(){var e=o();return!(!r.test(e)&&!a.test(e.substr(0,4)))}},{key:"mobile",value:function(){var e=o();return!(!u.test(e)&&!c.test(e.substr(0,4)))}},{key:"tablet",value:function(){return this.mobile()&&!this.phone()}}]),e}();t.default=new f},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e,t,n){var o=e.node.getAttribute("data-aos-once");t>e.position?e.node.classList.add("aos-animate"):"undefined"!=typeof o&&("false"===o||!n&&"true"!==o)&&e.node.classList.remove("aos-animate")},o=function(e,t){var o=window.pageYOffset,i=window.innerHeight;e.forEach(function(e,r){n(e,i+o,t)})};t.default=o},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(12),r=o(i),a=function(e,t){return e.forEach(function(e,n){e.node.classList.add("aos-init"),e.position=(0,r.default)(e.node,t.offset)}),e};t.default=a},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(13),r=o(i),a=function(e,t){var n=0,o=0,i=window.innerHeight,a={offset:e.getAttribute("data-aos-offset"),anchor:e.getAttribute("data-aos-anchor"),anchorPlacement:e.getAttribute("data-aos-anchor-placement")};switch(a.offset&&!isNaN(a.offset)&&(o=parseInt(a.offset)),a.anchor&&document.querySelectorAll(a.anchor)&&(e=document.querySelectorAll(a.anchor)[0]),n=(0,r.default)(e).top,a.anchorPlacement){case"top-bottom":break;case"center-bottom":n+=e.offsetHeight/2;break;case"bottom-bottom":n+=e.offsetHeight;break;case"top-center":n+=i/2;break;case"bottom-center":n+=i/2+e.offsetHeight;break;case"center-center":n+=i/2+e.offsetHeight/2;break;case"top-top":n+=i;break;case"bottom-top":n+=e.offsetHeight+i;break;case"center-top":n+=e.offsetHeight/2+i}return a.anchorPlacement||a.offset||isNaN(t)||(o=t),n+o};t.default=a},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e){for(var t=0,n=0;e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop);)t+=e.offsetLeft-("BODY"!=e.tagName?e.scrollLeft:0),n+=e.offsetTop-("BODY"!=e.tagName?e.scrollTop:0),e=e.offsetParent;return{top:n,left:t}};t.default=n},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=function(e){return e=e||document.querySelectorAll("[data-aos]"),Array.prototype.map.call(e,function(e){return{node:e}})};t.default=n}])});
|
|
|
</script>
|
|
|
<script>
|
|
|
AOS.init();
|
|
|
</script>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
</html>
|