La experiencia curricular de Tecnologías Web es

de naturaleza teórico–práctico, se orienta a

desarrollar en el estudiante la capacidad de
desarrollar aplicaciones web dinámicas, en el
manejo de Frameworks o marcos de trabajo que
contribuyan a la automatización de procesos y a
la solución de problemas cumpliendo normas
para la mejora continua de la organización.

1
Tecnologías Web

2
 SESIÓN 01: INTRODUCCIÓN A LAS TECNOLOGIAS WEB.
1. Introducción

Se puede definir a las Tecnologías Web como aquel conjunto de conceptos, técnicas y herramientas
que hacen posible el funcionamiento de la web. Desde el concepto de web que se utiliza en el ámbito
tecnológico para nombrar a una red informática que funciona generalmente en Internet. Así como la
técnica de redireccionamiento que consiste en dirigir a los visitantes de determinada página a otra
página web. Y el uso de herramientas como el Scraping que está específicamente desarrollada para
extraer información de sitios web. Así que citarlas a todas sería una ardua labor puesto que en el
tiempo desde que empezó a funciona la web algunas tecnologías han quedado obsoletas y han
aparecido cada vez nuevas tecnologías.
Solo basta recordar la web en sus primeros años cuando a partir de los años 90 la web en su forma
más básica mostraba solo texto a través del navegador. Después surgió HTML que hizo que las
páginas web se muestren más agradables a la vista. Era la Web en su versión 1.0 en donde los
usuarios no podían interactuar con el contenido de la página limitándose a lo que el Webmaster subía
a esta. Ya a partir de la siguiente década la web permitía que los usuarios contribuyan con el contenido
de las páginas web en contraste con las páginas donde los usuarios estaban limitados a ver
pasivamente todo el contenido mostrado en la página. Era la Web en su versión 2.0 en donde resaltan
las redes sociales, wikis y blogs entre otros. Posteriormente la información y participación en la web se
promociona y comparte a través de dispositivos multiplataforma en donde la semántica de la
información y la inteligencia colectiva dan forma a la Web en su versión 3.0.
El estudio de las tecnologías web puede ser abordado de distintas ópticas o clasificaciones. Para
nuestro interés vamos a estudiar las tecnologías web tomando como base la arquitectura sobre la cual
se desarrollan las páginas web; arquitectura que se expone en el siguiente apartado.

2. Evolución de la Web

La Web ha pasado por tres etapas o generaciones muy claras, a saber:

 1ª Generación o Generación de Contenido Estático
 2ª Generación o Generación de Contenido Dinámico o Interactivo
 3ª Generación o Generación de Contenido Colaborativo
No obstante, la evolución continua de la tecnología hace un poco complicado establecer los límites
exactos de fecha en los cuales, podemos decir que la Web es de una generación u otra, ya que en la
realidad lo que vemos es una superposición de cada una de estas generaciones según el sitio web que
examinemos. Sin embargo, trataremos de hacer una aproximación grosera a efectos de clasificación.

Primera Generación o Generación de Contenido Estático

La 1ª Generación de la Web o Generación de Contenido Estático, se corresponde con la Web que va
desde que se crea por Tim Berners-Lee hasta la aparición de la 2ª Generación a mediados de los años
90. Esta generación se caracteriza porque las páginas Web son completamente estáticas, es decir, el
contenido que presentan es el que es y no permiten al usuario realizar ningún tipo de interacción con
las mismas, salvo la manipulación propia del manejo del hipertexto y los hiperenlaces, esto es, saltar
de una página web a otra.

Segunda Generación o Generación de Contenido Dinámico

La 2ª Generación de la Web o Generación de Contenido Dinámico, se corresponde con la Web en la
que aparecen las primeras técnicas para permitir la inclusión de contenido dinámico, se puede decir
que es la Web que hoy por hoy está más extendida y es la que se utiliza más comúnmente.
Esta generación se caracteriza porque las páginas Web son generadas por alguna de las tecnologías
vistas para la generación de contenido dinámico (CGIs, ASP, ASP.NET, JSP o PHP, entre otros),
permiten la interacción con el usuario en un nivel en donde éste, puede hacer preguntas y el sistema
presenta las respuestas en función de los criterios introducidos en formularios. La experiencia del
usuario queda limitada a él y a la aplicación que utiliza.

