Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Google Web Starter Kit
Webdesign

Aprendendo o Google Web Starter Kit

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

O Web Starter Kit é uma nova iniciativa do Google; um dos meios que enocntraram para por em prática a missão de simplificar o fluxo de desenvolvimento web e, ao mesmo tempo, promover as melhores práticas sugeridas no Google's Web Fundamentals.

Quando esse artigo foi escrito, o Web Starter Kit tinha sido lançado há poucos dias, liberado em um repositório público no Github. De imediato, ganhou fama na comunidade de desenvolvimento para web, rapidamente, ganhando o primeiro lugar entre os repositórios tendência do GitHub.

Existem inúmeras bibliotecas e frameworks por aí, hoje em dia, mas o Web Starter Kit é bastante interessante e vale à pena explorá-lo. Nesse post, guiarei você pelos vários recursos chave dele e também demonstrarei como utilizá-lo em seu próximo projeto. Sem mais delongas, vamos começar!

Sobre o Web Starter Kit

Como o nome implica, o Web Starter Kit é uma ferramenta de desenvolvimento criada para ser o ponto de partida para novos projetos. O Google, no repositório do projeto, o descreve assim:

Ponto de partida para desenvolvimento web para múltiplos dispositivos

Dando uma melhor allhada, você perceberá que o Web Starter Kit é bastante inspirado no HTML5 Boilerplate e Yeoman (ele combina o melhor dessas duas populares ferramentas). O Web Starter Kit vem com modelos básicos, que são otimizados tanto para velocidade quanto para múltiplos dispositivos. 

Nós trabalhamos ativamente na obtenção da melhor nota no PageSpeed Insights, bem como dos quadros por segundo (frame-rate) possível.

Além disso, ele engloba um conjunto de ferramentas para facilitar o desenvolvimento, incluindo ferramentas de teste sincronizado, recarregador automático de navegadores (live reloader), analisador de JavaScript, compilador de Sass, minizador CSS e um otimizador de imagens. Assim como o Yeoman, essas ferramentas vem pré-configuradas, então, podemos começar o desenvolvimento sem gastar tempo, tendo de configurá-las.

Pré-requisitos

Você pode, simplesmente, baixar os arquivos do repositório do Google, mas, para aproveitar ao máximo o Web Starter Kit em seu novo projeto, é aconselhável que tenha as seguintes ferramentas instaladas em seu sistema:

Git: como mencionado acima, o projeto do Web Starter Kit é hospedado no Github. É bem melhor obter o código clonando o repositório com git clone que baixando o pacote Zip. Se você utiliza o aplicativo do Github, aperte o botão Clone in Desktop, lá na página do repositório:

Não sabe para que serve o git? Veja o Git para Designers no Tuts+ Code para maiores informações.

Node.js: muitas das ferramentas que você encontrará no Web Starter Kit, como o JSLinter, são para Node.js. Elas serão instaladas através do Node Package Manager (NPM). Você pode acessar o Instalando o Node e o NPM, para tirar quaisquer dúvidas.

Ruby e Sass: O Web Starter Kit usa o gulp-ruby-sass para compilar o Sass em CSS, e ele requer tanto o Ruby quanto o Sass para funcionar. Se você for usuário do OS X ou Linux, você já deve ter o Ruby instalado em sua máquina. Se for usuário do Windows, use o RubyInstaller para instalar o Ruby. Uma vez que instalado o Ruby, execute gem install sass na linha de comando para instalar o Sass.

Para maiores informações sobre como instalar o Ruby e o Sass, acesse Mastering Sass: Lesson 1.

Gulp: Usar o Gulp para lidar com as várias tarefas durante o desenvolvimento ajudará bastante. Como o Node.js já está instalado em seu sistema, instale o Gulp com o seguinte comando:

Por último, garanta que os comandos git e npm estão disponíveis. Digite o comando abaixo para verificar se, tanto o comando git quanto npm estão funcionando.

Esses comandos devem retornar as versões do git e do npm, respectivamente, como segue.

Instalando o Web Starter Kit

