Microformats Wiki - User contributions [en]

quotes

2006-03-25T16:28:52Z

1143304322:

= Quotes =
A page for collecting interesting quotes related to microformats.

* "You have a saying, 'to kill two birds with one stone.' But our way is to kill just one bird with one stone." - Shunryu Suzuki [http://microformats.org/discuss/mail/microformats-discuss/2005-October/001482.html introduced]
* "Tools work best when they mimic what human beings do naturally. Not vice versa." -- Dr. Ernie, 10/18/2005 [http://microformats.org/discuss/mail/microformats-discuss/2005-October/001494.html source]

<div style="display:none">
[l_sp]
<a href="http://test.com"> test</a>

</div>

reuse

2006-03-25T16:28:44Z

1143304322:

= Reuse =

This page is a stub, to be filled out with an explanation of one of the [[microformats#the_microformats_principles|microformats principles]].

<div style="display:none">
[l_sp]
<a href="http://test.com"> test</a>

</div>

blog-description-format-brainstorming

2006-03-25T16:28:35Z

1143304322:

= Blog description format (brainstorming)=
__TOC__

== Discussion Participants ==

=== Editors ===
* [http://bs-markup.de Björn Seibert], [http://rbach.priv.at/ Robert Bachmann]

=== Authors ===
* [http://bs-markup.de Björn Seibert], [http://rbach.priv.at/ Robert Bachmann]

== Purpose ==
A microformat to describe the contents of a (we)blog. It provides a specific set of information to categorize a (we)blog. Enables easier search for humans and efficient collection of information by machines.

Here are some of examples for information that might be provided:

* Details about the blog
* Blog name (e.g: "John Doe's Blog")
** Blog URI (e.g: http://example.org/ )
** Lanuage used for the blog, read-able by machines (e.g: "en-US" or "de")
** Topics covered by the blog
** A short description
** Available feeds (RSS, Atom, etc.)
** A small logo image
* Details about the author(s)
** Name (e.g: "John Doe")
** Organisation
** Contact details
** Geographical Location

== Theoretical examples ==

<pre><nowiki>
<div class="blogformat" xml:lang="en">
<p><img class="logo" alt="" src="http://rbach.priv.at/Misc/2005/Smiley.gif" />
<a class="author" href="http://example.org/jdoe">My</a>
<a class="bookmark" href="http://example.org/blog" title="John Doe's Blog">blog</a>
about
<span class="description">
<a rel="tag" href="http://technorati.com/tags/web+standards">Web standards</a>,
<a rel="tag" href="http://technorati.com/tags/css">CSS</a>,
<a rel="tag" href="http://technorati.com/tags/xhtml">XHTML</a>
and topics releated to web development.</span></p>
<p>There are
<a rel="alternate" type="application/atom+xml" href="http://example.org/feeds/atom">Atom</a> and
<a rel="alternate" type="application/rss+xml" href="http://example.org/feeds/rss">RSS 2.0</a>
feeds available.</p>
</div>
</nowiki></pre>

See [http://rbach.priv.at/Misc/2005/BlogDescriptionMicroformat/ExamplesForBrainstorming.html#example2 here] or [http://www.bs-markup.de/info.php there] for a rendered version of this example.

== Strawman proposal ==

Text in ''italics'' is used as reference to the comments below.

=== Blog information container ===

The blog information container element contains all other elements of the blog description.

It '''must''' have a class attribute which includes the value <code>blogformat</code>.

=== Language ===

The blog information container element or an ancestor element ''(langanc)'' of it '''must''' include
a language code using the <code>xml:lang</code> attribute to indicate the language used for the blog.

If the document type used by the author allows the usage of the <code>lang</code>
attribute, it must be used to specify the language code.
The value '''must''' be equal to the one used for <code>xml:lang</code>. ''(langequ)''

Example 1:
<pre><nowiki>

<div class="blogformat" lang="en-US" xml:lang="en-US">

</div>
</nowiki></pre>

Example 2:
<pre><nowiki>

<div class="blogformat" lang="fr" xml:lang="fr">

</div>
</nowiki></pre>

=== Blog URI ===

The blog URI element '''must''' be an <code><a></code> element and '''must''' contain a <code>rel</code> attribute which includes the value <code>bookmark</code>.

It must link to the blog's mainpage using an absolute URI ''(absuri)''.

This element '''should''' provide the name of the blog in its <code>title</code> attribute.

If no <code>title</code> attribute is provided agents ''(agents)'' '''must''' use the text value of the blog URI element ''(meta)''.

=== Blog description and topics ===

It contains the main categories covered by the blog.

The categories are marked up within anchors ''(cat)'' that (may) refer to technorati-tags.

Example:
<pre><nowiki><a rel="tag" href="http://technorati.com/tags/xhtml">XHTML</a></nowiki></pre>

In addition authors can write up a short introduction.

=== Author information ===

Information about the author '''should''' be provided.

The author information element '''must''' have a class attribute which includes the value <code>author</code>. This element '''should''' provide the name of the author
in its <code>title</code> attribute.

Example:
<pre><nowiki><span class="author" title="John Doe">John's</span> Blog.</nowiki></pre>

If no <code>title</code> attribute is provided agents ''(agents)'' '''must''' use the text value of the author information element ''(meta'').

The author information element may be an <code><a></code> element which links
to the author's page using an absolute URI ''(absuri)'' or may be some other element containing
an [[hcard]].

Example:
<pre><nowiki>
<a class="author" title="John Doe"
href="http://example.org/~johnd/">John's</a> Blog.
</nowiki></pre>

=== Feeds ===

''To be done.''

Perhaps using
<a rel="alternate" type="application/atom+xml" href="http://example.org/feeds/atom">Atom</a>
<a rel="alternate" type="application/rss+xml" href="http://example.org/feeds/rss">RSS 2.0</a>

(Maybe the already used
<link rel="alternate" type="application/rss+xml" href="http://example.org/feeds/rss" title="RSS 2.0" />
is enough? --RobertBachmann
)
=== Image ===

''To be done.''

=== Comments ===
* (langanc): There are XHTML documents which already have their language specified in the <html> tag. In this case it would be redundant to require having it twice. --[[User:RobertBachman |RobertBachmann]]

* (langequ): See http://microformats.org/discuss/mail/microformats-discuss/2005-July/000440.html. --[[User:RobertBachman |RobertBachmann]]

* (absuri): As long as we are parsing blog information from the original URI, handling relative URIs isn't a big problem. I think we should recommend the use of absolute URIs ("absolute URIs '''should''' be used") but I'm not sure if we should require them. --[[User:RobertBachman |RobertBachmann]]

* (agent): Is agent the right term? --[[User:RobertBachman |RobertBachmann]]

* (meta): Perhaps agent would want to extract information from <code><head></code> if no information can be found within "blogformat"
**<code><link rel="author" href="http://example.org/~jdoe" /></code>
**<code><meta name="author" value="John Doe" /></code>
**<code><title>John Doe's Blog</title></code>
--[[User:RobertBachman |RobertBachmann]]

* (cat): '''May''', '''should''' or '''must''' they be within anchors. What are the options where they can point to? --[[User:BjoernSeibert |BjoernSeibert]]

== See also ==
* [[blog-description-format]] (background research)

<div style="display:none">
[l_sp]
<a href="http://test.com"> test</a>

</div>

how-to-play

2006-03-25T16:28:25Z

1143304322:

Before contributing please observe these guidelines:

# You have to create an account (see [http://en.wikipedia.org/wiki/Wikipedia:Username Wikipedia Username guidelines]) before editing/creating pages.
# Try one of the [http://microformats.org/discuss mailing lists] first.
# If you write something opinionated, sign it with your username.
# Please only create pages directly relating to microformats on this wiki. Other pages will likely be deleted.
# Please obey the [[naming-conventions| naming conventions]] for pages.
# Don't use talk pages. See #2.
# Please try to ensure that you produce valid XHTML.
# When you paste code, add some line breaks at a reasonable width.

<div style="display:none">
[l_sp]
<a href="http://test.com"> test</a>

</div>

photo-note-examples

2006-03-25T16:28:16Z

1143304322:

= Photo Note Examples =

This is a concrete discussion of what exists right now in the specific problem area of annotating areas of photos with notes.

This is a very specific type of [[media-info]] that is not as generic as [[media-info-examples]] in general.

== Contributors ==

* Tantek Çelik
* Greg Elin

== Examples ==

* http://fotonotes.net
** http://fotonotes.net
** ordered list of notes, each note has unique ID
** each note has:
*** rectangle / boundingbox
*** unique id
*** title (thought of as human readable alias for unique id)
*** content - plain text
*** author of the note
*** date of annotation

* http://www.frankmanno.com/ideas/css-imagemap/
** CSS based image maps

* http://evan.nixsys.bz/note
** CSS based image maps

* http://bayareafreefi.com/city.php?city=San%20Francisco
** uses standard text formatting
** imagemaps with onmouseover events to load the text to display

* http://conflix.soe.umich.edu/photos/collections/KyleHelson/9/annotation/
** divs containing spans of plain text, very unexciting.

* http://flickr.com
** http://flickr.com/photos/tantek/64877881/
** ordered list of notes (there is an order because if they overlap, the latter one "wins" in terms of hover)
** each note has:
*** rectangle
*** content - hypertext markup
*** author of the note (left blank and implied for first-person notes)

* fotobuzz (has based their stuff on fotonotes, without attribution.)
** http://2entwine.com/screenshots/pic5.html (haven't found an editable one yet)
** http://fotobuzz.org/ displays an example containing multiple comments within one "note"
** plain text, although they display their data in flash
** rectangles.

<div style="display:none">
[l_sp]
<a href="http://test.com"> test</a>

</div>