Tabla de contenido

1. Introducción .............................................................................................................. 3
2. Introducción a las aplicaciones web .......................................................................... 4
2.1. Esquema de funcionamiento de un servicio web ............................................... 4
2.2. Lenguajes de marcas .......................................................................................... 6
2.3. Lenguajes de script de navegador ...................................................................... 8
2.5. Lenguajes de script de servidor........................................................................ 10
3. Arquitectura básica de las aplicaciones web ........................................................... 11
3.1. El servidor web .................................................................................................... 11
3.2. Organización del servidor web ............................................................................ 13
3.3. Organización de las aplicaciones web ................................................................. 14
4. Arquitectura básica de las aplicaciones web ........................................................... 15
5. Ventajas y desventajas de las aplicaciones web. ..................................................... 19
5.1. Ventajas ............................................................................................................ 19
5.2. Desventajas ...................................................................................................... 20
6. Diseño de web inclusivo ......................................................................................... 21
7. Evolución de la web ................................................................................................ 25
7.1. La Web 1.0 - Web Estática ............................................................................... 27
7.1.1. Características ........................................................................................... 27
7.2. La Web 2.0 - Web Social .................................................................................. 28
7.2.1. Características ........................................................................................... 28
7.3. La Web 3.0 o ¿la Web Semántica? ................................................................... 29
7.3.1. Objetivos................................................................................................... 30
7.4. La Web 4.0 o ¿Internet de las cosas? ............................................................... 30
7.4.1. Elementos ................................................................................................. 31
8. Conclusiones ........................................................................................................... 32
Tabla de ilustraciones

Ilustración 1 .................................................................... ¡Error! Marcador no definido.

Ilustración 2. A) imagen sobre un captcha no accesible b) su versión accesible. (imagen
extraída de juntadeandalucia.es) ............................................................................. 21
Ilustración 3. Imagen de la página de configuración del sitio de la universidad de
alicante. ................................................................................................................... 22
Ilustración 4.Imagen sobre panel de configuración. ....................................................... 22
Ilustración 5. Falta de transparencia en las opciones...................................................... 23
Ilustración 6. Incompatibilidad entre el texto del botón o enlace y la página o pantalla
destinataria. ............................................................................................................. 24
Ilustración 7. Páginas muy distintas que pertenecen al mismo sitio. ............................. 24
Ilustración 8. Problemas de tipografía y de contrastes. .................................................. 25
Ilustración 9. Caracteríticas de la web 1.0 ...................................................................... 27
Ilustración 10. Interacción en la web 2.0 ........................................................................ 29
Ilustración 11. Elementos de la web 3.0 ......................................................................... 30
 1. Introducción

En la actualidad, las aplicaciones web han revolucionado la forma en que interactuamos

con la tecnología y accedemos a servicios en línea. Con el rápido avance de la

tecnología y el crecimiento de Internet, las aplicaciones web se han convertido en una

parte esencial de nuestras vidas, brindándonos una amplia gama de servicios y

funcionalidades accesibles desde cualquier lugar y en cualquier momento.

Las aplicaciones web, son programas informáticos que se ejecutan en un servidor web y

se accede a ellos a través de un navegador web en lugar de requerir la instalación de

software adicional en los dispositivos de los usuarios. Esta característica distintiva ha

abierto un mundo de posibilidades, ya que las aplicaciones web eliminan las barreras de

compatibilidad y facilitan el acceso rápido y sencillo a las funcionalidades ofrecidas.

El objetivo de esta investigación bibliográfica es explorar en profundidad el fenómeno

de las aplicaciones web, analizando su evolución a lo largo del tiempo, su impacto en

diversos sectores y las ventajas y desafíos asociados con su desarrollo e

implementación.

En resumen, esta investigación bibliográfica tiene como objetivo proporcionar una

visión integral sobre las aplicaciones web, destacando su importancia en el panorama

tecnológico actual y su potencial para impulsar la innovación y transformación en

diversos ámbitos. A través del análisis crítico de la literatura existente, se espera obtener

una comprensión más profunda de este campo en constante evolución.

 2. Introducción a las aplicaciones web

2.1. Esquema de funcionamiento de un servicio web

Un servicio web se refiere a un conjunto de reglas y protocolos diseñados para permitir

el intercambio de datos entre diferentes aplicaciones. Las aplicaciones de software son

herramientas utilizadas por los usuarios para comunicarse y se desarrollan en diversos

lenguajes de programación.

Estas aplicaciones interactúan y comparten datos a través de redes de computadoras,

como Internet. Los protocolos son las reglas que establecen la comunicación entre los

clientes (los usuarios) y los servidores (otros equipos informáticos) a través de

aplicaciones como los navegadores web.

Además de los protocolos, los estándares también desempeñan un papel importante en

los servicios web. Los estándares son especificaciones disponibles públicamente que se

utilizan para llevar a cabo tareas específicas. Un ejemplo de un estándar ampliamente

reconocido es el desarrollado por el W3C (World Wide Web Consortium). [1]

Los servicios web permiten la comunicación entre diferentes aplicaciones de software

sin importar la plataforma en la que estén instaladas. Esto es posible gracias al uso de

protocolos y estándares abiertos. En el esquema básico de funcionamiento de un

