Primeros pasos en Desarrollo Web

Módulo 1
Presentación Nº 2
2019 - Segundo Cuatrimestre
Licenciatura en Sistemas
Facultad de Ciencias de la Administración
Universidad Nacional de Entre Ríos

1
Objetivos de la clase
● Conocer que es el Modelo Cliente/Servidor.
● Entender como se aplica a la Web.
● Exponer los fundamentos del protocolo HTTP.
● Explicar qué son servidores Web y los navegadores Web. Ejemplos.
● Explorar herramientas de desarrollo.

2019 – Segundo Cuatrimestre 2

Modelo Cliente - Servidor
● El escenario de trabajo durante todo el curso será el modelo cliente-servidor.
● El modelo cliente-servidor describe la relación entre:
– Un cliente: proceso corriendo en un sistema que requiere un servicio y
– Un servidor: proceso corriendo en un sistema, que provee un servicio.
● La interacción (comunicación) ocurre usualmente por medio de una red.
– Sin embargo, puede encontrarse esta relación en un escenario más acotado.
● En este curso nos centraremos principalmente en el escenario Web, por lo
que la comunicación será sobre Internet (TCP/IP).

Las computadoras son ilustrativas.

Un sistema puede alojar más de un servidor o cliente.
2019 – Segundo Cuatrimestre 3
Modelo Cliente – Servidor: Servidores y Clientes
● El servidor normalmente está activo las 24 horas del día, todos los días.
● Espera pasivamente por los pedidos de los clientes. Al recibir un pedido,
realiza las computaciones necesarias y retorna el resultado.
● En muchas aplicaciones el servidor puede atender a varios clientes
simultáneamente. Tal es el caso de los servidores Web.
● El cliente envía un pedido y recibe respuestas del servidor en forma de
códigos, texto, imagen y otros formatos. Para que esto suceda debe conocer
al servidor, comprender su servicio y forma de comunicación (protocolo).
● La comunicación entre el cliente y el servidor puede presentarse de varias
formas:
– Una aplicación interactúa con un sólo servidor.
– Una aplicación es cliente de un servicio y luego se vuelve cliente de otro servicio.
– Un servidor que provee un servicio puede volverse cliente de otro.

2019 – Segundo Cuatrimestre 4

Modelo Cliente – Servidor: Servidores y Clientes (2)
● En la Web, el cliente debe conocer dónde está alojado el programa servidor
¿cómo identifica al servidor entre todas las computadoras de Internet?
– Con la dirección IP o el nombre de dominio equivalente.
● Siendo que una computadora tiene usualmente un solo canal de
comunicación con la red, y que puede ofrecer más de un servicio... ¿cómo se
identifica cada servicio?
– Con el número de puerto.
● Por ejemplo:
– fcad.uner.edu.ar:80 servidor Web de la facultad
– fcad.uner.edu.ar:3306 servidor de Base de Datos de la facultad.

2019 – Segundo Cuatrimestre 5

Modelo Cliente – Servidor: Servidores
● ¿Es suficiente con conocer la ubicación del servidor (por ejemplo IP + port)?
– Es necesario saber la forma de comunicación que debe seguirse: las
reglas del diálogo, la estructura de los mensajes, etc.
Esto requiere una combinación de protocolos de bajo y alto nivel.
● En general ¿un cliente es más complicado que un servidor?
– Algunos aspectos relacionados con el rol del servidor:
● Autenticación.
● Autorización.
● Seguridad de los datos.
● Privacidad.
● Concurrencia.
● Eficiencia.

2019 – Segundo Cuatrimestre 6

El protocolo HTTP (1)
● HTTP (Hypertext Transfer Protocol) es el protocolo de red para la Web.
● Establece como se realiza la entrega de archivos de diverso tipo (texto,
imágenes, etc.), usualmente denominados recursos que son ubicables por
medio del URL.
● Se basa en el modelo cliente-servidor. Un navegador o browser es un cliente
HTTP pues envía peticiones al servidor HTTP o servidor Web. El puerto
estándar para este servicio es el 80.
● Como protocolo de comunicación, define el tipo y estructura de los mensajes
que se envían y las reglas del diálogo entre los dos participantes.

● HTTP es un protocolo sin estado es decir que no mantiene información sobre

la conexión entre transacciones.

2019 – Segundo Cuatrimestre 7

