breadcrumbs-brainstorming - Revision history

Aaronpk: Replace with {{DISPLAYTITLE:}}

2020-07-18T16:21:08Z

Replace <entry-title> with {{DISPLAYTITLE:}}

← Older revision		Revision as of 16:21, 18 July 2020
Line 1:		Line 1:
	~~<entry-title>~~breadcrumbs brainstorming~~</entry-title>~~		{{DISPLAYTITLE:breadcrumbs brainstorming}}

	This page is for documenting proposals for a [[breadcrumbs]] microformat per the microformats [[process]]:		This page is for documenting proposals for a [[breadcrumbs]] microformat per the microformats [[process]]:

Tantek: JSON outputs updated/fixed/added

2013-03-07T01:07:32Z

JSON outputs updated/fixed/added

← Older revision		Revision as of 01:07, 7 March 2013
Line 26:		Line 26:
	Use <code>class="h-breadcrumb"</code> on each breadcrumb hyperlink. E.g. here's a breadcrumb example from [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google's breadcrumb documentation] about a page for a particular dress (all breadcrumbs indicate ancestor pages)		Use <code>class="h-breadcrumb"</code> on each breadcrumb hyperlink. E.g. here's a breadcrumb example from [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google's breadcrumb documentation] about a page for a particular dress (all breadcrumbs indicate ancestor pages)
	<source lang=html4strict>		<source lang=html4strict>
	<a href="http://~~www.~~example.com/dresses">Dresses</a> ›		<a href="http://example.com/dresses">Dresses</a> ›
	<a href="http://~~www.~~example.com/dresses/real">Real Dresses</a> ›		<a href="http://example.com/dresses/real">Real Dresses</a> ›
	<a href="http://~~www.~~example.com/dresses/real/green">Real Green Dresses</a>		<a href="http://example.com/dresses/real/green">Real Green Dresses</a>
	</source>		</source>

Line 34:		Line 34:

	<source lang=html4strict>		<source lang=html4strict>
	<a class="h-breadcrumb" href="http://~~www.~~example.com/dresses">Dresses</a> ›		<a class="h-breadcrumb" href="http://example.com/dresses">Dresses</a> ›
	<a class="h-breadcrumb" href="http://~~www.~~example.com/dresses/real">Real Dresses</a> ›		<a class="h-breadcrumb" href="http://example.com/dresses/real">Real Dresses</a> ›
	<a class="h-breadcrumb" href="http://~~www.~~example.com/dresses/real/green">Real Green Dresses</a>		<a class="h-breadcrumb" href="http://example.com/dresses/real/green">Real Green Dresses</a>
	</source>		</source>

	This might be rendered as: (live example)		This might be rendered as: (live example)

	<span class="h-breadcrumb">[http://~~www.~~example.com/dresses Dresses]</span> › <span class="h-breadcrumb">[http://~~www.~~example.com/dresses/real Real Dresses]</span> › <span class="h-breadcrumb">[http://~~www.~~example.com/dresses/real/green Real Green Dresses]</span>		<span class="h-breadcrumb">[http://example.com/dresses Dresses]</span> › <span class="h-breadcrumb">[http://example.com/dresses/real Real Dresses]</span> › <span class="h-breadcrumb">[http://example.com/dresses/real/green Real Green Dresses]</span>

	Compared to existing alternatives ([http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f Bing], [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google]), the <code>h-breadcrumb</code> microformats markup is much simpler.		Compared to existing alternatives ([http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f Bing], [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google]), the <code>h-breadcrumb</code> microformats markup is much simpler.
Line 57:		Line 57:
	"properties": {		"properties": {
	"name": ["Dresses"],		"name": ["Dresses"],
	"url": ["http://~~www.~~example.com/dresses"]		"url": ["http:\/\/example.com\/dresses"]
	}		}
	},		},
Line 63:		Line 63:
	"properties": {		"properties": {
	"name": ["Real Dresses"],		"name": ["Real Dresses"],
	"url": ["http://~~www.~~example.com/dresses/real"]		"url": ["http:\/\/example.com\/dresses\/real"]
	}		}
	{ "type": ["h-breadcrumb"],		{ "type": ["h-breadcrumb"],
	"properties": {		"properties": {
	"name": ["Real Green Dresses"],		"name": ["Real Green Dresses"],
	"url": ["http://~~www.~~example.com/dresses/real/green"]		"url": ["http:\/\/example.com\/dresses\/real\/green"]
	}		}
	}		}
