Cómo estructurar tus colecciones del CMS de Webflow

O, cómo crear una base de datos de contenido estructurado, de la forma correcta.

Cómo estructurar tus colecciones del CMS de Webflow

Índice de contenidos

Webflow CMS es una herramienta potente para estructurar y reutilizar contenido de forma flexible y modular. Pero todo ese poder conlleva una pequeña curva de aprendizaje. Aquí tienes un resumen de las mejores prácticas para estructurar tus colecciones, junto con algunos ejemplos concretos.

Estructurar tus colecciones se reduce básicamente a definir un conjunto de entidades y luego crear relaciones entre ellas dentro del contexto del propio sitio web. Entender cómo se relacionan estas entidades en el mundo real puede ayudarte a guiar la creación de tus colecciones, pero estas son, en gran medida, independientes de las relaciones hasta que empiezas a diseñar con ellas.

Las entidades equivalen a colecciones, y puedes verlas como sustantivos: las cosas de las que trata tu sitio web o de las que está compuesto. Puedes pensar en las relaciones entre las entidades como verbos, o formas de interactuar con sus entidades asociadas.

A modo de ejemplo, aquí tienes un mapa sencillo de estas entidades y relaciones (lo que Scott Kubie llama un "ecosistema de contenido") para el sitio web de una librería:

Cada cuadrado representa una entidad y cada línea representa una relación. Las etiquetas en las líneas representan los verbos que definen las relaciones entre las entidades. (De una manera simplificada).

¿Pero cómo dibujé ese mapa?

Empieza por tu entidad principal

Esto es muy fácil, porque 9 de cada 10 veces, tu entidad principal es el negocio para el que estás creando el sitio web. Lo más probable es que no crees una colección para ella, porque todo el sitio web equivale a una descripción de esa entidad, sus componentes y las relaciones entre ellos.

Así que, entidad principal: listo.

Expande con tus entidades subsidiarias

Para empezar a completar tu mapa, tendrás que pensar en las cosas que componen tu entidad principal desde la perspectiva del usuario final. Y por "usuario final", me refiero a las personas que terminarán usando el sitio. Eso incluye, entre otros, al cliente para el que estás creando el sitio.

Desde una perspectiva empresarial —y, por tanto, probablemente desde la perspectiva de tu cliente—, tu entidad principal consta de un montón de unidades de negocio: finanzas, recursos humanos, I+D, etc.

Pero desde la perspectiva del usuario final, una editorial publica libros. (¡Zas, entidad!) Lo hacen con la ayuda de autores. (¡Zas, entidad!) Y los autores suelen escribir sus libros en uno o más géneros. (¡Zas, entidad!)

¿Te fijas en cómo puedes invocar todas las entidades asociadas con frases sencillas? ¿Y en cómo los verbos conectan cada entidad para formar las relaciones entre ellas? Es así de fácil.

Por supuesto, todas estas entidades se relacionan con la editorial de formas más complejas, pero merece la pena mantenerse bastante abstracto en esta etapa. La mayoría de esas relaciones más complejas, como "la editorial paga al autor", no importan para el contexto del sitio web. Además, otras relaciones te vendrán a la mente a medida que diseñes el sitio. No hay nada de malo en anotar esas relaciones adicionales ahora, solo ten en cuenta que no hay necesidad de ser exhaustivo en esta etapa.

Consejo profesional: no olvides que "tiene" y "es" también son verbos. "Tiene" puede ser útil si te cuesta encontrar otro verbo más descriptivo. "Es", por supuesto, es menos útil, ya que solo establece una equivalencia.

Haz zoom en cada entidad para definir sus componentes

Ahora, puedes pensar en las entidades de un ecosistema de contenido como algo fractal. Es decir, cada una contiene sus propias entidades subsidiarias, que tienen sus propias interrelaciones, y cada una de ellas contiene sus propias entidades subsidiarias y... bueno, básicamente es una cadena infinita a partir de ahí.

Así que, ahora mira cada una de las entidades de tu mapa y piensa en las entidades subsidiarias que se combinan para formar la entidad de nivel superior.

Por ejemplo, los elementos de un libro incluyen:

  • Autor
  • Título
  • Fecha de publicación
  • Género
  • Número de páginas
  • Portada
  • Precio
  • ISBN (un sistema internacional para catalogar libros)
  • Formato (es decir, tapa dura, tapa blanda, etc.)
  • Tipografías
  • Personajes

¿Te fijas en cómo «autor» y «género» aparecen en la entidad «libro»? ¡Es una señal importante! Significa que, al modelar esta entidad «libro» en nuestras Colecciones, tendremos que incluir referencias (o multirreferencias) a esas Colecciones.

