Micro-interacciones multimedia. La diferencia está en los detalles

Podríamos definir a las micro-interacciones como acciones simples y pequeños momentos de intercambio entre el usuario y la interfaz. Provocan en el usuario una respuesta inesperada, poco intrusiva, le sorprenden, facilitan la comprensión y, en conjunto, mejoran su experiencia.

Beneficios:

  • Son útiles, funcionales. Es su objetivo principal, de no ser así, es mejor prescindir de ellas.
  • Sorprenden al usuario. Le tiene que producir una sensación agradable, nada molesto.
  • Mejoran el uso de la interfaz.
  • Animan al usuario a seguir navegando.
  • Deben de ser intuitivas y de fácil comprensión.

Su uso debe ser elegante, moderado y armonioso. No consiste en subir al usuario en una montaña rusa. Hay que concebirlas en conjunto, es decir, como pequeños elementos que funcionan en grupo y que buscan una experiencia de navegación optimizada y “diferente”.

Gracias a ellas podemos aportar el elemento diferenciador a nuestras aplicaciones y crear un vínculo con el usuario más allá de la utilidad.

“La diferencia entre un buen producto y un gran producto, son sus detalles”

Existe diferentes tipos de micro-interacciones: Gestuales, de navegación, de lectura, de conexión con el usuario, sociales, para formularios, persuasivos, hover, multimedia….

A continuación, podemos ver unos ejemplos de micro-interacciones multimedia, en los que el usuario descubrirá más información (texto, redes sociales, formatos para descarga, compartir) con un simple “hover” sobre la imagenUtilizando el mismo patrón para un elemento común, el usuario sabrá como proceder cada vez que vuelva a ver una imagen dentro de un mismo site.

Son micro-interacciones sutiles, sencillas, limpias y elegantes que aportan un plus al usuario. “Menos, es más” 

 

 

 

 

 

 

 

En los siguientes enlaces podemos ver recursos similares para inspirarnos:

Plugins para Sublime – Gestiona los ToDo con PlainTasks

Sublime text es el editor de texto preferido en Babel Creativa. Podemos sacarle un poquito mas de partido. Existen un montón de plugins cuyo objetivo es hacernos la vida más fácil, colorear código, autocompletar… y también, por ejemplo, tener un listado de ToDo’s que podemos integrar con nuestro workflow para completar el checklist de SEO o accesibilidad.

Para instalarlo sólo tenemos que tener instalado previamente el Package Control, que se encarga de gestionar los plugins. Seguimos dos pasos muy sencillos:

  1. Abrimos la consola de sublime con View > Show console y pegamos el código que podemos encontrar aquí, según nuestra versión de sublime: https://packagecontrol.io/installation#st3
  2. Una vez instalado con pulsar ctrl + shift + P, seleccionamos “install package” y buscamos por el nombre el plugin que queramos instalar.

 

PlainTasks

Lo interesante de PlainTasks es que podemos organizar una lista de ToDo’s interactiva dentro de nuestro propio proyecto en sublime y poder gestionarla desde el mismo programa. Éste vídeo lo explica mejor:

Sublime Plugin: Plain tasks from Smashing Editorial on Vimeo.

Lo único que tenemos que hacer es crear un nuevo archivo con extensión .todo y ya tomará el formato de nuestra nueva lista. Para crear nuevos items es tan sencillo como ctrl + i, los títulos se interpretarán como cualquier línea que acabe en dos puntos (:) – para una guía completa y tutorial para crear y gestionar la lista podemos consultar preferences > package settings > Plaintasks > tutorial

 

Crear un proyecto con IONIC

¿Qué es ionic?

  • Framework open source basado en HTML5, CSS y JS para el desarrollo de aplicaciones híbridas.
  • Está construida con Sass y optimizado con AngularJS.
  • Trabaja bajo Apache Cordova.

¿Por qué usar ionic?

  •  Es sencillo, limpio y funcional.
  •  Está construido para ser rápido gracias a las aceleraciones de transiciones por hardware, la no utilización de jQuery y la mínima manipulación del DOM, además de su arquitectura sólida gracias a AngularJS.
  •  Está basado en los kit de desarrollo de software nativos más populares, por lo que si ya se ha trabajado con aplicaciones nativas, será fácil de entender.
  •  Cuenta con un potente CLI con el que se puede crear, probar, construir o compilar fácilmente las aplicaciones desarrolladas.

