Crear una Página web con el Editor de bloques de Waclis no termina cuando:

“todo se ve bien”

Una página profesional también debe comprobarse desde otros puntos de vista:

estructura;
contenido;
jerarquía;
responsive;
accesibilidad;
Links;
formularios;
componentes interactivos;
imágenes;
rendimiento;
CSS;
código;
mantenimiento futuro.

Una Section puede verse perfectamente y contener:

un Link incorrecto;
un ID duplicado;
una Image sin Alt;
una Card que se rompe en tablet;
un Form que no envía;
CSS que afecta otra página;
un proyecto con información antigua;
un CTA que promete una acción distinta de la real.

Por eso conviene realizar una auditoría final sistemática.

¿Qué vamos a auditar?

Utilizaremos este orden:

1. OBJETIVO DE LA PÁGINA
↓
2. CONTENIDO
↓
3. NAVIGATOR Y ESTRUCTURA
↓
4. HEADINGS
↓
5. GRID Y RESPONSIVE
↓
6. SISTEMA VISUAL
↓
7. ACCESIBILIDAD
↓
8. LINKS Y CTA
↓
9. FORMULARIOS
↓
10. COMPONENTES INTERACTIVOS
↓
11. IMÁGENES Y MULTIMEDIA
↓
12. MAPAS Y EMBEDS
↓
13. ANIMACIONES
↓
14. CLASSES, IDS Y LINKED STYLES
↓
15. CSS Y CÓDIGO
↓
16. DEPENDENCIAS
↓
17. RENDIMIENTO
↓
18. CONTENIDO TEMPORAL
↓
19. PRUEBA DESDE VER PÁGINA
↓
20. MANTENIMIENTO FUTURO

Primera regla

Audita primero la estructura y la función. Deja los pequeños detalles estéticos para el final.

No comiences por

“este Border radius debería tener 14px o 16px”

si todavía no sabes si:

el formulario funciona

la página tiene scroll horizontal en celular

Auditoría vs edición

Durante una auditoría conviene separar dos etapas:

DETECTAR

CORREGIR

Primero crea una lista de problemas.

Después corrige.

¿Por qué?

Si modificas mientras revisas:

puedes perder de vista:

qué faltaba;
qué cambiaste;
qué nuevo problema apareció.

Segunda regla

Primero identifica. Después prioriza. Finalmente corrige.

Sistema de prioridad

Puedes clasificar cada hallazgo como:

Crítico

Algo impide utilizar correctamente la página.

Por ejemplo:

Form no envía;
CTA lleva a URL incorrecta;
contenido sale de pantalla;
información falsa;
página ilegible en mobile.

Importante

La página funciona,

pero existe un problema significativo.

Por ejemplo:

jerarquía de Heading incorrecta;
Image demasiado pesada;
IDs duplicados;
contenido importante sin Alt adecuado;
CSS demasiado global.

Mejora

No rompe la experiencia,

pero puede optimizarse.

Por ejemplo:

espacio ligeramente inconsistente;
Hover demasiado fuerte;
descripción demasiado extensa.

Ejemplo

CRÍTICO
CTA de Plan Premium abre Plan Estandar.

IMPORTANTE
Grid de servicios mantiene 3 columnas en tablet.

MEJORA
Padding de Testimonios podría reducirse en mobile.

Antes de comenzar

Realiza:

Guardar Cambios

si tienes modificaciones pendientes.

No asumimos autosave

y no existe un segundo paso separado de publicación.

Paso 1. Define el objetivo de la página

Antes de mirar el diseño:

pregunta:

¿Para qué existe esta página?

Por ejemplo

Página institucional:

explicar quién es la empresa,
qué ofrece
y cómo contactar.

Landing:

conducir a una consulta específica.

Página de servicios:

presentar las soluciones disponibles.

Si no puedes expresar el objetivo en una frase:

puede existir un problema de arquitectura.

Paso 2. Recorre la página solamente leyendo

No mires todavía:

sombras;
colores;
animaciones.

Lee:

Hero
↓
Section 2
↓
Section 3
↓
Section 4
↓
CTA

Pregunta:

¿la información tiene un orden lógico?
¿cada Section aporta algo nuevo?
¿existen repeticiones?
¿el visitante sabe qué hacer?

Paso 3. Cada Section debe tener una función

Puedes escribir:

Hero
→ explicar propuesta

Beneficios
→ explicar utilidad

Servicios
→ explicar oferta

Proyectos
→ mostrar evidencia

CTA
→ invitar a avanzar

Si encuentras:

Section A
→ explicar servicios

Section B
→ explicar servicios

Section C
→ explicar servicios

puede existir redundancia.

Paso 4. Busca contenido de relleno

Revisa si todavía existe:

Lorem ipsum

O:

Título de ejemplo

O:

Proyecto 1

O:

Calle Falsa 123

O:

correo@ejemplo.com

O:

como URL.

Ninguno debería permanecer accidentalmente.

Paso 5. Busca contenido generado como ejemplo

También revisa textos que pudieron utilizarse durante el diseño.

Por ejemplo:

Cliente ejemplo

O:

+300% de resultados

Si no corresponde a información real:

elimínalo.

Tercera regla

Nada que haya sido utilizado como placeholder durante el diseño debe confundirse con información real al finalizar.

Paso 6. Revisa afirmaciones comerciales

Busca expresiones como:

el mejor

número 1

garantizado

instantáneo

sin límites

más elegido

Comprueba que sean correctas y puedan sostenerse.

Si no:

modifica la redacción.

Paso 7. Revisa cifras

Especialmente:

clientes;
años;
productos;
proyectos;
porcentajes;
resultados.

Un Counter visual:

+5.000

no verifica automáticamente el dato.

Comprueba la fuente interna de esa información.

Paso 8. Revisa proyectos

Cada proyecto debería:

existir;
corresponder al trabajo realizado;
utilizar la Image correcta;
tener descripción precisa.

No atribuyas a la empresa:

tareas que no realizó;
resultados que no conoce.

Paso 9. Revisa testimonios

Cada testimonio debe ser:

real;
correctamente atribuido cuando corresponde.

No publiques un texto generado por IA como:

testimonio de un cliente

si nunca fue expresado por esa persona.

Paso 10. Revisa logos

Cada logo debe representar:

una relación real que corresponda mostrar

No utilices marcas conocidas como decoración.

Paso 11. Abre Navigator

Ahora comenzamos la auditoría estructural.

Utiliza:

Navigator

como mapa completo de la página.

Conceptualmente puedes encontrar:

BODY
├── Hero
├── About
├── Benefits
├── Services
├── Portfolio
├── Testimonials
├── CTA
└── Contact

Recorre cada nivel.

Paso 12. Busca Sections vacías

Por ejemplo:

SECTION
└── CONTAINER

sin contenido.

Puede generar:

espacios innecesarios;
Padding vacío.

Si no cumple ninguna función:

elimínala.

Paso 13. Busca Containers vacíos

También:

Section
└── Container
    ├── Container vacío
    └── Grid Row

El Container vacío puede ser residual.

No elimines automáticamente.

Confirma que realmente no tenga función.

Paso 14. Busca wrappers innecesarios

Ejemplo:

Section
└── Container
    └── Container
        └── Container
            └── Grid Row

Pregunta:

¿necesitamos realmente tres Containers?

Algunos diseños pueden necesitar wrappers adicionales.

Pero una jerarquía accidentalmente compleja:

dificulta mantenimiento;
complica responsive.

Paso 15. Busca componentes fuera de la estructura esperada

Por ejemplo:

Grid Row
├── Column
├── Column
└── Button fuera de Column

Si el CTA debería pertenecer a una Column:

revisa la estructura.

Paso 16. Revisa el orden real

Navigator también permite comprobar:

qué aparece primero en el documento

Esto es especialmente importante para mobile.

Desktop puede presentar:

IMAGE | TEXT

Pero en Navigator:

Image
Text

En mobile:

probablemente ese orden será importante.

Paso 17. Revisa elementos clonados

Busca:

Section duplicada;
Card duplicada;
Paragraph repetido;
Button repetido.

Puede ocurrir que una copia utilizada durante el diseño haya quedado accidentalmente.

Paso 18. Revisa elementos ocultos

Un elemento puede existir

aunque no se vea en tu preview.

Revisa:

Avanzado → Hide based on device screen width

Comprueba que no haya contenido:

oculto accidentalmente.

Paso 19. Revisa Opacity

Un elemento con:

Opacity: 0

puede seguir existiendo.

No confundas:

invisible

con:

eliminado

Paso 20. Revisa Heading principal

Haz una lista de todos:

H1
H2
H3

Una estructura institucional podría ser:

H1
Propuesta principal

H2
Quiénes somos

H2
Servicios

    H3
    Servicio A

    H3
    Servicio B

H2
Proyectos

    H3
    Proyecto A

H2
Contacto

Paso 21. Revisa el H1

Pregunta:

¿existe?
¿representa el tema principal de la página?
¿está duplicado sin necesidad?

No utilices H1 simplemente porque:

es el tamaño más grande

Paso 22. Revisa H2

Los H2 deberían representar:

grandes bloques conceptuales.

Por ejemplo:

Nuestros servicios

No utilices un H2 para:

un pequeño Badge

solo por apariencia.

Paso 23. Revisa H3

Puede ser apropiado para:

Cards de servicios;
proyectos;
elementos internos.

Mantén una jerarquía comprensible.

Paso 24. No cambies niveles para solucionar diseño

Si un H2 es demasiado grande:

utiliza:

Estilo → Typography

No:

H2 → H5

solo para reducir Font size.

Paso 25. Lee únicamente los Headings

Haz una prueba.

Oculta mentalmente los Paragraphs.

Lee:

Título principal
Quiénes somos
Beneficios
Servicios
Proyectos
Preguntas frecuentes
Contacto

¿La estructura se entiende?

Si no:

revisa los títulos.

Paso 26. Auditoría del Grid

Selecciona cada:

Grid Row

Revisa:

Direction;
Vertical align;
Horizontal align;
Wrap;
Columns;
tamaños por dispositivo.

Paso 27. Revisa la distribución desktop

Por ejemplo:

Hero
7 + 5

Services:

4 + 4 + 4

Contact:

7 + 5

Comprueba que exista:

espacio suficiente para el contenido.

Paso 28. Revisa tablet

Este paso es obligatorio.

Muchos diseños fallan en:

ancho intermedio

Por ejemplo:

desktop:

3 Cards

tablet:

puede necesitar:

2 Cards

No mantengas tres

si quedan demasiado estrechas.

Paso 29. Revisa mobile

Normalmente muchas grillas se transforman en:

1 columna

Especialmente:

Services;
Projects;
Pricing;
Form.

No reduzcas excesivamente contenido para mantener columnas.

Paso 30. Revisa Wrap

Una Row puede estar impidiendo que:

las Columns bajen

Eso puede producir:

compresión;
overflow.

Paso 31. Revisa Direction

Especialmente:

Text + Image

Comprueba que mobile tenga un orden lógico.

Paso 32. Busca scroll horizontal

En mobile:

intenta desplazar lateralmente.

Si puedes:

← →

existe algún elemento desbordado.

Revisa:

Grid;
Width;
Min Width;
Margin;
Position;
Transform;
Images/Iframes.

No soluciones:

body {
    overflow-x:hidden;
}

como primera medida.

Encuentra la causa.

Paso 33. Revisa Width

Busca elementos con:

Width fija

Por ejemplo:

700px

Puede funcionar desktop,

pero no mobile.

Paso 34. Revisa Min Width

Un:

min-width:500px

puede impedir que el componente se reduzca.

Muy importante en:

Cards;
Images;
Forms.

Paso 35. Revisa Max Width

Puede ser útil para evitar:

Paragraph demasiado ancho

Pero:

un Max Width excesivamente pequeño puede hacer que:

el Heading rompa en demasiadas líneas

Paso 36. Revisa Height

Busca:

Height fija;
Min Height.

Especialmente en:

Cards;
Hero;
Images.

Un Height fijo puede cortar contenido.

Paso 37. Revisa Sections en Full Height

En cada Section:

comprueba:

Container height → Auto / Full

Pregunta si:

Full

es realmente necesario.

En muchos bloques:

Auto

es más flexible.

Paso 38. Revisa Padding global de cada Section

Comprueba que exista una lógica.

Por ejemplo:

Section normal
→ espacio generoso

mobile:

menor espacio

No necesitas números idénticos,

pero sí una sensación consistente.

Paso 39. Busca acumulación de espacios

Puede existir:

Section A
padding-bottom grande

+

Section B
padding-top grande

Resultado:

espacio enorme

Revisa ambos lados.

Paso 40. Busca Margins utilizados como layout

Por ejemplo:

margin-left:220px

para colocar una Image.

Eso puede ser frágil.

Pregunta si:

Grid

debería resolver esa posición.

Paso 41. Revisa Margins negativos

No son siempre incorrectos.

Pero valores como:

-100px
-200px

merecen una revisión especial.

Pregunta:

¿este valor crea un efecto intencional o tapa un problema estructural?

Paso 42. Revisa Position

Desde:

Estilo → Display

busca:

Static
Relative
Absolute

según lo configurado.

Position absolute debería utilizarse:

con intención.

No para maquetar toda la página.

Paso 43. Revisa Fixed si aparece mediante CSS

Un elemento Fixed puede:

tapar contenido;
permanecer sobre Footer.

Comprueba que sea realmente necesario.

Paso 44. Revisa Transform

Busca CSS como:

transform: translateX(...);

O:

transform: scale(...);

Puede generar overflow.

Paso 45. Auditoría visual general

Ahora observa la página como conjunto.

Pregunta:

¿parece una sola Página web?

O:

¿parecen diez plantillas diferentes?

Revisa:

paleta;
Border radius;
sombra;
iconos;
Buttons;
Typography.

Paso 46. Sistema de Buttons

Comprueba:

CTA principal

¿Tiene una apariencia coherente en:

Hero;
CTA final;
Forms?

No necesariamente idéntica en todos los contextos,

pero debe existir una jerarquía reconocible.

Paso 47. CTA secundario

Puede aparecer como:

Link;
Button secundario.

Debe distinguirse del principal.

No hagas:

dos Buttons idénticos

si uno debería ser secundario.

Paso 48. Sistema de Cards

Revisa:

Border radius;
Padding;
sombra;
Typography.