servicio web, intervienen varios elementos:

• Clientes: Son aquellos que realizan solicitudes, como los navegadores web

utilizados por los usuarios.

• Servidores: Son programas que se ejecutan de forma continua en un ordenador

y esperan las solicitudes de los clientes. Responden a estas solicitudes mediante

la generación de páginas web, actuando como servidores web.

• Aplicaciones de software: Son los mecanismos utilizados por los clientes y los

servidores para comunicarse. En este caso, se refiere a los navegadores web

utilizados por los clientes.

• Lenguaje de programación: Es la forma en que se crean las aplicaciones de

software. Puede ser cualquier lenguaje de programación, como C++.

• Red de ordenadores: Se trata de un conjunto de ordenadores y/o dispositivos

conectados que comparten información a través de cables, señales, ondas u otros

métodos de transporte de datos. Internet es un ejemplo de una red de

ordenadores a gran escala.

• Protocolos: Son conjuntos de reglas utilizadas en la comunicación entre clientes

y servidores. El protocolo HTTP (HyperText Transfer Protocol) es un ejemplo

común utilizado para transferir páginas HTML.

• Estándares: Son reglas normalizadas que describen los requisitos que deben

cumplir los productos, procesos o servicios. Permiten que los elementos de

hardware o software que los utilizan sean compatibles entre sí. Un ejemplo

conocido es el HTML (HyperText Markup Language), utilizado para definir la

estructura de los documentos web. Al utilizar el mismo formato de desarrollo, se

logra que los usuarios interpreten y representen los documentos web de la

misma manera. [1]

Ilustración 1
 2.2. Lenguajes de marcas

Los lenguajes de marcas son utilizados para codificar documentos al incorporar

etiquetas o marcas que proporcionan información adicional sobre la estructura del texto.

Estas marcas son códigos que indican al programa cómo debe interpretar y presentar el

contenido del documento. Si se desea que un texto aparezca con un formato específico,

se utiliza la etiqueta correspondiente que define cómo debe ser mostrado.

El lenguaje de marcas más ampliamente utilizado es el HTML (HyperText Markup

Language), que es el lenguaje utilizado en la World Wide Web. Otros ejemplos de

lenguajes de marcas incluyen XHTML (Extensible HyperText Markup Language), RSS

2.0 (Really Simple Syndication), RTF (Rich Text Format), entre otros.

La versión actual del HTML es el HTML 4.01, que es una revisión del HTML 4. Esta

versión incorpora características como el uso de hojas de estilo, ejecución de scripts,

marcos, tablas más avanzadas y otras ventajas que se pueden consultar en la

especificación del HTML 4.01.

HTML se utiliza para construir páginas web mediante la estructuración de contenido en

forma de texto, y también se pueden incorporar otros elementos como imágenes y

sonidos. El lenguaje HTML se escribe utilizando etiquetas, que están delimitadas por

los símbolos de menor que (<) y mayor que (>). Algunas etiquetas tienen atributos que

pueden contener valores específicos. La mayoría de las etiquetas deben cerrarse

utilizando los símbolos de menor que, barra y mayor que (</>). Por ejemplo, si se

utiliza la etiqueta <html> para indicar el inicio de un documento HTML, se debe cerrar

con la etiqueta </html>. [1]

 Ilustración 2

Existen tres etiquetas principales que describen la estructura general de un documento

HTML:

La etiqueta <html> limita el documento y señala el inicio y el final de este. Indica que

el documento está escrito en lenguaje HTML.

La etiqueta <head> define la cabecera del documento y contiene información que no se

muestra directamente al usuario. Esta sección suele contener el título del documento y

permite proporcionar metainformación para su identificación e indexación por los

motores de búsqueda.

La etiqueta <body> encierra el contenido principal del documento y define el cuerpo de

este. Es la parte del documento que se muestra en el navegador web. Dentro de esta

etiqueta, se pueden establecer propiedades comunes a toda la página, como el color de

fondo, el color del texto, los márgenes de la página y el estilo de los enlaces visitados.

Estas etiquetas son fundamentales para estructurar y organizar el contenido de una

página web. La etiqueta <html> engloba todo el documento, la etiqueta <head>

proporciona información relevante para el navegador y los motores de búsqueda, y la

etiqueta <body> contiene el contenido principal que se muestra al usuario. [1]

 2.3. Lenguajes de script de navegador

Los scripts son lenguajes de programación utilizados para crear programas que realizan

acciones dentro de una página web. Estos scripts permiten cambiar dinámicamente el

contenido de un documento, modificar el comportamiento del navegador, validar

formularios, implementar trucos visuales y realizar otras funcionalidades interactivas.

Los scripts se ejecutan en el navegador del cliente cuando se carga la página web o

cuando ocurre algún evento específico, como hacer clic en un enlace. Es importante

tener en cuenta que los scripts se ejecutan en el navegador del cliente y no en el servidor

donde están alojados, lo que significa que no pueden realizar operaciones como el

manejo de bases de datos en el servidor.

El lenguaje de script utilizado en HTML es JavaScript. Fue desarrollado por Netscape

Communications y es el lenguaje de programación del lado del cliente más ampliamente

utilizado y compatible con la mayoría de los navegadores modernos. JavaScript es un

