Archivo para Febrero, 2010

Optimización de Páginas Web

27 de Febrero de 2010

Todos queremos tener la web más atractiva y dejar a nuestros visitantes con los ojos abiertos y completamente deslumbrados. Por lo general un diseño muy atractivo implica gran cantidad de elementos gráficos, aumentando el tamaño de la página. Aquí hablaremos de algunos consejos útiles sobre cómo mantener un diseño web atractivo, pero con descargas rápidas.

Debido a la tasa media de ancho de banda de Internet por ordenador, los webmasters dejan de desarrollar sitios web complejos cargados con fuertes elementos gráficos. En casos extremos se pueden encontrar sitios web que toman unos minutos para cargar el contenido en su navegador. Por supuesto el usuario no va a esperar ese tiempo para que un sitio web cargue, y pasará a la siguiente página web en sus resultados de búsqueda.

¿Entonces por qué algunos webmasters aún desarrollan páginas de carga lenta? Principalmente debido a la falta de conocimiento de sencillas técnicas de optimización de gráficos que les permitan mantener un sitio web atractivo, manteniendo el tamaño de página más pequeño.

¿Cuántos somos conscientes del hecho de que un cuadro con esquinas redondeadas puede conseguirse utilizando el código CSS solamente, sin la necesidad de cualquier imagen gráfica. Los que están familiarizados con CSS saben que un nivel relativamente alto de la programación es necesario, los errores más comunes pueden tener relación con la optimización de las soluciones simples.

Se podría hacer la afirmación de que lo que un diseñador Web puede hacer con el software gráfico es imposible de aplicar al código. No estoy de acuerdo. Cuando el diseño está terminado y está listo para cortarlo en pequeñas imágenes a utilizar en el código html, la creatividad se ha probado. Todo lo que se hace en esta etapa afectará al tamaño de página total. Si el diseño contiene formas redondeadas que se superponen unas a otras o zonas con gradientes de color, entonces deberemos cortarlas con cuidado para que el resultado sea tamaño de archivo pequeño.

Veamos lo que significa cortar eficientemente:

  1. No hacer cortes grandes que contiengan gran cantidad de colores diferentes. Utilizaremos un pequeño número de cortes en cada porción contieniendo un número limitado de colores.
  2. No haremos una gran parte que contenga la estructura del mismo gráfico. Cortarmeos una pequeña parte de él y se repetirá en el código. Esto suele ser un error muy común que los webmasters / programadores hacen cuando se trata de fondo de color degradado.
  3. No usaremos el formato de archivo JPEG siempre. En algunos casos, un formato GIF será mucho menor en tamaño. Una regla de oro – un segmento con un elevado número de colores será más pequeño de tamaño con el formato JPEG en lugar del formato GIF, y lo contrario también es cierto. Comprobaremos cada opción por separado. Cada 1KB que nos permita reducir el tamaño de archivo de la imagen finalmente se sumará a una reducción significativa en el tamaño de página.
  4. Si tenemos texto sobre un fondo de color sólido, utilizaremos el código para crear el fondo en su lugar. Recordemos que se puede definir tanto el estilo de fuente y color de fondo de la zona utilizando CSS.

Técnicas avanzadas

Gráficamente la optimización de un sitio web es algo más que saber hacer optimizaciones de la imagen. Existen algunas técnicas avanzadas que requieren un alto nivel de  programación. CSS2 tiene mucho más que ofrecer que el CSS. Aunque no todos los navegadores han adoptado esta norma todavía se debe estar listo para cuando lo hagan. JavaScript también nos da un conjunto de opciones para crear algunos efectos interesantes sin necesidad de sobrecargar la página con Flash.  El uso de herramientas limitadas, como JavaScript, frente a una aplicación avanzada, como Flash para crear los efectos deseados puede ser difícil. Sin embargo, pensemos en el resultado del esfuerzo que puede diferenciar el sitio web de los demás. Obtendremos un atractivo sitio web de aspecto profesional  y que carga rápidamente.

Regreso al futuro

Las PDAs, teléfonos móviles y ordenadores portátiles mini son usados con conexiones a inalámbricas para navegar por Internet, la publicación de páginas web de carga rápida mejorará la experiencia de navegación, no sólo para aquellos que utilizan conexiones de gran ancho de banda, sino también hará que el usuario tenga una experiencia de navegación fácil.

Para aquellos que insisten en que la optimización del diseño web no es necesaria porque todos tendrán conexiones de banda ancha alta con el tiempo, estoy de acuerdo, hasta cierto punto. Sin embargo, las empresas de software están creando aplicaciones que utilizan más ancho de banda porque saben que están disponibles para que se utilicen. Acostumbrémonos a optimizar bien las páginas web, porque este juego del gato y el ratón no terminará nunca, y es mejor aprender las reglas del juego, que ser mordido.

¿Por qué buena Navegación es importante?

25 de Febrero de 2010

La navegación web es uno de los elementos más cruciales en la determinación de la eficacia de un sitio web.
Para que la navegación web se eficaz, ante todo debe tener sentido. Si bien siempre hay espacio para la creatividad, los sitios web bien diseñados tienden a tener esquemas de navegación similar.

