USABILIDAD WEB

¿Qué es?

La facilidad con la que los usuarios pueden acceder a las distintas herramientas de una página

Características principales

Facilidad de aprendizaje: define en cuánto tiempo un usuario, que nunca ha visto una interfaz, puede aprender a usarla bien y realizar operaciones básicas.

Facilidad y Eficiencia de uso: determina la rapidez con que se pueden desarrollar las tareas, una vez que se ha aprendido a usar el sistema.

Facilidad de recordar cómo funciona: se refiere a la capacidad de recordar las caractersticas y forma de uso de un sistema para volver a utilizarlo a futuro.

Frecuencia y gravedad de errores: plantea la ayuda que se le entrega a los usuarios para apoyarlos cuando deban enfrentar los errores que cometen al usar el sistema.

Satisfacción subjetiva: indica lo satisfechos que quedan los usuarios cuando han empleado el sistema, gracias a la facilidad y simplicidad de uso de sus pantallas.

Áreas relacionadas

Útil: es necesario preguntarnos si nuestros productos y sistemas son útiles, y aplicar nuestro conocimiento para definir soluciones innovadoras que apoyan la utilidad.

Usable: corresponde a la facilidad de uso o Usabilidad sigue siendo un aspecto fundamental, necesario pero no suficiente, por lo que se debe complementar con las demás facetas.

Deseable: si bien los sitios deben ser eficientes, en particular con el uso de medios ms complejos (imágenes, sonidos, animaciones), esto se debe equilibrar con los demás valores del diseño emocional.

Encontrable: los Sitios Web deben ser navegables y permitir que los usuarios puedan encontrar lo que necesitan.

Accesible: los sitios Web deben ser accesibles a las personas con discapacidades (más de 10% de la población). Para los Sitios Web de Gobierno ya es un requisito normativo.

Creíble: la credibilidad es uno de los factores más importantes de tener en cuenta y por ello se deben revisar los elementos de diseño que afectan la confianza que nos tienen los usuarios.

Valioso: las facetas ayudan a determinar los aspectos que llevan a que nuestros sitios ofrezcan valor para nuestros usuarios.

Consejos o puntos a tener en cuenta

1. Accesibilidad

Hay que tener en cuenta los distintos factores que impiden al usuario acceder satisfactoriamente a nuestra página

        1.1 Tiempo de carga razonable: La velocidad de carga ayuda al posicionamiento, a parte, el usuario está acostumbrado a páginas rápidas, por lo tanto no va a estar dispuesto a exceder su límite de tiempo de espera.

         1.2 Contraste de textos con el fondo: Algunos contrastes de colores del texto respecto del fondo no permite legibilidad, es recomendable por tanto usar contrastes altos, a poder ser de negro sobre blanco.

         1.3 Tamaño y espacio entre caracteres: La letra demasiado pequeña o junta impide una legibilidad adecuada, lo mismo con el interlineado. No obstante, tampoco deberán estas demasiado separadas las palabras o las líneas unas de otras dado que produce el mismo efecto.

         1.4 Flash: El flash puede quedar muy visual y estético, no obstante las páginas elaboradas con flash tardan en cargar, por lo tanto, no es cuestión de negar su uso, pero no de abarcarlo en toda la extensión de la página. Además, concretamente para los usuarios ciegos, es imposible navegar por ellas de forma adecuada, deberán llevar algo adicional para que sepan qué hay en ellas

         1.5 ALT: no solamente para los usuarios invidentes es importante éste contenido, sino también para el posicionamiento de la página respecto a su búsqueda

          1.6 Página 404 personalizada: Deberemos personalizar ésta página de error que aparece por defecto con enlaces para que el usuario no se pierda, a parte de la buena imagen que esto proporciona

2. Identidad

Una pregunta importante que se hace todo usuario al llegar a una página es ¿Quienes son?Hay que proporcionar por tanto una información veraz, adecuada y confiable

          2.1 Logo: El usuario espera ver el logo de la empresa arriba a la izquierda y, al hacer click en él, ir a la página principal

          2.2 ¿Qué hacemos?: Hay que proporcionar información clara acerca de aquello a lo que se dedica nuestra empresa

          2.3. Página principal sencilla: Fácil de entender y con pocos elementos, es una presentación del resto de contenidos de nuestra página y no debemos recargarla de información, es recomendable poner el resto en distintas secciones ordenadas en un menú visible y fácil de acceder desde cada punto de nuestra página.

      2.4 ¿Quienes somos?: Alguien que desea comprar uno de nuestros productos o establecer una relación comercial con nosotros, se preguntará quienes somos y si somos confiables, por lo tanto, como en los anteriores puntos acerca de nuestra imagen corporativa, deberemos dar información veraz y confiable

          2.5 Contactar: debe encontrarse fácilmente y aparecer de forma clara la página de contacto

