Directrices de usabilidad de Proexport, para todos sus sitios web.

1. Guía Web de Proexport 1.0
Autor: Mario Carvajal - Astrolabio
Bogotá, 9 de agosto de 2008
Guía Web de 1
Proexport 1.0

2. Tabla de contenido
PRESENTACIÓN 4
Tipografía 5
Tamaño tipográfico 6
Alineación de párrafos 8
Tamaño tipográfico determina las dimensiones de cajas compositivas 10
Color de tipografía 12
Fuentes tipográficas comunes 14
Renglones de tamaño medio 16
Contraste de color 19
Imágenes 21
Pie de foto 22
Imágenes como textos 23
Favicon 25
Audio 26
Botones con sonido 27
Sonido de fondo 28
Estándares 29
Estándares del W3C 30
DOCTYPE 31
Maquetación en tablas 33
Convenciones web 35
Independencia de dispositivo 38
Hojas de estilo no requeridas 39
Hojas de estilo para impresión 40
Prioridad 2, Nivel AA de las WCAG 41
Logotipos del W3C 42
Plantillas validadas 43
Hipervínculos
Hipervínculos y navegación 44
Falsos hipervínculos 45
Guía Web de 2
Proexport 1.0

3. Estados de hipervínculos 46
Ubicación del usuario 48
Hipervínculo a la página de inicio 49
Navegación consistente 50
Salto de vínculos repetitivos 52
Páginas de error 53
Interacción 54
Longitud del cuadro de búsqueda 55
Diseño de Interfaz Gráfica de Usuario (GUI) personalizados 56
Posicionamiento 57
URL complejos 58
Título de la ventana 60
Canal RSS 62
Mapa de sitio dinámico en XML 63
Etiquetas meta pertinentes 64
Búsqueda 66
Cajón de búsqueda consistente 67
Motor de búsqueda total 68
Formularios 69
Campos requeridos 70
Etiquetas cercanas a campos 72
Guía Web de 3
Proexport 1.0

4. Presentación
Proexport presenta su Guía Web 1.0, un conjunto de directrices
relacionadas con la elaboración de los sitios web de Proexport, que bajo la
filosofía del Diseño Centrado en el Usuario, DCU, busca orientar a
diseñadores de interfaz y programadores web, en buenas prácticas para el
desarrollo de sitios.
Está dividida en nueve capítulos, que temáticamente van tratando los
puntos más importantes a tener en cuenta en el diseño y la programación
web. Cada capítulo se divide en directrices, que están comentadas y
ejemplificadas, con el objetivo que el lector encuentre una argumentación
consistente y unos ejemplos, tanto de lo que se debe hacer como de lo que
no.
Finalmente presentamos un listado de documentos relacionados (libros,
webgrafía, directrices, etc.) que recomendamos leer para una ampliación
del conocimiento en buenas prácticas. También hemos incluido un glosario
para aclarar aquellas palabras técnicas usadas a lo largo de la Guía.
Esta guía debe considerarse como una primera versión, que deberá ser
ampliada a la par de los avances tecnológicos, de los descubrimientos e
invenciones a la que la web nos tiene acostumbrados.
Esperamos que este sea un aporte valioso para la elaboración y rediseño de
todos los sitios administrados por Proexport.
Mario Carvajal
Astrolabio, agosto de 2008
Guía Web de 4
Proexport 1.0

5. 1 Tipografía
El tratamiento tipográfico para la Web es diferente al
tradicional para impresos. Las características de las
pantallas, la interactividad del usuario con el contenido,
las limitaciones en las diferentes plataformas, entre otras
razones, obligan al diseñador a tener un especial cuidado
en la selección de familias tipográficas, tamaños y colores
a emplear.
Guía Web de 5
Proexport 1.0

6. 1.1 Tamaño tipográfico
Directriz: Utilice en la hoja de estilos únicamente medidas relativas,
como em, para asignar tamaño a los textos.
Comentarios
Comentario s: Existen dos tipos de medidas en las hojas de estilo en
cascada CSS: absolutas y relativas; estas últimas tienen la propiedad de
permitir el cambio de tamaño de los textos en función del que haya
definido el usuario en su navegador, como tamaño preferente.
Esta opción que tienen los navegadores de aumentar o disminuir el tamaño
del texto es especialmente útil para aquellas personas que tienen
dificultades visuales y necesitan textos más grandes.
Si el diseñador asigna medidas absolutas, impide el escalamiento de los
textos, por lo que resulta una mala práctica en diseño web.
Ejemplo:
Ejemplo: Veamos ahora un ejemplo de cómo un navegador como Internet
Explorer interpreta una página con texto normal y luego con texto
agrandado por el usuario, gracias al uso de la medida em:
Figura: Internet Explorer 6 tiene predeterminado el tamaño de texto como Mediano.
Guía Web de 6
Proexport 1.0

7. Figura: Si el usuario decide cambiar la preferencia del tamaño de texto, por ejemplo a “Mayor”, el
texto debe escalarse, gracias a una medida relativa en la hoja de estilos.
Guía Web de 7
Proexport 1.0

8. 1.2 Alineación de párrafos
Directriz: Utilice para los párrafos de prosa alineación al margen
izquierdo y evite el uso de alineación justificada.
Comentario: Un párrafo de prosa justificado genera en muchas ocasiones
una separación exagerada entre palabras, que no solo le resta estética al
diseño general, sino que inciden negativamente en la lectura.
Normalmente esta práctica era fácil de controlar en medios impresos. Sin
embargo, los documentos electrónicos tienen características como la
imposibilidad de dividir las sílabas de la última palabra del renglón. Por otra
parte, un documento electrónico permite control tipográfico por parte del
usuario, trasladando el tradicional control del tamaño de la tipografía del
diseñador al usuario.
Por estas dos razones, al no poder separa silábicamente y al no tener
control sobre el tamaño, un párrafo justificado puede verse empobrecido al
agrandar la fuente, por la necesidad que tiene de separar las palabras entre
sí.
Ejemplo: Veamos dos cajas tipográficas del mismo texto, una con el párrafo
alineado a la izquierda y la otra con la alineación justificada.
Figura: Ejemplo de un párrafo con alineación a la izquierda, nótese la separación que hay entre cada
palabra, que resulta armónica y genera lo que en tipografía se conoce como un gris perfecto.
Guía Web de 8
Proexport 1.0

9. Figura: El mismo párrafo pero con el texto justificado. Note cómo las palabras se deben separar
forzosamente entre sí, generando unos grandes espacios blancos, produciendo una caja
tipográfica sin armonía y con un color gris claro.
Guía Web de 9
Proexport 1.0

10. 1.3 Tamaño tipográfico determina las dimensiones de cajas
compositivas
Directriz: Asigne medidas en em para el ancho y el alto de las cajas de
composición de la retícula.
Comentario: Los diseños web tienen la posibilidad de aumentar su tamaño
proporcionalmente al de la preferencia de la tipografía del usuario. Esta
capacidad de asignar medidas relativas al ancho y alto de las cajas de
composición debe ser aprovechada por el diseñador para que la interfaz
aumente o disminuya proporcionalmente, tal y como si estuviera
realizando un zoom.
Si la medida usada para asignar las dimensiones está en unidades
absolutas, como px por ejemplo, la interfaz escalará únicamente la
tipografía, corriendo el peligro de desbordarse toda la interfaz.
Ejemplo: En la siguiente captura de pantalla veremos el ejemplo de un sitio
que escala perfectamente según el tamaño de texto preferido por el
usuario.
Guía Web de 10
Proexport 1.0

11. Figura: Esta página está diseñada con medidas relativas en em. En la captura de pantalla vemos
cuando está el tamaño de texto Mediano como preferencia en el navegador.
Figura: Si un usuario prefiere aumentar el amaño del texto, toda la composición aumenta de forma
proporcional, porque sus medidas están determinadas en em.
Guía Web de 11
Proexport 1.0

12. 1.4 Color de tipografía
Directriz: Use texto oscuro con fondo claro y sin texturas para párrafos de
prosa.
Comentario: Un diseñador siempre tendrá dos posibilidades de contrastar
el texto de su diseño: con texto positivo o negativo. El primero es tal vez el
más común (texto oscuro sobre fondo claro), mientras que el segundo es
menos usado (texto blanco sobre fondo oscuro).
Los fondos oscuros tienden a cansar la visión del usuario, por lo que es
aconsejable usarlos en su mínima expresión.
Ejemplo: Veamos el comportamiento del texto negro sobre fondo claro y
de texto blanco sobre fondo oscuro:
Figura: Ejemplo de una noticia usando texto negro con fondo claro.
Guía Web de 12
Proexport 1.0

