Tutorial de Bubble.io para principiantes - Aprende Bubble.io en 2 horas [alemán]

Este tutorial de Bubble para principiantes te muestra cómo empezar a usar Bubble rápidamente. Aprenda a codificar en 2 horas! Juntos desarrollaremos una aplicación de chat paso a paso, como Whatsapp, Facebook Messenger o Telegram. Mira este tutorial y empieza a trabajar.

Transcripción del vídeo

En la primera parte, creamos el diseño y los componentes básicos de nuestro mensajero. Inicias una nueva página y te aseguras de que el elemento no es fijo y hacemos 1200 x 820 píxeles. Llamamos al conjunto "Studio Messenger". Ahora creamos una barra de navegación.

Y cuando hago la maquetación, me gusta tener una idea de la estructura de toda la página. Ahora, cuando hacemos el contenedor principal, éste consta de tres componentes. Y 60, X 0, ancho 320 y esto es ahora 740. Y el contenedor de la izquierda es donde tenemos el grupo de la lista de entretenimiento. Entonces tenemos exactamente lo mismo a la derecha. Eso también está ahí y es el grupo de información del perfil.

Y en el centro también tenemos otro color. Sólo que eso cambia después, por supuesto. Y en el medio tenemos otro grupo. Ahora es también 740 en la X 320 y un ancho de 560.

A este grupo lo llamamos "Conversaciones de grupo" Y aquí también, en la siguiente parte, vamos a estilizar los elementos individuales.

Ahora trabajaremos paso a paso y empezaremos con la barra de navegación primero. Para ello, es necesario instalar el plugin "Material Icons by Google". Un original plugin de Bubble. Arrastra toda la cosa. Y tomamos el icono del chat aquí. Y hacer el conjunto 32x 32 en el eje x 20 y centrarlo verticalmente en el eje y. Asegúrese de que esto está en el grupo y el estilo de la barra de navegación como el color #388DF5. Lo hacemos blanco y también creamos una sombra. Colores tomamos el #728137 y hacemos un 8 % de radios de desenfoque 12. Desplazamiento vertical 8. Y horizontal 0. Ahora terminamos el logo. Utilizamos Roboto como texto. Con un grosor de 500.

Podemos dejar el color. Ahora copiamos el texto. Aqui hacemos un grosor de 300. con 14 se ve mejor. la altura es de 18. aqui vemos que estan a 12 pixeles asi que hacemos de nuevo. si esta bien asi y ahora tenemos el logo aqui. En la barra de navegación tenemos en el otro lado. el grupo del si usamos ahora el en el perfil Actualmente estamos buscando un perfil de demostración para esto. Muy bien.

Hacer el conjunto 32/32 y una redondez de 250. Y verticalizar el centro de eso. Centro. Así que Arrange, "Centre verticalmente" primeros nombres hacen Roboto aquí también ahora. Nombres un poco más largos, así que creo que están bien. Y aquí voy a tomar un gris azulado aquí y vamos a embalar la transparencia a alrededor del 20%.

También tomamos un Roboto para la fuente. Pero 300. Y el tamaño es 10. Y lo que entonces se ve mejor cuando lo hacemos así. Pero creo que todavía en el color es visible y también desde la altura, podría hacer 12 ahora. Texto central. Entonces, si aquí 32.

Aquí tenemos 20 y 18 y aquí también 14. Y así estamos en 32. Que ahora la altura es correcta. Ponga todo en un grupo aquí y verticalice el grupo en el centro. Estar a la misma altura. Debe haber 16 píxeles entre el grupo Información del perfil y la imagen y este grupo debe tener un espacio de 24. Haga lo mismo aquí. Yo también quiero hacer 24 aquí. Lo haremos dinámicamente más adelante. Esto sólo es importante para el estilo. Lo siguiente es una forma, que abordaremos. 60.0.1 píxeles y tomamos un color que teníamos antes. Imagen de hasta 20 píxeles. Normalmente damos pasos de 8 píxeles, pero de nuevo siempre con un poco de tacto. Creo que 16 es lo óptimo.

Optimales pack ahora en el estilo también igual a esta campana puramente de nuevo uniformemente mismo color. Esta vez con una transparencia de 20, porque no es tan grande y tenemos el tamaño 24x 24. La distancia a esta la tomamos actualmente con 10 píxeles y eso significa que debe ser de 16 y organizarla verticalmente. Tomemos aquí de nuevo el separador 16 el separador.

Ahora necesitamos un mensaje que tenemos dos mensajes aquí. Por supuesto, esto también será dinámico más adelante. Roboto 300. Eso es blanco. Y el interlineado 1.0. ¿Y aquí cómo lo hacemos bien? Hacemos un estilo de fondo. Coge el color aquí y tienes que centrarlo. Necesitamos una redondez de 250 píxeles. Y ahora también centro aquí y un relleno horizontal de 2. Y entonces vemos que esto es 14x 14. Y entonces obtenemos exactamente este beell, que ponemos aquí. Y ahora seguimos necesitando el botón con el nuevo mensaje.

Hacemos un botón aquí. Cuando estilizamos esto, tenemos de nuevo que tomar Roboto 500. Establecemos el espaciado de las letras en 2 y el color en este azul. Y tomamos la redondez 6. centro, luego centro vertical. De nuevo, el objetivo es tener 16 píxeles.

Ahora, lo más importante, es que copiamos las cosas. Así también podemos controlar todo más fácilmente con Responsive. Por un lado, vemos aquí cuando se fija el logotipo del grupo y también aquí. Aquí copiamos los elementos y también aquí fixed-width y si ahora vamos a Preview, obtenemos una bonita navbar. Todavía no es dinámico. Eso vendrá en el siguiente paso, por supuesto. Hasta entonces, el lado izquierdo. Lo primero que vamos a hacer es quitar el color y adoptar un nuevo color en el fondo, que será un fondo azul y un banner de 70. Eso significa que no hay color en medio de la conversación, porque lo vamos a poner justo al frente. Trae al frente. Aquí no tenemos un color, pero tenemos un borde en el lado izquierdo sólido y de nuevo tomamos este gris azulado y con una transparencia de alrededor de 20 y en el lado derecho.

También con otra vez una transparencia de alrededor de 20. Debe mirar eso ahora. todavía aquí porque alguien como también el color fuera, puede mirar que ahora tenemos sólo esta esta estructura, ahora vamos en el lado izquierdo puramente, por lo que si ahora crear un nuevo elemento de texto y empezar aquí de manera diferente en el diseño sabe que la visión general de nuestros chats y conversaciones trae 20 y Roboto con la fuerza 500. color se ajusta a la línea de espacio es 1. Centro de texto vertical. Estamos a 24 de distancia tanto del eje x como del y de este grupo.

La altura debe ser de 30 y la anchura de unos 60 57. A continuación diseñamos un grupo de repetición en el que tenemos las caras de los compañeros. Grupo de repetición está en un lado 24 en el otro lado que actualmente tienen tanto como dos 72 píxeles. Hacemos un scroll horizontal aquí tenemos que hacer tipo de contenido "Usuario". Lo completaremos más tarde. Afortunadamente, eso está ahí. En la altura estamos en 24 actualmente estamos en 11 y aquí tenemos que hacer la altura del grupo de repetición un poco más grande. Necesitamos 5. No tenemos un estilo. Voy a hacer otro separador para revelar. En primer lugar, tomamos la imagen aquí. Ponemos la imagen aquí. Cambiaremos el tamaño a unos 40. Pondremos el nombre aquí. El nombre "Jenny" y no siempre trabajamos con los mismos colores.

