Las 5 extensiones de Google Chrome más útiles para los creadores de sitios web de WordPress

La optimización de su flujo de trabajo es crucial para el éxito del proyecto. Ahorra tiempo, dinero, mejora la comunicación con colegas, clientes y mejora la calidad del sitio de WordPress terminado.

Hoy en día, siempre hay una aplicación, un complemento o un complemento que puede ayudarlo a realizar su tarea de manera más eficiente. En este artículo, quería mostrarte qué tipo de extensiones usamos en los navegadores (específicamente Google Chrome) en ProteusThemes para comunicar, editar y analizar muchos tipos de contenido.

Las 5 extensiones de Chrome que uso están disponibles de forma gratuita y puedes configurarlas en solo unos minutos. Echemos un vistazo a ellos:

– WhatFont

– Regla de página

– ColorZilla

– Impresionante captura de pantalla

– estilobot

Puedes instalar todas las extensiones desde Chrome Web Store . Después de instalar la extensión, su ícono será visible en la esquina superior derecha de la barra de herramientas del navegador, al lado del campo URL. Ejecutas la extensión o ves todas las opciones haciendo clic en su icono.

Todas las extensiones instaladas se pueden ver, modificar, activar o desactivar si hace clic en el menú al final del campo URL y selecciona Más herramientas, o simplemente hace clic con el botón derecho en el icono de la extensión para elegir la opción necesaria.

Profundicemos en los detalles de cada extensión.

WhatFont

Obtenga la extensión WhatFont

¿Alguna vez ha estado en un sitio web y ha querido usar la misma fuente? Podrías ir por el camino difícil, buscando la fuente en el código, o podrías usar WhatFont. Esta extensión identifica las fuentes utilizadas en diferentes páginas web haciendo clic en el texto. La ventana emergente muestra toda la información sobre la fuente. También puede pasar el cursor sobre el texto para obtener el nombre de la fuente utilizada.

Uso esta herramienta cuando busco inspiración para el próximo proyecto o reviso la versión final del sitio web de WordPress antes de publicarlo. Los diseñadores y desarrolladores web lo utilizan a menudo cuando prueban fuentes en diferentes resoluciones de navegador.

La expansión muestra las siguientes características de la fuente:

• Peso y estilo de fuente (muestra el peso y el estilo de la selección).

• Familia de fuentes (muestra la colección completa de tipos de letra de donde proviene la fuente, para que pueda rastrearla).

• Tamaño de fuente (es el tamaño de la fuente utilizada en la resolución visualizada actualmente. Tenga en cuenta que, cuando se configuran dos fuentes diferentes en el mismo tamaño, una a menudo se ve más grande que la otra debido a sus diferencias. El tamaño se muestra en píxeles y, lamentablemente, la extensión no tiene otras medidas tipográficas).

• Altura de fuente (es la altura desde la parte superior de la letra mayúscula hasta la parte inferior de la letra descendente más baja, más un pequeño espacio de búfer).

• Color de fuente (modelo de color HEX de la fuente. Tenga cuidado al leer el color del texto de los enlaces. En algunos casos, la selección muestra el color del enlace en modo de desplazamiento).

• Enlace de Google Fonts, Font Squirrel o TypeKit (en algunos casos, la fuente está conectada a una colección de interfaces de programación de aplicaciones interactivas, lo que le permite navegar y usar fuentes web desde su sitio web . Busque la misma fuente u obtenga un tipo de letra completo) .
• Caracteres (se muestra una muestra de letras mayúsculas y minúsculas en la fuente seleccionada).

También tenga en cuenta que mientras usa WhatFont, no podrá interactuar con la página web, solo el desplazamiento en la página está activo. Puede hacer clic en varias fuentes para compararlas, sin perder la ventana emergente anterior.

Regla de página

Obtener extensión de regla de página

Page Ruler le permite dibujar una regla en cualquier página y muestra el ancho y el alto del elemento, y su posición en la página web. Nunca más tendrás que ver el código o hacer capturas de pantalla y medirlas en Photoshop. La herramienta es útil para verificar el tamaño y la posición de elementos más grandes en la página web. Por ejemplo, puede verificar todos los rellenos y márgenes con él. También se pueden medir elementos o detalles más pequeños.

Cómo usar la regla de página

Comience a usar la herramienta de regla, haciendo clic en el icono en la parte superior derecha de la barra de herramientas del navegador o presione ALT + P. Aparece una barra de regla azul que muestra el ancho, la altura y la posición de la selección: izquierda, arriba, derecha, abajo.

Para hacer una selección, simplemente haga clic, arrastre y suelte. Los datos de selección se ven instantáneamente en la barra de herramientas azul. Al hacer clic y mover los lados y las esquinas de la regla, cambia el tamaño de la selección de la regla. También puede ingresar manualmente el tamaño o la posición deseados, en los campos de la barra de regla azul. Otra opción es hacer clic en las flechas pequeñas en los campos para cambiar el tamaño o mover la selección. Esto le permite hacer cambios precisos. También está disponible mover la selección, arrastrándola desde su centro.