13. Figura: Cuando el texto es blanco y el fondo oscuro —normalmente llamado “texto invertido”— la
legibilidad disminuye y la visión humana tiende a fatigarse.
Guía Web de 13
Proexport 1.0

14. 1.5 Fuentes tipográficas comunes
Directriz: Asigne únicamente fuentes tipográficas comunes en la hoja de
estilo para todos los textos.
Comentario: A diferencia del diseño gráfico de impresos, en la Web no
existe la libertad de escoger cualquier fuente tipográfica. En efecto, una
página web debe basar su tipografía en el listado de fuentes instaladas en
el computador del usuario. Así que si el diseñador asigne una tipografía
como Kozuka a la página web, pero el usuario no la tiene instalada, el
resultado será incontrolable, porque será la computadora quien decida por
qué fuente reemplazarla.
Para evitar perder el control tipográfico, es necesario diseñar solamente
con fuentes tipográficas comunes en los diversos sistemas operativos, y
que por estadísticas se conoce que vienen preinstaladas.
Ejemplo: Sugerimos usar las siguientes fuentes:
Windows Linux Mac
Serifadas Georgia Georgia Georgia
Palatino Linotype Palatino URW Palladio L
Times New Roman Times Free Serif
Times New Nimbus Roman
Roman No9 L
Times New Roman
Palo seco Arial Arial Arial
FreeSans
Nimbus Sans L
Guía Web de 14
Proexport 1.0

15. Trebuchet MS Trebuchet MS Trebuchet MS
Verdana Verdana Verdana
Bitstream Vera
Sans
DejaVu Sans
Microsoft Sans Helvetica Neue MgOpen Modata
Serif
Manuscriptas Comic Sans MS Comic Sans MS Comic Sans MS
Monoespaciadas Courier New Courier Courier New
Courier New Nimbus Mono L
FreeMono
Símbolos Webdings Webdings Webdings
Tabla: Fuentes tipográficas en los tres sistemas operativos
Guía Web de 15
Proexport 1.0

16. 1.6 Renglones de tamaño medio
Directriz: Diseñe el texto de prosa para renglones de tamaño medio 60-
80 cpl (caracteres por línea).
Comentario: Aunque no existen estudios definitivos sobre el cpl ideal para
textos de prosa en la Web, algunas investigaciones nos permiten deducir
que el tamaño ideal de un renglón es la mediana.
En efecto, un renglón demasiado corto implica que el ojo tiene que realizar
constantemente saltos de línea, por ende tiende a cansarse rápidamente.
Por otro lado, un renglón demasiado largo implica que la vista deba realizar
un recorrido demasiado largo, produciendo de igual forma cansancio.
Aunque hay investigaciones1 que apuntan a que el cpl ideal está cercano a
100, otras2 por el contrario aconsejan un tamaño medio-corto, de 55 cpl.
Nosotros proponemos la investigación de García y Short (2002) sugiriendo
el renglón ideal entre 60-80 cpl.
Ejemplo: En las siguientes imágenes mostraremos por qué el cpl debe ser
el promedio:
1
Duchniky y Kolers, 1983; Dyson y Kipping, 1998
2
Dyson y Haslgrove, 2001
Guía Web de 16
Proexport 1.0

17. Figura: Los párrafos que vemos en el ejemplo tienen un promedio de CPL de 150. Con un renglón
tan largo la vista se cansa porque debe recorrer un renglón demasiado largo
Figura: Un párrafo con CPL de 72 guarda la media que proponemos. Es ideal para la lectura
descansada, tranquila y relajada.
Guía Web de 17
Proexport 1.0

18. Figura: Con un CPL de 40, el párrafo ya es demasiado angosto, y aunque no es tan molesto de leer
como un renglón largo, genera demasiados saltos de la vista, además de un desperdicio en
pantalla que se traduce en un desplazamiento o scrolling innecesario.
Guía Web de 18
Proexport 1.0

19. 1.7 Contraste de color
Directriz: Utilice colores para texto y fondo que cumplan con la directriz
2.2 de la WCAG: diferencia de brillo 125 ó superior, diferencia de color 500
ó superior.
Comentario: En las Directrices de Accesibilidad para el Contenido Web
(WCAG, versión 1.0) se plantea la importancia de un alto contraste, tanto de
brillo como de color para todos los textos de un sitio web.
Algunas personas con limitaciones visuales o usuarios con dispositivos de
salida mal calibrados (por ejemplo proyectores o monitores con elevado
brillo) se pueden ver afectados por un bajo contraste entre el texto y el
fondo, dificultándose de esta manera la correcta lectura.
El W3C propone un algoritmo para poder medir el nivel de contraste en
brillo y color, y sugiere un mínimo umbral de 125 para el brillo y de 500
para el color. Sugerimos utilizar herramientas gratuitas como JuicyStudio3
que facilitan el análisis.
Ejemplo: Al siguiente párrafo le hemos analizado la diferencia en brillo y la
diferencia en color gracias a la herramienta JuicyStudio, y el resultado es
positivo, pues supera el umbral requerido en la WCAG.
3
JuicyStudio, analizador de contraste:
http://juicystudio.com/services/colourcontrast-es.php#result
Guía Web de 19
Proexport 1.0

20. Figura: Un párrafo con texto negro y fondo blanco, por supuesto que pasa el umbral mínimo que
sugiere la W3C en las Directrices WCAG.
Figura: El mismo texto, pero con un color de texto diferente, mucho más claro. Para este caso, el
contraste en brillo y color no superan el umbral requerido, por lo tanto se considera como un
diseño inaccesible.
Guía Web de 20
Proexport 1.0

21. 2 Imágenes
Además de textos, los sitios web transmiten en gran
parte su información gracias a las imágenes. En este
capítulo veremos las directrices relacionadas con el
tratamiento de fotografías, gráficos, así como elementos
extra de la página como el icono de favoritos, entre otros.
Guía Web de 21
Proexport 1.0

22. 2.1 Pie de foto
Directriz: Diseñe un estilo para los textos explicativos que sirvan como
pie de foto.
Comentario: Una buena práctica del diseño de impresos (revistas,
periódicos, libros) y que ha sido descuidada en el diseño web, es
acompañar un texto debajo de la fotografía.
Ayuda a que el usuario obtenga mayor información de la imagen, pero
también le permite escanear el texto de una manera más sencilla y
amigable.
Ejemplo: En la siguiente pantalla podemos observar la ventaja de usar un
pie de foto, bajo cada imagen:
Figura: Los pie de foto facilitan el escaneo del usuario. Es una buena práctica que el diseñador los
tenga en cuenta en su boceto.
Guía Web de 22
Proexport 1.0

23. 2.2 Imágenes como textos
Directriz: Evite el uso de textos falsos, es decir, imágenes como textos.
Comentario: Con el objetivo de poder usar fuentes tipográficas no
convencionales y además de poder realizar efectos visuales, algunos
diseñadores han optado por una mala práctica que consiste en reemplazar
el texto real por imágenes que aparentan ser texto.
Esta mala práctica trae consigno graves problemas, como un peso mayor
de carga, inaccesibilidad para lectores de pantalla como Jaws, no
indexación en motores de búsqueda, etc.
Muchos de los efectos que el diseñador desea lograr pueden ser
programados desde la hoja de estilo en cascada, CSS.
Ejemplo: A continuación mostraremos el problema que pueden generar
los falsos textos en un sitio web.
Figura: En esta captura de pantalla aparentemente tenemos varios textos: un menú superior, unas
pestañas verdes que sirven como menú, unos cajones azules laterales y un contenido en el
centro. Pero ¿será todo este, texto real?
Guía Web de 23
Proexport 1.0

24. Figura: La misma página de la figura anterior, pero con las imágenes deshabilitadas. Nos damos
cuenta que el único texto verdadero, rastreable por motores de búsqueda y leíble por
lectores de pantalla es el del centro. El resto es pseudotexto en imágenes.
Guía Web de 24
Proexport 1.0