Services y Projects pueden ser diferentes,

pero deberían pertenecer al mismo universo visual.

Paso 49. Sistema de iconos

Comprueba si mezclaste:

Font Icon
SVG lineal
emoji
icono 3D
fotografía

sin intención.

Mantén una lógica visual.

Paso 50. Sistema de Backgrounds

Busca un:

efecto arcoíris

sin justificación.

También evita:

12 Sections idénticas blancas

si el recorrido necesita separación.

Busca:

variedad controlada

Paso 51. Revisa Typography

Comprueba:

Heading principal;
H2;
H3;
Paragraph;
texto pequeño;
CTA.

Debe existir una jerarquía.

Paso 52. Revisa Line height

Especialmente en:

Headings grandes;
Paragraphs largos.

Una mala Line height puede:

hacer todo demasiado compacto;
generar enormes espacios.

Paso 53. Revisa Letter spacing

Especialmente:

mayúsculas;
Eyebrows.

No exageres.

Paso 54. Revisa contraste

El texto debe ser claramente distinguible del fondo.

Especialmente:

texto sobre Background Image

Si necesitas:

utiliza:

Overlay

cuando corresponda.

Paso 55. No dependas únicamente del color

Por ejemplo:

rojo = error
verde = correcto

sin texto o señal adicional.

La información importante debe poder comprenderse.

Paso 56. Auditoría de Images

Selecciona cada Image.

Revisa:

recurso;
Width;
Height;
Alt;
Align.

Paso 57. Alt

Pregunta:

¿la Image aporta información?

Si sí:

el Alt debería describirla de forma útil.

No:

imagen1

O:

foto

Ejemplo:

Captura de la Página web mostrando el catálogo de productos

cuando corresponde.

Paso 58. Images puramente decorativas

Su tratamiento puede ser diferente

según la estructura utilizada.

Lo importante:

no utilices un Alt engañoso simplemente para llenar el campo.

Paso 59. Revisa deformaciones

Una Image no debería verse:

estirada

Revisa:

Width;
Height;
proporción.

Paso 60. Revisa Cover / Contain

Fotografía:

Cover puede funcionar

Captura, logo o producto completo:

Contain puede ser más adecuado

Siempre revisa el resultado.

Paso 61. Revisa calidad

Una Image puede estar:

pixelada

Eso degrada la página.

También evita utilizar un archivo enorme para:

un icono pequeño

Paso 62. Revisa todas las imágenes en mobile

Cover puede recortar de forma distinta.

Una Background Image puede perder:

sujeto;
producto.

Paso 63. Auditoría de Links

Ahora crea una lista de todos los Links.

Incluye:

Hero;
Cards;
CTA;
proyectos;
teléfono;
email;
WhatsApp;
redes;
Cómo llegar.

Paso 64. Comprueba #

Busca Links con:

Si no existe una navegación real:

corrígelo o elimina el CTA.

Paso 65. Comprueba Url

Cada Link debe llevar exactamente al destino correspondiente.

Especialmente después de clonar.

Ejemplo

Card B:

Proyecto B

pero URL:

/proyecto-a

Problema crítico.

Paso 66. Comprueba Target

Revisa según la función del Link.

No asumas una regla universal.

Simplemente confirma que se comporta como deseas.

Paso 67. Comprueba Rel cuando corresponda

Si existe una configuración específica:

revísala.

No copies valores sin comprenderlos.

Paso 68. Comprueba Download

Si está habilitado:

la acción debe corresponder a:

descarga

No lo habilites accidentalmente en un Link normal.

Paso 69. Textos de Links

Evita:

Haz clic aquí

Mejor:

Ver planes

O:

Conocer proyecto

Paso 70. Auditoría de CTA

Para cada CTA escribe:

TEXTO
→
ACCIÓN REAL

Ejemplo:

Contactar por WhatsApp
→ WhatsApp

Correcto.

Ejemplo:

Comprar ahora
→ formulario de consulta

Inconsistente.

Paso 71. Revisa CTA duplicados

Si el mismo CTA aparece varias veces:

comprueba que todos utilicen:

el mismo destino

cuando esa sea la intención.

Paso 72. Revisa Links internos

Si utilizas:

#servicios

Debe existir:

id="servicios"

Y solo una vez.

Paso 73. Revisa teléfono

Si el número es clicable:

haz clic.

Comprueba:

número.

Paso 74. Revisa email

Comprueba:

dirección visible;
destino del Link.

Pueden ser diferentes intencionalmente,

pero debes saberlo.

Paso 75. Revisa WhatsApp

Haz clic realmente.

Comprueba:

número;
mensaje cuando exista.

Paso 76. Revisa Social icons

Cada red debe llevar:

al perfil correcto

No a:

página principal genérica de la red.

Paso 77. Auditoría de Forms

Un Form se audita en dos niveles:

DISEÑO
+
FUNCIONALIDAD

Paso 78. Revisa estructura

Navigator:

Form
├── Input
├── Input
├── Text Area
└── Submit

Comprueba que los campos pertenezcan al Form cuando corresponda.

Paso 79. Revisa Labels

El visitante debe comprender cada campo.

No dependas únicamente del Placeholder.

Paso 80. Revisa Types

Por ejemplo:

un campo destinado a email

debería utilizar el tipo adecuado cuando la configuración lo permite.

Paso 81. Revisa Names

Especialmente si el Form ya funciona.

No modifiques:

Name

por estética.

El procesamiento puede depender de él.

Paso 82. Revisa IDs

No deberían estar duplicados.

Especialmente después de clonar Inputs.

Paso 83. Obligatorios

Comprueba que:

visual

corresponda a:

validación real

Asterisco:

≠ required funcional

Paso 84. Prueba envío vacío

Intenta enviar sin completar.

Comprueba:

validaciones.

Paso 85. Prueba datos incorrectos

Por ejemplo:

un email inválido.

Comprueba comportamiento.

Paso 86. Prueba envío válido

Completa todos los campos necesarios.

Envía.

Paso 87. Comprueba confirmación

No basta con:

el Button respondió

Comprueba el resultado real.

Paso 88. Comprueba recepción

Si el formulario debe generar:

email;
registro;
otro proceso;

confirma que suceda.

Paso 89. Comprueba todos los campos

Especialmente campos agregados posteriormente.

Puede ocurrir:

Campo Empresa visible

pero:

no llega en el procesamiento

Visual:

≠ funcional

Paso 90. Prueba nuevamente después de cambiar HTML

Cualquier modificación estructural de un Form

merece una nueva prueba.

Paso 91. Auditoría de Tabs

Si existen:

haz clic en:

TODAS

las pestañas.

Comprueba:

contenido;
estado visual.

Paso 92. Accordeon

Abre y cierra:

todas las opciones.

Comprueba que:

contenido no se corte;
clonado no haya generado asociaciones incorrectas.

Paso 93. Carousel

Recorre:

todos los slides.

Comprueba:

Images;
Links;
controles.

Paso 94. Slider

Mismo principio.

No audites solamente el primer elemento visible.

Paso 95. Gallery

Abre/interactúa cuando tenga comportamiento interactivo.

Comprueba:

Images;
orden;
mobile.

Paso 96. Image Compare

Comprueba:

antes;
después.

Deben corresponder realmente a la comparación indicada.

Paso 97. Button Group

