Revisa la ejecución de tu app en Bubble por medio de la vista de depuración

Otra interesante funcionalidad de Bubble es la vista de depuración , debug Mode , que podemos mostrar en la parte inferior cuando desarrollamos una APP y usamos la versión vista previa Preview.

La vista de depuración nos permite acceder a tres zonas diferenciadas ;





1 )  Depuración de los workflows
El lado izquierdo del depurador es el depurador de flujos de trabajo. Puedes ver tres botones que controlan cómo se comporta el depurador cuando se activa un flujo de trabajo. Hay tres modos posibles:
El modo ‘normal’ ejecuta los flujos de trabajo sin interrupción.
En el modo ‘lento’, hay una pausa de un segundo entre cada acción y la siguiente.
El modo ‘paso a paso’ te permite controlar la ejecución del flujo de trabajo. Este es el modo que utilizarás más a menudo.
2 ) El inspector de elementor
A veces es necesario averiguar por qué un elemento se muestra de una forma determinada, especialmente si se están utilizando condiciones o se están mostrando algunos datos. El depurador te permite elegir un elemento de la página y ver la lista de condiciones y campos y sus valores en la situación actual.
 
3 ) Indicador de errores de ejecución
En el depurador también puedes ver los errores de ejecución en modo de ejecución. Por ejemplo, si estás haciendo una llamada a la API de un servicio, y ese servicio devuelve un error porque falta un parámetro, ahí es donde se mostrará el error. Cuando se produce un error en un workflow o en un elemento, el icono se volverá rojo y se podrá hacer clic en él. Al hacer clic en él se mostrará la lista de errores.
 

Cómo podemos analizar cada elemento en el modo de depuración

 


Los elementos en azul , pueden ser clicables , por ejemplo es posible ver cada elemento grabado en la base de datos si analizamos su workflow  y en el orden en el cual es grabado en la base de datos.

También en verde , podremos ver las condiciones que se han dado y que son válidas para ejecución del workflow  , si no son consideradas ciertas se muestran en rojo . A mayor numero de condiciones , más importante es evaluar que se cumplen por medio del modo de depuración.

Por último , por medio del inspector podremos ver todos los elementos de un grupo

Cómo instalar plugins en Bubble

Bubble nos permite integrar nuestra App con app externar que nos añaden elementos, eventos, acciones y fuentes de datos adicionales. Estos plugins son creados por el equipo de Bubble y otros usuarios de Bubble, y existen tanto plugins gratuitos como de pago.

 La mayoría de los servicios externos que se conectan a la aplicación, incluyendo proveedores de pago como Stripe, etc.

Se mostrará por tanto el listado de todos los plugins disponibles para instalar , donde podemos desmarcar los plugins de pago ( Premium ) entre otros filtros.

Cómo extender el contenido de nuestra app responsive en Bubble

Cómo hemos visto es muy sencillo crear una app responsive para móviles en Bubble , Pero , ¿ Qué pasa si por ejemplo queremos ver esa App en nuestro ipad? , veríamos lo siguiente ;

 Nuestra disposición del contenido en Columna impedirá el contenido distribuirse , ahora si queremos que ese contenido se expanda a la derecha ocupando más espacio por ejemplo en iPad debemos permitir la disposición en filas  , esos podremos hacerlo modificación la disposición ( layout ) del grupo padre que contiene ese contenido .

La manera de facilitar que el contenido se expanda es hacerlo por fila , ( uno de encima de otro ) , esta disposición denominada de Fila ( row ) permite apilar los grupos de contenidos .

El resultado final será que dentro de ese Grupo de fila podremos albergar a su vez grupo de columnas cuya disposición podrá extenderse a lo ancho de nuestra pantalla, de esta manera.

Element tree en Bubble , tu mejor aliado

Conforme aumenta la complejidad de los elementos en tu App bubble va siendo más díficil localizarlos en su disposición – El menú a la izquierda del árbol de elementos se vuelve clave.

Vamos a poner nombre el GROUP PESO DEL ENVÍO  , y así localizarlo fácilmente en el ELEMENT TREE.

