¿El diseño empieza por estética o por negocio?

Por negocio. Primero se define qué debe hacer la web: reservar, captar contactos, explicar servicios, ordenar catálogo o reducir preguntas repetidas. Después se diseña.

¿Con qué tecnología trabajas?

La que pide el proyecto: HTML, CSS y JavaScript sin dependencias para una página ligera, React o Next.js cuando hay interacción y muchas páginas, y Astro para webs de contenido como esta.

¿Se puede añadir automatización después?

Sí. Una web bien planteada puede crecer hacia formularios inteligentes, bases de datos, informes y flujos automatizados.

¿También trabajas con centros de formación?

Sí. Para LMS, FUNDAE, FOCO y programaciones didácticas, el perfil enfocado es el de técnico de formación.

Seis proyectos publicados · seis sectores

Webs reales, publicadas y enlazadas: qué pedía cada negocio, qué construí y con qué.

No vendo páginas bonitas como si fueran cuadros. Un buen proyecto web tiene que aclarar el servicio, reducir fricción, transmitir confianza y dejar una base técnica que no se rompa cuando el negocio crece.

Seis casos, seis sectores: formación in company B2B, una escuela de negocios en pre-lanzamiento, reserva online, marca personal, comercio cultural e industria con catálogo técnico.

Quiero algo parecido Ver capacidades

Retrato de Natanael Alzate Torres — Natanael Alzate Torres Cuenca · remoto

Otros perfiles Automatización con IA Administración Inicio

Proyectos

Proyecto a proyecto

6 webs publicadas. Cada ficha enlaza a la web real: el resultado se comprueba, no se cuenta.

Formación in company · Logística B2B En producción

Logístikos

Reto: Vender formación a medida a direcciones de operaciones que desconfían de los cursos de catálogo, y explicar la bonificación FUNDAE sin convertir la web en un folleto administrativo.
Solución: Nueve páginas por intención de búsqueda (programas, metodología, sectores, FUNDAE y contacto), cada área de formación enlazada a su programa y tres vías de conversión: formulario, videollamada de 15 minutos y WhatsApp.
Qué incluye: Simulador orientativo de crédito FUNDAE con controles deslizantes accesibles: plantilla y horas previstas.
Formulario segmentado (empresa, área, participantes) con endpoint propio y antispam sin captcha: campo trampa y tiempo mínimo de relleno.
Gestor de consentimiento propio: Google Analytics no se descarga hasta que el usuario acepta la medición.
Datos estructurados por página: organización con catálogo de servicios, cursos, FAQ, contacto y migas de pan.
Stack: Next.js (React) con generación estática, Tailwind CSS, función serverless para el formulario, schema.org y despliegue en Netlify.
Resultado: Un servicio complejo explicado en términos de coste, stock y transporte, preparado para posicionar por área de formación y para medir sin incumplir la normativa de cookies.

Next.js
React
Tailwind CSS
API serverless
schema.org
Netlify

Ver web publicada ↗

Educación · Escuela de negocios Pre-lanzamiento

PROM International Business School

Reto: Ocupar el dominio de una escuela de negocios que aún no ha lanzado su oferta, con una imagen cuidada y sin indexar contenido provisional.
Solución: Página única con vídeo a pantalla completa que elige el corte según la orientación de la pantalla, póster mientras carga y reproducción silenciada compatible con iOS.
Qué incluye: Dos cortes de vídeo: 720p vertical para móvil (menos de 0,5 MB) y 1080p horizontal para escritorio (menos de 2 MB), que se intercambian al girar o redimensionar.
Póster específico por formato: la primera impresión nunca es una pantalla vacía.
Autoplay silenciado con playsinline y reintento tras el primer toque si el navegador lo bloquea.
Etiqueta noindex mientras dure el pre-lanzamiento, para no posicionar una página provisional.
Stack: HTML, CSS y JavaScript sin dependencias, vídeo MP4 en dos resoluciones y alojamiento en Hostinger.
Resultado: Marca presente con un mantenimiento mínimo, listos para sustituirse por la web completa en el lanzamiento.

HTML
CSS
JavaScript
Vídeo adaptativo
Hostinger

Próximamente en promibs.school

Barbería · Reservas En producción

Norden Barber

Reto: Ordenar servicios, precios, tono visual y llamada a reserva en una experiencia rápida, especialmente en móvil.
Solución: Landing visual, jerarquía clara de servicios, CTA visible y estructura preparada para posicionar búsquedas de barbería de proximidad.
Stack: HTML, CSS, JavaScript, imágenes WebP y despliegue estático.
Resultado: Una presencia digital enfocada a reserva, fácil de compartir y con identidad propia.

HTML
CSS
JavaScript
SEO local
WebP

Ver web publicada ↗

Estética · Branding En producción

Stefania Panzariu Studio

Reto: Convertir una identidad visual delicada en una web clara, elegante y útil para captar citas.
Solución: Estructura por servicios, copy orientado a confianza, experiencia visual limpia y navegación sin ruido.
Stack: React con Vite, CSS responsive, optimización de imagen y metadatos sociales.
Resultado: Más autoridad visual para servicios premium, preparada para ampliar páginas de tratamientos.

React
Vite
CSS responsive
Metadatos sociales

Ver web publicada ↗

Librería · Cultura En producción

Promesas de Papel

