introducción a internet.jlbv.com/html2002.pdf · grande, tal como edificios, una empresa, en...

Diseño de Páginas Web Juan Luis Bueno Vera

[email protected] Pág. 1 Mayo 2002

Introducción a Internet.

· Introducción histórica a Internet. Aspectos generales. El sistema de nombres

de dominio (DNS). Servidores DNS. Servicios y aplicaciones más frecuentes. Charlas

interactivas y grupos de noticias o newsgroup. Aplicaciones IRC para charlas

interactivas. Explorar Internet a través de Menús Ghoper. Acceso remoto mediante

Telnet. Configuración Windows 95/98 para Internet.



Julio César, antiguo emperador romano, demostró la importancia de las comunicaciones creando un servicio de mensajeros que

comunicaban sus tropas. Para evitar que los mensajes enviados fueran leídos, y para distinguir los mensajes falsos de algún enemigo, éstos

empezaron a codificarse.

La 2ª Guerra Mundial fue ganada, según la opinión de muchos, por el fallo alemán de invadir Rusia, pero para otros muchos, se debió a

poder descifrar los mensajes que enviaba el enemigo.

Un poco más tarde, durante la guerra fría, EE.UU. comenzó a prepararse para lo que ellos estimaban como una futura y segura guerra.

Entre otras cosas, se creó una red que más tarde se convirtió en lo que actualmente conocemos por Internet. Esta red se encargaba de tener

comunicados todos los cuarteles militares, de tal forma que en el caso de que se cortase una información en cualquier momento, ésta pudiera

llegar por un camino diferente. También se dotó a esta comunicación de una división en paquetes, de tal forma que cada uno de los paquetes

pudiera ir por una ruta diferente, haciendo así más difícil la lectura de todos ellos.

Poco a poco, esta red empezó a tener cada vez más aplicaciones, además de las meramente militares, y se fue introduciendo en las

universidades de forma que todos los científicos pudieran trabajar con la misma información al mismo tiempo, consiguiendo que los logros de

una persona, pudieran ser leídos por los demás científicos con una velocidad hasta entonces impensable.

Poco a poco y cada vez más, Internet se ha ido introduciendo en más campos, no quedándose sólo en el ámbito científico, sino que

cada vez más, las utilidades de Internet están enfocadas al tema comercial. Internet mueve mucho dinero, y cada vez mueve más. Por otro

lado, muchos de los últimos triunfos van asociados directa o indirectamente con Internet, con lo cual, todo ello es indicador de que cada vez se

necesitan a más personas que conozcan cómo crear páginas de Internet, y facilitar así, la presencia de las empresas españolas en la red.



El verdadero despliegue de Internet se ha producido desde la creación del W3 Consortium. Esta empresa ha sido la que ha configurado

la actual forma de reconocimiento de los ordenadores con nombres del estilo: www nombre y .com, .net, .es, etc.

La programación de las páginas webs permite que cualquier programa que antes debía utilizarse de forma paralela a la navegación por

Internet, se fusione en las nuevas páginas que actualmente se están utilizando.

Aunque las estadísticas de navegantes de Internet o internautas de Castilla la Mancha, sea en el último año 2001 del 11% de la

población, hay que destacar, que este número va creciendo rápidamente, pese a que nuestra comunidad es la menos evolucionada de España

en el ámbito de Internet, siguiendo a Extremadura con un 15%. Como es de esperar, Madrid y Barcelona cuentan con una población asidua.



Aspectos generales de Internet

Internet está considerada como una red de redes.

Una red es un conjunto ordenadores,

conectados entre sí, que pueden comunicarse

compartiendo datos y recursos. Por ejemplo, a través

de una red se pueden ejecutar procesos en un

ordenador o acceder a sus ficheros, enviar mensajes,

compartir programas, bases de datos o sistema de

impresión, todo ello sin importar la localización física

de los distintos dispositivos.

Los ordenadores suelen estar conectados

entre sí por cables. Pero si la red abarca una región

extensa, las conexiones pueden realizarse a través de

líneas telefónicas, microondas, líneas de fibra óptica e

incluso satélites.



Las redes se suelen clasificar en redes de área local y redes de área amplia. Las redes de área local abarcan una zona no demasiado

grande, tal como edificios, una empresa, en campus universitarios. Las redes de área amplia comprenden regiones más extensas que

incluso pueden abarcar varios países. Por otra parte un conjunto de redes puede conectarse entre sí formando una red mayor.

Internet es una red que permite la comunicación entre redes diferentes en cuanto a tamaño, situación y tipos de equipos conectados,

de ahí el nombre de red de redes.

Anfitriones (HOST)

En Internet un anfitrión es un ordenador que posee

páginas Web que son accesibles a usuarios de la red.

Ordenadores remotos y locales.

El término de ordenador local se refiere al ordenador

en el que el usuario comienza su sesión de trabajo. Es aquel

ordenador en el que el usuario mira la pantalla, y con el que

accede a Internet.



El ordenador remoto será entonces el ordenador al cual se accede desde el ordenador local.

El protocolo TCP/IP. Paquetes y direcciones.

Cuando se transfiere información de un ordenador a otro, ésta no es transmitida de una sola vez, sino que se divide en pequeños

paquetes. De esta forma los recursos que ofrecen las líneas telefónicas, no son monopolizados por un sólo usuario durante un intervalo de

tiempo excesivo. Por los cables de teléfono viajan paquetes de información provenientes de diferentes ordenadores y con destinos diferentes.

Además de compartir recursos de forma eficiente, existen otras razones como la conmutación de paquetes. Cada paquete de datos contiene

una porción de la información real que se quiere transmitir, otros datos necesarios para el control de la transmisión y las direcciones IP de los

ordenadores de destino y de partida.

El código IP permite que la información siga en ruta desde el

ordenador local al ordenador remoto, los cuales utilizan el mismo código, y

en este código se permiten todas las operaciones relacionadas con el

internamiento de los paquetes de información.

El TCP, se encarga de dividir la información en paquetes de tamaño

adecuado, y numerados los paquetes para que lleguen a su destino en el

mismo orden con que el que se enviaron de esta manera, TCP se encarga

de ensamblarlos al final.



El Sistema de Nombres de Dominio (DNS).

El sistema de nombres por dominio constituye

una forma idónea de nombrar a los ordenadores. Sin

embargo, las máquinas necesitan el número IP para

establecer contacto entre sí. Para resolver este

problema existen ordenadores llamados servidores de

nombres por dominio, cuya misión es traducir los

nombres de dominio a sus correspondientes números

IP.

El ordenador local envía un mensaje al servidor

DNS más cercano que está definido en su

configuración. En este mensaje se incluye el nombre

de dominio que se desea reproducir y se solicita el

número IP correspondiente. El servidor de nombres

puede tener en sus tablas la dirección solicitada,

devolviendo inmediatamente las solicitudes. Si el servidor no dispone de este número solicitado, establece una conexión y realiza la consulta a

otro servidor de nombres. Este proceso de consultas entre servidores de nombres continúa hasta que se llega al servidor que tiene, en sus

tablas, el número buscado. Si el nombre del dominio del ordenador remoto es incorrecto el servidor de nombres no podrá determinar el número

IP y en nuestro sistema recibiríamos un mensaje de error.



Servicios y aplicaciones más frecuentes

World Wide Web o WWW.

Se desarrolló en el laboratorio europeo de física de partículas,

en Ginebra en 1989, apareciendo el primer servidor web a comienzos

de 1991. El objetivo perseguido entonces era que los físicos

europeos, cuyos grupos de trabajo estaban dispersos, pudiesen

intercambiar conocimientos y datos de modo eficiente.

El sistema se extendió por todo el mundo, abarcando

instituciones diversas y permitiendo el acceso a todo tipo de

información. Actualmente la responsabilidad principal corresponde al

consorcio de industrias WWW o W3, encabezado por el laboratorio

de ciencias de la computación en el Instituto Tecnológico de

Massachusetts en Estados Unidos y el Instituto Nacional de

Investigación en Informática y en Automática de Francia.

Uno de los principales factores que contribuyó a su rápida

aceptación, fue la aparición en septiembre de 1993 del primer

navegador gráfico, llamado Mosaic. Actualmente son el Explorer, Netscape y Opera.



El correo electrónico o E-mail.

El correo electrónico es una de las herramientas más utilizadas desde los comienzos de Internet. De hecho, un gran número de

usuarios que disponen de una conexión a Internet sólo emplea el correo electrónico.

Mediante el correo electrónico se pueden enviar y recibir cartas, mensajes, ficheros, imágenes, sonido y películas entre personas que

pertenezcan a Internet.

El correo electrónico se diferencia del correo normal en la rapidez, economía, fiabilidad y comodidad, pues el mensaje llega al

momento, y en caso de no ser así, se informa al remitente de su fallo, además de no tener que enviarlo desde fuera de casa.

Por último, hay que indicar que una característica fundamental del correo electrónico es que los ordenadores emisores y receptores no

tienen por qué estar conectados al mismo tiempo.

Los grupos de noticias.

Un grupo de noticias está formado por un conjunto de personas interesadas en discutir sobre diferentes temas con otros usuarios de la

red. Los temas son muy diversos, y la distancia que separa a todos los usuarios que pertenecen al grupo puede ser tan grande como lo es el

mundo.

El grupo de noticias engloba no sólo a los usuarios que lo utilizan, sino también a todos los documentos que estas personas generan, y

en los que se representan sus ideas más o menos acordes con sus pensamientos. Estos documentos son lo que se denominan como artículo.



Dada la gran cantidad de artículos que cada día envían los usuarios y las limitaciones de espacio en los ordenadores, éstos duran poco tiempo

en los servidores.

En un grupo de debate, cualquier participante puede comentar algún aspecto de la actualidad o realizar una consulta y, habrá otros

muchos dispuestos a responder, planteando a su vez opiniones alternativas o nuevas cuestiones.

En los grupos de debate no sólo se pueden enviar y obtener artículos escritos, también se pueden enviar programas e imágenes.

Transferencia de ficheros: FTP

FTP son las iniciales de Protocolo de Transmisión de Ficheros y

hace posible que un usuario copie en un ordenador los ficheros que están

almacenados en otro. En un principio era utilizado por profesionales que

disponían de varios ordenadores para poder copiar de forma sencilla y

rápida de un ordenador a otro aunque la distancia entre ellos fuera larga.

Actualmente comienza a utilizarse para compartir recursos de forma más

global apareciendo el usuario anónimo que tiene acceso de lectura a una

zona restringida desde la cual puede bajarse toda la información que le

interese, o incluso para que el usuario pueda intercambiar ficheros con su servidor de páginas Web.



Búsqueda de ficheros en servidores FTP: Archie.

Es un sistema de información diseñado para localización de ficheros en Internet. Su creación es anterior a la World Wide Web y era uno

de los medios más eficaces para encontrar ficheros. Este sistema realiza búsquedas en una base de datos que contiene información

actualizada de los ficheros almacenados en la mayoría de los sitios

FTP anónimo importantes. Permite conocer con exactitud la

localización del fichero buscado, su dirección y su IP, su directorio

en el cual se encuentra, tamaño, etcétera.

Actualmente se utilizan páginas web destinadas a buscar,

son las que conocemos todos como buscadores, y en ellas

podemos ir haciendo selecciones por lenguaje, tipo de archivo, o

por palabras encontradas.

Las charlas interactivas. Chat

Las charlas interactivas se utilizan para que una o más

personas puedan comunicarse entre ellos. En estas charlas, se

puede hablar con una persona en lo que se llama charla privada, o

se puede hablar con el resto de la gente, en aquello que se llama

charla pública.



El chat permite a todas aquellas personas que se encuentren dentro de la misma sala de charla, y en un mismo instante, conversar

entre ellas; en la pantalla, aparecerá lo que se dice y quien lo dice, pudiendo estar al tanto de todas las conversaciones públicas que existan.