Cuando desee medir detalles más pequeños, haga zoom en la página web. El mayor beneficio de esta herramienta es que la regla no agregará píxeles adicionales a la selección cuando haga zoom.

El color de la regla se puede cambiar para crear un mejor contraste entre la selección de la regla y los colores utilizados en el elemento de la página, para que pueda realizar mediciones más precisas.

Para medir el espacio entre dos elementos que están muy separados, active la opción "Mostrar guías" para mostrar las guías que se extienden desde los bordes de la regla.

Puede acoplar la barra de herramientas a la parte inferior de la página web si le molesta, mientras realiza mediciones.

Habilite el "Modo de elemento" (haga clic en las flechas de color azul claro en el lado izquierdo de la barra de herramientas) para delinear los elementos en la página, mientras mueve el mouse sobre ellos. Al hacer clic en los elementos, obtiene una selección constante. La extensión también muestra y te permite moverte entre elementos según el código del sitio web.

Encontrar y moverse entre elementos en el modo de elementos

El único inconveniente del complemento: si necesita obtener el tamaño del elemento en la vista móvil, tendrá que usar Page Ruler simultáneamente con otro complemento de Chrome de cambio de tamaño (por ejemplo, Window Resizer), porque Page Ruler no funciona cuando usted está en la página web en modo desarrollador.

ColorZilla

Obtenga la extensión ColorZilla

ColorZilla es una extensión que ayuda a los desarrolladores web y diseñadores gráficos con tareas relacionadas con el color. Suele utilizarse para hacer paletas de colores, inspirarse en combinaciones de colores o comprobar el color de un elemento determinado. Puede obtener una lectura de color desde cualquier parte de la página web, ajustar ese color y pegarlo en otro programa, sin tener que abrir otra aplicación.

Esta herramienta proporciona lecturas de color en formato RGB y hexadecimal. Haga clic en el icono del cuentagotas de ColorZilla para abrir un menú de muchas opciones.

Cómo usar ColorZilla

El uso más común de ColorZilla es leer el color de un elemento. Al hacer clic en "Elegir color de la página" le permite elegir cualquier color de la página que se muestra actualmente. Abre una barra de herramientas en la parte superior de la página web, que le muestra una muestra del color, el formato de color RGB y HEX, y el tamaño y el código del elemento coloreado. La barra de herramientas también proporciona opciones para seleccionar parches más grandes de los colores, para calcular el color promedio.

Selecciona y copia el formato HEX del color haciendo clic en él. Pegue el código de color HEX con los botones CTRL + V o CMD + V. Para una copia única en un formato diferente, puede abrir el menú desplegable, seleccionar "Copiar al portapapeles" y elegir el formato deseado.

El formato se puede cambiar para todos los siguientes colores seleccionados en las opciones. Allí puede deshabilitar el formato # (66CAA6) y hacer el código HEX en minúsculas (66caa6). No olvides guardar los cambios.

El último color que eligió se guarda en el menú desplegable del icono de ColorZilla, en "Selector de color". Color Picker almacena el historial de colores elegidos, tiene una opción para editar el color y puede copiarlo desde aquí.

“Webpage Color Analyser” lee todos los colores CSS utilizados en su página web actual. Al hacer clic en el color, se resalta cada elemento en este color y se muestra el formato RGB y HEX del color.

El explorador de paletas incorporado le permite elegir colores de conjuntos de colores preexistentes. Una de las opciones relacionadas con el color es también el "Generador de degradado CSS", una opción avanzada para crear degradados.

Impresionante captura de pantalla

Obtenga una impresionante extensión de captura de pantalla

Esta extensión facilita la captura de pantalla y la grabación de páginas web. También es posible importar tus imágenes locales, editarlas y exportarlas. En ProteusThemes lo usamos todos los días para comunicarnos internamente, así como para el soporte de WordPress que ofrecemos. La herramienta es muy útil, si está trabajando de forma remota. Sí, hay muchas otras extensiones que pueden hacer el mismo trabajo, pero nos gusta Awesome Screenshot porque es simple y potente.

Cómo usar una captura de pantalla impresionante

Esta expansión te permite:

– para capturar parte visible de la página web (opción para subtítulos diferidos),

– para capturar el área seleccionada (seleccione un área que desee como imagen),

– para capturar toda la página web,

– para hacer una captura de pantalla de tu escritorio,

– para importar y editar su imagen local y

– para grabar un video de la pantalla.

Para seleccionar una de las formas de captura de pantalla de una página web, haga clic en el icono de la lente de la cámara en la barra de herramientas del navegador. Tenga en cuenta que todas las acciones, excepto la captura retrasada de la captura de pantalla impresionante, se realizarán al instante. Las capturas de pantalla que realice se guardarán como imagen PNG o JPEG. El formato deseado para la imagen se puede elegir en las opciones de la extensión, donde también tiene otras configuraciones, como el tiempo de captura retrasada, códigos cortos y una carpeta, en la que desea que las imágenes se guarden automáticamente.