Instalar Ionic:

Para poder instalar Ionic necesitamos NPM (node package manager), gestor de paquetes de nodeJS que permite instalar librerías y enlazarlas o descargar programas de js.

INSTALACIÓN DE NODEJS:

  1.  Ir al sitio oficial : https://nodejs.org/en/
  2.  Descargar la versión estable: en este caso V.4.4.4 LTS
  3.  Seguir los pasos del instalador. En el caso de windows, se descarga el instalador, una archivo con extensión msi.

Guía de instalción en iOS:
https://changelog.com/install-node-js-with-homebrew-on-os-x/

Una vez instalado, ejecutaremos en la consola:

Windows:

$ npm i -g cordova ionic

iOs:

$ sudo npm install -g cordova

Con este comando instalaremos Ionic y Apache Cordova, componentes necesarios para comenzar.

Para empezar con la app, ionic ofrece tres esqueletos básicos sobre los que trabajar:

– Blank page: $ionic start myApp blank
– Menú inferior de navegación por tabs: $ionic start myApp tabs
– Página con sidebar menu: $ionic start myApp sidemenu

(myApp -> nombre que tendrá la aplicación. )

 

initialPages

Cuando vamos a ejecutar cualquier comando, tenemos que ir siempre a la carpeta directorio donde queremos que se realice la acción, en este caso nuestra App. Para ir a cualquier carpeta hay que ejecutar en la consola cd + ‘ruta’, por lo que en este caso, para crear la aplicación ejecutaremos dos comandos:

 cd 'ruta carpeta directorio'
 ionic start BBC tabs

Tras finalizar la instalación de nuestra app, podremos ejecutarla para ver el resultado desde la terminal ejecutando:

 cd 'directorio de mi App'

(hay que tener en cuenta que tras la instalación estaremos en la carpeta contenedora del proyecto, por lo tanto, tendremos que entrar dentro de la carpeta myApp, en este caso BBC)

 $ionic serve --lab

(se levantará el navegador con simulación iOS y android) / $ionic serve (levanta el navegador con la aplicación, sin simulación)

firstUp

Para comprobar que todo está correcto, en el directorio de la App, encontraremos una nueva estructura de carpetas:

estructura de carpetas

Flexbox: css3 layout

Flexbox es un nuevo layout de CSS3. Se ha creado para mejorar la alineación, dirección y orden de los elementos incluso cuando tienen un tamaño variable o indefinido. La principal característica del contenedor flex es su capacidad de modificar la anchura y altura de sus hijos para llenar el espacio disponible de la mejor manera posible en cada resolución de pantalla.

El algoritmo de flexbox está basado en direccionalidad a diferencia de block o inline, que están basados en horizontalidad y verticalidad.

Voy a utilizar de referencia el W3C y un artículo de scotch.io

Podemos revisar la compatibilidad con navegadores con CanIUse

 

Lo básico

Modelo flexbox. El layout flex está constituído por un contenedor padre llamado flex container y sus hijos inmediatos, llamados flex items. Podemos ver el resto de elementos en este gráfico:

CSS3-Flexbox-Model

 

Uso

Para preparar un contenedor para que ejerza como flex container tenemos que declarar el display: flex; Automáticamente todos sus hijos se convierten en flex items. Un flexbox item puede ser a su vez un flex container si así lo identificamos, por lo que se pueden anidar infinitamente.

Propiedades del contenedor

flex-direction

Esta propiedad especifica como los flex items se colocan en el flex container, definiendo el eje principal.
valores:

  • row (default)
  • row-reverse
  • column
  • column-reverse
flexbox-flex-direction-row

flex-direction: row;

flexbox-flex-direction-row-reverse

flex-direction: row-reverse;

flexbox-flex-direction-column

flex-direction: column;

flexbox-flex-direction-column-reverse

flex-direction: column-reverse;

flex-wrap

El wrap define si queremos que el contenido se mantenga en una sola linea o si fluya en varias.
valores:

  • wrap
  • nowrap (default)
  • wrap-reverse
flexbox-flex-wrap-nowrap

flex-wrap: nowrap;

flexbox-flex-wrap-wrap

