Web Estática vs Web Dinámica: Diferencias, Ventajas y Cómo Elegir

Web estática y web dinámica

Usuarios de internet: 9 de cada 10 españoles son usuarios de internet.

Web estática o tradicional

¿Qué es?

Es un conjunto de páginas HTML entrelazadas de alguna forma entre sí y que contienen referencias a otros elementos dependientes: ficheros de imágenes, sonido, vídeo, hojas de estilo y scripts.

Características

Son informativas, con descripciones de una empresa, persona, etc. Están construidas básicamente con texto, imágenes y enlaces. Son muy económicas de desarrollar, no se usan bases de datos, no existen elementos programados y se usa el lenguaje HTML para la estructura y el contenido. También se usan hojas de estilo CSS para el diseño.

Ventajas de la web estática

Muy portables, funcionan en cualquier servidor, se cargan rápidamente, ofrecen máximo rendimiento y funcionalidad, facilitan el posicionamiento en Google, el coste de alojamiento es muy barato y tienen pocos requerimientos técnicos para su desarrollo. No precisan de instalación ni configuración de software especializado.

Inconvenientes para el usuario (web estática)

El usuario no puede interactuar con el contenido, no hay interacción. No se puede personalizar la información que se muestra ni realizar búsquedas de contenido. El usuario no puede seleccionar, ordenar ni modificar contenidos ni el diseño de la página web. No se usan funcionalidades con bases de datos, foros o chats.

Inconvenientes para el webmaster (web estática)

El administrador web o webmaster es el único encargado de acceder al servidor web para modificar el contenido. Debe conocer los lenguajes HTML y CSS. El proceso de actualización es largo, tedioso y manual: cambiar un solo elemento en una web estática requiere reconstruir y recargar en el servidor toda la página o, a veces, incluso un grupo de páginas web.

Comunicación cliente-servidor en la web estática (arquitectura básica)

Ante una petición de una página por parte de un usuario, el servidor que aloja la web se limitará a buscarla y, si la encuentra, la remitirá al ordenador peticionario junto con el resto de elementos referenciados. Una vez recibidos, el navegador del solicitante se encargará de interpretar (presentar visualmente) el código HTML. Por tanto, existe una correspondencia entre los archivos o páginas HTML que se encuentran en el servidor y los que recibe e interpreta el cliente.

Web dinámica

¿Qué es?

Es un conjunto de datos almacenados en una base de datos (BD) y un conjunto de programas conocidos como páginas activas (en lenguajes como PHP, ASPX, JSP…) que constituyen la interfaz para que los usuarios del sitio manipulen la información. La web dinámica es la web 2.0.

Generador de la web dinámica

Servidor → base de datos → navegador

Diferencia entre la web 1.0 y la 2.0

La diferencia radica en que la web 1.0 era una web de consulta, mientras que la web 2.0, la web de hoy, es una web participativa, que cambió la manera en que la información circula por la red, permitiendo que los usuarios formen parte de esta.

Características generales de la web dinámica

Se puede construir cualquier tipo de web: empresarial, blog, correo, aplicaciones online, etc. Requiere infraestructura de archivos y bases de datos en el servidor. El sitio web cambia en función del usuario que accede a él. El proceso de actualización es sencillo y se usan lenguajes de programación.

Cliente-servidor en la web dinámica

1) Cliente: el programa del lado del cliente se ejecuta en el propio navegador del usuario.
2) Servidor: el programa del lado del servidor se ejecuta en el servidor donde se aloja la página web y el resultado se envía al navegador del cliente.

La programación es independiente entre cliente y servidor.

Comunicación cliente-servidor en la web dinámica (arquitectura básica)

Un usuario teclea una dirección o pulsa un enlace en su navegador, con lo que se solicita una página activa. El servidor web recibe la petición y, tras cargar la página activa, el procesador del lenguaje apropiado pasa a interpretar las instrucciones que contiene. Estas, de forma simplificada, se ocupan, en un primer momento, de seleccionar los datos de la BD según la petición recibida (para lo cual deberá comunicarse con el SGBD, en el lenguaje que este proponga) y, a continuación, ubicar los datos recuperados para la composición o maquetación final de todo el código HTML que se enviará al usuario.

Arquitectura II de la web dinámica

Todo este proceso hace que se diga comúnmente que las páginas HTML que recibe finalmente el navegador solicitante se generan «sobre la marcha», es decir, en el instante de la petición.

Siguiendo a De Miguel (1993: 56), diremos que un SGBD es una compleja aplicación informática ideada para que múltiples usuarios, de forma concurrente, puedan «describir, recuperar y manipular bases de datos, asegurando en todo momento la integridad, confidencialidad y seguridad». Es decir, un SGBD es, hoy en día, la infraestructura necesaria para el sostén de la web 2.0, que se caracteriza por la creación, actualización y mantenimiento de sus contenidos de forma flexible y cooperativa.

Esta edición compartida de datos no le resulta ajena a un traductor que haya trabajado con memorias de traducción en red, donde cualquiera de los miembros del equipo conectados a dicha memoria en línea puede, a la vez que los demás, introducir o modificar en ella segmentos bilingües (unidades de traducción), así como ver «en tiempo real» las aportaciones que están realizando sus compañeros. Como ya se sabe, una memoria de este tipo es una base de datos que, naturalmente, estará gestionada por un SGBD.

