1. Solo porque puedes no significa que debas.  Actualmente hay muchas tecnologías Web y no porque haya deban de utilizarse (por ejemplo Ajax, Flash, etc.); la pregunta que deberia hacerse un diseñador Web es: “‘ ¿La tecnología agrega valor al sitio o solo se utiliza para mostrar que hay novedad? “.
2. Hay casi siempre una excepción. Un diseñador Web debe tener cuidado de excluir una tecnología Web, ya que si bien, no funciona para muchos usuario, quiza haya un grupo que lo prefiera (Por ejemplo, un logotipo animado con flash).
3. El último juez es el usuario.  Opiniones durante el diseño del sitio nunca faltan (del diseñador, del jefe, del programador, etc); pero la conclusión es que el sitio debe tener sentido para el usuario, por lo tanto el sitio debe ser diseñado teniendo en mente al usuario.
4. Cruzar experiencias es algo que un diseñador Web debe esforzarse. Un dieño Web profesional requiere entender las necesidades del usuario,  independientemente de los aspectos técnicos y estéticos que el sitio pueda tener.
5. La humildad es el mejor enfoque. Siempre va a haber diseñadores con diseños de sitios más atractivos, por lo tanto el aprender de los demás fortalece las habilidades.
6. Es imposible complacer a todos. Un diseño nunca va a dejar a todos contentos; y todo mundo tiene una opinión. Sin embargo, hay una línea delgada entre hacer feliz a la mayoría y tratar de crear un sitio que realmente sea eficaz en la comunicación.
7. Tratar de estar en el tope de las especificaciones y estándares. Las especificaciones y estándares Web cambian constantemente, por lo tanto un diseñador Web debe tener una comprensión básica de las últimas tecnologías, las cuales afectarán el trabajo futuro.

Además de las reglas básicas, un diseñador Web debería tomar en cuenta que debe haber tres factores en un sitio:

1. La estéticca. Qué tan profesional y consistente es el sitio con el negocio.
2. La usabilidad.  Qué tan facil y rápido el usuario encuentra la información o ejecuta sus tareas.
3. La funcionalidad. Qué tanto funciona el sitio y permite a los usuarios resolver sus problemas.

De lo anterión se concluye que un sitio Web es exitoso si cumple con tres cosas: que le guste al usuario,  lo use  y le funcione.

Compartir/guardar

• Descrubrir las tareas que son de alta prioridad para los usuarios
• Proporcionar buena visibilidad para las tareas de alta prioridad
• Lenguaje centrado en el usuario, y no al lenguaje de la compañia
• En el esquema de navegación principal presentar primero los temas de interés del usuario,  y poner los enlaces de información sobre la compañía al final.
• Proporcionar un camino claro para regresar a la página de inicio en el esquema de navegación, por ejemplo usando la etiqueta “Inicio”. 
• El contenido crítico debe estar sobre el despliegue de la pagina inicial
• Distinguir claramente los widgets del contenido, por ejemplo, secciones principales, botones, etc.
• No usar ventanas emergentes
• No desplegar paginas con elementos Flash antes de permitirle a los usuarios  llegar a la página de inicio.
• Mostrar el día y la fecha de cúando fue la última vez que se actualizó el  contenido de la página de inicio.

Ejemplos:

Compartir/guardar

• Navegación fácil y ligera

Los enlaces de navegación juegan un papel muy importante lo cual determina el tiempo en que un visitante permanece y explora el sitio.

• Diseño del sitio limpio

Un diseño limpio con suficiente espacio en blanco mejora la apariencia del sitio. Tratar de mantener la atención en su contenido, utilizar una plantilla para ello. Utilizar fuentes que estarán disponibles en cualquier equipo para evitar un mal estado del sitio.

• Optimización de tiempos de carga
  

Asegurar que el tiempo de carga de las paginas sea bajo. Para esto es recomendable hacer

• Minimizar gráficos, scripts y peliculas (flash).
• коли под наемOptimizar el contenido HTML y codigo script.
• utilizar archivos Server Side Include (SSI) tando donde sea posible.

• Diseñar para todo tipo de resoluciones de pantallas
  

Un sitio que es fácil de utilizar siempre alienta a los visitantes a permanecer y leer su contenido. Para sitio con mucho contenido es muy importante que el desplazamiento requerido sea reducido.  El diseño de una página que se ajuste a cualquier tipo de resolución asegura de que todos los visitantes aprecien un sitio profesional y atractivo.

• Asegurar la escalabilidad del sitio web
  

Asegurar que el código y diseño sea escalable dado el avance constante de la tecnología en plataformas.

• Compatibilidad con los browsers
  

Revisar que el sitio se pueda navegar desde Internet Explorer 5+, Firefox 1.0, Opera 7.0 y Netscape Navigator 6+ ya que ellos conforman el 95% del total de browsers del mundo.