Line 106:		Line 106:
	Thus the markup is still much simpler than existing alternatives which require much more explicit markup.		Thus the markup is still much simpler than existing alternatives which require much more explicit markup.

	~~JSON output:~~		JSON output as produced by a conformant [[microformats2]] processor parsing this example:
	* TODO: add JSON output as produced by a conformant [[microformats2]] processor.		<source lang=javascript>
			{
			"items": [
			{ "type": ["h-breadcrumb"],
			"properties": {
			"name": ["Books"],
			"url": ["http:\/\/example.com\/books"]
			},
			"children": [
			{ "type": ["h-breadcrumb"],
			"properties": {
			"name": ["Authors"],
			"url": ["http:\/\/example.com\/books\/authors"]
			},
			"children": [
			{ "type": ["h-breadcrumb"],
			"properties": {
			"name": ["Stephen King"],
			"url": ["http:\/\/example.com\/books\/authors\/stephenking"]
			}
			}
			]
			}
			]
			},
			{ "type": ["h-breadcrumb"],
			"properties": {
			"name": ["Books"],
			"url": ["http:\/\/example.com\/books"]
			},
			"children": [
			{ "type": ["h-breadcrumb"],
			"properties": {
			"name": ["Fiction"],
			"url": ["http:\/\/example.com\/books\/fiction"]
			},
			"children": [
			{ "type": ["h-breadcrumb"],
			"properties": {
			"name": ["Horror"],
			"url": ["http:\/\/example.com\/books\/fiction\/horror"]
			}
			}
			]
			}
			]
			}
			]
			}
			</source>

	==== FAQ ====		==== FAQ ====
	<div class="discussion">		<div class="discussion">
	* Why do you nest the breadcrumbs?		* Why do you nest the breadcrumbs?
	** You nest the breadcrumbs only when there are multiple breadcrumb paths on a page. So processors ~~can~~ distinguish ~~each path~~ instead of assuming all breadcrumbs on the page are part of one path.		** You nest the breadcrumbs only when there are multiple breadcrumb paths on a page. Nesting is needed for processors to distinguish the paths instead of assuming all breadcrumbs on the page are part of one path.

	== see also ==		== see also ==

Tantek: JSON output for simple example

2013-03-07T00:33:23Z

JSON output for simple example

@@ Line 50: / Line 50: @@
 Consuming processors simply treat the set of breadcrumbs in document order as the set of breadcrumb ancestors, first being the top, and last breadcrumb being the immediate parent of the current page.
-JSON output:
+JSON output as produced by a conformant [[microformats2]] processor parsing the simple example above:
-* TODO: add JSON output as produced by a conformant [[microformats2]] processor.
+<source lang=javascript>
 ==== multiple breadcrumb paths ====

Tantek: /* h-breadcrumb */ add subsections, FAQ for the question JonathanNeal asked, live example

2013-03-07T00:16:53Z

h-breadcrumb: add subsections, FAQ for the question JonathanNeal asked, live example

← Older revision		Revision as of 00:16, 7 March 2013
Line 18:		Line 18:
	profile/itemtype: <nowiki>http://microformats.org/profile/h-breadcrumb</nowiki>		profile/itemtype: <nowiki>http://microformats.org/profile/h-breadcrumb</nowiki>

			==== properties ====
	properties:		properties:
	* '''<code>p-name</code>'''		* '''<code>p-name</code>'''
	* '''<code>u-url</code>'''		* '''<code>u-url</code>'''

			==== example ====
	Use <code>class="h-breadcrumb"</code> on each breadcrumb hyperlink. E.g. here's a breadcrumb example from [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google's breadcrumb documentation] about a page for a particular dress (all breadcrumbs indicate ancestor pages)		Use <code>class="h-breadcrumb"</code> on each breadcrumb hyperlink. E.g. here's a breadcrumb example from [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google's breadcrumb documentation] about a page for a particular dress (all breadcrumbs indicate ancestor pages)
	<source lang=html4strict>		<source lang=html4strict>