Certo, para começarmos de verdade, naveguemos até o diretório que queremos que o projeto fique (navegue usando os comandos ou digite "cd" e arraste o diretório em questão para a sua tela de terminal/linha de comando, antes de apertar enter) então, execute o seguinte comando para clonar o projeto do Web Starter Kit:

Depois disso, vá para o diretório "web-starter-kit", que é onde os arquivos do Web Starter Kit estão.

Nesse diretório, web-starter-kit/, você encontrará:

  • app/: esse é o diretório onde todos os códigos não minimizados ficarão;
  • package.json: lista de dependências do projeto;
  • gulpfile.js: contém configurações necessárias para executar as tarefas do Gulp.

Dependências do Web Starter Kit

Como já mencionamos, o Web Starter Kit depende de certos pacotes do Node, incluindo plugins do Gulp, para executar os processos de construção dos aplicativos. Então, a próxima coisa a fazer é instalar os pacotes do Node especificados no arquivo package.json. Faça isso, executando o seguinte comando:

Vários pacotes Node serão instalados em um diretório chamado node_modules.

Um Pouco Sobre o Gulp

Resumindo, O Gulp é parecido com o Grunt. Ambos são "executadores de tarefas" que automatizam as tarefas durante o desenvolvimento, tentando facilitar as coisas para você. Normalmente, teríamos de especificar e configurar as tarefas do Gulp no arquivo gulpfile.js, mas, uma vez que o Web Starter Kit já tomou conta disso por nós, podemos, imediatamente, executar as tarefas do Gulp sem tocar em nada.

Enquanto estiver desenvolvendo, digite o comando abaixo.

Esse comando ativará o BrowserSync, que foi incorporado e configurado no arquivo gulpfile.js. O BrowserSync é uma ferramenta muito útil que nos permite testar sites entre vários navegadores. Com o BrowserSync, a interação do usuário, como a rolagem, cliques e preenchimento de campos de formulário, será refletida, em tempo real, entre todos os aparelhos conectados. Isso nos permite perceber quaisquer discrepâncias que possam acontecer em cada aparelho conectado, enquanto a interação acontece. O BrowseSync também vem com um servidor HTTP. Ao executar esse comando, você terá acesso ao endereço localhost onde você poderá acessar seu site.

Além do mais, o BrowserSync monitorará as mudanças realizadas, incluindo HTML, folhas de estilo e imagens. Quando modificamos esses arquivos, o BrowserSync, imediatamente, executará a tarefa especificada no gulpfile.js

Quando estiver pronto para publicar seu site, basta executar gulp. Esse comando executará as tarefas do Gulp, compilará o projeto em um pacote distribuível dentro de um diretório chamado dist/, pronto para ser enviado ao cliente.

Uma lista detalhada das tarefas do Gulp pode ser encontrada em Índice de ferramentas do Web Starter Kit.

Guia para Estilização Básica

O Web Starter Kit provê um Guia de Estilos que dão um pontapé inicial nos estilos dos elementos e componentes mais comuns, como tipografia, botões, links, migalhas de pão (breadcumbs), tabelas, ícones e grades (grid). Verificando o código fonte, você encontrará os seletores utilizados para produzir os estilos. 

O Guia de Estilos pode ser encontrado no diretório app/styleguide e está interconectado às folhas de estilos, então, podemos ver o Guia de Estilos evoluindo de acordo com que as folhas de estilos são atualizadas. Brilhante!

Estilização básica dos Ícones de Destaque no Guia de Estilos do Web Starter Kit

Nota: Tenha certeza de ver nossa série Tudo Sobre Guia de Estilos.

Finalizando

Muito bem! Nós baixamos e preparamos o Web Starter Kit junto de suas dependências, assim, já podemos começar a trabalhar em nosso projeto.

O Web Starter Kit é bem consistente — mesmo estando em fase beta. Os modelos e ferramentas são bem configurados. Simplesmente funcionam. E ver que esse projeto é mantido pelo Google, com vários desenvolvedores brilhantes ajudando, o Web Starter Kit será tão popular quanto o Bootstrap ou o Foundation, logo-logo. Eu estou de olho para ver como esse projeto evoluirá.

Outras Referências

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.