Introduccion a la tecnologia web

2011

INTRODUCCION A LA

TECNOLOGIA WEB UNIDAD #1

13 de septiembre de 2011 INTRODUCCION A LA TECNOLOGIA WEB

1

Índice

Perspectiva Histórica del Internet…………………………………………………… (2)

Protocolo HTTP………………….……………………………………………………. (4)

Arquitectura del WWW……………………………………………………………….. (7)

URLs…………………………………………………………………………………… (9)

Métodos HTTP………………………………………………………………………… (10)

Introducción al HTML………………………………………………………………… (11)

Hojas de Estilo………………………………………………………………………… (15)

Bibliografía…………………………………………………………………………….. (16)


2

Perspectiva Histórica del Internet

Es la red de redes. Sistema mundial de redes de computadoras interconectadas.

Fue concebida a fines de la década de 1960 por el Departamento de Defensa de

los Estados Unidos; más precisamente, por la ARPA. Se la llamó primero

ARPANET y fue pensada para cumplir funciones de investigación. Su uso se

popularizó a partir de la creación de la World Wide Web. Actualmente es un

espacio público utilizado por millones de personas en todo el mundo como

herramienta de comunicación e información.

Historia de Internet

1957

La Unión Soviética lanza el Sputnik, el primer satélite artificial. En respuesta a este hecho, Estados Unidos crea el ARPA (Organismo de Proyectos de Investigación Avanzada) dentro del Ministerio de Defensa a fin de establecer su liderazgo en el área de la ciencia y la tecnología aplicada a las fuerzas armadas.

1965

El ARPA promueve un estudio sobre “Redes cooperativas de

computadoras de tiempo compartido”. El TX-2 en el laboratorio Lincoln

del MIT y el AN/FSQ-32 de la System Development Corporation quedan

vinculadas directamente (sin conmutación por paquetes) por medio de

una línea telefónica dedicada de 1200 bps; más tarde se agrega la

computadora de la Digital Equipment Corporation (DEC) en ARPA y así

conforma la red experimental.

1968

Se presenta la red conmutada por paquetes (PS - Network) ante el ARPA.

1969

Se ponen en servicio los nodos a medida que BBN construye cada IMP [Honeywell DDP-516 con 12 K de memoria]; AT&T provee líneas de 50 kpbs.

1971

15 nodos (23 hosts): UCLA, SRI, UCSB, Universidad de Utha, BBN,

MIT, RAND, SDC, Harvard, Laboratorio Lincoln, Stanford, UIU©,

CWRU, CMU, NASA/Ames.


3

1972

Ray Tomlinson modifica el programa de correo electrónico para ARPANET donde se transforma en un éxito. Se elige el signo @ entre los signos de puntuación de la máquina de teletipos Tomlinson Modelo 33 para representar el “en”. Larry Roberts crea el primer programa de administración de correo electrónico para listar, leer selectivamente, guardar, re enviar y responder mensajes.

1980

ARPANET deja de funcionar por completo el 27 de Octubre a raíz de una advertencia de virus propagada accidentalmente.

1983

El servidor de nombres desarrollado en la Universidad de Wisconsin ya no requiere que el usuario conozca la ruta exacta para acceder a otros sistemas. Paso de NCP a TCP/IP (1 Enero) Desaparecen los IMPs Honeywell o Pluribus; los TIPs son reemplazados por TACs.

1984

Se introduce el Domain Name System(DNS) (Sistema de nombre de dominio)

1986

Se crea la NSFNET (Con una velocidad principal de 56Kbps). • NSF establece 5 centros de súper computadoras para proveer alto poder de proceso. (JVNC@Princeton, PSC@Pittsburgh, SDSC@UCSD, NCSA@UIUC, Theory Center@Cornell). • Esto permite una explosión de conexiones, especialmente por parte de las universidades.

1990

ARPANET deja de existir.

1991

CERN lanza la World-Wide Web (WWW) creada por Tim Berners - Lee.

1993

Worms (gusanos) de una nueva clase aparecen en la Red - los Worms WWW (W4) a los que se les unen los Spiders (arañas), Wanderers (vagabundos), Crawlers (orugas) y Snakes (serpientes).

1995

WWW supera a ftp-data en Marzo y se transforma en el servicio de mayor flujo en la NSF Net? en base al conteo de paquetes y en Abril en base al conteo de bytes.

2000

