From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- files/pt-br/web/html/microformats/index.html | 444 +++++++++++++++++++++++++++ 1 file changed, 444 insertions(+) create mode 100644 files/pt-br/web/html/microformats/index.html (limited to 'files/pt-br/web/html/microformats') diff --git a/files/pt-br/web/html/microformats/index.html b/files/pt-br/web/html/microformats/index.html new file mode 100644 index 0000000000..01e61069a7 --- /dev/null +++ b/files/pt-br/web/html/microformats/index.html @@ -0,0 +1,444 @@ +--- +title: Microformatos +slug: Web/HTML/microformatos +translation_of: Web/HTML/microformats +--- +
{{HTMLSidebar}}
+ +

Microformatos (ás vezes abreviado como μF) são convenções utilizadas para incorporar convenções semânticas em HTML e providenciar uma API a ser usada por mecanismos de pesquisa, agregadores e outras ferramentas. Esses padrões mínimos de HTML são usados para marcar entidades que variam de informações fundamentais a específicas de domínio, como pessoas, organizações, eventos e locais.

+ +

Os microformatos são suportados pelos principais mecanismos de pesquisa. Os dados são transportados na propriedade de classe que pode ser adicionada a qualquer elemento HTML. Além de legíveis por máquina, seu formato é projetado para ser facilmente lido por humanos.

+ +

Existem bibliotecas de análise para a maioria das linguagens para microformatos2.

+ +

Como os Microformatos Funcionam?

+ +

Um autor de uma página web pode adicionar microformatos no seu HTML. Por exemplo se ele quer se identificar ele podem utilizar um h-card como:

+ +
+
<a class="h-card" href="http://example.com">Joe Bloggs</a>
+ +

Quando um analisador encontra  esse dado, ele saberá que nessa página contém um "card" que descreve uma pessoa ou uma organização chamada Joe Blogger com uma URL de http://example.com/. O analisador disponibiliza esses dados por meio de APIs que podem ser usadas por diferentes aplicativos.

+ +

Como neste exemplo, alguns padrões de marcação requerem apenas um único nome de classe raiz de microformato, que os analisadores usam para encontrar algumas propriedades genéricas, como: name, url, photo.

+
+ +

Prefixos de Microformatos

+ +

Todos os microformatos consistem de uma raíz e uma coleção de propriedades. As propriedades são opcionais e potencilamente multivaloradas - aplicações que necessitam de um valor único devem utilizar a primeira instância de uma propriedade. Os dados hierárquicos são representados com microformatos aninhados, normalmente como valores de propriedade.

+ +

Todas os nomes de classes de microformatos utilizam prefixos. Os prefixos são  Os prefixos são independentes da sintaxe dos vocabulários, os quais são desenvolvidos separadamente.

+ + + +

Alguns exemplos de microformatos

+ +

h-card

+ +

O microformato h-card representa uma pessoa ou uma organização.

+ +

O valor de cada propriedade é definido no HTML utilizando a propriedade class, qualquer elemento pode receber.

+ +

Exemplo de h-card

+ +
+
<p class="h-card">
+  <img class="u-photo" src="http://example.org/photo.png" alt="" />
+  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
+  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>,
+  <span class="p-street-address">17 Austerstræti</span>
+  <span class="p-locality">Reykjavík</span>
+  <span class="p-country-name">Iceland</span>
+</p>
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-nameO nome completo/formatado da pessoa ou organização
u-emailendereço de e-mail
u-photouma foto da
u-urlpágina na web ou outra URL representando a pessoa ou a organização
u-uididentificador universal único, de preferência URL canônico
p-street-addressnúmero da rua + enderço
p-localitycidade ou vilarejo
p-country-namenome do país
+ +

Exemplo de h-card aninhado

+ +
+
<div class="h-card">
+  <a class="p-name u-url"
+   href="http://blog.lizardwrangler.com/"
+  >Mitchell Baker</a>
+  (<a class="p-org h-card"
+    href="http://mozilla.org/"
+   >Mozilla Foundation</a>)
+</div>
+
+ +

JSON analisado:

+ +
+
{
+  "items": [{
+  "type": ["h-card"],
+  "properties": {
+    "name": ["Mitchell Baker"],
+    "url": ["http://blog.lizardwrangler.com/"],
+    "org": [{
+    "value": "Mozilla Foundation",
+    "type": ["h-card"],
+    "properties": {
+      "name": ["Mozilla Foundation"],
+      "url": ["http://mozilla.org/"]
+    }
+    }]
+  }
+  }]
+}
+
+ +

Nota: o h-card aninhado implica nas propriedades 'name' e 'url', assim como qualquer outro h-card apenas com nome de classe raiz em um <a href>.

+ +

h-entry

+ +

O microformato h-entry representa um conteúdo em série ou um conteúdo com data marcada na web. h-entry é frequentemente usado com conteúdo destinado a ser distribuído, p.ex postagens em blog.

+ +

Exemplo de h-entry como uma postagem em blog:

+ +
+
<article class="h-entry">
+  <h1 class="p-name">Microformats are amazing</h1>
+  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
+   on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
+
+  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
+
+  <div class="e-content">
+  <p>Blah blah blah</p>
+  </div>
+</article>
+ +

