Archive for April, 2009
Web Development Tips For Web Solutions Management Server (previously RedDot CMS)
Monday, April 27th, 2009Note: This post also appears on the Unofficial RedDot CMS Blog - check it out for more RedDot related posts from RedDot developers across the globe and less of my personal stuff 
One(!) of my current projects is about to have some web development done prior to being built in Web Solutions Management Server (previously RedDot CMS) which has started me thinking about some of the lessons I have learnt through this process previously. Passing these tips on to whomever is doing the web development, whether it be yourself, a colleague or an outside agency should make your job a lot easier!
Tip 1 - Develop *outside* of the CMS
Web Solutions Management Server is *not* an IDE and you will only frustrate yourself trying to use it as one. Use your favourite tools and construct a plain HTML site first. Doing so provides numerous additional advantages:
- You can use dedicated web development tools.
- You can use dedicated version control software to track changes in the design.
- Yuo can use diff tools to pinpoint changes to be made to the CMS implementation.
- You can check display issues free from issues with the CMS implementation.
- Iterating the design is much faster and less frustrating.
Obviously not an issue if you are using an agency unfamiliar with Web Solutions Management Server.
Tip 2 - Separate your CSS into files with and without images
Take your CSS file(s) and extract all of the background images into a single CSS file. Why? Because all of these will become image placeholders in the CMS. (In fact, anything that will become a placeholder should be in this file). Background image links will rarely change in the iterative process, but your CSS probably will - and this way you should be able to simply copy and paste over the other templates without worrying where the changes actually occurred or re-instating multitudes of image placeholders…
Tip 3 - Make sure you have examples of content permutations
You are building an author editable site, not a static brochure site right? So you should check the design for edge cases in the content:
- Zero intances - what happens if there is no content in a particular area or areas?
- One instance - we usually get this right, but it pays to check
- Many instances - what happens with many instances?
Also, you should check that the order of the content doesn’t break anything or look wrong either. All of these issues will soon become apparent in your implementation. All are much more easily discovered and rectified before you start building in the CMS.
Tip 4 - Do a red dot version as well
Why buy one when you can buy two for twice the price? Incorporating the editing interface into a second version of your plain HTML site has a number of advantages:
- It makes sure you have thought about the red dots up front and therefore determined to some extent the content classes that will need to be built.
- It makes sure that there is space for the editing interface.
- It prevents you from trying to design the red dot editing interface within the CMS (see Tip 1) which is bound to cause more CSS issues (see Tip 2)
Tip 5 - Surround content areas with DIV tags
By content areas I mean those that will later become text placeholders. This will allow you to style the content areas independently via class attributes on the DIV tags. You should probably style the DIV and P text the same, in case your P tags go missing. Make sure these content areas are styled based on the output of the Rich Text Editor or you will be fighting an uphill battle.
What tips do you have?
While it would be nice to be able to hold off implementation until all of the web development is complete, I have yet to see this happen. If nothing else, the implementation itself often leads to changes in the design. Rather than fighting change, here we at least try to minimise and control it.
Do you have any pre CMS build web development tips to share?
Open Text Content Day UK 2009 Review
Sunday, April 26th, 2009Note: This post also appears on the Unofficial RedDot CMS Blog - check it out for more RedDot related posts from RedDot developers across the globe and less of my personal stuff
Introduction
I missed the UK Community Day last year (due to a clash with a holiday in Croatia) so this year I made a commitment to go to as many of the Web Solutions Management Server (previously RedDot CMS) conferences as possible (without leaving the UK that is.) Apart from keeping up-to-date and networking, I was also wanted to determine whether I would be coming back next year
So on Thursday, April 23rd 2009 I was at Twickenham Stadium for the Open Text Content Day UK 2009 - the first of three conferences I plan to attend this year (the other two being the 4th European RedDot Usergroup Conference and the UK Web Solutions Community Day 2009.)
The day was broken up into the initial keynote address(es) followed by six breakout sessions with choices from across eight tracks, interspersed with refreshments and lunch. To let you know where I am coming from, I am a Web Solutions Management Server developer - pretty much the coal face (development wise) of only one of a plethora of Open Text products. Consequently, I did not have high expectations for the day - I did not expect anything technical from the keynotes and out of 47 sessions, I think I had only managed to identify two that appeared Web Solutions Management Server specific.
Keynotes
I am usually quite wary of keynote addresses from large companies but I was not disappointed by Open Text. Open Text’s commitment this year to research, development and education is impressive. Their understanding of the Internet, past, present and particularly future (its social media, video and keyboard-less interfaces) was scarily more forward thinking than I would have expected - making me question whether I am even keeping up - or worse, slowly falling behind. Being classified as part of the “keyboard” generation left me wondering whether Steve Jobs is shaking his head at me because I am excited that I will finally have cut and paste on my iPhone soon… Open Text’s vision for their product suite was equally impressive - standing on their own to meet specific needs or working seamlessly together to solve any business requirement.
It is interesting that Open Text appears to get the speed at which ideas happen on the Internet and the necessity for safe and secure products to make the most of these ideas. How they plan to implement these products in a timely manner, however, was unclear. But this is all the strategic vision, and Open Text was open about the fact that they aren’t there yet. Obviously I can’t speak for all of their products - but in my opinion they have a long way to go with Web Solutions Management Server to bring it up to the quality, integration and vision presented in the keynotes. I will believe it when I see it - and I wish Open Text the best of luck with that.
Breakout Sessions
Obviously I couldn’t attend all of the breakout sessions - so perhaps Paul might add a bit about those sessions he went to that I didn’t - so here is a run down of what I attended (you can check the details on the agenda):
Rise of the ECM Architect (ECM Champion Track)
I went to this more out of personal interest than anything else. The panel format was useful in providing a rounded picture and discussion of the ECM Architect role as each panellist had something unique to share coming from different backgrounds and companies. It was a bit dry, and as a double session was let down a little by people leaving in the middle to go to a different session. I did think of a great feature for my own CMS aspirations in this session though.
ECM: Improve your ROI, by focusing on people and process, and not just Technology (Partner Track)
After this I realised that ECM = LiveLink, not Web Solutions Management Server and the Partner Track was basically an opportunity for Open Text partners to pitch themselves and their products and/or services. While interesting, I didn’t learn anything new.
Case Study - HM Treasury (Public Sector Track)
Did you know the HM Treasury uses Web Solutions Management Server? Unfortunately this was a very high level session. This was more disappointing as it ended up being the only Web Solutions Management Server session - as the other one was cancelled. Still there were some interesting points:
- The task was simply a migration from an existing web site to Web Solutions Management Server, including all content (8k-10k pages) - completed within 12 weeks.
- All content was transferred manually - basically they threw bodies at it.
- The ability of Web Solutions Management Server to publish out via FTP to an independent web server was critical to ensure information was secure in the CMS prior to publication.
- The challenge of training on the actual web site prior to go live - when the build is not yet complete. (Why do they even need training? Its not like people need training to use FaceBook or Twitter…)
Enterprise 2.0 - Enabling the Social Workplace (ECM Champion Track)
Although this session was focussed on social media for the enterprise, the example was the STA Travel site (which is a Web Solutions Management/Delivery Server site). However, again, this session was high level and didn’t go into any technical details.
What can you do to protect your Open Text investment while reducing cost? (Partner Track)
I soon realised this was another Partner presentation, and for products to assist with eDOCS - which I have no experience with. However, what I found interesting was what the products *did* - basically adding reporting and auditing functionality and synchronisation capabilities across multiple libraries to an Open Text product with limited inbuilt functionality - if the functionality existed at all. Sound familiar? How cool would it be to be able to install a Web Solutions Management Server plug-in that allowed you to:
- Synchronise projects across servers (development and production for example) whereby the authorisations are also synchronised (by synchronising users and groups by name rather than guid)
- Update content classes *including* element attributes?
- Advanced reporting - Diff tool for content classes anyone?
Partner Exhibitors & Open Text Solution Pods
I didn’t make too much use of these other than to pick up some free education vouchers from AIIM and to visit the Open Text Web Solutions pod - which was manned by the sales team. The sales guy was very enthusiastic, even with the slowness of running all of his demos at the same time in individual virtual machines on an overworked laptop. I didn’t feel I could get much of a word in edgewise and so was left to amuse myself with the implementation issues I know all to well that he was happy to gloss either over or right past. I guess on the upside it keeps me in a job!
Venue & Catering
The venue and catering were fine. Paul and I took the train from Reading, with the only mishap being it stopping at Whitton, not Twickenham (or maybe in addition to?) which made the walk longer than we expected and our return journey problematic - but nothing to do with Open Text
Stuff
A small Open Text / Microsoft / SAP branded netbook bag (I think) containing a pad, advertising and various parenphenalia. Two biros (Open Text & Steria). CD (Open Text eLearning demonstration). USB key (PDFs of various books).
Conclusion
In all, much better than I had expected. I think it is important to weigh up the merits of attending versus how many Open Text products you actually use, however the day is free and I do think I will be making the effort again next year. Personally, I am looking forward to the UK Web Solutions Community Day 2009 which should be more focused on the Open Text product I do use.
Now on Twitter
Saturday, April 25th, 2009You can now follow me on Twitter: adrianmateljan
Hobbes - 8 Weeks
Wednesday, April 22nd, 2009
Hobbes (8 weeks)
Last Sunday we made the trip down to East Sussex to visit Hobbes. He was a bit shy - a cat fight (involving two older cats) which occurred just before we arrived had apparently spooked him. Shy or not, he couldn’t resist chasing a piece of string like a madman. (or should that be madcat?)
OpenText Content Day UK 2009
Tuesday, April 21st, 2009
I will be attending the OpenText Content Day UK 2009 on Thursday at Twickenham Stadium. Any RedDotters that are going and read this blog or the Unofficial RedDot CMS Blog - well I hope to see you there!
Jinx
Tuesday, April 21st, 2009Had a bad start to the day today. Firstly, my iPhone - which I am sure I had fully charged - ran out of battery life overnight and hence failed to perform its duties as an alarm clock. Luckily I only overslept by 45 minutes.
But get this, I was drinking my “green” drink over at the TV, reading my e-mail on my iPhone (now plugged in and recharging from my main power board) when the bottom of my glass fell out! Result - “green” drink everywhere, including splattered across my main power board (thankfully I wasn’t standing right over it - or I imagine the start of my day would have been much worse…)
The glass had a heavy bottom and a deep etched design - both of which probably contributed - but still it isn’t something you would expect, right? I’m pretty sure glass is dishwasher proof. Expansion/contraction in our conservatory kitchen perhaps? I have had the glass for probably about a year…
Thankfully the rest of the day was incident free. (I was under instruction to come straight home if it wasn’t, just in case!)
Off Target
Saturday, April 18th, 2009
93.1kg
Ok, we are now officially off target. Not only that, but I missed the April 1st update as well. Still, given that Louisa and I have been to Cornwall over Easter, it could be worse!
Lou has us both on a new alkaline regime for the next 12 weeks, so I am expecting to make some new dents in the above graph. It involves an alkaline diet as well as exercise. I can´t speak for the regime itself (yet) but I do think any course of action that involves not over-eating and exercise will work if applied consistently (its an energy equation, right?) Anyway, with Lou on board now it should make things a little easier. The removal of a lot of complex carbohydrates and sugars from our diet shouldn´t hurt either! Lack of results to this point have simply been a lack of consistency in eating and exercising, in my humble opinion.
The One True Container
Saturday, April 18th, 2009Note: This post also appears on the Unofficial RedDot CMS Blog - check it out for more RedDot related posts from RedDot developers across the globe and less of my personal stuff
One Container to rule them all, One Container to find them,
One Container to bring them all and in the templates bind them
In the CMS of OpenTextRedDot where the Content lies
Prologue
Ok, first up - a warning and some history. This is a long post that I have been working on, off and on, since the end of last year. Don´t be scared, most of the time and the bulk of the post is in the examples - which I have only recently had access to a suitable server to build and test. With a bit of luck, future posts will be a lot more compact - as this article lays the context for a lot of other posts I have been meaning to write - both in providing what I hope you will find to be a ¨real¨ example site, as well as the base template ¨pattern¨ that a lot of my solutions build upon.
So this post is a story about base templates. What I´ve seen, what I use and what I consider to be the advantages and disadvantages of both. Interestingly though, this post came about not from developing new projects, but from refactoring existing ones - and therefore I hope brings value regardless of where you are currently at. What I am about to show you comes squarely under the category of “things I wish I had known before my first project”.
This post is split into three sections. The first introduces you to our example project with what I consider to be the ¨easiest to implement, hardest to maintain¨ method of base template creation - ¨copy and paste¨. The second section takes our example project and converts it to what seems to be the most common method - ¨header and footer¨. The final section will lead you through the steps to refactor any project to my preferred method - ¨include container¨. Along the way there are sure to be a few interesting tips as well.
On a final note before we begin proper - while the example project works and hopefully will help you in understanding the advantages and disadvantages of the various methods discussed - it is not complete (for one, it doesn´t contain any red dots) nor optimal (for example, we have a lot more work to do towards localisation). Feel free to note in the comments any issues you would like to see addressed in future articles (or write them yourself!) - but try to keep the implementation discussions to the topic of this article - thanks! Oh, and probably one thing this example unfortunately doesn´t lend itself well to is navigation manager examples - but we will cross that bridge when we come to it.
The Fellowship of the Ring - Copy and Paste
So - how do you create your base templates? I expect most RedDot developers´ first experience is the RedDot training itself, which tends to be rather simplistic (as they need to teach you the basics of the system) and results in what I call ¨copy and paste¨ base templates. Basically, the process is as follows:
- Cut and paste the HTML of the web site into the template editor.
- Replace all links, images, content etc with the appropriate placeholders.
- Add red dots.
I have unfortunately not yet come across a HTML site as simple as the training one to implement in RedDot. In order to create an example with real world complexity and not burden myself with permission issues (nor creating a web site as well as the RedDot implementation) I have based my example project on the Unofficial RedDot CMS Blog itself! Not an ideal web site for RedDot you might say, but that is also a good reason to use it - it will highlight more challenges for this and future articles.
Applying ¨copy and paste¨ to the Unofficial RedDot CMS Blog gives us a base template (for articles) like so:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head profile="http://gmpg.org/xfn/11">
<title><%hdl_headline%> | Unofficial RedDot CMS blog</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta name="robots" content="index, nofollow, noodp">
<meta http-equiv="expires" content="43200">
<meta name="audience" content="all">
<meta name="language" content="en">
<meta http-equiv="content-language" content="en">
<link rel="stylesheet" href="<%anc_css_style2%>" type="text/css" media="screen, projection">
<!--[if lt IE 7]>
<link rel="stylesheet" href="<%anc_css_ie%>" type="text/css" media="screen, projection">
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="Unofficial RedDot CMS blog RSS Feed" href="<%anc_xml_rss%>">
<link rel="alternate" type="application/atom+xml" title="Unofficial RedDot CMS blog Atom Feed" href="<%anc_xml_atom%>">
<link rel="pingback" href="<%anc_pingback%>">
<link rel="shortcut icon" href="<%img_favicon%>">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<%anc_xml_rsd%>">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="<%anc_xml_wlwmanifest%>">
<!-- all in one seo pack 1.4.7.4 [245,327] -->
<meta name="description" content="<%stf_meta_description%>">
<meta name="keywords" content="<%stf_meta_keywords%>">
<!-- /all in one seo pack -->
<!-- Added By Democracy Plugin. Version 2.0.1 -->
<script type="text/javascript" src="<%anc_js_democracy%>"></script>
<link rel="stylesheet" href="<%anc_css_basic%>" type="text/css">
<link rel="stylesheet" href="<%anc_css_style1%>" type="text/css">
<link href="<%anc_css_syntax_highlighter%>" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="<%anc_css_sociable%>">
<!-- Protected by WP-SpamFree v2.0.0.1 :: JS BEGIN -->
<script type="text/javascript" src="<%anc_js_wp_spamfree%>"></script>
<!-- Protected by WP-SpamFree v2.0.0.1 :: JS END -->
</head><body> <!--start body-->
<div class="container"> <!--start container-->
<div id="header" class="column span-14">
<div id="logo" class="column first">
<div class="title">
<div><a href="<%anc_home%>">Unofficial RedDot CMS blog</a></div>
<div class="desc">RedDot hints from developers, freelancers and fellow customers</div>
</div>
<!--<a href="<%anc_home%>" title="RedDot hints from developers, freelancers and fellow customers: Home" class="sitelogo"></a>-->
</div>
<div id="search_menu" class="column span-6 border_left last push-0">
<div id="search" class="column first">
<h3 class="mast4">Search</h3>
<div id="search-form">
<form method="get" id="searchform" action="<%anc_search%>">
<div><label for="s" class="none">Search for:</label>
<input name="s" id="s" class="search_input" value="" type="text">
<label for="searchsubmit" class="none">Go</label>
<input id="searchsubmit" class="submit_input" value="Search" type="submit"></div>
</form>
</div>
</div>
<ul id="menu">
<li><span class="home"><a href="<%anc_home%>">Home</a></span></li>
<!-- <li><span class="about"><a href="<%anc_about%>">About</a></span></li> -->
<li><span class="archives"><a href="<%anc_archives%>">Archives</a></span></li>
<li><span class="subscribe"><a href="<%anc_subscribe%>">Subscribe</a></span></li>
<!-- <li><span class="contact"><a href="<%anc_contact%>">Contact</a></span></li> -->
</ul>
</div>
</div> <!--end header-->
<div id="topbanner_single" class="column span-14"> <!-- start top banner -->
<div class="pagetitle">
// you’re reading...
</div>
</div> <!-- end top banner -->
<div id="post_content" class="column span-14"> <!-- start home_content -->
<div class="column span-11 first">
<h2 class="post_cat"><%stf_category%></h2>
<h2 class="post_name" id="post-<%inf_pageId%>"><%hdl_headline%></h2>
<div class="post_meta">
By <a href="<%anc_author%>" title="Posts by <%inf_originalAuthorFullName%>"><%inf_originalAuthorFullName%></a> <span class="dot">⋅</span> March 11, 2009<%inf_pageReleaseDate%> <span class="dot">⋅</span> <a href="#comments">Post a comment</a>
</div>
<%txt_content%>
<div class="sociable">
<div class="sociable_tagline">
<h5>Share and Enjoy:</h5>
</div>
<ul>
<li><a rel="nofollow" href="javascript:window.print();" title="Print this article!"><img src="<%img_printer%>" onclick="" title="Print this article!" alt="Print this article!" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="mailto:?subject=<%hdl_headline%>&body=<%inf_pageUrl%>" title="E-mail this story to a friend!"><img src="<%img_emailLink%>" onclick="" title="E-mail this story to a friend!" alt="E-mail this story to a friend!" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&url=<%inf_pageUrl%>&title=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://digg.com/submit?phase=2&url=<%inf_pageUrl%>&title=<%hdl_headline%>');" title="Digg"><img src="<%img_digg%>" title="Digg" alt="Digg" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=<%inf_pageUrl%>&title=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://reddit.com/submit?url=<%inf_pageUrl%>&title=<%hdl_headline%>');" title="Reddit"><img src="<%img_reddit%>" title="Reddit" alt="Reddit" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=<%inf_pageUrl%>&title=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.stumbleupon.com/submit?url=<%inf_pageUrl%>&title=<%hdl_headline%>');" title="StumbleUpon"><img src="<%img_stumbleupon%>" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<%inf_pageUrl%>&title=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.google.com/bookmarks/mark?op=edit&bkmk=<%inf_pageUrl%>&title=<%hdl_headline%>');" title="Google"><img src="<%img_googleBookmark%>" title="Google" alt="Google" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=<%inf_pageUrl%>&title=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://del.icio.us/post?url=<%inf_pageUrl%>&title=<%hdl_headline%>');" title="del.icio.us"><img src="<%img_delicious%>" title="del.icio.us" alt="del.icio.us" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.mister-wong.com/addurl/?bm_url=<%inf_pageUrl%>&bm_description=<%hdl_headline%>&plugin=soc" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mister-wong.com/addurl/?bm_url=<%inf_pageUrl%>&bm_description=<%hdl_headline%>&plugin=soc');" title="MisterWong"><img src="<%img_misterWong%>" title="MisterWong" alt="MisterWong" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=<%inf_pageUrl%>&t=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.facebook.com/share.php?u=<%inf_pageUrl%>&t=<%hdl_headline%>');" title="Facebook"><img src="<%img_facebook%>" title="Facebook" alt="Facebook" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.mixx.com/submit?page_url=<%inf_pageUrl%>&title=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mixx.com/submit?page_url=<%inf_pageUrl%>&title=<%hdl_headline%>');" title="Mixx"><img src="<%img_mixx%>" title="Mixx" alt="Mixx" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.furl.net/storeIt.jsp?u=<%inf_pageUrl%>&t=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.furl.net/storeIt.jsp?u=<%inf_pageUrl%>&t=<%hdl_headline%>');" title="Furl"><img src="<%img_furl%>" title="Furl" alt="Furl" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<%inf_pageUrl%>&title=<%hdl_headline%>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%stf_summary%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.linkedin.com/shareArticle?mini=true&url=<%inf_pageUrl%>&title=<%hdl_headline%>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%stf_summary%>');" title="LinkedIn"><img src="<%img_linkedIn%>" title="LinkedIn" alt="LinkedIn" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&url=<%inf_pageUrl%>&title=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/https://favorites.live.com/quickadd.aspx?marklet=1&url=<%inf_pageUrl%>&title=<%hdl_headline%>');" title="Live"><img src="<%img_live%>" title="Live" alt="Live" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=<%inf_pageUrl%>&title=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://ma.gnolia.com/bookmarklet/add?url=<%inf_pageUrl%>&title=<%hdl_headline%>');" title="Ma.gnolia"><img src="<%img_magnolia%>" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://twitter.com/home?status=<%inf_pageUrl%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://twitter.com/home?status=<%inf_pageUrl%>');" title="TwitThis"><img src="<%img_twitter%>" title="TwitThis" alt="TwitThis" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=<%inf_pageUrl%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://technorati.com/faves?add=<%inf_pageUrl%>');" title="Technorati"><img src="<%img_technorati%>" title="Technorati" alt="Technorati" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.newsvine.com/_tools/seed&save?u=<%inf_pageUrl%>&h=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.newsvine.com/_tools/seed&save?u=<%inf_pageUrl%>&h=<%hdl_headline%>');" title="NewsVine"><img src="<%img_newsVine%>" title="NewsVine" alt="NewsVine" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.tumblr.com/share?v=3&u=<%inf_pageUrl%>&t=<%hdl_headline%>&s=" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.tumblr.com/share?v=3&u=<%inf_pageUrl%>&t=<%hdl_headline%>&s=');" title="Tumblr"><img src="<%img_tumblr%>" title="Tumblr" alt="Tumblr" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=<%inf_pageUrl%>&submitHeadline=<%hdl_headline%>&submitSummary=<%stf_summary%>&submitCategory=science&submitAssetType=text" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://buzz.yahoo.com/submit/?submitUrl=<%inf_pageUrl%>&submitHeadline=<%hdl_headline%>&submitSummary=<%stf_summary%>&submitCategory=science&submitAssetType=text');" title="Yahoo! Buzz"><img src="<%img_yahooBuzz%>" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://yigg.de/neu?exturl=<%inf_pageUrl%>&exttitle=<%hdl_headline%>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://yigg.de/neu?exturl=<%inf_pageUrl%>&exttitle=<%hdl_headline%>');" title="Yigg"><img src="<%img_yigg%>" title="Yigg" alt="Yigg" class="sociable-hovers"></a></li>
</ul>
</div>
<h5>Related posts:</h5><ol><!IoRangeDynLink><li><a href="<%anc_related%>r" rel="bookmark" title="Permanent Link: <%hdl_headline%>"><%hdl_headline%></a></li><!/IoRangeDynLink></ol>
<h2 class="post_comm2">About the author:</h2>
<div id="authorinfo">
<!IoRangeConditional><img src="<%img_author%>" alt="<%inf_originalAuthorFullName%>" title="<%inf_originalAuthorFullName%>"><!/IoRangeConditional>
<%txt_aboutAuthor%>
</div>
<div class="post_meta">
<img src="<%img_tags%>" class="posttag" alt="Print This Post" title="Print This Post" style="border: 0px none ;">Tags: <!IoRangeDynLink><a href="<%anc_tag%>" rel="tag"><%hdl_headline%></a>, <!/IoRangeDynLink></div>
<div id="comments"> <!-- start comments -->
<div id="commenthead">
<h2 class="post_comm">Discussion</h2>
<h3 class="mast5">? comments for “<%hdl_headline%>”</h3>
</div>
<!-- You can start editing here. -->
<ol id="commentlist">
<%con_comments%>
</ol>
<div id="comment-form">
<h2 id="respond" class="post_comm2">Post a comment</h2>
<form action="<%anc_comments%>" method="post" id="commentform">
<fieldset>
<p>
<label for="author" class="com">Name *</label>
<input class="comtext" name="author" id="author" value="" size="22" tabindex="1" type="text">
</p>
<p>
<label for="email" class="com">E-mail *</label>
<input class="comtext" name="email" id="email" value="" size="22" tabindex="2" type="text">
</p>
<p>
<label for="url" class="com">Web site</label>
<input class="comtext" name="url" id="url" value="" size="22" tabindex="3" type="text">
</p>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </small></p>-->
<p>
<label for="comment" class="com">Comment</label>
<textarea class="comtext" name="comment" id="comment" cols="100" rows="10" tabindex="4"></textarea>
</p>
</fieldset>
<fieldset>
<p>
<input name="submit" id="submit" tabindex="5" class="comsubmit" value="Submit Comment" type="submit">
<input name="comment_post_ID" value="74" type="hidden">
</p>
<noscript><p><strong>Currently you have JavaScript disabled. In order
to post comments, please make sure JavaScript and Cookies are enabled,
and reload the page.</strong> <a
href="http://www.google.com/support/bin/answer.py?answer=23852"
rel="nofollow external" >Click here for instructions</a> on how to
enable JavaScript in your browser.</p></noscript>
</fieldset>
</form>
</div>
</div> <!-- end comments -->
</div>
<div class="column span-3 last">
<div id="side_categories">
<h3 class="mast">Categories</h3>
<ul class="cat">
<%con_categories%>
</ul>
</div>
<div id="side_recent_comments">
<h3 class="mast">Recent Comments</h3>
<ul class="reccom">
<!IoRangeList><li><%inf_originalAuthorFullName%> on <a href="<%lst_recentComments%>" title="View all comments for <%hdl_headline%>"><%hdl_headline%></a></li><!/IoRangeList>
</ul>
</div>
</div>
</div> <!-- start home_content -->
<div id="footer" class="column span-14">
<div class="column span-7 first">
© 2009 Unofficial RedDot CMS blog. <a href="<%anc_subscribe%>"><img src="<%img_subscribe%>" alt="Entries (RSS)" style="margin: 2px 0pt 0pt 7px; vertical-align: top;"></a>
</div>
<div class="column span-7 last">
<div class="push-0">
<a href="http://wordpress.org/" title="Powered by WordPress"><img src="<%img_wordPress%>" alt="Powered by WordPress"></a>
<a href="http://code.google.com/p/the-morning-after/" title="Design: The Masterplan"><img src="<%img_masterplan%>" alt="Theme by The Masterplan"></a>
</div>
</div>
</div>
</div> <!--end container-->
<!-- WordPress theme by Arun Kale / www.themasterplan.in | Download it at http://code.google.com/p/the-morning-after/ -->
<!-- Google Analytics for WordPress | http://yoast.com/wordpress/google-analytics/ -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="<%anc_js_googleAnalytics%>" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5132063-1");
</script>
<script type="text/javascript">
pageTracker._trackPageview();
</script>
<!-- End of Google Analytics code -->
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCore%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCSharp%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterPhp%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterJScript%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterVB%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterSQL%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterXML%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCSS%>"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<%swf_clipboard%>';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!-- Piwik code inserted by Piwik Analytics Wordpress plugin by Jules Stuifbergen http://blog.jongbelegen/piwik -->
<script language="javascript" src="<%anc_js_piwik%>" type="text/javascript"></script>
<script type="text/javascript">
<!--
piwik_action_name = document.title;
piwik_idsite = 1;
piwik_url = '<%anc_piwik%>';
piwik_log(piwik_action_name, piwik_idsite, piwik_url);
//-->
</script><img src="<%img_piwik%>" alt="Piwik" style="border: 0pt none ;">
<object>
<noscript><p>Web analytics <img src="<%anc_piwik%>?idsite=1" style="border:0" alt="piwik"/></p>
</noscript></object>
<!-- /Piwik -->
<!--end body-->
</body></html>
Which in SmartTree looks like this:
SmartTree
The main advantages of this approach are both the speed (the sales team can create an example of your web site in RedDot very quickly this way) and simplicity of the implementation (hence why it is so good for training). The disadvantages, however, are numerous:
- It promotes the use of multiple base templates with similar HTML code, resulting in any changes having to be meticulously applied to multiple base templates.
- Adding a new link that is common for all pages (ie CSS or Javascript files) requires you to update all instances of the content class. While RedDot provides a plugin to do this, by default it is limited to 1000 instances per content class - and this can only (easily) be raised to a maximum of 2000 due to the limitations of Redot’s search results.
- Localisation of interface elements (eg Search, Next, Previous etc) - text and graphics - is at best as problematic as adding new links. (You can put defaults in, but only for one language! Otherwise you have to update every instance in your other language variants)
- It promotes the use of excessive content and structural elements. At best this slows down SmartTree and makes it harder to find the elements you are actually interested in. At worst, SmartTree only shows a certain number of items (or at least, it did prior to version 9) and you can’t access elements beyond that. I wouldn’t be surprised if publishing is giving the page builder a heart attack either.
Handy Hint
The ¨Reference Link in Clipboard for All Content Class Instances¨and ¨Reference Page in Clipboard for All Content Class Instances¨ plugins provided by RedDotOpenText are hardcoded to work for the first 1000 instances per content class only. You should modify this to 2000.
The Two Towers - Header and Footer
What I have tended to see “in the wild” (and how my first project went) was what I call “header and footer” base templates. Basically the process is the same as for “copy and paste” above, with the following exception - common pieces of HTML code are identified and extracted into their own template and replaced in the base templates with a container element. Common examples of HTML code extracted in this way includes the page header and footer - hence the name - but there may be others as well. For example, in this case I have also extracted the ¨social¨ icon bar. Templates then tend to look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head profile="http://gmpg.org/xfn/11">
<!IoRangePreExecute><%
hdl_headline = "<%hdl_headline%>"
inf_pageUrl = "<%inf_pageUrl%>"
stf_summary = "<%stf_summary%>"
%><!/IoRangePreExecute>
<title><%hdl_headline%> | Unofficial RedDot CMS blog</title>
<!-- all in one seo pack 1.4.7.4 [245,327] -->
<meta name="description" content="<%stf_meta_description%>">
<meta name="keywords" content="<%stf_meta_keywords%>">
<!-- /all in one seo pack -->
<%con_header%>
<div id="post_content" class="column span-14"> <!-- start home_content -->
<div class="column span-11 first">
<h2 class="post_cat"><%stf_category%></h2>
<h2 class="post_name" id="post-<%inf_pageId%>"><%hdl_headline%></h2>
<div class="post_meta">
By <a href="<%anc_author%>" title="Posts by <%inf_originalAuthorFullName%>"><%inf_originalAuthorFullName%></a> <span class="dot">⋅</span> March 11, 2009<%inf_pageReleaseDate%> <span class="dot">⋅</span> <a href="#comments">Post a comment</a>
</div>
<%txt_content%>
<%con_sociable%>
<h5>Related posts:</h5><ol><!IoRangeDynLink><li><a href="<%anc_related%>r" rel="bookmark" title="Permanent Link: <%hdl_headline%>"><%hdl_headline%></a></li><!/IoRangeDynLink></ol>
<h2 class="post_comm2">About the author:</h2>
<div id="authorinfo">
<!IoRangeConditional><img src="<%img_author%>" alt="<%inf_originalAuthorFullName%>" title="<%inf_originalAuthorFullName%>"><!/IoRangeConditional>
<%txt_aboutAuthor%>
</div>
<div class="post_meta">
<img src="<%img_tags%>" class="posttag" alt="Print This Post" title="Print This Post" style="border: 0px none ;">Tags: <!IoRangeDynLink><a href="<%anc_tag%>" rel="tag"><%hdl_headline%></a>, <!/IoRangeDynLink></div>
<div id="comments"> <!-- start comments -->
<div id="commenthead">
<h2 class="post_comm">Discussion</h2>
<h3 class="mast5">? comments for “<%hdl_headline%>”</h3>
</div>
<!-- You can start editing here. -->
<ol id="commentlist">
<%con_comments%>
</ol>
<%con_footer%>
Which in SmartTree look like this:
SmartTree
By giving up a bit of the speed and simplicity of implementation, we gain the following benefits:
- Changes to the HTML code within the extracted templates only needs to be updated in one place.
- Adding a new link or image that is common for all pages to the extracted templates requires only its single instance to be updated. Same for localisation. (Though adding a new link or image that is not common to all pages is trickier)
- Reduced content and structural elements per base template - you effectively trade the elements in the extracted templates for new container elements in the base template.
If the implementation is particularly advanced, you may also see pre-executing code being used to help reduce duplication and/or pass values (like page GUIDs or ids) from the base template to the extracted templates. In this example we transfer the headline, page URL and summary to the sociable container for use in constructing the links. The ¨sociable¨ component template is shown below to show how these values are ¨transferred¨:
<div class="sociable">
<div class="sociable_tagline">
<h5>Share and Enjoy:</h5>
</div>
<ul>
<!IoRangePreExecute>
<li><a rel="nofollow" href="javascript:window.print();" title="Print this article!"><img src="<%img_printer%>" onclick="" title="Print this article!" alt="Print this article!" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="mailto:?subject=<%= hdl_headline %>&body=<%= inf_pageUrl %>" title="E-mail this story to a friend!"><img src="<%img_emailLink%>" onclick="" title="E-mail this story to a friend!" alt="E-mail this story to a friend!" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://digg.com/submit?phase=2&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Digg"><img src="<%img_digg%>" title="Digg" alt="Digg" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://reddit.com/submit?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Reddit"><img src="<%img_reddit%>" title="Reddit" alt="Reddit" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.stumbleupon.com/submit?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="StumbleUpon"><img src="<%img_stumbleupon%>" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.google.com/bookmarks/mark?op=edit&bkmk=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Google"><img src="<%img_googleBookmark%>" title="Google" alt="Google" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://del.icio.us/post?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="del.icio.us"><img src="<%img_delicious%>" title="del.icio.us" alt="del.icio.us" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.mister-wong.com/addurl/?bm_url=<%= inf_pageUrl %>&bm_description=<%= hdl_headline %>&plugin=soc" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mister-wong.com/addurl/?bm_url=<%= inf_pageUrl %>&bm_description=<%= hdl_headline %>&plugin=soc');" title="MisterWong"><img src="<%img_misterWong%>" title="MisterWong" alt="MisterWong" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=<%= inf_pageUrl %>&t=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.facebook.com/share.php?u=<%= inf_pageUrl %>&t=<%= hdl_headline %>');" title="Facebook"><img src="<%img_facebook%>" title="Facebook" alt="Facebook" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.mixx.com/submit?page_url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mixx.com/submit?page_url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Mixx"><img src="<%img_mixx%>" title="Mixx" alt="Mixx" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.furl.net/storeIt.jsp?u=<%= inf_pageUrl %>&t=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.furl.net/storeIt.jsp?u=<%= inf_pageUrl %>&t=<%= hdl_headline %>');" title="Furl"><img src="<%img_furl%>" title="Furl" alt="Furl" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%= stf_summary %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.linkedin.com/shareArticle?mini=true&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%= stf_summary %>');" title="LinkedIn"><img src="<%img_linkedIn%>" title="LinkedIn" alt="LinkedIn" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/https://favorites.live.com/quickadd.aspx?marklet=1&url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Live"><img src="<%img_live%>" title="Live" alt="Live" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://ma.gnolia.com/bookmarklet/add?url=<%= inf_pageUrl %>&title=<%= hdl_headline %>');" title="Ma.gnolia"><img src="<%img_magnolia%>" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://twitter.com/home?status=<%= inf_pageUrl %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://twitter.com/home?status=<%= inf_pageUrl %>');" title="TwitThis"><img src="<%img_twitter%>" title="TwitThis" alt="TwitThis" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=<%= inf_pageUrl %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://technorati.com/faves?add=<%= inf_pageUrl %>');" title="Technorati"><img src="<%img_technorati%>" title="Technorati" alt="Technorati" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.newsvine.com/_tools/seed&save?u=<%= inf_pageUrl %>&h=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.newsvine.com/_tools/seed&save?u=<%= inf_pageUrl %>&h=<%= hdl_headline %>');" title="NewsVine"><img src="<%img_newsVine%>" title="NewsVine" alt="NewsVine" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.tumblr.com/share?v=3&u=<%= inf_pageUrl %>&t=<%= hdl_headline %>&s=" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.tumblr.com/share?v=3&u=<%= inf_pageUrl %>&t=<%= hdl_headline %>&s=');" title="Tumblr"><img src="<%img_tumblr%>" title="Tumblr" alt="Tumblr" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=<%= inf_pageUrl %>&submitHeadline=<%= hdl_headline %>&submitSummary=<%= stf_summary %>&submitCategory=science&submitAssetType=text" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://buzz.yahoo.com/submit/?submitUrl=<%= inf_pageUrl %>&submitHeadline=<%= hdl_headline %>&submitSummary=<%= stf_summary %>&submitCategory=science&submitAssetType=text');" title="Yahoo! Buzz"><img src="<%img_yahooBuzz%>" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://yigg.de/neu?exturl=<%= inf_pageUrl %>&exttitle=<%= hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://yigg.de/neu?exturl=<%= inf_pageUrl %>&exttitle=<%= hdl_headline %>');" title="Yigg"><img src="<%img_yigg%>" title="Yigg" alt="Yigg" class="sociable-hovers"></a></li>
<!/IoRangePreExecute>
</ul>
</div>
Handy Hint
Even though pages placed inside containers look separate, they are compiled into a single page. This is important for pre-executing script, as code inside a container can make use of (for better or worse!) code in the parent page above the container.
Handy Hint
To get pre-executing script to work, you need to set two options:
- Check ¨Allow active templates¨ and enter ¨Eligible suffixes¨ (eg asp) in General Settings (under Administer Project Settings in SmartTree)
- Edit the Project Variant (under Administer Project Settings in SmartTree) and select the eligible suffix in ¨Select scripting for active templates¨.
But, while we reduce the negatives from the “copy and paste” method, we don’t eliminate them - there is still HTML code duplication (usually surrounding placeholders that change between pages - in our example - the doctype, html and head tags, the img_tags and corresponding text), there are still multiple anchors and containers in each base template that don’t change and are taking up space, and if we want to add a new common component - well we are back to our original disadvantages…
The Return of the King - Include Container
What is the solution? Taking the process that led us from “copy and paste” to “header and footer” to its logical conclusion - “one include container” to contain all common code. How do we do that? One step at a time. If you are starting out on a new project, this should save you a lot of pain in the future. But where it shines is how easily it can be added to an existing project - without interfering with the existing structure and therefore allowing you to refactor the above pain spots on your terms, as and when you need or want to.
Step 1: Add your “include container” to each base template.
Create a container placeholder at the very end of each template, after the closing HTML tag. I call mine “con_include” as I liken it to the concept of using include files. I’ve previously used “con_library” and “con_prexecute” because it will all be pre-executed. The name is unimportant - choose something that has meaning to you. Surround the container with RedDot Pre-executing script block tags. A container with nothing in it won’t render as anything - so far, perfectly safe.
Handy Hint
We place our ¨con_include¨ placeholder at the end of the template because we plan to move the DOCTYPE declaration into this common code and we don´t want to risk spaces or new lines appearing before it in the final output (as it may then not be recognised). We can use ASP functions, subroutines and classes that are defined later in the file.
Step 2: Create content classes to be included, and create and connect instances to the ¨con_include¨ placeholder.
You could do this with one single content class, but I find it easier break them up into logical groupings - again, think include files.
A ¨Utility¨ content class to hold general functions used across the site:
<%
Public Function IIf(bCond, vTrue, vFalse)
If bCond Then
IIf = vTrue
Else
IIf = vFalse
End If
End Function
Public Function IsString(v)
IsString = IIf(VarType(v) = vbString, True, False)
End Function
%>
<script language="jscript" runat="server">
function GetVar(sId) {
var re = /\/\*(.*)\*\//;
return re.exec(eval(sId + ".toString()"))[1];
}
function GetTime() {
var d = new Date();
return d.getTime()
}
</script>
A ¨Page¨ content class defining a Page class to hold the contents of placeholders that are to be used in the shared output but differ from page to page:
<%
Class cPage
Private m_hdl_headline
Private m_inf_pageUrl
Private m_stf_summary
Private m_stf_meta_description
Private m_stf_meta_keywords
Public Property Get hdl_headline
hdl_headline = m_hdl_headline
End Property
Public Property Let hdl_headline(str)
m_hdl_headline = str
End Property
Public Property Get inf_pageUrl
inf_pageUrl = m_inf_pageUrl
End Property
Public Property Let inf_pageUrl(str)
m_inf_pageUrl = str
End Property
Public Property Get stf_summary
stf_summary = m_stf_summary
End Property
Public Property Let stf_summary(str)
m_stf_summary = str
End Property
Public Property Get stf_meta_description
stf_meta_description = m_stf_meta_description
End Property
Public Property Let stf_meta_description(str)
m_stf_meta_description = str
End Property
Public Property Get stf_meta_keywords
stf_meta_keywords = m_stf_meta_keywords
End Property
Public Property Let stf_meta_keywords(str)
m_stf_meta_keywords = str
End Property
End Class
%>
Handy Hint
I use ASP classes as a way to package variables, functions and subroutines to avoid polluting the global namespace and the associated issues this may lead to.
A ¨HTML¨ content class defining an HTML class to hold subroutines that will output the shared HTML:
<%
Class cHTML
Public Sub header(oPage)
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title><%= oPage.hdl_headline %> | Unofficial RedDot CMS blog</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="imagetoolbar" content="no">
<meta name="robots" content="index, nofollow, noodp">
<meta http-equiv="expires" content="43200">
<meta name="audience" content="all">
<meta name="language" content="en">
<meta http-equiv="content-language" content="en">
<!-- all in one seo pack 1.4.7.4 [245,327] -->
<meta name="description" content="<%= oPage.stf_meta_description %>">
<meta name="keywords" content="<%= oPage.stf_meta_keywords %>">
<!-- /all in one seo pack -->
<link rel="stylesheet" href="<%anc_css_style2%>" type="text/css" media="screen, projection">
<!--[if lt IE 7]>
<link rel="stylesheet" href="<%anc_css_ie%>" type="text/css" media="screen, projection">
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="Unofficial RedDot CMS blog RSS Feed" href="<%anc_xml_rss%>">
<link rel="alternate" type="application/atom+xml" title="Unofficial RedDot CMS blog Atom Feed" href="<%anc_xml_atom%>">
<link rel="pingback" href="<%anc_pingback%>">
<link rel="shortcut icon" href="<%img_favicon%>">
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<%anc_xml_rsd%>">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="<%anc_xml_wlwmanifest%>">
<!-- Added By Democracy Plugin. Version 2.0.1 -->
<script type="text/javascript" src="<%anc_js_democracy%>"></script>
<link rel="stylesheet" href="<%anc_css_basic%>" type="text/css">
<link rel="stylesheet" href="<%anc_css_style1%>" type="text/css">
<link href="<%anc_css_syntax_highlighter%>" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="<%anc_css_sociable%>">
<!-- Protected by WP-SpamFree v2.0.0.1 :: JS BEGIN -->
<script type="text/javascript" src="<%anc_js_wp_spamfree%>"></script>
<!-- Protected by WP-SpamFree v2.0.0.1 :: JS END -->
</head>
<bo<% ' %>dy> <!--start body-->
<div class="container"> <!--start container-->
<div id="header" class="column span-14">
<div id="logo" class="column first">
<div class="title">
<div><a href="<%anc_home%>">Unofficial RedDot CMS blog</a></div>
<div class="desc">RedDot hints from developers, freelancers and fellow customers</div>
</div>
<!--<a href="<%anc_home%>" title="RedDot hints from developers, freelancers and fellow customers: Home" class="sitelogo"></a>-->
</div>
<div id="search_menu" class="column span-6 border_left last push-0">
<div id="search" class="column first">
<h3 class="mast4">Search</h3>
<div id="search-form">
<form method="get" id="searchform" action="<%anc_search%>">
<div><label for="s" class="none">Search for:</label>
<input name="s" id="s" class="search_input" value="" type="text">
<label for="searchsubmit" class="none">Go</label>
<input id="searchsubmit" class="submit_input" value="Search" type="submit"></div>
</form>
</div>
</div>
<ul id="menu">
<li><span class="home"><a href="<%anc_home%>">Home</a></span></li>
<!-- <li><span class="about"><a href="<%anc_about%>">About</a></span></li> -->
<li><span class="archives"><a href="<%anc_archives%>">Archives</a></span></li>
<li><span class="subscribe"><a href="<%anc_subscribe%>">Subscribe</a></span></li>
<!-- <li><span class="contact"><a href="<%anc_contact%>">Contact</a></span></li> -->
</ul>
</div>
</div> <!--end header-->
<div id="topbanner_single" class="column span-14"> <!-- start top banner -->
<div class="pagetitle">
// you’re reading...
</div>
</div> <!-- end top banner -->
<%
End Sub
Public Sub footer
%>
<div id="comment-form">
<h2 id="respond" class="post_comm2">Post a comment</h2>
<form action="<%anc_comments%>" method="post" id="commentform">
<fieldset>
<p>
<label for="author" class="com">Name *</label>
<input class="comtext" name="author" id="author" value="" size="22" tabindex="1" type="text">
</p>
<p>
<label for="email" class="com">E-mail *</label>
<input class="comtext" name="email" id="email" value="" size="22" tabindex="2" type="text">
</p>
<p>
<label for="url" class="com">Web site</label>
<input class="comtext" name="url" id="url" value="" size="22" tabindex="3" type="text">
</p>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> </small></p>-->
<p>
<label for="comment" class="com">Comment</label>
<textarea class="comtext" name="comment" id="comment" cols="100" rows="10" tabindex="4"></textarea>
</p>
</fieldset>
<fieldset>
<p>
<input name="submit" id="submit" tabindex="5" class="comsubmit" value="Submit Comment" type="submit">
<input name="comment_post_ID" value="74" type="hidden">
</p>
<noscript><p><strong>Currently you have JavaScript disabled. In order
to post comments, please make sure JavaScript and Cookies are enabled,
and reload the page.</strong> <a
href="http://www.google.com/support/bin/answer.py?answer=23852"
rel="nofollow external" >Click here for instructions</a> on how to
enable JavaScript in your browser.</p></noscript>
</fieldset>
</form>
</div>
</div> <!-- end comments -->
</div>
<div class="column span-3 last">
<div id="side_categories">
<h3 class="mast">Categories</h3>
<ul class="cat">
<%con_categories%>
</ul>
</div>
<div id="side_recent_comments">
<h3 class="mast">Recent Comments</h3>
<ul class="reccom">
<!IoRangeList><li><%inf_originalAuthorFullName%> on <a href="<%lst_recentComments%>" title="View all comments for <%hdl_headline%>"><%hdl_headline%></a></li><!/IoRangeList>
</ul>
</div>
</div>
</div> <!-- start home_content -->
<div id="footer" class="column span-14">
<div class="column span-7 first">
© 2009 Unofficial RedDot CMS blog. <a href="<%anc_subscribe%>"><img src="<%img_subscribe%>" alt="Entries (RSS)" style="margin: 2px 0pt 0pt 7px; vertical-align: top;"></a>
</div>
<div class="column span-7 last">
<div class="push-0">
<a href="http://wordpress.org/" title="Powered by WordPress"><img src="<%img_wordPress%>" alt="Powered by WordPress"></a>
<a href="http://code.google.com/p/the-morning-after/" title="Design: The Masterplan"><img src="<%img_masterplan%>" alt="Theme by The Masterplan"></a>
</div>
</div>
</div>
</div> <!--end container-->
<!-- WordPress theme by Arun Kale / www.themasterplan.in | Download it at http://code.google.com/p/the-morning-after/ -->
<!-- Google Analytics for WordPress | http://yoast.com/wordpress/google-analytics/ -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="<%anc_js_googleAnalytics%>" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-5132063-1");
</script>
<script type="text/javascript">
pageTracker._trackPageview();
</script>
<!-- End of Google Analytics code -->
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCore%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCSharp%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterPhp%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterJScript%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterVB%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterSQL%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterXML%>"></script>
<script type="text/javascript" src="<%anc_js_syntaxHighlighterCSS%>"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = '<%swf_clipboard%>';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<!-- Piwik code inserted by Piwik Analytics Wordpress plugin by Jules Stuifbergen http://blog.jongbelegen/piwik -->
<script language="javascript" src="<%anc_js_piwik%>" type="text/javascript"></script>
<script type="text/javascript">
<!--
piwik_action_name = document.title;
piwik_idsite = 1;
piwik_url = '<%anc_piwik%>';
piwik_log(piwik_action_name, piwik_idsite, piwik_url);
//-->
</script><img src="<%img_piwik%>" alt="Piwik" style="border: 0pt none ;">
<object>
<noscript><p>Web analytics <img src="<%anc_piwik%>?idsite=1" style="border:0" alt="piwik"/></p>
</noscript></object>
<!-- /Piwik -->
<!--end body-->
</bo<% ' %>dy></html>
<%
End Sub
Public Sub tags
%><img src="<%img_tags%>" class="posttag" alt="Print This Post" title="Print This Post" style="border: 0px none ;">Tags: <%
End Sub
Public Sub sociable(oPage)
%>
<div class="sociable">
<div class="sociable_tagline">
<h5>Share and Enjoy:</h5>
</div>
<ul>
<li><a rel="nofollow" href="javascript:window.print();" title="Print this article!"><img src="<%img_printer%>" onclick="" title="Print this article!" alt="Print this article!" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="mailto:?subject=<%= oPage.hdl_headline %>&body=<%= oPage.inf_pageUrl %>" title="E-mail this story to a friend!"><img src="<%img_emailLink%>" onclick="" title="E-mail this story to a friend!" alt="E-mail this story to a friend!" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://digg.com/submit?phase=2&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://digg.com/submit?phase=2&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Digg"><img src="<%img_digg%>" title="Digg" alt="Digg" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://reddit.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://reddit.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Reddit"><img src="<%img_reddit%>" title="Reddit" alt="Reddit" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.stumbleupon.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.stumbleupon.com/submit?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="StumbleUpon"><img src="<%img_stumbleupon%>" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.google.com/bookmarks/mark?op=edit&bkmk=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Google"><img src="<%img_googleBookmark%>" title="Google" alt="Google" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://del.icio.us/post?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://del.icio.us/post?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="del.icio.us"><img src="<%img_delicious%>" title="del.icio.us" alt="del.icio.us" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.mister-wong.com/addurl/?bm_url=<%= oPage.inf_pageUrl %>&bm_description=<%= oPage.hdl_headline %>&plugin=soc" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mister-wong.com/addurl/?bm_url=<%= oPage.inf_pageUrl %>&bm_description=<%= oPage.hdl_headline %>&plugin=soc');" title="MisterWong"><img src="<%img_misterWong%>" title="MisterWong" alt="MisterWong" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.facebook.com/share.php?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.facebook.com/share.php?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>');" title="Facebook"><img src="<%img_facebook%>" title="Facebook" alt="Facebook" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.mixx.com/submit?page_url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.mixx.com/submit?page_url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Mixx"><img src="<%img_mixx%>" title="Mixx" alt="Mixx" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.furl.net/storeIt.jsp?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.furl.net/storeIt.jsp?u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>');" title="Furl"><img src="<%img_furl%>" title="Furl" alt="Furl" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.linkedin.com/shareArticle?mini=true&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%= oPage.stf_summary %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.linkedin.com/shareArticle?mini=true&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>&source=Unofficial+RedDot+CMS+blog+RedDot+hints+from+developers%2C+freelancers+and+fellow+customers&summary=<%= oPage.stf_summary %>');" title="LinkedIn"><img src="<%img_linkedIn%>" title="LinkedIn" alt="LinkedIn" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/https://favorites.live.com/quickadd.aspx?marklet=1&url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Live"><img src="<%img_live%>" title="Live" alt="Live" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://ma.gnolia.com/bookmarklet/add?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://ma.gnolia.com/bookmarklet/add?url=<%= oPage.inf_pageUrl %>&title=<%= oPage.hdl_headline %>');" title="Ma.gnolia"><img src="<%img_magnolia%>" title="Ma.gnolia" alt="Ma.gnolia" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://twitter.com/home?status=<%= oPage.inf_pageUrl %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://twitter.com/home?status=<%= oPage.inf_pageUrl %>');" title="TwitThis"><img src="<%img_twitter%>" title="TwitThis" alt="TwitThis" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://technorati.com/faves?add=<%= oPage.inf_pageUrl %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://technorati.com/faves?add=<%= oPage.inf_pageUrl %>');" title="Technorati"><img src="<%img_technorati%>" title="Technorati" alt="Technorati" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.newsvine.com/_tools/seed&save?u=<%= oPage.inf_pageUrl %>&h=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.newsvine.com/_tools/seed&save?u=<%= oPage.inf_pageUrl %>&h=<%= oPage.hdl_headline %>');" title="NewsVine"><img src="<%img_newsVine%>" title="NewsVine" alt="NewsVine" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://www.tumblr.com/share?v=3&u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>&s=" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://www.tumblr.com/share?v=3&u=<%= oPage.inf_pageUrl %>&t=<%= oPage.hdl_headline %>&s=');" title="Tumblr"><img src="<%img_tumblr%>" title="Tumblr" alt="Tumblr" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://buzz.yahoo.com/submit/?submitUrl=<%= oPage.inf_pageUrl %>&submitHeadline=<%= oPage.hdl_headline %>&submitSummary=<%= oPage.stf_summary %>&submitCategory=science&submitAssetType=text" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://buzz.yahoo.com/submit/?submitUrl=<%= oPage.inf_pageUrl %>&submitHeadline=<%= oPage.hdl_headline %>&submitSummary=<%= oPage.stf_summary %>&submitCategory=science&submitAssetType=text');" title="Yahoo! Buzz"><img src="<%img_yahooBuzz%>" title="Yahoo! Buzz" alt="Yahoo! Buzz" class="sociable-hovers"></a></li>
<li><a rel="nofollow" target="_blank" href="http://yigg.de/neu?exturl=<%= oPage.inf_pageUrl %>&exttitle=<%= oPage.hdl_headline %>" onclick="javascript:pageTracker._trackPageview('/outbound/article/http://yigg.de/neu?exturl=<%= oPage.inf_pageUrl %>&exttitle=<%= oPage.hdl_headline %>');" title="Yigg"><img src="<%img_yigg%>" title="Yigg" alt="Yigg" class="sociable-hovers"></a></li>
</ul>
</div>
<%
End Sub
End Class
%>
Handy Hint
RedDot treats the ¨body¨ HTML tag in a ¨special¨ way that will cause you no end of grief when used in a container page. Make sure you hide it (and its closing tag) from RedDot using the above technique (inserting an ASP comment in the middle - ie <bo<% ‘ %>dy> and </bo<% ‘ %>dy>) or another similiar technique.
A ¨RedDot¨ content class defining a RedDot class which acts a single point of initialisation and cleanup:
<%
Class cRedDot
Private m_iStart ' start time in milliseconds
Public Property Get iElapsedTime ' time elapsed from start in milliseconds
iElapsedTime = GetTime() - m_iStart
End Property
Private Sub Class_Initialize
m_iStart = GetTime()
Set oHTML = New cHTML
Set oPage = New cPage
End Sub
Private Sub Class_Terminate
Set oPage = Nothing
Set oHTML = Nothing
End Sub
End Class
Dim oHTML, oPage
%>
Handy Hint
Keeping track of the elapsed time of the execution of our scripts for the entire page is good peace of mind when it comes to hunting down performance issues.
Step 3: Add your ¨con_include¨ container to the clipboard and ¨Reference Link for All Content Classes¨ for all base templates.
None of the above changes should have had any effect yet on your existing templates - we have simply added common code, but without actually executing any of it.
Step 4: Update our base template.
We can now update our base template to make use of our new functionality, and remove the duplicated HTML and those extra unnecessary placeholders:
<!IoRangePreExecute><%
Set oRedDot = New cRedDot ' performs all initialisation
oPage.hdl_headline = "<%hdl_headline%>"
oPage.inf_pageUrl = "<%inf_pageUrl%>"
oPage.stf_summary = "<%stf_summary%>"
oPage.stf_meta_description = "<%stf_meta_description%>"
oPage.stf_meta_keywords = "<%stf_meta_keywords%>"
oHTML.header oPage
%><!/IoRangePreExecute>
<div id="post_content" class="column span-14"> <!-- start home_content -->
<div class="column span-11 first">
<h2 class="post_cat"><%stf_category%></h2>
<h2 class="post_name" id="post-<%inf_pageId%>"><%hdl_headline%></h2>
<div class="post_meta">
By <a href="<%anc_author%>" title="Posts by <%inf_originalAuthorFullName%>"><%inf_originalAuthorFullName%></a> <span class="dot">⋅</span> March 11, 2009<%inf_pageReleaseDate%> <span class="dot">⋅</span> <a href="#comments">Post a comment</a>
</div>
<%txt_content%>
<!IoRangePreExecute><% oHTML.sociable oPage %><!/IoRangePreExecute>
<h5>Related posts:</h5><ol><!IoRangeDynLink><li><a href="<%anc_related%>r" rel="bookmark" title="Permanent Link: <%hdl_headline%>"><%hdl_headline%></a></li><!/IoRangeDynLink></ol>
<h2 class="post_comm2">About the author:</h2>
<div id="authorinfo">
<!IoRangeConditional><img src="<%img_author%>" alt="<%inf_originalAuthorFullName%>" title="<%inf_originalAuthorFullName%>"><!/IoRangeConditional>
<%txt_aboutAuthor%>
</div>
<div class="post_meta">
<!IoRangePreExecute><% oHTML.tags %><!/IoRangePreExecute><!IoRangeDynLink><a href="<%anc_tag%>" rel="tag"><%hdl_headline%></a>, <!/IoRangeDynLink></div>
<div id="comments"> <!-- start comments -->
<div id="commenthead">
<h2 class="post_comm">Discussion</h2>
<h3 class="mast5">? comments for “<%hdl_headline%>”</h3>
</div>
<!-- You can start editing here. -->
<ol id="commentlist">
<%con_comments%>
</ol>
<!IoRangePreExecute><%
oHTML.footer
%><!-- <%= oRedDot.iElapsedTime %>ms --><%
Set oRedDot = Nothing ' performs all cleanup
%><%con_include%><!/IoRangePreExecute>
Our SmartTree now looks like this:
SmartTree
Epilogue
So, what do we have at the end of our journey?
- A simplified SmartTree - we now only have one placeholder representing everything shared between base templates. The rest are specific to the page (as they should be).
- A simplified template - we have eliminated most if not all of the HTML repetition from the template.
- A single place to add shared content and functions - we should no longer need to use the ¨Reference Link/Page for All Content Classes¨ plugin, and therefore can breath a bit easier as our instances head over the 2000 mark.
Are we done? For this article, yes. But here are some things to think about for the future (feel free to add more!):
- Reducing the number of anchor placeholders by using dynamic anchors or lists for CSS and Javascript.
- Performance optimisations - specifically bringing the CSS and Javascript inline for SmartEdit and collapsing into single files for Publish.
- Red dots! And for more fun - red dots in shared content!
- Escaping of placeholders for use in shared content, especially text fields.
- Handling of categories, tags, authors and social links.
Which methods of base page template construction have you seen and/or used? Do you have any hints or tips regarding base page template construction or even a completely different method that you want to share?
Catchya,
Adrian
Quick update
Wednesday, April 15th, 2009Spent the Easter long weekend in sunny Cornwall. Had a very relaxing time and ate too much good food. More details soon…