Las 3 mejores extensiones de Chrome para los profesionales de Bubble.io

En este vídeo, te mostraré las 3 principales extensiones de Chrome que utilizamos en NoCodeGermany cuando desarrollamos aplicaciones web sin código con Bubble.

🏆 ColorZilla

Con esto puedes reconocer los colores en cada página web

🔗https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=de

🔗 https://www.colorzilla.com/chrome/

🏆 Buscador de fuentes

Como su nombre indica, puedes analizar las fuentes con esta extensión de Chrome.

🔗 https://chrome.google.com/webstore/detail/font-finder/bhiichidigehdgphoambhjbekalahgha

🔗 https://add0n.com/font-finder.html

🏆 🥇 VisBug 🥇

Una auténtica obra maestra para analizar distancias, tamaños, etc. y la extensión de Chrome ofrece incluso la posibilidad de editar la página web (cambiar textos, colores).

🔗https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc

🔗 https://github.com/GoogleChromeLabs/ProjectVisBug

Transcripción del vídeo

Hola, mi nombre es Chris Strobl y hoy voy a mostraros las extensiones de Chrome que utilizo cuando programo Bubble.io. Por supuesto, también puedes utilizar las herramientas para desarrolladores de Google Chrome o Safari. Pero personalmente creo que las extensiones de Chrome son muy útiles cuando se trabaja con Bubble.

El primer plugin se llama ColorZilla y es un plugin que realmente te muestra el color correcto de todos los elementos de la web, es decir, si son logos, si son tonos de gris. Me parece especialmente emocionante si quieres orientarte sobre cómo son los diferentes tonos de gris de un sitio web.

O cómo son los contrastes, eso es increíblemente valioso. Haces clic en ColorZilla Pick Color de la página y ves que cuando pasamos por encima de la página, reconoce todos los colores. Es decir, incluso si entro en esta imagen aquí, reconoce el color y ahora seleccionamos un azul como esta vez. Copiaste eso. El color se copia y luego cuando se pega que, usted tiene que en el portapapeles y por lo que puede utilizar que en cualquier momento. El siguiente plugin se llama Font Finder. Es un excelente plugin para ver las diferentes fuentes en una página. Y si volvemos a entrar en la burbuja, ya ves: vamos al Buscador de Fuentes. Y si ahora nos desplazamos por la página web, verás que sigue preseleccionando. Cuando hago doble clic, aparece una ventana emergente y el inspector me muestra no sólo el color, sino, lo que es más importante, qué tipo de letra es, qué altura, qué altura de línea, o incluso cuál es la ponderación de la letra, como 400. Eso, de nuevo, te ayuda a tener una buena sensación cuando analizas sitios web, cómo otros excelentes diseñadores construyen sus páginas Bubble y también otros sitios web. El tercer y último plugin es VisBug. Una verdadera obra maestra. Recomiendo a todo el mundo que vea la keynote de la Chrome Dev Summit. Hay un video maravilloso en Youtube sobre esto y esta herramienta es realmente poderosa.

Es decir, si volvemos a la página de características y activamos VisBug, ahora tienes aquí a la derecha - esta barra de herramientas podría moverse en cualquier momento - ahora tienes diferentes campos, por ejemplo, si haces clic en la regla, puedes tener todas las distancias que se te muestran, como por ejemplo un 5 píxeles entre este titular y el titular grande y entre este y el H2 es un 30 píxeles. Y aquí hay 58 píxeles. También puede hacer clic en Información para ver los detalles de un elemento, como el tamaño de esta imagen.

Y si vas al texto, verás que también te muestra el tamaño de la letra. Esto es especialmente emocionante con elementos más complejos como aquí tienes estos botones y puedes ver cómo interactúan entre sí. Una de las grandes características de VisBug es que puedes cambiar los textos de la página web. Y aquí en la consola puedes editarlos. Esto es especialmente bueno si usted trabaja con VisBug usted mismo de sus propios sitios web y quiere ver la longitud de los elementos de texto para darle una idea. También puedes hacer otras cosas aquí, como cambiar el color. Definitivamente tienes que hacerlo, si quieres ver VisBug en detalle, sólo tienes que mirar todas las características. Esta Keynote para desarrolladores de Google Chrome es fabulosa.

La ventaja de VisBug es que es un poco más fácil de trabajar que las herramientas de desarrollo de Google Chrome. Es decir, si lo desactivas de nuevo y entras en las Herramientas de desarrollo, a veces es un poco difícil. Por un lado, sí, de repente tenemos responsive, lo que significa que realmente necesitamos una segunda pantalla, y por otro lado, es relativamente complicado encontrar la disposición exacta y los detalles de estos elementos. Por eso, a veces puede resultar un poco confuso cómo se construye exactamente un sitio web de este tipo. Y por eso encuentro estas extensiones de Chrome increíblemente valiosas. Si te ha gustado este vídeo, haz clic en el botón "Me gusta" y suscríbete al canal.

Esto nos ayuda a conseguir un mayor alcance. Esto hace que merezca la pena seguir ofreciendo aún más contenidos de forma gratuita. Por supuesto, si tienes preguntas sobre las extensiones de Chrome o has encontrado extensiones de Chrome mucho mejores, no dudes en escribir en los comentarios o escribirme directamente en Twitter. Te deseo que sigas teniendo éxito y que nos veamos pronto.