Arquitectura III (importante)

Si analizamos la secuencia de acciones:

1. Petición: el usuario solicita una página web que inicialmente será la home del portal. En llamadas posteriores, las solicitudes dependerán de las acciones del usuario, por ejemplo, al pulsar en algún punto del menú del portal.
2. Solicitud al servidor: la solicitud llega al servidor web a través de una página de script, en este caso desarrollada con lenguaje ASP.
3. Servidor de aplicaciones: el servidor transfiere la página al intérprete, en este caso ASP. Recordemos que también podría haber sido una página en PHP.
4. Consulta: la página ASP contiene instrucciones para acceder a la base de datos del portal y extraer los registros que «construirán virtualmente» el código HTML de la página.
5. Controlador de la base de datos: se gestionan los registros recuperados.
6. Juego de registros: los datos obtenidos se devuelven al servidor de aplicaciones.
7. Construcción: se entregan los datos al intérprete ASP para construir «virtualmente» la página en código legible para el navegador.
8. Respuesta: el servidor web transfiere al navegador del usuario la página «construida» para su visualización.

Ventajas de la web dinámica

Posibilidades infinitas para el diseño de una página web, facilidad para añadir y modificar contenidos, diseño web responsive para adaptarse a cualquier resolución, interacción del usuario con el contenido o el diseño de la página, proceso de actualización muy sencillo sin necesidad de entrar en el servidor y funcionalidades como bases de datos, foros, aplicaciones web y contenido dinámico.

Inconvenientes de la web dinámica

Gran requerimiento técnico para su alojamiento, costes de alojamiento mayores en servidores de pago, mayor coste de desarrollo, mayor tiempo para servir la página al cliente y el administrador debe conocer los lenguajes de programación y/o saber gestionar el sistema.

Web estática vs. dinámica: ¿cuál elegir?

a) Es recomendable optar por una página estática si:

1. Lo único que quieres es tener presencia en Internet.
2. Las secciones de tu página no van a sufrir grandes cambios.
3. Es de contenido fijo y con pocos apartados.

b) Una web dinámica es mejor en el caso de:

1. Querer actualizarla y añadir contenidos de manera constante.
2. Necesitar incluir noticias, crear y guardar la base de datos de tus clientes.
3. Tener como objetivo interactuar con los visitantes.

¿Cuál elegir?

Web con actualizaciones frecuentes; web con nuevo contenido (diario, semanal o mensual, como un blog); magnitud de la actualización del contenido; velocidad de carga de la página (algo más lenta); contenido multimedia más atractivo; y posibles errores de código o plugins incompatibles.

Arquitectura mixta

¿Qué es?

Web con ficheros HTML reales en el servidor web, pero cuya parte de contenido es generada por código script (ASP, PHP, JSP, etc.).

¿Cómo funciona?

1. El usuario solicita una página web ubicada en el servidor.
2. El servidor localiza la página y la envía al intérprete para que complete su contenido dinámico.
3. Una vez completa la página, la nueva página virtual contendrá código legible para el navegador.
4. El servidor web transfiere al navegador del usuario la página construida para su visualización.

Resumen

Web estática: página web con texto, imágenes y enlaces. No se usan bases de datos. Son fáciles de desarrollar, económicas y rápidas de consultar. Existen físicamente en el servidor. Las crea y edita un webmaster, ya que para un usuario es difícil.

Web dinámica: es la web 2.0. Los usuarios son prosumidores, los webmasters son especialistas, se usan lenguajes de programación, el servidor requiere software específico y la web se construye única para cada usuario o petición.

Web dinámica vs. estática

Actualmente, la inmensa mayoría de páginas web son dinámicas. Las webs dinámicas pueden ser actualizadas por los prosumidores. Las webs estáticas son para que no cambien en el tiempo (actualmente todo cambia y los usuarios necesitan nueva información).

Estructura de la web dinámica

Definiciones

Modelo de comunicación: vincula a varios dispositivos a través de una red. El cliente hace peticiones, el servidor envía la respuesta y la red es por donde viajan los datos.

Cliente: quien inicia solicitudes o peticiones; tiene un papel activo en la comunicación. Espera y recibe las respuestas del servidor, puede conectarse a varios servidores a la vez e interactúa directamente con los usuarios finales mediante una interfaz gráfica de usuario (GUI).

Servidor: ordenadores que ejecutan programas que atienden las peticiones de otros programas: los clientes. Espera a que lleguen solicitudes de los clientes, tiene un papel pasivo en la comunicación, recibe una solicitud, la procesa y luego envía la respuesta al cliente. Acepta conexiones de muchos clientes (número máximo de peticiones limitado).

Arquitectura de redes

Es el diseño de una red de comunicaciones. Se especifican los componentes físicos de una red, su organización funcional y configuración, sus procedimientos y principios de operación, así como los formatos de los datos usados en su funcionamiento.

Topologías de redes

1. Bus
2. Estrella
3. Anillo
4. Árbol
5. Malla
6. Doble anillo
7. Mixta

Redes LAN y WAN

LAN (Local Area Network): red de medio alcance que necesita un ISP para interconectar nodos de la red (alcance máximo: interconexión de nodos de varios edificios).
WAN (Wide Area Network): red de alto alcance que interconecta ciudades y países entre sí. Necesita varios ISP, por ejemplo, Internet.

