← Volver al sitio

📋 Guía para actualizar el sitio web

Esta guía te explica cómo actualizar el contenido de www.agrodasin.org.co sin necesidad de contratar un diseñador cada vez. El sitio funciona con archivos HTML estáticos alojados en Netlify. No necesitas saber programar — solo seguir los pasos.

🚀 Inicio rápido — ¿Cómo subo archivos PDF al sitio?

Elige la sección que corresponde a tu caso:

📄 PDF de una convocatoria

📁 Subir el PDF de una convocatoria

Sube el PDF a www/recursos/convocatorias/ → Add file ▼ → Upload files
Abre convocatorias-data.js (clic en ✏️)
Busca la convocatoria por su id y cambia archivo: null a archivo: '/recursos/convocatorias/nombre.pdf'
Clic en Commit changes
En ~1 minuto aparece el botón "⬇ Descargar PDF" en el sitio

📚 PDF de la Biblioteca Gratuita

📁 Subir archivos a la Biblioteca

Abre el repositorio en GitHub:
www/recursos/biblioteca/
Clic en Add file ▼ → Upload files
Arrastra tus DOCX/PDF al área punteada
Clic en Commit changes
Listo — en ~1 minuto el sitio los muestra disponibles para descargar

💡 Convocatorias: ver sección 11 · Biblioteca: los nombres deben ser exactos, ver sección 10.

🗂️ 1. Estructura del sitio

Todo el sitio vive en un solo archivo: www/index.html en el repositorio de GitHub. Cada sección está marcada con un comentario HTML para que puedas encontrarla fácilmente:

              ← Sección de inicio
 ← Quiénes somos
     ← Servicios
   ← Proyectos / portafolio
 ← Tabla de contratos ejecutados
  ← Sección LicitIA
      ← Noticias y blog
      ← Formulario y datos de contacto
        ← Pie de página

💡 Para encontrar una sección, usa Ctrl + F (o Cmd + F en Mac) y busca el comentario, por ejemplo: 

✏️ 2. Editar textos

Opciones para editar

Opción	Dificultad	Recomendado para
GitHub (navegador)	Fácil	Cambios rápidos de texto, noticias, datos de contacto
VS Code (instalado)	Medio	Cambios estructurales, agregar secciones
GitHub Desktop	Medio	Trabajar localmente con interfaz visual

Pasos para editar en GitHub (sin instalar nada)

Ir al repositorio
Abre github.com/danielojedameza-png/licitia-3.0-1 en el navegador.
Abrir el archivo
Navega a la carpeta www/ y haz clic en index.html.
Editar
Haz clic en el ícono de lápiz ✏️ (Edit this file) en la esquina superior derecha.
Hacer el cambio
Usa Ctrl + F para encontrar el texto que quieres cambiar. Modifícalo directamente en el editor.
Guardar (Commit)
Al final de la página, escribe una descripción breve del cambio (ej: "Actualizar noticia de febrero") y haz clic en Commit changes.
Listo — Netlify publica automáticamente
En 1–2 minutos, el cambio aparecerá en www.agrodasin.org.co.

⚠️ Importante: Al editar HTML, ten cuidado de no borrar las comillas, signos < o > de las etiquetas. Si algo se ve raro después de publicar, puedes revertir el cambio desde GitHub → History → "Revert".

📰 3. Actualizar noticias

Cada noticia es un bloque <article class="nws"> dentro de la sección . Para agregar una nueva noticia:

Copia esta plantilla y pégala antes de la primera noticia:

<article class="nws">
  <div class="nws-img"
    style="background-image:url('PEGA_AQUI_URL_DE_IMAGEN')"
    role="img" aria-label="Descripcion de la imagen"></div>
  <div class="nws-body">
    <div class="nws-meta">Tema &middot; Mes 2025</div>
    <h3>Título de la noticia</h3>
    <p>Breve descripción de 2-3 líneas sobre la noticia.</p>
    <a href="#contacto" class="nws-lnk">Leer más →</a>
  </div>
</article>

💡 Para las imágenes, sube tu foto a imgbb.com (gratis) y copia la URL directa. O usa fotos de unsplash.com (licencia libre).

Para eliminar una noticia antigua:

Selecciona todo el bloque desde <article class="nws"> hasta el </article> correspondiente y bórralo.

🛠️ 4. Agregar o editar servicios

Los servicios están dentro de . Cada servicio es un bloque <div class="srv">.

<div class="srv">
  <div class="srv-ic">🌱</div>  <!-- Emoji o ícono -->
  <h3>Nombre del servicio</h3>
  <p>Descripción breve del servicio en 2-3 líneas.</p>
</div>

💡 Para cambiar el ícono, busca emojis relacionados en emojipedia.org y pega el emoji directamente.

📋 5. Agregar proyectos (Experiencia)

Los proyectos están en . Cada proyecto es un <article class="exp">:

<article class="exp">
  <div class="exp-img"
    style="background-image:url('URL_IMAGEN')"
    role="img" aria-label="Descripcion"></div>
  <div class="exp-body">
    <div class="exp-tag">Tipo de proyecto</div>
    <h3>Nombre del proyecto</h3>
    <p>Descripción del proyecto, resultados, municipios o departamentos.</p>
  </div>
</article>

📜 5.1 Actualizar Contratos y Convenios

La sección  contiene una tabla con los contratos y convenios ejecutados. Para agregar, editar o eliminar un registro:

💡 Busca en el archivo el comentario . Dentro de <tbody> están todas las filas.

