introducción a internet.jlbv.com/html2002.pdf · grande, tal como edificios, una empresa, en...
TRANSCRIPT
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 2 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 3 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 4 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 5 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 6 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 7 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 8 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 9 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 10 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 11 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 12 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 13 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 14 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 15 Mayo 2002
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:
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 16 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 17 Mayo 2002
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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 18 Mayo 2002
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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 19 Mayo 2002
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. .
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 20 Mayo 2002
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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 21 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 22 Mayo 2002
Una vez creada la conexión, tendremos simplemente que dar
a Finalizar.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 23 Mayo 2002
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:
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 24 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 25 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 26 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 27 Mayo 2002
Navegadores de Internet
· Netscape Navigator e Internet Explorer: Descripción de las ventanas.
Operaciones básicas. Ejemplos de navegación. Otras opciones.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 28 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 29 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 30 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 31 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 32 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 33 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 34 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 35 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 36 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 37 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 38 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 39 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 40 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 41 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 42 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 43 Mayo 2002
Otras aplicaciones de Internet
· Aplicaciones de FTP para la transferencia de archivos.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 44 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 45 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 46 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 47 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 48 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 49 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 50 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 51 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 52 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 53 Mayo 2002
- 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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 54 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 55 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 56 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 57 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 58 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 59 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 60 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 61 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 62 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 63 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 64 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 65 Mayo 2002
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"> <!-- vers = 1.0; // --> </script> <script language="JavaScript1.1"> <!-- vers = 1.1; // --> </script> <script language="JavaScript1.2"> <!-- vers = 1.2;// --></script> <script language="JavaScript">if (vers == 1.2){}else if (vers == 1.0){}</script >
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 66 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 67 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 68 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 69 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 70 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 71 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 72 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 73 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 74 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 75 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 76 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 77 Mayo 2002
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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 78 Mayo 2002
-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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 79 Mayo 2002
<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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 80 Mayo 2002
-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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 81 Mayo 2002
<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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 82 Mayo 2002
-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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 83 Mayo 2002
<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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 84 Mayo 2002
<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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 85 Mayo 2002
<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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 86 Mayo 2002
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:
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 87 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 88 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 89 Mayo 2002
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>
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 90 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 91 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 92 Mayo 2002
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 "
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 93 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 94 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 95 Mayo 2002
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
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 96 Mayo 2002
<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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 97 Mayo 2002
<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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 98 Mayo 2002
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.
Diseño de Páginas Web Juan Luis Bueno Vera
[email protected] Pág. 99 Mayo 2002
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.