3. Navegación

De una vez el usuario sabe quienes somos y qué hacemos, deberemos facilitarle la navegación por el resto de la información que deseamos mostrarle sin opción a que pueda perderse en ningún momento.

           3.1 Navegación principal: 

Siempre debe existir un menú de navegación principal para evitar que el usuario se pierda

           3.2 Simplicidad: 

Ser claro y conciso es la clave, no es necesario una sección que se llame "comunícate con nuestro equipo", "contactar" ocupará menos y será más entendible

          3.3 Número de elementos:

 Los psicólogos no se ponen de acuerdo con el numero máximo de elementos que el cerebro puede procesar de forma inconsciente y ágil, pero el número suele estar de 4 a 7. Así pues, los enlaces o botones de los menús, que se limiten a esos varemos, o mejor pensar en otra distribución.

          3.4 Link del logo a homepage:

Como dijimos, el usuario espera que sea así, a parte facilitaremos la navegación

         3.5 Enlaces coherentes e identificables: 

deberán guardar la misma estética para distinguirlos bien y no enviarnos a una sección o página diferente a la que especifican

         3.6 Búsqueda: 

El formulario de búsqueda no solo debe ser visible, sino que los resultados deben ser relevantes y tan cuidados como cualquier otra sección de la web.

4.Contenido

Un buen contenido debe ser fresco, relevante, coherente, organizado y de fácil acceso

              4.1 Encabezados: 

Prácticamente ningún usuario lee una web, a no ser que se trate de un web de contenidos, como  blogs, revistas o prensa. En las páginas corporativas, nadie lee de arriba a abajo las paginas, sino que suelen hacer una lectura en diagonal, fijándose en los 

encabezados, inicios de párrafos, listas y negritas, buscando lo que les interesa. Así pues, 

usemos las etiquetas H pensando en ese comportamiento.

               4.2 Información importante antes del scroll:

 La mayoría de mortales tienen un monitor de 1024×768. Piensa en eso cuando diseñes o organices la información, y mantén la información critica e importante por “encima” del scroll. Es decir, que el usuario no tenga que utilizar las barras de desplazamiento verticales ni, por supuesto, horizontales.

                4.3 Coherencia en los estilos:

Elige un estilo y cíñete a él. Colores, fuentes y cualquier estilo. No cambies el tipo de color 

de los encabezados, enlaces o párrafos de una sección a otra, o uses plantillas distintas, 

ya que puede confundir al usuario.

                 4.4 Negrita:

Intentando destacar demasiada información, no destacas nada. Si colocas demasiado 

texto en negrita, al final no se aprecia lo que realmente es importante. Lo mismo con las 

novedades de la web. Si la mitad de los apartados del menú están acompañadas por un 

“nuevo!” parpadeante en rojo, ya nada es nuevo.

                  4.5 Anuncios y pop-ups:

Los anuncios deben estar muy bien integrados en el contenido de la web, sin 

“confundirlos” con el mismo. Tampoco fuerces auncios encima del contenido, ni pop-ups 

intrusivas. El usuario odia ese tipo de comportamiento.

                 4.6 Se conciso y explicativo:

Mira tu homepage. ¿Puedes decir lo mismo con la mitad de palabras? Pues hazlo. Se 

conciso y descriptivo, y evita argot innecesario. A nadie le importa que “busques la 

excelencia de la productividad” o que “aproveches sinergias interdepartamentales”.

               4.7 URL amigables:

Las URLs deben ser compresibles y significativas. Ya sabemos que funciona muy bien 

con el SEO, pero también para la experiencia del usuario.

              4.8 Títulos auto explicativos:

Los títulos de cada página (los de la etiqueta TITLE) deben ser descriptivos, únicos 

y relevantes. No solamente una retahíla de palabras clave embutidas. No solo los 

buscadores los pueden ver “sospechosos”, sino también los usuarios, que ante esa 

posibilidad, pasaran  la siguiente web de la página de resultados.

Hasta ahí esos 25 puntos clave, básicos y tan importantes. Como os decía, el checklist 

es de UserEffect, y os podéis bajar el PDF aquí. Evidentemente, es ampliable y 

personalizable en función de las necesidades de cada cliente, pero es un buen punto de 

partida. Lo mejor es que lo paséis a Excel, y los modifiquéis según convenga.

Herramientas útiles

Comprobar estado del dominio y seguridad http://sucuri.net/

Herramientas webmaster http://www.google.es/intl/es/webmasters/

Google developers, make the web faster https://developers.google.com/speed/?hl=es

   

ACCESIBILIDAD WEB

   ¿Qué es?

