1. Introducción a la Web 2012
APLICACIONES WEB
CAPITULO I
INTRODUCCIÓN A LA WEB
1

2. Introducción a la Web 2012
Propósitos y Objetivos
 Introducir a conceptos, elementos y funcionamiento de la WWW
 Definir los que es una Página Web
 Aprender aspectos de Arquitectura de la Web.
 Diferenciar de sitios web estáticos vs. dinámicos
2

3. Introducción a la Web 2012
Introducción a la Web
La Web es una vasta colección de documentos en Internet que están enlazados a través de los
hiperenlaces
 Internet: millones de ordenadores conectados
Un conjunto de redes heterogéneas conectadas entre sí mediante el protocolo
TCP/IP.
Los hiperenlaces permiten a los usuarios acceder a Los hiperenlaces permiten a los usuarios
acceder a documentos situados en otros servidores web, sin documentos situados en otros
servidores web, sin preocuparse de su ubicación preocuparse de su ubicación
La Web medio de transmisión de información
 Cualquier desarrollo en un medio esta irremediablemente condicionado por una correcta
comprensión del medio, su soporte, sus herramientas de desarrollo, su filosofía.
 Si queremos desarrollar cualquier trabajo en la WWW, bien sea grande o pequeño
debemos familiarizarnos con el medio y sus elementos:
 Soporte físico del medio
 Herramientas de Desarrollo
 Metodologías, enfoques,
 Limitaciones del medio
3

4. Introducción a la Web 2012
La Filosofía Web
La Filosofía implica permitir el acceso libre, global, y rápido a la información.
Libertad de acceso.- no poder ningún impedimento al acceso a la información
Universalidad.-un sitio web debe ser accesible por el mayor número de personas
Rapidez.- es la celeridad con la cual un usuario puede localiza un dato en un sitio Web.
Limitaciones del medio
El medio está limitado por las características del soporte físico, de las herramientas de desarrollo y
de los enfoques y corrientes de pensamiento.
 Ej. Limitación de soporte físico (directa): Velocidad Tx.
 Ej. Limitación de las herramientas (indirecta): el estándar HTML, que se implementa de
distintas maneras y permite realizar un número limitado de acciones.
Nombres de dominio y URL
 Para no tener que recordar direcciones IP tal cual, éstas pueden ser representadas
mediante nombres de dominio (por ejemplo, www.espoch.edu.ec)
 El sistema de nombres de domino (DNS) permite que éstas se resuelvan a direcciones IP
– Ejemplo: ping www.espoch.edu.ec
 Los URL (Uniform Resource Locator) son las direcciones que escribimos en el navegador
– Ejemplo http://www.espoch.edu.ec
Computación Cliente/Servidor
En este modelo de computación distribuida, un cliente solicita una acción a un servidor, que le
devuelve los resultados
Puede haber diversos tipos de clientes, desde los más ligeros (como un navegador Web, que
ligeros únicamente es capaz de mostrar documentos HTML) hasta clientes pesados que también
realizan procesamiento.
 Surgen como respuesta a los mainframes de los 60 y 70 (con 128 KB de RAM y y discos
duros de 10 MB)
4

5. Introducción a la Web 2012
 Despega este modelo con el advenimiento de los ordenadores personales ordenadores
personales
 Toda Internet es una inmensa red cliente/servidor
Internet no es igual que la Web
 Internet permite a cualquier ordenador del mundo compartir datos con otro
ordenador remoto.
-Un programa cliente en un ordenador accede a un programa servidor en otro
ordenador remoto.
 La Web es el sistema de hipertexto que funciona sobre Internet como uno de sus
servicios.
– En este caso, el programa cliente es nuestro navegador, y el servidor el
programa que hace navegador de servidor web que está ejecutándose en el
servidor web ordenador remoto y que se encarga de entregar el documento
solicitado a nuestro navegador
5

6. Introducción a la Web 2012
Nacimiento de la Worl Wide WEb
 En 1989, Tim Berners-Lee, en el laboratorio europeo de partículas (CERN), en Suiza, crea
un lenguaje de etiquetas para representar y enlazar documentos
 HTML Lenguaje de Marcado de Hipertexto
 Berners-Lee creó las versiones iniciales de:
HTML, HTTP, un servidor web y un navegador Los cuatro componentes esenciales de
la Web.
Esquema General Cliente Servidor
6

7. Introducción a la Web 2012
Visión General de la Web
1. El usuario solicita un documento tecleando su dirección en el navegador:
http://www.espoch.edu.ec
– Es lo que se denomina un URL (localizador uniforme de recursos)
2. El cliente busca en el DNS cuál es la IP de www.espoch.edu.ec es: 156.35.14.3
– Cada ordenador en Internet está identificado por una dirección única denominada IP
– El DNS traduce de nombres lógicos a direcciones físicas
3. Navegador y servidor web comienzan un diálogo a través del protocolo HTTP (protocolo
de transferencia de hipertexto)
• GET /HTTP/1.0
4. El servidor, si todo es correcto, devuelve el documento solicitado más información
adicional.
5. El navegador mira el tipo de documento devuelto (MIME)
6. Si es “text/html” es un documento HTML, lo visualiza el propio navegador
7. Si es otro tipo de documento se ejecutará el programa que tenga asociado, o nos
preguntará si queremos guardar el documento en nuestro ordenador.
7

8. Introducción a la Web 2012
Funcionamiento de la web
8

9. Introducción a la Web 2012
 Un servidor web es un ordenador en Internet que sirve páginas web a petición
9

10. Introducción a la Web 2012
– Para ello, debe tener un programa ejecutándose que haga de servidor web: Apache, IIS,
etcétera
 El usuario accede a la web a través de un navegador (browser)
– Se encarga de solicitar las páginas web al servidor y de mostrarlas
HTML
 Es el lenguaje de creación de páginas Webg
– Al menos, de las páginas “estáticas”
 Era imprescindible que la misma información se pudiese ver en diferentes plataformas
 Por tanto, Berners-Lee diseñó un lenguaje de estructuración de documentos, no de
presentación (ésta se dejaba al programa cliente)
HTML es un Lenguaje
 Como tal, tiene unas reglas que deben ser cumplidas, esto es, una sintaxis, una
gramática... igual que el español o cualquier otro lenguaje informático.
 Es además un lenguaje informático, para ser procesado por ordenadores; pero no es un
lenguaje de programación.
HTML es un Lenguaje de marcado
¿Qué vemos de un vistazo en el siguiente texto?
Acme Computer Corp.
Acme Computer Corporation is a technology-based company that seeks to offer
its customers the latest in technological innovation. Our products are created
sing the latest breakthroughs in computers and are designed by a team of top-
notch experts.
We are based in Acmetown, USA, and have offices in most major cities around
the world. Our goal is to have a global approach to the future of computing.Have
a look at our product catalog for some examples of our innovative approach.
10

11. Introducción a la Web 2012
Que tiene un título y dos párrafos Pero un ordenador sólo vería un montón de caracteres
Necesitamos un modo de indicarle la estructura del documento.
HTML, lenguaje de hipertexto
Por hipertexto designamos al texto al que se le añade una propiedad: determinadas porciones de
texto pueden ser enlazadas a otros documentos
De ahí surge el concepto de navegación: surcamos el Web yendo de unos enlaces a otros
El hipertexto debe ser utilizado en los sitios web para facilitar al usuario la labor de búsqueda de la
información.
Que necesito para crear Documento HTML
 Un editor de texto
– ¡Ojo!, no un procesador de textos tipo el Word, por ejemplo
– Debe ser texto plano, sin formato (p. ej., con el Bloc de Notas)
 Le daremos la extensión .html o .htm, y un nombre sin espacios ni caracteres especiales
– Nota: ninguna de las dos características son obligatorias, pero nos ahorrarán problemas
Como puedo ver un Documento HTML
 Un programa cliente que entienda lenguaje HTML (que pueda visualizar de alguna
manera documentos HTML)
 Técnicamente, recibe el nombre de HTML UserAgent
 Un ejemplo de agente de usuario son los navegadores (literalmente, hojeadores) web