En un chat o charla interactiva, dos o más personas pueden estar intercambiando información como si se tratara de conversaciones en

una mesa. Todos pueden hablar con todos, y puedes enterarte de las charlas de los demás, con la diferencia de que no se ven las caras, y con

el particular de poder hablar “en susurros” con alguien sin que los demás se percaten de ello.



El sistema de menús Gopher.

Gopher es una herramienta que permite viajar

por distintos servidores en los que se encuentra

almacenada información, usando para ello un

esquema sencillo e intuitivo. La parte el sistema es

anterior a la existencia de WWW y ha sido en gran

medida desplazado por ésta. Antes se accedía a los

servidores Gopher mediante programas cliente

especialmente diseñados, lo cual es innecesario en la

actualidad, ya que los navegadores reconocen el

protocolo Gopher.

El Gopher actualmente no se utiliza, pero si

alguna vez lo vemos seremos capaces de reconocerlo

por su parecido con el explorador de Windows.



Acceso a un ordenador remoto: TELNET.

La aplicación Telnet es, junto con el correo electrónico y la transferencia de ficheros, una de las herramientas básicas y más antiguas

de Internet. Telnet permite iniciar una sesión de trabajo en un ordenador remoto. A través de este procedimiento el teclado y el monitor del

ordenador local se convierte en que en un terminal del ordenador remoto. Un usuario puede trabajar desde su casa o despacho en una

máquina con capacidad de proceso varias veces superior o que dispone de más recursos.

El problema que hay con Telnet es que es

un programa sin entorno gráfico, además deja

muchos huecos para que personas no autorizadas

puedan conectarse a nuestro ordenador.



Configurar el acceso telefónico a redes

Lo primero que hay que hacer para configurar Internet, es asegurarnos de que el módem está correctamente instalado y

listo para comunicar. Para comprobar el módem debemos irnos al Panel de Control, donde podremos ver si funciona o no.

La manera más normal de ir al Panel de Control, es la siguiente:



Dentro de Panel de Control se pulsa sobre Sistema, y a continuación sobre la etiqueta Administrador de dispositivos. Después se

busca el icono de Módems:

Instalación del módem.

En el caso de no tener ningún módem

instalado, procederemos previamente a instalarlo.

Si no poseemos un módem, debemos comprar uno

y permitir que un especialista lo instale,

principalmente si se trata de un módem interno.

En el caso de tener el módem dentro del

ordenador o enchufado por cables, debemos

instalarlo mediante software.

Partiendo del Panel de

Control, al cual ya sabemos llegar

mediante la ruta seguida en la

página anterior, pulsamos sobre el icono llamado Módems, y en el cual aparece dibujado un teléfono con una cajita debajo de

su icono.



Por lo general, si el ordenador todavía no ha instalado el

módem, se debe a que es incapaz de reconocerlo, por lo que habrá

que instalarlo de forma manual, teniendo que marcar la opción: “No

detectar el módem. Lo seleccionaré de una lista.” pulsando a

continuación el botón de Siguiente.

Por lo general, buscando por el nombre del fabricante, se debería

encontrar aquí nuestro módem, pero como damos por hecho que el nuestro no

es reconocible, introducimos el disco con los drivers del módem, y pulsamos

sobre “Utilizar disco...” si en este apartado seleccionamos la ruta de nuestro



disco, poco después podremos ver una lista en la que sí aparecerá nuestro

módem. Pulsando sobre él, se instalará de forma automática.

Ya por último, sólo tendremos que indicar en qué puerto se encuentra, y

comprobar si nuestro módem funciona, o no.

Diagnóstico del módem.

Ya habiendo controlado que el módem se encuentra instalado en nuestro ordenador,

deberemos comprobar si el mismo se encuentra preparado para comunicarse con el exterior.

Para ello se vuelve a entrar en Inicio, Configuración, Panel de Control y Módems.

La ventana que aparece ahora dentro de módems es diferente a la

que aparecía cuando no disponíamos de ningún módem, y en ella aparecen



dos opciones: General y Diagnóstico. Para realizar el diagnóstico, pulsamos a la etiqueta del mismo nombre.

Ya dentro de diagnóstico, pulsamos sobre el nombre del puerto en el cual se encuentra el módem que vamos a usar, y esperamos una

respuesta. La respuesta del diagnostico serán unos códigos que manda el ordenador al módem, y que éste le devuelve indicándole que todo

va correctamente.

Como inciso cabe destacar que los módems actuales tienen una velocidad de

transferencia de unos 55.600 kbps., y que se pueden encontrar de dos formas: internos

(cuando se encuentran dentro de la caja del ordenador) y externos (cuando el módem se

encuentra fuera de la caja, y actúa de manera casi independiente.)

Además de los modems de 55.600 kbps., existen los modems para línea digital

RDSI, con 64.000 kbps. Y los usados para líneas de banda ancha ADSL, con

velocidades desde 128.000 kbps. .



Protocolos de red. Configuración.

Nos metemos dentro de Inicio – Configuración – Panel de Control – Red.

Agregar Cliente – Cliente para redes Microsoft. Agregar Protocolo – TCP/IP



Acceso telefónico a redes. Configuración.

Hay que pulsar sobre el icono Acceso telefónico a redes, que se encuentra dentro de Mi PC. y nos aparecerá por

pantalla la siguiente ventana:

Si pulsamos sobre Realizar conexión nueva, nos

aparecerá una ventana como la de la derecha, en la que

tendremos que seleccionar un nombre para la conexión y el

módem que vamos a utilizar para esa conexión. Y pulsamos

en Siguiente.

Por lo general no se debe configurar el módem, ya que

éste suele venir preinstalado para su conexión a Internet.

En código de área escribiremos en nuestro caso el

925, escribiendo por tanto el número del código de área de

nuestro servidor de Internet. Dentro del número de teléfono

volvemos a escribir el número de teléfono, incluyendo el

código de área. Y pulsamos en Siguiente.



Una vez creada la conexión, tendremos simplemente que dar

a Finalizar.



Si pulsamos con el botón derecho del ratón sobre el icono de Mi conexión seleccionamos la opción de Propiedades, y obtenemos la

siguiente ventana:

En la opción número de teléfono, debemos quitar la marca de Utilizar código

de área y propiedades de marcado, puesto que podemos tener problemas de

marcado si usamos el código de España, ya que si hay algún fallo en la conexión,

podemos llamar al extranjero.

En la zona de Conectar usando:, debe aparecer el módem con el que

queremos conectarnos a Internet.

Una vez configurada está página pasamos a configurar las páginas de

servidor:



El tipo de servidor utilizado es aquél que nos muestre el sistema

operativo que poseemos en nuestro equipo, y el tipo de red que queremos

utilizar; en nuestro caso, Windows es el sistema operativo, e Internet es el

tipo de red.

En Opciones avanzadas: no debemos señalar ninguna de las

opciones, ya que éstas sólo sirven para otros tipos de redes diferentes a

Internet.

El Protocolo de red admitido para Internet es el TCP/IP.

Por último, se deberá pulsar sobre el botón de Configuración TCP/IP.

Aquí deberemos configurar la página dependiendo del servicio de

Internet que poseemos. Si contamos con una dirección IP fija, deberemos

introducir manualmente esta dirección, en caso contrario, que por cierto, es lo

más normal, deberemos dejar que el servidor se encargue de darnos esa

dirección.



Si nuestro servidor tiene una dirección fija, deberemos escribir aquí su

dirección, pudiendo escribir dos de ellas, de tal manera que se pueda realizar un

salto de una a otra en el caso de que la primera estuviera llena.

Por último cabe destacar que no se debe comprimir el encabezado del IP,

ya que éste da problemas con Internet, pero estas dos últimas opciones pueden

depender del servidor de Internet con el que nos conectemos.

Automatización nos permite vincular nuestra conexión con un pequeño programa

de tipo por lotes, en el que podemos definir unas acciones a realizar antes de conectarnos

a Internet.



El Multienlace permite conectarnos a Internet con múltiples líneas.

Por último y ya configurado todo, bastará con presionar sobre el icono de la

conexión definida. Y se deberá escribir el nombre de la cuenta, y la contraseña

correspondiente a esa cuenta.



Navegadores de Internet

· Netscape Navigator e Internet Explorer: Descripción de las ventanas.

Operaciones básicas. Ejemplos de navegación. Otras opciones.



Actualmente se conocen dos navegadores: Navigator de Netscape, e Internet Explorer de Microsoft. El empleo de Internet Explorer está

muy extendido ya que este navegador venía incorporado junto con el sistema operativo Windows. Sin embargo es Navigator el que está

principalmente difundido entre los profesionales, debido a su robustez..

Netscape Navigator.

La versión más difundida actualmente es la 4.5., aunque actualmente la

versión 6.0 es la mejor de este navegador.

Los terminales AOL Avant que se están alquilando como acceso

económico para entrar en Internet, poseen un navegador propio que funciona

igual que si se tratara del Netscape Navigator.

Aunque el Netscape sea mejor, tan sólo el 10% de los usuarios utiliza

este navegador, por lo que en este curso vamos a utilizar el Internet Explorer,

que está mucho más difundido.

No obstante, echaremos un vistazo al Netscape Navigator, el cual

posee las siguientes licencias, estando acreditado por ello para ver las páginas

escritas con JavaScript, Java y Flash.



Lo primero que destaca en la ventana de este navegador es la barra de navegación compuesta por iconos grandes y de colores

llamativos.

Anterior: Nos permite acceder a la última

página que hemos visitado desde que abrimos el

navegador. Si ésta es la primera página que se ve desde el navegador, no estará habilitada esta opción (aparecerá en colores pastel).

Siguiente: Nos permite acceder a la página posterior a la que tenemos en pantalla. Para poder hacer esto, tenemos que haber visitado

antes esa página, y debemos haber retrocedido con el botón de Anterior.

Recargar: Actualiza la página que tenemos en la pantalla, cargando los datos que existen en este momento en el servidor. También se

puede utilizar, si la conexión parece que se ha dormido, ya que de esta manera se despierta, al tener que volver a hacer la llamada primera.

Inicio: Nos lleva a la página que hemos predeterminado como página inicial en el navegador. Por lo general accedemos a la página a

la que visitamos en más ocasiones.

Guía: Nos facilita conexiones con las guías más conocidas. Guía de Internet, Páginas amarillas, Gente, Novedades, e Interesante.

Imprimir: Muestra por la impresora la página web que se aparece en el navegador en este momento. Puede haber problemas si

tenemos una página de macros (compuesta por varias páginas), ya que sólo se imprimirá la página seleccionada.

Seguridad: Nos permite configurar las opciones de seguridad que queremos tener a la hora de navegar por Internet.

Parar: Interrumpe la carga de la página actual, impidiendo de esta manera que se siga cargando la página y por lo cual muestra la

carga actual. Hay veces que la página no se va a mostrar hasta que se lea de manera completa; si queremos ver parte, al parar veremos todo

aquello ya cargado.



La barra de dirección.

Aquí podemos ver Marcadores, que no es

más que una lista con las páginas web que nos han interesado, y a las cuales podemos acceder desde una lista.

Dirección de la página a la que estamos accediendo.

Y por último tenemos la posibilidad de ver páginas con Temas relacionados con la página actual.

Barra Personal.

Es propia de Netscape Navigator, y allí tenemos acceso a las páginas vinculadas en la barra de dirección dentro del marcador de

páginas personales.

Barra de título.

Nos muestra la dirección de la página actual, además de permitirnos minimizar, restaurar, maximizar y cerrar la ventana de Netscape

Navigator.



Barra de estado.

Es la que se encuentra en la parte inferior de la pantalla, y nos permite ver:

Si la página a la que accedemos es o no segura. Si estamos o no conectados a Internet. El estado de la página que estamos viendo o