Tercera Generación o Generación de Contenido Colaborativo

De la 3ª Generación de la Web, podemos decir que es el modelo que se está imponiendo poco a poco,
y que, haciendo uso de las capacidades adquiridas en la generación anterior, permite que la
experiencia del usuario con la Web mejore espectacularmente. En esta generación, las aplicaciones
van más allá de la mera interacción entre aplicación-usuario-aplicación, ahora ellas son el mecanismo

3
 que permiten que se produzca interacción entre usuario-usuario llegando a crearse un entorno de
contenido colaborativo, en donde, el usuario es un participante más en la creación del contenido que
aparece en la web. Ideas como los wikis, los blogs, etc. han cambiado la forma en la que el usuario
interactúa con la web haciendo de esta un lugar mucho más rico e interesante para trabajar.

2.1 La Web 1.0

La Web de finales del siglo pasado se caracterizaba por ser una "Web de las empresas": un conjunto
de contenidos organizados para conseguir que un número lo más alto posible de ojos se congregara a
su alrededor, pudiera ver la publicidad que exhibían y, preferentemente, llegaran a alcanzar su cartera
para sacar su tarjeta de crédito y realizar alguna compra. El objetivo de la Web se centraba en ser
prácticamente una galería comercial con anuncios, escaparates y tiendas, un lugar al que las personas
iban a vender publicidad y a llevar a cabo transacciones comerciales.
En el fondo, las empresas sólo estaban reproduciendo aquello que conocían de otros entornos: la Web
era entendida como otro canal más. Se trataba de páginas completamente unidireccionales, no
concebidas para recibir ningún tipo de retroalimentación por parte de los espectadores más allá del
simple botón para efectuar una transacción.
Básicamente, en la Web 1.0, los usuarios son destinatarios de la tecnología, de los contenidos y de los
negocios, mientras que en la Web 2.0 también participan en el desarrollo de la tecnología (software de
fuente abierta), producen los contenidos (blogosfera) y participan del negocio (Google Adsense).

2.2 La Web 2.0

Hay tres principios que pueden definir la Web 2.0:

 Comunidad: el usuario aporta contenidos, interactúa con otros usuarios, crea redes de
conocimiento, etc.
 Tecnología: un mayor ancho de banda permite transferir información a una velocidad antes
inimaginable. En lugar de paquetes de software, podemos tener servicios web y nuestro terminal
puede ser cliente y servidor al mismo tiempo y en cualquier lugar del mundo.
 Arquitectura modular: favorece la creación de aplicaciones complejas de forma más rápida y a un
menor coste.
Una novedad, y clave del éxito de la filosofía Web 2.0, es que, finalmente, no es el editor del website el
que aporta los contenidos y decide cuáles son interesantes y cuáles no, sino que es la propia
comunidad la que proporciona y promociona determinados contenidos en detrimento de otros.
Es el caso, por ejemplo, de Menéame, empresa española de promoción de noticias, o la televisión
Current TV, de Al Gore, cuyos contenidos están creados únicamente por los usuarios y son éstos
quienes eligen cuáles tienen más interés y deben ser más vistos.
De cualquier forma, colocar un determinado contenido en Internet no garantiza recibir millones de
visitas de forma automática, pero permite que aflore una cantidad enorme de talento. Aún no somos
conscientes del gran potencial creador de Internet, ni lo valoramos.
Para tener éxito en el mundo digital será necesario hacer cosas interesantes, pero los contenidos
brillantes podrán venir de todos los rincones del mundo y conseguir un impacto global. Esto podría
cambiar la forma de hacer las cosas en todos los ámbitos de la sociedad.
Para tener una noción de la participación de los usuarios en la Web 2.0 podemos mencionar la regla
del 1%, que asegura que, de cada 100 personas que usan este tipo de servicios, aproximadamente 90
únicamente consultan, 9 participan y sólo 1 crea contenidos. En el caso de los blogs, la regla es mucho
más desalentadora. Según UseIt, los blogs tienen la peor desigualdad de participación, puesto que es
evidente que la 90-9-1, regla que caracteriza la mayoría de las comunidades on-line, se transforma en
95-4,9-0,1 en los blogs.
Más que una Tecnología es una Actitud, Es Participación y Cooperación, La difusión de ideas debe ser
concisa y clara, no diplomática o coorporativa, se trata de divertirnos… el nombre que se le ponga
(Web 2.0, o como gustes) es lo de menos, pero es un hecho que nos encontramos frente a una nueva
era, donde el usuario es el centro.

