Front-End para WebApp
Desenvolvendo um Dashboard
Helder Burato Berto
Front
01 20
08
16
Quem é Helder Burato?
Front Front-End para WebApp Desenvolvendo um Dashboard
Introdução ao Workshop
O que vamos aprender?
O que é um WebApp?
O que é um dashboard?
Quais linguagens serão usadas?
Front...
Introdução ao Workshop
O que vamos aprender?
Front Front-End para WebApp Desenvolvendo um Dashboard
Migrar para NGINX
Adic...
Introdução ao Workshop
O que é um Web App?
Web Apps são apps desenvolvidas para rodar dentro de um browser utilizando
de t...
Front Front-End para WebApp Desenvolvendo um Dashboard
Fonte: www.gmail.com
Front Front-End para WebApp Desenvolvendo um Dashboard
Fonte: www.feedly.com
Front Front-End para WebApp Desenvolvendo um Dashboard
Fonte: www.mailchimp.com
Introdução ao Workshop
O que é um dashboard?
Mais conhecido também como “Painel Administrativo”, é onde ficam as
informaçõ...
Introdução ao Workshop
Quais tecnologias serão usadas?
Quais ferramentas serão usadas?
Front Front-End para WebApp Desenvo...
Introdução ao html/css básico
Qual a estrutura html básica que uma página deve ter?
Front Front-End para WebApp Desenvolve...
Introdução ao html/css básico
O que são ids, classes e pseudo-classes em css?
HTML:
CSS:
Front Front-End para WebApp Desen...
Introdução ao Twitter Bootstrap
Porque utilizar um framework front-end?
Front Front-End para WebApp Desenvolvendo um Dashb...
Introdução ao Twitter Bootstrap
Vantagens
Front Front-End para WebApp Desenvolvendo um Dashboard
• Bem documentado;
• Dese...
Introdução ao Twitter Bootstrap
O que são os famosos containers, grids e gutters no bootstrap?
Front Front-End para WebApp...
Introdução ao Twitter Bootstrap
Tipos de colunas por resolução de tela
Front Front-End para WebApp Desenvolvendo um Dashbo...
Introdução ao Twitter Bootstrap
O que são as classes utilitárias no bootstrap?
Front Front-End para WebApp Desenvolvendo u...
Vamos colocar a mão no código?
Front Front-End para WebApp Desenvolvendo um Dashboard
Detalhes sobre o desenvolvimento
Front Front-End para WebApp Desenvolvendo um Dashboard
• Estrutura de pastas do projeto;
...
Estrutura
de pastas
Front Front-End para WebApp Desenvolvendo um Dashboard
css
vendor (arquivos de terceiros)
main.css
uil...
Definição
de classes
utilitárias
próprias
Front Front-End para WebApp Desenvolvendo um Dashboard
.inline-block { display: ...
Obrigado!
helder.burato@gmail.com
Outras formas de contato:
Front Front-End para WebApp Desenvolvendo um Dashboard
br.link...
Próximos SlideShares
Carregando em…5
×

Workshop Webapp Dashboard

458 visualizações

Publicada em

Front-End para WebApp - Desenvolvendo um Dashboard com Twitter Bootstrap

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

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

Nenhuma nota no slide

Workshop Webapp Dashboard

  1. 1. Front-End para WebApp Desenvolvendo um Dashboard Helder Burato Berto Front 01 20 08 16
  2. 2. Quem é Helder Burato? Front Front-End para WebApp Desenvolvendo um Dashboard
  3. 3. Introdução ao Workshop O que vamos aprender? O que é um WebApp? O que é um dashboard? Quais linguagens serão usadas? Front Front-End para WebApp Desenvolvendo um Dashboard
  4. 4. Introdução ao Workshop O que vamos aprender? Front Front-End para WebApp Desenvolvendo um Dashboard Migrar para NGINX Adicionar comentário... Vestibulum sodales metus. Renata Barros Vestibulum sodales metus. Semper nunc faucibus integer! Welliton Matiola Lorem ipsum dolor sit amet, consectetu adipiscing elit. Nunc ac diam mattis. 11/02/15Prazo:AltaPrioridade: Nike+Projeto: Criar wireframes de alta fidelidade para Nike+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. João Vitor Morbi fermentum euvelit! Nullam pharetra imperdiet. Leticia Souza Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra imperdiet vestibulum sodales. Lorem ipsum dolor sit amet, consectetu adipiscing elit. Nunc ac diam mattis. AmanhãPrazo:MédiaPriority: Aplicações MobileProjeto: Consertar erros na versão mobile Adicionar comentário... Vestibulum sodales metus. Semper nunc faucibus integer! Helder Burato Lorem ipsum dolor sit amet, consectetu adipiscing elit. Nunc ac diam mattis. HojePrazo:AltaPrioridade: PagamentosProjeto: Integrar Paypal e Stripe no checkout Documentos 8 4 3 Equipe Chat Mensagens Relatórios Página inicial Tarefas
  5. 5. Introdução ao Workshop O que é um Web App? Web Apps são apps desenvolvidas para rodar dentro de um browser utilizando de tecnologias que os browsers possam ler e interpretar. Alguns exemplos abaixo: Front Front-End para WebApp Desenvolvendo um Dashboard
  6. 6. Front Front-End para WebApp Desenvolvendo um Dashboard Fonte: www.gmail.com
  7. 7. Front Front-End para WebApp Desenvolvendo um Dashboard Fonte: www.feedly.com
  8. 8. Front Front-End para WebApp Desenvolvendo um Dashboard Fonte: www.mailchimp.com
  9. 9. Introdução ao Workshop O que é um dashboard? Mais conhecido também como “Painel Administrativo”, é onde ficam as informações mais importantes de um determinado sistema ou website para maior facilidade e personalização dos mesmos. Front Front-End para WebApp Desenvolvendo um Dashboard Renata Barros Vestibulum sodales metus. Semper nunc faucibus integer! Welliton Matiola Lorem ipsum dolor sit amet, consectetu adipiscing elit. Nunc ac diam mattis. 11/02/15Prazo:AltaPrioridade: Nike+Projeto: Criar wireframes de alta fidelidade para Nike+ Leticia Souza Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra imperdiet vestibulum sodales. Lorem ipsum dolor sit amet, consectetu adipiscing elit. Nunc ac diam mattis. AmanhãPrazo:MédiaPriority: Aplicações MobileProjeto: Consertar erros na versão mobile Vestibulum sodales metus. Semper nunc faucibus integer! Helder Burato Lorem ipsum dolor sit amet, consectetu adipiscing elit. Nunc ac diam mattis. HojePrazo:AltaPrioridade: PagamentosProjeto: Integrar Paypal e Stripe no checkout Documentos 8 4 3 Equipe Chat Mensagens Relatórios Página inicial Tarefas
  10. 10. Introdução ao Workshop Quais tecnologias serão usadas? Quais ferramentas serão usadas? Front Front-End para WebApp Desenvolvendo um Dashboard
  11. 11. Introdução ao html/css básico Qual a estrutura html básica que uma página deve ter? Front Front-End para WebApp Desenvolvendo um Dashboard
  12. 12. Introdução ao html/css básico O que são ids, classes e pseudo-classes em css? HTML: CSS: Front Front-End para WebApp Desenvolvendo um Dashboard Hover Padrão Active #container .btn:active .btn .btn:hover
  13. 13. Introdução ao Twitter Bootstrap Porque utilizar um framework front-end? Front Front-End para WebApp Desenvolvendo um Dashboard
  14. 14. Introdução ao Twitter Bootstrap Vantagens Front Front-End para WebApp Desenvolvendo um Dashboard • Bem documentado; • Desenvolvido pensando em navegadores atuais e antigos; • Projeto open-source ( Você pode colaborar ); • Facilidade em trabalhar com responsive web design; • Proporciona um design amigável, foco na regra de negócio; • Padronização de código front-end; • Componentes prontos; • Seguir padrões do framework; Desvantagens?
  15. 15. Introdução ao Twitter Bootstrap O que são os famosos containers, grids e gutters no bootstrap? Front Front-End para WebApp Desenvolvendo um Dashboard Grids Gutters .container 1170px .container-fluid
  16. 16. Introdução ao Twitter Bootstrap Tipos de colunas por resolução de tela Front Front-End para WebApp Desenvolvendo um Dashboard Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px) .col-xs- .col-lg- 1170px .col-md- 970px .col-sm- 750pxNone(auto) 12 30px/15px em cada lado da coluna Container width Class prefix # de colunas Gutter Width
  17. 17. Introdução ao Twitter Bootstrap O que são as classes utilitárias no bootstrap? Front Front-End para WebApp Desenvolvendo um Dashboard pull-left show hide pull-right
  18. 18. Vamos colocar a mão no código? Front Front-End para WebApp Desenvolvendo um Dashboard
  19. 19. Detalhes sobre o desenvolvimento Front Front-End para WebApp Desenvolvendo um Dashboard • Estrutura de pastas do projeto; • Definição de classes utilitárias próprias; • Comentários padrões para blocos; Obs.: Dashboard será desenvolvido apenas na versão desktop, para evitar complicações no entendimento.
  20. 20. Estrutura de pastas Front Front-End para WebApp Desenvolvendo um Dashboard css vendor (arquivos de terceiros) main.css uilab-font.css uilab avatar-masc.png avatar-fem.png logo-uilab.png vendor fonts img js index.html Ʃ Ʃ Ʃ workshop-webapp-dashboard ico-check.pngƩ
  21. 21. Definição de classes utilitárias próprias Front Front-End para WebApp Desenvolvendo um Dashboard .inline-block { display: inline-block; } .relative { position: relative; } .absolute { position: absolute; } <div class=“relative”> <div class=“absolute”> </div> </div> .relative { position: relative; width: 600px; height: 400px; } .absolute { position: absolute; top: 120px; right: 0; width: 300px; height: 200px; }
  22. 22. Obrigado! helder.burato@gmail.com Outras formas de contato: Front Front-End para WebApp Desenvolvendo um Dashboard br.linkedin.com/in/helderburato fb.com/helderburato www.helderburato.com 01 20 08 16 www.uilab.com.br fb.com/uilabschool

×