El Controlador de tiempo de los EE. UU. (USNO) y otros pocos servicios de tiempo de todo el mundo reportan el nuevo año como 19100 el primero de Enero.


4

Protocolo HTTP

El HTTP (HyperText Transfer Protocol) es el protocolo de alto nivel del World-Wide

Web que rige el intercambio de mensajes entre clientes y servidores del Web. Un

protocolo es:

"Una descripción formal de los formatos de los mensajes y las reglas que deben

seguir dos ordenadores para intercambiar dichos mensajes. Los protocolos

pueden describir detalles de bajo nivel de los interfaces de máquina a máquina

(por ejemplo, el orden en el cual deben enviarse bits y bytes a través de un cable)

o intercambios de alto nivel entre programas (por ejemplo, la forma en que dos

programas transfieren un fichero a través de la Internet)."

El HTTP es un protocolo genérico orientado a objetos que no mantiene la

conexión entre transacciones. Ha sido especialmente diseñado para atender las

exigencias de un sistema hipermedia distribuido como es el World-Wide Web. Sus

características principales son:

Ligereza: reduce la comunicación entre clientes y servidores a

intercambios discretos, de modo que no sobrecarga la red y permite saltos

hipertextuales rápidos.

Generalidad: puede utilizarse para transferir cualquier tipo de datos, según

el estándar MIME. Esto incluye también los que desarrollen en el futuro, ya

que el cliente y el servidor pueden negociar en cualquier momento el modo

de representación de los datos: el cliente notifica al servidor una lista de

formatos que entiende, y en adelante el servidor sólo remitirá al cliente

datos que este sea capaz de manejar. El cliente debe aceptar al menos dos

formatos: text/plain (texto normal) y text/html (hipertexto).

Extensibilidad: contempla distintos tipos de transacción entre clientes y

servidores ("métodos", en la jerga HTTP), y la futura implementación de

otros nuevos. Esto abre posibilidades más allá de la simple recuperación de

objetos de la red: búsquedas, anotaciones, etc.

El esquema básico de cualquier transacción HTTP entre un cliente y un servidor

es el siguiente:


5

Conexión: El cliente establece una conexión con el servidor a través del

puerto 80 (puerto estándar), u otro especificado.

Petición: El cliente envía una petición al servidor.

Respuesta: El servidor envía al cliente la respuesta (esto es, el objeto

demandado o un código de error).

Cierre: Ambas partes cierran la conexión.

El protocolo HTTP es el que da vida a Internet, y gracias al cual, los clientes y

servidores se pueden comunicar.

Los creadores del HTTP 1.1 lo describen como: "un protocolo de nivel de

aplicación orientado a sistemas distribuidos, para la colaboración e hypermedia.

Un protocolo genérico, sin estado, orientado a objetos y que puede ser utilizado

para muchas aplicaciones, como servidores de nombres y sistemas de gestión de

objetos distribuidos, a través de las extensiones de los métodos de petición. Una

característica de este protocolo es la negociación de los tipos y representación de

los datos, permitiendo que los sistemas no dependan del tipo de datos que se

utilicen".

Los mismos creadores de HTTP 1.0 son conscientes de las limitaciones de

escalabilidad y rendimiento del protocolo, por lo que recomiendan que ningún otro

servidor lo utilice, y que se utilice de forma única el HTTP 1.1.

La nueva versión (HTTP 1.1) es un puente hacia lo que en realidad se quiere

imponer en Internet: HTTP-NG (HTTP Next Generation). Este nuevo protocolo

pretende cubrir una gran cantidad de nuevas funcionalidades, entre la que destaca

el comercio electrónico. Sus criterios de diseño han sido:

Simplicidad: no se debe abandonar el criterio introducido en HTTP 1.0,

que las cosas habituales sean sencillas, de forma que sea fácil implementar

el protocolo.

Rendimiento: debe ser eficiente trasmitiendo objetos en redes de

comunicaciones.

Asíncrono: las peticiones desde los clientes han de poderse hacer en

paralelo a través de una única conexión.

Seguridad: los objetos que se transmiten deben estar encriptados, sin

forzar ninguna política de seguridad en particular.


6

Autenticación: se debe poder autenticar a las dos partes de la conexión,

así como a cualquier intermediario. Pagos en línea: el protocolo debe

soportar la realización de pagos en línea.