Hablar de Accesibilidad Web es hablar de un acceso universal a la Web, independientemente del tipo de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades de los usuarios.

Con esta idea de accesibilidad nace la Iniciativa de Accesibilidad Web, conocida como WAI (Web Accessibility Initiative). Se trata de una actividad desarrollada por el W3C, cuyo objetivo es facilitar el acceso de las personas con discapacidad, desarrollando pautas de accesibilidad, mejorando las herramientas para la evaluación y reparación de accesibilidad Web, llevando a cabo una labor educativa y de concienciación en relación a la importancia del diseño accesible de páginas Web, y abriendo nuevos campos en accesibilidad a través de la investigación en este área.

¿Cómo funciona?

Para hacer el contenido Web accesible, se han desarrollado las denominadas Pautas de Accesibilidad al Contenido en la Web (WCAG) Cada punto de verificación está asignado a uno de los tres niveles de prioridad establecidos por las pautas.

Prioridad 1: son aquellos puntos que un desarrollador Web tiene que cumplir ya que, de otra manera, ciertos grupos de usuarios no podrían acceder a la información del sitio Web.

Prioridad 2: son aquellos puntos que un desarrollador Web debería cumplir ya que, si no fuese así, sería muy difícil acceder a la información para ciertos grupos de usuarios.

Prioridad 3: son aquellos puntos que un desarrollador Web debería cumplir ya que, de otra forma, algunos usuarios experimentarían ciertas dificultades para acceder a la información.

En función a estos puntos de verificación se establecen los niveles de conformidad:

Nivel de Conformidad "A": todos los puntos de verificación de prioridad 1 se satisfacen.

Nivel de Conformidad "Doble A": todos los puntos de verificación de prioridad 1 y 2 se satisfacen.

Nivel de Conformidad "Triple A": todos los puntos de verificación de prioridad 1,2 y 3 se satisfacen.

Características de web accesible

Transformable: La información y los servicios deben ser accesibles para todos y deben poder ser utilizados con todos los dispositivos de navegación.Comprensible: Contenidos claros y simples.Navegable: Mecanismos sencillos de navegación.

Diez cosas consejos rápidos

1. Imágenes y animaciones: Use el alt atributo para describir la función de cada visual.
2. Los mapas de imagen. Utilice el lado del cliente mapa y el texto para las zonas activas.
3. Multimedia. Proporcione subtítulos y transcripción de audio, así como descripciones de video.
4. Los enlaces de hipertexto. Usar texto que tenga sentido cuando se lea fuera de contexto. Por ejemplo, evite "pincha aquí".
5. Organización de las páginas. Use encabezados, listas y estructura consistente. Usar CSS para el diseño y estilo, donde sea posible.
6. Gráficos y tablas. Resumir o usar el longdesc atributo.
7. Scripts, applets y plug-ins. Proporcionar contenido alternativo si las funciones nuevas no son accesibles.
8. Frames. Utilice la noframes elemento y títulos con sentido.
9. Tablas. Haga línea por línea de la lectura sensata. Resumir.
10. Revise su trabajo. Validar . Utilice herramientas, lista de comprobación y pautas en http://www.w3.org/TR/WCAG

                                           

Herramientas útiles:

Validador W3c http://validator.w3.org/

Total validator http://www.totalvalidator.com/

Proceso de validacion en dreameaver http://librosweb.es/xhtml/capitulo_13/validacion_con_dreamweaver.html

Validador TAW http://www.tawdis.net/

MARQUESINAS

¿Qué son?

Las marquesinas son texto en movimiento. Ya funciona con ambos navegadores (hasta hace poco Netscape no lo implementaba, el 7 ya lo hace).

La etiqueta es <MARQUEE>, un texto a desplazar y su cierre </MARQUEE>. Sin atributos quedará:

<BODY> <MARQUEE> Aquí pongo el texto</MARQUEE> </BODY>

Aquí pongo el texto

Así vemos los que tiene por defecto y que son: ocupa todo el ancho del cuadro, tiene la altura de la línea de texto y va de derecha a izquierda.

Podemos poner varias frases si colocamos <P> o <BR> dentro.

<BODY> <MARQUEE> Aquí pongo un texto <P> Y aquí otro </MARQUEE> </BODY>

Aquí pongo el texto Y aquí otro

Vamos a empezar a meter atributos y a cambiar un poco la cosa.

Empezamos con las medidas que son las viejas conocidas WIDTH y HEIGHT que toman valores en píxeles o en porcentajes de pantalla.

<BODY> <MARQUEE WIDTH=70% HEIGHT=40> Aquí pongo el texto </MARQUEE> </BODY>

Que se verá con 70% de ancho (del cuadro azul que para los efectos es como si fuera la pantalla completa) y 40 px de alto.

