Usar las herramientas de CSS y del diseño del navegador puede permitir visualizaciones asombrosas del contenido web. El uso de funciones web como filtros CSS, WebGL, video HTML5, SVG, lienzo y la evolución de tecnologías futuras, como regiones CSS, formas de CSS y filtros personalizados de CSS promete un panorama creativo enormemente expandido. Adobe tiene un largo historial de trabajo con creadores de contenido apasionados por el diseño y el diseño. Por lo tanto, aplica activamente este conocimiento en la Web con contribuciones a muchos estándares web en evolución.
Con la ayuda de National Geographic, usamos el contenido de su artículo titulado “Forest Giant” para crear un prototipo que mostraba cómo estas funciones pueden posibilitar un diseño web enriquecido y técnicas adaptables. Este artículo mostrará cómo construimos algunas características particularmente interesantes del sitio. Para hacer una breve descripción general, vale la pena mirar el siguiente video, en el que Christian Cantrell te muestra las distintas funciones del sitio.
Sutilezas del diseño
Lo que constituye un diseño excelente y las funciones detrás de él pueden ser sutiles, por lo que creamos una "superposición del editor" que destaca las funciones más notables. Para habilitar las marcas del editor, haz clic en la barra que se encuentra en la parte inferior del artículo.
Diseño independiente
En la Web actual, el diseño suele estar determinado por nuestro contenido con contenedores que se amplían verticalmente para ajustar el texto. Cuando se crean diseños complejos, los cambios en la copia o en otro contenido pueden tener un impacto no deseado en el diseño general, lo que provoca la necesidad de rediseñar el contenido en función de cambios inesperados. Con las regiones, podemos separar realmente nuestro contenido del diseño definiendo un elemento como nuestro contenido y, luego, especificando las partes del diseño por las que queremos que fluya ese contenido.
En el ejemplo de "Gigante del bosque", tenemos la historia contenida en un solo elemento. Luego, en toda la página, tenemos nuestro andamiaje de diseño, que consta de fotos y áreas de texto. Con CSS, definimos los elementos por los que queremos que fluya el contenido. Cuando la copia llega al final de un elemento, continúa con el siguiente en el orden del DOM. Esto nos permite ser realmente creativos con nuestras columnas, ya que las compensa y adapta su altura en función del diseño, sin tener que preocuparnos de si el texto se ajustará o superará la altura del elemento. También nos permite tener elementos dentro de nuestro diseño, como imágenes de ancho completo, mientras la historia sigue fluyendo a través de él.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
En el CSS anterior, crearemos un flujo con nombre llamado "story". El contenido de este flujo nombrado es el elemento con el ID de "storyContent". Luego, esto fluye por todos los elementos con el nombre de clase "story". Las regiones de CSS son una gran herramienta para el diseño responsivo que permite funciones como varias columnas y columnas desplazadas para un diseño enriquecido en pantallas grandes y, al mismo tiempo, se ajustan al diseño de una sola columna en pantallas más pequeñas. Con las regiones, también puedes establecer el tamaño de tu región con unidades responsivas, como vw o vh. Esto se puede usar para garantizar que las columnas no superen la altura del viewport en tu diseño, sin preocuparte de que el contenido se corte, ya que fluirá naturalmente al siguiente elemento de la cadena de regiones.
Gorras plegables
Las exclusiones de CSS nos permiten ajustar texto a formas irregulares o alrededor de ellas. Esto puede ser útil para floreces en el diseño, como las tapas desplegables. Las mayúsculas son una práctica de diseño común en la que la primera letra de una historia o capítulo se agranda, lo que permite que el resto del texto envuelva el contorno del personaje. Este efecto es muy similar al modo en que el contenido intercalado envuelve a los números de punto flotantes; sin embargo, con las exclusiones, ya no estamos restringidos a los cuadros rectangulares. Usando la forma externa en un número de punto flotante, podemos definir la geometría que permite que nuestro contenido se envuelva firmemente alrededor de la forma de nuestro personaje.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Esto creará una elipse que permitirá que el contenido envuelva la forma circular. Además, debido a que usamos unidades relativas para la forma, el cambio del tamaño del elemento se reflejará en el tamaño de la forma.
Formas
Junto con las mayúsculas, las exclusiones permiten ajustar el texto en las formas usando una forma interior. Usamos esta función en todo el sitio, especialmente con leyendas de imágenes grandes, y aprovechamos el espacio negativo de las fotos para enmarcar el texto. También nos permite ajustar texto a lo largo del contorno de otras imágenes y gráficos que emulan diseños que anteriormente eran muy difíciles de lograr en la Web.
Las formas también pueden funcionar con diseños adaptables mediante el uso de unidades relativas para definir tu forma. De esta manera, podemos crear formas que se estiren según el contenedor o el viewport, e incluso usar consultas de medios para cambiar por completo la forma o quitarla, ya que todo está definido en CSS. A continuación se muestra un ejemplo de un polígono que se usa dentro del sitio con los valores que definen los puntos:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
Texto equilibrado
El texto equilibrado es una función que mira todo el bloque de texto dentro de un elemento cuando se unen líneas, en lugar de unirlo palabra por palabra. Evita situaciones en las que tenemos una o dos palabras en una sola línea rompiendo las líneas de texto para lograr líneas de tamaño uniforme dentro de un elemento. Este nivel de control nos permite crear fácilmente bloques de texto atractivos, especialmente para segmentos cortos, como citas o subtítulos.
Aquí es exactamente donde utilizamos el texto equilibrado dentro del artículo. Debido a que esta función es un estándar que propone Adobe, usamos un polyfill creado por Randy Edmunds para lograr los mismos resultados. Esta función se observa mejor en los casos responsivos. Al cambiar el tamaño del navegador, notarás que el bloque continúa equilibrando el texto para generar líneas con aproximadamente el mismo ancho. Usar el polyfill de texto equilibrado es fácil, ya que es un complemento de jQuery, lo único que debemos hacer es aplicar “balanceText()” a un selector cuando cambie el diseño y obtendremos un texto bien equilibrado, que se verá de la siguiente manera:
$('.balance').balanceText();
Filtrar transiciones
Las transiciones son una forma importante de dirigir la atención del usuario y comunicar el estado de las cosas dentro de tu sitio. Con la opacidad y, más recientemente, las Transformaciones en 3D, hemos visto que se utilizan para crear transiciones y animaciones fluidas a medida que los usuarios se desplazan o interactúan con partes de tu sitio. Ahora tenemos filtros que pueden usarse para el mismo propósito.
En “Gig del bosque”, usamos filtros para desvanecerse de la escala de grises al color a medida que se visualizan algunas imágenes. Estos filtros se pueden combinar con opacidad o con otros filtros para crear transiciones y efectos de imagen complejos. Podemos usar el poder de los filtros personalizados para agregar efectos aún más dramáticos.
Los filtros personalizados se escriben con GLSL, el mismo lenguaje de sombreado que WebGL. Te permiten aplicar estos sombreadores a elementos del DOM a través de CSS, lo que habilita complejos efectos de combinación y distorsión 3D. En la parte inferior del sitio, cuando hagas clic en "Explore the President Tree", verás que la página se enrolla para revelar otra sección debajo. Este es solo un ejemplo de cómo los filtros personalizados pueden permitir transiciones enriquecidas entre contenido. La animación se puede lograr con transiciones de CSS. Sin embargo, si deseas usar animaciones o interacciones más sólidas que las que permiten las transiciones, puedes pasar valores a tu sombreador configurando el estilo con JavaScript, como se muestra a continuación. Esto puede permitirte tener un control más detallado sobre la aceleración o incluso permitir que los métodos de entrada del usuario manipulen el sombreador.
function applyCurl(value) {
$("#map").css("webkitFilter",
"custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+ " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+ " rotateY(0deg) rotateZ(0deg), curlPosition "
+ value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}
Nuestro filtro rasteriza el contenido como una textura en la GPU para aplicar el efecto. Por ello, debemos asegurarnos de quitarlo cuando termine; de lo contrario, es posible que nuestro contenido se vea borroso.
$("#map").css("webkitFilter", "none");
Los filtros personalizados de CSS permiten efectos interesantes como el ajuste de página, que parece una página girada en un libro real. Permiten que un desarrollador web programe efectos complejos en un lenguaje llamado GLSL y lo aplique al contenido web. Para obtener más información sobre los detalles de los filtros personalizados, todos esos parámetros y cómo usarlos, consulta este excelente instructivo.
Renderizar previamente las texturas en WebGL
La joya de este artículo fue la primera imagen completa de "El presidente", se cree que es el segundo árbol más grande del mundo por volumen. Esta imagen se creó uniendo cientos de fotos del árbol para obtener una imagen completa. Queríamos simular este proceso dividiendo la imagen en un montón de fotos pequeñas que se ubican para capturar la imagen completa. Esto se logró con WebGL, específicamente con la biblioteca de Three.js, que es un wrapper de API de nivel superior de WebGL.
Renderizar una gran cantidad de texturas puede causar rápidamente problemas de rendimiento cada vez que una nueva textura intenta dibujar en la pantalla, sin mencionar las solicitudes de red adicionales. Para reducir este tamaño, hicimos las texturas lo más grandes posible y las compensábamos para cada mosaico. Esta técnica suele denominarse mapeo de objetos y es común en el desarrollo de juegos. Como resultado, se obtuvieron tres texturas grandes para todo el árbol. Para eliminar el impacto de rendimiento cada vez que una de las texturas se hace visible por primera vez en la pantalla, renderizamos cuadrados de 1 px con cada una de las texturas antes de que comience la animación y muevemos el hit de rendimiento al principio. Esto nos permite volar y animar toda la altura del árbol de forma fluida, incluso en una tablet.
Para compensar las texturas, estamos alterando las islas UV que asignan la textura a la geometría. En Three.js, se ve de la siguiente manera:
geometry.faceVertexUvs[0][0] = [
new THREE.Vector2(xOffset, yOffset + 1),
new THREE.Vector2(xOffset, yOffset),
new THREE.Vector2(xOffset + 1, yOffset),
new THREE.Vector2(xOffset + 1, yOffset + 1)
];
Aquí puedes ver que usamos una variable para el desplazamiento x e y de la textura. Se puede lograr el mismo efecto con un material de sombreador GLSL personalizado que desplaza las coordenadas dibujadas en la geometría.
Funciones experimentales
Dado que algunas de las funciones que se usan en la demostración aún son experimentales, el artículo debe visualizarse en Chrome Canary y habilitar todas las funciones experimentales mencionadas para Chrome Canary en este sitio web.
Una vez que hayas instalado y configurado correctamente Chrome Canary, consulta la demostración. Ten en cuenta que todo el proyecto es de código abierto y está disponible en GitHub.
Conclusión
También hemos estado explorando cómo se podrían usar estas funciones en el contexto de las aplicaciones móviles, más como los libros electrónicos. Puedes ver este prototipo en curso y cómo estamos utilizando los diferentes paradigmas de interacción y contacto para mostrar estas funciones en una tableta.
Con el diseño del navegador web en constante evolución, vemos el deseo de continuar el valor de producción y la calidad de diseño a los que nos hemos acostumbrado en el pasado con el contenido de lectura heredado. Con funciones como las regiones de CSS, las exclusiones, el texto equilibrado, los filtros personalizados y WebGL, los creadores de contenido ya no tendrán que elegir entre alcance y calidad de diseño. ‘El Gigante del bosque’ es una clara señal de que la red del futuro permitirá a ambos.