PDF de programación - Buenas prácticas

Buenas prácticas


Pere Barnola Augé

P08/93133/01509

© FUOC • P08/93133/01509

Índice

Buenas prácticas

1. Usabilidad........................................................................................
1.1. Pautas de usabilidad ..................................................................
1.2. La interacción persona-ordenador ............................................
1.3. ¿Se entiende?, ¿Es comprensible?, ¿Me atrae?, ¿Sé dónde

estoy? .........................................................................................


2. Accesibilidad...................................................................................
2.1. WAI ............................................................................................
2.2. Directrices de accesibilidad .......................................................
2.3. Niveles de adecuación ...............................................................


3. Indexación en buscadores (SEO)................................................

4. Otras buenas prácticas.................................................................
4.1. Estructura de archivos ...............................................................
4.2. Optimización de imágenes por web .........................................
4.3. Diferentes navegadores .............................................................

5
5
6

7

9
9
10
12

14

16
16
16
18

© FUOC • P08/93133/01509

1. Usabilidad

5

Buenas prácticas

Una cosa es usable cuando es considerada útil y servible en todos los aspectos.
De hecho eso pasa a menudo, ya que los visitantes de una web son los que fi-
nalmente decidirán quedarse en la página o seguir navegando hasta conseguir
la información tan preciada que buscan. Dentro de estas dos posibilidades, la
que prevé y estudia la usabilidad, naturalmente, es la de los usuarios que se
quedan en la web, las razones por las que éstos lo hacen y qué es lo que más
les interesa.

1.1. Pautas de usabilidad

A continuación, veremos una serie de pautas que nos ayudarán a hacer que
nuestra web sea usable.

• Un￿menú￿coherente: el menú de la página web tiene que ser fácil de in-
terpretar. Es recomendable no variar mucho los colores y diferenciar entre
el apartado donde estamos y el apartado al cual queremos acceder. Ade-
más, este menú nos tiene que permitir ir a las páginas más importantes
de la web.

• Títulos￿claros￿y￿diferentes: un título ambiguo o con carencia de signifi-
cado no nos dice nada sobre lo que estamos leyendo. El título de la pági-
na tiene que ser significativo para que también los buscadores lo indexen
mejor.

•

•

•

Páginas￿con￿buena￿organización: las páginas tienen que ordenarse de
manera clara y sencilla, si queremos que la gente se fije en lo que nosotros
facilitamos; no los tenemos que estresar con más de una columna aparte
del contenido.

Páginas￿sin￿exceso￿de￿información: sin duda, ofrecer mucha información
y la más interesante posible es atrayente para el usuario, pero tenemos
que saber facilitarla de una forma sencilla, intentando resumirla. Es mejor
mostrar dos páginas bien claras que una interminable.

Enlace￿permanente￿a￿la￿página￿principal: un error frecuente es la falta de
un enlace permanente a la página principal de la web. Este enlace permite
a un usuario entrar en nuestra web por cualquier otra página que no sea
la inicial e ir a ella mediante un solo clic.

• Correo￿de￿contacto: un correo de contacto es imprescindible por si cual-
quier visitante quiere hacer alguna sugerencia, proponer un tema o solu-

© FUOC • P08/93133/01509

6

Buenas prácticas

cionar una duda. Éste también tiene que ser visible y e identificable rápi-
damente.

1.2. La interacción persona-ordenador

La interacción persona-ordenador es la disciplina relacionada con el diseño,
la evaluación y la implementación de sistemas informáticos interactivos para
el uso de seres humanos, y con el estudio de los fenómenos más importantes
con la cual está relacionado.

Obviamente, cuando creemos páginas web, lo haremos pensado que seremos
visitados por usuarios. Entender, pues, la relación persona-ordenador es muy
importante para dar al usuario una experiencia gratificante.

Hemos de ver al usuario como una persona que aprende de la experiencia y que
va evolucionando. Pensemos que hace pocas décadas nadie tenía ordenador
en casa, y ahora todo el mundo (o casi todo el mundo) tiene o lo ha utilizado
alguna vez.

Hay aspectos que ayudarán a hacer que el usuario entienda el funcio-
namiento de nuestra web basados en esta relación￿persona-ordenador
a lo largo del tiempo:

•

En primer lugar, los elementos importantes conviene que estén si-
tuados arriba￿y￿a￿la￿izquierda, ya que éste es el primer lugar donde
el usuario fija la mirada. Si vemos cualquier web corporativa, podre-
mos ver que el logotipo se sitúa en esta zona. También los menús se
sitúan en la parte de arriba o izquierda de la web: tenemos que pen-
sar que es uno de los elementos más importantes de nuestra web y
necesita ser de acceso fácil y rápido. Esto es porque nosotros leemos
siempre de izquierda a derecha y de arriba abajo; por lo tanto, el
punto de arriba a la izquierda es el primero que veremos intuitiva-
mente. Si la web que queremos hacer tiene otros públicos con otras
costumbres y escrituras, probablemente este hecho sería diferente.