Necesitamos un espacio entre líneas de 1. Aquí necesitamos 14. La altura necesaria aquí es también la X y aquí tenemos 5. Eso significa que debemos ir a 48 para que tengamos un espacio de ocho píxeles. Puedes ver que el espaciado es siempre similar aquí y ahora podemos eliminar el separador del grupo de repetición para que no destaque tanto. ¿Te muestro luego todos nuestros usuarios, estén o no activos? Lo construiremos más tarde. Tenemos 24 en adelante.

Ahora viene el siguiente que podemos realmente aquí. Este elemento ahora tratamos de formatear y tomar el elemento de texto ahora y ves aquí ahora cuando vamos a pegar el formato siempre obtenemos el mismo elemento sólo lo que tenemos que hacer también cambiar las alturas un poco aquí son suficientes para nosotros 24. Y también aquí 2 arriba son ahora es correcto. Y ahora necesitamos una lista de todas nuestras conversaciones aquí. Esto es lo primero que hacemos, que es de nuevo un grupo repetitivo número 272. Más tarde cambiaremos el Tipo de Contenido. Ahora, pero todavía estoy enviando mensajes de texto a la izquierda, así que a la derecha.

Aquí tenemos 16 de distancia. La razón es porque ahora y que le dan de inmediato, si ahora hacemos un grupo normal, ahora acaba de construir este campo de chat como estilo de fondo es plana. Redondeo de 6. Hacemos 0 aquí y en la Y: 8 para que tengamos 8 aquí y luego puede 16. Eso es 24. Altura hacemos 66 no perfecto porque en realidad siempre tenemos un factor de ocho y que sólo a 272 cada uno. A esto lo llamamos una llamada a la acción del entretenimiento. Porque luego hacemos clic en eso. Y ahora volvemos a coger este elemento y lo cambiamos, pero el tamaño es de bits es 42 ahora vamos en la X centramos 16 en la Y verticalmente, ahora volvemos a poner un texto.

De nuevo el primer nombre 500 aquí 14. Aquí debería creo que 12 se ve bien. 16 creo que es casi demasiado. El primer nombre . Ahora usaré el mismo elemento aquí. Y necesitamos un color diferente aquí, así que diferente fuerza por ahora, el 300 es bueno. Altura 1200 y ya conoces el juego. 7 poner un poco de transparencia allí alrededor del 80% No se ve tan fuerte. Mira. En cualquier caso, 20 después de dos píxeles en el medio, por lo que también tenemos 42 que de nuevo 12 y ahora tenemos una última parte.

Esta es la hora, aquí era la 01:25 PM y toma la misma. Lo único que cambiamos es el centro derecho y aquí también necesitamos 24 otro que tenemos aquí sería 16 así que también necesito 16 con 14 y luego la misma altura si y así parece que tenemos estos mapas. Por supuesto, todo eso va a ser dinámico de inmediato. Lo primero es que traemos al grupo, aquí está la cabecera de la conversación. Lo llamaremos así. Blanco. La redondez la hacemos de 6 píxeles.

Y queremos tener 512 para que también tengamos 24 a cada lado y 24 hacia la parte superior. Bonn al tema por esto que ves, si centramos aquí es 23 en lugar de 24 o están aquí, pero aquí es 23. Pero eso es debido a la frontera, porque antes en la conversación del grupo sangramos la frontera y esos son, eso significa que es un píxel menos a usted.

Eso encaja pero todavía el paso siguiente el mismo juego, tomamos otra vez el cuadro nos tiene aquí puramente esta vez sin embargo con otro tamaño significa otra vez algo diferentemente el centro 48 él verticalmente y el paquete usted aquí en el 16 en el elemento del texto en el otra vez delante tiene. Esta vez copiamos el estilo de aquí. esto también nos ayuda a mantener la coherencia, hacer el espaciado y el apellido más grande que el nombre es más grande para este caso y todavía darle el estado en que está en línea. 114 de Y 260 se puede copiar tanto y luego son su hacer la sección 24. Piense que 16 resulta considerablemente mejor está más cerca y en esta esquina también veces dos cosas que ahora hacen un icono nativo. Cámara de vídeo en línea para videollamadas centro vertical 80 y Vertical. 16. y aquí que el teléfono.

La última parte aquí: El núcleo de la conversación aquí tiene lugar, por supuesto, en la conversación, lo haremos más tarde, si seguimos construyendo en la dinámica aquí también, entonces el mensaje individual, lo que vamos a hacer ahora es que vamos a tomar esto aquí y empacar hacia abajo también centralmente horizontalmente, también necesitamos 24 al borde inferior aquí. Genial y en vez de hacer estas cosas aquí de nuevo, empezamos con un montón de aportaciones. Nos centramos verticalmente. Escribe el mensaje, ponemos Roboto regular en y los colores de diseño como por encima de un marcador de posición B color de fondo gris ninguno.

Y aquí es importante que no haya frontera, es decir, también en los otros casos. En el botón de envío primero un grupo. sí, estándar: 20 40/40 y cuando ahora se mira ya se tiene el centro vertical.

Aquí tenemos 20 píxeles simplemente para que el conjunto resulte más agradable a la vista. 20 ahora poner un icono en el centro con Es ya aquí más 8. creo que debe hacer se siente mejor, pero tal vez primero en el lado otro icono para los archivos adjuntos y fotos. Apenas se reconoce con una transparencia y cuarenta que no se ve tan pura del tamaño, 24 del lado también centro 20 en la X y en la Y verticalmente y ahora vemos que se superpone aquí. Eso significa que también deberíamos tener espacio aquí. Desde el sizee 16. fantasía un poco a 40 aún más 6 quiere o 60 16 con posibilidades 8. Por favor, los tres todavía copia, que para que sólo tenemos el bonito central y mira que los tiempos de agrupación es especialmente importante que el conjunto responde conmigo siempre tienen diferentes resoluciones de pantalla, que el conjunto sólo va conmigo mira eso, que el conjunto sólo se superpone muy bien debido a la derecha aquí sería yo, por supuesto, también todavía optimizar todo un poco.

Si sólo copio los textos aquí, entonces estamos en la misma página, pero eso viene en la parte del bono. Así es con la parte del medio, esos son los dos más importantes y para que el Messenger no se caiga del todo. Vamos a añadir un poco de información de perfil en el lado derecho para que todo parezca realista, que también tenemos con los mensajeros reales, que tenemos información aquí de nuevo y empezar con el y ahora se puede ver cómo yo también estoy lleno de Burbuja.

Podemos utilizar los tamaños así como las otras distancias. Es decir, dependiendo de aquí también nos vamos a 272 y vemos que tenemos 24 en ambos lados. También podemos centrarlo horizontalmente y el 24 en la parte superior. Primero, el mismo juego. Ponemos la foto de perfil. Y esta vez me gusta el tamaño 80 80 píxeles horizontalmente. Lo ponemos aquí en los 16 píxeles, luego tomamos el texto aquí y lo ponemos debajo de la vertical y así sucesivamente.

Centrar correctamente en ambos lados con 19/18 significa tener 272. Sí, 32-40 debe ser 116 en ambos lados, muy bueno todavía aquí. ¿Qué va a ser de nuevo, un poco más pequeño y la chica de la cabeza como un trabajo. Pero a una distancia menor. Sí es mejor y luego tomamos que en el paquete de grupo de nuevo puramente ya. Esta vez la distancia de 24. tener un poco más grande aquí podemos ahora tomar el texto. donde acabo de poner también aquí en el 16, pero justo atrás 14. reloj y que usted puede conseguir un poco más grande y luego empezamos con el que tiene el lugar de residencia. Lugar de residencia. Creo que el 8 está bien. Nos llevaremos a Alemania. Y ahora volveremos a utilizar el #3B3B3B, quizás con colores un poco más grandes, un poco más fuertes y lo que tenemos que hacer ahora es reducir un poco el tamaño y el doble, lo que era 200. 200 y aquí un icono para la ubicación. Discretamente transparente en el lado de 16.

