Data Roda 53 > Indie Web: Desenmarañando y entretegiendo la Web 🤖

Continuaremos aprendiendo a usar y combinar Brea, Fossil, Grafoscopio y HTML5UP, entre otros, para crear nuestros propios sitios web autónomos personalizados de manera ágil y resiliente.

Las data rodas son talleres de aprendizaje y enseñanza recíprocas, que hacen puente entre distintas experticias y donde damos la bienvenida a personas novatas para hacer parte de la comunidad de Grafoscopio. Abordamos temáticas y proyectos prácticos y específicos y aprendemos mediante la práctica y el ejemplo, haciendo de la lectoescritura de código un saber/quehacer común, al alcance de más personas, que nos permite (re)apropiar y (re)configurar las tecnologías digitales, para que den cuenta de nuestras ideas, necesidades, inquietudes y voces. Los llevamos realizando desde 2016.

En esta edición, retomaremos asuntos de la Indie Web, relacionados con cómo podemos reapropiar nuestras presencias en línea, de manera que sean autónomas y empoderantes. Como es habitual, construiremos prototipos ágiles y resilientes usando lo que hemos denominado como infraestructuras de bolsillo: sencillas, auto-contenidas, locales primero y extensibles.

Prerrequisitos:

  • Conexión a Internet.
  • Computador con sistema operativo Windows 10 o posterior, Gnu/Linux o Mac.

Recomendable:

  • Tener la instalación de Brea completada.
  • Conocimientos sobre la terminal o consola de comandos.
  • Conocer algo sobre cómo usar docutopia y Markdown para crear documentación de nuestros talleres en la medida en que ocurren (o en "tiempo real"). Encontrarás algo al respecto de nuestras herramientas y metodologías en el proyecto Documentatón.

Si intentas previamente dichos procesos e incluso sigues otros apartes después de la instalación, podremos invertir nuestro tiempo en usar el software más que en instalarlo y/o podremos ayudarte con preguntas específicas que tengas al respecto.

Agenda:

  • Presentación del evento y les participantes.
    • Nosotres.
  • Guía breve de Bienvenida.
  • Recapitulación y dudas de contenidos previos para participantes recientes.
  • Retoma de contenidos actuales para participantes recurrentes:
    • Tecnologías en proceso y vocabularios futuros
    • Memoria resiliente y distribuida.
    • Actualización del software y las plantillas.
    • Personalización > Intro: Lenguajes de plantillas.

:::info A continuación un bosquejo de las notas y memorias parciales pre y post evento, que se iran complementando en la medida en que varias iteraciones del mismo vayan ocurriendo. Se están completando e integrando estas memorias luego en un libro / sitio web, que expone y encarna las ideas acá explicadas:

Bienvenida y presentación

Si se conecta alguien nuevo, hacemos este pedazo.

Tecnologías en proceso y vocabularios futuros

Casi siempre la acepción cultural popular de la tecnología es que se trata de productos terminados. Nuestra invitación es a verla en su caracter procesual e inacabada y hacernos partícipes de tales procesos. Vamos a ver un ejemplo puntual, que introducirá una actividad posterior, que es la de actualizar el software.

:::success

  • Realizar una lectura anotada de los principios organizativos de Brea.
  • Veremos como tales principios encarnan en el sitio de IndieWeb con Brea.
  • Revisaremos un problema en caliente que tienen la infraestructura actualmente.
  • Implementaremos parte de la solución (vocabularios futuros).
  • Actualizaremos el software.
  • Retomaremos el tema de publicación desde la solución parcial que actualizamos. :::

Lectura anotada

Ver acá.

Principios encarnados

El sitio de IndieWeb con Brea está hecho en Brea. Miremos cómo encarnan estos principios organizativos allí.

  • 1) Cercana al upstream y 2) sistema archivos como "base de datos"

    El tema está basado en Editorial. Así se ve el repositorio y así se ve el tema original (cercano al upstream):

    .

    Notamos que el tema original y el que está en el repositorio son muy similares.

  • 3) Proximidad y localidad La información relacionada está cercana: En la siguiente vista vemos cómo la documentación se organiza por idiomas y eventos (principio 2) por carpetas y cada archivo fuente en Markdown está cercano al archivo HTML producido a partir del primero

