Introducción a las Tecnologías Web

1.1.- PERSPECTIVA HISTÓRICA DEL INTERNET.

Los inicio de Internet nos remontan a los años 60. En plena guerra fría, Estados Unidos crea una red exclusivamente militar, con el objetivo de que, en el hipotético caso de un ataque ruso, se pudiera tener acceso a la información militar desde cualquier punto del país.
Este red se creó en 1969 y se llamó ARPANET. En principio, la red contaba con 4 ordenadores distribuidos entre distintas universidades del país. Dos años después, ya contaba con unos 40 ordenadores conectados. Tanto fue el crecimiento de la red que su sistema de comunicación se quedó obsoleto. Entonces dos investigadores crearon el Protocolo TCP/IP, que se convirtió en el estándar de comunicaciones dentro de las redes informáticas (actualmente seguimos utilizando dicho protocolo). 

En 1985 la Internet ya era una tecnología establecida, aunque conocida por unos pocos.
El autor William Gibson hizo una revelación: el término "ciberespacio".
En ese tiempo la red era básicamente textual, así que el autor se baso en los videojuegos. Con el tiempo la palabra "ciberespacio" terminó por ser sinónimo de Internet.
El desarrollo de NSFNET fue tal que hacia el año 1990 ya contaba con alrededor de 100.000 servidores. 

En 1993 Marc Andreesen produjo la primera versión del navegador "Mosaic", que permitió acceder con mayor naturalidad a la WWW.
La interfaz gráfica iba más allá de lo previsto y la facilidad con la que podía manejarse el programa abría la red a los legos. Poco después Andreesen encabezó la creación del programa Netscape.

Apartir de entonces Internet comenzó a crecer más rápido que otro medio de comunicación, convirtiéndose en lo que hoy todos conocemos. 

1.2 PROTOCOLO HTTP (PROTOCOLO DE TRANSFERENCIA DE    HIPERTEXTO).

Desde 1990, el protocolo HTTP (Protocolo de transferencia de hipertexto) es el protocolo más utilizado en Internet. 

El propósito del protocolo HTTP es permitir la transferencia de archivos (principalmente, en formato HTML). entre un navegador (el cliente) y un servidor web (denominado, entre otros, httpd en equipos UNIX) localizado mediante una cadena de caracteres denominada dirección URL. 

Comunicación entre el navegador y el servidor

La comunicación entre el navegador y el servidor se lleva a cabo en dos etapas:

• El navegador realiza una solicitud HTTP
• El servidor procesa la solicitud y después envía una respuesta HTTP

Solicitud HTTP

Una solicitud HTTP es un conjunto de líneas que el navegador envía al servidor. Incluye:

• Una línea de solicitud: es una línea que especifica el tipo de documento solicitado, el método que se aplicará y la versión del protocolo utilizada. La línea está formada por tres elementos que deben estar separados por un espacio:
• el método
• la dirección URL
• la versión del protocolo utilizada por el cliente (por lo general, HTTP/1.0)
• Los campos del encabezado de solicitud: es un conjunto de líneas opcionales que permiten aportar información adicional sobre la solicitud y/o el cliente (navegador, sistema operativo, etc.). Cada una de estas líneas está formada por un nombre que describe el tipo de encabezado, seguido de dos puntos (:) y el valor del encabezado.
• El cuerpo de la solicitud: es un conjunto de líneas opcionales que deben estar separadas de las líneas precedentes por una línea en blanco y, por ejemplo, permiten que se envíen datos por un comando POST durante la transmisión de datos al servidor utilizando un formulario. 

 

Respuesta HTTP

Una respuesta HTTP es un conjunto de líneas que el servidor envía al navegador. Está constituida por: Incluye:

• Una línea de estado: es una línea que especifica la versión del protocolo utilizada y el estado de la solicitud en proceso mediante un texto explicativo y un código. La línea está compuesta por tres elementos que deben estar separados por un espacio: La línea está formada por tres elementos que deben estar separados por un espacio:
• la versión del protocolo utilizada
• el código de estado
• el significado del código
• Los campos del encabezado de respuesta: es un conjunto de líneas opcionales que permiten aportar información adicional sobre la respuesta y/o el servidor. Cada una de estas líneas está compuesta por un nombre que califica el tipo de encabezado, seguido por dos puntos (:) y por el valor del encabezado Cada una de estas líneas está formada por un nombre que describe el tipo de encabezado, seguido de dos puntos (:) y el valor del encabezado.
• El cuerpo de la respuesta: contiene el documento solicitado.

