¿Cómo funciona el diseño de Flipboard?

El SDK de FeedMagnet tiene un algoritmo de visualización integrado llamado “diseños inteligentes” que se aproxima al motor de diseño de Flipboard. El proceso requiere 3 pasos:

1. Defina sus tipos de contenido. Foto grande, pequeña foto, registro, tweet de texto, artículo, video, etc.

2. Defina sus diseños. Una foto grande con dos tweets de texto, 12 registros, seis fotos pequeñas y un video, etc. Cada uno corresponde con su propio HTML / CSS.

3. Obtenga el contenido más reciente, evalúelo y determine qué diseños son los mejores para mostrar ese contenido.

Proporcionamos ganchos para realizar los pasos 1 y 2 a través de JavaScript, y luego nos encargamos del paso 3 a través de nuestro método integrado de diseños inteligentes, que utiliza un algoritmo de priorización ponderado para manejar la organización de actualizaciones sociales en los diseños predefinidos.

He estado jugando con eso y creo que debes aplicar ambos enfoques. La forma en que hemos abordado este problema es tener un conjunto de diseños predefinidos pero restringiendo qué tipo de contenido puede entrar en cada una de las secciones de diseño. Luego elegimos el diseño que puede manejar el próximo contenido. Se necesita un poco de trabajo para hacer un estilo final (cambiar el tamaño de las imágenes, cambiar el tamaño del texto, truncar el texto, etc.) pero nos ha funcionado bastante bien.

Puede ver los resultados finales en nuestro sitio: http://getpressi.com/dan

Estamos usando esta biblioteca jQuery para hacer el trabajo front-end – Isótopo