Desarrollo web: Cómo crear una interfaz de usuario personalizada

Veamos cómo desarrollar controles UI multipltaformas para crear únicas e interactivas experiencias en las páginas web.

Los controles UI personalizados son difíciles de implementar y pueden tener un comportamiento inconstante en diferentes dispositivos. Ejecutar diseños personalizados requiere de un conocimiento bastante profundo de diseño de páginas web, desarrollo web y posicionamiento con CSS, soporte de navegador y una buena compresión de JavaScript.

Combinar todo esto en una interfaz de usuario atrevida puede ser tedioso, agobiante y arduo. En este artículo, te demostraremos un enfoque UI para un documental web interactivo, estableceremos un código personalizado ético para esta UI y, con suerte, te demostraremos cómo combinar JS, CSS y HTML para crear una interfaz original.

En este ejemplo, se usará una interfaz original que fue desarrollada para un documental llamada Facing North. La interacción principal incluye un menú rotativo que aparece gradualmente cuando se toca la pantalla o el mouse se mueve durante la transmisión del video y se desvanece luego de unos segundos. Facing North consiste de 18 videos que pueden ser vistos al arrastrar el compás en cualquier dirección con el mouse o tu dedo, dependiendo el dispositivo.

El enfoque: HTML y CSS

Crear controles UI personalizados requiere de un buen conocimiento de diseño y posicionamiento CSS. Concentrase en el diseño, las animaciones y los seudoclases produce interfaces de usuario efectivas y responsive. Este es el HTML para el menú compás de Facing North.

Dieciocho de estos fueron creados por JavaScript:

El elemento .containter añade la capa negra transparente y puede ser redimensionado usando vh y vw. En la actualidad, Safari y iOS tiene algunos problemas de compatibilidad, así que es mejor recalcular el CSS con JavaScript onresize o usar anchos %. El diseño incluye un «rango» horizontal a lo largo de la pantalla mediana, algo que puede lograrse con un seudoelemento CSS.

El elemento .compass es resaltado con un borde circular blanco. El .compass debe ser lo suficientemente pequeño para encajar en la pantalla, debe estar centrado exactamente en el .container y debe ser perfectamente circular. Es posible mantener un marco cuadrado al usar un seudoelemento ::after que tenga padding-top:100%.

Los elementos .orbiter son simplemente etiquetas <img> que «orbitan» alrededor del compás. Estos se crearon en nuestro JavaScript, y usando algo de matemáticas, se pudo asegurar que cualquier número de órbitas se distribuyan uniformemente. El elemento .north-indicator es colocado en la parte superior de compás, denotando el norte. El problema principal en la UI son las transformaciones aplicadas a cada elemento .orbiter. Eso es manejado en el JavaScript.

La unión: JavaScript

Existen algunos componentes importantes del JavaScript para la interfaz de usuario compás de Facing North:

• Un prototipo (JavaScript «class») para manejar la lógica de la UI compás entera.
• Un prototipo (JavaScript «class» para manejar la lógica de cada órbita.
• Códigos Polyfill (para ayudar a brindar asistencia a navegadores más antiguos)

El JavaScript inicia onload con:

En app(), existe un código polyfill que se añadió para el requestAnimation Frame (), se creó un nuevo caso de la clase Compás y se acudió a getVendorPrefix() para recuperar prefijos CSS del navegador (por ejemplo: -webkit-, -ms o -moz-) El resto de JavaScript funciona a través del constructor new Compass (), que toma el número de órbitas para crear y distribuir la UI compás y una referencia al elemento DOM de la UI compás.

El constructor del compás es bastante simple:

La mayoría de la animación e interacción es manejada por

handlerInteractionEvent(). addOrbiter() solo crea un número de objetos orbiter() y los almacena en un bandeja:

El constructor Orbiter(), en la versión en vivo, obtiene datos JSON de un servidor. La siguiente imagen es solo un ejemplo creado para este artículo, que crea etiquetas <img> con JavaScript:

Compass.rotate() es la función que se usó para animar la ubicación de cada Orbiter () durante la interacción:

Orbiter.rotate() tiene algunas cosas que valen la pena notar aquí:

1. i: el punto en su lugar (un integrador entre 0 a 17 como si fuesen 18 objetos Orbiter())

2. self.CompassElement.offsetWidth: el diámetro del compás en píxeles.

3. delta || 0 : la rotación actual (en grados entre 0 y 359) para establecer cada Orbiter(). Orbiter()s que tengan una i más grande que la o serán rotados más para asegurar una distribución uniforme.

4. ~~(360 / self.orbiters-lenght): los grados con los cuales extender cada Orbiter(). Por ejemplo, para 18 orbiters, esto será 36/18 o 20° ~~ rondas por número decimal al integrador más cercano.

El Orbiter.setTransform() puede ser encontrado en línea en GitHub repo.

El resto del constructor Compass() incluye iniciar funciones de mouse y táctiles.

1. onTouchAndMouseStart() : activado en mousedown o touchstart cuando inicia la interacción UI compás.

2. onTouchAndMouseEnd() : activado en mouseup o touchend cuando la interacción ha terminado y detiene la animación del UI compás.

3. handleDrag() : activado en mousemove o touchend cuando la UI compás es «arrastrada» y anima la UI compás a que «siga» los movimientos del mouse o dedo del usuario.

Para programar estas funciones, puedes encontrar onTouchAndMouseStart(), handlerDrag() y onTouchAndMouseend() en Githun repo.

Conclusión

A través de un enfoque estratégico, se pudo crear un patrón de interfaz reusable. No tomó muchos códigos extra procesar dos modelos de eventos (mouse y táctil). Crear todas las animaciones posibles a con CSS ayudó a optimizar la renderización, y los eventos «drag» fueron procesador solo cuando los eventos «start» iniciaron para optimizar los recursos de las CPU.

Este trabajo no hubiera sido posible de no sin la investigación, exploración y la creación de propotipos. La matemática fue la parte más difícil, pero la más gratificante de la interfaz de usuario.

Staff Creativa siempre busca las mejores tecnologías para aplicarlas en el desarrollo web de la página web de tu empresa. Confía en nosotros.

Este artículo fue originalmente publicado en Creative Bloq, y ha sido traducido y adaptado al español por Staff Creativa, agencia de marketing digital en Lima, Perú. Si encuentras contenido online en inglés sobre diseño de páginas web, gestión de imagen corporativa, marketing digital o packaging, no dudes en contactarnos. Nos encargaremos de traducirlo y publicarlo, y te avisaremos!