25. 2.3 Favicon
Directriz: Diseñe el icono de favoritos, conocido comúnmente como
favicon.
Comentario: El icono de favoritos, más comúnmente conocido como
favicon, es un pequeño icono de 16 x 16 píxeles, que normalmente los
sitios web poseen para identificar su marca, en contextos como la barra de
direcciones, las pestañas de navegación o el listado de favoritos o
marcadores.
Hay varias herramientas gratuitas para la creación del favicon,
recomendamos usar DeGraeve a la que se puede acceder desde el
siguiente URL: http://www.degraeve.com/favicon/
Ejemplo: Veamos cómo se visualiza un favicon, para ello usamos el
navegador Opera, sin embargo este mismo comportamiento lo tienen
navegadores actuales como Internet Explorer 7 ó Firefox.
Figura: En el navegador Opera, así como en los más modernos navegadores, en las pestañas aparece
el favicon que le da identidad a la marca. Además, es un elemento importante de
recordación, para navegar con mayor rapidez entre las pestañas
Figura: Al guardar en los “Favoritos” de Internet Explorer, el favicon resaltará la marca y ayudará en la
identificación.
Guía Web de 25
Proexport 1.0

26. 3 Audio
El diseñador de interfaz deberá tener en cuenta que el
audio para la web tiene un tratamiento que debe cumplir
con normas de accesibilidad y con criterios de usabilidad,
que muy frecuentemente no son tenidos en cuenta. En
este capítulo se fijarán las directrices para el tratamiento
del audio de los sitios de Proexport.
Guía Web de 26
Proexport 1.0

27. 3.1 Botones con sonido
Directriz: Evite programar botones con sonido.
Comentario: En el diseño de interfaces, particularmente aquellas que se
basan en tecnologías como Flash, hay una tendencia a programar sonido
en los botones de acción, en los menús y en general en elementos de
interactividad.
Consideramos esta como una mala práctica. El sonido en el botón no
aporta al entendimiento de la interfaz, por el contrario se convierte en un
elemento molesto que puede interferir con otras acciones que al tiempo
esté realizando el usuario en su computadora, como una llamada vía IP o
una canción que esté escuchando en su reproductor.
Ejemplo: en la siguiente captura de pantalla vemos los botones de
navegación, que al ser pulsados emiten sonidos. Mala práctica.
F igura: Típico sitio web que emula ser una multimedia, al pasar el cursor sobre los botones,
escuchamos sonidos.
Guía Web de 27
Proexport 1.0

28. 3.2 Sonido de fondo
Directriz: Evite usar sonidos de fondo.
Comentario: Cuando se ingresa a un sitio web que tiene en el fondo
sonidos (banda sonora, loop o cualquier otro efecto), el usuario se siente
incómodo, porque puede ver interrumpidas otras acciones auditivas que
esté desarrollando.
Por ejemplo, una llamada telefónica vía IP, una canción en su reproductor,
o sencillamente desea guardar silencio en ambientes donde estará mal
visto algún sonido, una biblioteca, una oficina, etc.
¿Para qué molestar al usuario con sonidos? Desaconsejamos rotundamente
esta mala práctica.
Ejemplo: Desafortunadamente en el mundo podremos encontrar cientos
de páginas que ejemplifican esta mala práctica, sobre todo aquellas que
tienen una introducción en Flash, páginas splash o jumpage (otra mala
idea). Para escuchar el siguiente ejemplo, usted deberá ingresar a la página
www.rinestym.com, paradójicamente ganadora a mejor página web para
Pymes en los Premios Colombia en Línea 2007.
Figura: Página de inicio con intro en Flash del sitio ganador del Premio Colombia en Línea 2007,
Rines TYM. Al ingresar al sitio www.rinestym.com lo primero que nos encontramos es con
una molesta música de fondo que interrumpe las a
Guía Web de 28
Proexport 1.0

29. 4 Estándares web
Asumir los estándares web, emitidos por el Consorcio
W3C, generará para todos los proyectos actuales y
futuros de Proexport muchos beneficios, entre otros:
independencia de dispositivo, mayor nivel de
accesibilidad, mejor posicionamiento, facilidad para
cambios de interfaz en el futuro, disminución de tiempos
de carga, entre otros.
Guía Web de 29
Proexport 1.0

30. 4.1 Estándares del W3C
Directriz:
Directriz: Use los estándares de la W3C: XHTML para el contenido y CSS
para la presentación.
Comentario: El Consorcio W3C tiene por finalidad llevar a la Web a su
máximo potencial. Y lo hace creando tecnologías que terminan siendo
estándares. Entre los muchos estándares recomendados por el W3C
tenemos el XHTML y el CSS.
El XHTML —eXtensible Hypertext Markup Language (lenguaje extensible
de marcado de hipertexto)— es el lenguaje de marcado pensado para
sustituir a HTML como estándar para las páginas web. En él está inmerso el
contenido de la página web.
Por su parte, CSS —Cascading Style Sheet— son un lenguaje formal usado
para definir la presentación de un documento estructurado escrito en
HTML o XML (y por extensión en XHTML). La CSS es, por lo tanto, encargada
de la presentación del documento.
En el siguiente gráfico vemos claramente cómo están relacionadas estas
tecnologías, incluyendo la capa de comportamiento:
Figura: Relación entre HTML, CSS y ECMA Script en la separación de las diversas capas que
componen una página web: contenido, presentación y comportamiento.
Guía Web de 30
Proexport 1.0

31. 4.2 DOCTYPE
Directriz: Declare el DOCTYPE o tipo de documento en cada una de las
páginas web del sitio.
Comentario: Resulta indispensable que cada página web del sitio tenga la
declaración del tipo de documento, más conocida como DOCTYPE,
perfectamente estructurada, para que sea entendida por los navegadores,
evitando caer en el modo de compatibilidad hacia atrás, que obligaría a un
renderizado de la página web errado.
Muy importante tener en cuenta que por errores de interpretación del
navegador Internet Explorer 6, antes de la declaración del tipo de
documento no puede existir ninguna línea. Algunos desarrolladores ponen
una declaración XML como primera línea y luego el Doctype. En teoría, es
una práctica correcta. Sin embargo, el navegador IE 6 interpretará como
una inexistencia del Doctype, y el resultado es la renderización de la página
en Quirsk Mode, con resultados inesperados en la composición gráfica.
Ejemplo: Veamos cómo debería el desarrollador incluir esta declaración en
sus documentos:
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/DTD/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/DTD/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Guía Web de 31
Proexport 1.0

32. XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
frameset.dtd">
Sugerimos usar la declaración de XHTML 1.0 Transitional para todas las
páginas web de Proexport.
Guía Web de 32
Proexport 1.0

33. 4.3 Maquetación en tablas
Directriz: Maquete usando CSS y evite el uso de tablas.
Comentario: En los inicios de la Web, cuando no existía ni siquiera la
posibilidad de diseñar sitios con hojas de estilo (CSS), los diseñadores
optaron por recurrir a las tablas para maquetar y posicionar los diferentes
elementos de las páginas.
Por ejemplo, para diseñar una página con un encabezado, a tres columnas
y con un pie, el diseñador recurría a la siguiente tabla:
Figura : Una antigua página web de 1999, diseñada bajo el concepto de maquetación con tablas, a la
izquierda el esquema, a la derecha ya la página funcionando
Esta práctica permitía diseños más atractivos, multicolumna, pero
sacrificaba la semántica de la etiqueta <table> que debería usarse
realmente para tabular datos. Es como si para destapar la cerveza usáramos
la chapa de una puerta y no un destapador.
No tardó el Consorcio W3C en emitir el estándar de hojas de estilo CSS, que
hoy en día está en la versión 2.1 y es soportado por la mayoría de
navegadores de la actualidad (Internet Explorer 7 y 6, Firefox, Safari, Mozilla,
Opera, entre otros).
Con las hojas de estilo se puede llegar a potentes y bellos diseños, sin
necesidad de usar tablas para maquetar.
Guía Web de 33
Proexport 1.0