Protocolos de comunicaciones

El modelo TCP/IP

(Protocolo de Control de Transmisión / Protocolo de Internet) es un protocolo de red desarrollado en la década de 1970. Describe un conjunto de guías generales de operación para permitir que un equipo pueda comunicarse en una red. También provee conectividad de extremo a extremo especificando cómo los datos deberían ser formateados, direccionados, transmitidos, enrutados y recibidos por el destinatario.

Arquitectura cliente-servidor: antecedentes

La arquitectura cliente/servidor es resultado de la integración de dos culturas de los años 80:

• Mainframe: capacidad de almacenamiento, integridad y acceso a la información.
• Computador personal: facilidad de uso, cultura PC, bajo costo, presentación atractiva (aspecto lúdico) y una amplia oferta en productos y aplicaciones.

Definición de IBM

Es una tecnología que proporciona al usuario final el acceso transparente a las aplicaciones, datos, servicios de cómputo o cualquier otro recurso del grupo de trabajo y/o a través de la organización en múltiples plataformas. El modelo soporta un medio ambiente distribuido en el cual los requerimientos de servicio hechos por estaciones de trabajo inteligentes o clientes resultan en un trabajo realizado por otros computadores llamados servidores.

Ventajas

Permite el reuso de componentes, es muy modulable y flexible, hace un uso eficiente del hardware y facilita la integración entre distintos sistemas y el intercambio de información. Permite, por ejemplo, que las máquinas puedan ser usadas mediante una interfaz más amigable para el usuario. Al favorecer el uso de interfaces gráficas interactivas, los sistemas construidos bajo este modelo tienen mayor interacción con el usuario. La estructura modular facilita la integración de nuevas tecnologías y el crecimiento de la infraestructura computacional, favoreciendo así la estabilidad de las soluciones.

Desventajas

Necesita un administrador del servidor. Requiere conocimiento para que un servidor sea reparado. La seguridad necesita protocolos de seguridad para el acceso de usuarios y peticiones remotas. Tiene un coste elevado de hardware y software.

Estructura de una aplicación

Las aplicaciones de software tienen 3 funciones fundamentales: administración de los datos, lógica de la aplicación (procesos) y lógica de la presentación (interfaz de usuario).

Filosofía de la arquitectura cliente-servidor

Repartir el tratamiento de la información y los datos por todo el sistema para mejorar el rendimiento global. Provee separación de funciones: CLIENTE (frontend, consumidor de servicios) y SERVIDOR (backend, proveedor de servicios).

División de funciones de la arquitectura cliente-servidor

Cliente: ofrece una GUI (Graphical User Interface).
Servidor: gestiona el acceso a los datos y realiza funciones de control y seguridad relacionadas con las peticiones del cliente.

Características de la arquitectura cliente-servidor

• Mucha flexibilidad, según las necesidades del producto o servicio.
• Mayor seguridad, definible en cada servicio.
• Más rendimiento, por las tareas que comparten.
• Escalabilidad independiente: cambios transparentes para los usuarios finales.
• Interrelación entre hardware y software.
• Posee una infraestructura poderosa: el acceso a los recursos de red no muestra la complejidad de los distintos tipos de formatos de datos y de productos.
• El procesamiento se divide en distintas capas.

Funciones del cliente

Administrar la interfaz de usuario, aceptar datos del usuario, procesar la lógica de la aplicación, generar las solicitudes para la BD, transmitir las solicitudes de la BD al servidor, recibir los resultados del servidor, dar formato a los resultados, y capturar y validar los datos de entrada.

Funciones del servidor

Aceptar las solicitudes sobre BD de los clientes, procesar las solicitudes sobre BD, dar formato a los resultados y transmitirlos al cliente, llevar a cabo la verificación de integridad, mantener los datos generales de la BD, proporcionar control de acceso concurrente, llevar a cabo la recuperación y optimizar el procesamiento de consultas y actualizaciones.

Ejemplos de arquitectura cliente-servidor

• Navegar por la web: funciona basándose en un cliente web o navegador y un servidor como Apache, Nginx o LiteSpeed.
• Protocolo FTP: se usa un cliente FTP como FileZilla para conectarse a un servidor FTP como pure-ftpd o ProFTPD.
• SSH (Secure Shell): manejo de servidores de forma remota; la información está encriptada.
• Juegos en red: existen clientes que permiten a los jugadores online jugar desde sus casas conectándose a servidores de juegos remotos.
• Sistema DNS (Domain Name System): se usa para asociar direcciones IP a un nombre fácil de reconocer por los usuarios.
• Servidor de correo: los clientes de correo consultan el correo en el servidor remoto, tanto desde el móvil como desde el ordenador de escritorio o portátil.

Arquitectura cliente-servidor multicapa

Tiene 3 capas de componentes: un componente front-end, responsable de proporcionar la lógica de presentación; un componente back-end, que proporciona acceso a servicios dedicados como un servidor de bases de datos; y un componente de capa intermedia (middle tier), que permite a los usuarios compartir y controlar la lógica de negocio mediante su aislamiento de la aplicación real.

Tipos de web dinámica