Reto: No caer en una web genérica de comercio: el valor estaba en la personalidad, la comunidad y la selección.
Solución: Diseño editorial, contenido claro y estructura preparada para eventos, recomendaciones y comunicación con lectores.
Stack: HTML, CSS, JavaScript, diseño responsive y optimización de assets.
Resultado: Una presencia online que puede crecer hacia agenda, artículos y clubes de lectura.

HTML
CSS
JavaScript
Diseño editorial

Ver web publicada ↗

Industria · E-commerce En producción

Pinturas COES

Reto: Pasar de producto técnico a experiencia digital entendible para cliente profesional y usuario final.
Solución: Catálogo digital, base de datos de productos, arquitectura preparada para ecommerce e integración con el ERP Sage.
Stack: HTML, CSS, JavaScript, Java en servidor, SQL y Sage.
Resultado: Un activo digital industrial con recorrido para fichas de producto, SEO técnico y venta online.

E-commerce
Java
SQL
ERP Sage

Ver web publicada ↗

Capacidades

Capacidades, con la prueba al lado

Qué sé hacer, con qué herramientas y dónde comprobarlo: cada línea remite a un proyecto publicado, una acreditación o una experiencia concreta.

01 / 07
Desarrollo web a medida

Webs rápidas y mantenibles, de la arquitectura de contenidos al despliegue, sin plantillas genéricas.
Herramientas
- Next.js
- React
- Astro
- Tailwind CSS
- HTML · CSS · JS
- Vite
- WebP y carga diferida
Dónde se ve
- Logístikos · Next.js
- Stefania Panzariu · React
- Esta web · Astro
02 / 07
SEO técnico y conversión

Cada página responde a una búsqueda concreta y deja claro el siguiente paso a quien llega.
Herramientas
- schema.org · JSON-LD
- Sitemap y canonical
- SEO local
- Arquitectura por intención
- CTA y formularios
Dónde se ve
- Logístikos · datos estructurados por página
- Norden Barber · SEO local
- Esta web · siete páginas por perfil
03 / 07
Formularios, datos y back-end

Lo que hay detrás del botón de enviar: validación, antispam, bases de datos e integración con sistemas de gestión.
Herramientas
- API serverless
- Antispam sin captcha
- Java
- SQL
- Integración ERP Sage
Dónde se ve
04 / 07
Privacidad y cumplimiento web

RGPD, LSSI y cookies aplicados en el código, no solo en el texto legal.
Herramientas
- RGPD y LOPDGDD
- Guía de cookies AEPD
- Bloqueo previo de analítica
- Aviso legal y privacidad
Dónde se ve
05 / 07
Formación subvencionada y LMS

La parte técnica y la administrativa de la formación para el empleo, para que plataforma y expediente digan lo mismo.
Herramientas
- FUNDAE
- FOCO · JCCM
- Programaciones SEPE
- Moodle
- Justificación económica
Dónde se ve
06 / 07
Docencia técnica con IA

Enseño lo que uso en producción, con material propio, evaluación por rúbrica y la IA como apoyo, no como atajo.
Herramientas
- Java
- Bases de datos SQL
- Data Mining y BI
- Flipped Classroom
- Claude · Cursor · NotebookLM
Dónde se ve
07 / 07
Calidad, costes y datos

Procedimientos, trazabilidad e indicadores que aguantan una auditoría, con el dato sacado del sistema real.
Herramientas
- Control documental
- Auditoría interna
- Indicadores
- Contabilidad de costes
- Excel avanzado
- SAP FICO · Sage · Dynamics
Dónde se ve

Herramientas

Next.js
React
Astro
Tailwind CSS
HTML · CSS · JS
Vite
WebP y carga diferida

Dónde se ve

Preguntas

Preguntas que suelen decidir un proyecto

¿El diseño empieza por estética o por negocio?: Por negocio. Primero se define qué debe hacer la web: reservar, captar contactos, explicar servicios, ordenar catálogo o reducir preguntas repetidas. Después se diseña.
¿Con qué tecnología trabajas?: La que pide el proyecto: HTML, CSS y JavaScript sin dependencias para una página ligera, React o Next.js cuando hay interacción y muchas páginas, y Astro para webs de contenido como esta.
¿Se puede añadir automatización después?: Sí. Una web bien planteada puede crecer hacia formularios inteligentes, bases de datos, informes y flujos automatizados.
¿También trabajas con centros de formación?: Sí. Para LMS, FUNDAE, FOCO y programaciones didácticas, el perfil enfocado es el de técnico de formación.

Tu proyecto

Hablemos.

Un proyecto web, una automatización, una convocatoria docente o una oferta de empleo: cuéntamelo por el formulario o por correo y te respondo yo, por escrito, en menos de 24 horas laborables.

Email: alzatetorres@icloud.com
LinkedIn: in/natanaelalzatetorres
Área: Cuenca y provincia · remoto
Respuesta: Menos de 24 h laborables

Webs reales, publicadas y enlazadas: qué pedía cada negocio, qué construí y con qué.

Proyecto a proyecto

Logístikos

PROM International Business School

Norden Barber

Stefania Panzariu Studio

Promesas de Papel

Pinturas COES

Capacidades, con la prueba al lado

Desarrollo web a medida

SEO técnico y conversión

Formularios, datos y back-end

Privacidad y cumplimiento web

Formación subvencionada y LMS

Docencia técnica con IA

Calidad, costes y datos

Preguntas que suelen decidir un proyecto

Hablemos.