34. Ejemplo: Nada mejor que presentar el ejemplo de CSS Zen Garden que nos
demuestra cómo un solo archivo XHTML puede variar según la hoja de
estilo en cascada, CSS, para toda clase de diseños y composiciones, sin usar
una sola tabla:
Figura: Todas las anteriores capturas de pantalla hacen parte del proyecto CSS Zen Garden
(www.csszengarden.com). El archivo de contenido es exactamente el mismo, lo único que
cambia es la capa de presentación. Para lograr cualquiera de las más de cien composiciones
gráficas que tiene el proyecto, no se ha necesitado ni una sola tabla.
Guía Web de 34
Proexport 1.0

35. 4.4 Convenciones web
Directriz: Haga uso de las convenciones web.
Comentario: Creemos conveniente recordar en este documento que el
diseñador web trabaja para diseñar interfaces. Es decir, pantallas que
servirán para que el usuario interactúe con el contenido de una página
web.
Por ello debe considerar que el usuario no está dispuesto a aprender a usar
cada sitio que visita a diario desde cero. Hay una carga cognitiva
importante que ha aprendido durante años. Es lo que llamamos
convenciones, un importante arsenal que debe el diseñador echar mano
para lograr interfaces más efectivas.
Ejemplos
Ejemplo s: Son muchas las convenciones que hoy en día existen y que
inconscientemente los usuarios ya saben usarlas, veamos algunas:
- Subrayado de hipervínculos
- Logotipo en la parte superior izquierda
- Hipervínculo en el logotipo hacia el inicio
- Pestañas de navegación
- Botón RSS
- Botón PLAY para audio y video
Figura: El usuario está acostumbrado a que el logotipo está en la parte superior izquierda y que
además tenga hipervínculo hacia la página de inicio.
Guía Web de 35
Proexport 1.0

36. Figura: El usuario sabe que un triángulo apuntando a la derecha es sinónimo de play, es decir, el
botón que permite iniciar un sonido o un video.
Figura: Los usuarios reconocen ya el botón naranja con el símbolo de Sindicación Realmente Simple,
y saben (en una gran cantidad de ocasiones) que a haciendo clic sobre él podrá suscribirse al
canal RSS.
Guía Web de 36
Proexport 1.0

37. Figura: Sin necesidad de entender mandarían, en la anterior captura de pantalla podremos
reconocer sin ningún problema los hipervínculos y podremos diferenciarlos claramente de
los textos que no lo son.
Guía Web de 37
Proexport 1.0

38. 4.5 Independencia de dispositivo
Directriz: Diseñe con independencia de dispositivo.
Comentario: En la era de la guerra de navegadores (Netscape vs Internet
Explorer), fue muy común encontrar en las páginas web un aviso que
advertía que el sitio había sido optimizado para trabajar en tal o cual
navegador, y que además debía usarse tal o cual plugin y, por si fuera poco,
se le advertía al usuario que debía cambiar la resolución de su pantalla,
para ver mejor el sitio.
A eso se le llama “diseñar para un dispositivo”. Y eso es precisamente lo que
desaconsejan en el punto 9 las WCAG.
Por lo tanto, muy importante verificar que el diseño se ve de forma
adecuada en las diferentes plataformas: Windows, Linux y Macintosh. Así
como también en los diferentes navegadores: Firefox, Internet Explorer,
Safari, Opera, Mozilla, Konkeror, Camino. Y en diversas resoluciones de
pantalla: 800x600, 1024x768, 1280x800, 1400x900 etc. Inclusive, más
interesante aún, verificar que se visualiza correctamente en una
computadora, como en un dispositivo móvil.
Ejemplo: Desaconsejamos diseñar para un dispositivo determinado y más
aún declararlo en la página web.
Figura: Captura de pantalla y ampliación de pie de página donde se declara que el sitio ha sido
diseñado para un navegador es pecífico y para una resolución específica. Esto es una
muestra evidente del incumplimiento de la directriz 9 de las WCAG.
Guía Web de 38
Proexport 1.0

39. 4.6 Hojas de estilo no requeridas
Directriz: Organice la información para que tenga coherencia, inclusive al
visualizarse sin hojas de estilo.
Comentario: El orden en el que han sido dispuestos los elementos en el
documento XHTML influye en aspectos como la accesibilidad. Si no
existiera hoja de estilo o si estuviera desactivada, el documento debe tener
coherencia.
Ejemplo: En la siguiente captura de pantalla veremos cómo un sitio web, al
dejarlo completamente desnudo, sin el ropaje que significan las hojas de
estilo en cascada CSS, debe quedar coherentemente estructurado.
Figura: En la parte izquierda vemos un sitio web diseñado correctamente con hojas de estilo, pero
en la parte derecha vemos el mismo sitios web, sin su vestido, sin su diseño, sin CSS, y el
resultado es óptimo, coherente y permite una lectura de todos los contenidos.
Guía Web de 39
Proexport 1.0

40. 4.7 Hojas de estilo para impresión
Directriz: Desarrolle páginas que puedan imprimirse correctamente,
usando hojas de estilo para impresión.
Comentario: Las hojas de estilo en cascada, CSS, no solo sirven para dar
apariencia gráfica en una pantalla de computador. Existen otros tipos de
hojas de estilo y entre ellas, cobra una singular importancia la hoja de estilo
para impresión, que le ofrece información al navegador sobre cómo
deseamos que sea impreso un determinado documento.
Ejemplo: En la siguiente gráfica podremos apreciar cómo un sitio puede
tener dos o más hojas de estilo, en este caso, tiene una para diseño en
pantalla, en la otra un diseño para impresión.
Figura: En la izquierda vemos el sitio web con el diseño para pantalla, como tradicionalmente se
conoce el uso de la hoja de estilo en cascada. En la parte derecha vemos exactamente el
mismo sitio, pero manipulado con la hoja de estilo en cascada para impresión, que optimiza
el contenido para ser impreso con facilidad.
Guía Web de 40
Proexport 1.0

41. 4.8 Prioridad 2, Nivel AA de las WCAG
Directriz: Cumpla con las directrices de accesibilidad y los puntos de
verificación correspondientes a la Prioridad 2, Nivel AA de las Directrices
de Accesibilidad del Contenido Web (WCAG).
Comentario: Aunque en la presente guía destacaremos y explicaremos
algunas de las directrices de las WCAG, es de obligatorio cumplimiento la
totalidad de directrices que corresponden a la Prioridad 2, para dar
cumplimiento al nivel de conformidad AA.
NOTA IMPORTANTE: El conjunto de directrices presentadas por Proexport
en este documento no pretende sustituir las WCAG, por lo tanto debe
entenderse que si algunas directrices del WCAG son tratadas en el presente
documento, esto no excluye del obligatorio cumplimiento al resto de
directrices.
Guía Web de 41
Proexport 1.0

42. 4.9 Logotipos del W3C
Directriz: Ubique los respectivos logotipos que el W3C ofrece para
verificar la validación de la hoja de estilo CSS, del XHTML y del nivel de
conformidad de accesibilidad.
Comentario: Existen validadores automáticos del código XHTML
(contenido) y de las hojas de estilo (CSS). Son proporcionados por el
Consorcio W3C gratuitamente a través de la Web.
Al verificar la validación, el sistema ofrece unos códigos que el diseñador
deberá incluir en las páginas web de Proexport, con el objetivo de que
declaremos la validez absoluta del código, así como el nivel de adecuación
según las prioridades de accesibilidad publicadas en las WCAG.
Ejemplo: Veamos los diferentes logotipos:
Figura: Iconos de validación ofrecidos por el Consorcio W3C, para verificar la validación correcta de
los estándares.
Guía Web de 42
Proexport 1.0

43. 4.10 Plantillas validadas
Directriz: La codificación de cada plantilla o tema para los
administradores de contenido (CMS) debe estar validada con cero errores
en XHTML y CSS.
Comentario: La codificación, corte o maquetación que se realice para cada
plantilla o tema, deberá tener el código absolutamente libre de errores de
estructura, marcado, obsolescencia, sintaxis y demás. Para ello se debe
recurrir a herramientas automáticas de validación que comprueben que el
código no sufre de imperfecciones, tanto para el XHTML como para el CSS.
De igual forma, sugerimos revisar la accesibilidad tanto de forma manual
como automática. Para esta última, será buena idea usar herramientas
como TAW, HERA, examinador, PISTA, barra de accesibilidad AIS, entre
otras.
Guía Web de 43
Proexport 1.0

44. 5 Hipervínculos
y navegación
La web está constituida esencialmente por hipervínculos.
Del buen tratamiento que se les dé, dependerá el éxito
de la navegación de los usuarios y una muy buena parte
de la usabilidad del sitio.
Guía Web de 44
Proexport 1.0

