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