Índice

 Cómo se establecen las bases de un sitio Web

 Cómo se nombra un sitio Web
 Diseño de la Página principal
 Inserción de archivos en una pág. Web
 Creación de una pág. Web adicional
 Inserción de Pág. Web creadas previamente.
 Eliminación de pág. Web
 Creación de marquesinas

Cómo se establecen las bases de un sitio

2. 2. 1. Un buen contenido

El contenido dependerá directamente de la temática del Web. La gran mayoría

de los usuarios que acuden a un sitio Web lo hacen en busca de información.
Da igual como se presente dicha información (texto, imágenes, vídeo, audio)
pero un Web debe aportar contenido. Es importante tener en cuenta que WWW
es un medio de comunicación distinto a los que hasta ahora conocíamos
(televisión, radio, prensa, etc.); el navegante pasa de página en página Web a
ritmo de clic de ratón, y generalmente pasa poco tiempo en una misma página.
Por lo tanto no se debe abusar de la información textual, ya que son muy pocos
los visitantes que se leen completamente una página Web. Siempre se ha
dicho que una imagen vale más que mil palabras, y aunque una página Web no
es un programa de televisión, las imágenes siempre son importantes.

2. 2. 2. Un buen Diseño

No es necesario ser un gran diseñador para crear páginas Web con un mínimo
de sensibilidad gráfica. A veces, un diseño simple se agradece mucho más que
una Web inundada de "gifs" en movimiento. El utilizar una tipografía
determinada, unos colores adecuados, iconos, fotos, etc. puede convertir la
experiencia de visitar un Web en algo mucho más agradable.

Es importante en el aspecto del diseño de un Web la estructuración del mismo.

Facilitar la navegación mediante menúes, iconos, mapas y otros elementos
puede evitar que más de un visitante se pierda dentro de un Web. En el caso
de crear un Web excesivamente grande y complejo resulta de ayuda para el
visitante la inclusión de mapas (esquemas con enlaces de hipertexto que
representan todo el Web) para no perderse.

2. 2. 3. Las imágenes en el diseño

La velocidad de acceso al Web está siempre muy reñida con el diseño. Es
frecuente el caso en que, para embellecer un Web se utilicen muchas
imágenes (en formatos gif o jpeg) de gran tamaño. Esto obliga a los usuarios
con conexiones lentas a sufrir largas esperas hasta que la información se
presente en pantalla, y eso es un riesgo porque más de dos saltarán a
cualquier otra dirección Internet antes de perder su tiempo.

La velocidad de la Web también dependerá en gran medida de lo saturadas

que estén las líneas de acceso a nuestro centro proveedor de presencia en
Internet (en resumen, el servidor donde se aloja el Web). Sin embargo este es
un problema que se escapa del ámbito del diseño.

2. 2. 4. Elementos Interactivos

La interactividad es fundamental para el éxito de un Web. Se debe evitar la

sensación "lectura de periódico" que puede causar en un visitante un Web
pasivo y lineal. Además la interactividad puede beneficiar a quien publica el
Web ya que a través de formularios podrá conocer mejor los perfiles de
quienes pasan por las páginas.

Podemos calificarlos como aspectos filosóficos a tener en cuenta en el diseño

de un Web.

2. 3. Etapas de Desarrollo de un proyecto de sitio Web

El desarrollo de un proyecto de sitio Web puede dividirse en tres etapas

principales:

Pre diseño,

Diseño,

Instalación y prueba.

El punto de vista desde el cual se analiza el proceso de diseño no es desde la

interrelación usuario-tecnología, sino como interacción humana, mediatizada
por la tecnología. Es decir, entender a la Web como medio de comunicación
entre personas. Esto nos debe ayudar a pensar permanentemente en "el otro",
la persona invisible y desconocida para quien hacemos la página Web.

De todas las palabras que utilizamos al hablar de Internet, la que más deben
tener en cuenta los diseñadores es la que designa al acto de instalar un sitio,
pensar en el público, pensar en cómo piensa el público.