Cómo crear una versión alternativa ( móvil ) en Bubble

Por ejemplo , para tener un index alternativo solo para móvil , lo primero que debes hacer es crear un nueva página réplica ( clone ) de nuestro index , llamándolo en este caso index_mobile.

Para tener un diseño específico para la página cuando se carga en un dispositivo móvil, en la ventana apariencia Appearance , selecciónala en el menú desplegable . Como la URL sigue siendo la misma, esto es transparente para el usuario.

Listo ! ya tenemos nuestra versión móvil del index.

Cómo mostrar mensajes de alerta en bubble

Una alerta muestra un mensaje temporal en la página, como una advertencia. Se muestra con una animación de aparición y desaparición. Muéstralo a través de un workflow.

Es importante no confundir una alerta con un PopUp , estos últimos son considerados elementos , y en algunos casos son tratados como páginas, algo que veremos más adelante.

Para introducir un mensaje de Alerta , debes buscarlo en árbol de elementos , introducir el texto de la alerta y opcionalmente puedes alterar su diseño

Incorporarlo al workflow nos permitirá mostrar el mensaje

¿ No te gustan las fuentes por defecto en Bubble ? cámbialas

Bubble te permite definir algunos estilos generales para tus elementos. Cada nueva aplicación que inicias viene con un conjunto de estilos preestablecidos. Esto te permitirá organizar mejor el diseño de tu aplicación, ya que sólo tendrás que modificar el estilo una vez para que todos los elementos reciban el estilo correspondiente. Esto también ahorra algo de espacio en tu aplicación, y conducirá a cargas más rápidas ya que los datos de estilo son compartidos por todos los elementos que utilizan un estilo similar.

¿ Dónde puedes encontrar la sección de fuentes por defecto en Bubble no-code?

La fuente por defecto es algo fea en Bubble , así que para cambiarla vamos a ir a Styles > en Element Type elegiremos HTML > body . Aquí nos ofrecerá la posibilidad cambiar el tipo por Inter ( regular ) y filar interliando a 1.5 porque facilita la tarea del ajuste.

Inputs , características

Los Inputs en Bubble App permiten a los usuarios escribir texto en una línea. Es útil para escribir un correo electrónico o una contraseña.

Marcador de posición / placeholder
Cuando este elemento está vacío, se muestra un texto para pedir al usuario que introduzca algo.
Contenido inicial / initial content
Este campo en Bubble App define la entrada antes de que sea modificada por el usuario o cuando se reinicie. Por ejemplo, cuando un usuario modifica su correo electrónico, el contenido inicial será probablemente “Correo electrónico del usuario actual”.
Formato del contenido / Content Format
Selecciona un tipo en este menú desplegable para definir el tipo de entrada. Esto es importante por dos razones:

  • Para asegurarte que lo que se introduce es válido y para evitar que los flujos de trabajo se ejecuten si el contenido no es válido. En este caso, la entrada se establece en un “estado no válido”. Esto detecta, por ejemplo, cuando una dirección de correo electrónico sigue el patrón ‘name@example.com’.
  • A veces controla los caracteres que se pueden escribir y los que se añaden automáticamente, para ayudar visualmente a los usuarios en el caso de fechas, contraseñas, etc.

Comprobar la contraseña mientras se escribe / Check password as you type
Si defines una política de contraseñas en la sección General de la pestaña Configuración en Bubble App , marca esta casilla para validar la entrada con respecto a esa política.

💡 Tip ; Cómo duplicar inputs

Con tal solo pulsar la tecla CONTROL y arrastrar el elemento puedes duplicar en Bubble

 Cómo conectar inputs visuales con las acciones en la base de datos , por medio de workflows ( la lógica ) en Bubble.,

