PROYECTOS II - / INTRODUCCIÓN - USABILIDAD - NAVEGACIÓN Y ESTILO WEB La concepción filosófica que encara la Usabilidad en Web es el punto de vista del navegante y su experiencia positiva. Es importante tener presente siempre al usuario, a la hora de crear nuestro proyecto interactivo. Usabilidad: Todos creemos, dispuestos a comenzar a desarrollar nuestro propio sitio web, que esto, en realidad es sumamente sencillo. Nada más lejos de la realidad. Algunos estaréis completamente de acuerdo en que nuestro espacio... unas pequeñas reseñas a proyectos, unas pocas fotos, algún texto, no necesita de análisis. ¿Para qué?. ¿ si es muy sencillo?, “ pincho aquí y ya está “...... Seguro, si nosotros hacemos esto, sin un mínimo análisis, estamos haciendo eso un “para qué “. La idea de un proyecto en red, es mucho más compleja, tan compleja aún más que el desarrollo de un catálogo en soporte papel con calidad. Es importante pensar en el concepto de usabilidad del espacio que vamos a construir. Uno puede saltarse a la ligera, el resultado del análisis, pero eso sí de una manera consciente, ya no inconscientemente. Para analizar la usabilidad de un espacio web , deberíamos dividir ese espacio en tres áreas que nos permitirán apreciar el grado de usabilidad del mismo: El Contenido, Arte y Navegación.

1 - El contenido: Dentro de este apartado incluiremos los servicios que ofrece el sitio web a los usuarios. ES interesante publicar contenidos que sigan vigentes a medio y largo plazo. Amortizaremos estos contenidos en el tiempo. También es importante mantener contenidos a corto plazo ya que estos son los que generan el tráfico de usuarios diario. ( ej. Noticias, eventos, etc... ) Cuando ponemos en un site información de corto plazo debemos recordar actualizarla cuando ya no tenga vigencia. Hemos visitado numerosos sites que anuncian con bombos y platillos actividades que ya habían pasado. Tengamos en cuenta que el usuario va a venir buscando un valor agregado a nuestro site, ese valor agregado son el contenido y los servicios. El contenido varía de acuerdo al sitio: por ejemplo, en Yahoo son el directorio y los links resultantes de una búsqueda, y en MapQuest son los mapas. SI tenemos claro que este factor es importantisimo para nuestro sitio, es interesante verificar el porcentaje de espacio dedicado al contenido. ( por lo menos un 50% del espacio de la página ). No debemos olvidarnos tampoco de hacer un correcto diseño del micro contenido. El micro contenido son los resúmenes de los links, los diseños de las palabras que usamos como hipervínculo, las explicaciones de los mismos y los tags de ayuda. Resumen: Contenido • • • • • •

Publique contenidos de vigencia permanente (mediano y largo plazo) Publique contenidos de vigencia volátil con información al instante (corto plazo) Verifique que el porcentaje de espacio dedicado al contenido siga las siguientes proporciones: Contenido. Por lo menos el 50 % del espacio de la página y preferentemente cerca del 80 %. Navegación y Publicidad. Por debajo del 20 % Elimine la página principal sin contenido (de tránsito).

1/1 - Cómo leen las personas en la web La verdad es que las personas en Internet no leen en un sentido convencional al estilo de la lectura de un libro e incluso más rápido que la lectura de un diario. La sensación general es que se sienten incómodas leyendo en web. Leer en los monitores de una computadora es un 25 % más lento que desde el papel. También debemos mencionar que a la gente no le gusta hacer scroll sobre las páginas. En este sentido es importante para los usuarios la credibilidad del sitio y esta puede ser incrementada a través de gráficos de alta calidad, buena redacción y buenos hipervínculos externos