flex-wrap: wrap;

flexbox-flex-wrap-wrap-reverse

flex-wrap: wrap-reverse;

flex-flow

Unifica flex-direction y flex-wrap en una sola propiedad. Toma los mismos valores de estas propiedades por separado. Primero se define el flex-direction y luego el flex-wrap. Se recomienda que se utilice este método mejor que declarar los otros dos por separado.

justify-content

Alinea los flex items a lo largo del eje principal del flex container. Ayuda a distribuir el espacio libre sobrante en los casos en los que los elementos de una linea son fijos o si son flexibles pero han alcanzado su limite máximo.

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around
flexbox-justify-content-flex-start

justify-content: flex-start;

flexbox-justify-content-flex-end

justify-content: flex-end;

flexbox-justify-content-center

justify-content: center;

flexbox-justify-content-space-around

justify-content: space-around;

flexbox-justify-content-space-between

justify-content: space-between;

flex-align

Funciona para alinear elementos de la misma manera en que lo hace justify-content, pero esta vez para el eje secundario.

  • stretch (default)
  • flex-start
  • flex-end
  • flex-container
  • baseline
flexbox-align-items-stretch

align-items: stretch;

flexbox-align-items-flex-start

align-items: flex-start;

flexbox-align-items-flex-end

align-items: flex-end;

flexbox-align-items-center

align-items: center;

flexbox-align-items-baseline

align-items: baseline;

align-content

Alinea las filas interiores del flex-container (no tendrá efecto si solo tenemos una) de manera parecida a como actúa justify-content sobre los flex items.

  • stretch (default)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
flexbox-align-content-stretch

align-content: stretch;

flexbox-align-content-space-between

align-content: space-between;

flexbox-align-content-space-around

align-content: space-around;

flexbox-align-content-flex-start

align-content: flex-start;

flexbox-align-content-flex-end

align-content: flex-end;

flexbox-align-content-center

align-content: center;

Propiedades de los items

Order

Define el orden en el que aparecen los flex items. Por ejemplo utilizaremos order: -1; cuando queramos asegurarnos que ese item aparece el primero. Se utilizan numerales, sin unidades. Además, cuando varios items comparten numeral, el orden de aparición será el del html.
Nota sobre accesibilidad. Hay que tener en cuenta que la reordenación solo va a tener efecto a nivel estético, y que por tanto otras maneras de leer nuestro código van a interpretar el orden original del html. Es importante tenerlo en cuenta para que no afecte a la legibilidad de la página y su accesibilidad.

flexbox-order

flex-grow

Define el factor de crecimiento. En concreto cuánto crecerá en relación con el resto de sus hermanos, cuando haya espacio disponible.

flexbox-flex-grow-1

Cuando los numerales coinciden creceran de igual manera.

flexbox-flex-grow-2

El segundo elemento crece tres veces mas con respecto al resto de elementos con el espacio positivo que se va generando en el contenedor.

flex-shrink

Lo opuesto a flex-grow. Cuánto se encojerá en relación con el resto de items cuando el espacio empiece a faltar. No se pueden usar números negativos.  Por defecto todos los elementos se encojeran de manera solidaria, pero si utilizamos el flex-shrink: 0; ese elemento mantendrá su tamaño original.

flexbox-flex-shrink

 

flex-basis

Utiliza los mismos valores que width y height (en función de si estamos en row o en column)  y especifica el tamaño inicial de los flex item, antes de que el espacio libre se distribuya. Al reducir a una variable el “ancho” en función de la orientación de nuestro display, no hace falta cambiarlo si decidimos sustituir columna por fila.

flexbox-flex-basis

 

flex

Sería la propiedad que aglutina flex-grow, flex-shrink y flex-basis, por ese orden.

Además de todas las combinaciones posibles con esos valores, tendríamos los equivalentes a auto y a none, además del valor default:

flex: 0 1 auto; (default)

flex: 1 1 auto; (auto)

flex: 0 0 auto; (none)

align-self

sobreescribe el efecto de align-items para el elemento al que estemos apuntando. Toma sus mismos valores. El “auto” como valor por defecto anula el align-self para que herede el del padre; Si no estuviera definido, su valor sería como el de stretch.

  • stretch
  • auto (default)
  • flex-start
  • flex-end
  • center
  • baseline

