aguarde...

4 de setembro de 2020

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

O Google parece um iceberg: há a parte acima da água que podemos ver e usar todos os dias; há também a parte abaixo da água, que não vemos e sobre a qual sabemos pouco.

Enquanto muitos de nós estamos preocupados com os aspectos do Google que não vemos – as partes que ameaçam nossa privacidade ou monopolizam a web – não há como negar que o Google oferece alguns produtos e ferramentas incríveis, muitos deles gratuitos, todos com a conveniência de um único login.

Hoje, vamos dar uma olhada em 12 ferramentas do Google que realmente trazem algo positivo para a mesa.

1. Polímero

Polymer é uma biblioteca JavaScript de código aberto do Google para a construção de aplicativos da web usando Web Components. A plataforma vem com uma tonelada de bibliotecas e ferramentas para ajudar designers e desenvolvedores a desbloquear o potencial da web, aproveitando recursos como HTTP / 2, Web Components e Service Workers. 

A principal característica do Polymer são os Web Components. Com os componentes da Web, você pode compartilhar elementos personalizados em qualquer site, trabalhar perfeitamente com os elementos internos de qualquer navegador e usar estruturas de todos os tipos com eficácia. Produtos como LitElement (uma classe base simples para criar componentes de web rápidos e leves) e o PWA Starter Kit tornam o Polymer fácil de usar. Se desejar, você pode construir seu aplicativo inteiramente de componentes da web.

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

2. Farol

Farol do Google é uma ferramenta automatizada de código aberto para melhorar a qualidade das páginas da web. O software permite que você audite páginas da web quanto ao desempenho, SEO, acessibilidade e muito mais. Você pode executar o Lighthouse usando o ChromeDevTools, diretamente da linha de comando ou como um módulo Node. 

Para usar o Lighthouse no Google Chrome, basta ir ao URL que deseja auditar (você pode auditar qualquer URL na web), abrir o ChromeDevTools e clicar na guia Auditorias. Depois de executar a auditoria, o Lighthouse fornecerá um relatório detalhado na página da web. 

Com esses relatórios, você verá quais partes de sua página da web você precisa otimizar. Cada relatório tem um documento de referência que explica por que essa auditoria é importante e também mostra as etapas que você pode seguir para corrigi-lo. 

Você também pode usar o Lighthouse CL para evitar a regressão em seus sites. Usando o Lighthouse Viewer, você pode visualizar e compartilhar relatórios online. Você também pode compartilhar relatórios como JSON ou GitHub Gists. 

O Lighthouse também vem com um recurso chamado Stack Packs, que permite que o Lighthouse detecte em qual plataforma um site foi criado. Ele também exibe recomendações específicas baseadas em pilha.

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

3. Google Analytics

O Google Analytics é o padrão ouro de serviços analíticos. O Google Analytics pode ser instalado em seu site gratuitamente com uma pequena quantidade de JavaScript e permite que você veja todos os tipos de detalhes sobre os visitantes do seu site, como o navegador que estão usando e de onde são.

Ao usar o Google Analytics, você pode tomar decisões sobre seu site com base na ciência e, portanto, estar um pouco confiante de que as decisões que você tomar resultarão no resultado que você espera.

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

4. Flutter

Flutter é o kit de ferramentas de IU do Google para criar aplicativos compilados de forma nativa para celular, web e desktop a partir de uma única base de código. O kit de ferramentas é de código aberto e de uso gratuito. A melhor parte do Flutter é que ele funciona com o código existente. 

O kit de ferramentas tem uma arquitetura em camadas que permite personalização total, o que resulta em renderização rápida e designs flexíveis. Ele também vem com widgets totalmente personalizáveis ​​que permitem que você crie interfaces nativas em minutos. Com esses widgets, você poderá adicionar recursos de plataforma, como rolagem, navegação, ícones e fontes para fornecer um desempenho nativo completo no iOS e Android.

O Flutter também possui um recurso chamado hot reload, que permite criar interfaces de usuário facilmente, adicionar novos recursos e corrigir bugs com mais rapidez. Você também pode compilar o código Flutter para código de máquina ARM nativo usando compiladores nativos Dart. 

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

5. Google API Explorer

O Google tem uma enorme biblioteca de APIs disponíveis para desenvolvedores, mas encontrar essas APIs pode ser difícil. O Google API Explorer torna mais fácil para os desenvolvedores localizar qualquer API. Na página da web do Google API Explorer, você verá uma lista completa de toda a biblioteca API. Você pode rolar facilmente pela lista ou usar a caixa de pesquisa para filtrar a lista de APIs. 

