Make your own free website on Tripod.com

Consejos de Profesionales para
la Creación de Páginas Web
“Web Pages that Suck”
Vincent Flanders & Michael Willis
Traducción y Adaptación:
Daniel Gutiérrez Colorado
danielgc@um.edu.mx
http://danielgc.tripod.com

Fases y elementos de una página Web
Planeación
Diseño y Navegación del Sitio
Contenido (lo principal)
Gráficas
Texto
Frames (marcos) y Vínculos
Marketing
Search Engines (Máquinas de Búsqueda)
Sitios de Interés

Planeación
Motivos para hacer páginas:
$, 87% del WWW es utilizado para este fin
Difundir información, opiniones, etc.
Ego
Definir Público Meta
Evitar declaraciones de misiones demasiado obvias o en la página de inicio

Diseño y Navegación del Sitio
Mapa de navegación y organización del sitio
La página de inicio es la más importante. Como una portada, debe incluir:
Propósito del sitio
Tipo de contenido
Cómo encontrar el contenido
Páginas “subsidiarias” o dependientes del homepage. Siempre debe proveerse un link desde y hacia la página de inicio, porque no siempre se sabe cómo llegó ahí el usuario. No todos tienen la curiosidad o saben que pueden ir a directorios superiores.

Ejemplo de un mapa de Navegación

Diseño y Navegación del Sitio II
Navegación
De nuevo, la homepage es la más importante, de ella depende por lo general si el usuario se queda
Herramientas de navegación
Gráficas (botones, mapas de imagen). Evitar usar gráficas que parezcan botones y no tengan esa función (fotos con “bevels” por ejemplo)
Utilización de frames. Creados por Netscape para ayudar la navegación, no para confundir. Deben utilizarse cuando su uso esté justificado. La ventaja es que los elementos no son recargados cada vez que se visita una página

Diseño y Navegación del Sitio III
Links con texto. Para las personas con poco ancho de banda
Consistencia. Las páginas deben ser consistentes en su posición y “look”
Optimización. El usuario debe poder llegar a la información en el menor número de clicks posibles. Si no, se irá
Contacto. Siempre debe incluir una manera de comunicarse con el webmaster o algún miembro del staff

Diseño y Navegación del Sitio IV
Índice del sitio. Si se tienen demasiadas páginas, es buena idea realizar un "site index" o “site map” para poder ubicar fácilmente la información necesaria
Splash pages. Se aconseja no utilizar, en medida de lo posible, páginas de introducción, animaciones, etc., pues sólo hace que el usuario demore más en llegar a lo que desea obtener. Si se usan animaciones, no debe olvidarse poner la opción de "omitir presentación" o algo similar

