Por ello, el diseñador y desarrollador debe aspirar a realizar un código y una estructura sencilla en las páginas webs qué diseña.

Con ello, permitirá que sus trabajos puedan ser visitados y accedidos por el mayor número posible de personas, incluidos quienes tienen algún tipo de discapacidad.

Usabilidad es un término que se refiere a la facilidad con la que el usuario puede llevar a cabo ciertas tareas, encontrar y procesar la información. Las paginas Web y los navegadores deben ofrecer pautas donde el usuario se sienta cómodo y tenga la información necesaria que le permita moverse con agilidad y sin sorpresas.

Para Jakob Nielsen, quien acuñó el termino, la usabilidad de un sitio web debe cumplir las siguientes características, tanto en su parte formal como en los contenidos:

• Novedoso.
• Comprensible.
• Inteligente.
• Atractivo.

Usabilidad y accesibilidad son conceptos que comparten muchas características comunes, como puede ser la simplicidad y flexibilidad.

Por lo tanto, que podamos «usar bien» las páginas Web van adepender de dos factores:

• Que los documentos que forman dicha Web esté correctamente diseñados.
• Que el navegador que utilicemos lo permita.

Los documentos deben estar bien diseñados y bien escritos. En primer lugar, hay que tener en cuenta que los usuarios y usuarias de Internet no suelen leer, sino que hacen una imagen de los textos que encuentran. Es lo que se ha denominado Patrón F y que indica que las personas, cuando encontramos textos en Internet hacemos dos barridos horizontales y luego uno en vertical.

Más allá de esta premisa sobre el comportamiento del ojo humano ante la pantalla, hay que
decir que las personas leemos las dos o tres primeras palabras de los textos y que, con
ello, ya saben si lo que está escrito les interesa o no.

De esta manera, los textos para la Web deben tener en cuenta las
siguientes observaciones:

1. Economía: deben ser directos. Ir al grano, dejar a un lado la palabrería.
2. Los titulos tienen mucha importancia. Deben ser claros y significativos de su contenido porque son la puerta en enganche de cualquier texto, también en la red. Por lo que resulta útil colocar las palabras claves justo al principio del mismo y que éstas sean
   suficientemente atractivas para que el o la internauta sigan leyendo.
   Hay que escribir también subtítulos que vayan guiando la lectura y el planteamiento desarrollado en el texto.
3. Los dos primeros párrafos son los más importantes, sobre todo el primero. Por ello hay que centrarse en su redacción y volcar en sus palabras el máximo de información posible sin que se convierta en una enumeración de datos. Eso sí, con claridad sintácticas, frases cortas y sencillas de entender. En cualquier caso, hay que intentar que los párrafos sean de dos o tres líneas como mucho. En general, hay que resumir mucho, colocando la idea principal al principio del párrafo y haciendo que los primeros párrafos contengan las conclusiones o novedades del tema que se trata.
4. Uso de viñetas e ilustraciones. Es importante aligerar el texto y completar la exposición de ideas con dibujos o fotografías. Los textos de la red son multisecuenciales, por lo que debemos olvidarnos de estructuras cerradas y de elementos lineales.
5. Expresiones clave. Es muy probable que las personas no lleguen al final de los párrafos así que hay que
   seleccionar las palabras y utilizar las estrictamente necesarias.
6. El peligro de los adjetivos. Hay que ser comedido en su empleo pues no agregan nada y anulan el interés del lector.

Otras cuestiones que hay que tener en cuenta al utilizar textos para la Web son, por ejemplo:

1. La tipografía utilizada en el documento ha de resultar legible. De ahí que lo más recomendable sea emplear un tamaño escalable.
2. Utilizar las itálicas con prudencia y sobre todo los subrayados, porque pueden confundir al lector con los enlaces hipertexto.
3. El Hipertexto. Siempre que podamos debemos ofrecer enlaces. Eso sí, deben indicar siempre y de modo claro hacia dónde nos dirigen. Es muy importante que los enlaces se reconozcan clamaramente como tal.
4. Evitar que la información se repita. Si se quiere seguir explicando un tema ya apuntado, mejor acudir a otras formas de expresión como las tablas o los gráficos, las ventanas o los enlaces a otras webs.
5. Fraccionar los textos si son muy largos, ya que pueden resultar difíciles de leer en la pantalla del ordenador.

