Microformatos

Microformatos foram criados para adicionar semântica ao documento HTML isso é feito usando atributos específicos como class, rel e ver, os microformatos usam como base os web standarts. Com uso de microformatos fica mais fácil para  determinados programas como por exemplo o outloock de extração de informações como detas horários, e-mail , endereços.  

Microformatos surgiram devido a necessidade de resolver problemas específicos, para serem o mais simples possível, colocando os humanos como prioridade ao invés da maquina,  Reutilizar blocos de código quando necessário utilizados dentro dos padrões para web, e a aplicação em  blocos e trechos especóficos.

Existem dois tipos principais de microformatos o hcard e o hcalendar. O hcard  é uma marcação semântica que serve para publicar informações de contato, seja de pessoas ou de empresas  como por exemplo um cartão de visitas, segue os padrões do Vcard.  O hcalendar também é uma marcação semântica porém como o nome diz serve para publicar informações como datas e horários.Existem diversas ferramentas online que ajudam o usuário a decodificar um microformato.

Exemplo de código hcard

<div class=”street-adress”> rua dos bobos numero 0</div>

  <span class="locality">cidade</span>

  <span class="region">estado</span>

  <span class="postal-code">CEP</span>

Exemplo de codigo hcalendar

<div class=“vevent”>

                <h1 class=“summary”>Evento de anime qualquer</h1>

                <p>o evento vai acontecer nos dias <time datetime="2014-05-30" class="dtstart"> 30 </time> a <time datetime=                 "2013-06-01" class="dtend"> 01 junho  de 2014 </time>              em <span class= "location"> São Paulo </span> e contou  

                (<a class="url" href=“http://www.eventodeanimequalquer.com/”>leia mais</              a>)

</div>

 nesse post o usuário irá aprender como utilizar o hcardcreator disponível no site http://microformats.org/code/hcard/creator

Esta ferramenta possui um designer simples e intuitivo enquanto o usuário digita ele vai automaticamente formando o código e mostra uma prévia de como vai ficar.

A imagem abaixo mostra a parte onde o usuário deve inserir o conteúdo que quer que seu código possua. O botão redefinir limpa todos os campos.E o botão build it  deve ser apertado quando  tudo estiver devidamente digitado nos campos.

A próxima imagem mostra o campo onde o código é definido automaticamente pelo programa, para incorporá-lo ao site do usuário basta apenas copiar o código criado na aba “CODE”,  e incorporá-lo ao código HTML do web site do usuário.

Código gerado pelo site:

<div id="hcard-nome-nome-do-meio-sobrenome" class="vcard">

 <a class="url fn n" href="http://www.site.com">  <span class="given-name">nome</span>

  <span class="additional-name">nome do meio</span>

  <span class="family-name">sobrenome</span>

</a>

 <div class="org">empresa</div>

 <a class="email" href="mailto:emeil@qualqueremail.com">emeil@qualqueremail.com</a>

 <div class="adr">

  <div class="street-address">nome da rua e numero</div>

  <span class="locality">cidade</span>

  <span class="region">estado</span>

  <span class="postal-code">CEP</span>

  <span class="country-name">País</span>

</div>

 <div class="tel">(ddd)000 000</div>

<div><span class="category">alimentos</span></div><p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p>

</div>

Este site http://www.microform.at/  serve para descodificar os microformatos para que os usuários possam por exemplo adicionar o contato a sua agenda

A imagem abaixo mostra o layout do site  que ajuda o usuário a adicionar o contato de um determinado site a  sua agenda. No campo verde deve-se inserir o site onde está o contato.

Em Type deve-se selecionar o tipo de microformato utilizado no site, e em outpout pra que tipo de dado o usuário quer converter o código.  

Neste exemplo escolhi um site com hcard e pedi para que os dados de saída fossem HTML(microdata) que serve para a agenda do Windows. Ao clicar em submit um arquivo é gerado e é automaticamente baixado para o seu computador.

Ao abrir o arquivo gerado pela ferramenta microfor.at no Windows 7 a agenda do prorpio Windows já da ao usuário opções de adicioná-lo aos contatos.

Designer Responsivo

Designer responsivo elabora sites que forneçam uma ótima experiência de visualização, fácil leitura e navegação. Para diversos dispositivos. Na pratica é a técnica usada para criar sites que se adaptem a diversos dispositivos (PC, tablet, celular, etc...) .

Um site  responsivo se adapta ao ambiente de visualização usando grades proporcionais e fluídas  imagens flexíveis, e mídia queres   Css3.

Grade fluida basicamente é o conceito que requer que as dimensões dos elementos sejam definidos por unidades relativas como porcentagens.

Media queries permitem que a página use diferentes regras de estilo CSS com base nas características do dispositivo onde o site será exibido.

 Media Types

Eles definem pra que tipo de mídia um  código é destinado, porém não são mais tão utilizados devido a variedade de tipos de media existente hoje, são eles:

·  All: Para todos os dispositivos.

·  Braille: Para dispositivos táteis.

·  Embossed: Para dispositivos que imprimem em braile.

·  Handheld: Para dispositivos portáteis, geralmente com telas pequenas e banda limitada.

·  Print: Para impressão em papel.

·  Projection: Para apresentações como PPS.

·  Screen: Para monitores ou dispositivos com telas coloridas e resolução adequada.

·  Speech: Para sintetizadores de voz. As CSS 2 tem uma especificação de CSS chamada Aural, onde podemos formatar a voz dos sintetizadores.

·  Tty: Para dispositivos que possuem uma grade fixa para exibição de caracteres, tais como: Teletypes, Terminais e também dispositivos portáteis com display limitados.

·  Tv: Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitados.

O grande problema com essas definições é que, por exemplo, um Iphone  apesar de ser um dispositivo portátil não é um handheld.

Media Queries

A solução pra esses problemas foi a criação dos media queries,  eles definem condições especificas, que caso aprovadas vão ser renderizadas. Para tanto utilizam operadores lógicos,  or ,para usar diversas mídias com o mesmo código pode ser substituído por “,”  , only, mostra apenas em determinada mídia,  e not, negação, :

Exemplo:

<style  type=”text/css”>

@media all and (not color) {

Body {background-color:gray}

}

 </style>

No código acima foi definido  que pra dispositivos que não possuam cores o plano de fundo será cinza.

Media Features

Media fetures  servem para definir as especificações da exibição do código css. Principais características definidas em media features:

·  width largura.

·  height Altura.

·  device-width largura relativa.

·  device-height altura relativa.

·  orientation varia entre portrait(retrato) e landscape(paisagem).

·  aspect-ratio, razão de aspecto.

·  device-aspect-ratio, razão de aspecto do dispositivo.

·  color descreve o numero de bits por componente de cor de dispositivo de saida.

·  color-index , descreve o numero de entradas na tabela de pesquisa de cores do dispositivo.

·  monochrome, monocromático.

·  resolution resolução em dpi.

·  scan descreve o processo de digitalização de dispositivos de saída de TV aceitando os valores progressive ou interlace.

·  grid usado para consultar se o dispositivo de saída é grid ou bitmap se o dispositivo de saída é baseado em grid o valor será 1 caso contrário o valor será 0.

exemplo para três diferentes tipos de telas

<!DOCTYPE html>

 <html lang="pt-br">

<head>

<style type="text/css">

 body { padding: 15px;

 background:#0099FF;

 font-family:sans-serif }.

 .teste{ border: solid 1px #999; 

 padding: 5px 10px;

 margin: 40px; }

 @media screen and (max-width: 600px) {

 .um { background: white; }

 }

 @media screen and (min-width: 800px) {

 .dois { background: green; }

     }

 @media screen and (min-width: 600px) and (max-width: 800px) {

 .tres { background: red; }

 }

 </style>

 </head>

 <body>

 <h1> teste resolução diferente  </h1>

 <p>Mude o tamanho do seu navegador para ver as mudanças.</p>

  <div class="teste um">esta linha fica branca quando a resolução maxima é 600px</div>

 <div class="teste dois">essa linha fica verde quando a resolução minima é 800px</div>

 <div class="teste tres">Esta linha fica vermelha quando a resolução está ente  600px e 800px</div>

  </body>

</html>

Taquigrafia CSS

Taquigrafia CSS

O  uso de taquigrafia facilita a escrita de um CSS (Cascading Style Sheets) limpo,ou seja menos código, o que facilita a manutenção, e faz com que o carregamento da página fique mais rápido.

Background: essa  propriedade pode ser dividida em cinco conforme o codigo abaixo:

<html>

<head>

<style>

body{Background-color: #ff22ff;

Background-image: url(doc.jpg);

Background-repeat: no-repeat;

Background-position: top left;

Background-attachment: fixed;}

</style>

</head>

<body>

</body>

</html>

Utilizando a noção de taquigrafia é possível escrever isso em uma única linha sem alterar o resultado ex:

<html>

<head>

<style>

body{Background: #ff22ff url(doc.jpg) no-repeat top left fixed;}

</style>

</head>

<body>

</body>

</html>

 Border , pode ser definida quanto a espessura, estilo e cor, conforme  código abaixo :

Border: 1px Black solid;

Se o atributo cor for escrito em hexadecimal , o seu valor pode ser abreviado se os 6 valores hexadecimais forem iguais. EX: a cor branca  #FFFFFF,  pode ser abreviada para #FFF.

A propriedade fonte ( font ) assim como a background também pode ser escrita de maneira simplificada. Ex:

Escrita normal:

<html>

<head>

<style>

p{font-weight: bold;

font-variant:normal;

font-size: 30px;

font-family: serif;

font-style:italic;}

</style>

</head>

<body>

<p> Leny Silva</P>

</body>

</html>

Com o uso de taquigrafia:

<html>

<head>

<style>

p{font: italic bold normal 30px serif;}

</style>

</head>

<body>

<p> Leny Silva</P>

</body>

</html>

Margin e padding

 Essas propriedades dizem respeito a posicionamento da  página  e são definidas por top, right, bottom, left.

E pode ser escrita em uma linha seguindo essa ordem.

Margin: 2px, 3px, 5px, 1px;