Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template

Blog It Up, Baby! Blog It Up, Baby! Extending the new IBM Lotus Domino Blog TemplateExtending the new IBM Lotus Domino Blog Template

Sean Burgess

Who am I?Who am I?

• Sean Burgess is a Notes/Domino developer and administrator– Has been working with Notes since V3 in 1994 and has been modifying and

extending the blog template on his own site for over 3 years.– Is a Certified Lotus Developer and Administrator and works for General

Dynamics Information Technology in Fairfax, Va.– Is an avid gardener, cook, and father of 4 sons.

AgendaAgenda

• Quick start – get up and running quickly using the default template

• Application architecture – a look behind the scenes at the nuts and bolts

• Demonstration – Look at examples of Domino based Blogs in the wild

• Embrace and Extend – power up your blog with Web 2.0 technologies

Origins of the TemplateOrigins of the Template

• DominoBlog was created by Steve Castledine in December 2002

• Originally created as a simple blogging tool for Domino, but evolved into a complete content management solution

• It was designed to be a tool which could be configured to the nth degree by an end user without the need to change any of the underlying Notes design. Therefore, people could create web sites using their own WYSIWYG tools and if an underlying change was made in the design it wouldn't affect their changes.

• The way the application provides this functionality is by using Templates and Tags.

Creating a new BlogCreating a new Blog

• If you have a 7.02 or greater Domino server installed, the template is on the server.

• Steps to create a database based on the blog template:– Create a new database on the 7.02 (or greater) server– Click “Show advanced templates”– Choose “IBM Blog”

• When the database first opens, a dialog box appears.• Fill out the Site title, description, and the server information. • Fill in the user information for the blogger in the Personal Details section.

Creating a new BlogCreating a new Blog

• If at any time you need to modify the information in the first dialog box, you can run the Set Basic Details wizard from the blog’s Content view. You can also edit the basic details in the Configuration document.

• You can go to the browser and enter in the URL shown in the Basic Details dialog box. The blog is already up and running.

Blogging PolicyBlogging Policy

• Have one!

• Make distinctions between internal and external blogs.

• Review the policy on a regular basis.

• Determine a way to enforce the policy.

Blog Template Architecture & TerminologyBlog Template Architecture & Terminology

• The blog template is a web content management tool disguised as a blogging application. The application includes tools to manage HTML layout, dynamic content (i.e., blog entries), and other resources.

• Key architectural constructs to understand include:– Configuration Document– Page Templates – Think Form– Item Templates – Think View– Block Templates – Think Subform– DX Tags – Think Computed Text/JSP Tag– Tags – Think Keywords

Configuration documentConfiguration document

• The Configuration document controls how the application’s dynamic content is rendered.

• DX Tags work hand in hand with the Configuration document. In many cases, there is a direct relationship between a particular field or set of fields in the Configuration document and a particular DX Tag.

• A list of DX Tags is available here:http://www.stevecastledine.com/dominoblog.nsf/dx/dxtags.htm?opendocument

• It also helps to understand web markup, because DX Tags produce markup (HTML, Javascript, CSS) in the Web user interface.

The DX Tag engineThe DX Tag engine

• The blog template contains a content rendering engine written in Lotusscript. This engine allows you to populate static HTML with dynamic content.

• The methodology is similar to ASP/JSP and DX Tags work in a way that is analogous to JSP tags or ASP tags.

• DX Tags are rendered on-the-fly by the code contained in a Script library called DXLiveContentEngine.

The DX Tag engineThe DX Tag engine

• Pseudo-code example: – <static HTML layout> <dynamic DX Tag> <static HTML layout>

• Real code examples: – <div> 

<$DXSearchForm$></div>– <div> 

<$DXRecentSubjects$></div>• Code examples from the template (located in the LeftSideBar Template

Block):– <div class="portlet-content"><div class="table-

wrap"><$DXSearchForm$></div></div></div>– <div class="portlet-content"><div class="table-

wrap"><ul><$DXRecentSubjects$></ul></div></div>

Template Pages and BlocksTemplate Pages and Blocks

• Pages contain the structure of the blog, including links to CSS & JavaScript files.

• An example of a Page would be the blog’s homepage.

• Blocks are chunks of HTML & DX Tags that can be reused across multiple pages. Blocks allow you to centralize code for easy manageability.