1. Dinámica de servidor o backend: los contenidos que estás viendo se generan especialmente para ti. El servidor no está mostrando una página HTML que alguien creó, sino que esta se crea para ti y contiene elementos únicos para ti.
2. De navegador o front-end: la página que estás viendo no es estática, sino que tiene interacciones; por ejemplo, al pulsar un botón puede cargarse dinámicamente más información y añadirse a la página. O al pulsar en una imagen puede que se agrande para ocupar toda la ventana del navegador.

Normas y estándares

¿Qué es un estándar?

Conjunto de reglas normalizadas que describen los requisitos que deben cumplir los productos y servicios.

Objetivo

Establecer un mecanismo base para permitir que distintos elementos de hardware o software que lo usen sean compatibles entre sí. El objetivo es hacer las cosas más fáciles, definiendo características de objetos y sistemas que se usan cotidianamente.

Tres condiciones del estándar

1. Simplificación: reducir los modelos quedándose con los más necesarios.
2. Unificación: permitir el intercambio a nivel internacional.
3. Especificación: evitar errores de identificación empleando un lenguaje claro y preciso.

Tipos de estándares

1) Estándar de iure o de ley: generados por comités con estatus legal y avalados por el apoyo de un gobierno o institución para producir estándares.

2) Estándar de facto o de hecho: nacen a partir de productos de la industria que tienen gran éxito en el mercado o a partir de desarrollos realizados por grupos de investigación de universidades y que tienen gran difusión. No participa ninguna organización de estandarización. La mayoría son consorcios privados con intereses comunes, sin ánimo de lucro. Aceptan a cualquiera que pueda adherirse y suelen solicitar contribuciones al público. Su fuerza se sustenta en el número de participantes. A veces, sus miembros más competentes representan los intereses de algún país.

Estándar de facto vs. de iure

Algunos estándares de facto se convierten en de iure, o por amplia aceptación los de iure se consideran de facto.

• Estándar de iure: ANSI
  • ANSI/SPARC: estándar de diseño abstracto para un sistema de gestión de bases de datos (SGBD/DBMS).
  • ANSI-C: lenguaje de programación C.
• Estándar de facto: IEEE (Institute of Electrical and Electronics Engineers): asociación mundial de ingenieros dedicada a la normalización y al desarrollo en áreas técnicas. Fundada por Thomas Alva Edison, Alexander Graham Bell, Franklin Leonard Pope y otros. Sus estándares afectan a una amplia gama de industrias: potencia y energía, biomedicina y salud, tecnologías de la información, etc.
• Estándar de facto: W3C (World Wide Web Consortium): organización independiente y neutral que desarrolla estándares relacionados con la web. Sus recomendaciones son referencia para construir una web accesible, interoperable y eficiente.

Consorcio World Wide Web (W3C)

Comunidad internacional donde las organizaciones miembro, el personal a tiempo completo y el público en general trabajan juntos para desarrollar estándares web. Liderado por Tim Berners-Lee y dirigido ejecutivamente por Jeffrey Jaffe (CEO).

La guerra de los navegadores

Inicios

Entre los años 1995 y 2010, Explorer se instalaba por defecto en el sistema operativo Windows. Los navegadores no eran compatibles con los estándares web.

Competición entre empresas

Había conflicto en la web entre los fabricantes de navegadores (Netscape vs. Microsoft). Para competir, cada uno añadió nuevos elementos en el código HTML y nuevas formas de manipular documentos web. Esto creó un caos entre diseñadores y programadores, pues no podían hacer páginas web compatibles con todos los navegadores.

Caos en el desarrollo web

La incompatibilidad de los navegadores con los estándares crearía una fragmentación importante en la web. Se preveían dos grandes problemas: el aumento del coste de creación de sitios web (había que hacerlos dos veces) y el riesgo de que ciertos usuarios no pudieran acceder al contenido o los servicios ofrecidos por la web.

Web Standards Project (WaSP)

En 1998, un grupo de activistas web (Glenn Davis, George Olsen y Jeffrey Zeldman, a quien después se unió Aaron Gustafson) empezó a trabajar con los diseñadores de navegadores para convencerlos. El objetivo de WaSP era lograr que los fabricantes de navegadores admitieran los estándares establecidos por el World Wide Web Consortium.

En 2000, la guerra terminó. WaSP cambió su objetivo: algunos miembros continuaron trabajando con los proveedores de navegadores para mejorar su compatibilidad con los estándares; otros empezaron a trabajar en estrecha colaboración con fabricantes de software como Macromedia para mejorar la calidad del código generado por herramientas como Dreamweaver; y otros decidieron educar a diseñadores y desarrolladores web sobre la importancia de usar estándares.

Ventajas del uso de estándares

Generales: ayuda a simplificar el código fuente, reduce el tiempo de desarrollo y mantenimiento, hace la web más accesible, permite la compatibilidad y la validación hacia atrás, ayuda a mantener un mejor SEO y crea un grupo de conocimiento común.

Para software en servidores y clientes: cumplir con los estándares web da mayor visibilidad a las páginas en las búsquedas de la red. Facilita que el software en servidores (server-side) y clientes (client-side) entienda la estructura de su documento; además, añadir funcionalidades como un motor de búsqueda al propio sitio es más fácil y da mejores resultados. Los estándares están escritos para que los navegadores antiguos puedan entender la estructura básica de sus documentos: si no pueden interpretar los elementos o funcionalidades más nuevas, igualmente podrán visualizar el contenido del sitio. Los documentos que cumplen los estándares pueden convertirse fácilmente a otros formatos, lo que permite un uso más versátil de la información. Además, facilitan la migración a nuevos sistemas (de hardware y de software), incluyendo aparatos como televisores y lectores portátiles. La accesibilidad es una idea importante detrás de muchos estándares web, especialmente en HTML, pues la web es usada por personas con capacidades diferentes, con acceso a navegadores diversos o con tecnología asistencial (navegadores de voz, de texto, braille…).