Line 36:		Line 38:
	<a class="h-breadcrumb" href="http://www.example.com/dresses/real/green">Real Green Dresses</a>		<a class="h-breadcrumb" href="http://www.example.com/dresses/real/green">Real Green Dresses</a>
	</source>		</source>

			This might be rendered as: (live example)

			<span class="h-breadcrumb">[http://www.example.com/dresses Dresses]</span> › <span class="h-breadcrumb">[http://www.example.com/dresses/real Real Dresses]</span> › <span class="h-breadcrumb">[http://www.example.com/dresses/real/green Real Green Dresses]</span>

	Compared to existing alternatives ([http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f Bing], [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google]), the <code>h-breadcrumb</code> microformats markup is much simpler.		Compared to existing alternatives ([http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f Bing], [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google]), the <code>h-breadcrumb</code> microformats markup is much simpler.

	The simpler microformats markup is possible since <code>p-name</code> and <code>u-url</code> properties are two of the implied [[microformats2]] properties and there is no need to explicitly specify them.		The simpler microformats markup is possible since <code>p-name</code> and <code>u-url</code> properties are two of the implied [[microformats2]] properties and there is no need to explicitly specify them in common cases (e.g. when a single hyperlink element provides all the information).

			==== consuming processors ====
	Consuming processors simply treat the set of breadcrumbs in document order as the set of breadcrumb ancestors, first being the top, and last breadcrumb being the immediate parent of the current page.		Consuming processors simply treat the set of breadcrumbs in document order as the set of breadcrumb ancestors, first being the top, and last breadcrumb being the immediate parent of the current page.

Line 46:		Line 53:
	* TODO: add JSON output as produced by a conformant [[microformats2]] processor.		* TODO: add JSON output as produced by a conformant [[microformats2]] processor.

			==== multiple breadcrumb paths ====
	If a page has multiple breadcrumb paths to the current document, then more explicit markup must be used. Pre-existing formats use an explicit "child" property to do this. However, since nested microformats are automatically [[microformats2-parsing\|parsed]] into a children collection in their parent microformat, we can use that mechanism for multiple breadcrumb paths on a page.		If a page has multiple breadcrumb paths to the current document, then more explicit markup must be used. Pre-existing formats use an explicit "child" property to do this. However, since nested microformats are automatically [[microformats2-parsing\|parsed]] into a children collection in their parent microformat, we can use that mechanism for multiple breadcrumb paths on a page.

Line 73:		Line 80:

	In this case we:		In this case we:
	* have to use an explicit <code>p-name</code> properties to distinguish the name of the breadcrumbs that contain other breadcrumbs		* have to use explicit <code>p-name</code> properties to distinguish the name of the breadcrumbs that contain other breadcrumbs
	* can still rely upon implied <code>u-url</code>, since there is only one hyperlink that is an direct child of each breadcrumb		* can still rely upon implied <code>u-url</code>, since there is only one hyperlink that is a direct child of each breadcrumb
	Thus the markup is still ~~incredibly~~ simpler than existing alternatives which require much more explicit markup.		Thus the markup is still much simpler than existing alternatives which require much more explicit markup.

	JSON output:		JSON output:
	* TODO: add JSON output as produced by a conformant [[microformats2]] processor.		* TODO: add JSON output as produced by a conformant [[microformats2]] processor.

			==== FAQ ====
			<div class="discussion">
			* Why do you nest the breadcrumbs?
			** You nest the breadcrumbs only when there are multiple breadcrumb paths on a page. So processors can distinguish each path instead of assuming all breadcrumbs on the page are part of one path.

	== see also ==		== see also ==

Tantek: include self in links in process section, todo, include JSON output of examples

2013-03-06T18:58:26Z

include self in links in process section, todo, include JSON output of examples

← Older revision		Revision as of 18:58, 6 March 2013
Line 4:		Line 4:
	* [[breadcrumbs-examples]]		* [[breadcrumbs-examples]]
	* [[breadcrumbs-formats]]		* [[breadcrumbs-formats]]
			* [[breadcrumbs-brainstorming]]

	== analysis of existing formats ==		== analysis of existing formats ==
Line 41:		Line 42:

	Consuming processors simply treat the set of breadcrumbs in document order as the set of breadcrumb ancestors, first being the top, and last breadcrumb being the immediate parent of the current page.		Consuming processors simply treat the set of breadcrumbs in document order as the set of breadcrumb ancestors, first being the top, and last breadcrumb being the immediate parent of the current page.

			JSON output:
			* TODO: add JSON output as produced by a conformant [[microformats2]] processor.


	If a page has multiple breadcrumb paths to the current document, then more explicit markup must be used. Pre-existing formats use an explicit "child" property to do this. However, since nested microformats are automatically [[microformats2-parsing\|parsed]] into a children collection in their parent microformat, we can use that mechanism for multiple breadcrumb paths on a page.		If a page has multiple breadcrumb paths to the current document, then more explicit markup must be used. Pre-existing formats use an explicit "child" property to do this. However, since nested microformats are automatically [[microformats2-parsing\|parsed]] into a children collection in their parent microformat, we can use that mechanism for multiple breadcrumb paths on a page.
Line 71:		Line 76:
	* can still rely upon implied <code>u-url</code>, since there is only one hyperlink that is an direct child of each breadcrumb		* can still rely upon implied <code>u-url</code>, since there is only one hyperlink that is an direct child of each breadcrumb
	Thus the markup is still incredibly simpler than existing alternatives which require much more explicit markup.		Thus the markup is still incredibly simpler than existing alternatives which require much more explicit markup.

			JSON output:
			* TODO: add JSON output as produced by a conformant [[microformats2]] processor.


	== see also ==		== see also ==

Tantek: draft based on the two common properties of existing breadcrumb formats, and microformats2 capabilities

2013-03-06T18:45:25Z

draft based on the two common properties of existing breadcrumb formats, and microformats2 capabilities

New page

<entry-title>breadcrumbs brainstorming</entry-title>

This page is for documenting proposals for a [[breadcrumbs]] microformat per the microformats [[process]]:
* [[breadcrumbs-examples]]
* [[breadcrumbs-formats]]

== analysis of existing formats ==
Existing [[breadcrumbs-formats]] have a high degree of overlap in terms of what properties they use:
* name/title
* url
* child (all but schema)
And they all agree on calling breadcrumbs, "breadcrumbs", and the singular for the individual breadcrumbs. This should be taken into consideration for any proposed breadcrumbs format.

== proposals ==
=== h-breadcrumb ===
root class name: '''<code>h-breadcrumb</code>'''<br/>
profile/itemtype: <nowiki>http://microformats.org/profile/h-breadcrumb</nowiki>

properties:
* '''<code>p-name</code>'''
* '''<code>u-url</code>'''

Use <code>class="h-breadcrumb"</code> on each breadcrumb hyperlink. E.g. here's a breadcrumb example from [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google's breadcrumb documentation] about a page for a particular dress (all breadcrumbs indicate ancestor pages)
<source lang=html4strict>
<a href="http://www.example.com/dresses">Dresses</a> ›
<a href="http://www.example.com/dresses/real">Real Dresses</a> ›
<a href="http://www.example.com/dresses/real/green">Real Green Dresses</a>
</source>