Propriedades

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-namenome/título da entrada
p-authorquem escreveu a entrada, h-card opcionalmente incorporado
dt-publishedquando a entrada foi publicada
p-summarybreve resumo da entrada
e-contentconteúdo completo da entrada
+ +

Exemplo de h-entry analisado

+ +
<div class="h-entry">
+  <p><span class="p-author h-card">
+    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a>
+    <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span>
+     Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">a post on
+   <strong>developer.mozilla.org</strong> </a>:
+  </p>
+   <p class="p-name e-content">Hey thanks for making this microformats resource</p>
+   <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a>
+  published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published"
+   datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p>
+</div>
+ +
+
{
+  "items": [
+    {
+      "type": [ "h-entry" ],
+      "properties": {
+        "in-reply-to": [ "https://developer.mozilla.org/en-US/docs/Web/HTML/microformats" ],
+        "name": [ "Hey thanks for making this microformats resource" ],
+        "url": [ "https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource" ],
+        "published": [ "2019-05-31T14:19:09+0000" ],
+        "content": [
+          {
+            "html": "Hey thanks for making this microformats resource",
+            "value": "Hey thanks for making this microformats resource",
+            "lang": "en"
+          }
+        ],
+        "author": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Greg McVerry" ],
+              "photo": [ "https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg" ],
+              "url": [ "https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ]
+            },
+            "lang": "en",
+            "value": "Greg McVerry"
+          }
+        ]
+      },
+      "lang": "en"
+    }
+
+ +

h-feed

+ +

O h-feed é um fluxo de dados ou um feed de posts de h-entry, como postagens completas em uma página inicial ou em páginas de arquivo, sumários ou outras listagens de postagens

+ +

Exemplo h-feed

+ +
+
<div class="h-feed">
+  <h1 class="p-name">Microformats Blogs</h1>
+  <article class="h-entry">
+  <h2 class="p-name">Microformats are amazing</h2>
+  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
+     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>
+  </p>
+  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
+  <div class="e-content"> <p>Blah blah blah</p> </div>
+  </article>
+</div>
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + +
PropriedadesDescrição
p-namenome do feed
p-authorautor do feed, opcionalmente incorporado com um h-card
+ +

Filhos

+ + + + + + + + + + + + +
h-entry aninhado
objetos representando os itens do feed
+ +

h-event

+ +

O h-event é para evento na web. O h-event é frequentemente usado com listagens de eventos e páginas de eventos individuais.

+ +
+
<div class="h-event">
+  <h1 class="p-name">Microformats Meetup</h1>
+  <p>From
+  <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time>
+  to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time>
+  at <span class="p-location">Some bar in SF</span></p>
+  <p class="p-summary">Get together and discuss all things microformats-related.</p>
+</div>
+
+ +

Propriedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropriedadeDescrição
p-namenome do evento (ou título)
p-summarybreve sumário do evento
dt-startdata e hora de início do evento
dt-enddata e hora de termino do evento
p-locationlocal do evento, opcionalmente incorporado com um h-card
+ +

Exemplo de h-event analisado

+ +
+
<div class="h-event">
+  <h2 class="p-name">IndieWeb Summit</h2>
+  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am  (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br>
+  <div class="p-location h-card">
+    <div>
+    <span class="p-name">Mozilla</span>
+     </div>
+     <div>
+      <span class="p-street-address">1120 NW Couch St</span>,
+      <span class="p-locality">Portland</span>,
+      <span class="p-region">Oregon</span>,
+      <span class="p-country">US</span>
+     </div>
+       <data class="p-latitude" value="45.52345"></data>
+      <data class="p-longitude" value="-122.682677"></data>
+  </div>
+    <div class="e-content">Come join us
+     </div>
+    <div>
+     <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time>
+    </div>
+</div>
+ +
+
{
+  "items": [
+    {
+      "type": [ "h-event" ],
+      "properties": {
+        "name": [ "IndieWeb Summit" ],
+        "url": [ "https://aaronparecki.com/2019/06/29/1/" ],
+        "author": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Aaron Parecki" ],
+              "url": [ "https://aaronparecki.com"]
+            },
+            "lang": "en",
+            "value": "Aaron Parecki"
+          }
+        ],
+        "start": [ "2019-06-29T09:00:00-07:00" ],
+        "end": [ "2019-06-30T18:00:00-07:00" ],
+        "published": [ "2019-05-25T18:00:00-07:00" ],
+        "content": [
+          {
+            "html": "Come join us",
+            "value": "Come join us",
+            "lang": "en"
+          }
+        ],
+        "location": [
+          {
+            "type": [ "h-card" ],
+            "properties": {
+              "name": [ "Mozilla" ],
+              p-street-address: [ "1120 NW Couch St" ]
+              "locality": [ "Portland" ],
+              "region": [ "Oregon" ],
+              "country": [ "US" ],
+              "latitude": [ "45.52345" ],
+              "longitude": [ "-122.682677" ]
+            },
+            "lang": "en",
+            "value": "Mozilla"
+          }
+        ]
+      },
+      "lang": "en"
+    }
+  ],
+
+
+ +

See also

+ + -- cgit v1.2.3-54-g00ecf