Introduccion a la tecnologia web

INTRODUCCION A LA
TECNOLOGIA WEB
UNIDAD #1

2011

13 de septiembre de 2011 INTRODUCCION A LA TECNOLOGIA WEB

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

1


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

La Unión Soviética lanza el Sputnik, el primer satélite artificial. En
1957 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.

Se ponen en servicio los nodos a medida que BBN construye cada IMP
1969 [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.

2


Ray Tomlinson modifica el programa de correo electrónico para
1972 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.

El servidor de nombres desarrollado en la Universidad de Wisconsin ya
no requiere que el usuario conozca la ruta exacta para acceder a otros
1983 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)
Se crea la NSFNET (Con una velocidad principal de 56Kbps).
1986 • 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.

Worms (gusanos) de una nueva clase aparecen en la Red - los Worms
1993 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.
El Controlador de tiempo de los EE. UU. (USNO) y otros pocos
2000 servicios de tiempo de todo el mundo reportan el nuevo año como
19100 el primero de Enero.

3


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:

4


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.

5


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

6


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.

7


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

8


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.

9


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.

10


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

11


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.

12


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.

13

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.

14


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.

15


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

16

Introduccion a la tecnologia web

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Introduccion a la tecnologia web

Similar a Introduccion a la tecnologia web (20)

Introduccion a la tecnologia web