Contente
- 01. Farol
- 02. Polímero
- 03. APIs Explorer
- 04. Flutter
- 05. Google GitHub
- 06. Titereiro
- 07. Caixa de trabalho
- 08. Codelabs
- 09. Ferramenta de cor
- 10. Projetar Sprints
- 11. Guia People + AI
- 12. Google Assistant
- 13. PageSpeed Insights
- 14. AMP no Google
- 15. Google DevTools
- 16. Design de Materiais
Trabalhar na web geralmente significa que você trabalhará com o Google de alguma forma. E como o Google Chrome está muito à frente da concorrência, designers e desenvolvedores precisam pensar em como seu projeto funcionará com o navegador. Como vai ficar? Quais tecnologias são compatíveis, quão seguro é e como funcionará?
Felizmente, o Chrome fornece ferramentas para garantir que qualquer site ou aplicativo terá o melhor desempenho. DevTools permite que designers e desenvolvedores obtenham insights sobre uma página da web: você pode manipular o DOM, verificar CSS, experimentar designs com edição ao vivo, depurar JavaScript e verificar o desempenho. (Veja mais sobre como usar essas ferramentas da web do Google aqui e, se estiver começando do zero, consulte nossa lista dos principais construtores da web também).
Mas o Google oferece mais do que apenas o navegador. Ele possui ferramentas e recursos para auxiliar em quase todos os aspectos de sua vida de design e desenvolvimento. Quer saber como melhorar o desempenho? A Lighthouse está aqui para ajudar. Quer criar sites para celular com melhor desempenho? Em seguida, diga olá para AMP. Você está procurando construir lindos PWAs? Então Flutter, Material Design e Workbox estão prontos para entrar em ação.
A beleza de usar ferramentas, recursos, bibliotecas e estruturas do Google é que você sabe que eles funcionarão bem com o navegador Chrome - o navegador mais popular do planeta. Para obter mais ferramentas, consulte nosso resumo de ferramentas de web design.
01. Farol
O desempenho é um fator chave para o sucesso de um site e o Lighthouse é a ferramenta do Google para melhorar a qualidade das páginas da web (o serviço de hospedagem na web certo também ajudará). Então, como você usa o Lighthouse e o que ele pode fazer? Em sua forma mais simples, você pode executar o Lighthouse na guia Auditorias e escolher entre uma seleção de opções, incluindo desktop ou móvel, além de caixas de seleção para desempenho, acessibilidade e SEO, para gerar um relatório final com melhorias sugeridas.
02. Polímero
A Polymer é bem conhecida por seu trabalho com componentes da web, mas o projeto agora expandiu seu repertório para incluir uma coleção de bibliotecas, ferramentas e padrões. O que está incluído? LitElement é um editor que facilita a definição de componentes da web, enquanto lit-html é uma biblioteca de modelos HTML que permite aos usuários escrever modelos HTML de próxima geração em JS. Além disso, você também encontrará um kit PWA Starter, a biblioteca original do Polymer e conjuntos de componentes da web.
03. APIs Explorer
O Google tem uma vasta biblioteca de APIs disponíveis para desenvolvedores, mas encontrar o que você precisa não é uma tarefa fácil. É aqui que o APIs Explorer do Google entra em ação para oferecer uma ajuda. Há uma longa lista que pode ser percorrida, mas, para um acesso mais rápido, há uma caixa de pesquisa para filtrar a lista de APIs. Cada entrada leva a uma página de referência com mais detalhes sobre como usar a API.
04. Flutter
Se você está procurando criar aplicativos bonitos para dispositivos móveis, web e desktop a partir de uma única base de código, o Flutter pode ser a sua escolha. O site é uma referência completa para trabalhar e construir com o Flutter. Não tem ideia do que fazer? Os documentos levam o usuário da instalação à criação, auxiliado por diversos exemplos e tutoriais.
05. Google GitHub
Como a maioria sabe, o GitHub é a plataforma / repositório de hospedagem para armazenar e compartilhar códigos e arquivos. E felizmente o Google tem seu próprio lugar na plataforma com mais de 260 repositórios para examinar. Use o filtro para reduzir o tempo de pesquisa e se aproximar do repositório com o qual deseja brincar ou contribuir.
06. Titereiro
Construído no Node, o Puppeteer oferece uma API de alto nível que permite que você acesse o Chrome sem cabeça - efetivamente o Chrome sem a IU, que os desenvolvedores podem controlar por meio da linha de comando. Então, o que você pode fazer com o Puppeteer? Algumas opções estão disponíveis para gerar capturas de tela e PDFs de páginas, automatizar o envio de formulários e criar um ambiente de teste automatizado.
07. Caixa de trabalho
Se você está procurando construir um PWA, este é um excelente ponto de partida. Workbox fornece uma coleção de bibliotecas JavaScript para adicionar suporte offline a aplicativos da web. Uma seleção de guias detalhados demonstra como criar e registrar um arquivo de service worker, rotear solicitações, usar plug-ins e usar bundlers com Workbox. E também há um conjunto de estratégias de cache de exemplo para verificar.
08. Codelabs
Precisa de orientação prática para um produto do Google? Codelabs fornece “uma experiência de codificação guiada, tutorial e prática”. O site é dividido em categorias e eventos, tornando rápido e fácil encontrar o que você deseja. Inclui Analytics, Android, Assistant, realidade aumentada, Flutter, G Suite, Search, TensorFlow e realidade virtual. Selecione uma opção e obtenha o código e as instruções necessárias para construir pequenos aplicativos.
09. Ferramenta de cor
A ferramenta de cores é uma ferramenta simples que permite criar, compartilhar e aplicar uma paleta, além de verificar a acessibilidade. Os usuários podem escolher uma paleta predefinida na paleta de materiais. Basta escolher uma cor e aplicá-la ao esquema de cores primário, alternar para a opção secundária e selecionar novamente. Por fim, escolha as cores do texto para ambos os esquemas. Alternativamente, mude para Personalizado para escolher suas cores. Em seguida, mude para Acessibilidade para verificar se tudo está bem antes de, finalmente, exportar a paleta.
10. Projetar Sprints
O Design Sprint Kit é para aqueles que estão aprendendo como participar ou executar design sprints. Ele cobre todas as bases de conhecimento, desde os iniciantes até os experientes facilitadores de sprints. Aprenda sobre a metodologia ou pule direto para o estágio de planejamento, incluindo escrever resumos, coletar dados e pesquisas, bem como o que fazer após o sprint. Também inclui uma série de recursos como ferramentas, modelos, receitas e a opção de enviar seu próprio método. Além disso, você provavelmente precisará de um lugar para armazenar e compartilhar recursos, portanto, certifique-se de que sua escolha de armazenamento em nuvem esteja correta.
11. Guia People + AI
Este guia é o trabalho da iniciativa People + AI Research do Google e visa oferecer ajuda para aqueles que desejam construir produtos de IA centrados no ser humano. O guia abrangente é dividido em seis capítulos que cobrem as necessidades do usuário, coleta e avaliação de dados, modelos mentais, confiança, feedback e falha graciosa. Cada capítulo é acompanhado por exercícios, planilhas e as ferramentas e recursos necessários para que isso aconteça.
12. Google Assistant
Esta é a plataforma de desenvolvedor do Google Assistant, que oferece um guia sobre como integrar seu conteúdo e serviços ao Google Assistant. Ele mostra como estender seu aplicativo móvel, apresentar conteúdo de maneiras ricas para Pesquisa e Assistente, controlar luzes, máquinas de café e outros dispositivos em casa e criar experiências de voz e visuais para alto-falantes, monitores e telefones inteligentes.
13. PageSpeed Insights
O PageSpeed Insights analisa o conteúdo da web e, em seguida, oferece sugestões sobre como fazer com que ele carregue mais rápido. Basta adicionar um URL, clicar no botão Analisar e esperar que a mágica aconteça. Verifique o Documentos para ter uma ideia melhor de como a API PageSpeed funciona e como começar a usá-la.
14. AMP no Google
AMP é a ferramenta do Google para a criação de páginas móveis de carregamento rápido que (com sorte) chegarão ao topo dos rankings de busca. Aprenda a criar sites rápidos que priorizam o usuário, integrar AMP nos produtos do Google, usar o Google AMP Cache para tornar as páginas AMP mais rápidas e monetizar páginas AMP com outros produtos do Google.
15. Google DevTools
Todo designer e desenvolvedor sabe (ou pelo menos deveria saber) que o Chrome vem com um conjunto de ferramentas embutidas diretamente no navegador. As DevTools do Chrome são ideais para inspecionar os elementos que compõem uma página, verificar CSS, editar páginas em tempo real e muito mais.
A guia Elementos é a introdução ao DevTools. Ele exibe o código HTML que constitui a página selecionada. Obtenha uma visão geral das propriedades de cada div ou tag da página selecionada e comece a edição ao vivo. Isso é perfeito para experimentar designs. Verifique o Layout - se você está usando Flexbox ou Grid - e dê uma olhada nas fontes relacionadas com exemplos e examine as animações.
Em outro lugar, você pode visualizar e alterar o CSS. A guia Estilos no painel Elementos lista as regras CSS aplicadas ao elemento atualmente selecionado na Árvore DOM. Ative e desative as propriedades (ou adicione novos valores) para experimentar projetos. Esta é a ferramenta perfeita para garantir que tudo funcione conforme o esperado antes de aplicar qualquer alteração ao design ao vivo.
Você também pode depurar JavaScript, otimizar a velocidade do site e inspecionar a velocidade da rede. Aqui está uma dica rápida que você pode usar para acelerar imediatamente seu fluxo de trabalho. Vá para a guia Sources, clique em New Snippet e adicione o código usado com frequência. Nomeie o snippet de código e salve. Repita conforme necessário. Agora você pode pegar este trecho de código em vez de escrevê-lo novamente.
Como todo bom navegador, o Chrome está em constante evolução e cada nova versão traz novos recursos. Descubra o que está acontecendo na plataforma de status do Chrome
16. Design de Materiais
O desenvolvimento pode ser visto como o filho favorito do Google, mas, o que quer que você esteja fazendo, criando ou construindo, ele precisa ter uma boa aparência e dar ao usuário uma experiência que o faça querer usá-lo. O material é uma adição mais recente ao estábulo do Google, mas é um sistema de design que amadureceu e se tornou uma peça vital do kit de design.
Como qualquer bom sistema de design, ele tem seu próprio conjunto de diretrizes, que você precisa examinar antes de entrar nas coisas mais interessantes. Obtenha uma visão geral de como usar diferentes elementos, o que é tema de material, como implementar um tema e guias de usabilidade, incluindo acessibilidade. Em outro lugar, há uma visão sobre o Material Foundation, que inclui as principais áreas do design, como layout, navegação, cor, tipografia, som, iconografia, movimento e interação. Cada categoria revela o que você deve e não deve fazer e onde você deve ter cuidado. Para dar uma ideia do que esperar, a categoria Layout oferece seções sobre como entender o layout, densidade de pixels, como trabalhar com um layout responsivo, incluindo colunas, sarjetas e margens, pontos de interrupção, regiões da IU e métodos de espaçamento, para citar apenas alguns.
Além da seção Design, estão os Componentes, que fornecem os blocos de construção físicos necessários para criar um design. O que está incluído aqui? Botões, banners, cartões, diálogos, divisórias, listas, menus, indicadores de progresso, controles deslizantes, barras de aperitivos (são mensagens breves sobre processos de aplicativos na parte inferior da tela), guias, campos de texto e dicas de ferramentas. Sem dúvida, uma coleção abrangente de componentes.
E os desenvolvedores não foram esquecidos, com detalhes e tutoriais sobre como construir para diferentes plataformas - Android, iOS, Web e Flutter. E, finalmente, há uma página dedicada a uma série de recursos para ajudar a fazer o design escolhido acontecer.
Este artigo apareceu originalmente na revista net. Compre a edição 326.