Si no hubiéramos pensado ya en el «autor» y el «género» como sus propias entidades, ahora sabríamos que debemos añadirlos a nuestra lista de entidades. Y como un libro podría tener más de un autor o género, sabemos que la Colección de Libros necesitará multirreferencias a esas Colecciones.

Ten en cuenta que algunos de los elementos de esta entidad «libro», aunque describen el libro a la perfección, probablemente no sean necesarios para el sitio web. Las tipografías y los personajes, por ejemplo, podrían considerarse totalmente opcionales, principalmente porque rara vez se utilizan a la hora de decidir una compra.

También podríamos haber añadido «Serie» para organizar los libros que forman parte de una saga, como una trilogía. Pero como eso solo se aplica a un número relativamente pequeño de libros, queda a tu criterio incluirlo o no en tu esquema.

Ten en cuenta que estas decisiones dependen realmente de tu entidad principal —el cliente o el tema del sitio— y de sus estrategias de marketing. Si estás creando un sitio para una editorial de ciencia ficción o fantasía, donde las sagas son bastante comunes, es posible que necesites una Colección de Series.

Ahora que hemos terminado con la entidad «libro», podemos seguir el mismo proceso con las demás entidades de nuestro mapa. Mientras lo haces, mantente atento a las características que aparecen en varias entidades: son pistas excelentes para identificar relaciones que serán relevantes en el sitio web.

El género, por ejemplo, incluiría razonablemente una característica de «libros». Es hora de otra multirreferencia, y de mostrar una lista estupenda de libros en cada página de género.

¿Y por qué hacemos todo este inventario? Esperamos que a estas alturas sea evidente, pero por si acaso: estamos creando nuestras Colecciones y sus respectivos campos, aunque sea de forma abstracta.

Tras repasar rápidamente cada entidad y sus características, he obtenido el siguiente mapa:

Consejo profesional para la creación de campos

Es muy fácil olvidar algún elemento clave de una entidad al definir sus campos. (¡Por ejemplo, olvidé por completo incluir la "fecha de publicación" mientras escribía el primer borrador de este artículo!). Afortunadamente, el CMS de Webflow es flexible en este aspecto: siempre puedes añadir y completar nuevos campos cuando los necesites.

Pero, como en casi todo, es mejor hacer el trabajo duro desde el principio. Y para eso, me gusta recurrir a algunos recursos. Permíteme presentarte (o reintroducirte) a mi viejo amigo, Schema.org:

Schema proporciona un lenguaje para clasificar y definir objetos de una manera que resulta amigable para el Knowledge Graph de Google y una variedad de otras herramientas ontológicas. ¡Lo cual puedes usar perfectamente en Webflow! Pero ese es un tema para otra publicación.

Por ahora, solo quiero señalar lo increíblemente útil que puede ser para estructurar tus Colecciones. Si tienes una entidad en tu sitio que aparece en Schema, tienes una fuente lista para usar de características de entidad que puedes trasladar fácilmente a campos de Colección. Muchas más características de las que probablemente necesites, pero aun así:

Súper útil.

El proceso de diseño web moderno

Descubre los procesos y herramientas detrás de los sitios web de alto rendimiento en este libro electrónico gratuito.

→
↗
►
↓
←
↑
Leer ahora

Considera los sistemas de filtrado

Dado cualquier dominio —en este caso, un conjunto de libros de una editorial específica—, hay muchas probabilidades de que la gente quiera buscar dentro de un subconjunto de todo lo que contiene ese dominio.

Después de todo, hay personas que leen vorazmente, pero solo dentro de los límites de la ciencia ficción. Otros no leerán ciencia ficción en absoluto a menos que sea de Catherynne Valente (quien es increíble, por cierto).

Estos te ofrecen otra gran ruta para definir qué necesita una Colección y qué no. Así que, para cualquier entidad sobre la que no estés seguro de si representarla con una Colección, hazte dos preguntas:

  1. ¿Podría querer filtrar por ella?
  2. ¿Me gustaría tener una página dedicada para cada elemento de la Colección?

Si la respuesta es sí a ambas, tienes una Colección entre manos.

Pero volviendo a nuestro ejemplo, los posibles sistemas de filtrado incluyen:

  • Autor
  • Género
  • Premios

Ya hemos cubierto Autor y Género como entradas de alto nivel dignas de una Colección. Pero Premios es un matiz interesante. Actualmente solo lo incluimos como una característica (léase: campo) de las Colecciones de Autor y Libro.