Aquí pongo el texto

El color de fondo quedará curioso. Echamos mano del atributo BGCOLOR.

<BODY> <MARQUEE BGCOLOR=#7070ff> Aquí pongo el texto </MARQUEE> </BODY>

Aquí pongo el texto

No funciona con imágenes como fondo.

No he conseguido alinear el texto que rodea al cuadro de marquesina con la vieja ALIGN, que toma valores de top, bottom, middle, left y right. Según todos lo manuales debería funcionar como lo hacían en la etiqueta <IMG> pero no me funciona con Explorer 6 y con Netscape 7 hace cosas raras.

El atributo BEHAVIOR es el que da más juego, su valor por defecto es scroll que significa que aparece por la derecha, se va a la izquierda y de forma continuada. Si le damos el valor slide y alternate tenemos:

<BODY> <MARQUEE BEHAVIOR=slide> Aquí pongo el texto </MARQUEE> </BODY>

Aquí pongo el texto

Para verlo funcionar actualiza la página ya que al pararse y funcionar sólo una vez, no lo vemos.

<BODY> <MARQUEE BEHAVIOR=alternate> Aquí pongo el texto </MARQUEE> </BODY>

Aquí pongo el texto

DIRECTION servirá para definir hacia donde mando el texto que, por defecto, va hacia la izquierda. Yo puedo mandarlo a la derecha así:

<BODY> <MARQUEE DIRECTION=right> Aquí pongo el texto </MARQUEE> </BODY>

Aquí pongo el texto

O hacia arriba o abajo con down y up.

<BODY> <MARQUEE HEIGHT=50 DIRECTION=up> Aquí pongo el texto </MARQUEE> </BODY>

Aquí pongo el texto

La velocidad de desplazamiento varía con SCROLLAMOUNT, que marca los saltos según el valor numérico; y SCROOLDELAY que determina el retraso en el movimiento en milisegundos. Veámoslo:

<BODY> <MARQUEE SCROLLAMOUNT=40> Aquí pongo el texto </MARQUEE> </BODY>

Aquí pongo el texto

Mareante...

<BODY> <MARQUEE SCROLLDELAY=1000> Aquí pongo el texto </MARQUEE> </BODY>

Aquí pongo el texto

Y este desespera (le he puesto 1000, que es un segundo).

El atributo LOOP (indefinido por defecto, como ya hemos visto), define el número de veces que vamos a ver moverse el texto.

<BODY> <MARQUEE LOOP=2> Aquí pongo el texto </MARQUEE> </BODY>

Aquí pongo el texto

Tendremos que actualizar la página.

Los atributos HSPACE Y VSPACE los conocemos, definirían el espacio horizontal y vertical del texto fuera de la marquesina.

<BODY> <MARQUEE BGCOLOR=yellow VSPACE=20> Aquí pongo el texto </MARQUEE> Otro texto. </BODY>

Aquí pongo el textoOtro texto

Ni que decir tiene que podemos aplicar otras etiquetas como la de centrado, por ejemplo. Le pondremos color para que se distinga del fondo.

<BODY> <CENTER> <MARQUEE WIDTH=50% BGCOLOR=#ffff00> Aquí pongo el texto </MARQUEE> </CENTER> </BODY>

Aquí pongo el texto

Mira esto que bonito que queda con la etiqueta <FONT>:

<BODY> <CENTER> <MARQUEE WIDTH=70% BGCOLOR=#ffff00> <FONT FACE=arial COLOR=red SIZE=5> Aquí pongo el texto </FONT> </MARQUEE> </CENTER> </BODY>

Aquí pongo el texto

También la podemos meter en una tabla (ya se verán más adelante).

Aquí pongo el texto

O meter la tabla en la marquesina:

Aquí pongo el texto

Y podremos poner imágenes en vez de texto.

<MARQUEE WIDTH="80%" BEHAVIOR="alternate"> <IMG SRC="imagen.gif"> </MARQUEE>

ATRIBUTOS DE LA ETIQUETA

A la etiqueta <IMG> se le pueden añadir varios atributos para controlar la manera en que un navegador administra una imagen. Estos atributos son los siguientes:

	width="x" Permite al navegador predeterminar el ancho, en pixles, que tendrá tu imagen.
	height="x" Junto con el atributo width, el navegador puede preparar el espacio necesario para tu imagen antes de que se muestre.
	border="x" Para añadir o eliminar un borde, donde la x será un valor numérico.
	align="xxx" Puedes alinear una imagen horizontal y/o verticalmente en una página usando este atributo.
	alt="descripción_de_la_imagen" El atributo alt te permite describir la imagen para los navegadores de sólo texto, así como etiquetar la imagen antes de que se cargue en una página.
	hspace="x" horizontal space, se usa para añadir espacio vacío, con un valor numérico, en la coordenada horizontal de una imagen.
	vspace="x" vertical space, controla el espacio de la imagen en las coordenadas verticales.

