Microformatos

• O que são microformatos:

É um conjunto de formatos abertos projetados especificamente para adicionar semântica em qualquer documento em linguagem de marcação, isso é feito usando atributos do HTML específicos. Essas funções, tem como objetivo de enriquecer as informações nas paginas web para os motores de busca e calendários consumirem essas informações. Aplicações, como buscadores, podem extrair informações específicas de páginas que usam microformatos, como informações de contato, evento, licença, etc. Antes de criar o microformato deve ser criado um código HTML com a semântica correta.

Especificações

Exemplo -> hCard - para informação de contato

Exemplo -> hCalendar - para eventos 

• Utilizando uma ferramenta de tradução microformats para criar um link que permita o usuários baixar ou mover o conteúdo para outro local:

No caso de criar um microformato com a especificação hCard, você deve acessar o site http://microformats.org/code/hcard/creator para criar seu microformado como mostra a imagem abaixo:

No caso de criar um microformato com a especificação hCalendar, você deve acessar o site http://microformats.org/code/hcalendar/creator para criar seu microformado como mostra a imagem abaixo:

Depois gerar os códigos do hCard e hCalendar, basta colocar dentro do seu código HTML.

 Código hCard e resultado:

 Código hCalendar e resultado:

Design Responsivo

Oque é Design Responsivo:

É uma forma de desenvolver o Layout para que o site seja acessível em varias resoluções como, por exemplo celulares e tablet.

Passo a passo: criar um layout responsivo de uma página para três tamanhos de telas diferentes.

1- Passo : Crie uma estrutura HTML
Nesse exemplo vou estar criando uma página em HTML básica com uso de um formulário como mostra na imagem.

2- Passo: Criar a regra CSSpara as 3 resoluções:
Uma boa forma de trabalhar com um layout responsivo no começo é separando em 3 folhas de estilo cada um com uma resolução no caso mobile, tablet e desktop, como o exemplo abaixo:

Como se trata de um exemplo eu coloquei o nome de cada plataforma no arquivo CSS para ficar mais fácil de entender, perceba que dentro do atributo media está sendo especificado o tamanho de cada resolução assim que ultrapassar o limite a regra CSS muda.

Na imagem abaixo mostra o código da pagina HTML com a regra CSS para mobile.

Na imagem abaixo mostra a pagina HTML com a regra CSS para mobile.

Na imagem abaixo mostra o código da pagina HTML com a regra CSS para tablet.

Na imagem abaixo mostra a pagina HTML com a regra CSS para tablet.

Na imagem abaixo mostra o codigo da pagina HTML com a regra CSS para desktop.

Na imagem abaixo mostra a pagina HTML com a regra CSS para desktop.

Perceba que em cada resolução, conforme a pagina é aumentada a cor, tamanho da foto e seu estilo muda.

Acessibilidade

O que é acessibilidade

Acessibilidade na Web é uma forma de fazer com que as pessoas portadoras de necessidades especiais consiga acessar um conteúdo na internet sem que tenha algum tipo de dificuldade.

Atualmente a maioria dos sites não possuem inacessibilidade dificultando ou tornando impossível o sentido do site para essas pessoas, porém se o site é o software forem bem projetados essas pessoas poderão acessar os sites sem nenhum problema.

Imagens Acessíveis

Uma imagem acessível significa que qualquer pessoa possa entender oque ela quer transmitir até mesmo um deficiente visual, nesse caso deve ser usado uma descrição de imagem que é o atributo ALT da tag <img> como mostra a imagem.

<img src="imagem00005.png" alt="carro vermelho esportivo"/>




Formulários Acessíveis

Muitas vezes os formulários não possuem nenhuma acessibilidade dificultando o preenchimento para pessoas com algum tipo de deficiência, nesse caso é necessário fazer um formulário acessível da seguinte forma.

É preciso usar a tag label para fazer a relação com os nomes especificando o nome dos campos junto com os input type, para que não aconteça nenhuma confusão na hora de preencher o formulário isso representa um ganho significativo em acessibilidade e usabilidade também.

<form class="formulario" action="" method="post">

<label for="nome">Nome:</label>

<input id="nome" name="nome" type="text" required="" tabindex="6"><br><br>

<label for="email">Email:</label>

<input id="email" name="email" type="email" placeholder="exemplo@exemplo.com" required="" tabindex="7"><br><br>

<label for="mensagem">Mensagem:</label><br><br>

<textarea cols="20" rows="5" id="mensagem" name="mensagem" required="" tabindex="8"></textarea><br>

<input type="submit" value="Enviar" tabindex="9" onclick="return validar()">

<input type="reset" value="Redefinir" tabindex="10">

</form>

Acessibilidade e a utilização de fontes

Um dos elementos que fazem toda a diferença mesmo sendo simples é a utilização de fontes no site geralmente um tamanho de fonte legível Arial varia entre 13 e 15, além do tamanho devemos tomar cuidado nas utilizações de cores, devemos sempre utilizar contrastes que favoreçam a leitura do usuário.

Acessibilidade e a utilização de cores

Outro elemento simples embora muito importante dentro de um site são as cores, pois ele pode por exemplo prejudicar na compreensão de usuários daltônicos, principalmente se as cores forem uma parte essencial do site.

Taquigrafia CSS

1. Taquigrafia CSS

