Skip to main content

Modificar herramientas

Para modificar cualquier herramienta de la página web, debemos seguir los siguientes pasos:

  1. Acceder a la carpeta static/json y entrar en el archivo tools.json.
  2. Dentro, encontraremos distintos objetos que representan a las herramientas de la página web:
[
    {
        "id": "digitaldice",
        "año": 2023,
        "titulo": "Digital Dice",
        "descripcion": "Digital Dice is a virtual abstraction of IoT devices or cyber-physical systems based on microservices that facilitates the use of the devices via Web Technologies.",
        "miembros": ["manel-mena"],
        "github": "https://github.com/acgtic211/digital-dice",
        "logo": "DD_CropLogo.png",
        "web": "https://acg.ual.es/repo/dt/",
        "plataformas": [
            {
                "nombre": "Kubernetes",
                "url": ""
            }
        ]
    },
    ...
]
  1. Para modificar una herramienta, debemos cambiar los valores de los siguientes campos:
    • id: Identificador único de la herramienta. Debe ser único y sin espacios.
    • año: Año de creación o última actualización de la herramienta.
    • titulo: Título de la herramienta.
    • descripcion: Descripción detallada de la herramienta. Se muestra como texto plano.
    • miembros: Array con los IDs de los miembros del grupo que participan en la herramienta. Estos IDs deben coincidir con los del archivo miembros.json.
    • github: Enlace al repositorio de GitHub de la herramienta. Si no existe, puede escribir null u omitir el campo.
    • logo: Nombre del archivo de imagen del logo. Debe estar en la carpeta static/img/tools. Si no se quiere añadir, puede escribir null u omitir el campo.
    • web: Enlace a la página web o demo de la herramienta. Si no existe, puede escribir null u omitir el campo.
    • plataformas: Array de objetos que representan las plataformas donde está disponible la herramienta. Cada objeto tiene:
      • nombre: Nombre de la plataforma (ej: "Docker", "Kubernetes", "npm", etc.).
      • url: URL específica de la plataforma. Si está vacío, se muestra como deshabilitado.

Funcionalidades de la página​

La página de herramientas incluye las siguientes funcionalidades:

Búsqueda​

  • Campo de búsqueda que filtra herramientas por título y descripción
  • Búsqueda en tiempo real sin necesidad de pulsar botones

Estados de carga​

  • Skeleton loader mientras se cargan los datos
  • Mensaje de "No se encontraron herramientas" cuando no hay resultados
  • Contador de resultados cuando hay filtros activos

Añadir una nueva herramienta​

Para añadir una nueva herramienta, agregue un nuevo objeto al array:

[
    ...
    {
        "id": "nueva-herramienta",
        "año": 2025,
        "titulo": "Mi Nueva Herramienta",
        "descripcion": "Descripción de la nueva herramienta y sus funcionalidades principales.",
        "miembros": ["id-miembro-1", "id-miembro-2"],
        "github": "https://github.com/acgtic211/nueva-herramienta",
        "logo": "logo-herramienta.png",
        "web": "https://acg.ual.es/repo/nueva-herramienta/",
        "plataformas": [
            {
                "nombre": "Docker",
                "url": "https://hub.docker.com/r/acgtic211/nueva-herramienta"
            },
            {
                "nombre": "npm",
                "url": ""
            }
        ]
    }
]

Archivos de imagen​

  • Logos: Deben guardarse en static/img/tools/
  • Avatares de miembros: Se obtienen automáticamente del archivo miembros.json

Traducciones​

La página soporta traducciones automáticas para:

  • Texto de la interfaz (botones, placeholders, etc.)
  • Los datos de las herramientas se pueden internacionalizar agregando campos con sufijo _en:
    • titulo_en
    • descripcion_en

Ejemplo con traducción:

{
    "id": "herramienta-bilingue",
    "titulo": "Herramienta en Español",
    "titulo_en": "Tool in English",
    "descripcion": "Descripción en español de la herramienta.",
    "descripcion_en": "English description of the tool.",
    ...
}

Consideraciones técnicas​

  • El archivo tools.json debe mantener la sintaxis JSON válida
  • Los IDs de miembros deben existir en miembros.json
  • Las imágenes deben estar optimizadas para web
  • Los enlaces deben ser válidos y accesibles