¿Cómo utilizar Table, List Group, Badge y Progress Bar en el Editor de bloques de Waclis?

El Editor de bloques de Waclis incluye diferentes componentes para organizar y destacar información dentro de una Página web.

Entre ellos encontrarás:

• Table

• List Group

• Badge

• Progress Bar

Aunque pueden utilizarse dentro de secciones similares, cada componente cumple una función distinta.

En este tutorial aprenderás:

• cuándo utilizar una Table;

• cuándo una lista es más apropiada;

• qué diferencia existe entre List y List Group;

• cómo utilizar Badge correctamente;

• cuándo una Progress Bar tiene sentido;

• cómo evitar porcentajes o estados ficticios;

• cómo adaptar tablas a celular;

• cómo organizar información compleja;

• cómo clonar filas, elementos o etiquetas;

• cómo mantener datos actualizados;

• qué riesgos tienen los estilos globales;

• cómo utilizar Classes, IDs y Linked styles;

• qué errores frecuentes conviene evitar.

¿Qué componente debería utilizar?

Una guía rápida:

Ejemplo de Table

Producto       Stock       Estado
A              25          Disponible
B              0           Sin stock
C              12          Disponible

Ejemplo de List Group

Servicios incluidos

Relevamiento
Configuración
Capacitación
Soporte

Ejemplo de Badge

NUEVO

DESTACADO

DISPONIBLE

Ejemplo de Progress Bar

Implementación

████████████████░░░░
80 %

pero solamente si:

80 % representa realmente un dato válido.

No utilices estos componentes solo por estética

Este es un principio importante.

No deberías utilizar:

Table

porque “las columnas quedan alineadas”.

Ni:

Progress Bar

porque “queda moderna”.

Ni:

Badge

porque “llena un espacio vacío”.

El componente debe corresponder al significado de la información

1. ¿Cómo utilizar Table?

El componente Table permite organizar datos en:

• filas;

• columnas.

Lo encontrarás dentro de la biblioteca de componentes del Editor de bloques.

¿Cuándo conviene utilizar una Table?

Cuando existe una relación clara entre diferentes datos.

Por ejemplo:

Plan        Usuarios        Almacenamiento
A           2               10 GB
B           5               50 GB
C           10              100 GB

Otro ejemplo

Medida       Ancho       Alto
Pequeña      30 cm       20 cm
Mediana      50 cm       35 cm
Grande       70 cm       50 cm

Otro

Día              Horario
Lunes            09:00 a 18:00
Martes           09:00 a 18:00
Miércoles        09:00 a 18:00

La clave es que cada columna tenga un significado consistente

Por ejemplo:

Columna 1
→ Producto

Columna 2
→ Precio

Columna 3
→ Disponibilidad

¿Cuándo no utilizar Table?

No la utilices para maquetar una página.

Por ejemplo, no construyas:

Celda 1 → Image

Celda 2 → Heading

Celda 3 → Button

solamente para poner tres elementos en línea.

Para layout utiliza:

Container + Grid Row

Table sirve para datos

Grid sirve para diseño y estructura.

Esta diferencia es fundamental

TABLE
→ organiza información tabular

GRID ROW
→ organiza la composición de la página

Ejemplo incorrecto

Quieres:

[ IMAGEN ][ TEXTO ]

y utilizas una Table con dos celdas.

Mejor

Grid Row
├── Column 6
│   └── Image
└── Column 6
    └── Text

¿Cómo saber si la información necesita una Table?

Haz esta pregunta:

¿Tiene sentido leer los datos relacionando cada fila con los encabezados de las columnas?

Ejemplo

Modelo       Peso       Medida
A            5 kg       30 cm
B            8 kg       50 cm

Sí.

En cambio:

Quiénes somos

Imagen

Descripción

Contactar

No.

Eso es layout.

Encabezados de Table

Una Table clara debería permitir identificar qué representa cada columna.

Por ejemplo:

| Producto | Medida | Material |

Evita:

| Dato 1 | Dato 2 | Dato 3 |

si puedes utilizar nombres reales.

Los encabezados deben ser breves

Por ejemplo:

Disponibilidad

puede ser mejor que:

Información acerca de la disponibilidad actual

Si necesitas explicar el encabezado

puedes agregar una introducción fuera de la Table.

Ejemplo

ESPECIFICACIONES

Las siguientes medidas corresponden a las variantes disponibles.

[ TABLE ]

Filas

Cada fila debería representar una unidad equivalente.

Por ejemplo:

Modelo A
Modelo B
Modelo C

Evita mezclar

Modelo A
Observaciones generales
Condiciones comerciales
Modelo B

en la misma columna principal sin una razón.

Organiza los datos con un criterio uniforme

Orden de columnas

Coloca primero la información que ayuda a identificar el elemento.

Por ejemplo:

Producto | Medida | Precio

suele ser más intuitivo que:

Precio | Producto | Medida

aunque dependerá del objetivo.

Orden de filas

También importa.

Puedes ordenar por:

• nombre;

• tamaño;

• fecha;

• prioridad;

• precio;

si existe una lógica útil.

No ordenes aleatoriamente

si el usuario necesita comparar.

Table vs Tabla de precios

Waclis cuenta además con una sección prediseñada:

Tabla de precios

No es exactamente lo mismo que el componente Table.

Table

está pensada para datos tabulares.

Tabla de precios

está pensada para presentar y comparar:

• planes;

• precios;

• características;

• CTA.

Por ejemplo

Plan Básico
$ XX
Características
[ ELEGIR ]

puede funcionar mejor con la sección Tabla de precios.

Mientras:

Producto | Unidad | Precio

puede ser una Table.

No reconstruyas una Tabla de precios comercial compleja con una Table básica

si la sección especializada resuelve mejor la experiencia.

Table vs List

Supongamos:

Incluye:

- Configuración
- Capacitación
- Soporte

No necesitas Table.

La información tiene una sola dimensión

Una List es suficiente.

Table es más útil cuando cada elemento tiene varios datos relacionados

Por ejemplo:

Servicio          Duración         Modalidad
Capacitación      2 horas          Virtual
Implementación    Variable         Remota

Table vs List Group

También existe List Group.

Una Table se utiliza principalmente cuando necesitas comparar columnas.

List Group cuando necesitas presentar elementos relacionados en forma de grupo.

Ejemplo List Group

Documentación
Tutoriales
Preguntas frecuentes
Contacto

Ejemplo Table

Recurso                Formato       Idioma
Guía inicial            PDF           Español
Manual                  PDF           Español

¿Cómo editar una Table?

Después de agregar o seleccionar Table:

1. utiliza Navigator;

2. identifica la estructura;

3. localiza filas y celdas;

4. modifica el contenido correspondiente.

Conceptualmente

Table
├── Header Row
│   ├── Cell
│   ├── Cell
│   └── Cell
├── Row
│   ├── Cell
│   ├── Cell
│   └── Cell
└── Row
    ├── Cell
    ├── Cell
    └── Cell

