5 extensões mais úteis do Google Chrome para criadores de sites WordPress

Otimizar seu fluxo de trabalho é crucial para o sucesso do projeto. Economiza tempo, dinheiro, melhora a comunicação com colegas, clientes e melhora a qualidade do site WordPress finalizado.

Hoje em dia, sempre existe um aplicativo, plugin ou add-on, que pode te ajudar a fazer sua tarefa com mais eficiência. Neste artigo, eu queria mostrar a você que tipo de extensões usamos em navegadores (especificamente Google Chrome) no ProteusThemes para comunicar, editar e analisar vários tipos de conteúdo.

Todas as 5 extensões do Chrome que eu uso estão disponíveis gratuitamente e você pode configurá-las em apenas alguns minutos. Vamos dar uma olhada neles:

– Qual Fonte

– Régua de página

– ColorZilla

– Captura de tela incrível

– Stylebot

Você pode instalar todas as extensões da Chrome Web Store . Após a instalação da extensão, seu ícone ficará visível no canto superior direito da barra de ferramentas do navegador, próximo ao campo URL. Você executa a extensão ou visualiza todas as opções clicando em seu ícone.

Todas as extensões instaladas podem ser vistas, modificadas, ativadas ou desativadas, se você clicar no menu ao final do campo URL e selecionar Mais Ferramentas, ou simplesmente clicar com o botão direito do mouse no ícone da extensão para escolher a opção desejada.

Vamos mergulhar nos detalhes de cada extensão.

Qual Fonte

Obter extensão WhatFont

Você já esteve em um site e queria usar a mesma fonte? Você pode seguir o caminho mais difícil, procurando a fonte no código, ou pode usar o WhatFont. Esta extensão identifica as fontes usadas em diferentes páginas da web clicando no texto. A janela pop-up mostra todas as informações sobre a fonte. Você também pode passar o mouse sobre o texto para obter o nome da fonte usada.

Eu uso essa ferramenta quando estou procurando inspiração para o próximo projeto ou verificando a versão final do site WordPress antes de ir ao ar. É frequentemente usado por web designers e desenvolvedores ao testar fontes em diferentes resoluções de navegador.

A expansão mostra as seguintes características da fonte:

• Font Weight & Style (mostra o peso e o estilo da seleção).

• Font Family (mostra a coleção completa de tipos de letra de onde vem a fonte, para que você possa rastreá-la).

• Tamanho da fonte (é o tamanho da fonte usada na resolução visualizada atual. Observe que, quando duas fontes diferentes são definidas no mesmo tamanho, uma parece maior que a outra devido às diferenças. O tamanho é mostrado em pixels e, infelizmente, a extensão não tem outras medidas tipográficas).

• Font Height (é a altura da parte superior da letra maiúscula até a parte inferior do descendente mais baixo, mais um pequeno espaço de buffer).

• Cor da fonte (modelo de cor HEX da fonte. Tenha cuidado ao ler a cor do texto dos links. Em alguns casos, a seleção mostra a cor do link no modo de foco).

• Link do Google Fonts, Font Squirrel ou TypeKit (em alguns casos, a fonte está conectada a uma coleção de interfaces de programação de aplicativos interativas, que permitem navegar e usar fontes da Web em seu site . Procure a mesma fonte ou obtenha um tipo de letra inteiro) .
• Caracteres (uma amostra de letras maiúsculas e minúsculas é mostrada na fonte selecionada).

Observe também que, ao usar o WhatFont, você não poderá interagir com a página da Web, apenas a rolagem na página está ativa. Você pode clicar em várias fontes para compará-las, sem perder o pop-up anterior.

Régua de página

Obter extensão de régua de página

Régua de página permite desenhar uma régua para qualquer página e exibe a largura e a altura do elemento e sua posição na página da web. Você nunca mais terá que visualizar o código ou fazer capturas de tela e medi-las no Photoshop. A ferramenta é útil ao verificar o tamanho e a posição de elementos maiores na página da web. Por exemplo, você pode verificar todos os preenchimentos e margens com ele. Elementos ou detalhes menores também podem ser medidos.

Como usar a régua de página

Comece a usar a ferramenta régua, clicando no ícone no canto superior direito da barra de ferramentas do navegador ou pressione ALT + P . Barra de régua azul aparece, que exibe largura, altura e posição da seleção – esquerda, superior, direita, inferior.

Para fazer uma seleção, basta clicar, arrastar e soltar. Os dados de seleção são vistos instantaneamente na barra de ferramentas azul. Ao clicar e mover os lados e os cantos da régua, você altera o tamanho da seleção da régua. Você também pode inserir manualmente o tamanho ou a posição desejada, nos campos da barra azul da régua. Outra opção é clicar nas pequenas setas nos campos para redimensionar ou mover a seleção. Isso permite que você faça alterações precisas. Mover a seleção, arrastando-a do centro, também está disponível.