Agregar un nuevo contrato o convenio

Copia uno de estos bloques y pégalo dentro de <tbody>…</tbody>:

Para un Contrato:

<tr>
  <td><span class="cc-badge contrato">Contrato</span></td>
  <td><span class="cc-entity">Nombre de la entidad contratante</span></td>
  <td class="cc-obj">Objeto del contrato: qué se hizo, en dónde, con quiénes</td>
  <td>2025</td>
  <td class="cc-val">$ 000.000.000</td>
</tr>

Para un Convenio:

<tr>
  <td><span class="cc-badge convenio">Convenio</span></td>
  <td><span class="cc-entity">Nombre de la entidad o aliado</span></td>
  <td class="cc-obj">Objeto del convenio: tipo de cooperación, alcance, beneficiarios</td>
  <td>2025</td>
  <td class="cc-val">$ 000.000.000</td>
</tr>

Editar un registro existente

Busca el nombre de la entidad con Ctrl + F, luego modifica el texto de la celda <td> que quieras cambiar.

Eliminar un registro

Selecciona todo el bloque desde <tr> hasta el </tr> correspondiente y bórralo.

Si no quieres mostrar el valor económico

Reemplaza el valor por un guion o déjalo en blanco:

Columna	Qué poner	Ejemplo
Tipo	`Contrato` o `Convenio` (cambia también la clase CSS)	Convenio
Entidad	Nombre oficial de la entidad u organización	Gobernación del Tolima
Objeto	Descripción breve de qué se ejecutó	Fortalecimiento de asociaciones campesinas…
Año	Año de ejecución (4 dígitos)	2024
Valor	Valor total del contrato/convenio en pesos COP	$ 320.000.000

⚠️ Los valores y datos de la tabla son de ejemplo. Reemplázalos con los contratos y convenios reales de AGRODASIN antes de publicar definitivamente.

📥 5.2 Importar contratos desde Excel (script automático)

Si tienes los contratos en un archivo .xlsx, puedes convertirlos a HTML automáticamente con el script incluido en el repositorio. Solo necesitas Python instalado en tu computador.

💡 Python viene preinstalado en Mac y Linux. En Windows descárgalo gratis de python.org.

Paso 1 — Preparar el Excel

El archivo puede tener los nombres de columna que quieras, el script los detecta automáticamente. Los nombres recomendados son:

Columna	Ejemplos de nombre aceptados	Contenido
Tipo	`tipo`, `clase`, `modalidad`	"Contrato" o "Convenio"
Entidad	`entidad`, `contratante`, `organización`	Nombre oficial
Objeto	`objeto`, `descripción`, `actividad`	Qué se ejecutó
Año	`año`, `vigencia`, `fecha`	2024 o 2024-03-01
Valor	`valor`, `monto`, `cuantía`	320000000 o $ 320.000.000

Paso 2 — Instalar openpyxl (solo la primera vez)

Abre una terminal (símbolo del sistema o PowerShell) y escribe:

pip install openpyxl

Paso 3 — Clonar el repositorio o descargar el script

Descarga el archivo scripts/contratos_desde_excel.py del repositorio y guárdalo junto a tu Excel.

Paso 4 — Ejecutar el script

# Mostrar en pantalla:
python contratos_desde_excel.py mis_contratos.xlsx

# Guardar en un archivo HTML:
python contratos_desde_excel.py mis_contratos.xlsx --salida filas.html

# Si el Excel tiene varias hojas, especifica el nombre:
python contratos_desde_excel.py mis_contratos.xlsx --hoja "Contratos 2024"

Paso 5 — Copiar el resultado en index.html

Copiar las filas generadas
El script imprime bloques <tr>…</tr>. Selecciona todo y copia.
Abrir index.html en GitHub
Ve al repositorio → www/index.html → clic en el lápiz ✏️.
Buscar el marcador
Usa Ctrl + F y busca: 
Reemplazar las filas de ejemplo
Borra desde el primer <tr> de ejemplo hasta el comentario marcador, y pega las filas generadas.
Guardar y publicar
Clic en Commit changes → en ~1 minuto aparece en el sitio.

⚠️ Si el script no detecta alguna columna (dice "(no detectada)"), verifica que el nombre de la columna en tu Excel sea similar a los ejemplos de la tabla de arriba. Puedes renombrar las columnas en Excel para que coincidan exactamente.

📡 5.3 Noticias del sector en vivo

El sitio carga automáticamente noticias actuales de Google News cada vez que alguien visita la página. Se muestran hasta 6 noticias de las categorías:

🌾 Agropecuario — noticias del sector agrícola y ganadero colombiano
🐟 Pesquero — pesca, acuicultura y AUNAP
🌿 Ambiental — medio ambiente y sostenibilidad en Colombia

💡 Si el servicio de noticias no responde (por problemas de red), el sitio muestra automáticamente artículos de respaldo que describen los portales oficiales (Minagricultura, AUNAP, MinAmbiente). El visitante no nota ninguna diferencia.

Cómo funciona

El JS del sitio usa rss2json.com (API gratuita) para convertir el RSS de Google News en JSON, que luego renderiza como tarjetas en la sección "Actualidad del sector". No requiere ninguna configuración adicional.

Personalizar las búsquedas de noticias

Si quieres cambiar los términos de búsqueda (por ejemplo, agregar "contratación pública Colombia"), edita el array CATEG al final de www/index.html. Busca el comentario:

// ── NOTICIAS DEL SECTOR EN VIVO ─────

