HISTORIA DE INTERNET

La historia de Internet comienza cuando la “BBN” de Cambridge intenta verificar experimentalmente la posibilidad de conectar a varios ordenadores, por aquellos tiempos enormes máquinas mecánicas o electromecánicas, a través de líneas de comunicación normales, con una tecnología de comunicación por paquetes. Por aquel entonces, la famosa marca IBM no quiere saber nada del proyecto. Todo este despliegue lo pagaba ARPA (Departamento de Defensa estadounidense), aunque la idea fue de Bob Taylor, director informático de ARPA.

En 1966 se crea la primera red, compuesta por cuatro nodos, gracias a Charlie Herzfeld, el seleccionado por Bob Taylor para llevar a cabo el proyecto. Se consigue una tecnología “Packet Switching” (comunicación por paquetes). Esta tecnología significaba la mayor velocidad de transmisión, pues la anterior era una solo línea donde se enviaban los paquetes, y hasta que este no llegaba no se podía enviar otro, ni en la misma dirección ni en otra. Esto cambia con la nueva tecnología, que para poderlo entender mejor nos imaginaremos que es una carretera de cuatro carriles y dos sentidos, donde el más rápido adelanta al más lento y se puede obtener una comunicación en los sentidos a la vez. Esta tecnología es la que utilizamos actualmente, la información se empaqueta y se envía con unas indicaciones.

En 1969 se implantan cuatro IMP, que eran los encargados de transformar las señales provenientes del ordenador en señales telefónicas. Estos cuatro nodos se colocan en diferentes universidades estadounidenses, que serán la base de todo. Está pequeña red se conoce como ARPAnet. La auténtica aplicación de ARPAnet, en su creación, fue la necesidad de comunicación sin interrupciones ni fallos, durante la Guerra Fría, entre la defensa americana. Aunque el público era conectar diversos centros universitarios para compartir recursos. A partir de aquí se inventó el correo electrónico.

Dos años después, el sucesor de Bob Taylor, Larry Roberts contabilizó el número de nodos y había aumentado a 20.

Gracias a la mejora de los ordenadores, es decir a hacerlos más asequibles y pequeños aumenta de una manera endiablada. Debido a este crecimiento se tiene que arreglar la tecnología de comunicación o protocolo, inventando el protocolo “TCP/IP”. Esto supone la creación de mini redes, que al usar el mismo protocolo que la red es mucho más fácil de interaccionar.

En 1990 se cambia de red, aparece NSFNET, que tras varios años luchando por el poder lo logra. De esta forma se hace de uso público o civil la red.

Esto último es el detonante para que la “red de redes” se implante por fin.

Actualmente está implantado en casi toda América, en toda Europa, Rusia. El único sitio, que parece resistirse, es África, y tampoco toda, pues hay sitios donde ya está instalado. Y esto no será para mucho, pues la “red de redes” aumenta considerablemente, y más ahora que gracias a las nuevas tecnologías y a los avances técnicos de la comunicación se puede tener acceso a ella sin tener que conectar ningún cable, a través de la telefonía móvil y las tarjetas “PCMCIA”, y todo gracias a los grandes avances tecnológicos a los que estamos siendo sometidos actualmente, y sobre todo, a la nanotecnología, que es lo que hace posible que un chip como la cabeza de un alfiler pueda ser tan potente.

CONOCIMIENTOS BASICOS SOBRE EL LENGUJE HTML

- Su léxico propio:

Como la mayoría de la gente sabrá, todo lenguaje tiene un léxico propio. Pues los lenguajes de programación no son menos. El lenguaje html tiene su propio léxico, aunque cambia o varía mucho de los léxicos a los que estamos acostumbrados.

Por ejemplo este lenguaje, el de html, se caracteriza por la utilización de etiquetas, con las cuales da las ordenes al ordenador o programa para que haga lo que queremos.

Cada etiqueta se puede dividir en varias partes, las más importantes son:

La apertura, con la cual ponemos donde empieza la orden. Siempre las etiquetas u ordenes han de ir entre los signos < >, porqué si no fuera así el programa no sabría cuando le damos una orden y cuando queremos que escriba algo. Hay etiquetas pareadas, es decir con su cierre, con la cual indican donde acaba esa orden. Por ejemplo: la orden <ALIGN=RIGHT> lo que hace es alinearnos el texto que le sigue a la derecha. </ALIGN> Siendo esta otra etiqueta su cierre. La etiqueta de cierre y comienzo se caracterizan porque la de cierre siempre lleva el símbolo / delante de la palabra u orden, indicando que es un cierre.

