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.