Diseño de Tiendas Virtuales Online

La velocidad de carga de nuestras webs es una de las cosas que más debemos cuidar. Un tiempo de carga bajo garantiza una navegación agradable y fluida. Los usuarios somos muy impacientes, y queremos que todo vaya lo más deprisa posible. Si tarda mucho en cargar, me voy a otra página. Si va a saltos, me voy a otra página. Además mejorará nuestro posicionamiento en buscadores y aumentará el tráfico de nuestro sitios. Por este motivo voy aquí os dejo una mini guía para ayudaros a optimizar la velocidad de carga de vuestra web de forma sencilla y rápida:

1- Optimizad el tamaño de las imágenes.

Usad thumbnails para crear miniaturas de imágenes grandes si es necesario. Elegid el formato de imagen adecuado (no todo es jpg) y con la calidad adecuada (adecuada para el ojo humano). Las imágenes son normalmente los elementos de más peso de la web. Siempre que podáis, sustituidlas por estilos.

2- Usad la caché adecuadamente.

Marcad la caché para cada tipo de archivo. Las imágenes pueden tener un par de semanas de caché (normalmente cambian poco en la web). Los archivos php, html y similares 1 día. A cada tipo podéis ponerle el que necesite. En post anterior he puesto un pequeño ejemplo sobre cómo optimizar la cache de tu web con .htaccess

3- Evitad llamadas a recursos externos.

Normalmente tirar de recursos externos a nuestro servidor ralentiza la carga. Si podéis, mejor tener las imágenes, vídeos, archivos de descarga o lo que sea en nuestro propio servidor.

4- Utilizad un hosting adecuado.

Tu web puede estar muy optimizada, pero si el alojamiento no es bueno de poco servirá tu esfuerzo. Si se lo puede permitir uno es mejor tener un servidor dedicado para garantizar la velocidad de la web. Un Servidor virtual o servidor cloud es suficiente para comenzar, y desde mi punto de vista merece mucho la pena. Además de los servicios que necesitas, aseguraos de que el servidor tiene los mínimos saltos posibles al hacerle un tracert (10 como máximo) y que el tiempo de respuesta al ping es bueno (por debajo de 60). Os pongo una imagen con el tracert y el ping a mi blog para aquellos que no sepan cómo hacerlos. Se puede ver que hay 8 saltos en el tracert y un tiempo de respuesta entre 33 y 38 milisegundos con una media de 35 milisegundos.

5- Instalar speed page en firefox o en chrome. Con esta extensión podrás obtener un reporte de tus wes con consejos sobre cómo mejorar la velocidad de las mismas.

Existen muchos otros recursos para lograr una web rápida y optimizada, pero con estos 5 consejos lograréis una notable mejora del tiempo de carga de forma rápida y con poco esfuerzo.

Cumpliendo lo prometido aquí os dejo el primero de los nuevo vídeo tutoriales. Como expliqué están realizados sin preparación previa, así que las “tomas falsas” van incluidas.

En este vídeo tutorial veremos qué es firebug, cómo instalarlo y cómo usarlo en el desarrollo de nuestras aplicaciones web. Un complemento imprescindible para todo desarrollador web.

Por último recordad que en barra inferior hay un botón para poner el vídeo tutorial a pantalla completa.

Duración: 5 minutos.

Cuando se prepara el diseño de una tienda virtual o de cualquier otro tipo de web, uno de los aspectos importantes a tener en cuenta es la tipografía que vamos a utilizar. Las fuentes disponibles hoy día se cuentan por miles, a cual más bonita, moderna, estilizada o colorida.

Pero en internet nos encontramos con el problema de que no todas las fuentes son válidas. Por defecto, en un navegador web se usarán las fuentes instaladas en el sistema operativo del ordenador donde se ejecuta. Esto hace que exista el riesgo de que si usamos una fuente que no exista en el ordenador de la persona que visita la web, esta fuente se sustituya por otra, quedando a veces las webs desfiguradas o estéticamente con menos fuerza.

Aunque hay varios trucos para evitar esos problemas (css, conversores gráficos, etc) yo os voy a dar una recomendación, especialmente para desarrolladores con poca experiencia en el tema web. En codestyle.org podéis encontrar una lista con las fuentes más instaladas en los sistemas operativos del mundo. Así tendréis un % muy alto de que la web se vea con la fuente que habéis elegido sin necesidad de aplicar ningún truco extra. Os facilitará mucho el diseño.

Es algo que personalmente esperaba hace tiempo, y parece que ya ha llegado el momento. Estamos entrando en la Era Flash. El resurgir de esta tecnología en pocos meses ha sido espectacular. Las causas, aquí tenemos unas cuantas:

- Los vídeos de YouTube posicionan y fuerte en Google.

- Nueva versión de Flex y ActionScript para desarrollar contenidos en flash.

- Acuerdos de Adobe con Google y Microsoft para indexar el contenido de los ficheros flash.

- La homogeneidad del visualizador de Adobe en los navegadores clientes.

Poco a poco se han ido uniendo factores. El ancho de banda medio por cyberhabitante ya permite visualizar vídeos flash con streaming a una velocidad más que aceptable. Y teniendo vídeos y animaciones, pocos van a querer seguir usando texto. Es el siguiente paso en la evolución web.

Así que ya podemos ir subiéndonos todos al toro, porque de aquí a pocos meses todo el mundo va a estar desarrollando en flash lo que antes hacía en XHTML. Flash va a pasar a ser parte vital de una página web. En vez del típico GIF animado pondremos un flash cargado de información para google, con menos peso incluso que dicho GIF. Los productos de las tiendas online se venderán mucho mejor con vídeos que los muestran que con imágenes estáticas como se hace actualmente ahora.

Y una última observación estilo “gurú”: comprad algún dominio interesante que lleve la palabra “flash” incluida, yo diría que se están revalorizando. Yo ya he adquirido algunos ;)

Podéis obtener más información sobre Diseño web Flash pulsando el enlace.

Ayer leí en Error500.net que las páginas web realizadas en Flash serán indexadas por Google y Yahoo. Parece ser que Adobe ha llegado a un acuerdo con ambos buscadores y todos los ficheros flash serán indexados a partir de este mes de Julio. Todas las URLs y texto embebidos en los ficheros flash serán indexados sin problemas.

Esto supone una gran victoria para Adobe y una nueva derrota para Microsoft, ya que éste último había desarrollado Silverlight pensando en la facilidad de indexación.

Para los webmaster y SEO se abre un nuevo campo de trabajo, ya que el flash estaba prácticamente descartado para temas de posicionamiento web. Parece que lo multimedia gana fuerza. Toca renovarse o morir, todos a aprender Flash y Action Script.

En el blog de mi hermano, Fernando Criado, un gran diseñador web flash, podéis encontrar las últimas noticias referentes al diseño web con Flash.