Otra característica es que tiene un orden concreto, por lo que no se pueden mezclar las etiquetas de apertura y de cierre, es decir si colocamos una etiqueta como <h1> y seguido abrimos otra con <ALIGN=RIGHT> no podemos primero cerrar la primer, es decir hacer esto sería incorrecto </h1> </ALIGN>, porqué no se sigue el orden, en cambio lo correcto sería </ALIGN> <h1>. Siempre las etiquetas se han de cerrar de la más cercana a la más lejana.

Otra característica podría ser que hay etiquetas como <P>, que nos indica el cambio de párrafo que no tienen cierre.

Da lo mismo poner las etiquetas en mayúsculas o minúsculas las etiquetas, pues el programa lo que hace es convertirlas en código ASCII.

- Partes e identificación de un documento html:

Para que todos los programas que ejecutan o reproducen documentos de tipo html se determinado que todos los documentos escritos con lenguaje html se empiecen con la etiqueta <HTML> y se finalicen con su cierre </HTML> a fin de evitar errores. Las siguientes partes de un documento de este tipo son la cabecera y el cuerpo. El primero se especifica con las etiquetas <HEAD> y su cierre. Dentro de estas se coloca información referente al propio documento como podría ser título del mismo, el cual se indica con las etiquetas <TITLE> y su cierre. El título se ha de poner con lenguaje plano, sin utilizar el html pues solo sale en la barra de títulos y los programas encargados de abrir estos documentos ignoran todas las especificaciones hechas al título. Se recomienda poner título a todas las páginas, ya que así se puede hacer una referencia mucho más rápido a las mismas.

La parte correspondiente al cuerpo se indica con las etiquetas <BODY> y su cierre. Dentro de estas etiquetas es donde se ubicarán todas las demás, pues es donde realmente se confecciona el documento.

- Lenguaje básico:

Para empezar, vamos a hablar de los encabezados de secciones. Estos se encuentran numerados del 1 al 6 de forma decreciente, siendo el número 1 el de mayor tamaño. Se utilizan para resaltar o enfatizar un título y así poder distinguir mejor las diferentes partes de la página. Las etiquetas a utilizar son <Hn> y <Hn> siendo n el numero del 1 a 6.

Los formatos de caracteres también se pueden especificar en el documento. Todo seguido pondré una pequeña tabla donde se aprecia las etiquetas y sus funciones, en cuanto al formato de los caracteres.

NOMBRE/TIPO	ETIQUETA
Negrita	<B>....</B>
Cursiva	<I>...</I>
Teletipo	<TT>...</TT>
Tachado	<STRIKE>...</STRIKE>

También existen caracteres especiales, los cuales los tenemos que definir para su correcta colocación o visualización en cualquier sitio, país o programa. Estos caracteres especiales pueden ser los propios de una lengua:

SECUENCIA	CARÁCTER
á	á
é	é
í	í
ó	ó
ú	ú
Á	Á
É	É
Í	Í
Ó	Ó
Ú	Ú
ñ	ñ
Ñ	Ñ

Estas secuencias se han de poner tal como están, en el lugar que queremos que aparezca el carácter seguido de las demás letras, si fuera necesario. Por ejemplo pondremos: “Aqu&iacute;” para que aparezca escrito “Aquí”, sin tener que utilizar las comillas.

Para que nos salga una línea horizontal divisoria en la página tenemos que colocar la etiqueta <HR> que no tiene cierre. Si queremos también podemos variar su alineación, su grosor y su tamaño, pero eso ya se tendría que explicar mucho más detenidamente.

Para poder poner comentarios dentro del documento y que no afecten para nada al mismo se han de colocar con la siguiente estructura: <!- .... ->, siendo los puntos suspensivos el comentario que queremos hacer. No tiene cierre pues no hace nada en el documento.

Una vez se sabe todo esto lo único que nos queda es hacer la página interactiva. Eso se consigue introduciendo “links” que es como se denominan los enlaces con otras páginas de esta misma o de otros sitios. Poner estos enlaces es fácil. Es una orden básica:

<A HREF=” nombre donde debe ir” > lo que utilizará como enlace </A>

