Welcome to TiddlyWiki created by Jeremy Ruston, Copyright © 2007 UnaMesa Association
<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml'/>
<!--}}}-->
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 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;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {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 [[ToolbarCommands::ViewToolbar]]'></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 [[ToolbarCommands::EditToolbar]]'></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>>
Volby pro nastavení TiddlyWiki uložené ve vašem prohlížeči
Vaše jméno pro podpis příspěvků. Zapište jej jako WikiWord (př: ~JménoPříjmení)
<<option txtUserName>>
<<option chkSaveBackups>> Uložit zálohu
<<option chkAutoSave>> Automatické ukládání
<<option chkRegExpSearch>> Vyhledávání podle regulárních výrazů
<<option chkCaseSensitiveSearch>> Vyhledávání závislé na velkých a malých písmenech
<<option chkAnimate>> Animace
----
Pokročilá nastavení: AdvancedOptions
~TiddlyWiki je zajímavý a trochu netradiční způsob publikování na Internetu. Veškeré redakční a publikační systémy, se kterými jsem zatím pracoval, fungují na principu spojení PHP a databáze (nejčastěji ~MySQL), popř. pouze s využitím PHP a ukládáním do souboru. Toto je první způsob, kdy je publikační systém ve formátu HTML. Nezvyklé, že?
Na webu najdete hodně různých hotových redakčních systémů a weblogů. Některé si nainstalujete do svého webového prostoru (např. [[Drupal|https://www.drupal.org/]], [[Wordpress|https://wordpress.org/]], [[Joomla|https://launch.joomla.org/]]), u jiných využíváte nabízenou službu (např. [[Blogger.com|http://www.blogger.com]]). U ~TiddlyWiki nikoli. Všechno je obsaženo v jednom souboru, do kterého se pomocí ~JavaScriptu ukládají vaše nové příspěvky. Aby to ale zase nebylo tak jednoduché, i tento způsob má svá úskalí. Nicméně, pro začátek si můžete potřebný soubor stáhnout:
*[[verze 1|./data/novy.zip]](32,5 kB)
*[[verze 2|./data/novy2.zip]](39,5 kB)
a začít se s ním seznamovat. Přeložil jsem jej do češtiny, původní web včetně všech informací najdete v angličtině na domovské stránce [[TiddlyWiki|http://www.tiddlywiki.com]]. Zároveň zde najdete několik Tiddly Weblogů, které určitě stojí za prostudování.
Stránka má ve svém kódu nastavené kódování (zde iso-8859-2, častěji asi windows-1250, na webu autora ~utf-8). To znamená, že se nemusíte starat o nic jiného, než o obsah vašeho příspěvku. I text v ~TiddlyWiki je možné formátovat. Vlastní úprava je velmi jednoduchá. V uvedených příkladech vidíte, jak se příslušný text formátuje. V této části jde jde o úpravu vzhledu textu, nikoli celého designu stránky. K úpravám se dostanete tak, že z nabídky k vybranému záznamu kliknete na odkazové tlačítko //Edituj//.
''//2.1 Formátování textu://''
''Publikování na WWW'' - tučné písmo (použití "apostrofu")
// Publikování na WWW // - kurzíva (použití "lomítka")
__ Publikování na WWW __ - podtržené písmo (použití "underline")
== Publikování na WWW == - škrtnutý text (použití "rovná se")
5^^3^^ = - exponent (použití "stříšky")
a~~2~~ = - index (použití "vlnovky")
@@color:red;Publikování na WWW@@ - světlejší tón červené barvy (použití "zavináče")
''//2.2 Nadpisy://''
(pozadí nadpisů je dáno nastavením v kaskádových stylech (modrý proužek), oranžová barva textu je vytvořena barvou zde - dvojitý zavináč)
@@color:orange;
!Nadpis 1
!!Nadpis 2
!!!Nadpis 3
!!!!Nadpis 4
!!!!!Nadpis 5
@@
''//2.3 Odrážky://''
Odrážky se hodí zejména tehdy, když budete řešit společný úkol. Pomocí odrážek další úrovně můžete reagovat na předchozí informaci a následně publikovat na webu.
*odrážka první úrovně
**odrážka druhé úrovně
***odrážka třetí úrovně
''//2.4 Číslované seznamy://''
Číslované seznamy mají podobnou funkci jako odrážky. Kombinovat můžete i číslované seznamy s odrážkami. To může být dost užitečné.
#první řádek
##první podřádek
##druhý podřádek
#druhý řádek
**první odrážka
**druhá odrážka
#třetí řádek
''//2.5 Hypertextové odkazy://''
WikiWord - interní odkaz, který je přednastaven ve stránce. V případě, že nechcete text použít jako odkaz, zapište před něj "vlnovku". Text bude vypadat normálně - ~WikiWord.
[[Stránka zakladatele TW|http://www.tiddlywiki.com]] - vnější odkaz na jiný web.
''//2.6 Umístění obrázků://''
- cesta k obrázku, který musí být umístěn v kořenovém adresáři na webu.
[img[Pavlínina váza|images/vaza.jpg]]
''//2.7 Tabulka//''
Konstrukce tabulky je snadná. Modré pozadí prvního řádku je dáno tím, že text je psán jako Nadpis 1 (první úroveň).
|!Záhlaví 1|!Záhlaví 2|
|1 buňka v 1 řádku|2 buňka v 1 řádku|
|1 buňka v 2 řádku|2 buňka v 2 řádku|
|1 buňka v 3 řádku|2 buňka v 3 řádku|
''//2.8 Bloky//''
Rozsáhlejší bloky a komentáře je možné vsouvat do textu nenásilně, a zároveň odlišně od běžného textu.
<<<
Výborné použití je například u různých citací, úryvků z textů, apod. Celý blok začíná i končí značkou //...je menší...// na samostatných řádcích.
<<<
Tento způsob je také možné použít jako //odrážky//.
>1. úroveň
>>2. úroveň
>>>3. úroveň
>>2. úroveň
>1. úroveň
''//2.9 Vodorovná čára//''
Používá se na webu k oddělení příspěvků od sebe. Občas může být docela užitečná. V každém případě opět velmi jednoduchá.
----
Tato část patří k tomu nejobtížnějšímu, co vás na TiddlyWiki čeká. Design této stránky je především záležitost vašeho vkusu. To je první věc, kterou byste si měli uvědomit. Jedna strana mince je obsah vašeho webu, druhá, jak budete tento obsah prezentovat veřejnosti. To je klasický přístup ke každé stránce. Webdesign je poměrně náročná oblast, která se řídí jednak obecnými pravidly, a dále vaším přístupem a názorem. Proto vám doporučuji před vlastní designovou úpravou prostudovat některý web, který se toto problematikou zabývá.
Vzhled stránky je určen kaskádovými styly. Opět je důležité si nejdříve nastudovat, o co se vlastně jedná. Pokud CSS znáte, potom se můžete pustit do redesignu. Malá rada - zaměřte se prozatím pouze na úpravu barev, popř. velikosti písma, další úpravy přece jenom vyžadují více.
Barvy jsou v kódu šestnáctkové soustavy, což znamená, že použijete formu zápisu //#aa00000 (červená barva)//. Jestliže se v označení barev nevyznáte, najděte si nějakou paletu barev (např. [[Jak psát web|http://www.jakpsatweb.cz/archiv/barvy-bezpecne.html]]).
Ve webové stránce se většina designových úprav objevuje v části //@@color:green;Shadow stylesheet elements@@//. Nejdříve si ji pořádně pročtěte a každou změnu hned zkontrolujte v náhledu nebo prohlížeči.
Závěrem bych rád řekl, že design, který zvolil autor webu, je docela pěkný. Podstatné je, že splňuje základní kritéria použitelnosti a přístupnosti webu. Řada weblogů, které jsem si pročetl, tento univerzální design používá.
Tato část je pro mne trochu záhadná. Původně jsem očekával, že ~JavaScript dokáže sám uložit změny na server. Bohužel, tak tomu není. Proto zde opisuji celý postup, který je uveden na webu autora. Nejdříve je nutné si uvědomit zásadní bod - veškerá editace textu, formátování, úpravy designu, zkrátka jakákoli změna se provádí ve vašem počítači. Můžete zvolit dvě cesty:
**před každou změnou si stáhnout stránku ze serveru (velmi jednoduché), provést změny a přes FTP přenos ji dát zpět,
**stránku je možné mít neustále u sebe např. na disketě nebo USB disku, provádět průběžné změny a po určité době opět publikovat webovou stránku pomocí FTP přenosu.
#Jakmile kliknete na odkaz "Ulož změny" v pravém sloupci, objeví se informace o nutnosti uložení TiddlyWiki do souboru. Nově se ukáže záznam s informací o uložení pod názvem SaveChanges. Zde najdete celý postup stažení. Stránku je údajně možné ukládat do souboru pouze v Internet Exploreru, Firefoxu a Safari.
#K uložení stránky do souboru se používá nabídka pravého tlačítka myši (při najetí na odkaz ~SaveChanges) ve dvou variantách:
**Uložit odkaz jako...
**Uložit cíl jako...
#V žádném případě nevolte nabídku //Soubor - Uložit jako...//. To zde nefunguje, jak byste přepokládali, dojde pouze k uložení celého webu.
#V pravém sloupci rozbalte //Nastavení// a zapište své jméno. Dále zde zvolte způsob ukládání (Uložit zálohu - není to ale nutné).
#Stažený soubor otevřete jako novou webovou stránku a můžete začít editovat. U každého záznamu je nabídka, kterou asi není třeba popisovat. Můžete provádět změny ve SpecialTiddlers (speciální záznamy SiteTitle, MainMenu, apod.), které jsou naprogramovány, vkládat nové záznamy, mazat je a určovat, do jakých skupin-témat budou patřit. Tato témata mohou i nemusí odpovídat Nabídce v ~MainMenu.
#Pokud chcete, aby byl váš záznam vidět automaticky při otevření stránky, musíte jeho přesný název umíst do DefaultTiddlers.
#Vždy se vyplatí při nejasnostech vyhledat stránku autora, kde byste měli najít podrobný popis všeho podstatného.
A) Ovládací prvky příspěvků v TiddlyWiki se nazývají //~ToolbarButtons//. Vyskytují se v pravé části u záznamů. Díky kaskádovým stylům reagují na pohyb myši.
* ''Zavři'' - zavři záznam
* ''Edituj'' - edituj záznam
* ''Stálý odkaz'' - stálý odkaz k záznamu v pravém sloupci
* ''Reference'' - zobrazení dalších záznamů souvisejících s aktuálním
* ''Ulož'' - ulož provedené změny v záznamu
* ''Zruš'' - zruš provádění změn v daném záznamu
* ''Smaž'' - smaž celý záznam (nebude obsažen ani v kódu stránky)
B) Pravý sloupec příkazů slouží pro navigaci v celém ~TiddlyWiki. Pro vaši orientaci je důležitá spodní část, která nabízí rychlejší navigaci v celém webu.
* ''Nový příspěvek'' - otevře formulář pro nový záznam
* ''Zavři vše'' - zavřou se všechny záznamy
* ''Otevři vše'' - otevřou se všechny záznamy uvedené v DefaultTiddlers
* ''Ulož změny'' - uloží se všechny provedené změny, odkaz funguje pouze v souboru, který je stažen do vašeho počítače
* ''Nastavení'' - rozbalí se další nabídka pro práci s TiddlyWiki, především s možností zapnutí a vypnutí ~JavaScriptu při otvírání záznamů a umožnění editace (//~AdvancedOptions//)
* ''Čas, ~A-Z, Témata, Další'' - nabídka pro vaši orientaci v TW.
C) Levý navigační sloupec funguje jako hlavní navigace v celé webové stránce. Můžete zde mít interní odkazy v rámci webu i externí odkazy na jiné stránky. Jejich tvorbu najdete v kapitole //Jak editovat//.
Aktualizace probíhá neustále na [[webu autora|http://www.tiddlywiki.com/]]. V této české lokalizaci se jedná především o pochopení ~TiddlyWiki, k novým překladům do češtiny již moc docházet nebude. Naopak, rád bych se zaměřil na doporučování dalších TW nadšenců, i když jsou jejich weby, zaměřené na tutoriály a manuály, v angličtině. Bezvadné je, že se již první české TW weby objevují. Rád zde budu publikovat i případné grafické motivy jiných uživatelů a webmasterů.
K dispozici je nová verze ''~TiddlyWiki 2.4''. Vyznačuje se vysokou intuitivností, kde není nutné sahat do kódu stránky. Všechno je možné upravit přes rozhraní prohlížeče nebo pomocí pluginů. I tento web je již aktualizován do nejnovější verze, původní je k nahlédnutí přes odkaz [[Zprávy]].
Background: #fff
Foreground: #000
PrimaryPale: #eee
PrimaryLight: #cee0fc
PrimaryMid: #222
PrimaryDark: #005
SecondaryPale: #ddd
SecondaryLight: #ccc
SecondaryMid: #bbb
SecondaryDark: #005
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #aaa
TertiaryDark: #aaa
Error: #f88
@@margin-left:.5em;<<slider chkContents SideBarTabs "Obsah »" "Přehled všech příspěvků, které jsou v obsahu zapsány">>@@
Customizaci můžeme chápat jako přizpůsobení webu vlastní představě. Je možné to provést v několika směrech:
*Použijte //~ColorPalette// pro změnu základních barev (od verze TW 2)
*Vytvořte //~CustomStyleSheet//, což je Tiddler, který usnadňuje další změny v designu
*Upravte si podle sebe //~PageTemplate//, //~ViewTemplate// nebo //~EditTemplate// tak, abyste mohli změnit celkovou strukturu webu a vzhled příspěvků
*Použijte některé designové schéma ze stránky //~TiddlyThemes//
*Nainstalujte si další pluginy, které nabízejí vyšší úroveň ovládání i fungování webu
[[TiddlyWiki weblog]] [[TiddlyWiki 2.5.3]] [[Skrytí celkového přehledu]] [[Jak na fotoblog]] [[TiddlyWiki - kompletní návod]] [[Témata pro TiddlyWiki]]
Ke stažení je zde aktuální verze ~TiddlyWiki 2.4.0, která je již připravena k použití. K provozu vám stačí běžný freehosting s podporou HTML. K nahlédnutí je [[zde|prazdnaTW.html]]. Po stažení si soubor přejmenujte na //index.html// a můžete jej začít používat.
<<<
[[...stahujte...|data/prazdnaTW.zip]]
<<<
FireFox je jiný typ prohlížeče, který je dobré si alespoň vyzkoušet. Má tyto základní vlastnosti:
<<<
rychlejší prohlížení webu - obzvlášť při pomalejším připojení (GPRS, Dial-up)
blokování vyskakovacích oken - jak se zbavit různých reklamních bannerů
prohlížení stránek v panelech - určitě je rychlejší a pohodlnější pracovat v jednom okně prohlížeče, kde si pouze přepínáte panely
snadná změna vzhledu - někdy se může hodit
ovládání v češtině - úplně v pohodě
integrované hledání na Google - hodně dobrá vlastnost
různá doplňková rozšíření - vše najdete na domovské stránce
snadná instalace - opravdu bezproblémová
úplně zdarma - asi není co dodat.
<<<
@@display:block;text-align:center;[img[FireFox|images/firefox.gif]]@@
Web ~TiddlyWiki je konstruován především pro snadnou manipulaci ve [[FireFoxu|http://firefox.czilla.cz/]], ale to neznamená, že by to v jiných prohlížečích nešlo.
Pro zahájení práce v prázdné ~TiddlyWiki použijte následující kroky:
* SiteTitle & SiteSubtitle: Název a podnadpis webu - změna se projeví v záhlaví webu.
* MainMenu: Navigace webu (zpravidla vlevo).
* DefaultTiddlers: Obsahuje názvy příspěvků, které se objeví při otevření webu.
Můžete také zapsat své jméno pro automatické podpisy příspěvků (jako ~WikiWord - ~JménoPříjmení): <<option txtUserName>>
Vynikající vlastnost nové verze TiddlyWiki je v možnosti importování píspěvků z jiných TW webů. Stačí vybrat si web s příspěvky, použít příkaz //~ImportTiddlers// a průvodce vás povede celou aktualizací. Postup je stejný jako pro import pluginů, připomínám, že použít jej lze pouze od verze ~TiddlyWiki 2.
Tento článek se věnuje lokalizaci původních šablon do vámi zvoleného jazyka. Jde o případ, kdy nechcete použít šablonu z ~TiddlyWiki.cz a raději si vyberete jiný grafický motiv.
<<<
''~TiddlyWiki v češtině a jiném grafickém motivu''
#Nejdříve si zde zkontrolujte, jestli je zvolený jazyk k dispozici (na [[TiddlyWiki.org|http://trac.tiddlywiki.org/wiki/Translations]]).
#Stáhněte si prázdnou šablonu (nejlépe poslední verze) ~TiddlyWiki do svého počítače z [[TiddlyThemes|http://tiddlythemes.com/]].
#Do nového okna nebo panelu otevřete tento odkaz a zkopírujte text.
#Text vložte do nového příspěvku v ~TiddlyWiki, který pojmenujte podle zvoleného jazyka (zde Czech).
#Zapište nový tag //systemConfig// (pod příspěvkem).
#Uložte příspěvek a následně uložte změny.
#Znovu otevřete uložený soubor a zkontrolujte, zda je již v novém jazyce.
<<<
Pokud převod do jiného jazyka nefunguje, je možné, že vámi vybraná verze neodpovídá verzi jazykové lokalizace.
K ~TiddlyWiki existuje velké množství pluginů, neboli malých scriptů, které umožňují lepší práci. Fungují až od verze ~TiddlyWiki 2, způsob instalace není příliš složitý. Mnou použitý je pro verzi TW 2.1.3 a vyzkoušen byl pro plugin zajišťující validitu kódu. Pluginy moc nevyužívám, protože zvyšují velikost stránky, je třeba k nim přistupovat rozumně.
''Instalace''
#instalace pluginů je totožná s importem záznamů
#pracujte s kopií TW na vašem počítači
#otevřete příkaz //~ImportTiddler//
#vložte adresu k pluginu (většinou na stránce autora) a potvrďte tlačítkem //Import//
#po proběhnutí tří kroků se objeví zápis //Hotovo//
#záznam s pluginem je na vašem webu
#zapište jej do tématu //systemConfig//
#aktualizujte váš web.
''Možné příčiny neúspěchu a návrh řešení''
*použitá verze ~TiddlyWiki neodpovídá požadavkům na plugin - vyberte si novější verzi (od TW 2)
*instalace se nezdařila, neproběhly všechny tři kroky - opakujte instalaci (vhodné pracovat se zálohou)
*instalace se podařila, ale plugin nefunguje - zkontrolujte, zda jej máte v tématu systemConfig.
~TiddlyWiki je možné použít i jako jednoduchý ''fotoblog'' nebo ''fotogalerii''. Celá konstrukce je snadná, místo náhledů je vhodné umístit textové odkazy do tabulky a pouze otvírat jednotlivé snímky. Je jasné, že fotografie jako samostatné soubory nejsou součástí stránky s ~TiddlyWiki. Podobně jako u PHP galerií, se snímky vkládají do adresáře (např. fotky), do kterého si pro ně sahá vytvořený odkaz. Výhoda je v tom, že při prvním načtení stránky se objeví pouze ty snímky, které se připraví v ~DefaultTiddlers. Ostatní se zobrazují nebo zavírají podle potřeby. Každý snímek je v samostatném záznamu. Zde je postup v několika krocích:
<<<
#Připravené fotografie odešlete přes FTP protokol do připraveného adresáře na server.
#Postupně v ~TiddlyWiki zapisujte do jednotlivých záznamů (příspěvků) cestu k nim, kde můžete využít i popisků k fotografiím.
#Do samostatného příspěvku zapište formou odkazů cestu k těmto záznamům.
#Vyberte si nejvhodnější snímky pro automatické zobrazení při otevření webové stránky.
<<<
Pro publikování fotografií navíc stačí jakákoli starší verze ~TiddlyWiki.
Zásadní problém, který řeším, je upload hotové stránky na web. Pochopil jsem to tak, že ~JavaScript, který je ve stránce, sám tento upload aktualitované stránky provede. Bohužel, vůbec to nefunguje. Zatím to řeším přes FTP nahráním aktualizované stránky, ale připadá mi to dost divné. Čekal jsem, že ~TiddlyWiki určitě umí víc.
[[TiddlyWiki]]
[[Aktuální verze]]
[[Stránky o TW]]
[[Download]]
[[Zprávy]]
© [[TiddlyWiki.com|http://www.tiddlywiki.com]]
[[RSS|index.xml]]
Na webu [[TiddlyWiki|http://www.tiddlywiki.com/]] je ke stažení nová verze, tentokrát pod označením //~TiddlyWiki 2.0//. Došlo k lepší designové úpravě, která je opět editovatelná a k doplnění několika nových vlastností. Asi nejzajímavější je možnost obtékání obrázku textem zleva nebo zprava (vlastnost //float//). Jestliže vám nevadí angličtina, je lepší začít pracovat v této nové vezi.
V příspěvku [[Česká TiddlyWiki 2 - Jak aktualizovat?]] najdete novou verzi ke stažení v češtině. Po prostudování se ale nemohu zbavit pocitu, že se z ní ztrácí určitá jednoduchost, která je v této starší verzi tak sympatická.
Na stránce najdete návrhy některých grafických zpracování designu pro ~TiddlyWiki. Postupně se zde budou objevovat další, podle toho, zda budou dány k dispozici ostatním. Pokud jste ochotni se o svoji úpravu vzhledu podělit, stačí poslat příslušný soubor. Poté se objeví na tomto webu.
*[[Nový design TW|new_design.html]] - tónový návrh ~TiddlyWiki
*[[Green design TW|green_design.html]] - návrh Petr Mezek
*[[Blue design TW|blue_design.html]] - návrh Barbora Žemličková
*[[Orange design TW 2|orange_design.html]] - návrh (pro ~TiddlyWiki 2) Petr Mezek
Jak dostat obrázek do záhlaví? Jsou dvě možnosti:
*do příspěvku ~SiteTitle vložit //[ <img[path/filename.jpg ]//, a poté zapsat text (název webu)
*do stylu ~StyleSheetColors vložit //.header {background: url("path/filename.jpg");}//
Trochu jsem bojoval s tím, že ve verzi TW 2.4 tento zápis nefungoval, ale řešení je prosté - v záznamu ~PageTemplate je třeba u header smazat makro pro gradient barevného pozadí.
<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryDark]]'>
<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='ContentsSlider'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
''Paleta barev'', která je uvedena v hexadecimální (šestnáctkové) číselné soustavě. Je to běžný zápis barev v kódu značkovacího jazyka HTML. Tato soustava používá deset číselných znaků 0-9 a šest písmen a-f. Pokud nepoužíváte značkovací jazyk XHTML, který je přísnější, je jedno, jestli použijete velkou nebo malou abecedu.
Kód se zapisuje ve tvaru ''//#0a6c94//'' - vždy //křížek// a 6 znaků. V případě použití tří dvojic stejného dvojčíslí můžete použít zkrácený zápis. Místo ''//#006699//'' se zapíše ''//#069//''.
V řazení barev této palety není žádný systém. Jakékoli příbuzné barvy v tónovém kontrastu si odvoďte pomocí kódu HTML již sami.
|bgcolor(#ffffff):ffffff |bgcolor(#cccccc):cccccc |bgcolor(#999999):999999 |bgcolor(#666666):@@color(white):666666@@ |bgcolor(#333333):@@color(white):333333@@ |bgcolor(#000000):@@color(white):000000@@ |bgcolor(#ffcc00):ffcc00 |bgcolor(#ff9900):ff9900 |bgcolor(#ff6600):@@color(white):ff6600@@ |bgcolor(#ff3300):@@color(white):ff3300@@ |
|bgcolor(#99cc00):99cc00 |bgcolor(#cc9900):cc9900 |bgcolor(#ffcc33):ffcc33 |bgcolor(#ffcc66):ffcc66 |bgcolor(#ff9966):ff9966 |bgcolor(#ff6633):@@color(white):ff6633@@ |bgcolor(#cc3300):@@color(white):cc3300@@ |bgcolor(#cc0033):@@color(white):cc0033@@ |bgcolor(#ccff00):ccff00 |bgcolor(#ccff33):ccff33 |
|bgcolor(#333300):@@color(white):333300@@ |bgcolor(#666600):@@color(white):666600@@ |bgcolor(#999900):999900 |bgcolor(#cccc00):cccc00 |bgcolor(#ffff00):ffff00 |bgcolor(#cc9933):cc9933 |bgcolor(#cc6633):@@color(white):cc6633@@ |bgcolor(#330000):@@color(white):330000@@ |bgcolor(#660000):@@color(white):660000@@ |bgcolor(#990000):@@color(white):990000@@ |
|bgcolor(#cc0000):@@color(white):cc0000@@ |bgcolor(#ff0000):@@color(white):ff0000@@ |bgcolor(#ff3366):@@color(white):ff3366@@ |bgcolor(#ff0033):@@color(white):ff0033@@ |bgcolor(#99ff00):99ff00 |bgcolor(#ccff66):ccff66 |bgcolor(#99cc33):99cc33 |bgcolor(#666633):@@color(white):666633@@ |bgcolor(#999933):999933 |bgcolor(#cccc33):cccc33 |
|bgcolor(#ffff33):ffff33 |bgcolor(#996600):@@color(white):996600@@ |bgcolor(#993300):@@color(white):993300@@ |bgcolor(#663333):@@color(white):663333@@ |bgcolor(#993333):@@color(white):993333@@ |bgcolor(#cc3333):@@color(white):cc3333@@ |bgcolor(#ff3333):@@color(white):ff3333@@ |bgcolor(#cc3366):@@color(white):cc3366@@ |bgcolor(#ff6699):@@color(white):ff6699@@ |bgcolor(#ff0066):@@color(white):ff0066@@ |
|bgcolor(#66ff00):66ff00 |bgcolor(#99ff66):99ff66 |bgcolor(#66cc33):66cc33 |bgcolor(#669900):669900 |bgcolor(#999966):999966 |bgcolor(#cccc66):cccc66 |bgcolor(#ffff66):ffff66 |bgcolor(#996633):@@color(white):996633@@ |bgcolor(#663300):@@color(white):663300@@ |bgcolor(#996666):@@color(white):996666@@ |
|bgcolor(#cc6666):@@color(white):cc6666@@ |bgcolor(#ff6666):@@color(white):ff6666@@ |bgcolor(#990033):@@color(white):990033@@ |bgcolor(#cc3399):@@color(white):cc3399@@ |bgcolor(#ff66cc):@@color(white):ff66cc@@ |bgcolor(#ff0099):@@color(white):ff0099@@ |bgcolor(#33ff00):33ff00 |bgcolor(#66ff33):66ff33 |bgcolor(#339900):339900 |bgcolor(#66cc00):66cc00 |
|bgcolor(#99ff33):99ff33 |bgcolor(#cccc99):cccc99 |bgcolor(#ffff99):ffff99 |bgcolor(#cc9966):cc9966 |bgcolor(#cc6600):@@color(white):cc6600@@ |bgcolor(#cc9999):cc9999 |bgcolor(#ff9999):ff9999 |bgcolor(#ff3399):@@color(white):ff3399@@ |bgcolor(#cc0066):@@color(white):cc0066@@ |bgcolor(#990066):@@color(white):990066@@ |
|bgcolor(#ff33cc):@@color(white):ff33cc@@ |bgcolor(#ff00cc):@@color(white):ff00cc@@ |bgcolor(#00cc00):00cc00 |bgcolor(#33cc00):33cc00 |bgcolor(#336600):@@color(white):336600@@ |bgcolor(#669933):669933 |bgcolor(#99cc66):99cc66 |bgcolor(#ccff99):ccff99 |bgcolor(#ffffcc):ffffcc |bgcolor(#ffcc99):ffcc99 |
|bgcolor(#ff9933):ff9933 |bgcolor(#ffcccc):ffcccc |bgcolor(#ff99cc):ff99cc |bgcolor(#cc6699):@@color(white):cc6699@@ |bgcolor(#993366):@@color(white):993366@@ |bgcolor(#660033):@@color(white):660033@@ |bgcolor(#cc0099):@@color(white):cc0099@@ |bgcolor(#330033):@@color(white):330033@@ |bgcolor(#33cc33):33cc33 |bgcolor(#66cc66):66cc66 |
|bgcolor(#00ff00):00ff00 |bgcolor(#33ff33):33ff33 |bgcolor(#66ff66):66ff66 |bgcolor(#99ff99):99ff99 |bgcolor(#ccffcc):ccffcc |bgcolor(#cc99cc):cc99cc |bgcolor(#996699):@@color(white):996699@@ |bgcolor(#993399):@@color(white):993399@@ |bgcolor(#990099):@@color(white):990099@@ |bgcolor(#663366):@@color(white):663366@@ |
|bgcolor(#660066):@@color(white):660066@@ |bgcolor(#006600):@@color(white):006600@@ |bgcolor(#336633):@@color(white):336633@@ |bgcolor(#009900):009900 |bgcolor(#339933):339933 |bgcolor(#669966):669966 |bgcolor(#99cc99):99cc99 |bgcolor(#ffccff):ffccff |bgcolor(#ff99ff):ff99ff |bgcolor(#ff66ff):@@color(white):ff66ff@@ |
|bgcolor(#ff33ff):@@color(white):ff33ff@@ |bgcolor(#ff00ff):@@color(white):ff00ff@@ |bgcolor(#cc66cc):@@color(white):cc66cc@@ |bgcolor(#cc33cc):@@color(white):cc33cc@@ |bgcolor(#003300):@@color(white):003300@@ |bgcolor(#00cc33):00cc33 |bgcolor(#006633):@@color(white):006633@@ |bgcolor(#339966):339966 |bgcolor(#66cc99):66cc99 |bgcolor(#99ffcc):99ffcc |
|bgcolor(#ccffff):ccffff |bgcolor(#3399ff):3399ff |bgcolor(#99ccff):99ccff |bgcolor(#ccccff):ccccff |bgcolor(#cc99ff):cc99ff |bgcolor(#9966cc):@@color(white):9966cc@@ |bgcolor(#663399):@@color(white):663399@@ |bgcolor(#330066):@@color(white):330066@@ |bgcolor(#9900cc):@@color(white):9900cc@@ |bgcolor(#cc00cc):@@color(white):cc00cc@@ |
|bgcolor(#00ff33):00ff33 |bgcolor(#33ff66):33ff66 |bgcolor(#009933):009933 |bgcolor(#00cc66):00cc66 |bgcolor(#33ff99):33ff99 |bgcolor(#99ffff):99ffff |bgcolor(#99cccc):99cccc |bgcolor(#0066cc):@@color(white):0066cc@@ |bgcolor(#6699cc):6699cc |bgcolor(#9999ff):9999ff |
|bgcolor(#9999cc):9999cc |bgcolor(#9933ff):@@color(white):9933ff@@ |bgcolor(#6600cc):@@color(white):6600cc@@ |bgcolor(#660099):@@color(white):660099@@ |bgcolor(#cc33ff):@@color(white):cc33ff@@ |bgcolor(#cc00ff):@@color(white):cc00ff@@ |bgcolor(#00ff66):00ff66 |bgcolor(#66ff99):66ff99 |bgcolor(#33cc66):33cc66 |bgcolor(#009966):009966 |
|bgcolor(#66ffff):66ffff |bgcolor(#66cccc):66cccc |bgcolor(#669999):669999 |bgcolor(#003366):@@color(white):003366@@ |bgcolor(#336699):@@color(white):336699@@ |bgcolor(#6666ff):@@color(white):6666ff@@ |bgcolor(#6666cc):@@color(white):6666cc@@ |bgcolor(#666699):@@color(white):666699@@ |bgcolor(#330099):@@color(white):330099@@ |bgcolor(#9933cc):@@color(white):9933cc@@ |
|bgcolor(#cc66ff):@@color(white):cc66ff@@ |bgcolor(#9900ff):@@color(white):9900ff@@ |bgcolor(#00ff99):00ff99 |bgcolor(#66ffcc):66ffcc |bgcolor(#33cc99):33cc99 |bgcolor(#33ffff):33ffff |bgcolor(#33cccc):33cccc |bgcolor(#339999):339999 |bgcolor(#336666):@@color(white):336666@@ |bgcolor(#006699):@@color(white):006699@@ |
|bgcolor(#003399):@@color(white):003399@@ |bgcolor(#3333ff):@@color(white):3333ff@@ |bgcolor(#3333cc):@@color(white):3333cc@@ |bgcolor(#333399):@@color(white):333399@@ |bgcolor(#333366):@@color(white):333366@@ |bgcolor(#6633cc):@@color(white):6633cc@@ |bgcolor(#9966ff):@@color(white):9966ff@@ |bgcolor(#6600ff):@@color(white):6600ff@@ |bgcolor(#00ffcc):00ffcc |bgcolor(#33ffcc):33ffcc |
|bgcolor(#00ffff):00ffff |bgcolor(#00cccc):00cccc |bgcolor(#009999):009999 |bgcolor(#006666):@@color(white):006666@@ |bgcolor(#003333):@@color(white):003333@@ |bgcolor(#3399cc):3399cc |bgcolor(#3366cc):@@color(white):3366cc@@ |bgcolor(#0000ff):@@color(white):0000ff@@ |bgcolor(#0000cc):@@color(white):0000cc@@ |bgcolor(#000099):@@color(white):000099@@ |
|bgcolor(#000066):@@color(white):000066@@ |bgcolor(#000033):@@color(white):000033@@ |bgcolor(#6633ff):@@color(white):6633ff@@ |bgcolor(#3300ff):@@color(white):3300ff@@ |bgcolor(#00cc99):00cc99 |bgcolor(#0099cc):0099cc |bgcolor(#33ccff):33ccff |bgcolor(#66ccff):66ccff |bgcolor(#6699ff):6699ff |bgcolor(#3366ff):@@color(white):3366ff@@ |
|bgcolor(#0033cc):@@color(white):0033cc@@ |bgcolor(#3300cc):@@color(white):3300cc@@ |bgcolor(#00ccff):00ccff |bgcolor(#0099ff):0099ff |bgcolor(#0066ff):@@color(white):0066ff@@ |bgcolor(#0033ff):@@color(white):0033ff@@ |
Osobní web: [[Chytrák Tim|http://www.chytraktim.cz/]]
Klikni pravým tlačítkem myši na odkaz SaveChanges a ulož stránku do souboru na počítači. Doporučuji volit název, pod kterým je uvedena na webu (nejčastěji asi jako //index.html//, popř. //default.html//). Tento záznam se objeví i tehdy, když dojde k problémům s uložením.
K nim může docházet u Internet Exploreru XP, pokud máte nainstalován balíček ~SP2. Řešením by mělo být ukládání souboru pod jiným jménem do části //Tento počítač//. Následně můžete výsledný soubor přejmenovat, jak potřebujete.
Pro IE WIN XP je údajně možné přejít do Vlastností (pravé tlačítko myši na prohlížeči a výběr //Vlastnosti//), kde by se mělo zrušit blokování uložení.
Nejvhodnější je použití prohlížeče FireFox, kde všechno funguje bez problémů. Navíc, z běžně dostupných prohlížečů je asi nejlepší...
nelineární webový zápisník (česká verze)
http://www.tiddlywiki.cz/
Jde o pěknou vychytávku pro designovou úpravu v pravém sloupci. V podstatě se blok ''Obsah >>'' chová stejně jako blok ''Nastavení >>''. Kliknutím se otevře nebo zavře. Výhoda je v tom, že při mnoha příspěvcích není tento sloupec tak dlouhý.
Úprava:
<<<
# V příspěvku //~PageTemplate// (šablona stránky) se v řádku <div id='sidebarTabs' refresh='content' force='true' tiddler='~SideBarTabs'></div> změní text //~SideBarTabs// na //~ContentsSlider//.
# Vytvoří se nový příspěvek, do kterého se zapíše:
{{{
@@margin-left:.5em;<<slider chkContents SideBarTabs "Obsah »" "Přehled všech příspěvků, které jsou v obsahu zapsány">>@@
}}}
<<<
Jako tag je možné zvolit //systemTiddlers// (jde o systémový zásah do struktury webu) a stránka se uloží.
SpecialTiddlers jsou speciální záznamy, které určují chování celé webové stránky. Jde o SiteTitle, SiteSubtitle, MainMenu, DefaultTiddlers, TiddlyWiki, SiteUrl a SaveChanges.
Weby, které řeší ~TiddlyWiki, stojí vždy za upozornění:
*[[Classic TiddlyWiki|http://classic.tiddlywiki.com]] - původní platforma
*[[TiddlyWiki.com|http://www.tiddlywiki.com]] - aktuální platforma
*[[TiddlyWiki for the rest of us|http://www.giffmex.org/twfortherestofus.html]] - uživatelská podpora
*[[abegoExtensions|http://tiddlywiki.abego-software.de/]] - pluginy, návody
*[[KIKS|https://kisk.phil.muni.cz/search?q=tiddlywiki]] - z Kabinetu informačních studií a knihovnictví (FF MU)
/*{{{*/
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:url('images/zahlavi_orange3.jpg');}
.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:Verdana, "Geneva CE", lucida, sans-serif; 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:none; font-weight: bold;}
.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:3.1em; font-weight:bold;}
.siteSubtitle {font-size:1.2em; font-weight: bold;}
#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:.85em; font-family:Arial, Helvetica, sans-serif;}
#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:.95em;}
#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:.73em; 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;}
/*}}}*/
Veškeré informace o ~TiddlyWiki v jednotlivých odkazech a článcích.
*[[Skrytí celkového přehledu]]
*[[Jak na fotoblog]]
*[[Obrázek v záhlaví]]
*[[Jak aktualizovat češtinu nebo jiný jazyk]]
*[[Customizace]]
*[[Import příspěvků]]
*[[Témata pro TiddlyWiki]]
*[[Nový design TiddlyWiki]]
*[[Úprava designu]]
*[[TiddlyWiki Tutorial]]
*[[Jak na upload?]]
*[[Česká TiddlyWiki 2 - Jak aktualizovat?]]
*[[Paleta barev]]
*[[Nová verze TiddlyWiki]]
*[[TiddlyWiki - kompletní návod]]
*[[Jak instalovat plugin]]
*[[TiddlyWiki je W3C validní]]
*[[Stránky o TW]]
*[[Česká TiddlyWiki v novém]]
V této části najdete seriál o ~TiddlyWiki, který by vám měl pomoci při jeho tvorbě. Jde o jakýsi malý manuál, jehož prostudování by mělo stačit k tomu, abyste si mohli vytvořit svůj vlastní weblog. Případné kapitoly psané kurzívou ještě neexistují. Další doporučení najdete v odkazu TiddlyWiki v tomto webu nebo na stránce [[TiddlyWiki.com|http://www.tiddlywiki.com/]] autora Jeremyho Rustona.
*[[1. Úvod do TiddlyWiki]]
*[[2. Jak editovat]]
*[[3. Jak na design]]
*[[4. Jak publikovat]]
*[[5. Jak ovládat TiddlyWiki]]
Nová verze ~TiddlyWiki 2.5.3 je ke stažení i v češtině. Nyní obsahuje 2 soubory - html stránku a ~TiddlySaver.jar. Oba musí být uloženy ve stejném (nejlépe kořenovém) adresáři.
*[[náhled|tw253cs.html]]
*[[ke stažení|data/tw253cs.zip]].
~TiddlyWiki je již několik měsíců v nové verzi TW 2.5.1, resp. 2.5.2. Jediná radikálnější změna se týká zapojení knihovny jQuery do fungování webu. Technologicky jde o zajímavou aktualizaci, z hlediska využití to velký význam prozatím nemá.
Na stránce [[TiddlyWikiTutorial|http://www.blogjones.com/TiddlyWikiTutorial.html]] najdete vysvětlení mnoha užitečných pojmů, které TiddlyWiki používá. Většina z nich je i v //České ~TiddlyWiki//, ale autorský web se aktualizuje mnohem častěji. Zajímavá jsou určitě ''Makra'', jejich programování by mohlo být dobrým studijním materiálem.
Poslední verze ''~TiddlyWiki 2.1.3'' výrazně pokočila ke zkvalitňování kódu. Původní verze TW 2 je upravena tak, že výsledný XHTML kód je přehlednější a editační prostředí přístupnější.
''Základní změny''
*kódování utf-8
*DOCTYPE - přechod k XHTML 1.0 Strict
*důslednější oddělení CSS od obsahu (i když samozřejmě stále v jednom souboru)
*celkové zvětšení datové velikosti stránky (bez příspěvků asi 230 kB)
Nejdůležitější podle mne je validita kódu podle konsorcia [[W3C|http://validator.w3.org/]]. Přestože mnozí tvůrci webů tento technický standard neuznávají, pro mne funguje jako důležité kritérium technické "správnosti". Soubor je stažení [[zde|data/novy3.zip]], šablona k nahlédnutí na [[TiddlyWiki 2.1.3|novy3.html]].
Kód prázdné stránky je zcela validní podle ~W3C. To je porušeno v okamžiku, kdy zapíšete první příspěvek. Způsob ukládání neodpovídá XHTML Strict a validátor hlásí chyby. Ty jsou pouze publikační, kód je stále v pořádku. Problém je možné ošetřit pomocí jednoho pluginu, který je k dispozici na [[abegoExtensions|http://tiddlywiki.abego-software.de/]]. Princip pluginu je v transfomaci publikovaných příspěvků do validního kódu, na celkovou funkčnost stránky nemá vliv.
''Postup pro validaci kódu''
#najděte seznam pluginů a v něm //~XHTML10Plugin//
#otevřete svoji stránku s ~TiddlyWiki a příkaz //~ImportTiddlers//
#do formulářového řádku napište adresu k pluginu na výše uvedeném webu
#potvrďte celý průběh importu příspěvku (až po potvrzení //Hotovo//)
#vytvořte téma //systemConfig// (pokud neexistuje) a vložte do něj odkaz na instalovaný plugin
#stránku opět načtěte na server, web by již měl být validní.
Jestliže se instalace nedaří, zkuste to znovu. Nicméně nezapomeňte, že kód stránky je validní i bez tohoto pluginu a chyby jsou pouze publikační, nikoli zdrojové (v bloku //storeArea//, kam se články ukládají - problematika uvozovek).
[[TiddlyWiki|http://www.tiddlywiki.com]] je zajímavý typ publikačního systému, který pracuje ve spolupráci HTML, ~JavaScript a CSS. Nemusíte znát programování ani databáze. V podstatě jde o docela zajímavou alternativu pro společnou práci na studentských projektech, výměnu zkušeností ve společných zájmech, apod. Autorem je [[Jeremy Ruston|http://www.osmosoft.com]], ~TiddlyWiki je dnes lokalizována do mnoha jazyků a nabízí několik designových témat volně k použití. Několik článků najdete na mém webu //[[Chytrák Tim|http://www.chytraktim.cz]]//.
-pch-
Pokud najdete na webu témata nebo motivy pro Tiddlywiki můžete je zkusit nainstalovat. To probíhá velmi jednoduše - stačí použít //~ImportTiddlers//, vložit adresu příslušného tématu a změna designu proběhne. Je dobré si pamatovat, že při nové změně zůstávají staré pluginy v obsahu stránky a její datová velikost se trochu zvětší. Změna vzhledu tímto způsobem je možná až od verze TW 2.
Bohužel původní nabídka motivů //~TiddlyThemes// už neexistuje.
Na [[www.youtube.com|http://www.youtube.com/v/ezNScBd7_h4&hl=en]] je ke shlédnutí bezvadné video o ~TiddlyWiki. Sice pouze v angličtině, ale zase velmi pěkné.
''~WikiWord'' je originální název pro speciální slova, která umožňují provázat jednotlivá "klíčová" slova uvnitř webu. Jednoduše se tak vytvářejí různé vysvělovací odkazy (zde působí spíše jako výkladové komentáře). V případě více slov se skládají bez mezer tak, že každé slovo začíná velkým písmenem. K jejich zápisu se používají dvojité hranaté závorky. Já tento zápis používám i pro relativní adresy, o ~WikiWord se ovšem nejedná. To může ovlivňovat například využití v některých čtečkách RSS.
*~JménoPříjmení
*~WikiWord
*ČeskáTiddlyWiki
Zprávy a názory, které stojí za zveřejnění.
*[[Původní TiddlyWiki.cz|index_puvodni.html]]
*[[Video o TiddlyWiki]]
*[[Aktualizace TiddlyWiki]]
*[[TiddlyWiki weblog]]
*[[PetrChlebek]]
*[[TiddlyWiki 2.5.x]]
Úprava designu je pomocí kaskádových stylů. Ty jsou zapsány poměrně nepřehledně přímo v kódu stránky. Jestliže umíte s CSS pracovat, v kódu se po chvíli určitě vyznáte. Najdete je v řádcích uvedených pomocí:
<<<
''config.shadowTiddlers.~StyleSheetColors'' – vzhled, nejčastěji barvy
''config.shadowTiddlers.~StyleSheetLayout'' – text, velikost, blokové prvky.
<<<
__Rozhodl jsem se některé prvky //trochu popsat//, snad to v orientaci pomůže:__
<<<
body – vzhled celé stránky, který se může „dědit“
titleLine – záhlaví
mainMenu – odkazy v levém menu
messageArea – formát příspěvku po kliknutí na odkaz
footer – zápatí (u příspěvků)
sidebarOptions – pravé menu
sidebarTabs – filtrovací menu (vpravo dole)
<<<
''Další prvky''
<<<
hover – reakce odkazu na „přejetí“ myší
active, link, visited – odkaz v různých situacích
background – pozadí
color – barva textu
<<<
''Formát''
<<<
forma zápisu - {vlastnost: její hodnota;\n}
vlastnost – background
hodnota - barva
středník – odděluje jednotlivé deklarace
zpětné lomítko a písmeno „n“ – znak pro zalomení řádku
složená závorka – učuje konkrétní deklaraci, ve které může být i více vlastností
V případě, že s TiddlyWiki začínáte, asi se vyplatí [[stáhnout|./data/novy2.zip]] (39,5 kB) novou verzi v češtině z tohoto webu nebo ze stránky autora v angličtině. Český překlad je na stránce [[Česká TiddlyWiki 2|mystuff.html]].
Pokud chcete web pouze aktualizovat novější verzí, použijte tento postup:
#Otevřete své TiddlyWiki v prohlížeči FireFox. Nejdříve jej přejmenujte na "mystuff.html" (nejlépe jako kopii původního souboru - PRO JISTOTU!!!).
#Uložte novou verzi z Internetu pomocí SaveChanges a pod názvem "mystuff.html". Ta přepíše vaši stránku se stejným názvem v počítači.
#Stránku nezavírejte (musíte mít aktivní ukládání zálohy).
#Vraťte se k původní otevřené kopii a opět uložte pomocí SaveChanges.
#Aktualizujte v prohlížeči, nová verze přepíše předcházející verzi.
Raději pracujte s kopií původní stránky, protože může dojít k nečekaným chybám. Má zkušenost je ale dobrá. V případě, že použijete verzi ze stránky autora, český překlad se zamění s anglickým originálem.
Současná Česká ~TiddlyWiki je převedena do nejnovější verze na [[stránce|http://www.tiddlywiki.cz/new_version.html]], která zatím funguje jako beta verze původního webu. Je XHTML validní a nese v sobě veškeré vymoženosti ~TiddlyWiki 2.