Post on 20-Jul-2015
HTML, CSS & STYLEGUIDESUma visão geral de aplicativos web modernos
1
BRUNO TRECENTIDesenvolvedor de software
! @brunotrecenti " @trecenti
2
3
HTML + CSS
4
<HTML>
5
6
7
8
9
10
11
12
13
… PORÉM TEMOS UMA ESTRUTURA!
14
E ESSE É O PROPÓSITO DO
<HTML>
15
16
TÁ FEIO… MAL ORGANIZADO…
NÃO USÁVEL!
17
PRECISAMOS DE UM HERÓI!
18
DESENVOLVEDOR
CSS
WEB APP
19
CSS { }
20
21
CSS É TUDO SOBRE ESTILO!
22
INLINE
STYLE TAG
CSS FILE
23
24
25
SELETOR
PROPRIEDADE VALOR
26
É SÓ ISSO? NOPE!
27
STYLE GUIDES <HTML> + CSS {} = <3
28
EVOLUÇÃO
29
PAGINAS ESTÁTICAS
30
31
PAGINAS ESTÁTICAS▫︎HTML 1 / CSS 1
▫︎ Imagens animadas (gif)
▫︎Difícil de posicionar elementos
▫︎Não semântico
▫︎Quase tudo inline
▫︎ Feio </3
32
TABLE EM TUDO
33
34
TABLE EM TUDO▫︎HTML 2+ / CSS 1 ~ 2
▫︎ Posicionamento usando tables
▫︎ Sites quadrados e não intuítivos
▫︎Não semântico
▫︎Ainda feio </3
35
DIV EM TUDO
36
37
DIV EM TUDO
38
DIV EM TUDO▫︎HTML 3+ / CSS 2+
▫︎ Posicionamento com float & position
▫︎Muitos containers
▫︎Ainda não semântico
▫︎Quase bonito …
39
HTML 5 & CSS 3
40
HTML 5
41
HTML 5 & CSS 3▫︎ Posicionamento com flex-box
▫︎ Responsivo
▫︎ Semântico
▫︎Organizado
▫︎Bonito <3
42
43
PRE-PROCESSADORES
44
MIXINS, FRAMEWORKS & GRIDS
45
E AÍ? O QUE ISSO TEM A VER?
46
STYLE GUIDES
47
O QUE É?"Um conjunto de regras para a escrita e
design de documentos, para uso geral ou específico de uma organização, publicação
ou área de atuação.”
2014, wikipedia
48
PRA QUE?▫︎ Padrão
▫︎ Identidade visual
POR QUE?▫︎ Re-usabilidade
▫︎ Extensibilidade
EM DESENVOLVIMENTO DE SOFTWARE:
EXPERIENCIA DO USUÁRIO!
49
COMO?
PESQUISA COM USUARIOS
IDÉIASDESENVOLVIMENTO
REVISÃOSTYLE GUIDE
LIVING!
50
BOOTSTRAP
51
BOOTSTRAP
▫︎Começou como style guide do Twitter
▫︎ bem aceito e documentado
▫︎ extensível
▫︎ tornou-se um framework
52
FLAT UI
53
FLAT UI
▫︎ começou com a onda "flat"
▫︎ desde o início como um produto
▫︎ baseado no bootstrap
54
GOOGLE MATERIAL DESIGN
55
GOOGLE MATERIAL DESIGN
▫︎ uma evolução do flat + 3D
▫︎ parte do style guide do google
▫︎ visa padrões para todas as plataformas
▫︎ não específico para web
56
OUTROS
57
USAR VS. IMPLEMENTAR
PESQUISA COM USUARIOS
IDÉIASDESENVOLVIMENTO
REVISÃOSTYLE GUIDE
LIVING!
USAR VS. IMPLEMENTAR
▫︎ tempo de aprendizado
▫︎ extensibilidade
▫︎ licença & propriedade intelectual
▫︎ finalidade
USAR
▫︎ facilidade
▫︎ padrões pré-definidos
▫︎ boas práticas
▫︎ rápida implementação
▫︎ extensibilidade
▫︎ licença
▫︎ dependência
▫︎ adaptabilidade
PROS CONS
IMPLEMENTAR
▫︎ especificidade
▫︎ boas práticas
▫︎ liberdade
▫︎ extensível
▫︎ implementação devagar
▫︎ custoso
▫︎ expertise
PROS CONS
USAR VS. IMPLEMENTAR
Um framework dificilmente se adapta às necessidades de um projeto específico, sendo
mais fácil o projeto se adaptar ao framework, o que nem sempre é bom.
USAR VS. IMPLEMENTAR
Independente da decisão, não se pode esquecer da parte mais importante de um
style guide, que é a
experiência do usuário.
63
OBRIGADO! :)
DÚVIDAS ?! @brunotrecenti
" @trecenti
64