Curso ONLINE
Curso en Diseño y Desarrollo NoCode
Presentación del curso
El diseño y desarrollo de productos digitales nunca ha sido tan accesible como con las herramientas NoCode. En este curso, aprenderás a utilizar Framer para crear interfaces interactivas y visualmente atractivas, y Airtable para gestionar bases de datos de forma eficiente. Juntos, exploraremos cómo integrar estas plataformas para construir aplicaciones web funcionales y responsivas. A lo largo de las clases, diseñarás landing pages, aplicaciones móviles y conectarás tu frontend con un backend basado en Airtable.
Al finalizar, serás capaz de diseñar prototipos funcionales que respondan a necesidades reales, utilizando las mejores prácticas del ecosistema NoCode.
Este curso forma parte del Postgrado en Hiperautomatización con IA y No Code. Si quieres ampliar tu formación, consulta el programa completo.
El diseño y desarrollo de productos digitales nunca ha sido tan accesible como con las herramientas NoCode. En este curso, aprenderás a utilizar Framer para crear interfaces interactivas y visualmente atractivas, y Airtable para gestionar bases de datos de forma eficiente. Juntos, exploraremos cómo integrar estas plataformas para construir aplicaciones web funcionales y responsivas. A lo largo de las clases, diseñarás landing pages, aplicaciones móviles y conectarás tu frontend con un backend basado en Airtable.
Al finalizar, serás capaz de diseñar prototipos funcionales que respondan a necesidades reales, utilizando las mejores prácticas del ecosistema NoCode.
Este curso forma parte del Postgrado en Hiperautomatización con IA y No Code. Si quieres ampliar tu formación, consulta el programa completo.
¿Qué aprenderás en este curso?
- Comprender las necesidades y requerimientos para diseñar y desarrollar un producto digital o aplicación corporativa desde cero.
- Dominar el uso de Framer para crear interfaces interactivas, responsivas y visualmente atractivas.
- Gestionar y visualizar datos de manera efectiva utilizando Airtable como backend.
- Integrar herramientas de diseño y bases de datos para crear aplicaciones web funcionales siguiendo la filosofía NoCode.
- Prototipar y desarrollar soluciones digitales rápidas y eficientes, optimizando recursos y tiempo.
¿Para quién es este curso?
- Profesionales del diseño que buscan crear interfaces interactivas sin necesidad de programar.
- Emprendedores y gestores de proyectos que quieren desarrollar productos digitales de forma rápida y accesible.
- Especialistas en marketing interesados en crear soluciones digitales personalizadas y escalables.
- Desarrolladores junior o estudiantes que deseen explorar el mundo del NoCode como complemento a su formación técnica.
- Cualquier persona interesada en el diseño y desarrollo de productos digitales sin conocimientos previos en programación.
El curso incluye:
Plan de estudios
Contenidos del curso:
- Bienvenida y presentación
Resumen
En esta primera clase nos introduciremos en el uso de Framer como herramienta NoCode para el diseño y desarrollo de productos digitales. Comenzaremos con una visión general de sus principales características y ventajas, y exploramos la interfaz de usuario. Posteriormente, abordaremos los fundamentos del diseño en Framer, incluyendo la creación de frames, layouts y el uso de componentes predefinidos. La clase culminará con una sección dedicada a la interactividad básica, mostrando cómo crear botones, enlaces y animaciones simples, con un proyecto práctico de diseño de una landing page.
Objetivos
-
Familiarizarse con la interfaz y las herramientas básicas de Framer.
-
Aprender a crear y estructurar frames y layouts para un diseño visual efectivo.
-
Utilizar componentes predefinidos y trabajar con texto e imágenes.
-
Implementar interactividad básica mediante botones, enlaces y animaciones simples.
-
Completar el diseño de una landing page como proyecto práctico aplicando los conceptos vistos en clase.
Temario
- Introducción
- Introducción
- Layouts
- Creando el primer layout
- Layouts con IA
- Layout básico, animaciones, dark mode
- Animaciones
- Animaciones - Parte 1
- Animaciones - Parte 2
- Animaciones - Parte 3
- Breakpoints
- Breakpoints
- Componentes y variables
- Componentes y variables
Resumen
En la segunda clase nos centraremos en preparar la conectividad entre Framer y Airtable, asegurándonos de que ambas plataformas estén listas para trabajar juntas de manera eficiente. Comenzaremos configurando la base de datos en Airtable, definiendo los campos necesarios para recopilar y gestionar datos como texto, correos electrónicos, números y fechas. Simultáneamente, diseñaremos un formulario en Framer que se adapte a diferentes dispositivos, aprovechando los conceptos de diseño responsivo y configurando los nombres de los campos para garantizar la integración adecuada. Este sprint establece los cimientos para el intercambio de datos entre las plataformas, preparando el terreno para la conexión en la siguiente fase.
Objetivos
-
Configurar una base de datos en Airtable con campos adecuados para gestionar la información enviada desde el formulario en Framer.
-
Diseñar un formulario en Framer que incluya tipos de campos variados, como texto, correos electrónicos, números y selecciones, asegurando que sea responsivo y funcional en diferentes dispositivos.
-
Configurar correctamente los nombres de los campos en el formulario para garantizar la integración adecuada con Airtable.
-
Preparar las plataformas para una conexión fluida y eficiente en la siguiente fase del proyecto.
Temario
- Introducción
- Introducción
- Formularios en Framer
- Formularios en Framer
- Elementos fijos 1 y 2
- Elementos fijos 1 y 2
- Importación a Framer desde Figma y Web
- Importación a Framer desde Figma y Web
- Exportación de Framer a HTML
- Exportación de Framer a HTML
- Comunidad Framer, instalar plantillas
- Comunidad Framer, instalar plantillas
- Introducción a Airtable
- Estructura y campos - Parte 1
- Estructura y campos - Parte 2
- Estructura y campos - Parte 3
Resumen
En la tercera clase, nos enfocaremos en conectar Framer y Airtable para permitir el intercambio de datos en tiempo real. Comenzaremos integrando el formulario creado en Framer con Airtable, asegurándonos de que los datos ingresados se almacenen correctamente en la base de datos. A continuación, exploraremos cómo crear automatizaciones en Airtable para gestionar los datos y diseñar interfaces que faciliten su manejo. Por último, utilizaremos el plugin de Framer para visualizar la información almacenada en Airtable directamente en una nueva página dentro de nuestra aplicación, cerrando el ciclo de interacción entre ambas plataformas.
Objetivos
-
Aprender a conectar el formulario en Framer con Airtable para enviar y recibir datos en tiempo real.
-
Configurar automatizaciones en Airtable para organizar y gestionar la información de manera eficiente.
-
Diseñar interfaces en Airtable que faciliten la visualización y edición de los datos registrados.
-
Utilizar el plugin de Framer para mostrar información dinámica almacenada en Airtable dentro de la aplicación.
-
Validar la interacción entre ambas plataformas, asegurando un flujo de datos fluido y funcional.
Temario
- Vistas, formularios y filtros
- Vistas, formularios y filtros
- Interfaces en Airtable
- Interfaces en Airtable
- Automatizaciones con Airtable
- Automatizaciones con Airtable
- Importación y exportación de datos
- Importación y exportación de datos
- Conectividad
- Conectividad Framer & Airtable 1
- Conectividad Framer & Airtable 2
- Conectividad Framer & Airtable 3
- Tokens en airtable
Nuestros alumnos opinan
¿Por qué elegirnos?
Descubre lo que nos diferencia
El 95% de nuestros alumnos está trabajando o emprende cuando finaliza sus estudios
Somos la mayor comunidad de profesionales digitales del mundo
Expertos en formación online: más de 15 años liderando la innovación del elearning
El 95% de nuestros alumnos consiguen mejorar su situación al finalizar sus estudios
Curso en Diseño y Desarrollo NoCode
U$S 510
Curso en Diseño y Desarrollo NoCode