Extreme Syndication · What is Syndication? Three episodes of The Simpsons every single day Content produced by one site is shown on another Consumer can use data as they desire Producer

Extreme SyndicationThe Lean, Mean, Content-Serving Machine

What is Syndication?


Three episodes of The Simpsons every single day



Content produced by one site is shown on another




Consumer can use data as they desire




Consumer can use data as they desire

Producer gets more exposure for their content

Built-In SolutionsNo Assembly Required

Built-In SolutionsCollaboration System RSS Feed


Calendar iCalendar Feed



Syndicated Content RSS Feed




Gallery RSS Feeds

Gallery List Albums

Gallery List Albums

Gallery Album

Gallery Album

My Gallery

My Gallery




Gallery RSS Feeds

Widget macro

The Widget Macro

The Widget Macro

Provides code to display an asset from your site on another site

The Widget Macro


^Widget( assetUrl [, width, height, templateId] );

The Widget Macro



If no templateId, uses www_ajaxInlineView

The Widget Macro



If no templateId, uses www_ajaxInlineView

Otherwise, uses www_widgetView

The Widget Macro

The Widget Macro

Not just for static content

The Widget Macro


Forms inside the Widget frame work

The Widget Macro



Collaboration System

The Widget Macro




DataForm

The Widget Macro




DataForm

Thingy

The Widget Macro




DataForm

Thingy

Form will open in a new window




Gallery RSS Feeds

Widget macro

Ajax Inline View

Ajax Inline View

Ajax Inline View

Display just the asset content

Ajax Inline View


No style

Ajax Inline View


No style

Not even a fully-formed HTML document

Ajax Inline View


No style


Useful with AJAX / YUI Connection

Ajax Inline View


No style



http://example.com/asset?func=ajaxInlineView

Ajax Inline View


No style



http://example.com/asset?func=ajaxInlineView

element.innerHTML = ajaxInlineViewContent

RSS From AnythingBuilding a Better Soapbox

What is RSS?

What is RSS?

Really Simple Syndication

What is RSS?


The standard for syndication on the Web

What is RSS?



An XML dialect

What is RSS?



An XML dialect

Just another type of markup

What is RSS?



An XML dialect

Just another type of markup

WebGUI is all about markup

RSS A Folder

RSS A Folder

Folder contains documents

RSS A Folder


Keep existing functionality

RSS A Folder



Add an RSS feed using Shortcuts and new templates

RSS A FolderCreate a Shortcut for the RSS Feed


Edit the Shortcut to have the right properties



Make a new template for the Folder

What RSS Is... Really<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0">

<channel> <title>Example.com RSS Feed</title> <link>http://www.example.com</link> <description>RSS</description>

<item> <title>Grand Opening</title> <link>http://www.example.com/grand-opening</link> <description>A Welcome Message from Example.com</description> </item>

<item> <title>Grand Closing</title> <link>http://www.example.com/thanks-for-the-fish</link> </item>

</channel>

</rss>





</channel>

</rss>

XML Prologue





</channel>

</rss>

RSS declaration





</channel>

</rss>

Channel declaration





</channel>

</rss>

Each channel has a title, a link, and a description





</channel>

</rss>

Each channel has multiple items





</channel>

</rss>

Each item has a title, link, and description

<?xml version="1.0" encoding="UTF-8" ?><rss version="2.0">

<channel> <title><tmpl_var title></title> <link>û;^/(<tmpl_var url>);</link> <description><![CDATA[<tmpl_var description>]]></description>