Para las personas: es un paso de gran importancia para lograr una sola web, asegurando que todos los navegadores, tanto antiguos como nuevos o especiales, permitan la visualización e interacción. Si no se siguen los estándares, hay un porcentaje de la población que no podrá acceder a la web.

Componentes de la web

• Desarrolladores: herramientas de autor y herramientas de evaluación.
• Usuarios: tecnología asistiva o accesible, navegadores y reproductores.

Éxito en los estándares web: compatibilidad correcta

Un documento que se publica en Internet debe funcionar en distintos navegadores, plataformas y dispositivos, presentes y futuros.

La trinidad de los estándares web

Los tres componentes: estructura con HTML, presentación con CSS3 y comportamiento con JavaScript.

Validación del código web

Permite saber si la web es compatible con todos los navegadores y plataformas disponibles. Cumplir con los estándares de los lenguajes de programación es una muy buena práctica. La validación del código correcta ayuda en la optimización y el mantenimiento de un código fuente.

Diseño responsive

Expansión de Internet (problemática)

Cada vez más personas se conectan a Internet con dispositivos, y la conectividad se ha expandido a otros como coches o equipos de gimnasio. En 2020 se estimaba que 31 000 millones de dispositivos se conectarían a Internet con 4 000 millones de personas que lo usan, con dispositivos de muchas resoluciones de pantalla.

Objetivo del W3C: One Web

El principal objetivo es la iniciativa One Web: hacer solo una web, sin fragmentación de contenidos, unificando el contenido para distintos dispositivos móviles, navegadores, operadores y proveedores de contenido.

Análisis de la propuesta de solución

En 2010, Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, en los que describió los conceptos teóricos y prácticos fundamentales para realizar un diseño web siguiendo las ideas del diseño web responsive.

Desarrollo de las ideas del RWD

Ethan creó una página web sencilla que simulaba el contenido de una revista que no existía, con un diseño de dos columnas construido en una cuadrícula fluida y con muchas imágenes flexibles. Era un diseño flexible que se adaptaba bien, pero tenía problemas para visualizarse en resoluciones extremas, en pantallas pequeñas y en pantallas panorámicas. En 2011, lo más novedoso era el diseño con floats.

Conclusión sobre el diseño flexible

Este funciona bien en un contexto centrado en el escritorio, para el que fue diseñado, pero no está optimizado para extenderse mucho más allá (en vista de pantallas pequeñas o extragrandes).

Idea: ser elástico

En lugar de adaptar el diseño de una página a una resolución, se puede integrar la resolución del dispositivo, ya que no se sabe cómo serán las pantallas del futuro. Diseñar una visualización óptima incorporando tecnologías basadas en estándares web para hacerlos no solo más flexibles, sino más adaptables a los medios que los generan. Es decir, diseño web responsivo.

Diseño web responsivo

La idea principal de esta técnica no es hacer un diseño para cada dispositivo, sino que la página web tenga la capacidad de adaptarse a cada dispositivo, creando una solución única. Sin que el usuario se dé cuenta, haciendo que la usabilidad de la aplicación sea realmente cómoda y proporcionando una buena experiencia de usuario.

Usabilidad: propiedad que tiene un sistema para que sea fácil de usar, de utilizar y de aprender.
Experiencia de usuario (UX): útil, usable, valiosa, deseable, creíble y accesible. Atiende a todos los factores, tanto internos como externos, del usuario y del sistema interactivo que causen alguna sensación a quien esté usando un sistema interactivo concreto en un determinado contexto de uso.

Características del RWD

Tiene como objetivo tener solo una versión en HTML y CSS que cubra todas las resoluciones de pantalla, ajustando los elementos de una web para adaptarla a la resolución de pantalla del dispositivo. Sus características son: media queries CSS, grids fluidos, elementos fluidos y posibles modificaciones en la disposición del contenido.

Media queries CSS: es la nueva especificación de CSS3. Permite aplicar estilos condicionalmente teniendo en cuenta los parámetros de la pantalla (la resolución del dispositivo).

Grids fluidos: especificar en el código layouts definidos en porcentajes que se ajusten a los anchos de la pantalla.

Fórmula: width: 6.25%; /* 60 / 960 = 0.0625 */

Elementos fluidos: elementos fluidos dentro de estos layouts (grids), como las fuentes, las imágenes o los elementos multimedia.

Modificación en la disposición del contenido: cambio en la visualización de las zonas del contenido sin cambiar el código fuente HTML.

Miscelánea: Google y RWD

Google detalló su preferencia por los sitios desarrollados con diseño web responsive, porque con el mismo código HTML y bajo la misma URL se accede a páginas con distintas resoluciones de pantalla. Interactuar con el HTML facilita la indexación de las páginas en los buscadores.

Diseño responsivo

Evolución del diseño web