Playgrounds rápidos

Instalación y actualización rápida de temas

Descargar personalizaciones:

| repo |

repo := FossilRepo new remote: 'https://mutabit.com/repos.fossil/brea'.
repo downloadZippedInto: FileLocator temp.

Aplicar personalizaciones:

| origin zipFile destination blogFolder customizations |

origin := (FileLocator temp / 'brea.zip').
zipFile := (ZipArchive new readFrom: origin).
destination := FileLocator temp / 'brea'. 
destination ensureCreateDirectory.
zipFile extractAllTo: destination.
customizations := destination / 'customizations' / 'future-imperfect'.
blogFolder := FileLocator documents / 'IndieWeb/blog'.
customizations copyAllTo: blogFolder.
blogFolder.

Actualizar el parser de YAML:

 Metacello new
   baseline: 'PetitParser';
   repository: 'github://moosetechnology/PetitParser/src';
   load.

Retomando en blog

Supondremos que tenemos un repositorio local ya creado, con algunas entradas al blog y personalizado, como hemos dispuesto en el cápitulo de Memoria. Vamos a retomar a partir de ahí creando algunas consultas para la página principal.

  1. Nos ubicamos en la carpeta raíz del blog:

    cd ~/Documentos/IndieWeb/blog

  2. Vamos a agregar el índice o portada al repositorio:

    fossil add index.html
fossil commit -m  "Agregándo índice."

  3. Miremos la línea de tiempo:

  4. Vamos a ver la portada agregada. Para ello hacemos click en en el checkin y luego en el enlace index.html. Veremos un enlace como este

    http://localhost:8082/finfo?name=index.html&m=41b8c582222ff128

    Que quiere decir:

    • http://localhost:8082/: Mi repositorio local, en puerto particular (en este caso 8082, pero podría cambiar, dependiendo de cosas como cuántas otras vistas de repositorios tengamos desplegadas).
    • finfo?name=: La información de un archivo (finfo) cuyo nombre es (?name=)
    • index.html: el nombre del archivo.
    • &m=41b8c582222ff128: El momento en el cual quiero su información

    Cambiamos la partes de la URL, file?name= por doc/trunk, que quiere decir que vamos a ir de la información de un archivo a su vista previa en el tronco principal y quitamos todo lo que aparezca despúes del &. La nueva dirección quedaría así:

    http://localhost:8082/doc/trunk/index.html

Preguntas

  • Por que no se puede vincular hipotesis.is a la documentacion de las rodas??

    Una opcion rápida puede ser usar el enlace de publicación del documento para comentar, ejemplo: https://docutopia.tupale.co/s/dataroda53

    Si es la referida a las notas en caliente, esto tiene que ver con que hypothesis usa un plugin de JavaScript y su código es incompatible con el rendering o visualización que hace docutopia. Sin embargo, estas notas están siendo descargadas al repo y convertidas en Markdeep y tal formato sí es compatible con Hypothesis.

  • Se puede hacer un servicio de hipotesis en un servidor local??

    Hasta donde sé sí, pero no sé dónde está la información para la configuración de dicho servidor. Se pueden tener grupos privados y acceso a la información hospedada en el servidor de hypothesis, desde un API (Application Programming Interface), lo cual nos permite extraer dicha información a infraestructuras prpias.

  • se pueden recuperar los comentarios para restructurarlos en documetacion en servidor local???

    Si. Ver respuesta anterior.

  • Si se pudiera vincular hipotesis.is a la documentacion de la roda como se enteran los grafoscopios que la modifique pa que respondan mis preguntas???

    Cuando un usuario se registra y le contesta a algunos de sus comentarios, llegan notificaciones de la respuesta. Sin embargo no hay forma de seguir nuevas anotaciones a una obra a partir de su URL, habría que explorar si se puede vía el API. Por lo pronto la recomendación es compartir en enlace a las anotaciones en el grupo de Telegram