Etapa de la conceptualización

Planificar la Web

Objetivos AJUSTE
Público Se corrigen los

Contenido elementos de

Estructura pre diseño que no

Visualización cumplen los requerimientos previstos

.Etapa de armado de páginas

Y configuración del sitio

"Hacer" la Web"

AJUSTE

Diseño de gráficos Se corrigen los

Diseño de páginas elementos de

Establecer links diseño que no

Internos y externos funcionan

Incorporar multimedia correctamente o no se

Incorporar archivos. Visualizan de acuerdo a lo esperado

Etapa de puesta en marcha

Correcciones y ajustes finales

"Hacer que todo funcione"

Prueba de todos los links

Prueba de funcionamiento de

Todos los elementos de multimedia.

Prueba de funcionamiento de

Formularios, e-mail, buscadores, etc.

Nombrando los archivos

Esto es con mucho una de las situaciones donde más se tropieza al principio.
Uno de los principales culpables de esto, es el hecho de venir de un entorno
UNIX o Macintosh, o quien usar un ordenador con Windows 95 instalado y
acostumbrado a los nombres largos de archivo. Estas estructuras de nombres
te permiten invocar a un archivo para hacer lo que tu quieras, sin que tengas
que preocuparte por la longitud, lógica, o relaciones entre el nombre y la
extensión.

Los principales problemas a la hora de nombrar un archivo son:

Archivos mal nombrados. Para permitir el acceso, los nombres de archivo

deben tener formatos específicos de nombre.

Nombres de archivo incomprensibles. Los nombres de archivo pueden causar

confusión si no creas un sistema que identifique claramente, al menos para ti,
lo que contiene cada archivo.

Nombres demasiados largos. Normalmente las URLs (direcciones http:// de

internet) suelen ser bastante largas, tenemos que procurar no hacerlas más
largas aún con nombres de archivo demasiado largos sin ninguna razón.

Nombres o extensiones inadecuados. Si no usas los adecuados localmente,

¿cómo funcionarán una vez que estén en Internet? Usa las extensiones
adecuadas.

Los prefijos o nombres, son la primera parte del nombre completo de un

archivo propiamente dicho. Nombran al archivo de forma individual. Los sufijos
sirven para identificar el tipo de archivo y se colocan detrás de un punto.

En el siguiente nombre de archivo, el prefijo o nombre es curso_1 y el sufijo o

extensión es html (que, junto con htm, son las 2 extensiones más típicas
usadas para los documentos HTML). Ambos están separados por un ".":

curso_1.html

Entendiendo esta simple estructura, se gana media batalla. Ahora te harás con
la segunda mitad mirando unos ejemplos de cada problema por separado.

Archivos mal nombrados

Para evitar problemas con nombres de archivo mal formados, sigue estas
simples reglas.

Falta del punto intermedio entre el nombre y la extensión

Peor

Manuelhtm

Mejor
manuel.htm

NUNCA uses un espacio en un nombre de archivo. Si alguna vez has hecho

esto en un Macintosh, habrás tenido problemas viendo los archivos localmente
y ejecutándolos posteriormente en Internet.

Peor

mi pagina web

Mejor

mipaginaweb.htm

En vez se espacios, puedes usar guiones normales o guiones bajos.

mi_pagina_web.htm

Mí-página-web.htm

No uses tildes, eñes y otros caracteres extraños (porcentajes, dólares, libras,

paréntesis, apóstrofes...)...

Peor

mi$página@(web).htm

Mejor

mipaginaweb.htm

Debes evitar usar el punto en otro lugar diferente al que está entre prefijo y
extensión de un nombre de archivo.

Peor

mi.pagina.web.htm

Mejor

mipaginaweb.htm

Hay que nombrar el archivo en minúsculas. Esto es muy importante en caso

