﻿<html xmlns="http://www.w3.org/1999/xhtml"><head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, minimum-scale=0.5, user-scalable=yes, maximum-scale=2.0, target-densitydpi=device-dpi" />
				<meta name="robots" content="all"/>
        <meta name="description" content="description">
        <meta name="keywords" content="">
        <title>Page 119 - The Black Box Book</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
  
#container {margin:50px auto;padding:0px;width:910px;}
#left-button{ width:90px; height:100%;float:left }
#middle{ width:730px; margin:0px; float: left;}
#right-button{ width:90px; float:left;}
html, body, div, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, dd,select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }
img { border: 0 none; displayblock}
span,ul,li,image{ padding:0px; margin:0px; list-style:none;}
#top-title{ width:714px; margin-bottom:10px; float:left; padding:0px 8px}
#top-title2{ width:320px;  float:right;}
#content{ width: 730px; float:left;float:left;word-wrap: break-word;}
#content-top{ width:730px; background-image:url(images/top_bg.jpg); height:56px; background-repeat:no-repeat; float:left;}
#content-top1{ width:70%; padding:16px 0px 0px 30px; font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#636363;float:left;}
#content-top2{ width:60px; float:right; padding:25px 30px 0px 0px;font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#2f2f2f; font-weight:bold; text-align:right}
#content-middle{ width:730px; background-image:url(images/middle_bg.jpg); background-repeat:repeat-y;float:left;}
#content-middle1{ width:475px; padding:25px 0px 25px 35px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#636363; line-height:150%;float:left;}
#content-middle2{  padding:7px; float:right; margin:25px 35px 0px 0px; border:solid 1px #c8c8c9; background-color:#FFF; text-align:center}
#content-bottom{ width:730px; background-image:url(images/bottom_bg.jpg); background-repeat:no-repeat; height:58px;float:left;}
#content-bottom2{ width:110px; height:42px; margin:0px auto; padding-top:4px;}
#input{ width:58px; height:20px; background-color:#FFF; border:solid 1px #dfdfe0; color:#636363; text-align:center; font-size:11px;}
.font1{ font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#2f2f2f;}
.font1 a:link{
	text-decoration: none;
    color:#2f2f2f;

}
.font1 a:visited{
	text-decoration: none;
    color:#2f2f2f;
	
}
.font1 a:hover{
	color: #2f2f2f;
	text-decoration: underline;

}



.text-container {
padding: 20px;
color: #333;
margin-top: 24px;
line-height: 22px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}

.use-as-video {
float: right;
padding-left: 20px;
}
.cc-float-fix:before, .cc-float-fix:after {
content: "";
line-height: 0;
height: 0;
width: 0;
display: block;
visibility: hidden;
}
.use-as-video-img {
cursor: pointer;
position: relative;
width: 320px;
height: 180px;
}
.use-as-video-title {
font-size: 15px;
font-weight: bold;
color: #000000;
padding-bottom: 5px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/next2.png','images/previous2.png')">
<div id="container">
<div id="left-button">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><a href="page118.html"><img src="images/previous_big.png" width="90" height="80" /></a></p>
</div>
<div id="middle">
  <div id="top-title"><span class="font1">Basic HTML Version</span>
    <div id="top-title2">
      <table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
        <tr>
        	<td width="66%"> </td>
          <td width="35%" style="display:none" align="right"><img src="images/content.png" width="19" height="16" /></td>
          <td width="31%" style="display:none" class="font1"><a href="">Table of Contents</a></td>
          <td width="6%"><img src="images/view.png" width="19" height="16" /></td>
          <td width="28%" class="font1"><a href="../../index.html#p=119">View Full Version</a></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="content">
     <div id="content-top">
        <div id="content-top1">Page 119 - The Black Box Book</div>
        <div id="content-top2">P. 119</div>
     </div>
     <div id="content-middle">
     	
     	  <div class="text-container">
    <div class="use-as-video cc-float-fix">
      <a style="text-decoration: none;" href="../../index.html#p=119"><img src="../thumb/119.jpg" /></a>
    </div>

    <p class="use-as-video-title"></p>
    <pre style="white-space:pre-line"><code>CONCEP TUAL  BACKG ROUND


 The Black Box / Černá skříňka project was a challenge in terms of
 the circumstances in which it was created, its thematic focus, and
 its design. During the Covid-19 pandemic, external circumstances in
 the form of recurrent and lengthy lockdowns necessitated the usage of
 the internet environment for communication among the creative team as
 well as the public presentation of the project’s outputs. It was therefore,
 clear, from the beginning that the project would be presented on a spe-
 cially designed website. However, the website’s layout, UX design, and
 visual conception had not yet been decided.
 The website’s graphic designer, Alina Matějová, began by analyzing
 the task, which involved defining fundamental terms and concepts and
 the imaginary boundaries and driving forces for the web design. During
 the team’s first brainstorming sessions, it was clear that the goal would not
 be to bring the physical gallery space online literally. Instead, we focused
 on leveraging the specific nature of online curating and were inspired by
 the characteristics of the World Wide Web and the properties of pro-
 grammed digital media in designing the site. “Archive, data collection, new
 curator, adaptation, rawness of materials, online environment, long-term
 development, association, connection, network.” These concepts have
 shaped our thinking about the design of the web.

 HYP E R TE X T:  S TR U C T U R E

 THROUGH  VISUAL  LANGUAGE                                      Figure 1: A panoramic view of
 Then, we inquired about the specifics of the online environment   postulated hypertext from Ted Nelson’s
                                                          1965 paper on the subject. Retrieved
 in terms of information organization and how we could apply them to    from https://www.notion.so/blog/ted-
 the design of a website that will serve as an interface to a digital ar-  -nelson
 chive containing documentation of selected art projects reflecting the
 experience of the Covid-19 pandemic. Our search led us, among other
 things, to the hypertext scheme that Theodor Holm Nelson had been   Referring to the aesthetics of technical drawings or drafts, the fun-
 working on since 1960 as part of the Xanadu project (Figure 1) (Nelson,   damental components of web design are hypertext arrangements and
 1960, https://www.xanadu.net/). Nelson’s proposed rhizomatic structure   schematic visualizations of the relationships between the various pieces in
 for organizing information is generally considered to be a precursor to    the online archive. The acknowledgement of the hypertextual structure of
 the current form of the World Wide Web and an elaboration of an idea by   the web at the visible level of the user interface has become a fundamental
 Vannevar Bush, who designed a device called Memex, which was intended   means of expression while challenging web users to read non-linearly, to
 to be a technical extension of human memory (Bush, 1945). The schema   follow free associations as they navigate through its content, and to link
 created by Nelson (Figure 1) depicts a non-hierarchical structure con-  items in unforeseen arrangements.
 sisting of blocks of information (called lexies) distributed in space and   The principle of an open structure is emphasized on the web
 connected by electronic paths (links) to provide users with the possibility   by the fact that each time the page is loaded, its layout changes, as
 of non-linear keyword-based search among the information stored in this   the individual clusters of information related to the works of specific
 respective manner.  artists are rearranged each time into a new constellation, representing
                a different chain of associations and network of relationships. In this way,
                the database’s architecture and the web’s visual language have been
                brought together into an inseparable whole, in which the symbolic and
                structural levels merge and are inseparable from each other.
 118                                           119</code></pre>
     	</div>
    
     </div>
     <div id="content-bottom">
       <div id="content-bottom2">
         <table width="110" border="0" cellspacing="0" cellpadding="0">
           <tr>
             <td width="22%" height="44"><a href="page118.html"><img src="images/previous.png" width="26" height="19" id="Image2" onmouseover="MM_swapImage('Image2','','images/previous2.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
             <td width="43%">
             	&nbsp;&nbsp;&nbsp;<a href="page114.html">114</a>&nbsp;&nbsp;&nbsp;<a href="page115.html">115</a>&nbsp;&nbsp;&nbsp;<a href="page116.html">116</a>&nbsp;&nbsp;&nbsp;<a href="page117.html">117</a>&nbsp;&nbsp;&nbsp;<a href="page118.html">118</a>&nbsp;&nbsp;&nbsp;<a href="page119.html">119</a>&nbsp;&nbsp;&nbsp;<a href="page120.html">120</a>&nbsp;&nbsp;&nbsp;<a href="page121.html">121</a>&nbsp;&nbsp;&nbsp;<a href="page122.html">122</a>&nbsp;&nbsp;&nbsp;<a href="page123.html">123</a>&nbsp;&nbsp;&nbsp;<a href="page124.html">124</a>
             </td>
             <td width="35%"><a href="page120.html"><img src="images/next.png" width="26" height="19" id="Image1" onmouseover="MM_swapImage('Image1','','images/next2.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
           </tr>
         </table>
       </div>
     </div>
  </div>
</div>
<div id="right-button">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><a href="page120.html"><img src="images/next_big.png" width="90" height="80" /></a></p>
</div>


</div>

</body>
</html>
