Google Web Starter KitBoilerplate & Tooling for Multi-Device Development

Rodrigo Antinarelli Front End Developer @ Quartel Design

QUEM SOU EU?

http://rodrigo.vc

@rodrigo_ea

http://www.gdgbh.org

ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEBAlguns dados interessantes

ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEB

“Brasil tem 40 milhões de consumidores multitelas’’

“Praticamente um a cada três brasileiros usa um smartphone.’’

Fonte: Pesquisa anual realizada pelo Google Brasil

ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEB

Fonte: Pesquisa realizada pelo CETIC.br (Centro Regional para o Desenvolvimento da Sociedade da Informação) e divulgado na Folha de São Paulo (http://bit.ly/1jRQqql)

Brasileiros com acesso a Internet

> Classe A - 98% > Classe B - 80% > Classe C - 39% > Classes D e E - 8%

51% da população brasileira tem acesso a Internet, isso equivale a 86 milhões de brasileiros.

Brasil tem 40 milhões de consumidores multitelas, afirma Google

3 em cada 10 brasileiros são donos de smartphones

Brasil tem mais smartphones que França e Alemanha

Brasil já tem mais residências com notebooks do que com desktops

Tablet ultrapassa vendas de desktop e notebook pela 1ª vez no Brasil

O que nós temos a ver com isso?

De que forma temos entregado conteúdo para os usuários?

Temos usado boas práticas no desenvolvimento?

Responsive não é feature, é obrigação.

https://developers.google.com/web/fundamentals/

OLDSCHOOL

MODERNINHO

Mas e se a gente for um passo além?

https://developers.google.com/web/starter-kit/

Getting Started

Ferramentas necessárias:

→ GIT → Node → Ruby → Sass → Gulp

Getting Started

$ git clone https://github.com/google/web-starter-kit.git

$ cd web-starter-kit

$ npm install

$ gulp serve

Terminal

Getting Started

Estrutura de pastas

Getting Started

• Guia de estilos

• Auto reload no browser

• Sincronização multi-dispositivo• Otimização de Performance (minificar, concatenar…)• Suporte a SASS

Getting Started

$ gulp

Terminal

Enchant MeSimplify My Life Make Me Amazing

Android User Experience Team

http://developer.android.com/design/get-started/principles.html

Construir experiências multi-dispositivo não é tão difícil quanto parece.

O conteúdo é o aspecto mais importante de qualquer site.

Então, vamos projetar para o conteúdo e não deixar que o projeto limite o conteúdo.

Obrigado :)twitter.com/rodrigo_ea

http://rodrigo.vc

that's all folks!