1/2 - Cómo escribir contenido para Web • Hagámoslo Corto. • Que se pueda leer de un vistazo. • Lenguaje objetivo. • Adecuada estructura de la información. Dadas las diferencias entre la web y otros medios de comunicación es necesario adaptar nuestro contenido siguiendo ciertas guías que permiten que pueda ser leído con mayor facilidad. 1/3 - Hagámoslo Corto En web es necesario que los artículos sean cortos. Por las características del medio, el cliente no está dispuesto a leer demasiada cantidad de material. Esto implica reducir la cantidad de información. Como pauta general podemos aconsejar escribir el 50 % del texto que usted hubiera usado en una publicación tradicional. 1/3 - Que se pueda leer de un vistazo Separar el texto en bloques cortos que tengan una unidad conceptual permite mejorar la facilidad de lectura. Dado que los usuarios rastrean o escanean el texto, es necesario escribir de una manera que permita este vistazo rápido de la página. Entonces, es recomendable utilizar hasta tres niveles de títulos con títulos que hagan referencia directa al contenido. Podemos utilizar palabras destacadas a través de tipos de letra, colores o vínculos de hipertexto y también podemos usar listas con destacados. 1/4 - Lenguaje objetivo A los usuarios en general no les gustan las palabras provenientes del marketing y subjetivas. Prefieren hechos concretos y directos: la credibilidad de un sitio decrece si exagera así como se reduce la velocidad de lectura. 1/5 - Adecuada estructura de la información Es posible escribir texto con menos líneas sin sacrificar profundidad de conceptos utilizando vínculos de hipertexto. Para poderlo lograr deberemos acostumbrarnos a dividir el texto en partes coherentes sobre el mismo tema. La estructura deberá estar basada en un análisis de la audiencia. Como pauta podemos mencionar que cada página deberá contener un párrafo al comienzo que sintetice la conclusión de la misma. Esta estructura es inversa al concepto académico tradicional de poner las conclusiones al final luego del desarrollo, pero ha resultado ser mucho más conveniente para contenido en web y es similar al utilizado por periodistas. 1/6 - Cómo escribir micro contenido Llamamos micro contenido a los títulos de página, títulos generales y aclaraciones sobre un link. En el caso de escribir micro contenido se aplican las reglas para escribir contenido en web pero en este caso resultan aún más importantes. Existen varias razones que hacen que el diseño de micro contenido sea más delicado aún que el de macro contenido.

Los títulos son visualizados usualmente fuera de su contexto como parte de listas de artículos, en e-mails y la cantidad de información de contexto que dispone el usuario es menor y más difícil de leer que en otro medio. Entonces, el texto del título debe sostenerse por sí mismo y tener sentido aun sin estar junto al cuerpo del contenido. Debemos explicar claramente sobre qué es el artículo, en términos que el usuario entienda. Trataremos de no utilizar artículos (la, el) en la primera palabra de la descripción o título para que las listas de artículos al ordenarlo alfabéticamente lo clasifiquen mejor. Mejor aún si podemos hacer que la primera palabra tenga un significado importante. Escribirlo en términos llanos, menos marketing y más comprensión. No hagamos que nuestros títulos empiecen todos con la misma palabra, ya que se vuelven difíciles de diferenciar. No poner trampas que hagan que el usuario dé click en el vínculo a costo de que vaya a parar a un artículo que no era de su interés.

2 - El Arte : El área de Arte incluye aspectos de diseño de la página , ( el estilo gráfico , el interface gráfico, la maquetación, la tipografía, etc...), en este apartado nosotros como artistas, tenemos mucho que ver,...estamos firmemente involucrados en el tema y debemos estar atentos a las premisas que la misma red nos presenta hoy por hoy. Veremos partes importantes a tener presentes a la hora de crear nuestra página, un mal uso de los recursos artísticos de la página podrían llevarnos a la realización de un proyecto donde el tiempo concepto fundamental en el diseño web, se presentaria como nuestro peor enemigo. En este apartado del análisis tenemos que tener en cuenta fundamentalmente el tiempo de carga de la página. Cuando el tiempo de carga de una página es menor a una décima de segundo el funcionamiento se percibe como instantáneo. Cuando el tiempo de carga está entre una décima de segundo y un segundo el flujo de pensamiento se mantiene sin interrupción pero se pierde la sensación de operar directamente sobre los datos. Cuando está entre un segundo y diez segundos es el límite para conservar la atención del usuario. En definitiva, una página lenta significa impactar negativamente en la experiencia del navegante. Si hemos llegado a conseguir esto, una imagen negativa de nuestro espacio, podemos darlo todo por perdido... este usuario no volverá , bye, bye,... Arte & Diseño • • • • • • • •

Tiempo de carga de la página. t < 0,1 una décima de segundo. Se percibe como instantáneo 0,1 < t < 1 segundo. El flujo de pensamiento se mantiene sin interrupción pero se pierde la sensación de operar directamente sobre los datos. 1 < t < 10 segundos. 10 Segundos es el límite para conservar la atención del usuario.t > 10 segundos. El navegante dirige su atención hacia otras tareas mientras la espera que la computadora termine. Tamaño de las páginas. 20 kb. ------- 40 kb. Expectativas relacionadas al tiempo de carga. Reutilice los gráficos. Preste atención al tipo de letra que usa en sus páginas, quizás no todos los usuarios tengan esa tipografía.

