<!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" > Go Start< / a > < / button >
< button > < a target = "_blank" href = "../" > WOR(L)DS< / 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’ < 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’ < 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 >