2.3 La Web 3.0

Web 1.0 es una red que permite leer. Web 2.0 es una extensión, que permite leer y escribir,
concediendo a los usuarios en un papel activo. Web 3.0 podría extender este papel permitiendo que la
gente además de leer y escribir pueda modificar el sitio web.

4
 Las tecnologías de la Web 3.0, como programas inteligentes, que utilizan datos semánticos; se han
implementado y usado a pequeña escala en compañías para conseguir una manipulación de datos
más eficiente. En los últimos años, sin embargo, ha habido un mayor enfoque dirigido a trasladar estas
tecnologías de inteligencia semántica al público general.

Bases de datos
El primer paso hacia la "Web 3.0" es el nacimiento de la "Data Web", ya que los formatos en que se
publica la información en Internet son dispares, como XML, RDF y microformatos; el reciente
crecimiento de la tecnología SPARQL, permite un lenguaje estandarizado y API para la búsqueda a
través de bases de datos en la red. La "Data Web" permite un nuevo nivel de integración de datos y
aplicación inter-operable, haciendo los datos tan accesibles y enlazables como las páginas web. La
"Data Web" es el primer paso hacia la completa “Web Semántica”. En la fase “Data Web”, el objetivo
es principalmente, hacer que los datos estructurados sean accesibles utilizando RDF. El escenario de
la "Web Semántica" ampliará su alcance en tanto que los datos estructurados e incluso, lo que
tradicionalmente se ha denominado contenido semi-estucutrado (como páginas web, documentos,
etc.), esté disponible en los formatos semánticos de RDF y OWL.

Inteligencia artificial
Web 3.0 también ha sido utilizada para describir el camino evolutivo de la red que conduce a la
inteligencia artificial. Algunos escépticos lo ven como una visión inalcanzable. Sin embargo, compañías
como IBM y Google están implementando nuevas tecnologías que cosechan información
sorprendente, como el hecho de hacer predicciones de canciones que serán un éxito, tomando como
base información de las webs de música de la Universidad. Existe también un debate sobre si la fuerza
conductora tras Web 3.0 serán los sistemas inteligentes, o si la inteligencia vendrá de una forma más
orgánica, es decir, de sistemas de inteligencia humana, a través de servicios colaborativos como
del.icio.us, Flickr y Digg, que extraen el sentido y el orden de la red existente y cómo la gente
interactúa con ella.

Web Semántica y SOA (arquitectura orientada a servicios web)

En relación con la dirección de la inteligencia artificial, la Web 3.0 podría ser la realización y extensión
del concepto de la “Web Semántica”. Las investigaciones académicas están dirigidas a desarrollar
programas que puedan razonar, basados en descripciones lógicas y agentes inteligentes. Dichas
aplicaciones, pueden llevar a cabo razonamientos lógicos utilizando reglas que expresan relaciones
lógicas entre conceptos y datos en la red. Sramana Mitra difiere con la idea de que la "Web Semántica"
podría será la esencia de la nueva generación de Internet y propone una fórmula para encapsular Web
3.

Evolución al 3D
Otro posible camino para la Web 3.0 es la dirección hacia la visión 3D, liderada por el Web 3D
Consortium. Esto implicaría la transformación de la Web en una serie de espacios 3D, llevando más
lejos el concepto propuesto por Second Life. Esto podría abrir nuevas formas de conectar y colaborar,
utilizando espacios tridimensionales.

2.4 La Web Semántica

Aunque no es sencillo calcular el tamaño total de la web, se estima que hay alrededor de unos 4 * 109
documentos disponibles en red, lo que viene a equivaler a unos 28 millones de libros, teniendo en
cuenta que la American Research Libraries, que agrupa un total de 100 bibliotecas de EEUU tiene
unos 3.7 millones de libros y que la biblioteca de Harvard (la mayor de EEUU) tiene catalogados 15
millones de libros, podemos hacernos una idea del tamaño que tiene la Web.

