Hyojun Guideline
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Hyojun Guideline

  • 263 views
Uploaded on

Conceitos e aplicações da Hyojun.guideline, utilizada nos projetos da equipe de tecnologia F.biz

Conceitos e aplicações da Hyojun.guideline, utilizada nos projetos da equipe de tecnologia F.biz

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
263
On Slideshare
263
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Hyojun Guideline Marcelo Miranda Carneiro 04/04/2014 F.biz|COMPANYCONFIDENTIAL
  • 2. O que é? • Metodologia de trabalho • Site com todos os módulos e páginas mock-up do projeto • Documento com explicações de funcionamento ou construção, variações e estados dos módulos • O “ambiente de trabalho do front-end” 01F.biz|COMPANYCONFIDENTIAL
  • 3. Por que usar? • Incentiva análise mais detalhada do projeto • Melhora qualidade, flexibilidade e manutenção do código • Cria legado, pois ajuda designers e desenvolvedores em novas implementações • Testes dos módulos são mais fáceis • Páginas mock-up ajudam a trabalhar com variações em páginas dinâmicas 02F.biz|COMPANYCONFIDENTIAL
  • 4. Conceitos principais • Construção modular ou o bom e velho “Atomic design” • Comportamento visual do módulo por escopo • Módulos primeiro, páginas por último / o trabalho começa pela guideline • “Menos é mais” — descrição apenas do que é necessário • Testes ocorrem na guideline 03F.biz|COMPANYCONFIDENTIAL
  • 5. Atomic design F.biz|COMPANYCONFIDENTIAL
  • 6. Atomic design Objetivos principais no desenvolvimento modular: • Análise dos elementos e do projeto como um todo • Abstração • Flexibilidade • Melhor manutenção e qualidade do código 04F.biz|COMPANYCONFIDENTIAL
  • 7. Atomic design Tudo é módulo, alguns com nível mais baixo ou alto. Roubando a explicação do Brad Frost sobre Atomic Design, metáfora organizada em: • átomos - nível mais baixo do módulo, maior abstração • moléculas - nível intermediário, pequenos módulos • organismos - agrupamento ou “componentes” standalone • templates - layouts ou “páginas” 05F.biz|COMPANYCONFIDENTIAL
  • 8. Atomic design Exemplos de cada “nível”: • átomo - título, texto, botão, link • molécula - input + label + botão, paginação, breadcrumb • organismo - header, footer, galeria de foto • template - estrutura de diagramação 06F.biz|COMPANYCONFIDENTIAL
  • 9. Layouts F.biz|COMPANYCONFIDENTIAL
  • 10. Layouts • Layouts ou templates contém as regras de diagramação de uma página do projeto • Espaços definidos no template podem ser consideradas como “escopos” para comportamento visual de um módulo, ex.: width, margin, float, position, etc. • No final, módulos são apenas “inseridos” nestes espaços • Normalmente temos um template por área do projeto 07F.biz|COMPANYCONFIDENTIAL
  • 11. Análise F.biz|COMPANYCONFIDENTIAL
  • 12. Análise Análise de exemplo com a home de netshoes.com.br: • Identificação da grid • Identificação dos módulos • Definição de cores • Definição de unidades e espaçamentos 08F.biz|COMPANYCONFIDENTIAL
  • 13. Grids F.biz|COMPANYCONFIDENTIAL
  • 14. Módulos F.biz|COMPANYCONFIDENTIAL
  • 15. Cores F.biz|COMPANYCONFIDENTIAL
  • 16. Unidades F.biz|COMPANYCONFIDENTIAL
  • 17. Como usar F.biz|COMPANYCONFIDENTIAL
  • 18. Configuração inicial • Faça download do Hyojun.bootstrap em: bitbucket.org/fbiz/hyojun.bootstrap • Utilize o bower para baixar o Hyojun.Guideline: bowerinstall • Caso ache necessário, configure as cores base e as grids de acordo com o seu projeto 09F.biz|COMPANYCONFIDENTIAL
  • 19. Configuração inicial Para sobrepor a grid padrão da guideline, customize em source/common/core/config/_grids.scss: $gl-do-override-grids:true; @mixingl-override-grids(){ @includegs-clear-grid-list(); @includegs-register-grid(gl-wide,960px,10,10px,auto); @includegs-register-grid(gl-normal,960px,10,10px,auto); @includegs-register-grid(gl-mobile,100%,4,10px,959px); } 01. 02. 03. 04. 05. 06. 07. 10F.biz|COMPANYCONFIDENTIAL
  • 20. Configuração inicial Para sobrepor as cores da guideline, customize em source/common/core/config/_colors.scss: $gl-do-override-theme-colors:true; @mixingl-override-theme-colors{ $gl-theme-main-color:#808078; $gl-theme-neutral-color:#333; $gl-theme-highlight-color:#3A87AD; $gl-theme-code-color:#C7254E; } 01. 02. 03. 04. 05. 06. 07. 11F.biz|COMPANYCONFIDENTIAL
  • 21. Elementos da guideline • O CSS da guideline é standalone para evitar que influencie os estilos do projeto • Todos os elementos que fazem parte do Hyojun.Guideline recebem classes • Na maioria dos casos, apenas a classe glé necessária. Alguns casos específicos levam gl-e um prefixo, como gl-header, gl-legend, etc. 12F.biz|COMPANYCONFIDENTIAL
  • 22. Elementos mais usados • Texto: h2.gl-header e h3.gl, p.gl • Holder para módulos: div.gl-example, div.gl-example-full • Código fonte: pre.gl>code • Notas no código: .gl-note-1, .gl-note-2 … • Listas: ul.gl, ol.gl • Mensagem importante: div.gl-callout 13F.biz|COMPANYCONFIDENTIAL
  • 23. Organização Existem algumas áreas com elementos pré-definidos na guideline: • Tipografia - com famílias, tamanhos e pesos • Cores - com a listagem de cores • Grids - com a listagem de grids • Forms - com elementos de formulário • Módulos - com espaçamentos, z-index 14F.biz|COMPANYCONFIDENTIAL
  • 24. Tipografia Os elementos padrões da página de tipografia utilizam HTML Helpers para serem escritos mais facilmente: • Família tipográfica com todos os glyphs utilizados • Lista de ícones • Lista de tamanhos de fontes • Lista de pesos (normalização dos valores) 15F.biz|COMPANYCONFIDENTIAL
  • 25. Cores • A página lê todas as cores listadas no arquivo source/common/core/config/_colors.scsse lista em forma de paleta • Para evitar duplicadas ou valores desnecessários, existe uma ferramenta para comparar as cores • Para criar uma cor nova, utilize a mesma ferramenta • Todas as cores são criadas com valores relativos 16F.biz|COMPANYCONFIDENTIAL
  • 26. Grids e Forms • Todas as grids listadas nesta página são inseridas utilizando HTML Helper • Como a maioria dos projetos podem ter formulários, já existe uma página feita com texto explicativo e os elementos montados, sendo necessário apenas estilizar • A página de forms pode ser apagada, alterada ou complementada, existe apenas como uma referência 17F.biz|COMPANYCONFIDENTIAL
  • 27. Módulos • Lista de espaçamentos • Lista de z-index • Todos os módulos globais do projeto • Módulos específicos podem ser categorizados e separados em outras páginas 18F.biz|COMPANYCONFIDENTIAL
  • 28. Como colaborar? F.biz|COMPANYCONFIDENTIAL
  • 29. Como colaborar? • O projeto Hyojun.guideline está hospedado em: bitbucket.org/fbiz/hyojun.guideline • A página de exemplo está em: fbiz.bitbucket.org/hyojun.guideline 19F.biz|COMPANYCONFIDENTIAL
  • 30. Como colaborar? Formas de ajudar com o projeto: • Identifique e sinalize problemas • Abra issues com bugs, idéias de melhorias, etc. • Leia, revise e ajude com a documentação • Dê um watch no Bitbucket e discuta sobre os novos recursos, funcionalidades, organização, layout, etc. 20F.biz|COMPANYCONFIDENTIAL
  • 31. Como colaborar? • Faça um fork, crie um branch e envie um pull request deste branch • Envie referências • Participe! 21F.biz|COMPANYCONFIDENTIAL
  • 32. A WPP Company / thank you