Cómo Crear un Prototipo de Aplicación Usando CSS y JavaScript

() translation by (you can also view the original English article)

La animación es realmente una de las mejores características en llegar a CSS en mucho tiempo. Después de todo, como nos hemos dado cuenta, el movimiento puede mejorar la experiencia de usuario y motivar acciones en donde los contextos estáticos se quedan cortos. En este tutorial vamos a construir un prototipo para una aplicación usando animaciones CSS y un toque de JavaScript.

Lo Que Estamos Creando

Para este ejercicio desarrollaremos un prototipo para una aplicación que permite a los suscriptores seguirse unos a otros. Inicialmente, cargaremos una lista de usuarios con sus nombres debajo de cada avatar correspondiente. Esos avatares, cuando se les da clic, dispararán un modal conteniendo un botón "seguir" e información adicional perteneciente a cada usuario individual.

Para propósitos de demostración cargaremos 30 usuarios usando un servicio llamado Generador Aleatorio de Usuarios. Su API no solo proporciona imágenes aleatorias para usuarios, sino que también proporciona datos aleatorios como nombres, direcciones, correos electrónicos y mucho más.

1. Establece el Escenario

He discutido opciones anteriormente para construir conceptos de prototipo, pero para este artículo construiremos un prototipo con código real. Para esta tarea estaremos usando Marvel Devices; una librería de código abierto que contiene dispositivos móviles de CSS puro para mostrar prototipos típicamente hechos con Marvel App.

Para comenzar incluye devices.min.css en la parte superior de tu documento, regresa a la demostración y selecciona la combinación que quieres, después, copia y pega el HTML generado en tu proyecto.

2. Carga los Usuarios

Con el CSS obtenido para nuestro dispositivo de demostración (Nexus 5) es tiempo de trabajar en cargar los usuarios de nuestra aplicación.

<div class="marvel-device nexus5">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="screen">
        <h3 class="title">Results</h3>
        <ul class="users"></ul>
    </div>
</div>

Los usuarios serán cargados como elementos de lista e inyectados en la lista sin orden .users. Esta es la base inicial, pero necesitamos usar JavaScript para comunicar con la API de usuario aleatorio para poder insertar estos elementos de lista. Para hacer esta petición usaremos JavaScript plano estilo ES6.

1	let request = new XMLHttpRequest();

El request es la variable que contendrá nuestra petición AJAX, pero requiere una URL con la cuál conectar.

1	request.open('GET', 'https://randomuser.me/api/?results=30', true);

El método open regresará los datos de la API desde la URL y los parámetros que establecimos. Hay muchos otros parámetros para usar, pero para esta demostración solo regresaremos 30 resultados. Ahora que tenemos nuestra URL en su lugar y la petición enviada, regresemos esa información.

// Utility for DOM selection
function select(s) {
  return document.querySelector(s);
}

// Store for referencing
const users = select('.users'),

// AJAX Request
request.onload = function() {
  if (request.status >= 200 && request.status < 400) {

    let data = JSON.parse(request.responseText),
        l    = data.results.length;

    for(var i = 0; i < l; i++) {
        // data results
        console.log(data.results[i]);
    }

  } else {
    alert('We reached our target server, but there was an error');
  }
};

request.onerror = function() {
  alert('There was a connection error of some sort')
};

// Send Ajax call
request.send();

La petición entera está ahora en posición. Abriendo la consola verás todos los resultados de los datos proporcionados listados. Este es un buen comienzo, pero definitivamente necesitamos hacer más que solo registrar la salida a la consola.

3. Inyectar Datos de Usuario

Para esta siguiente parte, inyectaremos marcado usando los datos que tenemos disponibles de la API de usuarios aleatorios.

users.insertAdjacentHTML('beforeend', '<li><img src="'+ 
                         data.results[i].picture.medium +'" data-pic="'+ 
                         data.results[i].picture.large +'" data-name="'+ 
                         data.results[i].name.first + ' ' + 
                         data.results[i].name.last + '" data-email="'+ 
                         data.results[i].email +'"><span class="user-name">'+ 
                         data.results[i].name.first +'</span></li>');

Las líneas de código de arriba serán colocadas en el ciclo creado anteriormente que estaba registrando datos a la consola. Como se mencionó, tenemos unas cuantas opciones en relación a los datos adjuntos a los objetos de usuario, como un primer nombre, correo electrónico y tamaños de avatar. El tamaño mediano de imagen será usado para mostrar inicialmente, mientras que el tamaño grande será usado para nuestro modal que es disparado cuando el avatar miniatura es presionado. Todas estas piezas de información serán almacenadas dentro de atributos de datos para que podamos recogerlos según sea necesario.

4. Detecta la Posición de Avatar

Vamos a construir otro componente para esta demostración; un modal es disparado desde el punto de ejecución (ej. dando clic sobre un avatar). Necesitaremos a nuestro querido amigo matemáticas para realmente determinar de donde se expandirá el modal.

var transOriginNames = {
  webkitTransformOrigin : 'webkitTransformOrigin',
  MozTransformOrigin    : 'MozTransformOrigin',
  msTransformOrigin     : 'msTransformOrigin',
  transformOrigin       : 'transformOrigin'
};