5
Resulta entonces que, en la Web actual, tenemos un sistema que almacena, podríamos decir,
prácticamente toda la información del mundo, y que presenta un acceso casi instantáneo a la misma
desde cualquier lugar del planeta con una conexión a Internet. Por otro lado, la información disponible
no es solamente de manera textual, sino que hay que sumar los documentos formados por imágenes,
videos, presentaciones, etc. Además, cualquier persona puede, al menos en teoría, añadir más
información a la Web (mediante la creación de un nuevo sitio web, por ejemplo). Pues bien, el conjunto
de todas estas características es lo que viene a definir a la Web actual con el nombre de Web
Sintáctica.
En la Web Sintáctica, nos vamos a encontrar con un conjunto de recursos enlazados entre sí. Para
movernos por esta gran cantidad de información, han aparecido numerosos buscadores que enlazan
con ellas (Google, por ejemplo, indexa cerca de 9.000 millones de páginas), sin embargo, a pesar de la
potencia que demuestran, aún quedan lejos de poder proporcionar al usuario las respuestas
adecuadas a las preguntas que realizan, fundamentalmente por tres motivos:

 no enlazan con la totalidad de páginas existentes, se hace necesaria la actualización constante de

los índices mediante robots de búsqueda automáticos.
 la escasa precisión de los resultados, algunas consultas devuelven varios millones de resultados
distintos.
 y la alta sensibilidad al vocabulario empleado en la búsqueda, es decir, un documento que
busquemos debe estar descrito con las mismas palabras que nosotros introduzcamos al buscar.

Por otro lado, tenemos también los problemas de interoperabilidad de aplicaciones, que se deben por
falta de entendimiento técnico, sintáctico y semántico.
Estos problemas, conllevan que las aplicaciones no puedan hablar entre ellas, lo que repercute en el
coste de los servicios que las empresas proporcionan y relentiza la implantación de nuevos servicios
útiles para el usuario.

Supongamos que la Web tiene la capacidad de construir una base de conocimiento sobre las
preferencias de los usuarios y que, a través de una combinación entre su capacidad de conocimiento y
la información disponible en Internet, sea capaz de atender de forma exacta las demandas de
información por parte de los usuarios en relación, por ejemplo, a reserva de hoteles, vuelos, médicos,
libros, etc. Si esto ocurriese así en la vida real, el usuario, en su intento, por ejemplo, por encontrar
todos los vuelos a Praga para mañana por la mañana, obtendría unos resultados exactos sobre su
búsqueda. Sin embargo, la realidad es otra. La figura siguiente muestra los resultados inexactos que
se obtendrían con el uso de cualquier buscador actual, el cual ofrecería información variada sobre
Praga pero que no tiene nada que ver con lo que realmente el usuario buscaba. El paso siguiente por
parte del usuario es realizar una búsqueda manual entre esas opciones que aparecen, con la

6
 consiguiente dificultad y pérdida de tiempo. Con la incorporación de semántica a la Web los resultados
de la búsqueda serían exactos.

Buscador Actual
Resultados de la búsqueda:

La siguiente figura muestra los resultados obtenidos a través de un buscador semántico. Estos resultados
ofrecen al usuario la información exacta que estaba buscando. La ubicación geográfica desde la que el
usuario envía su pregunta es detectada de forma automática sin necesidad de especificar el punto de
partida, elementos de la oración como "mañana" adquirirían significado, convirtiéndose en un día concreto
calculado en función de un "hoy". Algo semejante ocurriría con el segundo "mañana", que sería
interpretado como un momento determinado del día. Todo ello a través de una Web en la que los datos
pasan a ser información llena de significado. El resultado final sería la obtención de forma rápida y sencilla
de todos los vuelos a Praga para mañana por la mañana.
Buscador Semántico
Resultados de la búsqueda:

La Web Semántica trata sobre dos cosas. Sobre formatos comunes para el intercambio de datos, donde la
Web original solamente se intercambian documentos. Y trata sobre los lenguajes que representan los
datos como objetos del mundo real. La Web Semántica trata de resolver todos estos problemas,
añadiendo a la Web Sintáctica la semántica que le falta para crear un entorno en donde podamos acceder
a la información que necesitamos de un modo exacto y completo a la vez que se facilita el procesado de
la misma y se resuelven los problemas de interoperabilidad entre aplicaciones que hemos resumido
anteriormente.
Dicho de otro modo, la Web Semántica se fundamenta en el hecho de que las máquinas comprendan el
significado de la información disponible, pero desde un punto de vista diferente al humano. Estamos
diciendo entonces que la Web Semántica es pura Inteligencia Artificial, aunque a las máquinas aún les
queda un largo camino por recorrer para poder llegar a comprender siguiendo un esquema de

7
razonamiento como el que hacemos los humanos, sí que son capaces de llegar a conclusiones
(deducciones o inferencia) mediante procesos de lógica-matemática.

8
3. Arquitectura de la Web

Una aplicación web es proporcionada por un servidor web y utilizada por usuarios que se conectan
desde cualquier punto vía clientes web (browsers o navegadores). La figura 1 muestra la arquitectura
de un sitio web y sus componentes principales: Un servidor web, Una conexión de red y Uno o más
clientes.

La Web funciona siguiendo el denominado modelo cliente-servidor, habitual en las aplicaciones que
funcionan en una red. Existe un servidor, que es quien presta el servicio, y un cliente, que es quien lo
recibe. El servidor web distribuye páginas de información formateada a los clientes que las solicitan.
Los requerimientos son hechos a través de una conexión de red, y para ello se usa el protocolo HTTP
o Hypertext Transfer Protocol que se traduce al español como el “protocolo de transferencia de
hipertextos”. Una vez que se solicita esta petición mediante el protocolo HTTP y la recibe el servidor
web, éste localiza la página web en su sistema de archivos y la envía de vuelta al navegador que la
solicitó. Las aplicaciones web están basadas en el modelo Cliente/Servidor que gestionan servidores
web, y que utilizan como interfaz páginas web. Así mismo, como se pudo apreciar existen dos grandes
categorías que agrupan a diversas tecnologías web como las tecnologías del Front End y las
tecnologías del Back End. Frontend es la parte que interactúa con los usuarios. Backend es la parte
que se conecta con la base de datos y el servidor que utiliza dicho sitio web.
El proceso completo, desde que el usuario solicita una página hasta que el cliente web se la muestra
con el formato adecuado, es el siguiente:

a. El usuario especifica en el cliente web la dirección (URL) de la página q desea consultar.

b. El cliente establece la conexión con el servidor web.
c. El cliente solicita la página deseada.
d. El servidor busca la página que ha sido solicitada en su sistema de ficheros, Si la encuentra, la
envía al cliente; en caso contrario, devuelve un código] de error.
e. El cliente interpreta los códigos HTML y muestra la página al usuario.
f. Se cierra la conexión.

La conexión siempre se libera al terminar la transmisión de la página. Volviendo sobre el modelo de las
aplicaciones cliente-servidor, se puede decir que se sigue el denominado modelo de transacciones: el
cliente realiza una petición, el servidor la atiende e inmediatamente se cierra la comunicación. Las
transacciones son, pues, independientes, y no se mantiene una memoria entre las sucesivas
peticiones. Esto es un grave inconveniente para muchas aplicaciones en las cuales esta memoria es
fundamental, como por ejemplo las operaciones de compra a través de la Web. No obstante, existen
mecanismos para resolver el problema, como el uso de cookies o de bases de datos, y que se
comentarán más adelante.
Otro aspecto importante es el hecho de que se establece una conexión impediente para cada
documento u objeto que se transmite. Es decir, si una página contiene, por ejemplo, cuatro imágenes,
entonces se establecen cinco conexiones independientes: una para la página propiamente dicha y
otras cuatro para las imágenes. Todo lo visto hasta ahora se refiere al envío de información desde el

9
 servidor hasta el cliente, que es el modo de trabajo más habitual. En cuanto a ¡a transferencia en
sentido contrario, es decir, del cliente al servidor, ésta es menos frecuente, pero también es posible. En
resumen:

Clientes Web:
 Utilizan el protocolo HTTP para conectar con los servidores.
 Solicitan y muestran las páginas web almacenadas en los servidores.
 Clientes típicos: navegadores web (Chrome, Firefox).