CONCEPTOS DE ARTE: 2/1 – Tipografía Una buena tipografía es tan importante en una página Web como en cualquier otro medio escrito. El problema que se presenta en las páginas Web es que se ha de visualizar correctamente en diferentes sistemas y multitud de ordenadores. Debemos utilizar los estilos con moderación .Si quiere resaltar algo use las negritas o el tipo cursiva, pero no abuse de ellos porque si todo está resaltado, el cerebro se acostumbra y deja de parecerle destacado. Ej:

El texto pierde fuerza si todas las palabras están resaltadas. El texto pierde fuerza si todas las palabras están resaltadas

2/1 a - Tamaño de letra Cada persona puede tener definido un tamaño de letra por defecto distinto. Por ejemplo, si posee un monitor de 14" posiblemente tenga por defecto un tamaño de letra 10, con lo que las etiquetas y tendrán el mismo efecto. Pero si posee un monitor de 17", es posible que usted tenga configurado el navegador con un tamaño de letra 14 con lo que aumentaría el tamaño, pero lo disminuiría.

Mal Bien

BASE FONT 10 Palabra que se desea aumentar. Palabra que se desea aumentar.

BASE FONT 14 Palabra que se desea aumentar. Palabra que se desea aumentar.

2/1 b - Capitalización Cuando leemos lo primero que observamos es la forma general de las palabras. De manera que un titular con la primera letra de cada palabra en

mayúscula es mas atractivo visualmente que todo el titular en mayúsculas.

La mayor cantidad de la información reside en la parte superior de las letras, la vista está acostumbrada a fijarse en la parte superior de las letras por lo que si capitalizamos todas las palabras estaremos obligando a realizar un esfuerzo superior que puede resultar molesto.

La parte superior contiene más información.

2/ 1 c - Los tamaños de las fuentes son distintos en diferentes ordenadores No debería ser así pero el hecho es que la misma fuente del mismo tamaño no se representa de igual forma en un sistema basado en Windows que en uno basado en Mac.

Cuando especifica el tipo de fuente ha de saber que puede haber personas que no dispongan de ese tipo de letra. Afortunadamente, usted puede especificar varios tipos de letra alternativos. De todas las maneras, no viene nada mal saber cuales son los tipos de letra por defecto en los sistemas más usados.

2/ 1 d - Los tipos de letra Serif o Sans Serif En esta sección discutiremos qué clase de tipografía es más adecuada para el diseño de páginas Web. Antes de continuar vamos a aclarar algunos conceptos para los que estén familiarizados con algunos términos. Las tipografías de tipo "serif" son aquellas tipografías cuyas letras se apoyan como con una especie de pie, las tipografía de tipo "sans serif" carecen de este detalle. Serif

Sans Serif

Normalmente se usan tipografía de tipo "serif" en el cuerpo del documento, ya que este tipo de tipografía es más fácil de leer y por lo tanto puede leerse más rápidamente porque esos pequeños elementos decorativos en los pies de las letras añaden información visual que facilita la lectura. Pero usted se habrá dado cuenta que toda la esta Web está escrita con una tipografía "sans serif", que es justo lo contrario a lo que he dicho hasta ahora. Lo realmente importante es la facilidad de lectura. En una página impresa la resolución de impresión es muy alta por lo que esos pequeños elementos decorativos en los pies de las letras quedan muy bien definidos. Pero por el contrario en una pantalla de ordenador la resolución todavía no es muy alta y la tipografía con "serif" produce efectos en las letras que hacen dificultosa su lectura. Se recomienda usar no usar tipografías de tipo "serif" si la fuente en menor a 12 pixels. Una vez que ha seleccionado la tipografía para el cuerpo del texto, consideremos la opción de usar alguna otra fuente diferente. Fijémonos en los periódicos, usan una tipografía para el contenido del articulo pero usan otra distinta para los titulares. Además usan la misma para todos los titulares. Es importante mantener la coherencia de tipografía en todo el sitio Web. Pero tengamos en cuenta que muchas tipografías diferentes tampoco es bueno, imaginemos que cada tipografía la lee una persona distinta o con una entonación especial. Muchas tipografías distintas en una misma página provocaría una especie de confusión de voces que no deseamos. 2/2 – Los Gráficos Las imágenes son mucho más impactantes y pueden transmitir un mensaje mejor y de una forma más clara y rápida que el texto. Introducir gráficos en las páginas incrementa de una manera notable la presentación de las mismas, pero hay que tener en cuenta que mientras 1K de texto puede llenar

