Resumen
Feliz Navidad: Diversión navideña con transformaciones CSS en 3D.
¿Qué nos gusta?
Una demostración agradable con temática navideña que funciona bien en computadoras y dispositivos móviles. Incluso incluye compatibilidad con colores de tema totalmente nueva y un manifiesto web para una experiencia de pantalla principal que se inicia en pantalla completa.
Sugerencia profesional: Agita el teléfono para que nieve.
Posibles mejoras
Aunque sé que es una demostración, algunos encabezados de caché especificados en los elementos y JavaScript que no bloquea el procesamiento podrían haber mejorado bastante el tiempo de carga percibido.
Preguntas con Jim Savage
¿Por qué la Web?
En Tokio, hemos defendido desde hace mucho tiempo la Web responsiva y móvil, en lugar de la publicidad nativa por el bien. Pixmas fue el resultado de la experimentación con HTML5 y CSS3 durante el tiempo de inactividad entre proyectos. Siempre probamos cosas nuevas para mantener nuestros conocimientos actualizados. Naturalmente, para nuestro equipo de desarrolladores front-end, cualquier investigación se habría centrado en la Web en lugar de en una plataforma nativa.
A medida que los navegadores siguen evolucionando, vemos más funciones nativas; funciones que solo estaban disponibles a través del desarrollo nativo, como la ubicación geográfica, el acceso a la cámara, el almacenamiento de la base de datos local, etc., lo que contribuye a una experiencia general similar a la nativa para el usuario, pero con los beneficios del desarrollo multiplataforma y rápido de iteraciones. Por supuesto, el desarrollo nativo aún tiene sus ventajas y, cuando se aborda un proyecto nuevo, se tienen en cuenta mucho las opciones nativas y web. Probablemente suene obvio, pero para nuestros clientes es importante que recomendamos la mejor plataforma para el trabajo, en lugar de poner un pie de mano en cada proyecto para el que preferimos escribir código.
¿Qué funcionó muy bien durante el desarrollo?
Creo que, con Pixmas, el foco principal era en las transformaciones 3D y hasta dónde podíamos aplicar CSS, por lo que el estilo ilustrativo pixelado funcionó muy bien en el navegador y, como cualquier desarrollador front-end te dirá que el comportamiento natural de un navegador es compatible con el cuadrado. Por eso, basar el estilo general y la matemática en 3D en problemas cuadrados funciona muy bien. Compilar un cubo con transformaciones 3D y HTML es mucho más fácil que cualquier otra forma primitiva. Sin embargo, la interacción y las animaciones nos llevaron un poco de prueba y error para suavizarnos.
Lo que más nos sorprendió fue la fluidez y el rendimiento del navegador en las plataformas 3D para dispositivos móviles, especialmente en los dispositivos Android menos conocidos.
¿Cuál sería una API para mejorar tu app?
Si volviéramos a escribir Pixmas, probablemente usaríamos una API basada en WebGL. Si bien era divertido manipular elementos HTML DOM en 3D a través de CSS, el verdadero poder de la tecnología 3D basada en la Web tiene que ser una tecnología de aceleración de hardware dedicada como WebGL. CSS 3D funciona bien para las transiciones y los efectos básicos de páginas web, pero definitivamente alcanzamos un límite en el rendimiento del navegador cuando codificamos Pixmas.
Google tiene excelentes proyectos de WebGL en Chrome Experiments.