≡En resumen
- En informática, diseñar una web significa construirla con código que un navegador pueda interpretar, no solo decidir su aspecto.
- Toda web funciona con un modelo cliente-servidor: el navegador pide archivos por HTTP y el servidor los entrega o los genera.
- HTML estructura el contenido, CSS lo presenta y JavaScript añade comportamiento; en el servidor se usan lenguajes como PHP, Python, JavaScript (Node.js), Java o Ruby.
- El trabajo se reparte entre front-end (lo que ve el usuario) y back-end (servidor, lógica y datos), con perfiles full stack que cubren ambos.
- En España la vía de FP oficial es el ciclo de Grado Superior en Desarrollo de Aplicaciones Web (DAW), de 2.000 horas.
01 ¿Qué es el diseño web en informática?
La frontera con el diseño gráfico o UX no es tajante. En equipos pequeños una misma persona diseña y maqueta; en proyectos grandes hay especialistas en interfaz, en front-end y en back-end. Lo que no es cierto es que un perfil informático «no sepa diseñar» o que un diseñador no deba entender código: los mejores resultados salen de equipos que comparten ambos lenguajes.
Tampoco hay que confundirlo con el SEO on page. El código influye mucho en el posicionamiento (estructura de encabezados, velocidad, rastreo), pero la maquetación es una disciplina propia que el SEO revisa y complementa.
02 Cómo funciona una web por dentro
-
1
El usuario escribe una dirección
El navegador traduce el nombre de dominio a una dirección IP mediante el sistema DNS.
-
2
El navegador pide la página
Envía una petición HTTP (hoy casi siempre HTTPS, cifrada) al servidor de esa IP.
-
3
El servidor responde
Devuelve un archivo HTML ya hecho (web estática) o lo genera en ese momento con un lenguaje de servidor y una base de datos (web dinámica).
-
4
El navegador descarga los recursos
Lee el HTML y pide las hojas de estilo CSS, los scripts JavaScript, las imágenes y las fuentes que enlaza.
-
5
El navegador pinta la página
Construye la estructura del documento, aplica los estilos, ejecuta los scripts y muestra el resultado, que puede seguir cambiando sin recargar.
El primer paso de esa cadena es la resolución de nombres; si te interesa cómo funciona, lo explicamos en detalle en qué es el DNS.
03 Lenguajes y tecnologías del diseño web
| Capa | Tecnología | Función |
|---|---|---|
| Estructura | HTML | Define qué es cada cosa: títulos, párrafos, enlaces, imágenes, formularios |
| Presentación | CSS | Controla colores, tipografías, espaciado y la maquetación en cada pantalla |
| Comportamiento | JavaScript | Añade interacción: menús, validaciones, contenido que se carga sin recargar |
| Servidor | PHP, Python, JavaScript (Node.js), Java, Ruby, C# | Procesa peticiones, aplica la lógica de negocio y genera páginas |
| Datos | MySQL, PostgreSQL, MongoDB… | Guardan usuarios, productos, pedidos o contenidos |
| Gestión de contenidos | WordPress, Drupal, CMS sin cabeza | Permiten editar la web sin tocar código |
Si empiezas desde cero, el orden lógico es aprender primero los fundamentos de HTML, después CSS y por último JavaScript.
04 Estándares web: W3C, WHATWG y accesibilidad
Una web bien construida funciona en cualquier navegador porque sigue estándares abiertos. Desde el acuerdo del 28 de mayo de 2019 entre el W3C y el WHATWG, HTML y DOM se desarrollan como estándares vivos (Living Standard) en el WHATWG, mientras que el W3C mantiene CSS, las pautas de accesibilidad y muchas otras especificaciones.
HTML Living Standard
Especificación de HTML que se actualiza de forma continua en lugar de por versiones cerradas como HTML4 o HTML5.
CSS
Se publica por módulos (selectores, grid, media queries…) en el W3C. El nivel 1 fue Recomendación el 17 de diciembre de 1996.
WCAG 2.2
Pautas de accesibilidad del W3C, Recomendación desde el 5 de octubre de 2023. Son la referencia técnica de las leyes de accesibilidad.
HTTP y DNS
Protocolos definidos por la IETF en documentos RFC que hacen posible pedir y localizar cualquier web.
05 Tipos de maquetación web
| Tipo | Cómo funciona | Uso actual |
|---|---|---|
| Fija | Ancho cerrado en píxeles, igual en todas las pantallas | Obsoleta: obliga a hacer zoom en el móvil |
| Fluida (líquida) | Anchos en porcentajes que se estiran con la ventana | Base de todo diseño moderno, combinada con límites de ancho |
| Adaptativa | Varios diseños fijos que se eligen según el dispositivo o el ancho | Casos concretos y webs con versión móvil separada |
| Responsive | Rejilla fluida, imágenes flexibles y media queries | El estándar recomendado por Google |
Lo que antes eran decisiones de un informático hoy son también de negocio: una web que no se adapta al móvil pierde visitas y clientes. Por eso cualquier proyecto de diseño web a medida parte de una maquetación responsive y probada en dispositivos reales.
06 Perfiles profesionales y qué estudiar
| Perfil | Qué hace | Herramientas típicas |
|---|---|---|
| Diseñador UI/UX | Investiga usuarios y diseña interfaces y prototipos | Figma, herramientas de test con usuarios |
| Desarrollador front-end | Convierte el diseño en HTML, CSS y JavaScript | Editor de código, Git, frameworks como React o Vue |
| Desarrollador back-end | Programa el servidor, las bases de datos y las API | PHP (Laravel), Node.js, Python, bases de datos SQL |
| Full stack | Cubre front-end y back-end en proyectos medianos | Combinación de las anteriores |
| Administrador de sistemas / DevOps | Mantiene servidores, despliegues, copias y seguridad | Linux, contenedores, servicios en la nube |
07 Ejemplo: ver el código de cualquier web
Abre cualquier web en Chrome, Firefox o Edge y pulsa Ctrl + U (Cmd + Opción + U en Chrome para Mac) para ver su HTML. Después pulsa F12 para abrir las herramientas de desarrollo: en la pestaña Elementos verás la estructura y los estilos CSS que se aplican a cada bloque, y en Red, todos los archivos que el navegador ha descargado y cuánto han tardado. Es la mejor forma de entender cómo está hecha una web y el primer paso para depurar errores.
Cuando el proyecto va más allá de una web informativa (áreas de cliente, reservas, integraciones con tu ERP), la parte informática pesa más que la visual; en esos casos conviene una agencia de desarrollo web con experiencia en back-end.
Preguntas frecuentes sobre Diseño Web en Informática
Es la parte técnica de crear sitios web: construir con HTML, CSS, JavaScript y programación en el servidor páginas que un navegador puede descargar e interpretar siguiendo los estándares web.
En el navegador, HTML para la estructura, CSS para la presentación y JavaScript para el comportamiento. En el servidor, lenguajes como PHP, Python, JavaScript con Node.js, Java, Ruby o C#.
El front-end es lo que se ejecuta en el navegador y ve el usuario; el back-end es el servidor, la lógica de negocio y la base de datos que hay detrás.
La vía de FP oficial es el Grado Superior en Desarrollo de Aplicaciones Web (DAW), de 2.000 horas. También sirven el Grado en Ingeniería Informática y, para la parte visual, estudios de diseño gráfico o UX.
Para diseñar la interfaz no, pero sí conviene entender HTML y CSS para proponer diseños que se puedan construir. Para desarrollarla a medida, sí: hace falta dominar los lenguajes del navegador y, si hay lógica o datos, uno de servidor.
No necesariamente. Un informático puede especializarse en desarrollo web, y un diseñador web puede centrarse en la interfaz; en muchos equipos ambos perfiles se combinan o los cubre un desarrollador full stack.
Una web estática entrega archivos HTML ya hechos; una dinámica genera cada página en el servidor en el momento de la petición, normalmente consultando una base de datos.
Es el nombre con el que se popularizó la quinta gran revisión de HTML, que añadió etiquetas semánticas, vídeo y audio nativos. Desde 2019 HTML se mantiene como un estándar vivo en el WHATWG, sin números de versión.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