diff options
Diffstat (limited to 'files/pt-br/web/html/microformatos')
| -rw-r--r-- | files/pt-br/web/html/microformatos/index.html | 444 |
1 files changed, 444 insertions, 0 deletions
diff --git a/files/pt-br/web/html/microformatos/index.html b/files/pt-br/web/html/microformatos/index.html new file mode 100644 index 0000000000..01e61069a7 --- /dev/null +++ b/files/pt-br/web/html/microformatos/index.html @@ -0,0 +1,444 @@ +--- +title: Microformatos +slug: Web/HTML/microformatos +translation_of: Web/HTML/microformats +--- +<div>{{HTMLSidebar}}</div> + +<p><a href="http://microformats.org/"><dfn>Microformatos</dfn></a> (ás vezes abreviado como <strong>μF</strong>) 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.</p> + +<p>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.</p> + +<p>Existem <a href="http://microformats.org/wiki/microformats2#Parsers">bibliotecas de análise para a maioria das linguagens</a> para microformatos2.</p> + +<h3 id="Como_os_Microformatos_Funcionam">Como os Microformatos Funcionam?</h3> + +<p>Um autor de uma página web pode adicionar microformatos no seu HTML. Por exemplo se ele quer se identificar ele podem utilizar um <a href="http://microformats.org/wiki/h-card">h-card</a> como:</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><a class="h-card" href="http://example.com">Joe Bloggs</a></pre> + +<p>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 <code>Joe Blogger</code> com uma URL de <code>http://example.com/</code>. O analisador disponibiliza esses dados por meio de APIs que podem ser usadas por diferentes aplicativos.</p> + +<p><span class="tlid-translation translation" lang="pt"><span title="">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:</span></span> <code>name</code>, <code>url</code>, <code>photo</code>.</p> +</div> + +<h2 id="Prefixos_de_Microformatos">Prefixos de Microformatos</h2> + +<p>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<span class="tlid-translation translation" lang="pt"><span title="">. Os dados hierárquicos são representados com microformatos aninhados, normalmente como valores de propriedade.</span></span></p> + +<p>Todas os nomes de classes de microformatos utilizam prefixos. Os prefixos são <span class="tlid-translation translation" lang="pt"><span title="">Os prefixos são <strong>independentes da sintaxe dos vocabulários</strong>, os quais são desenvolvidos separadamente.</span></span></p> + +<ul> + <li><strong>"h-*" para nome de classes raíz</strong>, p.ex "h-card", "h-entry", "h-feed", e várias outras. Essas classes de alto nível normalmente indicam um tipo e o <span class="tlid-translation translation" lang="pt"><span title="">vocabulário esperado de propriedades correspondente.</span> <span title="">Por exemplo:</span></span> + + <ul> + <li><a href="http://microformats.org/wiki/h-card">h-card</a> descreve uma pessoa ou uma organização.</li> + <li><a href="http://microformats.org/wiki/h-entry">h-entry</a> descreve conteúdo on-line em série ou com data marcada como uma postagem de blog.</li> + <li><a href="http://microformats.org/wiki/h-feed">h-feed</a> descreve um fluxo de dados ou um feed de postagens.</li> + <li>Você pode encontrar vários outros You can find many more <a href="http://microformats.org/wiki/microformats2#v2_vocabularies">vocabulários na wiki de microformatos2.</a></li> + </ul> + </li> + <li><strong>"p-*" para propriedades de texto simples,</strong> p.ex "p-name", "p-summary" + <ul> + <li><span class="tlid-translation translation" lang="pt"><span title="">Análise de texto simples, texto de elemento em geral.</span> <span title="">Em certos elementos HTML, use atributos especiais primeiro, por exemplo</span> <span title="">img / alt, abbr / título.</span></span></li> + </ul> + </li> + <li><strong>"u-*" para propriedades URL</strong>, p.ex "u-url", "u-photo", "u-logo" + <ul> + <li>Análise especial necessária: prefer a/href, img/src, object/data etc. atributos sobre o conteúdo do elemento.</li> + </ul> + </li> + <li><strong>"dt-*" para propriedades de data e hora</strong>, p.ex "dt-start", "dt-end", "dt-bday" + <ul> + <li>Análise especial necessária: <a href="http://microformats.org/wiki/value-class-pattern" title="value-class-pattern">value-class-pattern</a> and separate date time value parsing for readability.</li> + </ul> + </li> + <li><strong>"e-*" para propriedades da árvore de elementos </strong><span class="tlid-translation translation" lang="pt"><span title="">em que toda a hierarquia de elementos contidos é o valor,</span></span> p.ex "e-content". O prefixo "e-" também pode ser lembrado mnemonicamente como "árvore de elementos", "marcação incorporada", ou "marcação encapsulada".</li> +</ul> + +<h2 id="Alguns_exemplos_de_microformatos">Alguns exemplos de microformatos</h2> + +<h3 id="h-card">h-card</h3> + +<p>O microformato <a href="http://microformats.org/wiki/h-card">h-card</a> representa uma pessoa ou uma organização.</p> + +<p>O valor de cada propriedade é definido no HTML utilizando a propriedade class, qualquer elemento pode receber.</p> + +<h4 id="Exemplo_de_h-card">Exemplo de h-card</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><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></pre> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriedade</th> + <th>Descrição</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>O nome completo/formatado da pessoa ou organização</td> + </tr> + <tr> + <td><strong><code>u-email</code></strong></td> + <td>endereço de e-mail</td> + </tr> + <tr> + <td><strong><code>u-photo</code></strong></td> + <td>uma foto da</td> + </tr> + <tr> + <td><strong><code>u-url</code></strong></td> + <td>página na web ou outra URL representando a pessoa ou a organização</td> + </tr> + <tr> + <td><strong><code>u-uid</code></strong></td> + <td>identificador universal único, de preferência URL canônico</td> + </tr> + <tr> + <td><strong><code>p-street-address</code></strong></td> + <td>número da rua + enderço</td> + </tr> + <tr> + <td><strong><code>p-locality</code></strong></td> + <td>cidade ou vilarejo</td> + </tr> + <tr> + <td><strong><code>p-country-name</code></strong></td> + <td>nome do país</td> + </tr> + </tbody> +</table> + +<h4 id="Exemplo_de_h-card_aninhado">Exemplo de h-card aninhado</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><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></pre> +</div> + +<p>JSON analisado:</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-javascript">{ + "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/"] + } + }] + } + }] +}</pre> +</div> + +<p>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 <code><a href></code>.</p> + +<h3 id="h-entry">h-entry</h3> + +<p>O microformato <a href="http://microformats.org/wiki/h-entry">h-entry</a> representa um conteúdo em série ou um conteúdo com data marcada na web. h-entry <span class="tlid-translation translation" lang="pt"><span title="">é frequentemente usado com conteúdo destinado a ser distribuído, p.ex</span> <span title="">postagens em blog.</span></span></p> + +<p>Exemplo de h-entry como uma postagem em blog:</p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><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></pre> + +<h4 id="Propriedades">Propriedades</h4> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriedade</th> + <th>Descrição</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>nome/título da entrada</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>quem escreveu a entrada, h-card opcionalmente incorporado</td> + </tr> + <tr> + <td><strong><code>dt-published</code></strong></td> + <td>quando a entrada foi publicada</td> + </tr> + <tr> + <td><strong><code>p-summary</code></strong></td> + <td>breve resumo da entrada</td> + </tr> + <tr> + <td><strong><code>e-content</code></strong></td> + <td>conteúdo completo da entrada</td> + </tr> + </tbody> +</table> + +<h4 id="Exemplo_de_h-entry_analisado">Exemplo de h-entry analisado</h4> + +<pre id="line1"><div class="<a class="attribute-value">h-entry</a>"> + <p><span class="p-author h-card"> + <a href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/profile/jgmac1106</a>" ><img class="<a class="attribute-value">u-photo</a>" src="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg</a>"/></a> + <a class="<a class="attribute-value">p-name u-url</a>" href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/profile/jgmac1106</a>">Greg McVerry</a></span> + Replied to <a class="<a class="attribute-value">u-in-reply-to</a>" href="<a class="attribute-value">https://developer.mozilla.org/en-US/docs/Web/HTML/microformats</a>">a post on + <strong>developer.mozilla.org</strong> </a>: + </p> + <p class="<a class="attribute-value">p-name e-content</a>">Hey thanks for making this microformats resource</p> + <p> <a href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/profile/jgmac1106</a>">Greg McVerry</a> + published this <a class="<a class="attribute-value">u-url url</a>" href="<a class="attribute-value">https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource</a>"><time class="<a class="attribute-value">dt-published</a>" + datetime="<a class="attribute-value">2019-05-31T14:19:09+0000</a>">31 May 2019</time></a></p> +</div></pre> + +<div class="panelContent"> +<pre class="data">{ + "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" + }</pre> +</div> + +<h3 id="h-feed">h-feed</h3> + +<p>O <a href="http://microformats.org/wiki/h-feed">h-feed</a> é um fluxo de dados ou um feed de posts de <a href="http://microformats.org/wiki/h-entry" title="h-entry">h-entry</a>, <span class="tlid-translation translation" lang="pt"><span title="">como postagens completas em uma página inicial ou em páginas de arquivo, sumários ou outras listagens de postagens</span></span></p> + +<h4 id="Exemplo_h-feed">Exemplo h-feed</h4> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><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></pre> +</div> + +<h4 id="Propriedades_2">Propriedades</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriedades</th> + <th>Descrição</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>nome do feed</td> + </tr> + <tr> + <td><strong><code>p-author</code></strong></td> + <td>autor do feed, opcionalmente incorporado com um h-card</td> + </tr> + </tbody> +</table> + +<h4 id="Filhos">Filhos</h4> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>h-entry aninhado</strong></td> + <td></td> + </tr> + <tr> + <td>objetos representando os itens do feed</td> + <td></td> + </tr> + </tbody> +</table> + +<h3 id="h-event">h-event</h3> + +<p>O <code>h-event</code> é para evento na web. <span class="tlid-translation translation" lang="pt"><span title="">O h-event é frequentemente usado com listagens de eventos e páginas de eventos individuais.</span></span></p> + +<div dir="ltr" style="text-align: left;"> +<pre class="source-html4strict"><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></pre> +</div> + +<h4 id="Propriedades_3">Propriedades</h4> + +<table class="standard-table"> + <tbody> + <tr> + <th>Propriedade</th> + <th>Descrição</th> + </tr> + <tr> + <td><strong><code>p-name</code></strong></td> + <td>nome do evento (ou título)</td> + </tr> + <tr> + <td><strong><code>p-summary</code></strong></td> + <td>breve sumário do evento</td> + </tr> + <tr> + <td><strong><code>dt-start</code></strong></td> + <td>data e hora de início do evento</td> + </tr> + <tr> + <td><strong><code>dt-end</code></strong></td> + <td>data e hora de termino do evento</td> + </tr> + <tr> + <td><strong><code>p-location</code></strong></td> + <td>local do evento, opcionalmente incorporado com um h-card</td> + </tr> + </tbody> +</table> + +<h4 id="Exemplo_de_h-event_analisado">Exemplo de h-event analisado</h4> + +<div dir="ltr" style="text-align: left;"> +<pre><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></pre> + +<div class="panelContent"> +<pre class="data">{ + "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" + } + ],</pre> +</div> +</div> + +<p>See also</p> + +<ul> + <li>{{Interwiki("wikipedia", "Microformat")}} na Wikipedia</li> + <li><a href="http://microformats.org/">Site oficial dos Microformatos</a></li> + <li><a href="http://microformats.org/wiki/search_engines">Motores de busca suportados</a> no site oficial do Microformats</li> + <li><a href="https://indiewebcamp.com/microformats">Microformatos no IndieWebCamp</a></li> +</ul> |