que nuestro servidor tenga instalado el sistema operativo Unix/Linux, donde
pagina.htm, Pagina.htm y PAGINA.htm son 3 nombres de archivos diferentes
(a diferencia de los sistemas operativos Windows). En caso de tener un
sistema operativo Windows, ignoramos este fallo hasta que ponemos online
nuestra página web y vemos que nunca se encuentran los archivos.

Peor
Mi_PaginA-WEb.htm

Mejor

mi_pagina_web.htm

Nombres comprensibles

Una de las mejores formas de organizar los archivos es dándoles un nombre

comprensible. Esto se hace especialmente importante cuando empiezas a
manejar muchos archivos HTML en una única página WEB.

Puedes siempre asignar una determinada parte del web a un código de 2 o 3

letras que le den al nombre de archivo una identificación. Esto es algo que se
hace en los sitios web de mayor tamaño. Para sitios pequeños se usan
nombres simples.

Aquí tienes una serie de nombres de archivo de una página web personal
típica:

index.htm o inicio.htm
nuevo.htm
contacto.htm
bio.htm
fotos.htm
info.htm

Si se van a poner muchos nombres en el mismo sitio, se pueden usar unas

letras iníciales que diferencien las páginas del resto. Por ejemplo, usaremos la
letra f para páginas que contengan fotografías:

index.htm o inicio.htm
nuevo.htm
contacto.htm
bio.htm
f_viaje.htm
f_vacacion.htm
f_coche.htm
f_casa.htm
info.htm

Una forma mala de nombrar nuestros archivos sería:

index.htm
pagina1.htm
pagina2.htm
pagina3.htm
pagina4.htm

En este último caso, sólo tendremos confusiones al no saber qué contiene cada
página.

Diseño de un Página principal

El proceso del diseño web no siempre debe seguir unos pasos específicos y
rígidos, ya que cada proyecto tiene sus particularidades y habrá que adaptarse
a ellas como corresponda.

A pesar de ello, y para facilitar las cosas en esta tarea, sí que podemos decir
que existen algunos pasos ya definidos que en general te pueden ser de
utilidad si los sigues en la construcción de cualquier sitio web. Vamos a verlos
en detalle:

Planeación
Para comenzar debes determinar a qué público se dirige el sitio web. Esto
es esencial, porque mucho diseños y contenidos dependen de esto. Estás son
algunas preguntas que nos podemos hacer antes de comenzar: ¿Está dirigido
a niños o adultos? ¿Accede su público la red desde el trabajo, desde la escuela
o desde la casa? ¿Qué tan rápida es su conexión a la Internet? ¿Quieren ellos
estar informados o entretenerse? Asegúrate de responder estas preguntas
desde el inicio.

Arquitectura del sitio web

El sitio web debe estar bien organizado, tanto para el beneficio de los
visitantes como para el fácil mantenimiento. Planifica el sitio web en un tablero
o de forma esquemática, tipo diagrama de flujo. En este paso es donde vas a
realizar el mapa del sitio y la agenda de desarrollo.
No olvides que debes planear el sitio web de manera que realizar algún cambio
sea sencillo ya que la mayoría de los sitios Web cambian continuamente y un
sitio web bien planeado simplifica este proceso.

Diseño Gráfico
En este paso con la información ya recaudada en los pasos anteriores vas a
diseñar el aspecto del sitio web, es importante no confundir el diseño gráfico
para sitios web que el que se utiliza para impresos y otras áreas porque las
limitaciones técnicas (y la oportunidades) de las páginas web son extrañas para
la mayoría de los diseñadores entrenados en otros medios. Los requisitos de
tamaño de archivo, limitaciones de color y resoluciones de pantalla son muy
diferentes a aquéllos que se imprimen.

Programación del sitio web

En este paso el proyecto ya ha sido bien definido y el proceso de diseño gráfico
ya está. Ahora se programa la aplicación y la base de datos para juntarlo con el
diseño de la interface previamente definida.