encabezados de respuesta

Nombre del encabezado	Descripción
Content-Encoding	Tipo de codificación para el cuerpo de la respuesta
Content-Language	Tipo de idioma en el cuerpo de la respuesta
Content-Length	Extensión del cuerpo de la respuesta
Content-Type	Tipo de contenido del cuerpo de la respuesta (por ejemplo, texto/html). Consulte Tipos de MIME
Date	Fecha en que comienza la transferencia de datos
Expires	Fecha límite de uso de los datos
Forwarded	Utilizado por equipos intermediarios entre el navegador y el servidor
Location	Redireccionamiento a una nueva dirección URL asociada con el documento
Server	Características del servidor que envió la respuesta

1.2.1 Arquitectura del WWW.

El diseño del World-Wide Web sigue el modelo cliente-servidor: un paradigma de división del trabajo informático en el que las tareas se reparten entre un número de clientes que efectúan peticiones de servicios de acuerdo con un protocolo, y un número de servidores que las atienden. Para poner en marcha un sistema como éste ha sido necesario:

a) Diseñar e implementar un nuevo protocolo que permitiera realizar saltos hipertextuales, de un nodo de origen a uno de destino, que podría ser un texto o parte de un texto, una imagen, un sonido, una animación, fragmento de vídeo, etc. Es decir, cualquier tipo de información en formato electrónico. Este protocolo se denomina HTTP y es el “lenguaje” que “hablan” los servidores del WWW.

b) Inventar un lenguaje para representar hipertextos que incluyera información sobre la estructura y el formato de representación y, especialmente, indicar origen y destino de saltos hipertextuales (HTML).

c) Idear una forma de codificar las instrucciones para los saltos hipertextuales de un objeto a otro de la Internet. Dada la variedad de protocolos, y por tanto, formas de almacenamiento y recuperación de la información, esta información es vital para que los clientes puedan acceder a dicha información.

d) Desarrollar aplicaciones cliente para todo tipo de plataforma y resolver el problema de cómo acceder a la información que está almacenada y que sea accesible a través de protocolos diversos (FTP, NNTP, Gopher, HTTP, X.500, WAIS, etc.) y representar información multiformato (texto, gráficos, sonidos, fragmentos de vídeo, etc.).

1.2.2 URL’s.

Las URL semánticas o URL amigables son aquellas URLs que son, dentro de lo que cabe, entendibles para el usuario. Lejos de las clásicas URLs de las páginas dinámicas llenas de variables GET y números difíciles de recordar, las URL semánticas están formadas con palabras relacionadas con el contenido de la página y fáciles de recordar. Estas se utilizan en los sitios web dinámicos (no estáticos). Por ello se están utilizando mucho más que las URL extensas.

URL no semántica

Las urls en las páginas dinámicas suelen tener este formato. Imaginemos que entramos en una página web a leer una noticia que habla sobre como crear URL amigables:

http://www.miweb.com/index.php?seccion=noticias&id_noticia=133

Problema con los buscadores

Cada día son más los sitios web que optan por mostrar este tipo de URLs con el fin de que sean indexadas, ya que los buscadores indexan las URL no semánticas sin agregar peso a las palabras adecuadas, devaluando el contenido de la página en los resultados orgánicos. De ahí que surja el nombre de "amigable", pues serán unas URL amigables para los buscadores. Dicho problema que dan las URL tradicionales ha sido el gran impulsor de semantizar muchas de las urls que encontramos en internet.

1.2.3 Métodos http. Persistencia en http –Cookies.

Las cookies son utilizadas habitualmente por los servidores web para diferenciar usuarios y para actuar de diferente forma dependiendo del usuario. Las cookies se inventaron para ser utilizadas en una cesta de la compra virtual, que actúa como dispositivo virtual en el que el usuario va “colocando” los elementos que desea adquirir, de forma que los usuarios pueden navegar por el sitio donde se muestran los objetos a la venta y añadirlos y eliminarlos de la cesta de la compra en cualquier momento. Las cookies permiten que el contenido de carrito de compra. 

