colorlab
clone your own copy | download snapshot

Snapshots | iceberg

Inside this repository

education-page.html
text/html

Download raw (10.8 KB)

<!DOCTYPE html>
<html lang="en" id="education-page">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Laboratorium</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="shortcut icon" href="">
  <link rel="stylesheet" href="styles.css">
  <!-- <script src="scripts/jquery-1.9.1.js"></script> -->
  <!-- <script src="scripts/jquery-ui-1.9.2.custom.js"></script> -->
  <style>
    :root {
      --background-color: #f96245;
      --blocking-background-color: white;
      --header-color-mono: darkred;

      --header-color-one: red;
      --header-color-two: darkred;
      --header-color-three: darkgreen;
      --header-color-four: darkred;
    }

    #main {
      background: transparent;
    }

    .colored-wrapper-content, #main .colored-wrapper-content {
      background: transparent;
    }

    #main h1 {
      margin-top: 0;
    }

    #menu {
      padding: 50px 70px;
      --background-color: #E1A800;

    }


    .leftside, .rightside {
      --background-color: #E1A800;
    }
  </style>
</head>

<body>
  <!-- <div id="colors">
    <div class="colored-wrapper"></div>
  </div> -->
  <nav id="menu"  class="colored-wrapper">
    <ul class="">
      <li><a href="main.html">Laboratorium</a></li>
      <li><a href="about-single-other.html">Colorlab</a></li>
      <li><a href="project-page.html">Projects</a></li>
      <li><a href="education-page.html">Education</a></li>
    </ul>
  </nav>
  <!-- <div id="left-menu"  class="colored-wrapper">
    <div class="colored-wrapper-content">
      <h2>Living colors</h2>
      <h3>Bacteria</h3>
      <ul>
        <li>Spirulina</li>
        <li>Chelidonium majus</li>
      </ul>
      <h3>Algae</h3>
      <ul>
        <li>Dunaliella Salina</li>
        <li>Haematococcus pluvialis</li>
        <li>Porphyridium cruentum</li>
        <li>Chlorella</li>
        <li>Fucus</li>
        <li>Isatis Galbana</li>
      </ul>
      <h2>Traditional sources</h2>
      <ul>
        <li>Murex</li>
      </ul>
    </div>
  </div> -->
  <div id="main" class="colored-wrapper">
    <div class="leftside colored-wrapper">
      <p class="footer-more">↓ Upcoming workshops</p>
      <ul>
        <li><a href="#X-Ray">Projectweek 2: The Colours of the Oyster mushroom</a><footer>19 → 20 March @KASK</footer></li>
      </ul>
      <p class="footer-more">↓ Workshop with KASK students</p>
      <ul>
        <li><a href="#X-Ray">X-Ray: Laboratorium @KASK</a></li>
        <li><a href="#Master-Seminar-17-18">Master Seminar: Art, science and technology interactions 2016-2017</a></li>
        <li><a href="#Indigo-workshop">Indigo workshop</a></li>
      </ul>
    </div>
    <div class="rightside colored-wrapper">
      <ul>
        <p class="footer-more">↓ Related projects or workshops</p>
        <ul>
          <li><a href="">Tierra de Diatomeas</a>
            <figure>
                <img src="img-website/musac_lab987_tierradediatomeas_1_xl.jpg"/>
            </figure>
          </li>
          <li><a href="">neochromologism.io</a>
            <figure>
                <img src="img-website/neochrom_2_2-1024x504.png"/>
            </figure>
          </li>
          <li><a href="">Faro</a>
            <figure>
                <img src="img-website/faroweb-1024x677.jpg"/>
            </figure>
          </li>
          <!-- <li><a href="">Monochrome</a></li>
          <li><a href="">Kars&Boom</a></li>
          <li><a href="">UGent-cells</a></li>
          <li><a href="">OSP</a></li>
          <li><a href="">UGent-Interference</a></li>
          <li><a href="">Peter Beyls</a></li>
          <li><a href="">Cern</a></li> -->
        </ul>
      </ul>
    </div>

      <div class="colored-wrapper-content">
        <h1 class="colored">Education</h1>
        <p>Laboratoriumorganises workshops, lectures and participates in the academic programme of KASK within the topics as colors, biomaterials, Art+Science and DIYbio. Here you can find info of the previous activities organised as well as a list of the upcoming events.
        </p>
      </div>

  </div>
  <div class="anchor" id="X-Ray"></div>
  <div class="projects colored-wrapper">
      <div class="colored-wrapper-content">
        <h2  class="colored">X-Ray: Laboratorium @KASK</h2>
        <div class="figure">
          <a href="img-website/musac_lab987_tierradediatomeas_1_xl.jpg" target="_blank">
            <figure>
                <img src="img-website/musac_lab987_tierradediatomeas_1_xl.jpg"/>
                <figcaption>Caption</figcaption>
            </figure>
          </a>
          <a href="img-website/musac_lab987_tierradediatomeas_1_xl.jpg" target="_blank">
            <figure>
                <img src="img-website/musac_lab987_tierradediatomeas_1_xl.jpg"/>
                <figcaption>Caption</figcaption>
            </figure>
          </a>
        </div>
        <p>X-Ray: Laboratorium explores the boundaries between art and science by presenting a group of short films where the filmmakers have entered in the laboratory looking for inspiration, tools and methodologies. Full of intriguing images, between the natural and the artificial, the organic and the inorganic, X-Ray: Laboratorium ranges from chemical reactions to space research.</p>
        <p>X-Ray: Laboratorium is compiled by Joost Rekveld and is organized in collaboration with LABORATORIUM, the experimental lab for art/design and biotechnology at Atelier Mediakunst, KASK School of Arts Ghent.</p>
        <p class="footer-more"><a href="https://www.kaskcinema.be/kaskcinema/voorstelling/x_ray_laboratorium">See the site</a></p>
        <p class="footer-more"><a href="https://www.facebook.com/events/1303531163012472/">See the facebook event</a></p>

      </div>

    </div>

    <div class="anchor" id="Master-Seminar-17-18"></div>

    <div class="projects colored-wrapper">

        <div class="colored-wrapper-content">
          <h2 class="colored">Master Seminar: Art, science and technology interactions 2016-2017</h2>
          <div class="figure">
            <a href="img-website/neochrom_2_2-1024x504.png" target="_blank">
              <figure>
                  <img src="img-website/neochrom_2_2-1024x504.png"/>
                  <figcaption>Caption</figcaption>
              </figure>
            </a>
          </div>
          <p>In the past few decades there is a growing number of art, science and/or technology collaborations. This seminar offered the possibility to explore the interactions between these fields and places this contemporary phenomenon within a larger cultural, historical and political context.</p>
          <p>KASK’s recently installed experimental bio-lab for art and design ‘Laboratorium’ functioned as the concrete starting point for the seminar, led by Bram Crevits (Media Art) and María Boto (Science).</p>
          <p>Not only the emerging biotechnology has provided tools, materials and methodologies to artistic creations but also this intersection generates questions and discussions that traditionally have been limited to the scientific community. On the other hand, new approaches to a certain topic could bring unexpected solutions or research lines that rarely would be obtained in traditional academic contexts. Collaborations between art and science engage explicitly in the fields of change of our socio-technical world. Both from a cultural or artistic approach and from a scientific or technology approach, it is a context requiring openness,challenging and expanding both the notion of art and of science.</p>
          The aim of this seminar was to give a general overview of art-science collaborations by presenting several examples, developing a critical approach to them, and exploring hands- on possibilities and challenges of the dialogue between science and artistic research.</p>
          <p>Guest speakers: Paula Pin, Kristel Peters, Peter Beyls and Joost Rekveld.</p>


        </div>

      </div>
      <div class="anchor" id="Indigo-workshop"></div>

      <div class="projects colored-wrapper">

          <div class="colored-wrapper-content">
            <h2 class="colored">Indigo workshop</h2>
            <div class="figure">
              <a href="img-website/neochrom_2_2-1024x504.png" target="_blank">
                <figure>
                    <img src="img-website/neochrom_2_2-1024x504.png"/>
                    <figcaption>Caption</figcaption>
                </figure>
              </a>
            </div>
            <p>Together with the researcher Clara Vankerschaver, from the textile department, a workshop about indigo has been organized. Moving from the chemistry behind indigo dyeing to a practical experience with several fabrics, the participants are allowed to create beautiful blue shadows.</p>


          </div>

        </div>
  <!-- <div id="right-tags" class="colored-wrapper">
      <div class="colored-wrapper-content"></div>
  </div> -->

  <script>

    function patt(rot) {
      return 'repeating-linear-gradient(' + rot.toString(10) + 'deg, var(--background-color),  var(--background-color) 1px, transparent 1px,transparent 4px)';
    }

    function blockingPatt(rot) {
      return 'repeating-linear-gradient(' + rot.toString(10) + 'deg, var(--blocking-background-color),  var(--blocking-background-color) 3px, transparent 3px,transparent 4px)';
    }

    function initBackgrounds() {
      document.querySelectorAll('.colored-wrapper').forEach(el => {
        var rotation = parseInt(Math.random() * 90);
        el.dataset.rotation = rotation;
        el.dataset.speed = (Math.random() * 3) - 1.5;
        el.style.backgroundImage = patt(rotation);
        el.querySelectorAll('.colored-wrapper-content').forEach(elInner => {
          elInner.style.backgroundImage = blockingPatt(rotation + 90);
        });
      });

      var lastScrollY = null;

      function updateBackgrounds () {
        if (window.scrollY !== lastScrollY) {
          document.querySelectorAll('.colored-wrapper').forEach(el => {
            var rotation = Math.round((window.scrollY * parseFloat(el.dataset.speed) + parseInt(el.dataset.rotation)) % 360);
            el.style.backgroundImage = patt(rotation);
            el.querySelectorAll('.colored-wrapper-content').forEach(elInner => {
              elInner.style.backgroundImage = blockingPatt(rotation + 90);
            });
          });
          lastScrollY = window.scrollY;
        }

        window.requestAnimationFrame(updateBackgrounds);
      }

      updateBackgrounds();
    }

    function updateBarPosition () {
      var contentHeight = document.querySelector('html').getBoundingClientRect().height,
      windowHeight = window.innerHeight,
      windowScrollDistance = contentHeight - windowHeight,
      pos = window.scrollY / windowScrollDistance;
      document.querySelector('#colors').style.top = Math.round(pos * 70).toString(10) + 'vh';
    }


    initBackgrounds();

    (function () {

    })();

  </script>
</body>

</html>