toda la pantalla, este pequeño gráfico ocupa 12Ks. 2/ 2 a - Gráficos, ayuda textual. Piense que no todas las personas poseen un navegador gráfico o que aún poseyéndolo, no tienen activada la opción de carga automática de imágenes. Para estar personas es de vital importancia que ponga una descripción de la imagen. Incluso los navegadores gráficos visualizan dicho texto hasta que la imagen es cargada. Cuando cree un enlace a una imagen, es altamente recomendable que indique el tamaño de la imagen, también es de gran ayuda que cree un pequeño icono en el que se vea el contenido de la imagen. De esta manera:

hojas.jpg 146Kb 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 use 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 esta todavía se está cargando la imagen se puede leer el texto con comodidad. 2/ 2 b - Gráficos, meramente decorativos. Recordemos que los gráficos tardan en cargarse o que el usuario puede tener la opción de carga automática de gráficos desactivada. Si usa de manera indiscriminada gráficos decorativos, su página puede parecer extraña y confusa si no se visualizan dichos gráficos. 2/ 2 c - 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 mas de 15 segundos a que la página termine de cargarse.

Tamaño

14400 bps

Velocidad 28800 bps

56600 bps

50Kbs

30 sg

15 sg

7 sg

100Kbs

60 sg

30 sg

14 sg

Tiempo optimista de carga.

2/ 2 d - Usar los atributos HEIGHT y WIDTH cuando insertamos una imagen Esto produce que el navegador sepa el tamaño de la imagen antes de que empiece a cargarla, lo que le permite reservar espacio en la página. De esta manera la página se dibuja con los espacios vacíos que serán rellenados con las imágenes cuando estas se carguen. Con lo que se consigue que la página se visualice completa antes, sin tener que esperar a la carga de las imágenes. 2/ 2 e - Uso de opciones de carga progresiva que disponen los formatos gráficos. Esto permite que se pueda visualizar una imagen incompleta del gráfico mientras este todavía se está cargando. Esta característica en los formatos GIF y PNG se llama entrelazado y en el formato JPEG se llama progresivo. Secuencia de carga progresiva, formato GIF

