¿Qué vas a aprender?

Este curso será tu primer acercamiento a la herramienta Bubble.io. Esta poderosa plataforma da una infinidad de posibilidades dentro del desarrollo web, que van mucho más allá de las plantillas y cajas que probablemente conoces para hacer sitios web. A lo largo de los módulos te familiarizarás con los menús y las funciones de Bubble mientras que, al mismo tiempo, entenderás los conceptos básicos que se requieren para hacer una red social: las diferentes páginas —para el perfil, los usuarios, el feed, etc.—, la funcionalidad de inicio de sesión y registro, la importancia de las bases de datos, y muchas cosas más.

Requerimientos

Lo único que necesitas para empezar a aprender es un computador y una conexión a internet. Aunque nuestra página es responsive para smartphones y tabletas, Bubble está diseñado para crear desde un computador, así que hacemos énfasis en su uso. Del mismo modo, aunque no es necesario, recomendamos tener alguna familiaridad con Twitter, para entender lo que lograrás en el proceso. Por último, si tienes alguna experiencia en sistemas de lógicas y plataformas de drag-and-drop, estas te serán muy útiles para aprender aún más rápido.

Descripción

Este curso cuenta con catorce módulos de instrucciones precisas para hacer una réplica de la red social Twitter. Junto con los pasos encontrarás ayudas visuales y tips que podrán ayudarte en el futuro para otros proyectos e iniciativas.