El protocolo HTTP (2)
● HTTP fue desarrollado por el World Wide Web Consortium (W3C) y la
Internet Engineering Task Force (IETF).
● Esta colaboración culminó en 1999 con la publicación de una serie de RFC,
el más importante de ellos es el RFC 2616 que especifica la versión 1.1 de
HTTP
● Los mensajes HTTP intercambiados entre clientes y servidores son en
formato de texto plano. Es por esto que HTTP es un protocolo inseguro y
está sujeto a ataques del tipo man-in-the-middle y eavesdropping.
● Estos ataques pueden permitir a quienes lo perpetran obtener acceso a
cuentas de un sitio Web e información confidencial.
● HTTPS (Hypertext Transfer Protocol Secure) está diseñado para resistir esos
ataques y ser más seguro.
● HTTPS es un protocolo de aplicación basado HTTP, destinado a la
transferencia segura de datos de hipertexto, es decir, es la versión segura de
HTTP.
● Es utilizado principalmente por entidades bancarias, comercios en línea, y
cualquier tipo de servicio que requiera el envío de datos personales y/o
contraseñas.

2019 – Segundo Cuatrimestre 8

HTTP – Request y parsing del navegador

2019 – Segundo Cuatrimestre 9

El protocolo HTTP
● La estructura de los mensajes es la misma para request y response.

Request line Status line

HTTP Request header HTTP Response header

empty line empty line

Message body Message body

HTTP Request message HTTP Response message

Dos ejemplos de mensajes HTTP. Los saltos de línea son importantes por lo que se
muestran en rojo.

GET /cursos/web/cest.html HTTP/1.1 HTTP/1.1 200 OK

Host : www.ejemplo.com Server : Apache/2.2.9 (Debian)

User-Agent : Chrome/13 (Linux) Content-Type : text/html; charset=utf-8

<html><head>
<title>Carta al estudiante</title></head>
<body>...</body></html>
HTTP Request message HTTP Response message

2019 – Segundo Cuatrimestre 10

El protocolo HTTP - Requerimientos y respuestas
● Una línea inicial de request (solicitud) tiene tres partes:
– El nombre del método, en mayúsculas.
– El path local del recurso solicitado.
– La versión de HTTP utilizada.
– GET path/to/file/index.html HTTP/1.0
● Una línea inicial de response (respuesta) tiene tres partes:
– La versión HTTP.
– El código de status de la respuesta.
– Descripción del status.
– HTTP/1.0 200 OK
– HTTP/1.0 404 Not Found
● El primer dígito del código de status identifica la categoría:
– 1xx indica un mensaje de información únicamente.
– 2xx indica éxito en general.
– 3xx redirecciona el cliente a otro URL.
– 4xx indica un error en la parte del cliente.
– 5xx indica un error en la parte del servidor.

2019 – Segundo Cuatrimestre 11

El protocolo HTTP – Códigos comunes
● Algunos códigos comunes son:
– 200 OK
– El pedido tuvo éxito, y el recurso es retornado en el cuerpo del mensaje.
– 404 Not Found
– El recurso solicitado no existe.
– 301 Moved Permanently
– 302 Moved Temporarily
– 303 See another (Solo HTTP/1.1)
El recurso se movió a otro URL y debe ser pedido automáticamente por el cliente.
Usualmente es utilizado por un script que redirecciona al visitante.
– 500 Server Error
Error inesperado. Típicamente un error en algún script alojado en el servidor que
impide que se ejecute correctamente.
● El detalle completo de los códigos puede encontrase en las especificaciones
de la W3C.
– HTTP 1.0: RFC 1945, HTTP 1.1: RFC 2616 y HTTP/2: RFC 7540.

2019 – Segundo Cuatrimestre 12

El protocolo HTTP - Métodos
● Además de GET, HTTP define los siguientes métodos:
– HEAD: solicita una respuesta idéntica a la que correspondería a una petición GET,
pero sin el cuerpo de la respuesta.
– POST: Envía los datos para que sean procesados por el recurso identificado. Los
datos se incluirán en el cuerpo de la petición. Esto puede resultar en la creación
de un nuevo recurso o de las actualizaciones de los recursos existentes o ambas
cosas.
– PUT: realiza un upload de un recurso especificado (archivo). Es la alternativa más
eficiente para subir archivos a un servidor, esto es porque en POST utiliza un
mensaje multiparte y el mensaje es decodificado por el servidor.
– PATCH: Sirve para aplicarle modificaciones parciales a un recurso.
– DELETE: Borra el recurso especificado.
– TRACE: solicita al servidor que envíe de vuelta en un mensaje de respuesta, en la
sección del cuerpo de entidad, toda la información que reciba del mensaje de
solicitud. Se utiliza con fines de comprobación y diagnóstico.
– OPTIONS: Devuelve los métodos HTTP que el servidor soporta para un URL
específico. Esto puede ser utilizado para comprobar la funcionalidad de un
servidor Web mediante petición en lugar de un recurso específico.
– CONNECT: Se utiliza para saber si se tiene acceso a un host.