Control de calidad
Todo profesional de diseño web debe tener este paso en su proceso, es muy
importante probar exahustivamente la aplicación diseñada para estar seguros
que no contiene errores. Siempre es mejor deterctar los errores del sitio web
antes de que los detecte tu cliente.

Hosting y mantenimiento
Este paso muchas veces depende del tipo de proyecto, pero para un proyecto
completo debes elegir un buen proveedor de hosting que incluya lo último en
velocidad y estabilidad, por ejemplo: Unix/FreeBSD, PHP, Apache, y MySQL.
Todo sitio Web necesita un mantenimiento constante. No cometas el error de
asumir que una vez está en línea, todo ya está hecho. Si quieres que las
personas regresen a tu sitio, deberás añadir material nuevo a su sitio web,
correo electrónico que responder, enlaces que actualizar y quizá estadísticas
de uso que seguir. Para un sitio pequeño, esto puede tomarle un tiempo tan
breve como dos o tres horas al mes.
El mantenimiento en un sitio grande puede ser un trabajo de tiempo completo,
por eso debes tener en cuenta el costo de un mantenimiento constante dentro
de tu presupuesto. Trabajar con las mismas personas asegura la consistencia;
una nueva compañía o persona no tendrá el mismo conocimiento de trabajo de
tu sitio web.

La presencia de archivos sonoros en forma de MIDI o WAV puede servir como

agradable banda sonora mientras se navega por el web, pero también puede
ser un pesado fardo que sirve sólo para hacer más lento el cargado y poner
nervioso al visitante. Como repetiremos a menudo en esta guía, no podemos
olvidar que aunque, sin lugar a dudas, una atractiva impostación gráfica y
musical de las páginas web es importante, es fundamental que la navegación
no llegue a ser lenta o incluso, en última instancia, imposible si nos preocupa
mínimamente nuestra cuenta de teléfono. Nuestro consejo es, por tanto, evitar
archivos MIDI grandes (60Kb de archivos MIDI, por ejemplo, resultan
exagerados) y enormes WAVE (que podemos sustituir con otros archivos más
ligeros, como veremos a continuación).
Tomemos un archivo MIDI; imaginemos que se llama "imagine.mid"; y
consideremos que queramos insertarlo como fondo de la página web nada más
abrirse ésta, automáticamente por tanto.
Antes de nada, debemos pensar que Navegador y MSIE utilizan marcas
diversas para llamar automáticamente un archivo MIDI de fondo.

Por ejemplo, la marca <BGSOUND> funciona sólo con MSIE pero no con
Navegador (LOOP indica el número de veces que debe repetirse el midi):

<BGSOUND SRC="imagine.mid" LOOP=INFINITE>

Además de los archivos MIDI, con la marca <BGSOUND> es posible insertar

archivos .WAV y .AU

Para permitir la apertura automática de un archivo audio también con

Netscape, hay que usar la marca <EMBED>:

<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80"

WIDTH="0" HEIGHT="0">

También en este comando además de los archivos MIDI es posible insertar

archivos .WAV y .AU

Una de las rémoras para la inserción de archivos midi en las propias páginas,
obedece al hecho de que, cada vez que se cambia página, el archivo musical
se interrumpe bruscamente. El problema no subsiste en los sitios divididos en
marcos (frames), ya que el archivo musical se carga en el marco fijo y, por
tanto, no cambia cuando se pasa página en los otros marcos. ¿Y por lo que
respecta a los sitios sin marco? Una pequeña estratagema que toma piede los
marcos puede ser la de construir una página con un marco "invisible".
Para ello, se crea una página con el siguiente código:

<FRAMESET rows="0,*" border=0 frameborder="0" framespacing="0">

<frame me name="alto" src="top.htm" noresize>

<frame me name="centrale" src="central.htm" noresize>

</FRAMESET>

donde en el marco "alto" insertaremos el código que invoca el archivo audio:

<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80"
WIDTH="0" HEIGHT="0">

y en el marco "central" el contenido de las páginas.

Otra "estratagema" para escuchar un archivo audio (SÓLO CON NETSCAPE)

de manera continua incluso cuando se cambia página, es el de cargar dicho
archivo en una ventana alternativa del navegador.
Para hacer esto, es necesario utilizar un pequeño pero importantísimo
TARGET.
Los TARGET se usan sobre todo en los marcos pero pueden usarse también
en otros casos. Así, por ejemplo, si queremos que una página asociada a un
enlace se cargue en una ventana distinta del navegador, tendremos que
insertar el TARGET="_new".
Pongamos que el midi para escuchar se llame "imagine.mid"; el código sería:

<A HREF="imagine.mid" TARGET="_new">Escucha el midi imagine.mid</A>

Haciendo clic se abrirá una ventana por defecto, la cual se colocará al lado de
la principal (aquélla desde la que se ha LANZADO el enlace). Aquí tienes el
ejemplo práctico:

Escucha el midi imagine.mid

Este procedimiento es válido sólo para Nestcape.

De este modo, el visitante podrá leer el texto que aparece en la finestra desde
la que ha lanzado el archivo "imagine.mid" y, mientras tanto, la otra ventana
producirá el midi. En el momento en que el visitante haga clic en otro midi para
escucharlo, éste se cargará automáticamente en la ventana precedente ya
abierta para "imagine.mid" (o sea, no se abrirán decenas de ventanas).

Desgraciadamente, esto funciona sólo con Netscape y no con MSIE. Para

atender las necesidades de los usuarios del navegador de Redmond es
necesario arquitectar un procedimiento algo más complejo, el cual consiste en
asociar al enlace no el simple archivo midi "imagine.mid" sino un archivo HTML
que contenga un comando EMBED que haga partir automáticamente el midi.

Creación de una pág. Web adicional

Introducción.

Primero de todo decir que lo que se va explicar a continuación será válido y

funcionará si se utiliza el DTD adecuado que para todos los temas de CSS
de grafikas.es son el XHTML Transitional y el Strict. Cualquier otro DTD o la
ausencia del mismo en el documento puede hacer inservible lo aquí explicado.

No se ha intentado mantener compatibilidad con IE5 dado que actualmente no

es usado por más de un 1% de los internautas. Aunque la mayoría de lo
explicado funcionará también en este navegador.

Durante años los diseñadores Web recurrieron al uso de tablas para la

colocación de los diferentes elementos de una página. Esta fue una buena
solución que permitió maquetar páginas que en apariencia estaban formadas
por varias columnas y otros montajes complejos, este sistema utilizaba tablas
anidadas que a muchos se les atragantaban y no conseguían entenderlas,
además su estructura no era clara y hacía que los robots de los buscadores no
las analizarán correctamente.

Algunos utilizábamos las capas para colocar los elementos de la página con
mayor precisión y en combinación con las tablas realizábamos nuestros
diseños. También las utilizábamos para mostrar o ocultar elementos y otras
cuestiones. Esto generaba páginas de estructura compleja dificiles de entender
para cualquiera que viera el código y estuviera aprendiendo.

Con las nuevas directrices de accesibilidad Web este tipo de maquetación esta
desaprobado y se recomienda el uso de capas (etiqueta div) para componer o
maquetar una página Web creando una estructura lógica de la página de fácil
seguimiento por cualquiera incluidos los robots. Este "nuevo" sistema hizo que
cada diseñador se las apañara como mejor le pareció para conseguir los
resultados deseados y eso dio lugar a que para lograr el mismo resultado
hubiera varias soluciones que se encuentran por doquier en Internet. Pero a la
hora de enseñar a alguien sin conocimientos previos de capas y CSS como
hacer esto no se pueden usar varios métodos (liaría más que aclarar nada),
además los diferentes códigos que aparecen van solucionando los problemas
de compatibilidad CSS de los diferentes navegadores sobre la marcha creando
mucho código confuso que no es aplicable en todas las circunstancias o aún
siéndolo es dificil discernir lo fundamental de lo accesorio.