Y ahora copiamos estos tres juntos en este, centramos verticalmente y todavía necesitamos una línea de separación y estiramos eso hasta el borde de ambos lados y en lugar de hacer eso tomamos un estilo de borde. Simplemente definimos eso y hacemos el color de fondo y volvemos a la transparencia de unos 40. No me gusta que la configuración no sea buena ahora. Agrupa un poco de tirón hacia abajo a demasiado oscuro tienes que bajar fuera. Ahora empaquetamos este grupo. Así que nuestro último elemento.

Contra sobre y nota que nosotros también estamos aquí. Y aquí no necesitamos un borde en la parte inferior porque este es el último, aquí todavía tomamos la dirección sin un número y no creo que vemos que las distancias aquí son en realidad un poco demasiado pequeño, pero debemos subir a 16. 880 Tatuaje 666, que también está aquí 66 y de hecho aquí 16/16 Y ahora justo debajo también el 16. Estoy pensando si voy a ir mejor 12. El 12 12 se ve un poco mejor. Miramos la vista previa y ahora hemos trazado todo el diseño de nuestra aplicación de chat una vez y en el siguiente paso entramos en la funcionalidad de todo el asunto. Ahora que tenemos el diseño listo, continuamos haciendo la estructura de datos y creemos en este enfoque, que primero tenemos el diseño y ahora, en el segundo paso, pensamos en los datos y luego unimos todo a través de los flujos de trabajo.

Por supuesto, también se pueden hacer burbujas de otra manera - especialmente con productos más complejos, un poco más de planificación ayuda enormemente. Por supuesto, también se puede empezar al revés.

Y en el primer paso, las estructuras de datos hacen los flujos de trabajo y luego el diseño. Personalmente, prefiero tener el diseño listo al principio, sólo para tener una sensación acerca de los elementos que realmente quiero construir, por lo que realmente quiero video chat o no quiero tener eso, tenemos más datos de tirón que van en, a continuación, vamos a definir primero el usuario, como vemos aquí tenemos nombre apellido, si el lugar de residencia de su número de teléfono de correo electrónico y, por supuesto, también una imagen. El nombre es un texto El apellido también es un texto El campo de correo electrónico ya es nativo de Bubble en el inicio de sesión, hacemos el número de teléfono, también hacemos un texto. Te voy a mostrar por qué más tarde, porque nos fijamos que a través de la API de usuario al azar y luego mejor entonces también para tener un número, porque nos fijamos que sí, tengo sólo con los números de teléfono debido a los códigos de área y el plus aquí las ventajas campo de texto y que luego para extraer si usted tiene que operar en él, entonces la ciudad el lugar de residencia todavía en el lugar de residencia yo ahora también en el texto son ninguna dirección geográfica y sólo el título del trabajo.

Probablemente introduzca manualmente algunas cosas y la última en el perfil del primer paso. Cómo quieres que sea una foto el siguiente el siguiente tipo que necesitamos necesitamos el mensaje. Es el mensaje único entre un usuario y otro. Que ya tiene un campo creador y un campo modificado y creado. Así que tenemos la información principal, lo que necesitamos es el texto del mensaje, el contenido y porque queremos construir un cargador de imágenes en el bono, la imagen.

El tercer y último tipo de datos que necesitamos es la conversación propiamente dicha, es decir, la conversación entre dos personas, que por un lado tiene los participantes, que son usuarios del tipo de datos, y por otro lado tiene una lista de noticias, es decir, varias personas al menos, pero una y una lista de noticias, debes tomar las noticias y hacer una lista con ellas, ahora vinculamos ambos con el usuario, porque tal vez queremos hacer una operación más tarde, como queremos buscar qué usuarios o si ya están allí, por lo que añadimos que de nuevo al tiempo de la conversación uno de los usuarios es sólo en la conversación una lista de conversaciones y los mensajes del usuario, eso es una lista de mensajes, ese es nuestro modelo básico para nuestro chat y en el siguiente paso ahora creamos usuarios y luego los flujos de trabajo individuales para conectarlo todo, nuestro objetivo es construir un mensajero y en lugar de hacer toda la zona de inicio de sesión, en la versión de demostración quiero mostrarles cómo crear usuarios en el desarrollo con una gran API, que luego se puede utilizar en su aplicación, para esto primero hacemos una nueva página y la llamamos generada por el usuario y no necesitamos clonarla, sino hacerla fresca.

Aquí nos gustan los mismos tamaños y también no hizo la página generada por el usuario y lo primero que necesitamos es un plugin y hay aquí la versión libre generador de usuarios al azar. de coaching sin aplicaciones de código. Esto ya se ha instalado 92 000 veces y lo que podemos hacer aquí es que sólo podemos crear una lista de usuarios no es nada me crea un grupo de repetición en nuestro ser generado por el usuario. el tipo de contenido es generar lista de usuarios resultados y aquí fuente de datos obtener datos de una API externa de nuevo, la lista de usuarios. Y omitimos completamente el género y el idioma, es decir, la nacionalidad, lo hacemos "de", es decir, alemán.

Y ahora tomo los resultados aquí, lo que significa que obtenemos 10 resultados, lo que significa que también podemos hacer la lista completa más grande aquí, de modo que obtenemos esto correctamente y ahora sólo sentimos estos datos, lo que significa que entonces siempre dibujar la isla de gritos datos dinámicos imagen. Y en su un poco hacia abajo y luego tenemos aquí imagen grande. Todavía cabe un poco, pero eso no es tan digno al lado del nombre, necesitamos todos nuestros datos. El siguiente es el nombre, el segundo es el apellido. Entonces tenemos la ubicación y vemos que siempre podemos entrar ahí y hacemos ubicaciones ciudad.

Entonces, hagámoslo un poco más pequeño, hagamos todo más pequeño. Aquí tenemos el correo electrónico y, por último, el número de teléfono.

Y ahora vamos a probarlo con una vista previa. Donde vemos ahora tenemos el nombre de Sergej Beckert. Por favor, un número de teléfono alemán en el lugar, Weinstein o la Sra. Bruch Adelbert Schipper Weißenstadt Saskia Reichl también siempre obtener el número de teléfono alemán y ahora viene en realidad todavía el último paso, que tienen el ahora al azar será realmente diferente que queremos guardar que sí también en nuestra base de datos para tener sólo los datos de demostración de nuestros usuarios. Es decir, ponemos un botón. guardando el y ahora lo que sucede cuando queremos crear este nuevo usuario, vamos al botón de guardar e iniciamos el flujo de trabajo. Aquí vamos a "Cuenta" y luego a "Crear una cuenta para otra persona", ya que estamos conectados en este momento. El correo electrónico es Current' Cells email lo siguiente es ahora porque tenemos todas las cosas diferentes el nombre Current's Cell generar el nombre el apellido Dejar la foto de perfil... en ti la imagen grande el número de teléfono es muy y el lugar de residencia es Location City el título de trabajo lo añadiremos más tarde derecho Manuel valor ir a Video Podemos ir a través de ahora que nos gusta y creo que por ejemplo Marianne Zehner suena gran número es bueno. La ubicación es buena y la guardamos. Y miramos más allá. Andre Schilling Stadtoldendorf super. Hannes Flick en Hüfingen perfecto Actualizamos la página y son de nuevo otras fotos otros nombres Fatima Mohr Marktoberdorf perfecto. Ina Metzger que no encaja exactamente de la ubicación, es por eso que siempre tenemos el control aquí, eso es también entrar es Alena Obermeier en Landsberg?

