This is the story of KeyContent.org. Please feel free to let me know what you think or if you have any questions!
About ))KeyContent.org((
))KeyContent.orghttp://www.keycontent.org - is free, open-content, collaborative effort and describe what it means to be a content developer. The site is a wh" class="wiki wikinew text-danger tips"> (KC.o) - http://www.keycontent.org - is free, open-content, collaborative effort and describe what it means to be a content developer. The site is a whiteboard to express your ideas, share your experiences, and ask your questions. TheKeyContent.org(( site was launched in February 2005 and has undergone 2 major UI revisions.
You can read more about Tiki's role in creating a wiki-based portal for ))KeyContent.org(( here. This is part of a presentation made at the 2006 TriXML conference in Raleigh, NC, USA.
As of July 2006, KC.o is currently running:
- Tiki 1.9.2 (pending upgrade to 1.9.4)
- MySQL 4.1.19
- PHP 4.4.2
- Host: http://www.bluehost.com/, running Apache 1.3.36
Template Changes
The current KC.o template reflects a vastly customized set of template files and stylesheets. Our theme has undergone three major revisions:
- Initially, we started with the geo-light theme. This theme was used for testing and the pre-launch version of the site. I used this theme to "get my feet wet" in Tiki customization.
- The KC.o version 1 template was based on the geo-light template, but included several major changes.
- In early 2006 we created an entirely new template and color scheme.
KeyContent.org
||Initial|Version 1.0|Version 2
<input type="hidden" name="su" value="1" />
<input type="text" name="username" id="login-switchuser" size="15"
value="{tr}Change user{/tr}" alt="{tr}Change to a different user{/tr}." >
<input type="submit" name="actsu" value="{tr}Set{/tr}" />
</form>
{/if}
{menu id=50}
<a class="separator" href="javascript:icntoggle('whatsnew');" title="Toggle options">
<img src="img/icons/fo.gif" border="0" name="whatsnewicn" alt=''/>
href="tiki-calendar.php?viewlist=table&viewmode=week"
title="{tr}Upcoming Events{/tr}">{tr}Upcoming Events{/tr}</a>
{foreach key=pos item=slvn_item from=$slvn_info.items}
{if $slvn_item.count > 0 }
{assign var=cname value=$slvn_item.cname}
<a class="separator" href="javascript:icntoggle('{$cname}');">
<img src="img/icons/fo.gif" border="0" name="{$cname}icn" alt='' />
{$slvn_item.label}</a>
{else}style="display:block;"{/if}>
{section name=ix loop=$slvn_item.list}
<img src="kc/icons/spacer.gif" alt="" width="15" height="1" border="0" />
<span class="module">{$smarty.section.ix.index_next}</span>
<a class="linkmodule" href="{$slvn_item.listix.href|escape}"
title="{$slvn_item.listix.title|escape}">
{if $slvn_item.listix.label == ''}-{else}
{$slvn_item.listix.label|escape|truncate:20:"...":true}{/if}
</a><br />
{/section}
{/if}
{/foreach}
{literal}<{/literal}script language='Javascript' type='text/javascript'>
setfolderstate('whatsnew', 'd');
{literal}<{/literal}/script>
<a class='separator' href="tiki-logout.php" title="{tr}Log Out{/tr}">
<img src="kc/icons/logout.gif" border="0" alt='{tr}Logout button{/tr}.' />
{tr}Log Out{/tr}</a>
{else}
<div class="module"><form name="loginbox" action="{$login_url}" method="post"
{if $feature_challenge eq 'y'} >
<input type="text" name="user" id="login-user"
size="15" value="Username" alt="{tr}Enter your KeyContent.org username{/tr}." >
<input type="password" name="pass" id="login-pass" size="15"
value="Password" alt="Enter your password." >
<input type="submit" name="login" value="{tr}Log In{/tr}" />
{if $rememberme ne 'disabled'}<input type="checkbox"
name="rme" id="login-remember" value="on"/>
<label for="login-remember"> {tr}Remember me{/tr}</label> {/if}<br />
{if $forgotPass eq 'y' and $allowRegister eq 'y' and $change_password eq 'y'}
<a class="link" href="tiki-remind_password.php"
title="{tr}Click here if you've forgotten your password{/tr}">
{tr}Forget your password?{/tr}</a><br />
<a href="tiki-register.php" class="link"
title="{tr}Click here to register{/tr}">{tr}Sign up{/tr}</a> (free) to see more.
{/if}
</form>
{/if}
{CODE}
Last Modified Page
After logging in, users can quickly create a new wiki page by using the Quick Edit module. I included this module within the Last Modified Page module:
This was a simple edit to the mod-last_modif_pages.tpl template:
{if !$user} <a href="tiki-page.php?pageName=Key+Collaboration+Request" class="linkmodule" title="{tr}Start a new Key Article{/tr}."> {tr}Start new article{/tr} <img src="kc/icons/more.gif" alt="{tr}Start a new Key Article{/tr}" width="19" height="10" border="0" align="bottom" /></a> {else}{if $tiki_p_edit eq 'y'} <form method="get" action="tiki-editpage.php"> {if $categId}<input type="hidden" name="categId" value="{$categId}" />{/if}
Customizations
UI changes
The overwhelming number of changes to KC.o have been for UI and usability. Most require only tweaks and additions to the template files.
Click to sort
I added a small sort image (
) to all of the list tables. This allows users to see how the current view is being sorted. This is a commong UI element on most operating systems and users are accusomed to seeing them in lists.
For example, here is the sort image in the tiki-listpages:
I simply created two small images (sort_asc.gif and sort_des.gif) and modified the template file:
<img src="{if $sort_mode eq 'description_desc'}sort_desc.gif {elseif $sort_mode eq 'description_asc'}sort_asc.gif {else}spacer.gif{/if}" alt="{tr}Click to sort{/tr}" width="10" height="6" border="0" />
Capthca for anti-spam
All form submissions are protected by Capthca images. We use the web-based http://www.protectwebform.com service. The service is very easy to implement and requires only simple cut-and-paste additions to the TPL template file and its associated PHP file.
An example of our implementation can bee seen here. This is a customization of the tiki-directory_add_site file.
What's next
My future plans for KC.o include:
- Upgrading to the current Tiki version.
- Add structured blogging and microcontent