Para desarrollar una web según un diseño propuesto, de forma correcta en todos los navegadores y dispositivos, los diseñadores web debían usar «hacks» de CSS, propiedades float, macros, bibliotecas, JavaScript en CSS y otros trucos hasta 2018. Desde 2021, con CSS Grid Layout y Flexbox, es posible crear sitios web exactamente de la manera en que se diseñan.

Tipos de diseño web (6)

Una interfaz puede crearse usando distintas técnicas:

1. Diseño fijo (tamaño fijo): el más usado en Internet. Es inalterable sea cual sea el dispositivo de visualización. Se usan medidas absolutas como píxeles para definir los elementos web. No es un diseño adaptable; surgió con la web.
2. Diseño elástico (unidades «em»): define las dimensiones de la web con unidades relativas. El «em» es una unidad tipográfica que mide exactamente el ancho de la letra «M» mayúscula de una tipografía; no siempre mide lo mismo. No es un diseño adaptable. El diseñador web usa «em» para fijar anchos de diseño web y del resto del contenido.
3. Diseño líquido o fluido (porcentajes): surgió hacia el año 2000 como alternativa a las tablas HTML. Los tamaños se definen en porcentajes. No permite controlar el diseño, que varía constantemente según el tamaño del dispositivo, y no se puede ajustar un diseño correcto para todos los tamaños, lo que perjudica la experiencia de usuario. Tiende a ocupar todo el ancho de la pantalla sea cual sea su tamaño y se adapta a la ventana del dispositivo.
4. Diseño web responsivo o adaptable (se adapta al dispositivo): surgió en 2010 para adaptar la web a una variedad de dispositivos. Se basa en media queries, elementos fluidos y diseño en grid. El diseño se transforma en función del tipo de dispositivo o del ancho de la ventana del navegador que lo visualiza, y las imágenes y las fuentes se adaptan. Hay coherencia entre dispositivos y se usan CSS Grid Layout y Flexbox.
   Código: @media (min-width: 1201px) { … } @media (min-width: 701px) and (max-width: 1200px) { … } @media (max-width: 700px) { … }
5. Diseño flexible (dentro de unos márgenes predefinidos): usa las propiedades CSS min-width (define el tamaño mínimo que puede tener un elemento) y max-width (define el ancho máximo de un elemento) para que las anchuras de los bloques puedan adaptarse dentro de unos mínimos y máximos.
6. Diseño intrínseco (uso adecuado de elementos CSS): este enfoque no es exactamente nuevo; se trata de usar las habilidades y el conocimiento de CSS existentes de una manera diferente. La belleza de este diseño es combinar distintas unidades y experimentar con técnicas para obtener lo mejor para el contenido. Fue definido por Jen Simmons en 2018. Se basa en el uso de los elementos CSS de forma adecuada, manteniendo el código limpio, mínimo y más eficiente.

Diseño web responsivo vs. adaptable

Responsivo: el diseño lo decide la ventana del navegador del visitante del sitio. Ethan Marcotte introdujo en 2010 el diseño responsivo, definiendo sus características en el blog A List Apart. Usa un diseño único y la ubicación de los elementos web cambia según la resolución de pantalla, desde un PC hasta un dispositivo móvil.

Adaptable: varias plantillas optimizadas y únicas para cada clase de dispositivo. Aaron Gustafson introdujo en 2011 este enfoque, que usa diseños fijos distintos para múltiples tamaños de pantalla. Es habitual, por ejemplo, desarrollar 6 diseños para los seis anchos de pantalla más comunes: 320, 480, 760, 960, 1200 y 1600 px. El diseño en general es adaptativo: incluye las consultas de medios CSS del diseño responsivo y también agrega mejoras basadas en Java para cambiar el marcado HTML del sitio según las capacidades del dispositivo. Este proceso se conoce como mejora progresiva.

Diferencias entre responsivo y adaptativo

• En tiempo de carga: el adaptativo se carga más rápido, debido a que solo transfiere los activos necesarios específicos de cada dispositivo.
• En dificultad: el responsivo requiere un diseño y puede ser más fácil de implementar, pero exige más atención al CSS y a la organización del sitio para garantizar que sea completamente funcional en todos los tamaños de pantalla. El adaptativo es más difícil de construir porque necesita distintos diseños para distintos dispositivos.
• En flexibilidad: el responsivo requiere menos mantenimiento; estos sitios son suficientemente flexibles para funcionar bien por sí mismos de forma predeterminada, incluso si aparece un nuevo dispositivo o tamaño de pantalla en el mercado. El adaptativo se considera menos flexible, porque un nuevo dispositivo con nuevo tamaño de pantalla podría romper su diseño. Los tamaños de pantalla cambian siempre y son muy variados, por lo que necesita mantenimiento ocasional.

Optimización para buscadores

Google recomienda y recompensa a los sitios que usan diseño adaptable. Un sitio web optimizado para dispositivos móviles ocupa un lugar más alto en las páginas de resultados de los motores de búsqueda.

Pros y contras del diseño web responsivo

Pros: experiencia transparente, menos tareas de mantenimiento, más económico, mejora la eficiencia de rastreo e indexación, y más amigable con los motores de búsqueda.
Contras: carga de página más lenta y dificultad para integrar anuncios.

Pros y contras del diseño web adaptativo

Pros: muy orientado a cada usuario o dispositivo, tiempos de carga más rápidos, optimizado para la publicidad, y permite reutilizar un sitio web existente.
Contras: trabajo intensivo para crearlo, más difícil de mantener y costoso.

