Google Web Starter Kit 
Boilerplate & Tooling for Multi-Device Development
QUEM SOU EU? 
Rodrigo Antinarelli 
Front End Developer @ Quartel Design 
http://rodrigo.vc 
@rodrigo_ea
http://www.gdgbh.org
ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEB 
Alguns dados interessantes
ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEB 
“Brasil tem 40 milhões de consumidores 
multitelas’’ 
“Praticamente um a cada trê...
ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEB 
Brasileiros com acesso a Internet 
Fonte: Pesquisa realizada pelo CETIC.br (Centr...
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 des...
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 
Terminal 
$ git clone https://github.com/google/web-starter-kit.git 
$ cd web-starter-kit 
$ npm install ...
Getting Started 
Estrutura de pastas
Getting Started 
• Guia de estilos 
• Auto reload no browser 
• Sincronização multi-dispositivo 
• Otimização de Performan...
Getting Started 
$ gulp 
Terminal
Enchant Me 
Simplify My Life 
Make Me Amazing 
Android User Experience Team 
http://developer.android.com/design/get-start...
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 
proje...
that's all folks! 
Obrigado :) 
twitter.com/rodrigo_ea 
http://rodrigo.vc
Desenvolvimento Web multi-devices com Google Web Starter Kit
Desenvolvimento Web multi-devices com Google Web Starter Kit
Próximos SlideShares
Carregando em…5
×

Desenvolvimento Web multi-devices com Google Web Starter Kit

436 visualizações

Publicada em

Apresentação realizada no evento Uni+ Comunicação (UniBH).

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
436
No SlideShare
0
A partir de incorporações
0
Número de incorporações
19
Ações
Compartilhamentos
0
Downloads
2
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desenvolvimento Web multi-devices com Google Web Starter Kit

  1. 1. Google Web Starter Kit Boilerplate & Tooling for Multi-Device Development
  2. 2. QUEM SOU EU? Rodrigo Antinarelli Front End Developer @ Quartel Design http://rodrigo.vc @rodrigo_ea
  3. 3. http://www.gdgbh.org
  4. 4. ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEB Alguns dados interessantes
  5. 5. 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
  6. 6. ENTENDENDO O CONSUMIDOR DE CONTEÚDO WEB Brasileiros com acesso a Internet 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) > 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.
  7. 7. Brasil tem 40 milhões de consumidores multitelas, afirma Google
  8. 8. 3 em cada 10 brasileiros são donos de smartphones
  9. 9. Brasil tem mais smartphones que França e Alemanha
  10. 10. Brasil já tem mais residências com notebooks do que com desktops
  11. 11. Tablet ultrapassa vendas de desktop e notebook pela 1ª vez no Brasil
  12. 12. 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.
  13. 13. https://developers.google.com/web/fundamentals/
  14. 14. OLDSCHOOL
  15. 15. MODERNINHO
  16. 16. Mas e se a gente for um passo além?
  17. 17. https://developers.google.com/web/starter-kit/
  18. 18. Getting Started Ferramentas necessárias: → GIT → Node → Ruby → Sass → Gulp
  19. 19. Getting Started Terminal $ git clone https://github.com/google/web-starter-kit.git $ cd web-starter-kit $ npm install $ gulp serve
  20. 20. Getting Started Estrutura de pastas
  21. 21. Getting Started • Guia de estilos • Auto reload no browser • Sincronização multi-dispositivo • Otimização de Performance (minificar, concatenar…) • Suporte a SASS
  22. 22. Getting Started $ gulp Terminal
  23. 23. Enchant Me Simplify My Life Make Me Amazing Android User Experience Team http://developer.android.com/design/get-started/principles.html
  24. 24. Construir experiências multi-dispositivo não é tão difícil quanto parece.
  25. 25. 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.
  26. 26. that's all folks! Obrigado :) twitter.com/rodrigo_ea http://rodrigo.vc

×