User:Wyn: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
Line 2: Line 2:




<!DOCTYPE html>
<div style="font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; background-color: #f0f0f0;">
<html lang="en">
  <h1 style="text-align: center; color: #333;">My Web of Interests</h1>
<head>
 
    <meta charset="UTF-8">
  <table style="width: 100%; border-collapse: separate; border-spacing: 10px;">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <tr>
    <title>Personal Web of Interests</title>
      <td style="width: 33%; text-align: center; vertical-align: middle; background-color: #fff; border: 1px solid #333; padding: 10px; border-radius: 10px;">
    <style>
        Physical Publishing
        body, html {
        <br>&#8595;&#8592;
            margin: 0;
      </td>
            padding: 0;
      <td style="width: 33%; text-align: center; vertical-align: middle; background-color: #fff; border: 1px solid #333; padding: 10px; border-radius: 10px;">
            height: 100%;
        &#8593;
            font-family: Arial, sans-serif;
         <br>Art Labour Archive
            background-color: #f0f0f0;
         <br>&#8595;&#8592;
        }
      </td>
        .container {
      <td style="width: 33%; text-align: center; vertical-align: middle; background-color: #fff; border: 1px solid #333; padding: 10px; border-radius: 10px;">
            width: 100%;
        Sound Recording
            height: 100%;
        <br>&#8595;&#8594;
            position: relative;
      </td>
            overflow: hidden;
    </tr>
         }
    <tr>
         .node {
      <td style="text-align: center; vertical-align: middle; background-color: #fff; border: 1px solid #333; padding: 10px; border-radius: 10px;">
            position: absolute;
         &#8593;&#8594;
            background-color: #fff;
         <br>Collective Organization
            border: 2px solid #333;
         <br>&#8595;
            border-radius: 50%;
      </td>
            width: 100px;
      <td style="text-align: center; vertical-align: middle; background-color: #fff; border: 1px solid #333; padding: 10px; border-radius: 10px;">
            height: 100px;
         &#8593;&#8594;&#8592;
            display: flex;
         <br>Course Assignments
            justify-content: center;
        <br>&#8595;&#8594;&#8592;
            align-items: center;
      </td>
            text-align: center;
      <td style="text-align: center; vertical-align: middle; background-color: #fff; border: 1px solid #333; padding: 10px; border-radius: 10px;">
            cursor: pointer;
        &#8593;&#8592;
            transition: all 0.3s ease;
        <br>Personal Projects
         }
         <br>&#8595;
        .node:hover {
      </td>
            transform: scale(1.1);
    </tr>
            box-shadow: 0 0 15px rgba(0,0,0,0.2);
    <tr>
         }
      <td style="text-align: center; vertical-align: middle; background-color: #fff; border: 1px solid #333; padding: 10px; border-radius: 10px;">
         #svg-container {
        &#8593;
            position: absolute;
         <br>Skills Development
            top: 0;
      </td>
            left: 0;
      <td style="text-align: center; vertical-align: middle; background-color: #fff; border: 1px solid #333; padding: 10px; border-radius: 10px;">
            width: 100%;
        &#8593;
            height: 100%;
        <br>Course Journal
            z-index: -1;
      </td>
         }
      <td style="text-align: center; vertical-align: middle; background-color: #fff; border: 1px solid #333; padding: 10px; border-radius: 10px;">
         .info-panel {
        &#8593;
            position: fixed;
         <br>Future Goals
            bottom: 20px;
      </td>
            left: 20px;
    </tr>
            background-color: rgba(255, 255, 255, 0.9);
  </table>
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            max-width: 300px;
         }
    </style>