Un diseñador de páginas web siempre debe tener en cuenta la finalidad básica de la web y la audiencia prevista en el diseño de los elementos de navegación. La mayoría de sitios web existentes tienen a bien informar al visitante sobre un producto o servicio o vender realmente ese producto o servicio. Por lo tanto, hay algunas pautas básicas a seguir:

Asegurémonos de que todos los elementos de la navegación están claros y que los vínculos tienen el uso de las convenciones estándar de los enlaces, tales como botones, menús, subrayando del texto o cambio de color en el ratón.

Cuando no utilicemos los enlaces convencionales, hay que indicar explícitamente al visitante que se trata de un enlace. Por ejemplo, supongamos que diseñamos una página web en la que se utiliza un mapa que muestra distintas ciudades y deseamos que el usuario haga clic en el nombre de la ciudad para obtener información sobre la misma. Hemos de asegurarnos de informar al usuario que haga clic en el nombre de la ciudad para obtener más información acerca de ella.

Recuerde la regla de los “Tres clics”. Los estudios han demostrado que la mayoría de los usuarios no suelen hacer clic en más de tres enlaces para obtener la información que desean. Así, cada página del sitio web debe ser accesible dentro de esos tres clics.

No se recomienda el uso de flash o de otro tipo de página de bienvenida en el sitio web. Hay que mantener el diseño de la página web de sencillo y atractivo. Pero si decidimos usar uno, asegurémonos de usar la etiqueta META REFRESH, que permita al visitante saltar la página de inicio después de unos segundos y proporcionar  un botón en el que pueda hacerse clic, claramente marcado para que el visitante puede pasar la página de entrada e ir directamente a su página de inicio, de lo contrario un gran porcentaje de los visitantes no volverán jamás. Recuerde que la mayoría de los visitantes buscan información, no entretenimiento.

Elementos de navegación

Top Menús - La barra de menú de la página normalmente se encuentra debajo de la cabecera que contiene el logotipo del sitio. Estos elementos de menú pueden ser individuales, menús desplegables, o con ampliación. Cada elemento del menú puede ser representado por un gráfico o solo de texto.

Lateral izquierdo de navegación – La navegación del lado izquierdo normalmente se implementa como la columna A o área de texto en la parte superior izquierda de la página web. Al igual que el menú superior, cada elemento puede ser un simple enlace o un menú en expansión.

Lateral derecho de navegación – La navegación del lado derecho no se utiliza muy a menudo, pero cuando se utiliza, se implementa como una columna o área de texto en la parte superior derecha de la página web. La mayoría de los diseñadores utilizan esta área para la publicidad en lugar de navegación del sitio.

Menús de fondo – Los menús de fondo pueden ser una barra de menú o pie de página.

Elementos importantes de navegación

Enlaces – Todas las páginas del sitio web deben estar dentro de dos o tres clics de la página de inicio. Las páginas importantes se deben estar a un clic. El tipo de sitio web  determina los vínculos que son más destacados.

Cajas de inicio de sesión - Las cajas de inicio de sesión deben ser bien visibles. Los lugares comunes son parte superior izquierda, arriba a la derecha o dentro de la cabecera de la página.

Carros de la compra - Si usted usamos un carrito de compra para vender productos, debemos mostrar el botón de compra en un lugar destacado sobre cada página. La localización más común es la parte superior derecha justo debajo o como parte de la cabecera.

Botones de Orden – Si utilizamos botones de orden individual deben ser grandes y visibles. Usaremos el menor número de clics para entrar a la página.

Barra de migas – La barra de migas, son los vínculos o representación gráfica de dónde nos encontramos. La barra de migas generalmente está situada en la parte superior izquierda de la página justo debajo de la cabecera. Cada palabra es un enlace a la página anterior. Suelen estar en esta forma: Inicio-> Artículos-> Marketing

Enlaces externos – Los enlaces externos pueden ser utilizados en cualquier lugar, pero son más utilizados dentro de las áreas de texto de la página web. Pueden ser referencias a más información que se encuentra en otro sitio, a los productos recomendados, o para cualquier otra cosa.

Anuncios – Los anuncios son normalmente gráficos o texto con un hipervínculo asociado. Los anuncios pueden ser colocados en cualquier lugar de una página web, pero normalmente se utilizan sólo en el banner, por el lado derecho de la página, debajo de los elementos de navegación en el margen izquierdo, en la parte inferior de la página o intercalados en las zonas de ensayo de las página. Los estudios demuestran que los anuncios “por encima de la tapa” son más eficaces.
( “Por encima de la tapa” se refiere a la zona de una página web que es visible sin tener que desplazarse.)

Elementos descargables – Si ofrecemos elementos descargables, tales como archivos de audio, video o pdf, asegurémonos de informar al usuario del tamaño del archivo o si hay una aplicación para utilizar el archivo. Si se necesita una aplicación, proporcionaremos un vínculo a la aplicación. Por ejemplo, proporcionaríamos un vínculo de Acrobat, si estamos ofreciendo archivos PDF.

Mapa del Sitio - Un mapa del sitio es una buena forma de la distribución de todo el sitio para sus visitantes. Es sólo una lista jerárquica de cada página del sitio.

Resumen

Un sistema de navegación bueno puede aumentar el número de páginas vistas por cada visitante. Esto a su vez puede aumentar las suscripciones, los clientes, ventas, los miembros  y hacer que el sitio web sea más exitoso.