Comprueba cada Button individualmente.

Especialmente:

mobile.

Paso 98. Pagination

Si forma parte de una composición funcional:

comprueba comportamiento real.

No des por supuesto que un diseño visual implica navegación.

Paso 99. Auditoría de Mapas

Si existe un mapa:

comprueba:

ubicación mostrada

Debe coincidir con:

dirección escrita

Y con:

Cómo llegar

cuando exista.

Paso 100. Revisa el pin

No asumas que el proveedor interpretó correctamente la dirección.

Obsérvalo.

Paso 101. Revisa mobile

El mapa no debería:

desbordar;
dificultar excesivamente el scroll.

Paso 102. No ocultes atribuciones

No utilices CSS para eliminar elementos requeridos por el proveedor.

Paso 103. Auditoría de Video

Comprueba:

reproducción;
tamaño;
mobile.

Si utilizaste:

Embed Video

prueba realmente.

Paso 104. Iframe

Comprueba:

Width;
Height.

Evita reglas globales:

iframe {
    width:900px;
}

Paso 105. Embeds externos

Comprueba que:

sigan disponibles.

Un recurso de terceros puede:

dejar de funcionar;
cambiar.

Paso 106. Lottie

Pregunta:

¿aporta realmente?

Si solo agrega peso y movimiento:

evalúa si puede eliminarse.

Paso 107. Audio

Comprueba:

controles;
recurso.

Paso 108. Auditoría de animaciones

Desactiva mentalmente:

Animate on scroll

Pregunta:

¿la página sigue funcionando perfectamente?

Debe ser sí.

Paso 109. Revisa Delay

Evita que:

el visitante espere varios segundos

para ver contenido importante.

Paso 110. Revisa consistencia

No:

Card A → Fade
Card B → Bounce
Card C → Rotate

sin intención.

Paso 111. Revisa Hover

Especialmente:

Cards;
Links;
Buttons.

La información esencial debe poder comprenderse:

sin Hover

Porque touch no funciona igual.

Paso 112. Revisa Hover falso

Una Card no clicable

no debería comportarse como:

un gran Button

si eso genera confusión.

Paso 113. Revisa Focus en Forms

No elimines la señal de:

campo activo

por estética.

Paso 114. Auditoría de Classes

Revisa los elementos principales.

Pregunta:

¿las Classes tienen nombres comprensibles?

Mejor:

service-card

que:

box-final-new-2

Paso 115. Classes compartidas

Utilízalas para elementos que realmente comparten diseño.

Por ejemplo:

service-card

para varias Cards.

Paso 116. Variantes

Puedes utilizar:

service-card
service-card-featured

En lugar de duplicar todas las reglas.

Paso 117. Auditoría de IDs

Busca IDs.

Deben ser:

únicos

Especialmente:

Sections;
Forms;
Accordions;
anclas.

Paso 118. IDs después de clonar

Un error típico:

id="contacto"

aparece:

dos veces

Corrígelo.

Paso 119. No utilices IDs para todo

Si cinco Cards comparten estilo:

utiliza:

Class

No:

#card1
#card2
#card3

con CSS duplicado.

Paso 120. Linked styles

El Editor puede indicar:

Linked styles

Antes de modificar un elemento:

comprueba si:

comparte selector

con otros.

Pregunta:

¿quiero modificar todos?

Si sí:

perfecto.

Si no:

crea una variante apropiada.

No agregues un ID automáticamente

si una Class adicional resuelve mejor la diferencia.

Paso 121. Auditoría de CSS

Abre:

Variables / Css

cuando exista CSS personalizado.

No cambies nada todavía.

Busca primero:

scope

Paso 122. Busca selectores globales

Especialmente:

body

section

.container

.row

.card

img

button

input

No son siempre incorrectos.

Pero debes confirmar que:

realmente quieres modificar todo ese selector

Paso 123. Busca reglas .row

Una regla como:

.row {
    flex-wrap: nowrap;
}

puede romper:

múltiples grillas.

Localiza cuando sea una necesidad específica.

Paso 124. Busca .container

Modificar:

max-width

globalmente

puede cambiar todo el sitio.

Paso 125. Busca .card

Puede afectar:

servicios;
pricing;
proyectos.

Paso 126. Busca img

Puede afectar:

logo;
productos;
galería.

Paso 127. Busca a

Puede afectar:

Header;
Footer;
navegación.

Recuerda:

Header y Footer no se editan desde el Editor de bloques,

pero un CSS global puede afectarlos visualmente.

Paso 128. Busca input

Puede modificar:

Forms;
búsqueda;
otros procesos.

Paso 129. Busca Width rígidas

Por ejemplo:

width: 850px;

Pregunta:

¿puede adaptarse?

Paso 130. Busca Min Width

Especialmente valores altos.

Paso 131. Busca Height rígida

Muy importante en:

Cards con texto;
Sections.

Paso 132. Busca Position absolute

Pregunta para cada caso:

¿es realmente necesario?

Si se utiliza para maquetar:

texto;
imágenes;
CTA;

puede ser frágil.

Paso 133. Busca Position fixed

Comprueba que no tape:

contenido;
Footer.

Paso 134. Busca Margins negativos

Por ejemplo:

margin-top:-180px;

Evalúa si:

crea un efecto real;
corrige artificialmente otra cosa.

Paso 135. Busca !important

No significa automáticamente error.

Pero demasiados:

!important
!important
!important

pueden indicar:

especificidad desordenada.

Paso 136. Busca overflow:hidden

Especialmente:

body

html

Pregunta si está:

ocultando un problema responsive

Paso 137. Busca white-space: nowrap

Puede generar:

textos que no saltan de línea.

Paso 138. Busca transforms

Especialmente:

translate
scale

Revisa tablet/mobile.

Paso 139. Revisa media queries

Busca:

@media (...)

Comprueba:

que no se contradigan;
que los cambios realmente necesiten CSS.

Algunas adaptaciones pueden resolverse desde Grid Row.

Paso 140. Breakpoints

En el entorno del Editor puedes encontrar referencias como:

xs = 0
sm = 576px
md = 768px
lg = 992px

Utiliza los valores confirmados cuando realmente necesites CSS.

No es necesario inventar numerosos breakpoints.

Paso 141. Busca demasiadas media queries

Si una Section tiene:

10 breakpoints diferentes

pregunta:

¿el layout es demasiado rígido?

Paso 142. Auditoría de HTML

Si existe HTML personalizado:

selecciona el elemento.

Utiliza:

Editar código HTML <>

Revisa:

estructura;
Classes;
IDs;
estilos inline.

Paso 143. Inline styles

Busca:

style="width:700px"

Puede contradecir:

CSS;
responsive.

Paso 144. No elimines atributos que no comprendes

Especialmente en:

Forms;
componentes interactivos.

Investiga primero.

Paso 145. Code editor global

No lo utilices para hacer pequeñas correcciones.

En auditoría puede ayudarte a:

comprender el conjunto;

cuando realmente sea necesario.

Pero mayor alcance:

=
mayor riesgo

Paso 146. Code component

Recuerda:

Code

es un componente para mostrar contenido de código.

No es la herramienta para:

activar CSS;
editar la página completa.

Paso 147. Auditoría de Bootstrap

Waclis utiliza:

Bootstrap 4

