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]];}

	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, #backstageArea {display: none ! important;}
#displayArea {margin: 1em 1em 0em 1em;}
/* Fixes a feature in Firefox 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>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
<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 id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></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

This tiddler was automatically created to record the details of this server
{{{<a href="" title="Link zu Google">Google</a>}}}

Das [[Attribut]] {{{href}}} dient dazu, den URI anzugeben, auf den verwiesen wird.

{{{title}}} hat als Wert eine für Menschen lesbare Bezeichnung oder Beschreibung eines Links. Browser stellen sie meist in einem kleinen gelben Feld dar, wenn man mit der Maus über ein Link fährt.

Als Wert eines weiteren Attributs {{{target}}} kann man auch angeben, in welchem Fenster sich das Link öffnen soll. Achtung: In der Regel sollte man den Benutzern überlassen, wo sie ein Link öffnen wollen. Beispiel:  

{{{<a href="" title="Link zu Google" target="_blank">Google</a>}}}
{{{<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml'/>}}}

Das Element {{{link}}} kommt gehört in den Kopf ({{{head}}}) eines HTML-Dokuments.

{{{re}}}l gibt an, von welcher Art die Beziehung ist, hier zum Beispiel eine Alternative mit einem anderen Medientyp (MIME-type).

{{{type}}} sagt, in welchem Format das Linkziel vorliegt, hier zum Beispiel als [[RSS]]-Feed.

Der {{{title}}} richtet sich an menschliche Leser.

{{{href}}} gibt wie beim Element {{{a}}} an, was das Ziel des Links ist. 

In diesem Beispiel sorgt das Link dafür, dass der Browser ein Icon für einen Newsfeed anzeigt. Klickt man auf dieses Icon, kann man den [[Newsfeed]] abonnieren, z.B. als [[Live Bookmark]] im [[Firefox]] oder mit dem [[Google Reader]]. 
[[Dave Raggett's Introduction to HTML|]] ist eine der bekanntesten kurzen Einführungen in html.
[[Über WebBasics]]
Digitaler Text ist Text, der für die Verarbeitung mit einem Computer gespeichert ist. Physikalisch liegt digitaler Text immer als eine Kette von Bytes vor. Eine [[Kodierung]] legt fest, wie diese Bytes den Zeichen eines Textes zugeordnet werden. 
Type the text for 'New Tiddler'
[[Learn to Program HTML in 21 Minutes|]] ist eines der besten kurzen englischen Tutorials für html, geschrieben von [[Philip Greenspun]].
[[Linkverzeichnis: Medienwissen aus dem Internet|]]

Ausführliches Linkverzeichnis von [[Christoph Neuberger]].
Mit der Firefox-Erweiterung [[Live HTTP Headers :: Firefox Add-ons|]] kann man sich die [[Header]]-Informationen, die vom Server zusammen mit einer Seite übermittelt werden, ansehen. Man muss dazu auf die rechte Maustaste klicken und den Menüpunkt "Seiteninformationen anzeigen" auswählen.
|''Name:''|LoadRemoteFileThroughProxy (previous LoadRemoteFileHijack)|
|''Description:''|When the TiddlyWiki file is located on the web (view over http) the content of [[SiteProxy]] tiddler is added in front of the file url. If [[SiteProxy]] does not exist "/proxy/" is added. |
|''Date:''|mar 17, 2007|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license| ]]|
version.extensions.LoadRemoteFileThroughProxy = {
 major: 1, minor: 1, revision: 0, 
 date: new Date("mar 17, 2007"), 
 source: ""};

if (!window.bidix) window.bidix = {}; // bidix namespace
if (!bidix.core) bidix.core = {};

bidix.core.loadRemoteFile = loadRemoteFile;
loadRemoteFile = function(url,callback,params)
 if ((document.location.toString().substr(0,4) == "http") && (url.substr(0,4) == "http")){ 
  url = store.getTiddlerText("SiteProxy", "/proxy/") + url;
 return bidix.core.loadRemoteFile(url,callback,params);
[[Über WebBasics]]
Type the text for 'New Tiddler'
Hier soll ein Zeitplan entstehen.
[[SELFHTML|]] Ist die umfangreichste und am sorgfältigsten überarbeitete Einführung in html. Sie ist für Anfänger wie für Fortgeschrittene geeignet.
<<slideShow noClicks forceRefresh>>

Warnung: Regeln und Überraschungen

Kommunikation muss Erwartungen erfüllen und durch Unerwartetes überraschen. 

Erwartungen zu erfüllen dient dabei dazu, Neues mitzuteilen. 

Regeln beschreiben, was erwartet werden kann. 

Was in einer Mitteilung neu ist, lässt sich nicht in Regeln fassen.

Textarten und Genres

Jeder Äußerung erfüllt bestimmte Erwartungen. 

Die Erwartungen an Äußerungen hängen mit sozialen Rollen, den technischen und materiellen Bedingungen der Kommunikation und Traditionen zusammen.
Diesen Erwartungen entsprechen Formen, Gattungen oder „Genres“.


Der technische Kontext

„Laut und deutlich sprechen“: Auch im Web  muss man dafür sorgen wahrgenommen werden zu können. 

Das Web ist technisch und sozial eine komplexe und störungsanfällige Umwelt.

Aufmerksamkeit für eine Nachricht und Interesse des Lesers hängen wesentlich von der Erfüllung technischer Bedingungen ab.


Dramaturgie: Texten für Interaktion

Das Web ist ein interaktives Medium. 

Leser haben andere Möglichkeiten zu reagieren als bei Kommunikation auf Papier. 

Am Anfang der Textkonzeption steht die Frage nach der beabsichtigen Interaktion. 

Texte ohne definierte Interaktion sind meist überflüssig. 


Information: Gute Texte beantworten Fragen

Erfolgreiches Schreiben ist Schreiben für einen Leser. 

Die Erwartungen des Lesers lassen sich am besten in Fragen zusammenfassen.

Die Themenfindung beginnt damit, diese Fragen explizit zu stellen.


Dem Leser Orientierung ermöglichen

Die ersten Fragen des Nutzers betreffen die Orientierung: 

Wo bin ich? 

Was kann ich tun? 

Wie tue ich es? 

Was mache ich als nächstes? 

Bei Bildschirmen ist es für den Leser schwieriger, einen Überblick zu behalten, als bei Zeitungen und Büchern. 
Navigationselemente sind entscheidend für die Metakommunikation.


Mittel der Orientierung




Links zur Navigation im Text

Unverwechselbarkeit von Sprache und Gestaltung


Multitasking erschwert das Lesen

Lesen wird durch andere Aufgaben behindert

Navigationselemente und Textinhalt sollen klar getrennt sein

Abgesetzte Teaser erleichtern die Orientierung

Ein-Satz-Zusammenfassungen und Zwischenüberschriften die Orientierung ermöflichen as Scannen langer Texte.


Auf das Datum achten

Das Web ist ein zeitliches Medium

Zeigen, wie aktuell ein Text ist

Feste Rhythmen bei regelmäßig aktualisierten Texten 

Subskriptionsmöglichkeiten und Newsfeeds.


Information nach Tiefe staffeln

Webtexte ermöglichen unterschiedliche Tiefen

Die vertiefte Information sollte die erste Orientierung nicht behindern.

Optimal ist eine typographische und stilistische Unterscheidung der Inhaltsebenen.


Guter Webinhalt ist Mikroinhalt

Freie Kombinierbarkeit von Inhalten

Der Benutzer kann Inhalte neu ordnen und kombinieren. 

Größere Informationseinheiten mit vielen Links sind unübersichtlich. 

Es ist sinnvoll, Webinhalte in kleinen Portionen („Microcontent“) zu strukturieren.

Blogs und Wikis sind Formen von Microcontent, ebenso FAQs, Beiträge in Foren oder Glossareinträge.


Mikroinhalt 2

Jeder neue Gedanke, jedes neue Faktum gehört in einen Absatz

Überschriften zum Bezeichnen des Inhalts

Angeben von Möglichkeiten weiterzulesen

Inhaltsverzeichnisse, zum Beispiel Listen von FAQs

Tabellen mit Überschriften

Microcontent kann „getaggt“ werden.


Richtiges Linken

Die Leser von einem Inhaltsbaustein zum nächsten klicken. 

Deshalb ist ein Text mit Links im Web attraktiver als ein Text ohne Links.

Links erfordern eine überlegte Dramaturgie, um den Lesefluss nicht zu stören.


Benutzerfreundliche Links

Kennzeichnen durch Farben und grafische Elemente

Linkziele (target) sollten wählbar sein

Das wichtigste Link zuerst

Verlinkte Wörter müssen eindeutig sein

Titel machen erkennbar, auf was ein Link verweist

Auch Bilder können Ausgangspunkt von Links sein

Verlinkung von ganzen Dokumenten (RSS)


Schreiben als Konversation

Das Web ist kein Einwegmedium. 

Many-to-many und one-to-one-Kommunikation sind im Web am wichtigsten. 

Der Sender ist deshalb immer auch Empfänger.

Die Umgebung muss die Konversation unterstützen.


Marketing-Slang ist Spam

Hype ist Selbstlob, das dem Empfänger suggeriert werden soll

Hype-Botschaften sind meist unterschwellige, nicht begründete Unterstellungen

Hype verrät sich sprachlich oft in leeren Adjektiven und überladenen, redundanten Formulierungen

Zum Hype gehört meist die Verbeugung vor verabsolutierten Personen, Werten und Institutionen

Der Leser hat keine Interaktionsmöglichkeiten - außer dem Wegklicken

Hype wird meist unpersönlich verfasst und gerne durch übertriebene persönliche Statements ergänt

Beste Alternative: Orientierung an nachvollziebaren Tatsachen

Wenn möglich: selbstironische, indirekte Kommunikation

Orientierung an konkreten Werten und Bedürfnissen 

Förderung der Glaubwürdigkeit

Unverwechselbarkeit der Sprache (Corporate Wording)

Nachvollziehbare, auf Fakten gestützte Argumentation,

Testimonials von Kunden oder Lesern


Medien verwenden

Text sollte durch andere Medien unterstützt werden

Welche Fragen werden durch ein Foto, eine Grafik, ein Video, ein Audio oder eine Slideshow am besten beantwortet?

Medien ziehen die Aufmerksamkeit der Leser auf sich. 

Wichtig: Spiel mit dem Unerwarteten



Interaktion: Was soll der Leser tun?

Information: Welche Fragen soll der Text beantworten?

Aufmerksamkeit: Warum fängt der Benutzer an zu lesen?

Glaubwürdigkeit: Warum soll der Benutzer glauben, was ich ihm sage?

[[Schreiben fürs Web - Kowiki|]]

Einführung in das Schreiben für das Web in dem von [[Christoph Neuberger]] mitbegründeten [[Kowiki]]
Einführung ins WWW für Journalist(inn)en und ~PR-Leute
<div id='displayArea'>
<div id='tiddlerDisplay'></div>
<div class='title' macro='view title'></div>
<div class='viewer' macro='view text wikified'></div>
config.macros.slideShow = {label: "slide show", maxTOCLength: 30};
config.macros.slideShow.messages = {gotoLabel: "Go to slide:"};
config.views.wikified.slideShow = {text: "slide show", tooltip: "Start slide show"};
config.views.wikified.slideShow.quit = {text: "end", tooltip: "Quit the slide show"};
config.views.wikified.slideShow.firstSlide = {text: "<<", tooltip: "first slide"};
config.views.wikified.slideShow.previousSlide = {text: "<", tooltip: "previous slide"};
config.views.wikified.slideShow.nextSlide = {text: ">", tooltip: "next slide"};
config.views.wikified.slideShow.lastSlide = {text: ">>", tooltip: "last slide"};
config.views.wikified.slideShow.resetClock = {text: " ", tooltip: "reset"};

config.formatters.push( {
	name: "SlideSeparator",
	match: "^-s-+$\\n?",
	handler: function(w) {

function changeStyleSheet(tiddlerName) {
	setStylesheet(store.getRecursiveTiddlerText(tiddlerName == null ? "StyleSheet" : tiddlerName,""),"StyleSheet");

//Excellent (and versatile) reparser created by Paul Petterson for parsing the paramString in a macro
function reparse( params ) {
	var re = /([^:\s]+)(?:\:((?:\d+)|(?:["'](?:[^"']+)["']))|\s|$)/g;
	var ret = new Array();
	var m;
	while( (m = re.exec( params )) != null ) ret[ m[1] ] = m[2]?m[2]:true;
	return ret;

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null ) node = document;
	if ( tag == null ) tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	var j=0;
	for (var i = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
	return classElements;

// 'keys' code adapted from S5 which in turn was adapted from MozPoint (
function keys(key) {
	if (document.getElementById('contentWrapper').className == "slideShowMode"){
		if (!key) {
			key = event;
			key.which = key.keyCode;
 		switch (key.which) {
			case 32: // spacebar
						autoAdvance = null;
					} else {
						autoAdvance=setInterval("GoToSlide(1)", time);
			case 34: // page down
			case 39: // rightkey
			case 40: // downkey
			case 33: // page up
			case 37: // leftkey
			case 38: // upkey
			case 36: // home
			case 35: // end
			case 27: // escape
	return false;

function clicker(e) {
	if (!e) var e = window.event;
	var target = resolveTarget(e);
	//Whenever something is clicked that won't advance the slide make sure that the table of contents gets hidden
	if (target.getAttribute('href') != null || isParentOrSelf(target, 'toc') || isParentOrSelf(target,'embed') || isParentOrSelf(target,'object') || isParentOrSelf(target, 'slideFooter') || isParentOrSelf(target, 'navigator')){
		 //Don't hide the TOC if the indexNumbers (which trigger the index) is clicked
		if(isParentOrSelf(target,'indexNumbers') || isParentOrSelf(target,'jumpInput')){
 			return true;
		return true;
	//Advance a slide if the TOC is visible otherwise make sure that the TOC gets hidden
	if ((!e.which && e.button == 1) || e.which == 1) {
		if (document.getElementById('toc').style.display != 'block'){
		} else {
	if ((!e.which && e.button == 2) || e.which == 3) {
		if (document.getElementById('toc').style.display != 'block'){
		} else {
		return false;

function isParentOrSelf(element, id) {
	if (element == null || element.nodeName=='BODY') return false;
	else if ( == id) return true;
	else return isParentOrSelf(element.parentNode, id);

function GoToSlide(step) {
	var new_pos;
	var slideHolder = document.getElementById('slideContainer');
	//The parse float ensures that the attribute is returned as a number and not a string.
	var cur_pos = parseFloat(slideHolder.getAttribute('currentslide'));
	var numberSlides = parseFloat(slideHolder.getAttribute('numberSlides'));
	switch (step) {
		case "f":
		case "l":
		case "n":
			var numberOverlays = parseFloat(slideHolder.childNodes[cur_pos].getAttribute('numberOverlays'));
			var currentOverlay = parseFloat(slideHolder.getAttribute('currentOverlay'));
			if(numberOverlays==0 || currentOverlay==numberOverlays){
				if(noClicks==false) new_pos=cur_pos+1;
			} else {
				var className="Overlay"+currentOverlay;
				var overlay=getElementsByClass(className,slideHolder.childNodes[cur_pos]);
				for(var i=0; i<overlay.length; i++) {overlay[i].className=className+' previousOverlay';}
				for(i=0; i<overlay.length; i++) {overlay[i].className=className+' currentOverlay';}
				return false;
		case "p":
			var numberOverlays = parseFloat(slideHolder.childNodes[cur_pos].getAttribute('numberOverlays'));
			var currentOverlay = parseFloat(slideHolder.getAttribute('currentOverlay'));
			if(numberOverlays==0 || currentOverlay==0){
				if(noClicks==false) new_pos=cur_pos-1;
			} else {
				var className="Overlay"+currentOverlay;
				var overlays=getElementsByClass(className,slideHolder.childNodes[cur_pos]);
				for(var i=0; i<overlays.length; i++) {overlays[i].className=className+' nextOverlay';}
				for(i=0; i<overlays.length; i++) {overlays[i].className=className+' currentOverlay';}
				return false;
	if(slideShowCircularMode && new_pos == numberSlides) new_pos=0;
	if(slideShowCircularMode && new_pos<0) new_pos=(numberSlides - 1);
	if(step!=0 && new_pos>=0 && new_pos<numberSlides) {
		var numberOverlays = parseFloat(slideHolder.childNodes[new_pos].getAttribute('numberOverlays'));
			var currentOverlay=numberOverlays;
			var state=' previousOverlay';
		} else {
			var currentOverlay=0;
			var state=' nextOverlay';
		if(numberOverlays>0) {
			for(var i=1; i<=numberOverlays; i++){
				var className="Overlay"+i;
				var overlays=getElementsByClass(className,slideHolder.childNodes[new_pos]);
				for(var j=0; j<overlays.length; j++) {overlays[j].className=className+state;}
				var className="Overlay"+numberOverlays;
				var overlays=getElementsByClass(className,slideHolder.childNodes[new_pos]);
				for(var j=0; j<overlays.length; j++) {overlays[j].className=className+' currentOverlay';}
		var indexNumbers = document.getElementById('indexNumbers'); = new_pos+'/'+numberSlides;
		if((new_pos==numberSlides) && !slideShowCircularMode && autoAdvance) clearInterval(autoAdvance);
		return true;
	return false;

function tocShowSlide(e) {
	if (!e) var e = window.event;
	var target = resolveTarget(e);
	var slide = target.getAttribute('slideNumber');
	var cur_pos = document.getElementById('slideContainer').getAttribute('currentslide');
	var step = slide-cur_pos;
	if(step!=0) GoToSlide(step);

//Toggle the display of the table of contents
function showHideTOC(display){
	var toc = document.getElementById('toc');
	//Reset the input box
	document.getElementById('jumpInput').value = "";
	if (display == null || display.length == null){
		if ( == 'none' || == ''){ = 'block';
		} else { = 'none';
	} else { = display;
		if (display == 'block')

function padZero(x){return (x>=10 || x<0 ? "" : "0")+x;}

function setClock(){
	var actualTime = new Date();
	var newTime = actualTime.getTime() - clockStartTime;
	newTime = clockMultiplier*newTime+clockInterval+clockCorrection;
	newTime = padZero(actualTime.getHours()) + ":" + padZero(actualTime.getMinutes())+ ":" + padZero(actualTime.getSeconds());
	var clock = document.getElementById('slideClock');
	clock.firstChild.nodeValue = newTime;

function resetClock(){
	var time = new Date(0);
		var startTime = new Date();

var title;
var place;
var autoAdvance=null;
var slideClock=null;
var noOverlays=false;
var noClicks=false;
var forceRefresh=false;
var time = 0;
var slideShowCircularMode;
var slideShowStyleSheet;
var slideShowParams;
var clockMultiplier;
var clockInterval;
var clockCorrection=0;
var clockStartTime;
var openTiddlers;

config.macros.slideShow.handler = function(aPlace,macroName,params,wikifier,paramString,tiddler){
	if(tiddler instanceof Tiddler){
		var lingo = config.views.wikified.slideShow;
		if (!e) var e = window.event;
 		place = aPlace;
		title = tiddler.title;
		params = reparse(paramString);
		var onclick = function(){config.macros.slideShow.onClickSlideShow(params);};

config.macros.slideShow.onClickSlideShow = function(newParams) {
//	if(typeof(newParams)=="number") newParams=slideShowParams;
	openTiddlers = new Array;
	var viewer=document.getElementById('tiddlerDisplay');
	for(var i=0; i<viewer.childNodes.length; i++){
		var name = viewer.childNodes[i].getAttribute('tiddler');
	document.oncontextmenu = function(e){return false;}
	clockMultiplier = 1;
	clockInterval = 0;
	var startTime = new Date(0);
	slideShowCircularMode = false;
	time = 0;
	slideShowStyleSheet = null;
		slideShowStyleSheet = eval(newParams['style']);
		slideShowCircularMode = true;
		noClicks = true;
		forceRefresh = true;
	if(newParams['slidePause'] > 0){
		time = newParams['slidePause'];
		startTime = new Date();
		var clockType= eval(newParams['clock']);
		if(clockType != '+') {
			clockMultiplier = -1;
			clockInterval = -clockType*60000;
		noOverlays = true;
	//Attach the key and mouse listeners
	document.onkeyup = keys;
	document.onmouseup = clicker;
	slideClock=setInterval("setClock()", 1000); 
	if(time>0) autoAdvance=setInterval("GoToSlide(1)", time); 

	var showHolder = document.getElementById('slideShowWrapper');
	document.oncontextmenu =  function(e){};
	if(autoAdvance) clearInterval(autoAdvance);
	if(slideClock) clearInterval(slideClock);
	document.onmouseup = function(){};

function isInteger(s){
	var i;
	for (i = 0; i < s.length; i++){
		// Check that current character is number.
		var c = s.charAt(i);
		if (((c < "0") || (c > "9"))) return false;
	// All characters are numbers.
	return true;

function jumpInputToSlide(e){
	if (!e) {
		e = window.event;
		e.which = e.keyCode;
		var jumpInput= document.getElementById("jumpInput").value;
			var step=jumpInput-document.getElementById('slideContainer').getAttribute('currentslide')-1;
			if (GoToSlide(step)){

//Used to shorten the TOC fields
function abbreviateLabel(label){
	var maxTOCLength = config.macros.slideShow.maxTOCLength;
	if(label.length>maxTOCLength) {
		var temp = new Array();
		temp = label.split(' ');
		label = temp[0];
		for(var j=1; j<temp.length; j++){
				label += " " + temp[j];
			} else {
				label += " ...";
	return label;

function createSlides(newParams){
	var lingo = config.views.wikified.slideShow;
	//Remove dblClick on edit function
	var theTiddler = document.getElementById("tiddler"+title);
	theTiddler.ondblclick = function() {};
	// Grab the 'viewer' element and give it a signature so the show can be resumed if stopped
	var tiddlerElements = theTiddler.childNodes;
	var viewer;
	for (var i = 0; i < tiddlerElements.length; i++){
		if (tiddlerElements[i].className == "viewer") viewer = tiddlerElements[i];
	} = 'slideShowWrapper';
	//Hide the text that comes before the first H1 element (I think I may put this into a cover page type thing)
	while(viewer.childNodes.length > 0 && viewer.firstChild.nodeName.toUpperCase() != "HR" && viewer.firstChild.className!="slideSeparator") {
	//Cycle through the content and each time you hit an H1 begin a new slide div
	var slideNumber = 0;
	var slideHolder = document.createElement('DIV'); = "slideContainer";
	while(viewer.childNodes.length > 0){
		//Create a new slide a append it to the slide holder
		if (viewer.firstChild.nodeName.toUpperCase() == "HR" && viewer.firstChild.className=="slideSeparator"){
			var slide = document.createElement('DIV'); = "slideNumber"+slideNumber;
			slide.className = "slide";
			if (slideNumber > 1) {
			} else {'block';
		} else {
			if(viewer.firstChild.nodeName=="SPAN" && viewer.firstChild.className=="" && viewer.firstChild.hasChildNodes()) {
				var anchor=viewer.firstChild.nextSibling;
				for (var ii=0;ii<viewer.firstChild.childNodes.length;ii++) {
					var clone=viewer.firstChild.childNodes[ii].cloneNode(true);
			} else {
	//Stick the slides back into the viewer
	//Create the navigation bar
	var slidefooter = createTiddlyElement(viewer,"DIV","slideFooter","slideFooterOff");
	var navigator = createTiddlyElement(slidefooter,"SPAN","navigator");
	//Make it so that when the footer is hovered over the class will change to make it visible
	slidefooter.onmouseover = function () {slidefooter.className = "slideFooterOn"};
	slidefooter.onmouseout = function () {slidefooter.className = "slideFooterOff"};
	//Create the control button for the navigation 
	var onClickQuit = function(){config.macros.slideShow.endSlideShow();};
	var indexNumbers = createTiddlyElement(slidefooter,"SPAN","indexNumbers","indexNumbers","1/"+slideNumber)
	indexNumbers.onclick = showHideTOC;
	var toc = createTiddlyElement(slidefooter,"UL","toc");
	var ovl=1;
	for (var i=0;i<slideHolder.childNodes.length;i++) {
		if(!noOverlays) {
			var ovl=1;
				var className="Overlay"+ovl;
				var overlays=getElementsByClass(className,slideHolder.childNodes[i]);
					for(var j=0; j<overlays.length; j++) {overlays[j].className+=' nextOverlay';}
				} else {break;}
		//Loop through each slide and check the header's content
		var tocLabel = null; 
		for (var j=0;j<slideHolder.childNodes[i].childNodes.length;j++) {
			var node = slideHolder.childNodes[i].childNodes[j];
			if(node.nodeName=="H1" || node.nodeName=="H2" || node.nodeName=="H3" || node.nodeName=="H4") {
				var htstring = node.innerHTML;
				var stripped = htstring.replace(/(<([^>]+)>)/ig,"");
				tocLabel = abbreviateLabel(stripped);
				var tocLevel="tocLevel"+node.nodeName.charAt(1);
				var tocItem = createTiddlyElement(toc,"LI",null,tocLevel);
				var tocLink = createTiddlyElement(tocItem,"A",null,"tocItem",tocLabel);
	//Input box to jump to s specific slide
	var tocItem = createTiddlyElement(toc,"LI",null,"tocJumpItem",config.macros.slideShow.messages.gotoLabel);
	var tocJumpInput = createTiddlyElement(tocItem,"INPUT","jumpInput");

var next_slide= function(e){GoToSlide(1);}
var first_slide= function(e){GoToSlide("f");}
var previous_slide= function(e){GoToSlide(-1);}
var last_slide= function(e){GoToSlide("l");}

function toggleSlideStyles(){
	var contentWrapper = document.getElementById('contentWrapper');
	if (contentWrapper.className == "slideShowMode"){
		contentWrapper.className = "";
		setStylesheet("#backstageShow{display: block;}","SlideShowStyleSheet");
	} else{
		contentWrapper.className = "slideShowMode";
		if(slideShowStyleSheet) changeStyleSheet(slideShowStyleSheet);

config.shadowTiddlers.SlideShowPageTemplate="<!--{{{-->\n<div id='displayArea'>\n<div id='tiddlerDisplay'></div>\n</div>\n<!--}}}-->";

config.shadowTiddlers.SlideShowViewTemplate="<!--{{{-->\n<div class='title' macro='view title'></div>\n<div class='viewer' macro='view text wikified'></div>\n<!--}}}-->";

config.shadowTiddlers.SlideShowStyleSheet = "/***\n!Slide Mode Styles\n***/\n/*{{{*/\n#backstageShow{\n display: none !important;\n}\n\n#contentWrapper.slideShowMode #slideContainer{\n display: block;\n}\n\n#contentWrapper.slideShowMode .Comment{\n display: none;\n}\n\n#contentWrapper.slideShowMode .nextOverlay{\n visibility: hidden;\n}\n\n#contentWrapper.slideShowMode .currentOverlay{\n visibility: visible;\n}\n\n#contentWrapper.slideShowMode .previousOverlay{\n visibility: visible;\n}\n\n#jump{\n text-align: right;\n}\n\n.slideFooterOff #navigator{\n visibility: hidden;\n}\n\n.slideFooterOn #navigator{\n visibility: visible;\n}\n\n#contentWrapper.slideShowMode #slideClock{\n cursor: pointer; margin: 0 5px 0 5px; border: 1px solid #db4\n}\n\n#contentWrapper.slideShowMode,\n #contentWrapper.slideShowMode #displayArea{\n width: 100%;\n font-size: 1.5em;\n margin: 0 !important;\n padding: 0;\n}\n\n#slideContainer{\n display: none;\n}\n\n.indexNumbers{\n cursor: pointer;\n}\n\n#navigator{\n visibility: hidden;\n bottom: 0;\n}\n\n#toc{\n display: none;\n position: absolute;\n font-size: .75em;\n bottom: 2em;\n right: 0;\n background: #fff;\n border: 1px solid #000;\n text-align: left;\n}\n\nul#toc, #toc li{\n margin: 0;\n padding: 0;\n list-style: none;\n line-height: 1em;\n}\n\n.tocJumpItem{\n margin-right: 2em;\n}\n\n.tocJumpItem input{\nmargin-right: 1em;\n border: 0;\n}\n\n#toc a,\n#toc a.button{\n display: block;\n padding: .1em;\n}\n\n#toc .tocLevel1{\nfont-size: .8em;\n}\n\n#toc .tocLevel2{\n margin-left: 1em;\n font-size: .75em;\n}\n\n#toc .tocLevel3{\n margin-left: 2em;\nfont-size: .75em;\n}\n\n#toc .tocLevel4{\n margin-left: 3em;\nfont-size: .65em;\n}\n\n#toc a{\n cursor: pointer;\n}\n\nh1{\n min-height: 1em;\n}\n\n.slide h1{\n min-height: 0;\n}\n\n/* The '>' selector is ignored by IE6 and earlier so the proper rules are given */\n#slideFooter{\n position: fixed;\n bottom: 2px;\n right: 2px;\n width: 100%;\n text-align: right;\n}\n\n/* This is a hack to trick IE6 and earlier to put the navbar on the bottom of the page */\n* html #slideFooter {\n position: absolute;\n width: 100%;\n text-align: right;\n right: auto; bottom: auto;\n left: expression( ( -20 - slideFooter.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );\n top: expression( ( -10 - slideFooter.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );\n}\n\n\n\n/*}}}*/";