</head>
<body>
    <div class="container" id="web-container">
         <svg id="svg-container"></svg>
    </div>
    <div class="info-panel" id="info-panel">
         <h2>Your Personal Web</h2>
        <p>Click on a node to learn more about each topic.</p>
    </div>


    <script>
  <div style="margin-top: 20px; background-color: #fff; border: 1px solid #333; padding: 15px; border-radius: 10px;">
        const interests = [
    <h2 style="color: #333;">About My Web</h2>
            {id: 'publishing', name: 'Physical Publishing', x: 50, y: 30, info: 'Exploring the art of tangible media creation and distribution.'},
    <p>This web represents the interconnected nature of my interests and work. Each node is a key area of focus, with arrows showing how they relate to each other. Click on a topic to learn more:</p>
            {id: 'archive', name: 'Art Labour Archive', x: 70, y: 70, info: 'Documenting and preserving the process and effort behind artistic creations.'},
    <ul>
            {id: 'sound', name: 'Sound Recording', x: 30, y: 70, info: 'Capturing and manipulating audio for various creative projects.'},
      <li><a href="#publishing">Physical Publishing</a></li>
            {id: 'collective', name: 'Collective Organization', x: 20, y: 40, info: 'Studying and implementing collaborative structures in creative endeavors.'},
      <li><a href="#archive">Art Labour Archive</a></li>
            {id: 'assignments', name: 'Course Assignments', x: 80, y: 40, info: 'Current projects: 1. Media analysis (due 10/15) 2. Sound installation (due 11/20)'}
      <li><a href="#sound">Sound Recording</a></li>
        ];
      <li><a href="#collective">Collective Organization</a></li>
      <li><a href="#assignments">Course Assignments</a></li>
      <li><a href="#projects">Personal Projects</a></li>
    </ul>
  </div>


        function createNode(interest) {
  <div id="publishing" style="margin-top: 20px; background-color: #fff; border: 1px solid #333; padding: 15px; border-radius: 10px;">
            const node = document.createElement('div');
    <h3>Physical Publishing</h3>
            node.className = 'node';
    <p>My work in physical publishing involves creating tangible media and exploring innovative distribution methods.</p>
            node.id = interest.id;
  </div>
            node.style.left = `${interest.x}%`;
            node.style.top = `${interest.y}%`;
            node.innerHTML = interest.name;
            node.onclick = () => showInfo(interest);
            document.getElementById('web-container').appendChild(node);
        }


        function createConnections() {
  <!-- Repeat similar divs for other topics -->
            const svg = document.getElementById('svg-container');
            interests.forEach((interest, i) => {
                interests.slice(i + 1).forEach(other => {
                    const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
                    line.setAttribute('x1', `${interest.x}%`);
                    line.setAttribute('y1', `${interest.y}%`);
                    line.setAttribute('x2', `${other.x}%`);
                    line.setAttribute('y2', `${other.y}%`);
                    line.setAttribute('stroke', '#333');
                    line.setAttribute('stroke-width', '1');
                    svg.appendChild(line);
                });
            });
        }


        function showInfo(interest) {
</div>
            const panel = document.getElementById('info-panel');
            panel.innerHTML = `
                <h2>${interest.name}</h2>
                <p>${interest.info}</p>
            `;
        }
 
        interests.forEach(createNode);
        createConnections();
    </script>
</body>
</html>

Revision as of 14:21, 19 September 2024

Special Issue 25


My Web of Interests

       Physical Publishing
       
↓←

       ↑
       
Art Labour Archive
       
↓←

       Sound Recording
       
↓→

       ↑→
       
Collective Organization
       
↓

       ↑→←
       
Course Assignments
       
↓→←

       ↑←
       
Personal Projects
       
↓

       ↑
       
Skills Development

       ↑
       
Course Journal

       ↑
       
Future Goals

About My Web

This web represents the interconnected nature of my interests and work. Each node is a key area of focus, with arrows showing how they relate to each other. Click on a topic to learn more:

  • <a href="#publishing">Physical Publishing</a>
  • <a href="#archive">Art Labour Archive</a>
  • <a href="#sound">Sound Recording</a>
  • <a href="#collective">Collective Organization</a>
  • <a href="#assignments">Course Assignments</a>
  • <a href="#projects">Personal Projects</a>

Physical Publishing

My work in physical publishing involves creating tangible media and exploring innovative distribution methods.


Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Wyn&oldid=273653"