Toda cookie está vinculada con un dominio o subdominio. Además existe una restricción impuesta por el propio estándar de manera que no es posible acceder a cookies de otro dominio o subdominio que no sea el de la propia URL donde se encuentra la página web. Esto significa que una página web en la dirección www.idg.es, por ejemplo, sólo podrá acceder a las cookies vinculadas con los dominios www.idg.es y .idg.es. Como ya se verá más adelante, las distintas tecnologías, ya sean de cliente o de servidor, disponen de los mecanismos necesarios para implementar dicho vínculo. Una cookie que es del dominio .idg.es será accesible desde cualquier URL que sea del tipo ordenadores .idg.es, Internet.idg.es, o incluso, www.ordenadores.idg.es o www.internet.idg.es. La restricción se extiende desde el caso general hasta los casos particulares. Ahora bien, una cookie del dominio www.internet.idg.es no será accesible desde una página web que se encuentre bajo la dirección URL www.ordenadores.idg.es. Si se desea que ambos sitios compartan cookies no queda más remedio que éstas sean del dominio .idg.es, que es compartido por ambos.

1.3 INTRODUCCIÓN AL HTML.  LENGUAJE DE DESPLIEGUE DEL WEB

TML (HyperText Mark-Up Language) es lo que se conoce como "lenguaje de marcado", cuya función es preparar documentos escritos aplicando etiquetas de formato. Las etiquetas indican cómo se presenta el documento y cómo se vincula a otros documentos.

HTML se usa también para la lectura de documentos en Internet desde diferentes equipos gracias al protocolo HTTP, que permite a los usuarios acceder, de forma remota, a documentos almacenados en una dirección específica de la red, denominada dirección URL. 

1.3.1 HTML COMO UN TIPO SGML.

SGML son las siglas de Standard Generalized Markup Language o "Estándar de Lenguaje de Marcado Generalizado". Consiste en un sistema para la organización y etiquetado de documentos. La Organización Internacional de Estándares (ISO) normalizó este lenguaje ISO 8879:1986, Information processing — Text and office systems — Standard Generalized Markup Language (SGML).

El lenguaje SGML sirve para especificar las reglas de etiquetado de documentos y no impone en sí ningún conjunto de etiquetas en especial.

1.3.2 ELEMENTOS DEL LENGUAJE HTML.

Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (p.ej. <nombre-de-elemento>) y una etiqueta de cierre (p.ej. </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (p.ej. <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML

1.3.3 TABLAS EN HTML.

Las tablas son una de las herramientas más útiles de que disponemos en HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro documento, ayudándonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la única forma coherente que había antes de la introducción de las Hojas de Estilo y de las etiquetas. 

Estructura de una tabla

Las tablas están formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado esuna columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna.

	columna 1	columna 2	columna 3
fila 1	celda(1,1) celda(1,2) celda(1,2) celda(2,1) celda(2,2) celda(2,3) celda(3,1) celda(3,2) celda(3,3)
fila 2
fila 3

1.3.4 FORMULARIOS.

Los formularios interactivos permiten a los autores de páginas Web poner elementos interactivos en sus páginas, por ejemplo, para recibir mensajes de sus lectores, de forma similar a las cartas de respuestas que se encuentra en algunas revistas.

El lector escribe la información rellenando campos o haciendo clic sobre botones, y luego presiona un botón de envío para enviarla a una dirección URL que se suele dirigir a una dirección de correo electrónico o a un script dinámico Web como PHP, ASP o CGI. 

1.5 HOJAS DE ESTILO EN CASCADA E INTRODUCCIÓN AL XML.

El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "style".

Los tres tipos de estilos

CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página Web:

1. Una hoja de estilo externa, es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
2. Una hoja de estilo interna, que es una hoja de estilo que está incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento <head>.) De esta manera se obtiene el beneficio de separar la información del estilo del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página Web.
3. Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o estructurado que debería ser, pero funciona. Éste es el método recomendado para maquetar correos electrónicos en HTML.

Ventajas de usar las hojas de estilo

Las ventajas de utilizar CSS (u otro lenguaje de estilo) son:

• Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la actualización del mismo.
• Los navegadores permiten a los usuarios especificar su propia hoja de estilo local, que será aplicada a un sitio web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.
• Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o, incluso, a elección del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil o ser "leída" por un sintetizador de voz.
• El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño (siempre y cuando no se utilice estilo en línea).