Y ahora veamos los datos que hemos generado como resultado, si entramos en nuestra base de datos en AppData podemos ver ahora todos los usuarios y podemos ver lo que podemos hacer mañana, por ejemplo Fátima, y podemos introducir ahora el número de teléfono, el lugar de residencia, la dirección de correo electrónico, el nombre, los apellidos y la foto de perfil. Nombre, apellido y foto de perfil y ahora podemos introducir, por ejemplo, diseñador gráfico. o con MEZ ejemplo Alena Obermeier podemos introducir fiscal como profesión especialmente con aplicaciones EZB? Las aplicaciones de citas, por supuesto, esto es considerablemente ventajoso si tiene una prueba generada por el usuario, especialmente para sus dialectos. Asesor fiscal y Mariana sigue siendo arquitecta.

Y si ejecutas la aplicación ahora, por supuesto. Como Alena Obermaier, eso es lo bueno, que ahora también podemos utilizar la aplicación a través de su cuenta, eso es una ventaja considerable cuando hacemos los siguientes diez pasos de los flujos de trabajo. Ahora hemos visto que tenemos estas cuentas, pero nunca podemos mostrarlas si volvemos a la página índice, entonces tomamos la barra de navegación y lo hacemos dinámicamente.

Eso significa que en lugar de tenerlo estático, ahora tomamos el nombre de los usuarios actuales. y aquí los usuarios designación del pie y aquí vamos esta imagen y hacer puede procesar los usuarios foto de perfil, que con este plugin de la burbuja, a sólo el trabajo directamente cambiar el tamaño para adaptarse a las dimensiones y aquí nos estirar todo y luego hacer 32x32 y si ahora la vista previa de la página junto a como usuario por ejemplo, Alena Obermeier. Entonces vemos que ahora tenemos a Alena como fiscal y viceversa cuando hacemos a Hannes Flick. ¿Vemos a Hannes como miembro de la junta? Esto significa que nuestros datos de demostración están ahora absolutamente disponibles en nuestra aplicación de mensajería Studio, ahora estamos en el camino de la funcionalidad. Eso significa que tomamos una cosa a la vez.

El primero es el tamaño del grupo de repetición aquícon el tipo de usuario de contenido y hacemos un usuario "Hacer una búsqueda" actualmente no modificamos eso, podemos hacer eso más tarde, queremos hacer el aquí todos los usuarios aquí cuando traemos en la actividad más tarde por supuesto y hacer aquí una cosa más que es importante. Que podamos hacer mis páginas de usuario, no queremos mostrarnos como usuarios activos. Porque la imagen aquí es también el usuario de Current Cell. Foto de perfil. Procesar el Redimensionar para ajustarse a la dimensión por el recorte son aquí de nuevo que el tamaño ha cambiado a la derecha es importante tenemos que y aquí tenemos el en lugar de que tenemos un nombre estático más agradable de los usuarios. Los primeros nombres y corte de contenido de los elementos no lo suficientemente alto y lo que hacemos ahora es en realidad esta pequeña luz verde y asumir aquí sombra verde # 49BC78 y lo que es importante es que hacemos este borde con el blanco y dos por supuesto también tenemos que redondear todo el asunto para que también se ve real allí 12 veces hacia arriba.

Ahora estamos viendo la vista previa de todo el asunto. Los usuarios deberían tenerlo ya. Es decir, aquí podemos luego incorporar la actividad, pero ya tenemos veces te uso de nuestra aplicación siguiente es ahora que nosotros este nuevo mensaje va. La primera es veces aquí el tono de color y si uno que es un poco más brillante y debe crear aquí ahora una ventana emergente. sin parar de nuevo mensaje y desde el diseño, 24x46 y sí, sí 20-30, tuvimos también 600 y estoy en él todo el sí, sí usted tal vez 600 todavía nos quedamos con él y necesitamos cuasi dos campos para ello el uno es que seleccionamos el destinatario. También tengo que seleccionar el color de la altura de Roboto, hacemos el ins de no validd necesitamos opciones dinámicas aquí en cualquier caso y que tiene que ser un usuario y la lista de la fuente de datos para buscar el usuario no tiene que ser la restricción y, pero, por supuesto, no queremos enviar un mensaje de línea a nosotros mismos mi usuario y aquí la leyenda significa lo que se muestra y luego tomamos el primer nombre y, por supuesto, todavía podemos hacer eso.

Extender el nombre y pueden estos apellidos me gusta comprobar aquí si realmente tienen el espacio, que a veces no es exactamente perfecto. También hay dos, pero sólo hay que buscar un poco. Valor por defecto no necesitamos la entrada no debería estar vacío y también no necesitamos un color de fondo recta y no necesitamos un borde y sólo mirar a eso y por debajo de nosotros también el paquete de un impulso de varias líneas para el mensaje enviar puede pero aquí Roboto. El color es el mismo. Para un tema #D3D3D3 y no necesitamos un fondo y no necesitamos un era casa y también aquí queremos, tenemos exclusivamente que la entrada no debe estar vacío que sólo tenemos un mensaje y un poco de espacio 24 aquí. Oh también ya un ausschaut que también me gusta hacer. Es realmente un separador aquí.

Se ajusta, entonces que se ajusta bastante bien 1 a 100 y el color 72137 y fácilmente 20. Ahora son sólo aquí la distancia por encima de 24. Es de alguna manera también tienen y, a continuación, también queremos enviar este mensaje se llama Niemann mejor el botón y aquí ya tenemos el diseño aquí. Tuvo el popup en. Centra esto verticalmente y la media entonces también es más pequeña y menor. Es fácil, sólo estoy pensando en si una frontera sería interesante. Toma el gris y ten un poco de transparencia lejos.

Bien, ahora tenemos esta ventana emergente y empezamos con los flujos de trabajo. Es decir, cuando hacemos clic en el flujo de trabajo de inicio/edición de nuevos mensajes, lo que ocurre primero es que vamos a la acción de elemento mostrar y mostramos la ventana emergente. Nuevo mensaje, si tenemos esta ventana emergente, entonces queremos que cuando alguien haga clic en enviar. ¿Queremos crear un nuevo mensaje? Es decir, lo que hacemos es crear algo nuevo. Creamos un mensaje. Este mensaje tenemos por un lado el texto lo que se llama escribir mensaje multientrada. Valor.

Lo siguiente que hacemos es crear de nuevo. Lo siguiente que hacemos es crear una nueva conversación y la conversación tiene los participantes la próxima vez, añadimos el valor del destinatario desde el desplegable. Es decir, ahora tenemos como primer participante de la conversación al destinatario, luego agregamos los mensajes y ese es el resultado del paso 1 es decir este nuevo mensaje en la conversación y luego agregamos al usuario actual usuario actual. A continuación, ahora tenemos una conversación a mi siguiente cambio añadimos en nosotros en el usuario actual añadimos en las conversaciones añadir el resultado del paso 2, a saber, la conversación actual. Al mismo tiempo añadimos en Mensajes, el resultado del Paso 1. el nuevo mensaje y ahora añadimos la conversación a los otros usuarios así que como hacemos eso vamos a Datos. "Hacer cambios en una cosa" y seleccionamos aquí el desplegable Destinatarios. Valor, este es exactamente el usuario y ahora vemos la inteligencia de la burbuja. Se ha reconocido que se trata de un usuario y cambiamos esto ahora qué cambiamos bien el entretenimiento añadir los resultados del paso 2 y los mensajes tendrían resultado de. Paso 1.

Lo siguiente que tenemos que hacer ahora es restablecer las entradas cuando las hayamos introducido, lo que suele ser una buena práctica porque cuando se vuelve a él, el contenido del formulario está vacío y, finalmente, el elemento de altura de las acciones porque queremos que el pop-up desaparezca. Ahora que estoy probando el flujo de trabajo podemos ver que de inmediato, vamos a un nuevo mensaje. Seleccionamos en tan como Fátima. y enviamos si vamos ahora en el flujo de trabajo en los datos, debemos bajo mensajes. En el ahora el cuadro de mi primer mensaje no tenemos ninguno y cuando conversamos en mí la primera conversación que tiene dos participantes que tiene una Fecha de Creación que tiene un Creador. Ahora queremos mostrar esto ahora en el siguiente paso cómo este mensaje también a saber en las conversaciones.

