|
|
|
|
|
|
|
|
<!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>
|
|
|
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="ico.png">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class='testa'>
|
|
|
<button><a href="#practical" id="lefty">Back to Start</a></button>
|
|
|
<button><a target="_blank" href="../">WOR(L)DS FOR THE FUTURE</a></button>
|
|
|
<button><a href="./printing/index.html">Practical Vision</a></button>
|
|
|
<button><a target="_blank" href="assets/practical_vision.pdf">Print!</a></button>
|
|
|
</div>
|
|
|
|
|
|
<div id="telegram">
|
|
|
<p style="font-size: 3vw ;">A Practical BOT</p>
|
|
|
<a href="http://t.me/practical_vision_bot" target="_blank">@practical_vision_bot</a>
|
|
|
<p>This Telegram BOT makes a crowd-sourced dictionary with your translations.
|
|
|
You can add every word/sentence you want from english to be translated into any language!
|
|
|
<br><br>
|
|
|
<span><span class="v">word</span> : translation : language</span>
|
|
|
<br>
|
|
|
<i><span class="v">hello</span> : dji safoul : Jola</i><br>
|
|
|
<button id="closeT">Close</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="descriptio">
|
|
|
<p style="font-size: 3vw ;">Hey!</p>
|
|
|
<p>This is the playground of the republished text <b>Practical Vision</b>, by Jalada:
|
|
|
you can find the republished text <a href="printing/index.html" target="_blank">here</a>.</p>
|
|
|
<p>You can navigate through the page clicking the <span id="links">underlined links</span>:
|
|
|
with green links you go and with purple one you come back.</p>
|
|
|
<p>Thank you,<br><a target="_blank" href="http://federicoponi.it">Federico</a></p>
|
|
|
|
|
|
<button id="closeD">Close</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <a id="c" href="#culino" style="margin-left: 130%; position: absolute; width: 50%; border: red 1px solid; height: 50vw "></a> -->
|
|
|
|
|
|
<!-- <a id="culinoino" href="#cc" style="font-family: Arial, Helvetica, sans-serif; font-size: 8vw; margin-left: 65%;" >→</a> -->
|
|
|
<!-- <div><a id="cino" href="#culinoino" style="margin-left: 500%; position: absolute; width: 50%; border: blue 1px solid; height: 50vw ">cane</a></div> -->
|
|
|
|
|
|
|
|
|
|
|
|
<div class="texts">
|
|
|
<div class="left">
|
|
|
<div><p>Ngũgi wa Thiong’o has used the term<br>
|
|
|
<a3 class="pink" style="text-decoration: none;" id="practical">
|
|
|
<span id="randomTitle"></span>
|
|
|
</a3><br>
|
|
|
to espress the opportunity
|
|
|
to disseminate <a target="_blank" href="https://jaladaafrica.org/2020/10/28/translation-project/">African
|
|
|
Literature</a> <span2 class="green" style="font-family: Arial, Helvetica, sans-serif;">→</span2> the Digital
|
|
|
Age makes it possible.
|
|
|
<br><br>
|
|
|
<a id="00" href="#0" style="font-family: Arial, Helvetica, sans-serif; font-size: 8vw;">↓</a>
|
|
|
<!-- <a id="culino" style="font-family: Arial, Helvetica, sans-serif; font-size: 8vw; " href="#c">→</a> -->
|
|
|
</p></div>
|
|
|
|
|
|
<div><a id="-2" href="#-1" style="font-family: Arial, Helvetica, sans-serif; font-size: 8vw;">↓</a>
|
|
|
<p>But <a id="0" href="#00" class="pink">Practical Vision</a> can manage also other <a id="1" href="#2">marginalised topics</a>.
|
|
|
</p></div>
|
|
|
|
|
|
<div>
|
|
|
<a class="pink" id="-1" href="#-2" style="font-family: Arial, Helvetica, sans-serif; font-size: 8vw;">↑</a>
|
|
|
<p>When more <a id="mov" href="#start" >Practical Vision</a>
|
|
|
watch themselves, they create translations
|
|
|
between <a id="7" href="#8">different</a> <span class="lang" class="pink">languages</span>.
|
|
|
</p></div>
|
|
|
|
|
|
<div><p>In fact, <a id="2" href="#1" class="pink">Practical Vision</a>
|
|
|
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><a id="11" href="#20" class="pink">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>
|
|
|
<p id="eccezione">(scroll up!)<br><br>This is an example of how <a id="start" href="#mov" class="pink">Practical Vision</a> work, <a id="cane" href="#canino">inhabitating</a> this hyperobject.</a></p>
|
|
|
</div>
|
|
|
|
|
|
<p><a id="12" href="#13" class="green">They</a> attempt to protect past and
|
|
|
<a id="8" href="#7" class="pink">future</a> cultures and they work through
|
|
|
<a href="#5" id="6" class="pink">organic and inorganic networks</a>.
|
|
|
</p>
|
|
|
|
|
|
|
|
|
<p>A <a id="16" href="#14">hyperobject</a> is <a id="29" href="#17" class="pink">something</a>
|
|
|
that creates, continuously, small
|
|
|
or big events somewhere.
|
|
|
Not here, not there - it is more a
|
|
|
<a id="10" href="#9" class="pink">shadow</a>.</p>
|
|
|
|
|
|
|
|
|
<p class="green">A hyperobject is <a href="#3" id="4" class="pink">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>Surprise! This is a <a href="../DRAW" target="_blank">bonus</a> for you.</p>
|
|
|
|
|
|
<p><a target="_blank" href="details/index.html">Here</a> a focus of Practical Vision <a href="#cane" id="canino" class="pink">living</a> in the <a target="_blank" href="complex/index.html">hyperobject</a>.
|
|
|
<br> <a id="cino" href="#culoinoino" class="pink" style="font-family: Arial, Helvetica, sans-serif; font-size: 8vw;">↓</a> </p>
|
|
|
|
|
|
<p><a id="culoinoino" href="#cino" style="font-family: Arial, Helvetica, sans-serif; font-size: 10vw;">↑</a><br><br>
|
|
|
<a id="13" href="#12" class="pink">They</a> inhabit this
|
|
|
<a id="14" href="#16" class="pink">hyperobject</span></a> called <a href="#18" id="15">Complexity.</a><br><br><a href="#23" id="bonus">*</a></p>
|
|
|
|
|
|
<p class="green">The <a id="18" href="#15" class="pink">Complexity</a> 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>It’s easy to guess the <a id="23" href="#bonus" class="pink">Complexity</a> is a complex dude.</p>
|
|
|
|
|
|
<p><a id="20" href="#11">Complexity</a> is the magnificent
|
|
|
result of <a id="25" href="#19" class="pink">interaction.</a>
|
|
|
Interaction is possible thanks
|
|
|
to <a class="lang" id="21" href="#26">language</a>.</p>
|
|
|
|
|
|
<p>Programming <a id="24" href="#27" class="pink"><span class="lang">languages</span></a> (currently) are close to 700.<br>
|
|
|
Human <span class="lang">languages</span> are closer to 9600.</p>
|
|
|
|
|
|
<p><a id="26" href="#21" class="pink">There are a lot</a> of different kind of <a class="lang" href="#24" id="27">languages</a>.</p>
|
|
|
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var links = document.querySelectorAll('a');
|
|
|
links = Array.prototype.slice.call(links);
|
|
|
|
|
|
links.forEach(link => {
|
|
|
var href = link.getAttribute('href');
|
|
|
if(link.getAttribute('href').startsWith('#')){
|
|
|
// console.log('addingClickHandler',link);
|
|
|
link.addEventListener('click',function(e){
|
|
|
e.preventDefault();
|
|
|
var dest = document.getElementById(href.substring(1)).parentNode;
|
|
|
// console.log('click', href, dest)
|
|
|
dest.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
|
|
|
})
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
draggable = new PlainDraggable(document.getElementById('descriptio'));
|
|
|
draggable.containment = {left: 0, top: 0, width: '1000%', height: '1000%'};
|
|
|
|
|
|
draggable2 = new PlainDraggable(document.getElementById('telegram'));
|
|
|
draggable2.containment = {left: 0, top: 0, width: '1000%', height: '1000%'};
|
|
|
|
|
|
const closeD = document.querySelector("#closeD");
|
|
|
const descriptio = document.querySelector("#descriptio");
|
|
|
const closeT = document.querySelector("#closeT");
|
|
|
const telegram = document.querySelector("#telegram");
|
|
|
|
|
|
|
|
|
closeT.addEventListener('click', () =>{
|
|
|
telegram.style.visibility = "hidden";
|
|
|
});
|
|
|
|
|
|
closeD.addEventListener('click', () =>{
|
|
|
descriptio.style.visibility = "hidden";
|
|
|
});
|
|
|
|
|
|
|
|
|
randomTitle = document.getElementById("randomTitle");
|
|
|
|
|
|
|
|
|
var typewriter = new Typewriter(randomTitle, {
|
|
|
loop:true,
|
|
|
cursor:""
|
|
|
});
|
|
|
|
|
|
typewriter.typeString('PRACTICAL VISION')
|
|
|
.pauseFor(100)
|
|
|
.deleteAll()
|
|
|
.typeString('ÈKAANE EDJIOUK')
|
|
|
.pauseFor(300)
|
|
|
.deleteAll()
|
|
|
.typeString('PRACTICAL VISION')
|
|
|
.pauseFor(100)
|
|
|
.deleteAll()
|
|
|
.typeString('WONI WI MEKO')
|
|
|
.pauseFor(300)
|
|
|
.deleteAll()
|
|
|
.typeString('PRACTICAL VISION')
|
|
|
.pauseFor(100)
|
|
|
.deleteAll()
|
|
|
.typeString('DHANA TEKELEZWAJI')
|
|
|
.pauseFor(300)
|
|
|
.deleteAll()
|
|
|
.typeString('PRACTICAL VISION')
|
|
|
.pauseFor(100)
|
|
|
.deleteAll()
|
|
|
.typeString('UMBONO OQONDILE')
|
|
|
.pauseFor(300)
|
|
|
.deleteAll()
|
|
|
.typeString('PRACTICAL VISION')
|
|
|
.pauseFor(100)
|
|
|
.deleteAll()
|
|
|
.typeString('DÈFFE GUISSE')
|
|
|
.pauseFor(300)
|
|
|
.deleteAll()
|
|
|
.start();
|
|
|
|
|
|
|
|
|
</script>
|
|
|
<script src="./scripts/hcindex.js"></script>
|
|
|
<script src="./scripts/matrix.js"></script>
|
|
|
<script src="./scripts/P4Vector.js"></script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|