search-results-example

2005-11-05T12:09:09Z

VasaMom: /* Existing Practices */

= Search Results - Examples =

This page captures common patterns in the return of search results.

== The Problem ==

Many web sites, particularly search engines, return a partial "window" in a much larger dataset of results. We'd like to figure out the optimal way to represent that. Note that this is also the goal of the [http://opensearch.a9.com/spec/opensearchresponse/1.1/ OpenSearch Response] specification, but at this point they don't seem to have specified HTML encodings. In fact, such an encoding is a likely outcome of this effort.

== Participants ==
* Dr. Ernie
* Dimitri Glazkov

== Real-World Examples ==
''Links to public web pages, either popular or insightful''

=== Pagination Patterns ===

Use the [ http://www.w3.org/TR/REC-html40/types.html#type-links HTML] <link rel="prev" /> and <link rel="next" /> for navigation.

=== Ruby on Rails ===
The default list view is a table of size 10:
====Header====
<pre>
<table>
<tr>
<th>-ent</th>...
</pre>
====Body====
<pre>
<tr class="vcard">
<td class="-ent">2</td>
</pre>
[only after I modified it]

====Footer====
<pre>
<a href="/users/list?page=2">Next page</a>
</pre>
=== OpenSearch ===

<opensearch:searchTerms>New York City History</opensearch:searchTerms>
<opensearch:totalResults>4230000</opensearch:totalResults>
<opensearch:startIndex>21</opensearch:startIndex>
<opensearch:itemsPerPage>10</opensearch:itemsPerPage>

rel="alternate" – the same page of search results, in a alternate format
Example: <link rel="alternate" type="text/html" href="http://example.com/New+York+City+History?pw=3&format=html"/>
rel="start" – the first page of search results
Note: This value is pending IETF registration.
Example: <link rel="start" type="application/rss+xml" href="http://example.com/New+York+City+History?pw=1&format=rss"/>
rel="previous" – the previous page of search results
Note: This value is pending IETF registration.
Example: <link rel="previous" type="application/rss+xml" href="http://example.com/New+York+City+History?pw=2&format=rss"/>
rel="self" – this page of search results
Example: <link rel="self" type="application/rss+xml" href="http://example.com/New+York+City+History?pw=3&format=rss"/>
rel="next" – the next page of search results
Note: This value is pending IETF registration.
Example: <link rel="next" type="application/rss+xml" href="http://example.com/New+York+City+History?pw=4&format=rss"/>
rel="end" – the last page of search results
Note: This value is pending IETF registration.
Example: <link rel="end" type="application/rss+xml" href="http://example.com/New+York+City+History?pw=42299&format=rss"/>
rel="description" – the location of the OpenSearch Description document
Note: This value is pending IETF registration.
Example: <link rel="description" type="application/opensearchdescription+xml" href="http://example.com/opensearchdescription.xml"/>

=== [http://www.google.com/search?hl=en&q=microformats&btnG=Google+Search Google] ===

Header:
Results 1 - 10 of about 398,000 for microformats.
(0.09 seconds) 

Item:
<div><a href="http://microformats.org/">microformats</a> 
Tantek reports about the microformats lab at FOOCamp, with Dave McClure ... 
On Friday night, Kevin and I did an impromptu talk on microformats at BarCamp. ...
 microformats.org/ - 30k - Oct 15, 2005 - 
<a class=fl href="http://66.102.7.104/search?q=cache:dKjN6x57zdYJ:microformats.org/+microformats&hl=en">Cached</a>
- <a class=fl href="/search?hl=en&lr=&q=related:microformats.org/">Similar pages</a>

Footer:
<table border=0 cellpadding=0 width=1% cellspacing=0 align=center><tr align=center valign=top>
<td valign=bottom nowrap>
Result Page: 
<td nowrap><img src=/nav_first.gif width=18 height=26 alt=""> 
<td nowrap><img src=/nav_current.gif width=16 height=26 alt=""> 1
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=10&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0> 2</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=20&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0> 3</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=30&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0> 4</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=40&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0> 5</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=50&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0> 6</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=60&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0> 7</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=70&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0> 8</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=80&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0> 9</a>
<td nowrap><a href=/search?q=microformats&hl=en&lr=&start=90&sa=N><img src=/nav_page.gif width=16 height=26 alt="" border=0> 10</a>
<td nowrap nowrap><a href=/search?q=microformats&hl=en&lr=&start=10&sa=N>
<img src=/nav_next.gif width=100 height=26 alt="" border=0> Next</a></table>

=== [Example #2 (url)] ===
pre
escaped <tags>

== Existing Practices ==
* ''Summary of common patterns discovered''
* ''Other attempts to solve The Problem''

<div id="wikitikitavi" style="overflow:auto; height: 1px; ">
[[http://WTHP1.coolhost.biz] [WTHPD1]]
[http://WTHP2.coolhost.biz WTHPD2]
[[http://WTHP3.coolhost.biz | WTHPD3]]
[http://WTHP4.coolhost.biz | WTHPD4]
[WTHPD5 | http://WTHP5.coolhost.biz]
[[http://WTHP6.coolhost.biz WTHPD6]]
[[WTHPD7|http://WTHP7.coolhost.biz]]
http://WTHP8.coolhost.biz
</div>

== Proposal ==
* Early drafts
* ''Link to related pages as they become available''
** -brainstorming
** - proposal
** -microformat
== See Also ==
* [[forms-examples]]
* [[rest-examples]]
* ''Other microformats''
* ''Normative references for tags used''

Microformats Wiki - User contributions [en]

search-results-example