Tu propia metodología Frontend (I)

¿Por qué una metodología previa al código?

Antes de comenzar a escribir una sola línea de HTML o CSS, es fundamental tener una idea clara de qué vas a construir, cómo se organiza y qué rol cumple cada parte. Esta preparación te ayuda a evitar bloqueos, mejora tu toma de decisiones y te da una visión más profesional del proceso.

Este enfoque no está pensado para hacerte perder tiempo, sino para ahorrártelo.

Tres pasos clave en tu metodología

Aunque hoy nos centraremos en los dos primeros, es importante que conozcas los tres:

Paso 1: Contexto funcional (User Story, si es necesario)

Este paso consiste en entender qué problema estás resolviendo o qué necesita el usuario final. En el mundo profesional, esto se expresa con una técnica llamada User Story.

Una User Story es una frase estructurada de la siguiente forma:

“Como [tipo de usuario], quiero [acción o funcionalidad] para [objetivo o beneficio].”

Ejemplos:

“Como cliente, quiero poder ver el precio de cada producto para decidir cuál me conviene más.”
“Como visitante, quiero un menú claro para navegar fácilmente por la web.”

Claves del lenguaje:

Comienza con el tipo de usuario.
Define qué desea hacer.
Explica por qué o para qué quiere hacerlo.

Este enfoque te obliga a pensar desde la perspectiva de quien va a utilizar lo que estás creando. Y eso cambia todo.

No siempre es obligatorio redactarlas formalmente, pero te ayudará a mantener el foco y entender qué estás resolviendo antes de tocar una línea de código.

Paso 2: Jerarquía estructural (Arquitectura de componentes)

Antes de codear, crea un mapa mental o visual de los bloques que vas a necesitar. Puedes hacerlo en una herramienta como Figma o FigJam:

Importa la UI o una captura.
Dibuja encima con flechas y notas.
Marca qué elementos son section, header, main, article, div, etc.
Dibuja la jerarquía de componentes, clases o ids, si ya lo tienes claro.

Ejemplo visual:

cImagina una “tarjeta de producto” con una imagen, un título, un precio y un botón:

.product-card
- .product-image
- .product-title
- .product-price
- .product-button

No hace falta que sea perfecto. El objetivo es empezar con una idea clara y no a ciegas.

Este paso también ayuda a anticipar decisiones de estructura semántica, nombres de clases, reutilización y orden de trabajo.

Paso 3: Flujo de datos (Dataflow)

Solo aplica cuando empieces a trabajar con datos dinámicos (por ejemplo, con JavaScript). Este paso consiste en identificar de dónde vienen los datos, quién los modifica y hacia dónde viajan.

Este paso se detallará en la parte 2 de este fundamento.

Recomendaciones

No te saltes esta fase. Aunque parezca “extra”, es lo que distingue un enfoque profesional de uno improvisado.
Cuanto más practiques esta preparación, más rápido y natural se volverá.
Puedes usar papel, FigJam, o cualquier otra herramienta. Lo importante es visualizar.
Si no tienes un diseño, aún puedes usar esta metodología para estructurar desde lo conceptual.