el porcentaje de lo que estamos bajando. Y los iconos correspondientes con las aplicaciones complementarias de Netscape: Navigator,

Comunicator, News, Libro de direcciones, y Messenger.

Menús.

La barra de menús nos permite acceder a todas las funciones del navegador,

incluyendo aquellas de configuración o las menos usadas.

El menú de Archivo nos permite acceder a este segundo submenú.

En el submenú Nuevo, podemos

encontrarnos con diferentes opciones

que nos permiten crear una nueva

ventana del navegador, por lo que

podemos navegar en varias ventanas a

la vez.



Un nuevo Mensaje equivale a escribir una carta. Una nueva Página en blanco nos permite crearnos nuestra propia página web. Esta página

la podemos realizar con plantilla o con el asistente.

Abrir página nos permite acceder a una página web existente, ya sea dentro de la web, o de nuestro disco duro.

Guardar como y Guardar marco como, nos permiten guardar las páginas que abramos.

Enviar página envía la dirección de la página web por correo electrónico de tal forma que el usuario que abra el correo, pueda acceder

a la página con un clic sobre el vínculo.

Editar página nos permite modificar la página que estamos visualizando.

Editar marco funciona de manera igual a la anterior, pero con marcos.

Enviar archivo nos permite enviar archivos por medio del correo electrónico.

Desconectar permite seguir trabajando sin estar conectados a la red.

Configurar página sirve para definir las características de impresión.

Vista preliminar nos muestra por pantalla cómo se imprimiría según la configuración de la página.

Imprimir imprime por la impresora la página actual.

Por último nos quedan Cerrar y Salir, que son los que nos permiten abandonar la aplicación.

Cortar, Copiar y Pegar nos permiten editar el texto, Seleccionar todo selecciona toda la página, y las

tres opciones de Buscar, buscan respectivamente, dentro de un marco, la próxima coincidencia en el marco, y

en Internet. Por último podemos modificar las Preferencias del navegador.



Internet Explorer

La versión actual es la 6.0, pero la más utilizada es la 5.0, ya que esta viene con el Office 2000, programa que está muy difundido por

todos los usuarios de informática.

Internet Explorer nació partiendo de Mosaic, un programa caducado que debido a su falta de calidad cayó en desuso. Internet Explorer

empezó a ser utilizado con la versión 3.0, pero hasta la versión 4.0, que empezó a distribuirse conjuntamente con el Windows, éste no era

utilizado. Actualmente sus usuarios lo son por comodidad, ya que viene

incorporado con Windows 98, y las primeras versiones del Windows 2000.

Pero ha tenido que ser retirado debido a la ley antimonopolio infringida por

Microsoft, ya que además se hacía fallar premeditadamente en las versiones

anteriores al sistema operativo utilizado, a los navegadores que no eran de

Microsoft.

Las diferencias con Netscape Navigator en cuanto a uso, no son

grandes, sólo unas pequeñas diferencias a la hora de nombrar las diferentes

opciones y carencia en Internet Explorer de algunas opciones.

Internet Explorer al contrario que Netscape apenas tiene ninguna

licencia para visualizar otros programas que no sean del entorno de

Microsoft, a excepción de los programas de Intel Corp. y de Open Systems

Solutions, Inc., que aunque en nombre no tengan mucho que ver, se sabe

que Microsoft, tienen grandes relaciones con dichas empresas.



Internet Explorer, por el contrario, al no tener licencias externas, crea un lenguaje HTML propio, un lenguaje parecido al JavaScript

llamado JScript, y otro propio llamado VBScript, y empezando a sustituir Java por programas en J++ y en Visual Basic. Microsoft mantiene

actualmente pleitos con numerosas empresas, siendo acusado de plagio por la mayoría de ellas. Se prevé que dentro de poco Internet

Explorer saldrá del estándar, creando uno propio, abusando de su autoridad e implantación en el mercado.



El correo electrónico en Internet

· Funcionamiento del correo electrónico. Servidores de correo (host).

Direcciones de correo. Tema del mensaje. Copias a otros destinatarios. Copias ocultas.

· Utilización del correo electrónico. Descripciones de las opciones de menú.

Opciones de configuración. Envío y recepción de mensajes. Organización de buzones

de entrada y salida.



El correo electrónico con Netscape.

El correo electrónico no es más que una imitación del correo normal, salvo que el canal usado en este caso es la red de Internet.

El correo electrónico nos permite hacer lo mismo que podríamos

hacer con el correo normal, en cuanto al envío de información.

Para ello es necesario tener un servidor de correo. Este servidor

permanece encendido 24 horas, de tal manera que en cualquier momento,

los mensajes pueden llegar a él. El servidor nos cede parte de su disco

duro para nuestro uso de correo, teniendo como límite de mensajes los

que llenen este espacio de memoria.

La imagen es un ejemplo de correo electrónico de Netscape

Navigator. Al igual que todos los programas de correo, podemos ver una

barra de herramientas que nos permite Obtener el correo que se

encuentra en nuestro servidor de correo, escribir algún mensaje Nuevo a

alguien(To) o a varios (CC), pudiendo también Responder una carta a su escritor, o a Todos los receptores del mensaje que se ha recibido.

También se puede Reenviar el mensaje a su propietario o a otra persona. Como no, también podemos archivarlo en una carpeta que

destinemos a mensajes de su estilo, para poder luego chequear las carpetas viendo los archivos de uno en uno moviéndonos hacia el

Siguiente.



Para poder ver los mensajes fuera del ordenador, podríamos Imprimir la carta, o si queremos deshacernos de ella, podremos borrarla,

teniendo en cuenta que la primera vez que la borremos, ésta se guardará en la papelera (Trash), y podrá ser recuperada siempre que no se

elimine de allí.

Por otro lado, todos los mensajes tienen un Remitente, que escribió una carta a la que tituló con un Asunto, en una Fecha, dándole

una prioridad de llegada frente a otros mensajes que envía el usuario a otras personas en el mismo momento.

Otras ayudas al lector del correo son la posibilidad de marcar los mensajes que se reciben, además de tener señalados aquellos que

todavía no han sido leídos. También hay que destacar la importancia del tamaño de los mensajes, ya que en algunas ocasiones, no se querrán

mandar mensajes grandes a alguna persona que disponga o de un buzón pequeño, o de poco tiempo para descargar el correo.

El correo nos permite enviar mensajes entre diferentes personas, transmitir archivos, imágenes y programas como si de un buzón con

capacidad de disco duro se tratase.

El usuario transmisor, deposita la información en el disco duro del servidor de correo del receptor. Cuando el receptor se conecta a

Internet, puede descargar los programas depositados en el trozo de disco duro destinado para él.

Por último cabe destacar que Internet Explorer no tiene ningún programa de correo, teniendo que recurrir al programa Outlook de

Microsoft, para poder usar esta aplicación.



El correo electrónico con Microsoft Outlook

El programa Microsoft Outlook Express, viene incluido con las

versiones del sistema operativo de Windows, en las versiones, 95, 98

y Millenium, por lo que es el más utilizado de todos los visores de

correo. También hay que destacar que es el programa más fácil de

infectar de virus, y el que mejor los transmite, ya que todos los

contactos que se encuentran dentro de él, son objetivos del virus.

La versión Microsoft Outlook, viene dentro del paquete de

Microsoft Office, por lo que también es bastante usado, ya que este

paquete, es uno de los más utilizados en los ordenadores personales.

La versión Outlook completa, se diferencia de la Express, en la

cantidad de cosas que se permiten hacer en ella. La versión Outlook,

además de gestionar el correo, gestiona una agenda completa, pero

es muy similar a la versión Express en cuanto a su manejo con el

correo.



Lo primero para configurar el Outlook es definir nuestra

cuenta de correo. Para definir esta cuenta, lo primero y más

necesario es tenerla. Cada vez es más frecuente encontrarnos con

que la mayoría de las cuentas de correo que se nos ofrecen de

forma gratuita, no permiten el uso del Outlook, teniendo que

utilizarse para ello el propio navegador de Internet y la página Web

de la empresa que sirve el correo.

En el caso de tener una cuenta de correo que permita abrirse

dentro del Outlook Express (utilizamos esta opción, ya que es el

programa más utilizado) nos metemos en el menú Herramientas, y pulsamos la opción de Cuentas.

Pinchamos sobre la etiqueta de Correo, y

después en el botón de Agregar. De esta forma

pasamos a la configuración de la cuenta de correo.



Lo primero que hay que hacer es poner el nombre a mostrar. Este nombre, lo único para lo que sirve es para que la identidad que

refleje el Outlook, sea la del nombre que ponemos en esta celda.

Después de pulsar Siguiente, llegamos a la ventana en la que debemos poner la dirección de nuestro correo, en la que debemos

escribir nuestro nombre de correo completo, es decir, [email protected]ón del servidor.



En la ventana del servidor de correo electrónico, habrá que seleccionar los dos servidores de correo, el de correo entrante, que nos

permite recoger el correo del servidor, y el de correo saliente, que nos permite enviar los mensajes a nuestro servidor, para que más tarde

lleguen a su destinatario.

Por último, en la ventana de Inicio de sesión del correo de Internet, habrá que poner el nombre de cuenta (nombre de usuario

solamente), y la contraseña. Si este ordenador es nuestro, y no nos importa que cualquier persona pueda ver desde el mismo nuestro correo,

marcaremos Recordar contraseña, pero en el caso de ser un ordenador de uso público, evitaremos seleccionar esta opción, ya que permite la

lectura de nuestro correo por todos los usuarios del ordenador.



Una vez configurada la cuenta de correo para poder

descargar el correo mediante el programa Microsoft Outlook

Express, y si no nos hemos equivocado en ninguno de los

pasos, ahora podemos disfrutar de correo en nuestro

ordenador.

Las ventajas que ofrecen los programas de descarga de

correo, frente a la visualización de correo mediante las páginas

servidoras de correo, es que no tenemos porqué estar

conectados a Internet para poder leer los mensajes, ni tampoco

para escribirlos, con lo cual se ahorra tiempo de conexión en la

línea, lo que permite utilizar la línea de teléfono mientras se

escriben mensajes.



Otras aplicaciones de Internet

· Aplicaciones de FTP para la transferencia de archivos.



Aunque hemos estudiado los dos navegadores por excelencia, y sepamos que además del navegador, existen programas de correo o

de noticias, debemos analizar otras opciones:

FTP

Con un programa de FTP, somos capaces de subir y bajar nuestras páginas a Internet, o subir y bajar archivos. Un programa FTP nos

permite utilizar nuestro espacio Web como si de un disco duro se tratase, permitiéndonos copiar o borrar cosas en él.

Sin un programa FTP, no podíamos poner nuestras páginas en Internet, y por eso algunos servidores de páginas Web, tienen

programas de FTP internos.

Los servidores de FTP, permiten a muchos usuarios disponer de acceso a programas que en ellos se encuentran, como si de su disco

duro se tratase. Estos servidores, permiten bajar programas a los ordenadores de usuarios, y a veces permiten también subirlos.

El acceso a servidores FTP puede ser público, es decir, sin ninguna restricción de acceso, si permiten la descarga de programas.

Los servidores de FTP privados, tienen contraseñas que permiten a uno o más usuarios entrar en una sección del servidor durante un

tiempo indefinido, o mediante un tiempo limitado, debiendo posteriormente volver a solicitar una nueva clave.



Charlas Interactivas

Antiguamente se utilizaba el IRC, que era un programa dedicado a la charla por canales. El canal se asemeja a una habitación con un

nombre, de forma que todas las personas que se encuentran dentro están relacionadas por el nombre del canal. Si encontramos el canal

Toledo, veremos a personas relacionadas con Toledo. Si vemos el nombre De_Ligue, sabremos que entramos en un canal para relacionarse

con personas.

