Diseño Web

1) Conceptos fundamentales

Contenido, estilo y funcionalidad:HTML, CSS y JavaScript

Como habrás podido observar hay dos tecnologías clave en el diseño Web. El HTML y el CSS. El javascript es para añadir funcionalidad a la página haciéndola más interactiva, pero se sale del ámbito de este curso.

Cuando Tim Berners-Lee creo el HTML las etiquetas se referían fundamentalmente al contenido que se quería comunicar (listas, enlaces, párrafos, títulos, etc...). A mediados de los años 90 se introdujeron algunas etiquetas para mejorar la apariencia (<b> para bold, <i> para itálica, <center> para centrar textos y columnas, <u> para subrayado, <font> para cambiar la fuente y como atributos "bgcolor" para el color de fondo, "align" para alinear texto e imágenes, así como "width" y "height" para el ancho y alto de tablas, celdas e imágenes.<font> Todo esto implicaba que había que poner el estilo dentro del HTML ("inline"), lo que hacía que el código fuera más difícil de mantener y menos flexible, haciéndolo prácticamente ilegible. Además, puesto que había que dar el aspecto en cada párrafo o elemento que quisiéramos destacar, se hacía muy difícil mantener la coherencia no sólo dentro de la misma página sino entre páginas.

En 1994, Håkon Wium Lie propuso CSS (Cascading Style Sheets) mientras trabajaba en el CERN. Su propuesta inicial se llamó "Cascading HTML Style Sheets" y la presentó en octubre de 1994 durante la conferencia "Mosaic and the Web" en Chicago.

La idea fundamental de separar el contenido (HTML) del estilo (CSS) fue parte central de esta propuesta inicial de Lie. Él reconoció que a medida que la web crecía, era esencial tener una forma estandarizada de controlar la presentación de las páginas web sin mezclar la estructura del contenido con su apariencia visual.

Lie colaboró posteriormente con Bert Bos, quien estaba trabajando en un sistema de hojas de estilo llamado Stream-based Style Sheet Proposal (SSP). Juntos refinaron la propuesta de CSS, que fue publicada como una recomendación oficial del W3C (World Wide Web Consortium) en diciembre de 1996 como CSS nivel 1.

Cuando se desarrolla una página web hay varios aspectos a tener en cuenta:

  1. Estructuración del código: A medida que la página o el sitio web va aumentando de tamaño, el código empieza a ser tanto que cuesta seguir creando el código. Por eso es importante que el contenido sea lo más estructurado posible para debemos tener bien separados los distintos elementos y con el código comentado. Por ejemplo, la cabecera debe estar completamente separada de la zona central de la página que también debe estar completamente separada del footer, lo que nos permite saber a qué parte del código tenemos que ir para hacer cualquier modificación. Esto debe ocurrir tanto en el HTML como en fichero CSS con las propiedades de los elementos HTML.
  2. Mantenimiento del código: El peor enemigo de una persona que codifica una página web es ella misma: ¿Cómo acordarse de lo que hizo hace 3 años porque ahora le piden que actualice la página?. Eso es imposible si el código no está bien comentado y se siguen unas reglas que permiten que entendamos lo que hicimos hace tiempo. La situación se complica si se está en un equipo de trabajo y hay que "tocar" código que ha sido hecho por otras personas. En este caso es crítico la realización de un código "limpio"
  3. Consistencia de múltiples páginas: Uno de los requisitos que debe tener en cuenta cualquier diseñador es la consistencia de las distintas páginas que constituyen nuestro sitio web. ¿Cómo garantizar que todas las páginas tengan exactamente la misma combinación de colores o que las fuentes aplicadas a determinados tipos de texto sean exactamente las mismas en todas las páginas?. Esto no es muy factible si aplicamos el estilo a cada párrafo por separado.
  4. Compatibilidad entre navegadores: Uno de los mayores desafíos en los primeros años del desarrollo web fue la falta de estándares uniformes entre navegadores. Internet Explorer, Netscape Navigator, y posteriormente Firefox, Safari y Chrome interpretaban el HTML y CSS de maneras diferentes, lo que obligaba a los desarrolladores a crear múltiples versiones del mismo sitio web o usar complicados "hacks" de CSS para que funcionara correctamente en todos los navegadores. Esta situación mejoró significativamente con la adopción gradual de los estándares del W3C y la llegada de navegadores más modernos que respetan estas especificaciones.

Por otro lado, cuando se accede a un sitio web, es importante que se haya tenido en cuenta:

  1. Rapidez en el acceso a la página: ¿no te ha pasado que intentas acceder a un sitio web, tarda mucho en cargar y te vas en menos de 10 segundos?. La carga de las páginas tiene que ser rápida para no perder a un posible cliente.
  2. Accesibilidad y usabilidad de la misma: sin un código "limpio" no es posible implementar buenas prácticas de accesibilidad y usabilidad para que los usuarios permanezcan en la página una vez han entrado.

La filosofía principal detrás de esta separación de contenido y estilo, propuesta por Håkon Wium Lie, proporciona beneficios clave en todos los aspectos anteriores:

  1. Mayor mantenibilidad - los cambios de diseño podían hacerse en un solo archivo CSS sin tocar el HTML
  2. Mejor accesibilidad - el contenido podía ser más semántico y estructurado
  3. Reducción del peso de las páginas - eliminando código de estilo repetitivo
  4. Consistencia a través de múltiples páginas - aplicando los mismos estilos desde un archivo central
  5. Responsive Design: Durante los primeros años de la web, los sitios estaban diseñados principalmente para monitores de escritorio con resoluciones bastante uniformes (típicamente 800x600 o 1024x768 píxeles). Las páginas se creaban con medidas fijas en píxeles y utilizaban técnicas como float: left para posicionar elementos, asumiendo un tamaño de pantalla estándar. Sin embargo, con el tiempo aparecieron monitores de diferentes resoluciones y proporciones, y el problema se agravó dramáticamente con la llegada de tablets (2010) y smartphones con navegadores web completos. Los sitios web se veían rotos, con texto diminuto, elementos cortados o barras de desplazamiento horizontal, creando una experiencia de usuario muy deficiente en estos nuevos dispositivos. Fue entonces cuando Ethan Marcotte acuñó el término "Responsive Web Design" en 2010, estableciendo un enfoque que utiliza grids flexibles, imágenes adaptables y media queries de CSS para crear una experiencia de usuario óptima en cualquier dispositivo. Este concepto representa una evolución natural de la separación contenido/estilo, ya que permite que el mismo HTML se presente de manera diferente según el contexto de visualización.

Esta separación entre contenido y presentación ha sido uno de los principios fundamentales del desarrollo web moderno y sigue siendo tan relevante hoy como cuando Lie lo propuso por primera vez hace más 30 años.

2) Usabilidad y Accesibilidad Web