Vamos a ver más profundamente cada uno de estos atributos.

WIDTH y HEIGHT

Dos consejos básicos para el uso de estas etiquetas:

1. Pon siempre los atributos width y height en tu etiqueta IMG. Esto ayuda al navegador a administrar los datos de imágenes a lo largo de la página.
2. Nunca uses valores imprecisos de width y height en tu imagen. Estos valores deben ser siempre exactos, o harás que el navegador muestre imágenes distorsionadas en la pantalla.

Pero puedes estar pensando: he visto páginas WEB con imágenes pequeñas que al pulsar sobre ellas se hacen más grandes. Esto es una gran idea, inteligente, pero muy problemática.
Esto es debido al tamaño que ocupa la imagen descargada del servidor. Normalmente, se suelen poner imágenes de pequeño tamaño (30 kb por ejemplo) que al pulsas sobre ellas aparece una imagen mucho mayor (digamos, 150 kb). Para hacer la imagen primera, la pequeña, NO hay que usar los valores width y height. Si intentamos hacer una imagen de 150 kb más pequeña usando los valores width y height, seguirá ocupando 150 kb. En vez de eso, hay que reducirla de tamaño usando programas como Adobe Photoshop, con la utilidad de cambiar el tamaño de imagen. Para los usuarios de FrontPage, también pueden hacer estos 2 pasos: primero redimensionar la imagen y hacerla más pequeña, y segundo pulsar sobre el botón "Nuevo Muestreo" en la barra de herramientas Imagen.
En resumidas cuentas, aquí tienes ejemplos de estos atributos usados de forma adecuada:

	Usando píxeles: <IMG SRC="maxilogo.gif" WIDTH="160" HEIGHT="32"> <IMG SRC="maxilogo.gif" WIDTH="100" HEIGHT="32">
	En porcentajeEs muy poco utilizado, y solo vale para casos muy concretos, por ejemplo, para hacer líneas horizontales con imágenes. Aquí tienes un ejemplo con la imagen anterior, pero distorsionada: <IMG SRC="maxilogo.gif" WIDTH="80%" HEIGHT="32">

Para ver el ancho y alto exactos de tu imagen, míralos con tu programa de imágenes (en el capítulo "Herramientas para gráficos del Web"). Otro método es abrir las imágenes con Explorer 5.0, en el cual las imágenes aparecerán en las "Propiedades" tras pulsar con el botón derecho sobre ella, o con Netscape en el cual las dimensiones aparecen en la barra de título del programa.

NOTACuando diseñes tus gráficos, deberías de darles el tamaño adecuado para la web. Puedes aprender cómo hacer esto en el capítulo "Creando gráficos profesionales para el web".

Bordes de imagen

Los bordes alrededor de las imágenes están predeterminados en los navegadores, especialmente si la imagen está enlazada con otra imagen o un archivo. Si no está enlazada, lo predeterminado es que no tenga borde. Los bordes pueden quedar totalmente antiestéticos según el diseño de la página.

Para asegurarte de que tus gráficos nunca muestren bordes, hay que usar el valor 0 en el atributo border=

<IMG SRC="maxilogo.gif" WIDTH="160" HEIGHT="32" BORDER="0">

Esto dirá a los navegadores que no muestren ningún tipo de borde alrededor de tu imagen, especialmente útil para aquellos navegadores antiguos que muestren bordes alrededor de las imágenes de forma predeterminada.

Aquí tienes unos ejemplos de sustituir el 0 por otro valor numérico en este atributo:

<IMG SRC="cambiar.jpg" BORDER=1>

<IMG SRC="cambiar.jpg" BORDER=2>

<IMG SRC="cambiar.jpg" BORDER=3>

Alineación

Hay muchas maneras de alinear una imagen dentro de la página. Horizontalmente, está predeterminada la alineación a la izquierda para una imagen y cualquier otro tipo de objeto solitario. Puedes usar el valor de alineación left (útil en casos en el que el texto rodea a la imagen, por ejemplo), o el valor right. Ejemplos:

<IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95" BORDER="0" ALIGN="LEFT">

<IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95" BORDER="0" ALIGN="RIGHT">

NOTADebes usar otro método para centrar las imágenes, por ejemplo, la etiqueta DIV (mira el tema de las hojas de estilo), o centrando el párrafo: <P ALIGN="center"><IMG SRC="conversa.gif" WIDTH="198" HEIGHT="95" BORDER="0"></P>

