<!DOCTYPE HTML>
<!--
Editorial by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>IndieWeb con Brea</title>
<meta charset="utf-8" />
<meta language="es" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="../../assets/css/main.css" />
<style>
span.small {
font-size: smaller;
}
</style>
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper">
<!-- Main -->
<div id="main">
<div class="inner">
<!-- Header -->
<header id="header">
<a id="manifestLink" href="#" class="logo"><strong>Indie Web con Brea</strong> |
<span id="version">version</span> <span class="small">[<span id="checksum"></span>]</span>
<ul class="icons">
<li><a href="#" id="hypLoad" class="icon solid fa-highlighter">
<span class="label">Anotar</span></a></li>
<li><a href="https://docutopia.tupale.co/brea" class="icon solid fa-bolt">
<span class="label">En vivo</span></a></li>
<li><a href="../../../../file?name=docs/es/index.html&txt=1" class="icon solid fa-code">
<span class="label">Código</span></a></li>
<li><a href="../../../../finfo?name=docs/es/index.html" class="icon solid fa-history">
<span class="label">Historial</span></a></li>
<li><a href="#" class="icon solid fa-share-alt">
<span class="label">Compartir</span></a></li>
<li><a href="./index.html" class="icon solid fa-home">
<span class="label">Inicio</span></a></li>
</ul>
</header>
<!-- Banner -->
<section id="banner">
<div class="content">
<header>
<h1>IndieWeb con Brea</h1>
<p>Crea sitios web autónomos, agradables y personalizables de manera ágil y resiliente.</p>
</header>
<p>
<b><a href="https://mutabit.com/repos.fossil/brea/">Brea</a></b> es un generador y gestor de
sitios web enfocado en la <i>personalización interactiva y la autonomía</i>, que permite
publicar información integrada desde distintas fuentes, con presentaciones a la medida.
Está a medio camino entre un generador de sitios web estáticos y un Sistema Gestor Contenidos
(o CMS) desacoplado, debido a la combinación de tecnologías como
<a href="https://fossil-scm.org/">Fossil</a> y <a href="https://pharo.org/">Pharo</a>, que permiten
una eficiente gestión, replicación y publicación de archivos estáticos y un entorno de programación
en vivo (<i>live coding</i>), para extender y manipular las fuentes de datos, sus presentaciones
e interfaces.
</p>
<p>
Este obra te enseñará qué principios que rigen Brea, sus valores diferenciales y cómo usarlo,
extenderlo y adaptarlo.
</p>
<p><span class="icon solid fa-exclamation-triangle fa-lg"></span>
<span class="icon solid fa-people-carry fa-lg"></span>
Este sitio está aún en construcción. Si quieres, puedes <a href="acerca-de.html">ayudarnos a terminarlo</a>.
</p>
<ul class="actions">
<li><a href="#indieweb" class="button big">+Info<i class="fas fa-arrow-down"></i></a></li>
</ul>
</div>
<span class="image object">
<img
src="https://www.elnuevosiglo.com.co/sites/default/files/2021-11/CxQUfspVEAAtO32.jpg"
alt="Telares indígenas" />
<p><span class="small">
Tejido de mujeres indígenas. Imagen desde <a href="https://www.elnuevosiglo.com.co/economia/indigenas-promueven-innovacion-en-tejidos">El Nuevo Siglo</a>.
</span></p>
</span>
</section>
<!-- Section -->
<section>
<header class="major">
<h2 id="indieweb">IndieWeb</h2>
</header>
<p>
Queremos construir una <a href="https://indieweb.org/Main_Page-es">web diferente</a>.
</p>
<div class="features">
<article>
<span class="icon solid fa-heart"></span>
<div class="content">
<h3>Tus datos y contenido son tuyos</h3>
<p>Cuando publicas algo en la web, debería pertenecerte a ti, no a una empresa.
Demasiadas compañías han cerrado y <a href="https://indieweb.org/site-deaths">
perdido todos los datos de sus usuarios</a>.
Otras tienen algoritmos opacos que mercantilizan tu privacidad y condicionan
tus hábitos, bajo lógicas extractivistas.
Uniéndote a la IndieWeb, tu contenido continúa siendo tuyo y estando bajo tu control.
</p>
</div>
</article>
<article>
<span class="icon fa-comments"></span>
<div class="content">
<h3>Te conectas mejor</h3>
<p>
Tus artículos y mensajes de estado pueden
<a href="https://indieweb.org/POSSE">transmitirse a todos los servicios</a>,
no solamente uno, y permitir así que te relaciones con todo el mundo.
Incluso las réplicas y los "Me gusta" en otros servicios pueden regresar a tu web:
de esta forma están todos en un único sitio.
</p>
</div>
</article>
<article>
<span class="icon fa-check-square"></span>
<div class="content">
<h3>Tienes el control</h3>
<p>
Puedes publicar lo que quieras, en el formato que quieras, sin que nadie te
monitoree.
Adicionalmente, compartes enlaces permanentes, que siempre funcionarán, bien sean
simples y legibles en tu propio dominio (como ejemplo.com/ideas) o
<i>cipherlinks</i>, que funcionan incluso si no tienes un dominio, este cambia
o está caído/inaccesible.
</p>
</div>
</article>
<article>
<span class="icon solid fa-seedling"></span>
<div class="content">
<h3>Principios antes que proyectos</h3>
<p>
Otros asumen una <a href="https://indieweb.org/monoculture">monocultura</a> de
un proyecto para todo.
La IndieWeb asume una pluralidad de proyectos y Brea es uno de ellos, que
encarna <a href="https://indieweb.org/principles">principios</a> de una manera
particular, pero en diálogo con otros proyectos de principios similares.
</p>
</div>
</article>
<article>
<span class="icon solid fa-sync-alt"></span>
<div class="content">
<h3 id="selfdogfood">Usamos lo que hacemos</h3>
<p>
Abordamos nuestras propias necesidades, iterando y creando sobre nuestros
propios sitios.
</p>
</div>
</article>
<article>
<span class="icon solid fa-spinner"></span>
<div class="content">
<h3>Diseño primero, formatos después</h3>
<p>
Priorizamos la experiencia de las personas y desde allí consideramos
aquello que les sirve a las máquinas para soportar dicha experiencia.
</p>
</div>
</article>
</div>
</section>
<section>
<header class="major">
<h2 id="infrabolsillo">Infraestructuras de Bolsillo</h2>
</header>
<p>
Las herramientas e infraestructuras elegidas para este proyecto son:
</p>
<div class="features">
<article>
<span class="icon solid fa-cog"></span>
<div class="content">
<h3>Sencillas</h3>
<p>
Preferimos pocos principios de funcionamiento y componentes que se interconectan
formas poderosas y que funcionan en una amplia varidad de máquinas, desde
memorias USB, hasta computadoras modestas o servidores potentes.
</p>
</div>
</article>
<article>
<span class="icon solid fa-cogs"></span>
<div class="content">
<h3>Extensibles</h3>
<p>
Nos interconectamos con otras infraestructuras, a través de estándares abiertos.
</p>
</div>
</article>
<article>
<span class="icon solid fa-cloud-upload-alt"></span>
<div class="content">
<h3>Locales primero</h3>
<p>
Trabajamos primero en nuestras propias máquinas y luego subimos cosas a Internet.
Diseñamos para lugares con conectividad baja y/o intermitente.
</p>
</div>
</article>
<article>
<span class="icon solid fa-feather-alt"></span>
<div class="content">
<h3>Ágiles y resilientes</h3>
<p>
Usamos prototipos mínimos y evolutivos, que se adecuan al cambio,
a la vez que preservan y son compatibles con nuestra historia.
</p>
</div>
</article>
<article>
<span class="icon solid fa-sync-alt"></span>
<div class="content">
<h3>Interactivas</h3>
<p>
Gracias a <a href="https://pharo.org/">Pharo</a> y su entorno de <i>Live Coding</i>,
podemos explorar fuentes de datos, construir consultas y ver los cambios al sitio
de manera interactiva, agilizando ciclos de realimentación entre creación y creadoras.
</p>
</div>
</article>
<article>
<span class="icon solid fa-eye"></span>
<div class="content">
<h3>Bonitas y multi-dispositivo</h3>
<p>
Los agradables temas de <a href="https://html5up.net/">HTML5UP</a> y sus personalizaciones,
usando <a href="https://mustache.github.io/">Mustache</a>, se adaptan
a teléfonos móviles, tabletas y computadores de escritorio.
</p>
</div>
</article>
</div>
</section>
<!-- Section -->
<section>
<header class="major">
<h2>Casos de uso</h2>
</header>
<p>
Brea ya está siendo usado en distintos proyectos:
</p>
<div class="posts">
<article>
<h3>HackBo</h3>
<a href="http://hackbo.co/" class="image">
<img src="https://imgur.com/isMBhmH.png" alt="" /></a>
<p>
HackBo, un hackerspace en Bogotá, sirvió para explorar y prototipar muchas de
las ideas que dieron origen a Brea.
</p>
<ul class="actions">
<li><a href="http://hackbo.co/" class="button">+Info</a></li>
</ul>
</article>
<article>
<h3>Diarios de una pandemia</h3>
<a href="http://diariosdeunapandemia.art/" class="image">
<img src="https://imgur.com/HxCSPkb.png" alt="Portada de proyecto" /></a>
<p>
Proyecto educativo y artístico para "dejar memoria de este momento histórico,
por medio de ejercicios creativos..."
</p>
<ul class="actions">
<li><a href="http://diariosdeunapandemia.art/" class="button">+Info</a></li>
</ul>
</article>
<article>
<h3>502Lab</h3>
<a href="https://mutabit.com/repos.fossil/502Lab/doc/trunk/wiki/Ironsworn/index.html/" class="image">
<img src="https://imgur.com/zUctrYA.png" alt="Portada de proyecto" /></a>
<p>
Sitio para juegos de rol.
</p>
<ul class="actions">
<li><a href="https://mutabit.com/repos.fossil/502Lab/doc/trunk/wiki/Ironsworn/index.html"
class="button">+Info</a></li>
</ul>
</article>
<article>
<h3>Indie Web con Brea</h3>
<a href="#" class="image">
<img src="https://imgur.com/pjoXeSx.png" alt="" /></a>
<p>
Por supuesto, siguiendo el principio de
<a href="#selfdogfood"><i>usar lo que hacemos</i></a>,
este sitio web fue hecho con la tecnología que acá proponemos.
</p>
<ul class="actions">
<li><a href="#" class="button">+Info</a></li>
</ul>
</article>
<article>
<h3>Blogs</h3>
<a href="#" class="image"><img src="https://imgur.com/KV4AdDk.png" alt="" /></a>
<p>
Lleva tu bitácora contigo y publícala cuando estés en línea.
</p>
<ul class="actions">
<li><a href="./abrebocas.html" class="button">En construcción</a></li>
</ul>
</article>
<article>
<h3>Portafolio, catálogo y tienda en línea</h3>
<a href="#" class="image"><img src="images/pic04.jpg" alt="" /></a>
<p>Estamos proponiendo futuros en diálogo con la IndieWeb que comparten con ella el
ser incluyentes y diversos.</p>
<ul class="actions">
<li><a href="./futuros.html" class="button">Planeado</a></li>
</ul>
</article>
</div>
</section>
<!-- Section -->
<section>
<header class="major">
<h2 id="talleres">Talleres comunitarios</h2>
</header>
<p>
Prosa, código y experiencias comunitarias se entrelanzan en su avance.
Tenemos unos talleres periódicos, llamados Data Rodas, donde vamos aprendiendo
cómo usar y modificar Brea para desplegar y personalizar nuestra presencia en
línea. Las memorias de las data rodas son notas rápidas que se complementan
con el hipertexto en esta obra.
</p>
<p>
Si quieres estar al tanto de cuándo ocurrirá nuestro siguiente encuentro,
únete a <a href="https://t.me/grafoscopio">nuestro grupo de Telegram.</a>
</p>
<div class="posts">
<article>
<h3>Pseudo novena Navinerd</h3>
<a href="./datarodas/54.md.html" class="image">
<img src="../../../../uv/docs/es/datarodas/navinerd.png" alt="" /></a>
<p>
Diciembre 16 al 19 de 2020.
</p>
<ul class="actions">
<li><a href="./datarodas/54.md.html" class="button">Memorias</a></li>
</ul>
</article>
<article>
<h3>Data Roda 54</h3>
<a href="./datarodas/54.md.html" class="image">
<img src="../../../../uv/docs/es/datarodas/54.png" alt="" /></a>
<p>
Noviembre 21 de 2020.
</p>
<ul class="actions">
<li><a href="./datarodas/54.md.html" class="button">Memorias</a></li>
</ul>
</article>
<article>
<h3>Data Roda 53</h3>
<a href="./datarodas/53.md.html" class="image">
<img src="../../../../uv/docs/es/datarodas/53.png" alt="" /></a>
<p>
Octubre 24 de 2020.
</p>
<ul class="actions">
<li><a href="./datarodas/53.md.html" class="button">Memorias</a></li>
</ul>
</article>
<article>
<h3>Data Roda 52</h3>
<a href="./datarodas/52.md.html" class="image">
<img src="../../../../uv/docs/es/datarodas/52.jpg" alt="" /></a>
<p>
Octubre 10 de 2020.
</p>
<ul class="actions">
<li><a href="./datarodas/52.md.html" class="button">Memorias</a></li>
</ul>
</article>
<article>
<h3>Data Roda 51</h3>
<a href="./datarodas/51.md.html" class="image">
<img src="../../../../uv/docs/es/datarodas/51.jpg" alt="" /></a>
<p>
Septiembre 26 de 2020.
</p>
<ul class="actions">
<li><a href="./datarodas/51.md.html" class="button">Memorias</a></li>
</ul>
</article>
<article>
<h3>Data Roda 50</h3>
<a href="./datarodas/50.md.html" class="image">
<img src="../../../../uv/docs/es/datarodas/50.png" alt="" /></a>
<p>
Septiembre 12 de 2020.
</p>
<ul class="actions">
<li><a href="./datarodas/50.md.html" class="button">Memorias</a></li>
</ul>
</article>
<article>
<h3>Data Roda 49</h3>
<a href="./datarodas/49.md.html" class="image">
<img src="../../../../uv/docs/es/datarodas/49.jpg" alt="" /></a>
<p>
Agosto 29 de 2020.
</p>
<ul class="actions">
<li><a href="./datarodas/49.md.html" class="button">Memorias</a></li>
</ul>
</article>
<article>
<h3>Data Roda 48</h3>
<a href="./datarodas/48.html" class="image">
<img src="../../../../uv/docs/es/datarodas/48.jpg" alt="" /></a>
<p>
Agosto 15 de 2020.
</p>
<ul class="actions">
<li><a href="./datarodas/48.html" class="button">Memorias</a></li>
</ul>
</article>
</div>
</section>
</div>
</div>
<!-- Sidebar -->
<div id="sidebar">
<div class="inner">
<!-- Search -->
<section id="search" class="alt">
<form method="post" action="#">
<input type="text" name="query" id="query" placeholder="Buscar" />
</form>
</section>
<!-- Menu -->
<nav id="menu">
<header class="major">
<h2>Menu</h2>
</header>
<ul>
<li><a href="index.html">Portada</a></li>
<li><a href="#talleres">Talleres</a></li>
<li>
<span class="opener">Preliminares</span>
<ul>
<li><a href="acerca-de.html">Acerca de esta obra</a></li>
<li><a href="creditos.html">Créditos y colaboraciones</a></li>
<li><a href="convenciones.html">Convenciones de lectura y recomendaciones</a></li>
</ul>
</li>
<li>
<span class="opener">Brea</span>
<ul>
<li><a href="que-por-que.html">¿Qué es Brea y por qué existe?</a></li>
<li><a href="abrebocas.html">Abrebocas: El blog</a></li>
<li><a href="instalar.html">Instalación y actualización</a></li>
<li><a href="memoria.html">Memoria resiliente y distribuida</a></li>
<li><a href="personalizar.html">Personalizando sitios web a medida</a></li>
<li><a href="casos.html">Otros casos de uso: wiki, portafolio y tienda</a></li>
</ul>
</li>
<li><a href="futuros.html">Exploraciones Futuras</a></li>
<li>
<span class="opener">Licencias</span>
<ul>
<li><a href="p2pmas.html">P2P+</a></li>
<!--<li><a href="#">CC Atribución, No-Comercial, Sin derivados</a></li>-->
</ul>
<a href="#"></a>
</li>
<li>
<span class="opener">Anexos</span>
<ul>
<li><a href="instaladores.html">Instaladores y gestores de software</a></li>
<li><a href="hypothesis.html">Lectura anotada</a></li>
<li><a href="errores.html">Errores y soluciones</a></li>
<li><a href="ssb.html">Scuttlebut: protocolo y red social</a></li>
<li><a href="glosario.html">Glosario de términos</a></li>
</ul>
</li>
</ul>
</nav>
<!-- Section: Wiki-->
<section>
<header class="major">
<h2>Wiki</h2>
</header>
<ul class="contact">
<li class="icon solid fa-history">
<a href="../../../../timeline">Historial</a></li>
<li class="icon solid fa-folder">
<a href="../../../../dir?type=tree&ci=trunk">Archivos</a></li>
<li class="icon solid fa-download">
<a href="../../../../zip">Descargar</a></li>
<li class="icon solid fa-caret-up">
<a href="#">Inicio de página</a></li>
</ul>
<p>
</p>
</section>
<!-- Footer -->
<footer id="footer">
<p class="copyright">© Offray Vladimir Luna Cárdenas.
Algunos derechos reservados.
Web Design: <a href="https://html5up.net">HTML5 UP</a>
Hecho en <a href="https://mutabit.com/">mutabiT</a> y la
comunidad de <a href="https://mutabit.com/grafoscopio/">Grafoscopio</a>.
</p>
</footer>
</div>
</div>
</div>
<!-- Scripts -->
<script src="../../assets/js/jquery.min.js"></script>
<script src="../../assets/js/browser.min.js"></script>
<script src="../../assets/js/breakpoints.min.js"></script>
<script src="../../assets/js/util.js"></script>
<script src="../../assets/js/main.js"></script>
<script type="application/json" class="js-hypothesis-config">
{
"openSidebar": true
}
</script>
<script type="text/javascript">
// Based on: https://stackoverflow.com/questions/19385236/
var hypLoad = document.getElementById("hypLoad");
hypLoad.addEventListener("click",function(e) {
e.stopPropagation();
e.preventDefault();
var script = document.createElement('SCRIPT');
script.src="https://hypothes.is/embed.js";
document.getElementsByTagName('body')[0].appendChild(script);
});
</script>
<script>
fetch("../../info.json")
.then(function (response) {
return response.json();
})
/* .then(data => console.log(data)) */
.then(function(data) {
version(data);
});
function version(data){
document.getElementById("version").innerHTML = data.version;
console.log('version: ' + data.version)
}
</script>
<script>
let timelineURL = '../../../../json/timeline/checkin';
fetch(timelineURL)
.then(function (response) {
return response.json();
})
.then(function(data) {
revision(data);
});
function revision(data){
var commits = data.payload.timeline;
var leafs = commits.filter(function (item){
return (item.isLeaf == true)
});
var trunkLeaf = leafs.filter(function (item){
return (item.tags[0] == 'trunk')
});
var trunkLeafChecksum = trunkLeaf[0].uuid.slice(0, 10);
document.getElementById("checksum").innerHTML = trunkLeafChecksum;
var manifestLink = '../../../../artifact/' + trunkLeafChecksum;
document.getElementById("manifestLink").href = manifestLink;
console.log('revisionLink: ' + manifestLink)
}
</script>
</body>
</html>