Getting started Documentation re-organisation

assets/scss/_variables_project.scss

@@ -696,7 +696,13 @@ a {
 .post-img {
   display: block;
 
-   > p {
+  > img {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+  }
+
+  > p {
       text-align: center;
       font-style: italic;
   }

content/en/_index.html

@@ -37,7 +37,7 @@ <h1 class="hero-title">
           alt-text="Annotation Platform Screenshot"
         />
         <br />
-	<a href="{{< relref "/docs/Getting started/online/" >}}"
+	<a href="{{< relref "docs/Getting started/quick-start/online/" >}}"
           ><button class="hero-big">
             <i class="fas fa-tags mr-2"></i> Start Annotating Now!
           </button></a

content/en/docs/Getting started/_annotation-workflow.md

@@ -0,0 +1,19 @@
+The Ellogon Annotation Platform offers two deployment channels:
+
+1. **On-line, Cloud Services**: This usage type does not involve any form of installation process; users can start using the Ellogon Annotation Platform immediately.
+
+2. **Off-line, On-Premise**: In this case, users must download and install the platform on a server of their choice, using technologies such as containers.
+
+Beyond the installation process, which is required only for the second deployment channel (2.), the following steps are typical in an annotation workflow, as supported by the Ellogon Annotation Platform:
+
+1. **Create Accounts**: The annotation team (including the annotators and the process managers) must register with the platform.
+
+2. **Define the Annotation Schema**: A suitable (for the task) annotation schema (from existing available schemas) must be selected. Alternatively, a new annotation schema must be defined (in XML), if task requirements exceed available schemas capabilities.
+
+3. **Import Data**: The data to be annotated must be imported into the platform. Any annotation team member can import data, and can select the rest of the team members that data can be shared.
+
+4. **Annotate Data**: Each annotation team member annotates the data assigned for annotation. Annotation can be collaborative (multiple annotators work simultaneously on data) or stand alone (each annotator creates its own annotation set over data).
+
+5. **Review Annotation**: Annotations from multiple annotators can be visualised, and compared to identify differences (and even correct inconsistencies to retrieve a "gold" annotation). Standard metrics (like inter-rater agreement) can be automatically calculated.
+
+6. **Export Annotated Data**, for further sharing/processing outside the platform.

content/en/docs/Getting started/_index.md

@@ -1,6 +1,6 @@
 ---
 categories: ["Examples", "Placeholders"]
-tags: ["test","docs"] 
+tags: ["test","docs"]
 title: "Getting Started"
 linkTitle: "Getting Started"
 weight: 2

content/en/docs/Getting started/_what-is.md

@@ -0,0 +1,9 @@
+The Ellogon Annotation Platform is an **open-source**, **free** to use, **customisable** data annotation tool - in the cloud!
+
+The Ellogon Annotation Platform is a tool for annotating (or labelling) and exploring multiple types of data, with a focus on simplicity, ease of use, extensibility, reliability, productivity and high performance.
+
+You can perform different types of labelling with many data formats, especially with formats that encode text and annotation for tasks that relate to natural language processing (NLP). The Ellogon Annotation Platform provides a plethora of Annotation Schemas (encoded in [XML](https://en.wikipedia.org/wiki/XML)) for many NLP tasks (document classification, part-of-speech tagging, named-entity recognition and classification, (aspect & document based) sentiment analysis and polarity detection, argument mining, etc.), while new, user-generated, Annotation Schemas can be providing, extending applicability to new tasks, corpora, and annotation needs.
+
+Due to a recent (2021-2022) migration of its back-end from [Laravel](https://laravel.com/) ([PHP](https://www.php.net/)) to [Django](https://www.djangoproject.com/) ([Python](https://www.python.org/)), enables the ability to integrate **machine learning** models to supply predictions for labels (**pre-annotation**), or perform continuous active learning. See [seting up machine learning with annotation](#).
+
+Finally, the Ellogon Annotation Platform provides many facilities and tools for visualising annotations and performing comparisons among multiple annotators. See the [platform features](#) for more.

content/en/docs/Getting started/annotation-workflow.md

@@ -0,0 +1,7 @@
+---
+weight: 2
+title: "Annotation Workflow"
+linkTitle: "Annotation Workflow"
+---
+
+{{% readfile "_annotation-workflow.md" %}}

content/en/docs/Getting started/quick-start/_index.md

@@ -0,0 +1,55 @@
+---
+weight: 3
+title: "Quick Start"
+linkTitle: "Quick Start"
+---
+The Ellogon Annotation Platform offers two deployment channels:
+
+1. **On-line, Cloud Services**: This usage type does not involve any form of installation process; users can start using the Ellogon Annotation Platform immediately.
+
+2. **Off-line, On-Premise**: In this case, users must download and install the platform on a server of their choice, using technologies such as containers.
+
+<div class="body-container whats-new">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-12 center-text" style="margin-bottom: 40px">
+        <h2 class="section-title">Select Usage Method</h2>
+      </div>
+      <div class="col-lg-6">
+        <div class="card-shadow">
+          <span class="card-badge">ON-LINE, CLOUD SERVICES</span>
+          <h4 class="section-text-bold mt-4">
+            Start using the <span class="d-lg-block">Ellogon Annotation Platform</span> immediately!
+          </h4>
+          <div class="card-shadow-content">
+            <p class="section-text">
+              Get started with the Ellogon Annotation Platform in 5 minutes! Learn how
+              to register for an account, how to import data, how to annotate the data, and more.
+            </p>
+            <a
+              href="{{< relref "online/" >}}"
+              ><button class="hero-mid align-self-end"><i class="fas fa-tags mr-2"></i> Start Annotating Now!</button></a
+            >
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-6">
+        <div class="card-shadow">
+          <span class="card-badge">ON-PREMISE</span>
+          <h4 class="section-text-bold mt-4">
+            Install the <span class="d-lg-block">Ellogon Annotation Platform</span> in your server
+          </h4>
+          <div class="card-shadow-content">
+            <p class="section-text">
+              Learn how to use Fission functions with PostgreSQL database and
+              perform basic operations on it.
+            </p>
+            <a href="{{< relref "offline/" >}}"
+              ><button class="hero-mid-2 align-self-end"><i class="fas fa-download mr-2"></i>Download Now!</button></a
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

content/en/docs/Getting started/quick-start/offline.md

@@ -0,0 +1,6 @@
+---
+weight: 2
+title: "Install the Ellogon Annotation Platform"
+linkTitle: "On-Premise"
+---
+

content/en/docs/Getting started/quick-start/online.md

@@ -0,0 +1,109 @@
+---
+weight: 1
+title: "Start using the Ellogon Annotation Platform"
+linkTitle: "Cloud Services"
+description: >
+  A deployment option that does not involve any form of installation process; users can start using the Ellogon Annotation Platform immediately.
+---
+## Access the Ellogon Annotation Platform Cloud Services
+
+The Ellogon Annotation Platform Cloud Services can be accessed through the following links:
+
+1. **[annotation.ellogon.org](https://annotation.ellogon.org)**
+2. **[annotation.vast-project.eu](https://annotation.vast-project.eu)**
+
+All links point to the <ins>same deployment</ins> of the Ellogon Annotation Platform (they are aliases).
+
+## 1. Sign Up/Sign In
+
+Visit **<https://annotation.ellogon.org>** to create a new account or login (if you already have registered before).
+
+
+{{< img "/images/screenshots/online/login.png" "Figure 1: Login page. Use your username and password to login or click on \"Click here to create one\" to create a new account." auto >}}
+
+{{< img "/images/screenshots/online/register.png" "Figure 2: Register page. Enter the requested details to create a new account." auto >}}
+
+If this is the first time you visit the Ellogon Annotation Tool, create an account (Figure 2) following the steps below:
+
+* **STEP 1**: Fill in your Name, Email and Password (Figure 2).
+
+* **STEP 2**: A few moments later you will receive a confirmation email. You have to click the received link. Your account will be activated and you will be able to sign in.
+
+If you have an activated account, choose LOGIN. You will need the Email and Password you used during the sign up process.
+
+## 2. Import Data: Create a new Collection
+
+After logging in you will be redirected to the page shown in Figure 3. This is an overview of your account. You can manage your `Collections`, your Annotation, `Inspect` the ongoing work, view the `Analytics` or manage your account `Settings`. Moreover, you can `Send Feedback` and use the `Help` to navigate through the tool.
+
+{{< img "/images/screenshots/online/dashboard.png" "Figure 3: The user `Dashboard` page, providing some details about the user assets, along with the navigation menu on the left." auto >}}
+
+Two options are available under **`Collections`** on the menu at the left side (Figure 4):
+
+1. To Add New Collection
+
+2. To Manage Collections
+
+{{< img "/images/screenshots/online/collections-menu.png" "Figure 4: The `Collections` sub-menu." auto >}}
+
+To add a new collection, choose the first option. After completing the **`Collection Name`**, the **`Default Encoding`** and the **`Default Handler`** you can **upload one or more files**. When you are done, click `ADD COLLECTION` button to save it (Figure 5). After that you will be able to see your new collection by choosing `Manage Collections` from the `Collections` menu at the top bar.
+
+{{< img "/images/screenshots/online/new-collection.png" "Figure 5: The `Add New Collection` page." auto >}}
+
+{{< img "/images/screenshots/online/manage-collections.png" "Figure 6: The new collection as browsed through the `Manage Collections` option of the menu at the left-hand side." auto >}}
+
+## 3. Select Document and Annotation Characteristics
+
+To start annotating a document, please follow the steps as described below:
+
+* **STEP 1**: Choose the Annotation option of the menu at the left-hand side and you will be prompted to `Select Document` (Figure 7).
+
+* **STEP 2**: Choose the collection you need. The list of its documents appears (Figure 7).
+
+* **STEP 3**: Press on the document you want to annotate and the choose `SELECT` (Figure 7).
+
+{{< img "/images/screenshots/online/annotate-select-document.png" "Figure 7: You can start the Annotation by first selecting a Collection, and then one of its Documents." auto >}}
+
+* **STEP 4**: Once the Document to be annotated is selected, select `Annotation Characteristics...` (Figure 8). For example, to annotate with values, select the parameters as shown in Figure 8 and then press `OK`.
+
+{{< img "/images/screenshots/online/annotation-select-schema.png" "Figure 8: Selecting an annotation schema." auto >}}
+
+## 4. Document Annotation
+
+After selecting the document and the VAST annotation scheme for values, as presented in the previous section, you can start the annotation. Your screen will be similar to the one presented in Figure 9. You can use the sidebar on the right to adjust the panels in a comfortable way.
+
+{{< img "/images/screenshots/online/annotation.png" "Figure 9: The Annotation interface for the selected annotation schema. The Document to be annotated is shown at the left side, while the annotation schema is shown on the right side." auto >}}
+
+The selected annotation schema is shown on the right side panel. In this case it contains a set of `buttons` organised in categories.
+
+To make an annotation follow the steps below:
+
+* **STEP 1**: Select the part of the document you want to annotate. A text segment can be easily selected by simply pressing the mouse wheel on the first word to be included in the segment, and then by clicking the mouse wheel again on the last word to be included in the segment.
+
+* **STEP 2**: Press on a button from the right side panel, to annotated the selected segment with the label displayed in the button. You will immediately see that the segment is highlighted with the colour associated with the pressed button (Figure 10). By clicking on the text, the corresponding button will be also highlighted. (Figure 11).
+
+* **STEP 3**: Save (or delete) the annotation. All the annotations are saved temporarily so that they will not be lost. To save them permanently, click on the `Save Annotations` button on top right of the window (Figure 9). To delete an annotation, click on the annotated text and then on the `Delete Annotation` button on top right of the window.
+
+{{< img "/images/screenshots/online/segment.png" "Figure 10: To annotate the `or barely` with `Reason` select the phrase and then press the button of `Reason`." auto >}}
+
+{{< img "/images/screenshots/online/segment-button.png" "Figure 11: Pressing on the annotated segment (to select it with the mouse), the button of the associated value is also highlighted." auto >}}
+
+The `Annotation Visualiser` tab provides information about each annotation such as the ID of the annotation, the span (start/end of the annotated segment, in character offset for the start of the document), the creator and the creation/update timestamps. You can navigate wither by pressing on the list of the right-hand side or within the text.
+
+{{< img "/images/screenshots/online/annotation-visualiser.png" "Figure 12: The Annotation Visualiser." auto >}}
+
+## 5. Document Attributes
+
+Besides from annotating a document you can also fill-in several data metadata by selecting the tab `Document Attributes` as shown in the figure below. The metadata for this particular annotation schema include:
+
+1. The Document Title
+2. The Document Synopsis
+3. The Relations/Conditions/Bipolarities
+4. The Ideas/Values/Messages
+5. The Emblematic/Archetypical Timeless Values
+6. The Entities/persons
+7. The Interpretation/Content
+8. Relevant values in other (similar or not) texts
+9. Comments
+
+{{< img "/images/screenshots/online/annotation-attributes.png" "Figure 13: Document Attributes." auto >}}
+

content/en/docs/Getting started/what-is.md

@@ -0,0 +1,15 @@
+---
+weight: 1
+categories: ["Get Started"]
+tags: ["ellogon", "info", "docs"]
+title: "What is the Ellogon Annotation Platform?"
+linkTitle: "What is"
+description: >
+  
+---
+{{% pageinfo %}}
+Available for direct use at: **[annotation.ellogon.org](https://annotation.ellogon.org)** | **[annotation.vast-project.eu](https://annotation.vast-project.eu)**\
+Old version (Angular JS): **[clarin.ellogon.org](https://clarin.ellogon.org)**
+{{% /pageinfo %}}
+
+{{% readfile "_what-is.md" %}}

content/en/docs/_index.md

@@ -1,4 +1,3 @@
-
 ---
 title: "The Ellogon Annotation Platform"
 linkTitle: "Documentation"
@@ -13,40 +12,16 @@ menu:
 
 ## What is the Ellogon Annotation Platform?
 
+{{% pageinfo %}}
 Available for direct use at: **[annotation.ellogon.org](https://annotation.ellogon.org)** | **[annotation.vast-project.eu](https://annotation.vast-project.eu)**\
 Old version (Angular JS): **[clarin.ellogon.org](https://clarin.ellogon.org)**
+{{% /pageinfo %}}
 
-The Ellogon Annotation Platform is an **open-source**, **free** to use, **customisable** data annotation tool - in the cloud!
-
-The Ellogon Annotation Platform is a tool for annotating (or labelling) and exploring multiple types of data, with a focus on simplicity, ease of use, extensibility, reliability, productivity and high performance. 
-
-You can perform different types of labeling with many data formats, especially with formats that encode text and annotation for tasks that relate to natural language processing (NLP). The Ellogon Annotation Platform provides a plethora of Annotation Schemas (encoded in [XML](https://en.wikipedia.org/wiki/XML)) for many NLP tasks (document classification, part-of-speech tagging, named-entity recognition and classification, (aspect & document based) sentiment analysis and polarity detection, argument mining, etc.), while new, user-generated, Annotation Schemas can be providing, extending applicability to new tasks, corpora, and annotation needs.
-
-Due to a recent (2021-2022) migration of its backend from [Laravel](https://laravel.com/) ([PHP](https://www.php.net/)) to [Django](https://www.djangoproject.com/) ([Python](https://www.python.org/)), enables the ability to integrate **machine learning** models to supply predictions for labels (**pre-annotation**), or perform continuous active learning. See [seting up machine learning with annotation](#).
-
-Finally, the Ellogon Annotation Platform provides many facilities and tools for visualising annotations and performing comparisons among multiple annotators. See the [platform features](#) for more.
+{{% readfile "Getting started/_what-is.md" %}}
 
 ## Annotation Workflow
 
-The Ellogon Annotation Platform offers two deployment channels:
-
-1. **Online, Cloud Services**: This usage type does not involve any form of installation process; users can start using the Ellogon Annotation Platform immediately.
-
-2. **Offline, On-Premise**: In this case, users must download and install the platform on a server of their choice, using technologies such as containers.
-
-Beyond the installation process, which is required only for the second deployment channel (2.), the following steps are typical in an annotation workflow, as supported by the Ellogon Annotation Platform:
-
-1. **Create Accounts**: The annotation team (including the annotators and the process managers) must register with the platform.
-
-2. **Define the Annotation Schema**: A suitable (for the task) annotation schema (from existing available schemas) must be selected. Alternatively, a new annotation schema must be defined (in XML), if task requirements exceed available schemas capabilities.
-
-3. **Import Data**: The data to be annotated must be imported into the platform. Any annotation team member can import data, and can select the rest of the team members that data can be shared.
-
-4. **Annotate Data**: Each annotation team member annotates the data assigned for annotation. Annotation can be collaborative (multiple annotators work simultaneously on data) or stand alone (each annotator creates its own annotation set over data).
-
-5. **Review Annotation**: Annotations from multiple annotators can be visualised, and compared to identify differences (and even correct inconsistencies to retrieve a "gold" annotation). Standard metrics (like inter-rater agreement) can be automatically calculated.
-
-6. **Export Annotated Data**, for further sharing/processing outside the platform.
+{{% readfile "Getting started/_annotation-workflow.md" %}}
 
 ## Ellogon Annotation Platform Concepts
 

layouts/shortcodes/img.html

@@ -0,0 +1,38 @@
+{{ $numOfParams := len .Params }}
+{{ if and (ge $numOfParams 2) (le $numOfParams 5) }}
+{{ if .IsNamedParams }}
+{{ $.Scratch.Set "file" (.Get "file") }}
+{{ $.Scratch.Set "alt"  (.Get "alt") }}
+{{ $.Scratch.Set "width" (.Get "width") }}
+{{ $.Scratch.Set "opacity" (.Get "opacity") }}
+{{ else }}
+{{ $.Scratch.Set "file" (.Get 0) }}
+{{ if ge $numOfParams 2 }}
+{{ $.Scratch.Set "alt" (.Get 1) }}
+{{ else }}
+{{ $.Scratch.Set "alt" "" }}
+{{ end }}
+{{ if ge $numOfParams 3 }}
+{{ $.Scratch.Set "width"  (.Get 2) }}
+{{ else }}
+{{ $.Scratch.Set "width" "100%" }}
+{{ end }}
+{{ if ge $numOfParams 4 }}
+{{ $.Scratch.Set "opacity"  (.Get 3) }}
+{{ else }}
+{{ $.Scratch.Set "opacity" "100%" }}
+{{ end }}
+{{ end }}
+
+{{ $file := $.Scratch.Get "file" }}
+{{ $type := $.Scratch.Get "type" }}
+{{ $alt  := $.Scratch.Get "alt" }}
+{{ $opacity := $.Scratch.Get "opacity" }}
+{{ $width  := $.Scratch.Get "width" }}
+{{ $text  := $.Scratch.Get "text" }}
+
+<span class="post-img" style="width:{{ $width }};">
+    <img src="{{ $file }}" style="width:{{ $width }}; opacity:{{ $opacity }}" alt="{{ $alt }}" />
+    <p>{{ $alt }}</p>
+</span>
+{{ end }}