Pero dado que Premios aparece ahora en más de una Colección y es una característica por la que podría querer filtrar, se está convirtiendo rápidamente en un firme candidato para una nueva Colección. Después de todo, sé que a mí me encantaría leer todos los ganadores del premio Nebula en algún momento. Los premios también son un gran incentivo de compra, ya que son como reseñas colectivas, pero provenientes de los mejores lectores.

Filtrado, referencias y referencias múltiples

Otra pregunta que es útil hacerse al crear Colecciones es:

¿Podría un elemento de otra Colección tener múltiples referencias a esta posible Colección?

Por ejemplo, muchos autores escriben en más de un género. Ian Banks, sin ir más lejos, escribe tanto ciencia ficción como narrativa literaria, por lo que poder etiquetarlo con ambos géneros sería muy útil para el usuario final. Se podría argumentar que esta es la forma «más fiel» de modelar a un autor en tu CMS, pero esta elección plantea tanto repercusiones técnicas como cuestiones epistemológicas.

En el aspecto técnico: mostrar el mismo contenido mediante varios métodos de filtrado puede ser problemático para el SEO. Para los robots de Google, la ficha de Ian Banks en la página de «Autores de ciencia ficción» y la de «Autores literarios» parecen contenido duplicado.

Probablemente no sea un gran problema, ya que no hay muchos autores que se muevan en ambos mundos y, por tanto, esas dos páginas deberían ser lo suficientemente únicas a ojos de Google como para seguir posicionando bien. ¡Pero sin duda podría ser problemático con tus autores que mezclan fantasía y ciencia ficción!

El otro problema es que no puedes filtrar listas de colecciones en dos dimensiones con el CMS de Webflow (al menos no de forma nativa). Así que, si tienes una página de «Todos los autores», no podrías configurar un mecanismo de filtrado para mostrar todos los autores que escriben tanto fantasía como ciencia ficción, o para mostrar todos los autores que hacen una cosa o la otra, dicho sea de paso.

En el frente epistemológico, tenemos un argumento sólido de que asignar un género a un autor no es el camino lógico. Al fin y al cabo, un escritor es solo un escritor, con la libertad de escribir en el género que quiera. Por otro lado, tendemos a pensar que cualquier libro puede asignarse con bastante facilidad a uno o varios géneros. Es más fácil concebir que un género pertenezca a un libro que a un autor, por lo que podría ser mejor idea hacer referencia al género solo en la colección de libros, no en la de autores.

Lo que nos lleva a:

Respeta los modelos mentales de filtrado y ordenación de los usuarios

Algo que es fácil pasar por alto al considerar tus métodos de filtrado y ordenación es cómo utiliza la gente esas herramientas. Por ejemplo, al crear una colección de «Autores», es muy fácil recurrir por defecto al campo «nombre» predeterminado.

Pero en una librería, los autores se ordenan alfabéticamente por apellido, algo que no puedo hacer si solo utilizo un campo de nombre plano. Para admitir ese marco de referencia estándar a la hora de ordenar autores, tendré que dividir el nombre en dos campos: nombre y apellidos.

Ten en cuenta la gobernanza de contenidos

Un aspecto de este debate en el que los estrategas de contenidos suelen dedicar mucho tiempo a pensar es la cuestión de la gobernanza.

Es decir, ¿cómo no solo publicamos el contenido adecuado para las personas adecuadas, sino que también gestionamos ese contenido a largo plazo?

Gestionar el contenido resulta más sencillo cuando la estructura de tu colección está diseñada para controlar las entradas. Para ilustrarlo, volvamos rápidamente a nuestra idea de tener una colección de premios en el sitio web de nuestra librería.

Una colección de premios sería muy útil para filtrar, ordenar y crear páginas de destino atractivas para destacar los libros premiados. También podríamos querer limitar qué premios merece la pena destacar. Al fin y al cabo, existen miles de premios literarios, desde galardones de alto perfil como el Nobel, el Man Booker, etc., hasta triunfos menores como el premio anual de una pequeña editorial. Es poco probable que estos últimos atraigan a la mayoría de los lectores, así que quizá queramos centrarnos en los más importantes.

Tener una colección de premios también será útil para controlar la presentación del premio. Por ejemplo, el Man Booker a menudo se abrevia simplemente como «el Booker». Si queremos evitar esa abreviatura, tener el Man Booker como entidad en nuestra base de datos nos permite hacer referencia a él de forma coherente con mayor facilidad.

Ahora bien, obviamente, las colecciones no son infalibles ni mucho menos. Y la gente sigue teniendo la capacidad de hacer referencias incorrectas en cualquier lugar donde se les permita escribir libremente.