Mientras que la alineación horizontal se hace con los valores de left y right, la alineación más empleada, también puedes usar el atributo align para alinear una imagen verticalmente.
Como estándar, los navegadores soportan estos tres valores:

	top Este coloca la imagen en la parte más superior de la línea de texto (valor por defecto)
	middle La imagen ahora estará alineada con el centro de la línea de texto
	bottom Con este valor, la imagen será alineada con la parte inferior de la línea de texto

Hay otros valores específicos de los navegadores, por ejemplo texttop (en la parte de arriba del texto más alto o imagen que esté en la línea de textp), absmiddle (alinea la imagen con la mitad más absoluta del texto o imagen que le rodee), baseline (igual que bottom) y absbottom (el cual alinea la parte de abajo de la imagen con la parte más baja de la imagen o texto que le rodee).

Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="TOP"> está alineada.

Esta imagen  está alineada

Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="MIDDLE"> está alineada.

Esta imagen  está alineada

Esta imagen <IMG SRC="cambiar.jpg" BORDER=0 ALIGN="BOTTOM"> está alineada.

Esta imagen  está alineada

Estos valores son útiles algunas veces, pero no muy usados. De hecho, el alineamiento vertical de las imágenes usando el atributo align está reservado a situaciones en las que se requiere alineación precisa. En el HTML 4.0, tales alineamientos se hacen mejor con tablas o, sobre todo, hojas de estilo.

El atributo ALT

Este importante atributo te permite colocar una descripción a las imágenes. Por ejemplo:

<IMG SRC="bander.gif" WIDTH="86"  HEIGHT="59" BORDER="0" ALIGN="RIGHT" ALT="Dibujo de una bandera">

