Introducción Crear un Directorio Web NoCode

Darse de alta Gratis en Integromat

Hola chicos ¿Qué tal?

Bienvenidos al primer curso prémium de Code Que te Pillo. Lo estamos haciendo con un montón de ilusión y esperamos que os guste.

¡Sin más, vamos a empezar!

En este curso vamos a ver es como podemos crear un directorio o una página web normal (aunque en nuestro caso haremos un directorio) con WordPress.

directorio

En un primer momento puede parecer algo que ya habéis hecho un montón de veces, puede parecer algo más de lo mismo, pero ¡no os vayáis todavía!!, ya que vais a poder trabajar de una manera muy rápida. Ya que vamos a crear un directorio, sin tener que estar entrando en WordPress para añadir cualquier de los elementos del directorio. Para ello vamos a usar un montón de herramientas que vamos a ir viendo.

Vamos a ir paso a paso porque este curso no es básico, lo hemos catalogado como nivel intermedio, debido a que vamos a hacer cosas avanzadas.

Además, para que podáis realizar el curso sin problema, os vamos a facilitar tanto las herramientas como la plantilla, en las herramientas no referimos sobre todo a Integromat que es donde podéis tener más dificultad.

Como decimos, vamos a crear un directorio Web como siempre,

como hacemos con WordPress pero sin meter los datos en WordPress

Es decir, vamos a crear una tabla en Airtable (recordad que tenéis un curso básico de Airtable, de hecho, os recomendamos que lo veáis antes de hacer este curso), y vamos a ver como podemos hacer automáticamente que vaya todo a WordPress gracias a Integromat.

Integromat es una herramienta parecida a Zapier que nos va a permitir automatizar el proceso. Veremos en profundidad esta herramienta en el curso ;)

Para que veáis como funciona y lo que vamos a hacer, podéis ver la siguiente página.

ejemplo Directory

Esta es una página hecha con WordPress, como se ve en la imagen siguiente consta de diferentes listados.

Listados directorio

Ahora lo que vamos a hacer es que, gracias a Airtable, vamos a añadir los datos en este WordPress, para seguir con nuestra demostración nos iremos a nuestro Airtable de ejemplo

Airtable

Desde esta tabla añadiremos los datos y automáticamente nos aparecerán en nuestro WordPress.

Puede ser muy cómodo cuando estamos generando un directorio, es mucho más fácil añadir los datos en una tabla y que automáticamente aparezcan en WordPress, que entrar en WordPress cada vez que queramos actualizar un dato.

¿Cómo lo hacíamos hasta ahora sin usar estas herramientas? Mucha gente nos pregunta como importar un Excel en WordPress. El problema de hacer una importación, es que una vez hecha, ya trabajamos en WordPress y nos es más cómodo trabajar desde allí, sin embargo, desde Airtable es mucho más cómodo trabajar directamente.

Vamos a ponernos manos a la obra y vamos a hacer una prueba de lo que podremos conseguir.

Ejemplo Airtable

Partimos de nuestra tabla de Airtable y en la primera columna vamos a añadir los datos

Añadir datos Airtable

Estos datos los podemos añadir directamente en el cuadro de texto o hacer clic sobre el logo de ampliar para trabajar más cómodamente (como haremos nosotros)

Añadir datos Airtable

Como nombre pondremos "Cafetería Curso Directorio". En el cuadro Descripción pondremos una descripción de esta categoría. Aquí iremos poniendo formato al texto, elegiremos parte del mismo en negrita, otra parte con diferentes tamaños etc. como se ve en la imagen a continuación.

Airtable Descripción

En la opción Imagen añadiremos una imagen representativa, para ellos hacemos clic sobre Attach file

Airtable subir foto

La añadimos, y continuamos rellenando los datos que precisamos, ahora le toca el turno a la categoría.

Airtable categoría

Y elegiremos la opción de cafetería. En la opción "Listo para publicar" si lo tenemos activado, se va publicará y si no lo tenemos activado, no.

Airtable Categoría Listo para publicar

En la "fecha de publicación" elegiremos la fecha en la que queremos que estos datos se vayan a WordPress, nosotros pondremos la fecha de hoy

Airtable Fecha de publicación

Por el momento no añadiremos nada más, toda esta información que hemos añadido (ampliando el cuadro de texto) se podría haber añadido directamente en la tabla.

Una vez que hemos añadido estos datos, es donde entra a jugar Integromat.

Integromat

Integromat revisará, las veces que queramos al día, nuestro Airtable, puede ser cada quince minutos, una vez al día o lo que queramos y que corran todas las esferas que se ven en la imagen anterior. Esto es lo que vamos a aprender a hacer.

Integromat Run

En este caso simplemente vamos a iniciar el proceso, para ello hacemos clic sobre "Run once"

