3. Who are we?
• Lack of structured access to information on
local news sites
• POV of two technologists whose interests in
technology and current issues/activism
overlap
• Propagation of more aware and savvy
communities
3
5. How many of you…
• know HTML and/or CSS?
• know Javascript?
• know server side programming?
• maintain a news site / website?
• monetize your content?
5
9. Why?
You cannot define how people will consume your
information, leverage them
• Don’t turn your user base into pirates
10.
11.
12.
13. Why?
Monetization cannot solely be a result of exclusivity
but a result of mass access and authority
• The more people use your data, the more
valuable you become (advertising)
• How are you making your data (not just website)
more accessible
14. The NY Times said the project had met expectations, drawing 227,000
paying subscribers — out of 787,000 over all — and generating about
$10 million a year in revenue.
“But our projections for growth on
that paid subscriber base were low,
compared to the growth of online
advertising...”
“...what wasn’t anticipated was the explosion in
how much of our traffic
would be
generated by Google, by Yahoo and
some others.” Vivian L. Schiller, senior VP and GM of NYTimes.com
15. Why?
If you ain’t the top dog, use openness as a way to
partner, grow market share and relevance
• Even Google does it - OpenSocial
• Leverage exiting platforms - don’t roll another
SNS
16. Why ?
No matter how smart you are, there are smarter
people out there
• Do you want them to be your competitor or
partner
• Who will be making your killer Facebook
application ?
18. How
• Provide a way to access data without
presentation clutter. Turn your sites into
information services
• Make it structured & machine readable - Web APIs,
Microformats
19. How
• Provide simple ways to export and import data
into your system
• Syndication, public wikis
20. How
• Provide ways to simplify the querying of your
indexed data
• Opensearch, Better back end search
22. Microformats
• Small bits of HTML that represent things like people,
events, tags, etc. in web pages. (annotations)
• These small bit of standardized markup adds
semantic meaning to data in a page in a non-intrusive
and machine readable manner, data becomes more
structured
• A bottom up approach - community defines what and
how the markup will be
24. <table class=quot;contentpaneopenquot;>
<tbody>
<tr>
<td colspan=quot;2quot; class=quot;createdatequot; valign=quot;topquot;>Wednesday, 28 May 2008
</tr>
<tr>
<td colspan=quot;2quot; valign=quot;topquot;>
<p><img src=quot;forum_location_files/pjmap.jpgquot; alt=quot;Imagequot; title=quot;Imagequot; border=quot;0quot;
height=quot;367quot; hspace=quot;6quot; width=quot;497quot;></p>
<p>Shah Village Hotel<br>No. 3 & 5 Lorong Sultan , 46200 Petaling Jaya, Selangor D.E.
Malaysia </p>
<p>Hotel Information: <a href=quot;http://www.hspj.com.my/HSGS/index.phpquot;>Singgahsana Hotel
</a>, <a href=quot;http://www.shahsresorts.com/petalingjaya/default.htmquot;>Shah's Village Hotel</
a></p>
</td>
</tr>
<tr>
<td colspan=quot;2quot; class=quot;modifydatequot; align=quot;leftquot;>Last Updated ( Friday, 06 June 2008 )</td>
</tr>
</tbody>
</table>
25. <table class=quot;contentpaneopenquot;>
<tbody>
<tr>
<td colspan=quot;2quot; class=quot;createdatequot; valign=quot;topquot;>Wednesday, 28 May 2008
</tr>
<tr>
<td colspan=quot;2quot; valign=quot;topquot;>
<p><img src=quot;forum_location_files/pjmap.jpgquot; alt=quot;Imagequot; title=quot;Imagequot; border=quot;0quot;
height=quot;367quot; hspace=quot;6quot; width=quot;497quot;></p>
<p>Shah Village Hotel<br>No. 3 & 5 Lorong Sultan , 46200 Petaling Jaya, Selangor D.E.
Malaysia </p>
<p>Hotel Information: <a href=quot;http://www.hspj.com.my/HSGS/index.phpquot;>Singgahsana Hotel
</a>, <a href=quot;http://www.shahsresorts.com/petalingjaya/default.htmquot;>Shah's Village Hotel</
a></p>
</td>
</tr>
<tr>
<td colspan=quot;2quot; class=quot;modifydatequot; align=quot;leftquot;>Last Updated ( Friday, 06 June 2008 )</td>
</tr>
</tbody>
</table>
26. <div class=quot;vcardquot;>
<div class=“vcard”>
Shah Village Hotel
Shah Village Hotel<br>No. 3 & 5 Lorong Sultan , 46200 Petaling Jaya,
Selangor D.E. Malaysia
No. 3 & 5 Lorong Sultan , 46200 Petaling Jaya, Selangor D.E. Malaysia
</div>
</div>
<a href=quot;http://www.shahsresorts.com/petalingjaya/default.htmquot;>Shah's
<a href=quot;http://www.shahsresorts.com/petalingjaya/default.htmquot;>Shah's Village
Village Hotel</a>
Hotel</a>
27. <div class=quot;vcardquot;>
<div class=“vcard”>
<div class=quot;fn orgquot;> Shah Village Hotel</div>
Shah Village Hotel<br>No. 3 & 5 Lorong Sultan , 46200 Petaling Jaya,
Selangor D.E. Malaysia
No. 3 & 5 Lorong Sultan , 46200 Petaling Jaya, Selangor D.E. Malaysia
</div>
</div>
<a href=quot;http://www.shahsresorts.com/petalingjaya/default.htmquot;>Shah's
<a href=quot;http://www.shahsresorts.com/petalingjaya/default.htmquot;>Shah's Village
Village Hotel</a>
Hotel</a>
28. <div class=quot;vcardquot;>
<div class=“vcard”>
<div class=quot;fn orgquot;>Shah Village Hotel</div>
Shah Village Hotel<br>No. 3 & 5 Lorong Sultan , 46200 Petaling Jaya,
Selangor D.E. Malaysia
<div class=quot;adrquot;> No. 3 & 5 Lorong Sultan , 46200 Petaling Jaya, Selangor
D.E. Malaysia
</div>
</div>
<a href=quot;http://www.shahsresorts.com/petalingjaya/default.htmquot;>Shah's
Village Hotel</a>
</div>
<a href=quot;http://www.shahsresorts.com/petalingjaya/default.htmquot;>Shah's Village
Hotel</a>
29. <div class=“vcard”>
<div class=quot;vcardquot;>
<div class=quot;fn orgquot;>Shah Village Hotel</div>
Shah Village Hotel<br>No. 3 & 5 Lorong Sultan , 46200 Petaling Jaya,
<div class=quot;adrquot;>
Selangor D.E. Malaysia
<div class=quot;street-addressquot;> No. 3 & 5 Lorong Sultan </div>,
<span class=quot;postal-codequot;> 46200 </span>
</div> class=quot;localityquot;> Petaling Jaya </span>,
<span
<span class=quot;regionquot;> Selangor D.E. </span>
<span class=quot;country-namequot;> Malaysia </span>
<a href=quot;http://www.shahsresorts.com/petalingjaya/default.htmquot;>Shah's
</div>
</div> Hotel</a>
Village
<a href=quot;http://www.shahsresorts.com/petalingjaya/default.htmquot;>Shah's Village
Hotel</a>
30. <div class=“vcard”>
<a href= quot;http://www.shahsresorts.com/petalingjaya/default.htmquot; class=“url fn
org”>Shah Village Hotel</a>
<div class=quot;adrquot;>
<div class=quot;street-addressquot;> No. 3 & 5 Lorong Sultan </div>,
<span class=quot;postal-codequot;> 46200 </span>
<span class=quot;localityquot;> Petaling Jaya </span> ,
<span class=quot;regionquot;> Selangor D.E. </span>
<span class=quot;country-namequot;> Malaysia </span>
</div>
</div>
31. <div class=“vcard”>
<abbr title=quot;3.102233488513198;101.64600670337677quot;class=quot;geoquot;>
<a href= quot;http://www.shahsresorts.com/petalingjaya/default.htmquot; class=“url fn
org”>Shah Village Hotel</a>
</abbr>
<div class=quot;adrquot;>
<div class=quot;street-addressquot;> No. 3 & 5 Lorong Sultan </div>,
<span class=quot;postal-codequot;> 46200 </span>
<span class=quot;localityquot;> Petaling Jaya </span> ,
<span class=quot;regionquot;> Selangor D.E. </span>
<span class=quot;country-namequot;> Malaysia </span>
</div>
</div>
33. Why?
• Search engine support
• http://kitchen.technorati.com/search/
• google creative commons search
• yahoo search support
34. Why?
• Machine readable
• Cheap API - Low barrier for community to build
add ons to your site tools in (Javascript - FF3 ,
PHP etc.)
34
35. • End user application support (Firefox3 with
extension,IE8 OpenService - WebSlices , soon more
apps)
35
36. How to incorporate
Integrate into news sites:
•Listings of classifieds - hListings
•News stories - markup with hAtom, markup
authors,personalities and organizations with hCard,
markup locations with geo and adr
•Reviews of products,restaurants, movies - hReview
e.g. http://www.australianit.news.com.au/contactus
37. How to incorporate
Build tools internally that leverage the
markup
•Internal search engine that is markup aware for your
site
•Build visualisation tools/widgets that leverage the
markup
38. How to incorporate
Build communities that leverage the markup
•Have a developer section on your site
39.
40. Produce
• DreamweaverExtension - http://www.webstandards.org/action/dwtf/microformats
• Textpattern Microformats Plugin (http://placenamehere.com/TXP/pnh_mf/)
• Wordpress Microformat plugins - http://microformats.org/wiki/wordpress
• TYPO3 - tt_address , TIMTAB Weblog plugins
• Joomla - No support
• Drupal - Drupal Upcoming.org syndication module-
http://hybernaut.com/upcoming-hcal - Weak support
• PHP Lib - http://enarion.net/phpmicroformats/ (Note: Search for other
language libs to generate microfrmats)
41. Consume:
• Client end
• Microformat bookmarklet - http://leftlogic.com/lounge/articles/
microformats_bookmarklet
• Firefox add on - Operator-http://www.kaply.com/weblog/operator/
• Server end
• Python based microformat parser - http://code.google.com/p/aump/
• PHP based microformat parser - http://code.google.com/p/hkit/
• TransFormr -A Simple set of XSLT and PHP tools for Transforming
• Microformats - http://code.google.com/p/transformr/
• http://suda.co.uk/projects/x2v - webservices
42. Challenges:
• Weak tool-ing for production in open source
components such as Joomla
and Drupal
44. Why?
Users will consume your data in the way they find most
comfortable. Syndication allows developers/users to
build the right method for themselves. (Mobile readers,
Screen readers). Bottom line - increase in circulation.
Most Malaysian news sites do it badly
45. Why?
Additional metadata contained within a feed
allows for remixing and discovery. Categories and tags
(metadata) should be taken seriously. (Technorati,
wordpress,yahoo pipes )
46. Why?
Allows for 3rd party applets/widgets to be built on
top of your content
47.
48.
49. How:
• Integrate into news sites:
• Syndicate everything on your site
• All sections , all columns ,search results, listings
(classifieds etc.)
50.
51.
52. Produce
• Drupal Atom module - http://drupal.org/project/atom - Overall good support
• Joomla - DS-Syndicate-http://extensions.joomla.org/component/option,com_mtree/
task,viewlink/link_id,2497/Itemid,35/
(Only Joomla 1.0 though) - Bad support
• Wordpress - Good support
• Universal Feed Generator -
http://www.phpclasses.org/browse/package/4427.html - Roll your own
54. Best practice:
•Use Atom 1.0
•Cache, cache, cache (Support conditional GETs, Slugs etc.)
•Autodiscover links, on all pages - leverage support in browsers
•Use service to redistribute - such as Feedburner
60. Why?
Weak search access results in searching through Google
or Yahoo?
• Your customers are looking for your data on
other sites - hence you are loosing usage metrics
as well as monetization opportunities.
61. How
• Integrate into news sites:
• Make search a 1st class interface to your website.
• Why are you not using this browser UI element ?
66. Best practice
1. Use autodiscovery links
2. Write informative OpenSearch description documents
3. Provide atom + microformat + extensions (geo) based
search results
where applicable
69. So, what’s the deal with
design?
• Design is about constraints – understanding,
respecting and breaking.
• An effective design allows users to get what
they’re looking for in an easy, trusted and fast
manner.
69
74. Social media = interactions
between people using
applications / interfaces
74
75. Why?
• improve the interactions between audience
• prioritize information – hierarchical structure –
popularity, relevance, recency et. al.
• allow users to reorganise and remix content and
represent content in a manner they desire.
75
77. Why?
• linear narrative – visual representation of
chronological events
• allows users to be able to appreciate and interact
with news in a more fluid, continuous form – better
context to events & stories
• Mashup – information can be easily extracted from
different sources (e.g. http://www.bbc.co.uk/history/
british/launch_tl_british.shtml )
77
78. How
• http://simile.mit.edu/timeline/
• Timeline is similar to Google Maps: zero
application installation, server-side/client-side
• Data is easily populated into Timeline using: RDF,
RSS, JSON, Atom, XML
78
83. Why?
• Video markers create easy transitions for
readers to move between different
paragraphs of a news article and its
corresponding video clip
• Limited time - short attention span – users
has the freedom to view specific portions of a
clip
83
84. How:
• Interactive markers – viddler.com allows
users to
1. attach comment markers at any point of
the video clip;
2. include tags in the video timeline to
describe elements in the video clip
84
90. Why?
• Topographical view of how news is scattered allows
for readers to focus on hyper local content
• Maps also serve as infographics to augment readers’
experience in relating or understanding news,
especially if there is a location specific context e.g.
Cyclone Nargis (http://www.nytimes.com/interactive/
2008/05/08/world/20080508_MYANMAR.html)
90
91. How:
• zero application installation, server-side/
client-side
• data is easily populated with XML
91
93. Summary
• Human readable also machine readable
• Better manipulate the data - move towards machines
autonomously aggregating, remixing and manipulating
data
• Make your data accessible - make yourself important
• Monetize by selling attention -but don’t lose relevance
• Data + Visualization = More attention