<tmpl_loop file.loop> <item> <title><tmpl_var title></title> <link>û;^/(<tmpl_var url>);</link> <description><![CDATA[ <tmpl_if isImage><img src="û;^/(<tmpl_var url>); /></tmpl_if> <tmpl_var synopsis> ]]></description> </item> </tmpl_loop>

</channel>

</rss>




</channel>

</rss>




</channel>

</rss>

XML Prologue




</channel>

</rss>

RSS Declaration




</channel>

</rss>

Channel Declaration




</channel>

</rss>

Folder Title




</channel>

</rss>

Folder URL




</channel>

</rss>

Company URL Macro




</channel>

</rss>

Gateway Macro with Folder URL




</channel>

</rss>

Folder Description




</channel>

</rss>

CDATA to Escape HTML


<channel> <title><tmpl_var title></title> <link>û;^/(<tmpl_var url>);</link> <description><tmpl_var description escape="HTML"></description>


</channel>

</rss>

Another way to escape HTML




</channel>

</rss>

File Loop




</channel>

</rss>

File Title




</channel>

</rss>

File URL




</channel>

</rss>

File Description




</channel>

</rss>

Show the Image




</channel>

</rss>

File Description




Apply the template to a Shortcut Override





Create a Snippet with the right content type






Tell the browser where to find the RSS

<link rel="alternate" href="/document-repository.rss" type="application/rss+xml" />



Alternate Version


Alternate Version


Location


Location


Content Type


Content Type

RSS Beyond

Apply this technique to any asset you want

Page Layouts / Articles

DataForm

Thingy

RSS Trouble

RSS Trouble

Test your feed outside any browser

curl or wget

RSS Trouble

Test your feed outside any browser

curl or wget

Validate your feed

W3 Feed Validator: http://validator.w3.org/feed/

http://validator.w3.org/feed/

http://validator.w3.org/feed/

JSON FeedsBringing Power to Those Who Can Use It

JSON?

JSON?

JavaScript Object Notation

JSON?


The JavaScript code to create a JavaScript Object

JSON?



Strikingly similar to a Perl hash

JSON?




The format used in WebGUI's configuration file

JSON?





Many libraries exist in multiple languages

JSON?





Many libraries exist in multiple languages

The best way to get information to JavaScript

JSON A Folder

JSON A Folder

Folder contains images

JSON A Folder



JSON A Folder



Allow users to get a JSON array of images to do with what they please

JSON A FolderCreate a Shortcut for the JSON feed






What JSON is... Really// An array[ "one", "two", "three" ]

// An object{ "one" : 1, "two" : 2, "three" : 3}

// A more complicated object{ "letters" : [ "a", "b", "c" ], "numbers" : [ 1, 2, 3 ]}

// An array of objects[ { "name" : "Doug" }, { "name" : "Frank" }]





var obj = eval( "(" + json + ")" );

obj[0] == "one"obj[2] == "three"






obj.one == 1obj[ "three" ] == 3






obj.letters[0] == "a"obj[ "numbers"][ 1 ] == 2






obj[0].name == "Doug"obj[1].name == "Frank"

{"title" : "<tmpl_var title escape="JS">","url" : "û;^/(<tmpl_var url escape="JS">);","files" : [

<tmpl_loop files.loop>{

"title" : "<tmpl_var title escape="JS">","url" : "û;^/(<tmpl_var url escape="JS">);"

}<tmpl_unless __LAST__>,</tmpl_unless></tmpl_loop>

]}





]}





]}

Folder Title





]}

Escape special characters





]}

Folder URL





]}

Files Loop





]}

Files Information





]}

Proper Syntax















Test the JSON feed

<script src="Êxtras(yui/build/yahoo-dom-event/yahoo-dom-event.js);"></script><script src="Êxtras(yui/build/json/json-min.js);"></script><script src="Êxtras(yui/build/connection/connection-min.js);"></script><script type="text/javascript">

var url = "/photo-stream.json";

var callback = {success : function (o) {

if ( YAHOO.lang.JSON.isValid( o.responseText ) ) {alert( url + " is valid JSON" );

}else {

alert( url + " is not valid JSON" );}

},failure : function (o) {

alert( url + " does not seem to exist: " + o.responseText );}

};

YAHOO.util.Connect.asyncRequest( "GET", url, callback );</script>





}else {




};






}else {




};


Grab YUI Modules





}else {




};


Photo Stream URL





}else {




};


YUI Connection Callback





}else {




};


Test the JSON





}else {




};


Test the JSON





}else {




};


Connection Failed





}else {




};


Do the test

YAY!

Why JSON?

More flexible than RSS or HTML

User only needs a static web page to get dynamic content

For the Ambitious

TrimPath JavaScript Template System

http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

Given a template string and a JSON object

Returns HTML

Beyond JSON

Beyond JSON

Build a JavaScript slideshow based on the Folder of Images

Beyond JSON


Build a complete JavaScript search interface to a Thingy

Beyond JSON


Build a complete JavaScript search interface to a Thingy

Allow users to take their Gallery Albums and Photos to any site they want, in any form they want

RSS From EverythingSometimes one is better than many

RSS From Everything

RSS feed for multiple content types

Calendar, Collaboration, Gallery all in one feed

SQLReport to assemble the data

RSS From EverythingCreate the SQLReport

SELECT asset.assetId AS assetId,assetData.title AS title,assetData.url AS url,IF ( Post.assetId IS NOT NULL,

Post.content,IF ( Event.assetId IS NOT NULL,

CONCAT_WS( " - ", Event.startDate, Event.startTime, Event.location, assetData.synopsis ),IF ( GalleryAlbum.assetId IS NOT NULL,

wobject.description,assetData.synopsis

) ) ) AS descriptionFROM assetJOIN assetData

ON asset.assetId = assetData.assetId AND assetData.revisionDate = (

SELECT MAX( revisionDate ) FROM assetData ad WHERE ad.assetId = asset.assetId AND ad.status = "approved"

)LEFT JOIN wobject

ON asset.assetId = wobject.assetId AND assetData.revisionDate = wobject.revisionDateLEFT JOIN Post

ON asset.assetId = Post.assetId AND assetData.revisionDate = Post.revisionDateLEFT JOIN Event

ON asset.assetId = Event.assetId AND assetData.revisionDate = Event.revisionDateLEFT JOIN GalleryAlbum

ON asset.assetId = GalleryAlbum.assetId AND assetData.revisionDate = GalleryAlbum.revisionDateWHERE

