• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hyojun Guideline
 

Hyojun Guideline

on

  • 157 views

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

Statistics

Views

Total Views
157
Views on SlideShare
157
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hyojun Guideline Hyojun Guideline Presentation Transcript

    • Hyojun Guideline Marcelo Miranda Carneiro 04/04/2014 F.biz|COMPANYCONFIDENTIAL
    • 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
    • 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
    • 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
    • Atomic design F.biz|COMPANYCONFIDENTIAL
    • 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
    • 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
    • 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
    • Layouts F.biz|COMPANYCONFIDENTIAL
    • 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
    • Análise F.biz|COMPANYCONFIDENTIAL
    • 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
    • Grids F.biz|COMPANYCONFIDENTIAL
    • Módulos F.biz|COMPANYCONFIDENTIAL
    • Cores F.biz|COMPANYCONFIDENTIAL
    • Unidades F.biz|COMPANYCONFIDENTIAL
    • Como usar F.biz|COMPANYCONFIDENTIAL
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Como colaborar? F.biz|COMPANYCONFIDENTIAL
    • 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
    • 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
    • Como colaborar? • Faça um fork, crie um branch e envie um pull request deste branch • Envie referências • Participe! 21F.biz|COMPANYCONFIDENTIAL
    • A WPP Company / thank you