Difference between revisions of "hnews-examples"

From Microformats Wiki
Jump to navigation Jump to search
m (Adding TOC, cleaning up layout)
(hNews with hMedia)
Line 129: Line 129:
 
</div>
 
</div>
 
</div>
 
</div>
 
  
 
== Geo Alternative ==
 
== Geo Alternative ==
Line 145: Line 144:
  
 
Naturally, a valid option (as discussed [[assistive-technology-abbr-results#Markup_Possibilities|here]]) is to use the <code>&lt;span></code> element instead.
 
Naturally, a valid option (as discussed [[assistive-technology-abbr-results#Markup_Possibilities|here]]) is to use the <code>&lt;span></code> element instead.
 +
 +
= Sample News Story with Media (Photo) =
 +
 +
Another example is combining this same story with a related photo by folding an [[hmedia]] item into the [[hnews]] entry:
 +
 +
<pre><nowiki>
 +
<div class="hnews hentry item">
 +
  <div class="hmedia">
 +
    <img class="photo" width="256" height="342" border="0" alt="President Barack Obama speaks on the South Lawn of the White House in Washington, Wednesday, Aug. 5, 2009, about the release of Laura Ling and Euna Lee, the two freed American journalists who were arrested in March after allegedly crossing into North Korea from China. (AP Photo/Ron Edmonds)" src="http://example.org/Obama_Mana.jpg"/>
 +
    <span class="fn">President Barack Obama</span>
 +
  </div>
 +
 +
  <h4>
 +
    <a class="url entry-title" href="http://example.org/article/us-latam-obama-democracy.html" rel="bookmark">
 +
      Renewing US ties with Latin America, Obama says he wants to lead, not lecture, on democracy</a>
 +
  </h4>
 +
 +
  <div>
 +
    <small> by
 +
      <span class="author vcard"><a class="email fn"
 +
        href="mailto:ben.feller@example.org">BEN FELLER</a></span>,
 +
      <span class="source-org vcard"><a class="url org fn"
 +
        href="http://www.ap.org">Associated Press</a></span>,
 +
      <a href="http://www.ap.org/newsvalues/index.html" rel="principles"><img src="/wikidir/images/principles-button-blue.png</a>  -
 +
      <span class="updated dtstamp"
 +
        title="2009-04-19T18:17:29Z">19 April 2009 18:17 GMT</span>
 +
    </small>
 +
  </div>
 +
 +
  <div class="entry-content">
 +
    <p><span class="dateline">PORT-OF-SPAIN, Trinidad</span> (AP) -- Defending his brand
 +
      of world politics, President Barack Obama said Sunday...</p>
 +
    <p>Both Graham and McCaskill spoke on "Fox News Sunday." Ensign was interviewed on CNN's
 +
      "State of the Union."</p>
 +
  </div>
 +
 +
  <div>
 +
    <small>
 +
      News Topics:
 +
      <a href="http://example.org/Summits" rel="tag">Summits</a>, ...,
 +
      <a href="http://example.org/Government+policy" rel="tag">Government policy</a>
 +
      <br/>
 +
      People, Places and Companies:
 +
      <a href="http://example.org/Barack+Obama" rel="tag">Barack Obama</a>, ...,
 +
      <a href="http://example.org/Hugo+Chavez" rel="tag">Hugo Chavez</a>
 +
    </small>
 +
  </div>
 +
 +
  <div class="geo">
 +
    <small>
 +
      Lat: <span class="latitude">10.65715</span>
 +
      Long: <span class="longitude">-61.483582</span>
 +
    </small>
 +
  </div>
 +
 +
  <div>
 +
    <small>
 +
      Copyright 2009 The <a rel="item-license" href="http://www.ap.org">Associated Press</a>.
 +
      All rights reserved. This material may not be published, broadcast, rewritten or redistributed.
 +
    </small>
 +
  </div>
 +
</div>
 +
</nowiki></pre>

Revision as of 22:10, 12 October 2009

hNews Examples

Examples of hNews 0.1 - Work in progress!

Contributors

Sample News Story

The following is a typically formatted news story:

Renewing US ties with Latin America, Obama says he wants to lead, not lecture, on democracy

by BEN FELLER, Associated Press - 19 April 2009 18:17 GMT

PORT-OF-SPAIN, Trinidad (AP) -- Defending his brand of world politics, President Barack Obama said Sunday...

Both Graham and McCaskill spoke on "Fox News Sunday." Ensign was interviewed on CNN's "State of the Union."

Copyright 2009 The Associated Press. All rights reserved. This material may not be published, broadcast, rewritten or redistributed.

Typically news organizations will have a significant amount of metadata behind this story, communicated in a variety of formats like NewsML. By the time they are presented to the reader, much of the metadata (amounting in some cases to hundreds of fields) has been stripped away. We can add a bit of that back in, and using hnews, create possibilities for some interesting semantic actions. Taking the above story, and formatting it as hnews:

<div class="hnews hentry item">
  <h4>
    <a class="url entry-title" href="http://example.org/article/us-latam-obama-democracy.html" rel="bookmark">
      Renewing US ties with Latin America, Obama says he wants to lead, not lecture, on democracy</a>
  </h4>
	
  <div>
    <small> by 
      <span class="author vcard"><a class="email fn" 
        href="mailto:ben.feller@example.org">BEN FELLER</a></span>, 
      <span class="source-org vcard"><a class="url org fn" 
        href="http://www.ap.org">Associated Press</a></span>,
      <a href="http://www.ap.org/newsvalues/index.html" rel="principles"><img src="/wikidir/images/principles-button-blue.png" /></a>  - 
      <span class="updated dtstamp" 
        title="2009-04-19T18:17:29Z">19 April 2009 18:17 GMT</span>
    </small>
  </div>
	
  <div class="entry-content">
    <p><span class="dateline">PORT-OF-SPAIN, Trinidad</span> (AP) -- Defending his brand 
      of world politics, President Barack Obama said Sunday...</p>
    <p>Both Graham and McCaskill spoke on "Fox News Sunday." Ensign was interviewed on CNN's 
      "State of the Union."</p>
  </div>
	
  <div>
    <small>
      News Topics:
      <a href="http://example.org/Summits" rel="tag">Summits</a>, ...,
      <a href="http://example.org/Government+policy" rel="tag">Government policy</a>
      <br/>
      People, Places and Companies: 
      <a href="http://example.org/Barack+Obama" rel="tag">Barack Obama</a>, ..., 
      <a href="http://example.org/Hugo+Chavez" rel="tag">Hugo Chavez</a> 
    </small>
  </div>


  <div class="geo">
    <small>
      Lat: <span class="latitude">10.65715</span> 
      Long: <span class="longitude">-61.483582</span>
    </small>
  </div>

  <div id="first-sample-license">
    <small>
      Copyright 2009 The <a rel="item-license" href="#first-sample-license">Associated Press</a>. 
      All rights reserved. This material may not be published, broadcast, rewritten or redistributed.
    </small>
  </div>
</div>

We get a richly-formatted news story that enhances the reader's experience with news:

Renewing US ties with Latin America, Obama says he wants to lead, not lecture, on democracy

by BEN FELLER, Associated Press principles - 19 April 2009 18:17 GMT

(AP) -- Defending his brand of world politics, President Barack Obama said Sunday...

Both Graham and McCaskill spoke on "Fox News Sunday." Ensign was interviewed on CNN's "State of the Union."

News Topics: Summits, ..., Government policy
People, Places and Companies: Barack Obama, ..., Hugo Chavez

Lat: 10.65715 Long: -61.483582
Copyright 2009 The Associated Press. All rights reserved. This material may not be published, broadcast, rewritten or redistributed.

Geo Alternative

There are a number of options with how this information is formatted. For instance, rather than adding in a separate Geo line, we could chose to do something proposed as an improvement on geo brainstorming:

<p><abbr title="10.65715,-61.483582" class="dateline geo">PORT-OF-SPAIN, Trinidad</abbr> (AP) -- Defending his brand 
	of world politics, President Barack Obama said Sunday...</p>

Which renders as:

(AP) -- Defending his brand of world politics, President Barack Obama said Sunday...

Naturally, a valid option (as discussed here) is to use the <span> element instead.

Sample News Story with Media (Photo)

Another example is combining this same story with a related photo by folding an hMedia item into the hNews 0.1 entry:

<div class="hnews hentry item">
  <div class="hmedia">
     <img class="photo" width="256" height="342" border="0" alt="President Barack Obama speaks on the South Lawn of the White House in Washington, Wednesday, Aug. 5, 2009, about the release of Laura Ling and Euna Lee, the two freed American journalists who were arrested in March after allegedly crossing into North Korea from China. (AP Photo/Ron Edmonds)" src="http://example.org/Obama_Mana.jpg"/>
     <span class="fn">President Barack Obama</span>
  </div>

  <h4>
    <a class="url entry-title" href="http://example.org/article/us-latam-obama-democracy.html" rel="bookmark">
      Renewing US ties with Latin America, Obama says he wants to lead, not lecture, on democracy</a>
  </h4>
	
  <div>
    <small> by 
      <span class="author vcard"><a class="email fn" 
        href="mailto:ben.feller@example.org">BEN FELLER</a></span>, 
      <span class="source-org vcard"><a class="url org fn" 
        href="http://www.ap.org">Associated Press</a></span>,
      <a href="http://www.ap.org/newsvalues/index.html" rel="principles"><img src="/wikidir/images/principles-button-blue.png</a>  - 
      <span class="updated dtstamp" 
        title="2009-04-19T18:17:29Z">19 April 2009 18:17 GMT</span>
    </small>
  </div>
	
  <div class="entry-content">
    <p><span class="dateline">PORT-OF-SPAIN, Trinidad</span> (AP) -- Defending his brand 
      of world politics, President Barack Obama said Sunday...</p>
    <p>Both Graham and McCaskill spoke on "Fox News Sunday." Ensign was interviewed on CNN's 
      "State of the Union."</p>
  </div>
	
  <div>
    <small>
      News Topics:
      <a href="http://example.org/Summits" rel="tag">Summits</a>, ...,
      <a href="http://example.org/Government+policy" rel="tag">Government policy</a>
      <br/>
      People, Places and Companies: 
      <a href="http://example.org/Barack+Obama" rel="tag">Barack Obama</a>, ..., 
      <a href="http://example.org/Hugo+Chavez" rel="tag">Hugo Chavez</a> 
    </small>
  </div>

  <div class="geo">
    <small>
      Lat: <span class="latitude">10.65715</span> 
      Long: <span class="longitude">-61.483582</span>
    </small>
  </div>

  <div>
    <small>
      Copyright 2009 The <a rel="item-license" href="http://www.ap.org">Associated Press</a>. 
      All rights reserved. This material may not be published, broadcast, rewritten or redistributed.
    </small>
  </div>
</div>