A melhor parte do Google API Explorer é que cada link para uma página de referência vem com mais detalhes sobre como usar a API. API Explorer é uma excelente maneira de experimentar métodos na API de monitoramento sem ter que escrever nenhum código.

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

6. Titereiro

Puppeteer é um projeto da equipe do Google Chrome. A plataforma permite que os desenvolvedores da web controlem um Chrome (ou qualquer outro navegador baseado no Chrome DevTools Protocol) e executem ações comuns, como em um navegador real. Puppeteer também é uma biblioteca Node e fornece uma API de alto nível para trabalhar com o Chrome headless. É também uma ferramenta útil para extrair, testar e automatizar páginas da web. 

Aqui estão algumas coisas que você pode fazer com o Puppeteer: gerar capturas de tela e PDFs de páginas, testes de interface do usuário, testar extensões do Chrome, automatizar o envio de formulários, gerar conteúdo pré-renderizado e rastrear aplicativos de página única. 

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

7. Codelabs

O Google Developer Codelabs é uma ferramenta útil para desenvolvedores iniciantes e até desenvolvedores avançados que desejam aprimorar seus conhecimentos. Codelabs fornecem uma experiência de codificação guiada, tutorial e prática. O site da Codelabs é dividido em várias sessões de tutorial sobre diferentes tópicos. 

Com os tutoriais no Codelabs, você pode aprender como criar aplicativos do zero. Algumas das categorias do tutorial incluem realidade aumentada, TensorFlow, Analytics, Virtual Analytics, G Suite, Search, Google Compute Engine e APIs do Google no iOS. 

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

8. Ferramenta de cor

A ferramenta de cores torna mais fácil para os web designers criar, compartilhar e aplicar cores à sua IU. Ele também mede o nível de acessibilidade para qualquer combinação de cores antes de exportar para a paleta. A ferramenta vem com 6 interfaces de usuário e oferece mais de 250 cores para você escolher. 

A ferramenta também é muito fácil de usar. Tudo o que você precisa fazer é escolher uma cor e aplicá-la ao esquema de cores primárias; mude para o esquema de cores secundário e escolha outra cor. Você também pode alternar para Personalizado para escolher suas próprias cores. Depois de selecionar todas as cores, use o recurso Acessibilidade para verificar se está tudo certo antes de exportar para a paleta. 

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

9. Caixa de trabalho

Workbox é um conjunto de bibliotecas JavaScript e módulos de nó. As bibliotecas JavaScript facilitam a adição de suporte offline a aplicativos da web. Os módulos Node facilitam o armazenamento em cache de ativos e oferecem outros recursos para ajudar os usuários a construir Progressive Web Apps. Alguns desses recursos incluem pré-cache, cache de tempo de execução, roteamento de solicitação, sincronização em segundo plano, depuração e maior flexibilidade do que sw-precache e sw-toolbox. 

Com o Workbox, você pode adicionar uma regra rápida que permite armazenar em cache fontes, imagens, JavaScript e arquivos CSS do Google. Armazenar esses arquivos em cache fará com que sua página da Web seja executada mais rapidamente e também consuma menos armazenamento. Você também pode pré-armazenar em cache seus arquivos em seu aplicativo da web usando seu CLI, módulo Node ou plug-in de pacote da web. 

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

10. PageSpeed ​​Insights

O PageSpeed ​​Insights é uma ferramenta útil do Google Developers que analisa o conteúdo de uma página da web e, em seguida, gera sugestões sobre como tornar a página mais rápida. Ele fornece relatórios sobre o desempenho de uma página da web em dispositivos desktop e móveis. Na parte superior do relatório, o PageSpeed ​​Insights fornece uma pontuação que resume o desempenho da página. 

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

11. AMP no Google

As páginas AMP carregam mais rápido e também têm uma aparência melhor do que as páginas HTML padrão em dispositivos móveis. As AMP no Google permitem que você aprimore suas páginas AMP no Google. É uma estrutura de componente da web que permite criar sites, anúncios, e-mails e histórias que priorizam o usuário. Um benefício do AMP é que ele permite que suas páginas da web sejam carregadas quase instantaneamente em todos os dispositivos e plataformas, melhorando a experiência do usuário. 

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE

12. Window Resizer

Ao criar sites, é importante que os desenvolvedores os testem para design responsivo – é aqui que o Window Resizer entra. Window Resizer é uma extensão do Chrome que redimensiona a janela do navegador para que você possa testar seu design responsivo em diferentes resoluções de tela. Os tamanhos de tela comuns oferecidos são desktop, laptop e celular, mas você também pode adicionar tamanhos de tela personalizados. 

12 MELHORES FERRAMENTAS DE DESIGN E DESENVOLVIMENTO DO GOOGLE
Posted in Blog
Write a comment