Cada elemento del array CATEG tiene un campo url con la búsqueda en Google News. Cambia los términos en el parámetro q= de la URL:

// Ejemplo: agregar noticias de "contratación pública"
{ label:'Contratación', bg:'#FFF3CD', fg:'#856404',
  url:'https://news.google.com/rss/search?q=contratacion+publica+Colombia&hl=es-419&gl=CO&ceid=CO:es-419',
  img:'URL_DE_IMAGEN_POR_DEFECTO' }

Agregar artículos propios de AGRODASIN

Las noticias propias de AGRODASIN están en la subsección "📢 Novedades AGRODASIN" — busca el comentario . Esas son estáticas y las editas manualmente como se describe en la sección 3 de esta guía.

📊 5.4 Monitor de Oportunidades SECOP II

La sección "Procesos abiertos de interés" consulta automáticamente la API pública de datos.gov.co y muestra en tiempo real hasta 9 procesos de contratación abiertos en los sectores donde AGRODASIN trabaja. No requiere ninguna configuración ni mantenimiento habitual — los datos se actualizan solos.

Cómo funciona

Cuando un visitante abre esa sección, el JS del sitio llama a la API SODA de SECOP II (datos.gov.co/resource/jbjy-vk9h.json) y busca procesos cuyo nombre contenga alguno de los términos asociados al sector seleccionado. Los resultados se muestran como tarjetas con nombre del proceso, entidad compradora, estado, valor base y fecha de publicación.

💡 Si la API no responde (problema temporal de datos.gov.co o límite de peticiones), el sitio muestra automáticamente el mensaje "⚠️ No se pudo conectar con la API de datos.gov.co. Puede ser un problema temporal." y un enlace directo a SECOP II. Esto es normal y no requiere ninguna acción de tu parte — basta con esperar unos minutos y recargar.

Los 5 sectores y sus términos de búsqueda

Cada pestaña corresponde a un sector y tiene asociados varios términos que se buscan en el nombre del proceso de contratación:

Pestaña	Términos de búsqueda (en la API)
🌾 Extensión agropecuaria	EXTENSION AGROPECUARIA, ASISTENCIA TECNICA DIRECTA, ASISTENCIA TECNICA RURAL, EPSEA
🌿 Insumos agropecuarios	INSUMOS AGROPECUARIOS, INSUMOS AGRICOLAS, INSUMOS PECUARIOS, SEMILLAS CERTIFICADAS, FERTILIZANTES, AGROQUIMICOS
🏡 Proyectos productivos	UNIDADES PRODUCTIVAS, PROYECTOS PRODUCTIVOS, FORTALECIMIENTO AGROPECUARIO, SEGURIDAD ALIMENTARIA, PIDAR
🔍 Interventoría técnica	INTERVENTORIA TECNICA, INTERVENTORIA ADMINISTRATIVA
🍽️ Suministro de alimentos	SUMINISTRO DE ALIMENTOS, ACUERDO MARCO DE PRECIOS, SISTEMA DINAMICO DE ADQUISICION, ALIMENTOS PERECEDEROS, ALIMENTOS NO PERECEDEROS, COMPRAVENTA DE ALIMENTOS

Filtrar por entidad o municipio

El campo de búsqueda debajo de las pestañas filtra los resultados ya cargados de forma instantánea. Por ejemplo, escribe ICBF para ver solo los procesos del Instituto Colombiano de Bienestar Familiar, o escribe Tolima para filtrar por departamento. No lanza una nueva petición a la API; solo filtra la lista actual.

Actualizar los términos de búsqueda de un sector

Si quieres ampliar o cambiar las palabras clave de un sector, edita el array SECTORES en el bloque /* ===== SECOP II MONITOR ===== */ de www/index.html:

var SECTORES = [
  { label: 'Extensión agropecuaria',
    terms: ['EXTENSION AGROPECUARIA','ASISTENCIA TECNICA DIRECTA','EPSEA'] },
  { label: 'Insumos agropecuarios',
    terms: ['INSUMOS AGROPECUARIOS','INSUMOS AGRICOLAS','FERTILIZANTES'] },
  ...
];

Cada elemento del array terms es una cadena en mayúsculas sin tildes, ya que la API de SECOP II almacena los nombres en mayúsculas. Agrega o elimina términos según necesites.

⚠️ Los términos deben estar en MAYÚSCULAS y sin tildes. La API compara usando upper(). Correcto: 'EXTENSION AGROPECUARIA'. Incorrecto: 'Extensión Agropecuaria'.

Agregar un nuevo sector (pestaña)

Para añadir un 6.° sector al monitor:

Agregar la pestaña HTML
Dentro de <div class="op-tabs"> en la sección , añade:

<button class="op-tab" role="tab" aria-selected="false" data-sec="5">🌱 Nuevo sector</button>

El atributo data-sec debe ser el índice del sector en el array SECTORES (los índices empiezan en 0, así que el 6.° sector tendría data-sec="5").
Agregar la entrada en el array JS
En el array SECTORES al final de www/index.html, agrega al final:

{ label: 'Nuevo sector', terms: ['TERMINO1','TERMINO2'] }

Cambiar el número de resultados por sector

Por defecto se muestran 9 procesos por sector (3 columnas × 3 filas en el grid). Para cambiarlo, edita la variable LIMIT:

var LIMIT = 9; // Cambia a 6 para 2 filas, o a 12 para 4 filas

Fuente de datos y privacidad

