PERFORMANCE TALLER - Altranet. Laboratori d'activitats i pensament crític per sobreviure col·lectivament a la caiguda d'internet comercial.
En aquesta perfo-taller, Spideralex i B01 presentaran Altranet, un laboratori per entendre com desapareixerà l'internet comercial, aprofundir en allò que perdrem quan això passi i explorar altres protocols tècnics per comunicar-nos.
Una col·laboració Donestech + Startdown Lab.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Altranet — Taller</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Playfair+Display:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0a0a08;
--bg2: #111110;
--green: #b8f542;
--amber: #f5a623;
--pink: #ff6b9d;
--white: #f0ede6;
--muted: #6b6b60;
--border: #2a2a24;
--mono: 'Space Mono', monospace;
--serif: 'Playfair Display', Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--white);
font-family: var(--mono);
font-size: 14px;
line-height: 1.7;
overflow-x: hidden;
}
/* NOISE TEXTURE */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 999;
opacity: 0.4;
}
/* HEADER */
header {
border-bottom: 1px solid var(--border);
padding: 3rem 2rem 2rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2rem;
max-width: 1100px;
margin: 0 auto;
}
.header-tag {
font-size: 11px;
color: var(--green);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
h1 {
font-family: var(--serif);
font-style: italic;
font-size: clamp(3rem, 8vw, 6rem);
line-height: 0.95;
color: var(--white);
letter-spacing: -0.02em;
}
h1 span {
color: var(--green);
}
.header-meta {
text-align: right;
color: var(--muted);
font-size: 12px;
line-height: 2;
}
.header-meta strong {
color: var(--amber);
display: block;
font-size: 13px;
}
/* INTRO BAND */
.intro-band {
background: var(--green);
color: var(--bg);
padding: 1rem 2rem;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
overflow: hidden;
white-space: nowrap;
}
.intro-band span {
animation: marquee 20s linear infinite;
display: inline-block;
}
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* MAIN LAYOUT */
main {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem 4rem;
}
/* SECTION BLOCK */
.block {
display: grid;
grid-template-columns: 180px 1fr;
gap: 0 3rem;
border-bottom: 1px solid var(--border);
padding: 3rem 0;
}
@media (max-width: 700px) {
.block { grid-template-columns: 1fr; gap: 1rem; }
header { grid-template-columns: 1fr; }
.header-meta { text-align: left; }
}
.block-index {
position: relative;
}
.block-number {
font-family: var(--serif);
font-style: italic;
font-size: 5rem;
line-height: 1;
color: var(--border);
position: absolute;
top: -1rem;
left: 0;
}
.block-time {
font-size: 11px;
color: var(--green);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 4.5rem;
display: block;
}
.block-label {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-top: 0.4rem;
display: block;
}
.block-content h2 {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.4rem, 3vw, 2rem);
color: var(--white);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.block-content h2 .accent {
color: var(--amber);
}
/* ITEMS */
.item {
background: var(--bg2);
border: 1px solid var(--border);
border-left: 3px solid var(--green);
padding: 1rem 1.2rem;
margin-bottom: 0.8rem;
transition: border-color 0.2s;
}
.item:hover {
border-left-color: var(--amber);
}
.item-title {
font-size: 12px;
color: var(--amber);
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.item p {
color: #c8c5be;
font-size: 13px;
line-height: 1.65;
}
.tag {
font-size: 11px;
padding: 0.3rem 0.7rem;
border: 1px solid var(--border);
color: var(--muted);
letter-spacing: 0.06em;
text-transform: uppercase;
transition: all 0.2s;
}
.tag:hover {
border-color: var(--green);
color: var(--green);
}
.tag.highlight {
border-color: var(--pink);
color: var(--pink);
}
/* MESAS GRID */
.mesas {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.6rem;
margin: 1rem 0;
}
.mesa {
background: var(--bg2);
border: 1px solid var(--border);
padding: 0.8rem 1rem;
font-size: 12px;
color: var(--green);
letter-spacing: 0.04em;
transition: all 0.2s;
}
.mesa:hover {
background: var(--green);
color: var(--bg);
}
.mesa .mesa-label {
font-size: 10px;
color: var(--muted);
display: block;
margin-bottom: 0.3rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.mesa:hover .mesa-label {
color: var(--bg);
opacity: 0.6;
}
/* NOTE BOX */
.note {
background: #0f110a;
border: 1px solid #2a3a1a;
border-left: 3px solid var(--green);
padding: 1rem 1.2rem;
margin-top: 1rem;
font-size: 12px;
color: #8aaa6a;
font-style: italic;
}
/* PERFORMANCE SECTION */
.perf-block {
background: linear-gradient(135deg, #0f0a12 0%, #0a0a08 100%);
border: 1px solid #2a1a3a;
border-left: 3px solid var(--pink);
padding: 1.5rem;
margin-bottom: 0.8rem;
}
.perf-block .item-title {
color: var(--pink);
}
.perf-block p {
color: #c0b8c8;
}
/* SCROLLBAR */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--green); }
/* ANIMATE ON LOAD */
.block {
opacity: 0;
transform: translateY(20px);
animation: fadeUp 0.5s ease forwards;
}
.block:nth-child(1) { animation-delay: 0.1s; }
.block:nth-child(2) { animation-delay: 0.2s; }
.block:nth-child(3) { animation-delay: 0.3s; }
.block:nth-child(4) { animation-delay: 0.4s; }
.block:nth-child(5) { animation-delay: 0.5s; }
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<header>
<div>
<p class="header-tag">// Programa del taller</p>
<h1><span>Altr</span>anet</h1>
</div>
<div class="header-meta">
<strong>Calafou</strong>
Donestech × Start Down Labs<br>
con B01 y la comunidad<br>
<span style="color: var(--green); margin-top:0.3rem; display:block;">≈ 2h 15 min</span>
</div>
</header>
<div class="intro-band">
<span>
★ internet feminista ★ redes comunitarias ★ comunicación sin internet ★ resiliencia digital ★ altranet ★ guifi.net ★ calafou ★ sneakernet ★ radio libre ★ código morse ★ autonomía tecnológica ★
★ internet feminista ★ redes comunitarias ★ comunicación sin internet ★ resiliencia digital ★ altranet ★ guifi.net ★ calafou ★ sneakernet ★ radio libre ★ código morse ★ autonomía tecnológica ★
</span>
</div>
<main>
<!-- BLOQUE 0 -->
<div class="block">
<div class="block-index">
<span class="block-number">0</span>
<span class="block-time">5 min</span>
<span class="block-label">Apertura</span>
</div>
<div class="block-content">
<h2>Introducción: <span class="accent">bienvenidas</span></h2>
<div class="item">
<p class="item-title">Presentación</p>
<p>Bienvenida por parte de Spider y B01. Presentación del espacio y de la red Wi-Fi de la termita, la infraestructura local que habitamos en Calafou.</p>
</div>
<div class="item">
<p class="item-title">Nota técnica</p>
<p>Filmamos el taller como parte de una exploración performativa y documental del proceso.</p>
</div>
<div class="item">
<p class="item-title">Objetivos del taller</p>
<p>Explorar colectivamente qué perdemos cuando desaparece internet comercial, conocer tecnologías alternativas de comunicación y especular juntas sobre otros internets posibles.</p>
</div>
<div class="item">
<p class="item-title">En Calafou ya vivimos en la Altranet</p>
<p>Este espacio es un ejemplo vivo: una intranet basada en el servidor Bandrui, conexión a través de Guifi.net y una comunidad que practica otra manera de estar en red.</p>
</div>
<div class="note">
→ Formato experimental. Esto no es una charla convencional: es un laboratorio. Probamos cosas. Nos equivocamos. Aprendemos juntas.
</div>
</div>
</div>
<!-- BLOQUE 1 -->
<div class="block">
<div class="block-index">
<span class="block-number">1</span>
<span class="block-time">30 min</span>
<span class="block-label">Reflexión</span>
</div>
<div class="block-content">
<h2>¿Qué perdemos cuando desaparece <span class="accent">internet comercial</span>?</h2>
<div class="item">
<p class="item-title">Ronda inicial — colectiva</p>
<p>Cada persona dirá una cosa que ama de internet y una cosa que odia. Sin filtros, sin orden.</p>
</div>
<div class="item">
<p class="item-title">Ejercicio individual — cartografía del día</p>
<p>Dibuja un día típico en tu vida, desde que te levantas hasta que te acuestas. Marca todos los momentos en que interactúas con algún dispositivo conectado a internet y señala qué haces en cada uno.</p>
</div>
<div class="item">
<p class="item-title">Ejercicio de prospectiva — el día después</p>
<p>Ahora imagina que mañana internet desaparece sin dejar rastro. Marca los impactos: emocionales, concretos para ti a nivel personal, para tu red de afectos y para la sociedad en su conjunto.</p>
</div>
<div class="item">
<p class="item-title">Conversación colectiva</p>
<p>¿Qué es lo que realmente perdemos si internet tal y como lo conocemos desaparece?</p>
</div>
</div>
</div>
<!-- BLOQUE 2 -->
<div class="block">
<div class="block-index">
<span class="block-number">2</span>
<span class="block-time">20 min</span>
<span class="block-label">Análisis</span>
</div>
<div class="block-content">
<h2>Posibles causas de las <span class="accent">interrupciones</span></h2>
<div class="item">
<p class="item-title">Presentación a cargo de Spideralex</p>
<p>Panorama de los principales vectores de interrupción del internet comercial, con datos y ejemplos actuales.</p>
</div>
<div class="tags">
<span class="tag">Censura e internet shutdowns</span>
<span class="tag">Internet freedom</span>
<span class="tag">Exclusión algorítmica</span>
<span class="tag">Decisiones automatizadas</span>
<span class="tag">Ataques cibernéticos</span>
<span class="tag">Vulnerabilidades técnicas</span>
<span class="tag">Dependencia energética</span>
<span class="tag highlight">Centros de datos que fallan</span>
</div>
</div>
</div>
<!-- BLOQUE 3 -->
<div class="block">
<div class="block-index">
<span class="block-number">3</span>
<span class="block-time">45 min</span>
<span class="block-label">Exploración</span>
</div>
<div class="block-content">
<h2>Recuperar y explorar otras formas de <span class="accent">comunicación</span></h2>
<div class="item">
<p class="item-title">Lluvia de ideas colectiva</p>
<p>Pedimos a las asistentes que compartan otras formas de comunicación existentes cuando no hay internet. Las apuntamos juntas en la pizarra.</p>
</div>
<div class="item" style="border-left-color: var(--amber);">
<p class="item-title">Cada mesa es una colectividad tecnológica</p>
<div class="mesas">
<div class="mesa"><span class="mesa-label">Mesa</span>——server</div>
<div class="mesa"><span class="mesa-label">Mesa</span>Vedetas</div>
<div class="mesa"><span class="mesa-label">Mesa</span>Novamente</div>
<div class="mesa"><span class="mesa-label">Mesa</span>CEDIPC</div>
<div class="mesa"><span class="mesa-label">Mesa</span>S-Net</div>
<div class="mesa"><span class="mesa-label">Mesa</span>Sneakernet</div>
</div>
<p style="font-size:11px; color: var(--muted); margin-top:0.5rem;">CEDIPC: Comité de Estudio sobre la Desaparición del Internet Patriarcal y Capitalista</p>
</div>
<div class="item">
<p class="item-title">El sobre — instrucciones por mesa</p>
<p>Cada mesa recibe un sobre con: 5 herramientas o protocolos para comunicarse sin internet, un código QR que dirige a una herramienta o contenidos, e instrucciones para probar la comunicación desconectada.</p>
</div>
<div class="note" style="margin-top: 0.8rem;">
Herramientas disponibles: Bluetooth · Código Morse · PirateBox · Sneakernet · Dead Drops / Burnstation · Red comunitaria libre Guifi.net · Servidor local / intranet · Radio FM · Walkie Talkie · Radio CB · LoRa · SSTV (Slow Scan Television)
</div>
</div>
</div>
<!-- BLOQUE 4 -->
<div class="block" style="border-bottom: none;">
<div class="block-index">
<span class="block-number">4</span>
<span class="block-time">35 min</span>
<span class="block-label">Performance</span>
</div>
<div class="block-content">
<h2>Performance jam <span class="accent">colectiva</span></h2>
<div class="perf-block">
<p class="item-title">Fldigi — sonificación y cifrado</p>
<p>Pasamos mensajes y audios por Fldigi, un programa de módem que genera ruidos y cifra o descifra mensajes usando protocolos de radioafición: CW, PSK, MFSK, RTTY, Hell, DominoEX, Olivia y Throb. También puede calibrar tarjetas de sonido con señales de tiempo y hacer mediciones de frecuencia.</p>
</div>
<div class="perf-block">
<p class="item-title">Cantamos código</p>
<p>La voz como protocolo. El cuerpo como transmisor. Exploramos qué significa cantar datos.</p>
</div>
<div class="perf-block">
<p class="item-title">Lectura sonora de Altranet</p>
<p>Se leen extractos del libro <em>Altranet</em> mezclados con los sonidos que genera la herramienta: capas de texto, ruido y señal que se superponen y dialogan.</p>
</div>
</div>
</div>
</main>
</body>
</html>