Actualmente, hay páginas web, que nos sirven de canales, y que pueden estar programadas en Java, javaScript, o incluso en HTML.

En las charlas, se puede hablar con el resto de personas en privado o de forma particular, sin que el resto de personas del canal

conozcan la conversación. Una variante de la charla privada son el Messenger y el ICQ, que permiten hacer charlas privadas entre las

personas a las que demos permiso en nuestra lista.

Las charlas interactivas pueden realizarse utilizando el teclado para escribir lo que se piensa, pero para expresar el estado anímico, se

usan los emoticones, que son unas representaciones gráficas de emociones,

Broma: ; ) Miedo: = : 0 Tristeza: 8( Sorpresa: 80 Pirata: P )

Hay también charlas por micrófono o con videoconferencia. Éstas cada vez empiezan a usarse más, ya que permiten verse a personas

que están demasiado alejadas como para poder verse de otra manera.

Por otro lado, la voz o el aspecto físico condiciona las mentiras que se puedan realizar mediante un chat público de sólo texto, principal

problema que se está encontrando a la hora de conocer gente por medio de las charlas.

Las charlas privadas cogen fuerza debido al coste de las llamadas por teléfonos, y lo barato de Internet, sobretodo desde que han

estado apareciendo las tarifas planas. La ADSL, ayuda a que se vaya introduciendo la videoconferencia.



Navegadores Off-line

Son programas que nos permiten bajarnos de la red una web entera, o una página con todos sus vínculos.

Se utilizan para poder ver páginas sin tener que estar conectados a Internet, aunque su mal uso nos permite hacernos con páginas web

que no son nuestras, para así robar su contenido, o su forma.

Los navegadores Off-Line copian una página con todos sus enlaces, y poco a poco se encargan de revisar los enlaces, y seguir

copiando todo a nuestro disco duro. Para evitar que la copia sea infinita, se puede delimitar la copia a todos los vínculos realizados en un

mismo servidor, o a los que se encuentren en una determinada profundidad. La profundidad se mide en la cantidad de vínculos que se deben

seguir hasta dejar de copiar.

Programas gestores de descargas.

Nos permiten descargarnos archivos de forma inteligente. Estos gestores permiten reanudar la descarga interrumpida, descargar varios

archivos al mismo tiempo, y son capaces de buscar entre diferentes servidores de Internet, copias idénticas de los programas que se van a

descargar, para así descargar el programa desde el servidor más rápido en el momento.



Planificación de la Web

· Diseño del contenido. Propósito de sitio Web. Audiencia de la Web. Diseño

de la apariencia. Información a incluir. Funcionamiento del sitio. Determinar vínculos.

Reunir materiales. Seleccionar formato correcto de archivo. Tipo para acelerar tiempo

de transferencia. Construir el sitio. Entornos (solo texto, texto y gráfico, sonidos y

animaciones, hipervínculos a otras páginas, hipervínculos a correos, frames).

Organizar archivos.



Creación y Administración de un sitio Web

Lo principal para crear una página Web es conocer todo lo que ésta va a contener, para lo cual escribiremos una lista con todo lo que

queramos introducir en ella, incluyendo los colores que va a tener.

Una buena ayuda para saber qué colores vamos a introducir en la página, sería la visita a otras páginas del mismo tipo. Si no

disponemos de psicólogos o diseñadores que nos puedan informar sobre la fuerza de los colores, podremos tomar nota del diseño e ideas de

las páginas que más nos gusten. Colores como el azul, o los grises dan elegancia, los rojos dan fuerza, y los amarillos, destacan, pero el

incremento de una tonalidad u otra puede destacar sensaciones diferentes según su forma o fuerza.

Una vez se haya recopilado toda la información e ideas para la página, se procederá a un esquema del árbol del sitio web. El árbol

debe relacionar todas las páginas entre sí; puede ser redundante, pero sin pasarse en los enlaces para no confundir al visitante de la página.

También se deberá evitar la falta de información, repetir opciones de atrás o de menús, y presentar ayuda al usuario para no perderse.

Cuando se haya elaborado el árbol, se deberá hacer una primera página en la que se utilicen los colores y logotipos empleados en el

resto de la página, y una segunda página, en la que se basarán todas las demás páginas, dependientes. Con esto se consigue una

uniformidad en el diseño, y que el visitante entienda que toda la página es una unidad, y no crea que ha salido de ella.

Una vez realizada la portada como página HTML, pasaremos a realizar el resto de páginas intentando seguir el segundo diseño de

página, el cual debe ser parecido al de la portada, pero debe tener opciones de menús para poder moverse por todo el sitio.



Propósito de un sitio Web.

El beneficio de Internet es grande para todos, debido al escaso coste que supone una página web.

Una página web puede ser una página de servicios, una página de información, una página de promoción, o una página para negociar.

1.- Una PÁGINA DE SERVICIOS, se encarga de prestar algún servicio al usuario. Este servicio será más seguido según el público al

que se dirija, la importancia que tenga, lo que ayude al usuario, y como no, según su gratuidad.

Una página de servicios puede obtener beneficios a la hora de mostrar publicidad. Esta publicidad puede ser propia o de otros.

Una publicidad propia, hace recordar a los usuarios la página y el servicio, logrando una fama positiva para la empresa.

Una publicidad externa se materializa en forma de banner. Un banner es un cuadrado que muestra un texto que promociona a una

empresa, un producto, un servicio, ... . La cantidad de visitas que reciba la página, y la calidad de las visitas, condiciona el precio que se cobra

por la publicidad. También suele haber diferentes tamaños y diferentes posiciones. Todo ello lleva a condicionar el precio de esta publicidad,

que puede llegar hasta los 0,05€ por mostrar el banner.

2.- Una PÁGINA DE INFORMACIÓN, es muy parecida a la página de servicios, pero se diferencia de la primera, en que ésta solo da

información. Una página de información suele ser más fácil de realizar que una de servicios, ya que no necesita de una programación tan

complicada, pero requiere de una actualización de la información, ya que en función de la misma, las visitas podrán ser más o menos

frecuentes. El beneficio que puede dar una página de información es muy similar al de la página de servicios.



3.- Una PÁGINA DE PROMOCIÓN, es aquélla que va a intentar mostrar una empresa o un producto, con el único beneficio de que la

empresa o el producto adquieran fama o renombre.

Una página atractiva, permite al usuario pensar mejor en el producto, sin embargo una mala página, puede acabar con la confianza que

tiene el usuario en la empresa.

Una página con mucha información logrará ayudar a decidirse mejor al usuario que busca un producto del cual quiere conocer con más

profundidad sus propiedades, antes de aventurarse o pedir información vía telefónica sobre el mismo. Internet es precisamente, la forma de

comunicación más económica para medianas y largas distancias por este motivo, y es de esperar, que cuando alguien necesite un producto y

lo busque por Internet, escoja aquél que haya encontrado más atractivo.

4.- Por último hablaremos de la PÁGINA DE VENTA. En esta última se publicita un producto o servicio, de tal forma que el usuario que

lo demande, pueda lograr cerrar un trato al momento por Internet, y por lo tanto dejar de buscar otro.

En esta última el beneficio es inmediato para la empresa propietaria de la página.

No obstante, cabe destacar que Internet es algo nuevo que avanza rápidamente, y por lo tanto a medio plazo no se pueden conocer los

nuevos tipos de páginas web que aparecerán próximamente, por lo que no es de extrañar que en breve habrá que añadir a este mismo

capítulo algún otro tipo de página anteriormente no enumerado.



Los colores del Web.

Una página Web, tiene que buscar su propia audiencia mediante su contenido y su diseño. Un diseño se basa en la cantidad de

imágenes, la concordancia de color entre ellas, el tamaño de letra, la forma de ésta, y la posición de la información.

Un detalle muy importante, es el del color de la Web, ya que éste es el que suele importar más:

· Para despertar el interés, se recomienda colocar en un solo lugar un color diferente que destaque.

· Para recordar el mensaje hay que tener en cuenta que los colores más recordables, los más visibles.

· La mejor fórmula para conseguir armonía en el color:

1.- Recurrir al enfrentamiento entre primarios.

2.- Monocromías. Utilizar un solo color en sus diferentes gradaciones tonales (en general producen un efecto más monótono).

3.- Analogías. Se utilizan una serie de colores en cuya mezcla siempre interviene un color determinado que crea la sensación de

una relación familiar entre los demás. Esto produce una relación familiar tranquila y gratificante.

4.- Contraste. Utilizando colores opuestos. Hay que evitar los excesos que desequilibren el conjunto.



Las repercusiones psicológicas. Variarán dependiendo del grado de intensidad en que intervengan los colores.

- Cada persona tiene sus preferencias y antipatías por los colores.

- El rojo suele gustar más a las mujeres.

- El azul suele gustar más a los hombres.

- El amarillo no parece gustar a casi nadie.

Para crear emociones que aumenten el impacto psicológico, es necesario conocer su clasificación:

- Colores cálidos.

- Colores fríos.

Es recomendable valerse del efecto del color para llamar la atención sobre determinadas creaciones de diseño gráfico. Para ello hay

que tener en cuenta en todo momento, las posibilidades asociativas que los colores nos ofrecen.

- Azules fuertes: se asocian a la idea de frío, de potencia y de robustez. Serán apropiados para ropa invernal, equipos de ski,

electrodomésticos propios para la cocina y el baño, refrescos y productos lácteos, comida congelada y determinados productos farmacéuticos

y cosméticos, entre otros.

- Azules suaves: se asocian a la idea de calor, de emoción y de confianza. Serán recomendables para planchas, secadores de pelo,

microondas, calefactores, muñecas de felpa, moquetas, muebles artesanos, ropa de verano y viajes de vacaciones, entre otros.



- Rojos fuertes: se asocian a la idea de juventud, ímpetu y de acción. Serán apropiados para prendas y elementos de deporte, discos y

conciertos de música moderna, refrescos para jóvenes, vehículos deportivos, vestidos juveniles, libros y revistas, entre otros.

- Rojos suaves, anaranjados, marrones claros: se asocian a la idea de apetito, calor de hogar y satisfacción. Bien combinados, pueden

ser apropiados para anuncios de chimeneas, galletas, comidas preparadas, bebidas calientes, bebidas alcohólicas suaves, ropas infantiles,

decoración de interiores y ropa de cama, entre otros.

- Verde, amarillos, rosados, azulados: se asocian al medio ambiente, al descanso y a la naturaleza. Debidamente combinados serán

apropiados para productos de limpieza, de higiene en general, frutas y verduras frescas, envases de cereales, trajes de baño, bronceadores,

medicina natural, lociones y aceites de baño, entre otros.

- Verdes claros, dorados, malvas: se asocian a productos femeninos, elegantes y de calidad. Con una adecuada combinación serán

apropiados para presentar perfumes, jabones, cosméticos, champús, lociones, cremas para la piel, talco, alimentos para bebes, moda

sofisticada, revistas femeninas, joyas y decoración, entre otros.

- Rojo oscuro, marrón oscuro, azul oscuro, plateado: se asocian a productos masculinos, robustos y duraderos. La combinación

apropiada los hará convenientes para productos industriales, material de construcción, máquinas, elementos para el transporte, automóviles,

deportes, bebidas alcohólicas fuertes, tabaco y revistas, entre otros.

Un color que impacte puede ser muy útil para atraer la mirada de una persona sobre un punto determinado de un anuncio, de un folleto,

de un envase o de cualquier tipo de creación gráfica. Sin embargo, un color determinado, de utilización muy común, como por ejemplo el rojo,

también puede servir para llamar la atención y destacar un peligro inminente.

Un color convenientemente repetido puede ser útil como recordatorio, para ayudar al lector a reconocer un determinado producto, pero

si el color es excesivo, o desentonado, puede ser de acción negativa sobre la atención, amortiguando el efecto que se desea conseguir.