asset.state = "published"AND asset.lineage LIKE "000001%"AND (

Post.assetId IS NOT NULL OR Event.assetId IS NOT NULL OR GalleryAlbum.assetId IS NOT NULL

)AND (

Event.assetId IS NULL OR Event.startDate <= DATE_ADD( CURDATE(), INTERVAL 1 MONTH )

)AND (

Event.assetId IS NOT NULL OR FROM_UNIXTIME( asset.creationDate ) > DATE_SUB( CURDATE(), INTERVAL 1 MONTH )

)








)LEFT JOIN wobject







)AND (


)AND (


)

Asset ID








)LEFT JOIN wobject







)AND (


)AND (


)

Title








)LEFT JOIN wobject







)AND (


)AND (


)

URL








)LEFT JOIN wobject







)AND (


)AND (


)

Description








)LEFT JOIN wobject







)AND (


)AND (


)

Description for Post assets








)LEFT JOIN wobject







)AND (


)AND (


)

Description for Event assets








)LEFT JOIN wobject







)AND (


)AND (


)

Description for Gallery Album assets








)LEFT JOIN wobject







)AND (


)AND (


)

Description for other assets








)LEFT JOIN wobject







)AND (


)AND (


)

Asset table








)LEFT JOIN wobject







)AND (


)AND (


)

Join Asset Data








)LEFT JOIN wobject







)AND (


)AND (


)

Handle versioning








)LEFT JOIN wobject







)AND (


)AND (


)

Join other tables for individual asset information








)LEFT JOIN wobject







)AND (


)AND (


)

Left Join to include non-matching rows from asset








)LEFT JOIN wobject







)AND (


)AND (


)








)LEFT JOIN wobject







)AND (


)AND (


)








)LEFT JOIN wobject







)AND (


)AND (


)

Limit by state and lineage








)LEFT JOIN wobject







)AND (


)AND (


)

Limit to these asset types including sub-classes








)LEFT JOIN wobject







)AND (


)AND (


)

For Event assets, get those occurring within 1 month








)LEFT JOIN wobject







)AND (


)AND (


)

Pass if not Event asset








)LEFT JOIN wobject







)AND (


)AND (


)

OR Pass if starts within a month








)LEFT JOIN wobject







)AND (


)AND (


)

For non-Event assets, get those added in the last

month








)LEFT JOIN wobject







)AND (


)AND (


)

Pass if Event asset








)LEFT JOIN wobject







)AND (


)AND (


)

OR Pass if asset created in the last month

SELECTassetData.url AS url,assetData.assetSize AS length,IF ( FileAsset.filename REGEXP 'jpe?g$',

"image/jpeg", "application/octet-stream"

) AS contentTypeFROM assetJOIN assetData


SELECT MAX( revisionDate ) FROM assetData ad WHERE ad.status = "approved" AND ad.assetId = assetData.assetId

)JOIN FileAsset

ON asset.assetId = FileAsset.assetIdAND assetData.revisionDate = FileAsset.revisionDate

WHEREasset.parentId = ?AND asset.state = "published"






)JOIN FileAsset



Select URL and File size






)JOIN FileAsset



Get a Content Type






)JOIN FileAsset



JPEG Images






)JOIN FileAsset



Sane default






)JOIN FileAsset



Join tables and handle versioning






)JOIN FileAsset



Normal join to only get File assets






)JOIN FileAsset



Only published assets with the right parent


Make a new template for the SQLReport


<channel> <title><tmpl_var title></title> <link>û;</link> <description><![CDATA[<tmpl_var description>]]></description> <tmpl_loop rows_loop> <item> <title><tmpl_var row.field.title.value></title> <link>û;^/(<tmpl_var row.field.url.value>);</link> <description><![CDATA[ <tmpl_var row.field.description.value> ]]></description> <tmpl_if hasNest> <tmpl_loop query2.rows_loop> <enclosure url="û;^/(<tmpl_var query2.row.field.url.value>);" length="<tmpl_var query2.row.field.length.value>" type="<tmpl_var query2.row.field.contentType.value>" /> </tmpl_loop> </tmpl_if> </item> </tmpl_loop></channel>

</rss>



</rss>

Standard Beginning



</rss>

Channel information



</rss>

Items loop



</rss>

Query 1 results loop



</rss>

Title from Query 1



</rss>

URL from Query 1



</rss>

Description from Query 1



</rss>

If Query 2 has a result(GalleryAlbum Files)



</rss>

Query 2 loop



</rss>

RSS Enclosure Tag



</rss>

File URL



</rss>

File Size



</rss>

File Content Type



</rss>

Standard Ending







Test the RSS feed

ReviewMaking a long speech longer

Review

Review

Existing Syndication Methods

Certain Assets

Widget

Ajax Inline View

Review

Review

RSS From Anything

RSS is just markup

Make a new template

Shortcut and override

AssetProxy into a Snippet

Review

Review

JSON From Anything

Flexible way to get dynamic content from static sites

Same process as RSS

Just a different template

Review

Review

RSS From Everything

Use a SQLReport to combine multiple asset types

Use sub-queries for attachments or enclosures

Just a different template

Questions?I won't blame you for being overwhelmed

Documents

Extreme Syndication · What is Syndication? Three episodes of The Simpsons every single day Content produced by one site is shown on another Consumer can use data as they desire Producer