Es decir, podemos decir aquí, el tipo de contenido de este grupo de repetición es una conversación de ordenación de datos, buscamos la conversación y tenemos la restricción de que el participante contiene el usuario actual, ordenamos todo en la fecha modificada y queremos tener las últimas noticias en la parte superior. Al mismo tiempo quiero hacer la prueba aquí para ver si podemos ver que, es decir, si entramos ahora lo primero que tenemos que hacer es grupo de padres cosa cambia y lo convierten en una conversación y eso significa que ahora este grupo aquí es una conversación y cómo tomamos la fuente de datos fuente actual conversación es bastante importante porque si eso no se ha ido nada viene a través y ahora tienen grupos de padres conversación, quieren noticias y hacemos el último elemento y al lado del texto y el corte de contenido no es lo suficientemente alto aquí también hacemos en el tiempo ahora un campo dinámico los grupos de padres de entretenimiento noticias último elemento y tomamos la fecha de creación de la conversación y formateamos todo el asunto de acuerdo a la zona horaria y aquí queremos los grupos de padres de entretenimiento participante primer elemento y tomamos el primer nombre y aquí tomamos los grupos de padres de entretenimiento participante primer elemento tomar la foto de perfil aquí proceso, todo el 100 en calidad a blanco y estiramos todo el asunto aquí de nuevo el mismo el 320 como el tamaño predeterminado, cómo debe ajustar esto de nuevo de 42.

Ahora miramos la vista previa y el conjunto de nuevo. Ahora tenemos la primera conversación aquí y si ahora seleccionamos un nuevo destinatario, por ejemplo, André. Ahora vemos que la nueva conversación está en la parte superior. Así que ahora hemos mapeado muy bien el lado izquierdo con los flujos de trabajo. En el siguiente paso, vamos a la derecha en los flujos de trabajo, lo que significa la única conversación que queremos mostrar dinámicamente. Ya hemos llegado muy lejos. Ahora la pregunta es, si se hace clic en un mensaje aquí, que esto se muestra aquí y también se llama aquí, ¿cómo hacemos lo primero es que tenemos este grupo aquí y luego decir, si se hace clic en él aquí mostrar los datos donde si se mira en aquí por lo que de nuevo y este tipo de conversación del grupo de contenido es una conversación y allí queremos tener la fuente de datos.

Eso significa para mí aquí haga clic en él en el grupo de entretenimiento de entretenimiento, si tenemos dos Aquí: los datos para mostrar el grupo de los padres de entretenimiento grupo de los padres por qué tenemos aquí de nuevo un grupo, usted va aquí brevemente este flujo de trabajo, porque tengo de otra manera a veces con los problemas klickne. Mostrar datos de conversación que este aquí exactamente y podría conversación si esto se muestra ahora aquí entonces tenemos que decir aquí tipo de contenido también una conversación que esto es a través de, el grupo de los padres todo lo importante a saber, aquí es la referencia y cuando se vuelve a este grupo entonces esto va de nuevo una conversación y otra vez que es este anidamiento de nuevo grupo de los padres.

Y si tomamos la foto y vamos aquí de nuevo este típico. Que esto también 320, entonces tomamos datos dinámicos Grupos de Padres participantes en la conversación que me el destinatario como primer elemento y tomar la foto de perfil plantean que los tiempos de nuevo y estirar. Tenemos aquí Redondez 250, mientras estamos en ello también aquí brevemente estos puntos verdes con lo que se ve bien, aquí se comporta. Mejor fuera ya te estaba haciendo con este verde.

Entonces también tienes aquí. Ok también aquí, si uno viaja de nuevo aquí en el grupo también alguna vez hacer más conversación y también aquí de nuevo la referencia y ahora vemos aquí nombre y apellido, estos son dos campos participante primer elemento. Nombre en blanco Es en línea que dejamos y ahora vamos a ver si eso funciona. En primer lugar, no quieres saber nada, vamos a pinchar aquí en el Fátima y porque ya estamos en ello. Por qué no me haces también esta rareza relativamente sencilla. Esta zona de aquí se llama información del perfil, también es una conversación y en el flujo de trabajo que tiene más de dos veces, hicimos un copy paste y ahora tomamos no la conversación sino la información.

Y porque también tenemos el otro grupo aquí, así que el grande para tener una mejor usabilidad también copiar aquí, pegar y tomar esto aquí. Una vez que estamos allí, el mismo juego de nuevo que también debe ser una conversación Parnts Grupo. Por su foto de perfil amplio de los participantes. Y también aquí de nuevo 80 mismo juego. Apellido y también aquí. el. Padre Grupos de conversación participante primer elemento designación ocupacional y ahora formateamos todo el asunto en mayúsculas, porque nos capitalizado que.

De nuevo, en la información del perfil, el mismo juego de nuevo en el grupo de padres Lugar de residencia ahora le gustaría ser el mismo en toda Alemania, no se supone que tenemos una base de datos. Tener ahora de nuevo aquí en el grupo. Eso significa que uno debe formatierren entretenimiento también igual alquiler hacer. primer elemento de residencia con el número de teléfono el mismo número de elemento participante y y ahora vista previa es bastante normal. Cuando se carga la página no tenemos nada y cuando pinchamos tenemos el campo completo de personas y genial que tengamos muy todo en él, ahora es redondo, ¿cómo mostramos los mensajes?

Creamos un grupo de repetición que tiene una anchura de 512 en ambos lados. 20 es y es un mensaje y toma los mensajes de entretenimiento de los grupos de padres. Es decir, es una lista de mensajes. Ahora volvemos a crear un grupo y ponemos ese bit desplazado a la izquierda.

Este grupo es de nuevo un mensaje y toma el mensaje de la celda actual. Ahora ponemos en estilos y elegimos como color de fondo el azul un redondeo de 6. alto 32 ancho 400 y ponemos los tiempos en el cero en él ahora un texto. Altura aprox. 24 en roboto-regular 14 texto blanco coloreado a la derecha-justificado y junto a ambos lados ocho de distancia, que es ahora 84 y centro el conjunto verticalmente. En el texto tomamos el texto del mensaje de los grupos de padres y colocamos la foto del perfil al lado con 24/24 cada uno y ahora tomamos del mensaje de los grupos de padres el proceso de la foto del perfil del creador con IMGIX la rabia de todo el tamaño y lo importante, porque queremos estar en el centro tomamos cuatro y vamos aquí completamente al borde vamos aquí completamente al borde.

Y la distancia entre el grupo y la foto de perfil que hacemos a yo diría 12 la lógica es ahora la siguiente si y que es ahora en primer lugar esto no es visible este elemento no es visible en la página es el pin y si podría que el creador del mensaje es el usuario actual, entonces hacemos este elemento visible y lo mismo se aplica al grupo aquí para el mensaje se llama elemento no visible y la página muestra y el discurso de los padres del grupo es el usuario actual, entonces este mensaje es visible, ahora copiamos el mensaje.