2.1.Usabilidad Web: Definición y principios fundamentales

La usabilidad web es la disciplina que estudia la forma de diseñar sitios web para que los usuarios puedan interactuar con ellos de la forma más fácil, cómoda e intuitiva posible. La mejor forma de crear un sitio web usable es realizando un **diseño centrado en el usuario**, diseñando para y por el usuario, en contraposición a lo que podría ser un diseño centrado en la tecnología o uno centrado únicamente en la creatividad u originalidad.

Jakob Nielsen: Pionero de la Usabilidad Web

Jakob Nielsen, considerado el gurú de la usabilidad web, ha establecido principios fundamentales que siguen siendo relevantes hoy en día. Nielsen expone que lo habitual es que un usuario no lea con detalle ni siquiera una mínima parte de los textos de una página web. En su lugar, y por economía de tiempo, el usuario se limita a ojear la página, realizando un rápido barrido visual buscando elementos que llamen su atención.

Elementos de Atracción Visual

Para captar la atención del usuario, Nielsen recomienda utilizar:

  1. Palabras resaltadas mediante negrita y cambios de color o de tamaño
  2. Hipervínculos que actúan como elementos de atracción visual al destacarse del resto del texto
  3. Listas con viñetas o numeradas que facilitan el escaneo rápido
  4. Títulos de sección y titulares breves intercalados (también llamados 'ladillos')