El color también tiene efecto aparente sobre el tamaño, pues los colores claros dan la impresión que los objetos son mayores, y los

colores oscuros los hacen más pequeños.

- En la selección de los colores para el conjunto de un diseño gráfico siempre hay que tener en cuenta, sobre todo, la facilidad de

compresión del conjunto de la idea.

- Unos diseños en los que se abuse de la presencia del color rojo mantendrán, frente a los lectores, una continua sensación de violencia, de

agresividad y de peligro.

- Si, por el contrario, se utilizan en exceso grafismos con colores muy pálidos, se puede crear una agobiante sensación de complaciencia y

suavidad, que reste interés a todo el conjunto.

Las gamas cromáticas (Armónicos)

La gama es el conjunto de colores del mismo tono relacionados entre sí por diferentes valores. Igualmente una gama es la relación entre

colores que llevan una parte de un color común. Por ello cuando se realiza una composición en una gama de color, estamos ante una armonía.

Las gamas más frecuentes son:

- La gama de colores fríos a partir de azules y verde. - La gama de colores calientes a partir de rojos y amarillos.

- La gama de tonos pastel, matizados con blanco. - La gama de colores oscuros, matizados con negro.

- La gama de grises matizados con blanco y negro.



Psicología de los colores, funciones simbólicas.

- El blanco y negro se hallan en los extremos del espectro. Ambos colores tienen un valor límite y también un valor neutro (ausencia de

color), que refuerza los colores que son combinados con ellos.

- El gris es centro de todo. Ocupa el lugar intermedio entre el blanco y el negro, pero es un centro pasivo, neutro, y por eso un factor de

equilibrio.

- El rojo significa vitalidad, es el color de la sangre, de la pasión. Expresa entusiasmo y dinamismo. Resalta y es agresivo.

- El verde es el color más tranquilo y sedante. Evoca la vegetación y el frescor. Pero es el color de la calma indiferente, no transmite alegría,

tristeza o pasión. Cuando en el verde predomina el amarillo, cobra una fuerza activa y soleada, si tiene azul, es más sobrio y sofisticado.

- El azul es el símbolo de la profundidad. Suscita una predisposición favorable. Provoca tranquilidad y gravedad solemne. Cuanto más

clarifica, más se vuelve indiferente. Cuanto más se oscurece, más atrae hacia el infinito.

- El amarillo es el color más luminoso, cálido y alegre. Es el color del sol y de la luz y como tal es vital y tonificante.

- El naranja, mezcla de rojo y amarillo es menos estridente que aquellos y posee una fuerza mas radiante y expresiva. Tiene un carácter

acogedor, cálido, estimulante y una cualidad dinámica muy positiva.



La estructura de la Web

La estructura de un conjunto de páginas web es muy importante, ya que si ésta es buena el lector podrá visualizar todos los contenidos

de una manera fácil y clara, mientras que un conjunto de páginas web con una mala estructura producirá en el lector una sensación de estar

perdido, no encontrará rápidamente lo que busca y terminará por abandonar nuestro sitio.

Planifique la estructura antes de empezar

Antes de crear un conjunto de páginas web uno ha de tener una idea clara de cómo va a ser la estructura de dichas páginas. Para ello

es conveniente hacer algún esquema sencillo, y en la mayoría de los casos bastarán una hoja de papel y un lapicero, pero si el emplazamiento

va a albergar un gran número de páginas, será recomendable usar algún tipo de programa que permita manejar estructuras de tipo grafo.

Primero habrá que apuntar todas las ideas que vamos a representar en nuestra página, y después poco a poco iremos dando forma a

nuestra idea, empezando por concretar una estructura clara, que pueda ser seguida por cualquier persona.

La estructura depende del contenido

No es lo mismo crear una estructura de navegación para un sitio que desea publicar información al estilo de un libro, que para un

tutorial. El libro, cuya estructura estará formada por capítulos, se adapta bastante bien a una estructura lineal jerárquica. Mientras que para un

sitio donde se expone un tutorial o un tour, es más apropiada una estructura de tipo lineal.



Un portal de Internet se nos muestra de una forma jerárquica, y las páginas que nos muestran un producto suelen ser lineales. Mientras

que las páginas que tratan de una empresa suelen ser híbridas.

Tipos de estructuras.

Jerárquica

La estructura jerárquica, es la típica estructura de árbol, en el que la raíz es la hoja de bienvenida.

Esta hoja se puede también sustituir por la hoja de contenido, en la que se exponen las diferentes

secciones que contendrá nuestro sitio. La selección de una sección nos conduce así mismo a una lista de

subtemas que pueden o no dividirse.

Este tipo de organización permite al lector conocer en qué lugar de la estructura se encuentra,

además de saber que conforme se adentra en la estructura, obtiene información más específica y que la

información más general se encuentra en los niveles superiores.

Lineal

La estructura lineal es la más simple de todas, la manera de recorrerla es la misma que si estuviésemos leyendo un libro, de manera

que estando en una página, podemos ir a la siguiente página o a la anterior.

Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado. En

este caso, además impedimos que se distraiga con enlaces a otras páginas. Por otra parte, si el

camino es muy largo o poco interesante, podemos causar al lector la sensación de estar encerrado.

Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.



Lineal con jerarquía

Este tipo de estructura es una mezcla de los dos anteriores, los temas y subtemas están

organizados de una forma jerárquica, pero se puede leer todo el contenido de una forma lineal si se

desea.

Esto permite tener el contenido organizado jerárquicamente y poder acceder simultáneamente a

toda la información de una manera lineal, tal y como si estuviésemos leyendo un libro.

Red

La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, la

páginas pueden apuntarse unas a otras sin ningún orden aparenten.

Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector

del lugar en donde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo

que le queremos mostrar. Por eso es muy recomendable asociar la estructura de estas páginas con alguna

estructura conocida, como por ejemplo la de una ciudad.



Navegación

Unos de los apartados más importantes en el diseño de páginas Web son los elementos de navegación, ya que son los que nos

permiten movernos a través de las diferentes páginas que hemos construido.

Duplique los elementos de navegación si es necesario

Si sus páginas tienen normalmente un tamaño superior al de una pantalla y media, considere la opción de duplicar los elementos de

navegación al principio y al final de las páginas. Esto facilita mucho al usuario el movimiento por la web, sin tener que estar buscando los

enlaces.

Para que no parezca todo muy monótono, se recomienda hacer las barras de navegación diferentes en la parte inferior de la superior.

Añada un enlace al principio de la página

Si la página es suficientemente larga proporcione al final de la página un enlace al principio de la misma.

Si ésta es muy larga, también es recomendable la creación de enlaces entre diferentes secciones de la página, aunque se recomienda

para ello, hacer varias páginas.



No cree páginas que sean un callejón sin salida

Al menos cada página Web ha de tener un enlace por el cual se pueda continuar la navegación, siendo recomendable en todos los

casos, que haya un enlace con la página principal.

Diseñe una estructura clara

Asegúrese de que proporciona un camino cómodo para visitar todas las páginas Web de su sitio. Si no tiene en cuenta esto perderá la

mayoría de los lectores tras las primeras páginas.

La estructura no tiene que ser sólo para los informáticos, sino que ésta debe ayudar a todos los visitantes de la página, con

independencia de sus estudios, condición social, ...

Proporcione índices

Si le es posible facilite un índice con el contenido del sitio. Conviene que este índice esté siempre a la vista, para poder utilizarlo en

cualquier momento.

Si usa una paleta de navegación gráfica, proporcione enlaces de texto

Si usa una paleta de navegación gráfica, el lector no podrá moverse por las demás páginas hasta que

el gráfico no esté cargado, pero si inserta enlaces de texto el lector puede moverse antes y no tener que

esperar.



Tamaño de las páginas

Las personas no hacen scroll

Si quiere captar la atención del navegante, no haga la página más grande de una pantalla. Muchas de las personas que navegan por

Internet no consultan la parte inferior de las páginas porque no saben que hay más información en la parte de abajo.

En general es una buena costumbre no hacer páginas de tamaño mayor a una pantalla y media. De esta manera evitará muchos

problemas y facilitará la lectura de las páginas. Las páginas de tamaño de una pantalla y media son cómodas de leer y no saturan al lector con

demasiada información.

Si necesita poner gran cantidad de texto escrito que ha de leerse completo, es recomendable hacer una única página larga. Es menos

molesto hacer scroll a lo largo de una ventana que seguir un enlace a la siguiente parte del documento.



En cada documento

Todos los documentos deberían firmarse. De esta manera se identifica al autor del documento, además de hacerse responsable de

su contenido. Si el documento contiene información importante o de valor, firme el documento digitalmente con algún método seguro como

puede ser PGP. Por lo general, la firma se utiliza para contactar con el autor. Una manera sencilla de unir la firma, y el contacto, es crear una

página con las señas del autor e introducir un enlace a dicha página al final de cada documento.

Por último, es muy importante fechar los documentos. Al fechar los documentos situamos el contenido de los mismos en un contexto en

el tiempo, de manera que si el documento está fechado, el lector es capaz de saber si la información es actual o por el contrario está obsoleta.

En el caso de fecharlos, hay que ser cuidadoso con el formato de las fechas y usar formatos como 3-4-98 que pueden llevar a confusión al ser

leído por personas de otros países. Ya que la anterior fecha se puede interpretar como el 4 de Marzo en vez del 3 de Abril.



Enlaces

Los enlaces permiten enriquecer el contenido de la información con datos suplementarios, pero se ha de tener precaución ya que

pueden hacer confusa la lectura de una página.

Escriba como si no hubiese enlaces en el texto:

Preferible

La página “Presentación” permite

ver al autor de la página.

Para ver una presentación sobre el

autor de la página, pulse aquí

Elija palabras significativas o frases para los enlaces. El texto enlazado debe definir el contenido de la información a la que refiere, a ser

posible de manera que no sea necesario leer todo el párrafo para comprender el significado del enlace.

Elija la longitud apropiada del enlace. Si bien como hemos dicho antes, el enlace ha de ser suficientemente significativo, un enlace

demasiado largo también es perjudicial ya que dificulta la lectura del texto.

Asegúrese de que el lector conoce la información a la que va acceder antes de saltar. Si el lector salta a un enlace que no resulta ser lo

que esperaba, se va a encontrar confundido y frustrado al no conseguir la información que desea.

Los enlaces modifican el énfasis de la frase. Hay que tener en cuenta que al hacer un enlace sobre una parte del texto ésta se realza y

puede distraer al lector del significado principal del párrafo.



Cuando realice enlaces consecutivos similares, resalte la información que diferencie unos enlaces de otros. Incluso se puede mejorar si

quita el texto redundante.

Mala Buena Mejor

Página Principal Página Principal Principal

Página de Índice Página de Índice Índice

Página de Ayuda Página de Ayuda Ayuda

Página de Enlaces Página de Enlaces Enlaces

Compruebe el funcionamiento de todos los enlaces. Resulta bastante desagradable intentar salta a un enlace y comprobar que dicho

enlace no funciona o que la página a la que se referencia ya no existe, por eso hay que comprobar el funcionamiento de todos los enlaces que

hay en nuestras páginas. Existen programas que realizan esta tarea automáticamente.

Existen dos tipos de enlaces, los enlaces internos y los enlaces externos. Los enlaces internos son aquellos que referencian páginas

que son nuestras, es decir que poseemos el control de esas páginas. Y los enlaces externos referencian páginas de otras personas sobre las

que no tenemos ningún tipo de control.

Se ha de comprobar el funcionamiento de los enlaces internos cada vez que modifiquemos nuestras páginas, así como los enlaces

externos de una forma periódica.

Estandarización

La organización Word Wide Web Consortion (W3C) es el organismo que establece los estándares en la red. Asegúrese de que sus

páginas cumplen alguno de estos estándares.

Visualice las páginas en diferentes navegadores. Aunque sus páginas cumplan el estándar es recomendable que compruebe que sus