lenguaje interpretado, lo que significa que no requiere compilación previa. Los

navegadores se encargan de interpretar el código JavaScript directamente.

En resumen, JavaScript es el lenguaje de script utilizado en HTML para agregar

interactividad y funcionalidades dinámicas a las páginas web. Al ser interpretado por los

navegadores, JavaScript permite crear una experiencia interactiva y personalizada para

los usuarios. [1]

Ilustración 3
 2.4. Hojas de estilo

Las hojas de estilo en cascada, conocidas como CSS (Cascading Style Sheets), se

utilizan para definir la presentación de un documento escrito en HTML o XML. Estas

hojas de estilo describen cómo se debe mostrar un documento en la pantalla.

Al crear una página web, es necesario especificar el comportamiento de los elementos

dentro de la página, como párrafos, tablas, listas, etc. Esta información se incorpora en

el documento HTML. Por otro lado, el aspecto visual de cada elemento, como el color,

el tamaño y tipo de letra, o la posición, se puede definir utilizando hojas de estilo CSS.

El objetivo principal de las CSS es separar la estructura de un documento de su

presentación visual. La información sobre los estilos que se aplicarán a la página puede

estar incluida en el propio documento HTML mediante la etiqueta <style>, o se puede

utilizar una hoja de estilo externa en un archivo separado utilizando la etiqueta <link>.

Por lo general, se define el estilo en la sección head del documento HTML. El lenguaje

predeterminado para las hojas de estilo es text/css, y se indica mediante el parámetro

type="text/css".

La sintaxis de los estilos se realiza utilizando llaves {}. Las hojas de estilo funcionan

mediante reglas, que son declaraciones sobre el estilo de uno o más elementos. Una

regla consta de dos partes: el selector y la declaración. Por ejemplo, en la regla h1

{color: red}, h1 es el selector o elemento, y {color: red} es la declaración o propiedad.

En este caso, el selector h1 indica al navegador qué parte del documento se verá

afectada por esa regla. Los selectores pueden aparecer de forma individual o agrupada

mediante comas.

Generalmente, la declaración o propiedad, en este caso el color, indica el cambio que se

realizará, como cambiar a color rojo. Las propiedades también se pueden agrupar
separándolas con punto y coma, aunque es común describir una propiedad por línea. Si

una propiedad consta de más de una palabra, se utiliza comillas (" ") para indicarlo. [1]

Ilustración 4

2.5. Lenguajes de script de servidor

En los primeros servidores web, la información se presentaba de manera estática, lo que

significa que permanecía inalterada hasta que se realizaba una nueva solicitud al

servidor. Para hacer que la información fuera más dinámica, se implementaron

soluciones técnicas que implicaban el uso de aplicaciones instaladas en el propio

servidor.

Una de estas tecnologías fue la Common Gateway Interface (CGI), que permitía

ejecutar programas escritos en lenguajes como C o Perl para actualizar la información y

lograr cierto grado de dinamismo.

Posteriormente, se desarrollaron lenguajes de programación del lado del servidor, como

PHP (Hypertext Preprocessor) de código abierto, ASP (Active Server Pages) de

Microsoft y JSP (JavaServer Pages) de Java. Estos lenguajes se utilizan para generar

páginas web dinámicas y facilitar el acceso a bases de datos.

Para ejecutar programas en PHP, ASP o JSP, es necesario descargar aplicaciones que

permitan ejecutar las extensiones correspondientes a esos lenguajes en el servidor. Por

ejemplo, si el servidor es compatible con PHP, simplemente se debe escribir el código

en un editor de textos, guardarlo con la extensión .php en la carpeta adecuada en el

servidor y luego acceder al archivo escribiendo la dirección de la página en el

navegador. De esta manera, se ejecutará el código PHP y se generará la página dinámica

correspondiente. [1]

3. Arquitectura básica de las aplicaciones web

3.1. El servidor web

Un servidor web se mantiene a la espera de solicitudes por parte de clientes, como

navegadores web o programas que llaman a un servicio web. Cuando el servidor recibe

una solicitud, responde adecuadamente proporcionando una página web que se mostrará

en el navegador del cliente, o bien mostrará un mensaje de error correspondiente.

Por ejemplo, al escribir “www.uteq.edu.ec” en el navegador, se realiza una solicitud

HTTP al servidor de esa dirección. El servidor responde enviando el código HTML de

la página, y el cliente interpreta y muestra el contenido en pantalla. En este caso, el

cliente es responsable de interpretar el código HTML y mostrar los elementos de la

página, como fuentes, colores y disposición de texto y objetos. El servidor simplemente

transfiere el código de la página sin realizar ninguna interpretación.

Además de la transferencia de código HTML, los servidores web también pueden

ejecutar aplicaciones web. Estas aplicaciones consisten en código que se ejecuta cuando

se realiza una solicitud o respuesta HTTP.

Es importante distinguir entre dos tipos de aplicaciones web:

a) Aplicaciones en el lado del cliente: el cliente web ejecuta estas aplicaciones en su

propia máquina. Pueden ser Java applets o scripts en JavaScript. El servidor

proporciona el código de estas aplicaciones al cliente, quien las ejecuta a través del