• An example of a Block would be something like a header or footer.

Item TemplatesItem Templates

• Item Templates are used for dynamic content usually appearing in a list or sequential format.

• “Items” include blog entries and blog entry comments.• Item Templates are similar to Blocks as they both contain a mixture of

HTML and DX Tags.• Example from the “Comment Item” Template document:

<div class="commentbody"><$DXCommentNumber$>) <strong><$DXCommentSubject$></strong></div><div class="commentauthor"><$DXCommentAuthor$><$DXCommentCreation$></div><div class="commenttext"><$DXCommentText$></div>

Putting it all togetherPutting it all together

• Pages contain Blocks. Pages contain Items. Blocks are reused across multiple pages.

– Note: This is not a hard and fast rule, just a best practice to keep your code manageable. The point of the blog application’s approach is to make managing the site easy and flexible.

• DX Tags can go on Pages, Blocks and Items.

• DX Tags can often be customized in the Configuration document.

Live DemonstrationLive Demonstration

• Create a blog entry• Import an image• Create a Content Category

Create your own StyleCreate your own Style

• You can use Cascading Style Sheets (CSS) to control the display of fonts, colors and the positioning of elements in the layout.

• CSS is used in the template to manage the look and feel of the application, just like any other web page.

• CSS can either be edited in the database or imported from external files.• Open the CSS document:

– Go to Resources, Stylesheets (CSS).– Open the “global.css” document.– If you know how to write CSS, you can manage much of the look and feel of the

site from here. – The global.css document is commented and broken down into sections. To

change the look and feel of various parts of the application, look for the comments for that section.

– Comments in CSS files look like this: • /* everything between these tags is a comment */

Scripting is funScripting is fun

• Like CSS files, Javascript files can be either created directly on the form or imported from external files.

• Create some Javascript– Go to Resources, Javascript– Click the “New Javascript” button.– Title it “myjavascript.js”– Write a your script in the field below the title.

function hello() { alert ( 'hello world!');}

– Click Save & Close.

Make your blog your ownMake your blog your own

• Be sure your blog reflects your personality.• Imitation is the sincerest form of flattery – if you find a blog template design

that you like, save a copy of the HTML and turn it into a template for your blog.