Hacer todo justificado a la izquierda. tomar el color Hagamos todo justificado a la izquierda. Quitemos el color negro del grupo y hagamos el conjunto blanco. Y luego aquí un pequeño problema de diseño. Centra las barras verticales enteras de color blanco y escribe ahora. Si no tienes el Usuario Actual es visible necesario y tomamos la imagen aquí también. Puede ajustar esto y ponerlo a cero. Y digamos que si el creador no es Usuario Actual es visible. De nuevo tenemos un espacio de doce píxeles y ahora previsualizamos el conjunto. No puede ser visible en Pageload y ahora tenemos el texto aquí y la barra de desplazamiento aquí, que ahora tenemos que optimizar brevemente, es decir, en un lado tenemos esta barra de desplazamiento aquí, es decir, hacemos el grupo uno. Hazlo un poco más ancho y reduce la barra de desplazamiento a 518. Yo también lo veo.

Aquí la redondez es 80. 250 pero en 524 para la jarra Ahora todavía queremos ajustar, el grupo de repetición que hacemos el separador a cabo y vamos a 11 mensaje individual que vemos que, a continuación, todavía queremos escribir el mensaje y la respuesta, para ello vamos a tipo de contenido de entretenimiento Grupos de padres de entretenimiento también debe debido a la usabilidad aquí una vez más en el grupo puro y también hacer esto una conversación y Grupos de padres de entretenimiento ahora haga clic en el botón, entonces podemos crear una nueva cosa a saber, un mensaje y el mensaje tiene el texto de la entrada, entonces cambiamos una nueva cosa. Los datos hacen cambios en una cosa y cambiamos la conversación de las celdas actuales y allí añadimos bajo Mensajes los resultados del Paso 1 entonces añadimos al curren tuser añadimos el mensaje.

Y el otro usuario hacer cambios a una cosa Grupos de padres participante de la conversación primer elemento también añadimos el mensaje finalmente el último. Lo que es crucial, sobre todo con varios mensajes, es que en Acciones del elemento grupo de repetición desplazarse a la entrada en nuestros mensajes de grupo de repetición vamos a la entrada desde el primer mensaje y animar el desplazamiento y ahora vamos a ver cómo funciona todo el asunto. Tenemos un mensaje en Andre's pulsamos el botón y ahora tenemos el segundo mensaje. Me gustaría ver un último pequeño.

Lo último que debemos hacer es que veas el mensaje allí. Es decir, si tenemos el flujo de trabajo, el último paso es Reset Input Element Reset input. Volvemos a hacer una vista previa de todo el asunto. Envíame a André en él y ahora hemos restablecido la entrada. Lo que hay que hacer ahora es mirar los botones y los pequeños errores que todavía tenemos que hacer, en primer lugar queremos mirar la discusión entre andre y Fátima, así que cómo se ve cuando están conectados, para esto se va a los datos de todos los usuarios y se ejecuta toda la cosa una vez como Andre. Ya podemos ver al Andre.

Si hace clic en él, tenemos una respuesta aquí. Hola Hannes y ahora estamos un par de cosas, la una es que tenemos aquí esta barra de desplazamiento y si creamos otro usuario aquí también tendremos aquí una barra de desplazamiento aunque sólo una vez brevemente en generada por el usuario y crear de nuevo 2-3 usuarios. derecho Thomas aquí y Malta Y si ahora a saber carga. ¿También estamos aquí este tamaño de la barra de desplazamiento primero queremos deshacernos de? Ahora entramos en los plugins para eso. Web plugin y entrar en "herramientas CSS" y esto es un plugin libre no tenemos que establecer nada aquí volver a nuestra página y arrastrar las herramientas CSS de elemento visual en él, si ahora vamos a la pestaña de flujo de trabajo página general se carga ahora vemos en las acciones de los elementos este CSS y hacemos añadir estilo personalizado a hdss.to. Y ves este estándar aquí, eso significa que podemos dejar fuera los estilos y ahora la pregunta es qué código CSS necesitamos para nivelar las barras de desplazamiento, he preparado algo para eso. Y entramos aquí y tenemos webkit-scrollbar y el ancho y el alto son ambos cero píxeles cuando recargamos la página ahora.

Entonces tiramos ya no hay barra de desplazamiento y también aquí ya no tenemos eso, además vemos ahora que el nombre aquí es demasiado largo y por lo tanto no se muestra, cómo podemos solucionar esto brevemente, si entramos aquí en el grupo vemos que tenemos que quitar el elemento completamente, desactivamos eso y hacemos lo siguiente vamos a las celdas actuales Nombre de usuario y truncamos a 8, eso significa que reducimos a 8. Y veamos qué aspecto tiene ahora. Sigue siendo demasiado largo, así que lo hacemos de 6 caracteres. Y añade dos puntos detrás. Y ahora tenemos, pero con todo eso tenemos que hacer una declaración de acondicionamiento. Si Current Celss User first name. number of characters is less than 7 text then what do we show then Current Cells User first name and now we have solved this perfectly, that is we see names are abbreviated if they are greater than if they are greater or equal to 7, another point is that André now sees himself and not Hannes that is, how can we change this now, we look at the group once and we see here is the current conversation and we see first items profile picture, that is the point size what we do is we make again a condition parent groups conversation. El primer elemento del participante es el usuario actual

Si ese es el caso, la fuente de la imagen es el elemento participante en la conversación de Grupos de Padres número 2, por lo que la segunda foto del perfil del usuario y añadimos nuestros componentes de nuevo. Lo mismo ahora también se aplica al nombre en los grupos de padres actuales participante primeros elementos firstname, si el elemento es el usuario actual cambiamos el texto a. max 2 con el último mensaje que ahora dejamos, pero el último mensaje blanco trae nada para ver el último mensaje de sí mismo, es decir, aquí es generalmente el último mensaje que queremos mirar en esta conversación, es decir, que encaja tenemos pero una vez en la vista previa y ahora vemos Hannes a la izquierda y todavía tienen que adaptar que brevemente, los dos grupos también se llama aquí.

Entramos cuando los participantes de los Grupos de Padres se encuentran en el primer punto. Míralo brevemente También que encaja y ahora todavía brevemente la ventana de información seist también otra vez el mismo espectáculo otra vez puramente imagen-fuente en ahora aquí puede hacer es tomamos. Copiar el formato condicional puede poner esto aquí. Pegar formato condicional ahora aquí también el mismo y también aquí pegar formato condicional y puede entonces aquí. Artículos título del trabajo se llama título del trabajo y el formato de toda la mayúscula y también aquí de nuevo el mismo juego pegar formato condicional si aquí el lugar de residencia Alemania.

¿Sería este el condicional de copia corta, porque eso está más cerca. aquí condicional Dos números de teléfono y también aquí condicional pegar sólo el correo electrónico, entonces lo miramos de nuevo en la vista previa. ¿Su corto selecciona un nuevo mensaje, por ejemplo, Alina de o Britta?

Aquí está el segundo mensaje. Y si nos vemos diferentes en todos los ámbitos y si ahora nos conectamos una vez como Britta y si ahora nos conectamos una vez como Britta. También debemos ver aquí de nuevo que Andrea le ha escrito un mensaje. Una pequeña cosa que acabo de ver es que vemos que en la redondez en la conversación en puramente en el grupo de repetición y vemos que aquí el redondeo 250. Perfectamente como una cosa todavía, cuando la página se carga, entonces ahora siempre una página en blanco, es decir, queremos mostrar un mensaje cuando se carga la página, hago que una vez azul o con saber, que era el CSS, pero hago ahora de nuevo una nueva cuando se carga la página. ¿Queremos fondo, si vimos aquí, si vamos a Mostrar los datos en el grupo de conversación de la celda actual es decir, ¿Qué mostramos y aquí yo diría que copiamos que una vez. Y en lugar de las células actuales conversación que hacer una búsqueda de la conversación importante y luego proporciona en Y tomar aquí el primer elemento. Copiamos que brevemente y también en el grupo de Información también el primer elemento ahora recarga ahora recarga, entonces vemos ahora como la conversación siempre más nuevo y ahora vemos al igual que si ahora enviar de nuevo y actualizar vemos que siempre la conversación más reciente está en la parte superior ahora me gustaría cambiar algunas cosas pequeñas aquí en esta ventana de chat, se ve en un lado, las cabezas son uno tras otro, eso no es normal con en realidad siempre sólo la última cabeza se muestra y también. Por aquí siempre es la última, si es alterna hay que resolver eso y la otra ya la puedes ver.

