Taquigrafia //Design Responsivo//Microformatos

Taquigrafia css



Taquigrafia nada mais é que resumir algo , e é o re faremos com o codigo , apenas resumi-lo 

Fundo:

A propriedade de fundo do CSS, pode ser dividida em cinco conforme abaixo:

Porém com a taquigrafia, você pode definir todas essas regras em uma única linha, assim:

• Borda:

A propriedade borda, pode ser definida quanto a espessura, estilo e cor, conforme figura abaixo:

Na forma abreviada fica assim:

• Cor:

Quando o atributo de cor é especificado em hexadecimal, o seu valor pode ser taquigrafado se os 6 valores hexadecimais forem iguais. Por exemplo a cor branca em hexadecimal é #FFFFFF, sendo assim ela pode ser abreviada para somente #FFF.

• Fonte:

A propriedade fonte em css pode ser ter várias especificações, conforme mostra o exemplo da figura abaixo:

E esta propriedade também pode ser expressa em uma única linha com a taquigrafia:

• Margem e Padding:

As propriedades margem e padding, são especificadas quanto à posição em que serão aplicadas, sendo elas: topo, direita, inferior e esquerda. Você pode acompanhar o exemplo da figura abaixo:

Abaixo segue o exemplo em sua forma taquigráfica:

Design Responsivo 

O que é ? Design Responsivo é uma técnica de estruturação HTML e CSS, em que o site se adapta ao browser do usuário sem precisar definir diversas folhas de estilos para cada resolução

As media queries

Aqui é onde a mágica acontece. As media queries são uma forma de enviar condições ao navegador para informá-lo como renderizar a página, dependendo do tamanho do viewport.

O conjunto de regras abaixo, irão funcionar quando a largura do viewport for 980px ou inferior. Basicamente vamos passar a largura da <div> “content” de pixels para porcentagem, transformando a largura do elemento em fluída.

1 2 3 4 5 6 7 8 9 10 11 12 13

@media screen and (max-width: 980px) {     #pagewrap {         width: 94%;     }     #content {         width: 65%;     }     #sidebar {         width: 30%;     } }

Agora, se o viewport for 700px ou inferior, nós vamos especificar um tamanho automático para as <div>s “content” e “sidebar” e remover os floats. Assim os elementos vão ocupar 100% da tela.

1 2 3 4 5 6 7 8 9 10 11 12

@media screen and (max-width: 700px) {     #content {         width: auto;         float: none;     }     #sidebar {         width: auto;         float: none;     } }

Por fim, se o viewport for 480px ou inferior (tela de celular), vamos redefinir a altura da <div> “header” deixando-a automática, mudar o tamanho da tag <h1> para 24px e esconder a <div> “sidebar”.

1 2 3 4 5 6 7 8 9 10 11 12 13

@media screen and (max-width: 480px) {     #header {         height: auto;     }     h1 {         font-size: 24px;     }     #sidebar {         display: none;     } }

Você pode escrever quantas media queries quiser. Neste artigo nós criamos códigos para apenas 3 principais tamanhos: desktops, tabletse celulares.

O propósito das media queries é aplicar estilos diferentes, de acordo com o tamanho do viewport do dispositivo. Você pode criar estes estilos em um único arquivo CSS ou em arquivos separados.

As media queries

Aqui é onde a mágica acontece. As media queries são uma forma de enviar condições ao navegador para informá-lo como renderizar a página, dependendo do tamanho do viewport.

O conjunto de regras abaixo, irão funcionar quando a largura do viewport for 980px ou inferior. Basicamente vamos passar a largura da <div> “content” de pixels para porcentagem, transformando a largura do elemento em fluída.

1 2 3

<!--[if lt IE 9]>     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

Este foi mais um artigo relacionado ao Design Responsivo. Se você gostou, compartilhe com o mundo! E como de costume, qualquer dúvida, basta enviar um comentario

Microformato 

Microformatos são formatos HTML usados para adicionar semântica ao documento HTML. Os buscadores podem, através dos microformatos, capturar informações necessárias tais como informação de contato, eventos, calendários e afins.

No microformatos podemos vêr os itens abaixo:

hCard - para informação de contato

hCalendar - para eventos

hReview - para revisões

XFN - para relações sociais

rel-license - para licença;

Para criar microformatos do tipo hcard você deverá ir ao este site, lá vc poderá fazer o seu hcard como mostra o exemplo abaixo:

Para criar um hcalendar basta você clicar aqui e adicionar informações aos campos necessários, como mostra a imagem abaixo.

Depois de cria-los, basta que você copie o código e cole em seu código.