Normal
0

21

false
false
false

ES
X-NONE
X-NONE

MicrosoftInternetExplorer4

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Normal
0

21

false
false
false

ES
X-NONE
X-NONE

MicrosoftInternetExplorer4

/* Style Definitions */
table.MsoNormalTable
{mso-style-name:”Tabla normal”;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-qformat:yes;
mso-style-parent:””;
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:”Calibri”,”sans-serif”;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-fareast-font-family:”Times New Roman”;
mso-fareast-theme-font:minor-fareast;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;}

Texto efectivo para el diseño web

Los beneficios del texto en el diseño web

A pesar de las limitaciones de no ser capaz de controlar el tipo y el tamaño de fuente, el texto ‘común’ tiene propiedades que lo hacen una herramienta muy poderosa.

No es ambiguo, es rápido de interpretar

El texto puede ser mucho más claro que las imágenes, porque es ‘literal’. La palabra "Buscar" en un botón no es ambigua en absoluto, mientras que un ícono de maximizar o una flecha necesita más decodificación (no hay un símbolo universal que signifique ‘Buscar’).

Esto no es desde luego universalmente verdadero. Algunas veces una imagen o un ícono puede ser mucho más compacta y eficiente que el texto equivalente (y por lo tanto más rápida de interpretar). Otras veces, el objetivo puede ser un significado más ‘borroso’.

Descarga y presenta más rápido

Reducir el tamaño total de archivos (y el número de archivos) utilizados para presentar una página web es deseable por muchas razones. Cada caracter de texto usa exactamente un bit de datos. Incluso con un margen HTML o CSS, el texto en forma de HTML es mucho más ligero que el texto gráfico. El título de esta página, incluyendo su HTML y su CSS, tiene en total 351 bytes.

Effective text

351 B (texto/CSS)

El mismo título en una forma gráfica (formato GIF, 12 colores), es de 1,290 bytes. Sin embargo, cualquier otro título en este sitio cuenta sólo con algunos bytes útiles más (el largo de la palabra), porque usa el mismo CSS, pero cada título de gráfico diferente incurriría en 1kb adicional.

1,290 B (GIF)

Los Web browsers deben primero descargar la página HTML antes de que puedan pedir cualquier otro archivo de recursos que arregle esa página. Mientras los archivos gráficos se están descargando, el texto (que está en el HTML) puede ser ya desplegado en la pantalla. Esto le da a su sitio una ventaja competitiva sobre sitios gráficamente pesados, particularmente cuando los usuarios están ocupados o accediendo a la web a través de una conexión lenta, siendo ambos casos muy comunes.

Abstraer a base de datos o CMS es fácil

El texto son puros datos, lo que lo hace fácil de leer electrónicamente, analizar, abstraer, almacenar, transmitir, buscar, reemplazar, ordenar, indexar, cambiar y convertir. Por el otro lado, el texto o señales en los gráficos son fijos y concretos. Usted no puede hacer mucho con los gráficos una vez que son creados.

La mutabilidad del texto lo hace simple de abstraer a una base de datos, desde donde puede ser extraído y aplicado cuando se necesite. Por ejemplo, el contenido de esta página es almacenado en un archivo de inclusión, mientras que el título de la página viene desde una base de datos. Puedo añadir páginas a este sitio en un momento, lo que no podría hacer si el título fuera un gráfico.

Estas propiedades le permiten a los desarrolladores y diseñadores:

– Crear sistemas de manejo de contenido (CMS), que separan el contenido de un sitio de su formato y lógica. No voy a extenderme aquí sobre todos los beneficios del CMS.

– Crear sitios y aplicaciones multilenguaje, que usan textos diferentes dependiendo del contexto. La lógica y el formato pueden seguir siendo los mismos: sólo el contenido necesita un cambio.

– Producir contenidos basados en texto en otros formatos, y en otras plataformas.

– Cambiar la lógica y el formato (diseño) de un sitio web sin tener que recrear todos los gráficos. (He rediseñado completamente la disposición y la apariencia de este sitio en un día.)

Buscable e indexable

Los web browsers le dan a los lectores humanos maneras fáciles de buscar una página web para una cierta palabra o frase. Además, los sitios pueden indexar fácilmente contenidos basados en texto, que pueden ser usados para activar herramientas de búsqueda potentes. (Aunque indexar gráficos es técnicamente posible, es mucho más difícil, así que está en el terreno de las herramientas de indexación más costosas.)

Las partes externas, tales como buscadores, pueden explorar e indexar su sitio, lo que puede producir beneficios de marketing. (Usted puede implementar una herramienta de búsqueda alimentada por Google en minutos, pero sólo buscará sus propios textos.)

Puede ser seleccionado, copiado y pegado

Me he frustrado en el pasado intentando seleccionar un número telefónico de una compañía desde su página web para pegarlo en un registro de contactos, para entonces descubrir que era en realidad un gráfico. Esas pequeñas cosas hacen una diferencia.

Beneficios de accesibilidad

La flexibilidad del texto es claramente evidente en el área de la accesibilidad.

Los usuarios con una visión ligeramente deteriorada pueden necesitar usar una configuración de texto más grande en su web browser, para poder actuar con comodidad. El tamaño de los contenidos de textos es por lo común personalizable – el de los gráficos nunca lo es. Nota: Al usar CSS, use una configuración de tamaño de fuente personalizable (lo mejor es ems) siempre que sea posible.

Los usuarios con deficiencias visuales severas pueden usar lectores de pantalla sonoros. Éstos leen los contenidos de la pantalla y lo traducen a sonido a través de un sintetizador de voz. Los contenidos gráficos pueden ser traducidos de este modo sólo si tienen una etiqueta HTML ALT.

Transportable a través de las plataformas

Como mencioné arriba, el contenido que está separado de la lógica de un sitio y su diseño/formato puede ser presentado usando un diseño alternativo, o incluso publicado en conjunto con otro sitio. Los sitios web ya son vistos en otras plataformas distintas de los browsers basados en computadoras, tales como las WAP (teléfonos móviles), o las PDA (via AvantGo o similar).

Las WAP sólo pueden mostrar texto; muchas PDAs sólo pueden traducir gráficos en imágenes blanco y negro de 2 colores. Cualquier gráfico complejo puede perder todo su valor en estas situaciones.

Por estas razones, las Guías de Accesibilidad W3C tienen un mojón de Prioridad 1 que establece:

– Proporcionar un equivalente de texto para todo elemento que no sea texto (p.ej., via "alt", "longdesc", o en los contenidos de elemento). Esto incluye: imágenes, representaciones gráficas de texto (incluyendo símbolos), regiones de mapas de imágenes, animaciones (p.ej., GIFs animados), applets y objetos programáticos, arte ascii, marcos, scripts, imágenes usadas como boletines, espaciadores, botones gráficos, sonidos (reproducidos con o sin interacción del usuario), archivos de audio stand-alone, pistas de audio o video, y video.

[Prioridad 1]