2

Agrega 3D Touch y Force Touch a tus proyectos web

16979Puntos

hace 6 años

La experiencia de usuario en móviles ha pasado de ser algo secundario a ser el principal canal de interacción con nuestro producto: mobile first, responsive design, keep it simple, etc, son un must a la hora de desarrollar un sitio. Era de esperarse que un nuevo nivel de interacción surgiera por primera vez pensado 100% para dispositivos móviles. Su nombre: 3D Touch. 3dTouch-1 Se trata de medir la presión que el usuario hace sobre la pantalla para agregar funciones que dependen enteramente de esto. Pero, ¿qué estamos solucionando? En realidad, estamos agregando un nivel adicional de contexto a cada elemento en pantalla; puede ser un preview, un menú o hasta una acción que modifique todo. Al final: "El contenido es el rey, pero el contexto es Dios"3dTouch-2 La intención de este tutorial es llevar esta interacción a cualquier proyecto web que tengas. Y esto es muy sencillo gracias a una nueva librería llamada PressureJS.

Dispositivos Compatibles

La librería por el momento sólo soporta los siguientes navegadores y hardware:
  • iPhone 6s (safari)
  • iPhone 6s Plus (safari)
  • MacBook 2015 (safari)
  • 13" MacBook Pro 2015 (safari)
  • 15" MacBook Pro 2015 (safari)
  • Magic Trackpad 2 (safari)
Pero prometen soporte para más dispositivos cuando sean compatibles.

Requerimientos

En este ejemplo vamos a usar Bower, aunque podemos usar NPM o simplemente bajar el archivo pressure.js. Pero, para este caso, primero necesitamos tener instalado: Ahora, instalamos Bower de manera global con el siguiente comando: [js] npm install -g bower [/js]

Preparando el proyecto

Primero creamos una carpeta donde estará nuestro proyecto. Puede ser PressureJS. Después, debemos inicializar nuestro proyecto con Bower. Para ello, debemos estar situados en la carpeta del proyecto desde la terminal y ejecutar el comando: [js] bower init [/js] Nos pedirá una serie de datos como name, description, main file, etc. No te preocupes tanto por ello, estos datos son importantes al momento de publicar el proyecto en Bower; pero irrelevantes para este caso de uso. Te comparto los datos que se proponen para configurar este proyecto: 3 Ahora, instalamos pressure.js mediante Bower: [js] bower install pressure --save [/js] Para verificar que todo va bien, notarás que tienes una nueva carpeta llamada bower_components4

Creando nuestros elementos

Vamos a crear un documento HTML básico y hacer el llamado de esa librería a nuestro proyecto. Sólo necesitamos indicar la ruta en nuestro index.html, de la siguiente forma: [js] PressureJS