Cómo hacer una página web desde cero

Antes de la herramienta: para qué existe tu página

Toda página web cumple una de tres funciones principales: informar (quién eres y qué haces), convertir (que alguien te escriba, compre o agende) o servir (que un cliente entre a usar algo, como un portal o una aplicación). Definir cuál es la tuya cambia todas las decisiones siguientes, desde la estructura hasta el presupuesto.

Escribe en una frase qué debería hacer un visitante al terminar de leer tu página. Si la respuesta es "escribirme por WhatsApp para pedir una cotización", ya sabes cuál es el botón más importante, dónde debe estar y qué información necesita ver la persona antes de tocarlo.

Dominio: tu dirección en internet

El dominio es el nombre que la gente escribe en el navegador, como tavelik.com. Se registra en un registrador acreditado por un pago anual y no se compra para siempre: si dejas de renovarlo, lo pierdes. El sistema de nombres de dominio (DNS) es el directorio que traduce ese nombre a la dirección del servidor donde vive tu página.

• Elige un nombre corto, fácil de dictar por teléfono y sin guiones ni números si puedes evitarlos.
• Prefiere .com si tu público es general, o .co y .com.co si tu presencia es colombiana; la terminación no afecta el posicionamiento por sí sola.
• Registra el dominio a nombre de la empresa o de su dueño, nunca a nombre del proveedor que te hace la página. Es un activo tuyo.
• Activa la renovación automática y guarda el acceso al registrador en un lugar seguro.

Hosting: dónde vive la página

El hosting es el servidor que entrega los archivos de tu página cuando alguien la visita. Hoy existen tres familias con costos y responsabilidades muy distintas, y elegir mal aquí es la causa más común de páginas lentas o abandonadas.

Un sitio estático pre-renderizado, alojado en una red de distribución de contenido (CDN), entrega HTML ya construido desde un servidor cercano al visitante. Es el enfoque que usamos para nuestro propio sitio: no hay base de datos que atacar ni servidor que actualizar, y el costo de alojamiento es mínimo. La contrapartida es que agregar una sección nueva pasa por código.

Estructura: qué páginas necesitas de verdad

Un sitio corporativo eficaz rara vez necesita más de seis páginas. Lo que importa es que cada una responda una pregunta concreta del visitante y que el orden de la portada siga su proceso de decisión: qué problema resuelves, cómo lo haces, qué evidencia hay, cuánto cuesta y cómo empezar.

1. Portada: promesa clara, resultado que ofreces y una sola acción principal.
2. Servicios o productos: uno por sección o por página, con un beneficio concreto cada uno.
3. Prueba: casos, resultados verificables o testimonios reales. Sin nombres inventados.
4. Precios o al menos rangos: ahorra conversaciones que no van a ninguna parte.
5. Quiénes somos: personas reales, no fotos de banco de imágenes.
6. Contacto, privacidad y términos: obligatorios si recoges datos.

Contenido: escribe antes de diseñar

El error más caro en un proyecto web es diseñar con texto de relleno y escribir el contenido real al final. El texto define la jerarquía visual: un titular de tres palabras y uno de doce no caben en el mismo diseño. Escribe primero los titulares, los párrafos y los botones de cada sección, en el lenguaje de tu cliente y no en el de tu sector.

Cada página debe tener un único titular principal (etiqueta h1 en HTML) que diga de qué trata, y subtítulos (h2, h3) que organicen el resto. Esa jerarquía no es decorativa: es la que usan los buscadores y los lectores de pantalla para entender el documento.

Diseño: consistencia antes que originalidad

Un buen diseño web se reconoce porque nada distrae. Se construye con un sistema pequeño y repetido: una paleta de pocos colores con roles definidos, una o dos tipografías, una escala de tamaños y una separación constante entre elementos. Cuando cada sección inventa sus propias reglas, la página se ve amateur aunque cada pieza sea bonita.