navegador. Es necesario que el cliente tenga un navegador capaz de ejecutar

aplicaciones o scripts, como JavaScript y Java. A veces se requieren plugins para

habilitar otros lenguajes de programación.

b) Aplicaciones en el lado del servidor: en este caso, el servidor web ejecuta la

aplicación y genera código HTML que luego se envía al cliente a través del protocolo

HTTP.

Una ventaja de desarrollar aplicaciones web en el lado del servidor es que no se requiere

una capacidad adicional en el navegador del cliente, a diferencia de las aplicaciones en

el lado del cliente que dependen de JavaScript o Java. Cualquier cliente con un

navegador web básico puede utilizar este tipo de aplicaciones. Sin embargo, esto

aumenta la carga en el servidor y puede afectar al rendimiento. Con la llegada de la Web

2.0 y las tecnologías AJAX, se ha distribuido más la carga entre los clientes y se han

desarrollado aplicaciones más potentes y escalables.

El diseño y ajuste de las aplicaciones web asociadas a un servidor web requieren

consideraciones cuidadosas para ofrecer un rendimiento adecuado en situaciones de alta

demanda o para aprovechar eficientemente los recursos de la máquina donde están

instaladas. Es importante comprender la organización de un servidor web para atender

las solicitudes HTTP de manera eficiente y conocer cómo se pueden ampliar las

funcionalidades del servidor mediante código adicional. [2]

 Ilustración 5

3.2. Organización del servidor web

Para lograr una atención eficiente y económica de las peticiones en un servidor web, es

importante comprender algunos términos:

• Proceso: Es la unidad más pesada de planificación de tareas proporcionada por

el sistema operativo. Cada proceso tiene su propio espacio de direcciones y

recursos, y el cambio de tarea se realiza mediante el núcleo del sistema operativo

de forma preventiva.

• Flujo o thread: Es la unidad más ligera de planificación de tareas

proporcionada por el sistema operativo. Como mínimo, hay un flujo por

proceso. Si hay varios flujos en un mismo proceso, comparten la misma

memoria y recursos de archivos. El cambio de tarea en los flujos también se

realiza mediante el núcleo del sistema operativo de forma preventiva.

• Fibra: Son flujos gestionados por el usuario de manera cooperativa, lo que

significa que no son preventivos y los cambios de contexto ocurren en

operaciones de entrada/salida u otros puntos explícitos, como llamar a ciertas

funciones. Estas fibras suelen ser implementadas por librerías fuera del núcleo

del sistema operativo y están disponibles en diferentes sistemas operativos.

Para determinar qué modelos de procesos son adecuados en cada situación, se deben

considerar las combinaciones del número de procesos, flujos por proceso y fibras por

flujo. En cualquier caso, cada petición en el servidor es atendida por un flujo, que es la

unidad de ejecución en el servidor. [2]

3.3. Organización de las aplicaciones web

Los servidores web desempeñan dos funciones principales: servir peticiones HTTP de

recursos, que generalmente son documentos almacenados en el sistema de archivos, y

actuar como intermediarios entre un cliente y un programa que procesa datos. En este

último caso, el servidor web recibe una solicitud con argumentos, la procesa y devuelve

un resultado que luego entrega al cliente. La interacción entre el servidor web y los

procesos asociados es otro aspecto importante que considerar.

Existen diferentes formas de organizar una aplicación web, que varían en complejidad y

rendimiento. A continuación, se presentan distintos modelos de organización en orden

cronológico, desde el más simple hasta el más complejo:

• CGI (Common Gateway Interface): Es el modelo más antiguo y básico. En

este enfoque, para cada solicitud HTTP se invoca un programa que recibe datos

a través de variables de entorno y/o entrada estándar, y devuelve un resultado a

través de la salida estándar. Sin embargo, el hecho de consumir un proceso por

cada petición puede generar problemas significativos de rendimiento. Para

abordar esto, surgió el modelo FastCGI.

• Servlets: Este modelo está diseñado específicamente para Java y ofrece mayor

eficiencia y estructura. Permite elegir diferentes modelos de gestión de flujos o

hilos, así como la duración de los procesos del servidor, entre otras opciones.

Los servlets han dado lugar al desarrollo de servidores de aplicaciones con

 funcionalidades adicionales que facilitan la creación de aplicaciones web

complejas.

• Lenguajes de script: Existen lenguajes, como PHP, que permiten incluir

fragmentos de código (scripts) en el código HTML. Cuando la solicitud llega al

servidor, estos scripts se ejecutan como si fueran programas CGI, y luego se

devuelve la respuesta al cliente. Las Java Server Pages (JSP) son scripts escritos

en Java que también se ejecutan en el servidor como servlets. [2]

Ilustración 6

4. Arquitectura básica de las aplicaciones web

En los primeros días de la Web, las aplicaciones web no existían. Teníamos sitios web

llenos de imágenes y contenido estático.

Ventajas y desventajas.

A continuación, se presentan algunas ventajas: [3]

• Hubo una sobrecarga computacional muy baja en el servidor.

• El contenido en sí era altamente almacenable en caché ya que los datos eran

estáticos y no cambiaban por

 • muchos ISP y proveedores de servidores.

A continuación, se presentan algunas desventajas: [3]

