search-results-example
From Microformats
| Table of contents |
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 OpenSearch Response (http://opensearch.a9.com/spec/opensearchresponse/1.1/) 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
<table>
<tr>
<th>-ent</th>...
Body
<tr class="vcard">
<td class="-ent">2</td>
[only after I modified it]
Footer
<a href="/users/list?page=2">Next page</a>
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"/>
Google (http://www.google.com/search?hl=en&q=microformats&btnG=Google+Search)
Header:
<font size=-1 color=>Results <b>1</b> - <b>10</b> of about <b>398,000</b> for <b><b>microformats</b></b>. (<b>0.09</b> seconds) </font>
Item:
<!--a--><div><p class=g><!--m--><a href="http://microformats.org/"><b>microformats</b></a><br> <font size=-1>Tantek reports about the <b>microformats</b> lab at FOOCamp, with Dave McClure <b>...</b><br> On Friday night, Kevin and I did an impromptu talk on <b>microformats</b> at BarCamp. <b>...</b> <br><font color=#008000><b>microformats</b>.org/ - 30k - Oct 15, 2005 - </font><nobr> <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></nobr></font><!--n-->
Footer:
<table border=0 cellpadding=0 width=1% cellspacing=0 align=center><tr align=center valign=top> <td valign=bottom nowrap> <font size=-1>Result Page: </font> <td nowrap><img src=/nav_first.gif width=18 height=26 alt=""><br> <td nowrap><img src=/nav_current.gif width=16 height=26 alt=""><br><span class=i>1</span> <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><br>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><br>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><br>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><br>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><br>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><br>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><br>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><br>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><br>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><br><span class=b>Next</span></a></table>
[Example #2 (url)]
pre escaped <tags>
Existing Practices
- Summary of common patterns discovered
- Other attempts to solve The Problem
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
