Share
Pisando los talones de la adquisición de Tumblr, Yahoo! ha implementado un completo rediseño de flickr.com. Esto fue recibido con una fuerte crítica y un elogio, muchos de los cuales se han atribuido a la nueva líder de Yahoo!, Marissa Mayer. En este artículo, hablaremos sobre las decisiones de diseño y algunos de los detalles de implementación en el rediseño, y abriremos una conversación sobre la adquisición de Tumblr por parte de Yahoo!.
El papel de Flickr es a menudo cuestionado por los críticos de Yahoo !, ya que Facebook lo superó como el servicio de carga de fotos en línea más popular. En este rediseño de Flickr, vemos un interesante conjunto de prioridades reflejadas, las cuales discutiremos en esta sección..
Estas prioridades reflejan que Flickr se dirige a una audiencia de entusiastas de la fotografía..
Al mirar una selección aleatoria de fotos de Facebook, lo más probable es que veas una colección de fotos de amigos en la playa o "selfie". Incluso en los anuncios de Facebook, vemos imágenes que están impulsadas por un factor: capturar momentos impulsados socialmente..
El escritor Justin Rocket Silverman aprende el arte del 'selfie' Sin embargo, al mirar la página de inicio de Flickr, no vemos una sola imagen que se considere principalmente "social". En cambio, vemos una selección de imágenes de la naturaleza o de la mascota, con algunas otras fotos posadas. Estas imágenes se entienden mejor como altamente intencionales, tomadas por entusiastas de la fotografía..
La página de inicio de Flickr envía algunos mensajes y una sola llamada a la acción. El mensaje principal es el innovador terabyte de espacio gratuito para imágenes y videos de Flickr. Enfatizan esto en el mensaje de aterrizaje principal, "Sonríe. Todos reciben un terabyte gratis" y, además, en la segunda diapositiva "Biggr" debajo del pliegue, lo que permite al usuario ver cuántas imágenes de una resolución determinada podrían cargar en Flickr..
El control deslizante de megapíxeles va de 0 a 16 megapíxeles. La tercera diapositiva explica que los usuarios pueden cargar sus imágenes a su resolución original y no pueden esperar pérdida de calidad.
Estos mensajes hablan fuertemente a los entusiastas de la fotografía; Tener suficiente espacio libre para cargar imágenes de alta calidad es importante para los fotógrafos. En contraste, Facebook no comunica ninguna implicación de calidad o espacio para cargar imágenes.
El nuevo Flickr está muy centrado en experiencias centradas en la foto. Esto generalmente coloca las cuentas de usuario como un elemento de contenido secundario. Por ejemplo, cuando un usuario inicia sesión, la página "inicio" muestra una fuente de imágenes y sus interacciones asociadas de otros usuarios. Los grupos de usuarios conectados se pueden ver a la derecha. Al hacer clic en una foto se abre una caja de luz navegable.
Flickr también ha creado una nueva experiencia de presentación de diapositivas. La barra de búsqueda se centra en las subidas de usuario (en lugar de "perfiles" de usuario) de forma predeterminada. Las siguientes dos opciones son su galería de fotos personal, luego sus "fotos de contactos". Finalmente, el tipo de búsqueda se puede cambiar a grupos, y por último para los miembros.
Como efecto secundario del enfoque de Flickr en la fotografía y de las personas que se preocupan por ello, podemos ver rápidamente que el objetivo de Flickr no es competir con Facebook. En cambio, es convertirse en la Servicio de fotografía en la nube para el entusiasta de la fotografía promedio y el fotógrafo de carrera profesional para almacenar y discutir fotos..
Esto no es para disminuir las interacciones habilitadas por el nuevo rediseño. De hecho, la interacción y la conversación se fomentan más que en el Flickr anterior, que se centró principalmente en mostrar a cada usuario individual las fotos más recientes. Pero las interacciones sociales de Flickr giran enteramente en torno a las fotos; de hecho, en la página de perfil de un solo usuario, no hay "muro". En su lugar, hay una corriente de las fotos cargadas de ese usuario, que se pueden iniciar fácilmente en una presentación de diapositivas. Si te gusta un usuario en particular, puedes "Seguirlo" (Tumblr, ¿alguien?), Lo que llevará las fotos de ese usuario y los comentarios asociados a tu feed de inicio de sesión..
Los usuarios pueden acceder a FlickrMail, pero solo si tienen personas agregadas a sus Contactos; Además, el acceso a FlickrMail está algo enterrado..
Los grupos pueden publicar "discusiones" muy simples, que son como publicaciones en foros; Sin embargo, la comunicación adicional está relativamente limitada a los comentarios en las fotos..
Flickr no está confundido o desenfocado; en cambio, está claramente enfocado en crear un lugar para hablar y almacenar fotografías.
Como es costumbre con la serie "Cómo lo hicieron", vamos a pasar un tiempo hablando sobre los aspectos técnicos de la nueva implementación. Esta sección no trata sobre la estrategia general o si es o no efectiva; En su lugar, esta sección está repleta de consejos y trucos basados en la implementación de Flickr..
El diseño de Flickr no ha visto una actualización significativa por cerca de siete años. En ese momento, se han realizado grandes avances en la informática, incluido un acceso mucho más generalizado a la banda ancha, un aumento general de las velocidades de banda ancha y un cambio masivo a la movilidad y la accesibilidad desde múltiples dispositivos. Por esta razón, Flickr de 2012 se veía bastante anticuado, basado principalmente en un enfoque de miniaturas de ancho de banda bajo, generalmente mostrando una imagen de mayor resolución a la vez. Además, el Flickr anterior al rediseño no aprovechó muchas de las posibilidades de las nuevas tecnologías de navegador..
Flickr de antaño Hemos publicado sobre paralaje en Tuts + muchas veces antes. Al abrir una conversación sobre técnicas de paralaje, uno de los primeros problemas abordados es el rendimiento. Con demasiada frecuencia, el paralaje se implementa de manera ingenua, como alguna variación de lo siguiente (o peor).
Nota: esto supone que el sitio está usando jQuery ...
Accentsconagua
$ (window) .on ("scroll", function () $ (". parallax-item"). each (function () $ (this) .css (marginTop: $ (window) .scrollTop () * .5););); Para un ejemplo, echa un vistazo a esta pluma!
¿Qué hay de malo con este enfoque? Primero, cada evento de desplazamiento ejecuta la función a la que se llama. No hay almacenamiento en caché de objetos JavaScript, no hay limitación de desplazamiento y, lo que es más importante, esto no aprovecha las transformaciones de CSS3 o la aceleración de hardware.
Hacer cambios simples puede ayudar a aumentar dramáticamente el rendimiento en la interacción impulsada por eventos de desplazamiento, y Flickr ha hecho precisamente eso. Estas son las funciones principales de JavaScript utilizadas en la técnica de paralaje. (Nos hemos tomado la libertad de agregar algunos comentarios para entenderlo).
(function () // configuración de las variables que se utilizarán en var useTransform = true; var useParallax = true; var ua = navigator.userAgent; var winLoc = window.location.toString (); // coincidencia de agentes de usuario para mejoras progresivas var is_webkit = ua.match (/ webkit / i); var is_firefox = ua.match (/ gecko / i); var is \ _newer \ _ie = ua.match (/ msie (9 | ([1-9] [0- 9])) / i); var is \ _older \ _ie = ua.match (/ msie / i) &&! Is \ _newer \ _ie; var is \ _ancient \ _ie = ua.match (/ msie 6 / i); var is_mobile = ua.match (/ mobile / i); // para ver el rendimiento de la página con transformaciones 2d (en lugar de 3d), visite http://www.flickr.com/#transform=2d var use2DTransform = (ua. match (/ msie 9 / i) || winLoc.match (/ transform \ = 2d / i)); var requestAnimationFrame = null; var prefixes, transform; var parallaxItems = []; var scrollHandler = null; var nodes; var lastExec = new Date (); // Las siguientes dos verificaciones potencialmente utilizadas para la depuración, o para dispositivos o enlaces específicos. // Para ver el rendimiento de la página sin transformaciones (implementaciones de margen superior) en), visite http://www.flickr.com/#notransform if (winLoc.match (/ notransform / i)) useTransform = false; // para ver la página sin paralaje, visite http://www.flickr.com/#noparallax si (winLoc.match (/ noparallax / i)) useParallax = false; // Verifique las variables del agente de usuario para decidir si usar o no el paralaje. if (is_mobile || is \ _ancient \ _ie) useParallax = false; // Si la url tiene "useraf", use el cuadro de animación request si (winLoc.match (/ useraf / i)) requestAnimationFrame = (window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame); // configurando prefijos de transformación prefijos = webkit: 'webkitTransform', firefox: 'MozTransform', es decir: 'msTransform', w3c: 'transform'; if (useTransform) if (is_webkit) transform = prefixes.webkit; else if (is_firefox) transform = prefixes.firefox; else if (es \ _newer \ _ie) transform = prefixes.ie; // La función principal para los elementos de paralaje // toma un parámetro containerNode, que es el elemento // de posición relativa de la imagen de paralaje con posición absoluta. function ParallaxItem (containerNode) // configura algunas vars para almacenar en caché los valores de var container, bgElements, offset, bgHeight, containerHeight, maxScrolls, height; // almacena en caché una instancia del contenedor envuelta en YUI, similar a $ (containerNode) en jQuery container = Y.one (containerNode); // obtener los elementos con una clase de "fondo de paralaje" dentro del contenedor. // la página de inicio solo tiene un elemento por contenedor, pero esto podría escalar para tener múltiples elementos bgElements = container.all ('. parallax-background'); // función para actualizar las variables para cada función de elemento de paralaje refreshCoords () offset = container.getY (); containerHeight = container.get ('offsetHeight'); bgHeights = []; maxScrolls = []; bgElements.each (función (elemento) altura = item.get ('offsetHeight'); bgHeights.push (altura); // el desplazamiento máximo de cada contenedor es el // contenedor offsetHeight - altura de desplazamiento del elemento de paralaje + 2 maxScrolls.push (contenedorHeight - altura + 2);); // la función actual de la función de movimiento de paralaje actualizada (docScrollY) var i, j, scroll, transformParam; i = 0; bgElements.each (function (bgElement) // scroll está configurado al máximo de maxscroll del elemento y // posición de desplazamiento del documento menos el desplazamiento del contenedor actual // dividido por la altura del contenedor multiplicado por el desplazamiento máximo. scroll = -Math.round ((((docScrollY - offset) / containerHeight) * maxScrolls [i]); scroll = Math.max (scroll, maxScrolls [i]); var transformParam; if (! Use2DTransform) transformParam = 'translate3d (0px , '+ scroll +' px, 0px) '; else transformParam =' translateY ('+ scroll +' px) '; if (transform && transformParam) bgElement.setStyle (transform, transformParam); bgElement.setStyle ( prefixes.w3c, transformParam); else bgElement.setStyle ('marginTop', scroll + 'px'); i ++;); refreshCoords (); return 'refresh': refresh, 'refreshCoords': refreshCoords // esto ejecuta la función de "actualización" del motor de paralaje si hay elementos de paralaje, // pasando la posición de desplazamiento actual de la función de documento refreshParallaxItems () var docScrollY = Y.DOM.docScrollY (); if (! parallaxItems ||! parallaxItems.length) return false; para (var i = 0, j = parallaxItems.length; i < j; i++) parallaxItems[i].refresh(docScrollY); function scrollWatcher() if (requestAnimationFrame) requestAnimationFrame(refreshParallaxItems); else refreshParallaxItems(); function addParallaxItem(containerNode) parallaxItems.push(new ParallaxItem(containerNode)); if (!scrollHandler) scrollHandler = Y.on('scroll', scrollWatcher); // finally, this actually goes through the parallax items and adds them to memory, // which sets up all of the event watching, etc if (useParallax) nodes = Y.all('#flickr-frames .parallax-item'); nodes.each(function (item) addParallaxItem(item); ); // Whenever a PhotoListView is rendered, // refresh the coordinates of the parallax pieces Y.on('PhotoListView:render', function () var now = new Date(); if (now - lastExec > 250) para (var i = 0, j = parallaxItems.length; i < j; i++) parallaxItems[i].refreshCoords(); lastExec = now; ); // Load in the coordinates of the parallax pieces when the document loads refreshParallaxItems(); ()); Vea los comentarios que hemos agregado para obtener una comprensión más completa de lo que está sucediendo aquí. Esto puede parecer un poco desalentador, especialmente si no está familiarizado con las utilidades JU del nodo YUI de Yahoo! En lugar de estar al tanto de todos los detalles de este código, veamos algunas piezas importantes que son importantes.
Primero vemos el uso extensivo de la caché de variables. Esto incluye la configuración de alturas máximas, compensaciones, etc. en una actualización. A continuación, vemos el uso de mejoras progresivas para definir cuándo usar transformaciones 3D, 2D o no. Esto mejora enormemente el rendimiento de los navegadores más nuevos. Además, las transformaciones 3D son compatibles con todos los principales navegadores actuales (excepto Opera y Opera Mini), lo que significa una mejora significativa del rendimiento mediante la aceleración de hardware, que se activa cuando se utilizan transformaciones 3D en un elemento determinado. (Echa un vistazo a este artículo para más información). Esto ayuda a la página de inicio a realizar cuadros de cuadros mucho más altos, generalmente a 60 fps o más.
Es interesante notar que el equipo de desarrollo de Flickr dejó algunas piezas aparentemente no utilizadas en el código fuente, como los interruptores de funcionalidad basados en URL que habilitan o inhabilitan cosas como el paralaje y las transformaciones. Quizás esto se usa para ciertas redirecciones de dispositivos; esto pudo haber sido una técnica de depuración que el equipo de desarrollo olvidó sacar. También podría ser una llamada a los desarrolladores para que jueguen con la aplicación y vean los beneficios de rendimiento de usar estas diferentes técnicas. Sea lo que sea, es una maravilla jugar con él una vez que lo encuentras, y prácticamente no tiene impacto en el rendimiento.
Una nota más sobre la implementación de paralaje: Flickr ha evitado por completo el uso de tamaño de fondo para los contenedores de imágenes y también ha evitado el tamaño de "pantalla completa", optando en su lugar por los elementos de contenedores de paralaje de altura mínima en general. ¿Por qué? Rendimiento de tamaño de fondo: cubierta es terrible, causando bajos cuadros y, en general, una experiencia de usuario degradada. En cambio, Flickr ha elegido cargar imágenes de fondo más grandes; 2048x850, para ser exactos. Esto cubre el ancho de casi cualquier pantalla y proporciona la altura suficiente para hacer una implementación de paralaje eficaz. Las pinturas del navegador se reducen significativamente también.
En una función de observación de desplazamiento estrangulada, la llamada a la acción final en la parte inferior de la página de inicio de Flickr cambia cuando el usuario se desplaza sobre un muro de fotos de usuarios justificadas horizontalmente. La animación se basa en las transiciones de CSS3, que incluyen un filtro de desenfoque de webkit de 12px, opacidad y escala. La llamada a la acción incluye una gran tipografía (10em o 144px para ser exactos), y un botón de estilo CSS3 adecuadamente grande.
Aquí está el CSS para el botón..
/ * Webdesigntuts + nota: prefijos específicos del navegador eliminados * / display: inline-block; relleno: 0px 2em 5px 2em; tamaño de letra: 2em; altura de la línea: 1.75em; peso de la fuente: 400; texto-decoración: ninguno; fondo: # ff0084; color: #fff; box-shadow: 0px 2px 8px rgba (0,0,0,0.5); radio del borde: 5px; imagen de fondo: gradiente lineal (parte inferior, rgb (215,0,104) 35%, rgb (243,0,111) 84%); clip de fondo: caja de relleno;
Bastante sencillo, pero efectivo. El sitio interno una vez que un usuario se ha registrado tiene elementos similares de gran tamaño, como el formulario de carga.
Pequeñas mejoras en la página de inicio también funcionan para mejorar la experiencia del usuario. Por ejemplo, el control deslizante de megapíxeles utiliza un uri de datos en línea para el manejo, mientras que el control deslizante solo utiliza gradientes CSS y otras definiciones. No se requieren solicitudes http para ninguna parte del control deslizante, que no sea su JavaScript asociado.
Se utilizan sombras de texto muy leves en los encabezados para separarlos un poco de sus imágenes de fondo asociadas. Los colores de fondo semitransparentes (RGBa) se utilizan para la barra de navegación superior, así como para los títulos del muro de la imagen. Flickr también está utilizando plantillas de bigote para el muro de imágenes. Todos estos elementos aluden al hecho de que Flickr está recibiendo un impulso para mantener un diseño de front-end mucho más avanzado..
Aquí hay algunas ideas acerca de las cosas que podrían ser mejores con el nuevo Flickr, o que puede considerar en sus prácticas de desarrollo..
En este momento, la estrategia móvil adoptada por Flickr se basa en dos puntos principales: aplicaciones nativas y un sitio específico para dispositivos móviles. El sitio móvil específico es mucho menos atractivo que la versión de escritorio. Teniendo en cuenta el simple hecho de que los dispositivos móviles están creciendo más rápido que nunca, este rediseño podría y debería ser reconsiderado como una oportunidad para adoptar estrategias receptivas. La versión de escritorio del sitio es menos que ideal a cualquier valor inferior a 960px. Esto arroja muchas tabletas más pequeñas y casi cualquier teléfono.
Las mejores prácticas nos dicen que las páginas de inicio de llamada a la acción y las páginas de inicio dirigidas a la comercialización no son el mejor lugar para cargar contenido de aplicaciones. Sin embargo, algunos de los scripts cargados en la nueva página de inicio de Flickr.com se utilizan en el resto de la aplicación. Sería beneficioso, en cambio, crear un archivo JavaScript más pequeño y único que dependa menos de la biblioteca YUI, y más en escuchas de eventos simples, selectores y funciones AJAX.
Ese archivo de JavaScript también debe ser reducido; sin embargo, puede darse el caso de que no se minimice por el bien de los desarrolladores que desean echar un vistazo a la fuente. (Consulte la llamada al desarrollador al final de este artículo).
La inhalación del agente de usuario es una mala noticia, a menos que verifique a fondo cada cadena con cada dispositivo (menos práctico de lo que es útil). Desafortunadamente, usar una cadena simple como "móvil" como lo está haciendo Flickr aquí no es suficiente para decir definitivamente si estamos o no en un dispositivo móvil. Claro, esto puede cubrir un porcentaje significativo de dispositivos, digamos incluso un 99%, pero cuando eso es el 99% de 200 millones de personas, estás dejando 2,000,000 dispositivos fuera.
También es improbable que el uso de algo que mejore drásticamente el rendimiento, como las transformaciones, se limite por un simple rastreo de la AU. En cambio, usar una suite de detección de características como Modernizr sería más beneficioso y más definitivo para las capacidades del navegador del usuario. Al ver que Modernizr está respaldado por algunas de las personas de Google, no es de extrañar que no lo veamos incluido en Flickr, pero el concepto subyacente es simple, y las pruebas son fácilmente replicables.
Las etiquetas OpenGraph son esenciales para compartir un sitio en Facebook. Compartir un sitio en Facebook es una función básica de la web para muchos usuarios. Desafortunadamente, si un sitio no implementa específicamente las metaetiquetas OpenGraph, el elemento del enlace compartido se ve bastante desnudo en una fuente de noticias de Facebook.
Si Flickr está compitiendo con Facebook, esta puede ser una apuesta que les ayudará a poner a las personas en contra de Facebook, o disociar a Flickr de Facebook por completo. O, simplemente podría ser un descuido. De cualquier manera, me hace (y probablemente a otros usuarios) evitar compartir Flickr.com con mis amigos de Facebook.
De acuerdo, conseguimos que a Flickr (y Tumblr) no les gusten los de er. Pero, llega un punto en el que eliminar letras de las palabras molesto y cursi, e incluso difícil de leer. Flickr está superando esa línea. El uso de cosas como "Biggr", "Spectaculr" y "Wherevr" posiblemente no mejore la marca o la experiencia del usuario. Flickr es el nombre del servicio; "más grande" describe una nueva característica de ese servicio. De lo contrario, ¿por qué no también cambia "seguidor" a "followr", o "desarrollador" a "developr"? Porque no tiene sentido y suena extrañamente extraño. Considere la redacción publicitaria increíblemente efectiva de Apple; "iPad" no se traduce en una copia como "Lleva tu iMac contigo, iAnywhere".
Una pieza interesante de Yahoo! Se incluye en la fuente de Flickr una llamada a los desarrolladores front-end, con noticias de que Flickr está contratando. Este genial logotipo de ascii se puede encontrar en la etiqueta de la cabeza.
ad88 88 88 88 d8 "88" "88 88 88 88 d88888d 88 88, adPPYba, 88, d8 8b, dPPYba, 88 88 88 a8" "88, a8" 88P '"Y8 88 88 88 8b 8888 [88 88 88 88 "8a,, aa 88 '" Yba, 88 88 88 88' "Ybocket" '88' Y8a 88 Estás leyendo. Estamos contratando. http://flickr.com/jobs/
Conocido por su público más joven con una tendencia a ser más audaz que, por ejemplo, los usuarios de Blogger, pero menos temerario que los Redditors, Tumblr se encuentra en una posición única adquirida por un gigante como Yahoo!.
Será Yahoo! ¿Matar la naturaleza libre de la creación de contenido de Tumblr? ¿Se integrarán Flickr y Tumblr para que los usuarios puedan publicar fotos de Flickr automáticamente en Tumblr? O bien, Tumblr continuará existiendo de manera transparente, simplemente con nuevos términos de servicio que permiten a Yahoo! ¿Para recopilar y utilizar datos de los 109 millones de blogs y 51.2 mil millones de publicaciones de Tumblr? ¡Podría ser una increíble fuente de datos para Yahoo !, que parece estar en modo de adquisición, adquiriendo PlayerScale días después de adquirir Tumblr.
Háganos saber qué piensa del nuevo Flickr y qué piensa del futuro de Tumblr bajo la dirección de Yahoo!, En los comentarios!
