Baixado 28 vezes
HTML, CSS & Style Guides
- 1. HTML, CSS & STYLEGUIDES Umavisão geral de aplicativos web modernos 1
- 2. BRUNO TRECENTI Desenvolvedor desoftware @brunotrecenti @trecenti 2
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13. 13 … PORÉM TEMOS UMAESTRUTURA!
- 14. 14 E ESSE ÉO PROPÓSITO DO <HTML>
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26. 26 É SÓ ISSO?NOPE!
- 27. 27 STYLE GUIDES <HTML> +CSS {} = <3
- 28.
- 29.
- 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.
- 33.
- 34. 34 TABLE EM TUDO ▫︎HTML2+ / CSS 1 ~ 2 ▫︎Posicionamento usando tables ▫︎Sites quadrados e não intuítivos ▫︎Não semântico ▫︎Ainda feio </3
- 35.
- 36.
- 37.
- 38. 38 DIV EM TUDO ▫︎HTML3+ / CSS 2+ ▫︎Posicionamento com float & position ▫︎Muitos containers ▫︎Ainda não semântico ▫︎Quase bonito …
- 39. 39 HTML 5 &CSS 3
- 40.
- 41. 41 HTML 5 &CSS 3 ▫︎Posicionamento com flex-box ▫︎Responsivo ▫︎Semântico ▫︎Organizado ▫︎Bonito <3
- 42.
- 43.
- 44.
- 45. 45 E AÍ? O QUEISSO TEM A VER?
- 46.
- 47. 47 O QUE É? "Umconjunto 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 PORQUE? ▫︎Re-usabilidade ▫︎Extensibilidade EM DESENVOLVIMENTO DE SOFTWARE: EXPERIENCIA DO USUÁRIO!
- 49.
- 50.
- 51. 51 BOOTSTRAP ▫︎Começou como styleguide do Twitter ▫︎bem aceito e documentado ▫︎extensível ▫︎tornou-se um framework
- 52.
- 53. 53 FLAT UI ▫︎começou coma onda "flat" ▫︎desde o início como um produto ▫︎baseado no bootstrap
- 54.
- 55. 55 GOOGLE MATERIAL DESIGN ▫︎umaevolução do flat + 3D ▫︎parte do style guide do google ▫︎visa padrões para todas as plataformas ▫︎não específico para web
- 56.
- 57.
- 58. USAR VS. IMPLEMENTAR ▫︎tempode aprendizado ▫︎extensibilidade ▫︎licença & propriedade intelectual ▫︎finalidade
- 59.
- 60.
- 61. USAR VS. IMPLEMENTAR Umframework 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 Independenteda decisão, não se pode esquecer da parte mais importante de um style guide, que é a experiência do usuário.
- 63.
- 64.