Para aquellos casos individuales donde no estén disponibles los gráficos (si se usan navegadores de sólo texto con imposibilidad de mostrar imágenes, recursos limitados de Internet, o aquellas personas que navegan por la web con la opción de mostrar gráficos desconectada, el atributoalt ofrece una estupenda forma de escribir una visión natural de lo que es la imagen.

El descripción de alt aparecerá en otras dos circunstancias. Una es un página en la que se cargan los gráficos. La descripción se mostrará antes de que se cargue el archivo asociado. Esta es una manera muy interesante de mantener informados a los navegantes de lo que posteriormente verán. Las descripciones definidas con este atributo también aparecen cuando el puntero del ratón pasa por encima de la imagen (pruébalo en el ejemplo de la bandera anterior). Esta información visual extra puede ser interesante para un diseño web.

Deberías usar este atributo con una única excepción: cuando una imagen tiene un único píxel en alguna de sus dimensiones usada para corregir algunas colocaciones en el diseño del web. En este caso, el atributo alt puede ser dejado en blanco o simplemente eliminado. Muchos desarrolladores de webs prefieren dejar este atributo en su lugar pero sin ninguna información entre las comillas.

<IMG SRC="bander.gif" WIDTH="86"  HEIGHT="59" BORDER="0" ALIGN="RIGHT" ALT="">

Espaciado horizontal y vertical

Los valores para hspace y vspace son numéricos. Para que podamos ver bien el efecto, vamos a usar unos valores muy altos para estos atributos.

Una bandera <IMG SRC="bander.gif" WIDTH="86"  HEIGHT="59" BORDER="0" ALT="Dibujo de una bandera">

Una bandera 

Una bandera <IMG SRC="bander.gif" WIDTH="86"  HEIGHT="59" BORDER="0" ALT="Dibujo de una bandera" HSPACE="20">

Una bandera 

Una bandera <IMG SRC="bander.gif" WIDTH="86"  HEIGHT="59" BORDER="0" ALT="Dibujo de una bandera" VSPACE="20">

Una bandera 

El uso de estos 2 atributos es particularmente útil cuando se coloca texto alrededor de las imágenes. Esto se llama texto envolvente dinámico, o imágenes flotantes. Tienes algo más de esta técnica en la próxima sección.

CAPAS O LAYERS

Las capas son bloques con contenido HTML que pueden posicionarse de manera dinámica y organizables en 3D. Realmente tienen sentido dentro de los estilos CSS, de hecho sus ventajas solo se pueden aprovechar al cien por cien utilizando estilos CSS. Es la mejor ilustración de lo que significa separar contenido de presentación.
En realidad, el nombre de capas proviene de Netscape, que estos elementos los implementaba como <layers>, en castellano capas. Las versiones modernas de Netscape (de la 6 en adelante) ya no usan esta etiqueta si no que se han decantado por la más standard <div>
No obstante la manipulación de estos elementos por parte de Micorsoft y Netscape son diferentes, ambos usan algunas extensiones propias, aunque ambos admiten los estándares de la W3C con lo que el uso de estos elementos es bastante universalizable.
En realidad las capas no se difinen completamente mediante el lenguaje HTML, sino necesitan del lenguaje de definición de estilos CSS. Entre ambos podemos colocar en nuestras páginas estos elementos movibles, ocultables y en general manipulables de forma dinámica. Por ejemplo:

<STYLE TYPE="text/css">
  .la_capa {position:absolute; top:100px; left:20px; width:300; heigth: 200}
</STYLE>

Con esto hemos definido un tipo de capa, denominda la_capa, cuya altura es de 200 px y anchura 300 px. Además está situada a 100 px de la parte superior y a 20 px del margen izquierdo de la página. Repito que hemos definido una clase capa, pero no hemos contruido la capa. Para construirla usamos la etiqueta <DIV> y el atributo ID

<DIV ID="micapa">
  <H1>Esto es contenido</H1>
  <P>Aquí sigue más contenido HTML </p>
  ...
</DIV>

Cualquier bloque <DIV> con ID="mi_capa" estará en esa posición y con ese tamaño.
Esta capa puede colocarse en cualquier parte de la ventana, su posición es absoluta (absolute). Pero también podemos definir capas de posicionamiento relativo, es decir, que más que definir las coordenadas de suposición respecto a la ventana, describimos su posición respecto al lugar donde aparezca en el texto. En otras palabras: describimos desplazamiento de la capa respecto de donde la ponemos. Se definen así:

<STYLE TYPE="text/css">
  .relativa {position: relative; left: 20px;  top: 100px;}
</STYLE>

LOS MARCOS

¿Qué son?

Son una forma de insertar varias páginas en una sola. Mal utilizadas pueden echar a perder la estética de una página, dado que no hay que olvidar que los monitores están físicamente limitados. Cada marco que compone la página funcionará como una ventana independiente, teniendo sus propios bordes, barra de scroll etc. Su ubicación en la página será rígida, por lo tanto no podremos moverlos a nuestro antojo. Si colocamos cuatro, se dividirá en cuatro partes y se colocarán en cada cuadrante de la pantalla, si tenemos dos, ésta se dividirá a la mitad. Ésta es la etiqueta pertinente:

<HTML>
<HEAD>
  <TITLE>Los frames: páginas multiventana</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
  <FRAME NAME="indice" SRC="indice.htm">
  <FRAME NAME="principal" SRC="principal.htm">
  <NOFRAMES>
    <P align="center">Al parecer tu navegador 
    no soporta marcos, actualízate.</P>
  </NOFRAMES>
</FRAMESET>
</HTML>

Hay algunas diferencias notables en el código comparándolo con otro html. Una bastante 

llamativa es que carece de la etiqueta body y, en su lugar, aparece frameset. Cada frameset

es una página o ventana dentro de la página contenedora, que estará definida por los 

parámetros cols o rows. En este ejemplo, se trata de dos marcos, uno junto al otro,

uno ocuparía el 20% y otro el 80% de la ventana restante.

Dentro del <FRAMESET> definimos los marcos que componen el conjunto y la acción alternativa

 para navegadores que no soporten marcos. A cada uno de los marcos le ponemos un 

nombre y especificamos qué página HTML se mostrará en él (etiqueta <FRAME>). Sólo queda

 definir lo que verá el usuario en el supuesto de que su navegador no soporte frames

 (etiqueta<NOFRAMES>). Aunque, actualmente no hay navegadores que no soporten marcos

ya que están actualizados para ello.

Etiqueta frameset

Los parámetros cols y rows nos permiten controlar el tamaño de los marcos presentados

en la ventana del navegador. Existen tres formas de presentar los tamaños:

 1)Porcentajes: podemos definir el tamaño de un marco por el porcentaje de espacio total disponible (el ancho o alto de la ventana del navegador)

 2)Absolutos: podemos especificar su ancho y alto en píxeles.

 3)Calculado: Podemos colocar el ancho o alto de un marco y dejar que el tamaño del otro lo calcule el navegador, usando para ello un asterisco en lugar de un valor o porcentaje. Por ejemplo, si tenemos tres marcos y colocamos cols="10%,30%,*", el último ocupará el 60% (espacio sobrante 100-10-30). Si decidimos colocar el asterisco en varios marcos, el espacio se dividirá equitativamente, pero también podemos hacer un marco que sea el doble o triple de otro. Así, un marco con un espacio 3* será tres veces más grande que el que contenga un asterisco. Todo esto se puede combinar, por ejemplo:

<FRAMESET COLS="10%,*,300,3*>

