Crear tooltips con jQuery

Toolbar.js es un plugin de jQuery que nos ayuda a crear fácilmente tooltip estilo barras de herramientas.

Se trata de un plugin muy sencillo que nos permite crear cualquier tipo de barra de herramientas.

Permite abrir la barra desde cualquier elemento, los elementos de la barra de herramientas son fácilmente personalizables. Las barras pueden aparecer horizontales o verticales, por encima o debajo del botón.

VER DEMO Y DESCARGAR

Share and Enjoy

divertirse con jQuery

Se trata de un plugin experimental en jQuery que lo que hace es amenizar la entrada de texto en las cajas de tu web.

Existe la posibilidad de incluir hasta 5 efectos distintos de animación. Con lo aburrido que es siempre rellenar un formulario, esta puede ser una buena manera de hacerlo más divertido

VER DEMO

Share and Enjoy

Guía Google para optimizar web mobile

Si estás pensando en diseñar una web para smartphone, Google pone a tu disposición una guía gratuita con todo tipo de consejos, trucos y código para optimizarla y obtener los mejores resultados.

Para empezar, lo primero que Google te recomienda es realizar un diseño web receptivo, es decir, utilizar el mismo HTML para todos los dispositivos, independientemente de su resolución, y utilizar CSS para decidir los cambios según estas resoluciones.

Esta guía, te ofrece además, la posibilidad de consultar la compatibilidad entre smartphones o recomendaciones para el uso de javascript en tu sitio.

En definitiva, se trata de una guía realizada por Google, eso significa que si quieres tener contento a Googlebot, léete esta guía y síguela al pie de la letra

VER LA GUÍA GOOGLE PARA WEB MOBILE

Share and Enjoy

Galería de imágenes Google

Todos vosotros habréis visto la galería de imágenes de Google, al pinchar sobre cualquiera de los thumbnails, este se despliega con un efecto acordeón, insertando un espacio de información entre las demás miniaturas de la página.

En este post de diseño web, vais a poder acceder a toda la información para implementar una galería exactamente igual a la de Google en vuestro sitio web.

Personalmente me gusta, me parece una forma muy inteligente de dar información sobre la imagen, sin necesidad de abandonar la página y de una forma rápida y vistosa, lo ideal en diseño web ¿no?
Además, podría ser una muy buena idea para un portfolio.

La documentación es muy completa, os explica paso a paso como implementar el código y luego además tenéis la demo para ver cómo queda.

VER DEMO Y DESCARGAR CÓDIGO

Share and Enjoy

Herramientas gratis para crear infografías

El uso de infografías además de ayudarnos a hacer comprender mejor una información, suele producir un efecto mayor en cuanto a viralización de tus contenidos. Por otro lado, al tratarse de imágenes con información, conseguirás mucho tráfico también en imágenes de Google.
He encontrado en www.desingenia.com un buen post en el que nos aconseja varias herramientas para hacer infografías de forma gratuita. Por lo general suelo usar siempre photoshop, pero es cierto que alguna de estas herramientas te proporcionan ayudas que de otro modo se pueden complicar bastante.

VER POST ORIGINAL

Share and Enjoy

Diseño de Web para Móviles

El tráfico de los dispositivos mobile empieza a ser un factor decisivo a la hora de replantearte el diseño de tu web. En este post no vamos a entrar en si es mejor un diseño adaptative o crear uno especial para este tipo de dispositivos, vamos a ver cuales son los factores decisivos que deciden entre el éxito y fracaso de un sitio mobile.

Los usuarios esperan que su experiencia mobile sea al menos tan buena como la de escritorio. Es muy fácil perder clientes y muy difícil ganarlos, sin embargo, no tener sitio mobile ayuda a tu competencia, así que parece claro que la opción es adaptarse, pero hacerlo bien.

Uno de los últimos estudios creados por Google, relacionados con los usos mobile, reflejaba los siguientes datos: el 81% de los usuarios prefería consultar los precios en web mobile frente a App.

Cuando me planteo el diseño de una web mobile, el principal problema con el que me encuentro es dejar de lado todo lo que sé sobre diseño web de escritorio y empezar a pensar en mobile. Tenemos menos espacio, la arquitectura es deferente, no hay sitio para mostrar continuamente el menú, por lo tanto habrá que hacerlo plegable, pero tendrá que ser de fácil acceso y sobre todo hay que tener en cuenta el hecho de que mi usuario no va a disponer del mismo tiempo de consulta que si estuviese sentado cómodamente en su casa. Lo más probable es que acceda a mi web para hacer una rápida consulta, así que no podemos defraudarle.

Estos son los conceptos básicos que debemos tener siempre en cuenta a la hora de diseñar una web mobile.

RAPIDEZ

Como decía, seguramente mi usuario haya entrado para hacer una consulta rápida, para ello tenemos que conseguir que nuestra página cargue rápido y sea muy fácil de leer. Debemos ser muy concisos y desarrollar nuestra información con la mayor brevedad posible. Es decir, la rapidez será dirigida tanto al proceso de creación de la página (código e imágenes) como a la creación de contenidos.

• Priorizar el contenido dirigido a este tipo de usuario.
• Reducir los grandes bloques de texto.
• Optimizar al máximo nuestras imágenes y código para que carguen rápidamente.

USABILIDAD

Independientemente del contenido de tu sitio, tus usuarios tienen ser capaces de utilizarlo con la mayor facilidad posible. Ten en cuenta que su ratón es el dedo, un error muy común en sitios mobile es ver botones de tamaño tan pequeño que hace prácticamente imposible accionarlos.

