Diferenças

Aqui você vê as diferenças entre duas revisões dessa página.

--- padroes_desenvolvimento [2015/09/15 20:06]
rafael
+++ padroes_desenvolvimento [2016/02/17 11:50] (atual)
rafael
@@ Linha 150: / Linha 150: @@
 -Quando possuir palavras compostas, adotar o formato underlinecase para PHP e camelcase para as demais linguagens.
+====== Layout ======
+===== Cabeçalho =====
+  * Cor de fundo: #F7F7F7
+  * Altura: 80px
+  * Largura: 100% (exceto em aplicações web, centralizado em 1024px)
+  * Logo da aplicação posicionado a esquerda e centralizado na vertical com espaçamento de 20px a esquerda
+  Borda que divide o cabeçalho e o menu
+    * Cor de fundo: cor principal da aplicação
+    * Altura: 1px
+    * Largura: 100%
+<html>
+  <table>
+    <tr>
+        <td>Aplicação</td>
+        <td>Imagem</td>
+        <td>Cor principal</td>
+        <td>Cor secundária</td>
+    </tr>
+    <tr>
+        <td>Cotação</td>
+        <td></html>{{::co.png?nolink }}<html></td>
+        <td>#2F86D4</td>
+        <td>#81B9E8</td>
+    </tr>
+    <tr>
+        <td>EasyCash</td>
+        <td></html>{{:ec.png?nolink }}<html></td>
+        <td>#6E2152</td>
+        <td>#A57C96</td>
+    </tr>
+    <tr>
+        <td>IntelliGroup</td>
+        <td></html>{{:ig.png?nolink }}<html></td>
+        <td>#D91427</td>
+        <td>#EDA67C</td>
+    </tr>
+    <tr>
+        <td>IntelliStock</td>
+        <td></html>{{:is.png?nolink }}<html></td>
+        <td>#1D6437</td>
+        <td>#82A081</td>
+    </tr>
+    <tr>
+        <td>IntelliStock Mobile</td>
+        <td></html>{{:is_mobile.png?nolink }}<html></td>
+        <td>#1D6437</td>
+        <td>#82A081</td>
+    </tr>
+    <tr>
+        <td>IntelliCash</td>
+        <td></html>{{::ic.png?nolink }}<html></td>
+        <td>#122C5F</td>
+        <td>#7B91B4</td>
+    </tr>
+    <tr>
+        <td>Venda Assistida</td>
+        <td></html>{{::va.png?nolink }}<html></td>
+        <td>#E5701F</td>
+        <td>#F3B982</td>
+    </tr>
+    <tr>
+        <td>Intelliweb</td>
+        <td></html>{{::iw.png?nolink }}<html></td>
+        <td>#DBB93D</td>
+        <td>#EEDBA1</td>
+    </tr>
+    <tr>
+        <td>GNFE</td>
+        <td></html>{{::gnfe.png?nolink }}<html></td>
+        <td>#122C5F</td>
+        <td>#7B91B4</td>
+    </tr>
+  </table>
+</html>
+===== Menu =====
+    * Cor de fundo: #F7F7F7
+    * Altura: 33px
+    * Largura: 100% (exceto em aplicações web, centralizado em 1024px)
+    * Borda inferior: 1px #D5D5D5
+    * Cor da fonte: #000000
+    * Fonte: Arial 13px
+{{::screenhunter_21_jan._28_11.32.jpg?nolink|}}
+===== Barra de título =====
+  * Degrade: Sup. #777777 Inf. #555555
+  * Fonte: Arial 12px centralizado #FFFFFF
+{{::screenhunter_22_jan._28_11.53.jpg?nolink|}}
+===== Tabelas =====
+==== Cabeçalho ====
+  * Fundo: #999999
+  * Altura: 30px
+  * Fonte: Arial 13px Negrito
+  * Cor da Fonte: #FFFFFF
+  * Borda: 1px #FFFF
+==== Linhas ====
+  * Altura: 30px
+  * Fonte: Arial 13px
+  * Cor da Fonte: #999999
+  * Zebra: #FFFFFF - #E9E9E9 (Começando a primeira com #FFFFFF)
+  * Hover: utilizar a cor secundária da aplicação
+  * Alinhamento:
+      * Esquerda: Textos alfanuméricos com quantidade ilimitada de caracteres
+      * Direita: Valores numericos (preços, quantidades)
+      * Centro: Números de documentos, datas ou códigos com quantidade limitada de caracteres
+{{ ::screenhunter_24_feb._02_15.57.jpg?nolink |}}
+===== Botões =====
+  * Cor: Principal da aplicação
+  * Fonte: Arial 13px
+  * Cor da Fonte: #FFFFFF
+  * Altura: 35px
+  * Ícone branco posicionado à esquerda do texto
+  * Arredondamento da borda: 5px
+{{ ::screenhunter_25_feb._02_16.25.jpg?nolink |}}
+===== Abas =====
+    * Fonte: Arial 13px Negrito
+    * Cor da Fonte: #333333
+    * Borda: 1px #d5d5d5
+    * Cor da aba selecionada: #F7F7F7
+    * Cor da aba não selecionada: #E9E9E9
+    * Arredondamento da borda: 5px (topo)
+    * Cor do conteúdo da aba selecionada: #F7F7F7
+    * Espaçamento entre as abas: 5px a direita
+{{ ::screenhunter_28_feb._02_17.19.jpg?nolink |}}
+===== Formulários =====
+  * Distância mínima esquerda: 20px
+  * Distância mínima acima: 20px
+==== Rótulo ====
+  * Cor do rótulo: #333333
+  * Fonte do rótulo: Arial 13px Negrito
+  * Posição: Alinhado a esquerda, acima do campo e com margem de 5px abaixo
+==== Campos ====
+  * Fonte: Arial 13px
+  * Cor da fonte: #999999
+  * Borda: 1px #D5D5D5
+  * Arredondamento da borda: 5px
+{{ ::screenhunter_29_feb._03_10.19.jpg?nolink |}}
+  * Marcadores de campos do tipo checkbox e radio devem ter seus marcadores na cor principal da aplicação
+  {{ ::screenhunter_30_feb._03_10.36.jpg?nolink |}}
+===== Ícones =====
+Para baixar ícones para botões e atalhos, poderá ser utilizado o site https://icons8.com/.
+Na página principal, informe o termo a ser procurado em inglês e clique sobre o botão de pequisa.
+{{ ::screenhunter_70_feb._17_09.37.jpg?nolink |}}
+Para personalizar a cor e o tamanho do ícone, selecione o ícone desejado e clique sobre a paleta de cores localizado no canto superior direito. Informe a cor desejada nas cores padrão ou informando o hexadecimal da cor.
+{{ ::screenhunter_71_feb._17_09.41.jpg?nolink |}}
+{{ ::screenhunter_72_feb._17_09.43.jpg?nolink |}}
+Para alterar o tamanho da imagem, clique sobre o indicativo de formato localizado abaixo da imagem e selecione o tamanho desejado ou personalize o tamanho clicando sobre o item "Custom".
+{{ ::screenhunter_73_feb._17_09.46.jpg?nolink |}}
+{{ ::screenhunter_74_feb._17_09.48.jpg?nolink |}}
+Para realizar o download da imagem, clique sobre o botão localizado logo abaixo.
+{{ ::screenhunter_75_feb._17_09.50.jpg?nolink |}}

Documentação de software

Ferramentas do usuário

Ferramentas do site

Diferenças

Ferramentas da página