Introducción al Desarrollo Web

Unidad 1: Fundamentos de la Web

Presentación Nº 2
2017 - 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.

2017 – 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.
2017 – 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.

2017 – 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:
– www.fcad.uner.edu.ar:80 servidor Web de la facultad
– www.fcad.uner.edu.ar:3306 servidor de Base de Datos de la facultad.

2017 – 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.

2017 – 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.

2017 – 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.
2017 – Segundo Cuatrimestre 8
HTTP – Request y parsing del navegador

2017 – 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

2017 – 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.

2017 – 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 y HTTP 1.1: RFC 2616.

2017 – Segundo Cuatrimestre 12

El protocolo HTTP – Header lines
● Las líneas de encabezamiento proveen información sobre el pedido, la
respuesta o el objeto que se está enviando en el cuerpo del mensaje.
● La estructura es Header-Name: value
– HTTP 1.0 define 46 headers pero ninguno es requerido.
– HTTP 1.1 define 46 headers y requiere uno, el denominado Host, en los
pedidos realizados.
● Algunos headers importantes del cliente:
– User-agent: es el programa que realiza el pedido, de la forma
"Nombre/x.xx"
– Ejemplo: User-agent: Chrome/44.0.2403.157
● Algunos headers importantes del servidor:
– Server: identifica el software del servidor, en el mismo formato
"Nombre/x.xx"
– Ejemplo: Server: Apache/2.4.2 (Win32)
– Last modified: es la fecha de modificación del recurso otorgado.

2017 – Segundo Cuatrimestre 13

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.

2017 – Segundo Cuatrimestre 14

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.

2017 – Segundo Cuatrimestre 15

Solicitudes GET y POST

2017 – Segundo Cuatrimestre 16

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).

2017 – Segundo Cuatrimestre 17

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.
– WEBrick: servidor HTTP que permite ejecutar scripts Ruby.

2017 – Segundo Cuatrimestre 18

El lado del servidor (3)
– Node.JS: si bien es un entorno de ejecución basado en el lenguaje de
programación ECMAScript y por tanto, no se trata de un servidor Web se
destaca la facilidad de crear uno utilizando el módulo http.
var http = require('http');
//Crea el objeto servidor:
http.createServer(function (req, res) {
res.write('Hello World!'); //Escribe la respuesta al cliente.
res.end(); //Se cierra la respuesta.
}).listen(3000); //Indica que el servidor atiende en el puerto 3000

2017 – Segundo Cuatrimestre 19

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: Linux, Windows, ¿Mac OS?, etc.
– Servidor Web: Apache, NGINX, etc.
– Software de Base de Datos: MySQL, PostgreSQL, SQL Server, Oracle, etc.
– Lenguaje de Programación: PHP, Java, Python, C#, etc.
● La decisión depende del tipo de proyecto y de los conocimientos que
tengamos.

2017 – Segundo Cuatrimestre 20

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.

2017 – Segundo Cuatrimestre 21

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.
2017 – Segundo Cuatrimestre 22
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 Gecko como motor de renderizado de páginas Web.
● Alta compatibilidad con estándares Web.
– Iceweasel: a diferencia del código fuente, el logotipo y la marca
registrada Firefox no disponen de una licencia libre. Esto trajo
diferencias entre la Mozilla Foundation y el Proyecto Debian. Para
resolver el problema el Proyecto Debian decidió llamar al navegador
Iceweasel y cambiar su logo.
– 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.

2017 – Segundo Cuatrimestre 23

El lado del Cliente (4)
– Opera: desarrollado por Opera Software dispone de versiones para
diferentes plataformas de escritorio como: Windows, OS X, BSD y
Linux.
● En cuanto a dispositivos móviles, Opera tiene versiones conocidas con
nombres como: Opera Mobile, Opera Coast, y Opera Mini. Las dos
primeras disponibles en Sistemas operativos Android, iOS, Windows Phone,
entre otros, mientras que Opera Mini lo está para dispositivos capaces de
ejecutar aplicaciones Java-ME.
● Desde su versión 15 reemplazó el motor de renderizado Presto por Blink
(Google Chrome).
– Otros navegadores:
● Dolphin.
● Puffin.
● Konqueror
● Maxthon.
● SeaMonkey.
● Lynx.

2017 – Segundo Cuatrimestre 24

El lado del Cliente (5)

2017 – Segundo Cuatrimestre 25

El lado del Cliente (6)

2017 – Segundo Cuatrimestre 26

Herramientas de Desarrollo
● Si bien podemos programar páginas, sitios y aplicaciones Web utilizando
cualquier editor de texto plano para grandes proyectos necesitaremos de
herramientas que mejoren nuestra productividad.
● Algunas herramientas de desarrollo son:
– Notepad++
– Gedit/Xed
– Atom
– Sublime Text
– NetBeans
– Inspector de elementos (Chrome, FireFox, Opera, Edge).
– SeaMonkey.
– Adobe Dreamweaver
– Visual Studio Code y Visual Studio .Net
– Cloud9

2017 – Segundo Cuatrimestre 27

Bibliografía
● Web: HTTP Made Really Easy. byJames Marshall, 1997
http://www.jmarshall.com/easy/http/
● Web: Desarrollo de aplicaciones Web, 2013
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: wikiHow - ¿Cómo activar telnet en Windows 7?
http://es.wikihow.com/activar-Telnet-en-Windows-7
● Web: StatCounter
https://statcounter.com/

2017 – Segundo Cuatrimestre 28