• Define tokens: los valores de color, tipografía y espacio que se reutilizan en todo el sitio. Cambiar uno cambia todo.
• Diseña primero para el celular. En la mayoría de sitios de servicios, más de la mitad de las visitas llegan desde un teléfono.
• Contraste suficiente entre texto y fondo: la norma WCAG 2.2 pide al menos 4,5 a 1 para texto normal.
• Botones y enlaces con área táctil cómoda y estados visibles al pasar el cursor y al enfocar con teclado.

Accesibilidad: que la pueda usar todo el mundo

La accesibilidad no es un extra para casos raros: es la diferencia entre una página que funciona con teclado, con lector de pantalla, con zoom al 200 por ciento o con conexión lenta, y una que no. Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.2) del W3C son el estándar de referencia, y el nivel AA es el objetivo razonable para cualquier sitio comercial.

• Texto alternativo en imágenes que comunican algo; alt vacío en las decorativas.
• Etiquetas visibles en los formularios, no solo texto de ejemplo dentro del campo.
• Orden de lectura lógico y foco visible al navegar con la tecla Tab.
• Nada que dependa solo del color para entenderse, ni contenido que parpadee.

Velocidad: lo que Google mide y lo que tu cliente siente

Google evalúa la experiencia de carga con tres métricas llamadas Core Web Vitals: LCP (cuánto tarda en aparecer el contenido principal; bueno hasta 2,5 segundos), INP (cuánto tarda la página en responder a una interacción; bueno hasta 200 milisegundos) y CLS (cuánto se mueve el contenido mientras carga; bueno hasta 0,1). Estas cifras son los umbrales oficiales publicados por Google.

En la práctica, la mayor parte de la lentitud viene de imágenes sin optimizar. Una fotografía de 2 MB en formato PNG puede pesar 100 KB en WebP con la misma calidad aparente. Sirve cada imagen en el tamaño que se muestra, carga en diferido las que están fuera de la pantalla y evita cargar fuentes o scripts que no usas.

SEO: que te encuentren cuando te buscan

El posicionamiento en buscadores empieza por algo simple: que cada página trate un tema concreto que la gente busca, con un título honesto, una descripción clara y contenido que realmente responda la pregunta. El resto es técnica: HTML que el rastreador pueda leer sin ejecutar JavaScript, un mapa del sitio, datos estructurados que describan tu organización y tus servicios, y velocidad.

Publicar la página no basta. Regístrala en Google Search Console, envía el mapa del sitio y revisa cada mes qué búsquedas te traen visitas. Con esa información sabrás qué contenido escribir después.

Lo legal en Colombia: datos personales

Si tu página tiene un formulario, recoges datos personales y te aplica la Ley 1581 de 2012 y su reglamentación. Necesitas una política de tratamiento de datos publicada, una autorización clara antes de recoger la información y un canal para que la persona consulte, actualice o elimine sus datos. Una página de aviso de privacidad y una de términos del servicio son el mínimo; conviene que un abogado las revise antes de publicarlas.

Cuánto cuesta y cuánto tarda

No existe un precio de referencia serio sin conocer el alcance, así que desconfía de quien lo dé sin preguntar. Lo que sí puedes controlar es cómo se estructura el costo: el dominio y el hosting son gastos recurrentes y pequeños; el diseño y el desarrollo son una inversión inicial; el contenido es el trabajo que casi siempre se subestima; y el mantenimiento depende de la tecnología elegida. Un sitio estático bien hecho tiene mantenimiento casi nulo; un CMS con extensiones exige atención permanente.

En tiempo, lo que más alarga un proyecto no es el desarrollo sino la espera por contenido: textos, fotos, logos en buen formato. Si los tienes listos antes de empezar, un sitio corporativo de seis páginas puede estar publicado en pocas semanas.

Qué puedes hacer esta semana

1. Escribe la frase que resume qué debe hacer un visitante al terminar de leer tu portada.
2. Registra el dominio a tu nombre y activa la renovación automática.
3. Redacta los titulares y párrafos de tus seis páginas en un documento, antes de pensar en diseño.
4. Reúne fotos reales de tu equipo y tu trabajo, y tu logo en formato vectorial (SVG o PDF).
5. Pide a un proveedor que te explique qué tecnología propone y por qué, y qué costará mantenerla al año.