Diseño y Navegación del Sitio V
Diseño del Sitio
Es bueno empezar con un mapa de navegación como el mostrado en la pantalla 5, donde se vea cómo están conectadas las páginas entre sí
Una buena técnica es hacer el diseño en forma de un bosquejo
Es importante decidir los colores (http://www.colormatters.com por ejemplo), la tipografía, el "look" de las imágenes, etc.

Lo Principal es el Contenido
La pregunta más importante es: "¿Porqué querría alguien en su sano juicio pensar en regresar a mi sitio por segunda vez?"
Entonces lo importante es renovar el contenido continua y constantemente
Todo sitio siempre debe estar "en construcción" constante, por eso no deben ponerse "place holders" indicando que esa página va a existir en el futuro

Gráficas
El tamaño de las gráficas debe optimizarse
Se deben "cropear" las imágenes (quitarle los espacios en blanco)
Si se van a usar "thumbnails" no deben hacerse modificando solo los parámetros de alto y ancho en el html, pues el tamaño del archivo no se reduce así
GIF vs. JPEG. Si se van a utilizar imágenes con muchos colores, como fotografías, conviene más utilizar JPEG's, y si se van a usar logos, textos, o imágenes con una serie de colores parecidos, conviene más el GIF

Gráficas II
En el html deben ponerse los valores del alto y ancho de cada imagen para que se carguen más rápido las páginas en el navegador
Por lo general, las páginas no deben ser muy largas, pues el usuario no "scrollea" más de dos pantallas por lo general. La excepción es que el contenido lo que requiera, o usando "anclas" siempre con la opción de "regresar arriba“
Debe tenerse cuidado con la elección de los fondos, de manera que no compita con el texto, y que no se vea muy claro dónde se repite el patrón

Gráficas III
Debe aprovecharse el atributo ALT de las imágenes para proveer una descripción de las imágenes, en caso de que el usuario por alguna razón no espere a que se carguen
Errores a evitar de gráficas de mala calidad: consistencia (si se usan botones, todos deben tener el mismo tamaño, color, etc.); evitar los bordes blancos en gif transparentes (antialiasing); evitar gif animados al máximo (distraen demasiado); evitar la utilización de gráficas comunes o clipart gratuito (clichés: mundos girando, "en construcción", un buzón animado, etc.)

Gráficas IV
Exceso de efectos: Se nota mucho cuando se exageró en la aplicación de efectos (bevels, shadows, glows, etc.) o cuando se aplican mal (una imagen que tiene un drop shadow en cierta dirección y junto a ella otra con el mismo efecto pero con la sombra en dirección diferente)
Utilizar lo menos posible las fotografías personales (a menos que fuera un album)

Texto
Evitar fondos negros (a menos que se justifique el diseño)
No mezclar atributos de texto (fuentes, colores, tamaños, estilos, etc.)
Limitar el número de colores utilizados en el texto
Si se tiene demasiado texto, se podrían agregar imágenes
También se puede dividir el texto en varias páginas

Texto II
Es común y estándar hasta cierto punto la utilización de tablas para acomodar mejor el texto
Tipografía: se debe utilizar la tipografía estándar, a menos que se esté seguro que todos los usuarios tendrán la fuente instalada
No se deben usar párrafos enteros en mayúsculas (se considera que es falta de "netiqueta" pues se está gritando para llamar la atención). Deben evitarse las itálicas (cursivas) pues son difíciles de leer, así como el texto subrayado, pues se confunde con los vínculos. Tampoco debe usarse el texto centrado en texto normal, se ha convertido en un cliché y dificulta la lectura "z" normal (de izq. a der., y de arriba a abajo)

Texto III
El sitio puede ser visto desde cualquier parte del mundo, por lo que debe evitarse el uso de "jargon" (argot).
Debe cuidarse la ortografía, pues un error (typo) le quita profesionalismo a la página, así como seriedad

Frames (marcos) y vínculos
Los frames fueron creados por Netscape para facilitar la navegación, pero son a menudo mal utilizados. Muchas páginas que los utilizan, en realidad serían más óptimas con tablas. Los frames están justificados cuando se desea una barra de navegación por ejemplo, que no va a cambiar en todo el site
Debe evitarse el "scrolling" en un frame, pues no se ve estético, y a veces causa confusión

Frames (marcos) y vínculos II
Si se proveen links en un site que utiliza frames, debe tenerse cuidado de abrir los vínculos en una ventana nueva (target = _blank) o redefiniendo los marcos (target = _top) pues de lo contrario se abrirá en uno de los frames del site y perderá el contexto
Debe evitarse el "click aquí" para poder ser más específico. El link debe especificar a dónde está dirigido
Si se tiene una lista de links, al menos deben estar ordenados alfabéticamente, y no usarse botones de formas para abrirlos, pues el usuario no sabe a dónde será dirigido

Marketing

Marketing II
El marketing incluye:
Contenido significativo
Adquirir un nombre de dominio apropiado
Preparar las páginas para las máquinas de búsqueda

Search Engines
Los pasos para preparar el sitio para las máquinas de búsqueda son:
Buscar 10 palabras clave y una oración que describan el negocio o el site.
Usarlos en los META tags.
Utilizar las palabras clave y la oración al principio del home page.
Escoger el título de la página muy cuidadosamente.

Aplicaciones y Habilidades Básicas
Dreamweaver, Frontpage, etc.
Photoshop, Fireworks, etc.
Freehand, Illustrator, Corel Xara X, etc.
Flash, Livemotion, etc.
Cliente FTP (CuteFtp, ws_ftp, etc.)
Diseño Vectorial, Edición de Fotos, y HTML básico.

Sitios de Interés
http://www.colormatters.com/designart.html
http://grandesheroes.cjb.net
http://www.webpagesthatsuck.com/begin.htm
http://www.macromedia.com
http://bailiwick.lib.uiowa.edu/webbuilder/style.html
http://www.macromedia.com/software/flash/productinfo/usability/tips/
http://danielgc.tripod.com/webpages.htm