Sin haber descubierto nada nuevo ni inventado nada lo que voy a tratar de
hacer aquí es exponer un método universal (que funcione en todos los
navegadores más utilizados ) que utilice el menos y más simple código posible
y explicar el proceso de la manera más sencilla para mi y espero que para
todos los que lean estos apuntes.

Capa fue el nombre que se empezó a utilizar para denominar a los elementos
creados con la etiqueta <div> usados para colocar en la página Web cualquier
otro elemento (imagen, tabla,párrafo,lista...), existía también la etiqueta <layer>
para el navegador Netscape de donde supongo vendrá la denominación de
capas (layers en Inglés) ya que div es la abreviatura de "division".
Bueno vamos al grano, para colocar los elementos de una página (imágenes,
textos, listas, tablas, formularios, etc ) utilizaremos unos "contenedores" que
además nos van a ayudar a dar estructura a nuestra página, estos
"contenedores" son las capas que crearemos con la etiqueta <div>. Para HTML
los elementos <div> son elementos de bloque y tienen todas las propiedades
de estos pero como los utilizamos para colocar (posicionar) los elementos de la
página las propiedades más específicas son las de posicionamiento:

Propiedad position con los valores posibles de relative, absolute , fixed o

inherit y cuyo uso es obligatorio en Ie7 y Firefox cuando queremos utilizar las
propiedades siguientes de la lista.

Propiedades top, left, bottom, right que definen las distancias al elemento
desde el borde superior, izquierdo, inferior y derecho de la ventana del
navegador.

Propiedad z-index con un valor numérico (1,2,3....) que indica el orden de

apilamiento es decir que capa está encima de otra un valor 3 indica que estará
encima de las capas con un valor 1 o 2, por ejemplo.

Utilizar este sistema cuando se crea la estructura de la página da más

problemas que ventajas, por lo menos es lo que me dice la experiencia, a la
hora de explicarselo a alguien. De hecho vamos a ver que para crear la
estructura de la página es mejor recurrir a otras propiedades diferentes a las de
posicionamiento.

El código explicado es válido para IE6,IE7,Firefox 2 y navegadores que se

adapten a las recomendaciones del w3. Se ha mantenido la compatibilidad con
IE6 debido al elevado porcentaje de usarios de esta mala versión de Internet
Explorer.

Crear la estructura de una página con varias columnas.

Empezamos con la estructura básica de las columnas sin más y veremos como
a partir de esta llegamos a crear cualquier combinación.

Supongamos que deseamos tres columnas, dos laterales del mismo tamaño y
una central más grande que utilizaremos para colocar nuestros contenidos.

1.- Empezaremos creando las tres capas mediante etiquetas div, como dos de
ellas serán iguales usaremos una clase para definir sus propiedades mientras
que para la otra utilizaremos el atributo id (si todas son diferentes utilizaríamos
el atributo id para todas ). En el cuerpo del documento ponemos:

El resultado será el siguiente:

Columna Izquierda
Columna Central

Columna Derecha

Los contenidos se disponen unos encima de otros según el orden en el que se

escribieron en el cuerpo del documento, además ocuparán el ancho total de la
página ya que son elementos de bloque para verlo vamos a ponerles color de
fondo.

Esto me recordó bastante el aspecto de una lista de elementos y cómo para

ponerlos en fila utilizamos la propiedad float pues pensé hacer lo mismo. Así
que vamos a utilizar la propiedad float con el valor left para poner las capas en
fila y también debemos darles el tamaño que necesitemos, normalmente sólo el
ancho ya que el alto solemos dejarlo sin definir para que vayan creciendo en
función del contenido, pero en este caso al ser un ejemplo lo vamos a fijar. En
cuanto al ancho puede darse en porcentaje de la página y de esa manera
siempre ocuparán el mismo área de la ventana del navegador.