With h-breadcrumb:

<source lang=html4strict>
<a class="h-breadcrumb" href="http://www.example.com/dresses">Dresses</a> ›
<a class="h-breadcrumb" href="http://www.example.com/dresses/real">Real Dresses</a> ›
<a class="h-breadcrumb" href="http://www.example.com/dresses/real/green">Real Green Dresses</a>
</source>

Compared to existing alternatives ([http://www.bing.com/webmaster/help/markup-breadcrumbs-72419f3f Bing], [http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185417 Google]), the <code>h-breadcrumb</code> microformats markup is much simpler.

The simpler microformats markup is possible since <code>p-name</code> and <code>u-url</code> properties are two of the implied [[microformats2]] properties and there is no need to explicitly specify them.

Consuming processors simply treat the set of breadcrumbs in document order as the set of breadcrumb ancestors, first being the top, and last breadcrumb being the immediate parent of the current page.

If a page has multiple breadcrumb paths to the current document, then more explicit markup must be used. Pre-existing formats use an explicit "child" property to do this. However, since nested microformats are automatically [[microformats2-parsing|parsed]] into a children collection in their parent microformat, we can use that mechanism for multiple breadcrumb paths on a page.

Example (re-used again from the Google documentation) of multiple breadcrumb paths on a page for a specific Stephen King book:
<source lang=html4strict>
<div class="h-breadcrumb">
<a class="p-name" href="http://example.com/books">Books</a> ›
<div class="h-breadcrumb">
<a class="p-name" href="http://example.com/books/authors">Authors</a> ›
<div class="h-breadcrumb">
<a href="http://example.com/books/authors/stephenking">Stephen King</a>
</div>
</div>
</div>

<div class="h-breadcrumb">
<a class="p-name" href="http://example.com/books">Books</a> ›
<div class="h-breadcrumb">
<a class="p-name" href="http://example.com/books/fiction">Fiction</a> ›
<div class="h-breadcrumb">
<a href="http://example.com/books/fiction/horror">Horror</a>
</div>
</div>
</div>
</source>

In this case we:
* have to use an explicit <code>p-name</code> properties to distinguish the name of the breadcrumbs that contain other breadcrumbs
* can still rely upon implied <code>u-url</code>, since there is only one hyperlink that is an direct child of each breadcrumb
Thus the markup is still incredibly simpler than existing alternatives which require much more explicit markup.

== see also ==
* [[breadcrumbs]]
* [[breadcrumbs-examples]]
* [[breadcrumbs-formats]]
* [[microformats2]]
* [[microformats2-parsing]]