Busca código añadido manualmente que dependa de:

Bootstrap 5.

Especialmente:

Classes copiadas de ejemplos externos.

Paso 148. No agregues Bootstrap nuevamente

Busca:

<link ... bootstrap ...>

O:

<script ... bootstrap ...>

añadidos manualmente.

Puede ser innecesario y generar conflictos.

Paso 149. Busca Tailwind

Classes como:

grid-cols-3

pueden indicar otra tecnología.

No agregues el framework únicamente para conservar una sección.

Traduce el diseño.

Paso 150. Busca React/Vue u otros frameworks

Código de componentes externos:

no debería pegarse ciegamente

dentro de una sección HTML.

Paso 151. Busca jQuery adicional

No agregues otra versión únicamente porque un ejemplo externo la requería.

Paso 152. Busca CDNs

Revisa:

CSS externos;
scripts;
fuentes.

Pregunta:

¿realmente los necesita esta página?

Paso 153. Busca librerías por un único efecto

Por ejemplo:

biblioteca de animación;
biblioteca de iconos.

Si Waclis ya ofrece:

Animate on scroll;
Font Icon;
Svg Icon;

puede ser innecesaria.

Paso 154. Auditoría de rendimiento

Ahora cuenta los recursos.

Por ejemplo:

Images: 18
Videos: 2
Mapas: 1
Lottie: 2
Embeds: 3

No existe un número universal correcto.

Pregunta:

¿cada recurso aporta valor?

Paso 155. Images grandes

Una Image utilizada en:

Card de 300px

no necesita necesariamente un archivo gigantesco.

Busca equilibrio entre:

calidad;
peso.

Paso 156. Videos

Pregunta si:

dos o tres Videos

son realmente necesarios en la misma página.

Paso 157. Mapas

Un mapa puede ser suficiente.

No cargues uno por cada pequeño dato de ubicación

sin necesidad.

Paso 158. Embeds sociales

Pueden cargar recursos de terceros.

Pregunta si:

Social icons

serían suficientes.

Paso 159. Lottie

No utilices una animación compleja únicamente para:

llenar espacio

Paso 160. Revisa elementos duplicados

Dos Images iguales cargadas varias veces visualmente:

pueden ser innecesarias.

Paso 161. Auditoría de contenido temporal

Busca:

Nuevo

Oferta

Hasta el...

Últimos cupos

En desarrollo

Todo contenido temporal necesita:

una futura revisión

Paso 162. Precios

Si aparecen en varias Sections:

comprueba que:

todos coincidan

Cada duplicación aumenta mantenimiento.

Paso 163. Horarios

Revisa:

días;
horarios de atención.

Paso 164. Dirección

Comprueba:

texto;
mapa;
Link Cómo llegar.

Paso 165. Teléfonos

Comprueba:

visible;
Link;
WhatsApp.

Paso 166. Fechas de eventos

Si una página corresponde a un evento:

comprueba:

fecha;
hora;
ubicación;
CTA.

Paso 167. Promociones

No deben quedar activas después de:

su fecha real

Paso 168. Badges “Nuevo”

Un producto no debería permanecer:

NUEVO

indefinidamente,

si el significado depende de actualidad.

Paso 169. Proyectos externos

Comprueba periódicamente:

URLs.

Un sitio de cliente puede:

cambiar;
dejar de existir.

Paso 170. Auditoría de accesibilidad práctica

Sin entrar en una evaluación técnica especializada completa,

puedes revisar cuestiones básicas.

Comprueba:

Headings;
Alt;
contraste;
Links descriptivos;
formularios identificables;
contenido no dependiente de Hover;
orden lógico.

Paso 171. Texto demasiado pequeño

No reduzcas Typography hasta:

resultar difícil de leer

solo para hacer entrar contenido.

Paso 172. Contraste

Especialmente:

gris claro sobre blanco

O:

texto sobre fotografía

Paso 173. Texto dentro de Images

Evita colocar información esencial solamente dentro de:

una imagen

Puede:

recortarse;
no adaptarse;
ser menos accesible.

Paso 174. Links identificables

Un Link debería poder comprenderse como acción.

Especialmente en Cards.

Paso 175. Iconos sin texto

Si el icono comunica una función esencial:

comprueba que exista:

contexto;
etiqueta.

Paso 176. Responsive con zoom

Aumenta el zoom del navegador.

Comprueba que:

texto no se corte;
Cards puedan crecer.

Paso 177. Navegación por teclado y Focus

En formularios y Links:

comprueba que el Focus no haya sido eliminado visualmente mediante CSS.

Paso 178. Auditoría desde Ver página

Hasta aquí trabajamos principalmente desde el Editor.

Ahora:

Guardar Cambios

Después:

Ver página

Esta es una etapa distinta.

Cuarta regla

Una página no está auditada hasta haberla probado desde el frontend real.

Paso 179. Haz un recorrido desde arriba hasta abajo

No saltes Sections.

Empieza:

Header

y termina:

Footer

Recuerda:

Header y Footer pertenecen a la plantilla,

pero debes comprobar que el contenido se integre correctamente con ellos.

Paso 180. Revisa transición Header → primera Section

No debería existir:

superposición;
espacio inexplicable.

Paso 181. Revisa última Section → Footer

Mismo principio.

Busca:

espacio vacío enorme

Puede existir una Section vacía.

Paso 182. Desktop real

Revisa:

ancho normal;
pantalla grande.

Boxed debería mantener lectura cómoda.

Paso 183. Tablet

No la omitas.

Revisa:

grillas;
pricing;
Forms.

Paso 184. Mobile

Recorre toda la página verticalmente.

Pregunta:

¿el orden sigue teniendo sentido?

Paso 185. Busca scroll horizontal

Intenta mover:

lateralmente

Si ocurre:

vuelve al diagnóstico responsive.

Paso 186. Prueba todos los CTA

No solo los principales.

Haz clic realmente.

Paso 187. Prueba navegación interna

Por ejemplo:

#servicios

Comprueba que llegue al lugar correcto.

Paso 188. Prueba formularios

Haz un envío real.

Paso 189. Prueba WhatsApp

Comprueba destino.

Paso 190. Prueba teléfono/email

Cuando corresponda.

Paso 191. Prueba componentes interactivos

Tabs.

Accordeons.

Carousel.

Slider.

Paso 192. Prueba mapa

Comprueba ubicación.

Paso 193. Prueba Videos y Embeds

No asumas que cargan.

Paso 194. Revisa errores visuales durante la carga

Por ejemplo:

contenido que salta;
espacio excesivo.

No todos los pequeños cambios durante carga representan necesariamente un error,

pero revisa si perjudican claramente la experiencia.

Paso 195. Revisa la página como visitante nuevo

Olvida que sabes cómo está construida.

Pregunta:

¿Entiendo qué estoy viendo?

Después:

¿sé qué ofrece?

Después:

¿sé qué puedo hacer?

Paso 196. Revisa como visitante mobile

No pienses:

“sé que el Button está más abajo”

El visitante no lo sabe.

¿La página conduce naturalmente hacia él?

Paso 197. Revisa como futuro administrador

Ahora cambia de perspectiva.

Pregunta:

¿podría actualizar esta página dentro de seis meses?

¿Las Classes tienen sentido?

¿El contenido está organizado?