La estructura exacta puede variar

Por eso utiliza Navigator antes de:

• clonar;

• eliminar;

• mover.

Clonar una fila

Si necesitas agregar un nuevo registro:

selecciona la fila completa.

Por ejemplo

Original:

Producto A | 20 unidades | Disponible

Clonas para crear:

Producto B | 8 unidades | Disponible

Después actualiza todas las celdas

No cambies solamente:

Producto A
→ Producto B

dejando:

20 unidades

si el dato real es otro.

Una fila clonada debe revisarse completamente

Clonar una celda no equivale a clonar una fila

Si necesitas otra fila:

selecciona la estructura que contiene todas las celdas.

Utiliza Navigator

Eliminar una fila

Selecciona la fila completa.

Recuerda:

Waclis no solicita confirmación.

Si eliminas la estructura equivocada:

Deshacer

No elimines solamente el texto

dejando una fila vacía.

Por ejemplo

Producto A | 20 | Disponible
           |    |
Producto C | 12 | Disponible

Si ya no necesitas Producto B

elimina correctamente su fila.

Agregar columnas

Modificar la estructura horizontal de una Table puede ser una tarea más avanzada.

Si necesitas:

Producto | Precio

y quieres agregar:

Stock

debes asegurarte de que:

• el encabezado incluya la nueva columna;

• todas las filas tengan su celda correspondiente.

No agregues una celda solamente en una fila

Ejemplo incorrecto

Producto | Precio | Stock
A        | 100
B        | 200    | 5

La estructura debe mantenerse consistente

Table responsive

Este es uno de los puntos más importantes.

Una Table puede verse perfectamente en desktop:

| Producto | Descripción | Precio | Stock | Estado |

pero en celular:

| Producto | Descripción | Precio | Stock | Estado |

puede no tener suficiente ancho.

Cuantas más columnas tengas

mayor será el desafío responsive.

Antes de crear una Table con 8 columnas pregunta:

¿El usuario realmente necesita ver todos esos datos simultáneamente?

Puedes reducir columnas

Por ejemplo:

Desktop pretendido:

Producto
SKU
Categoría
Peso
Medida
Precio
Stock
Estado

Quizá para el objetivo real basta:

Producto
Medida
Precio

Simplifica antes de buscar una solución técnica compleja

No reduzcas Font size excesivamente

para mantener una Table completa en una pantalla pequeña.

Por ejemplo:

8 px

puede hacer los datos ilegibles.

Tampoco comprimas Padding hasta que las celdas queden pegadas

Si la Table necesita desplazamiento horizontal

eso dependerá de la estructura y personalización utilizada.

Pero no asumas que cualquier Table será automáticamente responsive

Prueba el resultado real.

No ocultes columnas importantes en mobile

sin evaluar la información que desaparece.

Table con mucho texto

Una celda como:

Este producto cuenta con diferentes opciones de personalización y...

puede hacer la fila demasiado alta.

Table funciona mejor con información relativamente sintética.

Si necesitas una explicación extensa

puede ser mejor:

• Card;

• Acordeón;

• Paragraph;

• página de detalle.

No conviertas Table en una colección de párrafos largos

Table y enlaces

Una celda puede incluir un Link si la estructura lo permite.

Por ejemplo:

Producto A | Ver ficha

Pero no agregues Buttons enormes dentro de cada celda

si el resultado se vuelve difícil de leer.

Un Link de texto puede ser suficiente.

Table y Badge

Puedes combinar:

Producto A | [ DISPONIBLE ]
Producto B | [ SIN STOCK ]

si el estado necesita destacarse visualmente.

Pero recuerda

esos estados pueden requerir actualización manual si la Table fue creada manualmente.

No asumas sincronización automática

Table con datos variables

Especial cuidado con:

• precios;

• stock;

• fechas;

• porcentajes;

• disponibilidad.

Si escribes manualmente:

Stock
25

debes mantener ese dato.

No presentes una Table estática como si estuviera conectada automáticamente al catálogo

Table y números

Alinea visualmente los datos de manera consistente cuando el diseño lo permita.

Por ejemplo

Precio
$ 100
$ 250
$ 1.000

Mantén un formato común

Evita:

$100
250 pesos
USD 10

si todos deberían utilizar la misma convención.

Table y fechas

Mismo principio.

Por ejemplo:

12/08/2026
15/08/2026
18/08/2026

O:

12 de agosto de 2026
15 de agosto de 2026

Mantén consistencia.

2. ¿Cómo utilizar List Group?

El componente List Group permite presentar varios elementos relacionados como un conjunto organizado.

Puede utilizarse para

• recursos;

• categorías;

• opciones;

• información resumida;

• enlaces relacionados;

• elementos de navegación secundaria;

• listas con mayor estructura visual.

Ejemplo

Recursos disponibles

Guía inicial
Documentación
Preguntas frecuentes
Soporte

Otro ejemplo

Incluye

Configuración inicial
Capacitación
Soporte
Actualizaciones

List Group vs List

El componente List que vimos anteriormente es apropiado para una enumeración tradicional:

- Configuración
- Capacitación
- Soporte

List Group

puede ofrecer una presencia visual más marcada:

┌────────────────────────┐
│ Configuración          │
├────────────────────────┤
│ Capacitación           │
├────────────────────────┤
│ Soporte                │
└────────────────────────┘

¿Cuál utilizar?

Utiliza List cuando:

• necesitas una enumeración simple;

• forma parte de un texto;

• no necesitas Cards o separaciones especiales.

Utiliza List Group cuando:

• cada elemento necesita mayor identidad;

• los elementos forman un conjunto visual;

• pueden incluir información adicional;

• forman una pequeña navegación o conjunto de opciones.

List Group no significa automáticamente navegación

Puede ser completamente informativo.

Ejemplo informativo

Requisitos

Documento de identidad
Comprobante
Formulario completo

Ejemplo con posibles Links

Ayuda

Primeros pasos →
Configuración →
Preguntas frecuentes →

Si los elementos son clicables

debes comprobar qué estructura contiene el Link.

No asumas que todo List Group tiene Links

Utiliza Navigator

Conceptualmente puede ser:

List Group
├── List Item
├── List Item
└── List Item

Si contiene enlaces:

List Group
├── List Item
│   └── Link
├── List Item
│   └── Link
└── List Item
    └── Link

La estructura exacta dependerá del diseño.

Clonar un List Item

Si necesitas agregar un elemento:

selecciona la unidad completa.

Original:

Documentación

Copia:

Videotutoriales

Si el elemento contiene Link:

actualiza también:

Url

Error típico

Texto:
Videotutoriales

URL:
Documentación

Mismo principio que con Buttons y Cards

Eliminar un elemento

Selecciona:

List Item

no todo:

List Group

si solamente quieres retirar una opción.

Recuerda

no hay confirmación al eliminar.

Utiliza Deshacer si es necesario.

Orden de List Group

La secuencia puede comunicar prioridad.

Por ejemplo:

