Share
Continuando con nuestra serie de artículos desconstructivos, hoy vamos a ver los componentes básicos de la página del Equipo de Kickstarter..
Si no está familiarizado con Kickstarter, es una compañía que permite la financiación de proyectos por parte del público. El éxito de Kickstarter se ha propagado naturalmente a emprendedores creativos de todo el mundo, impulsando algunos proyectos y startups increíblemente exitosos..
Sin embargo, en lugar de centrarnos en lo impresionante que es Kickstarter, en lugar de eso, discutiremos el enfoque técnico que el equipo de Kickstarter adoptó para crear su página de Equipo..
Hablaremos sobre aspectos específicos y también hablaremos desde una perspectiva de alto nivel. Empecemos!
Al examinar la fuente de la página del Equipo de Kickstarter, podemos inferir algunas cosas. En primer lugar, es casi seguro que utilizan Rails. Esto no es una gran sorpresa, ya que la mayoría de las páginas de Github del equipo están repletas de repositorios de Ruby (junto con JavaScript y Objective-C, que generalmente se utilizan para aplicaciones de iPhone / iPad).
Lo siguiente que podemos ver es una dependencia constante de los activos impulsados por CDN. Seis (o siete si eres IE) hojas de estilo externas y ocho scripts externos (algunos cargados de forma asíncrona) provienen de varios CDN. También podemos ver de inmediato que Kickstarter es compatible, al menos parcialmente, con IE, hasta IE6. Todos estos activos se minimizan y, cuando corresponde, se comprimen..
Se pueden hacer más inferencias sobre el enfoque del equipo de Kickstarter para CSS; una compás.css el archivo se carga justo después de una fonts.css Archivo, probablemente generado por Compass y Sass. Estos son los dos primeros archivos de estilo cargados..
Kickstarter utiliza Facebook Connect así como los iconos de enlace de Apple touch / iPad para guardar aplicaciones web en la pantalla de inicio de iOS.
Kickstarter también está utilizando una variedad de servicios de análisis. Los scripts de Quantcast, Mixpanel, New Relic, Chartbeat y Google Analytics están incluidos en la página..
También podemos ver el marcado para Zendesk, un servicio de relaciones con el cliente, así como jGrowl, un notificador de tipo gruñido. Estas páginas probablemente las utilizan otras páginas del sitio y se agregan dinámicamente a través de JavaScript.
No en vano, Kickstarter confía en jQuery y / o Zepto, dependiendo de la situación.
(En particular, esos videos impresionantes) ...
Lo primero que notamos de inmediato es el elemento de video de 600px de altura del equipo de Kickstarter, al frente y al centro. Cada uno de los 46 miembros está colgando casualmente frente a algunos paneles de madera.
El video (que en realidad son seis videos separados unidos) se configura para que se reproduzca automáticamente. Para los navegadores que no admiten el elemento de video, se usa el elemento del cartel; por ejemplo, el video más a la izquierda usa este póster:
Un fotograma del video que aún muestra al equipo. Este es un excelente ejemplo de degradación agraciada.
Los videos son "arrastrables" usando JavaScript; Este es el elemento interactivo principal de esta página. El cursor cambia a cursor: mover a través de JavaScript. Una gran cantidad de chequeos de capacidad de matemática y dispositivos cruzados se encuentran en el JavaScript para la funcionalidad de arrastre de los videos. En particular, los eventos touchstart y touchend se utilizan si están disponibles (en lugar de mousedown y mouseup). Una cantidad significativa de JavaScript que es pertinente a esta página está dedicada al desplazamiento cinético suave. Intenta arrastrar el video rápidamente y dejarlo ir; Al igual que el comportamiento de desplazamiento integrado de Apple, vemos que la tira de video mantiene la velocidad y disminuye con el tiempo.
La estructura básica de la tira de video HTML es la siguiente:
los #video_header El elemento está configurado para ser un ancho del 100% (el ancho de la pantalla) con un desbordamiento de oculto, con el .video_scroll div tiene un ancho que contiene todos los videos (más de 7000px), que están configurados para pantalla: en línea y flotador izquierdo; el scrollTop o scrollLeft de un elemento con desbordamiento: oculto Todavía se puede configurar dinámicamente con JavaScript, aunque no se vea ninguna barra de desplazamiento.
Eche un vistazo a este CodePen para ver un ejemplo de un párrafo "arrastrable":
Accentsconagua
Nota: Este ejemplo no funciona para dispositivos táctiles y no tiene ninguna función para el desplazamiento cinético, lo que sugiere la atención al detalle empleado por Kickstarter..
Una nota final: No tenemos acceso a la versión no identificada de JavaScript, pero ver una versión prectificada del archivo de secuencia de comandos minificado puede ofrecer una idea de la estructura y las técnicas utilizadas..
Entonces, ¿cómo harías para implementar el desplazamiento cinético? Una combinación de funciones basadas en setTimeout (o, si está disponible, requestAnimationFrame) para calcular la velocidad a la que se desplaza cuando suelta el controlador de arrastre se usa para definir una "velocidad" inicial, que luego disminuye con el tiempo en función de una aceleración. Funciona hasta que el elemento se detenga..
Para tener una idea de cómo se ven las funciones de Easing a lo largo del tiempo, eche un vistazo a easings.net, una hoja de referencia de easings. En particular, un desplazamiento cinético comenzaría a su velocidad más alta y disminuiría con el tiempo, por lo que se podría usar una función de salida cúbica. Si desea saber más sobre cómo funciona la aceleración, eche un vistazo a este artículo, que se basa en ActionScript pero se puede traducir fácilmente a JavaScript..
Un buen ejercicio es pensar en cómo pueden aplicarse las diferentes funciones de aceleración. Por ejemplo, una bola que rebota sería, por supuesto, una función de rebote. Pero, ¿para qué se usaría una función de entrada y salida fácil? Tal vez si estás simulando una bola rodando y retrocediendo una colina; la velocidad en la cima de una colina sería lenta, luego más rápida en la parte inferior, y luego lenta hacia la cima de la segunda colina.
La función de búsqueda (que está presente en varias páginas del sitio) funciona a través de JavaScript y JSON (consulte esta respuesta JSON cuando busque el término "película", así como la página de índice que lo acompaña). También se basa en un elemento de ancho fijo que contiene y anima la propiedad scrollLeft.
El pie de página tiene un pequeño huevo de Pascua ordenado; al hacer clic en el intervalo de tijera (que tiene tres "posiciones de tijera" diferentes habilitadas por cambios de clase) anima las tijeras en la pantalla;
Haga clic tres veces y "recorta" el pie de página de la parte inferior de la página, revelando una cuadrícula de cuadrados (lo que implica un lienzo en blanco de Photoshop). Todo esto se hace con animaciones y devoluciones de llamada jQuery bastante simples, y tiene un estilo estilístico con clases CSS y declaraciones de estilo en línea jQuery.
Si bien la página del Equipo Kickstarter actualmente no utiliza consultas de medios para un diseño receptivo, está haciendo provisión para la accesibilidad de los dispositivos táctiles. Es posible que Kickstarter esté desarrollando una aplicación para iOS, basada en la experiencia del equipo y los repositorios de GitHub. También están haciendo algunas provisiones utilizando Zepto en lugar de jQuery condicionalmente..
Porque nadie es perfecto ...
La principal crítica que podemos ofrecer es sobre la presencia de cuatro archivos CSS. La división de CSS en cuatro archivos separados aumenta el número de solicitudes HTTP, lo que debe evitarse; sin embargo, hay múltiple Posibles razones por las que el equipo de Kickstarter decidió hacer esto. Es probable que tengan buenas razones, considerando las medidas que han tomado para la optimización de lo contrario; en particular, podrían haber estado usando algo como Bless CSS. IE solo permitirá un cierto número de selectores por archivo CSS; Bless CSS cuenta automáticamente sus selectores y divide sus archivos CSS en consecuencia si superan el límite. Otra posible razón es evitar cargar código que no es necesario en otros lugares; por ejemplo, puede darse el caso de que los selectores menos utilizados (en todo el sitio) terminen en el cuarto archivo CSS y, por lo tanto, los cuatro archivos pueden cargarse en muy pocos casos.
El diseño receptivo a través del uso de consultas de medios sería agradable de ver, pero puede darse el caso de que Kickstarter esté dividiendo a su audiencia y aliente las visitas de escritorio basadas en algunos de sus (aparentemente extensos) recopilación y análisis de datos. También podría darse el caso de que Kickstarter prefiera invertir en una aplicación nativa, pero todavía no lo sabemos con certeza..
La crítica final que tenemos es simple: ¿quiénes son cada uno de los miembros del equipo? Claro, tenemos los nombres, pero no sé a qué persona se mata con qué nombre. Hubiera sido interesante resaltar de alguna manera los nombres cuando pasas el cursor sobre el nombre de un miembro del equipo, por ejemplo. Otra solución simple sería decir que las personas se enumeran en "orden de aparición".
Sin embargo, esto también puede haber sido una decisión específica de Kickstarter para proteger la privacidad de los miembros individuales del equipo. Si incluso un miembro del equipo no quería ser identificado, es la opción correcta no identificarse alguna de los miembros del equipo. También puede ser un mensaje que Kickstarter quiere propagar, que este equipo es una sola unidad; esto, sin embargo, podría ser mejor servido al no mostrar los nombres en absoluto.
La página del Equipo Kickstarter ha recibido comentarios muy positivos de la comunidad de diseño y podemos aprender de esta página de muchas maneras. Específicamente, debemos eliminar el hecho de que la combinación de algunas ideas simples de una manera nueva (como un desplazador de contenido y un video) puede llevar a algunas interacciones impulsadas por el contenido muy interesantes y atractivas. Esta página no emplea nada que sea particularmente "inmersivo" o complicado, pero capta nuestro interés y lo retiene. El contenido se coloca en un pedestal, una vez más, y los usuarios están invitados a explorar ese contenido de una manera divertida pero simple.
¿Qué más notan sobre la página del Equipo de Kickstarter? ¿Hay otras páginas similares interesantes que encontraste en Kickstarter? ¿Qué piensa acerca de su decisión de evitar las soluciones de respuesta basadas en consultas de medios? Háganos saber en los comentarios.!