Supongamos que el ancho total de una ventana son 800 pixels. El primer marco ocupará el 10%, es decir, 84 px, el tercero necesita 300, en total tenemos 384 px ocupados, por lo tanto, quedan 416 px libres. Los otros marcos se repartirán el espacio en función de los asteriscos: 416/4 = 104 px para el de un asterisco y 312 para el otro. En total tenemos ocupados los 800 px.

Lo más recomendable es dejar un marco calculado, es decir, con asterisco.

Si queremos que los marcos se distribuyan de una manera más irregular, podemos anidarlos, o lo que es lo mismo, un marco que contenga una página que contenga marcos. Esto se hace poniendo otro <FRAMEST> donde colocaremos la etiqueta <FRAME>. de esta manera:

<FRAMESET COLS="20%,80%">
  <FRAME NAME="indice" SRC="indice.htm">
  <FRAMESET ROWS="*,80">
    <FRAME NAME="principal" SRC="superior.htm">
    <FRAME NAME="ejemplos" SRC="principal.htm">
  </FRAMESET>
</FRAMESET>

Éste frame concretamente se usa para dividir la página en distintas secciones, por lo tanto

no se escribe el body en el html, si no, daría error.

Etiqueta frame

Esta es la etiqueta que nos permite describir como debe ser cada marco Los parámetros que soporta son:

NAME	Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace.
SRC	Indica la URL del documento HTML que ocupará el marco.
NORESIZE	Evita que el usuario pueda cambiar el tamaño del marco.
FRAMEBORDER	Ssi lo igualamos a cero el borde de este marco desaparece (pero ojo si los contiguos tienen borde éste se verá).
SCROLLING	Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecerán si son necesarias. Las otras opciones que tenemos son YES o colocarlas y NO, no ponerlas.
MARGINWIDTH	Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.
MARGINHEIGHT	Igual al anterior pero con márgenes verticales.

Marcos flotantes <IFRAME>

Una excelente alternativa a los marcos fijos son los marcos flotantes, actualmente soportados por todos los navegadores. La idea de este elemento ideado por Explorer, sigue siendo la misma: incluir una página externa dentro de otra, pero en este caso el marco puede quedar totalmente integrado en la página contenedora. Es como un include. La descripción de este elemento es muy parecida a los frames: es necesario decir de donde viene la página y como se ha de ver el marco (bordes, márgenes scroil...) Esto se hace mediante los parámetros ya vistos:

NAME	Asigna un nombre a un marco, de esta manera luego podemos usarlo como destino de un enlace.
ALIGN	Alineación del marco respecto al texto que lo rodea (botton, right, left, middle)
SRC	Indica la URL del documento HTML que ocupará el marco.
HEIGHT	Altura del marco
WIDTH	Anchura del marco
FRAMEBORDER	Ssi lo igualamos a cero el borde de este marco desaparece
SCROLLING	Coloca o no las barras de scroll. Su valor es por defecto AUTO, aparecerán si son necesarias. Las otras opciones que tenemos son YES o colocarlas y NO, no ponerlas.
MARGINWIDTH	Permite cambiar los márgenes horizontales dentro de un marco. Se representa en pixels.
MARGINHEIGHT	Igual al anterior pero con márgenes verticales.
allowtransparency	Si es true La página origen puede tener como color de fondo transparent.

Acceso a otros marcos

Si leístes la sección dedicada a los enlaces recordarás que cuando pulsas un enlace en la ventanda del navegador aparecerá otra página, pero podíamos colocar el atributo target para hacer que la nueva página se abriera en otra ventana. Pues bien esta otra ventana puede ser otro marco. Así en un marco puedo colocar un enalce que abra la página en otro marco de la misma página.

Este parámetro se puede colocar en tres etiquetas: <A>, <AREA> y <BASE>. En las dos primeras sirve para indicar el marco en el que abriremos ese enlace en particular y el último modificaremos el marco en el que por defecto se nos muestran todos los enlaces.Para indicarle el marco que deseamos le asignaremos el nombre del mismo. Así, en los ejemplos anteriores, si en el marco llamado indice tenemos un enlace que queremos se abra en el marco principal pondremos:

<A HREF="pagina.html" TARGET="principal">

También existen cuatro nombres reservados que podremos utilizar en el parámetro TARGET:

_top

Elimina todos los marcos existente y muestra la nueva página en la ventana original sin marcos.

_blank

Muestra la nueva página en una ventana nueva y sin nombre del navegador.

_self

Muestra la nueva página en el marco donde está declarado el enlace.

_parent

Muestra la nueva página en el <FRAMESET> que contiene al marco donde se declara el enlace. En el ejemplo que pusimos de <FRAMESET> anidados, una enlace situado en el marco ejemplocuyo parámetro TARGET fuese igual a _parent eliminaría la separación entre los marcos ejemplo y principal y mostraría en ese nuevo marco la nueva página.