Quando você quiser medir detalhes menores, amplie a página da Web. O maior benefício dessa ferramenta é que a régua não adiciona pixels extras à seleção quando você aumenta o zoom.

A cor da régua pode ser alterada, para criar um contraste melhor entre a seleção da régua e as cores usadas no elemento da página, para que você possa fazer medições mais precisas.

Para medir o espaço entre dois elementos que estão distantes, ative a opção “Mostrar guias”, para exibir as diretrizes que se estendem das bordas da régua.

Você pode encaixar a barra de ferramentas na parte inferior da página da Web, se estiver incomodando, enquanto faz medições.

Ative o “Modo de elemento” (clique nas setas azuis claras no lado esquerdo da barra de ferramentas) para delinear os elementos na página, conforme você move o mouse sobre eles. Ao clicar nos elementos, você obtém uma seleção constante. A extensão também exibe e permite que você se mova entre os elementos de acordo com o código do site.

Localizando e movendo-se entre elementos no Modo de Elemento

A única desvantagem do plug-in: se você precisar obter o tamanho do elemento na visualização móvel, terá que usar o Page Ruler simultaneamente com outro plug-in de redimensionamento do Chrome (por exemplo, Window Resizer), porque o Page Ruler não funciona quando você está na página da Web no modo de desenvolvedor.

ColorZilla

Obter extensão ColorZilla

ColorZilla é uma extensão que auxilia desenvolvedores web e designers gráficos com tarefas relacionadas a cores. Geralmente é usado para fazer paletas de cores, se inspirar em combinações de cores ou conferir a cor de um determinado elemento. Você pode obter uma leitura de cores de qualquer parte da página da Web, ajustar essa cor e colá-la em outro programa, sem precisar abrir outro aplicativo.

Esta ferramenta fornece leituras de cores em formato RGB e hexadecimal. Clique no ícone do conta-gotas do ColorZilla para abrir um menu de muitas opções.

Como usar o ColorZilla

O uso mais comum do ColorZilla é ler a cor de um elemento. Clicar em “Selecionar cor da página” permite que você escolha qualquer cor da página exibida no momento. Ele abre uma barra de ferramentas na parte superior da página da Web, que mostra uma amostra da cor, formato de cor RGB e HEX e o tamanho e código do elemento colorido. A barra de ferramentas também oferece opções para selecionar manchas maiores das cores, para calcular a cor média.

Você seleciona e copia o formato HEX da cor clicando nela. Cole o código de cor HEX com os botões CTRL + V ou CMD + V . Para uma cópia única em um formato diferente, você pode abrir o menu suspenso, selecionar “Copiar para a área de transferência” e escolher o formato desejado.

O formato pode ser alterado para todas as próximas cores escolhidas nas opções. Lá você pode desabilitar o formato # (66CAA6) e fazer o código HEX em minúsculas (66caa6). Não se esqueça de salvar as alterações.

A última cor que você escolheu é salva no menu suspenso do ícone ColorZilla, em “Color Picker”. Color Picker armazena o histórico de cores escolhidas, tem a opção de editar a cor e você pode copiá-la daqui.

“Webpage Color Analyser” lê todas as cores CSS usadas na sua página atual. Clicar na cor destaca cada elemento nesta cor e mostra o formato RGB e HEX da cor.

O navegador de paletas integrado permite que você escolha cores de conjuntos de cores pré-existentes. Uma das opções relacionadas a cores também é o “CSS Gradient Generator”, uma opção avançada para criar gradientes.

Captura de tela incrível

Obtenha uma extensão de captura de tela incrível

Essa extensão facilita a captura de tela e a gravação de páginas da web. Também é possível importar suas imagens locais, editá-las e exportá-las. Na ProteusThemes, usamos todos os dias para nos comunicarmos internamente, bem como para o suporte ao WordPress que oferecemos. A ferramenta é muito útil, se você estiver trabalhando remotamente. Sim, existem muitas outras extensões que podem fazer o mesmo trabalho, mas gostamos do Awesome Screenshot porque é simples e poderoso.

Como usar a captura de tela impressionante

Esta expansão permite:

– para capturar parte visível da página da web (opção de legenda atrasada),

– para capturar a área selecionada (selecione uma área que você deseja como imagem),

– para capturar a página inteira,

– para capturar a tela de sua área de trabalho,

– para importar e editar sua imagem local e

– para gravar um vídeo da tela.

Para selecionar uma das formas de captura de tela de uma página da Web, clique no ícone da lente da câmera na barra de ferramentas do navegador. Observe que todas as ações, exceto a captura atrasada da captura de tela incrível, serão feitas instantaneamente. As capturas de tela que você fizer serão salvas como imagem PNG ou JPEG. O formato desejado para a imagem pode ser escolhido nas opções da extensão, onde você também tem outras configurações, como tempo de captura atrasada, códigos de acesso e uma pasta, na qual deseja que as imagens sejam salvas automaticamente.