Organización del Contenido

Debido a esta economía de lectura, el contenido debe organizarse estratégicamente:

  1. Las ideas más importantes deben aparecer al principio
  2. Usar menos del 50% del texto usado habitualmente en publicaciones escritas
  3. Los párrafos deben ser cortos (2-3 frases únicamente)
  4. Adoptar un estilo directo y conciso
  5. Evitar mensajes publicitarios exagerados que los usuarios aprenden a ignorar

Las Heurísticas de Usabilidad de Nielsen

Las 10 heurísticas de Nielsen (actualizadas por última vez en 2005) constituyen el marco de referencia más utilizado para el diseño de interfaces de usuario:

  1. Visibilidad del estado del sistema - El sistema debe mantener informados a los usuarios sobre lo que está ocurriendo
  2. Correspondencia entre el sistema y el mundo real - Usar el lenguaje de los usuarios, con palabras, frases y conceptos familiares
  3. Control y libertad del usuario - Los usuarios necesitan una "salida de emergencia" claramente marcada
  4. Consistencia y estándares - Seguir convenciones establecidas
  5. Prevención de errores - Mejor que buenos mensajes de error es un diseño cuidadoso que prevenga los problemas
  6. Reconocimiento antes que recuerdo - Minimizar la carga de memoria del usuario
  7. Flexibilidad y eficiencia de uso - Permitir que usuarios experimentados trabajen más rápidamente
  8. Diseño estético y minimalista - Los diálogos no deben contener información irrelevante
  9. Ayudar a reconocer, diagnosticar y recuperarse de errores - Mensajes de error claros y constructivos
  10. Ayuda y documentación - Proporcionar información fácil de buscar y orientada a las tareas del usuario

Los Cinco Componentes de Calidad de Nielsen

En su libro "Usability Engineering" (1993), Nielsen define cinco componentes de calidad para sus "Objetivos de Usabilidad":

  1. Facilidad de aprendizaje (Learnability) - Qué tan fácil es para los usuarios realizar tareas básicas la primera vez
  2. Eficiencia (Efficiency) - Qué tan rápido pueden realizar tareas una vez que conocen el diseño
  3. Memorabilidad (Memorability) - Facilidad para restablecer competencia después de un período sin uso
  4. Errores (Errors) - Cuántos errores cometen los usuarios y qué tan fácil es recuperarse
  5. Satisfacción (Satisfaction) - Qué tan agradable es usar el diseño

Otros Enfoques: Redish y el Diseño Centrado en Tareas

Janice Redish (2000) complementa la visión de Nielsen definiendo la usabilidad desde la perspectiva de las tareas del usuario. Para Redish, es preciso diseñar sitios web para que los usuarios sean capaces de "encontrar lo que necesitan, entender lo que encuentran y actuar apropiadamente... dentro del tiempo y esfuerzo que ellos consideran adecuado para esa tarea".

Elementos Gráficos y Usabilidad

Una parte fundamental de la usabilidad está determinada por los signos gráficos que representan elementos de control y proporcionan referentes visuales relacionados con elementos de la vida cotidiana del usuario. Estos pueden incluir:

  1. Iconos - Símbolos visuales de acciones o contenidos que resulten intuitivos. Por ejemplo, todo el mundo utilizan la "F" de facebook y no tiene sentido escribir "facebook" como opción de menú.
  2. Botones - que se vean claramente como botones y que inviten al usuario a clickarlos
  3. Menús de navegación - Estructuras consistentes que facilitan la orientación
    4. . Para aclararlo un poco, es necesario que los menús estén siempre en la misma posición (arriba y/o a la izquierda, por ejemplo), que las opciones estén siempre en el mismo orden (Sobre mí, trabajos y contacto, por ejemplo). Los submenús se abren de la misma manera (desorienta mucho que unas veces sea tipo dropdown y otras de otro tipo).
  4. Imágenes - Fotografías, ilustraciones o gráficos que refuerzan el mensaje