(web browsers)
 El navegador es quien se encarga de la presentación del documento (el estándar no
especifica cómo debe visualizarse cada elemento)
HTTP
 HTTP (HyperText Transform Protocol) es el protocolo usado para transferir páginas web
 Es el modo en que un navegador se comunica con un servidor Web (Apache, Internet
Information Server…)
 Es un protocolo sin estado
 La sesión termina en cuanto se devuelve el objeto solicitado
11

12. Introducción a la Web 2012
 Incluso, si una página contiene otros objetos (imágenes,frames, etc.) cada uno de ellos
inicia una nueva petición.
URL
 URI: Uniform Resource Identifier
 URL: Uniform Resource Locator
Un URL es la dirección única de todo documento en la Web
 http://www.espoch.edu.ec/
Sintaxis:
protocolo://dirección[:puerto]/directorio/fichero
Protocolo
 Un protocolo define el modo en que se comunican dos ordenadores para llevar a cabo
alguna tarea
 Protocolo de la Web:
– HTTP (HyperText Transfer Protocol)
– Especifica cómo tiene lugar el diálogo entre el navegador y el servidor para
conseguir el fichero especificado
– No se ocupa del transporte en sí: TCP
Cada vez que tecleamos una dirección o pulsamos un enlace el navegador se comunica vía HTTP
con el servidor web indicado.
Dirección del sitio
Suele ser un nombre simbólico: nombre de dominio
 www.espoch.edu.ec especifica una máquina llamada “www” en el dominio
“espoch.edu.ec”
 El nombre de máquina puede ser cualquiera
 “www” no es más que un convenio para especificar aquellas máquinas que son servidores
Web.
 como “ftp” suele designar a los servidores de FTP Incluso aunque muchas veces se trate
de la misma máquina
 También podría ser directamente la dirección IP:
12

13. Introducción a la Web 2012
http://156.35.14.3/
Servidor Web
 Un programa que atiende las peticiones HTTP llegadas a un puerto determinado de la
máquina.
– También se denomina así, por extensión, a la máquina que cuenta con uno de tales
programas.
 Ejemplos de servidores web:
– Apache
– Internet Information Server (IIS)
Definición de una Página Web
Una página Web es un tipo de fichero de texto, con una extensión .htm o html (hypertext
markup language –lenguaje de Hipertexto)
13

14. Introducción a la Web 2012
Página Web - elementos
Enfoque estático
 Al principio, el Web estaba poblado únicamente por páginas estáticas
– El servidor Web simplemente localizaba el documento solicitado en el URL y se lo
entregaba al cliente.
 Este enfoque puede ser perfectamente válido para muchos sitios
– Siempre y cuando no requieran actualizaciones continuas, ya que hay que eso implica o
bien modificar, a mano, las páginas existentes, o bien crear una nueva
 Pero no permitiría, por ejemplo, crear un sitio de comercio electrónico donde se pueda
comprar, o el de un banco
– Es necesario acceder a datos en el servidor y crear una página a petición
14

15. Introducción a la Web 2012
El enfoque estático algunos inconvenientes:
 Dificultad de actualización y mantenimiento (añadir un producto, aplicar un descuento a
todos los productos, …..)
 Acceso muy limitado a la información (únicamente disponemos de índices difíciles de
mantener, es difícil o imposible hacer búsquedas)
 En un sitio Web el servidor se limita a transmitir los documentos web que se encuentran
en el disco duro.
 El enfoque estático no es adecuado para sitios que cambien en contenido y tiempo.
Enfoque dinámico
 Los contenidos suelen almacenarse en una base de datos (Una B.D es mucho más fácil
de
actualizar que un documento HTML)
 Como se presenta la información de la Base de Datos en un documento HTML ?
Paginas activas
 Pagina activa es un fichero de texto que contiene código HTML mezclado con código de
Programación.
Enfoque dinámico - Funcionamiento
 El esquema de funcionamiento de las páginas es siempre similar independientemente de
en qué se hayan desarrollado éstas
– CGI, ASP, Servlets/JSP…
 El servidor Web detecta una petición de una página dinámica y se la pasa al programa
necesario
– Podría ser una extensión del servidor
– O bien un programa completamente independiente
 Éste programa es quien sabe cómo interpretar el código de la página para devolver el
HTML apropiado.
15

16. Introducción a la Web 2012
16