páginas se visualizan correctamente en los navegadores más usados.

La última versión de los estándares no es la más extendida. Si usa la última versión de los estándares tenga en cuenta que no todos las

personas poseen la última versión de los navegadores. Y por lo tanto está limitando el número de personas que pueden acceder a su página.

No use tamaños fijos al realizar páginas Web, es mejor que use porcentajes para definir tamaños, con esto conseguirá que sus páginas

se visualicen correctamente en cualquier resolución.

Si usa Java o JavaScript cerciórese de que no es imprescindible. Asegúrese de que no sea necesario el uso de Java o JavaScript para

visualizar el contenido de sus páginas, puede ser que el navegador no soporte estos lenguajes o que aún soportándolos no estén activados.

Si usa lenguajes como JavaScript, chequee que la versión del lenguaje que soporta el navegador sea compatible con el código que va

a programar.

Con este sencillo código, puede averiguar que versión soporta su navegador.

<script language="JavaScript">  </script> <script language="JavaScript1.1">  </script> <script language="JavaScript1.2"> </script> <script language="JavaScript">if (vers == 1.2){}else if (vers == 1.0){}</script >



Imágenes

Evite en lo posible usar imágenes de fondo en sus páginas Web, pero si desea usar imágenes de fondo elija unas que contengan poca

información visual, de manera que el texto se pueda leer con facilidad.

Cuando use imágenes de fondo, utilice el formato JPEG con alta compresión; aunque la pérdida de calidad es notable, tenga en cuenta

que al ser una imagen de fondo, la persona no presta prácticamente ninguna atención a la imagen.

Otra recomendación de utilidad es elegir un color de fondo que se asemeje al color de la imagen de fondo, así mientras ésta todavía se

está cargando, se puede leer el texto con comodidad.

Recuerde que los gráficos tardan en cargarse o que el usuario puede tener la opción de carga automática de gráficos desactivada, en

cuyo caso, si usa de manera indiscriminada gráficos decorativos, su página puede parecerle extraña y confusa al no visualizarse dichos

gráficos.

Limite el tamaño total de todas las imágenes a 50Kbs. El tiempo que tarda la página en cargarse completamente es de gran

importancia; recuerde que el usuario no va a esperar más de 15 segundos a que la página termine de cargarse.

Velocidad Tamaño

14400 bps 28800 bps 56600 bps

50Kbs 60 sg 30 sg 14 sg

100Kbs 120 sg 60 sg 28 sg

Tiempo optimista de carga, suponiendo que la red telefónica lo permita.



Creación de la Web

· Herramientas de diseño orientadas a la creación de páginas Web.

FrontPage.

· Lenguaje HTML. Programación en HTML. Creación de una página HTML.



Microsoft FrontPage

Hace poco tiempo que podemos crear páginas Web. Debido a esto, hay muy pocas personas capaces de crear páginas de manera

profesional. FrontPage fue creado por Microsoft con el fin de que muchas empresas pequeñas que no podían mantener un buen diseñador,

fueran capaces de hacer sus páginas web. De este modo, prácticamente se obligó a los servidores de páginas web a incluir sus extensiones,

con lo cual consiguió hacerse, además de con el mercado del usuario, con el de los servidores. Con el FrontPage, se pueden hacer páginas

sin tener conocimientos avanzados de manera rápida, pero siempre con poca calidad.

El programa FrontPage, nos permite desde crear una página Web, hasta crear un WebSite completo, sin salir del programa, y de modo

rápido, utilizando asistentes o creando menús y enlaces automáticos.

La vista Página

Dentro de la barra “estándar”, nos encontramos con la anterior imagen, en la cual podemos seleccionar el estilo de nuestra página, el

tipo de letra, y el tamaño de ésta. Cada estilo se asocia a un tipo de letra (Fuente) y a un tamaño.



Si queremos cambiar la letra, con estas opciones podemos ponerlas en negrita, cursiva o subrayarlas.

Si queremos alinear el texto, podremos hacerlo sólo a la Izquierda, centrarlo o a la derecha, sin poder justificarlo, aunque si

se puede justificar el texto por ambos lados en HTML.

Para crear listas, las podemos crear:

Podemos crear listas ordenadas:

Lista de invitados:

1.- Pepe

2.- Paco

3.- Miguel

4.- Antonio

Podemos tener listas sin orden:

Lista de invitados:

o Pepe

o Paco

o Miguel

o Antonio

También podemos sangrar más o menos a la izquierda de la pantalla, con las siguientes dos opciones, entendiendo con sangrar a

separar más o menos con el margen de la izquierda.



Por último podemos rellenar el fondo de las letras, o cambiar el color de las letras.

La vista Carpetas

La vista “Carpetas”, también la tenemos de forma permanente si elegimos “ver” “Lista de carpetas”.

En la vista Carpetas, podemos encontrarnos con un pequeño explorador de archivos, que nos permite movernos y modificar los

archivos de nuestra página Web.

Podemos conocer el nombre del archivo, el título de la página, tamaño, fecha de modificación, autor, y podemos incluir hasta una

pequeña descripción, para conocer de que trata la página.

Por problemas del FrontPage, esta página es muy socorrida a la hora de poner un nombre físico a las páginas, ya que en ella podemos

ver el nombre lógico (Título) al lado de físico, y modificarlo.



La vista Informes

En informes, podemos ver datos de nuestra página: Numero de archivos, tamaño de éstos, imágenes, vínculos que no funcionan,

vínculos a páginas internas, y vínculos a páginas externas.

Lo más importante que posee esta opción de informes, es la opción de ver páginas lentas (páginas que por su tamaño tardan en

cargarse), y los vínculos rotos, además de poder chequear los vínculos externos para saber si funcionan o no.

La vista Exploración

La vista de Exploración nos permite diseñar de forma rápida un WebSite completo. Permitiéndonos crear en poco tiempo los enlaces y

barras de exploración.

La exploración no es más que una jerarquización de las páginas que tenemos en nuestra Web, de tal forma que creamos una

estructura que se puede seguir hacia arriba y hacia abajo, teniendo más importancia cuanto más arriba se esté, y siendo más concreta, cuanto

más abajo se encuentre.



La vista Hipervínculos.

Desde esta vista, y seleccionando un archivo en la “lista de carpetas”, debemos ser capaces de ver a la izquierda de la pantalla los

enlaces que hay a la página, y los enlaces que salen de la página. Pulsando a los símbolos de + de los vínculos, podemos extender esa rama

hasta otro nivel.

La vista Tareas.

Con tareas podemos ver el listado de tareas a realizar, las que se están realizando, y las realizadas. Estas tareas se utilizan para las

páginas que se diseñan entre un grupo grande de personas, por lo que se necesita de un mayor nivel de ordenación.

Las tareas se crean en la vista de carpetas sobre los archivos, indicando qué se debe hacer en cada uno de ellos, e indicando, quién

debe ser el que lo haga.

El encargado de realizar la tarea, después de leerla, pulsará sobre ella, y logrará de ese modo, abrir la página. Al cerrar la página, y si

ya ha terminado de modificar, aceptará que se ha terminado la tarea, y el supervisor, podrá entonces repasarla.



Estructuras con FrontPage.

Se puede crear una estructura de exploración para el Web actual organizando las páginas en la vista Exploración. Esta estructura de

exploración muestra cómo se relacionan entre sí las páginas de su Web y le proporciona a FrontPage el modo de configurar las barras de

exploración. Por ejemplo, la estructura de exploración le dice a FrontPage qué páginas son páginas de nivel superior; FrontPage usa esta

información para determinar los hipervínculos que coloca en una barra de exploración, y el título de la página determina las etiquetas de los

hipervínculos.

La página principal es la primera página que se agrega a la estructura de exploración, que normalmente se denomina Index.htm.

Las páginas de nivel superior están al mismo nivel que la página principal, aunque no la incluyen.



Las páginas de nivel primario incluyen la página primaria de otra página, además de las páginas que están directamente conectadas

con la página de nivel primario al mismo nivel.

Las páginas de nivel secundario son páginas directamente por debajo de otra página.

Las páginas del mismo nivel son páginas que se encuentran al mismo nivel en la estructura y tienen la misma página principal.

Al agregar una barra de navegación a una página, se eligen los hipervínculos que se desea mostrar. Estos hipervínculos dependen de

la posición de la página en la estructura de la exploración.

Además de estas opciones para la barra de exploración, también es posible incluir hipervínculos a la página principal del Web o a la

página primaria de la página actual, o a ambas.

Si selecciona hipervínculos de exploración que no afectan a la página actual (por ejemplo, se agrega una barra de exploración de nivel

superior, pero su Web no presenta ninguna página de nivel superior excepto la página principal), la barra de exploración no se podrá ver en un

explorador de Web. Sin embargo, se verá un marcador de posición para la barra de navegación mientras se modifica la página.

Puede situar las barras de exploración en la página horizontal o verticalmente. También puede agregar más de una barra de

exploración a cada página, por ejemplo, para explorar distintos niveles de la página.



En el ejemplo de la página siguiente, observe que Servicios y Noticias son páginas del mismo nivel y que Servicios tiene cuatro páginas

secundarias:

Dentro del mismo nivel de exploración, además de un hipervínculo a la página principal, la página de muestra anterior indica la

presencia de una barra de exploración horizontal que permite al visitante explorar las páginas más importantes del WebSite. En la parte

izquierda de la página, utilizando la exploración de páginas secundarias, una barra de exploración vertical permitirá al visitante del sitio

explorar las páginas secundarias de Servicios.



Temas con FrontPage.

El Tema del FrontPage, permite

dar un mismo toque a todas las páginas

de la web, permitiendo al caso de tener

estructuras del FrontPage, el de crear

botones, y titulares a juego, con

posibilidad de que los botones estén

animados, y ofrezcan actividad a la hora

de pasar el ratón sobre ellos.

El problema que generan estos

temas, es que a menudo en Internet, nos

encontramos con muchas páginas que

muestran el mismo tema de FrontPage.

Lenguaje HTML

EL lenguaje HTML se identifica por las etiquetas. Éstas, se colocan antes y después de lo resaltado por la etiqueta, y son las siguientes

en la versión HTML 4:

 Etiqueta usada para hacer comentarios.

<!DOCTYPE> Etiqueta que nos indica la versión HTML

-A-

<A> Etiqueta de Hipervínculos

<ABBR> Formato de Texto del tipo abreviatura

<ACRONYM> Formato de Texto del tipo acrónimo

<ADDRESS> Para indicar la dirección del autor de la página

<APPLET> Permite insertar un Applet de JAVA

<AREA> Para crear un área en un mapa de imagen



-B-

<B> Permite poner el texto en negrita

<BASE> Indica la dirección URL primaria

<BASEFONT> Indica la fuente del texto por defecto

<BDO> Muestra los caracteres en dirección opuesta a la normal

<BGSOUND> Para la música de fondo.

<BIG> Para hacer la letra muy grande

<BLINK> Para que el texto parpadee

<BLOCKQUOTE> Pone márgenes a ambos lados

<BODY> Cuerpo del documento

<BR> Salto de Línea

<BUTTON> Crea un botón activable

-C-

<CAPTION> Permite definir el título de una tabla

<CENTER> Para centrar

<CITE> Formato de Texto del tipo citación



<CODE> Formato de Texto del tipo de código de programación

<COL> Para definir las columnas de una tabla

<COLGROUP> Grupo de columnas

<COMMENT> Para poner comentarios

-D-

<DD> Termino a definir

<DEL> Indicador de texto borrado

<DFN> Indicador de definición

<DIR> Lista de tipo Directorio

<DIV> Capa

<DL> Lista de definición

<DT> Término a definir

-E-

<EM> Formato de Texto del tipo enfatizado

<EMBED> Para objetos encapsulados



-F-

<FIELDSET> Para los controles de un formulario