¿O existe:

CSS misterioso
+
IDs incomprensibles
+
Position absolute
+
valores arbitrarios

Paso 198. Una buena auditoría también evalúa mantenimiento

Una página puede funcionar hoy

y ser extremadamente difícil de modificar.

Busca:

simplicidad razonable

Paso 199. Elimina código que ya no se utiliza

Si una Section fue eliminada

pero quedó CSS:

.old-section {
    ...
}

puede ser código residual.

Confirma antes de borrarlo.

Paso 200. Elimina Classes obsoletas cuando sea seguro

No necesitas mantener:

old-v2-final-test

si no cumple ninguna función.

Pero no elimines Classes funcionales de componentes sin comprenderlas.

Paso 201. Documenta personalizaciones avanzadas

Si una Section utiliza una solución especial:

puede ser útil mantener una lógica de nombres clara.

Por ejemplo:

homepage-featured-products-intro

Mucho mejor que:

box72

Paso 202. Define elementos de mantenimiento

Puedes crear una lista:

Revisar trimestralmente:
- precios;
- proyectos;
- testimonios;
- Links externos.

La frecuencia real dependerá del sitio.

Paso 203. Página que no cambia

Incluso una página institucional estable puede necesitar:

Links;
datos de contacto;

revisados ocasionalmente.

Paso 204. Landing temporal

Necesita más mantenimiento.

Especialmente:

promociones;
precios;
fechas;
CTA.

Paso 205. Página de proyectos

Revisa:

trabajos nuevos;
Links externos;
proyectos obsoletos.

Paso 206. Página de contacto

Revisa:

teléfono;
email;
dirección;
mapa;
Form.

Paso 207. IA como asistente de auditoría

Puedes utilizar ChatGPT, Claude o Gemini para revisar:

estructura;
contenido;
código.

Pero proporciona:

información concreta

No:

Audita mi web

sin contexto.

Prompt para arquitectura

Estoy auditando una página creada en Waclis.

Objetivo:
[...]

Sections:
[listar]

Para cada Section indica:
- función;
- posible repetición;
- si aporta al objetivo.

No inventes contenido.
No generes código.

Prompt para Navigator

Esta es la jerarquía de Navigator:

[pegar]

Busca:
- Sections vacías;
- Containers innecesarios;
- wrappers excesivos;
- elementos fuera de Rows/Columns.

Waclis utiliza Bootstrap 4.

No modifiques todavía.

Prompt para Headings

Headings:

[listar H1/H2/H3]

Audita:
- H1;
- jerarquía;
- saltos;
- redundancia.

No cambies niveles por motivos visuales.

Prompt responsive

Estructura de Grid:

[pegar]

Desktop:
[...]

Tablet:
[...]

Mobile:
[...]

Analiza:
- cantidad de columnas;
- orden;
- riesgo de overflow.

No generes CSS si puede resolverse desde Grid Row.

Prompt para contenido

Estos son los datos reales:

[datos]

Texto publicado:

[texto]

Marca cualquier afirmación que no esté respaldada.

Busca:
- resultados;
- métricas;
- clientes;
- garantías;
- superlativos.

No reescribas todavía.

Prompt para Links

Links:

Texto | URL

[listar]

Busca:
- #;
- destinos duplicados;
- CTA iguales con URLs distintas;
- texto que no coincide con la acción.

No inventes URLs.

Prompt para CSS

Waclis utiliza Bootstrap 4.

Audita este CSS:

[pegar]

Busca:
- selectores globales;
- .container;
- .row;
- .card;
- img;
- a;
- button;
- width fija;
- min-width;
- height;
- position:absolute;
- margin negativo;
- !important;
- overflow;
- media queries.

No corrijas todavía.

Prompt para Bootstrap/dependencias

Audita este HTML/CSS/JS para una página Waclis.

Waclis utiliza Bootstrap 4.

Busca dependencias de:
- Bootstrap 5;
- Tailwind;
- React;
- Vue;
- jQuery adicional;
- CDNs;
- librerías externas.

Clasifica:
- necesario;
- reemplazable;
- aparentemente innecesario.

No modifiques.

Prompt para Forms

Este Form actualmente funciona:

[HTML]

Audita:
- Names;
- IDs;
- Types;
- Labels;
- Button;
- posibles duplicados.

No modifiques atributos funcionales.
No inventes procesamiento.

Prompt para accesibilidad

Audita esta Section:

[contenido + estructura]

Busca:
- Headings;
- Alt;
- Links poco descriptivos;
- información dependiente de Hover;
- iconos sin contexto;
- posibles problemas de contraste descritos.

No reescribas todavía.

Prompt para mantenimiento

Este es el contenido de una página:

[pegar]

Identifica elementos que pueden quedar desactualizados:
- precios;
- fechas;
- promociones;
- horarios;
- proyectos;
- Links externos;
- Badges Nuevo.

Devuelve una lista de mantenimiento.

Prompt maestro de auditoría

Estoy realizando una auditoría final de una Página web
creada con el Editor de bloques de Waclis.

Waclis utiliza Bootstrap 4.

Objetivo de la página:
[...]

Sections:
[...]

Navigator:
[...]

Headings:
[...]

Links:
[...]

CSS personalizado:
[...]

Quiero una auditoría por etapas:

1. objetivo y contenido;
2. estructura;
3. Headings;
4. Grid;
5. responsive;
6. accesibilidad;
7. Links y CTA;
8. formularios;
9. multimedia;
10. Classes/IDs;
11. Linked styles;
12. CSS;
13. dependencias;
14. mantenimiento.

Clasifica cada hallazgo como:
- crítico;
- importante;
- mejora.

No inventes información.
No reescribas toda la página.
No generes código hasta terminar el diagnóstico.

Sistema de auditoría rápida: 10 preguntas

Si tienes poco tiempo,

responde:

1.

¿La página cumple un objetivo claro?

2.

¿La estructura se entiende en Navigator?

3.

¿H1/H2/H3 tienen jerarquía lógica?

4.

¿Desktop, tablet y mobile funcionan?

5.

¿Existe scroll horizontal?

6.

¿Todos los Links y CTA funcionan?

7.

¿Forms y componentes interactivos funcionan realmente?

8.

¿El CSS puede afectar otras partes?

9.

¿Todo el contenido es real y está actualizado?

10.

¿Podré mantener esta página fácilmente después?

Semáforo de auditoría

Puedes clasificar cada área:

🟢 CORRECTO

🟡 REVISAR

🔴 CORREGIR

Ejemplo

Contenido        🟢
Navigator        🟢
Headings         🟡
Desktop          🟢
Tablet           🔴
Mobile           🔴
Links            🟢
Form             🟢
CSS              🟡
Mantenimiento    🟢

No consideres terminada la página

mientras exista un:

🔴

en una función crítica.

Errores críticos que deberían resolverse antes de terminar

contenido fuera de pantalla;
CTA incorrecto;
Form que no funciona;
precios incorrectos;
datos falsos;
Links rotos;
información de contacto incorrecta;
mapa equivocado;
mobile inutilizable;
scripts o dependencias problemáticas.

Problemas importantes

Heading desordenados;
Images sin revisión;
CSS global;
IDs duplicados;
estructura demasiado compleja;
tablet deficiente;
contenido desactualizable sin plan.

Mejoras