users.addEventListener('click', function(e) {
  let target        = e.target,
      target_coords = target.getBoundingClientRect();

  if(target.nodeName === 'IMG') {
    for(var name in transOriginNames) {
      modal.style[name] = (target.offsetLeft + (target_coords.width/2)) +'px ' + ((target.offsetTop + (target_coords.height/2)) - screen_scroll.scrollTop) + 'px';
    }
  }
});

Para lograr esta expansión del modal desde el punto de ejecución necesitamos asegurar que nuestro transform-origin es correcto para poder escalar apropiadamente el modal. Estoy usando un object para contener todos nuestros prefijos transform-origin ya que estamos usando JavaScript para establecerlos y también necesitamos asegurar que todas las bases están cubiertas para navegadores que no soportan el estándar.

Toma nota de las matemáticas requeridas para determinar los valores transform-origin.

1	modal.style[name] = (target.offsetLeft + (target_coords.width/2)) +'px ' + ((target.offsetTop + (target_coords.height/2)) - screen_scroll.scrollTop) + 'px';

El diagrama de arriba explica visualmente cómo se están calculando las matemáticas. Para poder determinar la ubicación correcta usamos offsetLeft y offsetTop más la mitad de width y height respectivamente para encontrar el centro exacto del avatar. scrollTop también es muy importante porque 30 usuarios desbordarán los límites de la pantalla del dispositivo y offsetTop necesitará tener este valor restado para determinar la distancia apropiada de la parte superior de la pantalla. Todos los valores en el diagrama de arriba son proporcionados por nuestro amigo getBoundingClientRect.

Registrando target_coords a la consola puedes ver todas las dimensiones y valores que requerimos para hacer una suposición apropiada. Estos valores con relación a width y height siempre cambiarán dependiendo de la posición del avatar dentro de la pantalla del dispositivo.

5. Anima el Modal

Con las coordenadas del avatar prepuestas y listas para recibir nuestro evento clic, es tiempo de agregar el movimiento modal que mostrará el perfil de usuario.

.modal {
  transform: scale(0) translateZ(0);
  transition-duration: 320ms;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-property: transform, opacity;
  opacity: 0;
}

El código de arriba está reducido de la demostración para mostrar las propiedades exactas de movimiento que vamos a estar usando. Estamos escondiendo inicialmente usando opacity y scale.

Ahora es tiempo de definir las propiedades CSS que manejarán el estado activo para el movimiento del modal.

1	.screen.active .modal {
2	transform: scale(1) translateZ(0);
3	opacity: 1;
4	}

Usando JavaScript vamos a intercalar una clase active en screen. En las líneas de arriba estamos revisando lo que establecimos anteriormente. Así es como creamos el efecto de expansión del modal. Es un estilo muy de Google Material Design que ayuda desde interrumpir el comportamiento cognitivo y rápidamente responde a la entrada del usuario de manera precisa haciendo responsivo al movimiento. Este estilo también confirma la entrada de usuario expandiendo inmediatamente hacia afuera del punto de contacto.

6. Dale Movimiento a los Avatares

Durante la carga crearemos un efecto de escalamiento haciendo la secuencia menos estática y más responsiva. Cada avatar escalará en un intervalo diferente que el siguiente y para eso usaremos CSS.

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes expand-out {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.users li {
    opacity: 0;
}

Inicialmente ocultaremos los usuarios y después intercalaremos una clase show una vez que la petición AJAX esté lista. También he incluido nuestros fotogramas que transformarán nuestras propiedades a los valores correctos. Usaremos estos fotogramas en el siguiente pedazo de código que establece el movimiento en reproducción.

$user-count: 30;
$duration: 200ms;
$stagger_delay: 0.0125s;
$easing: cubic-bezier(.66, .14, .83, .67);

.users.show {
  li {
    animation-duration: $duration;
    animation-name: fade-in;
    animation-fill-mode: both;
    animation-timing-function: $easing;
    opacity: 1;

    img {
      animation-duration: $duration;
      animation-name: expand-out;
      animation-fill-mode: both;
      animation-timing-function: $easing;
    }

    @for $i from 1 through $user-count {
      &:nth-of-type(#{$i}) {
        animation-delay: ($stagger_delay * $i);
        img {
          animation-delay: ($stagger_delay * $i);
        }
      }
    }
  }
}

Para ayudar con las matemáticas estoy usando ciclos Sass y variables para contener la cuenta de nuestros usuarios que también está atada con nuestros resultados JS desde la llamada de API de usuario aleatorio. El ciclo es la clave de todo el rompecabezas ya que ciclará sobre nuestra cuenta de usuarios y agregará el valor que definimos en una variable.

Arriba está nuestro resultado con la secuencia final de animación de avatar. Recuerda que solo estamos usando animaciones de fotograma en CSS y usando JavaScript para intercalar la clase show una vez que los avatares son recuperados desde la API de usuario aleatorio.

Ideas de Cierre

Asegúrate de ver la demostración ya que ahí también hay elementos adicionales que agregan beneficios, tales como un cargador animado que mostrará mientras los usuarios está cargando y se remueve a el mismo una vez que los avatares están cargados.

Gracias a Shaw por su visión y esta toma Dribble usada para inspiración. Como siempre deja cualquier comentario abajo para discusión futura, ¡y dale a esta demostración algunos corazones en CodePen si quieres ver más como este!