Workshop Webapp Dashboard

527 visualizações

Publicada em

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

Publicada em: Internet
  • Seja o primeiro a comentar

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

×