Guía gratuita Google para la creación de webs móviles

Posted by Omar Benyakhlef on abr 10, 2013 in Diseño para móviles, Diseño Web, Google, HTML, iPhone, jQuery Mobile, Mobile, Tutoriales | 1 comment

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

¿Cómo hacer una galería de fotos igual que la de Google?

Posted by Omar Benyakhlef on abr 2, 2013 in jQuery | 3 comments

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.

CONTINUAR LEYENDO “¿Cómo hacer una galería de fotos igual que la de Google?” »

Share and Enjoy

Herramientas gratuitas para hacer infografías

Posted by Omar Benyakhlef on mar 26, 2013 in Diseño Web | 1 comment

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

¿Cómo diseñar una web mobile?

Posted by Omar Benyakhlef on mar 19, 2013 in Diseño para móviles, iPhone, jQuery Mobile, Mobile, Usabilidad | 1 comment

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.

CONTINUAR LEYENDO “¿Cómo diseñar una web mobile?” »

Share and Enjoy

Slide Down Box Menu, un menú completísimo con jQuery y CSS

Posted by Omar Benyakhlef on mar 12, 2013 in jQuery, Usabilidad | 0 comments

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