Documento de Identidade Visual [Wiki TCE-GO]

Essa página está em modo somente de leitura. Você pode visualizar a fonte, mas não alterá-la. Informe-se com o administrador do Wiki, caso você ache que isso está incorreto.
====== Documento de Identidade Visual ======
===== 1. Informações Gerais sobre o Levantamento =====
==== RESPONSÁVEL PELA ELABORAÇÃO ====

|**Unidade**|**Nome**|**Fone**|**e-mail**|
|GER-TI|Cassio Guilhermy Tavares Souza| |cguilhermy@tce.go.gov.br|


===== 1. Material Design =====
Criado e projetado pela Google, Material Design é uma linguagem de design que combina os princípios clássicos de projetos bem sucedidos junto com inovação e tecnologia. O objetivo da Google é desenvolver um sistema de design que permite unificar a experiência do usuário em todos seus produtos em qualquer plataforma.

[[https://youtu.be/Q8TXgCzxEnw|Link do Visual de Introdução Material Design]]

===== 2. Começando com Material Design  =====


==== 2.1. Materialize ====

Esta é a versão padrão que vem com os arquivos CSS e Java Script minificados e desminados. Esta opção requer pouca ou nenhuma configuração. Use isso se você não estiver familiarizado com Sass.

[[https://github.com/Dogfalo/materialize/releases/download/v0.100.2/materialize-v0.100.2.zip | Materialize]]

==== 2.2. Sass ====

Está versão contém o código com arquivos SCSS. Escolhendo esta versão você tem maior controle sobre os componentes inclusos. Você precisará de um compilador Sass se escolher essa opção.

[[https://github.com/Dogfalo/materialize/releases/download/v0.100.2/materialize-src-v0.100.2.zip | Source]]

==== 2.3. CDN ou Link direto ====

Você pode encontrar todas as versões do CDN no [[https://cdnjs.com/libraries/materialize|Materialize CDNjs]]

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:cdnmaterialize.jpg?800|}}


===== 3. Estrutura do Projeto  =====

Após fazer download, extraia os arquivos na pasta onde seu website está localizado. Sua pasta ficará parecida com isso.

Obs: Você notará que existem dois conjuntos de arquivos. O min significa que o arquivo é "comprimido" para reduzir os tempos de carregamento. Esses arquivos minificados geralmente são usados na produção, enquanto é melhor usar os arquivos não modificados durante o desenvolvimento.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:estruturaprojeto.jpg?600|}}

===== 4. Configuração HTML  =====

Em seguida, você deve se certificar que os arquivos estão sendo referenciados corretamente na sua página web. Geralmente é sábio importar os arquivos JavaScript no final do corpo do arquivo para reduzir o tempo de carregamento da página. Segue o exemplo abaixo de como importar o Materialize na sua página web.

Uma última coisa importante é importar o jQuery antes de importar o materialize,js!

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:configuracaohtml.jpg?800|}}

===== 5. Materialize Components  =====

==== 5.1. GRID ====

No Materialize a grid padrão tem 12 colunas, cada uma dessas colunas sempre irá ter uma largura igual.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:div_pagination_12.jpg?800|}}

Para entender como o grid é usado no HTML, de uma olhada no código abaixo, ele irá produzir um resultado similar ao anterior.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:div_pagination_codigopadrao.jpg?800|}}


=== 5.1.1 GRID Com Colunas Dentro da Linha ===

Espere-se, quando criar uma GRID todas as colunas devem estar dentro de um row e deve ser adicionada a classe "col" em todas as "divs" internas para que elas sejam colunas.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:div_pagination_codigopadraocolunas.jpg?800|}}

==== 5.2. Seção ====

A classe section é usada para adicionar espaçamento superior e inferior. Adicione a classe section nas suas "divs" que contém grandes blocos de texto.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:secao.jpg?800|}}

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:secao_codigo.jpg?800|}}

==== 5.3. Table ====

Tabelas são uma maneira fácil de organizar muitos dados. O materialize disponibiliza algumas classes úteis para ajudar a aplicar estilos em uma tabela da maneira mais fácil possível. Além disso, para melhorar a experiência móvel, todas as tabelas nas larguras das telas de dispositivos mobile são centralizadas automaticamente.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:table.jpg?800|}}

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:tablecodigo.jpg?800|}}

==== 5.4. Badges in Dropdown ====




==== 5.5. Buttons ====

Existem 3 tipos principais de botões descritos no material design. O botão levantando (raised) é o botão padrão que significa ações e procura dar profundidade a uma página predominantemente plana. O botão de ação circular flutuante é destinado a funções muito importantes. Botões lisos (flat) são normalmente utilizados dentro dos elementos que já têm profundidade como cartões ou modais.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:buttonsraised.jpg?800|}}

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:buttonsfloating.jpg?800|}}

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:buttonsflat.jpg?800|}}

==== 5.6. Cards ====

Cartões (cards) são uma maneira conveniente de exibir conteúdos compostos por diferentes tipos de objetos. Eles também são bem adaptáveis para exibir objetos similares, cujo tamanho ou ações possam variar consideravelmente, como fotos com legendas de diferentes tamanhos.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:cartaobasico.jpg?800|}}

==== 5.7. Collections ====

Coleções (collections) permitem que você agrupar listas de objetos.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:collections.jpg?800|}}

==== 5.8. Media CSS ====

Os medias css são componentes flutuantes que podem ser utilizados para notificações. 

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:mediacss.jpg?800|}}

==== 5.9. Forms ====

Formulários são o modo padrão para receber os dados dos usuários. As transições e suavidade desses elementos são muito importantes por causa da interação do usuário inerente associada as formas.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:forms.jpg?800|}}

==== 5.10. Icons ====

Os icons do TCE-Docs serão utilizados via CDN pois existe um conflito entre o framework do Word JS com o mesmo.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:icons.jpg?800|}}

Obs: Para ver a lista de ícones disponível no framework do materialize acesse [[http://materializecss.com/icons.html|Icons Materialize]] 


==== 5.11. Navbar ====

A barra de navegação (navbar) é completamente contida dentro de um elemento Nav do HTML5. Dentro de um container div recomendado, existem 2 partes principais da barra de navegação. Um logo ou link da marca, e os links de navegação. Você pode alinhar esses links para a esquerda ou direita.

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:navbar.jpg?800|}}

==== 5.12. Pagination ====

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:pagination.jpg?400|}}


==== 5.13. Preloader ====

Se você possui conteúdos que levarão tempo para carregar, você precisar dar ao usuário esse feedback. Por esse motivo disponibilizamos atividades numéricas + indicadores de progresso.

=== 5.13.1. Linear  ===

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:preloaderlinear.jpg?800|}}

=== 5.13.2. Circular ===

{{:pres:gerti:servico_de_desenvolvimento_de_sistemas_de_informacao:projetos:tce-docs:preloadercircular.jpg?800|}}