Como hemos comentado, los navegadores de Internet aportan herramientas que permiten personalizar la manera en que vemos los contenidos. Las más comunes son las siguientes:

1. Aumento o disminución del texto. Dependiendo del navegador, podremos aumentar de manera indefinida o un número determinado de tamaños. Habitualmente esta opción se encuentra en el menú “ver” de la barra de herramientas.
2. Posibilidad de eliminar el estilo, o cambiarlo, incluso por uno personal. En este sentido es muy importante que la estructura de los contenidos de las páginas que diseñemos sea coherente y lineal.
3. Opciones de configuración, que permiten deshabilitar elementos (imágenes, scripts, applets).
4. Opciones para desarrolladores, que nos permiten llegar más allá.

• Cesar Martín: Usabilidad en la red
• Jakob Nielsen. Usability 101: Introduction to Usability.
• Rafael Romero Zúnica. Ideas de Jakob Nielsen sobre cómo escribir para la Web

Cuando escribimos habitualmente usamos caracteres llamados utf-8. Es una norma de transmisión utilizada junto con la norma de codificación Unicode. Pero, no todos los servidores, navegadores o sistemas pueden entenderlo correctamente.

En html existen las denominadas entidades que sí entienden todos los navegadores. Éstas sirven, tanto para evitar los problemas mencionados anteriormente, como para poder mostrar caracteres reservados de html.

Conversor a entidades HTML

A través de la siguiente herramienta es posible convertir cualquier texto a entidades HTML:

• Wikipedia: Codificación de caracteres
• nice-entity.com/ En este sitio Web se pueden consultar todas las entidades divididas en categorías.

Hay dos formas de compatibilidad directa: transicional y estricta.

• La compatibilidad directa transicional es recomendable para sitios visitados por un alto porcentaje de navegadores, que no admiten, de manera adecuada los estándares.
• La contabilidad directa estricta se recomienda para sitios que son visitados por navegadores de última generación. Es segura para navegadores y dispositivos futuros.

Por otra parte, compatibilidad inversa (hacia atrás) significa realizar páginas que son válidas para navegadores antiguos. Su desarrollo es costoso ya que, como hemos visto, requiere de la realización de más de una versión de determinados documentos.

Necesidades y ventajas del diseño usando estándares web

Existen programas editores que nos permiten realizar el trabajo de diseño web como si estuviéramos maquetando una revista. Utilizan un método de trabajo denominado WYSIWYG, acrónimo del inglés What You See Is What You Get (Lo que ves es lo que consigues). Podemos trabajar viendo el resultado final y olvidarnos del código fuente que generamos. Los resultados suelen ser más que satisfactorios y, en apariencia, todos los navegadores modernos responden bien a páginas diseñadas con estas herramientas de autor. En ese caso, por qué tiene el diseñador que preocuparse de contralar el código fuente para que éste “cumpla” los estándares. Conocer el código, y ello no significa necesariamente tener que escribirlo, asegura el máximo control de nuestras páginas y por lo tanto del uso de los estándares Web. Esto nos proporcionará una serie de necesidades y ventajas que a continuación describimos:

• Diseños para el Futuro. Los fabricantes se han dado cuenta de la importancia de los estándares y los adoptan. Estamos garantizando una viabilidad a largo plazo de nuestros trabajos.
• Páginas más económicas con menor cantidad de código que redunda en menores tiempos de carga y facilita la gestión, mantenimiento y actualización.
• Usabilidad. El usuario o usuaria pasa a tener el control de la apariencia del contenido: maquetación en columnas, tamaño y color de fuentes… adaptándola, así, a sus necesidades.
• Accesibilidad. Aseguraremos el acceso a todos los usuarios.

Diseños para el futuro

Mientras los fabricantes de software, de ahora y del futuro, continúen con su compromiso de hacer compatibles sus programas, nuestras páginas, diseñadas siguiendo los estándares tienen garantizado que van a ser vistas correctamente durante mucho tiempo.

Desde hace unos años, es posible acceder a la web desde teléfonos móviles o dispositivos similares, lo cual hace aún más necesario un lenguaje común y unas normas de de uso general.

• Mobile Web Initiative (en inglés)
• Diseñar para dispositivos móviles.Traducción de algunas pautas.

