workshop webapp dashboard

22
Front-End para WebApp Desenvolvendo um Dashboard Helder Burato Berto Front 01 20 08 16

Upload: helder-burato-berto

Post on 14-Apr-2017

496 views

Category:

Internet


0 download

TRANSCRIPT

Page 1: Workshop Webapp Dashboard

Front-End para WebAppDesenvolvendo um Dashboard

Helder Burato Berto

Front 01 20

0816

Page 2: Workshop Webapp Dashboard

Quem é Helder Burato?

Front Front-End para WebApp Desenvolvendo um Dashboard

Page 3: Workshop Webapp Dashboard

Introdução ao WorkshopO que vamos aprender?

O que é um WebApp?

O que é um dashboard?

Quais linguagens serão usadas?

Front Front-End para WebApp Desenvolvendo um Dashboard

Page 4: Workshop Webapp Dashboard

Introdução ao WorkshopO que vamos aprender?

Front Front-End para WebApp Desenvolvendo um Dashboard

Instalar verificação de

Admistração do SistemaProject:

Migrar para NGINXAdicionar comentário...

Vestibulum sodales metus.

Renata Barros

Vestibulum sodales metus.Semper nunc faucibus integer!

Welliton Matiola

Lorem ipsum dolor sit amet, consectetuadipiscing 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. Nullam pharetra imperdietvestibulum sodales.

João Vitor

Morbi fermentum euvelit!Nullam pharetra imperdiet.

Leticia Souza

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra imperdietvestibulum sodales.

Lorem ipsum dolor sit amet, consectetuadipiscing elit. Nunc ac diam mattis.

AmanhãPrazo:MédiaPriority:

Aplicações MobileProjeto:

Consertar erros na versãomobile

Adicionar comentário...

Vestibulum sodales metus.Semper nunc faucibus integer!

Helder Burato

Lorem ipsum dolor sit amet, consectetuadipiscing elit. Nunc ac diam mattis.

HojePrazo:AltaPrioridade:

PagamentosProjeto:

Integrar Paypal e Stripe nocheckout

Documentos 8

4

3

Equipe

Chat

Mensagens

Relatórios

Página inicial

Tarefas

Page 5: Workshop Webapp Dashboard

Introdução ao WorkshopO 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

Page 6: Workshop Webapp Dashboard

Front Front-End para WebApp Desenvolvendo um Dashboard

Fonte: www.gmail.com

Page 7: Workshop Webapp Dashboard

Front Front-End para WebApp Desenvolvendo um Dashboard

Fonte: www.feedly.com

Page 8: Workshop Webapp Dashboard

Front Front-End para WebApp Desenvolvendo um Dashboard

Fonte: www.mailchimp.com

Page 9: Workshop Webapp Dashboard

Introdução ao WorkshopO 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

Vestibulum sodales metus.

Renata Barros

Vestibulum sodales metus.Semper nunc faucibus integer!

Welliton Matiola

Lorem ipsum dolor sit amet, consectetuadipiscing elit. Nunc ac diam mattis.

11/02/15Prazo:AltaPrioridade:

Nike+Projeto:

Criar wireframes de alta fidelidade para Nike+

Morbi fermentum euvelit!Nullam pharetra imperdiet.

Leticia Souza

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra imperdietvestibulum sodales.

Lorem ipsum dolor sit amet, consectetuadipiscing elit. Nunc ac diam mattis.

AmanhãPrazo:MédiaPriority:

Aplicações MobileProjeto:

Consertar erros na versãomobile

Adicionar comentário...

Vestibulum sodales metus.Semper nunc faucibus integer!

Helder Burato

Lorem ipsum dolor sit amet, consectetuadipiscing elit. Nunc ac diam mattis.

HojePrazo:AltaPrioridade:

PagamentosProjeto:

Integrar Paypal e Stripe nocheckout

Documentos 8

4

3

Equipe

Chat

Mensagens

Relatórios

Página inicial

Tarefas

Page 10: Workshop Webapp Dashboard

Introdução ao WorkshopQuais tecnologias serão usadas?

Quais ferramentas serão usadas?

Front Front-End para WebApp Desenvolvendo um Dashboard

Page 11: Workshop Webapp Dashboard

Introdução ao html/css básicoQual a estrutura html básica que uma página deve ter?

Front Front-End para WebApp Desenvolvendo um Dashboard

Page 12: Workshop Webapp Dashboard

Introdução ao html/css básicoO 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

Page 13: Workshop Webapp Dashboard

Introdução ao Twitter BootstrapPorque utilizar um framework front-end?

Front Front-End para WebApp Desenvolvendo um Dashboard

Page 14: Workshop Webapp Dashboard

Introdução ao Twitter BootstrapVantagens

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?

Page 15: Workshop Webapp Dashboard

Introdução ao Twitter BootstrapO 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

Page 16: Workshop Webapp Dashboard

Introdução ao Twitter BootstrapTipos 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

Page 17: Workshop Webapp Dashboard

Introdução ao Twitter BootstrapO que são as classes utilitárias no bootstrap?

Front Front-End para WebApp Desenvolvendo um Dashboard

pull-left

show

hide

pull-right

Page 18: Workshop Webapp Dashboard

Vamos colocar a mão no código?

Front Front-End para WebApp Desenvolvendo um Dashboard

Page 19: Workshop Webapp Dashboard

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.

Page 20: Workshop Webapp Dashboard

Estrutura de pastas

Front Front-End para WebApp Desenvolvendo um Dashboard

cssvendor (arquivos de terceiros)main.cssuilab-font.css

uilab!

!

"

avatar-masc.pngavatar-fem.pnglogo-uilab.png

vendor

fonts

img

js

index.html

##

#

#

$

$

$

#

%

%

workshop-webapp-dashboard

ico-check.png$

#

Page 21: Workshop Webapp Dashboard

Definição de classesutilitáriaspró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;}

Page 22: Workshop Webapp Dashboard

[email protected]

Outras formas de contato:

Front Front-End para WebApp Desenvolvendo um Dashboard

! br.linkedin.com/in/helderburato

" fb.com/helderburato

# www.helderburato.com

01 200816

www.uilab.com.brfb.com/uilabschool