Compartir/guardar

1. Evitar hacer supocisiones acerca de las habilidades físicas, mentales y sensoriales de los usuarios.

2. Las tecnologias de los usuarios son capaces enviar y recibir texto. Esto es algo que siempre podremos dar por hecho.

3. El tiempo y la tecnología pertenecen a los usuarios, no a nosotros. Nunca debemos de tomar el control de ninguno de estos si no existe una buena razón para hacerlo.

4. Proporcionar buenos textos alternativos para cualquier contenido que no sea texto.

5. Usar ampliamente la tecnologia disponible para alcanzar al público.

6. Usar lenguaje claro para comunicar el mensaje.

7. Hacer sitios usables, encontrables, y navegables.

8. Diseñar contenido con enfoque semántico y mantener la separación entre contenido y presentación.

9. Progresívamente mejorar el contenido básico agregando características adicionales; pero permitir a los usuarios descartarlas cuando ellos no puedan o no quieran usarlas.

10. En las nuevas tecnologías web aplicar estos mismos principios para hacerlas accesibles.

Compartir/guardar

Compartir/guardar

Control.Tabs Basada sobre Prototype.

Javascript Tabs vom Stilbüro Basada sobre jQuery | Demo

Yahoo TabView Parte de la UI Library | Demos

TabPanel provided by Google Web Toolkit.

Tabbed Panels, provided by Adobe Spry Framework.

AJAX Tabs Content Script de Dynamic Drive.

Tab Panes En dos versiones por DHTMLGoodies, con Close-Buttons. Demo I | Demo II

JavaScript Tabifier

AJAX Tabs

Ajax Project – Tabbed Page Interface

DOMTab – Navigation tabs with CSS and DOMscripting es presentado en dos versiones.

Tabtastic

Tabmenu Trabaja como MouseOver sin el click del mouse.

Compartir/guardar

1. AJAX AutoSuggest: un auto-completer AJAX para campo de texto

2. AJAX Autocompleter / script.aculo.us library

3. AJAX AutoCompleter

4. Ajax autosuggest/autocomplete desde una base de datos

5. Ajax dynamic list

Compartir/guardar

Aquí: WebForms.pdf, Luke Wroblewski pone a disposición las mejores practicas para diseñar formularios Web.

Compartir/guardar

1. Conservarlo simple

Esto suena obvio pero si nos encontramos que estamos haciendo uso de código complejo deberíamos de pensar acerca de si en el futuro realmente lo necesitaremos o solo estamos pensando en nuestro diseño y no en nuestros visitores. Frecuentemente los diseñadores nos inspiramos en nuestro propio diseño y nos “alzamos” para producir determinados efectos visuales solo para encontrarnos después con que los visitores lo ven pesado e inutilizable.

El código complejo es el resultado de un pensamiento desordenado. Planear el layout lógico y trabajar en el exterior en y desde arriba y hacia abajo tanto sea posible.

Usualmente hay que empezar con la envoltura de la página y entonces progresar lógicamente a través del encabezado, navegación, contenido principal y pies, etc. tratando de preservar el flujo de los documentos tanto como sea posible.

Mientras que un diseño visual bonito es necesario para atraer visitores se deberá pensar aún en tener buen contenido y que el sitio sea utilizable y accesible. Si encontramos que nuestro html y el css parecen como “spaguetti” entonces se tiene que pensar ver si se puede simplificar. Esto hará mas fácil mantenerlo en el futuro y frecuentemente ahorraremos código y ancho de banda.

2. No usar hacks a menos que este sea conocido y documentado

Este es un punto importante, frecuentemente vemos hacks empleados para componer algo que realmente no es imperfecto en primer lugar. Si encontramos que estamos buscando un hack para componer cierto elemento en nuestro diseño entonces primero hacemos una búsqueda (en nuestro amigo google) y tratamos de identificar el elemento con el que estamos teniendo problema.

Si encontramos que es un bug conocido entonces el 99% de las veces tendrá una solución para este bug y entonces podemos confiablemente usar un hack si es requerido, teniendo en cuenta que estamos componiendo el bug, que es diferente a corregir el mal código.
Dificilmente podríamos contar el número de veces que hemos visto layouts usando hacks cuando todo lo que se debio hacer era controlar los margenes por default en la página (vea el siguiente tip)

3. Tener cuidado con los margins y padding de todos los elementos que usamos

Todos los browsers aplican padding (rellenos) y marging (margen) por default en la mayoría de los elementos, y la cantidad que ellos aplican varía substancialmente. Por lo tanto, necesitamos controlar explícitamente, tanto el marging como el padding, en todos los elementos que usamos.

Esto será cubierto en “No margin por error”

(continuará…)

Compartir/guardar