Servidores intermediarios: se debe soportar la comunicación entre

servidores, para el mantenimiento de cachés, espejos de datos e

intermediarios de comunicación (proxys).

Visualización obligatoria: se debe poder obligar al cliente a mostrar

ciertos datos acerca del objeto que se transmite, como el autor del objeto, el

copyright y la licencia.

Información de registro: la información de registro (logs) ha de poder ser

enviada entre diferentes servidores.

Requerimientos de red: el protocolo debe trabajar de forma independiente

de la capa de transporte de la que disponga, aunque debe funcionar

especialmente bien con TCP, al ser el protocolo más utilizado en Internet.

Como puede observar el lector, los avances en HTTP 1.1 (y más aún en HTTPng),

son muy importantes, y un servidor como Apache (cuya cuota de mercado es

superior al 45%) en su versión 1.2 ya tiene incluido este nuevo protocolo. Y todos

los clientes de WWW lo soportarán, dando una nueva vitalidad al día a día en

Internet.

En Apache 3.0, que aún está en un futuro lejano, el principal y único objetivo a día

de hoy es dar soporte a HTTP-NG. Si Apache implementa este protocolo de forma

automática puede alcanzar al 60% del mercado, lo que le daría un impulso

definitivo.


7

Arquitectura de la 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 (Malkin, 1993). En el Web, nuestras

estaciones de trabajo son clientes que demandan hipertextos a los servidores.

Para poner en marcha un sistema como como éste ha sido necesario:

a) Diseñar e implementar un nuevo protocolo que permitiera realizar saltos

hipertextuales, esto es, de un nodo o lexía 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 (HyperText Transfer Protocol) 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. Este lenguaje es el HTML o (HyperTextex

markup Language).

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, en uso en la Internet, esta

información es vital para que los clientes (ver el siguiente punto) puedan acceder a

dicha información.

d) Desarrollar aplicaciones cliente para todo tipo de plataforma y resolver el

problema de cómo acceder a información que está almacenada y es 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.). A este fin se han desarrollado diversos clientes, entre los que destaca

la familia Mosaic, del NCSA (National Center for Supercomputer Applications) de

la Universidad de Chicago, y su sucesor Netscape Navigator, de Netscape

Communications Corporation.


8

`World Wide-Web' (abreviado `Web'; escrito también `WWW' o incluso `W3')

significa algo así como `red (o telaraña) global'. La propaganda oficial del CERN lo

define como un "sistema hipermedia distribuido" (Boutell 1994). En principio se

pensó como un medio para la distribución de la información entre equipos de

investigadores geográficamente dispersos; concretamente se dirigía a la

comunidad de físicos de altas energías vinculados al CERN (Berners-Lee 1994).

En su primera propuesta, Berners-Lee exponía las desventajas del uso de

sistemas incompatibles e inconexos:

"En el CERN, una diversidad de datos está ya disponible: informes, datos

experimentales, datos personales, listas de direcciones de correo electrónico,

documentación informática, documentación experimental y muchos otros

conjuntos de datos están girando continuamente en discos de ordenadores. Es sin

embargo imposible 'saltar' de un conjunto a otro de una manera automática: una

vez has encontrado que el nombre de Joe Bloggs se lista en una descripción

incompleta de algún software en línea, no se encuentra directamente su dirección

actual de correo electrónico. Usualmente, tendrás que utilizar un método de

consulta distinto en un ordenador distinto con un interface distinto. Una vez has

localizado la información, es difícil guardar sus conexiones o hacer una anotación

privada que puedas después encontrar rápidamente."

Las primeras instalaciones del WWW para uso interno del CERN estuvieron listas

en 1991. Ese mismo año el sistema se abrió ya a Internet. Desde entonces, para

acceder al World-Wide Web no se requiere más que un terminal VT conectado a

Internet, pero la máxima facilidad de uso y el máximo rendimiento se alcanzan con

una pantalla gráfica (un modelo Next o Macintosh, un X-Terminal o un PC con

tarjeta gráfica). Entonces el sistema nos ofrece hipertextos como el que muestra la

figura 2, nodos de la telaraña global. Las palabras subrayadas, y las imágenes

recuadradas, son links que nos conducen a otros nodos. Para viajar hasta ellos

basta con situarse con el ratón sobre el link y pulsar el botón. El nodo de llegada

puede ser otro hipertexto, o también un nodo no hipertextuales integrado en la red:

un servidor gopher, un grupo de netnews, una búsqueda en una base de datos

WAIS, etc.


9

URLs

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 GETy 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 cómo crear URL

amigables:

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

Si tenemos conocimiento de programación web sabremos que estamos

accediendo al archivo index.php en www.miweb.com, pasándole a este las

variables sección e id_noticia con los valores "noticias" y 133 respectivamente. Si

dentro de un tiempo queremos volver a esa página difícilmente recordaremos

dicha url. Y a su vez si vemos esta URL sin entrar a la página nos será imposible

saber de qué trata.

URL semántica

Con la intención de hacer estas URLs más fáciles de entender y a su vez de

recordar surgen las URL amigables. La URL anterior podría quedar de esta forma

si la semantizamos:

http://www.miweb.com/noticias/url-amigables.html

De esta forma con sólo leer la url sabremos de lo que trata la página y se nos hará

mucho más fácil de recordar en un futuro.


10

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.

Otro uso de las cookies es identificarse en un sitio web. Los usuarios normalmente

se identifican introduciendo sus credenciales en una página de validación; las

cookies permiten al servidor saber que el usuario ya está validado, y por lo tanto

se le puede permitir acceder a servicios o realizar operaciones que están

restringidas a usuarios no identificados y permitir un registro actual de usuarios

frecuentes. En otras palabras los cookies son pequeñas rutinas de código que

están programadas ya sea en el servidor o en la máquina del cliente. Y son

utilizadas para conocer los comportamientos de los clientes.

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


11

Introducción al HTML

HTML no significa más que Hyper Text Markup Lenguage. Este lenguaje utilizado

con el fin de crear documentos para lo que se conoce como World Wide Web.

Este lenguaje no se entrara en el aspecto del documento fuente, sino que dará

igual si el texto está o no formateado, ya que para conseguir que este se visualice

con un determinado formato será necesaria de unos determinados indicadores por

el documento fuente.

Casi todos los programas que interpretan páginas Web leen texto normal y

corriente, pero la utilización del lenguaje HTML tiene muchas ventajas, incluyen

texto con efectos, imágenes, enlaces con otras páginas y direcciones, aplicaciones

multimedia.

El desarrollo de documentos en HTML está cada vez más en auge debido a la

gran difusión de internet, principal medio por el que se difunden este tipo de

documentos mediante el acceso a los llamados webs o servidores de HTML.

Cuando se creó este lenguaje se pensó en que fuera portable al 100%, es decir,

que pudiera ser llevado o visualizado independientemente del sistema operativo

que gobernara el ordenador.

El desarrollo de documentos en HTML está cada vez más en auge debido a la

gran difusión de internet, principal medio por el que se difunden este tipo de

documentos mediante el acceso a los llamados webs o servidores de HTML.

Mediante este tipo de servicio se pueden elaborar aplicaciones de todo tipo, desde

bases de datos a aplicaciones multimedia; en fin, un inmenso mundo de

posibilidades a nuestro alcance.

Para escribir un documento o página en HTML, se pueden utilizar programas

creados para ello, pero debe quedar bien claro que nunca podemos conseguir

hacer más de lo que podemos obtener a mano con un simple editor de textos y

nuestra imaginación.

En general los comandos de HTML se introducen con un <menor que y se

clausuran con un mayor que>, es decir, utilizan lo que se conoce como container,

algo que comienza y termina, como es < y >.


12

Un ejemplo de comandos seria <HTML> (entre estos dos comandos iría el

documento) </HTML>, esto nos indica el comienzo y el fin respectivamente de una

página web escrita en HTML.

Podemos observar que casi todos los comandos tienen esta está estructura de

comienzo y fin, y sólo existen unos pocos que no la tienen, como <BR>, que se

utiliza para los puntos y aparte.

Elementos.

Todo documento HTML debe comenzar declarándose a sí mismo, poniendo

<HTML> al comienzo del documento y al final </HTML>. Con esto indicamos al

lector de páginas que todo lo que se encuentra entre ellos está escrito en HTML.

Lo siguiente es poner lo que se conoce como la cabecera <HEAD></HEAD> justo

después de la declaración de comienzo de documento HTML.

Destacaremos uno que recibe el nombre de título <TITLE> (aquí pondremos el

título de nuestra página) </TITLE>, este no se visualiza en lo que es la página,