<FONT> Para cambiar las propiedades de las fuentes

<FORM> Para definir un formulario

<FRAME> Para la creación de marcos

<FRAMESET> Para crear el futuro marco

-H-

<H1 . . . H6> Titulares

<HEAD> Encabezado del documento

<HR> Crea una línea horizontal

<HTML> Indica que el documento es un código HTML

<HTMLAREA> Para delimitar un área de texto HTML en un formulario

-I-

<I> Formato de Texto del tipo cursivo

<IFRAME> Crea un marco flotante



<ILAYER> Crea una capa independiente

<IMG> Para la inserción de imágenes

<INPUT> Entrada de un formulario

<INS> Indica texto insertado

<ISINDEX> Celda de entrada de texto en buscadores

-K-

<KBD> Formato de Texto del tipo normal

<KEYGEN> Crea contraseñas para sitios seguros

-L-

<LABEL> Etiqueta

<LAYER> Capa

<LEGEND> Leyenda

<LI> Elemento de la lista

<LINK> Para enlazar

<LISTING> Listar



-M-

<MAP> Mapa de imágenes

<MARQUEE> Marquesinas

<MENU> Lista de tipo Menú

<META> Información de tipo Meta

<MULTICOL> Columnas múltiples

-N-

<NOBR> No saltar de línea

<NOEMBED> En el caso de no poder encapsular el objeto

<NOFRAMES> En el caso de no poder tener marcos

<NOLAYER> En el caso de no poder tener capas

<NOSCRIPT> En el caso de no poder ejecutar el código

-O-

<OBJECT> Inserta un objeto

<OL> Crea una lista Ordenada



<OPTGROUP> Reagrupa de forma óptima un formulario

<OPTION> Permite seleccionar una opción dentro de un formulario

-P-

<P> Para delimitar un párrafo

<PARAM> Parámetros de Applet o de objetos

<PLAINTEXT> Muestra el texto plano

<PRE> Muestra el texto sin formato

-Q-

<Q> Muestra una cita

-S-

<S> Muestra el texto tachado

<SAMP> Indica que es un ejemplo

<SCRIPT> Permite la inserción de código



<SELECT> Obliga a seleccionar de una lista de opciones

<SERVER> Código a ejecutar en el servidor

<SMALL> Hace la fuente más pequeñas

<SPACER> Inserta espacios

<STRIKE> Muestra el texto tachado

<STRONG> Hace el texto más gordo

<STYLE> Define el estilo del texto

<SUB> Subíndice

<SUP> Superíndice

-T-

<TABLE> Crea una tabla

<TBODY> Define el cuerpo de la tabla

<TD> Para insertar los datos de la celda

<TEXTAREA> Área de texto en un formulario

<TFOOT> Pie de la tabla

<TH> Celda de encabezado de la tabla



<THEAD> Encabezado de la tabla

<TITLE> Titulo del documento, también es aquel título que aparece en favoritos.

<TR> Fila de la tabla

<TT> Muestra el texto del estilo de una maquina de escribir

-U-

<U> Muestra el texto del estilo subrayado

<UL> Crea una lista desordenada (muestra los elementos con iconos)

-V-

<VAR> Variable para programación

-W-

<WBR> Salto de línea pre-autorizado

-X-

<XMP> Texto para ejemplos



Introducción al HTML.

Aprender a utilizar el HTML es considerablemente diferente de aprender a desarrollar software en algún lenguaje de programación. Es

un lenguaje de etiquetas, que permite dar indicaciones precisas al visualizador de páginas web, que lo ejecuta, de cómo debe presentarse el

documento en pantalla.

