Programa para crear Sliders

Está claro que los sliders se implantaron hace tiempo en los diseños web, habrá quien lo tenga perfectamente controlado y habrá quien todavía no sepa muy bien cómo implementar una galería en su web.

Wow Slider es una aplicación que instalamos en nuestra máquina y nos permite crear galerías con diversos efectos, válido tanto para Windows como para Mac. En la web podréis además encontrar una guía rápida que os ayudará a sacar vuestros slides sin problema. Además cuenta con la ventaja de estar también disponible en español.

Aquí os dejo el enlace para que ver la demo y descargarlo

• http://wowslider.com/jquery-slider-carousel-mac-stack-demo.html

Transiciones realizadas con jQuery y CSS3

4 efectos Flip, 6 efectos de rotación, 3 de multi-flip, 4 efectos cubo, 2 unfold y 7 efectos más que harán que te quedes alucinado con estas transiciones de imágenes, de nuevo con jQuery y CSS3

• La web es tympanus.net,  podréis ver los efectos y descargar código en http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/

Más artículos relacionados con jQuery en http://www.gloobs.com/blog/index.php/category/jquery/

Retina display con jQuery

Hoy os dejo una adaptación de la retina display de iPhone para adaptarla a web. Se trata de un efecto lupa que se acciona con el ratón, realizado con  jQuery.

La lupa nos muestra la imagen a tamaño original y lo que queda fuera es una reducción de la misma. El efecto resultante es muy vistoso.

• Pincha aquí para poder ver una demo y el código fuente.

Internet un espacio libre

“Somos una legión, no perdonamos, no olvidamos, espéranos.”

Buscador elástico con jQuery y CSS

Seguramente más de uno se habrá fijado en el buscador de Apple. Nada más pinchar sobre él se hace más ancho para dar mayor cabida al texto de búsqueda, pocas cosas hay que haga Apple que luego no marquen tendencia en el diseño web y en todo tipo de diseños.
Hoy os dejo un buscador que hace lo mismo, se expande y además incorpora la famosa “x” que también podemos ver  en los buscadores de iPhone o iPad.

Me ha parecido muy interesante, visualmente me parece extraordinario, pero luego además la CSS es muy completa, usa degradados e incorpora también la integración de fuentes externas a las de sistema.
Os dejo aquí la dirección para poder ver la demo y descargaros los archivos.

• DEMO & DESCARGA

 MÁS EJEMPLOS JQUERY EN BOXTUFFS.COM

Una vez que entréis en Boxtuffs, os aconsejo que echéis un vistazo a todos el material que os ofrece, hay cosas realmente útiles y vistosas.

Efectos jQuery para textos

Este es un efecto que venimos viendo en los nuevos diseños web.

En el artículo “Tendencias Diseño Web para 2012. SCROLL PARALLAX“, podéis ver varios ejemplos con imágenes y textos, que toman vida al hacer scroll sobre la página.

Hoy os dejo el código para realizar efectos con textos, podéis descargar el ejemplo y ver cómo se realizan los distintos efectos de zoom, rotate, fade, … Luego queda la imaginación y aplicar esto en vuestros diseños, el resultado es por lo menos “vistoso y sorprendente”, espero que os sirva.

• Toda la información y descarga en “Scrollorama” de John Polacek

Ascensor jQuery

En el diseño web todo evoluciona de un día para otro, esto te obliga a estar constantemente al día para no quedar atrás, todo cambia, tipografías, forma de mostrar contenidos, integración de redes sociales,…

Hoy os traigo una forma nueva de navegar, imaginad todas las páginas de vuestra web colocadas en un único plano y que el navegador vaya desplazándose horizontal y verticalmente por ellas ¿chulo eh?. Pues eso es lo que consigue este plugin jQuery, con el que podemos hacer una web súper original.

Aquí os dejo el enlace para que podáis ver la demo y descargar gratis el código.

• http://www.kirkas.ch/ascensor/#/house0

Diseñando para Android

Cuando vamos a diseñar para Android, el primer problema con el que nos encontramos es la enorme diferencia que existe de un terminal a otro, no solo en cuanto a rendimiento, si no a resolución, que es el verdadero problema con el que nos vamos a encontrar cara al diseño.