Cuándo usar el diseño responsivo

Es perfecto para pequeñas y medianas empresas que necesitan actualizar sus sitios existentes, o para empresas que necesitan construir un sitio completamente nuevo. Se recomienda para industrias basadas en servicios, que se componen principalmente de texto e imágenes, ya que es económico y permite tener un sitio hermoso y completamente funcional a un precio razonable.

Cuándo usar el diseño adaptable

Es mejor para sitios web complejos existentes que requieren una versión móvil. Se recomienda para sitios que dependen de la velocidad. Es ideal para una experiencia altamente específica que puede adaptarse a la ubicación, la velocidad de conexión y la personalización del contenido. Es perfecto para quienes necesitan más control sobre cómo se entrega su sitio a distintos usuarios en distintos dispositivos.

5) Diseño flexible

Define dentro de unos márgenes predefinidos. Usa las propiedades CSS min-width y max-width para que las anchuras de los bloques puedan adaptarse dentro de unos mínimos y máximos.

6) Diseño intrínseco

Uso adecuado de elementos CSS (ya descrito en la lista de tipos de diseño).

Características del diseño intrínseco

1. Mezclar elementos fluidos y fijos a la vez: es posible usar imágenes fijas o fluidas simultáneamente con la propiedad CSS object-fit (indica cómo redimensionar un elemento según su contenedor). Se puede cambiar el tamaño de una imagen en vertical y horizontal sin distorsionar la relación de aspecto. Se configura la imagen para que se ajuste al objetivo. Medidas vh y vw (medidas relativas al viewport).
2. Cuatro medidas flexibles disponibles: el uso de CSS Grid Layout presenta nuevas maneras de ajustar el diseño al contexto intrínseco de una página web. Hay 4 tipos de medidas para organizar elementos: a) fijo: medidas fijas en px; b) minmax: medida fluida de un mínimo a un máximo, hasta fijo; c) auto: hace fluir los elementos; d) fr: nuevas medidas de fracciones para diseño fluido.
3. Diseños verdaderamente bidimensionales: CSS Grid permite diseñar elementos bidimensionales con columnas y filas flexibles (propiedades height y width). Se pueden posicionar elementos en cualquier lugar de la página de forma fácil y flexible, y se pueden añadir espacios en blanco de forma sencilla.
4. Contextos anidados: con diseño intrínseco es posible tener contextos anidados: a) flow, solo en bloques; para ofrecer un contexto de formato, se necesita usar clearflex; b) flexbox, contexto de formato adecuado; c) cuadrícula (grid), contexto de formato; d) multicolumna.
5. Expandir y contraer contenido: usar diseño intrínseco facilita contraer y expandir el contenido de una web: a) aplastar y crecer, por ejemplo, imágenes fluidas; b) ajustar y redistribuir, por ejemplo, texto; c) agregar y eliminar espacios en blanco.
6. No usar siempre media queries: cuando el diseño web requiere CSS, no siempre son necesarias las media queries. Es posible usar una combinación de varias herramientas y tecnologías para lograr un diseño intrínseco.

Técnicas de diseño web

¿Qué son?

Conjunto de procedimientos o recursos que se usan para desarrollar un sitio web. Es importante tener en cuenta cómo se visualizarán los elementos de la página web en cada dispositivo (mobile first); el propósito del contenido condiciona el diseño de la web (content first); empezar con un sitio web básico y mejorar progresivamente la interacción (mejora progresiva); y cómo mostrar el diseño según las preferencias del usuario (dark mode).

Mobile first

Técnica que concentra inicialmente el diseño de la página para dispositivos móviles y posteriormente para otras resoluciones como tabletas, portátiles y pantallas de PC. Mejora la experiencia de usuario de quienes visitan una web desde el móvil.

Objetivo

El propósito del mobile first es desarrollar una solución web óptima para dispositivos móviles y solo después, basándose en la estrategia de mejora progresiva, adaptarla a ordenadores y portátiles.

Si diseñamos para móvil

Existen diferencias entre los patrones de uso de PC y móvil. El valor principal de una web es el mismo independientemente del dispositivo con el que se acceda. Quien no tiene PC quiere realizar las mismas acciones que con el móvil. Debe centrarse la atención del usuario en las acciones importantes, y la interfaz móvil debe ser clara y minimalista.

Experiencia del usuario con el móvil

One eyeball and one thumb: el entorno de uso tan distraído hace que la mayoría de los usuarios de dispositivos móviles se involucren con una sola mano y con breves periodos de atención parcial.

Localización: hay que optimizar la interacción en cada dispositivo. Los usuarios esperan satisfacer su necesidad de velocidad en el diseño; si no, se irán a otra web que sí lo haga. También quieren encontrar servicios cercanos a donde se encuentran ubicados.

Tiempo: los usuarios tienen preferencias sobre qué momento del día hacer una tarea y con qué dispositivo realizarla.

Limitaciones con el móvil

• Pantallas pequeñas (poco espacio): dar prioridad a lo que se muestra en pantalla.
• Conexión lenta o limitada: obliga a optimizar el rendimiento para cargar rápidamente los datos.
• Atención del usuario parcial: breve o en breves espacios de tiempo.

