Lo bueno y lo malo en el diseqo de sitios Web: 3* Parte
Translated by Manuel Martinez
1. No utilize fondos que llenen toda su paginas:
Usted puede crear un fondo que rellene su pagina web tomando una imagen (GIF, JPEG O PNG) y colocándola dentro de la etiqueta "body" como por ejemplo:
<body background="myBackground.gif">
Esto hará que su navegador rellene el fondo de la página web con la imagen. Hay dos cosas erróneas en esto:
- Hay que hacer todo el diseqo de la web con CSS.
- Los fondos de relleno son malos en general.
Hubo un tiempo en que rellenar el fondo de la página-web era un furor en Internet; actualmente muchos entienden que es, sencillamente una mala idea. Puede ser eficaz si su imagen de fondo no es recargada y es de un color sólido, pero si usa como fondo, por ejemplo, una foto de su perro o alguna otra imagen muy abigarrada, conseguirá una página ilegible.
2. Finalice los vínculos de sus URL's con una barra:
De acuerdo, este detalle es un poco simplón pero, tenga paciencia conmigo ...... este pequeqo detalle ayudará a acelerar cosas por las que su usuario está interesado. Si tiene una URL (dirección web) que no especifica una página concreta, entonces tiene que terminar la URL seguida con una barra: (/)
<a href=" http://www.killersites.com/ ">Creating Killer Web Sites</a>
En el vínculo anterior, observará que después del '.COM ' he colocado una barra (/).
Si el vínculo señalara a una página concreta, yo no agregaría la barra al final de la direccisn:
<a href=" http://www.killersites.com/ articles/index.htm ">Creating Killer Web Sites Articles Page</a>
Agregando la barra (como en el primer ejemplo), eliminamos un paso, que si no, el servidor web y el navegador tendrían que hacer; eliminando este paso extra se puede ganar velocidad. Resumiendo:
Si su vínculo señala a un archivo en particular (una página de HTML, de PHP, o de ASP etc. ...) usted no necesita usar la barra final. Pero si señala a una dirección como:
<a href=" http://www.killersites.com/ articles/">Articles</a>
Entonces necesita la barra final.
3. No utilice las mayzsculas en el cuerpo de su texto:
La utilizacisn de MAYÚSCULAS es útil para destacar un título, pero no cree largas oraciones o párrafos en mayúsculas ... son difíciles de leer.
Compare este párrafo todo en mayúsculas.
LA UTILIZACIÓN DE MAYÚSCULAS ES ÚTIL PARA DESTACAR UN TÍTULO, PERO NO CREE LARGAS ORACIONES O PÁRRAFOS; SON DIFÍCILES DE LEER.
4. No Utilice demasiadas palabras con letra cursiva:
Las letras cursivas son una forma de llamar la atención dentro de un texto, pero hacen el texto mas difícil de leer. ¡La utilización de letras cursivas para una o dos palabras, a veces es buena, pero si usted empieza a utilizar texto en cursiva por todas partes, en oraciones largas o párrafos entonces se busca problemas!
Compare este parrafo escrito solamente con letras cursivas:
Las letras cursivas son una forma de llamar la atención dentro de un texto, pero hace el texto mas difícil de leer. ¡La utilización de letras cursivas para una o dos palabras, a veces es buena, pero si usted empieza a utilizar texto en cursiva por todas partes, en oraciones largas o párrafos entonces se busca problemas!
5. No utilice demasiadas palabras con negrita:
Suena como los dos útimos comentarios. Sin embargo, éste también sigue siendo válido por las mismas razones en las que el texto es mas difmcil de leer, y entonces se pierde su finalidad. Recuerde que el texto que se pone en negrita , cursiva o en mayúsculas son todas formas de resaltar algunas de las palabras, si lo hace todo igual, entonces se pierde el impacto que se buscaba.
6. No utilice las etiquetas <h5> y <h6>:
Estas etiquetas haran su texto en "negrita" y mas pequeño que el tamaño que por defecto utilizan los navegadores. Esta combinacisn hará el texto realmente difícil de leer.
7. Elimine los bordes azules alrededor de los vínculos de un gráfico:
Como usted sabe, se puede convertir un gráfico en un vínculo, o en otras palabras, en un botón, situando una etiqueta de vínculo delimitando la imagen. Por defecto los navegadores rodearán la imagen con un antiestético borde azul indicándonos que la imagen es un vínculo. Sus imágenes que se comportan como botones, deben parecer botones; será obvio que se puede pulsar sobre ellas ... entonces no necesitamos el borde azul.
Para eliminar el border azul todo lo que tiene que hacer es agregar este csdigo dentro de la etiqueta de la imagen: border="0"
Compruebe una etiqueta de imagen:
<img src='images/pictureWebPage.gif' border="0">
Usted podrma haber notado que he introducido a hurtadillas otro consejo dentro de éste: haga que sus botones de imágenes parezcan algo que puede ser pulsado. ¡Esto es "gratis" para usted!
8. Incluya un texto alternativo (usando el atributo 'alt' de la etiqueta imagen) en todas sus imágenes principales:
El texto alternativo: es el texto que se inserta en las etiquetas de imagen (<img ...>) y que es usado como texto solamente por los navegadores. Los navegadores que solo muestran texto son usados por los ciegos para navegar, ya que las imagenes no pueden verlas ... el texto alternativo en sus etiquetas de imagen es lemdo por estos navegadores en lugar de mostrar las imagenes.
Debería poner una información significativa en el texto alternativo que ayudará a los que no pueden verlas y también le ayudará con los motores de búsqueda. El texto alternativo se inserta en las etiquetas de imagen así :
<img src='images/pictureWebPage.gif' alt = "web page graphic - pulse aquí para ver la página. " border="0">
El texto alternativo también será mostrado como herramienta de consejo en Internet Explorer.
9. Haga que las imágenes que parecen botones, se comporten como botones:
¡Pienso que ya hemos visto algo sobre este tema! ¡Tal como he dicho anteriormente, los imágenes que parecen botones deben comportarse como botones ... ¡ y por el contrario, no cree gráficos que parecen botones, si no lo son!
¿Qué hace que una imagen "parezca un botón "?
Tradicionalmente, cualquier imágen con bisel o con un aspecto en 3D es susceptible de ser tomada como un botón y las personas naturalmente intentaran pulsar sobre ella. Pero el mejor modo de determinar que se parece a un botón (desde la perspectiva de los visitantes) es examinar el sitio-web; si usted encuentra que sus vínculos tienen el texto subrayado, entonces cualquier texto que está subrayado será percibido como un vínculo o botón ... aquí utilizar un poco de sentido común ayuda mucho. Otra cosa a hacer es visitar otros sitios web y prestar atención a como lo hacen ellos.
Usted siempre, recuerde estos dos puntos :
1. Intente siempre hacer las cosas tan claras como sea posible para sus visitantes.
2. ¡Lo que puede ser obvio para usted, no tiene porque serlo también para sus visitantes!
10. No utilice demasiados colores en su sitio-web:
El Color es una de las formas como las personas identifican cosas; es por esto que la etiqueta de Coca Cola es de un vivo color rojo y la etiqueta de Pepsi es de un intenso color azul. Limite la combinación de colores de su sitio-web a un par de colores y manténgalos constantes a lo largo de todo su sitio-web a no ser que quiera destacar alguna seccisn.
Por ejemplo: en www.killersites.com utilizo el texto en negro en las paginas blancas (con verde para los temas importantes) de la seccisn de artmculos, el objetivo de esta combinacisn de colores es para diferenciarlas de las otras partes del sitio-web.
Stefan Mischook
Top