algorithm - news - Algoritmo de diseño de Flipboard
flipboard news (7)
Espero que muchos de ustedes hayan oído hablar de Flipboard . Una de las cosas más sorprendentes de esta aplicación para iPad es la forma en que presenta el contenido que cambia dinámicamente en función de la orientación del iPad y en función del contenido de transmisión.
Entonces, dado un conjunto de artículos, ¿qué algoritmos usaríamos para tener el mejor diseño? La definición de mejor podría ser: diseño más eficiente (como en el diseño del circuito) o el diseño más estético.
¿Alguien sabe de tales algoritmos? o el enfoque básico para tales problemas? ¿Esto cae bajo la "geometría computacional"?
Basándome en las capturas de pantalla y las teorías en la publicación del blog vinculada por Jason Moore en su respuesta , diría que hay diez o más tamaños de bloques predefinidos en los que se coloca el contenido. El tamaño del cuadro en el que se coloca un contenido se basa en varios parámetros diferentes, algo que muchas personas retuitean o prefieren como prioridad y, por lo tanto, obtienen un cuadro más grande, y los elementos con imágenes, videos o mucho texto también se pueden priorizar . Estos cuadros (preferiblemente con tamaños bien pensados) se empaquetan de manera óptima en las páginas (aunque esto no es un problema simple, e incluso Flipbook parece fallar, como lo demuestran los extraños espacios en blanco en la segunda representación de la secuencia de Facebook del anterior publicación de blog vinculada).
Desde el aspecto de la transmisión de Facebook , Flipbook tiene (al menos) los siguientes tamaños de caja predefinidos (ancho y alto dados como porcentaje del ancho / alto completo):
Designation | Width | Height | Example
---------------------------------------------------------------
full page | 100% | 100% | #12
2/3 page | 100% | 67% | #1
1/3 note | 50% | 33% | #3, #11
1/9 quote | 50% | 11% | #2, #8, #10, #15, #17, #18, #22
1/2 note | 50% | 50% | #16, #19
2/3 note | 50% | 67% | ?
Algunos de estos tienen patrones de agrupación bastante obvios (las comillas de 1/9 se apilan siempre de tres en tres para formar un bloque del mismo tamaño de una nota de 1/3, por ejemplo), mientras que otras se pueden empaquetar más libremente. Un análisis similar del feed de Twitter representado muestra algunos cuadros adicionales.
Resumen
Entonces, en resumen, el algoritmo parece ser bastante simple. Comience con un par de tamaños de caja predefinidos (sensiblemente seleccionados). Cuando se procesan nuevos feeds, haga lo siguiente:
- Asigna a cada artículo un recuadro cuyo tamaño depende de ciertas propiedades, como la popularidad, si contiene imágenes, etc.
- Empaque las cajas de manera óptima (este es, en esencia, el problema de empaquetado de contenedores , un problema NP-difícil para el cual no parece haber algoritmos eficientes, un algoritmo de aproximación codicioso sería bueno)
El énfasis aquí se debe poner en el paso 1, así como en la elaboración de los cuadros predefinidos.
Para aclarar: los tamaños de caja predefinidos de los que hablo aquí están definidos para la orientación vertical . Para el paisaje, se usaría un conjunto diferente de tamaños de caja como lo demuestra la imagen en la pregunta .
Eche un vistazo a esta biblioteca de JavaScript. Parece interesante
El enfoque (0,1) - mochila.
Había intentado mucho con la comprensión de la disposición del diseño de Flipboard. Esto es lo que se me ocurrió: https://github.com/reefaq/FlipView
No hay un algoritmo complejo detrás de él ni un código complejo, solo un código simple que puede ser comprensible para todos.
Implementado algunas de las características como
- multi flip (ilusión)
- Arreglo de vistas si la orientación cambió como Flipboard
- selección de diseño aleatorio
Espero que te ayude :)
Imagino que un algoritmo codicioso funcionaría bien. Solo depende del orden en que intentes cargar los datos. si le da a cada sección de contenido un peso o "valor", y le da una gran cantidad para elegir, el algoritmo codicioso puede encontrar el diseño óptimo con el valor más alto.
Mi corazonada es que el contenido de transmisión está ordenado en diferentes categorías (citas, artículos, fotos, etc.). Según el número de elementos en cada categoría y la clasificación de cada uno de los elementos en esas categorías, el software probablemente los coloque en algunos diseños prefabricados.
La siguiente entrada de blog muestra una gran cantidad de análisis en profundidad tratando de descifrar los diseños dinámicos de Flipboard:
Replicar Flipboard Parte III - Cómo Flipboard presenta contenido
No pude publicar imágenes debido al karma de baja reputación :-) pero aquí hay algunas notas como una publicación de blog sobre el método de diseño.
Sonidos relacionados con el algoritmo Knapsack . Ver también el problema de embalaje del sitio de Wikipedia.