La investigación en usabilidad web se centra principalmente en el **acomodo, navegación, arquitectura de la información y contenido** de una aplicación web. Es importante tener en cuenta que la percepción de usabilidad tiene una influencia positiva en la **confianza, satisfacción y lealtad** del usuario hacia un sitio web.

---

Accesibilidad Web

Definición y Principios

La accesibilidad web es la práctica inclusiva de garantizar que los sitios web, herramientas y tecnologías estén diseñados y desarrollados para que las personas con discapacidad puedan usarlas. Más específicamente, permite que todos los usuarios puedan **percibir, comprender, navegar, interactuar y contribuir** con la web.

Dimensión del Problema

Según la Organización Mundial de la Salud (OMS), aproximadamente mil millones de personas viven con algún tipo de discapacidad en el mundo. Esto representa aproximadamente el 15% de la población mundial, lo que convierte la accesibilidad web en una necesidad fundamental, no en una opción.

Tipos de Limitaciones y Barreras

Las limitaciones en la accesibilidad de los sitios web pueden clasificarse en:

Limitaciones Visuales

  1. Ceguera total - Requiere tecnologías de asistencia como lectores de pantalla
  2. Baja visión - Necesita herramientas de ampliación y alto contraste
  3. Daltonismo - Problemas para distinguir colores, especialmente rojo-verde

Limitaciones Motrices

  1. Dificultad para usar las manos - Debido a temblores, lentitud muscular, etc.
  2. Enfermedades específicas - Parkinson, distrofia muscular, parálisis cerebral
  3. Amputaciones - Requieren interfaces adaptadas y dispositivos especializados

Limitaciones Auditivas

  1. Sordera total - Necesita subtítulos y transcripciones
  2. Deficiencias auditivas parciales - Requiere amplificación o alternativas visuales

Limitaciones Cognitivas

  1. Dificultades de aprendizaje - Dislexia, discalculia, TDAH
  2. Discapacidades cognitivas - Que afecten memoria, atención, habilidades lógicas
  3. Trastornos del espectro autista - Requieren interfaces predecibles y claras

2.3.5 Población de la Tercera Edad

Las personas mayores enfrentan combinaciones de limitaciones físicas y cognitivas que pueden resultar en infoexclusión si los sitios web no están diseñados considerando sus necesidades.

Tecnologías de Asistencia

Las personas con discapacidad utilizan diversas tecnologías de asistencia para navegar por la web:

Para Limitaciones Visuales

  1. Software de lectura de pantalla - Utiliza síntesis de voz para leer contenido seleccionado o todo lo que ocurre en la computadora
  2. Terminales Braille - Dispositivos con pantalla Braille actualizable que convierten texto en caracteres Braille táctiles
  3. Software de ampliación de pantalla - Aumenta el tamaño de lo mostrado en el monitor

Para Limitaciones Motrices

  1. Software de reconocimiento de voz - Acepta comandos hablados o convierte dictado en texto
  2. Teclados alternativos - Facilitan la escritura para personas con dificultades de control motor
  3. Dispositivos de conmutación - Permiten navegación mediante switches especializados

Para Limitaciones Auditivas

  1. Subtítulos - Para contenido de video y audio
  2. Videos en lengua de señas - Interpretación visual para personas sordas

Componentes Esenciales de la Accesibilidad Web

La accesibilidad de los sitios web depende de la cooperación de varios componentes interconectados:

Contenido

  1. Información natural - Texto, imágenes, sonidos que transmiten el mensaje
  2. Código y marcado - HTML, CSS, JavaScript que define la estructura y presentación del contenido
  3. Metadatos - Información sobre el contenido que ayuda a las tecnologías de asistencia a interpretar y presentar el contenido correctamente

Agentes de Usuario

  1. Navegadores web - Chrome, Firefox, Safari, Edge
  2. Reproductores multimedia - Para contenido de audio y video
  3. Tecnologías de asistencia - Lectores de pantalla, magnificadores

Herramientas de Creación

  1. Editores HTML - Que generen código accesible
  2. Sistemas de gestión de contenido (CMS) - WordPress, Drupal, etc.
  3. Herramientas de diseño - Que consideren accesibilidad desde el inicio