Taquigrafia CSS é uma forma de fazer o código de uma maneira mais limpa melhorando o carregamento da pagina
e facilitando na manutenção do código.

1.1 Técnicas abreviadas para fundo;

A Técnicas abreviada de fundo é possível resumir o código css na linha como na imagem abaixo.

Para o background do elemento H2 está na cor vermelho, no elemento p a cor de fundo é verde, a pagina está com um background claro.

1.2 Técnicas abreviadas para propriedades de fronteira;

As técnicas abreviadas para bordas, também são possíveis de usar a taquigrafia como mostra na imagem abaixo.

Como mostra na na imagem a cada lado da borda está de um jeito e a espessura tem 7px, mas esse comando tambem pode ser feito em uma unica linha. O elemento H1 está usando de forma resumida as espessuras e tipos de borda sobre esse elemento.

1.3 Técnicas abreviadas para cor;

A taquigrafia de cores pode ser usada somente quando os três grupos de cores se repetirem entre eles como por exemplo AA 33 22 na imagem abaixo.

Como mostra a imagem os 3 grupos de cores que se repetiam foram resumidos para A32.

1.4 Técnicas abreviadas para fonte;

A técnica de abreviação de fonte também é possível fazer em uma linha como mostra na imagem abaixo.

Como mostra na imagem a paragrafo com a classe declara uma por uma das configurações da fonte, enquanto no elemento p sem classe resume todas essas configurações em uma linha.

1.5 Técnicas abreviadas para margem;

A técnica de abreviação de margem funciona da seguinte maneira você define todos os da margem de um elemento apenas em uma linha como mostra na imagem abaixo.

1.6 Técnicas abreviadas para padding.

A técnica de abreviação de padding funciona da mesma maneira que a margem como mostra na imagem abaixo.

Seletores CSS

Um seletor CSS é  uma forma de especificar que tal elemento vai receber uma configuração especifca por exemplo:

1.1  Seletor universal;

O seletor universal é um comando CSS que configura todos os elementos de acordo com oque é especificado como na imagem abaixo.

Nessa imagem mostra que, todos os elementos que tiverem algum texto, o texto sera da cor vemelha.

1.2  Seletor de tipo de elemento;

O seletor de tipo de elemento é um comando CSS que usa um elemento especifico para receber todas as configurações.

Nesse imagem mostra, dois textos, cada um dentro de uma tag diferente o texto que está dentro da tag <p> está com a cor vemelha e tamanho 80.

1.3 Seletor contextual;

O seletor contextual é um comando CSS que funciona da seguinte forma, o elemento só funciona se ele estiver dentro do outro elemento especificado.

Nessa imagem mostra que a tag <p> só recebe as configurações do CSS se ela estiver dentro da tag <h1>.

1.4 Seletor de elementos filho;

O seletor de elementos filho configura somente os elemenstros que estiverem dentro de uma tag determinada, porém se colocar uma tag entre essas duas tag a configuração não funciona como na imagem a seguir.

Nessa imagem mostra que o elementos usados no codigo CSS body > p só funciona se estiver da seguinte forma <body><p></p></body>, caso esteja dessa forma não vai funcionar <body><h1><p></p><h1></body> assim funciona os seletores de elementos filhos.

1.5 Seletor adjacente;

O seletor adjacente é uma configuração CSS que só configura um elemento que estiver seguido do outro, como na imagem abaixo por exemplo.

Veja que a configuração só funciona para o primeiro <h2> que fica antes do <h1> o segundo <h2> recebe as configurações, porque antes do segundo <h2> tem outro <h2>.

1.6 Seletor de classe;

O seletor de classe é uma configuração do CSS que só funciona com o elemento que estiver com o nome da classe como na imagem abaixo.

Como mostra na imagem somente os elementos que estão com a classe com o nome info.

1.7 Seletor de id;

O seletor de id, só aplica as configurações CSS no elemento que estiver com o nome do id correto, caso o elemento não esteja com o nome do id que está no CSS as configurações não são aplicadas nele como mostra a imagem.

Como mostra na imagem a configuração só funciona se o elemento e o id for o mesmo da página HTML.

1.8 Agrupamento de seletores;

O agrumapendo de seletores funciona da seguinte maneira, caso você use a mesma configuração em dois elementos diferentes você pode fazer da seguinte forma.

Perceba que somente os elementos que estão agrupados h1 e h2 recebem as configurações HTML.

1.9 Seletores de atributo;

O seletores de atributo funciona da seguinte forma, o elemento só recebe as configurações do CSS, se o atributo for o mesmo da pagina, como mostra a imagem abaixo.

Como mostra a imagem, só o elemento <h1> que tem a classe com o nome funci recebe as configurações.

1.10 Pseudo-classes;

O Pseudo-classes é um comando CSS que funciona da seguinte forma, seleciona o primeiro elemento descendente, como na imagem abaixo.

Na imagem mostra o exemplo que o pai “ body ” tem filhos 2 elementos “ h1 ” mas só o primeiro elemento recebe as configurações.

1.11 Pseudo-elementos;

O Pseudo-elementos é um comando CSS que configura só a primeila linha do texto como mostra a imagem.

Como mostra a imagem somente a primeira linha fica com a cor vemelha e a fonte formatada.

Conceito de Design de Sites

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