En esta cuarta y última parte de nuestra serie, abordaremos la integración de API con un tutorial rápido sobre cómo configurar Zapier. También veremos lo sencillo que Webflow hace el proceso de entregar tu sitio a los creadores de contenido. Pista: es pan comido.
Parte 4: Integración de API y creación de contenido
En la tercera parte de esta serie, vimos los pasos del seis al ocho para crear tu sitio de agencia en Webflow:
6. Aprovecha el poder de flexbox
7. Diseña interacciones lógicas que no saturen a los usuarios
8. Invierte la paleta de colores para mejorar la legibilidad
En la cuarta y última parte de esta serie, veremos los pasos nueve y diez:
9. Usa la integración de API del CMS de Webflow
10. Llama a tus creadores de contenido favoritos
Paso 9: Usa la integración de API del CMS de Webflow
No me meteré demasiado en tecnicismos con esto, ya que Webflow cubre gran parte de los aspectos técnicos de la integración de API.
Si no estás familiarizado con las API, no temas. Puedes pensar en una API como una de estas dos cosas: datos que una empresa o aplicación te permite usar en otro lugar, o una puerta de enlace para introducir datos en una aplicación o sitio web. Si las aplicaciones y los sitios web fueran un camión de tacos, las API serían las que suministran las tortillas y la ventanilla para llevar.
O tal vez necesito mejorar mis analogías...
Pero, ¿cómo te afecta esto? Bueno, te permite tomar información y datos de cualquier fuente que los exponga y ponerlos en tu sitio. Esto podría significar tuits, mapas, tablas de precios, inventario, imágenes... realmente cualquier cosa que se te ocurra.
Todo lo que necesitas hacer es encontrar sitios y aplicaciones que te permitan recibir esos datos y luego crear una Colección dentro de Webflow para capturarlos. Ah, y también necesitarás un repartidor (Zapier), pero hablaré de eso más adelante.
El primer paso para usar la API con Webflow es crear una Colección para los datos. Para el sitio de Bespke, quería mostrar las publicaciones más recientes de Dribbble que me gustaron.
Así es como se veía esa Colección:
Una vez que tuve esa Colección configurada, añadí un par de elementos de prueba para poder darles estilo en mi sitio. Ubiqué esa sección en la parte inferior de la página de inicio y utilicé un estilo e interacción similares a los de mi Colección destacada. Quería dirigir el tráfico a las publicaciones de Dribbble directamente, en lugar de a una página de Colección individual, para que el diseñador original recibiera el crédito adecuado.
Ahora, si observas de cerca la Colección que puse arriba, notarás que el campo de imagen no es en realidad una imagen, sino un enlace a una imagen.
Así es como se ve:
Y aquí tienes el fragmento de código que utilicé:
<a target="_blank" href="{Link Field}"><img border="0" alt="{Name Field}" src="{Image Link Field}" width="100%" height="200px"></a>
Configura Zapier
Zapier es un servicio que te permite conectar dos API entre sí. Puedes usarlo para algunas reglas de automatización, pero se vuelve mucho más potente con el CMS de Webflow.
El primer paso, obviamente, será crear una cuenta en Zapier.
Una vez hecho esto, haz clic en "Make A Zap" en la parte superior de la pantalla, empieza a escribir el nombre de tu aplicación de activación —en mi caso, Dribbble— y selecciona una opción de la lista de activadores disponibles. Tendrás que autenticarte con la cuenta que quieras usar, pero es cuestión de un par de clics, dependiendo del servicio. Zapier hace un gran trabajo facilitando una autenticación rápida.
Así es como se ve ese proceso:
Aprende flexbox de la forma más divertida...
Domina los fundamentos de flexbox a través de 28 niveles cada vez más desafiantes —¡y divertidos!—, sin escribir ni una sola línea de código.
Una vez que hayas seleccionado el activador y la acción que quieres realizar en Webflow, elige el sitio correcto de tu cuenta de Webflow y la colección que creaste para consumir el evento de la API.
Cuando lo hayas hecho, llegarás a una página que muestra todos los campos de la colección que configuraste en Webflow. Tendrás que rellenar cada uno de ellos con los datos de tu servicio y, al final, debería verse más o menos así:
Cada uno de los campos que tenga el logotipo de Dribbble se rellenará con contenido de Dribbble. Es importante que los datos que selecciones aquí coincidan con el tipo de datos que definiste en tu colección. Por ejemplo, si pongo el número de "me gusta" o el título de una publicación en un campo que espera un enlace, Zapier dará un error. Zapier no puede mostrarte los tipos de datos, así que te dejará poner cualquier cosa. Solo te encontrarás con el problema después de hacer clic en continuar e intentar realizar una prueba con una entrada anterior.
Una vez que hayas hecho todas las vinculaciones, el siguiente paso es probar la configuración. Hay muchas formas en las que esto puede salir mal, pero una vez que lo hagas bien, verás esta página:
Y entonces verás que se habrá añadido una nueva entrada de colección a tu sitio de Webflow.
¡Felicidades! Has dominado el arte de las integraciones de API y puedes presumir ante todo el mundo. #webflowandzapierbff4life #apihavethepower
Paso 10: Llama a tus creadores de contenido favoritos
Esta es una de las partes más fáciles del proceso. Ya has creado los esqueletos para tu contenido, has configurado las páginas para albergarlo, has diseñado todo y has creado las clases y las interacciones. Ahora solo necesitas a alguien que rellene el contenido.
Esa persona podrías ser tú, pero en la mayoría de los casos será alguien de marketing o un profesional independiente que no conoces. Quizás te preocupe tener que explicarle mucho a esa persona, documentar un sistema complejo o enseñarle a alguien cómo funciona el CMS.
Pero no temas, oh potentado de los píxeles, Webflow ha creado una plantilla para que la entrega a tus creadores de contenido sea pan comido.
Para usarla, simplemente duplícala en tu cuenta y ábrela. Podría guiarte paso a paso para usarla, ¡pero el propio sitio ya lo hace! Tómate tu tiempo, lee el texto y deberías ser capaz de entenderlo. Vuelve aquí cuando hayas terminado.
¿Ya has terminado? ¡Eso ha sido rápido!
Ahora puedes tomar el sitio tal como está —publicarlo y pasárselo a tus redactores— o ir a la página de la guía de estilo y personalizarlo. Esto te permite entregar algo que no solo ayuda a tus redactores a escribir, sino que además tendrá coherencia y no parecerá una plantilla improvisada.
Aquí tienes la guía del CMS que hice para Bespke.
No me volví loco con esto. Los H2, H3 y H4 no encajan a la perfección, pero nadie más que tú se dará cuenta.
Una vez que termines con todo eso, publícalo y... ¡voilà! No solo te ahorrarás escribir un correo eterno cada vez que alguien nuevo se incorpore al equipo, sino que además quedarás como un profesional de primera ante tus clientes, tal como siempre supimos que eras.