flexbox-align-self

 

Info interesante

Elementos colapsados

Con la orden visibility: collapse; se convierte en un flex item colapsado, el elemento sale del flujo, ya no existe. Pero deja un hueco de su presencia. Se recomienda su uso sobre todo cuando se colpase y abra de manera dinámica, para evitar bailes en el renderizado. Si lo que se pretende es ocultar el elemento completamente se recomienda el uso de display: none;

float, clear y vertical-align no tiene ningún efecto.

No resultan en ningún tipo de efecto sobre un elemento flex, no lo saca del flujo ni lo altera de ninguna manera.

 

…Y para ampliar información

Tutoriales

Codrops – La información es muy parecida a la de este artículo, pero además tenemos pequeños playgrounds donde trastear con cada propiedad.

La rana – Una manera divertida de familiarizarnos con las diferentes propiedades de flexbox.

Bugs de flexbox

Flexbugs, comunidad donde se recopilan y resuelven los bugs conocidos de flexbox.

Ejemplos

Solved by flexbox – Ideas de uso y aprovechamiento de flexbox.

 

– Muchas gracias a Sandra por recopilar gran parte de este material.

Hamburger Menu. ¿De verdad es la mejor solución?

4cace66e9cf326e23b428770233e5918

En numerosas ocasiones nos encontramos con el debate sobre la efectividad y universalidad del menú hamburguesa. Este debate se amplía aún más cuando empezamos a verlo en resoluciones desktop, donde el espacio ya no es tan limitado y el recurso a este tipo de menú suele darse por un tema más estético que operativo.

Os dejo dos interesantes enlaces sobre este tema:

Disfruten de sus hamburguesas 😉

 

La ‘curiosidad’ del viernes – Relojes inteligentes y correos responsive

Después de unos viernes en los que os he dado margen para descansar de ‘curiosidades’ vuelvo a la carga.

ULTIMATE RESPONSIVE TEST

Este test es para los más curiosos. ¿Está tú página preparada para un ‘smart watch’? Te digo ya que no… pero, si quieres comprobarlo, he aquí un test.

reloj-smart

CERBERUS

Si te has vuelto loco preparando una newsletter, este recurso te va a encantar.

Cerberus ofrece algunas sólidas plantillas para hacer una newsletter que se vea bien en diferentes correos. Si no te sirve por completo, al menos te ayuda a empezar con buen pie.

cerberus

 

SCIENCE OF TYPOGRAPHY

Y la última curiosidad/recurso que pongo hoy es esta investigación tipográfica: ver cómo se comporta, su interlineado, su color.

typografia

 

SMASH ICONS

Está bien, está bien… no podía terminar así. Tenía que incluir estos iconos.

Me he encontrado con ellos navegando por la web y además de ser gratis (aún no os había puesto el ‘freebie’ del día) están muy bien diseñados.

smash-icons

 

Espero que os sean útiles.

La ‘curiosidad’ del viernes – Sonidos visuales, puntos codificados y repositorio css

Esta semana os traigo muchos cosas interesantes y curiosas. Le podéis dedicar horas  y os aseguro que merecerá la pena.

YUME – UNSEEN MUSIC

Esta página nos permite volvernos compositores por un día. Se recomienda verlo en Chrome.

Es hipnótico ver cómo, a partir de arrastrar los elementos, la apariencia de la página cambia. El sonido incrementa o disminuye cambiando el color, el movimiento, el lugar en el que te encuentras (puedes ir al cielo, al sol, al acantilado… ¿no sabes a qué me refiero? Ponte unos cascos y juega un rato con los controles y verás que lo que digo es cierto). La interfaz es muy sencilla e intuitiva ¡a qué estás esperando!.

yume

Y hoy, por ser viernes, una de recursos a la carta.

EXPERIMENTO PT 

“PT, an experiment on point, space, and form” es una página digna de ser vista. Recoge una serie de experimentos a partir de puntos. Sí, has leído bien, puntos.

William Ngan, su autor, explica es su gratificante artículo, el proceso creativo que lleva el experimento. Y ¿en qué consiste? Pues en utilizar un poco de programación, mucha imaginación y un poco de creatividad para conseguir unos efectos espectaculares: ya sea moviendo el cursor, cambiando el tamaño de la ventana…

