si11 first commit

master
Castro0o 4 years ago
commit e579647724

@ -0,0 +1,15 @@
# SI 11 website repostory
The website is collectively written in/from the pads:
* https://pad.xpub.nl/p/publication11_HTML
* https://pad.xpub.nl/p/publication11_CSS
the shell script `makewebsite.sh` runs a curl command every 5secods, pulling the content of the pad to index.html
* run it: `./makewebsite.sh`
When you want to create a commit of the website:
* `git add -u`
* `git commit -m "what changes happened here"`

@ -0,0 +1,213 @@
<!DOCTYPE html>
<html>
<head>
<title>S.I.XI</title>
<meta name="PDI" content="First Tryout">
<script>
var head = document.getElementsByTagName('head')[0];
// GETS CSS FROM A PAD
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>S.I.XI — Documentation</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('anonympub')"> Anonymous Publishing</button>
<button class="btn" onclick="filterSelection('memories')"> Memories that aren't yours </button>
<button class="btn" onclick="filterSelection('bar')"> Publication </button>
<button class="btn" onclick="filterSelection('team')"> Team Dynamics</button>
</div>
</nav>
<div class="main">
<!-- The filterable elements. Note that some have multiple class names (this can be used if they belong to multiple categories) -->
<div class="container">
<div class="filterDiv anonympub"> <h4>BASH script</h4><hr class="line1"><div class="placeholder"></div><p>A BASH (Born Again SHell) script is a series of commands stored in a text file. It contains commands that one would use in command line and others.
We used BASH scripts to automatically upload batches of files including metadata to the Wiki.
<div class="code">
for n, _file in enumerate(lsimgs):
pagename = f'{dirname}-{_file}'
print_colormsg(pagename, level='ok')
page = site.pages[_file]
<br><br>
if page.exists:
url = page.imageinfo['descriptionurl']
print_colormsg(
f'Already exists in {url} Will NOT be uploaded',
level='warning')
else:
img_smw_prop_val = smw_propval_template.render(
title=args.title,
date=args.date,
part=n + 1,
partof=len(lsimgs),
creator=(', ').join(args.creator[1:]),
organization=(', ').join(args.org[1:]),
format=(', ').join(args.format[1:]),
event=(', ').join(args.event[1:]),
topic=(', ').join(args.topic[1:]),
language=(', ').join(args.language[1:])
)
</div>
</p>
</div>
<div class="filterDiv anonympub"><a name="DarkWeb"></a><h4>Dark Web</h4><hr class="line1"><div class="placeholder"></div><p>The Dark Web is a portion of the Internet that is not indexed by search engines. Users need "specific software, configurations, or authorization to access" to be able to use it. This shelter of anonymity is of great importance while dealing with censorship and privacy concerns. It is also a haven for criminal activities. <a href="#TorBrowser">Tor browser</a> is probably the most famous tool used to access the dark web.
The Dark Web serves us with the protective layers to make sure the location of the servers and the identity of all participants is secure in the case of possible attempts of persecution of whatever kind.</p></div>
<div class="filterDiv anonympub"><a name="TorBrowser"></a><h4>Tor Browser</h4><hr class="line1"><div class="placeholder"></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="#TorBrowser">Dark Web</a>.
</p>
</div>
<div class="filterDiv anonympub bar"><a name="ImageMagick"></a><h4>Imagemagick</h4><hr class="line1"><div class="placeholder"></div><p>Image Magick is a free Command-line tool. It comes with extensive functions to edit and convert images.
We used Image Magic to convert multipage PDFs into individual JPGs to upload to the Wiki.
<div class="code">
convert -quality 100 -density 300 [name-of-pdf] %02d.jpg
</div>
</p>
</div>
<div class="filterDiv anonympub"><a name="Pandoc"></a><h4>Pandoc</h4><hr class="line1"><div class="placeholder"></div><p>Pandoc is a free Command-line tool used to convert from one markup format into different a one.
We used Pandoc in the process of converting documents written in markdown into html and later into a print layout(?).
<div class="code">
pandoc -f markdown -t html
pandoc input.md -o output.html
</div>
</p>
</div>
<div class="filterDiv memories anonympub"><a name="Tesseract"></a><h4>Tesseract</h4><hr class="line1"><div class="placeholder"></div><p>Tesseract is a free "optical character recognition" (OCR) engine and was supposedly the fist of its kind. It recognizes text within images and outputs either text or a PDF containing the image and selectable, searchable text laid over it.
Tesseract is of great use and 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.
<div class="code">
tesseract input.jpg output_file pdf
</div>
</p>
</div>
<div class="filterDiv animals"><a name="MediaWiki"></a><h4>MediaWiki</h4><hr class="line1"><div class="placeholder"></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 wiki website.
MediaWiki served us as a platform for many users to handle large amounts of image files and metadata. It features helpful tools to do so, like edit forms, semantic queries and an API.
<div class="code">
= 4.Session=
* '''Reading:''' 'The archives of the future: Rise up ye dead'
** Speaking about the collections made
** Speaking about ways of tagging / categorizing the material
</div>
</p>
</div>
<div class="filterDiv anonympub bar"><a name="RaspberryPi"></a><h4>Raspberry Pi</h4><hr class="line1"><div class="placeholder"></div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div>
<div class="filterDiv team"><a name="CodeOfConduct"></a><h4>Code of Conduct</h4><hr class="line1"><div class="placeholder"></div><p>We created a code of conduct to make sure 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.
<div class="code">
<ul>
<li>Listen dont interrupt</li>
<li>Listen actively - Show youve understood</li>
<li>If you dont agree, you can still accept</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 dont 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 memories bar"><a name="BackgroundKnowledge"></a><h4>Obtaining background knowledge</h4><hr class="line1"><div class="placeholder"></div><p>When exposed to content that might exceed your personal capacities due to a lack of prior knowledge, there are several possible approaches to compensate for this issue. Basic research - on- or offline - is obviously the first step to develop understanding of complex facts. 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 and, 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 dont agree with them, is imperative to create a differentiated opinion of a complex matter.
</p>
</div>
<div class="filterDiv anonympub memories"><a name="ReadingExercises"><h4>Reading Exercises</h4><hr class="line1"><div class="placeholder"></div><p>Several different reading exercises helped us to enhance our text comprehension and prepare for processing large amounts of content.
<div class="code">
<ul>
<li>Reading Exercise 1: Drawing intertextual lines</li>
<li>Reading Exercise 2: Slow reading</li>
<li>Reading Exercise 3: Blackbox</li>
<li>Reading Exercise 4: Composite highlights</li>
</ul>
</div>
</p>
</div>
<div class="filterDiv memories"><a name="FirstImpression"><h4>Getting a first impression</h4><hr class="line1"><div class="placeholder"></div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</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>
</body>
</html>

@ -0,0 +1,7 @@
#!/bin/sh
while true;
do sleep 5;
curl https://pad.xpub.nl/p/publication11_HTML/export/txt > index.html;
done
Loading…
Cancel
Save