• Fue difícil actualizar el contenido.

• No hubo personalización y todos tuvieron la misma experiencia.

• La interfaz de usuario generalmente era deficiente en comparación con las

aplicaciones actuales.

La introducción de CGI supuso una auténtica revolución al posibilitar la creación de

contenido dinámico mediante el uso de lenguajes de secuencias de comandos. Sin

embargo, esta innovación también conllevaba algunos inconvenientes, como una carga

computacional relativamente elevada y la necesidad de poseer un conocimiento experto

en HTML y lenguajes de secuencias de comandos en el lado del servidor.

Posteriormente, se produjo la irrupción de JavaScript, que permitió por primera vez que

las páginas web fueran dinámicas. En sus inicios, se utilizaba principalmente para la

ejecución de secuencias de comandos básicas, como la validación de formularios o la

visualización de anuncios emergentes. [3]

Esto contribuyó a mejorar la usabilidad de las páginas y a reducir la cantidad de

interacciones con el servidor para validaciones muy simples. No obstante, la desventaja

radicaba en la necesidad de implementar la lógica de negocio en dos lugares diferentes:

en el lado del cliente y en el lado del servidor. [3]

La evolución tecnológica nos ha conducido a la era de la arquitectura de aplicaciones

web modernas. En esta sección, exploraremos detalladamente esta sofisticada

arquitectura con el propósito de desmentir el mito de que el desarrollo aislado de

aplicaciones móviles y de escritorio es la mejor opción. Las aplicaciones web modernas

se distinguen por su enfoque en una infraestructura de backend distribuida que permite

ofrecer contenido y atender a los clientes de frontend a través de la web. Esto se logra

gracias a la utilización de interfaces de programación de aplicaciones (API) RESTful.

En lugar de desarrollar aplicaciones móviles y de escritorio de manera separada, la

arquitectura de aplicaciones web modernas permite unificar y aprovechar al máximo los

recursos y la potencia de la web. Esto implica una mayor eficiencia, flexibilidad y

escalabilidad en el desarrollo de aplicaciones. Además, esta arquitectura fomenta la

reutilización de componentes y facilita la actualización y el despliegue de nuevas

funcionalidades. [3]

En resumen, la arquitectura de aplicaciones web modernas redefine la manera en que

concebimos y desarrollamos aplicaciones, superando las limitaciones de los enfoques

tradicionales y abriendo un amplio abanico de posibilidades en el mundo digital. [3]

Ilustración 7. Arquitectura en capas de aplicaciones web modernas.

Cuando se desea interactuar con múltiples componentes en una página y estos

componentes están anidados dentro de otros componentes, resulta desafiante

implementar la representación en el lado del servidor para todos estos componentes

intermedios. En comparación con la arquitectura tradicional del lado del servidor, la

idea central de la arquitectura moderna es construir el servidor como un conjunto de

servicios REST reutilizables y sin estado. Desde el enfoque del patrón Model-View-

Controller (MVC), se ha trasladado el controlador del backend al cliente. Así, el cliente

es capaz de aprovechar la arquitectura MVC. El cliente cuenta con una capa de vista

separada que contiene toda la lógica de presentación, así como una capa de servicios

front-end y una capa de controlador. [3]

Durante el inicio inicial de una aplicación, la comunicación entre el cliente y el servidor

se realiza exclusivamente mediante la transferencia de datos en formato JSON

utilizando una API RESTful. Toda la lógica empresarial se expone como puntos finales

REST, que son consumidos por servicios angulares u otros frameworks front-end. El

beneficio clave de esta arquitectura es que, al tener una aplicación móvil basada en la

misma aplicación web, simplemente se pueden consumir los servicios RESTful sin

necesidad de escribir código adicional en el lado del servidor específicamente para la

aplicación móvil. [3]

REST, que significa Transferencia de Estado Representacional, es un estilo

arquitectónico que proporciona una abstracción general en lugar de una implementación

concreta. Es la arquitectura subyacente en la forma en que funciona la web en la

actualidad. A través de REST, se define un conjunto de principios y restricciones que

permiten la comunicación eficiente y escalable entre los componentes de un sistema

distribuido. Los servicios RESTful se basan en el uso de verbos HTTP estándar, como
GET, POST, PUT y DELETE, para realizar operaciones en los recursos expuestos por el

servidor. [3]

La arquitectura de aplicaciones web modernas permite superar la complejidad de

manejar múltiples componentes intermedios y simplifica el desarrollo y la integración

de aplicaciones móviles y de escritorio. Al adoptar una infraestructura de backend

distribuida y servicios RESTful, se logra una mayor flexibilidad, escalabilidad y

reutilización de componentes. Esta arquitectura promueve una separación clara de

responsabilidades entre el cliente y el servidor. [3]

5. Ventajas y desventajas de las aplicaciones web.

Teniendo en cuenta las características de las páginas web vamos a clasificarlas en

ventajas y desventajas. [4]

5.1. Ventajas

• No es necesario instalar las aplicaciones en los dispositivos de los usuarios, ya

que se accede a ellas a través de un navegador web. Solo se requiere acceso a

Internet (o una intranet) y un navegador para utilizarlas, lo cual elimina las

barreras de accesibilidad. [4]

