Noticias destacadas
Qué es este componente
Bloque de noticias destacadas para la página de inicio del portal de la Junta Regional de Calificación de Invalidez del Magdalena. Muestra tres noticias en tarjetas con imagen, categoría, título completo, fecha, resumen y enlace a la nota completa.
Vigencia: [Año] | Última actualización: [Mes y año] | Responsable: [Dependencia]
Cómo usar esta página: aquí está el componente armado y listo para diligenciar. Cada tarjeta es un contenedor de Elementor con sus widgets propios: la imagen se cambia desde la biblioteca de medios, el título y el resumen se escriben en su widget y el botón recibe el enlace de la noticia. No hay que tocar el diseño ni el CSS.
Noticias destacadas
Estas son las tres tarjetas del componente. Reemplace el contenido de ejemplo por el de las noticias reales.
[Categoría]
[Título completo de la noticia 1, sin recortar]
Publicada el [DD/MM/AAAA]
[Resumen de dos o tres líneas que explique de qué se trata la noticia. Debe terminar en una idea completa, nunca cortado a mitad de frase.]
[Categoría]
[Título completo de la noticia 2, sin recortar]
Publicada el [DD/MM/AAAA]
[Resumen de dos o tres líneas que explique de qué se trata la noticia. Debe terminar en una idea completa, nunca cortado a mitad de frase.]
[Categoría]
[Título completo de la noticia 3, sin recortar]
Publicada el [DD/MM/AAAA]
[Resumen de dos o tres líneas que explique de qué se trata la noticia. Debe terminar en una idea completa, nunca cortado a mitad de frase.]
Sin truncamientos: el título se muestra completo, en varias líneas si hace falta, y las tarjetas crecen a la altura de la más larga. No se recorta con puntos suspensivos, porque un título cortado deja de explicar la noticia. El resumen se limita escribiéndolo corto, no cortándolo con código.
Imágenes: todas se recortan a la misma altura para que la cuadrícula quede pareja. Cada imagen necesita texto alternativo que describa lo que muestra; si es solo decorativa, se deja el texto alternativo vacío, nunca con el nombre del archivo.
Campos de cada tarjeta
Qué lleva cada noticia, con qué widget se edita y qué límites conviene respetar para que la cuadrícula se vea pareja sin recortar nada.
| Campo | Widget de Elementor | Obligatorio | Recomendación |
|---|---|---|---|
| Imagen destacada | Imagen | Sí | [Horizontal, mínimo 800 × 450 px. Con texto alternativo descriptivo.] |
| Categoría | Editor de texto | No | [Una sola palabra o dos. Si no aplica, se elimina la línea.] |
| Título | Título (H3) | Sí | [Hasta 70 caracteres. Se muestra completo, nunca recortado.] |
| Fecha de publicación | Editor de texto | Sí | [Formato DD/MM/AAAA, igual en todas las tarjetas.] |
| Resumen | Editor de texto | Sí | [Entre 120 y 180 caracteres, terminando en idea completa.] |
| Enlace a la noticia | Botón | Sí | [Texto descriptivo propio. Nunca «clic aquí» ni «leer más» solo.] |
Sobre el texto del botón: si las tres tarjetas dicen «Leer más», quien navega por enlaces escucha tres veces lo mismo sin saber a dónde va cada uno. Por eso el texto por defecto es «Leer la noticia completa»; si se quiere más preciso, se escribe «Leer la noticia sobre [tema]».
Cómo se decide qué noticias son destacadas
Hoy las tarjetas se llenan a mano. La estructura ya está preparada para que más adelante se alimenten solas desde el gestor de contenidos.
| Modo | Cómo funciona | Cuándo conviene | Esfuerzo de actualización |
|---|---|---|---|
| Manual (actual) | Se edita cada tarjeta en Elementor y se cambian imagen, título, fecha, resumen y enlace | Cuando hay pocas noticias y se actualizan de vez en cuando | [Alto: hay que editar la página de inicio cada vez] |
| Por categoría | Se crea la categoría «Destacada» y el componente muestra las tres entradas más recientes que la tengan | Cuando ya hay flujo constante de noticias | [Bajo: basta marcar la categoría al publicar] |
| Por entradas fijadas | El componente muestra las entradas marcadas como «Fijar en la portada» | Cuando la Junta quiere control total del orden | [Bajo] |
| Las más recientes | El componente muestra siempre las tres últimas noticias publicadas | Cuando no hay criterio editorial y basta la fecha | [Ninguno: se actualiza solo] |
Recomendación: pasar al modo «por categoría» apenas exista un flujo regular de publicaciones. El modo manual funciona, pero obliga a editar la página de inicio cada vez y es el que más se desactualiza en la práctica: una portada con noticias de hace un año comunica descuido.
Al pasar a modo dinámico, las tarjetas se reemplazan por el widget de entradas de Elementor aplicando estos mismos estilos. El diseño no cambia: cambia de dónde salen los datos.
Reutilización y accesibilidad
Cómo reutilizar el componente en otras páginas
- En el editor, clic derecho sobre el contenedor de las tarjetas y «Guardar como plantilla», con un nombre como «Componente — Noticias destacadas».
- En cualquier otra página, insertar esa plantilla desde la biblioteca.
- Cambiar el contenido de las tarjetas; los estilos viajan con el componente porque están en el contenedor, no en la página.
- Para mostrar dos o cuatro noticias en vez de tres, se elimina o se duplica una tarjeta: la cuadrícula se reacomoda sola.
| Dispositivo | Distribución | Comportamiento |
|---|---|---|
| Escritorio | Tres tarjetas en fila | Misma altura de imagen; las tarjetas igualan su alto |
| Tablet | Dos por fila, la tercera debajo | Se reacomoda sola, sin configuración aparte |
| Móvil | Una por fila | Ancho completo, en el mismo orden de lectura |
Accesibilidad
- Cada título es un encabezado de nivel 3, de modo que las noticias se recorren saltando entre títulos con lector de pantalla.
- Ningún texto se recorta: el título se muestra completo y el resumen se controla escribiéndolo corto, no cortándolo.
- El enlace de cada tarjeta tiene texto descriptivo propio; no se usan etiquetas repetidas como «leer más».
- Las imágenes llevan texto alternativo que describe lo que muestran, o vacío si son decorativas.
- El orden visual coincide con el orden del código, así que recorrer con el teclado sigue la misma secuencia que se ve.
- Los botones tienen foco visible y son alcanzables con el teclado.
- La tarjeta completa no es un enlace: el único elemento activable es el botón, para no generar un área de clic ambigua.
- Cumple los criterios aplicables de la Resolución 1519 de 2020 y de la Matriz ITA.
Antes de publicar: verificar que ninguna tarjeta quede con el texto de ejemplo, que las tres imágenes tengan texto alternativo, que los enlaces funcionen y que las fechas usen el mismo formato.
Responsable de la actualización: [Dependencia responsable]. Frecuencia sugerida: [revisar al menos una vez al mes].