Pénsum

  • 2

    Sección 2: Función de inicio de sesión

    • Paso 1: Introducción al inicio de sesión

    • Paso 2: Crear tu primera forma de ingreso (Inputs)

    • Paso 3: Color de fondo

    • Paso 4: Color de borde inferior

    • Paso 5: Redondez de borde inferior

    • Paso 6: Define estilo de input

    • Paso 7: Crear grupo de etiqueta

    • Paso 8: Ajustar estilo del grupo de etiqueta

    • Paso 9: Añadir texto a la etiqueta

    • Paso 10: Configurar la alineación horizontal del elemento de texto

    • Paso 11: Color de borde condicional

    • Paso 12: Color de texto de etiqueta condicional

    • Paso 13: Crear el input de contraseña

    • Paso 14: Crear el botón de Inicio de sesión

    • Paso 15: Crear estilo de Botón

    • Paso 16: Crear las condiciones del botón

    • Paso 17: Crear una transición

    • Paso 18: Configurar las distancias entre los grupos

    • Paso 19: Crear un grupo Madre con ancho fijo para elementos de inicio de sesión

    • Paso 20: Introducción a los Workflows

    • Paso 21: Primer Workflow

    • Paso 22: Restablecer contraseña

    • Paso 23: Ventana emergente para restablecer contraseña

    • Paso 24: Workflow de restablecimiento de contraseña

    • Paso 25: Esconder el popup tras presionar ‘Enviar’

    • Paso 26: Mostrar el popup

    • Sección 2: ¿Qué opinas de nuestro Certificado de Bubble hasta el momento?

  • 3

    Sección 3: Ventana emergente de registro 1

    • Paso 1: Introducción al registro

    • Paso 2: Añadir el logo de Twitter

    • Paso 3: Añadir el título y texto de Call to Action

    • Paso 4: Añadir el botón de registro

    • Paso 5: Agrupar elementos de registro

    • Paso 6: Crear el Popup de registro

    • Paso 7: Recrear el estilo del Popup

    • Paso 8: Crear acción para mostrar el Popup

    • Paso 9: Recrear la primera página del Popup

    • Paso 10: Límite de caracteres en el input

    • Paso 11: Contador de caracteres

    • Paso 12: Botón ‘Siguiente’

    • Paso 13: Entender la paginación del registro

    • Paso 14: Agrupar elementos de la página

    • Paso 15: Crear tu primer estado

    • Paso 16: Configurar visibilidad del Registro página 1

    • Paso 17: Esconder la página 1 en el 'Elements Tree'

  • 4

    Sección 4: Ventana emergente de registro 2

    • Paso 1: Crear el grupo madre de la Página 2

    • Paso 2: Crear acción de navegación en el ‘Siguiente’

    • Paso 3: Crear el botón de ‘Volver’

    • Paso 4: Crear workflow para el ícono de Volver

    • Paso 5: Añadir el texto de Registro página 2

    • Paso 6: Entender las casillas de verificación

    • Paso 7: Añadir el primer Plugin

    • Paso 8: Crear el ‘Ionic Toggle’

    • Paso 9: Entender los botones tipo Toggle

    • Paso 10: Crear el segundo toggle

  • 5

    Sección 5: Ventanas emergentes 3 y 4

    • Paso 1: Crear página de contraseña

    • Paso 2: Condición para el botón de ‘Siguiente’

    • Paso 3: Crear página para subir foto

    • Paso 4: Crear la página de biografía del usuario

  • 6

    Sección 6: Creación de la acción de registro

    • Paso 1: Entender los campos de datos

    • Paso 2: Entender los nuevos campos que necesitamos

    • Paso 3: Crear los campos

    • Paso 4: Crear acción de registro

    • Paso 5: Configurar los valores de los campos

    • Paso 6: Configurar el valor de la foto

    • Paso 7: Configurar el valor para aceptar notificaciones de email

    • Paso 8: Crear condición de una acción

    • Paso 9: Placeholder (elementos temporales)

    • Paso 10: Celebrar por haber terminado el registro

  • 7

    Sección 7: Creación y navegación de páginas

    • Paso 1: Crear la página principal

    • Paso 2: Configurar el tamaño de la página

    • Paso 3: Crear el Side Bar

    • Paso 4: Añadir el primer elemento de navegación

    • Paso 5: Crear el resto de elementos de la barra de navegación

    • Paso 6: Crear el primer grupo reutilizable

    • Paso 7: Entender la pestaña de grupos reutilizables

    • Paso 8: Usar nuestro grupo reutilizable

    • Paso 9: Crear un grupo flotante

    • Paso 10: Insertar elemento reutilizable en el grupo flotante

    • Paso 11: Crear condiciones para el elemento de ‘Inicio’ en la barra de navegación

    • Paso 12: Revisa tu condición

    • Paso 13: Crear el encabezado

    • Paso 14: Crear las otras páginas

    • Paso 15: Crear todas las condiciones

    • Paso 16: Crear el workflow de la navegación

    • Paso 17: Todas las páginas creadas

    • Sección 7: ¿Qué opinas de nuestro Certificado de Bubble hasta el momento?

  • 8

    Sección 8: Creación del compositor de tweets

    • Paso 1: Introducción

    • Paso 2: Construir el grupo para el creador de tweets

    • Paso 3: Introducción al creador de tweets

    • Paso 4: Crear una imagen

    • Paso 5: Configurar el valor de imagen

    • Paso 6: Completar navegación desde la página de llegada

    • Paso 7: Entender tipos de datos personalizados

    • Paso 8: Crear el primer tipo de datos personalizado

    • Paso 9: Añade un campo de ‘Tweets’ al usuario

    • Paso 10: Crear el primer ‘Data Thing’ desde un workflow

    • Paso 11: Crear una alerta

    • Paso 12: Crear acción de la alerta

    • Paso 13: Prueba el mecanismo de tu Tweet

    • Paso 14: Entender la pestaña de App Data

  • 9

    Sección 9: Creación del primer grupo de repetición

    • Paso 1: Introducción

    • Paso 2: Entender ‘Vertical Scrolling Layout’

    • Paso 3: Entender ‘Ext. Vertical Scrolling Layout’

    • Paso 4: Entender ‘Full List Layout’

    • Paso 5: Entender ‘Fixed Number of Cells Layout’

    • Paso 6: Entender ‘Horizontal Scrolling Layout’

    • Paso 7: Crear grupos de repetición para los tweets

    • Paso 8: Editar el tipo de grupo de repetición

    • Paso 9: Editar los elementos dentro de un grupo de repetición

    • Paso 10: Configurar el tipo de datos de ‘Celda tweet hija’

    • Paso 11: Entender ‘Group Data Access’

    • Paso 12: Añade información del usuario al tweet

    • Paso 13: Añadir el texto e íconos del tweet

    • Paso 14: Crear campos de datos para la funcionalidad del ‘Like’

    • Paso 15: Crear el primer workflow para funcionalidad del ‘Like’

    • Paso 16: Crear el estilo condicional

    • Paso 17: Añadir el contador de Likes

    • Paso 18: Crear la primera condición para activación del workflow

    • Paso 19: Crear la segunda activación del workflow

    • Paso 20: Cambiar el color del separador

    • Paso 21: Navegar a la página del tweet

  • 10

    Sección 10: Edición de página del Tweet

    • Paso 1: Configurar el tipo de datos de la página del tweet

    • Paso 2: Crear grupo madre de página del tweet

    • Paso 3: Añadir elementos al grupo del tweet

    • Paso 4: Crear tu primera forma o ‘Shape’

    • Paso 5: Copiar y pegar con Workflows

    • Paso 6: Crear un tipo de datos de Comentario

    • Paso 7: Crear grupo para creación de comentario

    • Paso 8: Mostrar la lista de comentarios

    • Paso 9: Atrás

    • Paso 10: Probar la página del Tweet

    • Sección 10: ¿Qué opinas de nuestro Certificado de Bubble hasta el momento?

  • 11

    Sección 11: Edición de página del Usuario

    • Paso 1: Introducción

    • Paso 2: Crear una lista de usuarios

    • Paso 3: Crear los campos de datos de los seguidores

    • Paso 4: Crear Workflows para el botón de Seguir

    • Paso 5: Crear condición del Workflow

    • Paso 6: Crear texto condicional para el botón de Seguir

    • Paso 7: Crear workflow de navegación

  • 12

    Sección 12: Edición de página del Usuario Individual

    • Paso 1: Introducción

    • Paso 2: Crear la página de información del perfil

    • Paso 3: Configurar parámetros de imagen tipo ‘Shape’

    • Paso 4: Crear el resto de elementos del perfil

    • Paso 5: Crear las pestañas de tweets y seguidores

    • Paso 6: Crear estado y condiciones de la pestaña

    • Paso 7: Crear la segunda pestaña

    • Paso 8: Crear workflow del estado de la pestaña

    • Paso 9: Crear grupo para todos los tweets

    • Paso 10: Crear grupo de todos los seguidores

    • Paso 11: Configurar condición de visibilidad

    • Paso 12: Entender ‘Collapsing Height’

    • Paso 13: Crear ‘Collapsing Height’

  • 13

    Sección 13: Edición de página de Perfil

    • Paso 1: Crear la página de perfil

    • Paso 2: Agregar data para enviar a la página

    • Paso 3: Crear el botón y popup de ‘Editar’

    • Paso 4: Añadir todos los elementos del popup

    • Paso 5: Usar ‘Auto-binding’

    • Paso 6: Crear primer rol de privacidad

    • Paso 7: Terminar de editar el popup

    • Paso 8: Editar el botón de ‘Cerrar sesión’

  • 14

    Sección 14: Edición de página de Explorar

    • Paso 1: Introducción

    • Paso 2: Cambiar la fuente de tweets en el Home

    • Paso 3: Ordenar la lista de tweets

    • Paso 4: Añadir el encabezado y los tweets

  • 15

    Entrega final

    • Entrega final

    • ¿Cuál fue tu opinión final de nuestro Certificado de Bubble?