-
Notifications
You must be signed in to change notification settings - Fork 85
/
Copy pathextensibility.html
958 lines (712 loc) · 91.9 KB
/
extensibility.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
<!DOCTYPE html>
<html lang=pt-br>
<meta charset=utf-8>
<title>Microdata - Dive Into HTML5</title>
<!--[if lt IE 9]><script src=j/html5.js></script><![endif]-->
<link rel=alternate type=application/atom+xml href=https://github.com/zenorocha/diveintohtml5/commits/gh-pages.atom>
<link rel=alternate href=http://diveintohtml5.info/extensibility.html hreflang=en>
<link rel=stylesheet href=screen.css>
<style>
body{counter-reset:h1 10}
.st td{vertical-align:top;padding-left:5px}
.st ul{list-style:none;margin:0;padding:0}
pre{padding-left:0}
.follow{text-align:center;font-size:small}
.fakeresults,.fakeresults p{font:small/1.2 "Arial Unicode MS",Arial,FreeSerif,"DejaVu Sans",sans-serif}
.fakeresults a{color:#00c !important;text-decoration:underline !important;border-bottom:0 !important}
.fakeresults p{margin:0;padding:0}
.fakelink{color:#00c;cursor:pointer;text-decoration:underline}
.fakeinfo{color:grey}
.fakeurl{color:green}
.fakestar{color:orange;-webkit-text-stroke:0.5px grey}
table.faketable{border-collapse:collapse}
.padright{padding-right:18px}
</style>
<link rel=stylesheet media='only screen and (max-device-width: 480px)' href=mobile.css>
<link rel=prefetch href=index.html>
<a href="https://github.com/zenorocha/diveintohtml5"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<p>Você está aqui: <a href=index.html>Home</a> <span class=u>‣</span> <a href=table-of-contents.html#extensibility>Dive Into <abbr>HTML5</abbr></a> <span class=u>‣</span>
<h1><br>“Distribuído”,<br>“Extensível,”<br>e Outras Palavras Bonitas</h1>
<p id=toc>
<p class=a>❧
<h2 id=divingin>Mergulhando</h2>
<p class=f><img src=i/aoc-e.png alt=E width=107 height=105>xistem <a href=http://simon.html5.org/html5-elements>mais de 100 elementos</a> na <abbr>HTML5</abbr>. Alguns são <a href=semantics.html>puramente semânticos</a>, outros são <a href=canvas.html>apenas recipientes para <abbr>APIs</abbr> de script</a>. Ao longo <a href=past.html>da história da <abbr>HTML</abbr></a>, conhecedores dos padrões vêm discutindo sobre que elementos devem ser incluídos na linguagem. O elemento <code><figure></code> deveria ser incluso na <abbr>HTML</abbr>? O elemento <code><person></code>? Que tal um elemento <code><rant></code>? Decisões são tomadas, especificações são escritas, atores atuam, implementadores implementam, e a web dá um grande passo à frente.
<p>Claro, <abbr>HTML</abbr> não pode agradar a todos. Nenhum padrão pode. Algumas ideias não atendem aos requisitos. Por exemplo, não existe o elemento <code><person></code> na <abbr>HTML5</abbr> (Não há também o elemento <code><rant></code>, droga!). Nada impede de você usar o elemento <code><person></code> numa página web, porém <a href=http://html5.validator.nu/>não vai validar</a>, <a href=semantics.html#unknown-elements>não vai funcionar consistentemente nos navegadores</a>, e poderá conflitar com especificações futuras da <abbr>HTML</abbr>, se o elemento for adicionado mais à frente.
<p>Certo, então se fazer seu próprio elemento não é a resposta, o que faz um escritor semanticamente correto? Houveram tentativas de estender as versões anteriores da <abbr>HTML</abbr>. O método mais popular são os <a href=http://microformats.org/>microformats</a>, que usam os atributos <code>class</code> e <code>rel</code> na <abbr>HTML</abbr>. Outra opção é <a href=http://www.w3.org/TR/rdfa-syntax/>RDFa</a>, que foi originamente projetado para ser usado na <a href=past.html#postscript><abbr>XHTML</abbr></a> mas <a href=http://www.w3.org/TR/rdfa-in-html/>também foi portado para <abbr>HTML</abbr></a>.
<p>Microformats e <abbr>RDFa</abbr> cada um tem seus pontos fortes e fracos. Eles usam abordagens complamente diferentes em direção ao mesmo objetivo: extender as páginas web com semântica adicional que não é parte do núcleo da linguagem <abbr>HTML</abbr>. Eu não pretendo transformar este capítulo em um formato “flamewar”. (Isso definitivamente precisaria de um elemento <code><rant></code>!) Em vez disso, quero focar em uma terceira opção desenvolvida usando as lições aprendidas a partir de microformats e RDFa, e projetada para ser íntegra na própria <abbr>HTML5</abbr>: microdata.
<p class=a>❧
<h2 id=what-is-microdata>O que é Microdata?</h2>
<p>Cada palavra na sentença seguinte é importante, então preste atenção.
<div class=pf>
<h4>Professor de Marcação Diz</h4>
<div class=inner>
<blockquote>
<p>Microdata escreve o <abbr>DOM</abbr> com escopo dos pares de nome/valor a partir de vocabulários personalizados.
</blockquote>
</div>
</div>
<p>Sim, mas o que isso significa? Vamos começar do fim e vamos retrocedendo. Microdados giram em torno de vocabulários personalizados. Pense no “conjunto de todos os elementos da <abbr>HTML5</abbr>” como um vocabulário. Este vocabulário inclui elementos para representar <a href=semantics.html#new-elements>uma seção ou um artigo</a>, mas isto não inclui elementos para representar uma pessoa ou um evento. Se você deseja representar uma pessoa na página web, você vai precisar definir seu próprio vocabulário. Microdata deixa você fazer isso. Qualquer um pode definir um vocabulário microdata e começar a incorporar propriedades personalizadas em suas próprias páginas web.
<p>A próxima coisa a fazer para conhecer o microdata é que ele funciona com pares de nome/valor. Todo vocabulário microdata define um conjunto de propriedades nomeadas. Por exemplo, um vocabulário Pessoa poderia definir propriedades como <code>nome</code> e <code>foto</code>. Para incluir um microdata específico na sua página web, você pode fornecer o nome da propriedade em um lugar específico. Dependendo de onde você declara o nome da propriedade, microdata tem regras sobre como extrair o valor da propriedade. (Mais sobre isto na próxima seção)
<p>Junto com propriedades nomeadas, microdados dependem muito do conceito de “escopo.” A maneira mais simples de pensar no escopo do microdata é pensar na relação pai-filho natural dos elementos no <abbr>DOM</abbr>. O elemento <a href=semantics.html#html-element><code><html></code></a> geralmente contém dois filhos, <a href=semantics.html#head-element><code><head></code></a> e <code><body></code>. O elemento <code><body></code> geralmente contém vários filhos, cada um deles pode ter seus próprios elementos-filho. Por exemplo, sua página pode incluir um elemento <code><h1></code> dentro de um elemento <code><hgroup></code> dentro de um elemento <a href=semantics.html#header-element><code><header></code></a> que está dentro de um elemento <code><body></code>. Uma tabela de informações pode conter <code><td></code> dentro de <code><tr></code> dentro de um <code><table></code> (Dentro do <code><body></code>). Microdata reutiliza a estrutura hierarquica do próprio <abbr>DOM</abbr> para fornecer uma forma de dizer “todas as propriedades dentro <em>deste</em> elemento são tomadas <em>deste</em> vocabulário.” Isso permite que você use mais de um vocabulário microdata na mesma página. Você pode até aninhar vocabulários microdata dentro de outros vocabulários, tudo pelo reuso da estrutura natural do <abbr>DOM</abbr>. (Irei mostrar vários exemplos de vocabulários aninhados ao longo deste capítulo)
<p>Agora, já toquei no assunto <abbr>DOM</abbr>, mas deixe me dissertar sobre isso. Microdata se trata de aplicar semântica adicional para <em>informações que já são visíveis na sua página web</em>. Microdata não foi projetada para ser um formato de dados independente. Ele é um complemento da <abbr>HTML</abbr>. Como você verá na próxima seção, microdata funciona melhor quando você já está usando a <abbr>HTML</abbr> corretamente, porém o vocabulário da <abbr>HTML</abbr> não é expressivo o bastante. Microdata é excelente para aprimorar a semântica da informação que já está no <abbr>DOM</abbr>. Se a informação que você está tentando tornar semântica não está no <abbr>DOM</abbr>, você deveria voltar atrás e reavaliar se microdata é a solução correta.
<p>Essa sentença faz mais sentido agora? “Microdata escreve o <abbr>DOM</abbr> com escopo dos pares de nome/valor a partir de vocabulários personalizados.” Espero que sim. Vamos ver isto na prática.
<p class=a>❧
<h2 id=data-model>Modelo de Dados do Microdata</h2>
<p>Definir seu próprio vocabulário microdata é fácil. Primeiro, você precisa de um namespace, que é apenas uma <abbr>URL</abbr>. O namespace <abbr>URL</abbr> pode realmente apontar para uma página web funcionando, apesar de não ser estritamente necessário. Vamos dizer que eu quero criar um vocabulário microdata que descreve uma pessoa. Se tenho o domínio <code>data-vocabulary.org</code>, irei usar a <abbr>URL</abbr> <code>http://data-vocabulary.org/Person</code> como o namespace para meu vocabulário microdata. Essa é uma maneira fácil de criar um identificador global exclusivo: escolha uma <abbr>URL</abbr> em um domínio que você tem controle.
<p>Nesse vocabulário, eu preciso definir algumas propriedades nomeadas. Vamos começar com três propriedades básicas:
<ul>
<li><code>name</code> (seu nome completo)
<li><code>photo</code> (um link para uma foto sua)
<li><code>url</code> (um link para um site associado a você, como um blog ou um perfil do Google)
</ul>
<p>Algumas dessas propriedades são <abbr>URLs</abbr>, outras são texto plano. Cada uma delas se presta a forma natural de marcação, mesmo antes de você começar a pensar em microdata ou vocabulários ou outros enfeites. Imagine que você tem um perfil ou uma página “sobre”. Seu nome provalvelmente é marcado como um título, como um elemento <code><h1></code>. Sua foto provavelmente é um elemento <code><img></code>, já que você quer que as pessoas vejam. E quaisquer <abbr>URL</abbr>s associadas ao seu perfil provavelmente já estão marcadas como hyperlinks, pois você precisa que as pessoas sejam aptas a clicar neles. Para fins de discussão, vamos dizer que todo seu perfil também é englobado em um elemento <code><section></code> para separá-lo do resto do conteúdo da página. Assim:
<p class="legend top" style="margin-left:6em"><span class=arrow>↶</span> Minhas informações
<pre><code><section>
<h1>Mark Pilgrim</h1>
<p><img src="http://www.example.com/photo.jpg" alt="[eu sorrindo]"></p>
<p><a href="http://diveintomark.org/">blog</a></p>
</section></code></pre>
<p>O modelo microdata são pares de nome/valor. A propriedade microdata name (como <code>name</code> ou <code>photo</code> ou <code>url</code> neste exemplo) é sempre declarado no elemento <abbr>HTML</abbr>. A propriedade value correspondente é então retirada do elemento <abbr>DOM</abbr>. Para muitos dos elementos <abbr>HTML</abbr>, a propriedade value é simplesmente o conteúdo textual do elemento. Porém, há uma boa quantidade de exceções.
<table id=property-values class=st>
<caption>De Onde Vêm as Propriedades Value?</caption>
<tr class=ho><th>Elemento<th>Valor
<tr class=zebra><td><code><meta></code><td>Atributo <code>content</code>
<tr><td><ul><li><code><audio></code><li><code><embed></code><li><code><iframe></code><li><code><img></code><li><code><source></code><li><code><video></code></ul><td>Atributo <code>src</code>
<tr class=zebra><td><ul><li><code><a></code><li><code><area></code><li><code><link></code></ul><td>Atributo <code>href</code>
<tr><td><code><object></code><td>Atributo <code>data</code>
<tr class=zebra><td><code><time></code><td>Atributo <code>datetime</code>
<tr><td>Demais elementos<td>Conteúdo textual
</table>
<p>“Adicionar microdata” na sua página é uma questão de adicionar alguns atributos nos elementos <abbr>HTML</abbr> que você já tem. A primeira coisa que você sempre faz é declarar que vocabulário microdata você está usando, adicionando um atributo <code>itemtype</code>. A segunda coisa que você sempre faz é declarar o escopo do vocabulário, usando um atributo <code>itemscope</code>. Neste exemplo, toda a informação que queremos tornar semântica é um elemento <code><section></code>, então vamos declarar os atributos <code>itemtype</code> e <code>itemscope</code> no elemento <code><section></code>.
<pre><code> <section <mark>itemscope</mark> <mark>itemtype="http://data-vocabulary.org/Person"</mark>></code></pre>
<p>Seu nome é o primeiro pedaço de informação dentro do elemento <code><section></code>. Ele está englobado em um elemento <code><h1></code>. O elemento <code><h1></code> não tem nenhum tratamento especial no <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, por isso se enquadra na regra “demais elementos” onde a propriedade microdata value é simplesmente conteúdo textual de um elemento. (Isso funcionaria igualmente bem se o seu nome for envolvido em um elemento <code><p></code>, <code><div></code>, ou <code><span></code>.)
<pre><code> <h1 <mark>itemprop="name"</mark>>Mark Pilgrim</h1></code></pre>
<p>Traduzindo, isto quez dizer “aqui está a propriedade <code>name</code> do vocabulário <code>http://data-vocabulary.org/Person</code>, e o valor da propriedade é <code>Mark Pilgrim</code>.”
<p id=person-photo>Em seguida: a propriedade <code>photo</code>. Isto deveria ser uma <abbr>URL</abbr>. De acordo com o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, o “value” de um elemento <code><img></code> é seu atributo <code>src</code>. Ei! Olhe, a <abbr>URL</abbr> da foto do seu perfil já esta em um atributo <code><img src></code>. Tudo que você precisa fazer é declarar que o elemento <code><img></code> é a propriedade <code>photo</code>.
<pre><code> <p><img <mark>itemprop="photo"</mark>
src="http://www.example.com/photo.jpg"
alt="[eu sorrindo]"></p></code></pre>
<p>Traduzindo, isto quer dizer “aqui está a propriedade <code>photo</code> do vocabulário <code>http://data-vocabulary.org/Person</code>, e o valor da propriedade é <code>http://www.example.com/photo.jpg</code>.”
<p>Finalmente, a propriedade <code>url</code> também é uma <abbr>URL</abbr>. De acordo com o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, o “value” de um elemento <code><a></code> é seu atributo <code>href</code>. E mais uma vez, isto funciona perfeitamente com a sua marcação existente. Tudo que você precisa fazer é dizer que seu elemento <code><a></code> existente é a propriedade <code>url</code>:
<pre><code> <a <mark>itemprop="url"</mark> href="http://diveintomark.org/">dive into mark</a></code></pre>
<p>Traduzindo, isto quer dizer “aqui está a propriedade <code>url</code> do vocabulário <code>http://data-vocabulary.org/Person</code>, e o valor da propriedade é <code>http://diveintomark.org/</code>.
<p>Claro, se sua marcação parece um pouco diferente, não tem problema. Você pode adicionar propriedades e valores microdata em qualquer marcação <abbr>HTML</abbr>, até mesmo "deformado do século 20", "tabelas para layout", "meu Deus por que eu concordei em manter esta" marcação.
<p class="legend top" style="margin-left:6em"><span class=arrow>↶</span> Pelo amor de Deus, não faça isso
<pre><code><TABLE>
<TR><TD>Nome<TD>Mark Pilgrim
<TR><TD>Link<TD>
<A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
</TABLE></code></pre>
<p>Para marcar a propriedade <code>name</code>, apenas adicione um atributo <code>itemprop</code> na célula da tabela que contém o nome. Células de tabela não têm regras especiais no valor da propriedade microdata table, então elas pegam o valor padrão, “a propriedade microdata é o conteúdo textual.”
<pre><code> <TR><TD>Nome<TD <mark>itemprop="name"</mark>>Mark Pilgrim</code></pre>
<p>Adicionar a propriedade <code>url</code> parece complicado. Essa marcação não usa o elemento <code><a></code> corretamente. Em vez de colocar o destino do link no atributo <code>href</code>, não tem nada de útil no atributo <code>href</code> e usa Javascript no atributo <code>onclick</code> para chamar a função (não visível) que extrai a <abbr>URL</abbr> e navega até ela. Para extra “caralho, pare de fazer isso por favor” pontos de bônus, vamos supor que a função abre também o link numa minúscula janela popup sem barra de rolagem. Não foi a diversão da internet do século passado?
<p>De qualquer forma, você ainda pode converter isso em propriedade microdata, você precisa apenas ser um pouco criativo. Usar o elemento <code><a></code> diretamente está fora de questão. O destino do link não está no atributo <code>href</code>, e não há forma de passar por cima da regra que diz “em um elemento <code><a></code>, procure o valor da propriedade microdata no atributo <code>href</code>.” Mas você <em>pode</em> adicionar um elemento englobador em torno de toda a bagunça, e usar ele para adicionar a propriedade microdata <code>url</code>.
<p class="legend top" style="margin-left:6em"><span class=arrow>↶</span> Isto é o que você ganha por subverter a HTML
<pre><code><TABLE itemscope itemtype="http://data-vocabulary.org/Person">
<TR><TD>Nome<TD>Mark Pilgrim
<TR><TD>Link<TD>
<mark><span itemprop="url"></mark>
<A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
<mark></span></mark>
</TABLE></code></pre>
<p>Já que o elemento <code><span></code> não tem processamento especial, ele usa regras padrões, “a propriedade microdata está no conteúdo textual.” “Conteúdo textual” não significa “toda marcação dentro deste elemento” (como você pegaria com, digamos, a propriedade <abbr>DOM</abbr> <code>innerHTML</code>). Isso significa “apenas o texto, senhora”. Nesse caso, <code>http://diveintomark.org/</code>, o conteúdo textual do elemento <code><a></code> dentro do elemento <code><span></code>.
<p>Para resumir: você pode adicionar propriedades microdata em qualquer marcação. Se você está usando <abbr>HTML</abbr> corretamente, você vai achar mais fácil adicionar microdata do que se a sua marcação <abbr>HTML</abbr> for uma sujeira, mas o microdata pode sempre ser aplicado.
<p class=a>❧
<h2 id=person>Marcando “People”</h2>
<p>A propósito, os exemplos iniciais na seção anterior não foram completamente formados. Existe realmente um vocabulário microdata para marcar informação sobre pessoas, e ele é realmente assim fácil. Vamos dar uma olhada.
<p>A maneira mais fácil de integrar microdata em um website pessoal é na sua página “sobre”. Você <em>com certeza</em> tem uma página “sobre”, não é verdade? Se não, você pode seguir como eu estudando <a href=examples/person.html>este exemplo de página “sobre”</a> com semânticas adicionais. O resultado final está aqui: <a href=examples/person-plus-microdata.html>person-plus-microdata.html</a>.
<p>Primeiro vamos olhar para a marcação crua, antes de qualquer propriedade microdata ser adicionada:
<pre><code><section>
<img width="204" height="250"
src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]">
<h1>Informação para Contato</h1>
<dl>
<dt>Nome</dt>
<dd>Mark Pilgrim</dd>
<dt>Cargo</dt>
<dd>Developer Advocate na Google, Inc.</dd>
<dt>Endereço Postal</dt>
<dd>
100 Main Street<br>
Anytown, PA 19999<br>
USA
</dd>
</dl>
<h1>Meus rastros digitais</h1>
<ul>
<li><a href="http://diveintomark.org/">weblog</a></li>
<li><a href="http://www.google.com/profiles/pilgrim">Google profile</a></li>
<li><a href="http://www.reddit.com/user/MarkPilgrim">Reddit.com profile</a></li>
<li><a href="http://www.twitter.com/diveintomark">Twitter</a></li>
</ul>
</section>
</code></pre>
<p>A primeira coisa que você sempre precisa fazer é declarar o vocabulário que você está usando, e o escopo das propriedades que você quer adicionar. Você faz isso adicionando os atributos <code>itemtype</code> e <code>itemscope</code> no elemento exterior que contém os outros elementos que contêm os dados reais. Neste caso, ele é um elemento <code><section></code>.
<pre><code><section <mark>itemscope</mark> <mark>itemtype="http://data-vocabulary.org/Person"</mark>></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/person.html>person.html</a>, depois: <a href=examples/person-plus-microdata.html>person-plus-microdata.html</a>]
<p>Agora você pode começar definindo propriedades microdata do vocabulário <code>http://data-vocabulary.org/Person</code>. Mas o que são essas propriedades? Como acontece, você pode ver a lista de propriedades navegando no <a href=http://data-vocabulary.org/Person>data-vocabulary.org/Person</a> em seu navegador. A especificação do microdata não necessita disso, mas eu diria que isso é certamente uma “melhor prática.” Afinal, se você deseja que os desenvolvedores <em>usem</em> de verdade seu vocabulário microdata, você precisa documentá-lo. E onde mais colocar sua documentação do que na própria <abbr>URL</abbr> do vocabulário?
<table class=st>
<caption>Vocabulário Person</caption>
<tr class=ho><th>Propriedade<th>Descrição
<tr class=zebra><td><code>name</code><td>Nome
<tr><td><code>nickname</code><td>Apelido
<tr class=zebra><td><code>photo</code><td>Um link de imagem
<tr><td><code>title</code><td>O cargo da pessoa (por exemplo, “Gerente Financeiro”)
<tr class=zebra><td><code>role</code><td>O papel da pessoa (Por exemplo, “Contador”)
<tr><td><code>url</code><td>Link para uma página web, tal como a página pessoal da pessoa
<tr class=zebra><td><code>affiliation</code><td>O nome da organização com que a pessoa é associada (por exemplo, um empregador)
<tr><td><code>friend</code><td>Identifica uma relação social entre a pessoa descrita e outra pessoa
<tr class=zebra><td><code>contact</code><td>Identifica uma relação social entre a pessoa descrita e outra pessoa
<tr><td><code>acquaintance</code><td>Identifica uma relação social entre a pessoa descrita e outra pessoa
<tr class=zebra><td><code>address</code><td>A localização da pessoa. Pode ter as subpropriedades <code>street-address</code>, <code>locality</code>, <code>region</code>, <code>postal-code</code>, e <code>country-name</code>.
</table>
<p>A primeira coisa <a href=examples/person-plus-microdata.html>neste exemplo de página “sobre”</a> é uma foto minha. Naturalmente, ela é marcada com elemento <code><img></code>. Para declarar que este elemento <code><img></code> é a foto do meu perfil, tudo que precisamos fazer é adicionar <code>itemprop="photo"</code> no elemento <code><img></code>.
<pre><code> <img <mark>itemprop="photo"</mark> width="204" height="250"
src="http://diveintohtml5.org/examples/2000_05_mark.jpg"
alt="[Mark Pilgrim, circa 2000]"></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/person.html>person.html</a>, depois: <a href=examples/person-plus-microdata.html>person-plus-microdata.html</a>]
<p>Onde está o valor da propriedade microdata? Já está lá, no atributo <code>src</code>. Se você chamar novamente no <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, o “valor” de um elemento <code><img></code> é seu atributo <code>src</code>. Cada atributo <code><img></code> tem um atributo <code>src</code> — caso contrário, seria apenas uma imagem quebrada — e o <code>src</code> é sempre uma <abbr>URL</abbr>. Viu? Se você está usando <abbr>HTML</abbr> corretamente, microdata é fácil.
<p>Além disso, esse elemento <code><img></code> não está sozinho na página. Ele é um elemento filho de um elemento <code><section></code>, aquele que acabamos de declarar com o atributo <code>itemscope</code>. Microdata reusa o relacionamento pai-filho dos elementos na página para definir o escopo das propriedades microdata. Em linguagem clara, estamos dizendo, “Este é elemento <code><section></code> representa uma pessoa. Qualquer propriedade microdata que você venha encontrar nos filhos do elemento <code><section></code> são propriedades desta pessoa.” Se isso ajuda, você pode pensar que o elemento <code><section></code> tem o assunto de uma frase. O atributo <code>itemprop</code> representa o verbo da frase, algo como “é fotografada em.” O valor da propriedade microdata representa o objeto da frase.
<blockquote>
<p>Esta pessoa [explícito, do <code><section itemscope itemtype="..."></code>]
<p>[é fotografada em] [explícito, do <code><img itemprop="photo"></code>]
<p><code>http://diveintohtml5.org/examples/2000_05_mark.jpg</code> [implícito, do atributo <code><img src></code>]
</blockquote>
<p>O assunto precisa ser definido apenas uma vez, colocando os atributos <code>itemscope</code> e <code>itemtype</code> no elemento externo <code><section></code>. O verbo é definido colocando o atributo <code>itemprop="photo"</code> no elemento <code><img></code>. O objeto da sentença não precisa de nenhuma marcação especial, pois o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a> diz que a propriedade valor de um elemento <code><img></code> é o seu atributo <code>src</code>.
<p>Passando para o próximo pedaço de marcação, vemos um título <code><h1></code> e o começo de uma lista <code><dl></code>. Nem o <code><h1></code> nem o <code><dl></code> precisam ser marcados com microdata. Não é toda parte da <abbr>HTML</abbr> que precisa ser uma propriedade microdata. Microdata trata-se das próprias propriedades, não da marcação ou cabeçalhos em torno das propriedades. Esse <code><h1></code> não é uma propriedade; é apenas um título. Semelhantemente, o code><dt></code> que diz “Nome” não é uma propriedade; é apenas um rótulo.
<p class="legend top" style="margin-left:8em"><span class=arrow>↶</span> Chato
<p class="legend left" style="margin-top:2.2em">Chato <span class=arrow>⇝</span> </p>
<pre><code> <h1><mark>Informações de contato</mark></h1>
<dl>
<dt><mark>Name</mark></dt>
<dd>Mark Pilgrim</dd></code></pre>
<p>Então onde está a verdadeira informação? Ela está no elemento <code><dd></code>, então é nele que precisamos colocar o atributo <code>itemprop</code>. Que propriedade é essa? É a propriedade <code>name</code>. Onde está o valor da propriedade? Ele é o texto dentro do elemento <code><dd></code>. Ele precisa ser marcado? o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a> diz que não, elementos <code><dd></code> não têm processamento especial, então o valor da propriedade é apenas o texto dentro do elemento.
<p class="legend top" style="margin-left:5em"><span class=arrow>↶</span> Este é meu nome, não use-o por aí </p>
<pre><code> <dd <mark>itemprop="name"</mark>>Mark Pilgrim</dd></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/person.html>person.html</a>, depois: <a href=examples/person-plus-microdata.html>person-plus-microdata.html</a>]
<p>O que acabamos de dizer, traduzindo? O nome “dessa pessoa é Mark Pilgrim.” Bom, Ok então. Adiante.
<p id=title-and-affiliation>As próximas duas propriedades são um pouco complicado. Essa é a marcação, pré-microdata:
<pre><code> <dt>Cargo</dt>
<dd>Developer Advocate na Google, Inc.</dd></code></pre>
<p>Se você olhar na definição do vocabulário Pessoa, o texto “Developer Advocate na Google, Inc.” na verdade engloba <em>duas</em> propriedades: <code>title</code> (“Developer Advocate”) e <code>affiliation</code> (“Google, Inc.”). Como você pode expressar isso em microdata? A resposta curta é, você não pode. Microdata não tem uma forma de quebrar textos corridos em propriedades separadas. Você não pode dizer “os primeiros 18 caracteres desse texto é uma propriedade de microdata, e os 12 caracteres finais desse texto são outra propriedade microdata.”
<p>Mas nem tudo está perdido. Imagine que você gostaria de estilizar o texto “Developer Advocate” em uma fonte diferente do texto “Google, Inc.” <abbr>CSS</abbr> também não consegue fazer isso. Então o que você faria? Primeiramente você precisaria englobar os diferentes pedaços de texto em elementos “fictícios”, como <code><span></code>, em seguida aplicar regras <abbr>CSS</abbr> diferentes para cada elemento <code><span></code>.
<p>Essa técnica também é útil para microdata. Existem dois pedaços distintos de informação aqui: um <code>title</code> e um <code>affiliation</code>. Se você engloba cada pedaço em um elemento <code><span></code> “fictício”, você pode declarar que cada <code><span></code> é uma propriedade microdata separada.
<pre><code> <dt>Cargo</dt>
<dd><span <mark>itemprop="title"</mark>>Developer Advocate</span> na
<span <mark>itemprop="affiliation"</mark>>Google, Inc.<span></dd></code></pre>.
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/person.html>person.html</a>, depois: <a href=examples/person-plus-microdata.html>person-plus-microdata.html</a>]
<p>Tada! O título “dessa pessoa é 'Developer Advocate.' Essa pessoa é contratada pela Google, Inc.” Duas sentenças, duas propriedades microdata. Um pouco mais de marcação, mas uma compensação que vale a pena.
<p id=address>A mesma técnica é útil para marcar logradouro. O vocabulário Person define uma propriedade <code>address</code>, que é um próprio item microdata. Isso significa que o endenreço tem seu próprio vocabulário (<code>http://data-vocabulary.org/Address</code>) e define suas próprias propriedades. O vocabulário Address define 5 propriedades: <code>street-address</code>, <code>locality</code>, <code>region</code>, <code>postal-code</code>, e <code>country-name</code>.
<p>Se você é um programador, você provavelmente está familiarizado com notação de ponto para definir objetos e suas propriedades. Pense na relação como esse:
<ul>
<li><code>Person</code>
<li><code>Person.address</code>
<li><code>Person.address.street-address</code>
<li><code>Person.address.locality</code>
<li><code>Person.address.region</code>
<li><code>Person.address.postal-code</code>
<li><code>Person.address.country-name</code>
</ul>
<p>Nesse exemplo, todo o logradouro está contido em um único elemento <code><dd></code>. (Novamente, o elemento <code><dt></code> é apenas um rótulo, logo ele não desempenha nenhum papel na adição de semântica com microdata.) Notar a propriedade <code>address</code> é fácil. Adicione apenas um atributo <code>itemprop</code> no elemento <code><dd></code>.
<pre><code> <dt>Endereço Postal</dt>
<dd <mark>itemprop="address"</mark>></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/person.html>person.html</a>, depois: <a href=examples/person-plus-microdata.html>person-plus-microdata.html</a>]
<p>Mas lembre-se, a propriedade address é propriamente um item microdata. Isso significa que também precisamos adicionar os atributos <code>itemscope</code> e <code>itemtype</code>.
<pre><code> <dtEndereço Posta</dt>
<dd itemprop="address" <mark>itemscope</mark>
<mark>itemtype="http://data-vocabulary.org/Address"</mark>></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/person.html>person.html</a>, depois: <a href=examples/person-plus-microdata.html>person-plus-microdata.html</a>]
<p>Vemos isso tudo antes, porém para itens de alto nível. Um elemento <code><section></code> define <code>itemtype</code> e <code>itemscope</code>, e todos elementos dentro do elemento <code><section></code> que definem as propriedades microdata são “escopadas” dentro desse vocabulário específico. Mas esse é o primeiro caso que vemos escopos <em>aninhados</em> — definir um novo <code>itemtype</code> e <code>itemscope</code> (no elemento <code><dd></code>) dentro de um já existente (no elemento <code><section></code>). Esse escopo aninhado funciona exatamente como o <abbr>DOM</abbr> <abbr>HTML</abbr>. O elemento <code><dd></code> tem um certo número de elementos filho, todos que estão no escopo do vocabulário definido no elemento <code><dd></code>. Uma vez que o elemento <code><dd></code> é fechado com uma tag <code></dd></code> correspondente, o escopo reverte para o vocabulário definido pelo elemento pai (<code><section></code>, nesse caso).
<p>As propriedades do Address sofrem o mesmo problema que nós encontramos com <a href=#title-and-affiliation>as propriedades <code>title</code> e <code>affiliation</code></a>. Existe apenas um longo texto corrido, porém nós queremos quebrá-lo em cinco propriedades microdata separadas. A solução é a mesma: englobe cada pedaço destinto de informação é um elemento <code><span></code> fictício, em seguida declare propriedades microdata em cada elemento <code><span></code>.
<pre><code> <dd itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span <mark>itemprop="street-address"</mark>>100 Main Street</span><br>
<span <mark>itemprop="locality"</mark>>Anytown</span>,
<span <mark>itemprop="region"</mark>>PA</span>
<span <mark>itemprop="postal-code"</mark>>19999</span>
<span <mark>itemprop="country-name"</mark>>USA</span>
</dd>
</dl></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/person.html>person.html</a>, depois: <a href=examples/person-plus-microdata.html>person-plus-microdata.html</a>]
<p>Traduzindo: “Esta pessoa tem um endereço postal. O logradouro parte do endereço postal é '100 Main Street.' A localidade é 'Anytown.' A região é 'PA.' O código postal é '19999.' O nome do país é 'USA.'” Extremamente simples.
<div class="pf clear">
<h4>Pergunte ao Professor de Marcação</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>P: Esse formato de endereço postal é específico dos EUA?<br>
R: Não. As propriedades do vocabulário Address são genéricas o suficiente que podem descrever vários endereços postais do mundo. Nem todo endereço terá os valores para cada propriedade, mas não tem problema. Alguns endereços podem exigir mais de uma “linha” em uma única propriedade, mas sem problemas também. Por exemplo, se o seu endereço postal tem uma rua e um número de suíte, eles podem ir juntos dentro da subpropriedade <code>street-address</code>:
<pre><code><p itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span itemprop="street-address">
<mark>100 Main Street
Suite 415</mark>
</span>
...
</p></code></pre>
</blockquote>
</div>
</div>
<p id=person-url>Não há nada de mais nessa página “sobre”: uma lista de <abbr>URLs</abbr>. O vocabulário Person tem a propriedade para isso, chamada de <code>url</code>. A propriedade <code>url</code> pode ser qualquer coisa, de verdade. (Bem, ela deve ser uma <abbr>URL</abbr>, mas você provavelmente já adivinhou isso.) O que quero dizer é que a propriedade <code>url</code> é vagamente definida. A propriedade pode ser qualquer tipo de <abbr>URL</abbr> que você queira associar a uma pessoa: um blog, uma galeria de fotos, ou um perfil em um outro site como Facebook ou Twitter.
<p>Outra coisa importante de notar aqui é que uma única pessoa pode ter várias propriedades <code>url</code>. Tecnicamente, qualquer propriedade pode aparecer mais de uma vez, mas até agora, não tiramos proveito disso. Por exemplo, poderíamos ter duas propriedades <code>photo</code>, cada uma apontando para uma <abbr>URL</abbr> de imagem diferente. Aqui, gostaria de listar quatro <abbr>URLs</abbr> diferentes: meu blog, meu perfil do Google, meu perfil de usuário no Reddit, e minha conta no Twitter. Na <abbr>HTML</abbr>, está uma lista de links: quatro elementos <code><a></code>, cada um em seu próprio elemento <code><li></code>. Em microdata, cada elemento <code><a></code> leva um atributo <code>itemprop="url"</code>.
<pre><code> <h1>Meus rastros digitais</h1>
<ul>
<li><a href="http://diveintomark.org/"
<mark>itemprop="url"</mark>>blog</a></li>
<li><a href="http://www.google.com/profiles/pilgrim"
<mark>itemprop="url"</mark>>Perfil do Google</a></li>
<li><a href="http://www.reddit.com/user/MarkPilgrim"
<mark>itemprop="url"</mark>>Perfil do Reddit.com</a></li>
<li><a href="http://www.twitter.com/diveintomark"
<mark>itemprop="url"</mark>>Twitter</a></li>
</ul></code></pre>
<p>De acordo com o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, elementos <code><a></code> tem processamento especial. O valor da propriedade microdata é o atributo <code>href</code>, não o conteúdo textual filho. O texto de cada link é na verdade ignorado pelo processador microdata. Assim, traduzindo, isso quer dizer “Essa pessoa tem uma <abbr>URL</abbr> no <code>http://diveintomark.org/</code>. Essa pessoa tem outra <abbr>URL</abbr> no <code>http://www.reddit.com/user/MarkPilgrim</code>. Ela tem outra <abbr>URL</abbr> no <code>http://www.twitter.com/diveintomark</code>.”
<h3 id=rich-snippets>Apresentando o Google Rich Snippets</h3>
<p>Quero voltar atrás apenas um momento e perguntar, “Por que estamos fazendo isso?” Estamos adicionando semântica apenas por questão de adicionar semântica? Não me leve a mal; Gosto de mexer com colchetes tanto quanto o internauta ao lado. Mas por que microdata? Por que se preocupar?
<p>Existem duas principais classes de aplicações que consomem <abbr>HTML</abbr>, e por extensão, <abbr>HTML5</abbr> microdata:
<ol>
<li>Navegadores Web
<li>Motores de busca
</ol>
<p>Para navegadores, <abbr>HTML5</abbr> define <a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata-dom-api>um conjunto de <abbr>APIs</abbr> <abbr>DOM</abbr></a> para extrair itens microdata, propriedades, e valores de propriedades de uma página web. No momento que escrevo (Fevereiro 2011), nenhum navegador suporta essa <abbr>API</abbr>. Nenhuma delas. Então, isso é… uma espécie de beco sem saída, pelo menos até os navegadores pegarem e implementarem as <abbr>APIs</abbr> no lado do cliente.
<p>Outro grande consumidor de <abbr>HTML</abbr> são os motores de busca. O que poderia um motor de busca fazer com propriedades microdata sobre uma pessoa? Imagine isso: em vez de simplesmente exibir o título da página e um resumo de texto, o motor de busca poderia integrar algumas das informações estruturadas e mostrá-las. Nome completo, cargo, empregador, talvez até uma miniatura da foto de um perfil. Isso chamaria sua atenção? Isso chamaria a minha.
<p>Google apoia microdata como parte de seu programa <a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=99170">Rich Snippets</a>. Quando web crawler do Google analisa sua página e encontra propriedades microdata que obedecem ao vocabulário <code>http://data-vocabulary.org/Person</code>, ele analisa essas propriedades e armazena elas juntamente com o restante dos dados da página. Google ainda oferece <a href=http://www.google.com/webmasters/tools/richsnippets>uma ferramenta útil para ver como o Google “enxerga” suas propriedades microdata</a>.
<pre><samp>Item
<b>Type</b>: http://data-vocabulary.org/person
photo = http://diveintohtml5.org/examples/2000_05_mark.jpg
name = Mark Pilgrim
title = Defensor do Desenvolvedor
affiliation = Google, Inc.
address = Item( 1 )
url = http://diveintomark.org/
url = http://www.google.com/profiles/pilgrim
url = http://www.reddit.com/user/MarkPilgrim
url = http://www.twitter.com/diveintomark
Item 1
<b>Type</b>: http://data-vocabulary.org/address
street-address = 100 Main Street
locality = Anytown
region = PA
postal-code = 19999
country-name = USA</samp></pre>
<p>Está tudo lá: a propriedade <code>photo</code> do atributo <code><img src></code>, todas as quatro <abbr>URLs</abbr> da lista de atributos <code><a href></code>, até o objeto endereço (listado como “Item 1”) e todos suas cinco subpropriedades.
<p>E como o Google usa toda essa informação? Isso depende. Não há regras rápidas e rígidas sobre como as propriedades microdata devem ser exibidas, qual delas devem ser exibida, ou se todas elas devem ser exibida. Se alguém buscar por “Mark Pilgrim,” <em>e</em> o Google determina que essa página “sobre” deve ser ranqueado nos resultados, <em>e</em> o Google decide que aquela propriedade microdata originalmente encontrados na página valem exibição, então o resultado de busca deve parecer algo parecido com isto:
s
<blockquote class=fakeresults>
<p><a href=examples/person-plus-microdata.html>Sobre Mark Pilgrim</a><br>
<span class=fakeinfo>Anytown PA - Defensor do Desenvolvedor - Google, Inc.</span><br>
<span class=fakeexcerpt>Trecho da página aparecerá aqui.<br>
Trecho da página aparecerá aqui.</span><br>
<span class=fakeurl>diveintohtml5.org/examples/person-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Páginas similares</span>
</blockquote>
<p>A primeira linha, “Sobre Mark Pilgrim,” é na verdade o título da página, dado no elemento <code><title></code>. Isso não é terrivelmente maravilhoso; Google faz isso para todas as páginas. Mas a segunda linha é cheia de informação tirada diretamente das anotações microdata que adicionamos à página. “Anytown PA” foi parte do <a href=#address>endereço postal</a>, marcado com o vocabulário <code>http://data-vocabulary.org/Address</code>. “Defensor do Desenvolvedor” e “Google, Inc.” foram duas propriedades do vocabulário <code>http://data-vocabulary.org/Person</code> (<code>title</code> e <code>affiliation</code>, respectivamente).
<p>Isso realmente é bastante surpreendente. Você não precisa ser uma grande empresa fazendo negócios especiais com os fornecedores de motores de busca para customizar suas listagens no resultado de busca. Apenas tire dez minutos e adicione alguns atributos da <abbr>HTML</abbr> para anotar os dados que você já estava publicando de qualquer forma.
<div class="pf clear">
<h4>Pergunte ao Professor de Marcação</h4>
<div class=inner>
<blockquote class=note>
<p><span>☞</span>P: Fiz tudo que você falou, mas minha listagem no resultado de busca no Google não apresenta nenhuma diferença. O que houve?<br>
R: “<a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=99170">Google não garante</a> que marcação em qualquer página ou site será usada nos resultados de busca.” Mas, mesmo se o Google decidisse não usar suas anotações microdata, outro motor busca pode usá-las. Como o resto da <abbr>HTML5</abbr>, microdata é um padrão aberto que qualquer um pode implementar. É seu trabalho fornecer o máximo de informação possível. Deixe o resto do mundo decidir o que fazer com isso. Eles podem lhe surpreender!
</blockquote>
</div>
</div>
<p class=a>❧
<h2 id=organization>Marcando “Organizations”</h2>
<p>Microdata não está limitado a um único vocabulário. Páginas “Sobre” são legais, mas você tem provavelmente apenas uma dela. Ainda sedento por mais?
<p><a href=examples/organization.html>Aqui está uma página exemplo de listagens de empresas</a>. Vamos olhar para a marcação <abbr>HTML</abbr> original, sem microdata.
<pre><code><article>
<h1>Google, Inc.</h1>
<p>
1600 Amphitheatre Parkway<br>
Mountain View, CA 94043<br>
USA
</p>
<p>650-253-0000</p>
<p><a href="http://www.google.com/">Google.com</a></p>
</article></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/organization.html>organization.html</a>, depois: <a href=examples/organization-plus-microdata.html>organization-plus-microdata.html</a>]
<p>Curto e suave. Toda a informação sobre a organização está contida dentro do elemento <code><article></code>, então vamos começar por aqui.
<pre><code><article <mark>itemscope</mark> <mark>itemtype="http://data-vocabulary.org/Organization"</mark>></code></pre>
<p>Tal como com <a href=#person>marcando “people”</a>, você precisa configurar os atributos <code>itemscope</code> e <code>itemtype</code> no elemento externo. Nesse caso, o elemento externo é o elemento <code><article></code>; O atributo <code>itemtype</code> declara o vocabulário microdata que você está usando (nesse caso, <code>http://data-vocabulary.org/Organization</code>), e o atributo <code>itemscope</code> declara que todas as propriedades que você configura em elementos filho relacionados a esse vocabulário.
<p>Então o que está dentro do vocabulário “Organization”? É simples e direto. Na verdade, alguns deles já deve parecer familiar.
<table class=st>
<caption>Vocabulário Organization</caption>
<tr class=ho><th>Propriedade<th>Descrição
<tr class=zebra><td><code>name</code><td>O nome da empresa (por exemplo, “Initech”)
<tr><td><code>url</code><td>Link para a página da empresa
<tr class=zebra><td><code>address</code><td>A localização da empresa. Pode conter as subpropriedades <code>street-address</code>, <code>locality</code>, <code>region</code>, <code>postal-code</code>, e <code>country-name</code>.
<tr><td><code>tel</code><td>O número do telefone da empresa
<tr class=zebra><td><code>geo</code><td>Especifica as coordenadas geográficas da localização. Sempre contém duas subpropriedades, <code>latitude</code> e <code>longitude</code>.
</table>
<p>O primeiro pedaço de marcação dentro do elemento externo <code><article></code> é um <code><h1></code>. Esse elemento <code><h1></code> contém o nome de uma empresa, então vamos colocar um atributo <code>itemprop="name"</code> diretamente no elemento <code><h1></code>.
<pre><code> <h1 <mark>itemprop="name"</mark>>Google, Inc.</h1></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/organization.html>organization.html</a>, depois: <a href=examples/organization-plus-microdata.html>organization-plus-microdata.html</a>]
<p>De acordo com o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, elementos <code><h1></code> não precisam de nenhum processamento especial. O valor da propriedade microdata é simplesmente o conteúdo textual do elemento <code><h1></code>. Traduzindo, acabamos de dizer “o nome da empresa é 'Google, Inc.'”
<p id=organization-address>Próximo é um logradouro. Marcar endereço de uma empresa funciona exatamente da mesma forma como <a href=#address>marcar o endereço de um pessoa</a>. Primeiro, adicione um atributo <code>itemprop="address"</code> no elemento externo do endereço (nesse caso, um elemento <code><p></code>). Que indica que esta é a propriedade <code>address</code> da “Organization”. Mas e as propriedades do próprio endereço? Também precisamos definir os atributos <code>itemtype</code> e <code>itemscope</code> para dizer que esse é um item Address que tem suas próprias propriedades.
<pre><code> <p <mark>itemprop="address"</mark> <mark>itemscope</mark>
<mark>itemtype="http://data-vocabulary.org/Address"</mark>></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/organization.html>organization.html</a>, depois: <a href=examples/organization-plus-microdata.html>organization-plus-microdata.html</a>]
<p>Finalmente, precisamos englobar cada parte distinta de informação em um elemento simulado <code><span></code> assim podemos adicionar o nome apropriado da propriedade microdata (<code>street-address</code>, <code>locality</code>, <code>region</code>, <code>postal-code</code>, e <code>country-name</code>) em cada elemento <code><span></code>.
<pre><code> <p itemprop="address" itemscope
itemtype="http://data-vocabulary.org/Address">
<span <mark>itemprop="street-address"</mark>>1600 Amphitheatre Parkway</span><br>
<span <mark>itemprop="locality"</mark>>Mountain View</span>,
<span <mark>itemprop="region"</mark>>CA</span>
<span <mark>itemprop="postal-code"</mark>>94043</span><br>
<span <mark>itemprop="country-name"</mark>>USA</span>
</p></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/organization.html>organization.html</a>, depois: <a href=examples/organization-plus-microdata.html>organization-plus-microdata.html</a>]
<p>Traduzindo, acabamos de dizer “Essa empresa tem um endereço. A parte de logradouro é '1600 Amphitheatre Parkway'. A localidade é 'Mountain View'. A parte da região é 'CA'. O código postal é '94043'. O nome do país é 'USA'.”
<p>Em seguida: um número de telefone para a empresa. Números de telefone são notoriamente complicados, e a sintaxe exata é específica da localização. (E se você gostaria de ligar para outro lugar, é ainda pior.) Nesse exemplo, temos um número de telefone dos Estados Unidos, em um formato adequado para ligar de qualquer lugar nos Estados Unidos.
<pre><code> <p <mark>itemprop="tel"</mark>>650-253-0000</p></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/organization.html>organization.html</a>, depois: <a href=examples/organization-plus-microdata.html>organization-plus-microdata.html</a>]
<p>(Ei, caso você não tenha percebido, o vocabulátio Address saiu do escopo quando seu elemento <code><p></code> foi fechado. Agora estamos voltando a definir propriedades no vocabulário Organization.)
<p>Se você gostaria de listar mais de um número de telefone — talvez um para clientes dos Estados Unidos e outro para clientes internacionais — você pode fazer isso. Qualquer propriedade microdata pode ser repetida. Apenas certifique-se que cada número de telefone está em seu próprio elemento <abbr>HTML</abbr>, separado de qualquer rótulo que você tenha dado a ele.
<pre><code>
<p>
US customers: <span <mark>itemprop="tel"</mark>>650-253-0000</span><br>
UK customers: <span <mark>itemprop="tel"</mark>>00 + 1* + 6502530000</span>
</p></code></pre>
<p>De acordo com o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, nem o elemento <code><p></code> nem o elemento <code><span></code> tem processamento especial. O valor da propriedade microdata <code>tel</code> é apenas o conteúdo textual. O vocabulário microdata Organization não faz nenhuma tentativa de subdividir as diferentes partes de um número de telefone. A propriedade <code>tel</code> inteira é apenas texto aberto. Se você quiser colocar código de área em parênteses, ou usar espaços em vez de traços para separar os números, você pode fazer isso. Se o cliente consumidor de microdata quiser transformar o número de telefone, isso fica inteiramente a cargo deles.
<p id=organization-url>Seguindo, temos outra propriedade familiar: <code>url</code>. Assim como <a href=#person-url>associar uma <abbr>URL</abbr> com uma Person</a>, você pode associar uma <abbr>URL</abbr> com uma empresa. Isso pode ser a página da empresa, uma página de contato, or qualquer outra coisa. Se for uma <abbr>URL</abbr> sobre, da, ou pertencente a empresa, marque-a com um atributo <code>itemprop="url"</code>.
<pre><code> <p><a <mark>itemprop="url"</mark> href="http://www.google.com/">Google.com</a></p></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/organization.html>organization.html</a>, depois: <a href=examples/organization-plus-microdata.html>organization-plus-microdata.html</a>]
<p>De acordo com o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, o elemento <code><a></code> tem processamento especial. O valor da propriedade microdata é o valor do atributo <code>href</code>, não o texto do link. Traduzindo, isso quer dizer “essa empresa é associada com a <abbr>URL</abbr> <code>http://www.google.com/</code>.” Isso não diz nada mais específico sobre a associação, e não inclui o texto do link “Google.com.”
<p>Finalmente, gostaria de falar sobre geolocalização. Não, não é <a href=geolocation.html>a <abbr>API</abbr> <abbr>W3C</abbr> de Geolocalização</a>. Se trata de como marcar a localização física de uma empresa, usando microdata.
<p>Até o momento, todos os nossos exemplos têm-se focado na marcação de dados <em>visíveis</em>. Isto é, você tem um <code><h1></code> com um nome de uma empresa, então você adiciona um atributo <code>itemprop</code> no elemento <code><h1></code> para declarar que o título textual (visível) é, na verdade, o nome de uma empresa. Ou você tem um elemento <code><img></code> que aponta para uma foto, então você adiciona um atributo <code>itemprop</code> no elemento <code><img></code> para declarar que a imagem (visível) é a foto de uma pessoa.
<p id=geo>Nesse exemplo, informação de geolocalização não é assim. Não há texto visível que mostra a exata latitude e longitude (com quatro casas decimais!) da empresa. Na verdade, o exemplo <a href=examples/organization.html>organization.html</a> (sem microdata) não tem nenhuma informação de geolocalização. Tem um link para o Google Maps, mas até mesmo a <abbr>URL</abbr> desse link não contém as coordenadas de latitude e longitude. (Ele contém informações semelhantes num formato específico do Google.) Porém, mesmo se tivéssemos um link para um hipotético serviço online de mapas que pegasse as coordenadas de latitude e longitude como parâmetros da <abbr>URL</abbr>, microdata não tem como separar diferentes partes de uma <abbr>URL</abbr>. Você não pode declarar que o primeiro parâmetro query da <abbr>URL</abbr> é a latitude e o segundo parâmetro query da <abbr>URL</abbr> é a longitude e o resto dos parâmetros são irrelevantes.
<p>Para lidar com casos extremos como este, <abbr>HTML5</abbr> fornece uma maneira de anotar dados <em>invisíveis</em>. Essa técnica deve ser usada apenas como último recurso. Se existir uma forma de mostrar ou processar os dados que você se importa com, você deve fazer assim. Dados invisíveis que apenas máquinas podem ler tendem a “banalizar-se” rapidamente. Isto é, alguém chegará mais tarde e atualizará o texto visível mas esquecerá de atualizar as informações invisíveis. Isso acontece com mais frequência do que você pensa, e isso <em>vai</em> acontecer com você também.
<p>Ainda, existem casos que dado invisível é inevitável. Talvez o seu chefe queira <em>realmente</em> informação de geolocalização legível para máquina mas não queira bagunçar a interface com pares de incompreensíveis números de seis dígitos. Dado invisível é a única opção. A única salvação aqui é que você pode colocar a informação invisível imediatamente depois do texto visível que o descreve, o que pode ajudar a pessoa que vem mais tarde e atualiza o texto visível que eles precisam atualizar a informação invisível logo depois disso.
<p>Nesse exemplo, podemos criar elemento simulado <code><span></code> dentro do mesmo elemento <code><article></code> como todas outras propriedades da empresa, em seguida colocar o dado de geolocalização invisível dentro do elemento <code><span></code>.
<pre><code> <span <mark>itemprop="geo"</mark> <mark>itemscope</mark>
<mark>itemtype="http://data-vocabulary.org/Geo"</mark>>
<meta itemprop="latitude" content="37.4149" />
<meta itemprop="longitude" content="-122.078" />
</span>
</article></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/organization.html>organization.html</a>, depois: <a href=examples/organization-plus-microdata.html>organization-plus-microdata.html</a>]
<p>Informação de geolocalização é definida em seu próprio vocabulário, como <a href=#address>o endereço de uma pessoa ou empresa</a>. Portanto, esse elemento <code><span></code> precisa de três atributos:
<ol>
<li><code>itemprop="geo"</code> diz que o elemento representa a propriedade <code>geo</code> da “Organization” ao redor
<li><code>itemtype="http://data-vocabulary.org/Geo"</code> diz que vocabulário microdata essas propriedades do elemento estão em conformidade
<li><code>itemscope</code> diz que esse elemento é o elemento delimitador para um item microdata com seu próprio vocabulário (dado no atributo <code>itemtype</code>). Todas as propriedades dentro desse elemento são propriedades de <code>http://data-vocabulary.org/Geo</code>, não a do em torno <code>http://data-vocabulary.org/Organization</code>.
</ol>
<p>A próxima grande questão que esse exemplo responde é, “Como você anota dado invisível?” Você usa o elemento <code><meta></code>. Nas versões anteriores da <abbr>HTML</abbr>, você poderia usar apenas o elemento <code><meta></code> dentro do <a href=semantics.html#head-element><code><head></code> de sua página</a>. Na <abbr>HTML5</abbr>, você pode usar o elemento <code><meta></code> em qualquer lugar. E é exatamente isso que estamos fazendo aqui.
<pre><code><<mark>meta</mark> itemprop="latitude" content="37.4149" /></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/organization.html>organization.html</a>, depois: <a href=examples/organization-plus-microdata.html>organization-plus-microdata.html</a>]
<p>De acordo com o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, o elemento <code><meta></code> tem processamento especial. O valor da propriedade microdata é o atributo <code>content</code>. Já que esse atributo nunca é visivelmente mostrado, temos a configuração perfeita para quantidades ilimitadas de dados invisíveis. Com grandes poderes vem grandes responsabilidades. Nesse caso, a responsabilidade é sua de certifica-se de que esse dado invisível fique sincronizado com o texto visível em volta dele.
<p>Não há suporte direto para o vocabulário Organization no Google Rich Snippets, então não tenho nenhum bom exemplo de listagem no resultado de busca para mostrá-lo. Mas as organizações aparecem fortemente nos próximos dois estudos de caso: eventos e revisões, e essas <em>são</em> suportadas pelo Google Rich Snippets.
<p class=a>❧
<h2 id=event>Marcando “Events”</h2>
<p>Merdas aconteces. Algumas merdas acontecem em pré-determinadas vezes. Não seria legal se você pudesse dizer aos motores de busca exatamente quando a merda estava prestes a acontecer?
<p>Vamos começar olhando para <a href=examples/event.html>um cronograma exemplo de amostra das minhas palestras</a>.
<pre><code><article>
<h1>Google Developer Day 2009</h1>
<img width="300" height="200"
src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
alt="[Mark Pilgrim at podium]">
<p>
Google Developer Day é uma chance de aprender sobre o desenvolvimento dos produtos Google pelos engenheiros que os constroem. Essa conferência de um dia inclui seminários e “horário de trabalho” em tecnologias web como Google Maps, OpenSocial, Android, APIs AJAX, Chrome, e Google Web Toolkit.
</p>
<p>
<time datetime="2009-11-06T08:30+01:00">2009 November 6, 8:30</time>
&ndash;
<time datetime="2009-11-06T20:30+01:00">20:30</time>
</p>
<p>
Congress Center<br>
5th května 65<br>
140 21 Praha 4<br>
Czech Republic
</p>
<p><a href="http://code.google.com/intl/cs/events/developerday/2009/home.html">GDD/Prague home page</a></p>
</article></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>Toda informação sobre o evento está contida dentro do elemento <code><article></code>, então é nele que precisamos colocar os atributos <code>itemtype</code> e <code>itemscope</code>.
<pre><code><article <mark>itemscope</mark> <mark>itemtype="http://data-vocabulary.org/Event"</mark>></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>A <abbr>URL</abbr> para o vocabuário Event é <code><a href=http://data-vocabulary.org/Event>http://data-vocabulary.org/Event</a></code>, que ocorre de conter também um pequeno bonito gráfico descrevendo as propriedades do vocabulário. E o que são essas propriedades?
<table class=st>
<caption>Vocabulário Event</caption>
<tr class=ho><th>Propriedade<th>Descrição
<tr class=zebra><td><code>summary</code><td>O nome do evento
<tr><td><code>url</code><td>Link para a página de detalhes do evento
<tr class=zebra><td><code>location</code><td>A localização ou lugar do evento. Pode opcionalmente ser representado por um <a href=#organization>Organization</a> ou <a href=#address>Address</a> aninhado.
<tr><td><code>description</code><td>Uma descrição do evento
<tr class=zebra><td><code>startDate</code><td>A data e hora inicial do evento no <a href=http://www.iso.org/iso/date_and_time_format>foramato de data ISO</a>
<tr><td><code>endDate</code><td>A data e hora final do evento no <a href=http://www.iso.org/iso/date_and_time_format>foramato de data ISO</a>
<tr class=zebra><td><code>duration</code><td>A data de duração no <a href=http://en.wikipedia.org/wiki/ISO_8601#Durations>formato de duração ISO</a>
<tr><td><code>eventType</code><td>A categoria do evento (por exemplo, “Show” ou “Palestra”). Esta é uma string de forma livre, não um atributo enumerado.
<tr class=zebra><td><code>geo</code><td>Especifica as coordenadas geográficas da localização. Sempre contém duas subpropriedades, <code>latitude</code> e <code>longitude</code>.
<tr><td><code>photo</code><td>Um link para uma foto ou imagem relacionada ao evento
</table>
<p>O nome do evento está em um elemento <code><h1></code>. <p>De acordo com o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, elementos <code><h1></code> não tem processamento especial. O valor da propriedade microdata é apenas o conteúdo textual do elemento <code><h1></code>. Tudo que precisamos adicionar é o atributo <code>itemprop</code> para declarar que esse elemento <code><h1></code> contém o nome do evento.
<pre><code> <h1 <mark>itemprop="summary"</mark>>Google Developer Day 2009</h1></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>Traduzindo, isso quer dizer, “O nome desse evento é Google Developer Day 2009.”
<p>Essa listagem de evento tem uma foto, que pode ser marcada com uma propriedade <code>photo</code>. Como você poderia esperar, a foto já está marcada com um elemento <code><img></code>. Como <a href=#person-photo>a propriedade <code>photo</code> no vocabulário Person</a>, uma foto de um evento é uma <abbr>URL</abbr>. Já que o <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a> diz que o valor da propriedade de um elemento <code><img></code> está em seu atributo <code>src</code>, a única coisa que precisamos fazer é adicionar o atributo <code>itemprop</code> no elemento <code><img></code>.
<pre><code> <img <mark>itemprop="photo"</mark> width="300" height="200"
src="http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg"
alt="[Mark Pilgrim no pódio]"></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>Traduzindo, isso quer dizer, “A foto para esse evento está aqui <code>http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg</code>.”
<p>Em seguida está uma descrição mais longa do evento, que é apeanas um parágrafo de texto livre.
<pre><code> <p <mark>itemprop="description"</mark>>Google Developer Day é uma chance de aprender sobre o desenvolvimento dos produtos Google pelos engenheros que os constroem. Essa conferência de um dia inclui seminários e “horário de trabalho” em tecnologias web como Google Maps, OpenSocial, Android, APIs AJAX, Chrome, e Google Web Toolkit.</p></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>O próximo pedaço é algo novo. Eventos geralmente ocorrem em datas específicas e começam e terminam em horas específicas. Na <abbr>HTML5</abbr>, data e hora deve ser marcada com <a href=semantics.html#time-element>o elemento <code><time></code></a>, e já estamos fazendo isso aqui. Então fica a questão, como adicionamos propriedades microdata nesses elementos <code><time></code>? Olhando atrás no <a href=#property-values>modelo de dados microdata da <abbr>HTML5</abbr></a>, vemos que o elemento <code><time></code> tem processamento especial. O valor da propriedade microdata em um elemento <code><time></code> é o valor do atributo <code>datetime</code>. E olhe, as propriedades <code>startDate</code> e <code>endDate</code> do vocabulário Event leva um estilo de data <abbr>ISO</abbr>, assim como a propriedade <code>datetime</code> de um elemento <code><time></code>. Mais uma vez, a semântica do principal vocabulário <abbr>HTML</abbr> se encaixa muito bem com a semântica de nosso vocabulário microdata personalizado. Marcar data inicial e final com microdata é tão simples como:
<ol>
<li>Usar <abbr>HTML</abbr> corretamente em primeiro lugar (usar elemento <code><time></code> para marcar data e hora), e
<li>Adicionar um simples atributo <code>itemprop</code>
</ol>
<pre><code> <p>
<time <mark>itemprop="startDate"</mark> datetime="2009-11-06T08:30+01:00">2009 November 6, 8:30</time>
&ndash;
<time <mark>itemprop="endDate"</mark> datetime="2009-11-06T20:30+01:00">20:30</time>
</p></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>Traduzindo, isso quer dizer, “Esse evento começa em 6 de Novembro, 2009, às 8:30 da manhã, e vai até 6 de Novembro, 2009, às 20:30 (horário local para Prague, <abbr>GMT</abbr>+1).”
<p>Em seguida está a propriedade <code>location</code>. A <a href=http://data-vocabulary.org/Event>definição do vocabulário Event</a> diz que isso pode ser tanto uma “Organization” ou um “Address”. Nesse caso, o evento está sendo realizado em um local especializado em conferências, o Congress Center in Prague. Marcar isso como uma “Organization” nos permite incluir o nome do local, bem como seu endereço.
<p>Primeiro, vamos declarar que o elemento <code><p></code> que contém o endereço é a propriedade <code>location</code> do evento, e que esse elemento é também seu próprio item microdata que está em conformidade com o vocabulário <code>http://data-vocabulary.org/Organization</code>
<pre><code> <p <mark>itemprop="location"</mark> <mark>itemscope</mark>
<mark>itemtype="http://data-vocabulary.org/Organization"</mark>></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>Depois, marcar o nome da empresa através de um elemento <code><span></code> externo e adicionar um atributo <code>itemprop</code> no elemento <code><span></code>.
<pre><code> <span <mark>itemprop="name"</mark>>Congress Center</span><br></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>Devido as regras microdata de escopo, esse <code>itemprop="name"</code> está definindo uma propriedade no vocabulário Organization, não no vocabulário Event. O elemento <code><p></code> definido no começo do escopo das propriedades Organization, e que elemento <code><p></code> não foi fechado ainda com uma tag <code></p></code>. Qualquer propriedade microdata que definimos aqui são propriedades do mais recente vocabulário com escopo. Vocabulários aninhadas são como uma <a href="http://en.wikipedia.org/wiki/Stack_(data_structure)">pilha</a>. Não desempilhamos ainda, então ainda estamos falando sobre propriedades da “Organization”.
<p>Na verdade, vamos adicionar um terceiro vocabulário na pilha: um “Address” da “Organization” para o “Event”.
<pre><code>
<span <mark>itemprop="address"</mark> <mark>itemscope</mark>
<mark>itemtype="http://data-vocabulary.org/Address"</mark>></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>Mais uma vez, queremos marcar cada pedaço de um endereço como uma propriedade microdata separada, então precisamos uma série de elementos <code><span></code> fictícios para pendurar nossos atributos <code>itemprop</code> dentro. (Se estou indo muito rápido para você aqui, volte e leia sobre <a href=#address>marcando o endereço de uma pessoa</a> e <a href=#organization-address>marcando o endereço de uma empresa</a>.)
<pre><code> <span <mark>itemprop="street-address"</mark>>5th května 65</span><br>
<span <mark>itemprop="postal-code"</mark>>140 21</span>
<span <mark>itemprop="locality"</mark>>Praha 4</span><br>
<span <mark>itemprop="country-name"</mark>>Czech Republic</span></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>Não existem mais propriedades do Address, então fechamos o elemento <code><span></code> que começou o escopo Address, e desempilhamos.
<pre><code> </span></code></pre>
<p>Não existe mais propriedades da “Organization”, então fechamos o elemento <code><p></code> que começou o escopo Organization, e desempilhamos novamente.
<pre><code> </p></code></pre>
<p>Agora voltamos para definir propriedades no evento. A próxima propriedade é <code>geo</code>, para representar a localização física do evento. Ela usa o mesmo vocabulário Geo que usamos para <a href=#geo>marcar a localização fisica de uma empresa</a> na seção anterior. Precisamos de um elemento <code><span></code> para agir como um container; ele leva os atributos <code>itemtype</code> e <code>itemscope</code>. Dentro desse elemento <code><span></code>, precisamos de dois elementos <code><meta></code>, um para a propriedade <code>latitude</code> e outro para a propriedade <code>longitude</code>.
<pre><code>
<span <mark>itemprop="geo"</mark> <mark>itemscope</mark> <mark>itemtype="http://data-vocabulary.org/Geo"</mark>>
<meta <mark>itemprop="latitude"</mark> content="50.047893" />
<meta <mark>itemprop="longitude"</mark> content="14.4491" />
</span></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>E fechamos o <code><span></code> que guardava as propriedades Geo, então estamos voltando a definir propriedades do evento. A última propriedade é a propriedade <code>url</code>, que deve parecer familiar. Associar uma <abbr>URL</abbr> com um evento funciona da mesma forma que <a href=#person-url>associar uma <abbr>URL</abbr> com uma pessoa</a> e <a href=#organization-url>associar uma <abbr>URL</abbr> com uma empresa</a>. Se você está usando <abbr>HTML</abbr> corretamente (marcando hyperlinks com <code><a href></code>), então declarar que o hyperlink é uma propriedade <code>url</code> microdata é uma simples questão de adicionar o atributo <code>itemprop</code>.
<pre><code> <p>
<a <mark>itemprop="url"</mark>
href="http://code.google.com/intl/cs/events/developerday/2009/home.html">
GDD/Prague home page
</a>
</p>
</article></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/event.html>event.html</a>, depois: <a href=examples/event-plus-microdata.html>event-plus-microdata.html</a>]
<p>A <a href=examples/event.html>página de evento exemplo</a> também lista um segundo evento, minha palestra no ConFoo Conference em Montréal. Para ser breve, não vou passar por essa marcação linha a linha. É essencialmente o mesmo que o evento em Prague: um item Event com itens Geo e Address aninhados. Estou mencionando apenas de passagem para recordar que uma única página pode ter vários eventos, cada um marcado com microdata.
<h3 id=event-rich-snippets>O Retorno do Google Rich Snippets</h3>
<p><a href="http://www.google.com/webmasters/tools/richsnippets?url=http://diveintohtml5.org/examples/event-plus-microdata.html">De acordo com a ferramenta de teste do Google Rich Snippets</a>, essa é a informação que os rastreadores do Google vão imprimir do <a href=examples/event-plus-microdata.html>nosso exemplo de eventos na página de listagem</a>:
<pre><samp>Item
<b>Type:</b> http://data-vocabulary.org/Event
summary = Google Developer Day 2009
eventType = conference
photo = http://diveintohtml5.org/examples/gdd-2009-prague-pilgrim.jpg
description = Google Developer Days é uma chance de aprender sobre o desenvolvimento dos produtos Google pelos engenheros que os constrói. Essa conferência de um dia inclui seminários e “horário de trabalho” em tecnologias web como Goo..
startDate = 2009-11-06T08:30+01:00
endDate = 2009-11-06T20:30+01:00
location = Item(__1)
geo = Item(__3)
url = http://code.google.com/intl/cs/events/developerday/2009/home.html
Item
Id: __1
<b>Type:</b> http://data-vocabulary.org/Organization
name = Congress Center
address = Item(__2)
Item
Id: __2
<b>Type:</b> http://data-vocabulary.org/Address
street-address = 5th května 65
postal-code = 140 21
locality = Praha 4
country-name = Czech Republic
Item
Id: __3
<b>Type:</b> http://data-vocabulary.org/Geo
latitude = 50.047893
longitude = 14.4491</samp></pre>
<p>Como você pode ver, toda informação que adicionamos no microdata está lá. Propriedades que são itens separados de microdata recebem <abbr>IDs</abbr> internos (<code>Item(__1)</code>, <code>Item(__2)</code> e assim por diante). Isso não faz parte da especificação microdata. É apenas uma convenção que ferramentas de teste do Google usam para linearizar a saída de exemplo e mostrar-lhe o agrupamento de itens aninhados e suas propriedades.
<p>Aqui está como Google pode escolher representar essa página exemplo em seus resultados de busca. (Novamente, tenho que introduzir isso com o aviso que isso é apenas um exemplo. Google pode mudar o formato dos seus resultados de busca a qualquer momento, e não há garantia que o Google vai prestar atenção em sua marcação microdata. Desculpa parecer uma recordação chata, mas nossos advogados me fazem dizer essas coisas.)
<blockquote class=fakeresults>
<p><a href=examples/event-plus-microdata.html>Calendário de Eventos de Mark Pilgrim</a><br>
<span class=fakeexcerpt>Trecho da página aparecerá aqui.<br>
Trecho da página aparecerá aqui.</span><br>
<table class=faketable>
<tr><td class=padright><a href=http://code.google.com/intl/cs/events/developerday/2009/home.html>Google Developer Day 2009</a><td class="fakeinfo padright">Fri, Nov 6<td class=fakeinfo>Congress Center, Praha 4, Czech Republic
<tr><td class=padright><a href=http://confoo.ca/en>ConFoo.ca 2010</a><td class="fakeinfo padright">Wed, Mar 10<td class=fakeinfo>Hilton Montreal Bonaventure, Montréal, Québec, Canada
</table>
<p><span class=fakeurl>diveintohtml5.org/examples/event-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Páginas similares</span>
</blockquote>
<p>Após o título da página e o auto-gerado texto resumido, o Google começa usar a marcação microdata que adicionamos na página para mostrar uma pequena tabela de eventos. Observe o formato de data: “Fri, Nov 6.” Isso não é uma string que apareceu em algum lugar do nosso <abbr>HTML</abbr> ou marcação microdata. Usamos duas completamentes qualificadas strings formatadas <abbr>ISO</abbr>. <code>2009-11-06T08:30+01:00</code> e <code>2009-11-06T20:30+01:00</code>. Google pegou essas duas datas, descobriu que se tratava do mesmo dia, e decidiu mostrar uma única data em um formato mais amigável.
<p>Agora olhe para o endereço físico. Google escolheu mostrar apenas o nome do local + localização + país, não exatamente o logradouro. Isso é possível pelo fato de que nós separamos o endereço em cinco subpropriedades — <code>name</code>, <code>street-address</code>, <code>region</code>, <code>locality</code>, e <code>country-name</code> — e marcamos cada parte do endereço como uma propriedade microdata diferente. Google se aproveita disso para mostrar um endereço abreviado. Outros consumidores da mesma marcação microdata podem fazer diferentes escolhas sobre o que mostrar ou como mostrar isso. Não existe escolha certa ou errada aqui. Está a seu cargo prover o máximo de informação possível, o mais fielmente possível. Interpretar isso está a cargo do resto do mundo.
<p class=a>❧
<h2 id=review>Marcando “Reviews”</h2>
<p>Aqui está outro exemplo de fazer a web melhor (e possivelmente ser listado no resultado de busca) através de marcação: avaliação de produtos e negócios.
<p>Esse é uma pequena avaliação que escrevi da minha pizzaria favorita perto da minha casa. (A propósito, isso é um restaurante de verdade. Se você alguma vez estiver em Apex, NC, recomendo altamente ele.) Vamos olhar para <a href=examples/review.html>a marcação original</a>:
<pre><code><article>
<h1>Anna’s Pizzeria</h1>
<p>★★★★☆ (4 estrelas de 5)</p>
<p>Nova pizza no estilo Nova York logo alí no centro histórico Apex</p>
<p>
A comida é de primeira linha. A atmosfera está alí para a “pizzaria do bairro.”
O restaurante em si é um pouco apertado; se você está acima do peso,
você pode ter dificuldade de entrar e sair de sua cadeira e caminhar entre outras mesas.
Costumava dar gratuitamente “garlic knots” quando você sentava; agora eles lhe dão pão
simples e você tem que pagar pelas coisas boas. No geral, é um vencedor.
</p>
<p>
100 North Salem Street<br>
Apex, NC 27502<br>
USA
</p>
<p>— avaliado por Mark Pilgrim, última atualização 31 de Março, 2010</p>
</article></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/review.html>review.html</a>, depois: <a href=examples/review-plus-microdata.html>review-plus-microdata.html</a>]
<p>Essa avaliação está contida em um elemento <code><article></code>, então é nele que vamos colocar os atributos <code>itemtype</code> e <code>itemscope</code>. A <abbr>URL</abbr> namespace para esse vocabulário é <code>http://data-vocabulary.org/Review</code>.
<pre><code><article <mark>itemscope</mark> <mark>itemtype="http://data-vocabulary.org/Review"</mark>></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/review.html>review.html</a>, depois: <a href=examples/review-plus-microdata.html>review-plus-microdata.html</a>]
<p>Quais são as propriedades disponíveis no vocabulário Review? Estou feliz que você perguntou.
<table class=st>
<caption>Vocabulário Review</caption>
<tr class=ho><th>Propriedade<th>Descrição
<tr class=zebra><td><code>itemreviewed</code><td>O nome do item que está sendo avaliado. Pode ser um produto, serviço, negócio, entre outros.
<tr><td><code>rating</code><td>Uma classificação numérica para o item, em uma escala de 1 até 5. Pode ser também um vocabulário <code>http://data-vocabulary.org/Rating</code> aninhado para usar uma escala diferente do padrão.
<tr class=zebra><td><code>reviewer</code><td>O nome do autor que escreveu a avaliação
<tr><td><code>dtreviewed</code><td>A data que o item foi avaliado no <a href=http://www.iso.org/iso/date_and_time_format>formato de data ISO</a>
<tr class=zebra><td><code>summary</code><td>Um pequeno resumo da avaliação
<tr><td><code>description</code><td>O corpo da avaliação
</table>
<p>A primeira propriedade é simples: <code>itemreviewed</code> é apenas texto, e aqui ele está contido no elemento <code><h1></code>, então é aqui onde devemos colocar o atributo <code>itemprop</code>.
<pre><code> <h1 <mark>itemprop="itemreviewed"</mark>>Anna’s Pizzeria</h1></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/review.html>review.html</a>, depois: <a href=examples/review-plus-microdata.html>review-plus-microdata.html</a>]
<p>Vou pular a classificação real e voltarei a ela no final.
<p>As próximas duas propriedades também são simples. A propriedade <code>summary</code> é uma pequena descrição do que você está avaliando, e a propriedade <code>description</code> é o corpo da avaliação.
<pre><code> <p <mark>itemprop="summary"</mark>>Nova pizza no estilo Nova York logo alí no centro histórico Apex</p>
<p <mark>itemprop="description"</mark>>
A comida é de primeira linha. A atmosfera está alí para a “pizzaria do bairro.”
O restaurante em si é um pouco apertado; se você está acima do peso,
você pode ter dificuldade de entrar e sair de sua cadeira e caminhar entre outras mesas.
Costumava dar gratuitamente “garlic knots” quando você sentava; agora eles lhe dão pão
simples e você tem que pagar pelas coisas boas. No geral, é um vencedor.
</p></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/review.html>review.html</a>, depois: <a href=examples/review-plus-microdata.html>review-plus-microdata.html</a>]
<p>As propriedades <code>location</code> e <code>geo</code> não tem nada de novidade. (Se você está mal sintonizando, confira <a href=#address>marcando o endereço de uma pessoa</a>, <a href=#organization-address>marcando o endereço de uma empresa</a>, e <a href=#geo>marcando informação de geolocalização</a> anteriormente nesse capítulo.)
<pre><code> <p <mark>itemprop="location"</mark> <mark>itemscope</mark>
<mark>itemtype="http://data-vocabulary.org/Address"</mark>>
<span <mark>itemprop="street-address"</mark>>100 North Salem Street</span><br>
<span <mark>itemprop="locality"</mark>>Apex</span>,
<span <mark>itemprop="region"</mark>>NC</span>
<span <mark>itemprop="postal-code"</mark>>27502</span><br>
<span <mark>itemprop="country-name"</mark>>USA</span>
</p>
<span <mark>itemprop="geo"</mark> <mark>itemscope</mark>
<mark>itemtype="http://data-vocabulary.org/Geo"</mark>>
<meta <mark>itemprop="latitude"</mark> content="35.730796" />
<meta <mark>itemprop="longitude"</mark> content="-78.851426" />
</span></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/review.html>review.html</a>, depois: <a href=examples/review-plus-microdata.html>review-plus-microdata.html</a>]
<p>A linha final representa um problema familiar: ela contém duas partes de informação de um elemento. O nome do avaliador é <code>Mark Pilgrim</code>, e a data de avaliação é <code>31 de March, 2010</code>. Como marcar essas duas propriedades distintas? <a href=#title-and-affiliation>Englobe eles em seus próprios elementos</a> e coloque um atributo <code>itemprop</code> em cada elemento. Na verdade, em primero lugar a data nesse exemplo deveria ser marcada com um elemento <code><time></code>, assim isso daria um gancho natural sobre para pendurar o nosso atributo <code>itemprop</code>. O nome do avaliador pode ser apenas englobado em um fictício elemento <code><span></code>.
<pre><code> <p>— <span <mark>itemprop="reviewer"</mark>>Mark Pilgrim</span>, última atualização
<<mark>time</mark> <mark>itemprop="dtreviewed"</mark> <mark>datetime="2010-03-31"</mark>>
31 de Março, 2010
</time>
</p>
</article></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/review.html>review.html</a>, depois: <a href=examples/review-plus-microdata.html>review-plus-microdata.html</a>]
<p>Ok, vamos falar de classificações. A parte mais complicada de marcar uma revisão é a classificação. Por padrão, classificação no vocabulário Review está numa escala de 1–5, 1 sendo “terrível” e 5 sendo “maravilhoso.” Se você quer usar uma escala diferente, você definitivamente pode fazer isso. Mas vamos falar sobre a escala padrão primeiro.
<pre><code> <p>★★★★☆ (<span <mark>itemprop="rating"</mark>>4</span> stars out of 5)</p></code></pre>
<p class=follow>[Acompanhe comigo! Antes: <a href=examples/review.html>review.html</a>, depois: <a href=examples/review-plus-microdata.html>review-plus-microdata.html</a>]
<p>Se você está usando a escala padrão 1–5, a única propriedade que você precisa marcar é a própria classificação (4, nesse caso). Mas e se você quiser usar uma escala diferente? Você pode fazer isso; você precisa declarar os limites da escala que você está usando. Por exemplo, se você gostaria de usar uma escala de pontos de 0–10, você ainda declararia a propriedade <code>itemprop="rating"</code>, mas em vez de dar o valor da classificação diretamente, você usaria um vocabulário aninhado de <code>http://data-vocabulary.org/Rating</code> para declarar o péssimo e o melhor valor na sua escala customizada e o valor real dentro dessa escala.
<pre><code><p <mark>itemprop="rating"</mark> <mark>itemscope</mark>
<mark>itemtype="http://data-vocabulary.org/Rating"</mark>>
★★★★★★★★★☆
(<span <mark>itemprop="value"</mark>>9</span> numa escala de
<span <mark>itemprop="worst"</mark>>0</span> até
<span <mark>itemprop="best"</mark>>10</span>)
</p></code></pre>
<p>Traduzindo, isso quer dizer “o produto que estou avaliando tem um valor de classificação de 9 em uma escla de 0–10.”
<p>Eu mencionei que a microdata review pode afetar a listagem no resultado de busca? Verdade, ela pode. Aqui estão os “dados puros” que a <a href="http://www.google.com/webmasters/tools/richsnippets?url=http://diveintohtml5.org/examples/review-plus-microdata.html">ferramenta do Google Rich Snippets extraiu da minha avaliação melhorada com microdata</a>:
<pre><samp>Item
<b>Type:</b> http://data-vocabulary.org/Review
itemreviewed = Anna’s Pizzeria
rating = 4
summary = Nova pizza no estilo Nova York logo alí no centro histórico Apex
description = A comida é de primeira linha. A atmosfera está alí ...
address = Item(__1)
geo = Item(__2)
reviewer = Mark Pilgrim
dtreviewed = 2010-03-31
Item
Id: __1
<b>Type:</b> http://data-vocabulary.org/Organization
street-address = 100 North Salem Street
locality = Apex
region = NC
postal-code = 27502
country-name = USA
Item
Id: __2
<b>Type:</b> http://data-vocabulary.org/Geo
latitude = 35.730796
longitude = -78.851426</samp></pre>
<p>E aqui (módulo dos caprichos do Google, a fase da lua, e assim por diante e assim por diante) está como minha avaliação pode aparecer em uma listagem de resultado de busca:
<blockquote class=fakeresults>
<p><a href=examples/review-plus-microdata.html>Anna’s Pizzeria: avaliação</a><br>
<span class=fakeinfo><span class=fakestar>★★★★☆</span> Avaliado por Mark Pilgrim - Mar 31, 2010</span><br>
<span class=fakeexcerpt>Trecho da página aparecerá aqui.<br>
Trecho da página aparecerá aqui..</span><br>
<span class=fakeurl>diveintohtml5.org/examples/review-plus-microdata.html</span> - <span class=fakelink>Cached</span> - <span class=fakelink>Páginas similares</span>
</blockquote>
<p>Colchetes não me impressionam muito, mas eu tenho que admitir, esse é muito legal.
<p class=a>❧
<h2 id=further-reading>Leitura Complementar</h2>
<p>Microdata resources:
<ul>
<li><a href=http://foolip.org/microdatajs/live/>Live microdata playground</a>
<li><a href=http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata><abbr>HTML5</abbr> microdata specification</a>
</ul>
<p>Google Rich Snippets resources:
<ul>
<li><a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=99170">About rich snippets and structured data</a>
<li><a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146646">Marking up contact and social networking information</a>
<li><a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146861">Businesses <i class=baa>&</i> organizations</a>
<li><a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=164506">Events</a>
<li><a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=146645">Reviews</a>
<li><a href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=172705">Review ratings</a>
<li><a href=http://www.google.com/webmasters/tools/richsnippets>Google Rich Snippets Testing Tool</a>
<li><a href=http://knol.google.com/k/google-rich-snippets-tips-and-tricks>Google Rich Snippets Tips and Tricks</a>
</ul>
<p class=a>❧
<p>Isso foi “Distribuído”, “Extensível” e Outras Palavras Bonitas; Consulte o <a href=table-of-contents.html>Sumário</a>, caso queira continuar com a leitura.
<div class="pf">
<h4>Você sabia?</h4>
<div class="moneybags">
<blockquote><p>Em associação a <span lang="en">Google Press</span>, O’Reilly está distribuindo este livro em variados formatos, incluindo papel, ePub, Mobi, <abbr>DRM</abbr>-free e <abbr>PDF</abbr>. A edição paga é chamada <span lang="en">“HTML5: Up & Running”</span> e está disponível agora. Este capítulo está incluído na versão paga.
</p><p>Se você gostou deste capítulo e quer mostrar sua apreciação, basta <a href="http://www.amazon.com/HTML5-Up-Running-Mark-Pilgrim/dp/0596806027?ie=UTF8&tag=diveintomark-20&creativeASIN=0596806027">comprar o livro “<abbr>HTML5</abbr>: Up & Running” com esse link afiliado</a> ou <a href="http://oreilly.com/catalog/9780596806033">comprar a edição eletrônica diretamente da O’Reilly</a>. Você vai ganhar um livro, e eu vou ganhar um trocado. Atualmente, não aceito doações diretas.
</p></blockquote>
</div>
</div>
<p class=c>Copyright MMIX–MMXI <a href=about.html>Mark Pilgrim</a>
<form action=https://www.google.com/cse><div><input type=hidden name=cx value=014437924039265546826:2nmoshc8y3y><input type=hidden name=ie value=UTF-8><input type=search name=q size=25 placeholder="powered by Google™"> <input type=submit name=sa value=Search></div></form>
<script src=j/jquery.js></script>
<script src=j/dih5.js></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4114546-27', 'auto');
ga('send', 'pageview');
</script>
</html>