Conocimiento y Experiencia de Usuarios

  1. Estrategias adaptativas - Formas personalizadas de navegar
  2. Experiencia con tecnologías - Familiaridad con herramientas de asistencia
  3. Retroalimentación - Input valioso para mejorar la accesibilidad

Desarrolladores y Diseñadores

  1. Conocimiento de estándares - WCAG, ARIA, HTML semántico
  2. Experiencia personal - Incluir desarrolladores con discapacidades
  3. Usuarios que contribuyen contenido - Todos los creadores de contenido

Herramientas de Evaluación

  1. Herramientas automáticas - WAVE, axe, Lighthouse
  2. Validadores - HTML, CSS, verificadores de accesibilidad
  3. Pruebas con usuarios reales - La evaluación más importante

Estándares y Directrices

WCAG (Web Content Accessibility Guidelines)

Las directrices del W3C establecen cuatro principios fundamentales:

  1. Perceptible - La información debe ser presentable de formas que los usuarios puedan percibir
  2. Operable - Los componentes de la interfaz deben ser operables
  3. Comprensible - La información y el funcionamiento de la interfaz deben ser comprensibles

Niveles de Conformidad

  1. Nivel A - Nivel mínimo de accesibilidad
  2. Nivel AA - Estándar recomendado para la mayoría de sitios web
  3. Nivel AAA - Nivel más alto, requerido para sitios especializados

Beneficios de la Accesibilidad Web

La implementación de principios de accesibilidad beneficia a **todos los usuarios**, no solo a personas con discapacidades:

  1. Mejor SEO - Estructura semántica mejora indexación
  2. Compatibilidad móvil - Principios accesibles funcionan bien en dispositivos móviles
  3. Usabilidad general - Interfaces claras benefician a todos
  4. Alcance de mercado - Acceso a segmentos de población previamente excluidos
  5. Cumplimiento legal - Muchos países tienen regulaciones de accesibilidad web

Relación entre Usabilidad y Accesibilidad

Aunque son conceptos distintos, usabilidad y accesibilidad están intrínsecamente relacionados:

  1. La accesibilidad es prerequisito - Sin accesibilidad, no puede haber usabilidad para personas con discapacidades
  2. La usabilidad mejora la experiencia - Una vez accesible, la usabilidad determina qué tan efectiva es la interacción
  3. Diseño universal - Los mejores diseños consideran ambos aspectos desde el inicio
  4. Beneficio mutuo - Mejoras en uno a menudo benefician al otro

El objetivo final es crear experiencias digitales que sean **utilizables por todos**, independientemente de sus capacidades, contexto de uso o tecnologías de asistencia empleadas.

Diseño UI y UX en el Diseño Web: Evolución Histórica y Fundamentos

1. Interfaces de Texto: Los Comienzos (1970–1980)

Durante los años setenta y principios de los ochenta, las interfaces de los ordenadores eran exclusivamente textuales. El usuario interactuaba con el sistema a través de líneas de comandos, introducidas mediante un teclado y mostradas en terminales de solo texto como el IBM 3270 o el DEC VT100. Estos terminales operaban con resoluciones fijas de texto, como 80 columnas por 24 filas, y carecían de capacidades gráficas. Algunos modelos posteriores, como el VT241, podían representar gráficos vectoriales básicos y hasta 16 colores, pero en su mayoría predominaba el uso de pantallas monocromas, generalmente verdes o ámbar.

El diseño de interfaz se reducía a cuestiones funcionales: legibilidad de texto, estructura de menús jerárquicos, y mensajes de error comprensibles. La organización de la información y la eficiencia del flujo de comandos eran prioritarias frente a cualquier componente visual.

En este contexto, los llamados menús jerárquicos no eran gráficos ni desplegables, sino estructuras textuales organizadas por niveles. Los programas más avanzados, como WordStar o Lotus 1-2-3, ofrecían menús principales con categorías (por ejemplo, Archivo, Edición, Datos), y el usuario accedía a subopciones a través de combinaciones de teclas. La navegación se realizaba de forma secuencial o mediante atajos de teclado, y requería conocer la estructura lógica del menú o leerla directamente en la pantalla.

