Authoring Zettels

As we mentioned before, zettels are blog posts; simple html documents with the same overall structure — top section, body section, and bottom section. There are code-generation tools available to generate the entire zettel structure for each recognized type of note, therefore, the user will focus in learning, authoring the zettel (taking notes), and connecting notes.

Note: This Zettelkasten is able to store and manage plain text notes. However, we decided that it would be interesting to display the knowledge contained in enduring zettels in an elegant way, fully styled.

Authoring zettels

Code generation tools

1) Generate Date and Time

This tool generates data and time in the format: YYYY-MM-DD hh:mm:ss

2) Generate Geo location information

This tool generates geo location information: Format: Latitude: 15.9665328 Longitude: -85.150728

3) Generate Text statistics

Generate text statistics on the text placed in the textarea field. Example: Summary: 474 bytes 68 words 1 paragraph total 473 characters

4) Generate Navigation

Generate hyperlinks for navigation between zettels. Example:

Prev Table of Contents Next

5) Table of contents

Generate a table of contents box.
Result:

Table of Contents

6) Make a paragraph

Make a paragraph from selected text.

7) Split a sentence into paragraphs

Splits a sentence into individual paragraphs (from selected text).

8) Make a list <li>

Makes a list of sentences from selected text.

9) Make a list <br>

Makes a list of sentences separated by <br /> from selected text.

10) Make an ordered list

Makes an ordered list of sentences from selected text.

11) Make a list of internal references

Makes a list of internal references from selected text.

12) Make a list of external references

Makes a list of external references from selected text.

Templates

1) Fleeting note template

2) Question note template

3) Permanent note template

4) Literature note template

5) Hub note template

6) Source code note template

7) Video note template

8) Project note template

9-12) Reserved for future use

Available styles

1) Justified text class="zjust"

This class justifies text inside a paragraph element.

<p class="zjust">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tristique mi eget augue auctor, non mollis nisl ultrices. Etiam aliquet lorem efficitur neque blandit egestas. Curabitur quis euismod dolor, ac pellentesque est. Suspendisse varius ornare turpis, ut posuere augue dictum sit amet. Etiam blandit mi nibh, sed laoreet leo ultricies eget. Donec tincidunt faucibus vehicula. In hac habitasse platea dictumst. Aliquam quis mollis velit, sit amet dignissim purus.

2) Note box class="znote"

This class creates a box for notes.

<span class="znote">Note: The quick brown fox jumps over a lazy dog.</span>

Result:
Note: The quick brown fox jumps over a lazy dog.

3) Section class="zsection"

This class creates a zettel section. It must be used alongside with ztop or zbottom.

<section class="zsection ztop">
:
</section>
:
:
<section class="zsection zbottom">
:
</section>

Creating a zsection does not cause any visible change.

4) Two columns text class="zcols2"

Displays text in two columns.

<p class="zcols2">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Result:

5) Three columns text class="zcols3"

Displays text in two columns.

<p class="zcols3">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

Result:

6) Formatted table text class="ztabs"

Styles an html table element.

  <table class="ztabs">
    <tr>
      <th>Term</th>
      <th>Definitions</th>
    </tr>
    <tr id="idx-a">
      <td id="atomicity">Atomicity, Principle of</td>
      <td>
        <p>The principle of atomicity means that each note should only contain one idea. The term was coined by Christian Tietze.<sup><a href="#ref1">1</a></sup></p>
      </td>
    </tr>    
  </table>

Result:

Term	Definitions
Atomicity, Principle of	The principle of atomicity means that each note should only contain one idea. The term was coined by Christian Tietze.¹

7) Red badge attribute data-redbadge

Creates a badge for text with a red background. Can be used with div, p, a, and span elements.

<span data-redbadge>Red badge</span> This is a red badge.

Result:
Red badge This is a red badge.

8) Green badge attribute data-greenbadge

Creates a badge for text with a green background. Can be used with div, p, a, and span elements.

<span data-greenbadge>Green badge</span> This is a green badge.

Result:
Green badge This is a green badge.

9) Blue badge attribute data-bluebadge

Creates a badge for text with a blue background. Can be used with div, p, a, and span elements.

<span data-bluebadge>Blue badge</span> This is a blue badge.

Result:
Blue badge This is a blue badge.

10) Gray badge attribute data-graybadge

Creates a badge for text with a gray background. Can be used with div, p, a, and span elements.

<span data-graybadge>Gray badge</span> This is a gray badge.

Result:
Gray badge This is a gray badge.

11) Todo attribute data-todo

Creates a red text and dotted border to indicate a TODO. Can be used with div, p, a, and span elements.

<span data-todo> Todo: this text will be replaced by...</span>

Result:
Todo: this text will be replaced by...

12) Box class="zbox"

Creates a box. Can be used with div, p, a, and span elements.

<span class="zbox"> This is a box</span>

Result:
This is a box

Connecting zettels

Regular hyperlinks

Hyperlinks provide a "natural" way to connect thoughts, ideas, and pieces of information. In this Zettelkasten, links are references, most of the times located in the bottom section of the zettel.

