Link para o site pessoal: http://atrgames.vacau.com/home.html
Contraste
Contraste é uma da melhores formas de acrescentar beleza em uma página web, para criar um bom contraste na página, deve ser criado um contraste com cores que combinam porém diferentes.
Repetição
No design repetição não significa repetir um elemento somente, e sim estabelecer um padrão como uma cor de fundo diferente das outras, deixando a pagina com um visual mais atrativo através do css.
Alinhamento
Existem cinco tipos de alinhamento de texto: Alinhado à direita, à esquerda, centralizado, justificado e sem alinhamento. Nós somos determinados pelo nosso modo de leitura, da esquerda para a direita e quando chegamos ao final da linha, procuramos imediatamente o começo da próxima linha. Esta é a justificativa para o alinhamento mais comum de texto, que é alinhado à esquerda. Isso porque o começo de cada linha deve ser reconhecido precisamente, o que não precisa acontecer no final da linha (pelo menos teoricamente). Assim, os alinhamentos centralizados, à direita e irregulares são consensualmente descartados pela maioria dos designers por dificultarem o encontro do início das linhas.
Referencia: http://finetanks.com/referencia/alinhamento.php
Teoria das cores
A Teoria das Cores afirma que a cor é um fenômeno físico relacionado a existência da luz, ou seja, se a luz não existisse, não existiriam cores. O preto é percebido quando algo absorve praticamente toda a luz que o atinge. Já o branco é percebido em algo que reflete praticamente todas as faixas de luz. Pode-se dizer que o branco e o preto não são cores propriamente, e sim a presença ou ausência da luz.
Isaac Newton foi o primeiro a associar que a luz do Sol tinha forte relação com a existência das cores, quando dissociou a luz solar nas cores do arco-íris através de um prisma.Surgia ali o primeiro esboço do que posteriormente viria a ser chamada de Teoria das Cores.
Referencia: http://www.teoriadascores.com.br/
Codificação de cores
O atributo de cor é uma característica indispensável vital de páginas web. Praticamente tudo em uma página web pode ser facilmente colorida, incluindo o seguinte:
• fundos de páginas • fundos de mesa
• texto • hyperlinks
• bordas da tabela • bordas do quadro
Toda a luz, incluindo o que é emitido a partir de um monitor de computador, é composto de uma determinada proporção de vermelho , verde e / ou azul claro. A quantidade de cada um destes componentes do "espectro visível" pode ser expressa como um número, que é único para cada cor ou tonalidade específica. Todas as cores de luz, quando combinados em conjunto, produzem branco de luz, que é separado nos seus componentes de matiz infinito quando ele é passado através de um prisma, uma vez que cada tonalidade ou comprimento de onda da luz é desviada ligeiramente quantidade diferente.
A combinação de duas cores de luz dá o efeito oposto de misturar as mesmas duas cores de tinta. Azul claro e verde claro, juntos, ciano (1). A luz vermelha e luz azul juntos fazem magenta (2). Luz verde e vermelho juntos fazem amarelo (3). Claro que, como referido acima, combinando todos os comprimentos de onda de luz resulta em branco .
O valor numérico de uma cor é normalmente expressa por meio de qualquer um de dois códigos de cores. Cada código especifica a cor de um compósito com um número, RD GR BL , onde RD é a quantidade de vermelho , GR é a quantidade de verde , e LB é a quantidade de azul em cor. Aqui estão os dois tipos de códigos de cores:
Hexadecimal Código de Cores : utiliza base 16 , os números variam de 00 a FF.
Decimal Código de Cores : utiliza base 10 , os números de 00 a 255.
HTML utiliza o hexadecimal codificação de cores, de modo que o valor numérico de cada cor especificada em um documento HTML código-fonte terá 6 dígitos nele. Além disso, alguns navegadores não vai reconhecer um código de cores, a menos que um sinal "#" precede o código:
# XXXXXX
Na parte inferior desta página são links para tabelas de cores apresentando numerosas cores reconhecidas pela maioria dos navegadores. Além disso, a maioria dos navegadores reconhecer o seguinte 20 (e outros) cores comuns, cada um dos quais podem ser representados de uma de duas maneiras:
Carta de cores comuns
AQUA
<FONT COLOR="aqua">
<FONT COLOR="#00FFFF">
PRETO (o padrão de cor)
<FONT Color="black">
<FONT COLOR="#000000">
AZUL
<FONT Color="bLUE">
<font Color="#0000FF">
BROWN
<FONT COLOR="brown">
<FONT COLOR="#A02820">
Cor verde-amarelada
<FONT COLOR="chartreuse">
<FONT COLOR="#80FF00">
FUCHSIA
<FONT COLOR="fuchsia">
<FONT Color="#FF00FF">
GRAY
<FONT Color="gray">
<FONT COLOR="#808080">
VERDE
<FONT Color="Green">
<FONT Color="#008000">
LIME
<FONT COLOR="lime">
<FONT Color="#00ff00">
MAROON
<FONT Color="MAROON">
<FONT COLOR="#800000">
MARINHA
<FONT Color="Navy">
<FONT COLOR="#000080">
OLIVE
<FONT COLOR="olive">
<FONT COLOR="#808000">
ORANGE
<FONT Color="orange">
<FONT COLOR="#FFA000">
PURPLE
<FONT Color="purple">
<FONT COLOR="#800080">
RED
<FONT Color="RED">
<FONT Color="FF0000">
SILVER
<FONT COLOR="silver">
<FONT COLOR="#C0C0C0">
TEAL
<FONT COLOR="teal">
<FONT COLOR="#008080">
VIOLETA
<FONT COLOR="violet">
<FONT COLOR="#F080F0">
BRANCO
<FONT Color="white">
<FONT COLOR="#FFFFFF">
AMARELO
<FONT Color="pink">
<FONT Color="#ffff00">
http://www.tedmontgomery.com/tutorial/colors.html
Tipografia
A tipografia (do grego typos — “forma” — e graphein — “escrita”) é a arte e o processo de criação na composição de um texto, física ou digitalmente. Logo, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação impressa.
Mapa do site
Desenho que mostra qual será a estrutura do site e o caminho entre os links das paginas como essa imagem por exemplo:
Como criar uma estrutura de facil manutenção para um sitio seguindo os requisitos da atribuição de nomes de arquivos.
Como todos sabem ou aqueles que não sabem, um dia passarão por isso, como é sucinta a forma de organização do Drupal comparado com outros softwares como o Magento por exemplo. Se você quiser pode fazer tudo dentro do arquivo .module e pronto. Realmente pode fazer mas se um dia você partir dessa para melhor (espero que demore para acontecer), terão que contratar um medium para fazer uma consulta, pois se tornará impossível dar manutenção a esse projeto (rsrsrs).
Temos outros pontos bem incômodos quando falamos sobre desenvolvimento em Drupal com várias pessoas no mesmo projeto produzindo insanamente módulos e features. Se você não utilizar as técnicas de modularização dos seus componentes e variáveis em features o trabalho se tornará impraticável, pois você não irá conseguir replicar seu desenvolvimento para outros envolvidos no projeto, que provavelmente não estarão trabalhando ao seu lado.
Note que na imagem acima temos três pastas, chamadas respectivamente de contrib, custom e fs.
Na contrib ficarão todos os módulos que virão do reposítório drupal.org. Já sei o que você deve estar pensando (rsrs):
“Quando eu executar o comando drush dl nomedomodulo, ele automaticamente colocará o módulo da comunidade na pasta site/all/modules/contrib?”
“Mas é claro soldado! Desde que, você tenha criado esses diretórios antes de baixar qualquer módulo.”
Para fazer uma estrutura dessas em projetos já desenvolvidos e que estão em produção, será necessário um outro artigo para explicar.
Pasta /sites/all/modules/custom
Nesse caminho ficarão todos os módulos desenvolvidos pela equipe do projeto.
Uma boa prática que utilizamos aqui é que todos os nomes dos módulos criados pela equipe devem sempre começar com a palavra custom_ e o restante em inglês, por exemplo:
custom_news, custom_ad, custom_profile_users e etc...
Dessa forma fica bastante claro quando alguém de fora do projeto for um dia dar manutenção no código-fonte e encontrar lá no meio uma função ou hook que é invocado por um “custom_”.
Veja abaixo como fica uma estrutura de diretórios como essa:
Pasta /sites/all/modules/custom/features
Este diretório é usado para armazenar todas as features criadas pela equipe durante o desenvolvimento do projeto.
Features, para quem não sabe, são módulos criados com intuíto de armazenar todas as configuraçõesfeitas dentro do Drupal e que dessa forma, permite deixar versonável praticamente tudo. Reparem que eu deixei em negrito a palavra configurações? Pois é, quando eu disse configurações pessoal, eu quis dizer tudo que não seja conteúdo, então, nada de ficar gerando features com os conteúdos cadastrados, se vocês fizerem isso estarão fadados a ter uma grande dor de cabeça no futuro.
Quem avisa amigo é! A boa prática é armazenar somente configurações.
Mais uma boa prática que utilizamos em nossos projetos, utilize a sigla fs_ e o resto do nome em inglês. Dessa forma ficará muito fácil identificar o que é esta pasta.
Pasta /sites/all/themes/contrib
Segue a mesma idéia dos módulos contrib. Todos os temas vindos da comunidade devem ser colocados nessa pasta, porém, nesse caso, após efetuar o download do tema, você terá que colocar manualmente esse tema nesta pasta, será um esforço mínimo e um ganho enorme de organização no futuro.
Pasta /sites/all/themes/custom
Aqui a única diferença do custom de módulos é que o nome do seu tema pode ficar sem o “custom_” na frente, para evitar confusão.
Não se preocupe com caminhos relativos. Caso os temas tenham sido bem feitos você não terá problemas com caminhos de suas imagens e css.
Terceira e última estrutura que eu considero uma das mais importantes de se explicar.
Pasta /sites/all/libraries
Esse diretório deve ser utilizado para colocar bibliotecas de terceiros, que são necessários para permitir o total funcionamento de um módulo. Alguns exemplos de módulos que precisão disso:
É muito importante quando você for instalar um novo módulo, ler tudo que está escrito na página dele e também ler o readme/install.txt. Caso o módulo que você fez download tiver uma biblioteca de terceiros dentro da pasta do módulo e o mesmo também não dizer que você pode colocar na pasta libraries, está ERRADO e também não está seguindo as boas práticas convencionadas pelo Drupal.
Referencia: http://drupaldeelite.com.br/blog/como-criar-uma-estrutura-de-diretorios-organizada-para-seus-modulos-temas-e-bibliotecas
Links Relativos & Absoluto
A função do link é ligar dois documentos. O link pode ser Relativo ou Absoluto. O link relativo não especifica o caminho completo do endereço do arquivo, já o link absoluto sim.
<a href="home.htm">Home</A>
Porém o seu endereço absoluto seria:
<a href="http://orbita.starmedia.com/edaurelio/home.htm">Home</A>
Links Interno & Externo
O Link Interno é aquele que liga dois pontos em uma mesma homepage
O Link Externo é aquele que cria uma ligação entre homepages diferentes e, por isso, é um link absoluto (tem que possuir o endereço completo). Todos os links externos são absolutos porém nem todos os links absolutos são externos.
Wireframe
É uma descrição de como será a estrutura da pagina do site como na imagem abaixo:
Mockup
É uma maquete do site que justifica o porque de ter usado uma cora, e também de usar uma fonte o mockup é mais detalhado do que o wire frame