sino en alguna sección especial del lector de la página.

Finalmente, tras cerrar la cabecera </HEAD>, aparece lo que se llama el cuerpo,

<BODY></BODY>. Esto indica el comienzo y el final de la parte del documento a

visualizar, que generalmente es lo que visualizan muchos lectores de páginas.

Ejemplo de cómo debe de quedar el código para la página web.


13

Tablas.

Como lo sabemos, una tabla está compuesta por filas y columnas. En el mundo

del HTML utilizaremos estas elementos tanto para su tradicional uso de presentar

información como para conseguir efectos en nuestros documentos.

Para comenzar veamos la estructura básica de una tabla

<TABLE>

<TR><TD>celda 1.1</TD></TD>celda 1.2</TD></TR>

<TR><TD>celda 2.1</TD></TD>celda 2.2</TD></TR>

</TABLE>

Fácilmente se observa que para realizar una tabla hemos de utilizar el comando

<TABLE> para indicar su comienzo y </TABLE> para indicar su fin.

Dentro de lo que la estructura de la tabla se puede observar el uso de dos

comandos:

<TR></TR> se utiliza para indicar el comienzo y fin de una fila respectivamente.

<TD> o <TH> y </TD> o </TH> ambas se utilizan para indicar le comienzo y el fin

de una columna respectivamente, obsérvese que aparecen dentro de una fila. Las

diferencias entre una opción y otra son:

<TD></TD> son conocidas como celdas de datos y son celdas estándar. Han de

aparecer siempre entre <TR> y </TR>, es decir, en filas. Dentro de cada celda se

puede introducir cualquier elemento de HTML, tanto texto como imágenes.

<TH></TH> son conocidas como celdas cabecera y son idénticas a las anteriores

en todos los aspectos, la diferencia radica en que utilizan fuentes en negrita y que

tienen la opción ALING=center por defecto.

Formulario.

Esta tipo de elementos nos permiten realizar, como bien hemos dicho, formularios

en nuestras páginas, con opciones, casilleros…, así como obtener la información

de ellos.

14

La forma de colocar un formulario es poniendo <FORM> para indicar el inicio, y

</FORM> para indicar el final del formulario.

La forma de realizar un formulario es la siguiente:



<FORM ACTION=”http://host/cgi-bin/nombre del programa CGI>

Texto. Es opcional

Elemento del formulario

</FORM>



El comando FORM lleva como argumento ACTION, METHOD, ISINDEX y

ENCTYPE,

ACTION: mediante éste indicamos que programa del ordenador donde este el

servidor será el encargado de manipular la información del formulario, bien

almacenándola en una base de datos o generando una nueva página, o bien lo

que desee el que realice el programa.

METHOD: mediante este indicamos la forma de enviar información. Existen dos

formas: GET y POST. La más común es la primera.

GET: mediante este método la información se envía en forma de variable

de entorno. Esta variable recibe el nombre de QUERY_STRING para el

proceso CGI.

POST: mediante este método la información se envía en dos variables:

CONTENT_LENGTH (longitud de los datos enviados por la entrada

estándar) y CONTENT_TYPE (datos).

ISINDEX: se utiliza cuando hay más de un formulario en una página. Su

misión es separarlos. Requiere comienzo y final.

ENCTYPE: se utiliza para indicar la forma empleada para codificar los

contenidos del formulario.


15

Hojas de Estilo

Un estilo es una modificación de aspecto grafico realizado sobre un elemento.

Estas modificaciones se pueden hacer de forma particular, directamente sobre

el elemento, de forma global en la página o finalmente es un documento

externo a la página.

Definición sobre el elemento

Mediante el atributo style se pueden alterar aspectos gráficos del elemento

sobre el que se atribuye. La diferencia es que no se requiere definición de

comienzo del documento, sino que se utiliza in situ. Esto es útil cuando se

gastan unos patrones u hojas de estilo con unas normas y se desea alterar

alguna particularidad en un punto determinado.


16

Bibliografía

Libro:

Navegador en Internet HTML 4 Diseño y creación de páginas Web 2.da edición.

Autor Ramón Soria Momparler

Página de internet:

http://es.wikipedia.org/wiki/Hypertext_Transfer_Protocol

http://es.wikipedia.org/wiki/URL_sem%C3%A1nticas

Introduccion a la tecnologia web

Documents

Transcript of Introduccion a la tecnologia web