45. 5.1 Falsos hipervínculos
Directriz: Evite diseñar señales engañosas de hacer clic.
Comentario: No es buena idea darle atributos de elemento cliqueable a
algo que no lo es. Nos referimos, por ejemplo a textos que sin ser
hipervínculos tienen subrayado, o color azul, solo para destacarse del resto.
O también gráficos que aparentan ser botones, pero que no lo son.
Ejemplo:
Figura: Los tres primeros botones que conllevan un enlace, pero el cuarto a pesar de tener la misma
apariencia no es cliqueable.
Guía Web de 45
Proexport 1.0

46. 5.2 Estados de hipervínculos
Directriz: Realice un diseño diferencial para todos los estados de
hipervínculos.
Comentario: Una importante forma de guiar al usuario por las páginas web
que ya visitó, es mostrarle precisamente los enlaces de colores diferentes,
especialmente para el enlace sin visitar, del enlace visitado. Además,
existen otros dos estados: el enlace activo, el enlace resaltado. Todos ellos
deben tenerse en cuenta en el diseño de interfaz.
Ejemplo: Veamos ejemplos de los diferentes estados de hipervínculos.
Figura: Captura de pantalla de Google, donde podemos distinguir claramente tres enlaces: visitado
(morado), sin visitar (azul) y activo (rojo). No existe programado en enlace resaltado en esta
página (y así existiera, en una sola captura no podría estar al tiempo que el enlace activo).
En la hoja de estilos, muy importante ponerlos en el siguiente orden:
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: aqua; }
a:active { color:green; }
En el código anterior, la hoja de estilo CSS estará indicando que el
hipervínculo sin visitar será azul, el visitado será morado, el resaltado será
un azul agua marina y el vínculo activo será verde.
Guía Web de 46
Proexport 1.0

47. El orden influye en el resultado. Si se escribe en otro orden, los resultados
pueden ser impredecibles en ciertos navegadores. Y como dato curioso,
para recordar este orden los diseñadores utilizan la mnemotecnia:
LoVe/HAte
V H
Link – Visited – Hover – Active
Guía Web de 47
Proexport 1.0

48. 5.3 Ubicación del usuario
Directriz: Proporcione información sobre la ubicación del usuario a través
de variaciones tipográficas o recursos gráficos.
Comentario: Además de un importante elemento como la ruta de migas,
breadcrumbs o menú de rastro, es necesario dar más pistas sobre la
ubicación del navegante dentro de los elementos del menú, bien sea a
través variaciones de color, tipografía, forma o cualquier recurso gráfico.
Ejemplo: En las siguientes capturas de pantalla vemos un tratamiento
correcto del menú, al resaltar la sección del sitio donde nos encontramos
ubicados.
Figura: En ambos sitios web encontramos con facilidad la ubicación. Arriba, en el sitio web de Apple
sabemos que estamos en la sección “Mac”; abajo, en el sitio web de las Jornadas de SIDAR,
sabemos que estamos en la sección “Actores”. Es un recurso muy simple, sencillo, pero de
muchísima utilidad para el navegante.
Guía Web de 48
Proexport 1.0

49. 5.4 Hipervínculo a la página de inicio
Directriz: Habilite el acceso a la página de inicio, mediante hipervínculo
en el logotipo y con un vínculo de texto rotulado como “inicio”.
Comentario: No todos los usuarios ingresan a través de la página de inicio.
Es más, la gran mayoría de visitantes entrarán por páginas internas. Por ello
es necesario tener un vínculo claro hacia la página de inicio.
Este vínculo debe estar asociado al logotipo, por una parte (los usuarios
esperan este comportamiento en el logo), pero además, es buena idea
poner un hipervínculo con la palabra “inicio” de forma totalmente explícita.
No es buena idea poner otras palabras como “portada”, que pueden ser
más creativas pero que no transmiten con la misma rapidez el mensaje que
la palabra que la gente ya asocia a la acción: “Inicio”
Ejemplo: En el sitio web de Skype podemos ver cómo hay un enlace
expreso a la página de inicio:
Figura: Página interna de Skype con un claro y contundente vínculo a la página de inicio.
Guía Web de 49
Proexport 1.0

50. 5.5 Navegación consistente
Directriz: Sea consistente en la navegación.
Comentario: Presente la misma estructura de navegación a lo largo de
todas las páginas web de su sitio. No incurra en variaciones de contenido
de dicho menú, porque hará que los usuarios se pierdan cuando naveguen.
Ejemplo: En el siguiente sitio web notamos cómo hay una incoherencia al
navegar entre una página y otra. Esto produce en el usuario una sensación
de pérdida y de no ubicación. Veamos:
Figura: En verde hemos señalado el menú de navegación. Si un usuario hace clic en el vínculo
Secretarías de Educación, esperaría tener una coherencia de navegación en la siguiente
pantalla. Pero veamos en la figura siguiente lo que sucede.
Guía Web de 50
Proexport 1.0

51. Figura: En esta captura de pantalla notamos cómo el menú desapareció de la derecha, donde el
usuario esperaría encontrarlo, para ubicarse en la parte superior, y además en formato
horizontal. Son cambios e incoherencias que el diseñador debe evitar.
Guía Web de 51
Proexport 1.0

52. 5.6 Salto de vínculos repetitivos
Directriz: Habilite la posibilidad de saltar vínculos de navegación
repetitivos.
Comentario: Para personas invidentes que navegan el sitio a través de
lectores de pantalla, o usuarios que usan la tecla TAB (tabulado) para
avanzar de enlace en enlace y así navegar, puede resultar muy incómodo
tener que escuchar todos los vínculos y elementos que se repiten en todas
las páginas.
Para mitigar este problema, uno de los primeros vínculos que se deben
programar es el de “Saltar al contenido”. Es una práctica que
desafortunadamente no ha sido muy extendida, pero que en Proexport
empezaremos a implementar en beneficio de la accesibilidad web. Muchos
usuarios lo agradecerán.
Ejemplo: En la siguiente captura de pantalla veremos cómo uno de los
primeros hipervínculos es el que le permite al usuario saltar al contenido, y
con ello, evitarse tener que “escuchar” todos los elementos que se repiten
una página tras otra.
Figura: Vínculo “Ir al contenido”, que lleva directamente al usuario al contenido de la página web.
Guía Web de 52
Proexport 1.0

53. 5.7 Páginas de error
Directriz: Programe todas las páginas de error con un diseño y mensaje
personalizado.
Comentario: En algunos momentos, es posible que al intentar acceder a
alguna página web, exista un error. Normalmente, saldrá una página,
informando de dicho error.
Sin embargo, estas páginas normalmente tienen el diseño predeterminado
por el navegador para mostrar el error. La buena noticia es que un
diseñador web puede anticiparse a este problema y diseñar páginas de
error personalizadas que permitan, de una manera mucho más amable,
avisar de estos errores y permitirle al usuario continuar navegando en el
sitio.
Para ello, puede servirse de mostrarle el mapa del sitio, un motor de
búsqueda o algún mensaje amable que lo incentive a continuar.
Ejemplo: Veamos cómo se ven las páginas de error
Figura:
Figura: Diferentes páginas de error, en la izquierda con Internet Explorer, en la derecha con Firefox
Guía Web de 53
Proexport 1.0

54. 6 Interacción
Los usuarios no únicamente leen, también interactúan
con la interfaz, por ello es importante tener en cuenta las
directrices planteadas a continuación para elementos de
interacción en las páginas web de Proexport.
Guía Web de 54
Proexport 1.0

55. 6.1 Longitud del cuadro de búsqueda
Directriz: Diseñe el cuadro de búsqueda para un máximo de 30
caracteres.
Comentario: El resultado de una búsqueda es mejor cuantas más palabras
sean usadas en la misma. Este argumento, poco a poco ha empezado a
calar entre los usuarios de sitios web. De hecho, en la actualidad han
dejado de hacer sus búsquedas con una sola palabra, para hacerla con
cadenas de varias palabras.
Según estudios de Jakob Nielsen, el promedio de búsquedas en la
actualidad está en 30 caracteres. Por lo tanto, los cajones de búsqueda
deben contemplar esa mediana, no solo para sugerir al usuario que ingrese
varias palabras, sino también para permitirle una total visualización de lo
escrito y con esto evitarle errores de digitación y ortografía que suelen
ocurrir cuando el texto queda escondido.
Ejemplo: En la siguiente pantalla vemos un sitio web con una correcta
ubicación y ancho del cajón de búsqueda.
Figura: El cajón está ubicado en la parte superior derecha y además tiene un ancho de 30 caracteres,
que incita a escribir no una sino varias palabras.
Guía Web de 55
Proexport 1.0