2. El Salto Gráfico: Xerox PARC y la GUI

La introducción de la interfaz gráfica (GUI) se produjo en Xerox PARC a partir de 1973 con el desarrollo del Xerox Alto, un ordenador pionero en integrar ventanas, iconos y ratón. Aunque no fue comercializado, su sucesor, el Xerox Star (1981), sí lo fue, y sentó las bases del paradigma visual. Estos equipos ofrecían pantallas monocromas con resoluciones como 606×808 píxeles, orientadas verticalmente, y trabajaban con metáforas visuales como el escritorio, los documentos y las carpetas, todo operado mediante interacciones directas como clics y arrastres.

3. De la Innovación a la Masificación: Apple, PC y Amiga

Apple adoptó este enfoque en el Apple Lisa (1983) y lo popularizó con el Macintosh 128K (1984), que tenía una resolución de 512×342 píxeles en blanco y negro. Su sistema operativo introdujo elementos como menús desplegables, ventanas superpuestas e iconos funcionales.

Mientras tanto, el IBM PC (1981) mantenía una interfaz de línea de comandos. Su tarjeta gráfica CGA permitía una resolución de 320×200 píxeles a 4 colores o 640×200 a 2 colores. Con la evolución hacia las tarjetas EGA y VGA, el PC alcanzó los 640×350 píxeles con 16 colores (EGA) y 640×480 píxeles con hasta 256 colores simultáneos (VGA), lo que facilitó la aparición de entornos gráficos como Windows y OS/2.

El Commodore Amiga 1000 (1985) introdujo capacidades gráficas avanzadas, con resoluciones de hasta 640×512 píxeles y modos que permitían mostrar hasta 4096 colores simultáneos mediante técnicas como Hold-And-Modify (HAM). Su interfaz gráfica, llamada Workbench, era multitarea, personalizable y visualmente rica.

4. Silicon Graphics (SGI): La Revolución Profesional del 3D

En el ámbito profesional, Silicon Graphics (SGI) dominó el mercado con estaciones como la Indigo² y la Octane, empleadas en cine, medicina y diseño científico. Estas máquinas ofrecían resoluciones de 1280×1024 píxeles con color de 24 bits (16,7 millones de colores) y aceleración gráfica 3D. Su entorno gráfico, basado en IRIX y gestores de ventanas como 4Dwm, estaba orientado a la eficiencia y la visualización en tiempo real.

5. Interfaz de Usuario (UI): Principios Formales

En este punto, el diseño de interfaz de usuario (UI) se había consolidado como un campo técnico. La UI se ocupa de la organización visual de los elementos con los que el usuario interactúa: ventanas, botones, menús, iconos, tipografía y estructura. Se aplicaban principios como la consistencia (los elementos similares deben comportarse igual), la visibilidad (el sistema debe mostrar su estado actual), la retroalimentación inmediata (toda acción debe provocar una respuesta), y la flexibilidad (ofrecer atajos sin impedir el uso convencional).

6. Experiencia de Usuario (UX): Más Allá de la Interfaz

A partir de los años noventa, la experiencia de usuario (UX) comenzó a diferenciarse de la UI como un campo propio. La UX no se limitaba a la interfaz, sino que consideraba la totalidad de la experiencia: facilidad de aprendizaje, eficiencia en las tareas, satisfacción estética, calidad de la documentación, estabilidad del sistema, e incluso el proceso de instalación y soporte técnico.

El diseño UX buscaba entender las necesidades del usuario antes, durante y después de la interacción, mediante pruebas de usabilidad, entrevistas, mapas de flujo y métricas cualitativas. Fue impulsado por figuras como Donald Norman —autor de The Design of Everyday Things (1988)— y Jakob Nielsen, que formalizó principios heurísticos en los años noventa (como puede verse en NN/g).

7. Diseño Responsivo

