﻿<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 118 - 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="page117.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=118">View Full Version</a></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="content">
     <div id="content-top">
        <div id="content-top1">Page 118 - The Black Box Book</div>
        <div id="content-top2">P. 118</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=118"><img src="../thumb/118.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="page117.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="page113.html">113</a>&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>
             </td>
             <td width="35%"><a href="page119.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="page119.html"><img src="images/next_big.png" width="90" height="80" /></a></p>
</div>


</div>

</body>
</html>