El lenguaje HTML, empezó siendo un lenguaje de texto, que comunicaba diferentes archivos gracias al hipertexto (pequeño texto

vinculado a otro texto, pudiendo estar este en otra zona de la página, o incluso en otra página. Con el paso del tiempo, este lenguaje se ha

ampliado añadiendo más que texto, pudiendo hacer enlaces a gráficos, sonido, vídeo, ... convirtiéndose en un documento multimedia.

Software necesario para el desarrollo y visualización

Para crear un archivo HTML, se necesita solamente un editor de texto ASCII, y para poder visualizarlo, basta con que se abra el archivo

con cualquier navegador de Internet.

Actualmente han aparecido numerosos editores de lenguaje HTML, ofreciendo ayudas sobre las etiquetas más usadas y con

descripción de sus propiedades. Pero no solo dependemos de editores para la creación de páginas Web, sino que también necesitamos de un

programa para retocar las imágenes que vamos a utilizar, a continuación se van a nombrar algunos de estos programas:



Navegadores o browser, para ver los resultados de las paginas que realizaremos como lo es el Internet Explorer (Actualmente es el

más usado), Netscape Navigator (El considerado por los informáticos como el mejor, y más fiable), y el nuevo navegador Opera (Que siendo

nuevo, se está haciendo poco a poco hueco en el mercado). Las páginas que haremos se podrán ver de forma diferente dependiendo del

navegador que se utilice, ya que para empezar, el Internet Explorer es un programa que se separó hace tiempo del estándar desarrollado por

la empresa de las 3w.

Programas de tratamiento de imágenes. Los programas de retoque fotográfico, de los que destaca el Adobe Photoshop. Los

programas de edición de imágenes de los que destaca el Corel Draw. Los programas para creación de animaciones, que pueden ser gif

animados (Gif Animator) o pueden ser animaciones Flash (Macromedia Flash), las diferencias que hay entre ambos son, que los primeros son

sucesión de imágenes y los segundos son animaciones programadas. Por último nombraremos los programas que combinan diferentes estilos,

el Paint Shop Pro, que además incluye un optimizador de tamaño que permite comparar las imágenes antes y después de la optimización.

Los Editores de texto que puede ir desde la sencillez del Bloc de Notas o Notepad, hasta la complejidad que podemos encontrar en

los programas como el CuteHtml, AceHtml, Spider, ... . Los programas específicos como editores de HTML, permiten desde corregir los fallos

que tenemos al rellenar las etiquetas, hasta completar trozos enteros de código, para hacer efectos de texto o sobre las imágenes.

Actualmente hay muchos programas que se encargan de dedicarse a partes diferentes en la creación de páginas web, como son los

editores de mapas de imágenes, los creadores de botones, los creadores de banners, los programas de creación de fondos de páginas, y los

que permiten componer la música de las páginas.

Es importante antes de empezar a trabajar, crear distintas carpetas que guarden cada una de los distintos elementos que compondrán

nuestra pagina Web, por ejemplo:

images: Almacenaremos aquí todas las imágenes que vamos a utilizar.

audio: Los archivos músicales que incluyamos.



Leyes básicas del lenguaje HTML

El lenguaje HTML es un lenguaje de etiquetas, también llamadas Tags (traducción al inglés), que se escribe en código ASCII, por lo

que puede realizarse desde cualquier editor de texto ASCII. El block de notas de Windows, es un procesador de textos, el Edit del DOS.

Las etiquetas están caracterizadas por estar escritas entre dos símbolos que delimitan a ésta, "<" y ">". Casi todas las etiquetas definen

al texto que se encuentra rodeado por ellas, teniendo para ello que crearse una etiqueta de apertura y otra de cierre.

El texto con el que se escribe la etiqueta puede ir tanto en minúsculas como en mayúsculas, pero se recomienda que esté la etiqueta

en mayúsculas, por cuestión de facilidad a la hora de leerlo. Si la etiqueta se escribe en mayúsculas y las propiedades de la etiqueta van en

minúsculas, es más fácil leer la etiqueta.

Para facilitar la lectura, se utilizan las tabulaciones, ya que estas tabulaciones permiten reflejar que etiqueta modifica al texto que se

encuentra más tabulado.

<ETIQUETA1> Inicio de la etiqueta1.

Texto modificado por la etiqueta 1

<ETIQUETA2> Inicio de la etiqueta2.

Texto modificado por las etiquetas 1 y 2.

</ETIQUETA2> Cierre de la etiqueta2.

Texto modificado por la etiqueta 1. </ETIQUETA1> Cierre de la etiqueta1.

Las extensiones que deben tener los documentos HTML a la hora de guardarse será o .htm o .html, siendo los dos válidos.



Nuestro primer Documento HTML

Para empezar, un documento HTML debe estar delimitado entre las siguientes dos etiquetas: <HTML> y </HTML>

Como gran división, debemos saber que todo documento HTML se divide en cabeza y cuerpo. Como veremos, el HTML está creado en

EEUU, y por lo tanto todas las etiquetas vendrán en inglés, o como abreviaturas de este idioma. La etiqueta para delimitar al encabezado será

<HEAD>, cerrandose con </HEAD>, utilizándose para delimitar el cuerpo las etiquetas <BODY> y </BODY>.

En el encabezado, se introducen todas las propiedades que tiene la página de cara al navegador. La más importante de todas las

etiquetas del encabezado es la etiqueta de título, que es la que permite a los navegadores poner títulos a las páginas , estos títulos no son

muy útiles a la hora de ver la página, pero si son bastante útiles cuando los tenemos como nombre en el menú de favoritos, debido a esto se

recomiendan títulos cortos y descriptivos que indiquen que página es la que se describe.

En el cuerpo se escribe todo lo que se va a mostrar en la página de cara al visitante de ésta: texto, imágenes, botones, vínculos, así

como sus características y efectos.

Por lo tanto ya tenemos la plantilla básica de un documento HTML, quedando esta de la siguiente forma:

<HTML>

<HEAD> <TITLE>Título de la página</TITLE></HEAD>

<BODY> El texto que se muestra en la página y sus características </BODY></HTML>



Etiquetas Básicas

Las etiquetas más utilizadas son aquellas que se encargan de dar un primer formato que nos dice si el texto es un encabezado, o

simplemente es un párrafo.

A continuación damos una lista de las etiquetas (tags) básicas, sin los atributos que pueden incluirse en ellas y que se describirán

cuando se haga la definición de la siguiente etiqueta.

Hay 7 tipos de encabezados que van desde <H1> ... </H1> a <H2> ... </H2>. La etiqueta H indica que estamos hablando de

encabezados, y el número del 1 al 7 nos indica la prioridad del encabezado, habrá que recordar que H1 es el encabezado de mayor tamaño,

frente al H7 que es el que tiene menor tamaño.

Si nos disponemos a escribir un texto que no sea encabezado, lo que podemos hacer es escribir un simple párrafo, HTML diferencia a

los párrafos haciendo un doble espacio entre dos párrafos diferentes. <P>texto</P> Es la forma más estándar de escribir el texto, y separar los

diferentes párrafos.

Una característica del HTML es que éste no es capaz de reconocer varios espacios seguidos, ni tabuladores, ni saltos de línea, ya que

para el HTML esos pueden servir para que el programador de HTML vea de forma más clara todo en su pantalla. Si se quisiera que varios

espacios seguidos quedasen reflejados en la vista del HTML, se deberían entonces utilizar las siguientes etiquetas: <PRE>texto</PRE>, que

son las utilizadas para el texto preformateado en el editor de texto.



Si quisiéramos tener un texto escrito con tabulación a ambos lados (acotado), tal y como se suelen escribir las poesías en los libros

para diferenciarlas del resto del texto, utilizaremos las siguientes etiquetas: <BLOCKQUOTE>texto</BLOCKQUOTE>

El aspecto del texto puede cambiar de tres formas muy sencillas además del texto normal, y se pueden combinar entre ellas. El aspecto

más utilizado es el de poner el texto en negrita, consiguiendo de esta forma que el texto coja bastante más fuerza y se diferencie del resto del

texto. <B>texto</B> B es la abreviatura de Bold.

Otro de los aspectos más usados es el que nos permite subrayar las frases, que siendo el más importante a la hora de escribir a mano,

pierde bastante importancia en la informática frente al texto en negrita. <U>texto</U> U es la abreviatura de Underlined.

El último de los modificadores de aspecto más útiles es el que pone el texto inclinado. Sabiendo que el aspecto más resaltado es el de

la negrita, y no utilizando el subrayado, ya que éste se suele dedicar a indicar los hipervínculos, el texto inclinado es aquel que se utiliza para

indicar que una frase es un slogan o cita célebre o simplemente para dar importancia a alguna palabra pero de fuerza menor a la que se

encuentra en negrita. <I>texto</I> La letra I es la abreviatura de Italic, ya que es este el nombre que posee el aspecto inclinado.

El tachado es un tipo de aspecto del texto que no se suele utilizar ya que no se utiliza salvo para detalles científicos. Con la etiqueta

<STRIKE>texto</STRIKE> se pueden tachar diferentes frases o formulas científicas, dejando ver lo que está mal y lo que está bien.

Una segunda modificación del texto, más especial, sería la que cambia el tipo de texto, por un tipo parecido al usado en los antiguos

ordenadores. <TT>texto</TT>.

Para tener el texto centrado en la página de forma horizontal, se utilizará la etiqueta. <CENTER>texto</CENTER>.

Una opción que no funciona en el navegador de internet Internet Explorer, es la que permite al texto parpadear. El efecto consiste en

mostrar el texto de forma intermitente, y eso se consigue con la etiqueta <BLINK>texto</BLINK>. Si estamos visualizando la página con un

navegador que no soporta la etiqueta <BLINK>, se verá como si no existiera.



Algo diferente es la etiqueta <BR> que nos permite hacer un salto de línea. Esta etiqueta no tiene cierre, ya que donde se coloca da el

salto, por lo que no necesita decir que es lo que va a saltar.

Aunque se utilizan últimamente imágenes para separar diferentes párrafos de texto diferentes, sigue utilizándose el <HR> como línea

divisoria que divide la página.

Tabla de caracteres

Todos los símbolos que aparecen a la derecha son diferentes para cada lenguaje, debido a eso se deben

representar por medio de palabras escritas, para escribirlas habrá que utilizar palabras que empiezan con ‘&’ y

deben terminar con ‘;’.

Si queremos escribir un espacio habrá que escribir

Para escribir ‘á’ á acute significa agudo y la ’a’ significa que es la letra a acentuar.

Para escribir ‘É’ É acute significa agudo y la ’E’ significa que es la letra a acentuar.

Para los símbolos <> utilizaremos < o > lt es el diminutivo de Lower Than y gt Greater Than.

Para escribir la € abrá que escribir €

Para escribir comillas utilizaremos "



Propiedades

Una etiqueta de BODY más o menos completa, sería la siguiente.

<BODY BACKGROUND="image.gif" BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#FF00FF"

ALINK="#FF0000" BGPROPERTIES="fixed">

La propiedad BACKGROUND nos permite utilizar una imagen de fondo de página.

La propiedad BGCOLOR nos permite utilizar un color para el fondo de la página, la propiedad BGCOLOR se utiliza con un código RGB

de dos cifras. Después de la #, se utilizan dos dígitos hexadecimales, para indicar la cantidad de color Rojo Verde y Azul que se va a utilizar.

TEXT nos permite definir el color del texto de la página, LINK, VLINK y ALINK, nos permiten definir el color de los vínculos, vínculos

visitados y vínculos activos. El color del vínculo es el que tienen todos los textos, el vínculo visitado es aquel que ya ha sido visitado, y por

último, el vinculo activo, es aquel que se está usando en ese momento.

BGPROPERTIES nos permite definir si el fondo no se mueve o se mueve con el scroll.

Una etiqueta de HR más completa, sería la siguiente:

<HR SIZE="n" WIDTH="nn" ALIGN="aaaaa" >

La propiedad SIZE nos permite en este caso definir el grosor de la línea.

La propiedad WIDTH nos permite definir la anchura de la línea de separación.

La opción ALIGN nos permite alinear la línea divisoria a la derecha (right) centro (center) o izquierda (left) de la página.



Etiquetas avanzadas

<FONT SIZE="n" COLOR="#RRVVAA" FACE="nombre1,nombre2,...,nombren”> ... </FONT>

La etiqueta FONT es una etiqueta que sirve para definir las características del texto que viene rodeado por ella. La propiedad SIZE

determina el tamaño de la letra, y viene definido por un número que va entre el 1 y el 7, o valores tipo +1 o –1 para valores relativos. La

propiedad COLOR indica el color que va a tener el texto. FACE va a definir el tipo de fuente que se va a utilizar, por si el ordenador que tiene el

usuario no dispone de ese tipo de letra, este va a tener que mostrar el tipo de fuente que viene después de la primera coma, y si no encuentra

ninguno de los tipos de letra de la propiedad FACE, cogerá aquel que el ordenador estime mejor, pudiendo ser este muy diferente en tamaño y

forma al escogido por nosotros, por eso se recomienda utilizar el tipo Times New Roman, Arial, Courier, Comic, o Sans-Serif.

<BIG>Texto</BIG> Esta etiqueta nos permite aumentar el tamaño de la letra con respecto al tamaño anterior.

<SMALL>Texto</SMALL> Al contrario que la anterior, esta etiqueta se encarga de disminuir el tamaño de la letra.

<SUB>Texto</SUB> Esta etiqueta nos permite escribir subíndices del tipo A2

<SUP>Texto</SUP> Con esta etiqueta podemos insertar superindices 23

Por último hay que destacar los conocidos como estilos lógicos, que nos permiten definir desde el código que es cada texto

etiquetado pero sólo se puede mostrar en la pantalla de cualquiera de las formas ya conocidas.



Listas

Hay dos tipos de listas bien diferenciadas dependiendo de su orden.

Las listas desordenadas son las más sencillas en cuanto a su forma, y se encuentran en la vida real como listas de la compra, listado

de tareas para hacer, ... .

UL es la traducción de UnOrdered List o lista desordenada. Mientras que LI sirve para List Item o elemento de la lista, necesitándose

uno para cada uno de los elementos.

<UL TYPE="DISC">

<LI>Espárragos</LI>

<LI>Acelgas</LI>

<LI>Tomate</LI>

</UL>

Las propiedades que tienen las listas desordenadas son las de el icono que acompaña a los distintos elementos. Hay tres tipos DISC,

CIRCLE y SQUARE, el primero hace un disco opaco, el segundo un círculo vacío y el tercero un cuadrado opaco, como el disco.

Las listas ordenadas permiten numerar los elementos de una lista, estas listas valen para enumerar los elementos, ordenarlos, y

pueden servir incluso para dar diferentes prioridades. La lista de los discos más vendidos sería una lista ordenada por prioridad.

OL es la traducción de Ordered List o lista ordenada, y también se necesita de el anterior LI



<OL START="1" TYPE="1">

<LI>España</LI>

<LI>Francia</LI>

<LI>Italia</LI>

</OL>

Las propiedades de las listas ordenadas coinciden en el elemento TYPE, pero con diferentes opciones, en una lista ordenada

aparecerá siempre alguna forma de numeración, debido a eso los tipos serán “1”, “a”, “A”, “i” y “I”. Con “1” la numeración será de 1, 2, ... . Con

“a” la numeración será de a, b, c, ... , pero si el tipo es de “A” la numeración será de A, B, C, ... . Como numeración más peculiar podemos

utilizar la del tipo “i” o “I”, que se diferencian en que está en minúsculas o mayúsculas, y que aparecerá como una secuencia de números

romanos, I, II, III, IV, V, ... .

La propiedad START, nos permite indicar por que numero se empiezan a contar los elementos. Si queremos numerar empezando por

2002, bastará con indicar en START=2002, y los elementos comenzarán desde este número incrementándose en cada nuevo elemento.

Un tercer tipo de lista es la que se llama Lista de Definición, y que es la que se encarga de listas elementos y descripción o definición

de cada uno de ellos.

DL significa Definition List o lista de definición; DT es el Definition Term o termino a definir, y DD es el Definition Data o dato de la

definición.



<DL>

<DT>Analista</DT>

<DD>Persona que decide lo que debe contener la página Web y como debe estructurarse.</DD>

<DT>Diseñador</DT>

<DD>Persona dedicada al diseño de la página</DD>

<DT>Programador</DT>

<DD>Persona que tomando el diseño y el análisis, consigue que todo funcione perfectamente, evita duplicidades,

caminos cerrados, y es el encargado de lograr todos los efectos complicados de JavaScript.</DD>

</DL>

Vínculos

Las páginas pueden tener muchos tipos de vínculos. Un vínculo es un trozo de texto o imagen que al ser pulsado muestra por la

pantalla algo relacionado con lo pulsado. El vínculo puede llevar a otra página, a una imagen o a otra zona de la misma página.

Para el vínculo es imprescindible la etiqueta <A>, que se llama ancla (anchor), en la cual se introduce el nombre de la página referida:

<A HREF="pagina.html">Texto enlace</A>

Si se pulsa sobre el Texto enlace, se abre en el ejemplo anterior la página llamada pagina.html en la misma ventana del navegador de

Internet que ya estaba abierta.



Si por el contrario se utiliza <A HREF="imagen.jpg">Texto enlace</A> al pulsar sobre el Texto enlace se abrirá en la misma ventana

la imagen a tamaño real.

Si quisiéramos ir a otra zona de la página, habrá que utilizar un marcador, gracias al marcador podremos decir al ordenador que nos

muestre el marcador por pantalla. Para ello se necesita hacer el marcador con <A NAME="aqui">Texto marcador</A>, y el vínculo con <A

HREF="#aqui">Texto enlace</A>. Si el vínculo se hace a una zona que se encuentra en otra página, habrá que especificar la página en la

cual hay que buscar el marcador <A HREF="pagina.html#aqui">Texto enlace</A>.

Si queremos que el vínculo vaya a una página que está en otra web, tendremos que incluir http, para indicar que hay que buscar la

página en Internet <A HREF="http://www.jlbv.com">Texto enlace</A>.

Si por el contrario, lo que queremos hacer es mandar un mensaje, podremos escribir la dirección de correo después de ‘mailto:’, pero

tendremos que saber que esta opción solo se puede usar en ordenadores con programa de correo instalado. <A

HREF="malito:[email protected]">Texto enlace</A>.

Tablas

Las tablas son una opción muy utilizada para maquetar la información, ya que nos permite hacer diferentes alineaciones para cada una

de las celdas. Las tablas también van a ser la forma utilizada por los buenos diseñadores para que toda la información se pueda ver

correctamente en ordenadores con diferentes resoluciones.



Una tabla se compone de filas y columnas. En HTML, existen filas y celdas. Para definir una celda habrá que definir primero la tabla,

después la fila, y dentro de la fila, se podrán definir todas las celdas que se encuentren dentro de la fila.

Para comenzar ha realizar una tabla comenzaremos por la etiqueta <TABLE>, propiedades que se pueden tener son la del Width y

Height, que nos indican la anchura y altura de la tabla con respecto a los pixeles, o al porcentaje del tamaño del contenedor de la página. La

etiqueta que se escribe después de <table> es la del comienzo de fila <TR>. Y dentro de la fila, habrá que introducir los datos de todas las

celdas mediante las etiquetas <TD> y su cierre </TD>. Estas etiquetas las repetiremos tantas veces como celdas tenga la fila. Al terminar la

fila utilizaremos </TR>. Y repetiremos esta operación hasta terminar la tabla, con lo que se escribirá </TABLE>.

Otra propiedad para la tabla, sería BORDER, que permitiría mostrar un borde alrededor de las celdas. La cantidad de border es la

misma que la anchura en pixeles del borde de la tabla. Un problema muy importante es que si queremos dar un borde a la tabla, o se lo

hacemos a toda la tabla o a nada.

introducción a internet.jlbv.com/html2002.pdf · grande, tal como edificios, una empresa, en...

Documents