Primeros pasos
Configuración
Uso avanzado
Soporte

tiene una lógica.

Evita orden aleatorio

si existe un recorrido natural.

List Group con demasiados elementos

Si agregas:

40 Items

puede volverse difícil de recorrer.

Considera:

• categorías;

• Acordeón;

• otra página;

• buscador;

según la finalidad.

No conviertas una lista enorme en un solo bloque solamente porque el componente permite clonar.

List Group y Cards

No son exactamente lo mismo.

Card

puede incluir:

• imagen;

• título;

• descripción;

• CTA.

List Group

normalmente es más compacto.

Ejemplo

List Group

Configuración
Usuarios
Permisos
Dominios

puede ser más apropiado que cuatro Cards enormes.

List Group responsive

En general, un List Group vertical puede adaptarse bien a celular.

Pero revisa especialmente

• textos largos;

• Buttons;

• Links;

• Badges;

• iconos.

Por ejemplo:

Configuración avanzada de integraciones empresariales

puede ocupar varias líneas.

Permite que el elemento crezca.

Evita Height fija

List Group horizontal

Si una composición presenta elementos en una fila:

[ A ][ B ][ C ][ D ]

revisa celular.

Puede ser mejor apilar:

A
B
C
D

o utilizar otra composición.

No reduzcas todos los elementos a textos diminutos.

List Group con Badge

Una combinación útil:

Documentación        [ NUEVO ]
Tutoriales
Soporte              [ 24/7 ]

si la etiqueta es real.

Pero evita llenar cada elemento de Badges

3. ¿Cómo utilizar Badge?

El componente Badge permite mostrar una pequeña etiqueta informativa.

Puede utilizarse para indicar

• estado;

• categoría;

• novedad;

• condición;

• clasificación;

• información breve.

Ejemplos

NUEVO

DESTACADO

DISPONIBLE

AGOTADO

GUÍA

ARTÍCULO

¿Qué no es Badge?

No es un Button.

Badge informa

NUEVO

Button ejecuta una acción

VER PRODUCTO

No conviertas una etiqueta en Button

si no tiene una acción.

Tampoco hagas que Badge parezca clicable

si no lo es.

Badge vs Heading

Badge tampoco sustituye un título.

Ejemplo correcto

[ NUEVO ]

Colección 2026

Ejemplo menos claro

[ COLECCIÓN COMPLETA DE PRODUCTOS CORPORATIVOS 2026 ]

dentro de un Badge enorme.

Badge debería ser breve

Usos habituales

Novedad

NUEVO

Requiere mantenimiento

Después de un tiempo ya no será nuevo.

Categoría

TUTORIAL

CASO

SERVICIO

Puede ser más estable.

Estado

DISPONIBLE

NO DISPONIBLE

Debe mantenerse actualizado.

Recomendación

RECOMENDADO

Puede representar una selección editorial.

Popularidad

Cuidado con:

MÁS VENDIDO

MÁS ELEGIDO

N.º 1

Estas afirmaciones requieren fundamento real.

No utilices Badges de popularidad solo para aumentar conversiones

si no corresponden a datos reales.

Oferta

OFERTA

también debe corresponder a una condición real.

Si la promoción termina

retira el Badge.

Porcentaje

-20 %

debe corresponder al descuento real.

No escribas porcentajes decorativos.

Badge temporal vs permanente

Temporal

NUEVO

OFERTA

PRÓXIMAMENTE

Requiere revisión periódica.

Permanente o más estable

GUÍA

SERVICIO

PREMIUM

si representa realmente una categoría estable.

Badge en Cards

Ejemplo:

╭───────────────────────╮
│ [ NUEVO ]             │
│                       │
│ Producto ABC          │
│                       │
│ Descripción...        │
╰───────────────────────╯

Puede colocarse cerca del título

sin competir con él.

No utilices cinco Badges por Card

Ejemplo excesivo:

[ NUEVO ][ OFERTA ][ TOP ][ RECOMENDADO ][ EXCLUSIVO ]

Si necesitas explicar demasiadas condiciones

utiliza texto.

Badge y color

El color puede ayudar a distinguir estados.

Por ejemplo:

DISPONIBLE

puede utilizar un tratamiento diferente a:

AGOTADO

Pero no dependas únicamente del color

El texto debe comunicar el significado.

Ejemplo problemático

● verde
● rojo

sin etiquetas.

Mejor:

[ DISPONIBLE ]
[ AGOTADO ]

Accesibilidad

El estado debe comprenderse aunque el usuario no interprete el color.

Clonar Badge

Si clonas una Card:

el Badge puede duplicarse.

Original:

[ NUEVO ]
Producto A

Copia:

[ NUEVO ]
Producto B

Pregunta:

¿Producto B también es nuevo?

No dejes el Badge simplemente porque venía en la Card original.

Este es un error muy frecuente

Badge y IDs

Si el Badge posee un ID personalizado:

actualízalo al clonar.

Si comparte una Class:

puede mantenerla.

Por ejemplo:

product-badge

puede utilizarse en varios.

Linked styles

Puede ser útil para mantener todos los Badges:

• mismo Padding;

• misma Typography;

• mismo Border radius.

Pero si existen estados diferentes

puedes agregar Classes adicionales:

badge-status disponible

badge-status agotado

Conserva una base común.

Badge responsive

Debe seguir siendo legible.

Evita:

font-size: 8px

solo para hacer entrar una frase demasiado larga.

Si el texto es largo

quizá no debería ser Badge.

Badges posicionados sobre Images

Algunas Cards pueden utilizar:

[ BADGE ]
     sobre
[ IMAGE ]

Si utilizas Position para colocarlo:

revisa especialmente responsive.

Puede ser preferible que forme parte de una Card preparada para ese diseño.

No utilices coordenadas rígidas si la imagen cambia de tamaño.

4. ¿Cómo utilizar Progress Bar?

Progress Bar permite representar visualmente una cantidad, nivel o progreso.

Conceptualmente:

██████████████░░░░░░
70 %

¿Cuándo puede utilizarse?

Cuando existe un dato cuantificable.

Por ejemplo:

Proyecto completado
70 %

si ese porcentaje es real.

Otro ejemplo

Meta alcanzada
85 %

si existe una meta claramente definida.

Otro

Capacidad utilizada
60 %

si ese valor procede de datos reales.

¿Cuándo no utilizarla?

No utilices Progress Bar como decoración.

Ejemplo problemático

Diseño              95 %
Innovación          98 %
Calidad             100 %
Compromiso          100 %

¿Qué significa:

Innovación 98 %

exactamente?

Si no existe una métrica real:

no es información verificable.

Este tipo de “barras de habilidades” decorativas

puede generar una apariencia visual atractiva,

pero no comunica un dato objetivo si el porcentaje fue elegido arbitrariamente.

Evita métricas inventadas

Progress Bar necesita una referencia

Por ejemplo:

Implementación
75 %

debería significar algo como:

75 % de las tareas previstas ya fueron completadas.

O:

Meta mensual
80 %

puede significar:

se alcanzó el 80 % del objetivo establecido.

El usuario debería poder comprender qué mide la barra

Progress Bar vs Timeline

Timeline muestra:

etapas u orden.

Progress Bar muestra:

cuánto se avanzó.

Ejemplo Timeline

1. Relevamiento
2. Diseño
3. Producción
4. Entrega

Ejemplo Progress

Progreso general
75 %

Puedes combinarlos si existe un caso real

pero no son equivalentes.

Progress Bar vs estados

Si solamente necesitas decir:

En proceso

puede ser suficiente un:

Badge

No necesitas mostrar:

63 %

si no sabes realmente cuánto se completó.

Badge

EN PROCESO

puede ser más preciso que un porcentaje ficticio.

Progress Bar vs estadísticas

Una cifra como:

80 %

no debería utilizarse simplemente porque parece convincente.

Si afirmas:

98 % de satisfacción

debe existir información que respalde esa afirmación.

No inventes estadísticas comerciales.

Progress Bar estática vs dinámica

Una Progress Bar creada manualmente dentro del Editor de bloques debe considerarse:

contenido manual

salvo que exista una funcionalidad específica que la actualice.

Si escribes:

Proyecto
60 %

y después el proyecto avanza:

debes actualizarlo manualmente.

No asumas actualización automática

Tampoco utilices una Progress Bar estática para representar

• stock en tiempo real;

• uso actual;

• estado de pedido;

• porcentaje de carga;

• progreso de usuario;

si no existe una integración real.

Ejemplo problemático

Tu pedido

██████████████░░
80 %

Una barra estática no sabe realmente dónde está el pedido.

Puede utilizarse para explicar un proceso general,

pero no como seguimiento individual sin funcionalidad.

Configurar Progress Bar

Después de insertarla:

1. selecciona el componente;

2. revisa Contenido;

3. revisa Navigator;

4. identifica sus elementos;

5. configura únicamente los datos correspondientes al diseño utilizado.

Las opciones exactas pueden variar según la estructura del componente

Por eso no asumas controles que no estén visibles en tu caso.

Una estructura conceptual puede ser:

Progress
├── Label
├── Bar
└── Value

O:

Label
Progress Bar
Value

Lo importante es mantener coherencia entre:

TEXTO
+
ANCHO VISUAL
+
VALOR

Ejemplo incorrecto

Texto:

80 %

Barra visual:

██████░░░░░░░░░░░░
30 %

Los dos valores deben representar lo mismo.

No cambies solamente el texto

si el ancho visual permanece diferente.

Clonar Progress Bar

Original:

Fase A
80 %

Copia:

Fase B
40 %

Revisa:

• Label;

• valor visible;

• representación visual;

• ID.

No dejes la barra de 80 % con texto 40 %

Progress Bar y color

Puede utilizarse color para diferenciar estados o categorías.

Pero no conviertas:

verde = 80 %
azul = 60 %
rojo = 40 %

en una lógica incomprensible.

El ancho sigue siendo la representación principal del porcentaje.

Si el color también tiene significado

explícalo cuando sea necesario.

No dependas únicamente del color

Progress Bar en mobile

Debe seguir siendo suficientemente ancha para interpretar el nivel.

No la coloques dentro de una columna extremadamente estrecha.

Por ejemplo

Desktop:

[ etiqueta ][ barra larga ][ porcentaje ]

puede funcionar.

Mobile puede necesitar:

Etiqueta
Barra
Porcentaje

Utiliza Grid o estructura flexible.

No reduzcas la barra a:

40 px

porque deja de ser útil visualmente.

Table + Badge + Progress Bar

Puedes combinar componentes,

pero solamente si mejora la comprensión.

Ejemplo

Proyecto      Estado          Avance
A             [ EN CURSO ]     70 %
B             [ FINALIZADO ]   100 %

Pero una Table con:

• Badge;

• Progress;

• Buttons;

• Images;

• iconos;

en cada celda puede volverse demasiado compleja.

Simplifica.

Table + List Group

También pueden convivir.

Por ejemplo:

ESPECIFICACIONES

[ TABLE ]

INCLUYE

[ LIST GROUP ]

Cada componente cumple una función diferente.

List Group + Badge

Ejemplo:

Función A           [ NUEVO ]
Función B
Función C           [ BETA ]

si esas etiquetas corresponden realmente.

Badge + Button

Ejemplo:

[ NUEVO ]

Producto ABC

[ VER PRODUCTO ]

Badge informa.

Button actúa.

No conviertas Badge en el CTA principal

Progress Bar + Badge

Ejemplo:

Estado:
[ EN CURSO ]

Progreso:
70 %

Esto puede aportar información complementaria.

Pero solo si ambos datos son reales.

Ejemplo práctico 1: Table de especificaciones

Queremos:

ESPECIFICACIONES

Modelo     Medida      Peso
A          30 cm       2 kg
B          50 cm       3 kg
C          70 cm       4 kg

Paso 1

Agrega:

Table

Paso 2

Utiliza Navigator.

Paso 3

Identifica la fila de encabezados.

Paso 4

Modifica:

Modelo
Medida
Peso

Paso 5

Reemplaza las filas de ejemplo por datos reales.

Paso 6

Elimina filas innecesarias.

Paso 7

Clona una fila completa si necesitas agregar otra.

Paso 8

Personaliza:

• Typography;

• Padding;

• Border;

• Background;

según el diseño.

Paso 9

Revisa celular.

Paso 10

Guardar Cambios.

Paso 11

Ver página.

Paso 12

Comprueba que todos los valores correspondan al encabezado correcto.

Ejemplo práctico 2: horarios

HORARIOS

Día             Atención
Lunes           9:00 a 18:00
Martes          9:00 a 18:00
Miércoles       9:00 a 18:00

Table puede funcionar perfectamente

porque cada fila relaciona:

día
+
horario

No necesitas una Card por cada día.

Ejemplo práctico 3: List Group de recursos

RECURSOS

Primeros pasos
Configuración
Preguntas frecuentes
Videotutoriales

Si cada Item tiene una página:

revisa cada Link.

No clones solamente el texto.

Ejemplo práctico 4: Badge en contenido destacado

[ NUEVO ]

Guía de configuración

Conoce...

[ LEER ]

Si después deja de ser nueva:

elimina o cambia el Badge.

Ejemplo práctico 5: estado

Producto ABC

[ DISPONIBLE ]

Si el estado se actualiza manualmente:

revísalo periódicamente.

No lo dejes visible como Disponible después de agotarse.

Ejemplo práctico 6: Progress Bar de proyecto

PROYECTO

Progreso general

████████████████░░░░
80 %

Utilízala únicamente si:

80 %

representa un cálculo real.

Si solamente sabes:

“estamos trabajando”

es más preciso:

[ EN PROCESO ]

mediante Badge.

Ejemplo práctico 7: comparación

Una Table puede presentar:

Característica     Opción A     Opción B
Material           Acero        Aluminio
Peso               5 kg         3 kg

Pero si las opciones son planes comerciales con CTA:

considera Tabla de precios.

Ejemplo práctico 8: documentación con estados

Documentación            [ ACTUALIZADA ]
Tutoriales                [ NUEVO ]
API                       [ BETA ]

Todos esos estados deben corresponder a la realidad.

Table y estilos

Puedes personalizar una Table mediante:

• Typography;

• Background;

• Text Color;

• Border;

• Padding;

• Margin;

según el elemento seleccionado.

Encabezado

Puede tener mayor contraste:

FONDO
+
FONT WEIGHT

Filas

pueden mantenerse más neutrales.

No utilices un color diferente en cada celda

sin una lógica.

Filas alternadas

Algunas Tables pueden beneficiarse visualmente de filas alternadas.

Por ejemplo:

blanco
gris suave
blanco
gris suave

Dentro de Estilo existe incluso el estado:

nth-of-type(2n)

que puede ser útil para personalizaciones avanzadas de elementos repetidos.

Pero no lo utilices si no comprendes qué selector está afectando.

No necesitas filas alternadas en todas las Tables

Borders

Pueden ayudar a distinguir:

• filas;

• columnas.

Pero demasiadas líneas pueden generar ruido.

Puedes utilizar:

• separadores horizontales;

• bordes sutiles;

según el diseño.

Table y ancho

Una Table puede necesitar:

width: 100 %

de su contenedor,

pero evita aplicar globalmente:

table {
    width: 100%;
}

si no sabes qué otras Tables existen.

Utiliza scope.

Ejemplo

specifications-section

y:

specifications-table

CSS conceptual

.specifications-section .specifications-table {
    width: 100%;
}

Padding de celdas

.specifications-section .specifications-table th,
.specifications-section .specifications-table td {
    padding: 12px 16px;
}

Estas Classes son ejemplos

No representan nombres obligatorios del editor.

No utilices selectores globales

como:

td {
    padding: 20px;
}

Puede modificar otras Tables.

List Group y estilos

Puedes utilizar una Class:

resources-list

Item:

resources-item

CSS:

.resources-section .resources-item {
    padding: 16px;
}

No modifiques globalmente:

.list-group-item {
    ...
}

sin analizar dónde más aparece esa Class.

Badge y estilos

Puedes utilizar:

status-badge

Por ejemplo:

.mi-seccion .status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
}

Mantén el Badge compacto.

No agregues:

padding: 30px

hasta convertirlo en Button.

Progress Bar y estilos

Puedes definir una Class raíz específica.

Por ejemplo:

project-progress

Si necesitas CSS avanzado:

primero identifica mediante Navigator o HTML qué elemento representa:

• contenedor;

• barra interna;

• valor.

No escribas CSS suponiendo una estructura que no verificaste.

Linked styles en Table

Varias filas o celdas pueden compartir estilos.

Esto puede ser deseable.

Por ejemplo:

todos los encabezados:

table-heading

Si cambias Typography

pueden cambiar juntos.

No agregues IDs individuales si buscas uniformidad.

Linked styles en List Group

Mismo principio.

Todos los Items pueden compartir:

resource-item

Linked styles en Badge

Puede ser especialmente útil.

Todos los Badges:

badge-base

Después estados específicos:

badge-base badge-new

badge-base badge-disabled

Linked styles en Progress Bar

Varias barras pueden compartir:

• altura;

• Border radius;

• fondo.

Pero el valor individual debe seguir siendo correcto.

No utilices un estilo compartido que fuerce:

width: 80 %

a todas si cada barra representa un porcentaje distinto.

Esto es importante

El estilo común puede definir:

• altura;

• fondo;

• borde.

El valor individual puede necesitar un ancho diferente.

ID después de clonar

Mismo principio que en otros componentes.

ID

→ único

Class

→ puede compartirse

No dupliques IDs en:

• filas;

• List Items;

• Badges;

• Progress Bars.

Responsive: Table

Revisa especialmente.

Pregunta:

¿Cuántas columnas puede comprender un usuario en celular?

Si la respuesta es:

demasiadas

simplifica.

Responsive: List Group

Normalmente más sencillo.

Permite:

• texto en varias líneas;

• ancho completo.

Responsive: Badge

Mantén el Badge cerca del contenido relacionado.

Por ejemplo, desktop:

Producto ABC    [ NUEVO ]

Mobile:

[ NUEVO ]

Producto ABC

puede ser igualmente válido.

No uses posición absoluta rígida

si el Badge debe acompañar contenido variable.

Responsive: Progress Bar

En mobile puede ser preferible:

Progreso

████████████░░░
70 %

en lugar de:

Progreso | ███ | 70 %

todo comprimido.

Utiliza Grid o estructura flexible.

Accesibilidad en Tables

La relación entre:

• encabezado;

• dato;

debe ser comprensible.

Por eso evita eliminar visualmente todos los encabezados

si después los valores dejan de tener contexto.

Ejemplo:

5 kg
50 cm
Acero

sin saber qué significa cada dato.

Mantén encabezados claros.

Accesibilidad en List Group

El orden y agrupación deberían ser comprensibles.

Accesibilidad en Badge

No dependas únicamente del color.

Accesibilidad en Progress Bar

No dependas únicamente del ancho visual.

Muestra también el valor o estado cuando sea relevante.

Por ejemplo:

70 %

además de la barra.

Datos reales y verificables

Esta es una regla general para los cuatro componentes.

Table

No inventes:

• precios;

• fechas;

• especificaciones.

List Group

No agregues:

• funciones inexistentes;

• servicios no ofrecidos.

Badge

No inventes:

• “Más vendido”;

• “Nuevo”;

• “Disponible”.

Progress Bar

No inventes:

• porcentajes;

• progreso;

• satisfacción.

Diseño atractivo no sustituye exactitud

Información temporal

Estos componentes pueden quedar desactualizados rápidamente.

Ejemplo Table

Precio

Badge

OFERTA

Progress

80 %

Debes revisar periódicamente los datos.

No asumas automatización

Una Table creada manualmente no sabe:

• cuándo cambia un precio;

• cuándo un producto se agota.

Badge tampoco.

Progress Bar tampoco.

Si necesitas datos dinámicos

utiliza una funcionalidad diseñada para esos datos cuando exista.

No reconstruyas manualmente una interfaz que aparenta estar sincronizada

Ejemplo: disponibilidad

Si escribes:

Producto A
[ DISPONIBLE ]

pero la disponibilidad cambia constantemente:

puede quedar incorrecto.

Considera si el dato debería mostrarse en la ficha dinámica correspondiente.

Ejemplo: precios

Mismo principio.

Example: progreso

Mismo principio.

Evitar información engañosa

No presentes:

99 % satisfacción

si no existe una fuente que permita respaldarlo.

Tampoco:

100 % seguro

si es una afirmación absoluta sin fundamento.

Tampoco:

90 % completado

si el porcentaje fue elegido visualmente.

Si no necesitas un número exacto

utiliza lenguaje cualitativo apropiado.

Por ejemplo:

[ EN PROCESO ]

o:

Etapa de implementación

Muchas veces es más preciso.

¿Qué hacer si necesito alinear dos textos?

No utilices Table automáticamente.

Puedes utilizar:

• Grid Row;

• Flex mediante estructura;

• columnas.

¿Qué hacer si necesito una lista de tres puntos?

Utiliza List.

¿Qué hacer si necesito una lista con mayor presencia visual?

List Group.

¿Qué hacer si necesito comparar tres propiedades?

Table.

¿Qué hacer si necesito mostrar “Nuevo”?

Badge.

¿Qué hacer si necesito mostrar “75 % completado”?

Progress Bar, si 75 % es un dato real.

¿Qué hacer si solo sé que está en proceso?

Badge.

¿Qué hacer si quiero mostrar diferentes etapas?

Timeline.

¿Qué hacer si quiero comparar planes?

Tabla de precios.

Utiliza el componente específico

¿Qué hacer si una Table queda demasiado ancha?

Primero revisa:

1. cantidad de columnas;

2. longitud de los encabezados;

3. longitud de los datos;

4. Padding.

Después evalúa el responsive.

No reduzcas todo a 8 px inmediatamente.

¿Qué hacer si una celda tiene un párrafo enorme?

Pregunta si ese dato realmente pertenece a una Table.

Quizá necesitas una página de detalle.

¿Qué hacer si una columna no aporta?

Elimínala.

No mantengas columnas solamente porque venían en la plantilla.

¿Qué hacer si quiero agregar una fila?

Clona la fila completa mediante Navigator.

¿Qué hacer si quiero eliminar una?

Selecciona la fila completa.

¿Qué hacer si me queda una fila vacía?

Elimínala o complétala.

No la utilices como espacio.

¿Qué hacer si necesito separación entre secciones?

No utilices una fila vacía.

Utiliza:

• Margin;

• Padding;

• Section.

¿Qué hacer si un List Group tiene un Link incorrecto?

Selecciona el Link correspondiente y actualiza:

Url

¿Qué hacer si cloné un Item y abre la página anterior?

Actualiza Url.

¿Qué hacer si quiero destacar un Item?

Puedes utilizar:

• Badge;

• Class adicional;

• Background;

según el caso.

No hagas todos “destacados”.

¿Qué hacer si un Badge dice Nuevo desde hace dos años?

Elimínalo o actualízalo.

¿Qué hacer si una oferta terminó?

Retira:

OFERTA

¿Qué hacer si “Disponible” cambia frecuentemente?

Evalúa si debe seguir siendo contenido manual.

¿Qué hacer si quiero Badge clicable?

Pregunta primero si realmente es una etiqueta o una acción.

Si es una acción:

puede ser mejor utilizar Link o Button.

No conviertas etiquetas en controles sin una necesidad.

¿Qué hacer si Progress Bar no tiene un porcentaje real?

No la utilices.

Considera:

• Badge;

• Timeline;

• texto.

¿Qué hacer si tengo una valoración subjetiva?

Por ejemplo:

Diseño 90 %

Si 90 % no tiene una metodología clara:

no lo presentes como dato.

Puedes describir una especialidad mediante texto:

Especialistas en diseño...

si esa afirmación es real,

sin inventar un porcentaje.

¿Qué hacer si el porcentaje cambió?

Actualiza:

• valor visible;

• ancho visual.

No cambies solamente uno.

¿Qué hacer si todas las Progress Bars cambian al editar una?

Comprueba:

Linked styles

Si modificaste:

• color;

• altura;

es lógico que puedan compartirlo.

Si modificaste el ancho/valor

y todas cambian:

puede que estés aplicando la regla a una Class compartida.

El valor individual necesita un selector o estructura adecuada.

¿Qué hacer si un Badge cambia todos?

Mismo principio.

Puede ser correcto para:

• Padding;

• Typography.

Pero diferentes estados pueden necesitar Classes adicionales.

¿Qué hacer si la Table rompe mobile?

No ocultes el problema con:

body {
    overflow-x: hidden;
}

Revisa la propia Table.

¿Qué hacer si List Group ocupa demasiado espacio?

Revisa:

• cantidad de Items;

• Padding;

• textos.

No reduzcas Font size si en realidad hay demasiada información.

¿Qué hacer si Badge ocupa demasiado?

Acorta el texto.

Por ejemplo:

DISPONIBLE PARA SER ADQUIRIDO INMEDIATAMENTE

puede ser simplemente:

DISPONIBLE

¿Qué hacer si necesito explicar una condición?

Utiliza texto complementario.

¿Qué hacer si Progress Bar se ve muy fina?

Puedes ajustar su altura mediante estilo o CSS localizado.

Pero mantén una proporción adecuada.

¿Qué hacer si se ve enorme?

Mismo principio.

No debe convertirse en el elemento visual dominante salvo que el progreso sea el contenido principal.

CSS global peligroso: Table

Evita reglas como:

table {
    border-collapse: collapse;
    width: 100%;
}

si no has evaluado otras Tables.

También:

th,
td {
    padding: 20px;
}

globalmente.

Puede modificar componentes que no querías tocar.

CSS global peligroso: List Group

Evita:

.list-group-item {
    border: none;
}

globalmente.

CSS global peligroso: Badge

Evita:

.badge {
    font-size: 20px;
}

si no quieres modificar todos los Badges.

CSS global peligroso: Progress Bar

Evita:

.progress {
    height: 40px;
}

globalmente.

Puede afectar cualquier Progress Bar del sitio.

Utiliza scope

Por ejemplo:

project-section

Después:

.project-section .progress {
}

si esa es realmente la Class existente que necesitas afectar.

Conserva las Classes estructurales

Waclis utiliza Bootstrap 4 en su entorno actual.

Algunos de estos componentes pueden utilizar Classes asociadas a ese sistema.

No elimines:

table
badge
progress
list-group

u otras Classes estructurales solamente para personalizar el aspecto.

Puedes agregar una Class propia.

Por ejemplo

spec-table

status-badge-custom

Después limita el CSS.

Editar HTML

Puedes utilizar:

Editar código HTML <>

para comprender estructuras avanzadas.

Especialmente útil en una Table

para identificar:

• Row;

• Cell;

• encabezado.

Pero no necesitas editar HTML para cambiar:

• texto;

• color;

• Padding;

si las herramientas visuales son suficientes.

Code editor global

Tampoco debería ser la primera opción.

JavaScript

Estos cuatro componentes normalmente no requieren JavaScript personalizado para su uso básico.

No agregues JavaScript para:

• cambiar el color de Badge;

• agregar filas estáticas;

• modificar Padding de Table;

• representar un porcentaje manual.

Utiliza estructura, Contenido y CSS cuando corresponda.

Si necesitas una Progress Bar dinámica