En el lugar del nombre donde debe ir tenemos que introducir el nombre de la página, o lugar donde se encuentra esa página, archivo, etc. Si se hace en Internet se ha de introducir toda la dirección completa. Si se usa intranet es suficiente con poner el directorio donde se encuentra.

Y entre los dos comandos, el de inicio y cierre de la orden, se ha de poner lo que queremos que aparezca como enlace, normalmente es una palabra o conjunto de estas, no obstante también se puede hacer un enlace con una imagen. Para conseguir esto lo único que debemos hacer es poner la siguiente orden entre los comandos del enlace:

<IMG SRC=nombre>

Hay que indicar bien donde se encuentra esta imagen, igual que hemos hecho para dirigir el enlace, y a continuación poner el nombre de la imagen junto a su extensión. Por ejemplo si tenemos la imagen bullet.jpg escribiremos

<IMG SRC=C:\bullet.jpg> si se encontrara en la unidad C

También, al hacer el enlace con la imagen podemos hacer que al poner el ratón sobre la imagen nos salga algo escrito. Esto se consigue añadiendo la palabra ALT justo antes de poner el signo de cierre de la orden. Por ejemplo:

<IMG SRC= C:\bullet.jpg ALT=”hola”>

Si ponemos esta orden al poner el ratón encima de la imagen nos saldrá escrito “hola” junto al puntero del ratón.

Por fin, la orden completa sería:

<HREF=”C:\JUEGOS”> <IMG SRC=c:\bullet.jpg ALT=”JUEGOS”>

• Colores de texto y fondos de página

Otra etiqueta muy utilizada también es la de color de texto, de fondo de la página, y colocar imágenes como fondo de páginas.

Esto se consigue con dos etiquetas o comandos muy sencillos. Pero primero hay que explicar como funciona lo de los colores en este lenguaje. Los colores y tonalidades se determinan por la mezcla de tres básicos, ROJO, VERDE y AZUL. Van en ese orden y sus valores van de cero a F, siendo el cero el valor más bajo. La forma de colocarlos es la siguiente:

<BGCOLOR=”#xxyyzz”>

Siendo las X el color rojo, las Y el color verde y las Z el azul. Esta es la etiqueta que se pone para decir el color de fondo de la página. Esta etiqueta se ha de colocar después de la de <BODY>. Para colocar una imagen como fondo de nuestra página, se utilizaria una muy parecida.

<BODY BACKGROUND=”nombre”>

Donde pone nombre tendríamos que colocar el nombre completo de la imagen con su extensión.

Debido a esto cambios puede que las letras no se vean o sean ilegibles, para eso debemos cambiar el color del texto. Lo podemos hacer de forma general para toda la página, para lo cual utilizariamos las siguiente etiqueta, colocandola dentro de la anterior:

<TEXT=”#xxyyzz” LINK=”#xxyyzz” VLINK=”#xxyyzz”>

Con esta etiqueta cambiamos el color del textoTEXT, de los enlacesLINK y de los enlaces ya visitadosVLINK.

Si en lugar de querer cambiar el color del texto o lo que sea con carácter general lo queremos hacer de forma aislada utilizaremos esta otra etiqueta:

<FONT COLOR=”#xxyyzz”>

Se debe colocar delante de la palabra o letra a cambiar de color, y una vez terminada se ha de colocar el cierre </FONT>, de no ser así nos cambiará el color de toda la página a partir de aquel sitio.

• Tamaño y forma de las fuentes

El tamaño de las fuentes también lo podemos cambiar a nuestra voluntad, podiendo hacer como en el caso anterior con el cambio de color, generalizando o concretando. Lo más habitual es que se determine un tamaño base para toda la página, y a partir de ahí hacer los cambios convenientes. Para realizar esta operación debemos colocar la siguiente etiqueta, a continuación de la de <BODY> y la de la imagen o color de fondo.

<BASEFONT SIZE=x>

Siendo X el valor que le queremos poner a la letra. Una vez puesto esto se puede variar el tamaño de la fuente donde queremas, teniendo como referencia esta. Por ejemplo si queremos que en una parte de la página la letra se más grande colocaremos la siguiente etiqueta justo desde donde queremos que sea aumentada la letra, colocando el cierre donde querramos que finalice dicha variación.

<FONT SIZE=+3> ........... </FONT>

De esta forma la fuente aumentara tres puestos desde donde la hubieramos puesto como referencia, también se puede disminuir, colocando un signo negativo delante del número.