Después de realizar nuestra primera práctica continuamos los enlaces

hipertexto con unos elementos muy relacionados con ellos: las anclas, que nos
permitirán crear enlaces especificando a que lugar concreto de una página
queremos saltar.

Inserción de Página Web creadas previamente

Un enlace normal tiene la estructura que podemos ver en la figura 7.1.
Desde una página cualquiera y en cualquier lugar de ella se escribe el código
para crear un enlace. Cuando se pulsa sobre el texto activo se salta al
comienzo de otra página, tal y como indica la flecha. Usando enlaces a anclas
se puede cambiar este comportamiento.

Un ancla es una marca que se sitúa en un punto determinado de una página.

Posteriormente se podrá crear un enlace a ese ancla de manera que al pulsar
sobre el texto apropiado en vez de saltar a otra página se salta al lugar donde
esté el ancla, es decir, ya no se va al comienzo de la página como con los
enlaces vistos hasta ahora. Dicho de otra forma usando anclas es posible que
un enlace apunte al lugar concreto de una página que se desee.

Creando anclas

Para crear anclas usamos, al igual que para crear enlaces, la etiqueta <a>, sin
embargo no debe confundirse el lector porque aunque ambos elementos estén
relacionados y se use la misma etiqueta para crearlos las funciones de cada
uno son radicalmente diferentes. Las anclas sólo son marcas y son invisibles
cuando visualizamos la página con el navegador. Por esta razón las anclas no
definen ningún texto activo.
A pesar de ello es habitual encontrar texto entre las instrucciones de inicio y de
fin como en el siguiente ejemplo:

<a name="nombre Ancla">Comienzo</a>

Este texto no tiene ningún significado especial y será interpretado por los
navegadores de igual forma que el texto de alrededor.

Como se ha adelantado en el ejemplo anterior, al crear anclas no se emplea el

atributo 'href'. En su lugar se usa otro llamado 'name'. Con este atributo se da
un nombre al ancla que luego nos servirá para referirse a ella.

Un ejemplo donde la utilidad de las anclas se hace evidente es en aquellas

páginas en las que nos encontramos una lista ordenada alfabéticamente. Si la
lista es muy larga moverse hasta la letra S, por ejemplo puede hacerse
molesto. Pero usando anclas el autor de la página puede incluir todas las letras
al principio de manera que si se pulsa sobre una letra se salta al lugar de la
lista donde empiecen las entradas de la letra S. En la figura 7.2 podemos ver
un ejemplo real capturado de la página del buscador español OZÚ.

En este caso se detallan todas las secciones del Web ordenadas

alfabéticamente. Al principio de la página hay un listado con todas las letras del
abecedario de manera que al pulsar sobre una letra vas al lugar de la página
donde están las secciones que empiezan con esa letra. ¿Cómo se hace esto?
Es muy sencillo, el proceso consta de dos pasos:

Primero hay que insertar el ancla en el lugar de la página donde se quiere

poder saltar. Tomando como ejemplo una página web que contiene un
diccionario se emplearía el siguiente código:
</style> Principio del formulario

Eliminar de páginas web

La información de este tema de Ayuda se aplica a Windows Internet Explorer 7

y a Windows Internet Explorer 8.

A medida que explora la Web, Internet Explorer almacena información sobre

los sitios que visita y la información que los sitios suelen pedirle que
proporcione (por ejemplo, el nombre y la dirección). Internet Explorer almacena
los siguientes tipos de información:

Archivos temporales de Internet

Cookies

El historial de los sitios que ha visitado

Información que haya especificado en sitios web o en la barra de direcciones

(que incluye, entre otros datos, su nombre, dirección y las direcciones de los
sitios web que ha visitado con anterioridad)

Contraseñas web guardadas