eso ya implica otra clase de funcionalidad.

No simules actualización dinámica mediante código improvisado sin una fuente real de datos.

Utilizar IA para decidir entre Table y List

Puedes utilizar ChatGPT, Claude o Gemini.

Por ejemplo:

Tengo esta información:

[pegar datos]

Necesito presentarla en una Página web.

Indica si conviene utilizar:
- Table;
- List;
- List Group;
- Cards.

Prioriza claridad y responsive.

No inventes datos.

IA para organizar una Table

Tengo estos datos:

[pegar]

Quiero convertirlos en una Table.

Propón:
- encabezados de columnas;
- orden de columnas;
- orden de filas.

No modifiques ningún valor.
No inventes información faltante.

IA para reducir columnas

Esta Table tiene estas columnas:

[lista]

Objetivo:
[objetivo]

Identifica cuáles son esenciales para una vista resumida en una Página web y cuáles podrían trasladarse a una ficha de detalle.

No elimines datos definitivamente.
Solo clasifícalos.

IA para revisar consistencia

Revisa estos datos tabulares:

[pegar]

Comprueba:
- formato de fechas;
- unidades;
- monedas;
- encabezados;
- filas incompletas.

No corrijas valores numéricos.
Solo señala inconsistencias.

IA para List Group

Tengo estos elementos:

[lista]

Quiero mostrarlos mediante List Group.

Ordénalos según:
[criterio]

Mantén los nombres existentes.
No inventes nuevas opciones.

IA para decidir Badge

Tengo estas etiquetas:

[lista]

Clasifica cuáles funcionan realmente como Badge y cuáles deberían ser:
- Heading;
- Paragraph;
- Button;
- texto normal.

Un Badge debe ser breve e informativo.

No inventes categorías.

IA para detectar Badges temporales

Tengo estas Cards:

[pegar contenido]

Identifica Badges que requieren mantenimiento temporal, por ejemplo:
- Nuevo;
- Oferta;
- Disponible;
- Próximamente;
- Más vendido.

No cambies los textos.
Indícame qué debería verificarse periódicamente.

IA para validar concepto de Progress Bar

Quiero utilizar Progress Bar para mostrar:

[describir dato]

Analiza si existe una métrica cuantificable real que justifique un porcentaje.

Si no existe, recomiéndame entre:
- Badge;
- Timeline;
- texto;
- otro recurso no cuantitativo.

No inventes porcentajes.

Este prompt es especialmente útil

porque evita utilizar barras únicamente por estética.

IA para revisar porcentajes

Tengo estas Progress Bars:

[lista con etiquetas y valores]

No cambies los porcentajes.

Indica qué información debería poder verificar para justificar cada valor antes de publicarlo.

IA para CSS de Table

Estoy personalizando una Table en Waclis.

La sección utiliza:
.specifications-section

La Table:
.specifications-table

Necesito:
- ancho 100 % de su Container;
- encabezado claramente diferenciado;
- Padding cómodo;
- Borders sutiles;
- no afectar otras Tables.

Waclis utiliza Bootstrap 4.

No modifiques HTML.
No agregues JavaScript.

Devuélveme solamente CSS limitado a .specifications-section.

IA para responsive de Table

Tengo una Table con estas columnas:

[lista]

En celular queda demasiado ancha.

Antes de generar CSS:
1. analiza si hay columnas innecesarias;
2. detecta encabezados demasiado largos;
3. identifica contenido que debería pasar a una ficha de detalle.

No ocultes datos automáticamente.
No utilices overflow-x:hidden como solución.

IA para List Group

Tengo un List Group dentro de:
.resources-section

Los Items usan:
.resource-item

Necesito:
- Padding de 16 px;
- separación clara;
- Hover solamente si los Items son Links;
- responsive;
- no afectar otros List Group.

No cambies HTML.
Devuélveme solamente CSS.

IA para Badge

Tengo Badges dentro de:
.products-section

Todos utilizan:
.product-badge

Necesito:
- apariencia compacta;
- texto legible;
- Border radius tipo píldora;
- no hacerlos parecer Buttons;
- no afectar otros Badges del sitio.

Devuélveme solamente CSS localizado.

IA para Progress Bar

Tengo una Progress Bar dentro de:
.project-section

El dato real es:
75 %

Necesito personalizar únicamente:
- altura;
- Border radius;
- separación respecto del Label.

No cambies el valor.
No inventes animaciones.
No agregues JavaScript.
No afectes otras Progress Bars.

IA para detectar CSS global peligroso

Revisa este CSS:

[pegar]

Busca selectores globales sobre:
- table;
- th;
- td;
- .list-group;
- .list-group-item;
- .badge;
- .progress;

que puedan afectar otros componentes de la Página web.

No modifiques el código.
Solo señala riesgos.

Buenas prácticas para Table

Recomendamos:

• utilizarla solamente para datos tabulares;

• definir encabezados claros;

• mantener filas consistentes;

• utilizar datos reales;

• limitar la cantidad de columnas;

• resumir textos largos;

• revisar responsive;

• no utilizar Table para layout;

• mantener formatos de unidades y fechas consistentes;

• utilizar Navigator al clonar filas;

• revisar todos los datos de una fila clonada;

• mantener información actualizada.

Buenas prácticas para List Group

Recomendamos:

• utilizarlo para elementos relacionados;

• mantener un criterio común;

• evitar grupos demasiado extensos;

• utilizar Navigator;

• clonar Items completos;

• revisar Links;

• mantener orden lógico;

• utilizar Hover solamente cuando exista interacción.

Buenas prácticas para Badge

Recomendamos:

• mantener textos breves;

• utilizarlo como etiqueta;

• diferenciarlo de Button;

• no depender únicamente del color;

• mantener estados actualizados;

• revisar Badges temporales;

• evitar afirmaciones de popularidad sin datos;

• limitar la cantidad por Card.

Buenas prácticas para Progress Bar

Recomendamos:

• utilizar datos cuantificables reales;

• explicar qué mide el porcentaje;

• mantener valor visual y numérico sincronizados;

• no inventar métricas;

• diferenciarla de Timeline y Badge;

• mantener información actualizada;

• no simular progreso dinámico;

• revisar mobile.

Errores frecuentes

Utilizar Table para maquetar la página

Utiliza Grid Row.

Utilizar Table para una simple lista

Utiliza List o List Group.

Utilizar Table con demasiadas columnas

Simplifica.

Incluir párrafos enormes en las celdas

Utiliza otra estructura.

Clonar una fila y cambiar solamente la primera celda

Revisa toda la fila.

Dejar filas vacías

Elimínalas.

Utilizar filas vacías como espacio

Utiliza Margin o Padding.

Mantener datos manuales desactualizados

Revísalos.

Mostrar stock manual como si fuera dinámico

No asumas sincronización.

Aplicar CSS global sobre table, th o td

Puede afectar otras Tables.

Utilizar List Group para una lista enorme sin categorías

Organiza mejor el contenido.