2019 – Segundo Cuatrimestre 13

El protocolo HTTP – El método POST
● El método POST es esencial para la interacción Web.
– Este método envía información al servidor para ser procesada por quien
corresponda, como un script CGI, PHP, Java o cualquier tecnología del lado del
servidor.
● Diferencias con el GET:
– Se envía un bloque de datos adicional, en forma de headers.
– El URI no es un recurso a transferir, sino el responsable del procesamiento.
– El resultado a transferir es el output de ese procesamiento.
● El método POST se utiliza típicamente para enviar información desde un formulario.
● Sin embargo, el método GET también puede utilizarse para el mismo fin!
– Esto es así dado que los datos pueden incluirse en el URI
● Solo debe utilizarse cuando los datos son reducidos.
● Caso contrario, deberá utilizarse el método POST:
● En ambos casos, el URL será codififcado (URL-encoded) para transmitir los caracteres
especiales (espacio, &, %, etc.)
● Al momento de implementar un cliente o un servidor Web deben tenerse en cuenta
estos y muchos otros detalles para entablar una conversación HTTP.

2019 – Segundo Cuatrimestre 14

Solicitudes GET y POST

2019 – Segundo Cuatrimestre 15

El lado del servidor
● Las tecnologías que se encargan de trabajar del lado del
servidor devolverán al cliente un resultado que pueda ser
comprendido por el navegador. Algunos servidores Web (HTTP)
son:
– Apache HTTP Server Project: proyecto colaborativo que tiene
por finalidad el desarrollo de un servidor Web libre, robusto
con capacidades de uso comercial. Tiene su origen en NCSA
HTTPd desarrollado originalmente por Rob McCool. Puede
ejecutar scripts de lenguajes como PHP, Perl, Python y Ruby.
● A un año de su salida se trataba del servidor Web más utilizado
en el mundo.
– Nginx: Es un servidor Web/proxy inverso, mail proxy y proxy
TCP genérico programado originalmente por Igor Sysoev. Es
software libre y de código abierto, licenciado bajo BSD
simplificada. Es multiplataforma.
● El sistema es usado por una larga lista de sitios Web conocidos
como: Yandex, VK, WordPress, Netflix, GitHub, SourceForge,
TorrentReactor y partes de Facebook (como el servidor de
descarga de archivos pesados).

2019 – Segundo Cuatrimestre 16

El lado del servidor (2)
– Internet Information Services (IIS): es un servidor Web y un
conjunto de servicios para sistemas operativos Windows. Se
encuentra integrado a los sistemas operativos para
servidores Windows y las ediciones profesionales o
superiores. Ofrece servicios como: FTP, SMTP, NNTP y
HTTP/HTTPS.
● Ejecuta scripts en ASP, ASP.net, PHP y Perl.
– Apache Tomcat: es un servidor Web y un contenedor de
servlets open source desarrollado por la ASF. Implementa
varias especificaciones de Java EE entre los que se incluyen
servlets, JSP, EL y Web Sockets.
– GlassFish/Payara: es un proyecto de desarrollo de servidor
de aplicaciones open source iniciado por Sun Microsystems
para la plataforma JavaEE. Se trata de la implementación de
referencia de JavaEE soportando: EJB, JPA, JSF, JMS, RMI,
JSP y servlets.

2019 – Segundo Cuatrimestre 17

El lado del Servidor - Tecnologías
● Cualquiera sean las características físicas del servidor, se debe elegir
por una pila de aplicaciones para que el sitio Web funcione.
● Esta pila incluirá:
– Sistema Operativo.
– Servidor Web.
– Software de Base de Datos.
– Lenguaje de Programación.
● La decisión depende del tipo de proyecto y de los conocimientos que
tengamos.

2019 – Segundo Cuatrimestre 18

