HTML, CSS & Style Guides
- 1. HTML, CSS & STYLEGUIDES Uma visão geral de aplicativos web modernos 1
- 2. BRUNO TRECENTI Desenvolvedor de software @brunotrecenti @trecenti 2
- 3. 3 HTML + CSS
- 4. 4 <HTML>
- 5. 5
- 6. 6
- 7. 7
- 8. 8
- 9. 9
- 10. 10
- 11. 11
- 12. 12
- 13. 13 … PORÉM TEMOS UMA ESTRUTURA!
- 14. 14 E ESSE É O PROPÓSITO DO <HTML>
- 15. 15
- 16. 16 TÁ FEIO… MAL ORGANIZADO… NÃO USÁVEL!
- 19. 19 CSS { }
- 20. 20
- 23. 23
- 24. 24
- 26. 26 É SÓ ISSO? NOPE!
- 27. 27 STYLE GUIDES <HTML> + CSS {} = <3
- 28. 28 EVOLUÇÃO
- 30. 30
- 31. 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. 32 TABLE EM TUDO
- 33. 33
- 34. 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. 35 DIV EM TUDO
- 36. 36
- 37. 37 DIV EM TUDO
- 38. 38 DIV EM TUDO ▫︎HTML 3+ / CSS 2+ ▫︎Posicionamento com float & position ▫︎Muitos containers ▫︎Ainda não semântico ▫︎Quase bonito …
- 39. 39 HTML 5 & CSS 3
- 40. 40 HTML 5
- 41. 41 HTML 5 & CSS 3 ▫︎Posicionamento com flex-box ▫︎Responsivo ▫︎Semântico ▫︎Organizado ▫︎Bonito <3
- 42. 42
- 44. 44 MIXINS, FRAMEWORKS & GRIDS
- 45. 45 E AÍ? O QUE ISSO TEM A VER?
- 46. 46 STYLE GUIDES
- 47. 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. 48 PRA QUE? ▫︎Padrão ▫︎Identidade visual POR QUE? ▫︎Re-usabilidade ▫︎Extensibilidade EM DESENVOLVIMENTO DE SOFTWARE: EXPERIENCIA DO USUÁRIO!
- 50. 50 BOOTSTRAP
- 51. 51 BOOTSTRAP ▫︎Começou como style guide do Twitter ▫︎bem aceito e documentado ▫︎extensível ▫︎tornou-se um framework
- 52. 52 FLAT UI
- 53. 53 FLAT UI ▫︎começou com a onda "flat" ▫︎desde o início como um produto ▫︎baseado no bootstrap
- 55. 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. 56 OUTROS
- 57. 57 USAR VS. IMPLEMENTAR PESQUISA COM USUARIOS IDÉIAS DESENVOLVIMENTO REVISÃO STYLE GUIDE LIVING!
- 58. USAR VS. IMPLEMENTAR ▫︎tempo de aprendizado ▫︎extensibilidade ▫︎licença & propriedade intelectual ▫︎finalidade
- 61. 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.
- 62. 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. 63 OBRIGADO! :)