There are two types of references—internal references (zettel to zettel), and external references—zettel to an external page or web address (URL). In any case, the source zettel connects to the destination zettel or to an external web address through the use of the <a> html (anchor) element.

Internal reference code:

<a class="ziref" title=" link title " href="/zettel-url">Internal reference (zettel-zettel)</a>

Result:
Internal reference (zettel-zettel)

External reference code:

<a class="zxref" title=" link title " target="_blank" href="/zettel-url">External reference (zettel-external world)</a>

Result:
External reference (zettel-external world)

Semantic hyperlinks

In this Zettelkasten, semantic hyperlinks provide a mechanism to connect thoughts, ideas, and pieces of information with a certain meaning or intention that goes far beyond a zettel to zettel reference.

1) hasQuestion relationship

One note can have zero to many question notes ~~connected~~ related to it.

<a class="zhasquestion" title=" This is the title of this semantic link " href="#">Points to a question note</a>

Result:
Points to a question note

Use:

The second step of the active reading workflow is asking questions as part of the understanding process. When you are on this step, you create a question note and connect your literature note to it. By creating a hasQuestion semantic relationship, it implies that you are about to ask or already asked questions about the material you have scanned.

2) hasEvidence relationship

One note can have zero to many evidences related to it. This relation is a convenient way to connect a zettel with facts to evidences in other zettels.

<a class="zhasevidence" title=" This is the title of this semantic link " href="#">Points to an evidence</a>

Result:

Points to an evidence

Notes:
1. An evidence is a factual information that helps readers to reach a conclusion and form an opinion about something that you wrote.
2. Evidences are given in research works, quoted in essays and thesis statements, but is paraphrased by writers. If it is given as it is, then it is quoted properly within quotation marks.
3. Academic writing and all types of technical writing must be supported by evidences such as data, facts, quotations, arguments, statistics, research, and theories.
4. Evidences add substance to our own ideas, allow the reader to see what has informed our thinking, and how our ideas fit in with, and differ from, others' in our field.
5. In this Zettelkasten, we recognize seven types of evidences — (a) statistical; (b) research; (c) known facts; (d) personal experience; (e) examples; (f) allusions (written references); and (g) authority (subject matter expert's opinion).
6. In this Zettelkasten, we store evidences in zettels and ~~connect~~ reference them via a hasEvidence semantic link.

3) hasSolution relationship

One note can have zero to many solutions related to it. This relation is a convenient way to connect a zettel with one or more problems to solutions in other zettels.

<a class="zhassolution" title=" This is the title of this semantic link " href="#">Points to a solution</a>

Result:
Points to a solution

Notes:
1. When defining a problem or situation, we need to (a) differentiate facts from opinions; (b) specify underlying causes; (c) consult each faction involved for information; (d) state the problem specifically; (e) identify what standard or expectation was violated; (f) determine in which process the problem lies; and (g) avoid trying to solve the problem without any data.
2. This is an extensive analytical and learning process that may generate solutions that we'll need to generate and keep for further utilization.
3. In this Zettelkasten, we store solutions for problems in zettels and reference them via a hasSoluion semantic link.

4) causes relationship

The causes relationship is used to represent cause / effect. If a zettel has a causes relationship with another zettel, this means that this zettel is the cause and the other zettel is the effect.

<a class="zcauses" title=" This is the title of this semantic link " href="#">Points to an effect</a>

Result:
Points to an effect

Notes:
1. Cause and effect are relationship between two things when one thing makes the other thing happen.
2. Cause and effect refers to a relationship between two events or phenomena in which one event or phenomenon is the reason behind the other.
3. Cause and effect relationships require questioning how different parts and sequences interact with each other over time, which is often more difficult than reporting a chronological order of events, as when describing a process.
4. In academic and technical writing, cause and effect papers use analysis to examine the reasons for and the outcomes of situations.
5. In other types of writing:

a) The purpose of the cause-and-effect essay is to determine how various phenomena are related.
b) The thesis states what the writer sees as the main cause, main effect, or various causes and effects of a condition or event.
c) The cause-and-effect essay can be organized in one of these two primary ways:
d) Start with the cause and then talk about the effect. Or, start with the effect and then talk about the cause.
e) Strong evidence is particularly important in the cause-and-effect essay due to the complexity of determining connections between phenomena.
f) Phrases of causation are helpful in signaling links between various elements in the essay.

5) hasCause relationship

<a class="zhascause" title=" This is the title of this semantic link " href="#">Points to a cause</a>

Result:
Points to a cause

Notes:
1. When something has causes and effects, we may need to explicitly show the causes. 2. If a zettel has a hasCause relationship with another zettel, this means that the other zettel is one cause.

5) hasEffect relationship

<a class="zhaseffect" title=" This is the title of this semantic link " href="#">Points to an effect</a>

Result:
Points to an effect

Notes:
1. When something has causes and effects, we may need to explicitly show the effects. 2. If a zettel has a hasEffect relationship with another zettel, this means that the other zettel is one effect.

Prev Table of Contents Next

Authoring Zettels