Aviso a navegantes ¡es altamente adictivo!

pt

 

SLOGAN MAKER

¿Y ésto qué es? Bueno, pues ‘Slogan Maker’ es una página web que permite crear un eslogan a partir de una o varias palabras. Nosotros lo hemos intentando con Babel. Los resultados son divertidos. Puede ser útil para buscar inspiración. Al menos, te ríes un rato.

 

Slogan

 

LISTADO DE PALETAS DE COLOR y BLEND

Desde la página de Shopify han hecho una recolección de las herramientas online para generar paletas de color, muy jugosas. Os adjunto el enlace. Algunas son viejas conocidas, otras no tanto.

Y de paso, os dejo ésta otra web: Blend, que te permite jugar con los colores. Muy visual.

blend

STYLESHEETS

Esta repositorio es una maravilla. Recoge, en una sola URL, toda clase de consejos CSS: grids, transformaciones, experimentos, CSS3 y todo lo que se te puedan ocurrir.

stylesheet

 

Es un recurso muy útil y que va a llevarte al principio un poco de investigación, pero… todo esfuerzo tiene su recompensa.

PRÓXIMAMENTE EN LA ‘CURIOSIDAD’ DEL VIERNES…

Halloween se acerca peligrosamente. Y aunque a este paso lo acabaremos celebrando en Agosto, si necesitáis preparar algo para tan festiva ocasión más vale ir empezando. Recursos ‘free’ hay algunos muy curiosos por la web.  Cómo aún falta un poco, me voy a hacer de rogar. Si queréis que os ponga algunos que tengo debajo de la manga, dejadme un comentario al respecto, y el próximo viernes os incluyo algunos recursos. Si no, pues nada.

 

 

La ‘curiosidad’ del viernes – Hipervínculos, iconos con CSS y cómics

EL PODER DE LOS HIPERVÍNCULOS

Los hipervínculos son los que hacen que Internet sea Internet: una red de conexiones, de conocimiento. Aunque últimamente se ha diluido su importancia, y por eso, Murilo Mafra y Zeh Fernandes han decidido rendirle tributo con “La batalla del hiperlink”.

Las reglas del juego establecen que cada día dos hiperlinks (cada uno ha escogido uno) compiten por la victoria: ser el hipervínculo más votado. El tema al que dirige el vínculo tiene que estar relacionado con la letra del día y hay 27 rondas (una por letra).  La letra elegida es diseñada por un ilustrador diferente cada día.

letras

 

ICONOS SOLO CON CSS

¿Aburrido de tener siempre los mismos iconos en tu diseño? Si necesitas un pequeño cambio puedes empezar utilizando otro recurso: el propio CSS.

En la página de “Truth Labs” nos dan unas pautas, de cómo hacer algunos iconos siguiendo estos sencillos pasos.

iconos

 

MARIO vs WARIO

Para los amantes del cómic este enlace será una joya divertida. Y para los que no lo sean, pues la página al menos está hecha de una manera original y precisa.

Los héroes y villanos de los cómics son ahora presentados ¡con aspecto de Mario Bros! ( Por ejemplo: “Mario” como “Catwoman” no tiene desperdicio).

capi-skull

También tengo bajo la manga algunas novedades de Codepen… pero me voy a hacer de rogar hasta el próximo viernes.

La ‘parida’ curiosa del viernes

En esta ocasión, no se trata de una tabla química, ni de una infografía, sino de un test en toda regla.

¿Cuánto sabes de CSS?

Tranquilos todos, que aquí nadie va a puntuarte, solo vas a poder repasar conceptos de CSS que igual tienes un poco oxidados. En el fondo, sé que no, sé que te lo sabes todo… cómo yo…  (guiño guiño, dedos cruzados).

Pero si tienes tiempo y curiosidad, anímate a ponerte a prueba…

http://sixrevisions.com/css/css-questions/

La ‘curiosidad’ del viernes

Si creíamos que la tabla periódica era solo para la asignatura de ‘Física y Química’, no podíamos estar más equivocados. Aquí mostramos una adaptación con su uso orientado al diseño.

Toda un experiencia…

https://s3.amazonaws.com/www-assets.invisionapp.com/Periodic-Table-of-Design.png