Los datos provienen del dataset público SECOP II — Procesos de Contratación publicado en datos.gov.co por Colombia Compra Eficiente. El API es pública y gratuita (protocolo SODA). No requiere autenticación ni claves de API. Los datos son información oficial del Estado colombiano y están disponibles bajo la Política de Datos Abiertos.

📞 6. Actualizar datos de contacto y WhatsApp

Los datos de contacto aparecen en varias partes del sitio. Busca con Ctrl + F el número actual y reemplázalo en todos los lugares.

Qué cambiar	Qué buscar en el archivo
Número de WhatsApp	`573052397368` (formato sin espacios ni +)
Correo electrónico	`contacto@agrodasin.org.co`
Redes sociales	`facebook.com/agrodasin` o `instagram.com/agrodasin`

⚠️ El número de WhatsApp aparece en múltiples lugares (nav, hero, LicitIA, contacto, footer, FAB). Usa "Reemplazar todo" (Ctrl + H en VS Code) para cambiarlo de una sola vez.

📬 7. Formularios — Cómo ver las respuestas

El sitio tiene 2 formularios que llegan a tu panel de Netlify:

Formulario	Qué capta	Nombre en Netlify
Lista de espera LicitIA	Nombre, organización, correo, tipo de entidad	`licitia-waitlist`
Contacto general	Nombre, empresa, correo, asunto, mensaje	`contacto`

Cómo ver los mensajes recibidos

Ir a Netlify
Abre app.netlify.com e inicia sesión.
Seleccionar el proyecto
Haz clic en el sitio liciti.
Ir a Forms
En el menú lateral, haz clic en Forms.
Ver respuestas
Verás los dos formularios. Haz clic en cualquiera para ver los registros con fecha, nombre, correo y mensaje.

💡 Puedes configurar notificaciones por correo electrónico en Netlify → Forms → tu formulario → Form notifications. Así recibirás un email cada vez que alguien llene el formulario.

🎯 8. Actualizar el contador de cupos de LicitIA

El contador "34 de 100 cupos reservados" es un texto estático en el HTML. Para actualizarlo conforme llegan registros:

Busca en el archivo: 34 de 100 cupos reservados y cambia el número 34 por la cantidad actual de registros que tienes en Netlify Forms.

También puedes ajustar la barra de progreso cambiando el porcentaje en el CSS inline:

<div class="wl-fill" style="width:34%"></div>
<!-- Cambia 34% por el porcentaje real, ej: 56% -->

⚠️ Busca wl-fill en el archivo y también busca el texto "34 de 100". Actualiza ambos cada vez que el número de registros suba.

🖼️ 9. Logo e imágenes

Logo oficial

El archivo www/logo.svg contiene el logo de AGRODASIN en formato vectorial (SVG). Para reemplazarlo con el logo oficial:

Guarda tu logo oficial como logo.svg (o logo.png)
Sube el archivo a la carpeta www/ del repositorio en GitHub
Si es PNG, busca en index.html el texto /logo.svg y reemplázalo por /logo.png

Imágenes de noticias y proyectos

Actualmente el sitio usa imágenes de Unsplash (fotos de campo y agro). Para reemplazarlas con fotos propias de AGRODASIN:

Sube tu foto a imgbb.com (gratis, sin registro)
Copia la "Direct link" de la imagen
En index.html, busca la URL de la imagen que quieres cambiar (ej: unsplash.com/photo-1559827260) y reemplaza por tu URL

💡 Tamaño recomendado para fotos del sitio: 1200 × 800 px, formato JPG o WebP. Comprime las imágenes en squoosh.app antes de subirlas para que el sitio cargue rápido.

📚 10. Biblioteca Gratuita — cómo subir tus archivos DOCX/PDF

La Biblioteca Gratuita ya está activa en /biblioteca/. Los 19 documentos del catálogo están listados, pero los archivos que aparecen en el repositorio son marcadores de posición (texto simple). Debes reemplazarlos con tus documentos reales (DOCX o PDF).

⚠️ Antes de subir: los archivos deben llamarse exactamente igual que los nombres de la tabla de abajo. Si cambias el nombre, el botón "Descargar" dejará de funcionar.

Tabla de archivos esperados

#	Nombre de archivo (exacto)	Formato	Categoría
1	`acta-constitucion-asociacion.docx`	DOCX	Actas
2	`acta-constitucion-fundacion.docx`	DOCX	Actas
3	`acta-base-adaptable-esal.docx`	DOCX	Actas
4	`acta-nombramiento-junta-directiva.docx`	DOCX	Actas
5	`acta-asamblea-general.docx`	DOCX	Actas
6	`acta-aprobacion-estatutos.docx`	DOCX	Actas
7	`estatutos-basicos-asociacion.docx`	DOCX	Estatutos
8	`estatutos-basicos-fundacion.docx`	DOCX	Estatutos
9	`formato-listado-asociados.docx`	DOCX	Formatos compl.
10	`carta-aceptacion-cargos.docx`	DOCX	Formatos compl.
11	`certificado-residencia-vinculacion.docx`	DOCX	Formatos compl.
12	`autorizacion-tramites.docx`	DOCX	Formatos compl.
13	`guia-constituir-asociacion.pdf`	PDF	Guías paso a paso
14	`guia-constituir-fundacion.pdf`	PDF	Guías paso a paso
15	`guia-formalizacion-esal.pdf`	PDF	Guías paso a paso
16	`guia-documentos-camara-comercio.pdf`	PDF	Guías paso a paso
17	`guia-obtener-rut.pdf`	PDF	Guías paso a paso
18	`guia-apertura-cuenta-bancaria.pdf`	PDF	Guías paso a paso
19	`guia-asociaciones-productores.pdf`	PDF	Guías paso a paso