• Search Google and the blog template sites for something that inspires you:Blog Skins (http://www.blogskins.com)Blogger Templates (http://blogger-templates.blogspot.com/)CreateBlog (http://www.createblog.com/layouts/)CSS Zen Garden (http://www.csszengarden.com/)

• Like any other Domino template, the design of the database can be modified! You can change what is returned for a DX Tag or even add new tags entirely. Make these modifications carefully!

Hints for successHints for success

• Make sure to Full Text Index the database on the server. Otherwise, search will be very slow and inefficient on the server.

• If you want to track statistics, make sure to configure a statistics database.– Technote:

http://www-1.ibm.com/support/docview.wss?rs=463&context=SSKTMJ&context=SSKTWP&q1=blog&uid=swg21246924&loc=en_US&cs=utf-8&lang=en

– Blog entry from Steve Castledine on statistics tracking: http://www.stevecastledine.com/sc.nsf/dx/06102006100458SCACNL.htm

• For both comments and statistics tracking, default access must be Author.

Embrace and Extend with Web 2.0Embrace and Extend with Web 2.0

Take your blog to the next level by integrating it with external tools

What you need to know before you startWhat you need to know before you start

• Easy to add and just as easy to remove.

• Third party integration should enhance your blog content, not be the focus of your blog.

• Do you have an innie or an outtie?

• Integration isn’t free!

• K.I.S.S. and less is more.

The path to your blog is variedThe path to your blog is varied

• What is it? Blog Stats Database (StdR7BlogStat)• What does it do? The Blog template allows you to record information on

site usage. This involves switching the feature on in your blog database (Site Configuration Document) and setting up a secondary database to collect the information.

• How do I integrate it?– Download the template from IBM

http://www-1.ibm.com/support/docview.wss?rs=899&uid=swg21246924&loc=en_US&cs=UTF-8&lang=all

– Setup statistics database and turn on statistic tracking– Display recent refers and search terms by using the <$DXGoogle$> and

<$DXReferrers$> tags, respectively.– Customize the display of the lists by creating an agent and accessing it

via AJAX

Enable Entry from anywhereEnable Entry from anywhere

• What is it? IBM Lotus Blog Template Web Client Interface• What does it do? Web browser interface that allows you to create and edit

blog entries and upload resources.• How do I integrate it?

– Add <$DXAdmin$> tag to your Site template– Add <$DXEdit$> tag to your Document template– If your blog is hosted on a server that is not your own, get the

administrator to create you an account that can log into the server.– You can modify the web interface by changing the Web Client template– Send in blog entries via email– Use a third party tool to connect to connect via published APIs

Chicklet Fever hits a highChicklet Fever hits a high

• What is it? A chicklet is a small icon used to indicate availability of a service or affiliation with a group or site.

• What does it do? A chicklet enables you easily display what features, like RSS Feeds, are available on your site. It can also display your affiliation or support of another site or organization, like OpenNTF.org.

• How do I integrate it?– Download or create the chicklet you want to add to your site.– Add the image as a resource on your blog.– Add the necessary code to your template.– This is a good choice for using Template Blocks.

Make Feed Readers AccessibleMake Feed Readers Accessible

• What is it? Bloglines (http://www.bloglines.com/), Feedburner (http://www.feedburner.com/), Yahoo and Google Readers, and many more.

• What does it do? RSS Feed Readers allow users to subscribe to news and information feeds from multiple sites.

• How do I integrate it?– Add links to your RSS feed for each Reader you want to support.– Publish your feed on Feedburner.– Add feeds for individual categories.– Publish the list of feeds that you read to your template.

Socialize with other like minded blogsSocialize with other like minded blogs

• What is it? del.icio.us (http://del.icio.us/), Digg (http://digg.com/), reddit (http://www.reddit.com/), and many more.

• What does it do? Social bookmarking is a web service that allows people to share Internet bookmarks and access those bookmarks from any computer.

• How do I integrate it?– Register on your favorite social bookmarking sites.– Add links to your entries to allow users to easily bookmark them at your

favorite sites.– Add your list of bookmarks to your template.

Get your Google onGet your Google on

• What is it? Google Adsense (https://www.google.com/adsense/), Google Custom Search (http://google.com/coop/cse/), and Google Analytics (http://www.google.com/analytics/)

• What does it do?– Google Adsense for Content – a fast and easy way for website

publishers of all sizes to display relevant, unobtrusive Google ads on their website's content pages and earn money.

– Google Adsense for Search - a way for web site publishers to provide Google search to their site users and to earn money by displaying Google ads on the search results pages.

– Google Custom Search – Harness the power of Google search to create a free Custom Search Engine that reflects your knowledge and interests. Specify the websites that you want searched - and integrate the search box and results into your own website.

– Google Analytics - Google Analytics tells you everything you want to know about how your visitors found you and how they interact with your site.


• How do I integrate it? – Google Adsense for Content

• Sign up for Adsense account• Use the Adsense Setup wizard to determine which ads to display and the

format of them• Add code to your template

<script type="text/javascript"><!—google_ad_client = "pub-7145674392602552";google_ad_width = 728;google_ad_height = 90;google_ad_format = "728x90_as";google_ad_type = "text";google_ad_channel = "";google_color_border = "E6F4FF";google_color_bg = "E6F4FF";google_color_link = "003D6B";google_color_text = "333333";google_color_url = "0066B3";//--></script><script type="text/javascript“ src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

• View reports on a regular basis


• How do I integrate it?

– Google Adsense for Search

• Sign up for Adsense account

• Use the Adsense Setup wizard to determine the look and feel of the search box and results

• Add code to your template

• How do I integrate it?– Google Custom Search

• Sign up for a Google Account• Create your own free search engine, or contribute to someone

else's.• Add code to your template

<form id="searchbox_009202765687273617243:rqtgjk3xi2q" action="http://google.com/cse"><input type="hidden" name="cx" value="009202765687273617243:rqtgjk3xi2q" /><input name="q" type="text" size="40" /><input type="submit" name="sa" value="Search" /><input type="hidden" name="cof" value="FORID:1" /></form><script type="text/javascript" src="http://google.com/coop/cse/brand?form=searchbox_009202765687273617243%3Arqtgjk3xi2q"></script>


• How do I integrate it? – Google Analytics

• Sign up for Analytics account• Add tracking code to your template

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><script type="text/javascript"> _uacct="UA-xxxx-x"; urchinTracker();</script>

• Check the reports to see profiles of your visitors

Mark your territory on PlazesMark your territory on Plazes

• What is it? Plazes (http://beta.plazes.com)• What does it do? The Plazer software, which is installed locally, looks for

the hardware ID of your local network (MAC ID) and checks whether it is already in the database with an address, so we can plaze you at that location.

• How do I integrate it?– Create a Plazes account– Download and install Plazes software– Add Plazes Badge to your site

Track your comments with coCommentTrack your comments with coComment

• What is it? coComment (http://www.cocomment.com/)• What does it do? coComment keeps track of all the online conversations you're

following in one convenient place, and informs you whenever something is added to a conversation. coComment also allows you to publish your conversations to your blog in a click or send them to your friends via email.

• How do I integrate it?– Add coComment JavaScript to comment form template

<script type="text/javascript"> var blogTool = "DominoBlog"; var blogURL = "<$DXURL$>"; var blogTitle = "<$DXTitle$>"; var postURL = "<$DXURL$>dx/<$DXDocumentLink$>"; var postTitle = "<$DXSubject$>"; var commentTextFieldName = "textcomment"; var commentButtonName = "SubmitButton"; var commentAuthorLoggedIn = false; var commentFormName = "_DominoForm";

</script><script id="cocomment-fetchlet" src="http://www.cocomment.com/js/enabler.js"></script>

– Install coComment extension for Firefox– Share your coComments on your blog

• Customize your latest comments, commentors, or keywords• Use JSON to completely control the look and feel of the comments

Tag your links with TechnoratiTag your links with Technorati

• What is it? Technorati (http://www.technorati.com/)• What does it do? Technorati allows you to search for blog entries based

on keywords and displays blogs that have linked to your blog.• How do I integrate it?

– Sign up for an account on Technorati– Claim your blog address(es)– Ping Technorati when you update your blog, either manually

(http://pingrati.net/ping/) or via configuration document– Add links to your template, favorite and who’s linked to this blog– Add microformat to your external links (rel=“tag”)

Previews of linked sites is a SNAP!Previews of linked sites is a SNAP!

• What is it? SNAP Preview Anywhere (http://www.snap.com/)• What does it do? Snap Preview Anywhere makes it easier for people to

know where they're going when they click on a link. Your site becomes easy to navigate. And if the link doesn't go where they want, they'll know before they leave. Besides, Snap Preview Anywhere is cool!

• How do I integrate it?– Sign up for SNAP Preview Anywhere– Install the code in the <Head> section of your Page Templates

<script defer="defer" id="snap_preview_anywhere" type="text/javascript" src="http://spa.snap.com/snap_preview_anywhere.js?ap=1&key=4a727fa71fb49a4f4bee61e759e49a69&sb=0&domain=www.yourdomain.com/"></script>

Spread the word with PodcastsSpread the word with Podcasts

• What is it? A Podcast is a media file that is distributed by subscription over the Internet for playback on mobile devices and personal computers.

Taking Notes (http://www.takingnotespodcast.com/) Bruce Elgort and Julian Robichaux

IdoNotes (http://www.idonotes.com/) Chris MillerIBM Shortcuts (http://www.ibm.com/shortcuts)

• What does it do? Podcasts give you a new way to reach your audience and interact with them on a more personal level.

• How do I integrate it?– Create the podcast file (MP3)– Add it to the Shared Resources– Add new entry and fill out the Media tab– Syndicate it on iTunes

Show the world your pretty face via FlickrShow the world your pretty face via Flickr

• What is it? Flickr (http://www.flickr.com/)• What does it do? Flickr, and it’s brethren, allow users to easily share

photos with friends.• How do I integrate it?

– Sign up for an account on Flickr, part of Yahoo!– Upload the photos you want to share– Add photos to your blog entries– Add badge to your template– Add link to RSS feed to your template– Write your own custom photo sharing app using Flickr’s API

My Blog’s all a TwitterMy Blog’s all a Twitter

• What is it? Twitter (http://www.twitter.com)• What does it do? Twitter is a community of friends and strangers from

around the world sending updates about moments in their lives. You can send updates in three ways: send a text message from your mobile phone, type a message from the Twitter site, or instant message from AIM, Jabber or Gtalk.

• How do I integrate it?– Sign up for a Twitter Account– Add a Flash or JavaScript Badge to your blog– Start sending in status updates via text message, IM, or the Twitter site.

Connect to OpenNTFConnect to OpenNTF

• What is it? OpenNTF (http://www.openntf.org/)• What does it do? OpenNTF is a site devoted to getting groups of

individuals all over the world to collaborate on Lotus Notes/Domino applications and release them as open source.

• How do I integrate it? – Add OpenNTF plugin to your template.

<script type="text/javascript"></script><script type="text/javascript" src="http://www.openntf.org/projects/pmt.nsf/openntfplugin.js"></script>

Get your AIM on targetGet your AIM on target

• What is it? AIM Whimsicals (http://developer.aim.com/whimsicals)• What does it do? AIM Whimsicals are a fun and easy way to add AIM

functionality to any web page. They let AIM users view their Buddy List, send and receive IMs, and view presence information - directly on the web page.

• How do I integrate it?– Sign up for an AIM account– Grab an API key– Add the code to your blog– Customize the UI to match your blog

Make your site sizzle with JS FrameworksMake your site sizzle with JS Frameworks

• What is it? prototype (http://prototype.conio.net/), Dojo (http://dojotoolkit.org/), jQuery (http://jquery.com/), script.aculo.us (http://script.aculo.us/), Yahoo! User Interface Library (http://developer.yahoo.com/yui/) and many others.

• What does it do? Javascript Frameworks allow web site developers to more easily write code to do complex UI and DOM operations with pre-built libraries and widgets.

• How do I integrate it?– Figure out which framework to use – NO SMALL TASK– Download the Javascript files and add them as Javascript Resources

or let Yahoo do the hosting for you– Read the Documentation thoroughly

Other Third Party toolsOther Third Party tools

• GeeSee Chat (http://www.geesee.com/)• Meebo IM (http://www.meebome.com/)• Accuweather.com netWeather (http://netwx.accuweather.com/)• Amazon.com Associates

(http://affiliate-program.amazon.com/gp/associates/join)• Google Maps (http://maps.google.com/)• Frappr Map (http://www.frappr.com/)• Vlocate (http://www.wefixit.de/services)• webPolls by Sparklit (http://webpoll.sparklit.com/)• YouTube (http://www.youtube.com/)

Additional resourcesAdditional resources

• Steve Castledine regularly blogs about things you can do with the blogging template. You can go right to those posts with this link:

http://www.stevecastledine.com/sc.nsf/archive?openview&title=Blog+Template&type=cat&cat=Blog+Template&sort=I

• Lotus Support Knowledgebase – Search for “Domino Blog Template”

Additional resourcesAdditional resources

• If you want to get more involved in the Lotus community, an excellent way is to blog! You will need to:

– Choose a host for your blog. Companies that provide blog hosting for Domino include:

• http://connectria.com/• http://prominic.net/• http://dominodeveloper.net/

– Choose a blogging template• Follow Mike Rhodin and use the IBM Lotus Domino Blogging template! Only on the

7.0.2 Domino installation.• Go to http://openntf.org/ and get Blogsphere. And check out Declan Lynch’s

“Teaching An Old Blog New Tricks” blog at http://www.blogsphere.net/. Declan is the creator of the Blogsphere template.

• If your company is uses Quickplace/Quickr, check out Qblog from SNAPPS at http://www.snapps.com/SNAWEB.NSF/0/44CD269257591E7B86257226006E6786

– Let the community know that you are there!• Go to http://www.dominoblogs.com/ and register your site.• Make sure you stop by other blogs in the community and leave comments so that we

can get to know you!– If you write it well, they will come. Find your voice and let it be heard.

Contact meContact me

• Feel free to contact me online if you have questions!– Blog: http://www.phigsaidwhat.com/

– Email: [email protected]

– IM: Phigmentb on MSN, AOL, and Yahoo

Q & AQ & A

Please step up and ask me questions!

Don’t be shy, I don’t bite much.

Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template

Technology

Transcript of Blog It Up, Baby! Extending the new IBM Lotus Domino Blog Template