|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<title></title>
|
|
|
<meta name="description" content="">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
|
|
|
<script src="../scripts/plain-draggable.min.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<canvas id="myCanvas" style="z-index: -2000; position: absolute"></canvas>
|
|
|
|
|
|
<div class='testa'>
|
|
|
<button><a href="#">HELLO</a></button>
|
|
|
<button><a href="#">THE TELEGRAM BOT</a></button>
|
|
|
|
|
|
<button><a href="../">WOR(L)DS FOR THE FUTURE</a></button>
|
|
|
<button><a href="./printing/index.html">ORIGINAL CONTRIBUTION</a></button>
|
|
|
<button><a href="assets/practical_vision.pdf">PRINT!</a></button>
|
|
|
</div>
|
|
|
|
|
|
<div id="descriptio">
|
|
|
<h2>Ka Soumai!</h2>
|
|
|
<p>This is the playground of the republished text <b>Practical Vision</b>, by <a href="http://jaladaafrica.org">Jalada</a>:
|
|
|
you can find the republished text <a href="printing/index.html">here</a>.</p>
|
|
|
<p>What you see in the background is my response to the text, a reflection about the meaning of Complexity related to the language.</p>
|
|
|
<p>If you are also interested to print, <a href="export/practical_vision.pdf">here</a> you can download the printable file. If you also like this page, there is the possibility to print it as a poster, <a href="export/practical_complexity.pdf">here</a>!</p>
|
|
|
<p>Thank you,<br><a href="http://federicoponi.it">Federico Poni</a></p>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="texts">
|
|
|
<div class="left">
|
|
|
<div><p class="pink">Ngũgi wa Thiong’o has used the term<br>
|
|
|
<span class="pink" id="practical">PRACTICAL VISION</span><br>
|
|
|
to espress the opportunity
|
|
|
to disseminate African
|
|
|
literature <span2 class="green" style="font-family: Arial, Helvetica, sans-serif;">→</span2> the Digital
|
|
|
Age makes it possible.
|
|
|
</p></div>
|
|
|
|
|
|
<div><p class="green">But <span2>Practical Vision</span2>
|
|
|
can manage also other
|
|
|
<a id="1" href="#2">marginalised topics</a>.
|
|
|
</p></div>
|
|
|
|
|
|
<div><p class="pink">When more <span2>Practical Vision</span2>
|
|
|
watch themselves, they create translations
|
|
|
between <a id="7" href="#8">different</a> <span class="lang">languages</span>.
|
|
|
</p></div>
|
|
|
|
|
|
<div><p class="pink">When more <span2><a id="2" href="#1">Practical Vision</a></span2>
|
|
|
is not a standard vision.<br>
|
|
|
It attempts to take <a id="5" href="#6">care</a>
|
|
|
of <a id="3" href="#4">diversity</a> as a whole.
|
|
|
</p></div>
|
|
|
|
|
|
<div><p class="pink"><a id="11" href="#20">Complexity contains</a>
|
|
|
dreams and violence,
|
|
|
skyscrapers and slums,
|
|
|
freedom and control,
|
|
|
smart fridges and phone cables,
|
|
|
colonialism and conspiracies,
|
|
|
holy buildings and sheds full of computers to store data and so on.
|
|
|
</p></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="center">
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div><img id="img1" src="../assets/practical.png" ></div>
|
|
|
<div><img id="img2" src="../assets/practical.png" ></div>
|
|
|
<div> <img id="img3" src="../assets/practical.png" ></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p><a id="12" href="#13" class="green">They</a> attempt to protect past and
|
|
|
<a id="8" href="#7">future</a> cultures and they work through
|
|
|
<a href="#5" id="6">organic and inorganic networks</a>.
|
|
|
</p>
|
|
|
|
|
|
|
|
|
<p class="pink">A <span2><a id="16" href="#14">hyperobject</a></span2> is <a id="29" href="#17">something</a>
|
|
|
that creates, continuously, small
|
|
|
or big events somewhere.
|
|
|
Not here, not there - it is more a
|
|
|
<a id="10" href="#9">shadow</a>.</p>
|
|
|
|
|
|
|
|
|
<p class="green">A <span2>hyperobject</span2> is <a href="#3" id="4">multi</a>-dimensional.
|
|
|
That means <a id="9" href="#10">we cannot see</a>
|
|
|
the effects of its events clearly.</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="right">
|
|
|
|
|
|
|
|
|
<p class="pink"><a id="13" href="#12">They</a> inhabit this
|
|
|
<a id="14" href="#16">hyperobject</span> called <span2><a href="#18" id="15">Complexity.</a></span2><br><br><a href="#23" id="bonus">*</a></p>
|
|
|
|
|
|
<p class="green">The <span2><a id="18" href="#15">Complexity</a></span2> is a very big
|
|
|
<a id="17" href="#29">hyperobject</a>:<br>it contains all
|
|
|
the different existing
|
|
|
<a href="#25" id="19">realities</a>.</p>
|
|
|
|
|
|
<p class="pink">It’s easy to guess the <span2><a id="23" href="#bonus">Complexity</a></span2> is a <span2>complex</span2> dude.</p>
|
|
|
|
|
|
<p class="pink"><span2><a id="20" href="#11">Complexity</a></span2> is the magnificent
|
|
|
result of <a id="25" href="#19">interaction.</a>
|
|
|
Interaction is possible thanks
|
|
|
to <a class="lang" id="21" href="#26">language</a>.</p>
|
|
|
|
|
|
<p class="green">Programming <a id="24" href="#27"><span class="lang">languages</span></a> (currently) are closer to 700.<br>
|
|
|
Human <span class="lang">languages</span> are closer to 9600.</p>
|
|
|
|
|
|
<p class="pink"><a id="26" href="#21">There are a lot</a> of different kind of <a class="lang" href="#24" id="27">languages</a>.</p>
|
|
|
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
draggable = new PlainDraggable(document.getElementById('descriptio'));
|
|
|
draggable.containment = {left: 0, top: 0, width: '100%', height: '100%'};
|
|
|
</script>
|
|
|
<!-- <script src="./scripts/hcindex.js"></script> -->
|
|
|
<script src="./scripts/matrix.js"></script>
|
|
|
<script src="./scripts/P4Vector.js"></script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|