Creando un formulario con Group Focus

Clase 4 de 19 • Curso de Apps No-code con Bubble: Interfaz y Funcionalidades

Ivan Santiago Salcedo Forero

student•

Para el equipo de producto, sugerencia, cuando el mouse este sobre la línea de tiempo del video, debería mostrar la imagen del video de ese segundo, para cuando regresamos al curso a buscar algo específico, esto lo hará mucho más fácil.

Xabier Mendoza

teacher•

Gracias por tu sugerencia Iván.

Hugo Montoya Diaz

student•

Como en Youtube. Excelente idea

Andrés Felipe Rivera Giraldo

student•

Una buena práctica que recomendaría para esta increíble herramienta de Bubble, y en lo que llevo de los ejercicios, sería la siguiente:

SIEMPRE poner los títulos a cada uno de los nuevos elementos que vayas creando (esto para evitar confusiones a futuro cuando tengas ya cientos o miles de elementos).
Por otro lado, un botón interesante y que puede ser muy útil es el que encontramos al hacer click derecho en cualquier elemento (el penúltimo):
Esto te ayuda a encontrar rápidamente el elemento con el que quieres interactuar en la barra de "Elements tree", una suerte de pestaña "Capas" como la que usa Photoshop.

Nelson Gonzalez Escalante

student•

Gracias por los consejos

Ignacio Corball

student•

Hasta el momento así voy. Se me hizo muy sencillo comenzar a crear ya que enseñas muy bien!

Pilar Rueda Delvalle

student•

Hola Ignacio, tengo una pregunta: ¿Cómo hiciste para que en el input te quedara esa linea abajo de "escribe el nombre del proyecto"? Muchas gracias

Leidy Julieth Herrera Torres

student•

Buen día. Entiendo que un GroupFocus se puede colocar en cualquier parte de la pantalla, pero ¿Qué diferencia funcional existe entre un GroupFocus y un PopUp?

Xabier Mendoza

teacher•

Hola Leidy. Precisamente, como indicas en sus pregunta, un grupo focus puede mostrarse en cualquier lugar, mientras que un pop-up siempre aparece centrado. Adicionalmente, cuando muestras un pop-up, el resto de la página se oscurece y queda inhabilitada, cosa que no ocurre con el focus.

Ivan Camilo Martinez Mendieta

student•

También se puede editar el estilo en otro orden; primero le das el estilo al elemento; color, forma, tipografía, etc. y luego le remueves el estilo por defecto y le das crear estilo desde el mismo dropdown sin irte a la pantalla de estilos.

Xabier Mendoza

teacher•

Es correcto Ivan, sin embargo, es recomendable definir los estilos previamente, en base al diseño que quieres utilizar, en lugar de hacerlo 'sobre la marcha'.

Julia Herbas

student•

Buenos días profesor ¿Como adiciono Bubble, Familia y trabajo? No tengo experiencia en desarrollo de app y si me pudiera orientar Gracias la excelente calidad de clases y le envió un gran saludo desde Bolivia

Xabier Mendoza

teacher•

Hola Julia, en mi caso mi aprendizaje supuso un buen número de fines de semana, noches y algunas vacaciones aprendiendo, practicando y experimentando. Afortunadamente, cuento con una familia comprensiva que me apoyó en el proceso.

Esto no es diferente de cualquier otro proceso de aprendizaje. Muchos escritores o diseñadores gráficos que hoy han hecho de ello una profesión, comenzaron así.

Lo importante es no perder el ánimo y la ilusión, habrá cumbres y valles pero, pasado un tiempo, seguro estarás satisfecha del esfuerzo.

Sergio Ardila

student•

Hola, cuando hago el condicional para el hover del botón cancelar el botón muestra los bordes pero también se aumenta de tamaño![. No encuentro qué puede ser. Alguien que me dé una mano, por fa. Gracias!

Xabier Mendoza

teacher•

Sergio, te recomiendo que revises las propiedades del estilo que has asignado al botón. Si en el condicional de ‘hover’ has incluido un cambio en el grosor del borde, podría ser la razón del efecto que comentas.

Joaquín Ricardo Svoboda Abregú

student•

Cuando lo selecciono como columna al grupo focus instantáneamente desaparece y ya no puedo continuar con las siguientes indicaciones

Xabier Mendoza

teacher•

¿Has comprobado si el grupo está en la esquina superior izquierda? Por defecto, si no asignas un elemento de referencia, los grupos focus se muestran en el punto 0,0 de la pantalla.

José Miguel Pozo Arrieta

student•

Hola, en las condicionales, no me sale " isn't logging in " solo aparece "logging in" . Alguien puede ayudarme?

Xabier Mendoza

teacher•

José Miguel, este condicional cambio recientemente y ahora dice 'is logged out', que sería lo mismo que isn't logged in.

Jeisson Espinosa

student•

Información resumida de esta clase

#EstudiantesDePlatzi

El elemento group focus lo usamos cuando quiera posicionar este contenedor relativamente a otro
Es importante darle un identificador a los elementos
Dentro de los elementos tipo Input podemos definir que tipo de dato estará recibiendo este input
Aprender a utilizar la herramienta de estilos globales nos ahora mucho tiempo
Lo efectos tipo Hover los encontramos en la pestaña condicionales

Brayan Leonardo Velasquez Gutierrez

student•

La forma en que yo lo resolvi fue colocando un condicional al button "Crear Proyectos" que cambiara de color (rojo oscuro) cuando el input "Nombre Proyecto" no estuviera vacio:

Paolo Guelfi

student•

gracias

César Andrés Baudi Ventura

student•

Veo más fácil que en vez de usar una condicional para editar los estilos de un texto, hacer lo siguiente

1.- Si ya hay un estilo de Bubble que te guste, seleccionalo 2.- Dale "Remove Style"

Al darle "Remove Style" lo que harás es que te queden todas las propiedades del estilo que seleccionaste PERO podrás editarlas sin afectar a todos los elementos que usen ese estilo.

Me parece mejor que usar un condicional :thi

Francisco Antonio Rivera Viveros

student•

Hola en mi caso resolví el Reto de la siguiente forma

René Trujillo

student•

¿Cómo sientes el curso?

Xabier Mendoza

teacher•

Francisco, para botones no ‘clickables’, te recomendaría utilizar colores pálidos o grises, de modo que el usuario interprete que el botón no esté activo.

Klever Dario Hidalgo Alban

student•

Saludos. Cuando creo el GroupFocus me aparece solo la esquina del mismo; una vez que hice todos los pasos desaparece de la pantalla. No es la visibilidad, si está funcionando en Preview, pero no lo puedo visualizar mientras lo edito. Intenté enviándolo al frente, revisando el Container Align de todos los grupos y del Index, sin éxito alguno. Ayuda por favor .

Klever Dario Hidalgo Alban

student•

Encontré la solución en Grid&Borders. Activando Show element Borders. Saludos comunidad.