Android pone a nuestra disposición una completa documentación en la que podemos consultar todos los aspectos técnicos que tenemos que tener en cuenta a la hora de abordar un diseño App.

Android simplifica las cosas y para definir tamaños, lo hace con una diagonal que traza desde la esquina superior izquierda a la inferior derecha.

resolución Android

En general divide las resoluciones en cuatro tamaños, pequeño, normal, grande y extragrande, ldpi (bajo), mdpi(medio), ipap(alto), y xhdpi (muy alta)

320x480px se considera el tamaño normal, aunque este tamaño “normal” puede cambiar debido a la cantidad de smartphones que salen continuamente al mercado y sus distintas resoluciones.

En la siguiente tabla podemos ver las distintas resoluciones agrupadas en estos cuatro grupos principales.

Como podéis ver, se tratan todas las pantallas, desde las más pequeñas a las de dispositivos tablet.

resoluciones Android

Dan McKenzie en su artículo de Smashing Magazine, nos recomienda utilizar como referencia, la resolución de 320 x 533 píxeles y luego introducir diseños personalizados para los otros tamaños de pantalla.
En el desarrollo para Android, no se habla de resoluciones si no de densidades de pantalla, la diferencia es que mientras en resolución estamos hablando de la cantidad de pixels que forman la pantalla, en densidad, nos referimos a la cantidad de pixels que hay en un área de pantalla.

Densidad de pixeles independientes (dp) es la unidad utilizada y se expresa del siguiente modo:

px=dp*(dpi/160)

 Por ejemplo, en una pantalla de 240 ppp, 1 DP es igual a 1,5 píxeles físicos. Android no sugiere que utilicemos  siempre las unidades de DP en la definición de la interfaz de usuario de la aplicación para asegurarse de que la interfaz de usuario se muestra correctamente en las pantallas con diferentes densidades.

Mantener la independencia de densidad es importante porque, sin ella, un elemento de interfaz de usuario (como por ejemplo un botón) aparece físicamente más grande en una pantalla de baja densidad y pequeño en una pantalla de alta densidad. Como la densidad de los cambios relacionados con el tamaño pueden causar problemas en su aplicación de diseño y usabilidad.

Las figuras 1 y 2 muestran la diferencia entre una aplicación cuando no proporciona independencia de la densidad y cuando lo hace, respectivamente.

En la primera vemos cómo a mayor densidad la imagen aparece más pequeña, sin embargo en la figura 2 obtenemos el mismo tamaño para cualquier densidad.

Fig I

Fig II

Cuando diseñamos para iPhone, es mucho más fácil, la relación entre iPhone4 y iPhone3 es de 2:1.

Para Android las proporciones son 3:4:6:8

Densidades

• 36×36 baja densidad
• 48×48 densidad media
• 72×72 alta densidad
• 96×96 muy alta densidad

Entonces, la solución es crear en el proyecto una carpeta por cada tipo de resolución y en función del terminal enviarle a usar una u otra.

De esta forma además no hará falta cambiar el nombre de las imágenes y tener distintas programaciones.

Como estáis viendo, no tiene nada que ver con iPhone.

Si luego además nos centramos en la navegación, tampoco es similar a iPhone.

Para empezar la botonera se centra en la parte inferior de la pantalla, el botón back por ejemplo, en el iPhone está arriba y en Android abajo y además está integrado en la botonera del terminal.

GUIDELINES PARA PHOTOSHOP GRATIS !!!

Si necesitas guidelines en photoshop de smartphones Android, aquí os dejo unos cuantos para descargar gratis.

• http://matcheck.cz/androidguipsd/
• http://www.teehanlax.com/downloads/android-gui-psd-high-density/
• http://superdit.com/2011/01/13/20-high-quality-android-device-psd-resources/ LA  MÁS COMPLETA !!

Iconos de Navidad

Encuentra en iconfinder tus iconos navideños en formato png y en distintos tamaños.

Tutorial de jQuery Mobile II. Transición de páginas