• Estas aplicaciones tienen la capacidad de funcionar en diferentes plataformas, ya

que no dependen del dispositivo o del sistema operativo del usuario. Esto

garantiza una experiencia similar en términos de apariencia e interacción,

independientemente del dispositivo utilizado. [4]

• El mantenimiento de estas aplicaciones se realiza en un único servidor, lo que

permite que las actualizaciones se reflejen de forma instantánea en los clientes.

Esto significa que los usuarios pueden acceder automáticamente a las nuevas

características sin necesidad de realizar instalaciones adicionales. [4]

• El desarrollo de aplicaciones web tiende a ser más económico, ya que se

simplifica y agiliza gracias a la disponibilidad de frameworks que facilitan tareas

comunes como el inicio de sesión y las operaciones CRUD. Esto reduce los

costos y la complejidad técnica, que hace que el desarrollo sea más accesible. [4]

• El diseño de las aplicaciones web es más sencillo y fácil de realizar, ya que se

utilizan lenguajes de marcado y estilos simples. Esto reduce la complejidad

técnica y permite que haya más desarrolladores disponibles, lo que a su vez hace

que el desarrollo sea más asequible. [4]

• Estas aplicaciones son independientes del hardware y del software, lo que

significa que no están limitadas por el tipo de dispositivo o sistema operativo

utilizado por los usuarios. Esto garantiza que puedan llegar a un amplio público

sin restricciones tecnológicas. [4]

5.2. Desventajas

• Las aplicaciones web no pueden acceder directamente a los recursos del

dispositivo del usuario, lo que puede dificultar su desarrollo y limitar las

capacidades de seguridad. [4]

• La información se descarga cada vez que el usuario accede a la aplicación, lo

cual puede generar ciertas barreras en términos de tiempo y costos. [4]

• Las aplicaciones web requieren una conexión a Internet (o intranet) para

funcionar, lo cual implica que los usuarios deben tener acceso a la red para

utilizarlas. [4]

• Estas aplicaciones se almacenan en servidores remotos y se accede a ellas a

través de una dirección URL conocida. Sin embargo, el acceso a las aplicaciones

puede estar limitado por los resultados de los motores de búsqueda y otros

factores.} [4]
 6. Diseño de web inclusivo

El concepto de diseño inclusivo, aunque parece suficientemente amplio como para

propiciar diversas interpretaciones, de forma general define cualquier marco

metodológico de diseño, normalmente mejorado a partir del DCU o del diseño

participativo, cuyo objetivo es satisfacer las necesidades de acceso y uso de un mayor

rango de usuarios que aquellos representados por el usuario medio, involucrando para

ello a usuarios discapacitados o en contextos de uso desfavorables en el desarrollo. A

diferencia de otros conceptos que representan filosofías de diseño, el diseño inclusivo

no sólo define el objetivo perseguido (accesibilidad universal), sino también la forma de

alcanzar dicho objetivo, la metodología. [5]

En el diseño inclusivo, tenemos en cuenta, aspectos de diseño que puedan ser

universales y adecuados para todos, pero en casos que no se pueda, entonces ofrecer

alternativas de adaptación y configuración, o sea permitir ajustes por parte del usuario o

que la página los realice automáticamente teniendo registro de su perfil. [6]

A continuación, se enumeran los principios que deben ser cumplidos para alcanzar un

diseño de calidad.

• Equivalencia de uso: el diseño debe ayudar a proporcionar el mismo grado o

alcance de uso del contenido, a todos los usuarios, mediante formas o estrategias

únicas cuando sea posible, o equivalentes cuando no. [6]

Ilustración 8. a) Imagen sobre un captcha no accesible b) Su versión accesible. (Imagen extraída de

juntadeandalucia.es)
 • Flexibilidad: El diseño debe poder adecuarse a preferencias y necesidades del

usuario. Control de las animaciones, destellos, opciones de personalización,

inferencia, ayudas, ejemplos, formatos posibles de entrada. En la siguiente

figura, se muestra el sitio de la Universidad de Alicante donde presenta opciones

de personalización y configuración. [6]

Ilustración 9. Imagen de la página de configuración del sitio de la Universidad de Alicante.

En la siguiente figura, se muestra de OER Commons donde presenta una barra de seteos

para optimizar la página de acuerdo a las necesidades del usuario. [6]

Ilustración 10.Imagen sobre panel de configuración.

• Transparencia: El diseño debe reflejar claramente zonas cliqueables de las que

no lo son, zonas activas o deshabilitadas. También dependencias, o estructuras

del diálogo intrínsecas. En el ejemplo siguiente, figura 4.4, se muestra una

página donde aparentemente está todo activado y sin embargo las opciones están

deshabilitadas puesto que requieren registrarse previamente. [6]

Ilustración 11. Falta de transparencia en las opciones.

• Simple e intuitivo: Permitir fácil aprendizaje, rápido acceso y comprensión del

contenido. Diseño simple, directo y coherente. Eliminar la complejidad

innecesaria y priorizar lo importante. Adecuada sectorización y estructuración.

Encabezados, párrafos con sentido, pocas columnas, indicaciones paso a paso,

controles de formulario con labels, enlaces diferenciables y consistentes con el