Método A — Subir desde GitHub (sin instalar nada) ⭐ Recomendado

⚠️ ¿Ves error 404 o la carpeta no existe?
Si al abrir www/recursos/biblioteca/ no la encuentras en la rama principal, primero debes crearla:

Ve a la carpeta www/ en GitHub
Clic en Add file ▼ → Create new file
En el campo del nombre escribe exactamente: recursos/biblioteca/.gitkeep
(al escribir / GitHub crea la carpeta automáticamente)
Baja y haz clic en Commit new file
Ahora sí navega a www/recursos/biblioteca/ y continúa con los pasos de abajo

Ir a la carpeta correcta en GitHub
Abre el repositorio en el navegador: github.com → www/recursos/biblioteca
Hacer clic en "Add file" → "Upload files"
En la esquina superior derecha de la carpeta verás el botón verde Add file ▼. Haz clic y elige Upload files.
Arrastrar tus archivos o buscarlos
Arrastra todos tus DOCX y PDF al área punteada, o haz clic en "choose your files" para buscarlos en tu computador. Puedes subir varios archivos a la vez.
Confirmar que los nombres son exactamente los de la tabla
Antes de continuar, verifica que cada archivo tiene el nombre exacto (minúsculas, guiones, sin espacios, sin tildes). Por ejemplo: acta-constitucion-asociacion.docx — NO Acta Constitución Asociación.docx.
Escribir un mensaje de commit y guardar
Baja hasta "Commit changes", escribe algo como: "Subir documentos reales de la Biblioteca Gratuita" y haz clic en Commit changes.
Esperar 1–2 minutos y listo
Netlify detecta el cambio automáticamente y publica los nuevos archivos. Abre agrodasin.org.co/biblioteca/ y prueba el botón Descargar.

Método B — Renombrar archivos si tienen nombre diferente

Si tus documentos ya tienen un nombre diferente (por ejemplo "Acta de Constitución - Asociación v2.docx"), tienes dos opciones:

Opción 1 — Renombrar en tu computador (más sencillo): antes de subirlos, renómbralos en Windows o Mac para que coincidan exactamente con la tabla.

Opción 2 — Cambiar el nombre en el catálogo: si prefieres mantener tus nombres de archivo, edita el catálogo en www/biblioteca/index.html. Busca el campo archivo: de cada recurso y actualiza la ruta:

// Antes:
archivo: '/recursos/biblioteca/acta-constitucion-asociacion.docx'

// Después (tu nombre de archivo real):
archivo: '/recursos/biblioteca/mi-acta-constitucion.docx'

Método C — Agregar un documento nuevo (que no estaba en la lista)

Para agregar un documento nuevo a la biblioteca en el futuro:

Subir el archivo
Sube el archivo DOCX o PDF a www/recursos/biblioteca/ en GitHub (igual que el Método A). Usa un nombre descriptivo en minúsculas y con guiones: ej: modelo-poder-especial.docx.
Agregar el recurso al catálogo
Abre www/biblioteca/index.html en GitHub (clic en ✏️). Busca el texto var RECURSOS = [. Al final del array (antes del ];), agrega una coma y el nuevo bloque:

{
  id: 20,
  titulo: 'Modelo de poder especial',
  categoria: 'Formatos complementarios',
  icono: '📋',
  descripcion: 'Formato de poder especial para que un delegado represente a la organización ante una entidad.',
  archivo: '/recursos/biblioteca/modelo-poder-especial.docx',
  formato: 'DOCX',
  keywords: ['poder', 'delegado', 'representación', 'entidad']
}

💡 Categorías disponibles: 'Actas' · 'Estatutos' · 'Formatos complementarios' · 'Guías paso a paso'. Usa exactamente una de estas (mayúsculas y tildes incluidas).

Verificar que una descarga funciona

Abre agrodasin.org.co/biblioteca/
Haz clic en el botón ⬇ Descargar del documento que acabas de subir
El navegador debe iniciar la descarga del archivo DOCX o PDF
Si el navegador abre una página en blanco o muestra texto, es porque el archivo aún es el marcador de posición. Espera 2 minutos y recarga

⚠️ Tamaño máximo recomendado por archivo: 10 MB (DOCX normalmente pesa menos de 500 KB; PDF bien optimizado pesa 1–3 MB). Archivos muy grandes pueden tardar en descargarse en celulares con conexión lenta. Si tienes un PDF pesado, comprímelo en smallpdf.com antes de subir.

📄 11. Convocatorias — Cómo subir el PDF de cada convocatoria

Cada convocatoria puede tener un PDF adjunto (el documento oficial, pliego de condiciones o bases de la convocatoria). Cuando hay un PDF disponible, el sitio muestra automáticamente el botón ⬇ Descargar PDF en la tarjeta y en la página de detalle de esa convocatoria.

⚠️ Actualmente 12 de las 14 convocatorias tienen archivo: null (sin PDF). Puedes ir agregando los PDFs en la medida en que los consigas de cada entidad.

¿Dónde se guardan los PDFs?

En la carpeta www/recursos/convocatorias/ del repositorio. Los dos PDFs que ya están subidos son:

www/recursos/convocatorias/
  12_SENA_FondoEmprender_EconomiaPopular_2025.pdf
  13_SENA_FondoEmprender_CampeSENA_2025.pdf