config.shadowTiddlers.SlideShowPluginDoc="The documentation is missing. It is available [[here|]].";
[[Teste dein Webdesign in verschiedenen Browsern - Browsershots|]]

fertigt Screenshots davon an, wie eine Seite in allen möglichen Browsern und Betriebssystemen aussieht, sehr nützlich zur Kontrolle von Layouts.
[[TiddlySnip|]] ist eine Firefox-Erweiterung, mit der man über die rechte Maustaste eine Seite in einem TiddlyWiki als Lesezeichen speichern und kommentieren kann. Das TiddlyWiki kann sich auch auf einem Server befinden.
[[TiddlySnip - User Guides|]]
Liste mit Werkzeugen


Contains the stuff you need to use Tiddlyspot
Note you must also have UploadPlugin installed

// edit this if you are migrating sites or retrofitting an existing TW
config.tiddlyspotSiteId = 'webbasics';

// make it so you can by default see edit controls via http
config.options.chkHttpReadOnly = false;
window.readOnly = false; // make sure of it (for tw 2.2)

// disable autosave in d3
if (window.location.protocol != "file:")
	config.options.chkGTDLazyAutoSave = false;

// tweak shadow tiddlers to add upload button, password entry box etc
with (config.shadowTiddlers) {
	SiteUrl = 'http://'+config.tiddlyspotSiteId+'';
	SideBarOptions = SideBarOptions.replace(/(<<saveChanges>>)/,"$1<<tiddler TspotSidebar>>");
	OptionsPanel = OptionsPanel.replace(/^/,"<<tiddler TspotOptions>>");
	DefaultTiddlers = DefaultTiddlers.replace(/^/,"WelcomeToTiddlyspot]] ");
	MainMenu = MainMenu.replace(/^/,"[[WelcomeToTiddlyspot]] ");

// create some shadow tiddler content

 "This document is a ~TiddlyWiki from  A ~TiddlyWiki is an electronic notebook that is great for managing todo lists, personal information, and all sorts of things.",
 "@@font-weight:bold;font-size:1.3em;color:#444; //What now?// &nbsp;&nbsp;@@ Before you can save any changes, you need to enter your password in the form below.  Then configure privacy and other site settings at your [[control panel|http://" + config.tiddlyspotSiteId + "]] (your control panel username is //" + config.tiddlyspotSiteId + "//).",
 "<<tiddler TspotControls>>",
 "See also GettingStarted.",
 "@@font-weight:bold;font-size:1.3em;color:#444; //Working online// &nbsp;&nbsp;@@ You can edit this ~TiddlyWiki right now, and save your changes using the \"save to web\" button in the column on the right.",
 "@@font-weight:bold;font-size:1.3em;color:#444; //Working offline// &nbsp;&nbsp;@@ A fully functioning copy of this ~TiddlyWiki can be saved onto your hard drive or USB stick.  You can make changes and save them locally without being connected to the Internet.  When you're ready to sync up again, just click \"upload\" and your ~TiddlyWiki will be saved back to",
 "@@font-weight:bold;font-size:1.3em;color:#444; //Help!// &nbsp;&nbsp;@@ Find out more about ~TiddlyWiki at [[|]].  Also visit [[TiddlyWiki Guides|]] for documentation on learning and using ~TiddlyWiki. New users are especially welcome on the [[TiddlyWiki mailing list|]], which is an excellent place to ask questions and get help.  If you have a tiddlyspot related problem email [[tiddlyspot support|]].",
 "@@font-weight:bold;font-size:1.3em;color:#444; //Enjoy :)// &nbsp;&nbsp;@@ We hope you like using your site.  Please email [[|]] with any comments or suggestions."

 "| tiddlyspot password:|<<option pasUploadPassword>>|",
 "| site management:|<<upload http://" + config.tiddlyspotSiteId + " index.html . .  " + config.tiddlyspotSiteId + ">>//(requires tiddlyspot password)//<<br>>[[control panel|http://" + config.tiddlyspotSiteId + "]], [[download (go offline)|http://" + config.tiddlyspotSiteId + "]]|",
 "| links:|[[|]], [[FAQs|]], [[announcements|]], [[blog|]], email [[support|]] & [[feedback|]], [[donate|]]|"

 "<<upload http://" + config.tiddlyspotSiteId + " index.html . .  " + config.tiddlyspotSiteId + ">><html><a href='http://" + config.tiddlyspotSiteId + "' class='button'>download</a></html>"

 "tiddlyspot password:",
 "<<option pasUploadPassword>>",

| !date | !user | !location | !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |
| 30/11/2007 17:32:16 | KaRa | [[/|]] | [[store.cgi|]] | . | [[index.html |]] | . |
| 02/12/2007 14:27:55 | YourName | [[/|]] | [[store.cgi|]] | . | [[index.html |]] | . |
| 02/12/2007 14:29:45 | YourName | [[/|]] | [[store.cgi|]] | . | [[index.html |]] | . |
| 02/12/2007 14:46:38 | YourName | [[/|]] | [[store.cgi|]] | . | [[index.html |]] | . |
| 06/12/2007 07:33:37 | YourName | [[/|]] | [[store.cgi|]] | . | [[index.html |]] | . |
| 11/12/2007 08:21:17 | YourName | [[/|]] | [[store.cgi|]] | . | [[index.html |]] | . | ok |
| 11/12/2007 08:28:48 | HeinzW | [[/|]] | [[store.cgi|]] | . | [[index.html |]] | . | ok |
| 11/12/2007 08:33:45 | HeinzW | [[/|]] | [[store.cgi|]] | . | [[index.html |]] | . |
| 11/12/2007 08:36:56 | HeinzW | [[/|]] | [[store.cgi|]] | . | [[index.html |]] | . | ok |
| 11/12/2007 08:42:00 | HeinzW | [[/|]] | [[store.cgi|]] | . | [[index.html |]] | . |
|''Description:''|Extends TiddlyWiki options with non encrypted password option.|
|''Date:''|Apr 19, 2007|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license| ]]|
|''~CoreVersion:''|2.2.0 (Beta 5)|
version.extensions.PasswordOptionPlugin = {
	major: 1, minor: 0, revision: 2, 
	date: new Date("Apr 19, 2007"),
	source: '',
	author: 'BidiX (BidiX (at) bidix (dot) info',
	license: '[[BSD open source license|]]',
	coreVersion: '2.2.0 (Beta 5)'

config.macros.option.passwordCheckboxLabel = "Save this password on this computer";
config.macros.option.passwordInputType = "password"; // password | text
setStylesheet(".pasOptionInput {width: 11em;}\n","passwordInputTypeStyle");

merge(config.macros.option.types, {
	'pas': {
		elementType: "input",
		valueField: "value",
		eventName: "onkeyup",
		className: "pasOptionInput",
		typeValue: config.macros.option.passwordInputType,
		create: function(place,type,opt,className,desc) {
			// password field
			// checkbox linked with this password "save this password on this computer"
			// text savePasswordCheckboxLabel
		onChange: config.macros.option.genericOnChange

merge(config.optionHandlers['chk'], {
	get: function(name) {
		// is there an option linked with this chk ?
		var opt = name.substr(3);
		if (config.options[opt]) 
		return config.options[name] ? "true" : "false";

merge(config.optionHandlers, {
	'pas': {
 		get: function(name) {
			if (config.options["chk"+name]) {
				return encodeCookie(config.options[name].toString());
			} else {
				return "";
		set: function(name,value) {config.options[name] = decodeCookie(value);}

// need to reload options to load passwordOptions

if (!config.options['pasPassword'])
	config.options['pasPassword'] = '';

		pasPassword: "Test password"

|''Description:''|Save to web a TiddlyWiki|
|''Date:''|May 5, 2007|
|''Author:''|BidiX (BidiX (at) bidix (dot) info)|
|''License:''|[[BSD open source license| ]]|
|''~CoreVersion:''|2.2.0 (#3125)|
version.extensions.UploadPlugin = {
	major: 4, minor: 1, revision: 0,
	date: new Date("May 5, 2007"),
	source: '',
	author: 'BidiX (BidiX (at) bidix (dot) info',
	coreVersion: '2.2.0 (#3125)'

// Environment

if (!window.bidix) window.bidix = {}; // bidix namespace
bidix.debugMode = false;	// true to activate both in Plugin and UploadService
// Upload Macro

config.macros.upload = {
// default values
	defaultBackupDir: '',	//no backup
	defaultStoreScript: "store.php",
	defaultToFilename: "index.html",
	defaultUploadDir: ".",
	authenticateUser: true	// UploadService Authenticate User
config.macros.upload.label = {
	promptOption: "Save and Upload this TiddlyWiki with UploadOptions",
	promptParamMacro: "Save and Upload this TiddlyWiki in %0",
	saveLabel: "save to web", 
	saveToDisk: "save to disk",
	uploadLabel: "upload"	

config.macros.upload.messages = {
	noStoreUrl: "No store URL in parmeters or options",
	usernameOrPasswordMissing: "Username or password missing"

config.macros.upload.handler = function(place,macroName,params) {
	if (readOnly)
	var label;
	if (document.location.toString().substr(0,4) == "http") 
		label = this.label.saveLabel;
		label = this.label.uploadLabel;
	var prompt;
	if (params[0]) {
		prompt = this.label.promptParamMacro.toString().format([this.destFile(params[0], 
			(params[1] ? params[1]:bidix.basename(window.location.toString())), params[3])]);
	} else {
		prompt = this.label.promptOption;
	createTiddlyButton(place, label, prompt, function() {config.macros.upload.action(params);}, null, null, this.accessKey);

config.macros.upload.action = function(params)
		// for missing macro parameter set value from options
		var storeUrl = params[0] ? params[0] : config.options.txtUploadStoreUrl;
		var toFilename = params[1] ? params[1] : config.options.txtUploadFilename;
		var backupDir = params[2] ? params[2] : config.options.txtUploadBackupDir;
		var uploadDir = params[3] ? params[3] : config.options.txtUploadDir;
		var username = params[4] ? params[4] : config.options.txtUploadUserName;
		var password = config.options.pasUploadPassword; // for security reason no password as macro parameter	
		// for still missing parameter set default value
		if ((!storeUrl) && (document.location.toString().substr(0,4) == "http")) 
			storeUrl = bidix.dirname(document.location.toString())+'/'+config.macros.upload.defaultStoreScript;
		if (storeUrl.substr(0,4) != "http")
			storeUrl = bidix.dirname(document.location.toString()) +'/'+ storeUrl;
		if (!toFilename)
			toFilename = bidix.basename(window.location.toString());
		if (!toFilename)
			toFilename = config.macros.upload.defaultToFilename;
		if (!uploadDir)
			uploadDir = config.macros.upload.defaultUploadDir;
		if (!backupDir)
			backupDir = config.macros.upload.defaultBackupDir;
		// report error if still missing
		if (!storeUrl) {
			return false;
		if (config.macros.upload.authenticateUser && (!username || !password)) {
			return false;
		bidix.upload.uploadChanges(false,null,storeUrl, toFilename, uploadDir, backupDir, username, password); 
		return false; 

config.macros.upload.destFile = function(storeUrl, toFilename, uploadDir) 
	if (!storeUrl)
		return null;
		var dest = bidix.dirname(storeUrl);
		if (uploadDir && uploadDir != '.')
			dest = dest + '/' + uploadDir;
		dest = dest + '/' + toFilename;
	return dest;

// uploadOptions Macro

config.macros.uploadOptions = {
	handler: function(place,macroName,params) {
		var wizard = new Wizard();
		var markList = wizard.getElement("markList");
		var listWrapper = document.createElement("div");
		var uploadCaption;
		if (document.location.toString().substr(0,4) == "http") 
			uploadCaption = config.macros.upload.label.saveLabel;
			uploadCaption = config.macros.upload.label.uploadLabel;
				{caption: uploadCaption, tooltip: config.macros.upload.label.promptOption, 
					onClick: config.macros.upload.action},
				{caption: this.cancelButton, tooltip: this.cancelButtonPrompt, onClick: this.onCancel}
	refreshOptions: function(listWrapper) {
		var uploadOpts = [
		var opts = [];
		for(i=0; i<uploadOpts.length; i++) {
			var opt = {};
			opt.option = "";
			n = uploadOpts[i]; = n;
			opt.lowlight = !config.optionsDesc[n];
			opt.description = opt.lowlight ? this.unknownDescription : config.optionsDesc[n];
		var listview = ListView.create(listWrapper,opts,this.listViewTemplate);
		for(n=0; n<opts.length; n++) {
			var type = opts[n].name.substr(0,3);
			var h = config.macros.option.types[type];
			if (h && h.create) {
	onCancel: function(e)
		return false;
	wizardTitle: "Upload with options",
	step1Title: "These options are saved in cookies in your browser",
	step1Html: "<input type='hidden' name='markList'></input><br>",
	cancelButton: "Cancel",
	cancelButtonPrompt: "Cancel prompt",
	listViewTemplate: {
		columns: [
			{name: 'Description', field: 'description', title: "Description", type: 'WikiText'},
			{name: 'Option', field: 'option', title: "Option", type: 'String'},
			{name: 'Name', field: 'name', title: "Name", type: 'String'}
		rowClasses: [
			{className: 'lowlight', field: 'lowlight'} 

// upload functions

if (!bidix.upload) bidix.upload = {};

if (!bidix.upload.messages) bidix.upload.messages = {
	//from saving
	invalidFileError: "The original file '%0' does not appear to be a valid TiddlyWiki",
	backupSaved: "Backup saved",
	backupFailed: "Failed to upload backup file",
	rssSaved: "RSS feed uploaded",
	rssFailed: "Failed to upload RSS feed file",
	emptySaved: "Empty template uploaded",
	emptyFailed: "Failed to upload empty template file",
	mainSaved: "Main TiddlyWiki file uploaded",
	mainFailed: "Failed to upload main TiddlyWiki file. Your changes have not been saved",
	//specific upload
	loadOriginalHttpPostError: "Can't get original file",
	aboutToSaveOnHttpPost: 'About to upload on %0 ...',
	storePhpNotFound: "The store script '%0' was not found."

bidix.upload.uploadChanges = function(onlyIfDirty,tiddlers,storeUrl,toFilename,uploadDir,backupDir,username,password)
	var callback = function(status,uploadParams,original,url,xhr) {
		if (!status) {
		if (bidix.debugMode) 
		// Locate the storeArea div's 
		var posDiv = locateStoreArea(original);
		if((posDiv[0] == -1) || (posDiv[1] == -1)) {
	if(onlyIfDirty && !store.isDirty())
	// save on localdisk ?
	if (document.location.toString().substr(0,4) == "file") {
		var path = document.location.toString();
		var localPath = getLocalPath(path);
	// get original
	var uploadParams = Array(storeUrl,toFilename,uploadDir,backupDir,username,password);
	var originalPath = document.location.toString();
	// If url is a directory : add index.html
	if (originalPath.charAt(originalPath.length-1) == "/")
		originalPath = originalPath + "index.html";
	var dest = config.macros.upload.destFile(storeUrl,toFilename,uploadDir);
	var log = new bidix.UploadLog();
	log.startUpload(storeUrl, dest, uploadDir,  backupDir);
	if (bidix.debugMode) 
		alert("about to execute Http - GET on "+originalPath);
	var r = doHttp("GET",originalPath,null,null,null,null,callback,uploadParams,null);
	if (typeof r == "string")
	return r;

bidix.upload.uploadRss = function(uploadParams,original,posDiv) 
	var callback = function(status,params,responseText,url,xhr) {
		if(status) {
			var destfile = responseText.substring(responseText.indexOf("destfile:")+9,responseText.indexOf("\n", responseText.indexOf("destfile:")));
		} else {
	// do uploadRss
	if(config.options.chkGenerateAnRssFeed) {
		var rssPath = uploadParams[1].substr(0,uploadParams[1].lastIndexOf(".")) + ".xml";
		var rssUploadParams = Array(uploadParams[0],rssPath,uploadParams[2],'',uploadParams[4],uploadParams[5]);
	} else {

bidix.upload.uploadMain = function(uploadParams,original,posDiv) 
	var callback = function(status,params,responseText,url,xhr) {
		var log = new bidix.UploadLog();
		if(status) {
			// if backupDir specified
			if ((params[3]) && (responseText.indexOf("backupfile:") > -1))  {
				var backupfile = responseText.substring(responseText.indexOf("backupfile:")+11,responseText.indexOf("\n", responseText.indexOf("backupfile:")));
			var destfile = responseText.substring(responseText.indexOf("destfile:")+9,responseText.indexOf("\n", responseText.indexOf("destfile:")));
		} else {
	// do uploadMain
	var revised = bidix.upload.updateOriginal(original,posDiv);

bidix.upload.httpUpload = function(uploadParams,data,callback,params)
	var localCallback = function(status,params,responseText,url,xhr) {
		url = (url.indexOf("nocache=") < 0 ? url : url.substring(0,url.indexOf("nocache=")-1));
		if (xhr.status == httpStatus.NotFound)
		if ((bidix.debugMode) || (responseText.indexOf("Debug mode") >= 0 )) {
			if (responseText.indexOf("Debug mode") >= 0 )
				responseText = responseText.substring(responseText.indexOf("\n\n")+2);
		} else if (responseText.charAt(0) != '0') 
		if (responseText.charAt(0) != '0')
			status = null;
	// do httpUpload
	var boundary = "---------------------------"+"AaB03x";	
	var uploadFormName = "UploadPlugin";
	// compose headers data
	var sheader = "";
	sheader += "--" + boundary + "\r\nContent-disposition: form-data; name=\"";
	sheader += uploadFormName +"\"\r\n\r\n";
	sheader += "backupDir="+uploadParams[3] +
				";user=" + uploadParams[4] +
				";password=" + uploadParams[5] +
				";uploaddir=" + uploadParams[2];
	if (bidix.debugMode)
		sheader += ";debug=1";
	sheader += ";;\r\n"; 
	sheader += "\r\n" + "--" + boundary + "\r\n";
	sheader += "Content-disposition: form-data; name=\"userfile\"; filename=\""+uploadParams[1]+"\"\r\n";
	sheader += "Content-Type: text/html;charset=UTF-8" + "\r\n";
	sheader += "Content-Length: " + data.length + "\r\n\r\n";
	// compose trailer data
	var strailer = new String();
	strailer = "\r\n--" + boundary + "--\r\n";
	data = sheader + data + strailer;
	if (bidix.debugMode) alert("about to execute Http - POST on "+uploadParams[0]+"\n with \n"+data.substr(0,500)+ " ... ");
	var r = doHttp("POST",uploadParams[0],data,"multipart/form-data; boundary="+boundary,uploadParams[4],uploadParams[5],localCallback,params,null);
	if (typeof r == "string")
	return r;

// same as Saving's updateOriginal but without convertUnicodeToUTF8 calls
bidix.upload.updateOriginal = function(original, posDiv)
	if (!posDiv)
		posDiv = locateStoreArea(original);
	if((posDiv[0] == -1) || (posDiv[1] == -1)) {
	var revised = original.substr(0,posDiv[0] + startSaveArea.length) + "\n" +
				store.allTiddlersAsHtml() + "\n" +
	var newSiteTitle = getPageTitle().htmlEncode();
	revised = revised.replaceChunk("<title"+">","</title"+">"," " + newSiteTitle + " ");
	revised = updateMarkupBlock(revised,"PRE-HEAD","MarkupPreHead");
	revised = updateMarkupBlock(revised,"POST-HEAD","MarkupPostHead");
	revised = updateMarkupBlock(revised,"PRE-BODY","MarkupPreBody");
	revised = updateMarkupBlock(revised,"POST-SCRIPT","MarkupPostBody");
	return revised;

// UploadLog
// config.options.chkUploadLog :
//		false : no logging
//		true : logging
// config.options.txtUploadLogMaxLine :
//		-1 : no limit
//      0 :  no Log lines but UploadLog is still in place
//		n :  the last n lines are only kept
//		NaN : no limit (-1)

bidix.UploadLog = function() {
	if (!config.options.chkUploadLog) 
		return; // this.tiddler = null
	this.tiddler = store.getTiddler("UploadLog");
	if (!this.tiddler) {
		this.tiddler = new Tiddler();
		this.tiddler.title = "UploadLog";
		this.tiddler.text = "| !date | !user | !location | !storeUrl | !uploadDir | !toFilename | !backupdir | !origin |";
		this.tiddler.created = new Date();
		this.tiddler.modifier = config.options.txtUserName;
		this.tiddler.modified = new Date();
	return this;

bidix.UploadLog.prototype.addText = function(text) {
	if (!this.tiddler)
	// retrieve maxLine when we need it
	var maxLine = parseInt(config.options.txtUploadLogMaxLine,10);
	if (isNaN(maxLine))
		maxLine = -1;
	// add text
	if (maxLine != 0) 
		this.tiddler.text = this.tiddler.text + text;
	// Trunck to maxLine
	if (maxLine >= 0) {
		var textArray = this.tiddler.text.split('\n');
		if (textArray.length > maxLine + 1)
			this.tiddler.text = textArray.join('\n');		
	// update tiddler fields
	this.tiddler.modifier = config.options.txtUserName;
	this.tiddler.modified = new Date();
	// refresh and notifiy for immediate update
	store.notify(this.tiddler.title, true);

bidix.UploadLog.prototype.startUpload = function(storeUrl, toFilename, uploadDir,  backupDir) {
	if (!this.tiddler)
	var now = new Date();
	var text = "\n| ";
	var filename = bidix.basename(document.location.toString());
	if (!filename) filename = '/';
	text += now.formatString("0DD/0MM/YYYY 0hh:0mm:0ss") +" | ";
	text += config.options.txtUserName + " | ";
	text += "[["+filename+"|"+location + "]] |";
	text += " [[" + bidix.basename(storeUrl) + "|" + storeUrl + "]] | ";
	text += uploadDir + " | ";
	text += "[[" + bidix.basename(toFilename) + " | " +toFilename + "]] | ";
	text += backupDir + " |";

bidix.UploadLog.prototype.endUpload = function(status) {
	if (!this.tiddler)
	this.addText(" "+status+" |");

// Utilities

bidix.checkPlugin = function(plugin, major, minor, revision) {
	var ext = version.extensions[plugin];
	if (!
		(ext  && 
			((ext.major > major) || 
			((ext.major == major) && (ext.minor > minor))  ||
			((ext.major == major) && (ext.minor == minor) && (ext.revision >= revision))))) {
			// write error in PluginManager
			if (pluginInfo)
				pluginInfo.log.push("Requires " + plugin + " " + major + "." + minor + "." + revision);
			eval(plugin); // generate an error : "Error: ReferenceError: xxxx is not defined"

bidix.dirname = function(filePath) {
	if (!filePath) 
	var lastpos;
	if ((lastpos = filePath.lastIndexOf("/")) != -1) {
		return filePath.substring(0, lastpos);
	} else {
		return filePath.substring(0, filePath.lastIndexOf("\\"));

bidix.basename = function(filePath) {
	if (!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);

bidix.initOption = function(name,value) {
	if (!config.options[name])
		config.options[name] = value;

// Initializations

// require PasswordOptionPlugin 1.0.1 or better
bidix.checkPlugin("PasswordOptionPlugin", 1, 0, 1);

// styleSheet
setStylesheet('.txtUploadStoreUrl, .txtUploadBackupDir, .txtUploadDir {width: 22em;}',"uploadPluginStyles");

	txtUploadStoreUrl: "Url of the UploadService script (default: store.php)",
	txtUploadFilename: "Filename of the uploaded file (default: in index.html)",
	txtUploadDir: "Relative Directory where to store the file (default: . (downloadService directory))",
	txtUploadBackupDir: "Relative Directory where to backup the file. If empty no backup. (default: ''(empty))",
	txtUploadUserName: "Upload Username",
	pasUploadPassword: "Upload Password",
	chkUploadLog: "do Logging in UploadLog (default: true)",
	txtUploadLogMaxLine: "Maximum of lines in UploadLog (default: 10)"

// Options Initializations

/* don't want this for tiddlyspot sites

// Backstage
	uploadOptions: {text: "upload", tooltip: "Change UploadOptions and Upload", content: '<<uploadOptions>>'}



FTP ist die Abkürzung von [[File Transfer Protocol]]. Dieses Protokoll dient dazu, Dateien über das Internet zu verschicken. Die meisten Benutzer brauchen es, um Dateien auf einem Webserver abzulegen. Um das FTP-Protokoll verwenden zu können, bracht man einen FTP-Client. Auf dem Rechner, auf den man die Dateien schickt, muss eine FTP-Server-Software laufen. Viele moderne Dateimanager beherrschen das FTP-Protokoll.

Das FTP-Protokoll ist unsicher, Daten können leicht "abgefangen" werden. Deshalb wird statt FTP zunehmend [[SFTP]] verwendet, bei dem die Daten verschlüsselt werden.
"Markup" ist das englische Wort für "Auszeichnung". Von der Auszeichnung eines Textes haben früher Verlagshersteller gesprochen, wenn sie beim Vorbereiten eines Manuskripts für den Druck mit Stiften markiert haben, was fett, kursiv, als Überschrift usw. gedruckt werden sollte. 

Bei digitalen Texten werden Auszeichnungen mit bestimmten Zeichen vorgenommen. Bei [[Auszeichnungssprachen]] wie HTML werden die Auszeichnungen in Spitzklammern ({{{<}}} und {{{>}}}) eingebettet (in bestimmten Fällen auch zwischen {{{&}}} und {{{;}}}). Die Software, die den Text verarbeitet, erkennt an diesen Auszeichnungen, was sie mit dem Text machen soll. Die Auszeichnung 


sagt z.B. einem Webbrowser, dass er das Wort "Einführung" als Überschrift behandeln soll. 

Ein Link ist ein Verweis in einem digitalen Text. Anders als bei einem Text auf Papier kann die Software, die den Text verarbeitet, bestimmte Aktionen durchführen, wenn sie es mit einem Link zu tun hat. Sie kann z.B. die Stelle oder das Dokument, auf das in einem Link verwiesen wird, laden und darstellen. 

Die einfachste Form eines Links bilden die so genannten anchors, für die man das HTML-Element {{{a}}} benutzt.

Man kann auch auf Stellen in einem Text verweisen. In einem HTML-Dokument muss man diese Stellen dazu selbst auszeichnen. Heute verwendet man dazu das Attribut {{{id}}}. 

Ein weiteres HTML-Element für Links ist {{{link}}}. Mit {{{link}}} verknüpft man ein komplettes HTML-Dokument mit einem weiteren Dokument, Z.B. einem Stylesheet oder einem Newsfeed.  
Type the text for 'New Tiddler'
Unter einem [[Webserver]] versteht man einerseits ein Programm auf einem Computer, das Daten an andere Rechner schickt, wenn es bestimmte Anfragen erhält. Andererseits versteht man auch den Rechner selbst, auf dem das Programm läuft, als Webserver. Und damit ein Rechner wirklich als Webserver funktionieren kann, müssen noch weitere Voraussetzungen erfüllt sein: Er braucht eine feste Adresse im [[Internet]], und er braucht einen für Menschen verständlichen Namen (siehe [[Domainnamen]]).

Die Anfragen an den Webserver und seine Antworten folgen bestimmten Regeln. Meist spricht man von einem [[Protokoll]], nämlich dem [[Hypertext Transfer Protocol]]. Diese Regeln legen fest, welche Daten an den Webserver geschickt werden dürfen und wie sie empfangen werden. Statt von einem Webserver spricht man deshalb auch von einem HTTP-Server.

Es gibt viele HTTP-Server; mit Abstand am meisten genutzt werden der [[Apache]] und der [[Internet Information Server]]. Sie bleiben bei einem hohen Datenaufkommen leistungsfähig, lassen sich gegen Angriffe aus dem Netz schützen und protokollieren alle Ereignisse (siehe [[logfiles]]). 

In der Regel muss man sich als Benutzer nicht mit der Einrichtung eines Webservers beschäftigen. Man mietet einen Server oder Platz auf einem Server (siehe [[virtual hosts]]) bei einem Provider, oder man verwendet die Webserver einer Firma oder Organisation mit eigenen Administratoren.

Um einen Webserver einzurichten (zu konfigurieren), gibt es verschiedene Möglichkeiten. Man kann bestimmte Textdateien bearbeiten oder Werkzeuge mit einer grafischen Benutzeroberfläche (z.B. [[webmin]] benutzen. Bei der [[Serverkonfiguration]] gibt es sehr viele Möglichkeiten. Sie betreffen z.B. die Verzeichnisse, in denen Daten für das Web gespeichert werden und die Sicherheitseinstellungen. Wichtig ist bei der Konfiguration auch, welche weitere Software der Server benutzt, um Anfragen zu beantworten. 

Auf den meisten Rechnern mit einem modernen Betriebssystem ist übrigens ein Webserver installiert. Meist wird er nur verwendet, um Daten in einem lokalen Netzwerk zur Verfügung zu stellen.  
Eine Kommadozeile ist, wie der Name sagt eine Zeile, über die man dem Computer Befehle gibt, in dem man sie mit der Tastatur schreibt. Lange war die Tastatur das wichtigste Mittel, um einen Computer zu steuern. Meist schreibt man die Kommandozeile in einem [[Terminalfenster]], in das der Rechner seinerseits auch Mitteilungen über die Ergebnisse (oder das Scheitern) seiner Operationen schreibt. Man arbeitet also interaktiv, in einem Dialog mit dem Rechner.

[[Web Developer|]] ist eine der wichtigsten Erweiterungen des Firefox für Leute, die Websites entwickeln. Hat man sie installiert, kann man sich über zusätzliche [[Kontextenü]]einträge und eine eigene [[Toolbar]] über alle technischen Details einer HTML-Seite informieren. Ein Teil der Funktionen deckt sich mit [[Firebug]].
Type the text for 'New Tiddler'
Um eine Website ins Netz zu stellen, muss man sie auf einem Rechner speichern, der 

eine Internetverbindung hat, und auf dem eine Webserver-Software läuft. Einen solchen Rechner bezeichnet man meist als [[Webserver]]. 

Damit ein Rechner wirklich als Webserver verwendet werden kann, muss er eine feste IP-Adresse haben, also sozusagen immer unter derselben Adresse im Internet erreichbar sein. Außerdem muss dieser IP-Adresse ein verständlicher Namen zugeordnet sein - das, was man meist als URL bezeichnet.

Um die Website ins Netz zu stellen, speichert man die Dateien, die zu ihr gehören, in bestimmten Verzeichnissen eines solchen Rechners. Welche Verzeichnisse das sind, hängt davon ab, wie der Webserver eingestellt ist. Um die Datei vom eigenen Rechner auf den Webserver zu bekommen, braucht man bestimmte Programme, z.B. FTP-Programme.


[[Wie bekommt man eine feste IP-Adresse?]]

[[Wie bekommt man einen Domain-Namen?]]

[[Wie konfiguriert man einen Webserver?]]

[[Was bieten Dienstleister an, bei denem man Webspace mieten kann?]]

[[Mit welchen Programmen kann man Dateien auf einem Werserver speichern?]]
Type the text for 'New Tiddler'
Type the text for 'New Tiddler'
Ein Rechner - die Software auf dem Rechner - braucht Markup, also Auszeichnungen, um einen digitalen Text verarbeiten zu können - z.B. indem sie ihn auf einem Bildschirm darstellt. 
Type the text for 'New Tiddler'
Diese Seite ist ein [[TiddlyWiki]] und noch in einem sehr frühen Stadium (eingerichtet am 21. November 2007). Sie soll Menschen, die sich für Medien interessieren und keinen technischen Hintergrund haben, in das Kommunizieren und Publizieren im Web einführen.  

Fragen, Kritik, Vorschläge bitte an:

Karin Raffer      (karin dot raffer2 at fh-joanneum dot at)
Heinz Wittenbrink (heinz dot wittenbrink  at fh-joanneum dot at)
Type the text for 'New Tiddler'