HTML, CSS & Style Guides

HTML, CSS & STYLEGUIDESUma visão geral de aplicativos web modernos

1

BRUNO TRECENTIDesenvolvedor de software

! @brunotrecenti " @trecenti

2

3

HTML + CSS

4

<HTML>

13

… PORÉM TEMOS UMA ESTRUTURA!

14

E ESSE É O PROPÓSITO DO

<HTML>

16

TÁ FEIO… MAL ORGANIZADO…

NÃO USÁVEL!

17

PRECISAMOS DE UM HERÓI!

18

DESENVOLVEDOR

CSS

WEB APP

19

CSS { }

21

CSS É TUDO SOBRE ESTILO!

22

INLINE

STYLE TAG

CSS FILE

25

SELETOR

PROPRIEDADE VALOR

26

É SÓ ISSO? NOPE!

27

STYLE GUIDES <HTML> + CSS {} = <3

28

EVOLUÇÃO

29

PAGINAS ESTÁTICAS

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

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

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

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!


▫︎ 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


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.


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

HTML, CSS & Style Guides

Software

Transcript of HTML, CSS & Style Guides