Información temporal almacenada por los complementos del explorador

Independientemente de si elimina todo el historial de páginas web o

simplemente las cookies, deberá cerrar Internet Explorer cuando termine de
borrar las cookies de la sesión de exploración actual que aún permanecen en la
memoria. Esto es de especial importancia cuando se usa un equipo de uso
público. La eliminación del historial de exploración no elimina la lista de
favoritos ni las fuentes suscritas. Eliminar el historial podría tomar un tiempo si
tiene muchos archivos y un amplio historial.

Notas

Puede usar la función de Exploración de InPrivate de Internet Explorer para

evitar que se cree un historial mientras explora la Web. Para obtener más
información, consulte ¿Qué es la Exploración de InPrivate?

Puede eliminar toda la configuración que haya cambiado desde la instalación

inicial de Internet Explorer, incluido el historial de exploración. Para obtener
más información, consulte Restablecer configuración de Internet Explorer 8.
Creación de Marquesinas

Cuando de HTML se trata, una marquesina animada consiste en una línea de

texto que se desplaza por la pantalla de izquierda a derecha, de derecha a
izquierda o en ambas direcciones alternativamente. La etiqueta específica de
Internet Explorer MARQUEE nos permitirá crear este tipo de marquesina con
gran facilidad y rapidez. No serán necesarias imágenes ni vídeos. Tal y como
ocurría con las dos extensiones que acabamos de ver, la etiqueta MARQUEE
sigue siendo específica de Explorer y no es soportada por ningún otro
navegador ni ha sido aceptada por el estándar HTML 4.0

El funcionamiento de esta etiqueta es muy sencillo, consta de una instrucción

de inicio y otra de fin, entre ellas debemos escribir el texto que queremos que
se desplace. Por ejemplo:

<MARQUEE>

Me estoy moviendo

</MARQUEE>

Si visualizamos este código con Internet Explorer veremos aparecer el texto

"Me estoy moviendo" por la derecha de la pantalla y desplazarse hacia la
izquierda hasta llegar al borde izquierdo de la pantalla. Entonces volvería a
aparecer de nuevo por la derecha y así indefinidamente. Es difícil plasmar con
una figura el movimiento de la marquesina, por esta razón hemos incluido
todos los ejemplos de esta sección en el en el archivo marquee.htm. Además
en la figura 10.8 hemos capturado una página con este código en siete
instantes de tiempo consecutivos para que el lector pueda hacerse una idea del
funcionamiento de la marquesina animada:

Figura 10.8. La marquesina animada muestra un texto que va moviéndose de

derecha a izquierda en la ventana del navegador. En esta figura vemos 7
momentos consecutivos.

El texto de una marquesina se sitúa siempre en una nueva línea, y el es

mostrado con las mismas características que sería cualquier texto normal de la
página, por ello podemos usar las etiquetas para formatear texto que
conocemos para cambiar el formato del texto de una marquesina. Por ejemplo
para conseguir un encabezado de tamaño 1 moviéndose podríamos usar:

<H1>

<MARQUEE>
 Me estoy moviendo

</MARQUEE>

</H1>

Igualmente podemos cambiar el color o el tipo de fuente del texto encerrando la

marquesina con la etiqueta FONT:

<FONT COLOR="#FF0000"

FACE="Arial"

SIZE="4">

<MARQUEE>

Me estoy moviendo

</MARQUEE>

</FONT>
Internet Explorer 3.0 ignora todo el código HTML existente entre la
instrucción de inicio, <MARQUEE>, y la instrucción de fin, </MARQUEE>.
Sin embargo en Internet Explorer 4.0 esta política ha cambiado y es posible
usar las etiquetas formateadoras de texto o saltos de línea en su interior.
Por esta razón debemos tener en cuenta que si usamos estas nuevas
posibilidades los usuarios de Internet Explorer 3.0 (que son muchos) no
podrán apreciar el formato del texto.