El concepto de diseño responsivo, es decir, la adaptación de interfaces a distintas capacidades y tamaños de pantalla, tiene sus orígenes en las décadas de 1970 y 1980, antes de la popularización de la World Wide Web. Durante esta época, los sistemas informáticos abarcaban desde terminales de texto monocromáticos hasta estaciones de trabajo gráficas avanzadas, cada uno con limitaciones muy diferentes.

Expertos en usabilidad y diseño de interfaces como Ben Shneiderman (quien en 1987 publicó “Designing the User Interface”) sentaron las bases del diseño adaptativo para entornos diversos. En estos años, los diseñadores debían contemplar pantallas con resoluciones muy variadas: desde los IBM PC con pantallas CGA de 640×200 píxeles y paletas de 4 colores, hasta terminales gráficos profesionales como las estaciones Silicon Graphics (SGI), capaces de 1280×1024 píxeles y más de 16 millones de colores.

Estas diferencias requerían interfaces que se adaptaran en forma y funcionalidad. El diseño responsivo se materializaba a través de versiones específicas para cada dispositivo, cambios en el tamaño y contraste de tipografías, y la reducción o modificación de elementos gráficos para optimizar la experiencia en entornos con recursos limitados.

A pesar de no existir todavía estándares automatizados para esta adaptación, estas prácticas sentaron las bases para el desarrollo futuro de sistemas más flexibles y escalables. Es importante destacar que en esta época la interacción estaba dominada por dispositivos de entrada como teclados y ratones, y la UI debía ser clara y eficiente para evitar frustración en usuarios no técnicos.

8. La Web: Primeras Interfaces y HTML Estático

La llegada de la Web en los años noventa marcó un nuevo punto de inflexión. Los primeros navegadores, como Mosaic (1993) y Netscape Navigator (1994), solo permitían HTML estático. Las páginas eran lineales, sin separación entre contenido y presentación. El diseño estaba limitado a etiquetas como <font>, <center>, y <table>, y se pensaba en términos de documentos, no de interfaces.

Los navegadores operaban en resoluciones comunes como 640×480 o 800×600 píxeles, y las tarjetas gráficas ofrecían 256 colores simultáneos (8 bits), aunque el hardware ya permitía más en algunos casos.

9. CSS y el Diseño UI Web

La introducción de CSS en 1996 por Håkon Wium Lie, respaldada por el W3C, permitió separar contenido y estilo, facilitando el diseño tipográfico, el color, el espaciado y la disposición. Esto dio origen a un diseño UI específico de la Web, que debía tener en cuenta la variabilidad de dispositivos, la accesibilidad y la limitación de recursos.

Surgieron entonces decisiones estructurales sobre jerarquía visual, tamaño y color del texto, tamaño de botones, contraste de fondo, y uso de cuadrículas (grid) y sistemas de columnas para maquetación (12 columnas en Bootstrap). Con la evolución de los navegadores, aparecieron frameworks como Bootstrap o Foundation, que formalizaron principios de diseño responsivo, adaptando la interfaz a distintos tamaños de pantalla mediante media queries y rejillas flexibles.

10. UX en la Web: Interacción, Accesibilidad y Emoción

La UX en la Web se amplió para incluir no solo la funcionalidad, sino también la percepción emocional y el contexto de uso. Se aplicaron técnicas como test A/B, mapas de calor, prototipado interactivo y métricas de conversión para evaluar la calidad de la experiencia.

El diseño UX web comenzó a incorporar accesibilidad universal (WCAG), carga progresiva, tiempos de respuesta optimizados, patrones de comportamiento predecibles y narrativa visual. El diseño centrado en el usuario se volvió normativo, y conceptos como arquitectura de la información, microinteracciones y emotional design se integraron al ciclo de diseño y evaluación continua.

11. Diseño Responsivo en la Web

Con la expansión masiva de la World Wide Web a partir de finales de los años 90 y la diversidad creciente de dispositivos — desde ordenadores de escritorio y laptops hasta tablets y smartphones — el diseño responsivo se convirtió en un requisito imprescindible para asegurar que las interfaces web se adaptaran fluidamente a diferentes tamaños y características de pantalla.