56. 6.2 Diseño de Interfaz Gráfica de Usuario (GUI) personalizados
Directriz: Evite incluir en la página, elementos de Interfaz Gráfica de
Usuario (GUI) rediseñados y personalizados.
Comentario: Los usuarios ya están acostumbrados a aquellos elementos de
la GUI (Interfaz Gráfica de Usuario) con los que tienen que interactuar a
diario. Por ejemplo la barra de desplazamiento, las listas desplegables, los
elementos de formulario, los botones, etc.
Cambiar la apariencia de estos elementos ya estandarizados y estudiados
por los fabricantes de software durante cientos de horas de expertos en IPO
(Interacción Persona Ordenador), por unos elementos GUI personalizados
en unos cuantos minutos no es buena idea. Seguramente muchos usuarios
ni siquiera reconocerán estos artilugios, por lo tanto no accederán al
contenido del sitio, que es al final lo que más interesa.
Ejemplo: Uno de los elementos GUI que más sufre con diseños
personalizados es la barra de desplazamiento o scroll. En la siguiente
gráfica, un pésimo ejemplo de barra de desplazamiento personalizada.
Figura: El diseñador del sitio de Los Chalchaleros dibujó su propia barra de desplazamiento. Sin
embargo, esta personalización dista mucho de la barra que los usuarios reconocen, además,
la funcionalidad que tiene no es la misma. Por ejemplo, los usuarios están acostumbrados a
desplazarse con la rueda del ratón, pero con este diseño es imposible hacerlo.
Guía Web de 56
Proexport 1.0

57. 7 Posicionamiento
El posicionamiento orgánico en motores de búsqueda,
SEO, debe empezar desde la misma arquitectura de
información de un sitio, seguir con el diseño de interfaz y
codificación, y por supuesto en la escritura de
contenidos. Por ello se hace indispensable en la Guía
Web de Proexport contemplar algunas directrices para
un correcto posicionamiento de las páginas.
Guía Web de 57
Proexport 1.0

58. 7.1 URL complejos
Directriz: Habilite un sistema de URL inteligentes para cada página web:
cortas y significativas.
Comentario: Los URL (Uniform Resource Locator), son aquellas direcciones
que nos permiten acceder a un recurso a través de Internet, por ejemplo
una página web interna de un sitio o un archivo en el servidor.
Cuando los sitios web están basados en lenguajes de programación, usan
bases de datos o CMS (gestores de contenido), las direcciones resultantes
son generalmente largas, difíciles y engorrosas.
Esto tiene una connotación negativa no solo para los propios usuarios (que
preferirían tener un URL más sencillo), sino también para los motores de
búsqueda.
Ejemplo: Un ejemplo de una URL bastante compleja podría ser:
http://www.misitio.com/home.asp?language=SP&idcompany=1
Esta dirección sería mucho más sencilla, para un usuario y para un motor de
búsqueda, si involucrara el significado del contenido de esa página en
particular. Esas son las llamadas URL amigables, que serían algo como:
http://wwww.misitio.com/congreso_de_radiología
Guía Web de 58
Proexport 1.0

59. Figura: Al realizar una búsqueda, uno de los muchos factores que un motor de búsqueda tiene en
cuenta es el URL. Por eso, al darle significado a las direcciones, el programador apunta a un
mejor posicionamiento orgánico, SEO.
Guía Web de 59
Proexport 1.0

60. 7.2 Título de la ventana
Directriz: Asigne el título de la página web al título de la ventana y
asegúrese que este título sea el encabezado de primer nivel
Comentario: El título de la página debe etiquetarse con <h1> y el mismo
contenido de esta etiqueta debe asignársele a la etiqueta de título de la
ventana <title>.
Esta feliz coincidencia permitirá que las páginas logren un mejor
posicionamiento, además de ser una excelente práctica para los usuarios
que se verán beneficiados en aspectos como la marcación de sus páginas
favoritas, la titulación de las pestañas, mejor indexación en búsquedas
internas y, por supuesto, externas.
Ejemplo: Tomamos como ejemplo la página de Flickr que tiene en cuenta
esta recomendación. Ya será a discreción de lo que decida el Comité Web el
uso o no del título del sitio dentro del título de la página. En algunos casos
tendrá ventaja tener el siguiente esquema para los títulos:
Título de página + Título del sitio
Flickr:
La Candelaria, Bogotá (Colombia) en Flickr: ¡Intercambio de fotos!
En otros casos, podrá ser más provechoso tener únicamente el título de la
página y no poner el título del sitio. Será cuestión de analizar en el Comité
Web, el uso más indicado para cada sitio.
Guía Web de 60
Proexport 1.0

61. Figura: En el sitio de Flickr siguen el principio de usar para la etiqueta <title> y para el <h1> el título
de la página web.
Guía Web de 61
Proexport 1.0

62. 7.3 Canal RSS
Directriz: Proporcione un canal RSS para el contenido dinámico
Comentario: Una importante forma de mantener informados a los usuarios
sobre las novedades del sitio web es la Sindicación Realmente Simple, o
sencillamente RSS. Se trata de un sistema que le permite la suscripción a los
usuarios al sitio, para que todo nuevo contenido le llegue directamente al
computador del usuario, no a través de los tradicionales mensajes de
correo electrónico, sino a través de un lector de RSS.
Poco a poco los usuarios se están dando cuenta de esta gran ventaja, y
están instalando programas lectores de RSS, para estar actualizados de las
novedades de sus sitios favoritos, sin tener necesidad de visitarlos
frecuentemente en búsqueda de novedades.
Pero además de esta ventaja, hay otros usos que el webmáster puede hacer
del canal, por ejemplo compartir contenidos entre diversos sitios web.
Sugerimos que el acceso al botón del Canal RSS sea muy claro, para ello se
debe echar mano de la iconografía más conocida: el color naranja y el
símbolo de las ondas.
Ejemplo:
Guía Web de 62
Proexport 1.0

63. 7.4 Mapa de sitio dinámico en XML
Directriz: Programe un mapa de sitio dinámico en XML y regístrelo en las
herramientas de webmáster de Google.
Comentario: El mapa del sitio debe ser una página que se actualice de
manera dinámica, cada vez que un nuevo contenido sea añadido. Este
mapa debe tener una versión gráfica y visual atractiva para los usuarios,
pero también una versión en XML (no tan atractiva a la vista), pero sí de
gran impacto para un motor de búsqueda.
Por supuesto, nuestra sugerencia va encaminada al registro de este mapa
de sitio en las herramientas para webmasters de Google.
Ejemplo: Veamos cómo se ve un mapa de sitio, para usuarios y para
motores de búsqueda:
Figura: A la izquierda vemos el mapa de sitio que servirá a los usuarios para ver el contenido del
sitio. Pero a la derecha vemos el mapa del sitio en formato XML para mantener enterado al
motor de búsqueda de los cambios en los contenidos y su correcta indexación.
Guía Web de 63
Proexport 1.0

64. 7.5 Etiquetas meta pertinentes
Directriz: Use etiquetas meta pertinentes para cada página web, de
forma diferencial.
Comentario: Los metadatos son los datos sobre los datos. En informática
son más comunes de lo que parecen. Por ejemplo, las fotografías de las
cámaras digitales, no solo contienen la imagen (los datos), sino información
como la fecha de la toma, la apertura del diagragma, la velocidad de
obturación e inclusive en cámaras actuales el geoposicionamiento. Todos
estos son metadatos.
También encontramos metadatos en las canciones de mp3: álbum, título,
artista, género, año, entre otros.
Por supuesto las páginas web no pueden estar aisladas de esta interesante
característica, y así lo pensó el creador de la Web, Tim Berners Lee, desde
hace ya casi dos décadas.
No hay razón para que las páginas web de un sitio no tengan metadatos.
Pero es fundamental para un buen posicionamiento, que estos metadatos
no sean generales para todo el sitio web, sino particulares para cada página
del sitio.
Ejemplo: Los metadatos más importantes definitivamente son la etiqueta
de palabras clave (meta keywords) y la descriptiva (meta description). A
ellas se les puede sumar otras más, que a discreción del Comité Web se
evaluará su inclusión.
Guía Web de 64
Proexport 1.0