Así, una vez que hayamos añadido datos en Airtable, Integromat se encargará de automatizar todo el proceso y lo enviará a WordPress.

Aquí es donde se encuentra el fundamento de este curso.

Ahora si volvemos a nuestro WordPress y recargamos, ¿Qué vemos?

Nuevo Directorio Wordpress

Pues vemos el nuevo directorio "Cafetería Curso Directorio" y si hacemos clic dentro, veremos que aparece el contenido que habíamos metido antes en Airtable.

Contenido Airtable en Wordpress

Además si damos a editar este post, veremos que es plenamente funcional.

Editar Wordpress

Por lo que podemos editar desde WordPress aquel artículo que nos hayamos traído desde Airtable sin ningún tipo de problema. Mantiene la negrita..

Formato Wordpress texto de Airtable

Mantiene la foto, así como las categorías que hemos definido en Airtable, es decir, mantiene absolutamente todo para que podamos trabajar con ello como hemos hecho siempre.

Como veis es muy cómodo trabajar así, porque es mucho más cómodo trabajar desde nuestra base de datos de Airtable que entrando cada vez en WordPress

Base de datos Airtable

Esto que acabamos de ver es cuando creamos información, pero¿Qué pasa si actualizamos? vamos a verlo!.

Si en lugar del nombre "Cafetería Curso Directorio" ponemos "Cafetería Curso Directorio Actualizado" y también en la descripción cambiamos a "Horario Actualizado" y "Carta Actualizada".

Actualizamos directorio en Airtable

Por seguridad en nuestra tabla marcamos la opción de "Actualizarlo"

Airtable Actualizar

Volvemos a Integromat, y desde el flujo de trabajo de Actualización, hacemos clic en "Run once" (esto no hace falta hacerlo, ya que podemos tenerlo preparado para que se actualice de manera automática las veces que necesitemos al día).

Flujo 2 Integromat

Integromat de esta manera detecta que hay un contenido nuevo en Airtable y lo envía a WordPress

Por lo que si ahora vamos a nuestro WordPress y actualizamos (Recordemos que pusimos la palabra actualizado en varios lugares para comprobar que lo ha hecho bien)

WordPress actualizado desde Integromat

Vemos que todo lo ha actualizado perfectamente.

Como veis es una herramienta increíble, por lo que este curso nos parece que es muy interesante y lo vamos a ver en los próximos vídeos.

En este primer Tutorial de presentación queríamos enseñaros qué vamos a hacer, así como una pequeña demostración para que veáis como funciona.

También destacar, como hemos dicho al principio, que este curso es intermedio, es decir, no es un curso ni avanzado del todo ni es básico por lo que no os frustréis si alguna cosa no sale a la primera.

Lo que queremos también, en este primer curso, es que veáis la potencia de las cosas que vamos a hacer. Haremos cosas más sencillas pero también otras más complejas. Lo bueno es que

no vamos a usar código para ellas, va a ser todo a través del ratón.

Además, de todo lo que hagamos, os pasaremos la información, para que no partáis de cero y os valga todo el trabajo que nosotros ya hemos realizado.

Queremos convertir Code Que te Pillo en la mayor librería de resolución de problemas y creación de proyectos con herramientas No Code .

Por eso, hemos empezado fuerte, porque veréis que es algo tremendamente interesante. Ahora lo estamos haciendo con WordPress que seguramente es una herramienta que ya usabais, pero más adelante vamos a utilizar una herramienta llamada Webflow, que es una herramienta absolutamente No Code para hacer páginas Web que también nos tiene enamorados. Como decimos, lo tenemos todo preparado!!.

Y recordad, vamos a hacer un motón de cursos distintos, muy dispares entre sí por lo que más allá que te interese hacer un directorio o no, échale un ojo, porque lo que vamos a hacer aquí lo puedes reutilizar para hacer un montón de cosas.

¡Por lo que nos vemos en el próximo vídeo!

Temario

Introducción Crear un Directorio Web NoCode
Introducción Crear un Directorio Web NoCode
8:50
Qué necesitamos y primeros pasos
Qué necesitamos y primeros pasos
8:36
Configurar Airtable
Configurar Airtable
16:06
Primera Automatización
Primera Automatización
11:16
Añadir comprobaciones
Añadir comprobaciones
10:49
Añadir Descripción y Tipo de Contenido
Añadir Descripción y Tipo de Contenido
7:03
Arreglar formato Markdown
Arreglar formato Markdown
4:13
Crear Categorías
Crear Categorías
8:46
Añadir imágenes
Añadir imágenes
10:48
Añadir campos Meta Input
Añadir campos Meta Input
6:50
Actualizar post
Actualizar post
9:10
Actualizar imágenes
Actualizar imágenes
16:42
Darse de alta Gratis en Integromat