espaciado;
pequeñas inconsistencias;
Hover;
simplificación visual.

Checklist maestro · Objetivo y contenido

La página tiene un objetivo claro.
Cada Section tiene una función.
No existen Sections redundantes.
No existe Lorem Ipsum.
No existen textos de ejemplo.
No existen datos ficticios.
No existen clientes inventados.
No existen testimonios inventados.
No existen métricas inventadas.
No existen promociones ficticias.
Las afirmaciones pueden sostenerse.
CTA y acciones están descritos correctamente.

Checklist maestro · Navigator

Revisé BODY.
Revisé todas las Sections.
No existen Sections vacías.
No existen Containers vacíos innecesarios.
No existen wrappers excesivos sin función.
Los componentes están dentro del padre correcto.
No existen copias accidentales.
El orden mobile tiene sentido.
Revisé elementos ocultos.
Revisé Opacity.

Checklist maestro · Headings

Existe un H1 principal claro.
No existen H1 duplicados sin necesidad.
H2 representa grandes Sections.
H3 representa contenidos internos.
No cambié niveles por tamaño visual.
La página se comprende leyendo únicamente Headings.
Los títulos no se repiten innecesariamente.

Checklist maestro · Grid

Revisé cada Grid Row.
Revisé Direction.
Revisé Vertical align.
Revisé Horizontal align.
Revisé Wrap.
Revisé tamaños de Columns.
Desktop funciona.
Tablet funciona.
Mobile funciona.
No mantuve demasiadas columnas en pantallas estrechas.
El orden de lectura es correcto.

Checklist maestro · Size y spacing

Revisé Width.
Revisé Max Width.
Revisé Min Width.
Revisé Height.
Revisé Min Height.
Revisé Padding.
Revisé Margin.
No existen Margins negativos innecesarios.
No existen espacios vacíos inexplicables.
No existen Heights rígidas problemáticas.
Full Height solo se utiliza con intención.

Checklist maestro · Responsive

No existe scroll horizontal.
Images no desbordan.
Cards se apilan correctamente.
Forms se adaptan.
Buttons no se cortan.
Headings son legibles.
Iframes no desbordan.
Mapas funcionan.
No oculté contenido importante para arreglar layout.
No dupliqué innecesariamente versiones desktop/mobile.
Probé un dispositivo real cuando fue posible.

Checklist maestro · Sistema visual

La página parece un único sistema.
Colores son coherentes.
Typography es coherente.
Buttons siguen una jerarquía.
Cards siguen una lógica.
Iconografía es consistente.
Backgrounds crean ritmo sin exceso.
Padding sigue un sistema.
No existe exceso de efectos.
La página funciona sin animaciones.

Checklist maestro · Accesibilidad

Headings tienen jerarquía.
Images informativas tienen Alt apropiado.
Links utilizan textos comprensibles.
El contraste es suficiente visualmente.
Información importante no depende solo del color.
Información importante no depende de Hover.
Iconos importantes tienen contexto.
Forms pueden identificarse.
Focus no fue eliminado.
El contenido soporta aumento de texto/zoom razonablemente.

Checklist maestro · Forms

Los campos están dentro del Form cuando corresponde.
Labels son claros.
Types fueron revisados.
Names fueron revisados.
IDs son únicos.
Los obligatorios funcionan realmente.
El control de envío sigue siendo funcional.
Probé envío vacío.
Probé datos incorrectos.
Probé datos válidos.
Comprobé confirmación.
Comprobé recepción.
Comprobé todos los campos.
Volví a probar después de cambios estructurales.

Checklist maestro · Componentes interactivos

Tabs funcionan.
Accordeon funciona.
Carousel funciona.
Slider funciona.
Gallery funciona según su comportamiento real.
Image Compare funciona.
Button Groups funcionan.
No confundí apariencia con funcionalidad.
Mobile/touch funcionan.
No dependen de Hover.

Checklist maestro · Images y multimedia

Images son correctas.
No están deformadas.
Cover/Contain fue revisado.
Alt fue revisado.
La calidad es suficiente.
No utilizo recursos desproporcionadamente grandes.
Videos funcionan.
Iframes funcionan.
Audio funciona si existe.
Lottie aporta.
Multimedia se adapta a mobile.

Checklist maestro · Mapas y recursos externos

El mapa muestra ubicación correcta.
La dirección está escrita.
Cómo llegar coincide.
Mobile funciona.
No oculté atribuciones.
Embeds externos cargan.
No hay recursos externos innecesarios.
Revisé Links hacia servicios externos.

Checklist maestro · Animaciones

La página funciona sin animaciones.
Animate on scroll se utiliza con moderación.
Delays son razonables.
No hay animaciones permanentes innecesarias.
Hover es coherente.
Hover no promete clicabilidad inexistente.
Mobile funciona sin Hover.
Transform no genera overflow.

Checklist maestro · Classes, IDs y Linked styles

Classes tienen nombres comprensibles.
Utilizo Classes para estilos compartidos.
Variantes se resuelven mediante Classes cuando corresponde.
IDs son únicos.
No utilizo IDs innecesariamente para estilos repetidos.
Revisé IDs después de clonar.
Revisé Linked styles.
Comprendo qué elementos comparten cada cambio.
No generé estilos individuales innecesarios.

Checklist maestro · CSS

Revisé selectores globales.
Revisé body.
Revisé section.
Revisé .container.
Revisé .row.
Revisé .card.
Revisé img.
Revisé a.
Revisé button.
Revisé input.
Revisé Width fija.
Revisé Min Width.
Revisé Height fija.
Revisé Position absolute/fixed.
Revisé Margins negativos.
Revisé !important.
Revisé overflow.
Revisé white-space.
Revisé transform.
Revisé media queries.
Todo CSS específico tiene scope cuando corresponde.

Checklist maestro · Código y dependencias

Waclis sigue utilizando Bootstrap 4.
No agregué Bootstrap 5.
No cargué Bootstrap nuevamente.
No agregué Tailwind.
No agregué React/Vue innecesariamente.
No agregué otro jQuery.
No agregué CDNs innecesarios.
No agregué una librería por un efecto simple.
No hay código que no comprendo.
No publiqué tokens, contraseñas o secrets.
No existen scripts externos injustificados.

Checklist maestro · Rendimiento

Todas las Images aportan.
Revisé su tamaño.
Videos son necesarios.
Mapas son necesarios.
Embeds son necesarios.
Lottie es necesario.
No repetí recursos innecesariamente.
No cargué varias bibliotecas para funciones ya disponibles.
La página sigue siendo razonablemente cómoda de recorrer.

Checklist maestro · Contenido temporal

Revisé precios.
Revisé promociones.
Revisé descuentos.
Revisé fechas.
Revisé años.
Revisé Badges “Nuevo”.
Revisé horarios.
Revisé teléfonos.
Revisé emails.
Revisé direcciones.
Revisé proyectos.
Revisé Links externos.
Identifiqué qué información necesitará mantenimiento.

Checklist maestro · Frontend

Guardé los cambios.
Utilicé Ver página.
Revisé Header → primera Section.
Revisé todas las Sections.
Revisé última Section → Footer.
Probé desktop.
Probé tablet.
Probé mobile.
Probé Links.
Probé CTA.
Probé Forms.
Probé componentes interactivos.
Probé Map.
Probé multimedia.
No existe scroll horizontal.
No existe contenido cortado.