65. Figura: Metadatos diferenciados para cada una de las páginas.
Guía Web de 65
Proexport 1.0

66. 8 Búsqueda
La encontrabilidad cobra cada día más importancia en el
ámbito de los sitios web. En las siguientes directrices
encontrará ideas para hacer que sus usuarios puedan
recuperar la información de una manera más eficiente.
Guía Web de 66
Proexport 1.0

67. 8.1 Cajón de búsqueda consistente
Directriz: Proporcione una opción de búsqueda para cada página web
del sitio.
Comentario: Es buena idea poder incluir en todas las páginas del sitio el
cajón de búsqueda en un lugar suficientemente visible, como la parte
superior derecha.
Ejemplo: Veamos cómo el cajón de texto del motor de búsqueda se ubica
en todas las páginas de un sitio web:
Figura: En todas las páginas de este sitio web encontramos consistentemente el cajón de búsqueda
en la parte superior derecha.
Guía Web de 67
Proexport 1.0

68. 8.2 Motor de búsqueda total
Directriz: Programe el motor de búsqueda para la totalidad el sitio
Comentario: En sitios web muy grandes, que usan gestores de contenido,
suele pasar que este motor está programado solo para buscar en unas
zonas, pero en otras no.
La misma situación ocurre cuando hay un portal que abarca varios portales.
Puede resultar una interesante opción incluir en la búsqueda los resultados
de los subportales.
Vale la pena evaluar la opción que ofrece Google para incluir un motor de
búsqueda
Ejemplo: En la siguiente pantalla veremos cómo un sitio puede presentar
resultados de búsqueda a través de la herramienta que Google ofrece a los
webmasters. Nótese que la interfaz sigue siendo la misma de la página
original del sitio, y que se puede programar para presentar resultados de
varios sitios relacionados (en el caso de tener subportales).
Figura: Una búsqueda puede dar resultados no solo del propio sitio, sino también de otros sitios
relacionados, en este caso se ofrece información que está en Astrolabio, pero también en
Nidohosting.
Guía Web de 68
Proexport 1.0

69. 9 Formularios
Los formularios constituyen uno de los puntos de mayor
cuidado en el diseño de una interfaz y en la
programación web. Es el momento en el que el usuario
ingresará datos para obtener del sistema alguna
respuesta, o simplemente para enviar a una base de
datos, por lo tanto es un elemento crítico que merece
especial atención por diseñadores y programadores.
Guía Web de 69
Proexport 1.0

70. 9.1 Campos requeridos
Directriz: Distinga claramente los campos requeridos de los opcionales
Comentario: En los formularios normalmente hay campos obligatorios y
opcionales. Buena práctica es resaltarlos y diferenciarlos sin basarse
únicamente en color.
Ejemplo: El siguiente caso es de un formulario que se basa en color para
transmitir la información sobre la obligatoriedad de los campos.
Figura: Mala práctica la de transmitir información a través del color. Incumple con las directrices de
accesibilidad de las WCAG.
En una pantalla monocromática, o para personas con dificultades en la
visión, la anterior pantalla se verá así:
Guía Web de 70
Proexport 1.0

71. Figura: Una persona con dificultades en la visión o simplemente con un monitor monocromático no
percibirá claramente cuáles son los campos obligatorios.
Figura: Además de transmitir en color, se pueden usar variaciones tipográficas para acentuar la
diferencia entre los campos obligatorios de los opcionales.
Guía Web de 71
Proexport 1.0

72. 9.2 Etiquetas cercanas a campos
Directriz: Coloque las etiquetas lo suficientemente cercanas a sus
respectivos campos
Comentario: La disposición de las etiquetas debe estar cercana al control
de formulario al que esté asociado. Un error frecuente es encontrar
etiquetas demasiado separadas, lo que va en contra del principio de
cercanía, de la psicología de la Gestalt.
“nuestra mente agrupa como conjuntos los
elementos cercanos entre si”
Ejemplo:
Figura: Lo que normalmente veríamos serían grupos de dos líneas próximas entre sí; ahora, si
quisiéramos ver grupos diferentes, nos sería más complejo unir líneas que estén tan
separadas.
Guía Web de 72
Proexport 1.0

73. Documentación
Una gran parte del contenido de las directrices presentadas en la Guía Web Proexport
1.0 han sido tomadas de diferentes medios: libros, guías, blogs, sitios web. A
continuación, relacionamos toda esta documentación:
Libros
• Usabilidad: Prioridad en el diseño web. Jakob Nielsen, Hoa Loranger. Anaya
Multimedia, 2006.
• Usabilidad: diseño de sitios web. Jakob Nielsen. Prentice Hall, 1999.
• No me hagas pensar. Steve Krug. Prentice Hall, 2da. Edición, 2006.
• Diseño con estándares web. Jefrfrey Zeldman, Anaya, 2003.
• Arte y ciencia del diseño web. Jeffrey Veen, Prentice Hall, 2001.
• Usabilidad. Varios autores. Anaya Multimedia, 2006.
• Website boosting. Mario Fisher. Marcombo, 2006.
Directrices
• Guía Web Chile 1.0, Gobierno de Chile, 2004
Guía Web de 73
Proexport 1.0

74. • Guía Web Chile 2.0, Gobierno de Chile, 2008
• Research-Based Web Design & Usability Guidelines, Gobierno de Estados
Unidos, 2008
• WCAG, Directrices de accesibilidad para el contenido web, versión 1.0, WAI.
Sitios web y blogs
• Definiciones de tipo, tipografía, fuente, familia...
http://www.fotonostra.com/grafico/partescaracter.htm
• Tabla de equivalencia en fuentes
http://www.apaddedcell.com/web-fonts
• Explicación del término CPL
http://en.wikipedia.org/wiki/Characters_per_line
• Tabla con fuentes tipográficas
http://www.apaddedcell.com/web-fonts
• Ancho de renglón ideal
http://www.wikilearning.com/articulo/columnas_anchos_de_linea_y_legibilid
ad-el_ancho_de_linea/4165-2
• Analizador de contraste de texto y fondo JuicyStudio
http://juicystudio.com/services/colourcontrast-es.php#result
Guía Web de 74
Proexport 1.0

75. Glosario
accesibilidad. Es la cualidad que determina el grado en que una página Web puede ser usada, visitada o
accedida por todas las personas, independientemente de sus capacidades técnicas o físicas
arquitectura de información. Disciplina que organiza conjuntos de información, permitiendo que
cualquier persona los entienda y los integre a su propio conocimiento, de manera simple. Se utiliza
fundamentalmente en espacios virtuales como los sitios Web, donde se requiere que el propio usuario
obtenga la Información, sin ayuda de terceros.
banco de imágenes. Conjunto de fotografías, dibujos e ilustraciones cuyos derechos pertenecen a una
empresa privada encargada de su comercialización, generalmente vía Web, para ser usados en
diversas aplicaciones, como multimedia, sitios Web, afiches, revistas, periódicos, etc.
banner. Gráfico publicitario rectangular que puede ser fijo o animado, e incluso con sonido, que se incluye
en los sitios Web a modo de anuncio. Haciendo clic sobre él, normalmente envía hacia el sitio Web del
anunciante.
CMS. Sigla correspondiente a Content Management System, sistema de gestión o administración de
contenidos, es un software para el manejo de contenidos de sitios Web directamente desde el
servidor.
código fuente. Conjunto de instrucciones que componen un programa informático. Estos programas se
escriben en determinados lenguajes; el lenguaje que se utiliza para elaborar una página Web, que
puede considerarse en cierto sentido un programa, es el HTML
core Joomla. El conjunto de archivos que forman la distribución original de Joomla, y que pueden
descargarse de Joomlaforge. El core puede ser ampliado por medio de los componentes adicionales
que amplían sus posibilidades.
CSS. Sigla de Cascading Style Sheet, l iteralmente hojas de estilo en cascada, es un lenguaje de
programación que describe el estilo gráfico de un documento Web (colores, tipografías y
composición)
Guía Web de 75
Proexport 1.0