Clonar un List Item y dejar el Link anterior

Actualiza Url.

Aplicar Hover a Items no clicables

Puede confundir.

Utilizar Badge como Button

Badge informa; Button actúa.

Utilizar Badge demasiado largo

Utiliza texto normal.

Mantener “Nuevo” indefinidamente

Actualiza.

Mantener “Oferta” después de finalizar

Retírala.

Utilizar “Más vendido” sin datos

No inventes popularidad.

Mostrar “Disponible” cuando la información cambia constantemente

Evalúa si debe ser un dato dinámico.

Depender únicamente del color del Badge

Incluye texto.

Poner demasiados Badges

Reduce ruido.

Utilizar Progress Bar como decoración

Debe representar un dato.

Mostrar “Diseño 95 %” sin significado cuantificable

No inventes porcentajes.

Mostrar “Satisfacción 99 %” sin fuente

No publiques métricas sin respaldo.

Cambiar el texto del porcentaje pero no la barra

Mantén coherencia.

Cambiar la barra pero no el texto

Mismo problema.

Utilizar Progress Bar como tracking de pedidos sin datos dinámicos

No simules seguimiento.

Utilizar Progress Bar cuando solo sabes “En proceso”

Badge puede ser mejor.

Mantener porcentajes antiguos

Actualízalos.

Aplicar CSS global sobre .badge

Puede afectar otros elementos.

Aplicar CSS global sobre .progress

Puede modificar todas las barras.

Duplicar IDs al clonar componentes

Mantén IDs únicos.

Abrir Code editor para cambios simples

Utiliza primero Contenido y Estilo.

Agregar JavaScript sin necesidad

No es necesario para contenido estático.

Flujo recomendado

1. IDENTIFICAR EL TIPO DE INFORMACIÓN
↓
2. ELEGIR TABLE / LIST GROUP / BADGE / PROGRESS BAR
↓
3. COMPROBAR QUE LOS DATOS SEAN REALES
↓
4. AGREGAR EL COMPONENTE
↓
5. REVISAR NAVIGATOR
↓
6. REEMPLAZAR TODO EL CONTENIDO DE EJEMPLO
↓
7. CLONAR / ELIMINAR UNIDADES COMPLETAS
↓
8. REVISAR LINKS SI EXISTEN
↓
9. REVISAR IDS / CLASSES
↓
10. PERSONALIZAR ESTILO
↓
11. REVISAR LINKED STYLES
↓
12. COMPROBAR INFORMACIÓN TEMPORAL
↓
13. CONFIGURAR RESPONSIVE
↓
14. REVISAR DESKTOP
↓
15. REVISAR TABLET
↓
16. REVISAR CELULAR
↓
17. GUARDAR CAMBIOS
↓
18. VER PÁGINA
↓
19. COMPROBAR DATOS Y FUNCIONES

Checklist antes de finalizar

Table

• La información realmente necesita filas y columnas.

• No utilicé Table para maquetar la Página web.

• Los encabezados son claros.

• Cada fila sigue la misma estructura.

• Los datos corresponden al encabezado correcto.

• No hay filas vacías.

• No hay celdas de ejemplo.

• Los valores son reales.

• Las unidades son consistentes.

• Las fechas mantienen el mismo formato.

• Los precios están actualizados si son manuales.

• La cantidad de columnas es razonable.

• La Table sigue siendo legible en celular.

• No reduje el texto hasta volverlo ilegible.

• Al clonar una fila actualicé todas sus celdas.

• Utilicé Navigator.

List Group

• Los Items pertenecen al mismo conjunto.

• El orden tiene sentido.

• No hay demasiados elementos sin organización.

• Los Items clicables tienen la URL correcta.

• No quedan Links de elementos clonados.

• El Hover se utiliza solo cuando corresponde.

• Los textos se adaptan correctamente a mobile.

Badge

• El texto es breve.

• El Badge representa realmente una etiqueta o estado.

• No lo utilicé como Button.

• No parece clicable si no lo es.

• Los estados son reales.

• “Nuevo” sigue siendo válido.

• Las ofertas siguen vigentes.

• Las afirmaciones de popularidad tienen fundamento.

• No dependo únicamente del color.

• No hay demasiados Badges.

• Los Badges clonados fueron revisados.

Progress Bar

• Existe una métrica real.

• El porcentaje tiene un significado claro.

• El valor es verificable.

• No inventé porcentajes por diseño.

• El ancho visual corresponde al valor.

• El valor visible corresponde a la barra.

• No estoy simulando un sistema dinámico.

• El dato se mantiene actualizado.

• La barra continúa siendo clara en celular.

• No utilizo Progress Bar cuando Badge sería más preciso.

General

• Utilicé Navigator.

• Los IDs personalizados son únicos.

• Las Classes compartidas tienen sentido.

• Linked styles tiene el alcance esperado.

• Desktop se ve correctamente.

• Tablet se ve correctamente.

• Celular se ve correctamente.

• No existe scroll horizontal inesperado.

• No apliqué CSS global peligroso.

• No eliminé Classes estructurales sin comprenderlas.

• No agregué JavaScript innecesario.

• No quedan datos de ejemplo.

• Guardé los cambios.

• Revisé el resultado mediante Ver página.

En resumen

Estos cuatro componentes sirven para presentar información, pero cumplen funciones diferentes:

TABLE
→ datos relacionados mediante filas y columnas

LIST GROUP
→ conjunto estructurado de elementos

BADGE
→ etiqueta o estado breve

PROGRESS BAR
→ magnitud o progreso cuantificable

Una Table es apropiada para:

Producto | Medida | Peso

pero no para:

Image | Heading | Button

Si quieres crear columnas visuales:

utiliza Grid Row.

List Group es útil para:

Recursos
Tutoriales
Documentación
Soporte

cuando quieres mantenerlos como un conjunto.

Badge puede utilizarse para:

NUEVO

DISPONIBLE

ARTÍCULO

pero recuerda:

las etiquetas temporales necesitan mantenimiento.

Una Card clonada puede conservar:

NUEVO

aunque el nuevo contenido no lo sea.

Finalmente, Progress Bar debe representar un valor real.

████████████████░░░░
80 %

solo tiene sentido si existe una respuesta clara a:

“¿80 % de qué?”

Si no existe una métrica real:

no inventes una.

Puede ser más preciso utilizar:

[ EN PROCESO ]

o explicar las etapas mediante:

Timeline.

También recuerda que estos componentes creados manualmente deben considerarse contenido editable.

No asumas que:

• Table actualiza precios;

• Badge conoce el stock;

• Progress Bar conoce el avance;

automáticamente.

Finalmente:

elegir el componente correcto → cargar datos reales → revisar Navigator → adaptar responsive → Guardar Cambios → Ver página.

Una buena presentación de información no consiste en utilizar la mayor cantidad de componentes posibles.

Consiste en elegir el componente que permita al visitante comprender el dato con menor esfuerzo y sin generar interpretaciones incorrectas.