Convención de nombres recomendada

Usa el formato: {id}_{Entidad}_{NombreCorto}_{Año}.pdf

01_ADR_EPSEA_ExtensionAgropecuaria_2025.pdf
03_MADR_AgriculturaCampesina_2025.pdf
07_UARIV_ProyectosProductivos_Victimas_2025.pdf

💡 Usa solo letras, números y guiones bajos. Sin espacios ni tildes. El número al inicio (01, 03…) corresponde al id de la convocatoria en convocatorias-data.js.

Pasos para subir un PDF

Conseguir el PDF oficial
Descarga el documento desde el portal oficial de la entidad (ADR, MADR, Finagro, etc.) o usa un PDF que ya tengas guardado.
Subir el archivo a GitHub
Abre www/recursos/convocatorias/ en GitHub. Clic en Add file ▼ → Upload files. Arrastra el PDF y haz clic en Commit changes.
Actualizar convocatorias-data.js
Abre www/convocatorias/convocatorias-data.js en GitHub (clic en ✏️). Busca la convocatoria por su id y cambia archivo: null por la ruta del PDF:

// Antes:
archivo: null,

// Después (escribe la ruta exacta del archivo que acabas de subir):
archivo: '/recursos/convocatorias/01_ADR_EPSEA_ExtensionAgropecuaria_2025.pdf',

Guardar los cambios
Haz clic en Commit changes… en GitHub. Netlify detecta el cambio y publica en ~1–2 minutos. El botón "⬇ Descargar PDF" aparece automáticamente en la tarjeta y la página de detalle de esa convocatoria.

💡 Si el PDF pesa más de 5 MB, comprímelo primero en smallpdf.com para que descargue rápido en celulares con conexión lenta.

Estado actual de los PDFs por convocatoria

id	Convocatoria	Entidad	PDF
1	EPSEA — Extensión Agropecuaria ADR	ADR	Sin PDF
2	Asistencia Técnica Integral	Secretarías Agricultura	Sin PDF
3	Agricultura Campesina, Familiar y Comunitaria	MADR	Sin PDF
4	Colombia Siembra	Finagro	Sin PDF
5	Conservación y Biodiversidad	MADS	Sin PDF
6	Negocios Verdes y PSA	MADS / Autoridades Ambientales	Sin PDF
7	Proyectos Productivos para Víctimas	UARIV	Sin PDF
8	Convocatorias PDET	ART	Sin PDF
9	Estímulos a la Cultura en Territorios Rurales	Ministerio de Cultura	Sin PDF
10	SECOP II — Suministro de Insumos Agrícolas	Entidades públicas	Sin PDF
11	Inclusión Financiera para la Economía Popular 2026	Banco Agrario	Sin PDF
12	Fondo Emprender — Economía Popular 2025	SENA	Disponible ✅
13	Fondo Emprender — CampeSENA 2025	SENA	Disponible ✅
14	FAIA — Fondo de Acceso a Insumos Agropecuarios	Banco Agrario / MADR	Sin PDF

⚠️ Tamaño máximo recomendado: 10 MB por PDF. Pliegos completos y documentos técnicos pueden pesar más — usa smallpdf.com para reducirlos antes de subir.

🔗 12. Recursos útiles

Herramienta	Para qué sirve	URL
Netlify	Ver estadísticas, formularios, configurar dominio	app.netlify.com
GitHub	Editar el código, ver historial de cambios	Repositorio
Cloudflare Web Analytics	Ver visitas, páginas, países y dispositivos (gratis) — sección 14	dash.cloudflare.com → Web Analytics
Google Analytics 4	Analytics completo con sesiones, conversiones y mapas — sección 14	analytics.google.com
Carpeta PDFs convocatorias	Subir PDFs de las convocatorias — ver sección 11	www/recursos/convocatorias/
Datos de convocatorias	Editar convocatorias y actualizar campo `archivo`	convocatorias-data.js
Carpeta de la biblioteca	Subir DOCX/PDF de la Biblioteca Gratuita	www/recursos/biblioteca/
Catálogo de la biblioteca	Editar títulos, descripciones y nombres de archivos	www/biblioteca/index.html
🎨 Imágenes del cómic LicitIA	Subir las 8 imágenes PNG de las escenas — ver sección 15	www/historias/licitia-comic/img/
imgbb.com	Subir imágenes y obtener URLs	imgbb.com
Squoosh	Comprimir imágenes sin perder calidad	squoosh.app
smallpdf.com	Comprimir PDFs grandes antes de subir	smallpdf.com
Emojipedia	Buscar emojis para iconos de servicios	emojipedia.org
Unsplash	Fotos libres de derechos (si no tienes propias)	unsplash.com
Script Excel → HTML	Convertir contratos de Excel a filas HTML automáticamente	contratos_desde_excel.py
datos.gov.co — SECOP II	Dataset público de procesos de contratación (fuente del monitor de oportunidades)	SECOP II Procesos
Colombia Compra Eficiente	Portal oficial SECOP II para buscar procesos manualmente	colombiacompra.gov.co

✅ 13. Contenido que necesitas preparar

El sitio tiene contenido de muestra. Para personalizarlo completamente, necesitas preparar:

Elemento	Estado actual	Acción
📄 PDFs de convocatorias (×12 pendientes)	Sin PDF	Subir los PDFs a `www/recursos/convocatorias/` y actualizar `archivo:` en `convocatorias-data.js` — ver sección 11
📚 Archivos de la Biblioteca Gratuita (×19)	Marcadores de posición	Subir los 19 DOCX/PDF reales a `www/recursos/biblioteca/` — ver sección 10 de esta guía
🎨 Imágenes del cómic LicitIA (×8)	Sin imágenes	Subir `escena-01.png` … `escena-08.png` a `www/historias/licitia-comic/img/` — ver sección 15
Logo oficial AGRODASIN	SVG aproximado	Reemplazar `www/logo.svg` con el logo oficial
Foto del equipo / campo	Foto genérica	Reemplazar por foto real del equipo AGRODASIN
Estadísticas de confianza	Estimadas	Confirmar: +50 proyectos, +200 organizaciones, 15+ años, 12 depts.
Proyectos reales	Ejemplos	Reemplazar Tolima / Cauca / Caquetá por proyectos reales ejecutados
Contratos y convenios	Datos de ejemplo	Reemplazar en `<!-- CONTRATOS Y CONVENIOS -->` con los contratos y convenios reales de AGRODASIN (ver sección 5.1 de esta guía)
Noticias reales AGRODASIN	Ejemplos	Reemplazar los 3 artículos en "📢 Novedades AGRODASIN" por comunicados reales (sección 3 de esta guía)
Noticias del sector	Automático ✅	Se cargan automáticamente de Google News. Sin acción necesaria. (Ver sección 5.3)
Monitor SECOP II — Oportunidades	Automático ✅	Se actualiza en tiempo real desde datos.gov.co. Sin configuración necesaria. Para cambiar sectores o términos de búsqueda, ver sección 5.4.
Número de WhatsApp	+57 305 239 7368	Confirmar que es el número correcto
Correo electrónico	contacto@agrodasin.org.co	Confirmar o actualizar
Redes sociales	Sin verificar	Confirmar handles en Facebook, Instagram, Twitter, LinkedIn
Cupos LicitIA	34 de 100	Actualizar manualmente según registros reales en Netlify Forms
DNS del dominio	Pendiente	Apuntar agrodasin.org.co → Netlify (ver netlify.toml)
📊 Analíticas web (contador de visitas)	Activo ✅	El badge de visitas está en el pie de todas las páginas. Para analytics completos activa Cloudflare Web Analytics — ver sección 14

📊 14. Analíticas y Contador de Visitas

El sitio tiene dos formas de ver cuántas visitas recibe: un contador visible en el pie de todas las páginas (funciona sin configuración) y la opción de conectar Cloudflare Web Analytics para un panel completo con gráficas.

🟢 Opción inmediata — Badge de visitas (ya activo)

El número de visitas aparece directamente en la parte inferior de cada página del sitio, junto al copyright. El badge muestra dos números: visitas de hoy / visitas totales.

📍 Dónde verlo: abre www.agrodasin.org.co y baja hasta el final de la página. Verás un badge verde con el texto "Visitas X / Y". El badge está presente en todas las páginas del sitio.

⚠️ El badge registra visitas a partir del momento en que fue añadido al sitio. No muestra datos históricos anteriores. Cada vez que alguien carga la página, el contador suma 1.

📊 Opción completa — Cloudflare Web Analytics (recomendado · gratis)

Muestra un panel con visitas únicas, páginas más visitadas, países, dispositivos y referrers. Como tu DNS ya está en Cloudflare, solo necesitas activarlo:

Inicia sesión en Cloudflare
Ve a dash.cloudflare.com con tu cuenta.
Abre Web Analytics
En el menú lateral izquierdo busca Web Analytics (también en: Account Home → Web Analytics).
Agrega el sitio
Haz clic en Add a Site → ingresa agrodasin.org.co → clic en Done.
Copia el token del beacon
Cloudflare mostrará un snippet como:
<script defer src="...beacon.min.js" data-cf-beacon='{"token":"abc123..."}'></script>
Copia solo el valor del token (la cadena alfanumérica después de "token":").
Activa el snippet en GitHub
En cada uno de los 6 archivos HTML de la tabla siguiente:
① Busca el comentario OPCIÓN A: Cloudflare Web Analytics
② Elimina los caracteres  del final
③ Reemplaza TU_TOKEN_CF_AQUI por tu token real
④ Guarda y haz push — Netlify publica automáticamente
Ver las estadísticas
Vuelve a dash.cloudflare.com → Web Analytics → selecciona agrodasin.org.co. Los primeros datos aparecen en minutos.

Archivos donde activar el snippet (los 6 HTML del sitio)

Página	Archivo en GitHub
Inicio	www/index.html
Convocatorias	www/convocatorias/index.html
Detalle convocatoria	www/convocatorias/detalle.html
Biblioteca	www/biblioteca/index.html
Radar de Oportunidades	www/radar/index.html
Guía de contenidos	www/guia-contenidos.html
LicitIA Cómic	www/historias/licitia-comic/index.html

Resumen de opciones disponibles

Herramienta	Qué muestra	Cómo acceder	Costo
Badge de visitas ✅ (activo)	Visitas de hoy / total — visible en el pie de cada página	Se ve directo en el sitio (parte inferior de cualquier página)	Gratis ✅
Cloudflare Web Analytics	Visitas únicas, páginas vistas, países, dispositivos, referrers	dash.cloudflare.com → Web Analytics → agrodasin.org.co	Gratis ✅
Google Analytics 4	Sesiones, usuarios, rebote, eventos, conversiones, mapas geográficos	analytics.google.com → Tu propiedad	Gratis ✅
Netlify Analytics	Visitas sin cookies, basado en logs del servidor	app.netlify.com → Tu sitio → Analytics	Pago ($9/mes)

Nota: Si prefieres Google Analytics 4, el proceso es similar: crea una propiedad en analytics.google.com, copia el Measurement ID (formato G-XXXXXXXXXX), y activa la OPCIÓN B en los mismos 6 archivos reemplazando G-XXXXXXXXXX con tu ID real.

🎨 15. LicitIA Cómic — Checklist de imágenes

El cómic se encuentra en /historias/licitia-comic/. La página espera exactamente 8 archivos PNG en la carpeta www/historias/licitia-comic/img/. Antes de subirlos, cada imagen ya tiene un placeholder de emoji visible, por lo que la página no se rompe mientras los archivos no están listos.

⚠️ Nombres exactos obligatorios: el HTML referencia los archivos con minúsculas, guión y cero inicial (escena-01.png, no Escena 1.PNG ni escena1.png). Un solo carácter diferente causa un 404 silencioso (se muestra el placeholder en vez de la imagen).

Checklist de los 8 archivos

☑	Nombre de archivo (exacto)	Escena	URL de verificación en el navegador
⬜	`escena-01.png`	El primer paso: conociendo LicitIA	`/historias/licitia-comic/img/escena-01.png`
⬜	`escena-02.png`	El reto: encontrar la convocatoria correcta	`/historias/licitia-comic/img/escena-02.png`
⬜	`escena-03.png`	Los requisitos: ¿Qué necesito para aplicar?	`/historias/licitia-comic/img/escena-03.png`
⬜	`escena-04.png`	La preparación: reuniendo los documentos	`/historias/licitia-comic/img/escena-04.png`
⬜	`escena-05.png`	La postulación: enviando la solicitud	`/historias/licitia-comic/img/escena-05.png`
⬜	`escena-06.png`	La espera: LicitIA sigue monitoreando	`/historias/licitia-comic/img/escena-06.png`
⬜	`escena-07.png`	La noticia: ¡El proyecto fue aprobado!	`/historias/licitia-comic/img/escena-07.png`
⬜	`escena-08.png`	El futuro: el campo que Carlos soñó	`/historias/licitia-comic/img/escena-08.png`

Cómo subir las imágenes (desde GitHub — sin instalar nada) ⭐

Ir a la carpeta correcta en GitHub
Abre: github.com → www/historias/licitia-comic/img. Verás solo el archivo .gitkeep (marcador de posición).
Clic en "Add file" → "Upload files"
En la esquina superior derecha de la carpeta, haz clic en el botón verde Add file ▼ y elige Upload files.
Arrastrar los 8 PNG o buscarlos en tu computador
Arrastra todos los archivos al área punteada o haz clic en "choose your files". Puedes subirlos todos a la vez. Asegúrate de que cada archivo ya tenga el nombre exacto antes de arrastrarlo.
Verificar los nombres antes de guardar
GitHub muestra la lista de archivos seleccionados. Confirma que ninguno tiene mayúsculas, espacios ni extensión .PNG en mayúsculas. Deben verse exactamente: escena-01.png … escena-08.png.
Escribir un mensaje de commit y guardar
Baja hasta "Commit changes", escribe algo como: "Subir 8 imágenes del cómic LicitIA" y haz clic en Commit changes.
Esperar 1–2 minutos y verificar
Netlify detecta el cambio automáticamente. Abre la página del cómic en agrodasin.org.co/historias/licitia-comic/ y recárgala (Ctrl + F5 en Windows, Cmd + Shift + R en Mac) para ver las imágenes.

Cómo verificar cada imagen individualmente en el navegador

Para confirmar que cada PNG se sirvió correctamente (respuesta HTTP 200 y no el placeholder), abre directamente la URL de la imagen en el navegador. Si la imagen cargó bien, verás la ilustración en pantalla. Si la URL no existe, Netlify devuelve la página de inicio (comportamiento del catch-all) — esto significa que el nombre del archivo está mal o el archivo no fue subido aún.

https://www.agrodasin.org.co/historias/licitia-comic/img/escena-01.png
https://www.agrodasin.org.co/historias/licitia-comic/img/escena-02.png
https://www.agrodasin.org.co/historias/licitia-comic/img/escena-03.png
https://www.agrodasin.org.co/historias/licitia-comic/img/escena-04.png
https://www.agrodasin.org.co/historias/licitia-comic/img/escena-05.png
https://www.agrodasin.org.co/historias/licitia-comic/img/escena-06.png
https://www.agrodasin.org.co/historias/licitia-comic/img/escena-07.png
https://www.agrodasin.org.co/historias/licitia-comic/img/escena-08.png

💡 Verificación rápida con DevTools: en la página del cómic (abramos el cómic), presiona F12 → pestaña Red / Network → filtra por Img → recarga la página. Busca los 8 archivos escena-0N.png: todos deben mostrar código 200 en la columna Estado. Si ves 404 o el archivo no aparece, el nombre no coincide o no fue subido.

Recomendaciones de formato para las imágenes

Parámetro	Recomendado	Por qué
Formato	PNG (o JPEG renombrado a .png)	El HTML ya referencia la extensión `.png`
Ancho	1 200 px (mínimo 800 px)	La página escala la imagen al 100% del contenedor (~780 px)
Tamaño de archivo	≤ 500 KB por imagen	Carga rápida en móviles con conexión lenta
Herramienta de compresión	squoosh.app	Comprime PNG sin perder calidad visible

← Volver al sitio web