La forma, o formato de las fuentes también es fácil de variar. Funciona de la misma forma que el cambio de tamaño. Con diferente etiqueta, puesto que para que sea con carácter general se pone:

<FONT FACE=” nombre del tipo de letra” >

Y si queremos que solo rija en una zona determinada de nuestra página se ha de colocar entre la zona que queremos cambiar de tipo de letra, colocando el cierre después de lo último que queremos con ese tipo de letra.

• Tablas, listas y definiciones

Otra de las aplicaciones más utilizadas para aclarar mucho el contenido de una página web es la colocación de tablas, listas o listas de definiciones. Son un bien preciado pues nos ayudan a organizar muy bien la página, e incluso nos ayudan a aclarar muhcas cosas.

Las tablas se utilizan, sobre todo, cuando tenemos diferentes temas, normalmente representados por enlaces, a los cuales podemos acceder o hacemos una referencia. Van muy bien pues se ve toda la información o todos los apartados de los que dispone en un lugar reducido. Y una vez vistos escogemos el que más nos guste o convenga. Para hacer una tabla sencilla necesitamos introducir una etiqueta muy simple:

<TABLE> y su cierre </TABLE>

Podemos hacer que la tabla aparezca con lineas separadoras o no, dependiendo de si ponemos BORDER o no dentro de la anterior etiqueta. Con BORDER nos saldrá dividida por lineas.

Dentro de esto tenemos que definir entre columnas y filas. Las filas son las divisiones horizontales que existen. Las columnas son las divisiones verticales de las que se compone cada división horizontal, es decir cada fila.

Para hacer una tabla primero tenemos que nombrar la fila con la etiqueta <TR> y </TR>, después de la etiqueta de <TABLE ... >. Y entre estas dos etiquetas anteriores el número de columnas que queremos que tenga nuestra tabla, definidas por las etiquetas <TD> y </TD>. De tal forma que si quisieramos crear una tabla con lineas divisorias con tres filas y dos columnas introduciriamos lo siguiente:

<TABLE BORDER>

<TR>

<TD> fila 1, columna 1 </TD>

<TD> fila 1, columna 2 </TD>

</TR>

<TR>

<TD> fila 2, columna 1 </TD>

<TD> fila 2, columna 2 </TD>

</TR>

<TR>

<TD> fila 3, columna 1 </TD>

<TD> fila 3, columna 2 </TD>

</TR>

</TABLE>

Con eso obtendriamos dicha tabla. En cada celda nos saldría escrito lo que hay entre las etiquetas de columna.

Podemos alinear el contenido de las celdas según querramos que esten a la izquierda, centro o derecha, simplemente colocando ALIGN=CENTER centrado, ALIGN=RIGHT derecha, ALIGN=LEFT izquierda. Se tiene que colocar dentro de la etiqueta de columna, es decir de esta forma: <TD ALIGN=CENTER>, se veria el contenido de la celda centrado en el medio de la misma.

El otro recurso, también muy utilizado, seria la utilización de listas. Las hay de diferentes tipos. Hay listas numeradas, no numeradas y de definición.

Las listas no numeradas se delimitan por las etiquetas <UL> y </UL>, teniendo que colocar <LI> para escribir cada elemento que queremos que aparezca. Este último no necesita cierre, por lo que unicamente se coloca delante de cada elemento.

Las listas numeradas son muy parecidas. Las etiquetas delimitadoras son <OL> y su cierre </OL>. También se utiliza la etiqueta <LI> para introducir cada elemento.

Las listas de definiciones son especiales. Las etiquetas que delimitan donde empieza y donde acaba la lista de definicion son <DL> y su cierre </DL>. Seguidamente se tiene que colocar <DT> y su cierre </DT> para poner el termino a definir. Seguidamente, para poner la definición, se pone la etiqueta <DD> y cierre. La definición se ha de colocar entre las etiquetas de definición, al igual que todo lo demás.

Las listas pueden estar unas dentro de otras, siempre y cuando se tengan en cuenta la ordenación de las etiquetas.

• Alineamientos y dimensionamientos de los elementos

Para poder alinear las diferentes partes y componentes de la página web usamos los comandos ya dichos anteriormente. Estos comandos se pueden utilizar a lo largo de toda la página, y casi siempre funcionan, colocando lo que queramos a la derecha, izquierda o centro de la página, celda o lugar donde se encuentre.

No solamente podemos alinear palabras o grupos de palabras, pues también podemos alinear imágenes, barras de división, y demás elementos.