Las distancias son sólo no es estándar y cómo proceder que ahora en dos pasos como primero tomamos estos textos antes de que nosotros aquí no es un plugin, pero un método de la tierra, no he vinculado en el foro de abajo y en el contenido y creamos para este tres elementos HTML y sobrescribir cuasi el CSS. Lo primero que hacemos es. Eliminamos cada uno de estos mensajes de texto dos veces y ahora sólo tienen las imágenes deben tener un tamaño de 32/32 en el X 8 es también demasiado grande debe y lo que quieren hacer es que el paquete como el primer elemento HTML en. Esto puede ser en cualquier parte de la página. Este HTML sobreescribe nuestros elementos, por así decirlo, para lo cual he preparado algo para ti de nuevo.

Tenemos un elemento de estilo aquí, que cubre todos los tamaños, por así decirlo, y tenemos dos gifs, uno de mí, es decir, los mensajes que son de mí, y uno del otro, y ahora necesitamos dos elementos HTML que ponemos en el grupo de repetición. Mira que tenemos aquí en la distancia de los menos. Y en la "Y" estamos en el "cuatro" grande. Yo también el espaciado. Asociación escrita, esto es 345. Y lo que estamos mostrando aquí ahora es esto. Esta clase de ellos y el texto del mensaje de las células actuales dinámicamente como arrastramos en el HTML y necesitamos, por supuesto, un condicional si el mensaje de la fuente actual mayor no es el usuario actual este elemento es visible que es en la carga de la página no visible que importante y justo en paralelo a la imagen también hacia el norte, ahora creamos de nuevo en el elemento HTML. las mismas dimensiones 345 aquí tenemos de nuevo una distancia de 6 y en el htmlelemento ahora el otro DIV de mí y también aquí hay que proceder dinámicamente Células actuales mensaje de texto este elemento. no es visible en la carga de la página y Células actuales mensaje Creador Usuario actual este elemento es visible y ahora nos mira completamente siempre si eso funciona. Estamos viendo truncado aquí ahora, lo que significa que voy a volver a los elementos HTML estirar para ajustar el contenido en ambos vista previa.

Y ahora lo tenemos todo perfecto. Ahora echemos otro vistazo a estas cabezas. Así que vemos que aquí todavía necesitamos una lógica para que todo encaje. entramos y vemos es Usuario actual y tenemos que hacer otra condición aquí es por búsqueda de mensaje y hacemos modificado, fecha saludos como could'ses mensaje Fecha modificada Y luego ordenar por fecha modificada y descendente no, por lo que se invierte dos veces, eso significa que queremos que los mensajes vienen en forma incremental, por lo que es exactamente la primera, así que descendente no y ahora tomamos este, el primer elemento, por lo que el mensaje que viene justo después de que y allí nos preguntamos si el creador de este mensaje no es el usuario actual no es el usuario actual que significa que el elemento es visible, si se puede llamar usuario y al mismo tiempo no es o por lo que el mensaje después de que es el usuario actual no es, entonces es grande para mí lo mismo por ahí. Casi diría que aquí copiamos el acondicionador. Así que no es el usuario actual. y es el usuario actual Sí, y ahora acabamos de ver cómo se muestra todo el asunto.

Ahora se trata de tener los mensajes no leídos para desarrollar un sistema de notificaciones. Empecemos por el punto en el que se crea un mensaje en primer lugar. Si vamos a la ventana emergente, enviar mensaje y en el flujo de trabajo, entonces vemos aquí que crear un nuevo mensaje aquí, necesita un nuevo campo y hacer que el booleano sí-no y el valor predeterminado es sí. ¿Cuándo seguimos creando un nuevo mensaje cuando acabamos de hacer clic aquí en el botón también aquí alrededor es leído? Sí, así que ahora ordenar lo siguiente en es que decimos donde el grupo va. Y digamos que el mensaje Grupo de Padres. último elemento no leído es Sí y el mensaje Último elemento creador es No. El usuario actual entonces cambiará en Fuente a Roboto 900. Hacemos todo en negrita Así, podemos indicar si un mensaje ha sido leído o no.

Y si ahora pinchamos en el flujo de trabajo tenemos Mostrar datos en grupo Grupos de padres conversación, hacemos aquí todavía actitud mensajes Último elemento y lo que cambiamos no leído a bien, ahora es leído. Y ahora hacemos una prueba directamente.

Ahora nos conectamos como Hannes. Y vemos como el mensaje está en negrita y si hacemos clic en él. no más y por lo tanto el mensaje es leído ahora por mí todavía los mensajes no leídos sólo se muestran con un contador que vamos por encima puramente en la campana y el campo de texto de arriba y hacemos una búsqueda de una conversación es importante que nuestro participante en ella recibir el mantenimiento, a continuación, vamos en los mensajes y me falta esto ahora que vemos sólo los mensajes en los que decimos por un lado no leído es sí y por otro lado el creador no en no.

Podemos tomar un recuento, a continuación, el formato como un número con cero decimales y también decir que este elemento es sólo visible, por lo que si los niños deben ser mayores de 0, de lo contrario el elemento no visible, porque aquí decimos que este elemento no es visible en la página que desea probar todo el asunto como un usuario a comportarse veces Marianna crear un nuevo mensaje. Ejemplo a Alena entonces vemos que hay el nuevo mensaje Marianne no tiene ninguna notificación y si ahora se ejecuta toda la cosa como hace, como Alina ahora vemos un nuevo mensaje y también vemos desde el yo de Marianna y tan pronto como hacemos clic en él toda la cosa se ha ido y que es, por supuesto, nuestro sistema de notificación en la variante simple era, por supuesto, hacer más cosas como un menú desplegable y un enlace directo a la en los mensajes y puede, por supuesto, todavía optimizar eso, pero la idea básica que tenemos ahora en el sistema de notificación de los puntos verdes para mostrar que alguien está en Esto es de los usuarios y eso es lo que se trata ahora en el siguiente paso de inicio de usuario y creamos un nuevo campo en el que pedimos si alguien medir la última fecha de actividad, que ahora van en el flujo de trabajo. Hacer cada cinco segundos y hacemos un Hacer cambios en una cosa y que es a saber Los usuarios actuales última actividad y que es la fecha y hora actual siempre saber cuando el usuario estaba activo.

La fecha y la hora están activadas. Ahora vamos a la pestaña de diseño en la forma y decir que la próxima vez no es visible en la carga de la página, si ella misma usuario última actividad más yo ahora decir 5 minutos en segundos más 300 segundos y que ahora debe ser mayor. Como fecha y hora actuales.

Entonces el elemento es visible. Por el contrario, si el pequeño es. Como currentdatetime entonces el elemento no es visible. Y vamos a probar eso ahora. Muéstrame atraer una vez agradable Janin Schipper No deberíamos ver a nadie activo ahora. Aquí no hay nadie. Los puntos si nos conectamos ahora como tercero deberíamos ver a Janin. Ahora vemos que Janin tiene una actividad. vamos a poner esta copia condicional formato condicional en las otras formas también, que se destaca, moderadamente no es visible y se llama formato condicional, ahora arrastramos aquí grupos de pares conversación hasta que cambiamos a ámbito de los padres conversación participante elemento de descanso. última actividad +300 es mayor que la fecha actual tiempo y la derecha y tenemos que aquí. Grupos parentales actuales Entretenimiento El primer elemento del participante no es el usuario actual, porque de lo contrario nos mostraríamos a nosotros mismos.