Sin embargo, lo que sí hacen las colecciones es simplificar la gobernanza. Cuando sabes que tu contenido está bien fragmentado en las mismas piezas, elemento tras elemento, aprendes qué buscar, qué espera el sistema y cómo puedes utilizar ese contenido más adelante en diferentes contextos. Lo que facilita no solo la gobernanza, sino también la reutilización.

Controla tus mensajes de marketing a través de tu CMS

Cualquiera que haya comercializado un producto o servicio sabe que tienes una forma determinada de hablar de sus características y ventajas, y nunca quieres desviarte de ese mensaje.

Afortunadamente, un CMS puede ayudarte a controlar ese mensaje. Para seguir con el sitio web de nuestra librería, supongamos que acabas de lanzar un nuevo lector electrónico que te interesa promocionar a través del sitio.

Con un poco de investigación de mercado, has establecido que a la gente le encanta la portabilidad, la enorme capacidad de almacenamiento y la posibilidad de descargar cualquier libro en cualquier momento. Lo que no les gusta es la luz azul de la pantalla, la falta total de ese olor a libro antiguo y la extraña carcasa de plástico.

Así que, cuando añades el lector electrónico como una entidad en tu sitio web, también puedes convertir sus diversas características en entidades que se puedan referenciar en otras colecciones (idealmente, a través de una colección de Características y Beneficios). De esa manera, cuando un nuevo redactor se una al equipo y pregunte cómo se vende el lector electrónico, ¡solo tendrás que remitirlo al CMS!

Gestiona los recursos con inteligencia

En este momento, Webflow plantea dos desafíos para quienes buscan utilizar numerosas imágenes en el contenido de sus colecciones:

  1. Los elementos individuales de una colección pueden requerir un número variable de imágenes. Es decir, tu portafolio podría necesitar 8 imágenes para ese trabajo que hiciste en una campaña publicitaria de HP, pero solo 4 para esa aplicación móvil que acabas de diseñar.
  2. El gestor de recursos es exclusivo del Diseñador. Esto significa que tus clientes tendrán que pedirte las imágenes para completar los elementos y páginas de la colección, o buscarlas por su cuenta (lo que podría derivar en infracciones de derechos de autor, imágenes de mala calidad y otras pesadillas para el diseñador).

Podrías solucionar esto decidiendo un número máximo de imágenes por elemento y asignando esa cantidad de campos de imagen a la colección. O simplemente podrías usar campos de texto enriquecido. Pero ambas opciones parecen un poco chapuceras y ninguna resuelve los problemas que conlleva el segundo punto.

¿Mi sugerencia? Crea tu propio gestor de recursos.

Así es: simplemente crea una colección de imágenes, identifica las otras colecciones que necesiten imágenes y añade campos de referencia múltiple a esas. Para facilitar su uso, podrías añadir categorías a la colección de imágenes (para que los usuarios del CMS puedan filtrar por categoría) o crear un sistema de nomenclatura (por ejemplo, para un sitio de portafolio, añade el nombre del cliente al principio de las capturas de pantalla asociadas para que todas se agrupen).

La otra ventaja de crear tu propia colección de imágenes es que tus clientes o usuarios del CMS podrán acceder a ellas a través del Editor. Puede que tengas que enseñarles cómo descargar las imágenes desde el Editor, pero es más sencillo que mantener una cadena de correos interminable o una carpeta compartida en la nube.

Nunca descuides la experiencia del autor (AX)

Cuando diseñas un sitio basado en un CMS, realmente asumes el papel de diseñador de producto. Ya no estás "solo" diseñando una experiencia para los usuarios finales del sitio web. También estás a cargo de la experiencia de los usuarios del CMS, lo que comúnmente se conoce como "experiencia del autor" o AX.

Algo importante a tener en cuenta al crear esa experiencia del autor es que la mayoría de las personas no comparten la pasión de los diseñadores de contenido por los datos bien estructurados. Cuando piensan en escribir una página web, probablemente lo ven como algo equivalente a escribir un correo electrónico: hay un campo sin formato que deben rellenar con texto, imágenes y lo que sea, y cuando pulsan Publicar, ¡bum!, ya hay una página nueva.

Esto significa que, cuando inicien sesión en el CMS que has diseñado con tanto cariño y vean una docena de colecciones llenas de contenido perfectamente atomizado... podrían sentirse un poco confundidos. Y cuando escribir una entrada de blog se sienta menos como redactar una obra maestra y más como rellenar un formulario gubernamental, podrían sentirse... un poco aburridos.