También hay muchas formas de alinear, aunque lógicas e intuitivas. Una de esas formas sería colocar, dentro de otra etiqueta el comando ALIGN= .... ; colocando en el lugar de los puntos suspensivos el lugar donde se ha de alinear (centro, derecha, izquierda). Otra forma, para alinear imágenes, por ejemplo, seria colocar el comando CENTER, RIGHT o LEFT, como si de una etiqueta se tratase. De esta forma ordenamos, a lo que se encuentre entre estas etiquetas, a que se coloque en el lugar definido. También podemos alinear el texto alrededor de una imagen. Lo único que tenemos que hacer es colocar el comando ALIGN= X dentro de la etiqueta de la imagen. En el lugar de X tenemos que escribir donde queremos que aparezca el texto, en relación a la imagen, pudiendo escoger entre BOTTOMalineado abajo, TOPalineado arriba, MIDDLEalineado en medio.

También podemos dimensionar los diferentes tipos de elementos de la página, como pueden ser las barras separadoras horizontales. Estas barras las podemos acortar, alargar, ensanchar, estrechar, etc. Pudiendo alinear al mismo tiempo. Para cambiar su anchura tenemos que poner el comando WIDTH= n, substituyendo n por un valor en tanto por ciento, lo que hace que ocupe el % de su anchura, o poniendo un número de pixels a utilizar.

<HR WIDTH=75% ALIGN=CENTER>

También podemos cambiar su espesor, haciendo que sea más o menos espesa. Se ha de añadir el comando SIZE= n, substituyendo n por el valor que queremos que tenga el espesor. Y por último podemos hacer que en vez de verse embutida sobre el fondo se vea una linea sólida, el comando es NOSHADE. La etiqueta, completa, con todo lo explicado anteriormente seria:

<HR WIDTH=50% SIZE=5 ALIGN=CENTER NOSHADE>

Con esta etiqueta conseguimos que nos aparezca una barra separadora horizontal que mida la mitad del total de la pantalla, con un espesor de 5 pixels, puesta sobre la imagen o fondo, es decir que no esté embutida y centrada en el medio de la pantalla.

• Colocación en la red de una página web

Otro de los temas importantes de lo que tenia que hablar era la colocación de la página web en una red o en la red de redes, Internet.

Aunque parezca muy difícil es realmente sencillo. Lo más usual es colgarla en un servidor gratuito o en nuestro espacio web, dado por nuestro servidor de conexión.

Para empezar explicaré lo que tenemos que hacer para colgar, que es como normalmente se conoce a la acción de colocar las páginas en la red, en una red local.

Para empezar necesitamos crear un directorio virtual, en el servidor de la red. Una vez creado lo único que tenemos que hacer es copiar todos los archivos, incluyendo las imágenes y las páginas. Se puede hacer de diferentes formas. Si podemos ir hasta el servidor lo único que tenemos que hacer es marcar todos los archivos del disquete en aquel directorio creado. Si no tenemos la posibilidad de ir hasta el servidor tenemos que pedirle al gestor del servidor que nos cree un ftp, es decir una forma de mandar todos los archivos que necesita nuestra página para ser visualiza al directorio a través de la red. Una vez hecho esto, el servidor nos proporcionará una dirección a través de la cual podremos acceder a la página. El gestor del servidor se encarga de colocar la página principal, normalmente llamada index.html como la predeterminada al entrar.

Si lo que hacemos es colgarla en un servidor de Internet, directamente tenemos que enviar todos los archivos al servidor, ya bien sea a través de ftp o bien a través de un correo electrónico. Se puede enviar comprimido, para así que ocupe menos espacio y sea más rápido y fácil de enviar. Una vez lo hayan recibo harían lo mismo que si fuera un servidor de red local, lo único que con todo el mundo, ya que ha Internet puede tener acceso todo el mundo.

BIBLIOGRAFIA

• LENGUAJES HTML, JAVA Y CGI. El diseño de páginas web para Internet a su alcance.

Ed. Abeto 1996

• APUNTES DE CURSILLOS DE CREACION DE PAGINAS WEB

Año 1997

• Fondos de páginas web:

• http://www.fut.es/~sblanco/

• http://www.xtec.es/formacio/curstele/d72/index.htm

• http://www.metabusca.com

• http://www.yahoo.es

• Informàtica al Batxillerat

Ed. Casals 1999

INDICE

HISTORIA DE INTERNET