Requires Javascript.
Background: #fff Foreground: #000 PrimaryPale: #8cf PrimaryLight: #18f PrimaryMid: #04b PrimaryDark: #014 SecondaryPale: #ffc SecondaryLight: #fe8 SecondaryMid: #db4 SecondaryDark: #841 TertiaryPale: #eee TertiaryLight: #ccc TertiaryMid: #999 TertiaryDark: #666 Error: #f88
/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}
h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}
.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}
.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}
.tabSelected{color:[[ColorPalette::PrimaryDark]];
background:[[ColorPalette::TertiaryPale]];
border-left:1px solid [[ColorPalette::TertiaryLight]];
border-top:1px solid [[ColorPalette::TertiaryLight]];
border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}
#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}
.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background::[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}
#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}
.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}
.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}
.tiddler .defaultCommand {font-weight:bold;}
.shadow .title {color:[[ColorPalette::TertiaryDark]];}
.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}
.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}
.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}
.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}
.sparkline {background:[[ColorPalette::PrimaryPale]]; border:0;}
.sparktick {background:[[ColorPalette::PrimaryDark]];}
.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}
.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}
.imageLink, #displayArea .imageLink {background:transparent;}
.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}
.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}
.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}
.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}
.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}
.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}
#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:'alpha(opacity:60)';}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}
body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}
h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}
hr {height:1px;}
a {text-decoration:none;}
dt {font-weight:bold;}
ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}
.txtOptionInput {width:11em;}
#contentWrapper .chkOptionInput {border:0;}
.externalLink {text-decoration:underline;}
.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}
.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}
/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}
#mainMenu .tiddlyLinkExisting,
#mainMenu .tiddlyLinkNonExisting,
#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}
.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0em 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0em 1em 1em; left:0px; top:0px;}
.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}
#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}
#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0em 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 .3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}
.wizard {padding:0.1em 1em 0em 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0em 0em 0em 0em; margin:0.4em 0em 0.2em 0em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0em 0em 0em; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0em;}
.wizardFooter .status {padding:0em 0.4em 0em 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em 0.1em 0.2em;}
#messageArea {position:fixed; top:2em; right:0em; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em 0.2em 0.2em 0.2em;}
#messageArea a {text-decoration:underline;}
.tiddlerPopupButton {padding:0.2em 0.2em 0.2em 0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em 1em 1em 1em; margin:0;}
.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0em;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}
.tabset {padding:1em 0em 0em 0.5em;}
.tab {margin:0em 0em 0em 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}
#contentWrapper {display:block;}
#splashScreen {display:none;}
#displayArea {margin:1em 17em 0em 14em;}
.toolbar {text-align:right; font-size:.9em;}
.tiddler {padding:1em 1em 0em 1em;}
.missing .viewer,.missing .title {font-style:italic;}
.title {font-size:1.6em; font-weight:bold;}
.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}
.tiddler .button {padding:0.2em 0.4em;}
.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}
.footer {font-size:.9em;}
.footer li {display:inline;}
.annotation {padding:0.5em; margin:0.5em;}
* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0em 0.25em; padding:0em 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}
.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}
.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}
.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0em; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}
.fieldsetFix {border:0; padding:0; margin:1px 0px 1px 0px;}
.sparkline {line-height:1em;}
.sparktick {outline:0;}
.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}
* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; right:0em;}
#backstageButton a {padding:0.1em 0.4em 0.1em 0.4em; margin:0.1em 0.1em 0.1em 0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; margin:0em 3em 0em 3em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}
.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which use a logographic writing system and need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
.htmlarea .toolbarHA table {border:1px solid ButtonFace; margin:0em 0em;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton {display: none ! important;}
#displayArea {margin: 1em 1em 0em 1em;}
/* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
noscript {display:none;}
}
/*}}}*/
<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar closeTiddler closeOthers +editTiddler > fields syncing permalink references jump'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar +saveTiddler -cancelTiddler deleteTiddler'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser'></span></div>
<!--}}}-->
To get started with this blank TiddlyWiki, you'll need to modify the following tiddlers: * SiteTitle & SiteSubtitle: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar) * MainMenu: The menu (usually on the left) * DefaultTiddlers: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened You'll also need to enter your username for signing your edits: <<option txtUserName>>
These InterfaceOptions for customising TiddlyWiki are saved in your browser Your username for signing your edits. Write it as a WikiWord (eg JoeBloggs) <<option txtUserName>> <<option chkSaveBackups>> SaveBackups <<option chkAutoSave>> AutoSave <<option chkRegExpSearch>> RegExpSearch <<option chkCaseSensitiveSearch>> CaseSensitiveSearch <<option chkAnimate>> EnableAnimations ---- Also see AdvancedOptions
One of the most talked-about recent developments on the Internet, and the World Wide Web in particular, has come to be known as “Web 2.0” ([[O'Reilly, 2005|References]]), and is said to represent a new paradigm in the way that the Web can be used. Many aspects of Web 2.0 have been seen as offering particular benefits in the field of education, and have begun to be used across the curriculum at all levels – just as earlier ICT innovations and incarnations of the Web were also rapidly adopted to educational ends.
Is Web 2.0 a development that addresses specific needs in learning technology, and represents a deficiency in previous generations of technology, or is it just a solution looking for a problem? This paper considers some examples of the pedagogical use of web applications, and considers if, indeed, there is anything new or beneficial to be gained – in education in general, and in e-learning in particular – through substantial engagement with Web 2.0.
<html><div class='viewer' macro='navigation tiddlers:{{store.getTiddlerText("PresentationIndex").readBracketedList()}}}'></div></html>
In an essay about engaging with new applications of web technology, it seemed important to demonstrate an engagement with that technology. Therefore this “paper” has been conceived and written as a hypertext, and implemented using [[TiddlyWiki|http://www.tiddlywiki.com/]].
!~TiddlyWiki
~TiddlyWiki is a slightly unusual implementation of a [[wiki|Wikis]], in that it encapsulates its entire contents in a single HTML file, and uses the dynamic scripting features of the current generation of web browsers to achieve the effect normally associated with navigating between multiple web pages. ~TiddlyWiki also supports tagging of pages, and some [[blog-like|Blogs]] features (pages with a date as their title can be managed like blog entries).
For the best reading experience, I recommend that readers ensure the following box is checked:
<<option chkSinglePageMode>> ''Display one tiddler at a time''
!Compatibility
~TiddlyWiki in general and this ~TiddlyWiki in particular should work fine with Internet Explorer 7 on Windows and Firefox 2.x on all major platforms (Windows, Mac, Linux/Unix).
I have not tested this ~TiddlyWiki with text-based browsers or screen readers: I'm happy to provide a simpler version, in PDF or HTML, on request. Contact [[r.m.davis@sms.ed.ac.uk|mailto:r.m.davis@sms.ed.ac.uk]].
/***
|Name|BetterTimelineMacro|
|Created by|SaqImtiaz|
|Location|http://lewcid.googlepages.com/lewcid.html#BetterTimelineMacro|
|Version|0.5 beta|
|Requires|~TW2.x|
!!!Description:
A replacement for the core timeline macro that offers more features:
*list tiddlers with only specfic tag
*exclude tiddlers with a particular tag
*limit entries to any number of days, for example one week
*specify a start date for the timeline, only tiddlers after that date will be listed.
!!!Installation:
Copy the contents of this tiddler to your TW, tag with systemConfig, save and reload your TW.
Edit the ViewTemplate to add the fullscreen command to the toolbar.
!!!Syntax:
{{{<<timeline better:true>>}}}
''the param better:true enables the advanced features, without it you will get the old timeline behaviour.''
additonal params:
(use only the ones you want)
{{{<<timeline better:true onlyTag:Tag1 excludeTag:Tag2 sortBy:modified/created firstDay:YYYYMMDD maxDays:7 maxEntries:30>>}}}
''explanation of syntax:''
onlyTag: only tiddlers with this tag will be listed. Default is to list all tiddlers.
excludeTag: tiddlers with this tag will not be listed.
sortBy: sort tiddlers by date modified or date created. Possible values are modified or created.
firstDay: useful for starting timeline from a specific date. Example: 20060701 for 1st of July, 2006
maxDays: limits timeline to include only tiddlers from the specified number of days. If you use a value of 7 for example, only tiddlers from the last 7 days will be listed.
maxEntries: limit the total number of entries in the timeline.
!!!History:
*28-07-06: ver 0.5 beta, first release
!!!Code
***/
//{{{
// Return the tiddlers as a sorted array
TiddlyWiki.prototype.getTiddlers = function(field,excludeTag,includeTag)
{
var results = [];
this.forEachTiddler(function(title,tiddler)
{
if(excludeTag == undefined || tiddler.tags.find(excludeTag) == null)
if(includeTag == undefined || tiddler.tags.find(includeTag)!=null)
results.push(tiddler);
});
if(field)
results.sort(function (a,b) {if(a[field] == b[field]) return(0); else return (a[field] < b[field]) ? -1 : +1; });
return results;
}
//this function by Udo
function getParam(params, name, defaultValue)
{
if (!params)
return defaultValue;
var p = params[0][name];
return p ? p[0] : defaultValue;
}
window.old_timeline_handler= config.macros.timeline.handler;
config.macros.timeline.handler = function(place,macroName,params,wikifier,paramString,tiddler)
{
var args = paramString.parseParams("list",null,true);
var betterMode = getParam(args, "better", "false");
if (betterMode == 'true')
{
var sortBy = getParam(args,"sortBy","modified");
var excludeTag = getParam(args,"excludeTag",undefined);
var includeTag = getParam(args,"onlyTag",undefined);
var tiddlers = store.getTiddlers(sortBy,excludeTag,includeTag);
var firstDayParam = getParam(args,"firstDay",undefined);
var firstDay = (firstDayParam!=undefined)? firstDayParam: "00010101";
var lastDay = "";
var field= sortBy;
var maxDaysParam = getParam(args,"maxDays",undefined);
var maxDays = (maxDaysParam!=undefined)? maxDaysParam*24*60*60*1000: (new Date()).getTime() ;
var maxEntries = getParam(args,"maxEntries",undefined);
var last = (maxEntries!=undefined) ? tiddlers.length-Math.min(tiddlers.length,parseInt(maxEntries)) : 0;
for(var t=tiddlers.length-1; t>=last; t--)
{
var tiddler = tiddlers[t];
var theDay = tiddler[field].convertToLocalYYYYMMDDHHMM().substr(0,8);
if ((theDay>=firstDay)&& (tiddler[field].getTime()> (new Date()).getTime() - maxDays))
{
if(theDay != lastDay)
{
var theDateList = document.createElement("ul");
place.appendChild(theDateList);
createTiddlyElement(theDateList,"li",null,"listTitle",tiddler[field].formatString(this.dateFormat));
lastDay = theDay;
}
var theDateListItem = createTiddlyElement(theDateList,"li",null,"listLink",null);
theDateListItem.appendChild(createTiddlyLink(place,tiddler.title,true));
}
}
}
else
{
window.old_timeline_handler.apply(this,arguments);
}
}
//}}}
The original weblogs were link-driven sites, logs of their authors' meanderings on the web – a less constrained approach to mapping the web than the formal classified directories like Yahoo, that were already struggling to keep up with the exponential growth of the web (Google wasn't launched until September 1998). “Each was a mixture in unique proportions of links, commentary, and personal thoughts and essays.” ([[Blood, 2000|References]])
Early weblogs were simply manually updated web pages within personal websites. However, the evolution of tools to facilitate the production and maintenance of web articles posted in chronological fashion made the publishing process much simpler. Using a simple web form, a user need only enter a heading and a body of text: the application additionally, automatically associates a timestamp with the entry. The development of this relatively simple, often free, blogging software, introduced a new kind of platform for any information application with some kind of cumulative, day-by-day entry requirement: newspaper articles, columns, news stories, personal diary entries, could all be created by a much larger, less technical, population than before. It thus became possible for all sorts of people who did not already know how to make themselves a dynamic website, to the chagrin of some of the original bloggers.
It seems only natural that this should be attractive for education, not least since learning journals or diaries are considered valuable both for reflection and assessment, particularly as part of coursework and portfolios. Such an electronic journal, whether private between student and teacher, or fearlessly published for all the world to see, would seem an inevitable successor to the traditional “hard copy” formats, such as exercise books or A4 sheets submitted for assessment, and is likely to form a valuable component of a learner's portfolio in an electronic age.
It saves the trouble of collecting exercise books, but it is far more than a tool for regular or irregular writing tasks, and for that reason teachers need to emember that blogging is //sui generis// – not online diary, nor e-portfolio, nor online newspaper, nor e-exercise book, though it can be used in any of those ways – and assert the manner in which they expect the blog to be used, e.g. for note-taking or for formal composition.
<html><div class='viewer' macro='navigation tiddlers:{{store.getTiddlerText("PresentationIndex").readBracketedList()}}}'></div></html>
/***
|''Name:''|CalendarPlugin|
|''Source:''|http://www.TiddlyTools.com/#CalendarPlugin|
|''Author:''|SteveRumsby|
|''License:''|unknown|
|''~CoreVersion:''|2.0.10|
// // updated by Jeremy Sheeley to add cacheing for reminders
// // see http://www.geocities.com/allredfaq/reminderMacros.html
// // ''Changes by ELS 2006.08.23:''
// // added handling for weeknumbers (code supplied by Martin Budden. see "wn**" comment marks)
// // ''Changes by ELS 2005.10.30:''
// // config.macros.calendar.handler()
// // ^^use "tbody" element for IE compatibility^^
// // ^^IE returns 2005 for current year, FF returns 105... fix year adjustment accordingly^^
// // createCalendarDays()
// // ^^use showDate() function (if defined) to render autostyled date with linked popup^^
// // calendar stylesheet definition
// // ^^use .calendar class-specific selectors, add text centering and margin settings^^
!!!!!Configuration:
<<option chkDisplayWeekNumbers>> Display week numbers //(note: Monday will be used as the start of the week)//
|''First day of week:''|<<option txtCalFirstDay>>|(Monday = 0, Sunday = 6)|
|''First day of weekend:''|<<option txtCalStartOfWeekend>>|(Monday = 0, Sunday = 6)|
!!!!!Syntax:
|{{{<<calendar>>}}}|Produce a full-year calendar for the current year|
|{{{<<calendar year>>}}}|Produce a full-year calendar for the given year|
|{{{<<calendar year month>>}}}|Produce a one-month calendar for the given month and year|
|{{{<<calendar thismonth>>}}}|Produce a one-month calendar for the current month|
|{{{<<calendar lastmonth>>}}}|Produce a one-month calendar for last month|
|{{{<<calendar nextmonth>>}}}|Produce a one-month calendar for next month|
***/
// //Modify this section to change the text displayed for the month and day names, to a different language for example. You can also change the format of the tiddler names linked to from each date, and the colours used.
//{{{
config.macros.calendar = {};
config.macros.calendar.monthnames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
config.macros.calendar.daynames = ["M", "T", "W", "T", "F", "S", "S"];
config.macros.calendar.weekendbg = "#c0c0c0";
config.macros.calendar.monthbg = "#e0e0e0";
config.macros.calendar.holidaybg = "#ffc0c0";
//}}}
// //''Code section:''
// (you should not need to alter anything below here)//
//{{{
if(config.options.txtCalFirstDay == undefined)
config.options.txtCalFirstDay = 0;
if(config.options.txtCalStartOfWeekend == undefined)
config.options.txtCalStartOfWeekend = 5;
if(config.options.chkDisplayWeekNumbers == undefined)//wn**
config.options.chkDisplayWeekNumbers = false;
if(config.options.chkDisplayWeekNumbers)
config.options.txtCalFirstDay = 0;
config.macros.calendar.tiddlerformat = "0DD/0MM/YYYY"; // This used to be changeable - for now, it isn't// <<smiley :-(>>
version.extensions.calendar = { major: 0, minor: 6, revision: 0, date: new Date(2006, 1, 22)};
config.macros.calendar.monthdays = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
config.macros.calendar.holidays = [ ]; // Not sure this is required anymore - use reminders instead
//}}}
// //Is the given date a holiday?
//{{{
function calendarIsHoliday(date)
{
var longHoliday = date.formatString("0DD/0MM/YYYY");
var shortHoliday = date.formatString("0DD/0MM");
for(var i = 0; i < config.macros.calendar.holidays.length; i++) {
if(config.macros.calendar.holidays[i] == longHoliday || config.macros.calendar.holidays[i] == shortHoliday) {
return true;
}
}
return false;
}
//}}}
// //The main entry point - the macro handler.
// //Decide what sort of calendar we are creating (month or year, and which month or year)
// // Create the main calendar container and pass that to sub-ordinate functions to create the structure.
// ELS 2005.10.30: added creation and use of "tbody" for IE compatibility and fixup for year >1900//
// ELS 2005.10.30: fix year calculation for IE's getYear() function (which returns '2005' instead of '105')//
// ELS 2006.05.29: add journalDateFmt handling//
//{{{
config.macros.calendar.handler = function(place,macroName,params)
{
var calendar = createTiddlyElement(place, "table", null, "calendar", null);
var tbody = createTiddlyElement(calendar, "tbody", null, null, null);
var today = new Date();
var year = today.getYear();
if (year<1900) year+=1900;
// get format for journal link by reading from SideBarOptions (ELS 5/29/06 - based on suggestion by Martin Budden)
var text = store.getTiddlerText("SideBarOptions");
this.journalDateFmt = "DD-MMM-YYYY";
var re = new RegExp("<<(?:newJournal)([^>]*)>>","mg"); var fm = re.exec(text);
if (fm && fm[1]!=null) { var pa=fm[1].readMacroParams(); if (pa[0]) this.journalDateFmt = pa[0]; }
if (params[0] == "thismonth")
{
cacheReminders(new Date(year, today.getMonth(), 1, 0, 0), 31);
createCalendarOneMonth(tbody, year, today.getMonth());
}
else if (params[0] == "lastmonth") {
var month = today.getMonth()-1; if (month==-1) { month=11; year--; }
cacheReminders(new Date(year, month, 1, 0, 0), 31);
createCalendarOneMonth(tbody, year, month);
}
else if (params[0] == "nextmonth") {
var month = today.getMonth()+1; if (month>11) { month=0; year++; }
cacheReminders(new Date(year, month, 1, 0, 0), 31);
createCalendarOneMonth(tbody, year, month);
}
else {
if (params[0]) year = params[0];
if(params[1])
{
cacheReminders(new Date(year, params[1]-1, 1, 0, 0), 31);
createCalendarOneMonth(tbody, year, params[1]-1);
}
else
{
cacheReminders(new Date(year, 0, 1, 0, 0), 366);
createCalendarYear(tbody, year);
}
}
window.reminderCacheForCalendar = null;
}
//}}}
//{{{
//This global variable is used to store reminders that have been cached
//while the calendar is being rendered. It will be renulled after the calendar is fully rendered.
window.reminderCacheForCalendar = null;
//}}}
//{{{
function cacheReminders(date, leadtime)
{
if (window.findTiddlersWithReminders == null)
return;
window.reminderCacheForCalendar = {};
var leadtimeHash = [];
leadtimeHash [0] = 0;
leadtimeHash [1] = leadtime;
var t = findTiddlersWithReminders(date, leadtimeHash, null, 1);
for(var i = 0; i < t.length; i++) {
//just tag it in the cache, so that when we're drawing days, we can bold this one.
window.reminderCacheForCalendar[t[i]["matchedDate"]] = "reminder:" + t[i]["params"]["title"];
}
}
//}}}
//{{{
function createCalendarOneMonth(calendar, year, mon)
{
var row = createTiddlyElement(calendar, "tr", null, null, null);
createCalendarMonthHeader(calendar, row, config.macros.calendar.monthnames[mon] + " " + year, true, year, mon);
row = createTiddlyElement(calendar, "tr", null, null, null);
createCalendarDayHeader(row, 1);
createCalendarDayRowsSingle(calendar, year, mon);
}
//}}}
//{{{
function createCalendarMonth(calendar, year, mon)
{
var row = createTiddlyElement(calendar, "tr", null, null, null);
createCalendarMonthHeader(calendar, row, config.macros.calendar.monthnames[mon] + " " + year, false, year, mon);
row = createTiddlyElement(calendar, "tr", null, null, null);
createCalendarDayHeader(row, 1);
createCalendarDayRowsSingle(calendar, year, mon);
}
//}}}
//{{{
function createCalendarYear(calendar, year)
{
var row;
row = createTiddlyElement(calendar, "tr", null, null, null);
var back = createTiddlyElement(row, "td", null, null, null);
var backHandler = function() {
removeChildren(calendar);
createCalendarYear(calendar, year-1);
};
createTiddlyButton(back, "<", "Previous year", backHandler);
back.align = "center";
var yearHeader = createTiddlyElement(row, "td", null, "calendarYear", year);
yearHeader.align = "center";
//yearHeader.setAttribute("colSpan", 19);
yearHeader.setAttribute("colSpan",config.options.chkDisplayWeekNumbers?22:19);//wn**
var fwd = createTiddlyElement(row, "td", null, null, null);
var fwdHandler = function() {
removeChildren(calendar);
createCalendarYear(calendar, year+1);
};
createTiddlyButton(fwd, ">", "Next year", fwdHandler);
fwd.align = "center";
createCalendarMonthRow(calendar, year, 0);
createCalendarMonthRow(calendar, year, 3);
createCalendarMonthRow(calendar, year, 6);
createCalendarMonthRow(calendar, year, 9);
}
//}}}
//{{{
function createCalendarMonthRow(cal, year, mon)
{
var row = createTiddlyElement(cal, "tr", null, null, null);
createCalendarMonthHeader(cal, row, config.macros.calendar.monthnames[mon], false, year, mon);
createCalendarMonthHeader(cal, row, config.macros.calendar.monthnames[mon+1], false, year, mon);
createCalendarMonthHeader(cal, row, config.macros.calendar.monthnames[mon+2], false, year, mon);
row = createTiddlyElement(cal, "tr", null, null, null);
createCalendarDayHeader(row, 3);
createCalendarDayRows(cal, year, mon);
}
//}}}
//{{{
function createCalendarMonthHeader(cal, row, name, nav, year, mon)
{
var month;
if(nav) {
var back = createTiddlyElement(row, "td", null, null, null);
back.align = "center";
back.style.background = config.macros.calendar.monthbg;
/*
back.setAttribute("colSpan", 2);
var backYearHandler = function() {
var newyear = year-1;
removeChildren(cal);
cacheReminders(new Date(newyear, mon , 1, 0, 0), 31);
createCalendarOneMonth(cal, newyear, mon);
};
createTiddlyButton(back, "<<", "Previous year", backYearHandler);
*/
var backMonHandler = function() {
var newyear = year;
var newmon = mon-1;
if(newmon == -1) { newmon = 11; newyear = newyear-1;}
removeChildren(cal);
cacheReminders(new Date(newyear, newmon , 1, 0, 0), 31);
createCalendarOneMonth(cal, newyear, newmon);
};
createTiddlyButton(back, "<", "Previous month", backMonHandler);
month = createTiddlyElement(row, "td", null, "calendarMonthname", name)
// month.setAttribute("colSpan", 3);
// month.setAttribute("colSpan", 5);
month.setAttribute("colSpan", config.options.chkDisplayWeekNumbers?6:5);//wn**
var fwd = createTiddlyElement(row, "td", null, null, null);
fwd.align = "center";
fwd.style.background = config.macros.calendar.monthbg;
// fwd.setAttribute("colSpan", 2);
var fwdMonHandler = function() {
var newyear = year;
var newmon = mon+1;
if(newmon == 12) { newmon = 0; newyear = newyear+1;}
removeChildren(cal);
cacheReminders(new Date(newyear, newmon , 1, 0, 0), 31);
createCalendarOneMonth(cal, newyear, newmon);
};
createTiddlyButton(fwd, ">", "Next month", fwdMonHandler);
/*
var fwdYear = createTiddlyElement(row, "td", null, null, null);
var fwdYearHandler = function() {
var newyear = year+1;
removeChildren(cal);
cacheReminders(new Date(newyear, mon , 1, 0, 0), 31);
createCalendarOneMonth(cal, newyear, mon);
};
createTiddlyButton(fwd, ">>", "Next year", fwdYearHandler);
*/
} else {
month = createTiddlyElement(row, "td", null, "calendarMonthname", name)
//month.setAttribute("colSpan", 7);
month.setAttribute("colSpan",config.options.chkDisplayWeekNumbers?8:7);//wn**
}
month.align = "center";
month.style.background = config.macros.calendar.monthbg;
}
//}}}
//{{{
function createCalendarDayHeader(row, num)
{
var cell;
for(var i = 0; i < num; i++) {
if (config.options.chkDisplayWeekNumbers) createTiddlyElement(row, "td");//wn**
for(var j = 0; j < 7; j++) {
var d = j + (config.options.txtCalFirstDay - 0);
if(d > 6) d = d - 7;
cell = createTiddlyElement(row, "td", null, null, config.macros.calendar.daynames[d]);
if(d == (config.options.txtCalStartOfWeekend-0) || d == (config.options.txtCalStartOfWeekend-0+1))
cell.style.background = config.macros.calendar.weekendbg;
}
}
}
//}}}
//{{{
function createCalendarDays(row, col, first, max, year, mon)
{
var i;
if (config.options.chkDisplayWeekNumbers){
if (first<=max) {
var ww = new Date(year,mon,first);
createTiddlyElement(row, "td", null, null, "w"+ww.getWeek());//wn**
}
else createTiddlyElement(row, "td", null, null, null);//wn**
}
for(i = 0; i < col; i++) {
createTiddlyElement(row, "td", null, null, null);
}
var day = first;
for(i = col; i < 7; i++) {
var d = i + (config.options.txtCalFirstDay - 0);
if(d > 6) d = d - 7;
var daycell = createTiddlyElement(row, "td", null, null, null);
var isaWeekend = ((d == (config.options.txtCalStartOfWeekend-0) || d == (config.options.txtCalStartOfWeekend-0+1))? true:false);
if(day > 0 && day <= max) {
var celldate = new Date(year, mon, day);
// ELS 2005.10.30: use <<date>> macro's showDate() function to create popup
if (window.showDate) {
showDate(daycell,celldate,"popup","DD",config.macros.calendar.journalDateFmt,true, isaWeekend); // ELS 5/29/06 - use journalDateFmt
} else {
if(isaWeekend) daycell.style.background = config.macros.calendar.weekendbg;
var title = celldate.formatString(config.macros.calendar.tiddlerformat);
if(calendarIsHoliday(celldate)) {
daycell.style.background = config.macros.calendar.holidaybg;
}
if(window.findTiddlersWithReminders == null) {
var link = createTiddlyLink(daycell, title, false);
link.appendChild(document.createTextNode(day));
} else {
var button = createTiddlyButton(daycell, day, title, onClickCalendarDate);
}
}
}
day++;
}
}
//}}}
// //We've clicked on a day in a calendar - create a suitable pop-up of options.
// //The pop-up should contain:
// // * a link to create a new entry for that date
// // * a link to create a new reminder for that date
// // * an <hr>
// // * the list of reminders for that date
//{{{
function onClickCalendarDate(e)
{
var button = this;
var date = button.getAttribute("title");
var dat = new Date(date.substr(6,4), date.substr(3,2)-1, date.substr(0, 2));
date = dat.formatString(config.macros.calendar.tiddlerformat);
var popup = createTiddlerPopup(this);
popup.appendChild(document.createTextNode(date));
var newReminder = function() {
var t = store.getTiddlers(date);
displayTiddler(null, date, 2, null, null, false, false);
if(t) {
document.getElementById("editorBody" + date).value += "\n<<reminder day:" + dat.getDate() +
" month:" + (dat.getMonth()+1) +
" year:" + (dat.getYear()+1900) + " title: >>";
} else {
document.getElementById("editorBody" + date).value = "<<reminder day:" + dat.getDate() +
" month:" + (dat.getMonth()+1) +
" year:" + (dat.getYear()+1900) + " title: >>";
}
};
var link = createTiddlyButton(popup, "New reminder", null, newReminder);
popup.appendChild(document.createElement("hr"));
var t = findTiddlersWithReminders(dat, [0,14], null, 1);
for(var i = 0; i < t.length; i++) {
link = createTiddlyLink(popup, t[i].tiddler, false);
link.appendChild(document.createTextNode(t[i].tiddler));
}
}
//}}}
//{{{
function calendarMaxDays(year, mon)
{
var max = config.macros.calendar.monthdays[mon];
if(mon == 1 && (year % 4) == 0 && ((year % 100) != 0 || (year % 400) == 0)) {
max++;
}
return max;
}
//}}}
//{{{
function createCalendarDayRows(cal, year, mon)
{
var row = createTiddlyElement(cal, "tr", null, null, null);
var first1 = (new Date(year, mon, 1)).getDay() -1 - (config.options.txtCalFirstDay-0);
if(first1 < 0) first1 = first1 + 7;
var day1 = -first1 + 1;
var first2 = (new Date(year, mon+1, 1)).getDay() -1 - (config.options.txtCalFirstDay-0);
if(first2 < 0) first2 = first2 + 7;
var day2 = -first2 + 1;
var first3 = (new Date(year, mon+2, 1)).getDay() -1 - (config.options.txtCalFirstDay-0);
if(first3 < 0) first3 = first3 + 7;
var day3 = -first3 + 1;
var max1 = calendarMaxDays(year, mon);
var max2 = calendarMaxDays(year, mon+1);
var max3 = calendarMaxDays(year, mon+2);
while(day1 <= max1 || day2 <= max2 || day3 <= max3) {
row = createTiddlyElement(cal, "tr", null, null, null);
createCalendarDays(row, 0, day1, max1, year, mon); day1 += 7;
createCalendarDays(row, 0, day2, max2, year, mon+1); day2 += 7;
createCalendarDays(row, 0, day3, max3, year, mon+2); day3 += 7;
}
}
//}}}
//{{{
function createCalendarDayRowsSingle(cal, year, mon)
{
var row = createTiddlyElement(cal, "tr", null, null, null);
var first1 = (new Date(year, mon, 1)).getDay() -1 - (config.options.txtCalFirstDay-0);
if(first1 < 0) first1 = first1+ 7;
var day1 = -first1 + 1;
var max1 = calendarMaxDays(year, mon);
while(day1 <= max1) {
row = createTiddlyElement(cal, "tr", null, null, null);
createCalendarDays(row, 0, day1, max1, year, mon); day1 += 7;
}
}
//}}}
// //ELS 2005.10.30: added styles
//{{{
setStylesheet(".calendar, .calendar table, .calendar th, .calendar tr, .calendar td { text-align:center; } .calendar, .calendar a { margin:0px !important; padding:0px !important; }", "calendarStyles");
//}}}
Background: #fff Foreground: #000 PrimaryPale: #ddb PrimaryLight: #e00 PrimaryMid: #a00 PrimaryDark: #300 SecondaryPale: #ffc SecondaryLight: #e8f SecondaryMid: #db4 SecondaryDark: #000 TertiaryPale: #eee TertiaryLight: #ccc TertiaryMid: #999 TertiaryDark: #666 Error: #f88
We have seen that the latest, fully-featured, Web 2.0 incarnations of blog and wiki offer their greatest potential when they are used as a platform for collaboration, and this clearly makes them attractive in learning environments. As Garrison ([[2006|References]]) observes:
>There is evidence to suggest that online learning may in fact have an advantage in supporting collaboration and creating a sense of community. An online learning environment reflects a “group-centered” interaction pattern versus an “authority-centered pattern” of a face-to-face environment. Moreover, there is a tendency to build on the comments of others in the online environment (higher flow of communication), compared to the “turn-taking” face-to-face environment.
Not that the mere presence or availability of the software will make it happen. Garrison also notes the need to ensure “teaching presence” to help shape the collaborative community into “critical and reflective discourse”. Also important is to establish an appropriate context for the use of these tools. Like ~PowerPoint before them, one might merely use wikis and blogs as an electronic blackboard, but that would be to miss out on so much more.
With regard to deep-learning, it's clear that blogs and wikis, as frameworks for organising and retrieving information, have a lot to offer, not least as elements contributing to learners' portfolios. “Portfolios should support an environment of reflection and collaboration” ([[Barrett, 2004|References]]). Web 2.0 is a set of tools and paradigms which, in different combinations, are the building blocks not just of human-computer interaction, but of rich, one-to-many person-to-person interactivity. From a constructionist perspective, the difference between the functional, but rigid, “Web 1.0” environment, and the fluidity of Web 2.0 interactions, parallels Papert's own distinctions between the relative merits of the functional but unwieldy BASIC language and his own LOGO language. LOGO provides a “dynamic problem solving environment that engenders creative problem solving” ([[Papert, 2006|References]]) and, in many ways, so do the connectivities of Web 2.0.
Web 2.0 unquestionably offers a powerful digital environment that supports many elements key to e-learning, in a loosely coupled, platform-independent manner. Chief among these is social networking and collaboration:
>Direct social navigation is a form of discourse community, a group of individuals with common interests who agree to share ideas and resources. A great deal of intellectual work goes into social navigation Web pages. These pages are not only a powerful form of communication but also a clear measure of understanding’Äîthat is, they can be assessed and evaluated as a measure of learning.([[Colaric and Jonassen, 2002|References]]).
We can provide blogs as a generic tool (the overhead of providing a dedicated blog server at Warwick is probably not prohibitive, and there are many free solutions) and similarly wikis, and for the many other Web 2.0 applications built on the same tools and principles (photo-blogging, video-blogging, podcasts, discussions).
Web 2.0 is significant in that it establishes a very social framework for expectations of the //next// generation of web-based communication tools and techniques, as it will inevitably underpin whatever succeeds it in turn. As network speeds increase, we can already see, for example, how non-textual web content is being created and managed within the framework established for blogging: first photo-blogging with Flickr, and now podcasting, still predominantly audio, but with audio-visual applications already becoming widely used (~YouTube). It is part of a never-ending evolution.
Web 2.0 may be just the latest “bloody thing”, and it won't be the last. But if we are to avoid the scenario described by Sharon Kopyc ([[2006|References]]) – where tech-savvy students are confounded and repelled by the outmoded methods of their teachers and institutions – educators need to be involved with it. Luckily, Web 2.0 makes that easy.
<html><div class='viewer' macro='navigation tiddlers:{{store.getTiddlerText("PresentationIndex").readBracketedList()}}}'></div></html>
[[Start Here]]
The kind of difference that Web 2.0 features make to online collaborative, educational projects can be briefly illustrated by looking at the recent [[Flat Classroom Project|http://flatclassroomproject.wikispaces.com/]] ([[2006|References]]). This is a collaborative, assessed project between a grade 11 IT class at International School Dhaka in Bangladesh, and a 10th grade Computer Science class at Westwood Schools in Camilla, Georgia, USA. The goal of the project was for students at each school to collaborate in developing a set of articles and essays about globalisation, based on themes in Thomas Friedman's book, //The World Is Flat//. Students are assigned a thematic area, and develop the content in pairs – one from each school – and use a Wiki to do so. Owing to the difference in time zones, this collaboration, of necessity, takes place asynchronously.
Among the many Web 2.0 tools that the teachers who set up this project have been able to put to good use are:
* Tagged photo blogging. The teachers have uploaded photos to Flickr, and tagged them with the keyword “[[flatclassroom06|http://www.flickr.com/photos/tags/flatclassroom06]]”. This enables all photos so tagged, no matter who has uploaded them, to be accessed using the URL.
* Blogging by the teachers, including general observations about the course, and specific, date-stamped instructions for the students (e.g. [[Literacy Ideals|http://elgg.net/itgs/weblog/141807.html]] on Julie Lindsay's blog.
* Blogging by pupils, also on ELGG. Teachers further encourage blogging by nominating a “[[Blogger Of The Week|http://elgg.net/itgs/weblog/140671.html]]” (and even a “Blogger Blacklist” in the case of under-use of the blog).
* Audio podcasting. Julie Davis has recorded audio messages for the classes.
* Wiki logs of who did what when, both at site level (http://flatclassroomproject.wikispaces.com/space/changes) and on individual pages (e.g. http://flatclassroomproject.wikispaces.com/page/history/Web+2.0+Tools+for+Sharing+Information)
The result is interesting and exciting: students have had a valuable and encouraging opportunity for international outreach, and have worked constructively, creatively and collaboratively to creating dynamic web essays, comprising text, images, videos and links. It's a sign, if one were needed, of quite how far global communications have come, since the first Intelsat broadcast The Beatles live to the world, forty years ago; but it's also indicative of the difference a decade makes, when compared with [[The Decameron Web|The Web and Boccaccio]].
//The Flat Classroom Project wiki://
<html><iframe style="width: 100%; height: 100ex; font-size: 60%; border: 2px solid #300; padding: 4px;" src="http://flatclassroomproject.wikispaces.com/" title="The Flat Classroom Project wiki"/></html>
<html><div class='viewer' macro='navigation tiddlers:{{store.getTiddlerText("PresentationIndex").readBracketedList()}}}'></div></html>
TiddlyWiki uses Wiki style markup, a way of lightly “tagging” plain text so it can be transformed into HTML. ''Edit this Tiddler to see samples.'' ! Header Samples !Header 1 !!Header 2 !!!Header 3 !!!!Header 4 !!!!!Header 5 ! Unordered Lists: * Lists are where it's at * Just use an asterisk and you're set ** To nest lists just add more asterisks... ***...like this * The circle makes a great bullet because once you've printed a list you can mark off completed items * You can also nest mixed list types ## Like this ! Ordered Lists # Ordered lists are pretty neat too # If you're handy with HTML and CSS you could customize the [[numbering scheme|http://www.w3schools.com/css/pr_list-style-type.asp]] ## To nest, just add more octothorpes (pound signs)... ### Like this * You can also ** Mix list types *** like this # Pretty neat don't you think? ! Tiddler links To create a Tiddler link, just use mixed-case WikiWord, or use [[brackets]] for NonWikiWordLinks. This is how the GTD style [[@Action]] lists are created. Note that existing Tiddlers are in bold and empty Tiddlers are in italics. See CreatingTiddlers for details. ! External Links You can link to [[external sites|http://google.com]] with brackets. You can also LinkToFolders on your machine or network shares. ! Images Edit this tiddler to see how it's done. [img[http://img110.echo.cx/img110/139/gorilla8nw.jpg]] !Tables |!th1111111111|!th2222222222| |>| colspan | | rowspan |left| |~| right| |colored| center | |caption|c For a complex table example, see PeriodicTable. ! Horizontal Rules You can divide a tiddler into ---- sections by typing four dashes on a line by themselves. ! Blockquotes <<< This is how you do an extended, wrapped blockquote so you don't have to put angle quotes on every line. <<< >level 1 >level 1 >>level 2 >>level 2 >>>level 3 >>>level 3 >>level 2 >level 1 ! Other Formatting ''Bold'' ==Strike== __Underline__ //Italic// Superscript: 2^^3^^=8 Subscript: a~~ij~~ = -a~~ji~~ @@highlight@@ Unfortunately highlighting is broken right now. @@color(green):green colored@@ @@bgcolor(#ff0000):color(#ffffff):red colored@@ Hex colors are also broken right now.
With the exception of the teaching of Computer Science per se, and the continuing evolution of computing and network technologies within institutional administrative infrastructures, there are perhaps four main areas in which Information and Communications Technology (ICT) in general, and the Web in particular, are particularly significant in education:
# <html><img src="http://farm2.static.flickr.com/1138/771293926_162c7c1846_m_d.jpg" title="Penguin Study Software – Julius Caesar" style="width: 240px; float: right; border: 1px solid #ccc; margin: 0 1ex 1ex 1ex; border: 1px solid #C99; padding: 4px;"/></html> ''Supporting and enhancing established teaching practices, within and without the classroom.''<br/>Rare is the new development in Information and/or Communications Technology that has not been seized on as having the potential to enhance traditional approaches to teaching core subjects. Radio and television have both been used extensively, from primary schools to the Open University – doubly so since the advent of cheap technology for timeshifting broadcasts (i.e. timer-based audio and video recorders). Home computing and computing in schools in the 1980s brought with it a wealth of supporting computer applications, not just for science subjects, but across the curriculum. (By 1984 there were even home computer programs available for Shakespeare studies, such as the Penguin Study Software series. “[[World Of Spectrum|http://www.worldofspectrum.org/educatio.html]]” maintains a fascinating list of 1980s educational software for the Sinclair Spectrum.) <br/><br/>
# ''As a communications platform and virtual environment, for the delivery of distance learning.'' <br/> Many ICT applications for the classroom can equally be valuable in a distributed way for distance learning. In addition, distance learners require a stable online environment in which they can not only manage the resources they require, but also experience, as far as possible, a sense of “personal presence” ([[Feenberg, 1989|References]]) – of themselves, of their teachers, and of their fellow students.<br/><br/>Since the advent of relatively simple and cheap Web-based applications, the expectations of virtual, online environments have continually increased. Learners can be provided with the electronic surrogates of ever more educational resources, for example: online libraries (originally just library catalogues, but increasingly content too); facilities to interact with tutors and fellow sudents (asynchronous conversations, via email and discussion boards; synchronous chat by text-based messaging, audio or video); electronic creation, submission, and even marking of assessments, essays and other assignments. <br/><br/>While some, notably Dreyfus ([[2001|References]]), seem reluctant to acknowledge the Internet as much more than a speedier way to deliver correspondence courses, many others are more enthusiastic: “There is evidence to suggest that online learning may in fact have an advantage in supporting collaboration and creating a sense of community.” ([[Garrison, 2006|References]])<br/><br/>
#''Supporting the development of deep learning skills.'' <br/>Deep learning is the acquisition of more profound and personalised knowledge than the superficial, factual content of the lessons as taught, through making connections between ideas, concepts, courses, modules: “to have students become self-directed and to have learned to learn” ([[Garrison, 2006|References]]). A major element of deep learning is reflection on individual study and on debate. As manifestations of Computer Mediated Communication (CMC), all Internet-based projects – whether by email, discussion groups, wikis, blogs, or any combination thereof – are very much “retrievable forms of discourse” ([[Feenberg, 1989|References]]) and therefore potentially useful tools to support deep learning.<br/><br/>Another aspect of computer-mediated deep learning is exemplified in the work of Seymour Papert. Papert is one of the best known exponents of the use of computers to stimulate learners' engagement with creative problem-solving and constructive play, notably through LOGO, his elegant computer language, with which children of all ages can program the movements of a “Turtle”. “Teaching the Turtle to act or to ‘think’ can lead one to reflect on one's own actions and thinking. And, as children move on, they program the computer to make more complex decisions and find themselves engaged in reflecting on more complex aspects of their own thinking.” ([[Papert, 1980|References]])<br/><br/>
# ''Teaching key IT “life” skills.'' <br/>Perhaps the most obvious intersection of education and IT, particularly since the development of vocational IT qualifications such as CLAIT and ECDL. The pervasiveness of Information Technology, and the convergence of many established communications technologies (writing, speech, visual – both broadcast and interactive), around common and interlinked digital frameworks, compels sometimes reluctant educators to keep abreast of rapidly-changing new developments, in order to teach learners how to use and apply the latest generation of life-enhancing tools – as well as to impart the underlying generic principles that assist learners in engaging with ongoing technological developments.<br/>
We will see below how each of this aspects of ICT in education is susceptible to, and likely to benefit from, new approaches to using the web.
<html><div class='viewer' macro='navigation tiddlers:{{store.getTiddlerText("PresentationIndex").readBracketedList()}}}'></div></html>
*[[Start Here]] *[[ICT in education]] *[[The Web and Boccaccio]] *[[Blogs]] *[[Wikis]] *[[Web 2.0]] *[[Warwick Blogs]] *[[Flat Classroom Project]] *[[Concludingly]] * *[[Notes]] *[[References]] *[[Postscript]] *[[About this text]] <<author>>
<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml'/>
<!--}}}-->
<style type="text/css">#contentWrapper {display:none;}</style><div id="SplashScreen" style="border: 3px solid #ccc; display: block; text-align: center; width: 320px; margin: 100px auto; padding: 50px; color:#000; font-size: 28px; font-family:Tahoma; background-color:#eee;"><b><i>A Web 2.0 Education</i></b> is loading<span style="text-decoration: blink;"> ...</span><br/><br/><img src="http://farm1.static.flickr.com/47/133131552_31ce1d4fb8_m_d.jpg" alt="*"/><br/><span style="font-size: 14px; color:red;">Requires Javascript.</span></div>
// Resolves a Tiddler reference or tiddler title into a tiddler title string, or null if it doesn't exist
resolveTitle = function(t)
{
if (t instanceof Tiddler) t = t.title;
return store.tiddlerExists(t) ? t : null;
}
config.macros.navigation = {};
config.macros.navigation.handler = function(place,macroName,params,wikifier,paramString,tiddler)
{
if (!store.tiddlerExists(tiddler.title))
return false;
var e = createTiddlyElement(place,"span",null,"nav");
e.setAttribute("refresh","macro");
e.setAttribute("macroName",macroName);
e.setAttribute("params",paramString);
e.setAttribute("tiddler",tiddler.title)
this.refresh(e,paramString);
}
config.macros.navigation.refresh = function(place,params)
{
var tiddler = store.getTiddler(place.getAttribute("tiddler"));
removeChildren(place);
var params = place.getAttribute("params").parseParams("tiddlers",null,true);
//alert(store.getTiddlerText(getParam(params,"index",undefined)).parseParams("tiddlers",null,false))
var tiddlers = getParam(params,"tiddlers",undefined);
if (typeof tiddlers == 'string')
tiddlers = tiddlers.readBracketedList();
if (tiddlers == undefined)
alert("no source tiddlers defined for navigation");
var contents = [];
for (var i=0;i<tiddlers.length;i++)
{
var title = resolveTitle(tiddlers[i]);
contents.push(title);
}
var navIndex = contents.indexOf(tiddler.title);
if (navIndex == -1)
return false;
if (contents[navIndex-1])
{
wikify("[[<< Previous|"+contents[navIndex-1]+"]]",place);
place.lastChild.className += " navPrev";
}
if (contents[navIndex+1])
{
wikify("[[Next >>|"+contents[navIndex+1]+"]]",place);
place.lastChild.className += " navNext";
}
var theTable = createTiddlyElement(place,"table",null,"nav");
var theBody = createTiddlyElement(theTable,"tbody");
var theRow = createTiddlyElement(theBody,"tr");
for (var i=0; i<contents.length; i++)
{
var box = createTiddlyElement(theRow,"td",null,"navlinkcell"," ");
box.onclick = onClickTiddlerLink;
box.setAttribute("tiddlyLink",contents[i]);
box.title = (contents[i]);
if (contents[i] ==tiddler.title)
box.className += " activenav";
}
}
setStylesheet(
".navNext {float:right;}\n"+
".navPrev, .navPrevious{float:left;}\n"+
".nav .tiddlyLink {color:#000; background:transparent;border:none;padding:0;margin:0;}\n"+
".nav {padding:0;margin:0;}\n"+
".nav table {margin:0 auto !important; border:0px solid #000;padding:0;border-collapse:separate;}\n"+
".nav table tr{padding:0; margin:0;border-spacing: 1px;}\n"+
".nav table td {padding:4px; border:1px solid #000; border-spacing: 0px;cursor:pointer;cursor:hand}\n"+
".nav .activenav{background:#000 !important;}\n","NavigationPluginStyles");
[[1.|The Web and Boccaccio]] I'm overlooking the fact that there doesn't seem to have been any recent activity on the Decameron Web site/project. However this kind of undeclared suspension is itself a common feature of early Web projects like this. [[2.|Wikis]] The Hypertext Transfer Protocol defines both GET and PUT functions, but the latter is rarely enabled in standard web server configurations, leaving users to manage their files manually using File Transfer Protocol (FTP) or via a web editing application, such as Front Page or Dreamweaver. [[3.|Web 2.0]] Ward Cunningham's original [[WikiWikiWeb|http://c2.com/cgi/wiki?FrontPage]] was a relatively simple Perl CGI script that used a small set of regular expressions to transform wiki markup into HTML.
A few minor corrections and emendations have been made to the text since it was first submitted in January 2007. The version of TiddlyWiki used has also been updated to 2.2.4 (June 2007). In February 2007, shortly after this essay was completed, the Joint Information Systems Committee (JISC) published an excellent peer-reviewed report in its Technology & Standards Watch (~TechWatch) series. //[[What is Web 2.0? Ideas, technologies and implications for education|http://www.jisc.ac.uk/media/documents/techwatch/tsw0701b.pdf]]// by Paul Anderson, is a thorough yet accessible guide to all aspects of Web 2.0 and their current and potential use in education, and is highly recommended to anyone interested in investigating the subject further.
[[Start Here]] [[ICT in education]] [[The Web and Boccaccio]] [[Blogs]] [[Wikis]] [[Web 2.0]] [[Warwick Blogs]] [[Flat Classroom Project]] [[Concludingly]]
//{{{
TiddlyWiki.prototype.removeNotification = function(title,fn) {
for (var i=0;i<this.namedNotifications.length;i++)
if((this.namedNotifications[i].name == title) && (this.namedNotifications[i].notify == fn))
this.namedNotifications.splice(i,1);
}
//checks to see if a tiddler exists in store or as a shadow.
TiddlyWiki.prototype.isTiddler= function (title)
{return store.tiddlerExists(title) || store.isShadowTiddler(title)}
// Refresh all tiddlers in the Story
Story.prototype.lewcidrefreshAllTiddlers = function()
{
var place = document.getElementById(this.container);
var e = place.firstChild;
if(!e) return;
this.refreshTiddler(e.getAttribute("tiddler"),null,true);
while((e = e.nextSibling) != null)
this.refreshTiddler(e.getAttribute("tiddler"),null,true);
}
config.presentationPlugin ={
};
config.presentationPlugin.defaults = [
{name: "StyleSheet", notify: refreshStyles},
{name: "PageTemplate", notify: refreshPageTemplate}
];
window.presentationMode='';
function applyPresentationMode (oldMode,Mode)
{
presentationMode = Mode;
var defaults = config.presentationPlugin.defaults;
var oldStyleElement = document.getElementById(oldMode+"StyleSheet");
if (oldStyleElement)
{
oldStyleElement.parentNode.removeChild(oldStyleElement);
}
for (var i=0; i<defaults.length; i++)
{
var def = defaults[i]["name"];
var newMode = store.isTiddler(Mode + def)? Mode + def : def;
store.removeNotification(oldMode + def, defaults[i]["notify"]);
store.addNotification(newMode,defaults[i]["notify"]);
store.notify(newMode); //just one do blanket notify instead?
}
story.lewcidrefreshAllTiddlers();
}
config.macros.author={};
config.macros.author.handler= function (place,macroName,params,wikifier,paramString,tiddler) {
var e = createTiddlyElement(place,"div");
e.setAttribute("refresh","macro");
e.setAttribute("macroName","author");
e.setAttribute("params",paramString);
this.refresh(e,paramString);
}
config.macros.author.refresh = function(place,params){
if (window.lewcideditmode== false)
return false;
removeChildren(place);
var oldMode = window.presentationMode;
var newMode = (oldMode == "Author")?"":"Author";
var label = (oldMode == "Author")? "Presentation Mode":"Author Mode";
var tooltip = label;
createTiddlyButton(place,label,tooltip,function() {
applyPresentationMode(oldMode,newMode);
});
};
Story.prototype.chooseTemplateForTiddler_old_presentation = Story.prototype.chooseTemplateForTiddler;
Story.prototype.chooseTemplateForTiddler = function(title,template)
{
if (!template)
template = DEFAULT_VIEW_TEMPLATE;
var mode = presentationMode;
if (template == DEFAULT_VIEW_TEMPLATE)
{
if (store.isTiddler(mode+"ViewTemplate"))
return mode+"ViewTemplate";
}
else if (template == DEFAULT_EDIT_TEMPLATE)
{
if (store.isTiddler(mode+"EditTemplate"))
return mode+"EditTemplate";
}
return this.chooseTemplateForTiddler_old_presentation(title,template);
}
window.lewcideditmode = false;
config.paramifiers.author = {
onstart: function(v) {
if (v!="true")
return false;
applyPresentationMode("","Author");
window.lewcideditmode = true;
refreshDisplay();
}
};
//}}}
/***
|''Name:''|Publish Macro|
|''Version:''|0.3 (4 Jan 2007)|
|''Source''|http://jackparke.googlepages.com/jtw.html#PublishMacro ([[del.icio.us|http://del.icio.us/post?url=http://jackparke.googlepages.com/jtw.html%23PublishMacro]])|
|''Author:''|[[Jack]]|
|''Type:''|Macro|
!Description
Publish tiddlers tagged with these tags <<option txtPublishTags>> (comma seperated) as HTML pages to the subfolder 'publish' (you must create this). Use the PublishTemplateHead and PublishTemplateBody templates to style your pages and the PublishIndexTemplate to define an index page.
!Usage
{{{<<doPublish>>}}} <<doPublish>>
!Revision History
* Original by [[Jack]] 24 May 2006
* Updated 2 Jan 2007
* Refactored 4 Jan 2007
!Code
***/
//{{{
version.extensions.doPublish = {major: 0, minor: 3,
revision: 0, date: new Date("Jan4, 2007")};
config.macros.doPublish = {label: "publish", prompt: "Publish Tiddlers as HTML files"};
if (config.options.txtPublishTags==undefined) config.options.txtPublishTags="publish";
config.shadowTiddlers.PublishTemplateHead = '<title>%0 - %1</title>\n<link rel="stylesheet" type="text/css" href="style.css"/>\n<meta name="keywords" content="%3"/>'
config.shadowTiddlers.PublishTemplateBody = '<div class="viewer"><small><a href=\"index.html\">Home</a> > %1</small><h1>%0</h1>\n<h2>%1</h2>\n%2\n<hr>Tags: %3\n<hr>%4, %5 (created %6)\n</div>\n'
config.shadowTiddlers.PublishIndexTemplate = '<div class="viewer"><small><a href="index.html">Home</a> > %1</small><h1>%0</h1><h2>%1</h2>\n<ul>%2\n</ul>\n<small>Published: %6</small>\n</div>\n';
config.macros.doPublish.handler = function(place)
{
if(!readOnly)
createTiddlyButton(place,this.label,this.prompt,function () {doPublish(); return false;},null,null,this.accessKey);
}
function doPublish() {
var savedTiddlers = [];
var tiddlers = store.getTiddlers("title");
var place = document.getElementById(story.container)
var HTMLTemplateHead = store.getTiddlerText("PublishTemplateHead");
// We cannot render this template because <title> and other tags fail
var HTMLTemplateBody = store.getTiddlerText("PublishTemplateBody");
HTMLTemplateBody = renderTemplate(HTMLTemplateBody)
HTMLTemplateBody = wiki2Web(HTMLTemplateBody);
var PublishTags = config.options.txtPublishTags || "publish"; PublishTags = PublishTags.split(",")
var PublishFolder = getPublishPath(); if (!PublishFolder) return;
var indexFile = "";
var indexFileTemplate = store.getTiddlerText("PublishIndexTemplate");
// This does not allow <<myMacro>> but wants <div macro="myMacro">
indexFileTemplate = renderTemplate(indexFileTemplate)
// This option allows WIKI-syntax but is limited in it's HTML capabilities
//indexFileTemplate = wikifyStatic(indexFileTemplate)
for (var t = 0; t < tiddlers.length; t++) {
var tiddler = tiddlers[t];
if (tiddler.tags.containsAny(PublishTags)) {
var tiddlerHTML = wikifyStatic(tiddler.text)
var HTML = '<html>\n\<head>\n' + HTMLTemplateHead + '\n</head>\n<body>\n' + HTMLTemplateBody + '\n</body>\n</html>';
HTML = HTML.format([
wikifyPlain("SiteTitle").htmlEncode(),
tiddler.title.htmlEncode(),
wiki2Web(tiddlerHTML),
tiddler.tags.join(", "),
tiddler.modifier,
tiddler.modified.toLocaleString(),
tiddler.created.toLocaleString()
]);
saveFile(PublishFolder + tiddler.title.filenameEncode() + ".html", HTML)
indexFile += "<li><a href=\"" + tiddler.title.filenameEncode() + ".html" + "\">" + tiddler.title + "</a></li>\n";
story.closeTiddler(tiddler.title);
}
}
indexFileTemplate = '<html>\n\<head>\n' + HTMLTemplateHead + '\n</head>\n<body>\n' + indexFileTemplate + '\n</body>\n</html>';
indexFileTemplate = indexFileTemplate.format([wikifyPlain("SiteTitle").htmlEncode(), wikifyPlain("SiteSubtitle").htmlEncode(), "%2", "", "", "", (new Date()).toLocaleString()])
indexFile = indexFileTemplate.replace("%2", indexFile)
indexFile = wiki2Web(indexFile);
saveFile(PublishFolder + "index.html", indexFile)
saveFile(PublishFolder + "style.css", store.getTiddlerText("StyleSheet") + store.getTiddlerText("StyleSheetLayout") + store.getTiddlerText("StyleSheetColors"))
var indexWin = window.open("file://" + PublishFolder.replace(/\\/g, "/") + "index.html", null); indexWin.focus();
}
function renderTemplate(html) {
var result = document.createElement("div");
result.innerHTML = html;
applyHtmlMacros(result,null);
var temp = result.innerHTML;
//result.parentNode.removeChild(result);
return temp;
}
// Convert wikified text to html
function wiki2Web(wikiHTML) {
var regexpLinks = new RegExp("<a .*?tiddlylink=.*?</a>","img");
var result = wikiHTML.match(regexpLinks);
if (result) {
for(i = 0; i < result.length; i++) {
var className = result[i].match(/ class="(.*?)"/i)?result[i].match(/ class="(.*?)"/i)[1]:"";
var tiddlerName = result[i].match(/ tiddlylink="(.*?)"/i)[1];
var url = tiddlerName.htmlDecode().filenameEncode() + ".html";
if (!className.match(/tiddlyLinkNonExisting/i))
wikiHTML = wikiHTML.myReplace(result[i], "<a class=\"" + className + "\" href=\"" + url + "\">" + tiddlerName + "</a>");
else
wikiHTML = wikiHTML.myReplace(result[i], "<a class=\"" + className + "\" title=\"Page does not exist\" href=\"#\">" + tiddlerName + "</a>");
}
wikiHTML = wikiHTML.replace(/ href="http:\/\//gi, " target=\"_blank\" href=\"http://");
}
return wikiHTML
}
function getPublishPath()
{
var originalPath = document.location.toString();
// Check we were loaded from a file URL
if(originalPath.substr(0,5) != "file:")
{
alert(config.messages.notFileUrlError);
if(store.tiddlerExists(config.messages.saveInstructions))
story.displayTiddler(null,config.messages.saveInstructions);
return;
}
var localPath = getLocalPath(originalPath);
var backSlash = true;
var dirPathPos = localPath.lastIndexOf("\\");
if(dirPathPos == -1)
{
dirPathPos = localPath.lastIndexOf("/");
backSlash = false;
}
var backupPath = localPath.substr(0,dirPathPos) + (backSlash ? "\\" : "/") + "publish\\";
return backupPath;
}
// Replace without regex
String.prototype.myReplace = function(sea, rep) {
var t1 = this.indexOf(sea);
var t2 = parseInt(this.indexOf(sea)) + parseInt(sea.length);
var t3 = this.length;
return this.substring(0, t1) + rep + this.substring(t2, t3)
}
// Convert illegal characters to underscores
String.prototype.filenameEncode = function()
{
return(this.toLowerCase().replace(/[^a-z0-9_-]/g ,"_"));
}
//}}}
/***
|''Name:''|RSSReaderPlugin|
|''Description:''|This plugin provides a RSSReader for TiddlyWiki|
|''Version:''|0.3.0|
|''Date:''|Aug 24, 2006|
|''Source:''|http://tiddlywiki.bidix.info/#RSSReaderPlugin|
|''Documentation:''|http://tiddlywiki.bidix.info/#RSSReaderPluginDoc|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''Credit:''|BramChen for RssNewsMacro|
|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|
|''~CoreVersion:''|2.0.0|
|''Browser:''|Firefox 1.5; InternetExplorer 6.0; Safari|
|''Include:''|none|
|''Require:''|none|
***/
//{{{
version.extensions.RSSReaderPlugin = {
major: 0, minor: 3, revision: 0,
date: new Date("Aug 24, 2006"),
author: "BidiX",
credit: "BramChen for RssNewsMacro",
source: "http://TiddlyWiki.bidix.info/#RSSReaderPlugin",
documentation : "http://TiddlyWiki.bidix.info/#RSSReaderPluginDoc",
author: 'BidiX (BidiX (at) bidix (dot) info',
license: '[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D]]',
coreVersion: '2.0.0',
browser: 'Firefox 1.5; InternetExplorer 6.0; Safari'
};
config.macros.rssReader = {
dateFormat: "DDD, DD MMM YYYY",
itemStyle: "display: block;border: 1px solid black;padding: 5px;margin: 5px;", //useed '@@'+itemStyle+itemText+'@@'
msg:{
permissionDenied: "Permission to read preferences was denied.",
noRSSFeed: "No RSS Feed at this address %0",
urlNotAccessible: " Access to %0 is not allowed"
},
cache: [], // url => request
desc: "noDesc",
// feedURL: "",
place:"",
handler: function(place,macroName,params,wikifier,paramString,tiddler){
var desc = params[0];
var feedURL = params[1];
// var toFilter = (params[2] ? params[2] : false);
var toFilter = false;
var filterString;
if (params[2] != undefined) {
toFilter = true;
if (params[2].match(/\w+/))
filterString = params[2];
else
filterString = tiddler.title;
}
var place = createTiddlyElement(place, "div", "RSSReader");
wikify("^^<<rssFeedUpdate "+feedURL+" [[" + tiddler.title + "]]>>^^\n",place);
if (this.cache[feedURL]) {
this.processResponse(this.cache[feedURL], feedURL, place, desc, toFilter, filterString);
}
else {
this.asyncGet(feedURL, place, desc, toFilter, filterString);
}
},
asyncGet: function (feedURL, place, desc, toFilter, filterString){
var xmlhttp;
try {xmlhttp=new XMLHttpRequest();}
catch (e) {
try {xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");}
catch (e) {
try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
catch (e) { displayMessage(e.description?e.description:e.toString());}
}
}
if (!xmlhttp){
return;
}
if (window.netscape){
try {
if (document.location.protocol.indexOf("http") == -1) {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
}
}
catch (e) { displayMessage(e.description?e.description:e.toString()); }
}
xmlhttp.onreadystatechange=function (){
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200 || xmlhttp.status===0) {
config.macros.rssReader.processResponse(xmlhttp, feedURL, place, desc, toFilter, filterString);
}
else {
displayMessage("Problem retrieving XML data:" + xmlhttp.statusText);
}
}
};
try {
xmlhttp.open("GET",feedURL,true);
if (config.browser.isIE) {
xmlhttp.send();
}
else {
xmlhttp.send(null);
}
}
catch (e) {
wikify(e.toString()+this.urlNotAccessible.format([feedURL]), place);
}
},
processResponse: function(xmlhttp, feedURL, place, desc, toFilter, filterString){
if (window.netscape){
try {
if (document.location.protocol.indexOf("http") == -1) {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
}
}
catch (e) { displayMessage(e.description?e.description:e.toString()); }
}
if (xmlhttp.responseXML){
this.cache[feedURL] = xmlhttp;
this.genRssNews(xmlhttp.responseXML, place, feedURL, desc, toFilter, filterString);
}
else {
var dom = (new DOMParser()).parseFromString(xmlhttp.responseText, "text/xml");
if (dom) {
this.cache[feedURL] = xmlhttp;
this.genRssNews(dom, place, feedURL, desc, toFilter, filterString);
}
else {
wikify("<html>"+xmlhttp.responseText+"</html>", place);
displayMessage(this.msg.noRSSFeed.format([feedURL]));
}
}
},
genRssNews: function(xml, place, feedURL, desc, toFilter, filterString){
// Channel
var chanelNode = xml.getElementsByTagName('channel').item(0);
var chanelTitleElement = (chanelNode ? chanelNode.getElementsByTagName('title').item(0) : null);
var chanelTitle = "";
if ((chanelTitleElement) && (chanelTitleElement.firstChild)) chanelTitle = chanelTitleElement.firstChild.nodeValue;
var chanelLinkElement = (chanelNode ? chanelNode.getElementsByTagName('link').item(0) : null);
var chanelLink = "";
if (chanelLinkElement) chanelLink = chanelLinkElement.firstChild.nodeValue;
var titleTxt = "!![["+chanelTitle+"|"+chanelLink+"]]\n";
var title = createTiddlyElement(place,"div",null,"ChanelTitle",null);
wikify(titleTxt,title);
// ItemList
var itemList = xml.getElementsByTagName('item');
var article = createTiddlyElement(place,"ul",null,null,null);
var lastDate;
var re;
if (toFilter)
re = new RegExp(filterString.escapeRegExp());
for (var i=0; i<itemList.length; i++){
var titleElm = itemList[i].getElementsByTagName('title').item(0);
var titleText = (titleElm ? titleElm.firstChild.nodeValue : '');
if (toFilter && ! titleText.match(re)) {
continue;
}
var descText = '';
var isWikitext = false;
var descElem = itemList[i].getElementsByTagName('wikitext').item(0);
if (descElem){
try{
isWikitext = true;
descText = "\n"+descElem.firstChild.nodeValue;}
catch(e){}
}
else {
descElem = itemList[i].getElementsByTagName('encoded').item(0);
if (descElem){
try{descText = descElem.firstChild.nodeValue;}
catch(e){}
descText = "<html>"+descText+"</html>";
}
else {
descElem = itemList[i].getElementsByTagName('description').item(0);
if (descElem){
try{descText = descElem.firstChild.nodeValue;}
catch(e){}
descText = descText.replace(/<br \/>/g,'\n');
if (desc == "asHtml")
descText = "<html>"+descText+"</html>";
}
}
}
var linkElm = itemList[i].getElementsByTagName("link").item(0);
var linkURL = linkElm.firstChild.nodeValue;
var pubElm = itemList[i].getElementsByTagName('pubDate').item(0);
var pubDate;
if (!pubElm) {
pubElm = itemList[i].getElementsByTagName('date').item(0); // for del.icio.us
if (pubElm) {
pubDate = pubElm.firstChild.nodeValue;
pubDate = this.formatDateString(this.dateFormat, pubDate);
}
else {
pubDate = '0';
}
}
else {
pubDate = (pubElm ? pubElm.firstChild.nodeValue : 0);
pubDate = this.formatString(this.dateFormat, pubDate);
}
titleText = titleText.replace(/\[|\]/g,'');
var rssText = '** '+'[[' + titleText + '|' + linkURL + ']]' + '\n' ;
if ((desc != "noDesc") && descText){
if (version.extensions.nestedSliders){
rssText = rssText.replace(/\n/g,' ');
descText = '+++[...]\n'
+(isWikitext ? '\n<<rssFeedImportTiddler '+ feedURL + ' [['+titleText+']]>>':'')
+'@@'+this.itemStyle+descText+'\n@@\n'
+'===';
}
rssText = rssText + descText + '\n\n';
}
var story;
if ((lastDate != pubDate) && ( pubDate != '0')) {
story = createTiddlyElement(article,"li",null,"RSSItem",pubDate);
lastDate = pubDate;
}
else {
lastDate = pubDate;
}
story = createTiddlyElement(article,"div",null,"RSSItem",null);
wikify(rssText,story);
}
},
formatString: function(template, theDate){
var dateString = new Date(theDate);
template = template.replace(/hh|mm|ss/g,'');
return dateString.formatString(template);
},
formatDateString: function(template, theDate){
var dateString = new Date(theDate.substr(0,4), theDate.substr(5,2) - 1, theDate.substr(8,2)
/*, theDate.substr(11,2), theDate.substr(14,2), theDate.substr(17,2)*/
);
return dateString.formatString(template);
}
};
//}}}
//{{{
config.macros.rssFeedUpdate = {
label: "Update",
prompt: "Clear the cache and redisplay this RssFeed",
handler: function(place,macroName,params) {
var feedURL = params[0];
var tiddlerTitle = params[1];
createTiddlyButton(place, this.label, this.prompt,
function () {
if (config.macros.rssReader.cache[feedURL]) {
config.macros.rssReader.cache[feedURL] = null;
//story.refreshTiddler(tiddlerTitle,null, true);
}
story.refreshTiddler(tiddlerTitle,null, true);
return false;});
}
};
//}}}
//{{{
config.macros.rssFeedImportTiddler = {
label: "Import",
prompt: "Import this tiddler in this TiddlyWiki",
askReplaceMsg: "Tiddler already exists, replace it ?",
handler: function(place,macroName,params) {
var feedUrl = params[0];
var tiddlerTitle = params[1];
createTiddlyButton(place, this.label, this.prompt,
function () {
if (feedUrl && config.macros.rssReader.cache[feedUrl]) {
var tiddler = config.macros.rssFeedImportTiddler.parseRssNews(config.macros.rssReader.cache[feedUrl].responseXML, tiddlerTitle);
if (tiddler && (! store.getTiddler(tiddlerTitle) || confirm(config.macros.rssFeedImportTiddler.askReplaceMsg))) {
store.addTiddler(tiddler);
store.notify(tiddler.title, true);
store.setDirty(true);
}
}
return false;});
},
// parse a RssFeed for retrieving a Tiddler with title
parseRssNews: function(xml, title) {
// ItemList
if (document.location.protocol.indexOf("http") == -1) {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
}
var itemList = xml.getElementsByTagName('item');
for (var i=0; i<itemList.length; i++){
var titleElm = itemList[i].getElementsByTagName('title').item(0);
var titleText = titleElm.firstChild.nodeValue;
if (titleText == title) {
// <tiddlywiki:title>
// titleText
titleText = titleText.htmlDecode();
// <tiddlywiki:wikitext>
var elem = itemList[i].getElementsByTagName('wikitext').item(0);
var text = elem ? elem.firstChild.nodeValue.htmlDecode() : "";
// <tiddlywiki:modifier>
elem = itemList[i].getElementsByTagName('modifier').item(0);
var modifier = elem ? elem.firstChild.nodeValue : "";
// <tiddlywiki:modified>
elem = itemList[i].getElementsByTagName('modified').item(0);
var modified = elem ? Date.convertFromYYYYMMDDHHMM(elem.firstChild.nodeValue) : "";
// <tiddlywiki:created>
elem = itemList[i].getElementsByTagName('created').item(0);
var created = elem ? Date.convertFromYYYYMMDDHHMM(elem.firstChild.nodeValue) : "";
// <tiddlywiki:links>
// Links ?
// <tiddlywiki:tags>
elem = itemList[i].getElementsByTagName('tags').item(0);
var tags = elem ? elem.firstChild.nodeValue.htmlDecode() : "";
var tiddler = new Tiddler();
tiddler.assign(titleText,text,modifier,modified,tags,created);
return tiddler;
}
}
// not found
alert("Tiddler \[[" + title +"]] notFound.");
return null;
}
};
//}}}
//''N.b.'': For ease of use on the Web, and since, with only two exceptions, all of my references are to digital resources online, I have included a URL and retrieval date for all resources accessed online.// * Barrett, H. (2004). Digital Stories of Deep Learning. Retrieved: December 27th, 2006. http://electronicportfolios.org/digistory/epstory.html * ~Berners-Lee, T. (1999). Weaving The Web. (London, Orion Books). * Blood, R. (2000). Weblogs: A History And Perspective. Retrieved: December 6th,. 2006. http://www.rebeccablood.net/essays/weblog_history.html * Brown University (2000?). The Decameron Web. Retrieved: December 28th, 2006. http://www.brown.edu/Departments/Italian_Studies/dweb/ * Colaric, S. and Jonassen, D. (2001). Information equals knowledge, searching equals learning, and hyperlinking is good instruction: myths about learning from the World Wide Web. Computers in the Schools, Vol. 17, No. 3-4, pp. 159-169. Retrieved: December 18th, 2006. http://portal.acm.org/citation.cfm?id=543151.543161 * Dreyfus, H. L. (2001). On the internet. (London, Routledge): pp.27-49. Retrieved: 7th January, 2007. https://www.vle.ed.ac.uk/webct/RelativeResourceManager/Template/readings/Dreyfus27.pdf * Feenberg, A. (1989). The written world: On the theory and practice of computer conferencing. In Mindweave: communication, computers and distance education. R. Mason & A. Kaye (Eds.) (Oxford, Pergamon Press): pp. 22-39. Retrieved: December 28th, 2006. http://www-rohan.sdsu.edu/faculty/feenberg/Writworl.htm * Garrison, D. (2006). Online Collaboration Principles. Journal of Asynchronous Learning Networks, 10(1). Retrieved: December 28th, 2006. http://www.sloan-c.org/publications/jaln/v10n1/v10n1_3garrison.asp * Jakes, D. (2006). Techlearning > > Wild about Wikis. Retrieved: December 19th, 2006. http://www.techlearning.com/story/showArticle.php?articleID=191801354 * Kopyc, S. (2006). Enhancing Teaching with Technology: Are We There Yet? Innovate, 3(2). Retrieved: January 1st, 2007. http://www.innovateonline.info/index.php?view=article&id=74 * Lindsay, J, and Davis, V. (2006). The Flat Classroom Project. Retrieved: December 5th, 2006. http://flatclassroomproject.wikispaces.com/ ** Davis, V. (2006). Cool Cat Teacher Blog. Retrieved: January 7th, 2006. http://coolcatteacher.blogspot.com/ ** Lindsay, J. (2006). Literacy Ideals. Retrieved: January 7th 2006. http://elgg.net/itgs/weblog/141807.html * ~McLellan, J. (2006). Just do it... blog it! The Guardian, 5 May 2006. Retrieved January 6th, 2007. http://technology.guardian.co.uk/online/story/0,3605,1476175,00.html * O'Reilly, T. (2005). What Is Web 2.0? Retrieved: December 18th, 2006. http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html * Papert, S. (2006). Mindstorms: Children, Computers and Powerful Ideas. In The New Media Reader. N. ~Wardrup-Fruin and N. Montfort (Eds) (Cambridge, MIT Press): p. 419. *Walker, J. (2006). Network Literacy: Learning with Blogging and Web 2.0. Retrieved: December 5th, 2006. http://jilltxt.net/?p=1662 * Warwick University (2004). Warwick Blogs. Retrieved: January 5th, 2007. http://blogs.warwick.ac.uk/ ** Barton, Natalie (2006). A Snort Story. Retrieved: January 5th, 2007. http://blogs.warwick.ac.uk/nataliebarton/entry/a_snort_story/ ** Retout, Tim: “Philosophy Of Software”. Retrieved: January 5th, 2007. http://blogs.warwick.ac.uk/tretout/entry/philosophy_of_software/ ** Warwick Blogs: FAQ: Why is Warwick providing blogs? Retrieved: January 5th, 2007. http://www2.warwick.ac.uk/services/its/elab/services/webtools/blogs/faqs/general/why/ * World of Spectrum (2007). Software – Educational. Retrieved: December 27th, 2006. http://www.worldofspectrum.org/educatio.html [[Assignment index|IDEL Assignment]]
/***
|''Name:''|SinglePageModePlugin|
|''Source:''|http://www.TiddlyTools.com/#SinglePageModePlugin|
|''Author:''|Eric Shulman - ELS Design Studios|
|''License:''|[[Creative Commons Attribution-ShareAlike 2.5 License|http://creativecommons.org/licenses/by-sa/2.5/]]|
|''~CoreVersion:''|2.0.10|
Normally, as you click on the links in TiddlyWiki, more and more tiddlers are displayed on the page. The order of this tiddler display depends upon when and where you have clicked. Some people like this non-linear method of reading the document, while others have reported that when many tiddlers have been opened, it can get somewhat confusing.
!!!!!Usage
<<<
SinglePageMode allows you to configure TiddlyWiki to navigate more like a traditional multipage web site with only one item displayed at a time. When SinglePageMode is enabled, the title of the current tiddler is automatically displayed in the browser window's titlebar and the browser's location URL is updated with a 'permalink' for the current tiddler so that it is easier to create a browser 'bookmark' for the current tiddler.
Even when SinglePageMode is disabled (i.e., displaying multiple tiddlers is permitted), you can reduce the potential for confusion by enable TopOfPageMode, which forces tiddlers to always open at the top of the page instead of being displayed following the tiddler containing the link that was clicked.
<<<
!!!!!Configuration
<<<
When installed, this plugin automatically adds checkboxes in the AdvancedOptions tiddler so you can enable/disable the plugin behavior. For convenience, these checkboxes are also included here:
<<option chkSinglePageMode>> Display one tiddler at a time
<<option chkTopOfPageMode>> Always open tiddlers at the top of the page
<<<
!!!!!Installation
<<<
import (or copy/paste) the following tiddlers into your document:
''SinglePageModePlugin'' (tagged with <<tag systemConfig>>)
^^documentation and javascript for SinglePageMode handling^^
When installed, this plugin automatically adds checkboxes in the ''shadow'' AdvancedOptions tiddler so you can enable/disable this behavior. However, if you have customized your AdvancedOptions, you will need to ''manually add these checkboxes to your customized tiddler.''
<<<
!!!!!Revision History
<<<
''2006.07.04 [2.2.1]'' in hijack for displayTiddlers(), suspend TPM as well as SPM so that DefaultTiddlers displays in the correct order.
''2006.06.01 [2.2.0]'' added chkTopOfPageMode (TPM) handling
''2006.02.04 [2.1.1]'' moved global variable declarations to config.* to avoid FireFox 1.5.0.1 crash bug when assigning to globals
''2005.12.27 [2.1.0]'' hijack displayTiddlers() so that SPM can be suspended during startup while displaying the DefaultTiddlers (or #hash list). Also, corrected initialization for undefined SPM flag to "false", so default behavior is to display multiple tiddlers
''2005.12.27 [2.0.0]'' Update for TW2.0
''2005.11.24 [1.1.2]'' When the back and forward buttons are used, the page now changes to match the URL. Based on code added by Clint Checketts
''2005.10.14 [1.1.1]'' permalink creation now calls encodeTiddlyLink() to handle tiddler titles with spaces in them
''2005.10.14 [1.1.0]'' added automatic setting of window title and location bar ('auto-permalink'). feature suggestion by David Dickens.
''2005.10.09 [1.0.1]'' combined documentation and code in a single tiddler
''2005.08.15 [1.0.0]'' Initial Release
<<<
!!!!!Credits
<<<
This feature was developed by EricShulman from [[ELS Design Studios|http:/www.elsdesign.com]].
Support for BACK/FORWARD buttons adapted from code developed by Clint Checketts
<<<
!!!!!Code
***/
//{{{
version.extensions.SinglePageMode= {major: 2, minor: 2, revision: 1, date: new Date(2006,7,3)};
if (config.options.chkSinglePageMode==undefined) config.options.chkSinglePageMode=true;
config.shadowTiddlers.AdvancedOptions += "\n<<option chkSinglePageMode>> Display one tiddler at a time";
if (config.options.chkTopOfPageMode==undefined) config.options.chkTopOfPageMode=false;
config.shadowTiddlers.AdvancedOptions += "\n<<option chkTopOfPageMode>> Always open tiddlers at the top of the page";
config.SPMTimer = 0;
config.lastURL = window.location.hash;
function checkLastURL()
{
if (!config.options.chkSinglePageMode)
{ window.clearInterval(config.SPMTimer); config.SPMTimer=0; return; }
if (config.lastURL == window.location.hash)
return;
var tiddlerName = convertUTF8ToUnicode(decodeURI(window.location.hash.substr(1)));
tiddlerName=tiddlerName.replace(/\[\[/,"").replace(/\]\]/,""); // strip any [[ ]] bracketing
if (tiddlerName.length) story.displayTiddler(null,tiddlerName,1,null,null);
}
if (Story.prototype.SPM_coreDisplayTiddler==undefined) Story.prototype.SPM_coreDisplayTiddler=Story.prototype.displayTiddler;
Story.prototype.displayTiddler = function(srcElement,title,template,animate,slowly)
{
if (config.options.chkSinglePageMode) {
window.location.hash = encodeURIComponent(String.encodeTiddlyLink(title));
config.lastURL = window.location.hash;
document.title = wikifyPlain("SiteTitle") + " - " + title;
story.closeAllTiddlers();
if (!config.SPMTimer) config.SPMTimer=window.setInterval(function() {checkLastURL();},1000);
}
if (config.options.chkTopOfPageMode) { story.closeTiddler(title); window.scrollTo(0,0); srcElement=null; }
this.SPM_coreDisplayTiddler(srcElement,title,template,animate,slowly)
}
if (Story.prototype.SPM_coreDisplayTiddlers==undefined) Story.prototype.SPM_coreDisplayTiddlers=Story.prototype.displayTiddlers;
Story.prototype.displayTiddlers = function(srcElement,titles,template,unused1,unused2,animate,slowly)
{
// suspend single-page mode when displaying multiple tiddlers
var saveSPM=config.options.chkSinglePageMode; config.options.chkSinglePageMode=false;
var saveTPM=config.options.chkTopOfPageMode; config.options.chkTopOfPageMode=false;
this.SPM_coreDisplayTiddlers(srcElement,titles,template,unused1,unused2,animate,slowly);
config.options.chkSinglePageMode=saveSPM; config.options.chkTopOfPageMode=saveTPM;
}
//}}}
Richard Davis: IDEL Assignment, ~MSc ~E-Learning, University of Edinburgh
A Web 2.0 Education
/***
''Inspired by [[TiddlyPom|http://www.warwick.ac.uk/~tuspam/tiddlypom.html]]''
|Name|SplashScreenPlugin|
|Created by|SaqImtiaz|
|Location|http://lewcid.googlepages.com/lewcid.html#SplashScreenPlugin|
|Version|0.21 |
|Requires|~TW2.08+|
!Description:
Provides a simple splash screen that is visible while the TW is loading.
!Installation
Copy the source text of this tiddler to your TW in a new tiddler, tag it with systemConfig and save and reload. The SplashScreen will now be installed and will be visible the next time you reload your TW.
!Customizing
Once the SplashScreen has been installed and you have reloaded your TW, the splash screen html will be present in the MarkupPreHead tiddler. You can edit it and customize to your needs.
!History
* 20-07-06 : version 0.21, modified to hide contentWrapper while SplashScreen is displayed.
* 26-06-06 : version 0.2, first release
!Code
***/
//{{{
var old_lewcid_splash_restart=restart;
restart = function()
{ if (document.getElementById("SplashScreen"))
document.getElementById("SplashScreen").style.display = "none";
if (document.getElementById("contentWrapper"))
document.getElementById("contentWrapper").style.display = "block";
old_lewcid_splash_restart();
if (splashScreenInstall)
{if(config.options.chkAutoSave)
{saveChanges();}
displayMessage("TW SplashScreen has been installed, please save and refresh your TW.");
}
}
var oldText = store.getTiddlerText("MarkupPreHead");
if (oldText.indexOf("SplashScreen")==-1)
{var siteTitle = store.getTiddlerText("SiteTitle");
var splasher='\n\n<style type="text/css">#contentWrapper {display:none;}</style><div id="SplashScreen" style="border: 3px solid #ccc; display: block; text-align: center; width: 320px; margin: 100px auto; padding: 50px; color:#000; font-size: 28px; font-family:Tahoma; background-color:#eee;"><b>'+siteTitle +'</b> is loading<blink> ...</blink><br><br><span style="font-size: 14px; color:red;">Requires Javascript.</span></div>';
if (! store.tiddlerExists("MarkupPreHead"))
{var myTiddler = store.createTiddler("MarkupPreHead");}
else
{var myTiddler = store.getTiddler("MarkupPreHead");}
myTiddler.set(myTiddler.title,oldText+splasher,config.options.txtUserName,null,null);
store.setDirty(true);
var splashScreenInstall = true;
}
//}}}
<html><img src="http://farm2.static.flickr.com/1187/694678628_fa04f53eca_m_d.jpg" title="Image: Web 2.0 Libro by Andreas Milleiro: flickr.com/photos/andresmilleiro/" style="width: 240px; float: right; border: 1px solid #ccc; margin: 0 1ex 1ex 1ex; border: 1px solid #C99; padding: 4px;"></html>The most talked-about recent development on the Internet, and the World Wide Web in particular, has come to be known as Web 2.0 ([[O'Reilly, 2005|References]]), and is said to represent a new paradigm in the way that the Web is used, enabling greater interaction and simplicity for users to contribute to the creation of online content
Many aspects of this have been seen as offering particular benefits in the field of education, and have begun to be used across the curriculum at all levels of education – much as earlier incarnations of the Web, and other ICT innovations were also quickly taken up across the field of education.
Is Web 2.0 a development that address specific needs in learning technology, a gap in the previous generation of technology, or is it just a solution looking for a problem? This paper will examine key features of Web 2.0, in the context of some established educational applications of ICT, and consider if indeed there is anything new or beneficial to be gained, in education in general, and in e-learning in particular, through substantial engagement with Web 2.0.
<html><div class='viewer' macro='navigation tiddlers:{{store.getTiddlerText("PresentationIndex").readBracketedList()}}}'></div></html>
.subtitle {border-bottom: 1px solid #fdd; border-top: 1px solid #fdd;margin-bottom:2ex;}
#mainMenu ul { list-style: none; indent: 0; margin: 0; padding: 0; border-top: 1px solid #eee; }
#mainMenu ul li { border-bottom: 1px solid #eee; }
<<timeline better:true onlyTag:idel-assignment>>
One of the original achievements of the World Wide Web, during its phenomenal growth after 1993 (the year CERN put the WWW code in the public domain, and NCSA launched the Mosaic browser), was a democratisation of the global information infrastructure: distribution and publishing was no longer the exclusive realm of broadcasters and publishers. (Publishers and broadcasters were nonetheless quick to exploit the new platform.) In education, as in other fields, the Web lowered the cost of entry, both financial and technical, to a wealth of networked, hypertextual possibilities, previously available only through proprietary and platform-dependent software solutions (e.g. ~QuestionMark for quizzes and assessments, ~StorySpace for hypertexts).
Many study projects, in schools and universities, inspired and energised by this brave new world wide web, achieved impressive results, and the internet is full of examples. One will suffice as an example of this earlier wave of academic web applications: [[The Decameron Web|http://www.brown.edu/Departments/Italian_Studies/dweb/]] at Brown University's Italian Studies Department, a superb online resource for teachers and students of Italian Literature, designed as “an experiment in a new form of scholarly and pedagogical communication aimed at renewing a living dialogue between a distant past and our present” ([[Brown University, 2000|References]]).
Having begun as a ~StorySpace hypertext, a Web version was an inevitable development. Many individuals contributed essays and other work. It must have been a fascinating project to develop: it is a monument to scholarly collaboration. But is it really a “living dialogue”? Contributions clearly require moderation, not only by reviewers/editors, but also by specialists in HTML markup and website management – significant overheads – and a look at the editing and markup instructions suggests that there was a lot for contributors to learn.
There are some core features that undoubtedly require special programming – the semantic markup of parallel texts in English and Italian, for example, with specialised search tools for identifying and indexing place and character names. But the bulk of the content comprises essays, short and long, presented as a network of hyperlinked web pages.
Managing such a web site, with multiple contributors, using a “Web 1.0” approach, is a non-trivial task, technically and administratively – even with a Web Content Management System. The costs of continuing to manage the growth of this website, are not trivial either, considering the technical and editorial requirements, and the amount of instruction contributors require.
There are some interactive/collaborative features included:
* A [[Guest Book|http://www.brown.edu/Departments/Italian_Studies/dweb/subscribe/guestbook.shtml]] (actually a Feedback Form – I couldn't find a place where Guest Book comments were actually displayed, as is usual with Guest Books, not only online).
* “[[Listserv|http://listserv.brown.edu/archives/decameron.html]]” (a mailing list with web-based archive).
* An irregular [[web newsletter|http://www.brown.edu/Departments/Italian_Studies/dweb/newsletter/index.shtml]] (only two “issues” between 1997 and 2000).
All of these are standard “outreach” components among 1990s websites – tools that seemingly had the potential to create and bind an online community, but, in reality, frequently didn't. (Contemporary web projects I was involved with also had this experience; the overhead of keeping websites fresh and relevant is often overlooked.) Contributions are invited, but only indirectly. Notwithstanding the Guest Book, and invitations to contribute, the user of The Decameron Web who wants to do more than simply study the excellent online materials is likely to feel less than completely and instantly included. Can one contribute, in an interactive way? How might one actively engage with the site, other than by adding it to an ever-groaning list of web bookmarks, and trying to remember to check it regularly? Could a teacher or student of the subject, coming across this over the web in 1997 or 2007, easily – instantly, even – become part of the community engaged in this “living dialogue”? [[ [1]|Notes]]
I believe that, in 2007, this could be achieved in a much better way, using combinations of often free, yet powerful, web tools for creating wikis, blogs, and repositories of information and other resources. These applications not only simplify the process of creating different types of content, and reduce the cost of maintenance and management (thereby enhancing the project's life-expectancy), but are also able to establish and sustain a dynamic online community with comparably little effort.
//The Decameron Web at Brown University://
<html><iframe style="width: 100%; height: 100ex; font-size: 60%; border: 2px solid #300; padding: 4px;" src="http://www.brown.edu/Departments/Italian_Studies/dweb/" title="The Decameron Web at Brown University"/></html>
<html><div class='viewer' macro='navigation tiddlers:{{store.getTiddlerText("PresentationIndex").readBracketedList()}}}'></div></html>
/***
|''Name:''|UploadPlugin|
|''Description:''|Save to web a TiddlyWiki|
|''Version:''|3.4.5|
|''Date:''|Oct 15, 2006|
|''Source:''|http://tiddlywiki.bidix.info/#UploadPlugin|
|''Documentation:''|http://tiddlywiki.bidix.info/#UploadDoc|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D ]]|
|''~CoreVersion:''|2.0.0|
|''Browser:''|Firefox 1.5; InternetExplorer 6.0; Safari|
|''Include:''|config.lib.file; config.lib.log; config.lib.options; PasswordTweak|
|''Require:''|[[UploadService|http://tiddlywiki.bidix.info/#UploadService]]|
***/
//{{{
version.extensions.UploadPlugin = {
major: 3, minor: 4, revision: 5,
date: new Date(2006,9,15),
source: 'http://tiddlywiki.bidix.info/#UploadPlugin',
documentation: 'http://tiddlywiki.bidix.info/#UploadDoc',
author: 'BidiX (BidiX (at) bidix (dot) info',
license: '[[BSD open source license|http://tiddlywiki.bidix.info/#%5B%5BBSD%20open%20source%20license%5D%5D]]',
coreVersion: '2.0.0',
browser: 'Firefox 1.5; InternetExplorer 6.0; Safari'
};
//}}}
////+++!![config.lib.file]
//{{{
if (!config.lib) config.lib = {};
if (!config.lib.file) config.lib.file= {
author: 'BidiX',
version: {major: 0, minor: 1, revision: 0},
date: new Date(2006,3,9)
};
config.lib.file.dirname = function (filePath) {
var lastpos;
if ((lastpos = filePath.lastIndexOf("/")) != -1) {
return filePath.substring(0, lastpos);
} else {
return filePath.substring(0, filePath.lastIndexOf("\\"));
}
};
config.lib.file.basename = function (filePath) {
var lastpos;
if ((lastpos = filePath.lastIndexOf("#")) != -1)
filePath = filePath.substring(0, lastpos);
if ((lastpos = filePath.lastIndexOf("/")) != -1) {
return filePath.substring(lastpos + 1);
} else
return filePath.substring(filePath.lastIndexOf("\\")+1);
};
window.basename = function() {return "@@deprecated@@";};
//}}}
////===
////+++!![config.lib.log]
//{{{
if (!config.lib) config.lib = {};
if (!config.lib.log) config.lib.log= {
author: 'BidiX',
version: {major: 0, minor: 1, revision: 1},
date: new Date(2006,8,19)
};
config.lib.Log = function(tiddlerTitle, logHeader) {
if (version.major < 2)
this.tiddler = store.tiddlers[tiddlerTitle];
else
this.tiddler = store.getTiddler(tiddlerTitle);
if (!this.tiddler) {
this.tiddler = new Tiddler();
this.tiddler.title = tiddlerTitle;
this.tiddler.text = "| !date | !user | !location |" + logHeader;
this.tiddler.created = new Date();
this.tiddler.modifier = config.options.txtUserName;
this.tiddler.modified = new Date();
if (version.major < 2)
store.tiddlers[tiddlerTitle] = this.tiddler;
else
store.addTiddler(this.tiddler);
}
return this;
};
config.lib.Log.prototype.newLine = function (line) {
var now = new Date();
var newText = "| ";
newText += now.getDate()+"/"+(now.getMonth()+1)+"/"+now.getFullYear() + " ";
newText += now.getHours()+":"+now.getMinutes()+":"+now.getSeconds()+" | ";
newText += config.options.txtUserName + " | ";
var location = document.location.toString();
var filename = config.lib.file.basename(location);
if (!filename) filename = '/';
newText += "[["+filename+"|"+location + "]] |";
this.tiddler.text = this.tiddler.text + "\n" + newText;
this.addToLine(line);
};
config.lib.Log.prototype.addToLine = function (text) {
this.tiddler.text = this.tiddler.text + text;
this.tiddler.modifier = config.options.txtUserName;
this.tiddler.modified = new Date();
if (version.major < 2)
store.tiddlers[this.tiddler.tittle] = this.tiddler;
else {
store.addTiddler(this.tiddler);
story.refreshTiddler(this.tiddler.title);
store.notify(this.tiddler.title, true);
}
if (version.major < 2)
store.notifyAll();
};
//}}}
////===
////+++!![config.lib.options]
//{{{
if (!config.lib) config.lib = {};
if (!config.lib.options) config.lib.options = {
author: 'BidiX',
version: {major: 0, minor: 1, revision: 0},
date: new Date(2006,3,9)
};
config.lib.options.init = function (name, defaultValue) {
if (!config.options[name]) {
config.options[name] = defaultValue;
saveOptionCookie(name);
}
};
//}}}
////===
////+++!![PasswordTweak]
//{{{
version.extensions.PasswordTweak = {
major: 1, minor: 0, revision: 3, date: new Date(2006,8,30),
type: 'tweak',
source: 'http://tiddlywiki.bidix.info/#PasswordTweak'
};
//}}}
/***
!!config.macros.option
***/
//{{{
config.macros.option.passwordCheckboxLabel = "Save this password on this computer";
config.macros.option.passwordType = "password"; // password | text
config.macros.option.onChangeOption = function(e)
{
var opt = this.getAttribute("option");
var elementType,valueField;
if(opt) {
switch(opt.substr(0,3)) {
case "txt":
elementType = "input";
valueField = "value";
break;
case "pas":
elementType = "input";
valueField = "value";
break;
case "chk":
elementType = "input";
valueField = "checked";
break;
}
config.options[opt] = this[valueField];
saveOptionCookie(opt);
var nodes = document.getElementsByTagName(elementType);
for(var t=0; t<nodes.length; t++)
{
var optNode = nodes[t].getAttribute("option");
if (opt == optNode)
nodes[t][valueField] = this[valueField];
}
}
return(true);
};
config.macros.option.handler = function(place,macroName,params)
{
var opt = params[0];
if(config.options[opt] === undefined) {
return;}
var c;
switch(opt.substr(0,3)) {
case "txt":
c = document.createElement("input");
c.onkeyup = this.onChangeOption;
c.setAttribute ("option",opt);
c.className = "txtOptionInput "+opt;
place.appendChild(c);
c.value = config.options[opt];
break;
case "pas":
// input password
c = document.createElement ("input");
c.setAttribute("type",config.macros.option.passwordType);
c.onkeyup = this.onChangeOption;
c.setAttribute("option",opt);
c.className = "pasOptionInput "+opt;
place.appendChild(c);
c.value = config.options[opt];
// checkbox link with this password "save this password on this computer"
c = document.createElement("input");
c.setAttribute("type","checkbox");
c.onclick = this.onChangeOption;
c.setAttribute("option","chk"+opt);
c.className = "chkOptionInput "+opt;
place.appendChild(c);
c.checked = config.options["chk"+opt];
// text savePasswordCheckboxLabel
place.appendChild(document.createTextNode(config.macros.option.passwordCheckboxLabel));
break;
case "chk":
c = document.createElement("input");
c.setAttribute("type","checkbox");
c.onclick = this.onChangeOption;
c.setAttribute("option",opt);
c.className = "chkOptionInput "+opt;
place.appendChild(c);
c.checked = config.options[opt];
break;
}
};
//}}}
/***
!! Option cookie stuff
***/
//{{{
window.loadOptionsCookie_orig_PasswordTweak = window.loadOptionsCookie;
window.loadOptionsCookie = function()
{
var cookies = document.cookie.split(";");
for(var c=0; c<cookies.length; c++) {
var p = cookies[c].indexOf("=");
if(p != -1) {
var name = cookies[c].substr(0,p).trim();
var