76. dominio. Conjunto de caracteres que identifica un sitio de la Web, accesible por un usuario. Es la
representación de una empresa o entidad en el mundo de Internet. Se compone de un nombre
seguido de una extensión que define el tipo de dominio. Por ejemplo: astrolabio.com.co, donde la
primera parte está destinada al nombre particular de la empresa, organización, proyecto o persona y la
segunda (.com) a establecer la naturaleza de la entidad., en este caso comercial Para Colombia,
contamos con la extensión geográfica .co.
estándares Web. Conjunto de recomendaciones publicadas por el Consorcio W3C que procuran hacer de
Internet un mejor lugar para todos.
Software originalmente diseñado para crear animaciones que se pueden usar en sitios
flash (películas). S
Web. Usa vectores gráficos que son ideales para la Web, porque son ligeros y no consumen muchos
recursos.
hipervínculos. Enlace de un documento hipertexto a otro documento de cualquier tipo.
Hosting. Servicio que brindan determinadas empresas que tienen servidores conectados a Internet, de
forma que ofrecen espacio en sus discos para que usted pueda alojar en el los archivos que componen
su sitio Web.
infografía. Información gráfica que contiene ilustraciones y textos combinados para explicar una noticia.
Especialidad que en los últimos años se aplica en algunos sitios Web gracias a los avances
tecnológicos. Con la infografía se generan o modifican imágenes de apoyo para las noticias, para que
los contenidos informativos de una publicación periódica sean más visuales.
Joomla. Sistema de administración de contenidos de código abierto construido con PHP bajo una licencia
GPL. Este administrador de contenidos se usa para publicar en Internet e intranets utilizando una base
de datos MySQL. Su nombre es una pronunciación fonética para anglófonos de la palabra swahili
jumla que significa "todos juntos" o "como un todo". Se escogió como una reflexión del compromiso
del grupo de desarrolladores y la comunidad del proyecto.
mapa del sitio. Estructuración lógica de los contenidos de un sitio Web, con el fin de hacer la navegación
más intuitiva, fácil y rápida para los navegantes. El mapa del sitio se puede usar como una página Web
que contenga hipervínculos hacia todas las demás páginas que componen el sitio Web.
marcación semántica. Buena práctica del diseño Web, recomendada en los estándares Web del Consorcio
W3C, que consiste en marcar con etiquetas de (x)HTML según el significado y no según la
presentación. Por ejemplo, para marcar un título de primer nivel es necesario usar la etiqueta <h1>,
para marcar un párrafo <p>, para marcar una cita larga <blockquote>, etc.
Guía Web de 76
Proexport 1.0

77. metadatos. Significa “datos sobre los datos”. Son el conjunto de datos acerca de una página Web que no
son su contenido principal. Los metadatos son datos asociados a un documento digital que recogen
información fundamentalmente descriptiva (autor, título, etc.).
motor de búsqueda. Sistema informático que indexa archivos almacenados en servidores Web. Un
búsqueda.
ejemplo son los buscadores de Internet como Google, Yahoo, MSN, etc., cuando se pide información
sobre algún tema. Las búsquedas se hacen con palabras clave o con árboles jerárquicos por temas; el
resultado de la búsqueda es un listado de direcciones Web en los que se mencionan temas
relacionados con las palabras clave buscadas
PageRank. Marca registrada y patentada por Google el 9 de enero de 1999 que ampara una familia de
algoritmos utilizados para asignar de forma numérica la relevancia de los documentos (o páginas Web)
indexados por un motor de búsqueda. El sistema PageRank es utilizado por el popular motor de
búsqueda Google para ayudarle a determinar la importancia o relevancia de una página. Fue
desarrollado por los fundadores de Google, Larry Page y Sergey Brin, en la Universidad de Stanford.
Página Web. Unidades en que se divide un sitio Web y que se visualizan en el navegador del usuario al ser
llamadas por un vínculo. Fuente de información adaptada para la World Wide Web y accesible
mediante un navegador de Internet.. Una parte constitutiva de un sitio Web vinculada a otros
documentos mediante vínculos hipertexto
parches de actualización. Archivos que la comunidad de desarrolladores de Joomla publica para corregir
errores y vulnerabilidades del core del software. Estos archivos deben ser puestos como “parche” en
los sitios Web que se encuentran al aire, para evitar posibles fallos.
posicionamiento de sitios Web. Labor realizada por un experto para poner en los primeros resultados de
los motores de búsqueda a un determinado sitio Web.
pruebas heurísticas. Análisis realizado por evaluadores especializados a partir de principios establecidos
por la disciplina de la Interacción Persona Ordenador. Esta evaluación detecta aproximadamente el
42% de los problemas graves de diseño y el 32% de los problemas menores, dependiendo del número
de evaluadores que revisen el sitio. Posteriormente se recomienda realizar un test de usuarios para
completar la evaluación.
SEO. Acrónimo de Search Engine Optimization, en inglés. Su traducción al español es Optimización para
Motores de Búsqueda. Es el proceso de modificación y análisis de las páginas Web para conseguir
posicionar dicha página en los puestos más altos dentro de los mayores buscadores. El análisis es
amplio, ya que incluye títulos etiquetas o tags, códigos y diseño de la Web. En español las siglas SEO
han llegado a referir a las personas que realizan este tipo de trabajo.
Guía Web de 77
Proexport 1.0

78. sitio Web. Conjunto de documentos Web que forman una totalidad temática y que generalmente se
encuentran bajo un nombre de dominio único, por ejemplo www.sudominio.com; los sitios Web se
dividen en páginas Web, así como un libro se compone de páginas de papel.
streaming. Tecnología de distribución de vídeo bajo demanda a través de Internet. Los contenidos
distribuídos son leídos, examinados y procesados mientras se van descargando, de forma que es
posible ir reproduciendo estos contenidos mientras el resto se va descargando.
tiempo de disponibilidad ( uptime). Es la cantidad de tiempo que estadísticamente el sitio tiene acceso.
Mientras mayor es el porcentaje de uptime, mayor seguridad de visualización de la página.
URL. Las siglas URL en inglés quieren decir "Uniform Resource Locator" (Localizador Uniforme de Recursos)
y se refiere al texto que identifica a una página web. Normalmente empieza por"http:/...". Se pronuncia
en masculino “el u-ere-ele”.
URL amigables. Llamadas también URL semánticas son aquellas entendibles para un motor de búsqueda,
desde el punto de vista semántico. Lejos de las clásicas URLs de las páginas dinámicas llenas de
variables GET y números difíciles de recordar, las URL semánticas están formadas con palabras
relacionadas con el contenido de la página y fáciles de recordar. Un ejemplo de URL amigable sería:
http://www.astrolabio.com.co/diseno-paginas-web -en-
http://www.astrolabio.com.co/diseno-paginas-web-en -Colombia.html
usabilidad. Atributo de calidad de un sitio Web, que determina la facilidad de la interfaz para ser utilizada.
La palabra también se refiere a los métodos para mejorar la facilidad de uso durante el proceso de
diseño.
validador. Software en línea que proporciona gratuitamente el Consorcio W3C que permite verificar si el
código (x)HTML o CSS se encuentra libre de errores y advertencias.
vulnerabilidad. Falla en la programación del software, generalmente descubierta por hackers, que expone
la totalidad del sitio Web a un ataque, que puede afectarlo dejándolo por fuera del aire, o sustituyendo
los verdaderos contenidos, por otros, generalmente pornográficos.
W3C. World Wide Web Consortium. Organización que desarrolla estándares para guiar el desarrollo y
expansión de la Web. Organizado por el CERN y el MIT y apadrinado por varias empresas de la industria
del software e Internet.
xHTML. Acrónimo inglés de eXtensible Hypertext Markup Language (lenguaje extensible de marcado de
hipertexto), es el lenguaje de marcado pensado para sustituir a HTML como estándar para las páginas
web. XHTML es la versión XML de HTML, por lo que tiene, básicamente, las mismas funcionalidades,
pero cumple las especificaciones, más estrictas, de XML. Su objetivo es avanzar en el proyecto del
Guía Web de 78
Proexport 1.0

79. World Wide Web Consortium de lograr una web semántica, donde la información, y la forma de
presentarla estén claramente separadas.
Guía Web de 79
Proexport 1.0