Archivos de la categoría Diseño web

Diseñador web Sevilla. Diseño web profesional. Página web de este diseñador en la que se incluyen sus últimos trabajos como especialista en Diseño web. Ofrece servicios de Diseño web y Diseñador web en Sevilla. Diseño de Tiendas Virtuales.

Personaliza tu página 404 para mejorar tus visitas y ventas

Una de las páginas que tarde o temprano suelen recibir visitas de casi todos los usuarios es la famosa 404 “página no encontrada”. Es la página a la que suele redirigir nuestro servidor web cuando no se encuentra el contenido solicitado (por error en la url, por falta de accesibilidad en el momento, etc).  Un error 404 típico se ve así:

Así que es buena idea aprovechar esta página para ofrecer algo de contenido extra al visitante, a fin de producirle una mejor experiencia ante el error que se encuentra. Personalizaciones hay muchas, desde ofrecer contenido que estimemos parecido hasta ofrecer cupones descuento pasando por ventanitas de chat, formularios de consulta, etc. Una de las soluciones más sencillas y útiles (a mi entender) que se pueden ofrecer en estos casos es la de ofrecer un buscador en pantalla. Este sistema, utilizado por defecto en las Tiendas Online Prestashop, permite al visitante realizar una búsqueda en el mismo momento en el que es informado a través de la página 404 de que no se encuentra la página que estaba buscando. Podéis ver un ejemplo en Kinetienda, una Tienda Online de Fisioterapia.

Este mismo sistema utilizo, por ejemplo, en este mismo blog:

Otra forma personalización es la redirección a una pantalla general donde se muestra todo el contenido de la web. Este sistema lo he utilizado bastante en Tiendas Online Oscommerce:

Elegid la opción que más os guste, inventad una si no encontráis la que os convenza, pero no desaprovechéis la oportunidad de hacer algo de feedback con los usuarios. Transformad un error en una oportunidad :)

Mini guía para optimizar la velocidad de tu web

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.

Cómo instalar y usar firebug

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.

[flash http://www.josecriado.com/tutoriales/programacion/firebug.swf]

Duración: 5 minutos.

Problemas de estilos y fuentes en las tiendas virtuales.

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.

Diseño web Flash

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.

Las Páginas en Flash serán indexables por Google y Yahoo

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.

Editor de iconos gratis IcoFX

Muchas veces, cuando se diseña una web, ya sea una tienda virtual, un blog, un CMS o lo que quiera que surja, nos encontramos con la necesidad de crear iconos.

Crear un buen icono es, desde mi punto de vista, un arte. Hay que hacer que una pequeña imagen transmita información de forma directa y concisa.

Para facilitarnos la tarea de crear iconos aquí os traigo un editor de iconos potente, gratuito y en español. Su nombre es IcoFx y nos permitirá crear cualquier icono que se nos ocurra. Incluye soporte para diversos formatos de imagen y soporta transparencias para los iconos. Es el programa que he usado para crear el icono de mi barra de dirección de josevillano.com (para los que no lo sepan es una giraldita con diseño moderno).

Ya no hay excusas para no tener los mejores iconos en nuestras webs.

Web oficial de IcoFX aquí.

icofx

Diseño web

Es curioso ver cómo el término diseño web ha tomado tal relevancia en internet que se ha convertido en el término más rentable tanto a nivel SEO como a nivel SEM para posicionar en google.

Al principio de los tiempos, cuando se comenzó a montar todo esto que ahora llamamos internet, y sólo había html para crear webs, los diseñadores web eran a su vez diseñadores y programadores. Webs sencillas, con casi ninguna complejidad a nivel de programación. Era normal que la misma persona se encargase tanto del diseño como de la programación de una web.

Ahora estamos en 2008, y las cosas han evolucionado mucho. Tenemos diseñadores web (parte gráfica, imágenes, flash…), maquetadores (html, css), programadores (php, javascript, sql), expertos SEO, expertos SEM, etc. La web se ha expandido hasta límites impensables en sus comienzos. Los servicios y posibilidades que ofrece se han multiplicado de forma exponencial. Se ha convertido en algo tan normal en nuestras vidas como el desayunar por las mañanas.

Pero curiosamente el término que la gente más sigue utilizando para buscar empresas que realicen paginas web sigue siendo “diseño web”. Hay cosas que no cambian nunca.