2/ 2 F - Usar la misma imagen tantas veces como podamos De esta manera aprovecha la característica que disponen la mayoría de navegadores de almacenar en la caché las imágenes ya cargadas. Por consiguiente acelerará notablemente la carga de las páginas. 2/ 3 Formatos gráficos Una misma imagen puede almacenarse en diferentes formatos. Los formatos más extendidos en Internet son GIF y JPEG (Joint Photographic Experts Group). La organización W3C (http:// www.w3.org ) recomienda el uso del formato PNG (Portable Network Graphic) para cubrir ciertas lagunas que dejan los otros formatos, dicho formato es de reciente aparición y todavía no es soportado por todos los navegadores. 2/ 3 a - GIF GIF es el acrónimo de Graphic Image File Format. Fue desarrollado para el intercambio de imágenes en Compuserve y tiene como particularidad que el

algoritmo de compresión es propietario, aunque se permite el uso a cualquier persona. Las características de esto formato son: • Número de colores: 2, 4 , 8, 16, 32, 128 ó 256 de una paleta de 24 bits. • Compresión basada en el algoritmo de compresión LZW. • Formato de compresión sin pérdida. Características añadidas en la versión 89a: • Carga progresiva. • Máscara de trasparencia de 1 bit. • Animación simple. • Uso: Para las imágenes sencillas con pocos colores y con formas muy delimitadas, ya que se puede adaptar al número de colores de una imagen.

2/ 3 B - JPEG JPEG es el acrónimo de Joint Photographic Experts Group. Fue diseñado para la compresión de imágenes fotográficas, basándose en el hecho de que el ojo humano no es perfecto y no es capaz de captar toda la información que se puede almacenar el una imagen de 24 bits. El formato JPEG intenta eliminar la información que el ojo humano no es capaz de distinguir, por eso se dice que posee un formato de compresión con pérdida, porque elimina información. Las características de este formato son: • Número de colores: 24 bits color o 8 bits B/N • Muy alto grado de compresión. • Formato de compresión con pérdida. • No permite trasparencia, ni canal alfa. • No permite animación. • Uso: fotografías de personas o lugares, porque consigue una gran compresión con una mínima perdida de calidad.

2/ 3 C - PNG PNG es el acrónimo de Portable Network Graphics. Fue diseñado para reemplazar al formato GIF por ser este último más simple y menos completo. El objetivo de este formato es proporcionar un formato compresión de imágenes sin pérdida para cualquier tipo de imagen. Las características de este formato son: • Color indexado hasta 256 colores y TrueColor hasta 48 bits por píxel. • Mayor compresión que el formato GIF (+10%) • Compresión sin pérdida. • Visualización progresiva en dos dimensiones. • Canal alfa. (Transparencia variable) • Detección de errores. • No permite animación. • Uso: Imágenes con degradados suaves y líneas muy bien definidas.( 3D)

3 – La Navegación : El área de Navegación consiste en la efectividad del flujo entre las páginas. Debemos crear estructuras de navegación claras y que no mareen al usuario, ya que eso impacta en la usabilidad de la página y por ende en la experiencia positiva o negativa que genera. El usuario de Web no lee sino que rastrea o escanea las páginas, busca rápidamente conceptos a vuelo de pájaro, y una de las cosas que más le llaman la atención son los hipervínculos. Por ende es conveniente no cargar de hipervínculos una página. Por esa razón, hagamos Hipervínculos en palabras que se asocien con el contenido y preferentemente que el ancho abarcado por el hipervínculo no sea mayor de dos a cuatro palabras. Coloquemos aclaraciones asociadas a los hipervínculos (tags, alts ) y agreguemos información sobre a donde conduce el vínculo fuera del mismo para no generar frustración en el usuario al ingresar en páginas que no tenían lo que estaba buscando. Es conveniente también, utilizar los colores de hipervínculo e hipervínculo visitado standard, azul y bordó subrayados respectivamente. Navegación • • • • • • •

Crearemos estructuras de navegación claras y que no mareen al usuario. No cargaremos de hipervínculos una página. Haremos Hipervínculos en palabras que se asocien con el contenido. Preferentemente que el ancho abarcado por el hipervínculo no sea mayor de dos a cuatro palabras. Colocarermos aclaraciones asociadas a los hipervínculos (tags) Agregaremos aclaraciones sobre la información a donde conduce el vínculo fuera del hipervínculo. Utilizaremos los colores de hipervínculo e hipervínculo visitado standard (azul y bordó resp.)

3.1 La estructura La estructura de un conjunto de páginas web es muy importante, ya que una buena estructura permitirá al lector 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. Diagrama de Flujos: 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, es conveniente hacer algún esquema sencillo, para la mayoría de los casos una hoja de papel y un lapicero bastará, pero si el emplazamiento va a albergar un gran número de páginas es recomendable usar algún tipo de programa que permita manejar estructuras de tipo grafo. Este tipo de esquemas jerárquicos los denominamos diagramas de flujos. 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 cuya estructura estará formada por capítulos, este tipo de información se adapta bastante bien a una estructura lineal como jerárquica. Mientras que un sitio donde se expone un tutorial o un tour es más apropiada una estructura de tipo lineal.

3.2 Tipos de Estructuras 3.2a – 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 asimismo 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, con forme 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. 3.2b – 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, además impedimos que se distraiga con enlaces a otras páginas. Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante. Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.

3.2c – Lineal con jerarquía Este tipo de estructura es una mezcla de la dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea. Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro.

3.2d- Red La estructura de red es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente. 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 de en dónde 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 las páginas con alguna estructura conocida, como por ejemplo la de una ciudad. ( asociar la metáfora creativa de la que partimos con la estructura ).

3.3 Elementos de 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. Para ello necesitamos tener en cuenta diversos puntos, para conseguir que nuestro proyecto funcione correctamente. 3.3 a - Duplicar 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. Si la página es suficientemente larga proporcione al final de la página un enlace el principio de la misma. 3.3 b- No crear callejones sin salida. Al menos cada página Web ha de tener un enlace por el cual se pueda continuar la navegación. 3.3 c- Diseñar una estructura clara. Asegurémonos de que proporciona un camino cómodo para visitar todas las páginas Web de su sitio. Si no tenemos en cuenta esto perderemos la mayoría de los lectores tras las primeras páginas.

3.3 d- Proporcionar índices Si le es posible facilite un índice con el contenido del sitio. Procure que el índice sea fácilmente accesible, puede hacer un "frame" como en este sitio o puede ponerlo al principio o al final de la página. 3.3 e- Si proponemos una navegación mediante interfaces gráficos. Si usamos un interface de navegación gráfico ( botones, imagotipos, iconos...) , el lector no puede moverse por las demás páginas hasta que el gráfico no esté cargado, pero si pone enlaces de texto el lector puede moverse antes y no tener que esperar. 3.3 f- Nadie hace scroll. El scroll o barras de desplazamiento, son elementos tan útiles como peligrosos a la hora de montar una web. Si queremos captar la atención del navegante, no haga la página más grande de una pantalla, esto producirá que no aparezca scroll. 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 una pantalla y media son cómodas de leer y no saturan al lector con demasiada información. Si necesitamos 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 3.3 g - Firmar los documentos | autoría Todos los documentos deberían firmarse. De esta manera se identifica al autor del documento, además de hacerse responsable de su contenido. Así mismo sería bastante conveniente que se proporcionase información de cómo contactar con el autor. Una manera sencilla es crear una página con las señas del autor e introducir un enlace a dicha página al final de cada documento. 3.3 h – Fechar los documentos | fechas | formatos Es muy importante fechar los documentos, al fechar los documentos situamos el contenido de los mismos en un contexto en el tiempo. Si el documento está fechado, el lector es capaz de saber si la información es actual o por el contrario está obsoleta. Hay que ser cuidadoso con el formato de las fechas y usar formatos como 06 -012002 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 1 de junio en vez del 6 de enero. 3.3 i – Enlaces | palabras significativas | longitud | tipos 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. Debemos escribir como si hubieran enlaces en el texto: Es preferible: Mario García creó en 1997 un sistema de interacción estándar de uso comercial a El nuevo sistema de interacción estándar de Mario García está aquí.

El texto enlazado debe definir el contenido de la información a la que refiere. De ser posible de manera que no sea necesario leer todo el párrafo para comprender el significado del enlace. Hemos dicho antes que el enlace ha de ser suficientemente significativo, un enlace demasiado largo también es perjudicial ya que dificulta la lectura del texto. Hay que tener en cuenta que al hacer un enlace sobre una parte del texto esta se realza y puede distraer al lector del significado principal del párrafo. Ej: Mario García creó en 1997 un sistema de interacción estándar de uso comercial bajo Netscape En esta frase queda remarcado Netscape cuando lo más importante de la frase es el sistema de interacción.

Cuando realicemos enlaces consecutivos similares, resaltaremos la información que diferencie unos enlaces de otros. Libros sobre Economía. Libros sobre Medicina. Libros sobre Historia. Libros sobre Educación. Libros sobre Economía. Libros sobre Medicina. Libros sobre Historia. Libros sobre Educación. Incluso se puede mejorar si quitamos el texto redundante. Libros sobre: • Economía. • Medicina. • Historia. • Educación. Aunque esté permitido, ahorrará tiempo y evitará confusión al lector si no cambia los colores por defecto de los enlaces, puesto que el lector está acostumbrado a ellos y lo asocia con los sitios que ya ha visitado y los que todavía no. Resulta bastante desagradable intentar saltar 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 dos tipos de enlaces, los enlaces internos y los enlaces externos. Los enlaces internos son aquellos que referencia páginas que son nuestras ( ej: dossier.htm ), 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, son enlaces al exterior de nuestro proyecto, hacia la www. (ej: http://www.terra.es) Se han de comprobar el funcionamiento de los enlaces internos cada vez que modifiquemos nuestras páginas y se han de comprobar los enlaces externos de una forma periódica. 3.3 j – Visualización en navegadores Aunque nuestras páginas cumplan el estándar es recomendable que comprobemos que nuestras páginas se visualizan correctamente en los navegadores más usados. ( Internet Explorer, Netscape). Si usa la última versión de los estándares tendremos 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. 3.3 k – Resolución Tenemos dos tamaños de resolución a la hora de realizar una web. Podemos crearla con un tamaño fijo ( 640 x480 – 800 x 600 ), tamaños estándar de resolución de monitores, ó por el contrario podremos crearla al porcentaje ( 100 % , 90% de la resolución de pantalla ). Si usamos tamaños fijos nuestra web mantendrá ese tamaño en cualquier resolución de pantalla que tenga el usuario final, por lo que podríamos tener problemas con algunos usuarios si no tiene la resolución adecuada para visionar nuestro espacio. En el caso del porcentaje, si usamos este método para definir tamaños, con esto conseguiremos que sus páginas se visualicen correctamente en cualquier resolución. Pero podemos tener algún problema con el diseño del interfaces gráfico, ya que este debe de ser elástico, y por lo tanto en muchos de los casos más pobre.

Conclusión: ( según la w3.org ) Los 3 principales errores en la creación de una página web Existen ciertos errores que son muy comunes al momento de diseñar una página web y que impactan negativamente en la usabilidad de la misma. Podemos agrupar los mismos en los siguientes conceptos: Elevado tiempo de carga de la página. Un tema principal al diseñar una página web es el tiempo de carga de la misma que deriva de manera directa del peso en kb.. El cliente de web es un cliente exigente que está deseoso acceder rápidamente a la información, si la página tarda en cargarse perderemos a nuestro cliente que se irá en busca de otro site que le ofrezca una mejor experiencia de uso. En web la mayoría de los conceptos de negocios es fácilmente copiable y la distancia entre una y otra empresa es de solo "un click" de manera que publicar páginas que tarden mucho tiempo en cargarse en un método seguro para perder clientes. Cualquier página que cuya carga supere los diez segundos está destinada a ser dejada de lado como opción. La extrema lentitud de la web ha acostumbrado a los usuarios a esperar hasta quince segundos pero la recomendación sigue siendo que mantengamos el tiempo de carga de la página por debajo de 10 segundos. No tener en cuenta las diferencias de configuraciones posibles. El uso de tecnologías no asentadas para la programación de una página deriva en que una gran cantidad de usuarios no van a poder ver nuestra página. Tenemos que tener en cuenta que los usuarios están cada vez más reticentes a renovar sus versiones de navegadores y a cargarse componentes adicionales. El hecho que una página no pueda ser vista bien por una cierta cantidad de usuarios debe hacernos dudar de la efectividad de un diseño, recordemos que es muy difícil recuperar un navegante que ha recibido un impacto negativo en su primera impresión del site. Ni hablar del caso en que una aplicación de nuestro site usando tecnologías de punta haga hacer crash el funcionamiento de la computadora del usuario, el impacto negativo que puede causar es indecible. Como política general podríamos pensar en esperar alrededor de dos años hasta que una tecnología esté lo suficientemente difundida como para que se halla convertido en estándar. No respetar convenciones de uso en web. Ha pasado tiempo desde los comienzos de la world wide web y los navegantes se han acostumbrado a ciertos estándares. Un potencial usuario-cliente no está deseoso de hacer un esfuerzo adicional para entender como funciona nuestro site, facilitar la compresión del mismo utilizando conceptos que ya se han generalizado y se asumen como estándar es la mejor manera de evitar que el usuario se maree y desista de buscar en nuestro sitio. El usuario no está dispuesto a hacer mucho scroll vertical sobre la misma pantalla demasiado y no le agrada el scroll horizontal. Por ende es recomendable que el largo de una página no sea superior a una pantalla y media, mejor si es de una pantalla. El navegante se ha acostumbrado a ver hipervínculos de color azul subrayados e hipervínculos visitados de color bordó subrayados.

El usuario también está acostumbrado a poder poner bookmarks agregando a favoritos un site, el uso de frames no respecta esta costumbre ya que la referencia no permite recuperar la página visualizada originalmente. Otro aspecto a tener en cuenta es permitir el habitual uso del botón de "atrás". El botón para volver atrás (back) de los browsers es una de las pocas herramientas de que dispone el usuario para conservar una guía y estructura de navegación. El uso de frames también molesta esta facilidad habitual. He llegado a observar sites que bloquean el botón de volver atrás o intentan evitar esta funcionalidad abriendo una sesión adicional del navegador en el usuario. Esto no es bien recibido por el usuario que en web está acostumbrado a tener el control. El usuario espera ver el logo de la empresa en el costado superior izquierdo o superior central, espera encontrar en la parte inferior un vínculo con las políticas de privacidad de la empresa y con información institucional y también está acostumbrado a una barra de navegación en la parte izquierda