destino. En la figura 4.5, se muestra ejemplos de incompatibilidad entre el link o

botón y el título de la página destinataria, que se abre al cliquear en ellos. Se

muestra el botón Compartir que al cliquearlo, dirige a un cuadro de diálogo

titulado Compartir con otros. El enlace Avanzada, dirige a una sección titulada

Configuración para compartir. El botón Explorar, te dirige a una ventana titulada

Exploración y por último se observa el enlace Crear anuncio que te dirige a una

página titulada Administración de anuncios. [6]

 Ilustración 12. Incompatibilidad entre el texto del botón o enlace y la página o pantalla destinataria.

• Consistencia: El diseño inclusivo debe ser tener una lógica inherente y ser

coherente y homogéneo en todo el sitio. Uso de templates. [6]

Ilustración 13. Páginas muy distintas que pertenecen al mismo sitio.

 • Percepción del contenido: El usuario debe percibir el contenido

independientemente de sus capacidades sensoriales. La presentación por medios

alternativos, el uso de texto, subtitulados, transcripciones, legibilidad de lo

importante, responsividad, uso apropiado del color, contrastes de 4.5:1 en texto

normal y 3:1 en texto grande, o 7:1 y 4.5:1, tipografía adecuada, neutral, de tipo

Sans Serif, alineación a izquierda. En la figura siguiente, se muestran tipografías

no accesibles como aquellas que son adecuadas. También se muestran problemas

de contraste. [6]

Ilustración 14. Problemas de tipografía y de contrastes.

• Tolerancia a errores: Minimizar las acciones accidentales o fortuitas que

puedan tener consecuencias fatales o no deseadas. Proactividad a la hora de

evitar los posibles errores que el usuario pueda cometer en su interacción con la

Web, procurando minimizarlos en diseño. [6]

7. Evolución de la web

WEB (World Wide Web, o www), es un conjunto de documentos (webs)

interconectados por enlaces de hipertexto, disponibles en Internet que se pueden

comunicar a través de la tecnología digital. Se entiende por “hipertexto” la mezcla de

textos, gráficos y archivos de todo tipo, en un mismo documento. Web no son sinónimo

de Internet; Internet es la red de redes donde reside toda la información, siendo un

entorno de aprendizaje abierto, más allá de las instituciones educativas formales. [7]
La web es un subconjunto de Internet que contiene información a la que se puede

acceder usando un navegador. Tanto el correo electrónico, como facebook, twiter, wikis,

blogs, juegos, etc. son parte de Internet, pero no la web. La web es un “organismo vivo”

y, como tal, evoluciona. Desde su creación el año 1966, con esa primera red Arpanet,

hasta el posterior nacimiento del Internet que conocemos, no ha dejado de cambiar y

perfeccionarse. Hemos pasado de una web 1.0 a la 2.0, 3.0 y ahora llega la web 4.0. [7]

A continuación, relacionamos un cuadro en el que se muestra el uso multidimensional

de la web en cada generación, desde la web 1.0 a la web 4.0 y la percepción de las

personas en cada generación, la evolución de las herramientas y programas en cada

generación.

Tabla 1. Comparativo evolución de la Web. Recuperado de:(Urquizo & Chamba, 2018) shorturl.at/frsN6
 7.1. La Web 1.0 - Web Estática

La Web 1.0 (1990-2000) es la forma más básica que existe, con navegadores de sólo

texto bastante rápidos. Se representaba de forma de sólo lectura, la cual existían pocos

webmaster o productores de páginas web, es decir, una persona que se dedica a

desarrollar una página web y agregar contiendo a la misma. Los usuarios únicamente

podían visualizar datos estáticos y no podían interactuar con la página. [4] La Web 1.0

es de solo lectura, el usuario no puede interactuar con el contenido de la página, es

decir, nada de comentarios, respuestas, citas, etc. Estando totalmente limitados a lo que

el webmaster sube a la página web. [8]

Por lo tanto, Web 1.0 es una frase que se refiere a un estado de la World Wide Web, y

cualquier página web diseñada con un estilo anterior del fenómeno de la Web 2.0. Es en

general un término que ha sido creado para describir la web antes del impacto de la

fiebre punto com en el 2001, que es visto por muchos como el momento en que el

internet dio un giro. [8]

7.1.1. Características

• Los usuarios eran relevantes en tanto eran consumidores.

• Las comunidades se formaban fundamentalmente a partir de la oferta de

servicios. No había espacios para que los miembros publicaran contenidos.

• Es estática, con contenidos sin actualización frecuente y sólo pueden ser

ingresados por el webmaster.

Ilustración 15. Caracteríticas de la Web 1.0

 7.2. La Web 2.0 - Web Social

La Web 2.0 conocida como la Web Interactiva. En esta versión el usuario puede ingresar

datos y recibir información. Por lo tanto, con La Web 2.0 aparecen nuevas tecnologías

en Internet y las maneras de utilizarlas. Sin lugar a dudas la web 2.0 inició con una

nueva era de interactuar en la red. Muchas de actividades cotidianas, se volcaron a

la red, como por ejemplo buscar información, hacer compras, estudiar, hasta concertar

citas pueden realizarse sin problemas, e incluso a menudo, más barata por la Red. [4]