Checklist maestro · Mantenimiento

Podría entender esta página dentro de seis meses.
Classes son claras.
No hay código residual evidente.
No hay valores arbitrarios innecesarios.
No existe una dependencia externa injustificada.
Los cambios futuros pueden hacerse desde el Editor cuando corresponda.
Identifiqué contenido temporal.
Identifiqué Links que deberán revisarse.
Identifiqué Forms que necesitan pruebas periódicas.
La solución es suficientemente simple para mantenerse.

Errores frecuentes durante una auditoría

Revisar solamente desktop

Incluye tablet y mobile.

Revisar solamente diseño

Incluye funcionalidad.

Revisar el Editor pero no Ver página

El frontend real es obligatorio.

Corregir mientras todavía estás descubriendo problemas

Primero crea la lista.

Empezar por detalles estéticos

Corrige primero problemas críticos.

Ocultar overflow

Encuentra el elemento.

Cambiar H2 a H5 por tamaño

Utiliza Typography.

Reducir toda la tipografía mobile

Corrige Grid.

Ocultar Sections mobile

Adapta primero.

Duplicar versiones desktop/mobile

Intenta una estructura responsive única.

Dejar Links #

Configura destinos.

No probar Links clonados

Comprueba cada Card.

Considerar un Form funcional porque se ve bien

Envía una prueba.

No comprobar recepción

Es parte de la auditoría.

Considerar un Badge como filtro

Confirma comportamiento.

Considerar una Card clicable porque tiene Hover

Prueba realmente.

Ignorar Linked styles

Un cambio puede afectar muchos elementos.

Ignorar IDs duplicados

Especialmente después de clonar.

Aplicar CSS global

Puede afectar otras páginas.

Agregar !important para resolver todo

Revisa especificidad.

Mantener Height fija en Cards con contenido variable

Permite crecimiento.

Mantener Position absolute innecesario

Utiliza Grid.

Cargar Bootstrap 5

Waclis utiliza Bootstrap 4.

Agregar frameworks para una sola sección

Utiliza primero las herramientas existentes.

Mantener código que nadie comprende

Simplifica o documenta.

Mantener información temporal indefinidamente

Define revisiones.

Flujo profesional de auditoría completa

1. GUARDAR CAMBIOS
↓
2. DEFINIR OBJETIVO
↓
3. REVISAR CONTENIDO
↓
4. DETECTAR INFORMACIÓN DE EJEMPLO
↓
5. REVISAR NAVIGATOR
↓
6. ELIMINAR ESTRUCTURAS VACÍAS
↓
7. REVISAR HEADINGS
↓
8. REVISAR GRID
↓
9. REVISAR DESKTOP
↓
10. REVISAR TABLET
↓
11. REVISAR MOBILE
↓
12. DETECTAR OVERFLOW
↓
13. REVISAR SIZE
↓
14. REVISAR SPACING
↓
15. REVISAR POSITION
↓
16. REVISAR SISTEMA VISUAL
↓
17. REVISAR ACCESIBILIDAD
↓
18. REVISAR IMAGES
↓
19. REVISAR LINKS
↓
20. REVISAR CTA
↓
21. PROBAR FORM
↓
22. PROBAR COMPONENTES INTERACTIVOS
↓
23. PROBAR MAPAS
↓
24. PROBAR MULTIMEDIA
↓
25. REVISAR ANIMACIONES
↓
26. REVISAR CLASSES
↓
27. REVISAR IDS
↓
28. REVISAR LINKED STYLES
↓
29. AUDITAR CSS
↓
30. AUDITAR CÓDIGO
↓
31. AUDITAR DEPENDENCIAS
↓
32. REVISAR RENDIMIENTO
↓
33. REVISAR CONTENIDO TEMPORAL
↓
34. GUARDAR CAMBIOS
↓
35. VER PÁGINA
↓
36. PROBAR TODO EL RECORRIDO
↓
37. CLASIFICAR HALLAZGOS
↓
38. CORREGIR CRÍTICOS
↓
39. CORREGIR IMPORTANTES
↓
40. REALIZAR MEJORAS
↓
41. REPETIR PRUEBA FINAL

En resumen

Una auditoría profesional no pregunta solamente:

¿SE VE BIEN?

También pregunta:

¿ESTÁ BIEN ESTRUCTURADA?

¿SE ENTIENDE?

¿FUNCIONA?

¿ES RESPONSIVE?

¿ES ACCESIBLE?

¿EL CSS ESTÁ CONTROLADO?

¿EL CONTENIDO ES REAL?

¿PUEDE MANTENERSE?

El orden recomendado es:

CONTENIDO
↓
ESTRUCTURA
↓
HEADINGS
↓
GRID
↓
RESPONSIVE
↓
FUNCIONALIDAD
↓
ACCESIBILIDAD
↓
ESTILO
↓
CÓDIGO
↓
RENDIMIENTO
↓
MANTENIMIENTO

No:

SOMBRA
↓
BORDER RADIUS
↓
ANIMACIÓN
↓
“LISTO”

Navigator permite comprobar:

QUÉ EXISTE
+
CÓMO ESTÁ ORGANIZADO

Grid permite comprobar:

CÓMO SE DISTRIBUYE

Las vistas por dispositivo permiten:

PREVISUALIZAR

Y:

Avanzado → Hide based on device

controla:

VISIBILIDAD REAL

No confundas ambos.

Respecto de Links:

VER PROYECTO
→ PROYECTO CORRECTO

Respecto de CTA:

TEXTO DE ACCIÓN
=
ACCIÓN REAL

Respecto de Forms:

FORM VISIBLE
≠
FORM FUNCIONAL

Debes:

COMPLETAR
↓
ENVIAR
↓
COMPROBAR

Respecto de CSS:

CSS LOCALIZADO
>
SELECTORES GLOBALES INNECESARIOS

Respecto del responsive:

CORREGIR CAUSA
>
OCULTAR SÍNTOMA

Respecto del código:

WACLIS
→ BOOTSTRAP 4

No necesitas agregar automáticamente:

Bootstrap 5
Tailwind
React
Vue
otras librerías

Respecto del contenido:

REAL
+
ACTUALIZADO
+
PRECISO

Respecto del mantenimiento:

¿PODRÉ ENTENDER Y MODIFICAR ESTO DESPUÉS?

Y finalmente

una página está realmente terminada cuando puedes recorrer:

EDITOR
↓
NAVIGATOR
↓
DESKTOP
↓
TABLET
↓
MOBILE
↓
LINKS
↓
FORMULARIOS
↓
INTERACCIONES
↓
CSS
↓
GUARDAR CAMBIOS
↓
VER PÁGINA
↓
PRUEBA REAL

y responder:

“La estructura es comprensible, el contenido es correcto, la página se adapta a distintos dispositivos, las acciones funcionan, el código está controlado y la solución puede mantenerse en el futuro.”

Ese es el verdadero criterio de finalización.

No que una captura se vea perfecta.

Sino que la Página web completa sea clara, funcional, estable, responsive y mantenible.

¿Necesitas más ayuda?

Si este artículo no resolvió tu consulta, nuestro equipo puede ayudarte personalmente.

Soporte por WhatsApp