• A la hora de colocar un botón, pensemos en el usuario. El tamaño mínimo ha de ser de unos 40x40px. Dejar suficiente aire al rededor del botón para poder accionarlo. En caso de utilizar enlaces de texto, mejor utilizar una frase que no una pequeña palabra difícil de accionar.
• El tiempo es oro, reduzcamos al máximo los campos de los formularios. Existen multitud de ayudas para hacer más fácil el uso de este tipo de formularios, listas de desplazamiento, casillas de verificación… jQuery Mobile te ofrece muchas posibilidades en este aspecto.
• Permitir que el usuario pueda guardar sus búsquedas para una posterior consulta.

La navegación ha de ser clara  en sitios grandes y complejos, las funciones de búsqueda ayudarán a tus clientes a encontrar fácilmente lo que necesitan.

• No abuses del desplazamiento y sobre todo no abuses del desplazamiento horizontal.
• Utiliza una jerarquía de menú que sea reconocible gráficamente, utilizando siempre botones como “anterior” o “home”
• Intenta en la medida de lo posible utilizar el mínimo de páginas para llegar a un contenido.
• La navegación ha de ser igual en todas las pantallas de la web.
• Un dispositivo mobile, puede ser utilizado en cualquier lugar, con poca luz, con sol,… Procuremos utilizar un buen tamaño de fuente, una tipografía fácil de leer y buenos contrastes de color.
• El tamaño si importa. El usuario no debería de hacer zoom para poder leer o visualizar cualquier contenido de nuestra web. El uso de sombreado para los botones suele funcionar muy bien.
• En mi opinión, todos lo sitios web mobile, deberían tener un acceso para ver la web en formato escritorio, y por supuesto retornar. Existen multitud de dispositivos mobile y cada vez con pantallas más grandes que permiten navegar sin problema una web de escritorio. En muchas ocasiones, conocemos bien la web en su versión de escritorio y preferimos seguir navegándola así, por lo que no debería ser excluyente no poder verla por disponer en ese momento de un móvil.
• Nada de flash. El flash no es accesible desde cualquier terminal, por lo tanto, no se usa. Cualquier interacción o animación podemos hacerla con HTML5
• Adapta tu sitio tanto a orientación horizontal como vertical y en la medida de lo posible, no desplazar de su ubicación al usuario, al hacer un cambio de orientación.

USO LOCAL

En algún caso, se nos planteará el diseño de un tipo de comercio en el que sea necesario ubicar al usuario (tiendas, restaurantes, bares,…). Los usuarios de smartphone, utilizamos continuamente la geolocalización para encontrar aquellas necesidades que nos surgen. Tenemos pues que ayudar al máximo al usuario para que pueda ponerse en contacto con nosotros y encontrarnos. El uso de botón o enlace para activar el teléfono, funciona ya en todos los terminales, basta un clic para llamar.

• Uso de botones para ponerse en contacto con nosotros telefónicamente.
• Incluir mapas y direcciones utilizando el GPS del terminal
• Sería muy interesante que el usuario pudiese comprobar stock en la tienda más cercana a su ubicación, y en caso de no encontrarlo, mostrarle dónde encontrarlo y cómo llegar.

Como en todo lo relacionado con el diseño online, existen multitud de sitios y de recursos a nuestro alcance, unos previo pago y muchos otros gratuitos. En sitios como por ejemplo Mobile Design Pattern Gallery, podéis ver un montón de ejemplos de todo tipo de formularios, menús de navegación, gráficos, etc.. Otro sitio que a mi particularmente me gusta, es Css iPhone, en el que podéis ver las últimas tendencias en diseño mobile y donde podéis sacar muchas ideas.

En este blog de diseño web también podéis encontrar más información en todos los post relacionados con Mobile, jQuery Mobile o Diseño para móviles.

Share and Enjoy

Menú con jQuery y CSS

En este blog de diseño web hemos mostrado numerosos ejemplos de menú, y seguiré añadiendo, porque el menú constituye una parte esencial del diseño web, cada proyecto es un mundo y requiere un menú diferente.

La mayoría de las veces, el menú viene condicionado o bien por la cantidad de secciones que vayamos a utilizar o por los absurdos títulos larguísimos que nos pide el cliente. En el segundo caso es casi esencial convencerle que el titular de un menú ha de ser conciso y breve si queremos que funcione.

Hoy os dejo un menú que me ha parecido muy vistoso y útil. Se trata de un menú en el que al hacer rollover sobre la opción la casilla que contiene el titular se abre con un efecto elástico, en la zona superior aparece una imagen y el texto se desplaza hacia abajo, mostrando, cuando es preciso un submenú a su derecha.

Además de poder descargar todo el código de forma gratuita, podréis consultar con amplio detalle todos los pasos del proceso.

VER DEMO Y DESCARGAR MENÚ SLIDE DOWN BOX

Share and Enjoy

En él se incluyen aquellas redes con al menos 10 millones de usuarios. El mapa está categorizado por temática, chat, citas, video&foto, general, agregadores y demás redes temáticas.

Mapa iRedes 2013

Share and Enjoy

Lista desplegable con jQuery y CSS

Hoy traemos un espectacular efecto para cuando tenemos que utilizar listas desplegables o incluso un menú.

El despliegue es customizable, totalmente configurable para conseguir efectos únicos. Como siempre ojo con los navegadores, se trata de transformaciones y transiciones CSS que como sabéis no todos los navegadores soportan.

El regalo nos lo trae tympanus y nada mejor que verlo para encapricharnos y descargarlo

VER DEMO Y DESCARGAR ARCHIVO GRATIS LISTAS DESPLEGABLES

Share and Enjoy

Psd de ribbons o cintas gratis.

DESCARGAR ARCHIVO PSD GRATIS

Share and Enjoy