Microformatos

Olá pessoal, fim de ano chegando e esse será nosso último post de 2013. Bom, pra fechar o ano com chave de ouro, aprenderemos o conceito de Microformatos, bora lá?!

O que é?

Já falei aqui anteriormente que a semântica presente em nossos sites deve ser nosso objetivo primordial, já que é o que nos ajuda a rankear em sites de busca, além de aumentar o significado de cada elemento HTML, provendo uma comunicação mais próxima da humana do que a de códigos. E todo esse conceito de semântica é aplicado nos microformatos, já explico o porquê.

Microformatos é uma série de especificações que tem como foco principal relacionar a informação ou os dados com os humanos em primeiro lugar e em segundo com as máquinas. É uma nova maneira de se pensar sobre dados. Esta série de especificações constitui um “dicionário” de conteúdo semântico para (X)HTML que tem como base os web standards e é escrito para descrever a informação de forma mais simples possível.

Como podem ver na citação acima, o objetivo de se usar microformatos é o de acrescentar informações aos nossos dados HTML, de forma semântica e padronizada, já que essas especificações são livres para qualquer webdeveloper implementar em seus sites. Além disso, como dito antes, nos ajuda a aumentar as chances de termos nosso conteúdo sendo buscado constantemente por motores de busca, já que eles procuram os conteúdos mais relevantes.

Listo abaixo as características principais de Microformatos:

  • - Criado para resolver problemas específicos;
  • - Ser o mais simples possível;
  • - Criado primeiro para humanos e máquinas em segundo lugar;
  • - Reutilizar blocos de código quando necessário utilizados dentro dos padrões web;
  • - Aplicação em blocos e trechos específicos (modularidade)

Usos

O conceito já foi explicado, mas onde e como colocar esses microformatos? Se eu fosse listar todas as aplicações aqui, teríamos de ficar lendo esse post por horas, já que são inúmeras as possibilidades. Portanto, focarei nas mais usadas:

hCard: Microformato utilizado para publicar detalhes de contato de pessoas e organizações, etc. Exemplo:

Código:

Resultado:

hCalendar: Microformato utilizado para publicar informações de eventos. Exemplo:

Código:

Resultado:

Como podem ver, apenas utilizamos classes específicas para cada elemento, porém esses nomes não foram criados de forma aleatória, e sim de acordo com as especificações. Querem informações mais detalhadas? Deixo abaixo alguns links que poderão ajudar-lhes. Por hoje é só, agradeço mais uma vez por ter lido até aqui e desejo boas festas de fim de ano! Até 2014 :)

Links:

Comentários

Postar um comentário

Postagens mais visitadas deste blog

Seletores CSS

Imagem
Após um bom tempo sem postar, volto com um assunto já falado anteriormente: os seletores CSS . Já foi explicado nesse post o que são e para que servem, porém no post de hoje meu objetivo é apresentar formas avançadas, e de certo modo "interessantes", de utilizá-los. Já sabemos que podemos ter uma tag , um ID e uma classe como seletores, agora aprenderemos os tipos de seletores que podemos ter ao utilizá-los em conjunto, que são: Seletor Universal Seletor de Tipo de Elemento Seletor Contextual Seletor de Elementos-filhos Seletor Adjacente Seletor de Classe Seletor de ID Agrupamento de Seletores Seletor de Atributo Pseudo-classes Pseudo-elementos Seletor Universal Este tipo de seletor é de compreensão básica e geralmente utilizado para o que chamamos de Reset de CSS (zerar os estilos pré-definidos pelos browsers), pois ele aplica a(s) mesma(s) regra(s) à todos os elementos HTML, isso mesmo, TODOS. Para criarmos uma regr...
Leia mais

Design Responsivo

Imagem
Olá galerê! Aproveitando que ontem (05/11) foi dia do Designer (Parabéns para mim e para quem trabalha nessa área!!!) e também aproveitando a deixa no post anterior sobre Acessibilidade, hoje falarei sobre Design Responsivo, destacando sua necessidade, características e um breve "tutorial" para tornar um site de design fixo (feito para desktops) em responsivo. So, let's begin! O que é? Há pouco tempo atrás, quando o uso da Internet em dispositivos mobile era pouco ou quase inexistente, era muito comum o desenvolvimento de websites pensando apenas em desktops, com medidas fixas baseadas nas resoluções comuns entre os monitores (800x600 ou 1024x768), porém quando ocorreu o BOOM dos smartphones e consequentemente o aumento de acesso à web proveniente destes, e também o surgimento de uma variedade de resoluções de tela, uma nova forma de layout teve de ser criada. Esta forma é o que chamamos de design responsivo , que não deve ser confundido com design fluído , já explico...
Leia mais

Modelo OSI

Imagem
Com objetivo de facilitar o processo de interconectividade entre máquinas de diferentes fabricantes, a ISO (International Organization for Standardization) lançou em 1984 o que nós conhecemos como Modelo OSI (Open Systems Interconnection) . O qual permite a comunicação entre máquinas heterogêneas (fabricantes diferentes) e define diretivas genéricas para a construção de redes de computadores (seja de curta, média ou longa distância) independente da tecnologia utilizada. Esse modelo é dividido em 7 camadas, que são: Física : também conhecida como PHY, é responsável por fornecer a mecânica elétrica, meios funcionais para estabelecer as conexões entre as entidades de enlace. Siglas e protocolos importantes: DSL, IEEE 802.11, IEEE 802.15, IEEE 802.16, IEEE 802.3, ISDN, PDH, RS-232, Sonet/SDH, USB. Enlace : fornece a comunicação para o TCP e UDP, o método inclui o estabelecimeno manutenção e liberação da comunicação. Também é responsável por detectar erros que ocorrem na camda físic...
Leia mais