• Otro aspecto a tener en cuenta son los enlaces. Los enlaces consti-
tuyen la interacción principal del usuario con la página web. Han
de ser, pues, fácilmente reconocidos y entendidos por el usuario co-
mo tal. La manera más clara para definir un enlace, y que el usuario
asocia casi instintivamente, es subrayando una palabra en azul. La
experiencia le dice que una palabra subrayada y de color azul equi-
vale a enlace y hacer, pues, esta asociación, no le costará ningún
esfuerzo. Eso es así porque desde el inicio de la web, los enlaces,
por defecto, han sido subrayados y en azul. De hecho, actualmente

© FUOC • P08/93133/01509

7

Buenas prácticas

algunas de las páginas más visitadas, como Google o Ebay, todavía
utilizan el mismo sistema.

• Otro punto clave es el tiempo que el usuario se pasa visitando una
página web. Tenemos que tener en cuenta que, según cifras estadís-
ticas, el usuario navega por término medio menos de un minuto en
cada web. Eso quiere decir que tenemos que atraer su atención de
forma directa y evitar largos párrafos de texto que, al fin, no leerá.

1.3. ¿Se entiende?, ¿Es comprensible?, ¿Me atrae?, ¿Sé dónde

estoy?

Aquí explicaremos algunas nociones básicas del diseño web. Diseño entendido
como la vía o conducto para responder a las preguntas del enunciado "¿Se
entiende?", "¿Me atrae?", "¿Sé dónde estoy?"...

El diseño web, pues, se tiene que entender como un todo que no sólo
se compone de los elementos gráficos y colores de cada página, sino
también de la misma organización en una pantalla, y más importante
todavía, la estructura de las pantallas de las páginas web, y la facilidad
del usuario para acceder allí donde quiere ir.

Existen muchos puntos a tener en cuenta en el diseño web; los que merecen
una especial atención son tres￿aspectos￿prioritarios.

1)￿La￿imagen￿gráfica: lo más importante es que el diseño web guste al usuario,
que las páginas web sean atractivas, gustables, que no cansen la vista, que los
colores no se confundan con facilidad (especialmente pensando en personas
con deficiencias visuales), y también que los espacios más interesantes de cada
una de las pantallas de la página web destaquen frente al resto de contenidos.

Así se consigue facilitar la consulta al usuario y ahorrar tiempo.

2)￿La￿distribución￿de￿los￿contenidos￿en￿las￿pantallas: la página tiene que
mantener un orden lógico, y siempre que sea posible, mantener una misma
estructura y ubicación de los menús y contenidos. También resulta útil que los
usuarios puedan consultar la ruta de pantallas desde la pantalla inicial hasta
la actual (por ejemplo: inicio –> empresa –> situación), de manera que sepan
cómo han llegado, y poder volver. Es muy importante que en todo momento
sepan dónde están, cómo han llegado y cómo pueden volver atrás.

3)￿La￿estructura￿de￿los￿apartados: es otro elemento importante del diseño
web, ya que hace falta que sea el máximo de intuitiva para los usuarios, y
tiene que garantizar la facilidad para llegar a todos y cada una de las pantallas

© FUOC • P08/93133/01509

8

Buenas prácticas

de la página web; este elemento es fundamental, no sólo para los usuarios,
sino también para conseguir que la página web tenga visitas referidas desde
buscadores.

© FUOC • P08/93133/01509

2. Accesibilidad

9

Buenas prácticas

The power of the Web is in its universality. Access by everyone regardless of disability
is an essential aspect.

Tim Berners-Lee, W3C Director and inventor of the World Wide Web.

Esta frase de Tim Berners-Lee refleja, por una parte, el gran poder universali-
zador de Internet, y al mismo tiempo la gran responsabilidad que conlleva.
Las webs, y finalmente la información, tienen que llegar a todas las partes del
mundo, pero se tiene que hacer de manera que todo el mundo las pueda en-
tender. Un discapacitado ha de tener las mismas oportunidades de acceder a
la información de un sitio web que una persona que no tiene sus carencias.
De la misma forma que una persona que escriba con hebreo tiene que poder
publicar su información.

2.1. WAI

WAI son las siglas de Web￿Accessibility￿Initiative, es decir, la iniciativa
para la accesibilidad web. Es una rama del World Wide Web Consortium
que vela por la accesibilidad web.

El desarrollo de un espacio web accesible implica la optimización tanto del
contenido como del código, para facilitar el acceso al contenido de la web a
personas con discapacidades, así como diferentes entornos incluyendo soft-
ware y hardware (por ejemplo, navegadores de ordenadores, navegadores por
voz, navegadores de texto, teléfonos móviles, ordenadores personales portáti-
les o PDA, conexiones a Internet, etc.).

L