La ubicación y el tiempo de uso del usuario actúan como limitaciones en el proceso de diseño móvil, porque obligan a pensar de forma diferente en cómo la gente utilizará los productos a lo largo del día.

Microfuncionalidades del móvil

Detección de localización, orientación del dispositivo, posibilidad de uso del acelerómetro, toque de la pantalla con manipulación directa. Además, dispone de: dirección (brújula), giroscopio de 360º, entrada y salida de audio, captura de vídeo e imagen con cámara, cámaras duales frontal y trasera, conexiones de dispositivos mediante Bluetooth, proximidad (cercanía del dispositivo a objetos físicos), luz ambiental (conocimiento del entorno de luz u oscuridad), entre otras.

Lo que hacen los usuarios de móvil

Editar o crear (cambio urgente, microtarea), comprobar el estado, repetir, buscar y encontrar, explorar, jugar, etc.

Cómo interactuar con la pantalla

Orientación del dispositivo: el modo horizontal se usa en situaciones que requieren acercar la pantalla. Sostener el teléfono en forma horizontal permite disponer de un teclado más grande y una mayor superficie para pulsar las teclas, lo que facilita escribir más cómodamente.

Consideraciones generales

1. Jerarquía visual: en una pantalla móvil, el usuario solo verá una columna. ¿Cómo organizar la información?
2. Funciones táctiles: la interacción en un móvil es con el dedo. Hay que tener en cuenta el tamaño de los botones y de los elementos clicables.
3. Gráficos grandes: no usar imágenes grandes para no distraer al usuario; es mejor usar contenido.
4. Efectos hover: en los móviles no existen los efectos de «pasar por encima» de un elemento para crear un efecto visual.

Al pensar en las limitaciones de los dispositivos móviles, podemos concentrarnos en las funcionalidades clave de nuestra web y asegurarnos de que será universalmente funcional, sin importar el dispositivo.

Mobile first vs. mobile friendly

Mobile friendly: diseño optimizado para móviles. Comprueba si tu página lo es.

Ventajas: el usuario puede acceder fácilmente a su contenido; el contenido es responsivo y fácil de leer; tiene tiempos de carga cortos; y los enlaces son visibles y se puede hacer clic en ellos.

Características cuando una página no es mobile friendly: usa software poco común para dispositivos móviles (por ejemplo, Flash); el tipo de letra es pequeño e ilegible; los enlaces están demasiado cerca o se ven uno encima de otro; o el contenido es demasiado grande para la pantalla.

En mobile first importa el contenido

La calidad del contenido es también un criterio fundamental para garantizar al usuario una experiencia móvil óptima. Las páginas web para dispositivos móviles con un contenido conciso y fácil de leer son muy valoradas por los motores de búsqueda. Una buena estructura web y el rápido despliegue de los resultados de búsqueda, así como algunos elementos interactivos y una buena estructura de enlaces, son importantes. Los textos, imágenes y gráficos también son importantes para cualquier web: los textos deben estar bien estructurados, ser más cortos y contar con títulos y subtítulos; las imágenes y los vídeos deben cargar fácilmente y tener la calidad suficiente para visualizarse en dispositivos móviles con pantallas de alta definición.

Content first

Técnica que implica el uso del contenido para definir el diseño y los elementos de un sitio. Prioriza un mensaje central y de marca en vez de la estética del diseño. Todos los usuarios obtienen un conjunto completo de contenido: exactamente el mismo cuando es apropiado, y alternativas equivalentes cuando no lo es.

Elimina restricciones al diseño

Empezar con palabras en una página; no tratar de encajar el contenido en un diseño ya terminado; y no caer en el problema de escribir el contenido según limitaciones.

Tener en cuenta la audiencia

Conocer los gustos, el idioma y las frustraciones de los usuarios permite crear contenido adecuado para ellos. Una vez conocidos, hay que crear contenido centrado en satisfacer sus necesidades, que ayude a resolver sus frustraciones.

Tono de voz

Hay que saber con qué tono dirigirse a la audiencia. Propósito: saber qué queremos conseguir al comunicarnos con los usuarios. Tipo de tono: saber qué tono usar para enganchar a los usuarios. Carácter: qué características tendrán los mensajes del contenido.

Lenguaje cercano a los usuarios

• Usar textos fáciles de leer para que la web sea más accesible.
• Usar frases cortas y lenguaje sencillo.
• Evitar el uso de muchos números o denominaciones matemáticas.
• No usar metáforas o comparaciones que puedan ser confusas.
• Acuñar un único mensaje por cada frase.
• Ser claro, conciso y directo.
• Dejar márgenes amplios.

Mejora progresiva (progressive enhancement)

Crear una página web con HTML inicialmente y luego añadir la hoja de estilos CSS y la funcionalidad en JavaScript. Permite que cada usuario tenga acceso al contenido y a la funcionalidad básica de una web usando cualquier navegador y cualquier conexión a Internet.

Proceso

HTML → HTML + CSS → HTML + CSS + JavaScript

Dark mode

Es un esquema de color que usa texto, iconos y otros elementos de la interfaz de usuario de colores claros sobre un fondo oscuro.

¿Qué hace?

Mejora la legibilidad del texto, ofrece mejor contraste, reduce la fatiga visual y ahorra batería.

Implementar el modo oscuro puede mejorar la experiencia de usuario (UX), la usabilidad y la accesibilidad de tu sitio web.