Si desea una vista móvil de la página web o hacer una captura de pantalla de su página web de WordPress en otra resolución, puede ir al modo de desarrollador para modificarla o activar cualquier otra expansión de cambio de tamaño primero (por ejemplo, Website Resizer).

Antes de guardar la captura de pantalla, tiene la oportunidad de editarla y comentarla. Desplácese por su captura, recórtela y desenfoque fácilmente las partes que contienen datos privados. Puede anotar la imagen con texto, círculos, flechas y líneas en diferentes colores, para énfasis y claridad. Acercar y alejar con iconos de lupa para ver la imagen antes de guardar.

Barra de herramientas y opciones de edición de capturas de pantalla con Awesome Screenshot

Una vez que esté satisfecho con el resultado, guarde la imagen en su computadora, en la nube, compártala o imprímala.

Esta expansión también tiene una opción para grabar videos de pantalla de 30 segundos de forma gratuita. Puede hacer un video de pestaña o ventana. Los videos se pueden guardar en formato WebM, transferir a Google Drive o cargar directamente en YouTube. Sus grabaciones se pueden encontrar en el menú desplegable Impresionante captura de pantalla en "Mis grabaciones".

Las únicas dos desventajas de la extensión son que cuando hace zoom en el navegador, la captura del área seleccionada no funciona y muchos usuarios no pueden obtener una buena captura de pantalla de los sitios web con elementos fijos.

Dato curioso: la mayoría de las capturas de pantalla y los videos que está viendo en este artículo se realizaron con Awesome Screenshot.

estilobot

Obtenga la extensión Stylebot

Stylebot le permite editar y manipular CSS del sitio web solo para su visualización. Necesitará algunos conocimientos de CSS para realizar cambios precisos y a largo plazo en el CSS del sitio web . Si solo lo necesita para una vista previa más rápida de los cambios en su página de WordPress, no se requieren conocimientos avanzados de CSS. Esta herramienta se utiliza para cambiar todos los elementos posibles, agregar nuevos, eliminarlos y hacer un diseño diferente del sitio web, para que pueda hacer una captura de pantalla perfecta, corregir errores no deseados o guardar ese CSS del sitio web, por lo que los cambios también serán visto en la próxima visita. El estilo del sitio web que creó se puede importar o exportar y compartir con otros.

Para una edición más avanzada, Stylebot se usa en combinación con el modo desarrollador para identificar elementos en la página.

Cómo usar Stylebot

Para abrir el Stylebot, haga clic en el icono CSS en la barra de herramientas del navegador o presione ALT + M. Si no tiene muchas habilidades de programación, le sugiero que elija el modo Básico en la parte inferior de la columna recién abierta.

El modo Avanzado abre un campo de texto, en el que escribe el código CSS para el elemento seleccionado. Aquí, es más fácil trabajar en combinación con el modo de desarrollador para encontrar el nombre del elemento que desea cambiar de los elementos anidados y continuar con la edición en Stylebot. Si desea utilizar varios modos de edición al mismo tiempo, puede hacerlo. Las ediciones simples se traducirán a código, visible en modo Avanzado o Editar CSS.

La opción "Editar CSS" abre un campo para el código CSS, que se aplicará a todo el sitio web y se puede guardar, compartir y usar la próxima vez que visite el sitio web. Todos los cambios que haya realizado serán visibles. Tenga en cuenta que todos los cambios que realice se mantendrán si actualiza el sitio web. Para eliminar el estilo, haga clic en el icono de Stylebot y elija "Eliminar estilo".
El modo básico tiene secciones simples para una edición más rápida y fácil del sitio web. A veces lo usamos como una herramienta de vista previa rápida (por ejemplo, para probar cómo se vería un encabezado más grande, para cambiar el color del fondo, etc.). Los principiantes podrían usarlo fácilmente desde el principio.

Aquí puedes cambiar:

– texto,

– colores, fondos,

– fronteras,

– diseño y visibilidad.

Selecciona manualmente un elemento en el sitio web (resaltado con un borde verde) con un cursor. El nombre del elemento se mostrará en la parte superior de la columna Stylebot. Para una nueva selección, simplemente haga clic en el icono superior izquierdo de la columna. La flecha desplegable en el título del elemento le proporciona las secciones previamente seleccionadas. Cuando se selecciona el elemento correcto, puede comenzar a cambiar el sitio web ingresando los valores y eligiendo opciones prediseñadas. Las opciones de edición en el modo básico son limitadas. Puede cambiar el tamaño de fuente, el color del texto, los rellenos y márgenes, etc.

Para que su experiencia de edición o visualización de Stylebot sea más placentera, haga clic en el icono de Stylebot y elija Opciones. Aquí puede crear accesos directos personalizados, elegir el modo de edición preferido, habilitar y deshabilitar sus estilos aplicados en diferentes sitios web, importar y exportar estilos, etc.

Así que aquí hay solo 5, las extensiones más esenciales y poderosas, que usamos a diario en ProteusThemes y que también pueden facilitar su flujo de trabajo. ¿Piensas lo contrario? ¿Recomendaría mejores alternativas? Deja un comentario.