La tipografía es una práctica antigua con unas reglas y características claramente definidas. La actividad o el oficio de tipógrafo, tradicionalmente, ha consistido en situar y crear los espacios de un texto en un medio impreso. Estas tareas las desempeña también en la actualidad el diseñador gráfico y, desde hace pocos años, debe dominarla el diseñador Web. Éste debe saber aplicar los mismos principios tipográficos del medio impreso, al medio pantalla.

La tipografía en la Web es diferente de la tipografía impresa en muchas formas, aunque podemos resumirlas en dos muy importantes:

• La tipografía en la Web es enormemente inestable y por tanto impredecible. Los tamaños, diseños y posiciones fijos de la página de un libro, una revista, un folleto o un cartel, no lo son en absoluto para una página Web. El principal factor es que diseñamos para diferentes sistemas operativos, navegadores y usuarios. Esto afecta, especialmente, en la decisión de la fuente tipográfica que vamos a usar, lo que nos lleva a tener que incluir varias opciones, porque dependemos de archivos tipográficos instalados en cada ordenador. Por ese motivo no tiene sentido elegir la fuente Gil Sans como única tipografía, cuando sabemos que un alto porcentaje de usuarios no la tiene instalada; o, Trebuchet MS, cuando sabemos que es una fuente propia del Sistema Operativo Windows. Además, el usuario puede cambiar el tamaño, de las letras y del espacio en que esta se encuentran.
• Las posibilidades gráficas y multimedia son mayores y nunca vamos a estar condicionados por el precio. Pensemos que en el medio impreso la interactividad está muy limitada, mientras que en los sitios Web es una características sustancial: en el hipervínculo está uno de los principales éxitos del medio Web. Además los colores son gratuitos y no están limitado por el tipo de papel o las mezclas de tintas. Con las medios informáticos podemos conseguir mayor número de colores que los que el ojo puede humano puede diferenciar.

Las posibilidades tipográficas que ofrece la Web actual, mediante el uso de hojas de estilos CSS son, en comparación con la Web del siglo pasado enormes. En definitiva, vamos a tener control total sobre fuente, tamaño, color, espacio interlineal y espacio por encima y por debajo de bloques de texto.

Fundamentos tipográficos

Una tipografía es un conjunto de caracteres creados a partir del mismo diseño.

Una familia comprende diferentes variaciones de una misma tipografía.

Arial Negrita y Arial Normal, que son distintas tipografías pertenecientes a la misma familia.

Por otro lado, el término “fuente” se refiere a la implementación de una tipografía que contiene todos los caracteres necesarios de dicha tipografía. Así pues, no deben usarse de la misma forma. Las distintas plataformas ofrecen fuentes con formato distintos  (Postscript Type 1, TrueType, OpenType y los formatos UNIX bitmap). Aunque los archivos de fuente son diferentes, la tipografía, es decir, el diseño, es el mismo.

En el siguiente gráfico vemos representadas los elementos de un tipo de impresión en metal.

Cuerpo:

tamaño de la tipografía. Este tamaño está determinado por el soporte metálico tradicional.

 

Altura x:

altura de las letras de caja baja, las letras minúsculas, excluyendo los ascendentes y los descendentes.

 

Línea base:

la línea sobre la que se apoya la altura.

 

Ascendente:

asta que contiene la letra de caja baja y que sobresale por encima de la altura x.

 

Descendente:

asta de la letra de caja baja que se encuentra por debajo de la línea de base.

 

Espacio interlineado o interlinea:

separación existente que hay entre líneas.

La tipografía digital ha heredado determinadas características de composición tradicional de metal. De esta forma, para determinar el tamaño de una tipografía informática nos referiremos al tamaño de un cuerpo invisible.

• UnosTiposDuros. Teoría y práctica de la tipografía.
• Unos tipos duros. Anatomía de la letra.
• Unos tipos duros. Tratado clásico de tipografía: 3 De la letra y sus partes.
• accentrik.com. Conocimientos Básicos de la Tipografía
• Desarrolloweb.com. Medidas tipográfica.
• Desarrolloweb.com. Partes de la letra.

Una parte fundamental es que esté bien clara  la separación entre los contenidos y la apariencia. Esto es, código de marcado XHTML o HTML y hojas de estilos CSS, respectivamente. Si nuestro código es sencillo y limpio, evitando antiguas malas prácticas y creando información de manera semántica, es decir aplicando significado a cada elemento, el trabajo de diseño y maquetación será mucho más sencillo. Éste será un necesario primer paso para poder crear la apariencia y diseño que hayamos ideado, aplicando, de la manera más convenientes, las reglas y propiedades CSS necesarias.