Ya hemos visto en Web App con jQuery Mobile. Tutorial I, cómo maquetar una página en HTML, y cómo hacer los enlaces para pasar de una página a otra, pues bien, ahora vamos a ver unos “efectos especiales” para hacer la Web Appmás atractiva.

jQuery Mobile incluye un conjunto de seis efectos de transición entre páginas, basados en CSS y que pueden aplicarse a cualquier vínculo de la página o formulario. Estos efectos los podréis ver en vuestro ordenador si navegáis con Chrome, espero y deseo que en un futuro cercano, podamos utilizar estos efectos también en diseño web tradicional.

También hay que resaltar, que alguna de las transiciones no se ve correctamente con algunas versiones antiguas de Android. En cualquier caso, es obvio que tanto los navegadores de Smartphone como los tradicionales, tendrán que acabar “tragándose” esta tecnología tarde o temprano.

Los seis efectos de los que os hablo, son los siguientes:

1. Slid – La página actual se desplaza hacia la izquierda a la vez que entra desde la derecha la página nueva.
2. Pop – La página nueva se abre sobra la antigua en forma de pop-up pero ocupando todo el espacio.
3. Slidup – La página nueva aparece desde abajo, desplazándose hasta ocupar toda la pantalla.
4. Slidedown – La página nueva aparece desde arriba y se desplaza hacia abajo ocupando la pantalla.
5. Fade – La pantalla nueva se monta sobre la actual con una transición de cambio de opacidad.
6. Flip – El más espectacular. Esta transición entre pantallas simula un giro de 180º de la página, simulando que la nueva es el dorso de la que teníamos.

La forma de hacer los enlaces es igual de sencilla que en el capítulo anterior, basta con añadir la etiqueta data-transition y asignarle el tipo de transición que deseamos conseguir.

<a href=”#page2″ data-transition=”pop”>page 2</a>

Para volver atrás desde la página destino, lo que hacemos es realizar el mismo efecto que nos ha traído pero en sentido contrario, y esto lo conseguimos con la etiqueta data-direction=”reverse”

En el siguiente código CSS podemos ver cómo se establecen los datos para definir los distintos estilos. Como vemos se define tanto el “in” como el “out”.

.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: slideinfromright;
}
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
}
@-webkit-keyframes slideinfromright {
from { -webkit-transform: translateX(100%); } to { -webkit-transform: translateX(0); }
}
@-webkit-keyframes slideouttoleft { from { -webkit-transform: translateX(0); } to { -webkit-transform: translateX(-100%); }
}

Si existe la posibilidad de definir la dirección inversa del movimiento, lo haremos en la CSS como “out”.

Tenemos la posibilidad también de definir el tiempo de la transición, aquí vemos cómo:

.in, .out { -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 350ms; }

En el ejemplo que os dejo para ver y descargar, podréis ver que además de los atributos explicados en el tutorial I y en este, aparecen otros como el data-role=”button”, en el que lo que conseguimos es dar a un hipervínculo, aspecto de botón.

Como respaso, os indico a continuación todos los que aparecen y su misión.

• data-role:  define el comportamiento de una etiqueta.

• data-role=”page” id=”pagina1″ : definimos el div que contiene a la página1 y le asignamos un id
• data-role=”header” : definimos el div que va a contener la cabecera de la página
• data-role=”content” : definimos el div en el que va a estar el contenido de la página
• data-role=”footer” : definimos el div que contiene el pie de página
• data-role=”button” : definimos el aspecto que va a tener el enlace, en este caso tipo button

• data-transition: podemos utilizar esta etiqueta con los 6 tipos distintos de transición.

• data-transition=”slide”
• data-transition=”slideup”
• data-transition=”slidedown”
• data-transition=”pop”
• data-transition=”fade”
• data-transition=”flip”

• data-theme: cambia el color. En la página2, vemos cómo cambia el color de fondo en el data-role=”content” y el el botón data-role=”button”.

Si necesitáis más documentación para profundizar sobre jQuery Mobile, tenéis toda la información en http://jquerymobile.com/

• Más información relacionada con jQuery Mobile