Se você quiser uma visualização móvel da página da web ou fazer uma captura de tela da sua página do WordPress em outra resolução, você pode entrar no modo de desenvolvedor para modificá-la ou ativar qualquer outra expansão de redimensionamento primeiro (por exemplo, Resizer de site).

Antes de salvar a captura de tela, você pode editá-la e comentá-la. Percorra sua captura, corte-a e desfoque facilmente as partes, que contêm dados privados. Você pode anotar a imagem com texto, círculos, setas e linhas em cores diferentes, para dar ênfase e clareza. Aumente e diminua o zoom com ícones de lupa para visualizar a imagem antes de salvar.

Opções de edição de barra de ferramentas e captura de tela com o Awesome Screenshot

Quando estiver satisfeito com o resultado, salve a imagem em seu computador, nuvem, compartilhe ou imprima.

Esta expansão também tem a opção de gravar vídeos de tela de 30 segundos gratuitamente. Você pode fazer um vídeo de guia ou janela. Os vídeos podem ser salvos no formato WebM, transferidos para o Google Drive ou carregados diretamente no YouTube. Suas gravações podem ser encontradas no menu suspenso Awesome Screenshot em “My Recordings”.

As únicas duas desvantagens da extensão são que, quando você amplia o navegador, a captura da área selecionada não funciona e muitos usuários não conseguem obter uma boa captura de tela dos sites com elementos fixos.

Curiosidade: a maioria das capturas de tela e vídeos que você está vendo neste artigo foram feitas com o Awesome Screenshot.

Stylebot

Obter extensão Stylebot

O Stylebot permite que você edite e manipule o CSS do site apenas para sua visualização. Você precisará de algum conhecimento de CSS para fazer alterações precisas e de longo prazo no CSS do site . Se você precisar apenas para uma visualização mais rápida das alterações em sua página do WordPress, não é necessário conhecimento avançado de CSS. Esta ferramenta é usada para alterar todos os elementos possíveis, adicionar novos, excluí-los e fazer um layout diferente do site, para que você possa fazer uma captura de tela perfeita, corrigir erros indesejados ou salvar aquele CSS do site, para que as alterações também sejam visto na próxima visita. Estilo do site que você criou, pode ser importado ou exportado e compartilhado com outras pessoas.

Para uma edição mais avançada, o Stylebot é usado em combinação com o modo de desenvolvedor para identificar elementos na página.

Como usar o Stylebot

Para abrir o Stylebot, clique no ícone CSS na barra de ferramentas do navegador ou pressione ALT + M . Se você não tem muita habilidade de programação, sugiro que escolha o modo Básico na parte inferior da coluna recém-aberta.

O modo Avançado abre um campo de texto, no qual você escreve o código CSS para o elemento selecionado. Aqui, é mais fácil trabalhar em combinação com o modo de desenvolvedor para encontrar o nome do elemento que você deseja alterar a partir dos elementos aninhados e continuar a edição no Stylebot. Se você quiser usar vários modos de edição ao mesmo tempo, você pode. As edições simples serão traduzidas em código, visíveis no modo Advance ou Edit CSS.

A opção “Editar CSS” abre um campo para código CSS, que será aplicado a todo o site e poderá ser salvo, compartilhado e utilizado na próxima vez que você visitar o site. Todas as alterações que você fez ficarão visíveis. Observe que todas as alterações feitas permanecerão, se você atualizar o site. Para remover o estilo, clique no ícone do Stylebot e escolha “Remover estilo”.
O modo básico tem seções simples para uma edição mais rápida e fácil do site. Às vezes, usamos como uma ferramenta de visualização rápida (por exemplo, para testar a aparência de um título maior, para alterar a cor do plano de fundo etc.). Iniciantes podem facilmente usá-lo desde o início.

Aqui você pode alterar:

– texto,

– cores, fundos,

– fronteiras,

– layout e visibilidade.

Você escolhe manualmente um elemento no site (destacado com borda verde) com um cursor. O nome do elemento será mostrado no topo da coluna Stylebot. Para uma nova seleção, basta clicar no ícone superior esquerdo da coluna. A seta suspensa no título do elemento fornece as seções selecionadas anteriormente. Quando o elemento certo é selecionado, você pode começar a alterar o site inserindo os valores e escolhendo as opções pré-estilizadas. As opções de edição no modo básico são limitadas. Você pode alterar o tamanho da fonte, cor do texto, preenchimentos e margens, etc.

Para tornar sua experiência de edição ou visualização do Stylebot mais agradável, clique no ícone do Stylebot e escolha Opções. Aqui você pode criar atalhos personalizados, escolher o modo de edição preferido, ativar e desativar seus estilos aplicados em diferentes sites, importar e exportar estilos, etc.

Então, aqui estão apenas 5 extensões mais essenciais e poderosas, que usamos diariamente no ProteusThemes e podem facilitar seu fluxo de trabalho também. Você acha o contrário? Você recomendaria alternativas melhores? Deixe um comentário.