Vamos a hacer una segunda función, copiamos eso y hacemos el punto 2. En el momento segundo también entonces es visible. Y copiamos el condicional de nuevo copiaría aquí. Para tener ambos casos de borde. pegar el formato condicional que se ajusta y también aquí tomar de nuevo un condicional de pasta. Y ahora volvemos a ver todo el asunto como Alena.

Y ahora puedes ver cómo Britta está siempre activa, mientras que los demás no, porque no nos conectamos en los últimos 5 minutos. Ahora hay otra posibilidad de que también se ordena aquí por la actividad o por el nombre y, por supuesto, ahora también puede incorporar esto a través de la búsqueda, que acaba de decir, ordenamos aquí por la última actividad y decir desceendding No y por lo tanto, cuando la vista previa de esto ahora, obtenemos los usuarios activos primero y luego los usuarios pasivos de todos los usuarios. Ahora queda por ver cómo podemos hacer que todo el tiempo sea más amigable para los móviles y simplemente empezamos por la parte superior con la barra de navegación.

Primero empaquetamos estos dos grupos juntos. y si este es el grupo de escritorio vecino copiamos este alrededor de estos dos elementos y copiamos los dos. Y ahora quieren tener esto por un lado hacia el cero. 40 entonces hacemos 667 y tenemos 24 de espacio aquí y también hacemos 24 de espacio aquí. Llama a este grupo Navbar mobile, si ahora entramos en el responsive y junto al grupo grande primero.

Y haz una ocultación, si es menor que 667, se ha ido. Y ahora comporten la otra posición de la izquierda. Y vemos cómo el miembro aquí también necesitamos una regla, a saber, si es mayor que 667, que se ha ido. Ahora necesitamos la funcionalidad de este botón, debe tomar el flujo de trabajo aquí. una copia que Diana va a entrar, ¿lo toma así? ¿Ahora estamos a punto de tomar el pop-up? Y fue a las 8 a mostrarte el popup. Hazlo pequeño de inmediato y di primero que debe ser grande. El animal está fijado. El resto encaja en cuanto a la ventana un poco más grande 60. o 80 ¿Debería darle un buen repaso perfecto? a continuación nos ocuparemos de la ventana de chat de la izquierda. Definitivamente queremos que este grupo no se muestre. Por lo tanto, si lo ponemos más pequeño que 667, no estará ahí, y no lo pondremos si somos más pequeños que 667.

Además, ¿no necesitamos estos tiempos? aquí también tenemos que optimizar algo, tomamos los dos copian estos sí, ahora los dos oportunidad de mirar esto de nuevo en detalle, lo que ayuda aquí es cuando decimos en el corto plazo que consideramos 667 hacer el conjunto más pequeño ahora tiramos de la conversación completa y ver que esto es la izquierda. que esto se justifica a la derecha que esto se justifica a la izquierda que ahora enviar pero queremos que el elemento 80 % que esto va con, ahora vemos que el conjunto sólo se hace más pequeño, que va con. Perfectamente ahora este escondite Wohlleben sale de nuevo, porque ahora tenemos que cuidar exactamente esta zona media. En primer lugar, copiamos el grupo aquí.

Finalmente estoy haciendo esto. Mobile primero quita los dos iconos. luego Reduce la redondez del vídeo a cero. Y arrastra esto hasta arriba. y tanto a la izquierda 0 como a la derecha hasta el borde. 60 60 07 ahora que tenemos que aumentar el espaciamiento un poco. tenía la copia horizontal el en ras con un espaciamiento de 12 que ambos otra vez y al lado de él ahora este icono lo que teníamos antes. el en el 24 Bin pero también una Flecha es derecho-justificado centro esto verticalmente Ahora Responsive va en. Ahora tenemos dos grupos, eso significa que no tendrías que crear nada de regulación de tiempo, hacemos aquí sobre más grande, ocultamos que si más grande 400 y que ocultas nosotros si más pequeño 400 a continuación hacemos desaparecer este contenedor temporalmente.

Ahora vemos que tenemos que ser más grandes aquí. Vamos al aquí vemos ahora como este grupo padre va hasta el borde, pero todavía tenemos que hacer una cosita, estamos aquí esta línea de la izquierda, es decir vamos al grupo y decimos, porque tenemos el estilo de borde aquí, si página actual con. Más pequeño 667, entonces cambiamos el estilo de borde a la derecha a 1. y abajo el estilo de borde a la izquierda también al hombre con lo que obtenemos estas líneas tanto de distancia y al mismo tiempo también debemos tener una línea superior aquí para crear una separación. Entonces, ahora tenemos que mirar de cerca. Sí, con el error tenemos que hacer ocultar si es mayor de 667.

Lo pondremos enseguida, lo haremos de forma diferente con los puntos de diseño concretos, sigue siendo importante aquí. Si crees que 990 es un poco menos que 80, no lo fijas en 99. Esto está justificado a la izquierda, que estás justificado a la derecha. justificado a la izquierda también está justificado a la izquierda, tenemos que ponerlo. Margen para que podamos meter todo esto aquí. Exactamente y aquí si todavía ponemos esto aquí de nuevo el otro Grupo de resolver ahora, pero de manera diferente en que al decir esto aquí es. no es visible en la carga de la página, pero sólo visible cuando la corriente. Página que es inferior a 667.

Y el otro sólo es visible hasta el tamaño 667. Una cosa más que deberíamos hacer es si algo no es visible colapsar el elemento ocultar cuando se oculta colapsar el elemento ocultar también aquí colapsar.

La altura del elemento oculto que es muy importante que no tenemos que en allí, excepto en la barra de navegación, donde está bien. Ahora estoy en la vista previa. Y en las herramientas para desarrolladores de Chrome. Pues bien, aquí puedes elegir cuál quieres que sea de color blanco.

Por ejemplo, un iPhone un iPad lo que puede iPhone lo que vemos ahora ya es relativamente mucho algunas cosas encajan y otras cosas aún no son perfectas. Es decir, ¿cómo lo conseguimos ahora?

La cosa aquí es esta pequeña caja. con la flecha significa que encaja pero esta demasiado grande lo hace 85 Ahora tenemos estos elementos de mensaje que ya se ven muy bien. Lo siguiente es lo que pasa donde empezamos la página y donde no, que lo primero es que decimos que todo el contenedor aquí Esto es básicamente visible primero, que es lo que son estos ahora llamado, este contenedor no es visible al principio. siguiente decimos aquí que este contenedor no es visible al principio. pero empezar un segundo flujo de trabajo con usted.

Si él ya aquí la llamada a la acción estos hacemos ahora azul. copiar en pegar de nuevo un rojo con sabemos lo que la diferencia de decir sólo cuando la página actual con más pequeño 667. sólo entonces cerveza pagana la lista de grupo conversaciones y al mismo tiempo este grupo aquí en Enns el Maine mostrar grupo de entretenimiento principal con la siguiente información para mí aquí todavía el segundo botón como aquí todavía el segundo botón envolvente para empacar todo esto hacer también aquí yo azul copiar este flujo de trabajo pegar.

Y decir rojo sólo uno más pequeño 667 también aquí mismo juego Ocultar en la lista de elemento conversaciones Y mirar elemento. el grupo principal ahora todavía necesita para este botón aquí una función hacemos elemento pagano. pegamos el grupo y mostrar la lista de conversación en su lugar.

Cuando vamos a las Herramientas para Desarrolladores, miramos el conjunto y decimos que estamos haciendo el iPhone. Entonces, ahora vemos nuevos mensajes. Si seleccionamos el cantante y vamos a un mensaje, ahora podemos ver el historial y ver cómo también podemos desarrollar páginas responsivas para móviles en la burbuja con el motor responsivo.