¡Eso no significa que debas abandonar tus estructuras meticulosas en favor de bloques informes de texto enriquecido! Solo significa que necesitas encontrar un equilibrio entre estructura y experiencia. Céntrate en añadir estructura donde realmente importe y donde no cree demasiada fricción para tus autores.

A modo de ejemplo, me voy a criticar a mí mismo un momento.

Hace poco, construí un sitio basado en CMS para una organización sin ánimo de lucro que organiza varios eventos literarios y de lectura en mi zona. Como parte de ello, creé una colección de autores que incluía un campo de biografía. Mientras creaba esta colección, leí docenas, si no cientos, de biografías de autores, y me di cuenta de que 99 de cada 100 biografías empiezan así:

[NombreDelAutor]

[NombreDelAutor] es…

Así que decidí diseñar un componente de biografía que solucionara eso, referenciando el nombre del autor como un elemento de bloque y continuando la biografía como otro elemento de bloque debajo del nombre. Luego añadí una nota en el campo de biografía indicando que los futuros autores deberían omitir la primera mención del nombre del autor en la biografía. De esa manera, cada biografía se vería así:

[NombreDelAutor]

¿Es ...

Más limpio, sencillo y sin las repeticiones del nombre del autor.

Por supuesto, ni un solo autor del sitio ha hecho caso a mis indicaciones, y ahora todas las biografías se ven así:

[NombreDelAutor]

[NombreDelAutor] es…

Bueno, es una degradación elegante, por así decirlo. Algunas biografías se ven impecables y el resto se ve como la mayoría. No pasa nada.

¡Pero sí que perdí un poco el tiempo ahí!

Para más consejos sobre cómo diseñar pensando en la experiencia del autor, echa un vistazo a nuestro artículo: “5 consejos para diseñar pensando en los creadores de contenido”.

¿Tienes otros consejos sobre cómo estructurar contenido dinámico?

Estoy segurísimo de que muchos de ustedes han descubierto sus propios flujos de trabajo y mejores prácticas para esquemas de contenido. ¡Así que no se los guarden! Compartan sus ideas en los comentarios de abajo.


Última actualización
February 22, 2018
Categoría

Artículos relacionados

Cómo añadir filtrado y ordenación dinámicos a tus sitios web en Webflow
Cómo añadir filtrado y ordenación dinámicos a tus sitios web en Webflow

Cómo añadir filtrado y ordenación dinámicos a tus sitios web en Webflow

Cómo añadir filtrado y ordenación dinámicos a tus sitios web en Webflow

Desarrollo
Por
Anna Sabatini
,
,
Leer artículo
Personaliza tus botones de redes sociales con el CMS de Webflow
Personaliza tus botones de redes sociales con el CMS de Webflow

Personaliza tus botones de redes sociales con el CMS de Webflow

Personaliza tus botones de redes sociales con el CMS de Webflow

Diseño
Por
Alex Nichol
,
,
Leer artículo
Ahora puedes (por fin) crear galerías dinámicas de CMS y Ecommerce
Ahora puedes (por fin) crear galerías dinámicas de CMS y Ecommerce

Ahora puedes (por fin) crear galerías dinámicas de CMS y Ecommerce

Ahora puedes (por fin) crear galerías dinámicas de CMS y Ecommerce

Dentro de Webflow
Por
Gaby Izarra
,
,
Leer artículo
24 libros de diseño imprescindibles en 2024
24 libros de diseño imprescindibles en 2024

24 libros de diseño imprescindibles en 2024

24 libros de diseño imprescindibles en 2024

Diseño
Por
Rease Rios
,
,
Leer artículo
10 sistemas de navegación web únicos
10 sistemas de navegación web únicos

10 sistemas de navegación web únicos

10 sistemas de navegación web únicos

Diseño
Por
Jeff Cardello
,
,
Leer artículo
Por qué tu proceso de diseño debería empezar por el contenido
Por qué tu proceso de diseño debería empezar por el contenido

Por qué tu proceso de diseño debería empezar por el contenido

Por qué tu proceso de diseño debería empezar por el contenido

Diseño
Por
John Moore Williams
,
,
Leer artículo

verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo
verifone logomonday.com logospotify logoted logogreenhouse logoclear logocheckout.com logoreddit logothe new york times logoideo logoupwork logodiscord logo

Empieza gratis

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.

Empieza, es gratis
Ver demostración

Prueba Webflow todo el tiempo que quieras con nuestro plan Starter gratuito. Compra un plan de sitio de pago para publicar, alojar y desbloquear funciones adicionales.