La acción del botón recogerá la información de los inputs. Pulsamos en Workflows en al botón , y create a New Things , nos pedirá un primer tipo de dato ( Tabla  )  que llamaremos PRODUCTO , y que compondrá de los siguiente campos NOMBRE ( tipo texto )  /  PRECIO ( tipo  /  FOTO ( tipo image ) 

Si guardamos así el producto , solo subirá la imagen a la base de datos pero no sabrá asignar el input A sus valores ( Values  )

Definir el nombre de producto con INPUT , así con precio y foto.  Teniendo que cuenta que los INPUTs deben respetar el tipo de formato de los valores  , por  ejemplo idealmente, el INPUT PRECIO ( number ) debe ser un INPUT un CURRENCY que concuerda con el tipo numeric de la base de datos .

También debemos nombre cada  INPUT con un nombre para localizarlos mejor , el del precio será en este caso INPUT PRECIO

Una vez hemos comprobado que los valores de los INPUTS son compatibles , ya podemos asociar cada INPUT a la base de datos de manera que se grabe correctamente en la BD . Para ellos volvemos al Workflow , y la accesión CREATE NEW THINGS ( on DB ) y asociamos los VALORES a los INPUTS.

Listo ! , ya podemos entonces pulsar botón para guardar en la base de datos , cada valor en su sitio.

Titles y el poder de la IA

La planificación y edición de los Metatags web siempre ha sido de especial relevancia para cualquier SEO , al final y al cabo , es la primera referencia visual que el usuario tiene de nuestro sitio web y dejamos en él la responsabilidad de hacer click en uno u otro resultado.

ctr-seo-copy

Cuando experimentamos procesos de mejora , basados en datos , podemos ser capaces de estimar el incremento de tráfico SEO generado dependiendo de la posición de nuestro resultado en las SERP . Es por eso que gran parte de los recursos en tiempo empleados han ido siempre a parar a proyectos para mejorar y optimizar el CTR alcanzado ( y quizás así de paso Google hará su magia mejorando nuestra posición …👀 ) . 

La tarea de adecuación de los Title ( o títulos ) en los resultados de búsqueda en Google se asemeja a la tarea de cualquier Copy creativo en anuncios y campañas .

Después de que Google publicara que a partir de ahora los Titles se verían siempre modificados conforme su motor de inteligencia artificial , lo que era solo una rareza que comenzó quitando caracteres no admitidos por google , se ha convertido en un cambio radical en la gestión de los title de nuestros resultados en los SERPs de búsquedas.

¿ Es acaso mejor el motor de IA de Google que los SEO a la hora de determinar que Title es mejor?

Bien , lo que hemos visto en la pasadas semanas es un cambio en el 80/90 % de los títulos por defecto de nuestra páginas , y lo que toca ahora es saber cómo afecto eso al CTR de nuestros resultados en la búsquedas , que patrón parece tener , y si podemos favorecer ( o no ) que el motor de IA mantenga aquellos cuya morfología se ha creado de forma específica para la llamada a la acción del usuario  ( su click )  , y favorece así nuestro CTR frente al de nuestros competidores.

¿ Qué informes nos pueden resultar necesarios para la gestión específica de los titles alterados por Google?

De lo más interesantes son los compartidos por los chicos de KEYWORDS IN SHEETS , ya que por medio de acceso a la API de Google search console podemos tener un vistazo todos los Titles de nuestros sitio web y compararlos con los originales , de esa manera sabemos el tipo de alteración experimentada .

Personalmente prefiero gestionar mis informes en google DATA STUDIO, igualmente con acceso a través de Data Studio a Google Search Console como fuente de datos podemos tener de un vistazo los CTR históricos .

Os comparto también el acceso al informe Google data Studio CTR monitor , podeís hacer una copia del informe para vuestro uso personal ( o profesional ) .

[ 👉 AQUí el enlace ] https://datastudio.google.com/reporting/3570c42d-5af6-4ffa-ab1c-fbf5559b9726/page/6zXD

[ El plugin para Chrome Keyword Surfer ya incorpora el chequeo de Titles ]

En definitiva si ya era de vital importancia la gestión de los Titles en nuestros proyectos de auditoría SEO ahora debemos realizar un seguimiento específico de esas metas , revisando semanalmente los cambios de CTR ( y posición )  e intentando aprender de un patrón de alteración que a partir de ahora Google realiza en todas sus Serps.

3 webs geniales auditadas que crecen como la espuma en SEO

Como cada cierto tiempo realizamos auditorías SEOonPage a sitios que observamos estar alcanzando una rápida visibilidad en buscadores.

En esta ocasión analizaremos varias páginas con resultados en crecimiento en tráfico SEO en 2017 espectaculares.

Páginas cuyo SEO Onpage ha sido auditado.

 

https://www.basedirectory.com

auditoria-seo-1
Personalmente siempre me han encantado los directorios y este tiene todos los ingredientes para ser uno casi 100% perfecto.

Escasas metas y Descriptions  sin optimizar porque en directorios con cientos de negocios y pocos contenidos no construiríamos una descripción mejor que la que indexa Google en cada momento.

Utiliza richsnippets de mucho peso para buscadores como son los de tipo institucional (GovernmentOrganization ) utilizados para las localizaciones de las bases militares y en la página de detalles del negocio en el directorio otro marcado de páginas más convencional.

Su estructura de contenidos se dispersa en el primer nivel, y todas las localizaciones quedan visibles enseguida, no les ha preocupado dispersar el link juice de forma excesiva a costa de facilitar la indexación de todas las localizaciones.

 

https://www.omio.com  ( anteriormente goeuro.com ) 

auditoria-seo-2

Esta página se está haciendo con la mayoría de los resultados de búsquedas móviles de viajeros independientes que viajan por Europa reservando en cada destino. Dispone de una potente versión webapp móvil de manera que la experiencia de usuario que busca desde su dispositivo móvil es casi perfecta.

Centrándonos en su estructura podemos ver un árbol gigante de rutas por destinos, consiguiendo aglutinar a la mayoría de la posibles búsqueda de rutas con tren , bus o avión entre la mayoría de los destinos europeos , pero optimizando el crawl Budget ( menos de 500 páginas indexables en el dominio .com ).

La gestión de idiomas se realiza por dominios , creando un dominio por ejemplo para las búsquedas en español.

El uso de datos estructurados es muy alto, sobre todo los utilizados de tipo “ Travel action “ , detalladísimo.

De lo más interesante es su estructura de URLs, sobre todo en los niveles de navegación más profundos donde localizan los orígenes y destinos ( from y To ) , donde se juega con el tipo de URL y se apunta a URLs orientadas las búsqueda pero que luego se reescriben a otras más naturales. Para otras se utiliza incluso el guión bajo  (https://www.goeuro.com/trains_from_leicester_to_london ) para concatenar las taxonomías acotando así el orden de las palabras claves para cuales se optimizan las búsquedas.

serp_title

 

Actualizado ; ahora la nueva estructura es más sencilla y optimizada , muestra solo https://www.omio.com/trains/leicester/london

 

smallpetselect.com

auditoria-seo-3

Interesante tienda online para pequeñas mascotas, ha sabido explotar muy bien sus contenidos para alcanzar este nicho de mercado.

Destaca la estructura de URLs en “ silo “ en los contenidos del blog lo que ha permitido atraer la mayoría del tráfico orgánico hacia las guías de mascotas. Estas guías aglutinan todos los contenidos relacionados con este tipo de mascotas ( Rabbits, Chinquilla… )  potenciando la palabra clave principal derivando así el tráfico orgánico hacia la tienda online de productos.

http://smallpetselect.com/rabbit-guide

Las estructura SEO en silo , creada en este caso mediante unas pocas categorías de contenidos que solo cruzan enlaces a niveles superior o páginas de destino, favorece una indexabilidad más profunda y permite además distribuir de forma más equitativa el link juice entre las página “ hijas “ del silo,  y a nivel de taxonomías ofrecen una coherencia tal que las palabras clave son siempre bonificadas en su posicionamiento por Google.

Hace un uso intensivo de datos enriquecidos en formato ld+json , además de los propios para ecommerce , utiliza específicos que aportan a buscadores mayor información sobre por ejemplo el contenido de sus videos.