El lado del Cliente (1)
● Un Web browser o un navegador Web es una herramienta tecnológica que
permite el acceso a páginas Web a través de una red.
● En términos generales un navegador Web, recibe información, la interpreta y
finalmente la muestra al usuario.
– Microsoft Internet Explorer – Microsoft Edge: la primera versión de Internet
Explorer (IE) apareció en el año 1995 y se instalaba como complemento
de Microsoft Plus! Posteriormente pasó a formar parte del paquete de
instalación por defecto del sistema operativo Windows.
● Desde 1999 ha sido uno de los Web browsers más utilizados alcanzando su
pico máximo en 2002-2003 con una cuota de uso de aproximada al 95%.
● La última versión es IE 11 disponible en Windows 7 SP1, 8 y 8.1
● Microsoft Edge es el nombre del navegador Web incluido en la versión 10 de
Windows.
● A partir de abril de 2019 el motor de Edge está basado en Chromium.

2019 – Segundo Cuatrimestre 19

El lado del Cliente (2)
– Google Chrome: lanzado en septiembre de 2008 es un navegador Web
gratuito desarrollado y mantenido por el gigante de las búsquedas.
Entre sus principales características se destacan:
● Blink: es el motor de renderizado de páginas Web. Se trata de un fork de
WebKit.
● Motor JavaScript v8: que ha permitido el desarrollo de aplicaciones Web
altamente basadas en JavaScript tales como Gmail.
● Multiplataforma: cuenta con versiones para los sistemas operativos de
escritorio Windows, Mac OS X, Ubuntu, Debian, openSUSE, Chrome OS y
los sistemas operativos móviles: Android y iOS.
● Es el navegador Web más popular en países de América Latina.
● Tiene las mejores puntuaciones en soporte del estándar HTML5 y las
mejores marcas en lo que respecta a conformidad de
JavaScript/ECMAScript.
– Google Chrome para Android: desde 2012 existe una versión de
Chrome para teléfonos y tablets Android cuya versión sea igual o
superior a Android 4.0 (Ice Cream Sandwich).
– Chromium: es el proyecto de software libre con el que se ha
desarrollado Google Chrome. Es de participación comunitaria y tiene
por fin fundamentar las bases del diseño y desarrollo del navegador
Chrome. La porción de Google está amparada por la licencia BSD.

2019 – Segundo Cuatrimestre 20

El lado del Cliente (3)
– Mozilla Firefox: software libre y de código abierto desarrollado por
Mozilla Foundation, subsidiaria de Mozilla Corporation. El proyecto es
considerado el “sucesor espiritual” de Netscape. A lo largo del tiempo
ha tenido varios nombres tales como Phoenix y Firebird. Algunas de
sus características son:
● Versiones desktop para Windows y Linux y móviles para Android y Firefox.
● Utiliza Quantum como motor de renderizado de páginas Web.
● Alta compatibilidad con estándares Web.
– Safari: es un navegador Web propietario desarrollado por Apple
disponible para OS X, iOS (Sistema operativo de iPhone, iPad y iPod
Touch) y Windows.
● Está basado en la plataforma WebKit que incluye el motor de renderizado
WebCore (basado en KHTML) y JavaScriptCore (basado en KJS) como
intérprete JavaScript.

2019 – Segundo Cuatrimestre 21

Estadísticas – Navegadores Web Desktop

2019 – Segundo Cuatrimestre 22

Estadísticas – Navegadores Web Móvil

2019 – Segundo Cuatrimestre 23

Más herramientas
● ¿Podrías enumerar otros servidores Web?
● ¿Qué otros navegadores Web conocés?
● Buscá en la Web información de navegadores Web que no conozcas.
● ¿Qué entornos de desarrollo o editores de código podemos usar para crear
nuestras propias páginas Web?

2019 – Segundo Cuatrimestre 24

Bibliografía
● Web: HTTP Made Really Easy. byJames Marshall, 1997. URL:
http://www.jmarshall.com/easy/http/
● Web: Desarrollo de aplicaciones Web, 2013. URL:
http://inciart.com/teach/ucr/appweb/2011b/libro/
● Libro: Creating Web Sites Bible 3rd Ed. Philip Crowder, David A. Crowder,
Wiley Publishing Inc. 2008.
● Web: StatCounter. URL: https://statcounter.com/

2019 – Segundo Cuatrimestre 25