Servidores Web:
 "Escuchan" conexiones entrantes desde clientes.
 Utilizan el protocolo HTTP para conversar con los clientes.
 Almacenan y transmiten páginas web a los clientes.
 Actualmente interactúan con el usuario y generan dinámicamente páginas web

4. Tecnologías Web Frontend

Frontend es la parte de un programa o dispositivo a la que un usuario puede acceder directamente.

Son todas las tecnologías de diseño y desarrollo web que corren en el navegador y que se encargan
de la interactividad con los usuarios. HTML, CSS y JavaScript son los lenguajes principales del
Frontend, de los que se desprenden una cantidad de frameworks y librerías que expanden sus
capacidades para crear cualquier tipo de interfaces de usuarios. React, Redux, Angular, Bootstrap,
Foundation, LESS, Sass, Stylus y PostCSS son algunos de ellos.
El Frontend se enfoca en el usuario, en todo con lo que podemos interactuar y lo que vemos mientras
navegamos. Buena experiencia de usuario, inmersión y usabilidad, son algunos de los objetivos que
busca un buen frontend y hoy en día existen una gran variedad de frameworks, preprocesadores y
librerías que nos ayudarán en esta tarea.

5. Tecnologías Web Backend

Por otro lado, tenemos el backend enfocado en hacer que todo lo que está detrás de un sitio web
funcione correctamente. Toma los datos, los procesa y los envía al usuario, además de encargarse de
las consultas o peticiones a la Base de Datos, la conexión con el servidor, entre otras tareas que debe
realizar en su día a día. Cuenta con una serie de lenguajes y herramientas que le ayudan a cumplir con
su trabajo como PHP, Ruby, Perl, Python, JavaScript, SQL, MongoDb, MySQL, etc. estos son usados
para crear sitios dinámicos. Como en muchos sitios la información se encuentra en constante cambio o
actualización, una buena capacidad de respuesta y una velocidad óptima del sitio son
responsabilidades que un backend debe de afrontar.

10
6. Pilas Tecnológicas

Para desarrollar una página web se pueden utilizar toda una combinación de tecnologías que
involucran al Frontend como el Backend tal es así que vamos a encontrarnos con diversas
combinaciones o pilas tecnológicas como LAMP, MEAN entre otras.
La pila LAMP responde a Linux, Apache, MySQL y PHP/Python/Perl, pero también puede incluir otras
tecnologías. La idea importante de LAMP es que funciona sobre sistemas operativos Linux y te permite
construir apps web que son gestionadas por un servidor web (Apache, Nginx u otros) vía HTTP o
HTTPS, en el puerto 80 o 443. Este es el paradigma que determina la arquitectura de la aplicación.
La pila MEAN responde a MongoDB, Express, AngularJS y Node.js. En MEAN todo es JavaScript, este
es el lenguaje de programación que se utiliza tanto en la parte Frontend como en la parte Backend.
MongoDB es una base de datos NoSQL orientada a documentos. Express es el framework web más
utilizado en Node.js. AngularJS es el framework que utilizan los frontenders para construir apps SPA
(single-page application) robustas y mantenibles. Finalmente, Node.js es la tecnología de servidor
orientada a eventos, no bloqueante, que viene a sustituir al tradicional servidor web de la pila LAMP.

7. Wappalyzer

Wappalyzer es una extensión para Chrome y Firefox que detecta más de 1000 tecnologías web
diferentes, como el sistema de gestión de contenidos, las herramientas de analítica, los servidores
web, el sistema de comercio electrónico, etc. Wappalyzer es una plataforma independiente y open
source. Es capaz de identificar el software usado al analizar los patrones únicos del código fuente de
un sitio web, las variables de sus scripts, y varias cosas más. La herramienta está escrita en
JavaScript, así que puede ser usada en cualquier sistema operativo de forma nativa a través de
Docker o de Node.js.
Una vez que instales la extensión el icono de Wappalyzer aparecerá en tu barra de herramientas.
Tomará unos segundos en analizar la web que visitas, y cuando cambie de forma indicará la
tecnología principal usada por esa página. Si haces clic en el puedes ver la lista completa. Si pinchas
en cualquiera de las tecnologías usadas podrás ver los datos de Wappalyzer sobre la cantidad de
sitios web que las utilizan.

11