El concepto moderno de Diseño Web Responsivo (Responsive Web Design, RWD) fue popularizado en 2010 por Ethan Marcotte en su influyente artículo "Responsive Web Design" y su libro homónimo, donde sintetizó prácticas que hasta entonces se aplicaban de forma fragmentada. Marcotte propuso combinar tres componentes clave:

  1. Rejillas fluidas: sistemas de diseño basados en unidades relativas (%), que permiten que los contenedores y columnas se ajusten proporcionalmente al tamaño de la pantalla en lugar de usar medidas fijas en píxeles.
  2. Imágenes flexibles: técnicas que permiten que las imágenes se escalen dinámicamente para adaptarse al tamaño del contenedor o pantalla, evitando que se desborden o se vean pixeladas. Esto se logra con propiedades CSS como max-width: 100%, que limita la anchura máxima al 100% del contenedor.
  3. Media queries: reglas CSS que permiten aplicar estilos diferentes en función de características del dispositivo, como el ancho o la resolución de la pantalla. Por ejemplo, se pueden definir estilos específicos para pantallas menores a 480 píxeles (móviles) o mayores a 1200 píxeles (monitores de escritorio).

Este avance fue posible gracias al trabajo del W3C, que introdujo las media queries en CSS3 entre 2009 y 2012, estandarizando la capacidad para aplicar estilos condicionales según el ancho, resolución o tipo de dispositivo. Antes de eso, los diseños web eran mayormente estáticos o usaban técnicas como tablas o múltiples hojas de estilo para diferentes dispositivos, lo que complicaba el mantenimiento y la accesibilidad.

El uso de rejillas flexibles y sistemas de columnas adaptativos basados en unidades relativas (% para anchos, em/rem para tipografías y vw/vh para dimensiones de pantalla) sustituyó el uso de medidas fijas en píxeles, permitiendo una fluidez real en la maquetación que se ajusta al dispositivo.

Además, la carga condicional de recursos, como imágenes escaladas automáticamente o scripts optimizados para móviles, mejoró significativamente el rendimiento y la experiencia de usuario. Esto es crucial para cumplir con los principios de UX — accesibilidad, facilidad de navegación y coherencia visual — en un ecosistema con gran heterogeneidad de tamaños y capacidades.

Hoy, frameworks y librerías como Bootstrap (lanzado en 2011), Foundation o Tailwind CSS implementan sistemas responsivos sofisticados que facilitan la creación de interfaces modernas, accesibles y escalables, acelerando el desarrollo y homogenizando la experiencia en dispositivos.

Colores, Tipografía, utilización de espacios

Calidad del contenido, Optimización SEO

Identidad visual

1) Logotipo

¿Qué es un logotipo?

Función del logotipo en la identidad visual

Tipos de logotipos (isotipo, logotipo, imagotipo, isologo)

Adaptabilidad del logo al entorno web (responsive logos)

Tamaños y proporciones recomendadas para web

Versiones del logo (color, blanco y negro, monocromático)

Ubicación habitual del logo en interfaces web

Optimización para diferentes dispositivos y pantallas

2) Paleta de colores

Importancia del color en la percepción visual

Importancia del color en la percepción visual

Psicología del color aplicada al diseño web

Cómo construir una paleta de colores (colores primarios, secundarios, de acento)

Contraste y accesibilidad (WCAG)

Herramientas para crear y testear paletas de colores (ej. Coolors, Adobe Color)

Implementación en CSS (variables, tokens de diseño)

Consistencia visual en todos los elementos web

3) Tipografía

Rol de la tipografía en la identidad visual

Tipos de tipografías (serif, sans-serif, display, monospace)

Selección tipográfica según tono de la marca

Jerarquía visual y estructura (títulos, subtítulos, cuerpo de texto)

Uso de tipografías web (Google Fonts, @font-face, WOFF2)

Legibilidad en diferentes dispositivos y tamaños

Combinación de tipografías (principios y errores comunes)

4) Usos correctos e incorrectos

Logotipo ✅ Usos Correctos

Estructura de navegación

Contenido de la sección 3.

Herramientas

Contenido de la sección 4.

Investigación y referencias

Contenido de la sección 5.