uía para el diseño de Páginas en Internet Versión imprimible. Ubicación de los documentos "en línea": ● ● ● ● ● ● ● ● ● ● ● http://www.geocities.com/SiliconValley/Heights/1779/index.html (Introducción general) http://www.geocities.com/SiliconValley/Heights/1779/enlaces.html (Enlaces en las Páginas) http://www.geocities.com/SiliconValley/Heights/1779/longitud.html (Longitud de las Páginas) http://www.geocities.com/SiliconValley/Heights/1779/graficos.html (Uso adecuado de Gráficos) http://www.geocities.com/SiliconValley/Heights/1779/mapas.html (Uso de Imágenes Mapa) http://www.geocities.com/SiliconValley/Heights/1779/color.html (Uso adecuado del color) http://www.geocities.com/SiliconValley/Heights/1779/navegacion.html (Facilitar la navegación) http://www.geocities.com/SiliconValley/Heights/1779/calidad.html (Calidad del documento) http://www.geocities.com/SiliconValley/Heights/1779/contenido.html (Contenido del documento) http://www.geocities.com/SiliconValley/Heights/1779/lenguaje.html (Utilización correcta del lenguaje) http://www.geocities.com/SiliconValley/Heights/1779/imprimible.pdf (Este documento) Introducción general El presente documento está dedicado a ayudar en la construcción, el diseño, la edición y la optimización de Páginas en Internet para ser un apoyo en la creación un sitio web que tenga una apariencia profesional y un contenido llamativo. Es una guía de estilo y asume que el lector tiene nociones básicas de HTML. Los consejos, tanto de diseño como de contenido, que aquí ofrezco se encuentran organizados por temas y la mayoría de ellos están documentados por diseñadores profesionales; aunque algunos están basados únicamente en mi experiencia personal como ávido fanático de Internet y después de haber diseñado unas cuantas páginas y de haber visitado muchas otras. Enlaces en las Páginas Los Enlaces (también llamados "Links", "Ligas" o "Vínculos"), son una parte fundamental de las Páginas, ya que proporcionan un medio de conexión a otros documentos. Describe el Enlace Es necesario que cada Enlace contenga una descripción coherente para que el usuario identifique su función. Por ejemplo: Guía para el Diseño de Páginas en Internet es un documento en español sobre cómo diseñar correctamente una Página en la Red. es preferible a: Presiona aquí. Elige una longitud adecuada para el Enlace Una sola palabra puede ser muy pequeña y carente de significado. En cambio una frase entera puede ser difícil de leer, especialmente si el texto ocupa más de una línea. No cambies el color de los Enlaces si no es necesario Por conveniencia, los Enlaces no visitados son generalmente de un color más brillante que los que ya visitaste. Al cambiar esto podrías confundir a los usuarios, especialmente aquellos con monitor monocromático. Longitud de las Páginas Diseña tus páginas cortas y concisas Por regla general ninguna Página debe exceder una pantalla y media de longitud vertical, ya que si es muy larga, se corre el riesgo de perder la atención de los usuarios. Esto se aplica en la mayoría de los casos. Sin embargo si tienes una Página importante que requiera la atención del lector, no la hagas mayor de una pantalla. En cambio, si el contenido es interesante y estás seguro que vale la pena extenderte más, puedes hacerlo; pero recuerda que una Página pequeña es más fácil de administrar y mantener. Toma en cuenta a los distintos monitores En los monitores tradicionales el área de exhibición se mide en pixeles (pixel, abreviatura inglesa de "picture element"). Aunque esta medida tendera a aumentar en un futuro cercano; el estándar actual es de 800 pixeles, por lo que se debe procurar que la longitud de las Páginas no la sobrepase. Aunado a esto, algunos navegadores utilizan un poco de este espacio para sus barras de desplazamiento, lo que nos reduce el área de visualización unos 40 pixeles. Al respetar cuidadosamente estas restricciones, nos aseguraremos que se desplieguen correctamente en cualquier monitor. Como este punto puede ser un poco confuso, proporciono un ejemplo de lo anterior. Aunque esta imagen no se encuentra representada en tamaño real, sirve para ilustrar porqué una Pagina debe ser diseñada con una longitud horizontal menor a los 760 pixeles: Aunque técnicamente la resolución estándar sea de 800, el navegador se apropia de unos cuantos pixeles para sus bordes y su barra de desplazamiento. Uso adecuado de Gráficos Las imágenes pueden darle vida a una Página y servir como una excelente guía de información visual. Son elementos muy importantes y por lo tanto debemos ser muy cuidadosos en su uso. Limita la cantidad de gráficos en el documento Utiliza imágenes esporádicamente y sólo si ayudan a explicar mejor un tema o a mejorar el atractivo visual de tu Página. Toma en cuenta que cada gráfica que agregues a tu documento aumenta el tiempo de espera para tu lector. Mantén el tamaño total de las imágenes abajo de 30K Para optimizar el tiempo de acceso a tu documento, el tamaño de las imágenes no debe sobrepasar 30K. Si te es imperativo utilizar gráficas de gran tamaño, reduce el número total de colores en ellas y procura que estén en algún formato de visualización progresiva para que tu usuario pueda tener una idea de lo que la imagen representa antes de ser cargada por completo. Ayuda a los navegadores a minimizar el tiempo de espera Por regla general, siempre incluye descripciones ALT en tus imágenes. También es muy importante que especifiques el largo y ancho (HEIGHT and WIDTH) de las mismas, lo que permitirá que algunos navegadores las carguen más rápido. Uso de Imágenes Mapa Las Imágenes Mapa (image maps o mapas sensibles) proporcionan un medio valioso de navegación y contribuyen al atractivo visual de la Página. Sin embargo en algunos casos pueden confundir al usuario y no son soportadas por todos los navegadores. Delimita claramente las regiones "activas" o "sensibles" Las regiones activas de un Imagen Mapa son los puntos donde el usuario puede seleccionar o "hacer click". Es muy importante que estén perfectamente definidas, de preferencia en forma de botones y separadas una de la otra. Como se puede observar, las opciones que el usuario tiene se encuentran delimitadas y separadas una de la otra. De esta forma, evitamos la posibilidad de confusión (y frustración) por parte de nuestro lector. No olvides repetir los mismos enlaces en forma de texto Esto ayuda a los usuarios con navegadores sin gráficos o que para minimizar el tiempo de espera los mantienen apagados, ya que en cualquiera de los dos casos es imposible saber que ésa imagen es un Mapa y por lo tanto no puede ser utilizada. Uso adecuado del color Utiliza colores contrastantes y "seguros" Si tu documento utiliza un fondo obscuro, usa un color claro para el texto y si utiliza un fondo claro, usa un fondo obscuro para el texto. Ten mucho cuidado con los tonos que vas a utilizar ya que pueden dificultar enormemente la lectura del texto, especialmente si utilizas un tamaño pequeño de letra. Para entender mejor cómo se relacionan los colores entre sí, observa lo siguiente: ● ● ● ● Seleccionar un color y variar su claridad u obscuridad esporádicamente hará que se distingan algunos elementos y se imparta variedad. La selección de dos colores que se encuentran adyacentes en la rueda crea armonía, ya que están relacionados. Utilizar dos colores que NO se encuentran adyacentes crea contraste. Los colores brillantes atraen más la atención del lector, por lo que te recomiendo usarlos en la información más importante. La mayoría de los navegadores utiliza una paleta estándar de 216 colores llamada Netscape Palette. Al utilizar alguno de ellos, te estás asegurando de que los colores de tu Página se van a desplegar de igual manera en todos los navegadores y plataformas (PC, Mac, etc.) Estos son los 216 colores que se consideran "seguros" para una Página en Internet. Aunque la selección es muy limitada, si utilizas únicamente estos colores se visualizarán idénticamente en todos los navegadores o plataformas. Además evitarás las "difuminaciones de color" (color diffusion o anti-alias frizzles), que le quitan valor estético a tu página. Especifica un color de fondo Es importante que aunque tu documento utilice una imagen de fondo, también especifiques un color en el atributo BGCOLOR, ya que éste se mostrará en la pantalla inmediatamente y así el usuario podrá empezar a leer el texto sin espera. Además, esto ayuda a los usuarios con navegadores que no soportan imágenes de fondo o que por comodidad las mantienen apagadas. Estandariza los colores Si te es posible, trata de utilizar colores iguales o similares en todas las Páginas que conforman un mismo sitio web. De esta forma se integrarán mejor unas a las otras y adquirirán un aspecto mas profesional. Facilitar la navegación Incluye un encabezado al inicio de cada Página La información que debe dar la bienvenida a tu lector es el nombre de tu sitio y la sección del mismo en la que se encuentre. Aunque el comando <H1> funciona de maravilla con este propósito, tu encabezado no tiene que ser grande o estar resaltado, sólo separado del resto del texto. Elige un buen título HTML para tu documento Es importante elegir un buen título HTML que refleje el contenido general de tu documento. Esto le ahorra tiempo a la gente que encuentra tu Página en un servicio de búsqueda, ya que estos generalmente lo toman como referencia. No hagas referencia a los 'botones' del navegador Por ejemplo, nunca dejes un camino cerrado donde los usuarios tengan que presionar el botón "back" de su navegador para regresar a la Página anterior porque no puedes asumir que todos los navegadores tengan ese botón. Proporciona un enlace a tu Página principal Debido a que tus lectores pueden provenir de cualquier otra Página y no necesariamente de tu principal, proporciona en cada documento un enlace en forma de texto, gráfico o botón a la misma, así estarás seguro que el usuario la encontrará rápidamente. Calidad del documento Prueba regularmente cada Enlace y revisa tu código HTML Si tus visitantes encuentran callejones sin salida o Enlaces rotos pueden perder el interés en tu Página. Si tu código HTML no está correcto, algunos navegadores podrían interpretarlo incorrectamente o ignorarlo. Para evitar estos problemas, te recomiendo "validar" el documento en uno de los servicios gratuitos que puedes encontrar en la Red; pero no incluyas las pequeñas imágenes que estos servicios otorgan al final del proceso, pues no hacen más que desperdiciar tiempo y espacio. Revisa la ortografía y la gramática de tu documento Si tienes algún programa que revise tu ortografía, por favor úsalo. Si no, que alguien más revise el texto. No utilices comandos específicos de ciertos navegadores Los comandos específicos no pueden ser interpretados por todos los navegadores, por lo que debes evitarlos si te es posible. Un ejemplo de éstos comandos es la Marquesina del Internet Explorer, que solo puede ser interpretado correctamente por dicho navegador y el comando <BLINK> de Netscape, que además es muy molesto. Utiliza siempre el estándar propuesto por el World Wide Web Consortium. Contenido del documento Revisa tu texto y borra lo que no sea necesario Por regla general, trata de que el texto de tu Página sea conciso y sin rodeos. Recuerda que si el contenido de tu documento es interesante y la estás actualizando constantemente, tus lectores la visitarán más de una vez. Un documento que no aporta nada no causa interés alguno. Utiliza mayúsculas y minúsculas adecuadamente El ser humano no lee las palabras más comunes ensamblando las letras que la componen para formar una palabra reconocible, sino por su forma general. Por ejemplo: Si todo el texto de tu documento se encuentra en mayúsculas, podría dificultar la lectura del mismo, ya que en la mayoría de las fuentes tipográficas todas las palabras tienen forma similar y monótona cuando están compuestas únicamente por letras mayúsculas: Sé consistente con los términos utilizados No modifiques la forma en la que te refieres a los distintos conceptos a lo largo de tus documentos. Por ejemplo, si vas a utilizar las siglas "Mb" para referirte a la palabra inglesa "Megabyte", ten cuidado de no utilizar "mb", "MB" o "mB" en una mención posterior. Utilización correcta del lenguaje Cuida tu lenguaje Dependiendo del contenido de tu página es necesario que observes el tipo de lenguaje que vas a utilizar tomando en cuenta el público a quien va dirigido. Frases que, en mi opinión, deberían evitarse: ● ● En construcción: Supuestamente una Página debe ser actualizada constantemente y por lo tanto siempre se encuentra "en construcción". Si agregas una imagen que señale esto sólo estas desperdiciando tiempo y espacio. Por otro lado, es recomendable crear una sección donde le informes a tus lectores de cambios que pretendas hacer en tus documentos en un futuro cercano o de actualizaciones recientes que éstos hayan tenido. Incluso en algunos casos pudiera ser benéfico dar a conocer la fecha de la última modificación a los mismos. Esta página se ve mejor con...: Como se recomienda en otras secciones, no diseñes tus Páginas teniendo en mente algún programa específico. Si creas un documento al que sólo se le pueda sacar el máximo provecho con un navegador en particular, utilizando algunos de los llamados "plugins" o con un intérprete de comandos del lenguaje "java" o "javascript"; los usuarios que no cuenten con ellos se verán frustrados. Una posible solución sería crear varias versiones del mismo documento, cada una optimizada para una combinación de navegador y aditamento externo en específico. Éste documento presenta la información encontrada en la Guía para el diseño de Paginas en Internet al día 16 de julio del 2004.