La Web 2.0 es conocida como la Web Social, se caracteriza por la alta interacción con el

usuario y por el aporte del usuario en la alimentación y creación de aplicaciones y/o

sitios web. [4] El término Web 2.0 fue acuñado por Tim O'Reilly en 2005 para referirse

a una segunda generación en la historia del desarrollo de tecnología web basada en

comunidades de usuarios y una gama especial de servicios que fomentan la

colaboración y el intercambio ágil de información entre los usuarios de una comunidad

o red social. [8]

7.2.1. Características

• Aspectos colaborativos y sociales de la red. La importancia de este entorno está

en el usuario.

• Fomenta la participación.

• La información y por ende, el conocimiento no es propiedad de nadie. Es

colectivo.

• El software es un servicio no un producto.

• El sitio no debe actuar como un "jardín cerrado": la información debe poderse

introducir y extraer fácilmente.

 • Los usuarios deberían controlar su propia información.

Ilustración 16. Interacción en la Web 2.0

7.3. La Web 3.0 o ¿la Web Semántica?

El término Web 3.0 es asociado al concepto de web semántica que se está desarrollando

bajo la tutela de Tim Berners-Lee, el mismo que inventó la web a principios de los 90.

La web se escribe con lenguaje natural y hasta el momento no es posible una capacidad

de razonamiento en las máquinas. La idea subyacente es muy antigua (antigua si

hablamos en tiempo de Internet). Los contenidos publicados en páginas web, salvo raras

excepciones, son difícilmente entendibles por los ordenadores y tienen significado

principalmente para las personas. [8]

En resumen, la Web 3.0 marca los principios para crear una base de conocimiento e

información semántica y cualitativa. Se pretenden con ello, almacenar las preferencias

de los usuarios (gustos, costumbres, conectividad, interactividad, usabilidad, etc.) y al

mismo tiempo, combinándolas con los contenidos existentes en redes sociales e internet

móvil, entre otros, poder atender de forma más precisa las demandas de información y

facilitar la accesibilidad a los contenidos digitales, proporcionando con ello, una

herramienta esencial para la aceptación, adopción, flujo y funcionalidad de la publicidad

de la empresa con el objetivo de fidelizar al usuario con las marcas que se presentan en

la red. [9]
 7.3.1. Objetivos

• Establecer un sentido a los contenidos: Facilitar a las máquinas la comprensión

de lo que queremos representar. [9]

• Permitir una conexión entre los recursos de la web: Extender los hiperenlaces a

relaciones semánticas. [9]

• Gestión ―inteligente de los recursos: Búsquedas de información, extracción de

contenidos e interacción de recursos heterogéneos. [9]

• Interoperabilidad Semántica: Tener una web más útil, como por ejemplo el botón

―Voy a tener suerte de Google. [9]

Los elementos clave de la Web 3.0 son: Web Social, La web semántica, Web 3D, la Web

centrada en los medios, la Web omnipresente y ubicua (WOU), Inteligencia Artificial,

entre otros. [4]

Ilustración 17. Elementos de la Web 3.0

7.4. La Web 4.0 o ¿Internet de las cosas?

Web 4.0 es todavía una idea en marcha y no hay una definición exacta de cómo será.

Web 4,0 también se conoce como red simbiótica. El futuro de la web es la interacción

simbiótica entre humanos y máquinas. Con ello, será posible la construcción de

interfaces más potentes, tales como las interfaces controladas con la mente. En

definitiva, la Web 4.0 será una web inteligente, abierta y adaptativa en la lectura de los

contenidos digitales, y podrá reaccionar en la forma de ejecutar y decidir lo que se

ejecute personalizando para cada usuario la información presentada. [10]

IoT o el “Internet de las cosas” es el mundo interconectado, es la posibilidad de que los

objetos físicos estén presentes en el mundo digital, es la oportunidad para mejorar el

estilo de vida (cuidado, trabajo, ocio, estado emocional) de las personas. [4]

El Internet de las Cosas constituye el siguiente paso en la evolución de los objetos

inteligentes: todas las cosas están conectadas a Internet -a través de redes fijas e

inalámbricas -mediante sensores integrados, convirtiéndose así en auténticas fuentes de

datos, disponibles en cualquier momento y lugar. Mediante el Internet de las cosas

podremos tener acceso universal a cualquier objeto cotidiano. Una visión alternativa,

desde el mundo de la Web semántica se centra más bien en hacer todas las cosas que

apunta los denominados protocolos existentes, como URI. [10]

7.4.1. Elementos

• Los motores de búsqueda aún sufrirán cambios para estar acorde a la Web 4.0.

Lo propio de la Web 4.0 serán los asistentes virtuales, a quienes les pides lo que

deseas y ellos te lo sirven. [4]

• Una Red activa al ser capaz de ella misma proponer cosas según la situación, el

contexto, el ambiente en el que el usuario se esté desenvolviendo. [4]

• Big Data entre nosotros. Toda la inteligencia de las aplicaciones es gracias a los

datos que se obtienen del mundo real. [4]

• Aplicaciones web Inteligentes. la Web Inteligente es la próxima generación de la

Web Semántica. [4]

 8. Conclusiones

N nnnnnnnnnnnnn