Skip to content
AM1 Lacabanne

Guía de montaje del TP Nº1 para la galería <la-piscine>

⚠️ IMPORTANTE: Nomenclatura de archivos y carpetas

Es de vital importancia que todos los nombres de carpetas y archivos que suban respeten el formato kebab-case. Esto significa:

  1. No usar espacios.
  2. No usar mayúsculas.
  3. No usar acentos ni tildes.
  4. No usar la letra ñ.
  5. No usar caracteres especiales, únicamente usar el guión medio - para separar palabras.

Ejemplo incorrecto y ejemplo correcto:

  • ❌ 2026 TP1 Pérez García Amparo
  • ✅ 2026-tp1-perez-garcia-amparo

Bloque 1. Crear la carpeta de tu proyecto

  1. Creá una carpeta en tu computadora para tu proyecto siguiendo esta estructura estricta: <año>-tp<n>-<apellido>-<nombre>.
  2. Por ejemplo, si te llamás Amparo Pérez García y estás entregando el TP 1 en 2026, tu carpeta debe llamarse: 2026-tp1-perez-garcia-amparo.

Bloque 2. Preparar los archivos del proyecto

Dentro de la carpeta que acabás de crear, deben existir obligatoriamente tres archivos:

1. thumbnail.webp

Esta es la miniatura de tu proyecto que aparecerá en el catálogo de la galería.

  • Tamaño obligatorio: Debe medir exactamente 360 píxeles de ancho por 360 píxeles de alto.
  • Podés hacer una captura de pantalla de tu sketch y recortarla/redimensionarla en Photoshop, GIMP o cualquier editor de imágenes asegurándote de que tenga esas dimensiones exactas antes de exportarla.
  • Exportación a WEBP: Si tu software de edición de imágenes no te permite guardar o exportar directamente en formato WEBP, podés usar herramientas online gratuitas y muy utilizadas por diseñadores para convertir tus archivos PNG o JPEG:

2. sketch.js (y otros recursos de código)

Este es el archivo principal de tu código en p5.js.

  • Debés asegurarte de vincular tu lienzo (canvas) a un contenedor específico llamado div-sketch en la función setup().
  • Ejemplo de código necesario: 
    function setup() {
      let canvas = createCanvas(512, 512); // Reemplazá con tus dimensiones
      canvas.parent('div-sketch'); // ESTA LÍNEA ES OBLIGATORIA
    }
  • Limpiá el código de console.log() que hayan quedado de pruebas.
  • Si tenés otros archivos .js o medios (imágenes, sonidos, videos, etc. que posiblemente uses para el TP2), dejalos también en la misma carpeta e incluí el código adicional dentro del mismo sketch.js para facilitar su carga.

3. statement.mdx

Este es el archivo central que contiene tu declaración de obra, tus textos bilingües y que además vincula tu sketch.js con la plataforma. Deberás crearlo en tu carpeta (por ejemplo desde vscode o con touch statement.mdx).

El archivo statement.mdx está dividido en tres partes fundamentales:

  1. El YAML front matter (metadatos, incluida la licencia de tu obra).
  2. El contenedor del sketch.
  3. Las versiones de idiomas (español e inglés).

A. El YAML front matter

Va al principio del archivo y va encerrado entre tres guiones ---. Contiene la información técnica de la obra. Aquí sí podés usar mayúsculas, espacios y acentos luego del nombre de la variable y los dos puntos (:), ya que son los datos que leerá el sistema para mostrar en pantalla.

---
author: Nombres y apellidos completos
title: Título de la Obra
date: YYYY-MM-DD
year: YYYY
cuatrimestre: primer cuatrimestre
thumbnail: thumbnail.webp
license: CC-BY-SA-4.0
dependencies:
  - p5.v2.3.3
  - p5.sound.v2.3.3
---

¿Qué significa cada variable?

  • author: Tu nombre y apellido completo (Ej: Raúl Federico Lacabanne).
  • title: El título de tu obra.
  • date: La fecha de publicación o entrega en formato año-mes-día (Ej: 2026-05-10).
  • year: El año de cursada en formato de cuatro dígitos (Ej: 2026).
  • cuatrimestre: En qué parte del año se cursó. Los únicos valores válidos son primer cuatrimestre o segundo cuatrimestre.
  • thumbnail: El nombre exacto de tu archivo de miniatura (Ej: thumbnail.webp).
  • license: (obligatorio) La licencia que elegís para tu obra. Los únicos valores válidos son CC-BY-SA-4.0, CC-BY-4.0, CC-BY-NC-SA-4.0 o all-rights-reserved. Leé con atención la sección siguiente antes de elegir.
  • dependencies: Un listado (con guiones) de las librerías que utiliza tu sketch. Podes usar versiones específicas como la versión actual 2 v2.3.3 o la versión anterior 1 p5.v1.11.13.

La licencia de tu obra (license)

Tu obra es tuya: los derechos de autor del código, los textos y las imágenes te pertenecen (Ley 11.723). Montarla en <la-piscine> no te obliga a ceder nada. Lo que sí tenés que hacer es decidir qué pueden hacer otras personas con ella y declararlo en el campo license del front matter.

Elegí una de estas cuatro opciones y escribila tal cual:

Escribí en license:Qué permitís a otras personas
CC-BY-SA-4.0 (sugerida por la cátedra)Copiar, modificar y usar tu obra, incluso con fines comerciales, siempre que te citen y que lo que hagan a partir de ella se comparta con esta misma licencia.
CC-BY-4.0Copiar, modificar y usar tu obra, incluso con fines comerciales, siempre que te citen.
CC-BY-NC-SA-4.0Lo mismo que CC-BY-SA-4.0, pero sin usos comerciales.
all-rights-reservedNada: la obra se exhibe en la galería, pero nadie puede reutilizarla sin tu permiso.

Exhibir no obliga a abrir: all-rights-reserved es una opción tan válida como las otras.

Ejemplos de cómo queda la línea en tu front matter, según la opción que elijas (escribí solo una):

license: CC-BY-SA-4.0          # Atribución-CompartirIgual (sugerida)
license: CC-BY-4.0             # Atribución
license: CC-BY-NC-SA-4.0       # Atribución-NoComercial-CompartirIgual
license: all-rights-reserved   # Todos los derechos reservados

Para tener en cuenta:

  • La licencia alcanza a toda la carpeta de tu obra, incluido el sketch.js: en esta galería, el código es la obra.
  • Sugerimos CC-BY-SA-4.0 porque comparte la lógica del código de la galería (que se publica bajo la licencia AGPLv3): lo que se recibe de lo común se devuelve a lo común.
  • Las licencias Creative Commons no se pueden revocar. Podés cambiar la licencia más adelante, pero quien ya haya obtenido tu obra bajo la licencia anterior puede seguir usándola en esas condiciones. Si dudás, podés empezar por all-rights-reserved y abrirla después: al revés no se puede.
  • Material de terceros: si usaste imágenes, sonidos, tipografías, videos o código que no son tuyos, tu licencia no los cubre. Mencioná en tu statement (por ejemplo, en la bibliografía) qué son, de quién y con qué licencia.
  • Si tu obra no declara el campo license, el sistema no la va a aceptar en la galería: el chequeo automático del Pull Request te va a avisar (ver Bloque 3).

Podés leer el texto completo de cada licencia en el sitio de Creative Commons: CC BY-SA 4.0, CC BY 4.0 y CC BY-NC-SA 4.0.

B. El contenedor del sketch

Debajo de los tres guiones de cierre --- del Front Matter, tenés que copiar y pegar este bloque exacto de código HTML, que se encargará de ejecutar tu sketch.js en la página:

<div id="div-sketch">
  <script type="text/javascript" src="sketch.js"></script>
</div>

C. Versiones de idiomas (ES y EN)

Por último, el contenido escrito de tu declaración debe estar en español y en inglés, envuelto en etiquetas especiales <Language>.

Tomá como referencia esta estructura y adaptá los textos con los tuyos (usando el formato de marcado Markdown para negritas **texto**, cursivas _texto_, etc.):

<Language code="es">
Breve descripción de la obra en español.


**Desarrollo técnico, estético y conceptual**


Texto del desarrollo en español.


**Bibliografía**


- APELLIDO, Nombre. (año). _"Título del libro"_. Ciudad: Editorial.


**Breve biografía**


Breve presentación tuya (estudiante) en español.
</Language>


<Language code="en">
Brief description of the work in english.


**Technical, aesthetic, and conceptual development**


Development text in english.


**Bibliography**


- LASTNAME, Firstname. (year). _"Book title"_. City: Publisher.


**Brief resume**


Brief presentation of yourself (student) in english.
</Language>

Bloque 3. Subir tu obra a GitHub

Nota: Los pasos para realizar el Fork, Branch y Pull Request siguen vigentes según las clases.

  1. Ingresá a GitHub y asegurate de hacer un fork de knnv-ar/la-piscine.
  2. Creá una nueva rama (branch) con los siguientes datos separados por un guión medio (-): branch, el año de cursada, el número de tp, tus apellidos, y tus nombres. Debe quedar una cadena de texto como el siguiente ejemplo: branch-2026-tp1-perez-garcia-amparo.
  3. Navegá en tu repositorio hasta la carpeta _projects/.
  4. Arrastrá allí la carpeta completa que creaste (ej. 2026-tp1-perez-garcia-amparo).
  5. Hacé el commit y luego un Pull Request para que tu TP sea aceptado en la galería.

Completar la plantilla del Pull Request

Al abrir el Pull Request, GitHub te va a mostrar una plantilla con casillas para marcar. Completala:

  1. Marcá las casillas de archivos (sketch, statement, miniatura y nombres en kebab-case).
  2. Marcá la declaración de autoría.
  3. Marcá la misma licencia que escribiste en el campo license de tu statement.mdx.
  4. Indicá si usaste material de terceros y, si es así, detallalo (qué es, autor/a, fuente y licencia).

El chequeo automático de licencia

Cuando abrís el Pull Request se ejecuta un chequeo automático que verifica tu licencia:

  • ✅ En verde: la licencia está bien declarada.
  • ❌ En rojo: falta el campo license o tiene un valor que no está en la lista. Leé el mensaje, que explica qué corregir, corregí el statement.mdx en tu rama y el chequeo se vuelve a ejecutar solo.

Nota: la primera vez que contribuís al repositorio, el chequeo puede quedar en espera hasta que el equipo docente lo apruebe. Es una medida de seguridad de GitHub para cuentas nuevas.

Luego, como siempre, revisaremos juntos tu Pull Request en clase.

¡Felicitaciones por llegar hasta acá y ser parte de <la-piscine> v3!