Por otra parte, conocer las particularidades de todas las propiedades y valores del lenguaje de marcado y de las hojas de estilos es sólo una primera parte del trabajo. Además de esto, debemos saber cómo integrar los distintos elementos que participan en nuestro proyecto Web y cómo interactúan entre ellos. Para ello, también, es necesario tener las ideas bien claras del trabajo global que vamos a acometer, incluso en el caso de que nuestra tarea sea parte del proceso.

La Planificación

Briefing es un documento que recoger toda la información sobre cualquiera de las variables que puedan necesitarse para el proyecto.

Es muy importante entender lo que se nos pide en el proyecto, aunque parezca obvio. Tener las ideas claras. Hay que saber cuál es el perfil de nuestros visitantes potenciales, quién es nuestro cliente, objetivos a alcanzar éste, presupuesto, fechas de entrega, etc.

A continuación damos algunos consejos para comprender el contexto de  nuestro trabajo:

• Investigar todas características técnicas del trabajo. Los que consideramos que debe tener y los que el cliente ha pensado: colores, tipografía, características del servidor, navegación, compromiso con los estándares, con la accesibilidad…
• Conocer el tipo de visitante. No todas las paginas tienen vocación de llegar a todo el mundo. Esto será esencial si tenemos que tener en cuenta diferentes idiomas, culturas, tradiciones…
• Ver trabajos anteriores, si existen, del cliente o del proyecto, sean o no Webs. Imagina que tu sitio es para un cantante o grupo musical; escucha sus canciones, estudia el diseño e ilustraciones de sus discos.
• Ten en cuenta la imagen de la empresa, organismo o autor para quien trabajas. No olvides tampoco a los posibles patrocinadores, organizadores, subvenciones. Posiblemente sus logotipos tendrán que formar parte del diseño.
• Y, por supuesto, conoce cuáles son los objetivos del cliente, que pretende conseguir con la página, sean éstos económicos o no.

Toda la información recabada te servirá, tanto para hacer tu trabajo técnico, como en el proceso de negociación con tu cliente. Si tus conjeturas y diseños tienen una base sólida y bien documentada será más fácil convencerlo sobre una decisión que tú has tomado y de la que él o ella no está de acuerdo.

Es, sin duda, una de las herramientas más importantes del lenguaje de hojas de estilos CSS. Comprender y manejar este comportamiento es la base de la distribución y maquetación del diseño Web moderno.

Aunque están presentes, las cajas no son visibles para los receptores de las páginas Web. Esto se debe a que no tienen, por defecto, ningún color en su perfil o en su interior. Para comprobarlo podemos forzar las mismas haciendo que algunos de sus elementos aparezcan coloreados, lo que nos permitirá ver cómo son y cómo se distribuyen en la página.

La colocación de las cajas la realizan los navegadores de forma automática, aunque el lenguaje CSS permite que se modifiquen todas sus peculiaridades.

De esta manera, podemos observar cómo cada caja está formada por seis partes:

Contenido:

Se ofrece en lenguaje HTML. Puede adquirir las siguientes variantes: una imagen, las palabras que componen un párrafo, un texto, etc.

Relleno:

Es el nombre que recibe el espacio libre que existe entre el contenido y el borde de la caja. Es opcional y transparente.

Borde:

Es la línea que encierra el contenido y lo que rellena a este contenido.

Imagen de fondo:

Es la imagen que muestra la caja por detrás del contenido y del espacio que lo rellena.

Color de fondo:

Es el color que se encuentra tras el contenido y el espacio que rellena a la caja.

Margen:

Se denomina así a la separación que hay entre las distintas cajas de una página. Es opcional y transparente.

Los elementos que tienen, entre sus características la transparencia, dependen para su visualización, de que  el elemento padre tenga definido un color o una imagen.

Existe un orden prioritario en la relación color–imagen de fondo. Así, si una caja tiene definido un color y una imagen de fondo, la imagen pasará a primer plano y será la que visualice. Esto cambia si la imagen no cubre, en su totalidad, la caja, o si contiene elementos transparentes. En este segundo supuesto, también veremos el color de fondo.

En cualquier caso, si combinamos colores de fondo con imágenes transparentes, se alcanzan efectos que debemos tener en cuenta por su efectividad en el resultado.