mf2-spec-template-brainstorming: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(→‎Examples: Added comments on showing JSON representation of all markup examples)
(→‎Examples: Added fleshed out example)
Line 28: Line 28:
Ideally all examples will be shown 1:1 with their JSON representation, OR editable with JS to submit it to a parser and show the JSON — this would encourage people to experiment and greater understand the relationship between markup and parsed structure.
Ideally all examples will be shown 1:1 with their JSON representation, OR editable with JS to submit it to a parser and show the JSON — this would encourage people to experiment and greater understand the relationship between markup and parsed structure.


Minimal sane example:
Minimal sane example (if applicable e.g. implied h-card):


TODO
Meatier example:


Meatier example
<source lang=html4strict>
 
<div class="h-example">
TODO
  <span class="p-name">An Example Example</span>
 
 
Outlier/edge case example?
  <p>Published <time class="dt-published" datetime="2013-05-02 12:00:00">two days ago</time></p>
 
 
TODO
  <p class="p-author h-card">Mr. Author</p>
 
  <img class="u-photo" src="http://cdn.memegenerator.net/instances/400x/38481344.jpg" alt="" />
 
  <p class="p-summary">An example example showing you how to example</p>
</div>
</source>

Revision as of 16:22, 6 June 2013

h-example is a microformats-2 schema (?) for representing Examples. It builds upon the classic hExample microformat.

Translations: link to each translation as hCard does

TODO: properties first or examples first? returning viewers are most likely to want quick reference to properties, first time viewers are most likely to want an example. Perhaps do as hCard does with the property list => markup 1:1 thing, unless that ends up looking too noisy?

Properties

For each property, give:

  • classname e.g. p-name
  • legacy BC classname
  • meaning e.g. The name of the example
  • example value e.g. “An example of an artisanal banana-peeling pattern”
    • full element

Example:

  • p-name (was fn): The name of the example
    • E.G. <span class="p-name">Banana #1</span>

TODO: how to handle properties which probably should be a nested microformat but can also be a plain value? E.G. author:

  • p-author (was author): The author of the example. Optionally an h-card

Examples

Ideally all examples will be shown 1:1 with their JSON representation, OR editable with JS to submit it to a parser and show the JSON — this would encourage people to experiment and greater understand the relationship between markup and parsed structure.

Minimal sane example (if applicable e.g. implied h-card):

Meatier example:

<div class="h-example">
  <span class="p-name">An Example Example</span>
  
  <p>Published <time class="dt-published" datetime="2013-05-02 12:00:00">two days ago</time></p>
  
  <p class="p-author h-card">Mr. Author</p>
  
  <img class="u-photo" src="http://cdn.memegenerator.net/instances/400x/38481344.jpg" alt="" />
  
  <p class="p-summary">An example example showing you how to example</p>
</div>