{
"notebooks": [
{
"id": 1,
"name": "Ideas",
"color": "#000000",
"links": [
5,
8,
6
]
},
{
"id": 2,
"name": "Proyectos",
"color": "#800000",
"links": [
5,
18
]
},
{
"id": 5,
"name": "Scripts",
"color": "#008000",
"links": [
1,
2,
8
]
},
{
"id": 6,
"name": "Politica",
"color": "#FF0000",
"links": [
1,
8
]
},
{
"id": 8,
"name": "IA",
"color": "#000080",
"links": [
1,
6,
5
]
},
{
"id": 18,
"name": "Tareas",
"color": "#800080",
"links": [
2
]
},
{
"id": 23,
"name": "Mis textos",
"color": "#4A90D9"
}
],
"notes": {
"1": {
"id": 1,
"notebookId": 1,
"title": "Bienvenida",
"author": "Sistema",
"content": "# ¡Bienvenido a Libretas de Notas!\n\nEste es un sistema de gestión de notas personales con soporte para **Markdown**.\n\n## Características:\n\n- 📝 Notas en formato Markdown\n- 🏷️ Etiquetas organizativas\n- 🔍 Búsqueda global\n- 💾 Exportación/Importación JSON\n- 📄 Exportación individual a .md\n\n---\n\n- [ ] aaa\n- [ ] bbb\n\n> \"La simplicidad es la máxima sofisticación\" — Leonardo da Vinci",
"tags": [
"bienvenida",
"importante",
"nota"
],
"createdAt": 1774872947748,
"updatedAt": 1774873525600
},
"4": {
"id": 4,
"notebookId": 2,
"title": "Más notas",
"author": "DHB",
"tags": [
"nota",
"urgente",
"readme"
],
"content": "# Mi Kanban\n\n[🇬🇧 English version](README_EN.md)\n\n   \n\n---\nTablero Kanban personal que funciona completamente en el navegador, sin servidor ni base de datos. Todos los datos se guardan localmente en el dispositivo, pudiendo exportar a un archivo .json. \n¡SÓLO TRES ARCHIVOS! (115kb) \nPodés subir los archivos a tu servidor o usarlo desde tu PC, localmente. O ambas cosas a la vez.\n\n---\n\n## Requisitos\n\n- Navegador moderno (Firefox, Brave, Chrome, Pale Moon)\n- Los siguientes archivos deben estar en el mismo directorio:\n - `index.html`\n - `marked.min.js` (v9.x recomendada)\n - `tucan.png`\n - `README.md - opcional, incrustado en index.html`\n\n---\n\n## Estructura del tablero\n\nEl tablero se organiza en **columnas** que contienen **tareas**. Cada tarea puede tener **notas** con formato Markdown.\n\n### Columnas\n\n- Se crean desde el menú lateral (☰)\n- Se pueden **renombrar** haciendo doble clic en el nombre de la columna\n- Se pueden eliminar con el botón 🗑️ del encabezado\n- Al eliminar una columna se eliminan también sus tareas\n- Cada columna muestra un **contador** con la cantidad de tareas visibles\n- El color de cada columna es **personalizable** con una paleta de 8 colores (botón 🎨 en el encabezado de la columna). El color elegido se guarda en el JSON y persiste entre sesiones.\n- El botón ➕ en el encabezado abre un modal para agregar una tarea directamente a esa columna\n\n### Tareas\n\n- Se crean desde el menú lateral o con el botón ➕ de cada columna\n- Se pueden mover entre columnas arrastrando (escritorio) o con pulsación larga (~400ms) en móvil\n- Se pueden **reordenar dentro de la misma columna** arrastrando una tarea sobre otra\n- Admiten **etiquetas** separadas por comas para clasificarlas\n- Las etiquetas con nombres reservados tienen estilo visual especial automático:\n - `urgente` / `urgent` → texto blanco sobre fondo rojo\n - `importante` / `important` → texto amarillo sobre fondo verde\n- Admiten una **fecha de vencimiento** con indicador de color:\n - 🟢 Verde: vence hoy o en más de 3 días\n - 🟡 Amarillo: vence en 1 a 3 días\n - 🔴 Rojo: vencida\n- Se editan con el botón ✎ y se eliminan con 🗑️\n\n### Notas\n\n- Cada tarea puede tener múltiples notas con contenido en **Markdown**\n- Las notas se muestran colapsadas bajo la tarea y se expanden al hacer clic en su título\n- Cada nota guarda su **fecha de creación**, que se muestra junto al título\n- Al guardar una nota aparece un **aviso de confirmación** (o de error si el contenido está vacío)\n- El modal de edición permanece abierto tras guardar, para continuar editando\n\n---\n\n## Búsqueda y filtros\n\n- El campo de búsqueda en el encabezado filtra en tiempo real por título, etiquetas y contenido de notas\n- Hacer clic en una etiqueta filtra todas las tareas que la compartan\n- Cuando hay un filtro activo, se muestra una **barra indicadora** debajo del encabezado con el filtro aplicado y un botón ✕ para quitarlo\n- Al filtrar, las columnas sin resultados **se ocultan** automáticamente\n- Ambos filtros (búsqueda y etiqueta) son acumulables\n\n---\n\n## Editor de Markdown\n\nLa barra de herramientas del editor de notas incluye:\n\n| Botón | Función |\n| :--- | :--- |\n| Hn | Encabezados H1, H2, H3 |\n| B | Negrita (`**texto**`) |\n| *I* | Cursiva (`*texto*`) |\n| Cód | Bloque de código (` ``` `) |\n| ` | Código inline |\n| List | Lista con viñetas (`- item`) |\n| ☐ | Checklist (`- [ ] item` / `- [x] item`) |\n| \" | Cita (`> texto`) |\n| 🔗 | Link (`[texto](url)`) |\n| ⊞ | Tabla con plantilla de 3 columnas |\n| — | Separador horizontal (`---`) |\n\n### Tablas\n\nLa plantilla insertada por ⊞ incluye la línea de separadores con alineación:\n\n```\n| Col1 | Col2 | Col3 |\n| :--- | :---: | ---: |\n| izq | centro | der |\n```\n\n> La línea de separadores (`| --- |`) es obligatoria. Sin ella el texto no se renderiza como tabla.\n\n### Checklists\n\n```\n- [ ] Tarea pendiente\n- [x] Tarea completada\n```\n\nLos ítems completados se muestran en verde. El estado se cambia editando la nota.\n\n---\n\n## Backup\n\nDesde la sección **Backup** del menú lateral:\n\n- **Exportar JSON**: descarga un archivo con todos los datos del tablero, con marca de tiempo en el nombre\n- **Importar JSON**: carga un backup previamente exportado, reemplazando los datos actuales\n\n> Se recomienda exportar regularmente. Los datos se guardan en el `localStorage` del navegador y pueden perderse si se borra el historial o la caché.\n\n---\n\n## Notas técnicas\n\n- Sin dependencias externas en tiempo de ejecución (todo local)\n- Markdown renderizado por [marked.js](https://marked.js.org/) v9.x con soporte GFM completo\n- Compatible con Firefox, Brave, Chrome y Pale Moon\n- El drag & drop en móvil usa pulsación larga (~400ms) para no interferir con el scroll\n- Los datos persisten en localStorage con un wrapper de compatibilidad para Pale Moon\n- La Content Security Policy bloquea explícitamente conexiones de red externas\n\nLa idea detrás del uso de localStorage con la capacidad de exportar e importar en formato .json es facilitar la portabilidad sin depender de servidores o backends complejos: el localStorage actúa como almacenamiento de trabajo inmediato, mientras que el archivo .json es el mecanismo de persistencia real a largo plazo.\n\n---\n**Problema con Pale Moon (archivo local)**: al cargar la página puede producirse un intento de conexión a direcciones internas (como 0.0.0.2). Es un comportamiento del navegador, no de la aplicación, y no afecta el funcionamiento ni la privacidad. No ocurre al acceder desde un servidor web.\n\n---\n\n## Ideas\n\n- 📂 Podés crear backups en carpetas específicas para distintos proyectos y así tener varios proyectos en desarrollo y a mano.\n- 📄 Podés crear columnas para notas de distinto carácter.\n- 🗃️️ Podés usar Dropbox o Google Drive para sincronizar tus datos estés donde estés.\n- Para las columnas: Ideas, En progreso, Finalizadas, Descartadas, Notas, etc.\n\n---\n\n## Créditos\n\n**Código y desarrollo**\nClaude Sonnet (Anthropic) — arquitectura, implementación, corrección de bugs y compatibilidad cross-browser\n\n**Diseño, concepto y dirección**\n[Daniel Horacio Braga](https://orquidealucinada.net) — diseño visual, definición de funcionalidades, testing en múltiples plataformas (Firefox, Brave, Pale Moon, móvil), y feedback iterativo\n\n**Dependencias**\n- [marked.js](https://marked.js.org/) — parser de Markdown, licencia MIT\n\n---\n\n## Licencia\n\n**Mi Kanban** — Copyright © 2026 [Daniel Horacio Braga](https://orquidealucinada.net)\n\nEste programa es software libre: podés redistribuirlo y/o modificarlo bajo los términos de la **Licencia Pública General de GNU (GPL)**, versión 3 o posterior, publicada por la Free Software Foundation.\n\nEste programa se distribuye con la esperanza de que sea útil, pero **SIN NINGUNA GARANTÍA**; sin siquiera la garantía implícita de COMERCIABILIDAD o IDONEIDAD PARA UN PROPÓSITO PARTICULAR. Consulte la Licencia Pública General de GNU para más detalles.\n\nDeberías haber recibido una copia de la Licencia Pública General de GNU junto con este programa. Si no, consultá [https://www.gnu.org/licenses/](https://www.gnu.org/licenses/).\n\n> Nota: la licencia GPL aplica al código fuente de **Mi Kanban**. La librería **marked.js** se distribuye bajo su propia licencia MIT, que es compatible con GPL.\n\n## Video\n\n| Demo 1 | Demo 2 |\n|--------|--------|\n| \n\n**Hecho con ❤️ y Python**\n\n*Última actualización: Enero 2026*\n\n
\n\n---\n\n## fff (25/02/26)\n\n- [x] qqq\n- [ ] ffff\n- [ ] jjjj\n- [x] llll\n\n---\n\n\n\n---\n\n# Completado\n\n# Webkb 1.1\n**Tags:** webkb, kanban, importante\n\n## Cambios en la versión 1.1 (23/02/26)\n\n# v1.1\n* Tema oscuro y mejoras de interfaz\n* Nuevo tema oscuro basado en #1b1b1b\n* Toggle ☀️/🌙 para alternar entre tema claro y oscuro (preferencia guardada)\n* Sidebar más compacta\n* Columnas centradas en el tablero\n\nAgregar maximizar columna\n\n---\n\n## Descripción (25/02/26)\n\n# Algo más\nsdxkcm avljkdaf vjsbfv spifgjbv spfigb wbgfb\n\n---\n\n\n# Webkb 1.0\n**Tags:** webkb, kanban, web\n\n## Webkb 1.0 (23/02/26)\n\n# Mi Kanban\n\n   \n\n---\nTablero Kanban personal que funciona completamente en el navegador, sin servidor ni base de datos. Todos los datos se guardan localmente en el dispositivo, pudiendo exportar a un archivo .json. \n¡SÓLO TRES ARCHIVOS! (90kb) \nPodés subir los archivos a tu servidor o usarlo desde tu PC, localmente. O ambas cosas a la vez.\n\n---\n\n## Requisitos\n\n- Navegador moderno (Firefox, Brave, Chrome, Pale Moon)\n- Los siguientes archivos deben estar en el mismo directorio:\n - `index.html`\n - `marked.min.js` (v9.x recomendada)\n - `tucan.png`\n - `README.md - opcional, incrustado en index.html`\n\n---\n\n## Estructura del tablero\n\nEl tablero se organiza en **columnas** que contienen **tareas**. Cada tarea puede tener **notas** con formato Markdown.\n\n### Columnas\n\n- Se crean desde el menú lateral (☰)\n- Se pueden eliminar con el botón 🗑️ del encabezado\n- Al eliminar una columna se eliminan también sus tareas\n- Cada columna muestra un **contador** con la cantidad de tareas visibles\n- El color de cada columna es **personalizable** con una paleta de 8 colores (botón 🎨 en el encabezado de la columna). El color elegido se guarda en el JSON y persiste entre sesiones.\n\n### Tareas\n\n- Se crean desde el menú lateral eligiendo la columna destino\n- Se pueden mover entre columnas arrastrando (escritorio) o con pulsación larga (~400ms) en móvil\n- Se pueden **reordenar dentro de la misma columna** arrastrando una tarea sobre otra\n- Admiten **etiquetas** separadas por comas para clasificarlas\n- Las etiquetas con nombres reservados tienen estilo visual especial automático:\n - `urgente` / `urgent` → texto blanco sobre fondo rojo\n - `importante` / `important` → texto amarillo sobre fondo verde\n- Se editan con el botón ✎ y se eliminan con 🗑️\n\n### Notas\n\n- Cada tarea puede tener múltiples notas con contenido en **Markdown**\n- Las notas se muestran colapsadas bajo la tarea y se expanden al hacer clic en su título\n- Cada nota guarda su **fecha de creación**, que se muestra junto al título\n- Al guardar una nota aparece un **aviso de confirmación** (o de error si el contenido está vacío)\n- El modal de edición permanece abierto tras guardar, para continuar editando\n\n---\n\n## Búsqueda y filtros\n\n- El campo de búsqueda en el encabezado filtra en tiempo real por título, etiquetas y contenido de notas\n- Hacer clic en una etiqueta filtra todas las tareas que la compartan\n- Cuando hay un filtro activo, se muestra una **barra indicadora** debajo del encabezado con el filtro aplicado y un botón ✕ para quitarlo\n- Al filtrar, las columnas sin resultados **se ocultan** automáticamente\n- Ambos filtros (búsqueda y etiqueta) son acumulables\n\n---\n\n## Editor de Markdown\n\nLa barra de herramientas del editor de notas incluye:\n\n| Botón | Función |\n| :--- | :--- |\n| Hn | Encabezados H1, H2, H3 |\n| B | Negrita (`**texto**`) |\n| *I* | Cursiva (`*texto*`) |\n| Cód | Bloque de código (` ``` `) |\n| ` | Código inline |\n| List | Lista con viñetas (`- item`) |\n| ☐ | Checklist (`- [ ] item` / `- [x] item`) |\n| \" | Cita (`> texto`) |\n| 🔗 | Link (`[texto](url)`) |\n| ⊞ | Tabla con plantilla de 3 columnas |\n| — | Separador horizontal (`---`) |\n\n### Tablas\n\nLa plantilla insertada por ⊞ incluye la línea de separadores con alineación:\n\n```\n| Col1 | Col2 | Col3 |\n| :--- | :---: | ---: |\n| izq | centro | der |\n```\n\n> La línea de separadores (`| --- |`) es obligatoria. Sin ella el texto no se renderiza como tabla.\n\n### Checklists\n\n```\n- [ ] Tarea pendiente\n- [x] Tarea completada\n```\n\nLos ítems completados se muestran en verde. El estado se cambia editando la nota.\n\n---\n\n## Backup\n\nDesde la sección **Backup** del menú lateral:\n\n- **Exportar JSON**: descarga un archivo con todos los datos del tablero, con marca de tiempo en el nombre\n- **Importar JSON**: carga un backup previamente exportado, reemplazando los datos actuales\n\n> Se recomienda exportar regularmente. Los datos se guardan en el `localStorage` del navegador y pueden perderse si se borra el historial o la caché.\n\n---\n\n## Notas técnicas\n\n- Sin dependencias externas en tiempo de ejecución (todo local)\n- Markdown renderizado por [marked.js](https://marked.js.org/) v9.x con soporte GFM completo\n- Compatible con Firefox, Brave, Chrome y Pale Moon\n- El drag & drop en móvil usa pulsación larga (~400ms) para no interferir con el scroll\n- Los datos persisten en `localStorage` con un wrapper de compatibilidad para Pale Moon\n- La Content Security Policy bloquea explícitamente conexiones de red (`connect-src 'none'`)\n\n---\n\n## Ideas\n\n- 📂 Podés crear backups en carpetas específicas para distintos proyectos y así tener varios proyectos en desarrollo y a mano.\n- 📄 Podés crear columnas para notas de distinto carácter.\n- 🗃️️ Podés usar Dropbox o Google Drive para sincronizar tus datos estés donde estés.\n- Para las columnas: Ideas, En progreso, Finalizadas, Descartadas, Notas, etc.\n\n---\n\n## Créditos\n\n**Código y desarrollo**\nClaude Sonnet (Anthropic) — arquitectura, implementación, corrección de bugs y compatibilidad cross-browser\n\n**Diseño, concepto y dirección**\n[Daniel Horacio Braga](https://orquidealucinada.net) — diseño visual, definición de funcionalidades, testing en múltiples plataformas (Firefox, Brave, Pale Moon, móvil), y feedback iterativo\n\n**Dependencias**\n- [marked.js](https://marked.js.org/) — parser de Markdown, licencia MIT\n\n---\n\n## Licencia\n\n**Mi Kanban** — Copyright © 2026 [Daniel Horacio Braga](https://orquidealucinada.net)\n\nEste programa es software libre: podés redistribuirlo y/o modificarlo bajo los términos de la **Licencia Pública General de GNU (GPL)**, versión 3 o posterior, publicada por la Free Software Foundation.\n\nEste programa se distribuye con la esperanza de que sea útil, pero **SIN NINGUNA GARANTÍA**; sin siquiera la garantía implícita de COMERCIABILIDAD o IDONEIDAD PARA UN PROPÓSITO PARTICULAR. Consulte la Licencia Pública General de GNU para más detalles.\n\nDeberías haber recibido una copia de la Licencia Pública General de GNU junto con este programa. Si no, consultá [https://www.gnu.org/licenses/](https://www.gnu.org/licenses/).\n\n> Nota: la licencia GPL aplica al código fuente de **Mi Kanban**. La librería **marked.js** se distribuye bajo su propia licencia MIT, que es compatible con GPL.\n\n---\n\n\n# 📅 Calendario Personal\n**Tags:** web, calendaio\n**Vencimiento:** 2024-02-01\n\n## 📅 Calendario Personal (23/02/26)\n\n# 📅 Calendario Personal Web\n\n\nUna aplicación web de calendario interactivo que permite agregar, editar y eliminar eventos diarios mediante una interfaz clara, adaptada para escritorio y dispositivos móviles.\n\n## ✨ Características\n\n- Visualización mensual con navegación entre meses.\n- Interfaz limpia, con colores suaves y adaptativa para pantallas pequeñas.\n- Posibilidad de:\n - Agregar eventos con título y descripción.\n - Editar o eliminar eventos existentes.\n - Ver descripciones mediante tooltips al pasar el mouse o tocar.\n- Modal de selección rápida de mes y año.\n- Almacenamiento de eventos en el servidor (formato JSON).\n\n## 🛠 Archivos principales\n\n| Archivo | Descripción |\n|-----------------|-------------------------------------------------------------|\n| `index.html` | Interfaz de usuario y lógica VIDEO \n\n```\n\nReplace `VIDEO_ID` with the characters after `v=` in the video URL.\n\n## Preview\n\n- Interactive **checklists** (checking/unchecking saves the change)\n \n- **Markdown tables** with borders and alternating rows\n \n- **Metadata** collapsible on mobile (▶ Metadatos button)\n \n- Click tag → filter; click notebook name → go to that notebook\n \n- The 📌 button pin/unpin the note. Fixed notes appear on the home screen.\n \n- Links to other notes (📎) are shown in amber; clicking one opens the linked note. If the linked note was deleted, the link appears struck through in gray.\n \n- In **Metadatos**, the **Enlaces entrantes** (incoming links) row lists the notes that link to the current one (Notebook › Title); click to open them.\n \n\n## Filters & Search\n\n- **Search**: Searches **all notes** (title, author, content, tags)\n \n- 🏷️: The button next to the search opens a dropdown with all the tags to filter globally.\n \n- **Tags**: Filter globally across all notebooks\n \n- **Active notebook**: Only filters the view when no search or tag filter is active\n \n- **View all**: Clears notebook filter\n \n\n## Linked Notebooks (🔗)\n\n**💡 What is the purpose of linking notebooks?** \nLinking two or more notebooks creates a thematic or structural relationship between them. It is not just a tag; it is a way to group sets of notes that belong to the same project, idea, or context.\n\n**Practical examples:**\n\n- If you have a notebook \"Poems\" and another \"Drafts of poems\", linking them allows you to see, from any note in \"Poems\", all notes in \"Drafts\" (and vice versa).\n \n- A writing project: notebooks \"Research\", \"Characters\", \"Chapters\". Link them to have a unified view.\n \n- A personal journal: notebooks \"2023\", \"2024\", \"Reflections\". When linked, the 🔗 badge on any note will show you notes from all three.\n \n\n**Technical behavior:**\n\n- Links are **bidirectional**: if you link A with B, B automatically becomes linked with A.\n \n- Clicking the 🔗 badge that appears on notes belonging to linked notebooks opens a special **grouped view**: all notes from the current notebook are shown, followed by notes from each linked notebook, each group with its colored header. You can add new notes to any group from that same view.\n \n- There is no limit on how many notebooks you can link.\n \n\n**Usage tip:** Use links to build **broader working contexts** that go beyond a single notebook, without losing separate organization.\n\n## Links Between Notes (📎)\n\nThe **📎** button in the editor toolbar opens a picker with all notes, grouped by notebook and searchable. Choosing one inserts a link of the form `[Title](nota:ID)` into the text. If you had text selected, that text becomes the link label.\n\n- The link uses the note's **ID**, not its title: it keeps working even if you rename the note.\n \n- If the linked note is deleted, the link is shown struck through in gray.\n \n- When a note is exported to `.md`, the link appears as `nota:ID` and only works inside this application.\n \n\n## Notes Map (🗺️)\n\nFrom the sidebar, **🗺️ Notes Map** opens `grafo.html` in the same tab. It is an interactive map where each note is a node and all its connections are visible. It is **read-only**: it never modifies your notes.\n\n**⚠️ Where the Map gets its data:**\n\n- **On the web (server):** if `index.html` and `grafo.html` are on the same site (exact same address), the map reads the application's notes **automatically** and updates by itself when you save changes. Nothing needs to be loaded. The first time in a given browser, import your backup in the application (💾 Backup → Import JSON); from then on the map sees it with no extra steps.\n \n- **On desktop (local files):** browsers usually do not share storage between files opened from disk, so the map appears empty. You must **load the `.json` manually**: export a backup from the application (💾 Backup → Export JSON) and, in the map, use **📂 Cargar JSON** (Load JSON). In this mode the map **does not update by itself**: after editing notes, export again and reload the file.\n \n\n**What you see:**\n\n- **Notes**: circles colored by notebook; the more links a note has, the larger it is. Pinned notes 📌 have an amber border.\n \n- **Notebooks**: large circles with a ring. **Tags**: gray diamonds (only tags used by 2 or more notes).\n \n- **Lines**: links between notes (amber, with arrow), notebook membership, linked notebooks (dashed violet), and tags (dotted gray).\n \n\n**How to use it:**\n\n- Dragging the background pans the view; the mouse wheel zooms. Dragging a node moves it and pins it in place; **📌 Soltar fijados** (Release pinned) frees them.\n \n- Hovering over a node highlights its neighbors. Clicking opens a side panel with the rendered note and its outgoing and incoming links; the **Abrir en el principal** (Open in main app) button opens the note in the application.\n \n- The header buttons show or hide each type of connection, and the legend lets you hide notebooks.\n \n- The search box highlights matches in titles, tags, and text; Enter jumps to the first one and, pressed again, to the following ones.\n \n- To return to the application, you can use the **← Notas** (Notes) button in the map header.\n \n\n## Special Tags\n\n- `urgente` → red\n \n- `importante` → green\n \n\n## Backup & Data\n\n- **Export JSON**: Download full backup\n \n- **Import JSON**: Restore from backup\n \n- **Leave alert**: If there are unsaved changes, closing the page offers a backup\n \n- **⚠️ Delete All**: Clears all data (with confirmation)\n \n\n## Themes\n\nThe ☀️/🌙 button toggles dark/light theme. Preference is saved.\n\n----------\n\n## Authorship\n\n- Conception, original idea, feature definition, iterative development direction, testing, and aesthetic judgment: Daniel Horacio Braga\n- Code writing (HTML, CSS, JavaScript) through AI-assisted development conversations: Claude (Anthropic) — [https://www.anthropic.com](https://www.anthropic.com)\n\n----------\n\n## License\n\nThis project is distributed under the [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0.html).\n",
"createdAt": 1777735634063,
"updatedAt": 1790887246493,
"pinned": false
},
"31": {
"id": 31,
"notebookId": 2,
"title": "Notebook README es 🇦🇷",
"author": "DHB",
"tags": [
"readme",
"script"
],
"content": "# 📚 Libretas de Notas — Versión 2.0\n\nSistema de gestión de notas con libretas virtuales, editor Markdown, etiquetas, búsqueda global, enlaces entre notas, mapa de conexiones y exportación JSON.\n\nSin backend para facilitar el uso y la portabilidad, guarda los datos en el localStorage del navegador, pudiendo exportar todo el contenido a un archivo .json con fecha y hora en el nombre del archivo.\n\nEl sistema consta de tres archivos: `index.html` (la aplicación), `marked.min.js` y `grafo.html` (el **Mapa de notas**, opcional). Se incluye una copia local de `marked.min.js` para poder renderizar Markdown sin necesidad de conexión a internet. Los tres deben estar en la misma carpeta.\n\n## Novedades de la versión 2.0\n\n- **📎 Enlaces entre notas**: desde el editor se puede insertar un enlace a otra nota, elegida entre todas las notas agrupadas por libreta.\n \n- **Enlaces entrantes**: en los metadatos de cada nota se listan las notas que la enlazan.\n \n- **🗺️ Mapa de notas**: vista interactiva que muestra cómo se conectan las notas, las libretas y las etiquetas (archivo `grafo.html`). **En escritorio hay que cargar el `.json` manualmente; en la web se carga automáticamente** (ver la sección _Mapa de notas_).\n \n\n## Pantalla de inicio\n\nAl abrir la app o hacer clic en el título \"📚 Libretas de Notas\" se muestra la **pantalla de inicio** con todas las libretas en una grilla visual. Hacé clic en cualquier libreta para ver sus notas, o usá el botón **+** para crear una nueva.\n\nLas notas fijadas 📌 aparecen arriba de todo, antes de las libretas. Hacé clic en una para abrir su preview.\n\n## Sidebar (☰)\n\nEl botón ☰ abre el panel lateral con:\n\n- **➕ Nueva Libreta**: Crear libretas con nombre personalizado\n- **🗺️ Mapa de notas**: Abre el mapa de conexiones (en la misma pestaña)\n- **💾 Backup**: Exportar e importar datos en JSON\n- **📖 README**: Este manual\n\n## Libretas\n\nCada libreta tiene botones para cambiar color (paleta de 16 colores), enlazar con otras (🔗), renombrar (✎) y eliminar (🗑).\n\n## Notas\n\nLas tarjetas muestran título, autor, libreta, fechas, tamaño y etiquetas. Clic en tarjeta → abre preview. El botón **+** grande crea una nueva nota en la libreta activa.\n\n## Editor\n\nBarra de herramientas: **Hn** (encabezados H1–H3), **B** (negrita), **I** (cursiva), **Cód** (bloque), **`** (inline), **List**, **☐** (checklist), **\"** (cita), **🔗** (enlace), **📎** (enlace a otra nota), **🖼️** (imagen URL), **—** (separador).\n\nTambién podés importar archivos .md (con o sin frontmatter YAML) y exportar como .md.\n\n## Videos de YouTube\n\nUsá el iframe de embed directamente en el Markdown:\n\n```\nVIDEO \n\n```\n\nReemplazá `ID_VIDEO` con los caracteres que aparecen después de `v=` en la URL del video.\n\n## Vista previa\n\n- **Checklists** interactivos (marcar/desmarcar guarda el cambio)\n \n- **Tablas Markdown** con bordes y filas diferenciadas\n \n- **Metadatos** contraíbles en móvil (botón ▶ Metadatos)\n \n- Clic en etiqueta → filtra; clic en libreta → va a esa libreta\n \n- El botón 📌 fija/desfija la nota. Las notas fijadas aparecen en la pantalla de inicio.\n \n- Los enlaces a otras notas (📎) se ven en ámbar; al hacer clic abren la nota enlazada. Si la nota enlazada fue eliminada, el enlace aparece tachado en gris.\n \n- En **Metadatos**, la fila **Enlaces entrantes** lista las notas que enlazan a la actual (Libreta › Título); un clic las abre.\n \n\n## Filtros y búsqueda\n\n- **Búsqueda**: Busca en **todas las notas** (título, autor, contenido, etiquetas)\n \n- 🏷️: El botón al lado de la búsqueda abre un dropdown con todas las etiquetas para filtrar globalmente.\n \n- **Etiquetas**: Filtran globalmente\n \n- **Libreta activa**: Solo filtra la vista cuando no hay búsqueda ni etiqueta activa\n \n- **Ver todas**: Desactiva el filtro de libreta\n \n\n## Libretas enlazadas (🔗)\n\n**💡 ¿Para qué sirve enlazar libretas?** \nEnlazar dos o más libretas crea una relación temática o estructural entre ellas. No es una simple etiqueta: es una forma de agrupar conjuntos de notas que pertenecen a un mismo proyecto, idea o contexto.\n\n**Ejemplos prácticos:**\n\n- Si tienes una libreta \"Poemas\" y otra \"Borradores de poemas\", al enlazarlas podrás ver, desde cualquier nota de \"Poemas\", también todas las notas de \"Borradores\" (y viceversa).\n \n- Un proyecto de escritura: libretas \"Investigación\", \"Personajes\", \"Capítulos\". Enlázalas para tener una vista unificada.\n \n- Un diario personal: libretas \"2023\", \"2024\", \"Reflexiones\". Al enlazarlas, el badge 🔗 en cualquier nota te mostrará las notas de las tres.\n \n\n**Comportamiento técnico:**\n\n- Los enlaces son **bidireccionales**: si enlazas A con B, automáticamente B queda enlazada con A.\n \n- Al hacer clic en el badge 🔗 que aparece en las notas pertenecientes a libretas enlazadas, se abre una **vista agrupada** especial: se muestran todas las notas de la libreta actual, seguidas de las notas de cada libreta enlazada, cada grupo con su cabecera de color. Puedes añadir nuevas notas a cualquier grupo desde esa misma vista.\n \n- No hay límite de cuántas libretas puedes enlazar.\n \n\n**Consejo de uso:** Usa los enlaces para construir **contextos de trabajo** más amplios que una sola libreta, sin perder la organización por separado.\n\n## Enlaces entre notas (📎)\n\nEl botón **📎** de la barra del editor abre un selector con todas las notas, agrupadas por libreta y con buscador. Al elegir una, se inserta en el texto un enlace con la forma `[Título](nota:ID)`. Si tenías texto seleccionado, ese texto pasa a ser la etiqueta del enlace.\n\n- El enlace usa el **ID** de la nota, no su título: sigue funcionando aunque le cambies el nombre.\n \n- Si la nota enlazada se elimina, el enlace queda tachado en gris.\n \n- Al exportar una nota a `.md`, el enlace sale como `nota:ID` y solo funciona dentro de esta aplicación.\n \n\n## Mapa de notas (🗺️)\n\nDesde el sidebar, **🗺️ Mapa de notas** abre `grafo.html` en la misma pestaña. Es un mapa interactivo donde cada nota es un nodo y se ven todas sus conexiones. Es de **solo lectura**: nunca modifica tus notas.\n\n**⚠️ De dónde toma los datos el Mapa:**\n\n- **En la web (servidor):** si `index.html` y `grafo.html` están en el mismo sitio (misma dirección exacta), el mapa lee **automáticamente** las notas de la aplicación y se actualiza solo cuando guardás cambios. No hay que cargar nada. La primera vez en un navegador, importá tu backup en la aplicación (💾 Backup → Importar JSON); desde ahí el mapa lo ve sin pasos extra.\n \n- **En escritorio (archivos locales):** los navegadores suelen no compartir el almacenamiento entre archivos abiertos desde el disco, por lo que el mapa aparece vacío. Hay que **cargar el `.json` manualmente**: exportá un backup desde la aplicación (💾 Backup → Exportar JSON) y en el mapa usá **📂 Cargar JSON**. En este modo el mapa **no se actualiza solo**: después de editar notas, exportá de nuevo y volvé a cargar el archivo.\n \n\n**Qué se ve:**\n\n- **Notas**: círculos coloreados según su libreta; son más grandes cuanto más enlazadas están. Las notas fijadas 📌 llevan borde ámbar.\n \n- **Libretas**: círculos grandes con anillo. **Etiquetas**: rombos grises (solo las usadas por 2 o más notas).\n \n- **Líneas**: enlaces entre notas (ámbar, con flecha), pertenencia a una libreta, libretas enlazadas entre sí (violeta punteada) y etiquetas (gris punteada).\n \n\n**Cómo se usa:**\n\n- Arrastrar el fondo mueve la vista; la rueda del mouse hace zoom. Arrastrar un nodo lo mueve y lo deja fijo; **📌 Soltar fijados** los libera.\n \n- Al pasar el mouse sobre un nodo se resaltan sus vecinos. Un clic abre un panel lateral con la nota renderizada y sus enlaces salientes y entrantes; el botón **Abrir en el principal** la abre en la aplicación.\n \n- Los botones del encabezado muestran u ocultan cada tipo de conexión, y la leyenda permite ocultar libretas.\n \n- El buscador resalta las coincidencias en título, etiquetas y texto; Enter salta a la primera y, al repetirlo, a las siguientes.\n \n- Para volver a la aplicación, podés usar el botón **← Notas** del encabezado del mapa.\n \n\n## Etiquetas especiales\n\n- `urgente` → rojo\n \n- `importante` → verde\n \n\n## Backup y datos\n\n- **Exportar JSON**: Descarga backup completo\n \n- **Importar JSON**: Restaura desde backup\n \n- **Alerta al salir**: Si hubo cambios, al cerrar la página se ofrece hacer backup\n \n- **⚠️ Borrar Todo**: Elimina todo (con confirmación)\n \n\n## Temas\n\nEl botón ☀️/🌙 alterna tema oscuro/claro. La preferencia se guarda.\n\n----------\n\n## Autoría\n\n- Concepción, idea original, definición de funcionalidades, dirección iterativa del desarrollo, pruebas y criterio estético: Daniel Horacio Braga\n- Escritura del código (HTML, CSS, JavaScript) mediante conversaciones de desarrollo asistido por IA: Claude (Anthropic) — [https://www.anthropic.com](https://www.anthropic.com)\n\n----------\n\n## Licencia\n\nEste proyecto se distribuye bajo la [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0.html).\n",
"createdAt": 1777735755547,
"updatedAt": 1790887166227,
"pinned": true
},
"33": {
"id": 33,
"notebookId": 1,
"title": "Mi Kanban README 🇦🇷",
"author": "DHB",
"tags": [
"markdown",
"readme",
"kanban"
],
"content": "# Mi Kanban\n\n\n   \n\n---\nTablero Kanban personal que funciona completamente en el navegador, sin servidor ni base de datos. Todos los datos se guardan localmente en el dispositivo, pudiendo exportar a un archivo .json. \n¡SÓLO TRES ARCHIVOS! (115kb) \nPodés subir los archivos a tu servidor o usarlo desde tu PC, localmente. O ambas cosas a la vez.\n\n---\n\n## Requisitos\n\n- Navegador moderno (Firefox, Brave, Chrome, Pale Moon)\n- Los siguientes archivos deben estar en el mismo directorio:\n - `index.html`\n - `marked.min.js` (v9.x recomendada)\n - `tucan.png`\n - `README.md - opcional, incrustado en index.html`\n\n---\n\n## Estructura del tablero\n\nEl tablero se organiza en **columnas** que contienen **tareas**. Cada tarea puede tener **notas** con formato Markdown.\n\n### Columnas\n\n- Se crean desde el menú lateral (☰)\n- Se pueden **renombrar** haciendo doble clic en el nombre de la columna\n- Se pueden eliminar con el botón 🗑️ del encabezado\n- Al eliminar una columna se eliminan también sus tareas\n- Cada columna muestra un **contador** con la cantidad de tareas visibles\n- El color de cada columna es **personalizable** con una paleta de colores (botón 🎨 en el encabezado de la columna). El primer color de la paleta restablece el color predeterminado del tema activo. El color elegido se guarda en el JSON y persiste entre sesiones.\n- El botón ➕ en el encabezado abre un modal para agregar una tarea directamente a esa columna\n- El botón ⛶ abre una **vista maximizada** de la columna con todas sus tareas y notas desplegables\n\n### Tareas\n\n- Se crean desde el menú lateral o con el botón ➕ de cada columna\n- Se pueden mover entre columnas arrastrando (escritorio) o con pulsación larga (~400ms) en móvil\n- Se pueden **reordenar dentro de la misma columna** arrastrando una tarea sobre otra\n- Admiten **etiquetas** separadas por comas para clasificarlas\n- Las etiquetas con nombres reservados tienen estilo visual especial automático:\n - `urgente` / `urgent` → texto blanco sobre fondo rojo\n - `importante` / `important` → texto amarillo sobre fondo verde\n- Admiten una **fecha de vencimiento** con indicador de color:\n - 🟢 Verde: vence hoy o en más de 3 días\n - 🟡 Amarillo: vence en 1 a 3 días\n - 🔴 Rojo: vencida\n- Se editan con el botón ✎ y se eliminan con 🗑️\n\n### Notas\n\n- Cada tarea puede tener múltiples notas con contenido en **Markdown**\n- Al hacer clic en el título de una nota se abre una **vista previa** en modal con el contenido renderizado\n- Desde la vista previa se puede abrir el editor con el botón ✎ Editar; al guardar, la vista previa se actualiza automáticamente\n- Los **checklists** (`- [ ]` / `- [x]`) son interactivos en la vista previa y en la columna maximizada: se pueden marcar y desmarcar sin entrar al editor, y el cambio se guarda automáticamente\n- Cada nota guarda su **fecha de creación**, que se muestra junto al título\n- Al guardar aparece un **aviso de confirmación** (o de error si el contenido está vacío)\n\n---\n\n## Búsqueda y filtros\n\n- El campo de búsqueda en el encabezado filtra en tiempo real por título, etiquetas y contenido de notas\n- Hacer clic en una etiqueta filtra todas las tareas que la compartan\n- Cuando hay un filtro activo, se muestra una **barra indicadora** debajo del encabezado con el filtro aplicado y un botón ✕ para quitarlo\n- Al filtrar, las columnas sin resultados **se ocultan** automáticamente\n- Ambos filtros (búsqueda y etiqueta) son acumulables\n\n---\n\n## Editor de Markdown\n\nLa barra de herramientas del editor de notas incluye:\n\n| Botón | Función |\n| :--- | :--- |\n| Hn | Encabezados H1, H2, H3 |\n| B | Negrita (`**texto**`) |\n| *I* | Cursiva (`*texto*`) |\n| Cód | Bloque de código (` ``` `) |\n| ` | Código inline |\n| List | Lista con viñetas (`- item`) |\n| ☐ | Checklist (`- [ ] item` / `- [x] item`) |\n| \" | Cita (`> texto`) |\n| 🔗 | Link (`[texto](url)`) |\n| ⊞ | Tabla con plantilla de 3 columnas |\n| — | Separador horizontal (`---`) |\n\n### Tablas\n\nLa plantilla insertada por ⊞ incluye la línea de separadores con alineación:\n\n```\n| Col1 | Col2 | Col3 |\n| :--- | :---: | ---: |\n| izq | centro | der |\n```\n\n> La línea de separadores (`| --- |`) es obligatoria. Sin ella el texto no se renderiza como tabla.\n\n### Checklists\n\n```\n- [ ] Tarea pendiente\n- [x] Tarea completada\n```\n\nLos ítems completados se muestran en verde. En la vista previa y en la columna maximizada se pueden marcar y desmarcar directamente sin editar la nota.\n\n---\n\n## Backup\n\nDesde la sección **Backup** del menú lateral:\n\n- **Exportar JSON**: descarga un archivo con todos los datos del tablero, con marca de tiempo en el nombre\n- **Importar JSON**: carga un backup previamente exportado, reemplazando los datos actuales\n\nDesde la sección **Exportar Markdown**:\n\n- Permite exportar a archivo `.md` una tarea individual, una columna completa o todas las columnas\n- Las exportaciones incluyen los metadatos de cada tarea (etiquetas y fecha de vencimiento) y el contenido completo de sus notas\n\n> Se recomienda exportar regularmente. Los datos se guardan en el `localStorage` del navegador y pueden perderse si se borra el historial o la caché.\n\n---\n\n## Notas técnicas\n\n- Sin dependencias externas en tiempo de ejecución (todo local)\n- Markdown renderizado por [marked.js](https://marked.js.org/) v9.x con soporte GFM completo\n- Compatible con Firefox, Brave, Chrome y Pale Moon\n- El drag & drop en móvil usa pulsación larga (~400ms) para no interferir con el scroll\n- Los datos persisten en localStorage con un wrapper de compatibilidad para Pale Moon\n- La Content Security Policy bloquea explícitamente conexiones de red externas\n\nLa idea detrás del uso de localStorage con la capacidad de exportar e importar en formato .json es facilitar la portabilidad sin depender de servidores o backends complejos: el localStorage actúa como almacenamiento de trabajo inmediato, mientras que el archivo .json es el mecanismo de persistencia real a largo plazo.\n\n---\n**Problema con Pale Moon (archivo local)**: al cargar la página puede producirse un intento de conexión a direcciones internas (como 0.0.0.2). Es un comportamiento del navegador, no de la aplicación, y no afecta el funcionamiento ni la privacidad. No ocurre al acceder desde un servidor web.\n\n---\n\n## Ideas\n\n- 📂 Podés crear backups en carpetas específicas para distintos proyectos y así tener varios proyectos en desarrollo y a mano.\n- 📄 Podés crear columnas para notas de distinto carácter.\n- 🗃️️ Podés usar Dropbox o Google Drive para sincronizar tus datos estés donde estés.\n- Para las columnas: Ideas, En progreso, Finalizadas, Descartadas, Notas, etc.\n\n---\n\n## Créditos\n\n**Código y desarrollo**\n\nClaude Sonnet (Anthropic) — arquitectura, implementación, corrección de bugs y compatibilidad cross-browser\n\n**Diseño, concepto y dirección**\n\n[Daniel Horacio Braga](https://orquidealucinada.net) — diseño visual, definición de funcionalidades, testing en múltiples plataformas (Firefox, Brave, Pale Moon, móvil), y feedback iterativo\n\n**Dependencias**\n- [marked.js](https://marked.js.org/) — parser de Markdown, licencia MIT\n\n---\n\n## Licencia\n\n**Mi Kanban** — Copyright © 2026 [Daniel Horacio Braga](https://orquidealucinada.net)\n\nEste programa es software libre: podés redistribuirlo y/o modificarlo bajo los términos de la **Licencia Pública General de GNU (GPL)**, versión 3 o posterior, publicada por la Free Software Foundation.\n\nEste programa se distribuye con la esperanza de que sea útil, pero **SIN NINGUNA GARANTÍA**; sin siquiera la garantía implícita de COMERCIABILIDAD o IDONEIDAD PARA UN PROPÓSITO PARTICULAR. Consulte la Licencia Pública General de GNU para más detalles.\n\nDeberías haber recibido una copia de la Licencia Pública General de GNU junto con este programa. Si no, consultá [https://www.gnu.org/licenses/](https://www.gnu.org/licenses/).\n\n> Nota: la licencia GPL aplica al código fuente de **Mi Kanban**. La librería **marked.js** se distribuye bajo su propia licencia MIT, que es compatible con GPL.\n\n## Video\n\n| Demo 1 | Demo 2 |\n|--------|--------|\n| ` por un ` ![](\"https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Bust_of_Ibn_Khaldun_%28Casbah_of_Bejaia%2C_Algeria%29.jpg/330px-Bust_of_Ibn_Khaldun_%28Casbah_of_Bejaia%2C_Algeria%29.jpg\")
\n\n**Ibn Jaldún** (1332–1406) fue un erudito, historiador y estadista tunecino, reconocido como uno de los pensadores más brillantes del mundo islámico medieval. Se le considera el precursor de disciplinas modernas como la **sociología**, la **historiografía** y la **economía**.\n\n## Su obra maestra: _Al-Muqaddima_\n\nEscrita en 1377, la _Muqaddima_ (o _Prolegómenos_) fue concebida originalmente como la introducción a su historia universal, pero se convirtió en un tratado independiente de inmenso valor. En ella, propuso un análisis científico de la sociedad, alejándose de los relatos puramente religiosos o legendarios de su época.