Aplicaciones web

Introducción a la Web 2012

APLICACIONES WEB

CAPITULO I

INTRODUCCIÓN A LA WEB

1


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


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


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

 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


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


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


Funcionamiento de la web

8


 Un servidor web es un ordenador en Internet que sirve páginas web a petición

9

– 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

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

 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


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


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


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

Aplicaciones web

Más contenido relacionado

La actualidad más candente (12)

Similar a Aplicaciones web (20)

Aplicaciones web