ui lab experience - front-end para webapp - desenvolvendo um dashboard

Front-End para WebAppDesenvolvendo um Dashboard

Helder Burato Berto

Front 01 20

0816

Quem é Helder Burato?

Front Front-End para WebApp Desenvolvendo um Dashboard

Introdução ao WorkshopO que vamos aprender?

O que é um WebApp?

O que é um dashboard?

Quais linguagens serão usadas?


Introdução ao WorkshopO que vamos aprender?


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



AmanhãPrazo:MédiaPriority:

Aplicações MobileProjeto:

Consertar erros na versãomobile

Adicionar comentário...


Helder Burato


HojePrazo:AltaPrioridade:

PagamentosProjeto:

Integrar Paypal e Stripe nocheckout

Documentos 8

4

3

Equipe

Chat

Mensagens

Relatórios

Página inicial

Tarefas

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:



Fonte: www.gmail.com


Fonte: www.feedly.com


Fonte: www.mailchimp.com

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.


Vestibulum sodales metus.

Renata Barros


Welliton Matiola


11/02/15Prazo:AltaPrioridade:

Nike+Projeto:

Criar wireframes de alta fidelidade para Nike+

Morbi fermentum euvelit!Nullam pharetra imperdiet.

Leticia Souza



AmanhãPrazo:MédiaPriority:

Aplicações MobileProjeto:

Consertar erros na versãomobile

Adicionar comentário...


Helder Burato


HojePrazo:AltaPrioridade:

PagamentosProjeto:

Integrar Paypal e Stripe nocheckout

Documentos 8

4

3

Equipe

Chat

Mensagens

Relatórios

Página inicial

Tarefas

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

Quais ferramentas serão usadas?


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


Introdução ao html/css básicoO que são ids, classes e pseudo-classes em css?

HTML:

CSS:


Hover

Padrão

Active

#container

.btn:active

.btn

.btn:hover

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


Introdução ao Twitter BootstrapVantagens


• 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?

Introdução ao Twitter BootstrapO que são os famosos containers, grids e gutters no bootstrap?


Grids Gutters

.container 1170px

.container-fluid

Introdução ao Twitter BootstrapTipos de colunas por resolução de tela


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

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


pull-left

show

hide

pull-right

Vamos colocar a mão no código?


Detalhes sobre o desenvolvimento


• 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.

Estrutura de pastas


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$

#

Definição de classesutilitáriaspróprias


.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;}

[email protected]

Outras formas de contato:


! br.linkedin.com/in/helderburato

" fb.com/helderburato

# www.helderburato.com

01 200816

www.uilab.com.brfb.com/uilabschool

ui lab experience - front-end para webapp - desenvolvendo um dashboard

Software