Programación Web Full
Stack (Nivel 1)
PROGRAMACIÓN WEB FULL STACK (NIVEL 1)
UNIDAD 1
La Web por dentro
Curso: Programación Web Full Stack (Nivel 1)
UNIDAD 1 2
PROGRAMACIÓN WEB FULL STACK (NIVEL 1)
Unidad 1: La Web por dentro
• Introducción
• La World Wide Web: su historia
• Los protocolos de comunicación
• Los sistemas Web de información
• Lenguaje de marcas, hojas de estilo y programación
• Conclusión
Resumen ejecutivo
En esta unidad comenzaremos un recorrido por la World Wide Web (la Web), desde sus inicios hasta nuestros
días. Veremos las bases tecnológicas y abordaremos los elementos fundamentales necesarios para la
construcción de un sistema web.
Introducción
Pocas veces en la historia del desarrollo humano se vió evolucionar con tanta rapidez una tecnología, como
es el caso de Internet y su aplicación más importante: La World Wide Web. La industria automotriz tardó más
de un siglo en establecerse y llegar a las y los consumidores de forma masiva. No menos de 50 años tardó el
teléfono en popularizarse, desde el momento de su invención, a pesar de ser uno de los inventos más
importantes en la historia de la tecnología. Desde su invención, la web tardó menos de una década en
convertirse en el medio de comunicación e intercambio comercial más utilizado por las personas, alrededor
del mundo.
¿Qué es la web?
La Word Wide Web (red mundial), también conocida como WWW o simplemente “la web”, es un conjunto de
herramientas tecnológicas que permiten la comunicación e intercambio de información entre personas,
organizaciones y empresas, de forma cuasi instantánea, sin límites geográficos.
Está basada principalmente en el intercambio de mensajes, documentos y datos hypermedia (datos en
distintos formatos), tales como páginas html, imágenes, archivos de audio y video, streaming de canciones y
películas, etc.
No debemos confundir a la web con Internet. Internet es la red de servidores, computadoras personales,
dispositivos móviles y demás artefactos de red, interconectados entre sí a lo largo y ancho del planeta. La
UNIDAD 1 3
PROGRAMACIÓN WEB FULL STACK (NIVEL 1)
web es la aplicación más importante de internet. Otras aplicaciones son el sistema de correo electrónico, las
redes P2P como BitTorrent o las redes de criptomonedas como Bitcoin y más.
La World Wide Web: su historia
La World Wide Web fue creada en 1990 por Tim Berners-Lee, un investigador del CERN (Organización
Europea para la Investigación Nuclear). Primeramente la propuso como una arquitectura sobre Internet y
luego de un tiempo de trabajo y programación, logró poner en funcionamiento sus cuatro componentes
fundamentales:
• El protocolo de aplicación, HTTP.
• El lenguaje de marcado para la representación de documentos, HTML.
• Un servidor web llamado HTTP daemon.
• Un cliente web o navegador.
Mediante el uso combinado de estos cuatro elementos, más la definición del URL (Localizador único de
recursos), comúnmente llamada “dirección web”, Tim Berners-Lee logró poner en funcionamiento la primera
versión de la WWW sobre la red Internet.
Los protocolos de comunicación
En líneas generales, un protocolo es un conjunto de reglas y comportamientos a llevar a cabo frente a cierto
evento o situación. Existen protocolos en el ámbito político y diplomático, en el ámbito médico, institucional y
en la mayoría de las actividades humanas organizadas.
Los protocolos de comunicación, y en particular los protocolos de red, son definiciones de procedimientos y
formatos para el intercambio de mensajes entre dispositivos electrónicos.
Las redes de computadoras cuentan con centenares de protocolos distintos para realizar las múltiples formas
de comunicación que existen hoy en día. Muchos de estos protocolos trabajan en conjunto de forma
coordinada para establecer las comunicaciones.
Cuando navegamos por la web, nuestra computadora interactúa con diferentes servidores web mediante el
uso de una pila de protocolos de red.
Los protocolos son necesarios para lograr que sistemas distintos, de diferentes fabricantes y basados en
diversas tecnologías, logren entenderse. Los protocolos de comunicación, entonces, son estándares definidos
UNIDAD 1 4
PROGRAMACIÓN WEB FULL STACK (NIVEL 1)
por la industria a los cuales los fabricantes de hardware y software deben adherir para no quedarse afuera
del ecosistema de Internet.
En Internet, la familia de protocolos más importante es TCP/IP. Esta combinación de protocolos de red y
transporte cubre la mayor parte de las comunicaciones.
El protocolo HTTP
Como futuras y futuros desarrolladores web nos interesa la capa superior de esta pila de protocolos, la capa
de aplicación. El protocolo inventado por Tim Berners-Lee para la web, un protocolo de aplicación, es el
famoso HTTP.
HTTP define una serie de acciones (verbos) a ejecutar contra ciertos recursos en la red (páginas web,
servicios web, imágenes, documentos, etc.). Estas acciones o verbos definidos en HTTP son operaciones
claras y sencillas como GET (leer), PUT (guardar), POST (agregar), DELETE (borrar) y otras tantas.
Estas acciones son definidas en archivos de texto plano llamados mensajes HTTP, compuestos por el nombre
del método, la dirección del recurso, una cabecera y un cuerpo de mensaje.
Solicitudes y respuestas
HTTP es un protocolo basado en la arquitectura Cliente/Servidor donde el cliente envía un mensaje realizando
una solicitud al servidor y éste devuelve un mensaje de respuesta.
Habitualmente a cada mensaje de solicitud se denomina Request y el mensaje de respuesta se denomina
Response.
Para una o un programador web es muy importante conocer la estructura básica de los mensajes HTTP, esto
ayuda a comprender el mecanismo de comunicación entre el cliente y el servidor. Por eso vamos a prestarle
un poco de nuestra atención a los elementos fundamentales de un mensaje HTTP.
Estructura de un mensaje de solicitud (Request)
Como ya se mencionó, un mensaje de solicitud o request está conformado por un texto plano dividido en tres
partes fundamentales: la primera línea, las cabeceras y el cuerpo del mensaje.
La primera línea
La primera línea de un mensaje de solicitud está compuesta por el verbo o acción, la ubicación del recurso
dentro del servidor y la versión del protocolo.
GET /index.html HTTP/1.1
UNIDAD 1 5
PROGRAMACIÓN WEB FULL STACK (NIVEL 1)
Además de GET se pueden especificar distintos tipos de verbos: POST, PATCH, DELETE, PUT, OPTIONS,
HEADERS, etc.
Las cabeceras
En esta sección del mensaje request se listan las llamadas cabeceras o headers http. Las cabeceras son
variables que el cliente le envía al servidor para especificar detalles de la solicitud, como por ejemplo: el
nombre o la dirección IP del servidor (host), el tipo y codificación que se requiere para el recurso en cuestión
(xml, pdf, html, gif, etc.), información sobre la conexión y una infinidad de opciones más.
La estructura de una cabecera está compuesta por una etiqueta, dos puntos y el valor de la cabecera
expresado en texto. Ejemplo:
Host: inap.org.ar
Accept: text/html
El cuerpo del mensaje
El cuerpo o body del mensaje de solicitud es el tercer componente.
No todos los mensajes de solicitud tienen un cuerpo. Este está presente en los mensajes PUT, POST y
PATCH. Este tipo de mensaje se encarga de enviar datos al servidor, tales como formularios cargados por el
usuario, archivos de cualquier tipo o información estructurada en formatos como JSON o XML.
En el body, los datos se expresan en texto plano. Pueden estar estructurados o no. Si los datos son binarios,
por ejemplo, una imagen o un archivo ejecutable, se codifican en Base64: un método de traducción de los
datos para expresarlos sólo con letras del alfabeto inglés y números.
Estructura de un mensaje de respuesta (Response)
Tal como sucede con los mensajes de solicitud, los mensajes de respuesta tienen prácticamente la misma
estructura compuesta de tres partes: la primera línea, las cabeceras y el cuerpo del mensaje.
La primera línea
La primera línea de cada mensaje de respuesta está compuesta por la versión del protocolo, el código de
estado y la descripción de la respuesta.
HTTP/1.1 404 Not found
Dependiendo del éxito de la solicitud, o bien si hubo un problema para responder a esta, el servidor devolverá
un mensaje de respuesta con distintos códigos. Existe una lista extensa de códigos de respuesta, pero se los
puede agrupar en cinco clases:
UNIDAD 1 6
PROGRAMACIÓN WEB FULL STACK (NIVEL 1)
• 100 a 199: Respuestas informativas.
◦ Cuando el cliente solicita información técnica, no necesariamente la representación de un recurso o la
ejecución de una acción (verbo), el servidor puede responder con mensajes informativos.
• 200 a 299: Respuestas satisfactorias.
◦ Cuando la acción que solicitamos se ejecutó con éxito en el servidor, este devuelve un mensaje con un
código de estado comprendido en este rango. Por ejemplo, 200 OK es la respuesta clásica a un mensaje
GET.
• 300 a 399: Redirecciones.
◦ Muchas veces los recursos que un cliente solicita no se encuentran en la dirección solicitada, sino que
fueron movidos a otra dirección conocida por el servidor. En estos casos el servidor devuelve un estado de
redirección para que el cliente se dirija a la nueva dirección y así obtener el recurso solicitado.
• 400 a 499: Errores de los clientes.
◦ En ciertas ocasiones el usuario indica una dirección errónea o un nombre de recurso incorrecto. En
estos casos el servidor no puede resolver la petición y devuelve un código de error. Este grupo de códigos de
estado indican un error deslindando la responsabilidad al cliente. Por ejemplo: 404 Not found o 403 Forbidden.
• 500 a 599: Errores de los servidores.
◦ También puede que una solicitud no haya podido ejecutarse por problemas del lado del servidor. Puede
ser por un error interno en el sistema web, en la base de datos, etc. En estos casos se devuelve un código de
estado comprendido dentro este rango de números.
Las cabeceras
Las cabeceras en los mensajes de respuesta siguen las mismas reglas que las cabeceras de los mensajes
de solicitud. Indican información de distinta índole, como, por ejemplo: información acerca del servidor,
información de la conexión, la codificación de datos utilizada, etc.
El cuerpo del mensaje
En esta sección se guardará el contenido de la respuesta. Por ejemplo, si se solicitó una imagen JPEG, los
datos que conforman la imagen vendrán debidamente codificados en el cuerpo del mensaje de respuesta.
HTTP Seguro: HTTPS
Como mencionamos anteriormente, HTTP fue concebido como un protocolo simple, de fácil interpretación,
incluso para un ser humano. La razón fue garantizar la transparencia en la forma de intercambiar mensajes y
facilitar la implementación del protocolo en distintas plataformas.
UNIDAD 1 7
PROGRAMACIÓN WEB FULL STACK (NIVEL 1)
La gran desventaja es que los mensajes en texto plano de HTTP los puede leer cualquier persona que esté
observando el tráfico de la red en el momento de su transmisión. Esta característica lo convierte en un
protocolo inseguro para transmitir información sensible como datos personales, información bancaria y
transacciones comerciales.
Cuando la web se volvió popular, se comenzaron a construir sistemas de comercio electrónico y todo tipo de
transacciones electrónicas a través de internet. Para ello se definió una subcapa de protocolo llamada SSL
(Secure Server Layer) que posteriormente pasó a llamarse TLS (Transport Layer Security).
Esta subcapa de transporte se encuentra entre la capa de transporte TCP y el protocolo HTTP. Su función es
cifrar todos los mensajes HTTP que intercambien el cliente y el servidor. El cifrado es un proceso de
codificación mediante el uso de un certificado digital expedido por una autoridad o entidad de confianza.
El resultado de todo esto es que el cliente ahora puede enviar y recibir mensajes HTTP, de la misma forma
que lo hacía anteriormente, pero ahora estos mensajes viajan cifrados por la red, de manera segura, tanto
que ninguna ni ningún usuario malintencionado puede descifrar la información dichos mensajes.
Comunicación en tiempo real: Websockets
Dentro del modelo Cliente/Servidor, en el cual está basado HTTP, al cliente se lo considera activo porque es
quién realiza las solicitudes y al servidor se lo denomina pasivo porque sólo responde las solicitudes de los
clientes.
Los sistemas de información muchas veces necesitan más dinamismo, conocer información en tiempo real.
Por ejemplo, un sistema que recopila información de cotizaciones en bolsa necesita mostrar en la pantalla de
la o el usuario toda la información actualizada al instante, porque es crucial para esa actividad. También
podemos tomar el ejemplo de un sistema de seguimiento GPS para observar en tiempo real el movimiento de
unidades de transporte en el mapa.
HTTP no permite que el servidor envíe información al cliente a partir de un evento. Solo puede esperar que
el cliente le pregunte para poder responder. Este modelo es muy obsoleto para obtener información
actualizada a cada segundo, pues el cliente debería estar preguntando por actualizaciones a cada segundo.
Para cubrir esta necesidad surgió el protocolo WebSockets. Este es un protocolo del nivel de aplicación,
reemplaza a HTTP y va por internet. El modelo es sencillo: el cliente se registra para escuchar ciertos eventos
que el servidor va a emitir cuando sucedan. Entonces, cada vez que ocurre un evento el servidor envía la
información actualizada al cliente.
La mayoría de las plataformas de desarrollo web incorporan soporte para este protocolo. Por ejemplo, en .Net
Core existe la librería SignalR que consta de objetos en el servidor y una librería escrita en Javascript para el
cliente.
UNIDAD 1 8
PROGRAMACIÓN WEB FULL STACK (NIVEL 1)
Una de las implementaciones más importantes del protocolo WebSockets es SocketIO para node.js y
Javascript.
Los sistemas web de información
Los sistemas de información son procedimientos para generar, almacenar y organizar la información de una
entidad dada. Hoy en día, casi en su totalidad, los sistemas de información son implementados como sistemas
informáticos donde la principal herramienta es el software de computadora. Pero no siempre los sistemas de
información fueron sistemas computacionales.
Antes de la invención de la web ya existían sistemas informáticos basados generalmente en arquitecturas del
tipo Cliente/Servidor. Desde hace muchas décadas que este tipo de sistemas alcanzó niveles de complejidad
notable.
En los primeros años de vida de la web, esta se utilizaba principalmente para la compartición de documentos,
principalmente páginas HTML e imágenes.
Junto con la amplia adopción de la web, se fueron desarrollando sistemas más complejos que pudieran
realizar tareas complejas, al igual que los sistemas cliente/servidor anteriores, pero ahora sobre una nueva
plataforma: Internet.
Sistemas cliente/servidor
Como se anticipó, los sistemas cliente/servidor existían antes de la adopción de Internet y la web como medio
principal de comunicación.
Este tipo de sistemas funcionaban en grandes compañías, hubo muchas arquitecturas, pero principalmente
se basaron en un servidor de archivos y aplicaciones, un servidor de base de datos y estaciones de trabajo
llamadas clientes. Estos clientes solían brindar velocidad de operación a la o el usuario, tanto en sus primeras
versiones de interfaces de usuario en modo texto como en las interfaces de usuario ricas, basadas en
ventanas estilo Windows.
Una de las principales diferencias entre estos sistemas y los sistemas web, es que los primeros funcionaban
en redes privadas, redes de alcance local, dentro de un mismo edificio o campus. Estas redes son costosas
de construir y mantener, pero tienen la ventaja de proporcionar el control total de ellas a la organización o
empresa propietaria.
Aplicaciones web
Las aplicaciones web, o sistemas de información basados en la web, son sistemas distribuídos construídos
sobre tecnologías y protocolos de comunicación propios de internet. Es un tipo de software que está alojado
UNIDAD 1 9
PROGRAMACIÓN WEB FULL STACK (NIVEL 1)
en un servidor web y es accedido a través de un navegador web. El tiempo de ejecución de este tipo de
software se divide en dos momentos iterativos: el procesamiento en el servidor y el procesamiento en el
cliente.
Generalmente, al software que se ejecuta en el servidor web se lo denomina Backend y al ejecutado en el
navegador se lo llama Frontend.
En la actualidad existen diversas plataformas de desarrollo de software web para crear aplicaciones
distribuídas, complejas, interoperables y con interfaces de usuario enriquecidas. A lo largo de este curso
iremos viendo las distintas alternativas de arquitecturas y lenguajes para la construcción de aplicaciones web.
Lenguaje de marcas, hojas de estilo y programación
De a poco vamos adentrándonos en los detalles de la construcción de software para la web. Para el desarrollo
de un sistema web se requieren varios tipos de elementos:
• Uno o varios lenguajes de programación para crear procesos a ser ejecutados tanto en el servidor como
en el cliente (navegador). Ejemplo: Javascript, C#, Java, PHP, Python, etc.
• Lenguajes de marcado (etiquetas) para representar la estructura de la interfaz de usuario (las pantallas).
Ejemplo: HTML5, XHTML, etc.
• Lenguajes para la estructuración y representación de los datos. Ejemplo: JSON, XML, etc.
• Lenguajes de representación de estilos. Estos lenguajes tienen la finalidad de dar un estilo estético y de
comportamiento a los datos presentados en pantalla. Son muy utilizados en la actualidad, por ejemplo, para
crear pantallas adaptables a distintos tamaños de pantalla (diseño responsivo). Ejemplo: CSS, XSLT, SASS,
etc.
Conclusión
En esta primera unidad hemos abordado los temas fundamentales de la web, sus orígenes, arquitectura,
protocolos y elementos necesarios para la creación de sistemas web. Esta información nos resultará de
mucha utilidad para seguir avanzando en el curso y finalmente poder alcanzar una comprensión más completa
del mundo del desarrollo de aplicaciones web.
Lo invitamos a resolver la actividad de autoevaluación correspondiente al módulo en el entorno virtual. Luego,
continuamos con el segundo módulo del curso.
UNIDAD 1 10
